HTML-vejledning for begyndere

Hvis du ønsker at blive webmaster og lære at oprette et websted, kan du måske finde udsigten til at få styr på HTML ret skræmmende.

Det er dog noget, der ikke kan undgås, da langt de fleste af de websteder, du besøger, vil være skrevet og struktureret ved hjælp af HTML-elementer. Faktisk bruges HTML nu af mere end 74 % af alle kendte websteder, og dette sprog er også med til at forbedre alt fra designet af dit websted til kvaliteten af det indhold, der er på det.

I denne vejledning vil vi undersøge de grundlæggende principper for HTML og dets potentielle anvendelsesmuligheder, før vi ser på eksempler på de enkelte elementer, som du bruger, når du koder dit websted.

Hvad er HTML?

Simpelt sagt repræsenterer HTML standardudmærkningssproget til at skabe websider online. Det står for Hyper Text Markup Language, og dets mest primære funktion er at fastlægge struktur, layout og præsentation af de enkelte landingssider. Selv om webbrowsere ikke direkte viser HTML-sproget, spiller det en central rolle for at hjælpe med at skabe et synligt, tilgængeligt og brugervenligt websted.

HTML understøttes også af en række individuelle elementer, som gradvist opbygger websider, strukturerer præsentationen af indholdet og giver dit websted liv. Disse elementer oprettes og er indeholdt i “tags”, som definerer alternative dele af indholdet såsom overskrifter, afsnit og lignende eksempler.

Vi vil udforske disse elementer og deres opbygning nærmere nedenfor, samtidig med at vi ser på, hvordan de kan personliggøres for at indføre farver, links og variabel typografi på dit websted.

Hvor bruges HTML?

Som vi kan se, er den mest almindelige anvendelse af HTML design af de enkelte landingssider, der udgør dit websted. Dette er dog ikke den eneste anvendelse af det populære kodningsværktøj, men hvis du forstår dets yderligere anvendelsesmuligheder, vil det hjælpe dig med at få mest muligt ud af sproget som ny webmaster. Så her er nogle af de yderligere måder, hvorpå HTML kan anvendes:

• Opret tilpasselige elementer inden for en eksisterende side. Hvis du har til hensigt at tillade kommentarer til blogindlæg eller offentliggørelse af brugergenereret indhold på dit websted, kan du bruge HTML-kodefragmenter til at muliggøre dette. Disse elementer vil gøre det muligt for brugerne at fremhæve nøgleord, indlejre links og formatere kommentarer afhængigt af de begrænsninger, som du har indført som moderator.
• Opret yderligere indhold til e-mail. E-mail bruger også HTML som sprog til rich text-beskeder, der indeholder links, tekst og en række andre elementer, som ikke kan præsenteres i almindelig tekst alene. Så hvis du ønsker at dele en e-bog, der vedrører dit websted, via e-mail, kan du bruge HTML til at optimere effekten af din meddelelse.
• Forstå offline-hjælpsdokumenter, der er installeret på din computer. Interessant nok bruges HTML som format til computerbaserede hjælpedokumenter, der er tilgængelige offline. Grundlæggende kendskab til HTML kan derfor hjælpe dig med at forstå problemer med din hardware og løse dem hurtigere, hvilket igen kan sikre, at du hurtigere kan genoprette dit websted i tilfælde, hvor det er gået offline.

HTML-sidestruktur

Hvor du kan opbygge en html-side, skal du have de grundlæggende elementer på plads.

Typisk vil en side bestå af tre strukturelle elementer:

1. Header: Overskriften indeholder indhold, der er relevant for alle sider på dit websted, f.eks. et logo eller webstedets navn, og et navigationssystem. Overskriften ses på hver side.
3. Hoveddel: Dette optager det største område på en webside. Den indeholder indhold, der er specifikt for den side, der vises.
4. Footer: Indholdet i sidefoden indeholder normalt kontaktoplysninger, en leveringsadresse eller juridiske meddelelser. Ligesom overskriften vises sidefoden på alle sider, men den er placeret nederst.

Sådan ser disse grundlæggende strukturelle elementer ud, når de er samlet:

Her er et andet eksempel, hvor du bruger header-tags og paragraph-taggen til at strukturere indholdet æstetisk. Desuden har vi smidt et footer-tag ind til indhold under hoveddelen af en side:

<html>

<head>

Du kan indsætte tekst eller kode her, f.eks. en
Google Analytics-sporingskode til
eksempel.

</head>

<body>

<h1>Min første overskrift</h1>

