HTML Tutorial for Beginners

Om du vill bli webbansvarig och lära dig att skapa en webbplats kan du tycka att det är ganska skrämmande att behöva sätta sig in i HTML.

Detta är dock något som inte går att undvika, eftersom de allra flesta webbsidor som du besöker kommer att vara skrivna och strukturerade med HTML-element. Faktum är att HTML nu används av mer än 74 % av alla kända webbplatser, samtidigt som detta språk också bidrar till att förbättra allt från utformningen av din webbplats till kvaliteten på det innehåll 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 enskilda element som du använder när du kodar din webbplats.

Vad är HTML?

Simpelt uttryckt är HTML det standardiserade markupspråket för att skapa webbsidor online. Det står för Hyper Text Markup Language och dess viktigaste funktion är att fastställa struktur, layout och presentation av enskilda landningssidor. Även om webbläsare inte direkt visar HTML-språket spelar det en central roll för att hjälpa till att skapa en synlig, tillgänglig och lättanvänd webbplats.

HTML understöds också av ett antal enskilda element, som gradvis bygger upp webbsidor, strukturerar presentationen av innehållet och ger liv åt din webbplats. Dessa element skapas och ingår i ”taggar”, som definierar alternativa delar av innehållet såsom rubriker, stycken och liknande exempel.

Vi kommer att utforska dessa element och deras uppbyggnad närmare 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 det vanligaste användningsområdet för HTML utformningen av de enskilda landningssidor som utgör din webbplats. Detta är dock inte den enda tillämpningen av det populära kodningsverktyget, men om du förstår dess ytterligare användningsområden kan du som ny webbmaster få ut det mesta av språket. Så här är några av de ytterligare sätt som HTML kan användas på:

• Skapa anpassningsbara element inom en befintlig sida. Om du tänker tillåta kommentarer till blogginlägg eller publicering av användargenererat innehåll på din webbplats kan du använda HTML-kodfragment för att möjliggöra detta. Dessa element gör 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 inför 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 kan presenteras enbart i vanlig text. Så om du vill dela en e-bok som rör din webbplats via e-post kan du använda HTML för att optimera effekten av ditt meddelande.
• Förstå offlinehjälpsdokument 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 i HTML kan därför hjälpa dig att förstå problem med din maskinvara och lösa dem snabbare, vilket i sin tur kan se till att du kan återställa din webbplats snabbare i de fall då den har gått offline.

HTML-sidestruktur

För att du ska kunna bygga upp en html-sida måste du ha grunderna på plats.

Typiskt sett består en sida av tre strukturella element:

1. Header: Huvudet innehåller innehåll som är relevant för alla sidor på din webbplats, t.ex. en logotyp eller webbplatsens namn och ett navigationssystem. Huvudet 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 den sida som visas.
3. Footer: Innehållet i sidfoten innehåller vanligtvis kontaktinformation, en leveransadress eller juridiska meddelanden. Precis som rubriken visas sidfoten på varje sida, men den är placerad längst ner.

Här ser dessa grundläggande strukturella element ut när de sätts samman:

Här är ett annat exempel där du använder header-taggar och paragraph-taggar för att strukturera innehållet estetiskt. Dessutom har vi lagt in en fotnottag för innehåll under huvuddelen av en sida:

<html>

<head>

Du kan lägga in text eller kod här, som en
Google Analytics-spårningskod för
exempel.

</head>

<body>

<h1>Min första rubrik</h1>

<p>Välkommen till min webbplats!</p>

<footer>

<p>Kontaktinformation kan läggas här</p>

</footer>

</body>

</html>

HTML-taggar

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

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

Heading tags

Alla onlinedokument, inklusive webbsidor, börjar med en rubrik. Dessa konstrueras med hjälp av HTML-taggar, där språket för närvarande tillåter upp till sex element av varierande storlek som också gör det möjligt för dig att strukturera ditt innehåll med ytterligare titlar, undertexter och markerade rader med fet text. För att påbörja rubriken är det bara att sätta den relevanta texten i förväg med <h1> , <h2> , <h3> , <h4> , <h5> eller <h6> taggen, beroende på önskad storlek.

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

När det är bekräftat kommer detta att översättas till följande estetik på landningssidan för din webbplats:

