Om du vill bli webbmaster och lära dig hur man skapar en webbplats, kan du tycka att möjligheten att komma till rätta med HTML är ganska skrämmande.

Detta är dock något som inte kan undvikas, eftersom den stora majoriteten av webbplatsens målsidor som du besöker kommer att ha skrivits och strukturerats med HTML-element. Faktum är att HTML är nu används av mer än 74 % av alla kända webbplatser, medan detta språk också hjälper till att förbättra allt från designen av din webbplats till kvaliteten på innehållet som den innehåller.

I den här guiden kommer vi att utforska de grundläggande principerna för HTML och dess potentiella tillämpningar, innan vi tittar på exempel på de individuella element som du använder när du kodar din webbplats.

Vad är HTML?

I enkla termer, HTML representerar standardspråket för märkning för att skapa webbsidor online. Det står för Hyper Text Markup Language och dess främsta funktion är att fastställa struktur, layout och presentation av enskilda målsidor. Även om webbläsare inte direkt visar HTML-språk, spelar det en avgörande roll för att hjälpa till att skapa en synlig, tillgänglig och lättanvänd webbplats.

HTML stöds också av ett antal individuella element, som successivt bygger webbsidor, strukturerar presentationen av innehåll och ger din webbplats liv. Dessa element skapas och finns i "taggar", som definierar alternativa delar av innehåll som rubriker, stycken och liknande exempel.

Vi kommer att utforska dessa element och deras konstruktion mer i detalj nedan, samtidigt som vi tittar på hur de kan anpassas för att introducera färg, länkar och variabel typografi på din webbplats.

Var används HTML?

Som vi kan se är den vanligaste applikationen för HTML designen av de individuella målsidorna som utgör din webbplats. Detta är inte den enda tillämpningen av det populära kodningsverktyget, men att förstå dess ytterligare användningsområden hjälper dig att få ut det mesta av språket som ny webbansvarig. Så här är några av de ytterligare sätten på vilka HTML kan tillämpas:

• Skapa anpassningsbara element på en befintlig sida. Om du tänker tillåta blogginlägg kommentarer eller publicering av användargenererat innehåll på din webbplats, kan du använda HTML-kodfragment för att aktivera detta. Dessa element kommer att göra det möjligt för användare att betona nyckelord, bädda in länkar och formatera kommentarer beroende på de begränsningar som du sätter på plats som moderator.
• Skapa ytterligare innehåll för e-post. E-post använder också HTML som språk för rika textmeddelanden, som innehåller länkar, text och en mängd andra element som inte enbart kan visas i vanlig text. Så om du vill dela en e-bok som relaterar till din webbplats via e-post, kan du använda HTML för att optimera effekten av ditt meddelande.
• Förstå offlinehjälpdokument som är installerade på din dator. Intressant nog används HTML som format för datorbaserade hjälpdokument som är tillgängliga offline. Grundläggande kunskaper om HTML kan därför hjälpa dig att förstå problem med din hårdvara och lösa dem snabbare, vilket i sin tur kan säkerställa att du kan återställa din webbplats snabbare i fall då den har gått offline.

HTML-sidstruktur

Innan du kan bygga ut en HTML-sida behöver du grunderna på plats.

Vanligtvis kommer en sida att bestå av tre strukturella element:

1. Rubrik: Rubriken innehåller innehåll som är relevant för alla sidor på din webbplats, som en logotyp eller webbplatsnamn och ett navigationssystem. Rubriken syns på varje sida.
2. Huvuddel: Detta upptar den största ytan på en webbsida. Den innehåller innehåll som är specifikt för sidan som visas.
3. sidfot: Sidfoten innehåller vanligtvis kontaktinformation, en leveransadress eller juridiska meddelanden. Precis som sidhuvudet visas sidfoten på varje sida, men den är placerad längst ner.

Så här ser de grundläggande strukturella elementen ut när de möts:

Här är ett annat exempel, med hjälp av header-taggar och paragraftaggen för att strukturera innehåll estetiskt. Dessutom har vi lagt in en sidfotstagg för innehåll under huvuddelen av en sida:

HTML-taggar

Utgångspunkten för varje HTML-kod är individuella taggar, som kan användas för att skapa alla viktiga element och hjälpa till att strukturera dina webbsidor.

Nedan kommer vi att ta en titt på de vanligaste taggarna innan vi utforskar hur de kan utnyttjas för att generera specifika element på sidan:

Rubrikmärken

Alla onlinedokument, inklusive webbsidor, börjar med en rubrik. Dessa är konstruerade med HTML-taggar, med språket som för närvarande tillåter upp till sex element i varierande storlek som också gör att du kan strukturera ditt innehåll med ytterligare titlar, undertexter och markerade rader med fet text. För att starta din rubrik prefixar du helt enkelt den relevanta texten med , , , , eller tag beroende på önskad storlek.

Du måste sedan använda en avslutande tagg i slutet av rubriken för att kapsla in texten, och kommer att visas enligt följande i HTML-format:

När det har bekräftats kommer detta att översättas till följande estetik på din webbplats målsida:

Här är de olika storlekarna på variabelrubrikerna tydliga att se, liksom det faktum att webbläsaren lägger till en rad före och efter rubriken. Du kommer också att märka att den avslutande taggen i slutet av rubriktexten har en något annorlunda estetik, men kommer att täcka detta i följande kapitel när vi ser på att använda taggar för att definiera specifika element.

Stycketaggar

En liknande princip tillämpas på startstycketaggar, som avbildas av . Detta gör att du kan strukturera ditt innehåll och dela upp det i relevanta stycken, vilket i sin tur leder till en enklare och mer sömlös läsupplevelse. Återigen, den taggen ska placeras i början av den relevanta texten, innan den alternativa avslutande taggen appliceras i slutet för att slutföra effekten. Till skillnad från rubriktaggar finns det dock inga numeriska olika som kan ändra storleken på texten i stycket.

Utanför HTML-formatet kommer detta att dela upp texten enligt följande på din färdiga webbsida:

Radbrytningstaggar

De första exemplen representerar de mest grundläggande HTML-taggarna, men det finns andra som använder ett annat format och alternativa stängningssätt. Ta till exempel radbrytningar som skapar en distinktion där textrader bryts och fortsätter på följande rad. Det finns en kärnskillnad mellan radbrytningar och stycken inom HTML-området, eftersom medan de senare är standardblockelement som innehåller text, skapar de förra separation inom en befintlig element.

På grund av detta representerar radbrytningar ett tomt element i HTML och definieras därför inte av vare sig öppnande eller avslutande taggar. Istället är de avbildade av tagg, som kan infogas i befintliga element för att bryta upp text och potentiellt lyfta fram viktig information. Det enda mellanrummet mellan karaktären och snedstrecket framåt är avgörande, eftersom taggen annars inte går att känna igen i HTML-format.

När det har tillämpats kommer detta att dela upp texten enligt följande:

Som du kan se kan du använda radbrytningar så ofta du vill inom ett befintligt styckeelement, så länge de tillför värde och gör informationen lättare att smälta. Du kommer också att se att de inledande och avslutande stycketaggarna förblir oförändrade, med radbrytningstaggar som används för att ändra layouten för texten som ingår i.

Detta är ett av exemplen på hur HTML-taggar kan användas för att ändra befintliga element, vilket spelar en nyckelroll för att definiera den visuella layouten på dina webbsidor och innehåll.

Horisontella linjer

På samma sätt finns det andra taggar som kan användas inom element eller för ytterligare separata texter på din webbsida. En av de mest använda är taggen, som hjälper till att skapa ett tomt element som ritar en visuell, horisontell linje mellan alternativa avsnitt av ett onlinedokument. Du kanske vill placera en linje mellan två textkroppar, till exempel för att fokusera på läsaren eller helt enkelt introducera ett nytt visuellt element. Så här skapar du ett sådant avbrott i HTML:

Här framhäver brytningen mellan hr-tecken och snedstreck konstruktionen av ett tomt element, medan det återigen inte krävs någon stängningstagg för att fullborda effekten. Detta kommer att skapa följande visuella:

Bildtaggar

Bildtaggar representerar också tomma element i HTML, vilket återigen betyder att de inte har en avslutande tagg. Eftersom de bara innehåller attribut som relaterar till webbadressen till bilden som du bäddar in på webbplatsen, definieras de helt enkelt av taggen i början av elementet. Dessa kan placeras var som helst på din webbplats, även om det är ovanligt att inkludera dem i befintliga element som stycken eller rubriker. Så här kommer en typisk HTML-bildtagg att presentera sig själv:

Du bör också tillhandahålla alternativ text till din bild, vilket hjälper människor att se den vid långsamma laddningstider eller användning av skärmläsare. På så sätt, om webbläsaren inte kan hitta en bild, kommer den att visa värdet på det alternativa attributet för tittarna. Detta använder återigen bildtaggen, men innehåller en annan uppsättning attribut:

HTML-element

Tidigare har vi tittat på hur enkla HTML-taggar används för att definiera element på sidan, samtidigt som vi undersöker hur de kan anpassas ytterligare genom att använda tomma element som innehåller bild- och radbrytningstaggar. Detta hjälper oss att förstå sambandet som finns mellan taggar och element, och hur de kan användas för att definiera olika typer av innehåll på din webbplats.

Medan alla aspekter av HTML-språket representeras av en tagg, till exempel, måste ett definierat element som innehåller innehåll ha både en start- och en avslutande tagg. Så rubriker och stycken är HTML-element eftersom de använder start- och avslutande taggar för att kapsla in och utöka den relevanta texten. Däremot innehåller tomma element antingen attribut eller inget innehåll alls, vilket gör att de kan användas i befintliga element utan behov av en avslutande tagg.

Definiera HTML-element

När du använder exempel som rubriker och stycken är korrekt tillämpning av start- och stängtaggar avgörande. Det är starttaggen (som t.ex eller ) som definierar elementet i fråga, till exempel, medan den avslutande taggen säkerställer att detta element inte fortsätter över resten av webbsidan. Om du misslyckas med att använda stängningen taggen i slutet av det önskade stycket, till exempel, kommer texten att visas i ett enda block som är fult och extremt svårt att läsa.

Alla avslutande taggar är identiska med starttaggar förutom det faktum att de förra har ett snedstreck före de relevanta tecknen. Så i fallet med en rubrik, blir den avslutande taggen , medan du alltid kommer att använda för stycken för att definiera avbrottet i text. Detta kräver uppmärksamhet på detaljer vid kodning, och det är viktigt att notera när du programmerar rubriker att numret du använder (som h1 eller h1) tillämpas i både start- och avslutande taggar.

Använder kapslade HTML-element

I detta skede är det tydligt att HTML-dokument och webbsidor bildas av ett träd av olika element, som fungerar som byggstenar för en rad tillgångar. Vi har också tittat på hur dessa element kan formas och användas för att strukturera onlineinnehåll, och vi kommer att fortsätta detta nu genom att titta på kapslade HTML-element.