<p>Velkommen til mitwebsted!</p>

<footer>

<p>Kontaktoplysninger kan gå her</p>

</footer>

</body>

</html>

HTML-tags

Startpunktet for enhver HTML-kode er de enkelte tags, som kan bruges til at skabe alle vigtige elementer og hjælpe med at strukturere dine websider.

Nedenfor vil vi se på de mest almindelige tags, før vi undersøger, hvordan de kan udnyttes til at generere specifikke elementer på siden:

Heading-tags

Alle onlinedokumenter, herunder websider, begynder med en overskrift. Disse konstrueres ved hjælp af HTML-tags, hvor sproget i øjeblikket giver mulighed for op til seks elementer af varierende størrelse, som også giver dig mulighed for at strukturere dit indhold med yderligere titler, undertitler og fremhævede linjer med fed tekst. For at starte din overskrift skal du blot sætte et <h1> , <h2> , <h3> , <h4> , <h5> eller <h6>-tag foran den relevante tekst, afhængigt af den ønskede størrelse.

Du skal derefter anvende et lukningstag i slutningen af overskriften for at indkapsle teksten, og den vil blive vist som følger i HTML-format:

Når dette er bekræftet, vil det udmønte sig i følgende æstetik på dit websteds landingsside:

Dette er overskrift 2

Dette er overskrift 3

Dette er overskrift 4

Dette er overskrift 5

Dette er overskrift 6

Her er de forskellige størrelser af de variable overskrifter tydelige, ligesom det faktum, at browseren tilføjer en linje før og efter overskriften, også er tydeligt at se. Du vil også bemærke, at det afsluttende tag i slutningen af overskriftsteksten har en lidt anderledes æstetik, men det vil vi behandle i det følgende kapitel, når vi ser på at bruge tags til at definere specifikke elementer.

Paragraph tags

Et lignende princip anvendes på startende paragraph tags, som er afbildet med <p>. Dette giver dig mulighed for at strukturere dit indhold og opdele det i relevante afsnit, hvilket igen udmønter sig i en lettere og mere problemfri læseoplevelse. Igen skal <p>-tagget placeres i begyndelsen af den relevante tekst, inden det alternative lukningstag anvendes i slutningen for at fuldende effekten. I modsætning til overskriftstags er der dog ingen numeriske forskellige, der kan ændre størrelsen af den tekst, der vises i afsnittet.

Uden for HTML-formatet vil dette opdele teksten på følgende måde på din færdige webside:

Line break tags

De første eksempler repræsenterer de mest grundlæggende HTML-tags, men der er andre, der benytter et andet format og alternative afsluttende tager. Tag f.eks. linjeskift, som skaber en skelnen ved hvilken linjer af tekst afbrydes og fortsættes på den følgende linje. Der er en central forskel mellem linjeskift og afsnit inden for HTML, for mens sidstnævnte er standardblokelementer, der indeholder tekst, skaber førstnævnte en adskillelse inden for et eksisterende <p>-element.

På grund af dette repræsenterer linjeskift et tomt element i HTML og er derfor ikke defineret af hverken åbnings- eller lukningstags. I stedet afbildes de af <br />-tagget, som kan indsættes i eksisterende <p>-elementer for at bryde teksten op og potentielt fremhæve vigtige oplysninger. Det enkelte mellemrum mellem tegnet <be> og skråstregen er afgørende, da tagget ellers ikke kan genkendes i HTML-format.

Når dette er anvendt, vil teksten blive opdelt på følgende måde:

Som du kan se, kan du anvende linjeskift så ofte du vil inden for et eksisterende stykkeelement, så længe de tilføjer værdi og gør oplysningerne lettere at fordøje. Du kan også se, at de indledende og afsluttende afsnitstags forbliver uændrede, idet linjeskiftetags bruges til at ændre layoutet af den tekst, der er inkluderet heri.

Dette er et af eksemplerne på, hvordan HTML-tags kan bruges til at ændre eksisterende elementer, hvilket spiller en vigtig rolle i definitionen af det visuelle layout af dine websider og dit indhold.

Horisontale linjer

Sådan er der andre tags, som kan bruges inden for <p>-elementet eller til yderligere at adskille tekststykker på din webside. Et af de mest udbredte er <hr>-tagget, som er med til at skabe et tomt element, der tegner en visuel, vandret linje mellem alternative afsnit i et onlinedokument. Du kan f.eks. ønske at placere en linje mellem to tekststykker for at omfokusere læseren eller blot indføre et nyt visuelt element. Sådan skaber du et sådant brud i HTML:

