Sådan opretter du din egen hjemmeside

Et grundlæggende websted kan designes ved hjælp af HyperText Markup Language (HTML). Skripterne kan skrives i Notesblok eller et tekstdokument, afhængigt af hvilket operativsystem du bruger. De meget grundlæggende værktøjer til oprettelse af et websted starter med brug af HTML- tags og HTML- elementer . De førstnævnte bruges ofte til at videregive oplysninger om indholdets indhold, og sidstnævnte bruges til at formatere værktøjer til websiden. Under kodning bruges HTML- attributter og -værdier til at give oplysninger som placering, højde osv. For indholdet. Udover disse kan man bruge farvekoder, billedkoder og HTML- divisionskoder til at oprette en levende webside.

Sådan opretter du din egen hjemmeside

  • Hvad er HTML?
  • Krav
    • Eksempel 1:
  • HTML-tags
  • HTML elementer
  • Grundlæggende HTML-tags at huske
    • Eksempel 2
  • HTML-attributter og -værdier
    • Eksempel 3
  • Farve Tags
    • Eksempel 4
  • Tekstformatering
    • Eksempel 5
  • HTML Division Tags
    • Eksempel 6
  • Billedmærker
    • Eksempel 7
  • Linking Tags
    • Eksempel 8
  • Bordetiketter
    • Eksempel 9
  • HTML Frame Tags
    • Eksempel 10
  • WYSIWYG Software

Når du opretter en hjemmeside, vælger mange mennesker ofte at få en webdesigner til hjælp. Der er dog enkle måder at lære at lave en grundlæggende hjemmeside på, og de vil blive forklaret i denne artikel.

Hvad er HTML?

For at oprette en hjemmeside skal du lære det grundlæggende i HTML. HTML er akronym for HyperText Markup Language, som er det programmeringssprog, der bruges til at oprette hypertekstdokumenter på World Wide Web. Sproget består af et sæt koder og symboler, der vil generere tekst, billeder, lyde, rammer og animation på dine browsersider.

To almindelige måder at starte din hjemmeside på er:

  • Opret dine egne koder i en simpel teksteditor og gem dem som en .htm-fil
  • Brug af HTML generator software

Krav

For dem, der bruger Windows, skal du starte med at åbne et nyt notesblokdokument .

For dem, der kører MAC, skal du åbne et nyt SimpleText- dokument.

For OSX- brugere skal du åbne TextEdit og foretage følgende ændringer:

1. Åbn din "Format" -menu og vælg "Almindelig tekst"

2. Åbn "Preferences" -vinduet under menuen "Tekstredigering" og vælg indstillingen "Ignorer rige tekstkommandoer i HTML-filer".

Eksempel 1:

Når du har dit blanke dokument, kan du starte med at indtaste:

Dette er titlen på din side
Det er her, hvor alt dit indhold vil blive vist

Bemærk:

1. Gem altid dine dokumenter med en .htm eller html-udvidelse for at vise dem i din webbrowser. (fx index.htm).

2. For at redigere dit kildedokument skal du vælge "View" på din værktøjslinje i browservinduet og vælge "Source".

3. Glem ikke at gemme alle ændringer i dit dokument.

4. For at se de ændringer, der er foretaget i dokumentet i browservinduet, skal du opdatere siden ved hjælp af F5-tasten.

HTML-tags

En HTML-tag er defineret som en markering, der tilføjes i et HTML-dokument for at give mere information om indholdet. En HTML-kode sættes i mellem parenteser og har brug for en lukkekode. (f.eks ).

HTML elementer

Elementer er markup tags, der bruges til at formatere nogle sektioner på en webside. Et eksempel på et HTML-element er tagget, der bruges til at udvise den tekst, der vises i browseren.

bruges til at fortælle din browser, at filen består af HTML-kodede data. bruges i slutningen af ​​dokumentet til at fortælle din browser, at HTML-indholdet slutter der.

indeholder den første del af dokumentet og er hvor titlen på din browserside vil blive fundet. Det kan også indeholde de kommandoer, der bruges til at formatere visningen af ​​din browser (f.eks. CSS-opkald). bruges til at afslutte dette afsnit. Denne del vises ikke i din browser.

