Tutorial:
Del 4: Indhold og billeder
Dette er del 4 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 og del 3 som forklarer hvordan man redigerer index.html.
I den sidste del, blev de første ændringer tilføjet index.html. De forskellige dele af HTML-filen blev defineret og titel og slogan er blevet ændret. Nu er det tid til at redigere indholdet af skabelonen og ændre headerbilledet til et af dine egne billeder. Og når det er gjort, kopiere skabelonen til flere filer for at gøre det til en hjemmeside i stedet for blot en enkelt side - samt skabe navigationsmenuen til de forskellige sider. Her er en påmindelse om, hvordan de forskellige dele af siden ser ud:
Numrene repræsenterer de følgende sektioner:
1. Website titel.
2. Slogan eller tagline.
3. Navigation menu.
4. Header billede.
5. Hoved indholdet.
6. Sidefoden.
Jeg vil springe navigationsmenuen over lige nu og hoppe til headerbilledet. Men først et par ord om attributter i HTML-tags...
Et HTML-elements anatomi
Tidligere i tutorialen beskrev jeg, hvad et HTML-tag er. I denne del vil vi arbejde mere med en bestemt del kaldet attributter. Et HTML-element typisk består af følgende dele:
<tag attribute="value">indhold</tag>
Attributter er et sæt af navne-værdi muligheder, og forskellige koder anvender forskellige attributter. Til hjemmeside titlen skabte vi et link med denne kode:
<h1><a href="index.html">Min egen hjemmeside!</a></h1>
I koden ovenfor, har anker tagget en hyperlink reference attribut (href) med værdien "index.html". href attributten virker kun med <a>tag, så det kan ikke anvendes på <h1> tag direkte. I modsætning til tekst indhold, vises attributter ikke, når siden vises i webbrowseren. De er en del af strukturen, som definerer, hvordan et HTML dokument skal virke. Du vil redigere flere attributter snart, så hold denne forskel i tankerne.
Oprette en mappe til dine billeder
Headerbilledet er vist ved hjælp den følgende kode i index.html:
<img class="feature" src="sample1.jpg" width="980" height="200" alt="sample image"/>
Hvad denne kode gør, er at kigge efter en fil ved navn 'sample1.jpg' i den samme mappe som index.html ligger i. Du kan linke til billeder fra andre steder samt ved at give en fuld URL til en billedfil, som denne:
<img class="feature" src="http://yourdomain.com/images/sample1.jpg" width="980" height="200" alt="sample image"/>
Billed-kilden er opført ved hjælp af src attribut med stien til billedet som værdi. Ved hjælp af en komplet URL sti kaldet »absolutte«, hvilket betyder, at billed-kilden er en defineret fil på et bestemt sted. Brugen af en reference til en fil uden at give en fuld URL kaldes »relative«, da linket er i forhold til den HTML-side, der kalder det. Med andre ord er header-billedet relativ i skabelonen i forhold til HTML-filen. Det gode ved dette er, at billed-linket fungerer efter hensigten uanset om din hjemmeside er placeret på din computer eller offentliggjort på internettet. Hvis du bruger en visuel editor og indsætter et billede, er stien til billedfilen undertiden opført som en absolut sti, der peger på filen på din computer, og hvis stien ikke er ændret, når hjemmesiden er offentliggjort på internettet, er billedet (eller hvad der er forbundet), vil kun virke på din lokale computer. Jeg anbefaler normalt at bruge relative links, hvis muligt, så stien til headerbilledet vil ikke have en fuld URL i denne tutorial.
Men for at gøre din hjemmeside nemmere at håndtere, kan det være en god idé at lægge alle billeder i en separat billed-mappe. For at gøre dette, åbnes skabelon-mappen og der oprettes en ny mappe inde i den. Giv mappen eventuelt navnet 'billeder' og flyt sample1.jpg billedfilen ind i den. Dette vil få billedet linket i skabelonen til stoppe med at virke, så HTML-koden skal redigeres med den korrekte sti. Igen, i forhold til index.html. For at korrigere HTML, skal du blot tilføje "billeder/" før filnavnet. Det skal se sådan her ud:
<img class="feature" src="billeder/sample1.jpg" width="980" height="200" alt="sample image"/>
Gem index.html, og billedet vil vises igen i webbrowseren. Nu har du en billed-mappe, hvor dine fremtidige billeder, som du føjer til din hjemmeside, kan lagres.
Tilføje dit eget header-billede til skabelonen
Som det ses i HTML-koden ovenover, har header-billedet en defineret størrelse målt i pixels ved hjælp af to attributter: bredde og højde. Bredden (width) er 980 pixels og højden (height) er 200 pixels. Disse værdier kan ændres, hvis du ønsker at bruge en anden størrelse. Men bredden af billedet er justeret til at passe til bredden af layoutet, så eventuelle ændringer, kræver en ændring af layout bredde i CSS-fil. Jeg vil forklare hvordan man kan ændre layout bredde i den sidste del af tutorialen, men for nu vil jeg holde bredden som den er og kun ændre højden. Det betyder, at det billede, der indsættes, kan være nødvendigt at justere i størrelse ved hjælp af et billedredigeringsprogram. Jeg ønsker at tilføje en fotocollage, som jeg lavede for et par år siden, men billedestørrelsen af mit valgte billede vil ikke passe, så billedet skal skaleres og beskæres. Her er den oprindelige fil:
Efter mindskning af billedet, beskar jeg det til et billede, der måler 980 x 300 pixels. Resultatet ser sådan ud:
Dette beskårne billede gemmes med filnavnet "header.jpg" i "billeder"-mappen, der blev oprettet for et øjeblik siden. For at placere det nye billede, det rette sted i skabelonen, skal HTML-koden opdateres, således at stien til billedfilen har det rigtige navn. Også højden (height) skal ændres fra '200 'til '300'.
Der er også en attribut kaldet 'alt', som bør medtages for alle billeder, der vises i HTML-koden. 'Alt' tekst er en funktion, der beskriver, hvad billedet viser, noget der er godt af flere grunde. For eksempel besøgende som syns-handicappede, der bruger skærmlæsere (software, der læser indholdet af hjemmesider op ved hjælp af talesyntese) på dit websted vil være i stand til at vide, hvad dit header-billede viser, da skærmlæseren læser alt-teksten op. Den alternative tekst bruges også af søgemaskiner, så den beskrivelse, du skriver, vil gøre billedet søgebart.
Som standard, siger alt-teksten i Variant Duo skabelon "sample image". For at beskrive det billede jeg lige har oprettet, ændrede jeg alt-teksten til »Fotocollage der viser landsbyen Nautijaur, det nordlige Sverige, om sommeren og om vinteren«. Ændringerne resulterer i følgende kode:
<img class="feature" src="images/header.jpg" width="980" height="300" alt="Fotocollage der viser landsbyen Nautijaur, det nordlige Sverige, om sommeren og om vinteren"/>
...Og når den vises i en webbrowser ser skabelonen nu sådan ud:
Du kan klikke på billedet ovenfor for at hente skabelonen som den ser ud på dette tidspunkt, med de ændringer, der er blevet lavet hidtil.
Selv-lukkende HTML tags
Som beskrevet i en tidligere del af skabelonen, skal alle HTML tags have et start-tag og et slut-tag. Så hvorfor har <img> tag ikke et afslutnings-tag som </img>? Årsagen er, at der er et par tags, som kan bruge en genvej.
Tags, der ikke indeholder noget tekst-indhold kan lukkes ved at afslutte tag med </>. Disse mærker kaldes selvlukkende tags, og de mest almindelige er <img>, <meta> og tag der bruges til at skabe linjeskift i tekst, <br />). Du kan bruge almindelig slutkoder som </img>, men jeg foretrækker at lukke tags direkte da det holder koden kortere.
Nogle få ord om class="feature"
Den sidste del af header-billedets tag, som jeg ikke har beskrevet endnu er klassens attribut. Klassen og id-attributter bruges til at forbinde et mærke til CSS-filen, hvor mærket kan gives forskellige stilarter. Klassen attribut i <img> har værdien "feature", hvilket svarer til linje 28 i variant-duo.css filen. "feature" klasse i CSS (kaldet .feature i variant-duo.css) viser en hvid streg (2 pixels) over billedet, og en lignende linie under den. Hvis du ønsker at fjerne disse to linjer, kan du blot fjerne class="feature" fra HTML-koden.
I en almindelig hjemmesideskabelon, har id:s og klasser ingen mening, medmindre de er stylet ved hjælp af CSS. Klasser kan bruges gentagne gange, mens id:s kun kan bruges én gang i hver HTML-fil. Du har måske bemærket, at der er en række <div> tags i HTML-koden, blandt andet mærker, som jeg ikke har skrevet om endnu. Div:s er hovedsagelig containere, der definerer en del af koden og gør det muligt at style dem. Jeg bruger normalt <div> tags med id:s til at definere layout, mens klasser er brugt til at style indholdet. Det er også muligt at anvende typografier for tags selv uden at tilføje en klasse eller en id, men klasser og id:s giver et ekstra lag af kontrol af konstruktionen. I Variant Duo skabelonen, gør "feature" klasse det muligt at tilføje styling til header-billedet snarere end at give alle billeder den samme stil.
Jeg vil skrive mere om CSS i en anden del af tutorialen, dette er bare en kort introduktion til konceptet…
Gå videre…
I den næste del, vil <head> sektionen i HTML vil blive forklaret og hovedindholdet af skabelonen vil blive redigeret. I sjette og sidste del, vil index.html filen blive forvandlet til tre forskellige sider - hvoraf den ene side vil få et andet layout end de to andre. Så vil disse sider blive koblet sammen af navigationsmenuen. Designet af hjemmesiden vil blive justeret ved hjælp af CSS, og jeg vil forklare hvordan du udgiver webstedet på internettet - afslutte tutorialen med en samling af links til videre læsning om CSS og HTML.
Fortsæt til del 5…