Grundläggande HTML

HTML (HyperText Markup Language) är språket som används för att skapa webbplatser. Här är några av de grundläggande elementen:

<!DOCTYPE html>: Deklarerar dokumentets typ och version av HTML.
<html>: Rot-elementet som omsluter hela HTML-dokumentet.
<head>: Innehåller metadata om dokumentet, såsom titel, teckenuppsättning och länkar till CSS.
<title>: Anger titeln på dokumentet som visas i webbläsarens titelrad eller flik.
<body>: Innehåller det synliga innehållet på webbsidan.
<h1> till h6 : Rubrikelement, där h1 är den högst nivån och h6 är den lägsta.
<p> : Stycke element används för att skapa stycken av text.
<a> : Hyperlänk element används för att skapa länkar.
<img>: Bild-element används för att infoga bilder.
<ul>, ol, li : Oordnade (ul) och ordnade (ol) listor med listobjekt (li).

Strukturera en webbplats

Att strukturera en webbplats innebär att organisera innehåll och navigering på ett sätt som är logiskt och användarvänligt. Här är några viktiga punkter:

Header: Innehåller vanligtvis webbplatsens logotyp, titel och navigationsmeny.
Navigation (nav): Navigationsområdet som innehåller länkar till olika sidor eller sektioner på webbplatsen.
Main content: Huvudinnehållsområdet där den huvudsakliga informationen visas.
Sidebar: Ett sidområde som kan innehålla ytterligare navigering, länkar eller annan information.
Footer: Sidans nedersta del, innehåller vanligtvis kontaktinformation, länkar till integritetspolicy och upphovsrättsinformation.

HTML (HyperText Markup Language) är grunden för att skapa och strukturera innehåll på webbsidor. Genom att använda HTML kan du definiera hur text, bilder, länkar och andra element ska visas och organiseras på en webbsida. I denna lektion kommer vi att gå igenom några av de mest grundläggande och användbara HTML-elementen.

1. Rubrikhantering

Rubriker i HTML används för att strukturera innehåll på en webbsida och skapa en hierarkisk ordning av information. Det finns sex nivåer av rubriker, från h1 till h6 där h1 representerar den högsta nivån och är oftast reserverad för den viktigaste rubriken på sidan.

Användning: Rubriker hjälper sökmotorer att förstå strukturen på din sida och gör det lättare för användare att skanna innehållet.
2. Listor
Listor används för att strukturera information i punktform eller numrerad ordning. HTML tillhandahåller två huvudtyper av listor:

Oordnade listor (<ul>): Används när ordningen på listobjekten inte spelar någon roll.
Ordnade listor (<ol>): Används när ordningen på listobjekten är viktig.
Varje objekt i listan skapas med hjälp av <li>-taggen (list item).

Exempel på oordnad lista:

Exempel på ordnad lista:

3. Tabeller
Tabeller används för att visa data på ett organiserat sätt genom att använda rader och kolumner. En tabell skapas med <table>-taggen och innehåller rader <tr>, kolumner <td> (table data), och ibland rubriker <th> (table header).

4. Bildhantering

Att infoga bilder i en webbsida görs med hjälp av <img>-taggen. Denna tagg är självstängande och kräver minst en src-attribut (source) som anger bildens sökväg, samt ett alt-attribut (alternativ text) som beskriver bilden.

Exempel:

src: Anger sökvägen till bildfilen.
alt: Alternativ text som visas om bilden inte kan laddas, och som används av skärmläsare för synskadade användare.
width och height: Används för att ange bildens storlek.

5. Hyperlänkar

Länkar är grunden för navigation på webben och skapas med <a>-taggen. Med href-attributet specificerar du destinationen för länken.

Exempel:

Sammanfattning

HTML är grunden för att skapa webbsidor, och genom att förstå och använda dessa grundläggande element kan du skapa strukturerad och engagerande innehåll. Rubriker organiserar din text, listor hjälper till att strukturera information, tabeller ger en tydlig översikt över data, bilder förbättrar användarupplevelsen, och länkar gör din webbplats interaktiv.