Her fremhæver bruddet mellem hr-tegnene og den fremadrettede skråstreg konstruktionen af et tomt element, mens der endnu en gang ikke er behov for et lukket tag for at fuldende effekten. Dette vil skabe følgende billede:

Billedtags

Billedtags repræsenterer også tomme elementer i HTML, hvilket igen betyder, at de ikke har et afsluttende tag. Da de kun indeholder attributter, der relaterer til URL’en for det billede, som du indlejrer på webstedet, defineres de blot ved hjælp af <img >-tagget i begyndelsen af elementet. De kan placeres hvor som helst på dit websted, selv om det er usædvanligt at inkludere dem i eksisterende elementer som f.eks. afsnit eller overskrifter. Sådan vil et typisk HTML-billedtag præsentere sig selv:

<img src=”url” alt=”some_text” style=”width:width;height:height;”>

Du bør også angive en alternativ tekst til dit billede, som hjælper folk med at se det i tilfælde af langsomme indlæsningstider eller ved brug af skærmlæser. Hvis browseren ikke kan finde et billede, vil den på denne måde vise værdien af den alternative attribut til seerne, hvis den ikke kan finde billedet. Dette bruger igen image-tagget, men indeholder et andet sæt attributter:

HTML-elementer

Herfor har vi set på, hvordan simple HTML-tags bruges til at definere elementer på siden, samtidig med at vi har undersøgt, hvordan de kan tilpasses yderligere ved at bruge tomme elementer, der indeholder billed- og linjeskiftetags. Dette hjælper os til at forstå forholdet mellem tags og elementer, og hvordan de kan bruges til at definere forskellige typer indhold på dit websted.

Selv om alle aspekter af HTML-sproget er repræsenteret af et tag, skal et defineret element, der indeholder indhold, f.eks. have både et start- og et sluttag. Så overskrifter og afsnit er HTML-elementer, fordi de bruger start- og sluttags til at indkapsle og supplere den relevante tekst. I modsætning hertil indeholder tomme elementer enten attributter eller intet indhold overhovedet, hvilket gør det muligt at bruge dem inden for eksisterende elementer uden behov for et lukketag.

Definition af HTML-elementer

Når man bruger eksempler som overskrifter og afsnit, er den korrekte anvendelse af start- og lukketag afgørende. Det er starttagget (som f.eks. <h1> eller <p>), der definerer det pågældende element, mens sluttagget sikrer, at dette element ikke fortsætter på resten af websiden. Hvis man undlader at bruge det afsluttende </ p>-tag i slutningen af et ønsket afsnit, vil teksten f.eks. blive vist i en enkelt blok, der er grim og yderst vanskelig at læse.

Alle afsluttende tags er identiske med starttags bortset fra, at førstnævnte har en skråstreg foran de relevante tegn. Så i tilfælde af en <h1>-overskrift vil det afsluttende tag være </ h1> , mens du for afsnit altid vil bruge </ p> for at definere tekstbruddet. Dette kræver opmærksomhed på detaljerne under kodning, og det er vigtigt at bemærke, når du programmerer overskrifter, at det nummer, du bruger (f.eks. h1 eller h2), anvendes både i start- og sluttagget.

Anvendelse af indlejrede HTML-elementer

På dette tidspunkt er det tydeligt at se, at HTML-dokumenter og websider består af et træ af forskellige elementer, der tjener som byggesten for en række aktiver. Vi har også set på, hvordan disse elementer kan dannes og bruges til at strukturere online-indhold, og det fortsætter vi nu med at se på nested HTML-elementer.

