I denne artikkelen vil vi dekke det grunnleggende HTML du trenger for å komme i gang. La oss definere «elementer», «attributter», «tags» og andre viktige konsepter som du kanskje har hørt om, samt deres rolle i språket. Vi viser deg også hvordan HTML-elementer fungerer, en typisk HTML-side og forklarer andre viktige aspekter ved språket. Vi skal leke med en ekte HTML-side underveis, så du ikke går lei!
Hva er HTML?
HTML (HyperText Markup Language) er ikke et programmeringsspråk; dette er markup language brukes til å bestemme strukturen til nettsider som besøkes av brukere. De kan ha en kompleks eller enkel struktur, alt avhenger av intensjonen og ønsket til webutvikleren. HTML består av en rekke elementer som du bruker til å omslutte, pakke eller markere ulike deler av innholdet slik at det har et bestemt utseende eller fungerer på en bestemt måte. Inline for ">", og at på tomme elementer er det verken påkrevd eller tillatt en sluttkode. Hvis ingen attributter er spesifisert, brukes standardverdiene. "> Tagger kan konvertere noe av innholdet til en hyperkobling som kan følges til en annen nettside, kursivere ord og så videre. Tenk for eksempel på følgende linje:
Katten min er veldig sint
Hvis vi vil at en linje skal vises på samme måte, kan vi definere den som et "avsnitt" ved å omslutte den i avsnittskoder (Definerer et tekstavsnitt. ">
), for eksempel:
Katten min er veldig sint
Merk: Tagger i HTML skiller ikke mellom store og små bokstaver, noe som betyr at de kan skrives med store eller små bokstaver. Taggen) definerer for eksempel tittelen på dokumentet, som vises i tittellinjen i et nettleservindu eller på en sidefane. Den inneholder bare tekst og tagger i elementet ignoreres. ">
kan skrives som <title> , <TITLE> , <Title> , <TiTlE>osv. og det vil fungere fint. Beste praksis er imidlertid å forminske alle tagger for konsistens, lesbarhet og andre grunner.</p>
<h2>Struktur av HTML-elementer</h2>
<p>La oss se nærmere på avsnittselementet:</p>
<p>Hoveddelene av elementet er:</p>
<ol><li><b>Åpningsetikett:</b> Den består av navnet (betegnelsen) på elementet (i vårt tilfelle, p), plassert inne <b>vinkelbeslag</b>... Denne taggen fungerer som et tegn på begynnelsen av et element, fra dette øyeblikket begynner taggen å påvirke innholdet etter det.</li>
<li><b>Avsluttende tag:</b> ser ut som den innledende, men inneholder en skråstrek før tagnavnet. Det fungerer som et tegn på slutten av elementet. Å utelate lukkekoder er en vanlig nybegynnerfeil, som kan føre til udefinerte resultater – i beste fall vil alt fungere som det skal, i andre kan det hende at siden ikke er tegnet i det hele tatt eller ikke tegnes som forventet.</li>
<li><b>Innhold:</b> Som du kan se, i vårt tilfelle er innholdet ren tekst.</li>
<li><b>Element:</b> starttag + slutttag + innhold = element.</li>
</ol><h3>Aktiv læring: Lag ditt første HTML-element</h3>
<p>Rediger tekstlinjen nedenfor i boksen <i>Inndata</i> ved å pakke den inn i tagger <em>og</em>(sett inn <em>før køen til <i>spesifiser start av element</i>, og</em> etter henne til <i>spesifiser slutten av elementet</i>) - disse handlingene bør gjøre en tekstlinje kursiv! Du kan se endringer i sanntid i felten <i>Produksjon</i>.</p>
<p> <i>Nullstille</i> <i>Vis løsning</i> for å se det riktige svaret.</p>
<h6>Spillbar kode</h6>
<h2>Resultat</h2>
<div class="output" style="min-height: 50px;">
</div>
<h2>Redigerbar kode</h2>
<p class="a11y-label"></p>
<textarea id="code" class="playable-code" style="min-height: 100px;width: 95%">Dette er min tekst.</textarea>
<div class="controls">
<input id="reset" type="button" value="Nullstille" />
<input id="solution" type="button" value="Vis løsning" />
</div> html (font-family: "Open Sans Light", Helvetica, Arial, sans-serif;) h2 (font-size: 16px;) .a11y-label (margin: 0; text-align: right; font-size: 0.7 rem; width: 98%;) body (margin: 10px; bakgrunn: # f5f9fa;) var textarea = document.getElementById ("kode"); var reset = document.getElementById ("reset"); var løsning = document.getElementById ("løsning"); var output = document.querySelector (". output"); var kode = tekstområde.verdi; var userEntry = tekstområde.verdi; function updateCode () (output.innerHTML = textarea.value;) reset.addEventListener ("klikk", funksjon () (textarea.value = code; userEntry = textarea.value; solutionEntry = htmlSolution; solution.value = "(! LANG : Vis løsning";
updateCode();
});
solution.addEventListener("click", function() {
if(solution.value === "Vis løsning") {
textarea.value = solutionEntry;
solution.value = "Skjul løsning";
} else {
textarea.value = userEntry;
solution.value = "Vis løsning";
}
updateCode();
});
var htmlSolution = "!} <em>Dette er min tekst.</em><h3>Nestede elementer</h3>
<h3>Nesting_elements</h3>
<p>Du kan også neste elementer inne i andre elementer - dette kalles <b>hekking</b>... Hvis vi vil understreke at katten vår er veldig sint, kan vi legge ved ordet "veldig" i elementet) indikerer at innholdet er av stor betydning, alvor eller haster. Nettlesere viser vanligvis innhold med fet skrift. "> <strong>, som betyr at dette ordet er ekstremt viktig i denne sammenhengen:</p><p>
<p>Katten min <strong>veldig</strong> sint.</p>
</p><p>Du må også sørge for at elementene er nestet riktig: i følgende eksempel åpner vi p-elementet først, deretter det sterke elementet, deretter lukker vi det sterke elementet først, deretter p. Følgende er ikke riktig:</p><p>
<p>Katten min <strong>veldig sint.</p></strong>
</p><p>Elementer skal åpne og lukke riktig på en slik måte at de er tydelig innenfor eller utenfor hverandre. Hvis de overlapper som i eksempelet ovenfor, vil nettleseren din prøve å finne ut hva du betyr for deg, og du vil få uforutsigbare resultater. Så ikke gjør det!</p>
<h3>Blokker og innebygde elementer</h3>
<h3>Blokker versus innebygde elementer</h3>
<p>Det er to viktige kategorier av elementer i HTML som du bør være oppmerksom på - blokknivåelementer og innebygde elementer.</p>
<ul><li>Elementer på blokknivå danner en synlig blokk på siden - de vil vises på en ny linje etter alt innhold som kom før dem, og alt innhold etter dem vil også vises på en ny linje. Som oftest er blokknivåelementer strukturelle sideelementer, som for eksempel er avsnitt (avsnitt), lister, navigasjonsmenyer, bunntekst osv. Elementer på blokknivå er ikke nestet i inline-elementer, men noen ganger kan de nestes i andre blokknivåelementer ...</li>
<li>Innebygde elementer er de som er inneholdt i blokknivåelementer som bare omgir små deler av dokumentets innhold, ikke hele avsnitt og grupperinger av innhold. Innebygde elementer resulterer ikke i en ny linje i dokumentet: de finnes vanligvis i et tekstavsnitt, for eksempel definerer et element en hyperkobling for å gå til et bestemt sted på en side eller til en annen side på Internett. Den kan også brukes (avviklet) for å lage et anker - dette er målet for hyperkoblinger på en side: så lenker er ikke begrenset til bare å navigere mellom sider. "> <a>(lenke) eller aksenter som <em>eller) indikerer at innholdet er av stor betydning, alvor eller haster. Nettlesere viser vanligvis innhold med fet skrift. "> <strong> .</li>
</ul><p>Ta en titt på følgende eksempel:</p><p>
<em>Først</em><em>sekund</em><em>tredje</em>
<p>fjerde</p><p>sjette</p>
</p><p> <em>er et inline-element, så som du kan se her, er de tre første elementene på samme linje med hverandre uten mellomrom. På den annen side definerer den et tekstavsnitt. "> <p>er et blokknivåelement, så hvert element sitter på en ny linje, med mellomrom over og under hver (denne avstanden bestemmes av standard CSS-stilen som nettlesere bruker på avsnitt).</p>
<p><b>Merk</b>: HTML5 redefinerte elementkategorier i HTML: se Elementinnholdstypekategorier. Selv om disse definisjonene er mer presise og entydige enn de som kom før, er de mye vanskeligere å forstå enn "blokk" og "inline", så vi vil holde oss til dem i denne delen.</p>
<p><b>Merk</b>: Ikke forveksle begrepene "blokk" og "inline" som brukes i denne delen med visningstyper med samme navn i CSS. Selv om de er korrelert som standard, endrer ikke visningstypen i CSS kategorien til et element, og det påvirker heller ikke hva det kan og kan nestes inn. Denne ganske vanlige forvirringen er en av grunnene til at HTML5 har droppet disse begrepene.</p>
<h3>Tomme elementer</h3>
<h3>Tomme elementer</h3>
<p>Ikke alle elementer samsvarer med mønsteret ovenfor: starttag, innhold, slutttag. Noen elementer består av en enkelt kode og brukes vanligvis til å sette inn noe uansett hvor de er i dokumentet. For eksempel er element et HTML-element som brukes til å beskrive bilder. "> <img>setter inn et bilde på siden akkurat der det er plassert:</p><p>
<img src='https://i1.wp.com/raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png' loading=lazy loading=lazy>
</p><p>Dette vil sende ut følgende til siden din:</p>
<p><b>Merk</b>: Tomme gjenstander kalles noen ganger <i>tomme elementer</i>.</p>
<h2>Egenskaper</h2>
<p>Elementer kan også ha attributter som ser slik ut:</p>
<p>Src = "https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style = "skjerm: blokk; høyde: 156px; margin: 0px auto; bredde: 1287px;" /></p>
<p>Attributtet må ha:</p>
<ol><li>Et mellomrom mellom attributtet og elementets navn (eller det forrige attributtet hvis elementet allerede har ett eller flere attributter).</li>
<li>Navnet på attributtet etterfulgt av et likhetstegn.</li>
<li>Verdien av attributtet, omgitt av anførselstegn.</li>
</ol><h3>Aktiv læring: Legge til attributter til et element</h3>
<h3>Aktiv læring: Legge til attributter til et element</h3>
<p>Ta for eksempel et element som definerer en hyperkobling for å gå til et bestemt sted på en side eller til en annen side på Internett. Den kan også brukes (avviklet) for å lage et anker - dette er målet for hyperkoblinger på en side: så lenker er ikke begrenset til bare å navigere mellom sider. "> <a>- står for anker og gjør teksten i den til en hyperkobling. Den kan ha flere attributter, her er to av dem:</p>
<ul><li>href: Verdien av dette attributtet spesifiserer nettadressen som, i henhold til ideen din, lenken skal indikere hvor nettleseren går når du klikker på den. For eksempel, href = "https://www.mozilla.org/".</li>
<li>title: title-attributtet beskriver tilleggsinformasjon om lenken, for eksempel: hvilken side den fører til. For eksempel, title = "(! LANG: Mozilla-hjemmesiden" . Она появится в виде всплывающей подсказки, когда вы наведете курсор на ссылку.!}</li>
<li>target: Målattributtet spesifiserer visningskonteksten som skal brukes til å vise koblingen. For eksempel vil target = "_blank" vise koblingen i en ny fane. Hvis du ønsker å vise koblingen i gjeldende fane, utelate dette attributtet.</li>
</ul><p>Endre tekstlinjen nedenfor i boksen <i>Inndata</i> slik at den fører til favorittnettstedet ditt. Legg først til elementet <a>deretter href-attributtet og title-attributtet. Til slutt, spesifiser målattributtet for å åpne koblingen i en ny fane. Du kan se endringene som er gjort i sanntid i felten <i>Produksjon</i>... Du bør se en hyperkobling som viser innholdet i tittelattributtet når du holder musepekeren over det, og når du klikker på det, navigerer du til adressen i href-attributtet. Husk at det må være et mellomrom mellom elementnavnet og hver av attributtene.</p>
<p>Hvis du tar feil, kan du alltid starte på nytt ved å bruke knappen <i>Nullstille</i>... Hvis øvelsen gir deg problemer, trykk på knappen <i>Vis løsning</i> for å se det riktige svaret.</p>
<h6>Spillbar kode2</h6>
<h2>Resultat</h2>
<div class="output" style="min-height: 50px;">
</div>
<h2>Redigerbar kode</h2>
<p class="a11y-label">Trykk Esc for å gå ut av kodeområdet (Tab setter inn et tabulatortegn).</p>
<textarea id="code" class="input" style="min-height: 100px;width: 95%">
<p>En lenke til min favorittside.</p>
</textarea>
<div class="playable-buttons">
<input id="reset" type="button" value="Nullstille">
<input id="solution" type="button" value="Vis løsning">
</div> html (font-family: sans-serif;) h2 (font-size: 16px;) .a11y-label (margin: 0; text-align: right; font-size: 0,7rem; width: 98%;) body ( margin: 10px; bakgrunn: # f5f9fa;) var textarea = document.getElementById ("kode"); var reset = document.getElementById ("reset"); var løsning = document.getElementById ("løsning"); var output = document.querySelector (". output"); var kode = tekstområde.verdi; var userEntry = tekstområde.verdi; function updateCode () (output.innerHTML = textarea.value;) reset.addEventListener ("klikk", funksjon () (textarea.value = code; userEntry = textarea.value; solutionEntry = htmlSolution; solution.value = "(! LANG : Vis løsning";
updateCode();
});
solution.addEventListener("click", function() {
if(solution.value === "Vis løsning") {
textarea.value = solutionEntry;
solution.value = "Skjul løsning";
} else {
textarea.value = userEntry;
solution.value = "Vis løsning";
}
updateCode();
});
var htmlSolution = "!} <p>En lenke til min favorittside.</p>"; var solutionEntry = htmlSolution; textarea.addEventListener (" input ", updateCode); window.addEventListener (" load ", updateCode); // stopp tabulatortasten tabber ut av tekstområdet og // få den til å skrive en tabulator ved innstillingsposisjonen i stedet textarea.onkeydown = funksjon (e) (if (e.keyCode === 9) (e.preventDefault (); insertAtCaret ("\ t");) if (e.keyCode === 27) (textarea.blur ();)); function insertAtCaret (tekst) (var scrollPos = textarea.scrollTop; var caretPos = textarea.selectionStart; var front = (textarea.value) .substring (0, caretPos); var back = (textarea.value) .substring (textarea.selectionEnd, textarea.value.length); textarea.value = front + text + back; caretPos = caretPos + text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus (); textarea.scrollTop = scrollPos;) // Oppdater den lagrede brukerkoden hver gang brukeren oppdaterer tekstretningskoden textarea.onkeyup = function () (// Vi ønsker kun å lagre tilstanden når brukerkoden blir vist, // ikke løsningen, slik at løsningen ikke lagres over brukerkoden if (solution.value === "(! LANG: Vis løsning") {
userEntry = textarea.value;
} else {
solutionEntry = textarea.value;
}
updateCode();
};
!} <h3>Boolske attributter</h3>
<h3>Boolske attributter</h3>
<p>Noen ganger vil du se attributter skrevet uten mening - dette er helt lovlig. Slike attributter kalles booleaner og de kan bare ha én verdi, som i utgangspunktet er det samme som navnet. Som et eksempel, ta disabled-attributtet, som du kan tilordne for å gjengi input-elementer hvis du vil at de skal deaktiveres (inaktive) slik at brukeren ikke kan legge inn noen data i dem.</p><p>
<input type="text" disabled="disabled">
</p><p>For korthets skyld er det helt akseptabelt å skrive dem slik (vi har også plassert et ikke-deaktivert inngangselement for referanse for å gi deg en bedre forståelse av hva som skjer):</p><p>
<input type="text" disabled>
<input type="text">
</p><p>I utdataene vil begge alternativene se slik ut:</p>
<h3>Utelatelse av anførselstegn rundt attributtverdier</h3>
<h3>Utelatelse av anførselstegn rundt attributtverdier</h3>
<p>Når du ser rundt på verdensveven, vil du komme over forskjellige ukjente måter å skrive markup på, inkludert å skrive attributtverdier uten anførselstegn. Dette er greit under visse forhold, men vil ødelegge markeringen din i andre. Hvis vi for eksempel går tilbake til hyperkoblingsøvelsen vår, kan vi skrive hovedvarianten med bare href-attributtet slik:</p><p>favorittnettstedet</p><p>Men når vi legger til tittelattributtet i samme stil, gjør vi det feil:</p><p>favorittnettstedet</p><p>På dette tidspunktet vil nettleseren feiltolke markeringen din, og tenke at tittelattributtet faktisk er tre forskjellige attributter - tittelattributtet med verdien "The" og to boolske attributter: Mozilla og hjemmeside. Dette er åpenbart ikke det som var ment og vil resultere i en feil eller uventet oppførsel i koden, som vist i live-eksemplet nedenfor. Prøv å holde musepekeren over lenken for å se hvordan tittelteksten ser ut!</p>
<p>Vårt råd: bruk alltid anførselstegn i attributter - dette vil unngå slike problemer, og derfor vil koden være mer lesbar.</p>
<h3>Enkelte eller doble anførselstegn?</h3>
<h3>Enkelte eller doble anførselstegn?</h3>
<p>I denne artikkelen vil du legge merke til at alle attributter er omgitt av doble anførselstegn. Du kan imidlertid se enkeltanførselstegn i andres HTML-dokumenter. Dette er en ren smakssak og du kan fritt velge hvilken du foretrekker. Begge de følgende linjene er likeverdige:</p><p>En lenke til mitt eksempel. En lenke til mitt eksempel.</p><p>Du må imidlertid passe på å ikke blande dem sammen. Følgende vil være feil!</p><p>En lenke til mitt eksempel.</p><p>Hvis du bruker én type anførselstegn i HTML-en din, kan du sette en annen type anførselstegn i dem uten å forårsake problemer:</p><p>En lenke til mitt eksempel.</p><p>Hvis du vil sette inn anførselstegn av samme type, må du bruke HTML-enheter. Dette vil for eksempel ikke fungere:</p><p>En lenke til mitt eksempel.</p><p>Derfor må du gjøre dette:</p><p>En lenke til mitt eksempel.</p><h2>HTML-dokumentstruktur</h2>
<p>Nedenfor er et eksempel på innpakning av grunnleggende, frittstående HTML-elementer som ikke er veldig nyttige alene. La oss se hvordan de individuelle elementene kombineres for å danne hele HTML-siden:</p><p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Min testside
Dette er siden min
