Hjem GitHub og VS Code HTML CSS

HTML

Hva er HTML?

HTML står for HyperText Markup Language og er det standarde markeringsspråket for opprettelse av nettsider. Ved hjelp av markeringsspråket kan vi markere forskjellig innhold, slik som bilder, lister, tekst, bilder, osv, som beskriver strukturen og selveste “grunnmuren” til nettsiden, og fortelles til nettlesere slik at de vet hvordan de skal vise frem innholdet. Når man holder på med nettsider er alltid hoveddokumentet en HTML-fil, altså en fil med endelsen .html. Det er som sagt HTML som er det helt grunnleggende på nettsiden. Du kan ikke male huset ditt hvis du ikke har vegger (CSS) eller åpne og lukke dører om huset ditt ikke har det (JavaScript).

Element

HTML-dokumentet er bygd opp av en rekke elementer, som du bruker til å omslutte, eller pakke inn, ulike deler av innholdet for å få det til å se ut på en bestemt måte eller oppføre seg på en bestemt måte. Elementene skrives ved hjelp av tagger, som er veldig gjenkjenbare da de alltid har tegnene “<” og “>” rundt seg. Et element består alltid av en start-tagg, og noen ganger en slutt-tag. Her kan vi ta utgangspunkt i det eksempelet til høyre. Start-taggen består av navnet på elementet, som i dette eksempelet er p for “paragraph”, pakket inn i to vinkelparenteser på dette viset <p>. Dette forteller hvor elementet starter eller begynner å tre i kraft, som i dette tilfellet er hvor avsnittet starter. Slutt-taggen er lik start-taggen, bortsett fra at den også inkluderer en skråstrek før navnet på elementet, som i dette eksempelet ser slik ut: </p>. Dette forteller hvor elementet slutter, som i dette tilfellet er hvor avsnittet slutter. Mellom de taggene finner vi innholdet, som her bare er tekst. Noen andre eksempler på elementer er heading-elementene, image-elementet, div-elementet og meta-elementet

Attribute

Alle elementer kan også ha såkalte “attributes” som inneholder ekstra informasjon om elementet som ikke vil faktisk vises i innholdet. Et eksempel på dette ser du på bildet til venstre. Her er “class” navnet på attributen og “hovedoverskrift” er verdien på attributen. Denne attributen er vanligvis brukt for å lage en selektor til bruk i CSS. Class-attributen gir nemlig elementet en ikke-unik identifikator, som gjør at hvis man bruker dette som en selektor, kan flere elementer benytte seg av det. Id-attributen er et annet eksempel, som gjør kun ett element om til en unik selektor. Det er også slik at attributer alltid blir spesifisert i start-taggen slik som i eksemplet. Samtidig er det noen attributer som ikke har noen verdi, slik som “required”. For de som inkluderer verdi må dette alltid legges til: Mellomrom mellom attributen og navnet på elementet eller forrige attribute hvis det er flere attributer, navnet på attributen med et er lik tegn etter på og attibutens verdi omsluttet av hermetegn. Noen andre eksempler på attributer er src-attributen, href-attributen og alt-attributen.

Nesting

Alle HTML-elementer kan bli såkalt “nested” og dette er noe alle HTML-dokumenter inneholder. “Nesting” betyr nemlig at man legger elementer inn i andre elementer. Her til høyre er et eksempel på dette. Her er b-elementet lagt inne hos innholdet til p-elementet for å skape fet skrift i avsnittet. Det er imidlertid viktig at dette gjøres riktig. De må nemlig åpnes og lukkes på en måte slik at de er på tydelig vis er på utsiden eller innsiden av hverandre. I eksempelet ovenfor begynte vi med en p-start-tagg som deretter fulgte en b-start-tagg. Dette gjør at man må legge til b-slutt-taggen først og deretter p-start-taggen. Logikken kan sammenlignes med at når man legger en mindre boks inn i en større boks, må man ha igjen den innerste boksen før den ytterste boksen. Som sagt, finnes dette i alle HTML-dokument. Det har seg nemlig slik at html-elementet er roten og definerer hele HTML-dokumentet. Alle andre elementer, bortsett fra <!DOCTYPE html> befinner seg mellom start-taggen og slutt-taggen til html-elementet.

Void

Noen av elementene innenfor HTML betegnes som "void elements" på grunn av mangel på innhold eller avsluttende tagger. Et eksempel på dette er vist på bilde til venstre. Dette spesifikke eksemplet avbildet viser et img-element som inneholder to attributter, men mangler både en avsluttende tag og ethvert form for indre innhold. Årsaken til denne strukturen er at img-elementet ikke er utformet for å omslutte innhold med den hensikt å påvirke det. Snarere er dens hovedformål å integrere et bilde direkte i HTML-dokumentet, der det skal vises. Andre eksempler på void-elementer inkluderer meta-elementet, br-elementet og source-elementet. Disse elementene deler den karakteristiske egenskapen av å ikke inkludere annet innhold enn deres egne attributter, og de har ikke en avsluttende tag. Denne egenskapen gjør dem særlig hensiktsmessige for spesifikke formål, for eksempel å definere metadata, legge til linjeskift, eller angi kilder for multimediafiler.

Laget av Christina | Her finner du HTML og CSS til nettsiden