HTML står för Hypertext Markup Language . Det är ett speciellt språk som används för att bygga webbsidor. När du besöker en webbplats läser datorn HTML för att visa dig ord, bilder och länkar. Tänk på HTML som byggstenarna i en webbplats. Precis som du använder Lego-bitar för att bygga ett hus eller en bil, använder vi HTML-taggar för att bygga en webbsida.
HTML är den kod som talar om för en dator hur text, bilder, videor och länkar ska visas på en webbsida. Det är som att ge instruktioner till en vän som ritar en bild åt dig. HTML använder ord inom vinkelparenteser, som kallas taggar , för att markera början och slutet av en del av webbsidan.
Varje webbplats du besöker använder HTML på något sätt. Utan HTML skulle det inte finnas några webbsidor för dig att se. HTML hjälper till att organisera innehåll och talar om för datorn hur sidan ska visas. Det är det allra första man lär sig inom webbutveckling eftersom det får internet att fungera!
Ett HTML-dokument har en speciell struktur. Det börjar med en deklaration som heter <code><!DOCTYPE html></code> som talar om för datorn att sidan använder HTML. Sedan delas dokumentet upp i två huvuddelar: huvudet och brödtexten.
Ett mycket enkelt HTML-dokument ser ut så här:
<kod><!DOCTYPE html>
<html>
<huvud>
<title>Min första webbsida</title>
</huvud>
<kropp>
<p>Hej världen!</p>
</body>
</html> </kod>
I det här exemplet anger <head> -sektionen sidans titel, och <body> -sektionen är där du placerar innehållet som visas på skärmen.
HTML använder taggar för att markera olika delar av webbsidan. En tagg är ett ord inom vinkelparenteser. Till exempel anger <code><p></code> för datorn att det som följer är ett stycke. När du avslutar stycket använder du den avslutande taggen, <code></p></code>, för att ange slutet.
Ett element i HTML består av en inledande tagg, lite innehåll och en avslutande tagg. Till exempel:
<code><p>Detta är ett stycke.</p></code>
Varje tagg instruerar webbläsaren om hur innehållet ska visas.
Det finns många taggar i HTML. Några av de vanligaste är:
Attribut ger extra information om ett HTML-element. De läggs till i den inledande taggen innanför taggens vinkelparenteser. De vanligaste attributen är src och alt som används med bildtaggen.
För att till exempel lägga till en bild kan du skriva:
<code><img src="picture.jpg" alt="En fin bild"></code>
Här talar src om för webbläsaren var bildfilen finns, och alt ger en beskrivning av bilden om den inte kan visas.
HTML-dokumentet är uppdelat i två delar:
Länkar låter dig hoppa från en sida till en annan. I HTML skapar vi länkar med hjälp av <a> -taggen. Attributet href inuti taggen anger länkens destination för webbläsaren.
Till exempel:
<code><a href="https://www.example.com">Besök Example.com</a></code>
När du klickar på den här länken öppnas webbplatsen example.com i din webbläsare.
Bilder lyser upp en webbsida och gör den mer intressant. För att lägga till en bild använder du <img> -taggen. Kom ihåg att <img> -taggen inte har någon avslutande tagg.
Så här lägger du till en bild:
<code><img src="sunflower.jpg" alt="En ljus solros"></code>
Den här koden anger att webbläsaren ska visa en bild av en solros. Attributet src pekar på bildens plats och alt- attributet ger en beskrivning av bilden.
Listor organiserar information i ett snyggt format. Det finns två huvudtyper av listor i HTML:
Här är ett exempel på en oordnad lista:
<kod><ul>
<li>Äpple</li>
<li>Banan</li>
<li>Körsbär</li>
</ul> </kod>
Och här är ett exempel på en ordnad lista:
<kod><ol>
<li>Först</li>
<li>Andra</li>
<li>Tredje</li>
</ol> </kod>
Tabeller hjälper till att visa information i rader och kolumner. De är användbara när du behöver jämföra data eller lista objekt i ett rutnät.
Här är ett enkelt exempel på en HTML-tabell:
<kod><tabellgräns="1">
<tr>
<th>Namn</th>
Ålder
</tr>
<tr>
Alice
10
</tr>
</tabell> </kod>
I den här tabellen definierar <tr> en tabellrad, <th> används för tabellrubriken (fet text) och <td> används för tabelldata (cellerna).
HTML låter dig också lägga till multimedia som ljud och video. Med taggen <audio> kan du inkludera ljudfiler. Med taggen <video> kan du bädda in videospelare på din webbsida.
Här är ett exempel på en inbäddningskod för video:
<kod><videobredd="320" höjd="240" kontroller>
<source src="film.mp4" type="video/mp4">
</video> </kod>
Den här koden skapar en videospelare med knappar för att spela upp, pausa eller ändra volymen. Attributet controls anger att webbläsaren ska visa dessa knappar.
Varje webbplats på internet är byggd med HTML. Tänk dig att du besöker din skolas webbplats, en rolig spelsajt eller läser en berättelse online. HTML arbetar bakom kulisserna för att ordna text, bilder och annat innehåll så att du kan se dem tydligt.
När du till exempel ser en bild på din favoritseriefigur online eller klickar på en länk för att läsa mer om ett roligt ämne, finns HTML där för att få det att fungera.
Låt oss titta på ett enkelt projekt. Tänk dig att du vill skapa en liten webbsida om ditt favoritdjur, som en katt. Du kan inkludera en titel, ett stycke om katter, en bild och till och med en länk till en webbplats med roliga kattfakta.
Din HTML-kod kan se ut så här:
<kod><!DOCTYPE html>
<html>
<huvud>
<title>Mitt favoritdjur</title>
</huvud>
<kropp>
<h1>Allt om katter</h1>
<p>Katter är lekfulla och mjuka. De älskar att sova och spinna. Många älskar att ha katter som husdjur.</p>
<img src="cat.jpg" alt="En söt katt">
<a href="https://www.catfacts.com">Läs mer om katter</a>
</body>
</html> </kod>
Det här projektet använder rubriker, stycken, bilder och länkar. Det visar hur HTML används för att bygga en komplett webbsida med många delar.
Medan HTML bygger strukturen på en webbsida finns det andra verktyg som får webbplatser att se ut och bete sig på roliga sätt.
Även om vi idag lär oss om HTML, hjälper kunskap om CSS och JavaScript oss att förstå hur webbplatser skapas.
När du utforskar HTML kommer du att stöta på många andra taggar. Här är några fler som är bra att känna till:
Dessa taggar ger dig mer kontroll över hur ditt innehåll visas på en webbsida.
HTML har förändrats mycket sedan det först skapades. Många nya taggar och funktioner har lagts till över tid. Varje ny version av HTML gör det enklare att skapa komplexa och vackra webbplatser. Idag fungerar HTML tillsammans med CSS och JavaScript för att bygga moderna webbplatser som är roliga att använda och ser bra ut.
Denna utveckling innebär att HTML är både lätt att lära sig och tillräckligt kraftfullt för att skapa allt från enkla webbsidor till komplexa webbapplikationer.
Även om det är roligt att lära sig HTML är det alltid viktigt att vara säker på internet. När du besöker webbplatser eller utforskar onlineinnehåll, kom ihåg att alltid be en vuxen om hjälp om du är osäker på något. Din säkerhet kommer först, och att lära sig HTML ska alltid vara en rolig och säker upplevelse.
Låt oss titta på några viktiga termer som du lärde dig idag:
HTML används i många verkliga miljöer. Här är några exempel:
Dessa exempel visar hur HTML är ett mycket användbart verktyg i många delar av vardagen.
Idag lärde vi oss att HTML är en förkortning för Hypertext Markup Language . Det är det grundläggande språk som används för att skapa webbsidor. Här är de viktigaste punkterna att komma ihåg:
HTML är grunden för varje webbplats du ser på internet. Med enkla byggstenar som taggar och attribut kan du skapa roliga och interaktiva sidor. Allt eftersom du fortsätter att lära dig kommer du att se hur HTML hjälper till att väcka webbsidor till liv och göra internet till en användbar och spännande plats att utforska.