Sådan som tomme elementer og enkeltstående tags (som <br / >kan indarbejdes i definerede HTML-elementer, kan såkaldte nested-elementer også rummes i indhold som f.eks. overskrifter og afsnit. Disse omfatter eksempler som fede og kursive bogstaver og understregede tekster, mens de kan anvendes til at give dit indhold personlighed og henlede læserens blik på bestemte interessepunkter.

Fed, kursiv og overstreget tekst i HTML

Lad os sige, at du ønsker at fremhæve et ord i et eksisterende afsnitelement. Det kan du opnå ved at gøre det fed ved hjælp af enkle tags inden for standardelementet <p>. Ved hjælp af HTML programmerer du dette således:

<p>Jeg ønsker, at <b>dette</b> ord skal være fed. </p>

Her har det indlejrede element både et start- og et sluttag, som hver især følger et format, der svarer til dem, der er forbundet med overskrifter og afsnit. De kan bruges problemfrit inden for eksisterende elementer, og i dette tilfælde vil det give følgende resultater:

Så lad os nu sige, at du også gerne vil ændre typografien for dette ord, så det også er kursivt. Dette kan opnås ganske enkelt ved at tilføje endnu et indlejret element, som skal kodes på denne måde:

Som du kan se, er det indledende og afsluttende kursivtag simpelthen blevet inkorporeret i <p>-elementet. Dette vil nu omdanne indholdet i elementet, så det ser ud som følger:

Du kan naturligvis beslutte, at du vil foretrække at fremhæve dette ord på en anden måde. Du kan derfor bruge et alternativt indlejret element, f.eks. gennemstregning (som repræsenteres af <s>- og </s>-tags. Disse tags kan anvendes på samme måde inden for <p>-elementet og vises på følgende måde i HTML:

I dette tilfælde vil teksten blive vist som følger på dit dokument eller din landingsside:

Dette giver et indblik i de elementer, der kan dannes af tags, som igen definerer strukturen på dine websider og det indhold, som de indeholder. Ikke alene dette, men tomme og indlejrede elementer kan også bruges til at definere dit indhold yderligere.

HTML-attributter

Hvis tags er de byggeklodser, der konstruerer og definerer elementer, kan HTML-attributter bruges til at tilpasse deres egenskaber (f.eks. stil, farve og sprog. Alle HTML-elementer har kerneattributter, som giver centrale oplysninger og altid er specificeret inden for stat-tagget. De har tendens til at komme parvis, så de vil ofte fremstå i følgende format: name=”value.”

Simpelt sagt repræsenterer navnet den egenskab, som du ønsker at indstille, mens værdien vedrører de specifikke kriterier, som du ønsker at indarbejde.

Der er et stort antal attributter, der kan anvendes på dine HTML-elementer, men de, der er mest relevante for nybagte webmastere, er:

Attributten “lang”

Den enkelte mest grundlæggende attribut definerer sproget i dokumentet og dets elementer. Det angives ved hjælp af ‘lang’-attributten, og selv om den let bliver overset, har den den fordel at gøre indholdet mere tilgængeligt for skærmlæsere og søgemaskiner. Den vil normalt blive præsenteret i begyndelsen af dokumentet i følgende format:

<html lang=”en-US” >

I forlængelse af lang-attributten angiver de to første bogstaver sproget (som i dette tilfælde er engelsk). Efter bindestregen fastlægger de næste to bogstaver dialektet, selv om dette ikke vil være til stede for alle sprog. Det er vigtigt, at du får denne attribut korrekt, hvis du skal have succes med at nå ud til dit publikum.

Attributten “align”

Vi har allerede berørt formatet for HTML-attributter (name=”value”), og den bedste udmøntning af dette sker, når du forsøger at justere indholdet i dine elementer. Du kan f.eks. beslutte dig for at centrere alle afsnit på en bestemt side, hvor alignment er den egenskab, som du ønsker at indstille. Efterfølgende er “center” værdien af attributten, selv om du har valget mellem at justere din tekst til venstre eller højre.

Dette vil justere dine <p>-elementer i midten af siden og skabe et ensartet layout, der passer til den særlige karakter af dit websted (se nedenfor):

Attributten ‘href’

Hvis du vil opbygge et synligt websted, er det vigtigt, at du indarbejder både indgående og udgående links. Opbygning af en linkportefølje, der omfatter backlinks til interne landingssider, er også en levedygtig strategi, så du skal lære at kode disse i HTML.

HTML-links defineres med <a>-tagget, som omfatter destinationslinket sammen med den tilknyttede ankertekst, der skal huse URL’en. Det er ‘href ‘ attributten, der angiver webstedets adresse, men denne er dog indarbejdet som en del af start-tagget. Det er kodet i HTML på følgende måde:

Dette fremhæver tydeligt forskellen mellem start- og sluttagget og vil oversættes som følger på din landingsside:

Attributten “color”

Dette er en anden vigtig attribut, da brugen af farver kan puste liv i dit websted og samtidig bidrage til at skabe vigtige kontraster og en stærk designæstetik. I HTML kan en farve angives ved hjælp af dens navn, selv om det også er muligt at bruge en RGB- eller HEX-værdi til at nå dette mål. Førstnævnte mulighed er dog den nemmeste at følge, mens den også kan anvendes på overskrifter, afsnit og andre elementer på din side.

Dette er en stilattribut, hvor dit valg af farve repræsenterer den værdi, som du ønsker at indstille. Når du anvender farven rød på hovedoverskriften, vil det f.eks. se således ud:

<h3 style=”color:red”>Tekstfarve indstillet ved hjælp af rød</h3>

Når dette element er anvendt, vil det se ud som følger på dit websted:

Tekstfarve indstillet ved hjælp af rød

Efter som sagt er der en klar forskel mellem de indledende og afsluttende tags, der definerer elementet, mens dette er en af de letteste attributter at anvende i HTML. Det fremhæver også yderligere name=”value-formatet for HTML-attributter, hvilket gør processen med at lære og anvende disse meget nemmere på hele dit websted.

Test det selv

Med en grundlæggende forståelse af HTML og de enkelte elementer er det næste skridt at gennemføre nogle enkle projekter og anvende din teoretiske viden til at løse praktiske udfordringer.

I nedenstående øvelse har vi præsenteret en tekst undtagen og bedt om at formatere forskellige aspekter ved hjælp af HTML. Brug vejledningen og alt det, du har lært indtil videre, til at løse udfordringen, mens du forbereder dig på at kode dit eget websted.

Spørgsmål:

1. Udfyld header-elementet med det korrekte lukketag.
2. Gør headeren fed.
3. Indsæt en vandret linje under headeren.
4. Brug farveattributten, og skygger “Tak for besøget” i grøn
5. Indsæt dette hyperlink (https://www.w3schools.com/html/) i ankerteksten “Læs mere.”
6. I sidens hoved skal du bruge formatet name=”value” til at venstrejustere afsnittene

HTML-sprogstatistik og fakta

1. H HTML-, head- og body-elementerne har været en del af HTML-specifikationen siden midten af 1990’erne, og indtil for få år siden var de de primære elementer, der blev brugt til at give struktur til HTML-dokumenter. Situationen har imidlertid ændret sig dramatisk i de sidste par år, da HTML5 har tilføjet en masse nye tags, der kan bruges til at tilføje rig semantisk betydning til strukturen i et HTML-dokument.
2. HTML-dokumenter skal starte med en dokumenttypedeklaration (uformelt en “doctype”). I browsere er doktypen med til at definere renderingstilstanden. HTML5 definerer ikke en DTD; derfor er doctype-deklarationen i HTML5 enklere og kortere.
3. Mobilbrowsere har fuldt ud taget HTML5 til sig, så det er lige så nemt at skabe mobilklare projekter som at designe og konstruere til deres mindre touch screen-skærme – derfor er responsivt design så populært. Der er nogle gode metatags, som også giver dig mulighed for at optimere til mobiler.
4. 78 % af indholdsudviklerne er enige i, at strukturen er velegnet til at skabe mobilapps, og 68 % siger, at den er velegnet til at designe alle slags apps.
5. HTML5 leveres også med et væld af fantastiske API’er, der giver dig mulighed for at opbygge en bedre brugeroplevelse og en kraftigere, mere dynamisk webapplikation – her er en hurtig liste over native API’er:
   • Drag and Drop (DnD)
   • Offline storage database
   • Browser history management
   • Document editing
   • Timed media playback
6. HTML5 er ikke kontrolleret af ét firma. En af dets bedste egenskaber ligger i det faktum, at det er en åben standard. Udviklerne har frihed til at lade deres kreativitet få frit løb og tilføje så mange funktioner og egenskaber, som de overhovedet kan.
7. I forhold til andre browsere sørger hver Google Chrome-opdatering for at inkludere understøttelse af HTML5. Desuden er YouTubes standardafspiller nu HTML5, og Googles Flash-annoncer bliver nu konverteret til HTML5.
8. Udviklernes brug af HTML5 (efter område):
   • Nord- og Latinamerika – 70 %
   • Sydamerika – 61 %
   • ASPAC – 60 %
   • Australien – 60 %
   • Europa – 59 %
   • Afrika – 59 %
   • Afrika – 60 %
   • Afrikas 50%

Slutning

Mens HTML først blev skabt så sent som i 1991 (og den første version af kodningssproget blev lanceret i 1995), er det hurtigt blevet et vigtigt redskab i forbindelse med udformningen af funktionelle og visuelt tiltalende websteder. HTML’s indflydelsesniveau fortsætter også med at udvikle sig, og den seneste iteration (HTML5) er blevet vedtaget af et stigende antal websteder over hele verden.

I denne henseende er det at lære de grundlæggende elementer i HTML og hvordan man anvender dem det vigtigste skridt, du vil tage for at etablere et vellykket, synligt og i sidste ende konkurrencedygtigt websted.