Här är de olika storlekarna på de variabla rubrikerna tydliga, 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 vi kommer att ta upp detta i följande kapitel när vi tittar på hur vi använder taggar för att definiera specifika element.

Paragraftaggar

En liknande princip tillämpas på inledande paragraftaggar, som avbildas av <p>. På så sätt kan du 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 bör <p>-taggen 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å den text som förekommer i stycket.

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

Linjebrytare

De första exemplen representerar de mest grundläggande HTML-taggarna, men det finns andra som använder sig av ett annat format och alternativa avslutande taggar. Ta till exempel radbrytningar, som skapar en distinktion vid vilken rader av text bryts och fortsätter på följande rad. Det finns en central skillnad mellan radbrytningar och stycken inom HTML, för medan de sistnämnda är standardblockelement som innehåller text, skapar de förstnämnda en separation inom ett befintligt <p>-element.

På grund av detta representerar radbrytningar ett tomt element i HTML och definieras därför inte av vare sig öppnings- eller sluttaggar. I stället avbildas de av taggen <br />, som kan infogas i befintliga <p>-element för att bryta upp texten och eventuellt markera viktiga delar av informationen. Det enda mellanrummet mellan tecknet <be> och det framåtriktade snedstrecket är avgörande, eftersom taggen annars inte känns igen i HTML-format.

När detta tillämpas kommer texten att delas upp på följande sätt:

Som du ser kan du tillämpa radbrytningar så ofta du vill inom ett befintligt styckeelement, så länge de ger ett mervärde och gör informationen lättare att smälta. Du ser också att de inledande och avslutande paragraftaggarna förblir oförändrade, med radbrytningstaggar som används för att ändra layouten av den text som ingår i dem.

Det här är ett av exemplen på hur HTML-taggar kan användas för att ändra befintliga element, vilket spelar en viktig roll när det gäller att definiera den visuella layouten av dina webbsidor och ditt innehåll.

Horisontella linjer

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

Här framhäver brytningen mellan hr-tecknen och det framåtriktade snedstrecket konstruktionen av ett tomt element, samtidigt som det återigen inte krävs någon avslutande tagg för att slutföra effekten. Detta kommer att skapa följande bild:

Bildtaggar

Bildtaggar representerar också tomma element i HTML, vilket återigen innebär att de inte har någon sluttagg. Eftersom de endast innehåller attribut som rör webbadressen för den bild som du bäddar in på webbplatsen definieras de helt enkelt av <img >-taggens <img >-tagg i början av elementet. De kan placeras var som helst på webbplatsen, även om det är ovanligt att inkludera dem i befintliga element som stycken eller rubriker. Så här ser en typisk HTML-bildtag ut:

<img src=”url” alt=”some_text” style=”width:width;height:height;”>

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

HTML-element

Förut tittade vi på hur enkla HTML-taggar används för att definiera element på sidan, samtidigt som vi utforskade hur de kan anpassas ytterligare genom att använda tomma element som innehåller taggar för bild och radbrytning. Detta hjälper oss att förstå förhållandet mellan taggar och element och hur de kan användas för att definiera olika typer av innehåll på din webbplats.

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 inledande och en avslutande tagg. Så rubriker och stycken är HTML-element eftersom de använder start- och sluttaggar för att kapsla in och komplettera den relevanta texten. Tomma element däremot innehåller antingen attribut eller inget innehåll alls, vilket gör att de kan användas inom befintliga element utan behov av en avslutande tagg.

Definiering av HTML-element

När man använder exempel som rubriker och stycken är det avgörande att start- och avslutande taggar används på rätt sätt. Det är starttaggen (t.ex. <h1> eller <p>) som definierar elementet i fråga, medan sluttaggen säkerställer att detta element inte fortsätter på resten av webbsidan. Om du inte använder den avslutande </ p>-taggen i slutet av ett önskat stycke, till exempel, kommer texten att visas i ett enda block som är fula och extremt svårt att läsa.

Alla avslutande taggar är identiska med starttaggar bortsett från att de förstnämnda har ett snedstreck före de relevanta tecknen. Så i fallet med en <h1>-rubrik är den avslutande taggen </ h1> , medan du för stycken alltid använder </ p> för att definiera brytningen i texten. Detta kräver noggrannhet vid kodning, och det är viktigt att notera när du programmerar rubriker att det nummer du använder (t.ex. h1 eller h2) tillämpas i både start- och sluttaggarna.

