Främre
Översikt: Komma igång med webben
Följande

Hypertext Marking Language (HTML) är koden som används för att strukturera och visa en webbsida och dess innehåll.Till exempel kan innehållet vara stycken, en lista med vinjetter eller bilder och datatabeller.Som titeln antyder kommer den här artikeln att ge dig en grundläggande förståelse för HTML och hur dess funktion är.

Så vad är HTML egentligen?

HTML är inte ett programmeringsspråk;det är enMarkeringsspråkDet definierar strukturen på ditt innehåll.HTML består av en serie element som du kommer att använda för att omsluta olika delar av innehållet så att de ses eller uppföras på ett visst sätt.Enfierre -etiketter kan göra ett ord eller bild till en hyperlänk till en annan webbplats, ord kan ändras till ital, förstora eller krympa texterna etc.Ta till exempel följande innehåll:

html

Min katt är väldigt knurr

Om du vill ange att det är ett stycke kan du omsluta texten med stycketetiketten (

html

<p>Min katt är väldigt knurrp>

Anatomi av ett HTML -element

Utforska detta stycke i större djup.

Huvudpartierna i elementet är:

Öppningsetiketten: består av elementets namn (i detta fall p), låst förbiVinkelparentes(<>) för öppning och stängning.Det fastställer var elementet börjar eller börjar - i detta fall, var är början av stycket.
Avslutningsetiketten: Det är samma som öppningsetiketten, förutom att den innehåller en stängningsfält (/) innan etikettnamnet.Fastställer var elementet slutar - i detta fall där stycket slutar.
Innehållet: Detta är innehållet i elementet, som i detta fall bara är text.
Element: Öppningsetiketten, plus stängningsetiketten, plus innehållet motsvarar elementet.

Elementen kan också ha attribut, som ses på följande sätt:

Attribut innehåller ytterligare information om elementet, som inte vill att det ska visas i det verkliga innehållet i elementet.HärklassÄr hannamnav attributet ochredaktörhantapperhetav attributet.I detta fall attributetklassDet gör att elementet kan få ett identifikationsnamn, som sedan kan användas för att registrera sig för elementet i stilinformation och andra saker.

Ett attribut måste alltid ha:

Ett utrymme mellan detta och namnet på elementet (eller föregående attribut, om elementet redan har ett eller flera attribut).
Namnet på attributet följt av ett tecken på lika (=).
Öppna och stänga citat, omsluta värdet på attributet.

Attribut ingår alltid i öppningsetiketten för ett element, aldrig i stängningen.

Använda sig av:Attributet med enkla värden som inte innehåller ASCII tomma utrymmen (eller någon av karaktärerna" ' ` = < >) De kan förbli oinklara, men alla attributvärden rekommenderas, eftersom detta gör koden mer konsekvent och förståelig.

Häckelement

Du kan också placera element inom andra element - detta kallasAnidan-.Om du till exempel vill lyfta fram ett ord från texten (i exemplet ordet "mycket"), kan vi omsluta det i ett element, vilket innebär att detta ord måste betonas:

Tomma element

Vissa element har inte innehåll och kallastomma element.Ta till exempel elementetav vår html:

html

<img src="Bilder/Firefox-icon.png" alt="Min testbild" />

Den har två attribut, men det finns ingen stängningsetikettInget slutet innehåll.Detta beror på att ett bildelement inte innehåller innehåll som ska påverkas.Syftet är att visa en bild på HTML -sidan, på den plats där den visas.

Anatomi av ett HTML -dokument

Hittills har du sett grunderna i enskilda HTML -element, men dessa är inte särskilt användbara av sig själva.Nu kommer du att se hur enskilda element kombineras för att bilda en hel HTML -sida.Besök din exempelkod igen iindex.html(Du såg för första gången i artikelnFilhantering):

html

<!Doktyp html><html> <huvud> <meta karset="UTF-8" /> <titel>Min provsidatitel> huvud> <kropp> <img src="Bilder/Firefox-icon.png" alt="Min testbild" /> kropp>html>

Ha:

<! DocType html>- typen av dokument.Det är en ingress som krävs.Tidigare, när HTML var ung (cirka 1991/2), fungerade de typer av dokument som länkar till en uppsättning regler som HTML -koden på sidan bör följa för att betraktas som bra, vilket kan innebära automatisk verifiering av fel och andra användbara saker.Men idag är det helt enkelt en gammal artefakt som inte bryr sig, men som måste inkluderas så att allt fungerar korrekt.För tillfället är det allt du behöver veta.
- elementet.Detta element innehåller hela innehållet på hela sidan och ibland är det känt som rotelementet (rotelement).
- elementet.Detta element fungerar som en behållare med allt du vill inkludera på HTML -sidan somNejDet syns av besökare på sidan.Inkluderar saker som nyckelord (nyckelord), En beskrivning av sidan som du vill visas i sökresultaten, CSS -kod för att utforma innehållet, egenskaperna hos karaktärsspelet etc.
-.Detta element fastställer den teckenuppsättning som ditt dokument kommer att använda iUTF-8, som innehåller nästan alla karaktärer på alla mänskliga språk.I grund och botten kan du hantera allt textinnehåll som du kan inkludera.Det finns ingen anledning att inte etablera det och kan undvika problem i framtiden.
- elementetStäll in titeln på din sida, som är titeln som visas på fliken eller i webbläsarens titelfält när sidan laddas och används för att beskriva sidan när den läggs till markörerna eller som en favorit.
- elementet.BifogaAlltInnehållet du vill visa webbanvändare att besöka din sida, vare sig det är text, bilder, videor, spel, reproducerbara ljudledningar och så vidare.

Bilder

Var uppmärksam på elementetbild :

html

<img src="Bilder/Firefox-icon.png" alt="Min testbild" />

Som sagt tidigare inbäddas en bild på sidan, i den position där den visas.Uppnå det genom attributetsrc(källa), som innehållerSökväg (ruta o ubicación)av din bildfil.

Ett attribut ingår ocksåalt(Alternativ) som innehåller en text som ska beskriva bilden, och som kan nås av användare som inte kan se bilden, kanske för att:

De är blinda eller har visuella brister.Användare med visuella hinder använder vanligtvis verktyg som heterSkärmläsare (skärmläsare),som läser texten i Alt -attributet.
Det fanns ett fel i koden som förhindrar att bilden laddas.Som ett exempel modifierar medvetet platsen inom attributetsrcså att detta är felaktigt.Om du håller och laddar sidan, bör du se något sådant istället för bilden:

Nyckelfrasen om alt uppifrån är "text som borde beskriva bilden."Alt -texten måste ge läsaren tillräcklig information så att den har en bra uppfattning om vad bilden visar.Så din nuvarande text "My Test Image" är inte bra alls.En mycket bättre text för Firefox -logotypen skulle vara:"The Firefox -logotypen: en flamfox som omger jorden".

Försök hitta bättre alt -texter för din bild.

Använda sig av:Upptäck mer om tillgänglighet iLärande modul om tillgänglighet.

Text märkt

Det här avsnittet kommer att täcka några av de grundläggande HTML -elementen som du kommer att använda för textmarkering.

Rubriker

Rubrikelementen tillåter att specificera att vissa delar av innehållet är på väg, eller undermaskas i innehållet.På samma sätt som en bok har en huvudtitel, och som i sin tur kan ha titlar för varje enskilt kapitel, och undertexter inom sig, kan ett HTML -dokument också ha dem.HTML har sex nivåer av rubriker,

(en-us)

, även om du antagligen bara använder 3-4 högst:

html

<H1>Min huvudtitelH1><höger>Min högre nivå titelhöger><Hata>Min undertextHata><hlum>Min undertitelhlum>

Försök nu att lägga till en lämplig titel för din HTML -sida, innan ditt element.

Använda sig av:Du kommer att se att nivå 1 -rubriken har en implicit stil.Använd inte rubrikelement för att göra texten större eller mörkare, eftersom detta element används avtillgänglighetoch andraskäl som sökmotorpositionering(Sökmotoroptimering, SEO).Försök skapa en betydande sekvens av rubriker på dina sidor utan att hoppa över nivåer.

Stycken

Som förklarats ovan, elementen

De används för att bifoga textpunkter;Du kommer att använda dem ofta för regelbunden märkning av textinnehåll:

html

<p>Detta är ett enkelt styckep>

Lägg till ett eller några stycken i ditt exempel på text (du borde ha det när du studeradeVad blir utseendet på din webbplats?), placerad direkt under -elementet.

Listor

Mycket av webbinnehållet ges av listor, så HTML har speciella element för dem.Markeringen av listor görs alltid i minst två element.De två vanligaste typerna av listor är de ordnade och oordningliga listorna:

De röriga listornaDe är de där ordningen på artiklar inte är relevant, som i en inköpslista.Dessa är låsta i ett element
(oordnad lista).
De ordnade listornaDe är de där ordningen är relevant, som i ett recept.Dessa är låsta i ett element(beställd lista).

Varje element på listan placeras i ett element

(listobjekt).

Om du till exempel vill omvandla en del av följande stycke till en lista:

html

<p>I Mozilla är vi en gemenskap av teknologer, tänkare och byggare som arbetar tillsammans ...p>

Du kan göra följande:

html

<p>I Mozilla är vi en gemenskap avp><ul> <li>teknologerli> <li>tänkareli> <li>Byggareli>ul><p>arbetar tillsammans...p>

Försök att lägga till en ordnad eller rörig lista på din exempel på sida.

Länkar

Länkarna eller länkarna är mycket viktiga - de är de som gör webben, webben.För att implementera en länk måste du använda en enkel obligation --enDet är förkortningen av det engelska ordet "ankare" ("ankare»).För att konvertera lite text i ett stycke till en länk, följ dessa steg:

Välj lite text.Vi valde "Mozilla Manifesto."
Leta reda på texten i ett
element, så här:
html
```
<en>Mozilla manifesten>
```
Proportion till elementet
ett HREF -attribut, så här:
html
```
<en href="">Mozilla manifesten>
```
Slutför värdet på detta attribut med den webbadress som du vill ansluta till länken:
html
```
<en href="https://www.mozilla.org/es-AR/about/manifesto/" >Mozilla manifesten>
```

Du kan få oväntade resultat om i början av webbadressen omiterar delenhttps: //ohttp: //ring uppprotokoll.Så efter markeringen av länken klickar du på den för att se till att du riktar dig till önskad adress.

Använda sig av: hrefDet kan i princip tyckas vara ett något mörkt alternativ för ett attributnamn.Om du har problem med att komma ihåg det, kom ihåg att det hänvisar tillhsupernatdomareerense(Hypertextreferens).

Lägg nu till en länk till din sida om du fortfarande inte gjorde det.

Slutsats

Om du lyckades följa alla instruktioner i den här artikeln, bör du sluta med en sida som ses så här (du kan ocksåSe henne här):

Om du stagnerar i något steg kan du jämföra ditt arbete medFärdig exempelkoden github.

Här har du egentligen bara skrapat HTML -ytan.För att lära dig mer, gå tillSidan med lärande foto httml.

Främre
Översikt: Komma igång med webben
Följande

Grundläggande HTML -koncept - Lär dig webbutveckling |Mdn (2023)

Så vad är HTML egentligen?

Anatomi av ett HTML -element

Häckelement

Tomma element

Anatomi av ett HTML -dokument

Bilder

Text märkt

Rubriker

(en-us)

(en-us)

Stycken

Listor

Länkar

Slutsats