Lær HTML fra bunnen av med denne omfattende veiledningen som dekker hva HTML er, dokumentstruktur, essensielle tagger og hvordan du lager din første nettside.
HTML (HyperText Markup Language) er grunnlaget for alle nettsider du noensinne har besøkt. Enten du ønsker å bygge din egen nettside, forstå hvordan nettet fungerer, eller starte din reise inn i webutvikling, er det å lære HTML ditt essensielle første skritt. Denne omfattende veiledningen tar deg fra fullstendig nybegynner til å skrive din første nettside.
HTML står for HyperText Markup Language. Tenk på det som skjelettet til hver nettside—det gir den grunnleggende strukturen og innholdet som nettlesere kan forstå og vise.
HTML er avgjørende fordi det:
Tenk på HTML som rammen til et hus. Akkurat som et hus trenger et solid rammeverk før du legger til vegger, rørleggerarbeid og dekorasjon, trenger nettsider HTML-struktur før du legger til styling (CSS) og interaktivitet (JavaScript).
Å forstå hvordan nettlesere behandler HTML vil hjelpe deg å skrive bedre kode og feilsøke problemer.
Nettlesere forventer at HTML følger visse regler:
Når du skriver ren, gyldig HTML, kan nettlesere:
Hvert HTML-dokument følger den samme grunnleggende strukturen. La oss dele det opp bit for bit:
<!DOCTYPE html>
<html lang="no">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Min Første Nettside</title>
</head>
<body>
<h1>Velkommen til Min Nettside</h1>
<p>Dette er mitt første avsnitt.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="no">
lang="no" spesifiserer språket (norsk i dette tilfellet)<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Min Første Nettside</title>
</head>
Head inneholder metadata (informasjon om siden):
<body>
<h1>Velkommen til Min Nettside</h1>
<p>Dette er mitt første avsnitt.</p>
</body>
Body inneholder alt synlig innhold som brukere ser og samhandler med.
HTML bruker tagger for å markere opp innhold. Tagger er nøkkelord omgitt av vinkelparenteser < >. De fleste tagger kommer i par: en åpningstag og en lukketag.
Overskrifter (H1 til H6):
<h1>Hovedtittel</h1>
<h2>Seksjonstittel</h2>
<h3>Underseksjonstittel</h3>
<h4>Mindre Overskrift</h4>
<h5>Liten Overskrift</h5>
<h6>Minste Overskrift</h6>
Avsnitt:
<p>Dette er et avsnitt med tekst. Det kan inneholde flere setninger og vil automatisk bryte for å passe containerbredden.</p>
Tekstformatering:
<strong>Fet tekst for vektlegging</strong>
<em>Kursiv tekst for vektlegging</em>
<u>Understreket tekst</u>
<mark>Uthevet tekst</mark>
Grunnleggende Lenker:
<a href="https://www.eksempel.com">Besøk Eksempel.com</a>
<a href="om.html">Om Oss Side</a>
<a href="mailto:hei@eksempel.com">Send E-post</a>
<a href="tel:+4712345678">Ring Oss</a>
Lenker med Attributter:
<a href="https://www.eksempel.com" target="_blank">Åpne i Ny Fane</a>
<a href="https://www.eksempel.com" title="Besøk vår hjemmeside">Eksempel</a>
Grunnleggende Bilde:
<img src="foto.jpg" alt="Beskrivelse av bildet">
Bilde med Attributter:
<img src="foto.jpg" alt="En vakker solnedgang" width="300" height="200">
alt-attributtet er avgjørende for:
Uordnede Lister (kulepunkter):
<ul>
<li>Første element</li>
<li>Andre element</li>
<li>Tredje element</li>
</ul>
Ordnede Lister (nummererte):
<ol>
<li>Steg en</li>
<li>Steg to</li>
<li>Steg tre</li>
</ol>
Generisk Container:
<div>
<p>Denne div-en grupperer relatert innhold sammen.</p>
</div>
Semantiske Seksjoner:
<header>Side- eller seksjonsheader</header>
<nav>Navigasjonsmeny</nav>
<main>Hovedinnholdsområde</main>
<section>En seksjon med innhold</section>
<article>Et komplett innholdsstykke</article>
<aside>Sidebar eller relatert innhold</aside>
<footer>Side- eller seksjonsfooter</footer>
<form>
<label for="navn">Ditt Navn:</label>
<input type="text" id="navn" name="navn">
<label for="epost">Din E-post:</label>
<input type="email" id="epost" name="epost">
<button type="submit">Send</button>
</form>
La oss sette alt sammen og lage en komplett nettside. Følg med steg for steg:
<!DOCTYPE html>
<html lang="no">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Min Første Nettside</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="no">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Min Første Nettside</title>
</head>
<body>
<header>
<h1>Velkommen til Min Første Nettside</h1>
<nav>
<ul>
<li><a href="#om">Om</a></li>
<li><a href="#hobbyer">Hobbyer</a></li>
<li><a href="#kontakt">Kontakt</a></li>
</ul>
</nav>
</header>
<main>
<section id="om">
<h2>Om Meg</h2>
<p>Hei! Jeg lærer HTML og dette er min første nettside. Jeg er spent på å lære mer om webutvikling og lage fantastiske nettsider.</p>
<p>Denne nettsiden demonstrerer grunnleggende HTML-struktur inkludert overskrifter, avsnitt, lister og lenker.</p>
</section>
<section id="hobbyer">
<h2>Mine Hobbyer</h2>
<ul>
<li>Lese bøker</li>
<li>Spille gitar</li>
<li>Lære å kode</li>
<li>Fotografering</li>
</ul>
</section>
<section id="kontakt">
<h2>Kontakt Meg</h2>
<p>Vil du komme i kontakt? Her er noen måter å nå meg på:</p>
<ul>
<li>E-post: <a href="mailto:hei@eksempel.com">hei@eksempel.com</a></li>
<li>Telefon: <a href="tel:+4712345678">+47 123 45 678</a></li>
</ul>
</section>
</main>
<footer>
<p>© 2024 Min Første Nettside. Bygget med HTML!</p>
</footer>
</body>
</html>
La oss dele opp hva hver del av nettsiden din gjør:
<h1>)<header> og <nav> tagger for bedre struktur<main> tag for å indikere primært innhold© HTML-entitet for opphavsrettssymbolet<footer> tag<!DOCTYPE html><html>, <head>, og <body> tagger<strong> for viktig tekst, ikke bare fet styling<!-- Feil -->
<p>Dette avsnittet er ikke lukket
<!-- Riktig -->
<p>Dette avsnittet er riktig lukket</p>
<!-- Feil -->
<p><strong>Fet tekst</p></strong>
<!-- Riktig -->
<p><strong>Fet tekst</strong></p>
<!-- Feil -->
<img src="foto.jpg">
<!-- Riktig -->
<img src="foto.jpg" alt="Beskrivelse av foto">
Unngå gamle tagger som <font>, <center>, og <b>. Bruk moderne alternativer:
<b>, bruk <strong><i>, bruk <em><center>, bruk CSSGratulerer! Du har lært grunnleggende HTML og laget din første nettside. Her er hva du kan utforske videre:
HTML kan virke skremmende først, men det er faktisk ganske logisk og greit når du forstår grunnleggende. Hver ekspert webutvikler startet akkurat der du er nå, og lærte disse grunnleggende konseptene.
Nettsiden du nettopp bygget demonstrerer alle kjernekonseptene i HTML: riktig dokumentstruktur, semantisk markup, lenker, lister og innholdsorganisering. Disse ferdighetene danner grunnlaget for alt annet du vil lære innen webutvikling.
Husk at å lære HTML er som å lære et nytt språk - det krever øvelse og tålmodighet. Ikke bekymre deg for å huske hver tag med en gang. Fokuser på å forstå konseptene og bygge ting. Jo mer du øver, jo mer naturlig blir det.
Fortsett å eksperimentere, fortsett å bygge, og viktigst av alt, ha det gøy med det! Nettet er en fantastisk plattform for kreativitet og uttrykk, og du har nettopp tatt ditt første skritt inn i denne spennende verdenen.
Klar til å fortsette HTML-reisen din? Start med å modifisere din første nettside, legg til nye seksjoner, eksperimenter med forskjellige tagger, og se hva du kan skape. Mulighetene er uendelige!
Fortsett å lese med disse relaterte artiklene
Mestre HTML-tagger og attributter med denne omfattende guiden. Lær om åpnings-/lukketagger, globale attributter og beste praksis for ren kode.
Mestre den essensielle strukturen til HTML-dokumenter. Lær om DOCTYPE, html-tag, head-seksjon, body-seksjon og hvordan du setter alt sammen riktig.
Mestre HTML-overskrifter (H1-H6) og avsnitt for bedre innholdsstruktur, tilgjengelighet og SEO. Lær semantisk betydning og beste praksis.
Mestre HTML-lenker og ankere med denne omfattende guiden. Lær om hyperlenker, absolutte vs relative URL-er, ankerlenker og styling for brukervennlighet.