Användning av inbäddade HTML-element

I det här skedet är det tydligt att HTML-dokument och webbsidor utgörs av ett träd av olika element, som fungerar som byggstenar för en rad olika tillgångar. Vi har också tittat på hur dessa element kan bildas och användas för att strukturera innehåll på nätet, och vi fortsätter nu med att titta på nästlade HTML-element.

Just precis som tomma element och fristående taggar (som <br / >kan införlivas i definierade HTML-element, kan så kallade nästlade element också inrymmas i innehåll som rubriker och stycken. Dessa inkluderar exempel som fet och kursiv skrift och understruken text, samtidigt som de kan användas för att ge ditt innehåll personlighet och dra läsarens blick till specifika intressepunkter.

Fet, kursiv och överstruken text i HTML

Säg att du vill markera ett ord inom ett befintligt styckeelement. Du kan uppnå detta genom att göra det fetstil med hjälp av enkla taggar inom standardelementet <p>. Med hjälp av HTML programmerar du detta på följande sätt:

<p>Jag vill att <b>det här</b>ordet ska vara fett. </p>

Här har det inskjutna elementet både en inledande och en avslutande tagg, som var och en följer ett liknande format som de som förknippas med 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:

Nu säger vi att du också vill ändra typografin för det här ordet så att det också blir kursivt. Detta kan åstadkommas enkelt genom att lägga till ytterligare ett nästlat element, som bör kodas på följande sätt:

Som du kan se har de inledande och avslutande kursiva taggarna helt enkelt inkorporerats i <p>elementet. Detta kommer nu att omvandla innehållet i elementet så att det ser ut på följande sätt:

Självklart kan du bestämma dig för att du föredrar att markera det här ordet på ett annat sätt. Du kan därför använda ett alternativt inbäddat element, till exempel genomstrykning (som representeras av taggarna <s> och </s>. Dessa taggar kan tillämpas på samma sätt inom elementet <p> och visas på följande sätt i HTML:

I det här fallet kommer texten att visas på följande sätt i dokumentet eller på landningssidan:

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

HTML-attribut

Om taggar är de byggstenar som konstruerar och definierar element, så kan HTML-attribut användas för att anpassa deras egenskaper (t.ex. stil, färg och språk. Alla HTML-element har kärnattribut, som ger kärninformation och som alltid specificeras inom stat-taggen. De tenderar att komma i par, så de visas ofta i följande format: name=”value.”

Enklare uttryckt representerar namnet den egenskap som du vill ställa in, medan värdet avser 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 nyblivna webmasters är:

Attributet ”lang”

Det enskilt mest grundläggande attributet definierar språket för dokumentet och dess element. Det deklareras med hjälp av attributet ”lang”, och även om det lätt glöms bort har det fördelen att göra innehållet mer tillgängligt för skärmläsare och sökmotorer. Det presenteras vanligtvis i början av dokumentet i följande format:

Efter attributet lang anger de två första bokstäverna språket (som i det här fallet är engelska). 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 gör rätt med detta attribut om du ska lyckas nå ut till din publik.

Attributet ”align”

Vi har redan berört formatet för HTML-attribut (name=”value”), och det bästa förkroppsligandet av detta inträffar när du försöker justera innehållet i dina element. Du kan till exempel bestämma dig för att centrera alla stycken på en viss sida, där alignment är den egenskap som du vill ställa in. Därefter är ”center” värdet på attributet, även om du har möjlighet att välja om du vill rikta din text till vänster eller höger.

Detta kommer att rikta in dina <p>-element i mitten av sidan och skapa en enhetlig layout som passar den specifika karaktären på din webbplats (se nedan):

Attributet ”href”

Om du ska bygga en synlig webbplats är det viktigt att du integrerar både inkommande och utgående länkar. Att bygga en länkportfölj som innehåller bakåtlänkar till interna landningssidor är också en gångbar strategi, så du måste lära dig att koda dessa i HTML.

HTML-länkar definieras med <a>-taggen, som innehåller destinationslänken tillsammans med den tillhörande ankartexten som kommer att inrymma URL:en. Det är attributet ’href ’ som anger webbadressen, men detta ingår som en del av starttaggen. Den kodas i HTML på följande sätt:

Detta belyser tydligt skillnaden mellan start- och sluttaggen och kommer att översättas på följande sätt på din landningssida:

Attributet ”color”

Detta är ett annat viktigt attribut, eftersom användningen av färg kan blåsa liv i din webbplats och samtidigt hjälpa till att skapa viktiga kontraster och en stark designestetik. I HTML kan en färg anges med hjälp av dess namn, även om det också är möjligt att använda ett RGB- eller HEX-värde för att uppnå detta mål. Det förstnämnda alternativet är dock lättast att följa, samtidigt som 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 tillämpar färgen röd på huvudrubriken kommer det till exempel att se ut så här:

<h3 style=”color:red”>Textfärg inställd med hjälp av röd</h3>

När det här elementet har tillämpats kommer det att se ut så här på din webbplats:

Ännu en gång finns det en tydlig skillnad mellan de inledande och avslutande taggarna som definierar elementet, samtidigt som detta är ett av de enklaste attributen att tillämpa i HTML. Det belyser också ytterligare formatet name=”value för HTML-attribut, vilket gör det mycket enklare att lära sig och tillämpa dessa på hela webbplatsen.

Testa det själv

Med en grundläggande förståelse för HTML och dess enskilda 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 utom och bett om att formatera olika aspekter med hjälp av 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. Fyller header-elementet med den korrekta avslutande taggen.
2. Förstärk rubriken med fetstil.
3. Insätt en horisontell linje under rubriken.
4. Använd färgattributet och färga ”Tack för besöket” i grönt
5. Insätt den här hyperlänken (https://www.w3schools.com/html/) i ankartexten ”Läs mer”.”
6. I huvudet av sidan använder du formatet name=”value” för att vänsterjustera styckena

Statistik och fakta om HTML-språket

1. Elementen HTML, head och body har ingått i 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 mängd nya taggar som kan användas för att lägga till en rik semantisk betydelse till strukturen i ett HTML-dokument.
2. HTML-dokument måste börja med en dokumenttypdeklaration (informellt kallat ”doctype”). I webbläsare hjälper doktypen till att definiera renderingsläget. HTML5 definierar ingen DTD; därför är doctype-deklarationen i HTML5 enklare och kortare.
3. Mobilwebbläsare har helt anammat HTML5 så att det är lika enkelt att skapa mobilanpassade projekt som att designa och konstruera för deras mindre pekskärmsskärmar – därav populariteten för responsiv design. Det finns några bra metataggar som också gör det möjligt att optimera för mobiler.
4. 78 % av innehållsutvecklarna håller med om att strukturen passar för att skapa mobilappar, och 68 % säger att den passar för att utforma alla typer av appar.
5. HTML5 levereras också med en mängd fantastiska API:er som gör att du kan bygga en bättre användarupplevelse och en biffigare, mer dynamisk webbapplikation – här är en snabb lista över de inbyggda API:erna:
   • Drag and Drop (DnD)
   • Offline lagringsdatabas
   • Hantering av webbläsarhistorik
   • Dokumentredigering
   • Timad uppspelning av media
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 egenskaper som möjligt.
7. Varje uppdatering av Google Chrome ser till att det finns stöd för HTML5 i varje uppdatering jämfört med andra webbläsare. Dessutom är YouTubes standardspelare nu HTML5 och Googles Flash-annonser konverteras nu till HTML5.
8. Utvecklarnas användning av HTML5 (per region):
   • Nord- och Latinamerika – 70 %
   • Sydamerika – 61 %
   • ASPAC – 60 %
   • Australien – 60 %
   • Europa – 59 %
   • Afrika – 60 %
   • Avsnitt 1.1. 50%

Slutsats

Men HTML skapades så sent som 1991 (den första versionen av kodningsspråket lanserades 1995), har det snabbt blivit ett viktigt verktyg för att utforma funktionella och visuellt tilltalande webbplatser. HTML:s inflytande fortsätter också att utvecklas, och den senaste versionen (HTML5) antas av ett växande antal webbplatser över hela världen.

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