Introduksjon

Du kjenner en del HTML tagger, så nå er det på tide å lage din første hjemmeside! La oss begynne med en gang.

Steg 1: Åpne siden som heter om meg

Activitet

  1. Åpne et tekstprogram.
  2. Åpne filen som heter om_meg.html. Filen inneholder bittelitt HTMl kode for å hjelpe deg med å komme igang, men du må skrive resten selv.

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.

Activitet

  • La oss ta listen av ting vi liker som et eksempel. En av feilene som ofte skjer, er å glemme __ avslutnings-taggen__, så la oss fjerne <!-- ul--> igjen og lagre siden. Når du oppdaterer siden igjen er ikke resten av kodene inne i listen lenger.

  • Tagger må være stavet riktig for at nettleseren skal forstå dem. Hva skjer hvis vi gjør en skrivefeil?

Finn <h1> taggen. La oss se hva som skjer hvis vi forandrer den til <d1>. Lagre filen og oppdater siden i nettlesern.

Hva sjedde? 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.

Bytt <d1> tilbake til <h1> og lagre igjen.

  • Finn en av <img> taggene. Vi har akkurat prøvd å feilstave en tagg og nettleseren var ikke sikker på hva den skal gjøre med det. Men hva hvis vi feilstaver attributtet?

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

<img href = "kattunge.jpg" alt = "Dette er en kattunge." />

Prøv å endre href til noe annet. Lagre dokumentet og oppdater i nettleseren.

Å nei! Kattungen er borte!

Plutselig vet ikke nettleseren hvor den skal se etter bildet den skal vise - den ser etter filnavnet i href atributten som ikke lenger er der.

Endre det tilbake til href så vi kan fortsette å se på kattungen.

  • Nå fjern det andre anførselstegnet (") fra alt attributtet av dette bildet: den etter teksten, slik at du ender opp med dette:
<img href="kattunge.jpg" alt="Dette er en kattunge. />

Lagre og oppdater i nettleseren.

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.

Fiks det igjen ved å legge til et anførselstegn etter alt teksten.

Vi har nå gjort noen vanlige feil sammen, og har sett at noen ganger kan en enkelt feil gjøre slik at nettleseren ikke forstår hva vi mener. Men mesteparten av tiden vil den prøve å vise oss noe uansett, så når vi har endret overskrift-koden til noe annet, forsto den ikke at teksten var en overskrift, men viste oss fortsatt teksten. Så den prøver så godt den kan, men noen feil kan gjøre den ganske forvirret.

Publiser nettsiden din på Internett (ekstra aktivitet)

Nå har du laget ditt eget nettsted. Du ønsker vel å vise det frem, gjør du ikke?

Hvis du bare kopierer adressen til websiden fra nettleseren din, og deretter sender den til noen, ville de ikke se den. Det er fordi denne adressen beskriver et sted på datamaskinen din, og vennene dine ikke har tilgang til den. Selv om hadde hatt det, hva om de ønsket å se på den når datamaskinen din er skrudd av?

Husker du servere fra den første økten? Servere er datamaskiner som alltid er på og koblet til Internett, og de er satt opp slik at folk kan besøke nettsteder som lever på disse datamaskinene.

For å gjøre dette vil vi bruke Cyberduck - det er et program for å flytte filer fra din datamaskin til en server.

  1. Klikk Åpne Tilkobling.
  2. Legg inn servernavn, brukernavn og passord som instruert av Kodeklubben-hjelperen.
  3. Klikk Tilkoble. Du vil da se alle mappene og filene på serveren - mest sannsynlig vil serveren være tom, om du ikke har lagt filene dine ennå.
  4. Dra nettsted-filene fra datamaskinen din til servervinduet. Opplastingen vil begynne.
  5. Når det er lastet opp, kan du besøke nettstedet ditt på adressen gitt til deg av Kodeklubben-hjelperen.

Ting du kan prøve

  • Hvordan kan du linke til en annen side på nettet? (Hint: prøv å legge http:// og deretter adressen til nettstedet du vil koble til)
  • I likhet med forslaget ovenfor, hvordan ville du legge til et bilde fra et sted på nettet i stedet for fra datamaskinen? (Hint: igjen, prøve å legge http:// og adressen til bildet)