vil blive brugt til at mærke dit website. bruges derfor til at angive slutningen af ​​den kommando.

definerer alt indhold, der vil blive vist i din browser.

Grundlæggende HTML-tags at huske

Overskrifter

Overskrifter bruges til at angive emnet for følgende indhold på din webside. I HTML kan de variere i størrelse, fra

Stk

Afsnit bruges til at adskille tekstblokke på din webside. I HTML defineres de med

tag. Et afsnit vil have et åbent tag

og en afsluttende tag

.

  • Dette afsnit har defineret HTML-tags

Line Breaks

I HTML, kræver linjeskift IKKE en lukkekode. Derfor er de simpelthen defineret med

tag.

  • Dette afsnit har defineret HTML-tags

Kommentarer

Kommentarer indsættes på en HTML-side for at finde de forskellige afsnit på en webside af dens designer. De er defineret med tag. Kommentarskoder vises ikke i browseren og kan derfor bruges overalt i dokumentet uden at påvirke websides format.

Eksempel 2 

Alt om HTML
HTML er akronym for HyperText Markup Language

HTML-attributter og -værdier

HTML-attributter er oplysninger tilføjet til elementerne og bruges til at indeholde en bestemt karakteristik for HTML-elementerne. HTML-attributter skrives altid sammen med en værdi (f.eks. Navn = "værdi" ) og sættes i starten af ​​et HTML-element.

