HTML-tagger inni hverandreVi har sett at HTML-sider er bygd opp av tagger. HTML-taggene har en start- og en slutt-tag. Og det er forskjellige tagger inni hverandre. Vi har også sett på hvordan en enkel nettside er bygd opp. |
 |
Body-tag
Husker du body-taggen? I body-taggen står det som skal vises på selve nettsiden. Der kan man skrive inn tekst, og bruke ulike tagger. Det finnes mange forskjellige tagger for å endre størrelse på skrift, lage linker, sette inn bilder og mye annet. I body-taggen forrige gang, sto det bare «Hei!» med liten skrift:
<body>
Hei!
</body>
Større skrift
Nå skal vi lage skriften større. Det kan vi gjøre med en tag:
<body>
<h1>Hei!</h1>
</body>
Nå står «Hei!» inni en ny tag. Taggen heter h1. Det er en tag for å lage overskrift. Den gjør at skriften blir mye større. Det finnes flere tagger for overskrift enn h1. Man har for eksempel h2, h3 og h4:
<body>
<h1>Hei!</h1>
<h2>Hei!</h2>
<h3>Hei!</h3>
<h4>Hei!</h4>
Hei!
</body>
Her kan du se hvordan dette ser ut i nettleseren:Hei2.html
Lage en link
Har du lurt på hvordan en link virker? Det er også en tag. Den heter a-tag eller anchor-tag.
La oss lage en link. Teksten skal være «Trykk her!». Da bruker man a-taggen:
<a>Trykk her!</a>
Men, nettleseren er ikke synsk. Den vet ikke hva den skal linke til! Hvis linken skal gå til YouTube, må nettleseren bli fortalt det. Og da må man bruke en attributt. En attributt forteller ekstra ting til nettleseren– som hva linken skal gå til:
<a href="">Trykk her!</a>
Nå står det href=”" i a-taggen. Det er en attributt. Den skal fortelle nettleseren hvor linken skal gå. Men, det mangler noe viktig! For å linke til YouTube, må man skrive adressen til YouTube. Se her:
<a href="http://YouTube.com">Trykk her!</a>
Og nå vet nettleseren at linken skal gå til YouTube. Det står nemlig i href-attributten.
Hele HTML-koden:
<html>
<head>
<title>En nettside med link</title>
</head>
<body>
<a href="http://YouTube.com">Trykk her!</a>
</body>
</html>
Her kan du se hvordan dette ser ut i nettleseren: EnLink.html
Det var alt for denne gang, men det kommer flere deler i HTML-kurset snart. Takk for at du leste, og spør gjerne i kommentar-feltet hvis noe er uklart.
2 kommentarer
Flott innlegg!
Men husk på .com’et bak YouTube på “Hele HTML-koden”
Espen:
Oisann! Bra observert, det er en sjekk for å se om folk er våkne. Hehe. :p
Skal rette det opp nå…