Tutorial:
Del 3: Koderne
Dette er del 3 i en serie, der vil forklare hvordan man bruger en gratis hjemmesideskabelon til at opbygge og offentliggøre et komplet websted. Læs del 1 for en introduktion til tutorialen og del 2 som beskriver hvordan man henter og udpakker en skabelon og finder en editor til dit operativsystem.
I den forrige del af tutorialen, blev Variant Duo skabelonen hentet og pakket ud på din lokale computer, og filstruktur af skabelonen blev forklaret. Nu er det tid til at tage et nærmere kig på koden ved hjælp af en kodeeditor. Hvis du ikke har hentet og installeret nogen kodeeditor endnu, kan du i bunden af denne side finde links til forskellige editore, som du kan bruge. Når du har en editor installeret, åbn index.html i editoren for at komme i gang!
Index.html – Struktur og indhold
Når index.html filen åbnes i en webbrowser, kan du se det fulde skabelon-design med det medfølgende "dummy" indhold. Men når du åbner index.html i en kodeeditor, er dette hvad du vil se:
For at forstå strukturen i HTML-koden, har vi brug for at tage et kig på skabelon-designet og de forskellige dele af det. Variant Duo er en simpel skabelon, som stort set kan siges at have seks grundlæggende hovedafsnit:
1. Website titel.
2. Slogan eller tagline.
3. Navigation menu.
4. Headerbillede.
5. Hovedindholdet.
6. Sidefoden.
Hver af disse sektioner kan findes i HTML-koden, og hvert afsnit (med undtagelse af headerbilledet) kan redigeres direkte ved blot at redigere den tilsvarende HTML-tekst. Men så simpelt som det kan lyde, hvordan er de forskellige dele skrevet i HTML? Vi vil tage et nærmere kig på det snart, men først skal du være fortrolig med, hvad HTML-tags er, og hvordan de fungerer.
Hvad er et HTML tag?
HTML er et kodesprog ("HTML" står for "Hyper Text Markup Language"), og det bruger en række koder, med henblik på at beskrive forskellige former for indhold, der er benævnt »elementer«. Et markup tag er en beskrivende etiket skrevet mellem vinklede parenteser, og hver markup tag består af to dele: et start-tag og et slut-tag. Teksten mellem start- og slut-tag er det element, der er markeret. Her er et eksempel:
<html> Eksempel på HTML kode. </html>
Bemærk, at det afsluttende tag indeholder et '/'. Tag, der anvendes i eksemplet er "html" og det bruges til at definere HTML-dokumenter,
så hvert HTML-dokument skal starte med "html" og slutte med "/html".
Der er en masse forskellige tags til rådighed, og flere forskellige web-standarder med forskellige sæt af tags og forskellige regler for, hvordan de kan anvendes. Variant Duo bruger en standard kaldet XHTML 1.0 Strict. Jeg vil skrive mere om de forskellige standarder i fremtidige indlæg, men du behøver kun at lære et par koder for at komme i gang med at redigere din skabelon. Der er to vigtige ting at huske:
- Alle tags skal skrives med småt.
- Alle tags skal lukkes.
Basis struktur af en HTML fil
Basis strukturen af index.html ser sådan ud:
<html>
<head>
(dette er HEAD sektionen, som indeholder meta tags som beskriver dokumentet)
</head>
<body>
(dette er BODY sektionen, som indeholder det aktuelle synlige side indhold)
</body>
</html>
Indtil videre vil vi ignorerer head-sektionen af koden og fokusere på den del af koden, som findes under <body> tagget.
1. Website title – the <h1> tag
Titlen på skabelonen er »Variant Duo", og den kode, der viser det kan ses på linje 14 i index.html. Koden ser sådan her ud:
<h1>
<a href="index.html">Variant Duo</a>
</h1>
Der er to tags i brug i koden ovenfor. Først og fremmest <h1>, Hvilket er en header tag. Der er seks niveauer af header tags, H1, H2 og så videre ned til H6, hvor H1 er det første niveau. Brugen af header tags i HTML-dokumenter kan sammenlignes med at bruge overskrifter i et almindeligt tekstdokument eller i en bog, så overskrifter bør anvendes i en logisk struktur. Hvis <h1> er i forhold til titlen på bogen, så skulle hvert kapitel have en <h2> overskrift - og under-sektioner af hvert kapitel skulle have <h3> overskrifter.
I Variant Duo, betyder det, at <h1> anvendes til webstedets titel, <h2> bruges til overskrifter på siden, og <h3> bruges til kapiteloverskrifter.
Det andet tag er <a>tag, som er det tag, der anvendes til at skabe links til andre dokumenter (»a« for »anker«). Et link er skabt ved at tilføje en hyperlink reference attribut ("href"), efterfulgt af stien eller URL til det dokument eller side, du vil linke til. I dette tilfælde, peger hyperlinket på selve index.html dokumentet. Ved at lade titel-linket pege på index.html vil du altid være i stand til at vende tilbage til forsiden af din hjemmeside ved at klikke på titel.</a>
Så strukturen i denne del af skabelon designet, er når de ses i kode-mode:
<h1>
(start tag for header)
<a href="index.html">
(start tag for link til index.html)
Variant Duo
(selve teksten til linket, h1 elementet)
</a>
(slut tagget på linket)
</h1>
(slut tag for header)
Nu, uden at foretage nogen ændringer i HTML-tags, kan du redigere teksten "Variant Duo" til noget af dit eget, for eksempel "Min egen hjemmeside!" og derefter gemme dokumentet. Når du åbner index.html i en webbrowser, vil du se, at titlen nu viser den tekst, du har indtastet.
2. slogan/tagline – <p> for "paragraph"
Lige under den linie, du lige har rettet finder du denne kode:
<p class="slogan">Dual-column content template</p>
<p> tagget definerer et tekst afsnit, og har her en klasse attribut med værdien "slogan" tilføjet. Klasser er brugt til at forbinde bestemte tags til forskellige styling definitioner i .css filen, og i dette tilfælde har jeg lavet en speciel stil kaldet 'slogan'. Lad tagget være som det er lige nu, (klasser og CSS vil blive dækket i fremtidige dele af tutorialen), men rediger teksten "Dual-column content template" til noget af dit eget (for eksempel "En side om mine foretrukne emner ..."). Gem filen og åbn den i webbrowseren igen - og dit eget slogan vil være på plads.
Ændringer indtil nu…
Nu, skulle linie 14 og 15 se nogenlunde ud som dette:
<h1><a href="index.html">Min egen hjemmeside!</a></h1>
<p class="slogan">En side om mine foretrukne emner ...</p>
…og i browseren skulle du kunne se dette:
Det næste…
Hvis du er kommet så langt, så vil redigering af andre dele af skabelonen være let! Det er simpelthen et spørgsmål om at blive fortrolig med et par HTML-tags mere. I de kommende dele af tutorialen, vil jeg forklare hvordan man kan redigere navigationsmenuen, headerbilledet, hovedindholdet og sidefoden. Det næste skridt derefter, vil være at lære om brugen af <head> delen af HTML-dokumentet til at beskrive din side, og selvfølgelig hvordan man bruger CSS til design. Jeg vil fokusere på header image i den næste del, samt forklare, hvad HTML-tag attributter er, og hvordan forskellige attributter virker.
Hvis du vil læse mere om det grundlæggende i HTML, før den næste del af selvstudiet, så vil jeg anbefale den fremragende HTML Beginner tutorial på HTMLdog.com. Hvis du har spørgsmål eller kommentarer til denne del (eller HTML generelt), er du meget velkommen til at skrive en kommentar eller send mig en e-mail.
Gå videre…
Fortsæt til del 4…