Hvis du f.eks. Vil have overskriften placeret i midten af ​​din side i stedet for at blive vist til venstre som standard, kan du tilføje justeringsattributten til taggen:

  • HTML er akronym for HyperText Markup Language

    Farve Tags

    Farvekoder giver dig mulighed for at ændre farven på den tekst, der vises i browservinduet. er et eksempel på, hvordan du ændrer tekstfarven, hvis du ønsker det.

    I HTML kan du også bruge farvekoder til at opnå bestemte farver ved hjælp af hexadecimale koder. Såkaldte hexadecimale triplets svarer til farverne rød, grøn og blå (RGB). Derfor vil farvemærket i hexadecimal se noget ud . Du kan få farvekoder og navne ved at følge dette link: //www.computerhope.com/htmcolor.htm

    Du kan også bruge farvekoder til at ændre baggrundsfarven på dit website ved at tilføje BGCOLOR- attributten. derfor vil ændre baggrundsfarven fra standard hvid.

    Eksempel 4 

    Alt om HTML
    .
    HTML er akronym for HyperText Markup Language

    Bemærk:

    1. Det er tilrådeligt ikke at vælge slående farver som gul eller lyserød til din tekst, da disse farver har tendens til at være forstyrrende for øjnene

    2. Prøv også at bruge maksimalt 4 lidt matchende farvetoner, der svarer til atmosfæren på dit websted for et bedre harmoniserende resultat.

    3. Lav ikke akavet farvekampe som pink tekst på en blå baggrund for formelle hjemmesider, da det vil se underligt ud.

    Tekstformatering

    Tekstformateringskoder giver dig mulighed for at ændre din tekstvisning i browservinduet. For eksempel kan du med fed skrift en tekst bruge tag. (fx Denne tekst vil have en fed skrifttype ). Nedenfor er listen over de almindelige tekstformateringskoder, som du kan bruge til at ændre din tekstvisning:

    1. fed etiket

    Denne tekst vil være fed

    2. Kursiv tag

    Denne tekst er kursiv

    3. Understreget Tag

    Denne tekst vil blive understreget

    4. Fremhæv Tag

    Dette vil understrege din tekst

    5. stærk mærke

    Denne tekst vil være stærk

    6. Big Tag

    Dette vil definere stor tekst

    7. Lille tag

    Dette vil definere lille tekst

    8. Subscript Tag

    Denne tekst bliver abonneret

    9. Overskrift Tag

    Denne tekst vil blive overskrevet

    10. Center Tag

    Denne tekst vil blive centreret

    11. Venstre tag

    Denne tekst vises i venstre side af skærmen

    12. Højre mærke

    Denne tekst vises i højre side af skærmen

    13. Uordnet liste Tag

    • Dette er en uordnet liste

    • Dette er en uordnet liste

    14. Bestilt List Tag

    1. Dette er nummer 1 på min liste

    2. Dette er nummer 2 på min liste

    Bemærk:

    1. Disse tags kan også kombineres. Hvis du vil have en understreget fed tekst, kan du bruge Denne tekst bliver fed og understreget

    2. Luk dog altid det første mærke, du har åbnet sidst. I ovenstående eksempel er er åbnet FØRSTE, før tag, men er blevet lukket sidst.

    Eksempel 5 

    Alt om HTML
    .
    HTML er akronym for HyperText Markup Language
    Sproget består af et sæt koder og symboler, der vil generere:
    • tekst,
    • billeder,
    • lyde,
    • rammer
    • animation på dine browsersider.
    To almindelige måder at starte din hjemmeside på er enten:
    1. at oprette dine egne koder i en simpel teksteditor og gemme dem som en .htm-fil. eller
    2. brug en HTML generator software.

    HTML Division Tags

    Horisontal regel

    Horisontale regler bruges til at opdele eller opdele sektioner på din webside. Det

    tag bruges til at oprette en vandret linje og kan ændres for at skabe forskellige typer af linjer ved at ændre deres størrelse, farve eller bredde.

    F.eks

    eller

    Solid linje

    Det

    tag bruges til at oprette en solid linje. Det ændrer en smule fra det vandrette regelmærke, da det producerer linjen uden 3D-udskæringen, der genereres af
    tag.

    Eksempel 6 

    Alt om HTML
    .
    HTML er akronym for HyperText Markup Language
    Sproget består af et sæt koder og symboler, der vil generere:
    • tekst,
    • billeder,
    • lyde,
    • rammer
    • animation på dine browsersider.
    To almindelige måder at starte din hjemmeside på er enten:
    1. at oprette dine egne koder i en simpel teksteditor og gemme dem som en .htm-fil. eller
    2. brug en HTML generator software.

    Billedmærker

    HTML-dokumenter gør det muligt at indsætte billeder ved hjælp af billedkoder. Du kan enten gennemse et billede fra en online-URL eller fra din egen computer. Billedetiketten står for "billedkilde"; Derfor bør billedbanen defineres efter attributten. Hvis billedet findes i samme mappe som dit kildedokument, behøver du ikke at indtaste hele sti biblioteket.

    F.eks

    eller eller

    Justeringsmærke

    Endnu en gang kan du bruge ALIGN- attributten til at vise billedet enten i midten, højre eller venstre side af din browser.

    EG1

    Bemærk: Det kan dog ske, at din browser ikke understøtter dette tag. Du kan derfor bruge tagget lige før billedtaggen til at centrere dit billede i browseren.

    EG2

    Billedestørrelse

    Størrelsen på dit viste billede kan ændres ved hjælp af attributten WIDTH og HEIGHT. Du kan enten bruge procent eller pixels til at dimensionere dit billede.

    EG1

    EG2

    Billedgrænse

    Hvis du vil indsætte en ramme til dit billede, kan du bruge BORDER- attributten til at gøre det.

    F.eks

    Runaround Space

    Omdrejningsrummet refererer til mellemrummet mellem billedet. Dette er et meget nyttigt tag, når du har tekst omkring dit billede. Den er defineret ved hjælp af VSPACE- attributten til øverste og nederste sider, og HSPACE- attributten bruges til venstre og højre side.

    F.eks

    Eksempel 7 

    Alt om HTML
    .
    HTML er akronym for HyperText Markup Language
    Sproget består af et sæt koder og symboler, der vil generere:
    • tekst,
    • billeder,
    • lyde,
    • rammer
    • animation på dine browsersider.
    To almindelige måder at starte din hjemmeside på er enten:
    1. at oprette dine egne koder i en simpel teksteditor og gemme dem som en .htm-fil. eller
    2. brug en HTML generator software.
    Farvekoder 
    Du kan bruge hexadecimale farvekoder fra Theodora til at oprette din egen hjemmeside atmosfære
    Dette er det eksempel, du har med vspace- og hspace-attributten

    Linking Tags

    I HTML bruges linketiketter til at springe fra en sektion af siden til en anden eller fra en side til en anden. De kaldes interne links, hvis de giver dig mulighed for at springe fra et afsnit eller din egen hjemmeside til en anden og ekstern link, når de åbner et nyt browservindue fra en anden hjemmeside. Den store fordel ved at forbinde tags er, at de giver dig mulighed for at oprette en dynamisk hjemmeside i stedet for at oprette en rullende webside.

    Ekstern link

    viser "Webadresse Link" som et hyperlink på din webside, og når brugeren klikker på teksten, vil den indlæse siden www.webaddress.com

    Intern Link

    Der er to specifikke måder at indsætte et internt link på:

    1. At springe fra den aktuelle side til en anden side på samme websted

    2. At springe fra den aktuelle sektion af siden til et andet afsnit på samme side.

    For at kunne springe fra et afsnit til et andet skal du først give et navn til sektionen, så taget kan finde det, når det bliver kaldt. For eksempel, hvis sektionen vedrørende HTML Links skal indsættes i den øverste del af websiden, lige over overskriften "HTML Links", indsæt taggen . "Links" -værdien henviser til det afsnit, der skal placeres; derfor hvis et afsnit på din webside er baseret på katte, indsæt tagget lige over overskriften for katte.

    Efter denne proces skal du også indsætte det link, som du vil hoppe fra. I dette eksempel skal du indsætte Linking Tags, hvis du vil springe fra toppen af ​​siden til placeringen af ​​"HTML Links", der findes nederst på siden. Den hyperlinkede tekst "Linking Tags" vises, og når brugeren klikker på den, hopper de fra deres aktuelle placering til den angivne sektion.

    Eksempel 8 

    Alt om HTML
    Farvekoder
    Linking Tags
    HTML er akronym for HyperText Markup Language
    Sproget består af et sæt koder og symboler, der vil generere:
    • tekst,
    • billeder,
    • lyde,
    • rammer
    • animation på dine browsersider.
    To almindelige måder at starte din hjemmeside på er enten:
    1. at oprette dine egne koder i en simpel teksteditor og gemme dem som en .htm-fil. eller
    2. brug en HTML generator software.
    Farvekoder 
    Du kan bruge hexadecimale farvekoder fra Theodora til at oprette din egen hjemmeside atmosfære
    Dette er det eksempel, du har med vspace- og hspace-attributten
    Du kan finde en nyttig til at besøge Microsofts hjemmeside ved at klikke på dette link
    Linking Tags 
    Dette afsnit vil diskutere vigtigheden af ​​at forbinde tags på din hjemmeside.

    Bemærk:

    Disse er kun eksempler på hvordan du kan gøre brug af linking tags. Du kan selvfølgelig ændre deres placering for at gøre dit websted mere brugervenligt og attraktivt.

    Målvindue

    Målvinduet indlæser den linkede side i et andet browservindue, så brugeren kan blive på din hjemmesides aktuelle side og se den hyperlinkede adresse i en anden browser.

    Bordetiketter

    Indsætning af tabeller på din hjemmeside kan være meget nyttigt at vise oplysningerne på en velordnet måde. Det giver dig også mulighed for at håndtere din tekst og grafik mere præcist.

    Åbningstaggen

    bruges til at fortælle din browser, at tabellen på siden starter der og slutter med
    tag. Du kan også ændre farve, størrelse og grænsestørrelse på din tabel.

    Bordets størrelse kan ændres ved at bruge

    tag. Du kan enten bruge pixlerne eller procentdelen til at ændre størrelsen af ​​tabellen.

    Du kan bruge tagget

    for eksempel at lave en usynlig grænse i din browser.

    Det

    tag bruges til at skabe et mellemrum mellem teksten og den indre linje af bordets kant.

    Det

    tag bruges til at indsætte et mellemrum mellem den indre og ydre linje af bordets grænser.

    Et bord består af celler, som er defineret af kolonnerne og rækkerne i tabellen. En celle vil være det rum, hvor dit indhold vil blive indsat. Kolonnen Tag er defineret som

    Tags og rækker er defineret som ogtags. For at ændre cellebredden kan du bruge og for at justere en kolonne indsæt tagget
    og
    tag. Størrelsen kan enten angives i procent eller i pixel.

    Du kan også justere dine rækker og kolonner ved at tilføje ALIGN-attributten i dine tags. Derfor kan du indstille tagget for at justere en bestemt række

    For at justere din celle kan du bruge attributten VALIGN .

    		Placer cellen til øverste midten af ​​din side.

    For at spænde over en kolonne kan du bruge tagget

    		for at indstille antallet af kolonner, cellen skal spænde over. Bemærk, at standardværdien er sat til 1.

    Hvis du vil spænde en celle til en række rækker, skal du bruge

    		tag.

    Eksempel 9 

    Alt om HTML
    Farvekoder
    Bordetiketter
    HTML er akronym for HyperText Markup Language
    Sproget består af et sæt koder og symboler, der vil generere:
    • tekst,
    • billeder,
    • lyde,
    • rammer
    • animation på dine browsersider.
    To almindelige måder at starte din hjemmeside på er enten:
    1. at oprette dine egne koder i en simpel teksteditor og gemme dem som en .htm-fil. eller
    2. brug en HTML generator software.
    Farvekoder 
    Du kan bruge hexadecimale farvekoder fra Theodora til at oprette din egen hjemmeside atmosfære.
    Flere tekst kan tilføjes her. 
    Flere tekst kan tilføjes her.
    Flere tekst kan tilføjes her. 
    Flere tekst kan tilføjes her.
    Flere tekst kan tilføjes her.
    Bordetiketter 
    Dette afsnit giver dig flere oplysninger om tabelmærker
     Overskrift
    Dette er en anden del af indholdet
     Kolonne 1 Kolonne 2 Kolonne 3
     Cellebelastning i 3 rækker (2. og 3. fusioneret) Cellebelastning i 2 rækker (1. og 2. celle slået sammen) 1. celle
     2. celle
     3. celle
     3. celle 4. Cell

    HTML Frame Tags

    HTML-rammer giver dig mulighed for at oprette uafhængige vinduer på en webside. De er meget nyttige, da de giver dig mulighed for at vise mere end et dokument på en webside.

    For at gøre brug af rammerne skal du have mindst to forskellige .htm filer, hvoraf den ene vil blive navngivet index.htm . Index.htm filen er hvor alle vinduerne vil blive vist. Rammerne er defineret som og tag bruges til at definere det sæt af rammer, der bruges i index.htm filen.

    Eksempel 10 

    Prøv rammekoderne

    vil oprette størrelsen på de rækker, der vises i din browser.

    vil oprette størrelsen på de kolonner, der vil blive vist i din browser.

    Det tag vil navngive rammen og bruges til at linke dem til hovedvinduet.

    tag bruges til at indstille en ramme til dine rammer. Indstilling af det til 0 sikrer, at det bliver kompatibelt med alle browsere.

    vil indstille et mellemrum mellem de nærmeste rammer.

    vil indstille bredden plads på begge sider af rammerne. Størrelsen skal indstilles i pixels.

    Indstiller størrelsen på toppen og bunden i pixels.

    Det tag vil kunne den lodrette eller vandrette rullepanel på din ramme. Dens værdi skal enten indstilles til "ja", "nej" eller "auto".

    WYSIWYG Software

    Der er softwareprogrammer kaldet WYSIWYG (hvad du ser er hvad du får), som kode for dig, men dette bør ikke stoppe dig fra at lære et minimum af html-koncepter for at undgå ubehagelige overraskelser! Med denne software sætter du teksten og billederne, og softwaren genererer den tilsvarende HTML-kode samtidigt. Det vil også gøre arbejdet lettere at medtage animationer eller scripts. Der er for eksempel:

    Dreamweaver, ikke gratis men meget omfattende og nem at bruge med en vel designet tutorial

    GoLive Photoshop editor

    For gratis WYSIWYG kan vi nævne:

    • Matizha sublim
    • //bluegriffon.org/pages/DownloadBlueGriffon
    • Maguma studio
    • HTML-sæt
    • 1. side 2000
    Forrige Artikel Næste Artikel

    Top Tips