HTML-dokumenter består av elementer som er merket med såkalte tags. Tags kjennetegnes av vinkelparenteser. Nesten alle HTML-elementer er merket med en åpnings- og lukketag. Det som ligger mellom disse kalles gyldighetsområde.
Et eksempel:
<h1>PSD-Tutorials.de – din grafikk-, web- og læringsportal</h1>
Ved denne syntaksen skrives en overskrift av første orden inn i dokumentet. Den åpnende <h1>-taggen informerer nettleseren om at det dreier seg om en slik overskrift. Den avsluttende </h1> avslutter overskriften. Dere kjenner igjen avsluttende tags på en åpnende vinkelparentes, etterfulgt av en skråstrek </.
Et spørsmål oppstår angående skrivemåten av elementnavn: Hvordan ser det egentlig ut med stor- og små bokstaver? Som allerede beskrevet, er fokuset i denne serien på HTML5. Her kan dere faktisk velge mellom stor- og små bokstaver. Personlig foretrekker jeg imidlertid konsekvent små bokstaver og vil håndtere det slik i denne serien. Prinsipielt ville følgende være korrekt etter HTML5:
<h1>PSD-Tutorials.de – din grafikk-, web- og læringsportal</h1> <H1>PSD-Tutorials.de – din grafikk-, web- og læringsportal</H1> <h1>PSD-Tutorials.de – din grafikk-, web- og læringsportal</H1>
Elementer som åpnes, må også lukkes igjen. Så hvis dere legger inn en <h1>, må dere lukke den etter slutten av overskriftdefinisjonen </h1>. Selv om det er unntak i HTML5 som for eksempel listeelementer og avsnitt, vil det være mer om det senere.
I HTML finnes det også såkalte frittstående tags. Disse består bare av en tag, ikke en åpnings- og sluttag. Et typisk eksempel er <br />.
Dette er en linje.<br /> Dette er en annen linje.
Dette <br /> definerer et linjeskifte.
Slike tomme tags pleier man vanligvis å avslutte med skråstrek, selv om det ikke er strengt nødvendig i HTML5. Her ville også dette være mulig:
<br>
Dere vil etter hvert lære om flere av disse frittstående tagsene i denne serien.
Elementer med innbyrdes hierarki
HTML-elementer kan også hierarkiseres. Forestill dere at dere ønsker å fremheve en passage kursiv innenfor en overskrift. For kursiv fremstilling brukes i-elementet.
<h1>PSD-Tutorials.de – <i>din grafikk-, web- og læringsportal</i></h1>
Ved hierarkiseringen må dere være oppmerksomme på riktig rekkefølge. Man avslutter sist elementet som ble åpnet først. I dette tilfellet vil det være h1-elementet.
Bruke attributter
Innenfor åpnings- eller frittstående tags kan man definere såkalte attributter. Disse attributtene kan tilordne elementer ekstra egenskaper. I tidligere HTML-tider ble relativt mange attributter tilordnet elementene. Dette skyldtes enkelt og greit blandingen mellom struktur og design. For eksempel ble fargedefinisjoner direkte overlevert til HTML-elementet via et passende attributt. Foreløpig er – naturligvis også takket være CSS – en streng separasjon mellom design og struktur mulig, og dette bør også respekteres. Derfor er det nå relativt få attributter som brukes.
Et viktig attributt er id. Gjennom dette attributtet kan det tildeles et HTML-element et unikt navn som det deretter for eksempel kan adresseres vha. CSS eller JavaScript.
<h1 id="head">PSD-Tutorials.de – din grafikk-, web- og læringsportal</h1>
For å tildele et attributt, legger man til et mellomrom etter h1. Deretter følger attributtnavnet, som vanligvis skrives med små bokstaver. Etter attributtnavnet følger likhetstegnet. Attributtverdien følger i anførselstegn.
Man kan også tildele flere attributter til et element. For eksempel er det ganske vanlig å definere en såkalt klasse og en ID for et element. Også her et eksempel: Gjennom id identifiseres overskriften entydig. Klassen derimot er der for å plassere overskriften i en bestemt kategori. Slik kan man bestemme at alle elementer som er tildelt klassen blue, vises i blå farge. (Mer om CSS og farge temaet vil naturligvis komme senere i detalj).
<h1 id="head" class="blue">PSD-Tutorials.de – ditt grafiske, web- og læringsportal</h1>
Attributtene er i dette tilfellet separert med mellomrom.
Valider koden
Noen grunnleggende syntaksregler har dere allerede lært nå. Spesielt i begynnelsen, når man lærer HTML, er det viktig å holde seg til disse reglene. Det man har gjort feil én gang er vanskelig å bli kvitt. Derfor bør dere alltid sjekke eller validere HTML-koden deres for riktighet. Dette trenger dere naturligvis ikke å gjøre selv. Det finnes passende online-verktøy for dette. En såkalt validerer finner dere for eksempel på http://validator.w3.org/.
Det beste er å gå direkte til fanen Validate by direct Input. Her kan man lime inn HTML-koden som skal sjekkes direkte med Copy & Paste. Pass på å lime inn hele koden til filen, inkludert DOCTYPE-angivelsen.
For å teste validereren, lim inn følgende i tekstfeltet og klikk deretter på Validate-knappen.
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> <h1>PSD-Tutorials.de – ditt grafiske, web- og læringsportal</h1> </body> </html>
Resultatet bør se slik ut:
Alt er i orden her. (Dere trenger ikke bry dere om de to advarslene i dette tilfellet). Hvis dere får meldingen This document was successfully checked as HTML5!, er alt faktisk i orden. Men hvordan ser det ut når det oppstår feil? For å se det kan dere med vilje legge til en feil i syntaksen.
<h1 id=head">PSD-Tutorials.de – ditt grafiske, web- og læringsportal</h1>
Her ble startanførselstegnet for head glemt. Hvis man nå validerer syntaksen på nytt, vil feilen bli oppdaget.
Validereren gir deretter en tilsvarende melding. Hva som gikk galt kan man lese i nedre vindusområde.
Her blir det også tydelig beskrevet hva feilen faktisk er.
Linje 8, Kolonne 12: "inger i en ikke-anført attributtverdi. Sannsynlige årsaker: Attributter løper sammen eller en URL-querystreng i en ikke-anført attributtverdi.
<h1 id=head" >PSD-Tutorials.de</h1>
Dere ser umiddelbart hvilken linje det skjedde en feilinntasting, og kan rette den. Dermed hjelper validereren dere med å lage ren HTML-kode. Dere bør alltid få valideringen av koden deres. Webleserne viser ofte HTML-koden korrekt, selv om syntaksfeilen er feil. I andre nettlesere som dere ikke tester sidene deres i, kan dette se helt annerledes ut.
