HTML

HyperText Markup Language (HTMLhypertekstmarkeringsspråk) er et markeringsspråk for formatering av nettsider med hypertekst og annen informasjonsom kan vises i en nettleser. HTML benyttes til å strukturere informasjon – angi noe tekst som overskrifter, avsnitt, lister og så videre – og kan, i en viss grad, brukes til å beskrive utseende og semantikk i et dokument.

HTML ble opprinnelig definert i 1989 av Tim Berners-Lee og Robert Caillau og videreutviklet av IETF og er nå en internasjonal standard (ISO/IEC 15445:2000). Siden har HTML-spesifikasjonene blitt opprettholdt av World Wide Web Consortium (W3C).

(Klippet fra wikipediaartikkelen om HTML)

Programmering i HTML

Et HTML-dokument består av koder, eller "tagger" som beskrivr hvordan vi vil at siden skal se ut, og i noen grad hva slags funksjonalitet den skal ha. I tabellen under finner du noen av de vanligste kodene som brukes.

TagBeskrivelseEksempel på bruk
<h1>...<h6>Overskrift <h3>Dette er en liten overskrift</h3>
<p>Paragraftekst <p>Denne teksten blir samlet i en paragraf.</p>
<b>Fet skrift<b>Denne teksten blir fet</b>
<i>Kursiv<i>Denne teksten er i kursiv</i>
<br>LinjeskiftTekst på en line<br> Tekst på linja under.
<hr>Horisontal linje<hr>
<a>Hyperlenke<a href="http://www.w3c.org"> Fagnettsted</a>
<a>Epostlenke<a href="mailto:fuzzbin@gmail.com"> Send e-post</a>
<img>Sette inn bilde<img src="mittBilde.jpg>
<ul> og <li>Punktliste<ul> <li>Punkt 1</li> <li>Punkt 2</li> </ul>
<ol> og <li>Nummerert punktliste<ol> <li>Punkt 1</li> <li>Punkt 2</li> </ol>
<table>, <tr> og <td>Tabell<table> <tr><td>Celle1</td><td>Celle2</tr> <tr><td>Celle1</td><td>Celle2</tr> </table>

 

HTML-kodene settes sammen i et HTML-dokument som igjen kan vises i en nettleser.

HTML

Et lite ekesmpel på hvordan et enkelt HTML-dokument kan se ut.

 

Prøv selv!

Prøv noen av taggene fra tabellen selv.

JS Bin

 

 Attributter

Attributter brukes for å gi ekstra informasjon til hva taggen skal gjøre. En attributt plasseres inne i taggen, og kan for eksempel inneholde informasjon om bakgrunnsfarge, plassering eller identifikatorer som skal gjelde for den aktuelle taggen. Det er fullt mulig å ha flere attributter i samme tag.

AttributtnavnEgenskapEksempel
alignPlassering av teksten<h1 align="right">Denne overskriften vil stå på høyre side</h1>
bgcolorBakgrunnsfarge<h1 bgcolor="green">Denne overskriften vil ha grønn bakgrunn</h1>
heigth og widthHøyde og bredde på bilder, tabeller og celler<table width="300px">
  Attributter er en viktig del av et HTML-dokument, og gjør at vi kan "finjustere" taggene til å vise innhold slik vi ønsker. For mer avansert design og utseende må vi benytte oss av CSS.

Eksempel på bruk av attributter

Her brukes attributtene src og width for å gi egenskaper til bilde-taggen

 

<input>

Veldig ofte ønsker vi at brukeren skal legge inn informasjon slik at den kan lagres eller bearbeides. For å få til dette kan vi bruke <input>. Ved å bruke denne taggen sammen med ulike attributter kan vi lage elementer som tekstbokser, radioknapper, draknapper, datobokser osv. <input> brukes ofte sammen med <form> som samler alle input-tagger i et skjema. Selv om <input> kun er en enkelt tag, så kan man få den til å ha mange former ved å bruke attributten "type"

Eksempel på input-tag

Eksempel på input-tag

Det finnes mange ulike typer inputfelt. I tabellen under finner du eksempelpå flere.

TypeBeskrivelse
buttonVanlig trykknapp
colorFargevelger
dateDatovelger
datetimeDato- og tidsvelger
emailTekstfelt for epost
monthMånedsvelger
passwordTekstfelt for passord
radioRadioknapper
rangeGlideknapp
resetNulstiller alt som er inne i samme form
searchSøkefelt
submitSender all data som er i samme form.
telFelt for telefonnummer
textTekstfelt
timeKlokkeslett
urlFelt for nettadresser
weekUkevelger
checkboxAvkryssingsbokser
numberTallvelger
 

Prøv selv!

taggene <video> og <audio>

Video og audio-taggene er brukes når man skal spille av film og lyd. Flere formater støttes, og man har mulighet for volum og avspillingskontroll.

Eksempel på audio og video-tagger

Eksempel på audio og video-tagger

 

<div>

<div> er en fin måte å lage et avgrenset område på nettsiden. <div> i seg selv er kun et tomt skall, og vi er nødt til å fylle på med innhold mellom start- og sluttagg. Ved å bruke attributter på div-taggen kan vi få denne til å se ut på mange forskjellige måter.  

Eksempel på bruk av style-attributten i et divelement.

Eksempel på bruk av style-attributten i et divelement.

 

Prøv selv!
Her kan du endre på CSS-kodene selv. JS Bin

Det finnes så mange CSS-koder at de færreste husker alle selv. Det er derfor viktig å lære seg å slå opp. W3schools.com er et nettsted der du selv kan finne CSS-koder, og se eksempler på hvordan de brukes.

DOM-treet

 

Bilde som viser hiearkiet i en tabell i html-kode.

Bilde som viser hiearkiet i en tabell i html-kode.

 

DOM står for document object model.