Tutorial:
Del 5: Indhold og billeder
Dette er del 5 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, del 2 som beskriver hvordan man henter og udpakker en skabelon og finder en editor til dit operativsystem, del 3 som forklarer hvordan man redigerer index.html, del 4 som forklarer HTML's anatomi, attributter og hvordan man erstatter ændrer størrelsen på header-billedet.
I de foregående dele af tutorialen, blev tre sektioner i skabelonen ændrede. Hvis du har fulgt vejledningen i de foregående dele, skal du nu have en skabelon med dit eget websted titel, dit eget slogan og dit eget headerbillede. Nu er det tid til at redigere hovedindholdet. Men før du gør det, ville det være en god idé at tage et kig på <head> sektionen i HTML-koden. Dette er, hvordan koden ser ud i Variant Duo template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="description" content="Your description goes here"/>
<meta name="keywords" content="your,keywords,goes,here"/>
<meta name="author" content="Your Name"/>
<link rel="stylesheet" type="text/css" href="variant-duo.css" title="Variant Duo" media="screen,projection"/>
<title >Variant Duo v1.0</title>
</head>
De forskellige tags der er brugt er:
<!DOCTYPE> – Definerer, at dette er et HTML-dokument, og at det er skrevet med en web standard kaldet XHTML 1.0 Strict.
Redigere ikke denne, medmindre du er fortrolig med W3 standarder og doctypes.
<html> – Start-tag for HTML-koden, som indeholder en beskrivelse af XML-namespace som XHTML anvender og sproget på hjemmesiden (i dette tilfælde, 'en' for engelsk).
Igen, ikke redigere dette - medmindre dit websted vil bruge et andet sprog end engelsk
<head> – Start-tag for hovedafsnittet i HTML-koden
<meta> – Tags, der indeholder strukturerede meta-data, der beskriver dokumentet og dets indhold.
Disse tags vil blive forklaret i detaljer nedenfor
<link> – Et tag, der importerer instruktioner fra en ekstern fil, i dette tilfælde stilarket (variant-duo.css), der definerer præsentationen af skabelonen
<title> – Bruges til at give dokumentet en titel. Indholdet af dette tag vises normalt i browservinduet og / eller browser fanen titel.
Det er også vist når siden er bookmarked, og som den vigtigste titel i søgemaskine sider
<meta> tags
I denne skabelon, er fire meta tags anvendt. Det første definerer indholdet (tekst / html) og tegnkodning af dokumentet. I de fleste tilfælde vil tegnsættet UTF-8 virke godt, men hvis dit sprog kræver en anden tegnkodning kan du redigere denne linje og erstatte 'UTF-8' med det tegnsæt, du vil bruge. Læs mere om character encoding på Wikipedia).
Det andet og tredje meta tag definere beskrivelse og søgeord på hjemmesiden. Beskrivelsen skal være kort (under 155 tegn anbefales) og virker som en opsummering af, hvad hjemmesiden handler om. Beskrivelsen er normalt vist på søgemaskinens resultatsider, så det er en vigtig tekst, der skal skrives med en masse omhu. Disse søgeord plejede at være vigtige for, hvordan websteder blev lettere at finde i søgemaskiner, men i dag indekserer de fleste søgemaskiner hele hjemmesider, så søgeord er hentet fra hjemmesidens indhold i stedet blot fra meta-tag. Alligevel bør du skrive de 8-12 vigtigste ord ned, der beskriver indholdet af din hjemmeside her, adskilt af komma tegn.
Det fjerde metatag definerer navnet på forfatteren af dokumentet. Det kan bruges til at vise folk, der besøger dit websted, at du er forfatteren af indholdet, men det er ikke påkrævet på nogen måde og påvirker ikke søgemaskiner på samme måde, som de andre meta tags gør.
For at beskrive det websted, jeg er ved at bygge, har jeg besluttet at redigere de tre meta tags som vist:
<meta name="description" content="Andreas' website built for the template-to-website tutorial on andreasviklund.com."/>
<meta name="keywords" content="andreas,website,template,tutorial,example"/>
<meta name="author" content="Andreas Viklund"/>
Bemærk, at alle meta tags er selvlukkende tags, der ender med </>. Du kan læse mere om meta tags, og hvordan de kan bruges, kan du læse Wikipedia article om meta tags.
<link> tag og <title> tag
<link> tag bruges til at fortælle browseren, at det skal læse indholdet af den sammenkædede CSS-fil med henblik på at inkludere og anvende design og stilarter på HTML, når den ses i browseren. Det er muligt at indsætte flere stilark og få vist forskellige stilark alt efter hvilken type skærm, hjemmesiden bliver vist på. For eksempel kan mobile enheder vise et stilark, mens stationære computere kan vise et andet stilark. I denne tutorial, behøver du ikke at foretage ændringer i denne linje - med mindre du ønsker at ændre filnavnet på den css-fil fra variant-duo.css til noget af dit eget.
<title> tag er, som nævnt ovenfor, den kode, der definerer din hjemmeside titel. Standard titel i Variant Duo skabelonen er 'Variant Duo v1.0', så denne skal ændres. Det er sådan jeg har redigeret titlen:
<title>Min egen hjemmeside!</title>
Da titlen (samt header tags af hjemmesidens indhold) er vigtige faktorer, når søgemaskinerne indekserer din hjemmeside, er det et godt sted at beskrive indholdet på dit websted. For eksempel, hvis du bygger et websted om din favorit hunderace, herunder racens navn i titlen, vil det sandsynligvis give din hjemmeside en bedre placering i søgemaskinens resultater, når nogen søger efter den specifikke race, end det ville have været, hvis du bare skriver navnet på din hund. Men du behøver ikke fylde titel op med søgeord bare på grund af det, hold det kort og enkelt.
Hvis du vil vide mere om at skrive gode beskrivelser, nøgleord og titler, lav en Google-søgning efter et emne, du er interesseret i og undersøg meta tags i topresultater. For eksempel, du søger efter 'hunde', kan du finde this site about dogs som er et fremragende eksempel på, hvordan meta-tags og titler kan skrives for at dække indholdet af emner på webstedet. Du er velkommen til at kigge på koden på andreasviklund.com, hvis du er nysgerrig. Og hvis du vil have forslag eller feedback om korrekte beskrivelser, nøgleord og titler til din side, så tøv ikke med at kontakte mig for at få vejledning.
Redigering af hovedindholdet af skabelonen
Nu, endelig er det tid til at redigere hovedindholdet, og vende skabelonen til en reel hjemmeside! Her er en påmindelse om de forskellige områder af skabelon designet:
Hovedindholdet er område 5 i skærmbilledet ovenfor. Den består af to kolonner, og HTML strukturen ser sådan her ud (jeg har redigeret koden og fjernet "dummy" teksten fra Variant Duo skabelonen for at gøre koden lettere at læse):
<div id="content">
<div class="left">
<h2>Header for the left column</h2>
<p>First text paragraph in the left column.</p>
<p>Second text paragraph in the left column.</p>
</div>
<div class="right">
<h2>Header for the right column</h2>
<p>First text paragraph in the right column.</p>
</div>
<hr class="clear"/>
<p class="centered">Centered paragraph below the two columns.</p>
</div>
Hvis man sammenligner ovenstående kode med den kode, du ser i kodeeditoren, vil du være i stand til at identificere hvert tag. For reference, er det, hvordan skabelonen ser ud i browseren ved hjælp af koden ovenfor (klik for at åbne et fuld-størrelse billede i et nyt vindue):
Før du begynder at tilføje dit eget indhold, skal du slette "dummy" teksten i skabelonen, samtidig med at du beholder HTML-tags. Du kan gøre dette ved at slette teksten manuelt, men en nemmere måde er at slette al kode fra den linje, der siger <div id="content"> (Som bør være på linje #30) og ned til (og med) den afsluttende </div> som du kan finde på linjen lige over <p id="footer">, Og derefter kopiere den kode jeg postede tidligere, og sætte den ind i skabelonen, hvor den kode, du lige har slettet, plejede at være. Når koden er blevet redigeret, skal du gemme .html filen og se den i browseren. Siden bør nu se ud som skærmbilledet ovenfor.
<div> struktur
<div> tags er containere, der definerer dele af HTML, hvor kode er grupperet sammen. Div:s kan bruge id og class attributter, som gør det muligt at bruge div:s til at arrangere layout på siden, og div:s kan også være indlejrede ved at sætte en eller flere div:s inde i en anden div. Ethvert indhold inde i en div kan blive påvirket af CSS, der anvendes på den div hvis ønsket.
I Variant Duo, er der en række div:s der bruges til at oprette layout. Det første niveau er i begyndelsen af indhold, lige under <body> tag, og det er <div id="wrap">. Formålet med det er at definere bredden på hele designet, og det sker i variant-duo.css filen, hvor det tilsvarende ID kaldes #wrap. Da alle områder af designet bør holde sig inden for bredden jeg ønsker at bruge, skal alt indhold af skabelonen være inde i denne div. Dette gøres ved at sætte slut-tag for denne div i slutningen af HTML, lige før </body>. Muligheden for at bruge indlejrede div:s betyder, at jeg kan sætte andre div:s inde i dette første niveau, men det er vigtigt at bemærke, at indlejrede div:s skal være lukkede, før forrige div er lukket.
Som det ses i koden, er det vigtigste indhold, defineret ved en div, der har attributten id="content" (som er stylet af #content i CSS). Efter åbnings-tag for div="content", er der et nyt åbnings-tag for en div der anvender class="left". Efter åbnings-tagget i div class="venstre" kommer det faktiske indhold af den venstre kolonne - som efterfølges af en afsluttende </div> som lukker div class="left". Den næste linie åbner en div, der bruger class="right", og det omfatter indholdet i den højre kolonne før div class="right" er lukket af et andet </div> afsluttende tag.
Under de to kolonner er der et <hr /> tag (vandret lineal, selvlukkende), som ikke er synligt i designet, men som har en CSS stil, der fortæller browseren, at noget under den, ikke vil blive berørt af de to kolonner. Noget under clearing <hr /> vil bruge den fulde bredde af indholdsområdet. Og endelig er der et tekst afsnit, der benytter class="center", der centrerer teksten i afsnittet (gennem den linje der starter med .center i CSS). På dette tidspunkt er hovedindholds div stadig åben, så der er en endelig </div>, der lukker hovedindholdsområdet.
Indsæt dit indhold!
Nu, skulle redigering af hovedindholdet være nemt. I den venstre kolonne, har du en overskrift og to afsnit, som du kan bruge. Du kan tilføje flere sidehoveder (herunder <h3> sub-headers) og flere afsnit efter behov, og du kan indsætte billeder ved at bruge <img> tag, som dette:
<img src="billeder/my-content-image.jpg" alt="My content image"/>
Bare sørg for, at billeder er ikke bredere end bredden af hver kolonne (461 pixels), indsætter du større billeder, vil det bryde layoutet. Variant Duo indeholder ikke nogen stilarter for tilpasning eller til at positionere billeder, men det kan tilføjes ved at skabe et par CSS klasser, hvis du har brug for det. Når du har venstre kolonnes indhold klar, gå til højre kolonne og tilføj det indhold, du vil bruge der. Husk at lukke alle tags korrekt, herunder også afsnit. Hvis du ønsker at lave et enkelt linjeskift, kan du bruge <br />. Overskrifter og afsnit elementer kan ikke være indlejret på samme måde, som div:s kan. Hver sidehoved og hvert afsnit skal stå for sig selv.
Lav flere sider
Hvis du vil oprette flere sider, til dit site, skal du blot kopiere index.html til en ny fil, f.eks about.html og redigere hovedindholds sektionen. Opret så mange sider, som du har brug for. Jeg vil bruge tre sider i eksemplet i den næste del af tutorialen, hvor navigationsmenuen vil blive oprettet, men du kan naturligvis lave flere sider, hvis du ønsker det.
Alternativt layout – kun en kolonne
Og endelig er der en bonus feature i Variant Duo skabelonen, der kan være nyttig for dig. Du behøver ikke at bruge venstre og højre kolonne div:s. Du kan lige så godt fjerne dem, og skrive dit indhold direkte ind i div'en med id="content". Hvis du gør det, vil dit indhold fylde hele bredden af indholds-området i en enkelt kolonne.
Eller bruger en kombination, hvor du skriver en tekst direkte ind i div'en med id="content", og stadig bruger venstre og højre kolonne div:s til indhold.
Gå videre…
Fortsæt til del 6…