Precis som tomma element och fristående taggar (som kan inkorporeras i definierade HTML-element, så kallade kapslade element kan även inrymmas i innehåll som rubriker och stycken. Dessa inkluderar exempel som fetstil och kursiv bokstäver och understruken text, samtidigt som de kan användas för att lägga till personlighet till ditt innehåll och dra läsarens blick till specifika punkter av intresse.

Fet, kursiv och genomstruken text i HTML

Låt oss säga att du vill markera ett ord i ett befintligt styckeelement. Du kan uppnå detta genom att göra det fetstilt, med enkla taggar inom standarden element. Med HTML programmerar du detta enligt följande:

Här har det kapslade elementet både en start- och en avslutande tagg, som var och en följer ett liknande format som de som är kopplade till rubriker och stycken. De kan användas sömlöst inom befintliga element, och i det här fallet kommer det att ge följande resultat:

Låt oss nu säga att du också skulle vilja ändra typografin för detta ord så att det också är kursivt. Detta kan uppnås helt enkelt genom att lägga till ytterligare ett kapslat element, som bör kodas så här:

Som du kan se har start- och avslutande kursivta taggar helt enkelt införlivats i element. Detta kommer nu att omvandla innehållet i elementet så att det ser ut som följer:  

Naturligtvis kan du bestämma dig för att du föredrar att markera detta ord på ett annat sätt. Du kan därför använda ett alternativt kapslat element, till exempel genomstrykning (som representeras av taggarna och . Dessa taggar kan appliceras på samma sätt inom element, som visas enligt följande i HTML:

I det här fallet visas texten enligt följande på ditt dokument eller målsida:  

Detta ger en inblick i element som kan bildas av taggar, som i sin tur definierar strukturen på dina webbsidor och innehållet de har. Inte bara detta utan tomma och kapslade element kan också användas för att ytterligare definiera ditt innehåll.

HTML-attribut

Om taggar är byggstenarna som konstruerar och definierar element, kan HTML-attribut användas för att anpassa deras egenskaper (som stil, färg och språk. Alla HTML-element har kärnattribut, som tillhandahåller kärninformation och alltid anges i stat-taggen . De tenderar att komma i par, så de kommer ofta att visas i följande format: namn=”värde”.

Enkelt uttryckt representerar namnet egenskapen som du vill ställa in, medan värdet relaterar till de specifika kriterier som du vill införliva.

Det finns ett stort antal attribut som kan tillämpas på dina HTML-element, men de som är mest relevanta för nya webbansvariga är:

Attributet 'lang'

Det enkla mest grundläggande attributet definierar språket i dokumentet och dess delar. Det deklareras med attributet 'lang', och även om det lätt förbises har det fördelen att innehållet blir mer tillgängligt för skärmläsare och sökmotorer. Det kommer vanligtvis att presenteras i början av dokumentet i följande format:

Efter attributet lang anger de två första bokstäverna språket (som är engelska i det här fallet). Efter bindestrecket fastställer de två följande bokstäverna dialekten, även om detta inte kommer att finnas för alla språk. Det är viktigt att du får det här attributet rätt om du ska lyckas nå din målgrupp.

Attributet 'align'

Vi har redan berört formatet för HTML-attribut (namn=”värde”), och den bästa utföringsformen av detta inträffar när du försöker anpassa innehållet i dina element. Du kan välja att centrera alla stycken på en specifik sida, till exempel med justeringen som den egenskap du vill ställa in. Därefter är 'center' värdet på attributet, även om du kan välja att justera din text till vänster eller höger.

Detta kommer att anpassa din element i mitten av sidan och skapa en enhetlig layout som passar din webbplatss specifika karaktär (se nedan):

Attributet 'href'

Om du ska bygga en synlig webbplats är det viktigt att du lägger in både inkommande och utgående länkar. Att bygga en länkportfölj som innehåller bakåtlänkar till interna målsidor är också en hållbar strategi, så du måste lära dig hur du kodar dessa i HTML.

HTML-länkar definieras med taggen, som inkluderar mållänken tillsammans med den anslutna ankartexten som kommer att innehålla URL:en. Det är 'href'-attributet som anger webbplatsadressen, men detta är inbyggt som en del av starttaggen. Den är kodad i HTML enligt följande:

Detta framhäver tydligt skillnaden mellan start- och sluttaggen, och kommer att översättas enligt följande på din målsida:

Attributet 'färg'

Detta är en annan viktig egenskap, eftersom användningen av färg kan blåsa liv i din webbplats samtidigt som det bidrar till att skapa viktiga kontraster och en stark designestetik. I HTML kan en färg specificeras genom att använda dess namn, men det är också möjligt att använda ett RGB- eller ett HEX-värde för att uppnå detta mål. Det förstnämnda alternativet är dock det enklaste att följa, medan det också kan tillämpas på rubriker, stycken och andra element på din sida.

Detta är ett stilattribut, där ditt val av färg representerar det värde som du vill ställa in. När du applicerar den röda färgen på huvudrubriken, till exempel, kommer det att se ut så här:

När det har applicerats kommer detta element att visas enligt följande på din webbplats:

Återigen finns det en tydlig skillnad mellan start- och avslutande taggar som definierar elementet, medan detta är ett av de enklaste attributen att applicera i HTML. Det lyfter också ytterligare fram namnet = ”värdeformatet för HTML-attribut, vilket gör inlärningsprocessen och tillämpningen av dessa mycket enklare på hela din webbplats.

Testa själv

Med en grundläggande förståelse för HTML och dess individuella element är nästa steg att genomföra några enkla projekt och tillämpa dina teoretiska kunskaper för att lösa praktiska utmaningar.  

I övningen nedan har vi presenterat en text förutom och bett om att formatera olika aspekter med HTML. Använd guiden och allt du har lärt dig hittills för att slutföra utmaningen när du förbereder dig för att koda din egen webbplats.

frågor:

1. Komplettera rubrikelementet med rätt avslutande tag.
2. Gör rubriken fet.
3. Infoga en horisontell linje under rubriken.
4. Använd färgattributet och nyansen "Tack för besöket" i grönt
5. Infoga denna hyperlänk (https://www.w3schools.com/html/) i ankartexten "Läs mer".
6. Längst upp på sidan använder du formatet namn=”värde” för att vänsterjustera styckena

HTML-språkstatistik och fakta

1. HTML-, huvud- och kroppselementen har varit en del av HTML-specifikationen sedan mitten av 1990-talet, och fram till för några år sedan var de de primära elementen som användes för att ge struktur åt HTML-dokument. Situationen har dock förändrats dramatiskt under de senaste åren eftersom HTML5 har lagt till en rad nya taggar som kan användas för att lägga till en rik semantisk mening till strukturen i ett HTML-dokument.
2. HTML-dokument krävs för att börja med en dokumenttypsdeklaration (informellt en "doctype"). I webbläsare hjälper doctype till att definiera renderingsläget. HTML5 definierar inte en DTD; Därför är doctype-deklarationen enklare och kortare i HTML5.
3. Mobila webbläsare har helt anammat HTML5, så att skapa mobilklara projekt är lika enkelt som att designa och konstruera för sina mindre pekskärmar – därav populariteten för Responsiv Design. Det finns några bra metataggar som också låter dig optimera för mobilen.  
4. 78 % av innehållsutvecklarna håller med om att strukturen är lämplig för att skapa mobilappar, och 68 % säger att den är lämplig för att designa alla typer av appar.
5. HTML5 kommer också med en rad fantastiska API:er som låter dig bygga en bättre användarupplevelse och en kraftigare, mer dynamisk webbapplikation - här är en snabb lista över inbyggda API:er:
   • Dra och släpp (DnD)
   • Offlinelagringsdatabas
   • Hantering av webbläsarhistorik
   • Dokumentredigering
   • Tidsinställd mediauppspelning
6. HTML5 kontrolleras inte av ett företag. En av dess bästa egenskaper ligger i det faktum att det är en öppen standard. Utvecklare har friheten att låta sin kreativitet flöda och lägga till så många funktioner och funktioner som de bara kan.
7. Jämfört med andra webbläsare ser varje uppdatering av Google Chrome till att ha stöd för HTML5. Dessutom är YouTubes standardspelare nu HTML5 och Googles Flash-annonser konverteras nu till HTML5.
8. Användning av HTML5 av utvecklare (efter region):
   • Nord- och Latinamerika – 70 %
   • Sydamerika – 61 %
   • ASPAC – 60 %
   • Australien - 60%
   • Europa - 59%
   • Afrika – 50 %

Slutsats

Även om HTML bara skapades så sent som 1991 (med den första versionen av kodspråket som sedan lanserades 1995), har det snabbt blivit ett framstående verktyg i designen av funktionella och visuellt tilltalande webbplatser. HTMLs inflytandenivå fortsätter också att utvecklas, med den senaste iterationen (HTML5) som antas av ett växande antal webbplatser över hela världen.

I detta avseende är att lära sig de grundläggande delarna av HTML och hur man tillämpar dem det enskilt viktigaste steget du kommer att ta för att skapa en framgångsrik, synlig och i slutändan konkurrenskraftig webbplats.