Level 1HTML: Vi bygger hjemmeside

Skrevet av: Oversatt fra Code Club UK

Oversatt av: Marius Krakeli

Kurs: Web
Tema: Tekstbasert, Nettside
Fag: Programmering, Teknologi
Klassetrinn: 8.-10. klasse, Videregående skole

Introduksjon

I oppgaven Introduksjon til Web kan du lære om HTML-tagger, og i denne oppgaven skal du bruke HTML-taggene i din første hjemmeside. La oss begynne med en gang!

Steg 1: Åpne siden som heter om meg

checkAktiviteter

Steg 2: Lag en hjemmeside om deg selv

Om å gjøre feil

Feil skjer ofte. Det er veldig lett å gjøre dem i HTML fordi du må huske å lukke hver tag, og åpnings-taggen og avslutnings-taggen er litt annerledes. La oss prøve å gjøre noen feil for å se hvordan nettleseren prøver å forstå meningen av koden vår, selv om vi ikke har skrevet den perfekt.

checkAktiviteter

Hva skjedde? Siden nettleseren ikke vet hva du mener med denne taggen så kan den ikke lenger forstå at det skal være en overskrift, så den bruker ikke lenger en større tekst til å vise hvor viktig akkurat den teksten er.

Inne i <img> taggen har vi src og alt attributter:

<img src="katt.png" alt="Katt">

src er hvor bildet blir hentet fra og hva det heter. I dette tilfellet ligger bildet på samme sted som om_meg.html. Hadde bildet ligget i en annen mappe måtte vi ha spesifisert det, for eksempel slik: bilder/katt.png.

alt er en tekst som kommer tilsyne dersom bildet ikke vises. Dette gjør at, for eksempel, blinde kan få lest opp hva det er bilde av via en skjermleser. Bildeteksten kan også hjelpe deg med å finne feil dersom et bilde ikke vises på nettsiden din.

<img src="katt.png" alt="Katt />

Den neste taggen forsvant. Hvorfor? Nettleseren vil tro at alt etter alt =" og før neste sitatmerke (") er ekstra tekst for dette bildet, inkludert slutten av bildekoden og neste åpnings-taggen.

Hint

alt="Katt"

Vi har nå gjort noen vanlige feil og vi har sett at noen ganger kan en enkelt feil gjøre at nettleseren ikke forstår hva vi vil. Men mesteparten av tiden vil nettleseren prøve å vise oss noe uansett. Vi så at nettleseren viste oss tekst selvom den ikke forstod at det var en overskrift vi prøve å vise. Så den hjelper oss litt underveis og prøver å vise det vi lager så godt den kan. Men vi har sett at enkelte feil gjør det veldig forvirret.

Steg 3: Lag en ny side og link til den

La oss lage en ny side. Åpne om_meg_side_2.html. Den har litt mindre kode en den andre siden du jobbet med, men jeg er sikker på at du kan legge til mer kode selv nå.

Utfordringer til deg:

Er du ferdig? Flott! La oss nå linke de to sidene du har laget sammen.

Når vi har linket til deler av den samme siden, kunne vi bare peke linken til en bestemt id på siden, som dette:

<a href="#kattunge"> Klikk for å se en kattunge </a>

Som da tok deg til noe sånt som dette:

<div id="kattunge">
  <img src="kattunge.jpg" alt="Dette er en kattunge." />
</div>

Hvis du vil koble til en annen side, trenger vi ikke å inkludere hashsymbolet (#), men i stedet må vi si hvilken fil vi vil linken skal ta oss til.

Så for å linke fra om_meg_side_2.html til om_meg.html skriver vi slik:

<a href="om_meg.html"> Gå til Om Meg siden </a>

Du kan endre anker teksten til noe annet, som tittelen på siden hvis du har endret det.

For å linke tilbake fra om_meg.html til om_meg_side_2.html må du skrive det slik:

<a href="om_meg_side_2.html"> Gå til min andre side </a>

Gratulerer! Du har laget ditt eget nettsted.

Ting du kan prøve

Forbedre denne siden

Funnet en feil? Kunne noe vært bedre?
Hvis ja, vennligst gi oss tilbakemelding ved å lage en sak på Github eller fiks feilen selv om du kan. Vi er takknemlige for enhver tilbakemelding!