6 januari | 2024
För att koda i HTML behövs en textredigerare som exempelvis Notepad (för PC) eller Textredigerare (för Mac).
Steg 1: Öppna din valda textredigerare
Börja med att öppna din valda textredigerare (t.ex. “Anteckningar” för PC eller “Textredigerare” för Mac. Öppna ett nytt dokument och spara dokumentet med namnet index.html
Inom webbutveckling är “index.html” ofta namnet på den grundläggande filen för en webbplats i en katalog eller rot av en webbserver. Namnet “index” har historiskt sett använts för att beteckna den primära eller huvudsakliga filen som servern letar efter när någon besöker webbplatsens rot eller en specifik katalog. Denna fil innehåller vanligtvis den första sidan eller huvudsida av webbplatsen. När en användare besöker en webbplats utan att ange en specifik fil i URL:en, letar webbservern automatiskt efter en fil som heter “index” i den angivna katalogen. Om den hittar en fil med namnet “index”, kommer den att laddas som den första sidan. Så, “index.html” fungerar som standardhemsidan för många webbplatser. Det är dock viktigt att notera att namngivningen kan variera, och webbutvecklare kan välja andra namn för sina huvudfiler om de konfigurerar sina webbservrar för att leta efter en annan standardfil.
Steg 2: Skriv HTML
Kopiera koden nedan och klistra in i din valda textredigerare:
<!DOCTYPE html>
<html>
<body>
<h1>Min första rubrik</h1>
<p>Mitt första stycke</p>
</body>
</html>
Steg 3: Spara HTML-dokumentet
Spara filen på din dator. Namnge filen “index.html”.
Steg 4: Visa HTML-sidan i din webbläsare
Öppna den sparade HTML-filen i din favoritwebbläsare (dubbelklicka på filen, eller högerklicka – och välj “Öppna med”). Resultatet kommer att se ut ungefär så här:
Nu har du skapat din första HTML-sida, även om det är en väldigt simpel sådan!
Arkiverad under:
Blogg 2022-,
HTML
4 januari | 2024
Nedan följer en visualisering av en enkel HTML-sidstruktur:
- Innehållet inom <body>-sektionen kommer att visas i webbläsaren. Alla HTML-element som skrivs mellan <body> och </body> utgör allt synligt innehåll på webbsidan. Det kan vara textinnehåll som rubriker, styckeindelad text, listor; bilder; länkar och andra övriga element som exempelvis video, tabeller och formulär.
- Innehållet inom <title>-elementet kommer att visas i webbläsarens titelrad eller i sidans flik. Observera att denna går under <head> och inte <body>. I HTML är <head> en annan viktig del av dokumentstrukturen, och den innehåller metadata och andra icke-visuella element som styr och beskriver webbsidan, men som inte direkt visas för användaren på webbläsaren. <meta>-taggen används exempelvis för att ange metadata om webbsidan, som teckenkodning, språk, författare, och andra beskrivande information som kan vara användbar för webbläsare och sökmotorer. I <head> kan du också inkludera länkar till externa resurser som CSS-stilar, JavaScript-filer och ikoner. Dessa länkar påverkar hur webbsidan formateras och fungerar, men de syns inte direkt för användaren. Andra HTML-element och instruktioner som kan placeras inom <head> inkluderar beskrivande <meta>-taggar för SEO, favicon (en liten ikon som visas i webbläsarens flikar) och länkar till RSS-flöden*.
* RSS-flöden används främst för att göra det enkelt för användare att prenumerera på uppdateringar från olika webbplatser och bloggar. Genom att prenumerera på ett RSS-flöde kan användare få regelbundna uppdateringar om nya artiklar, nyheter eller annat innehåll från sina favoritwebbplatser utan att behöva besöka varje webbplats manuellt.
Arkiverad under:
Blogg 2022-,
HTML
4 januari | 2024
Syftet med en webbläsare (som Chrome, Edge, Firefox, Safari) är att läsa HTML-dokument och visa dem korrekt. En webbläsare visar inte HTML-taggar, men använder dem för att avgöra hur dokumentet ska visas:
Koden för innehållet på sidan ovan kan då se ut enligt följande:
<!DOCTYPE html>
<html>
<head>
<title>Sidans titel</title>
<head>
<body>
<h1>Min första rubrik</h1>
<p>Mitt första stycke</p>
</body>
</html>
Arkiverad under:
Blogg 2022-,
HTML
17 oktober | 2023
Ett HTML-element definieras av en starttagg, ett innehåll och en sluttagg:
<starttagg>Innehåll placeras här...</sluttagg>
HTML-elementet omfattar allt från starttaggen till sluttaggen:
<h1>Min första rubrik</h1>
<p>Mitt första stycke.</p>
Arkiverad under:
Blogg 2022-,
HTML
5 oktober | 2023
I det förra inlägget gick jag igenom vad HTML innebär. I det här inlägget ska vi kika närmare på hur ett basic HTML-dokument kan se ut.
<!DOCTYPE html>
<html>
<head>
<title>Sidans titel</title>
</head>
<body>
<h1>Min första rubrik</h1>
<p>Mitt första stycke</p>
</body>
</html>
Men vad säger koden egentligen?
- <!DOCTYPE html> definierar att detta dokument är ett HTML5-dokument.
- Elementet <html> är rot-elementet på en HTML-sida. I detta sammanhang betyder “rot-element” att <html>-elementet är det översta eller högsta elementet på en HTML-sida och fungerar som en behållare för allt innehåll på sidan.
- Elementet <head> innehåller metadata om HTML-sidan. I detta sammanhang betyder “metadata” information om sidan som inte syns på webbsidan, men som ger viktig information till webbläsare och sökmotorer. Det kan innefatta sidans titel, teckenuppsättning*, länkar till externa resurser (som stilar och skript) och annat som är relevant för sidan.
- Elementet <title> specificerar en titel för HTML-sidan (som visas i webbläsarens titelrad eller i sidans flik).
- Elementet <body> definierar dokumentets huvuddel och är en behållare för allt synligt innehåll, såsom rubriker, stycken, bilder, länkar, tabeller, listor, osv.
- Elementet <h1> definierar att det är rubriknivå 1.
- Elementet <p> definierar att det är ett stycke.
* Teckenuppsättning (engelska: character encoding) refererar till ett system som används för att associera tecken (bokstäver, siffror, symboler och specialtecken) med numeriska kodvärden som datorer kan förstå och behandla. Det är ett viktigt koncept inom datavetenskap och webbutveckling eftersom det gör det möjligt för datorer och webbläsare att korrekt tolka och visa text på olika språk och skripts. När det gäller HTML och webbsidor är teckenuppsättningen viktig eftersom den påverkar hur text visas på en webbsida. Om rätt teckenuppsättning inte används kan det resultera i att texten visas felaktigt eller att specialtecken kodas fel. Ett vanligt exempel på en teckenuppsättning är UTF-8 (Unicode Transformation Format – 8 bitar), som är en av de mest använda teckenuppsättningarna på internet. UTF-8 kan representera en stor mängd olika tecken från olika språk och skripts, vilket gör det möjligt att skapa webbsidor som stöder flera språk samtidigt.
Arkiverad under:
Blogg 2022-,
HTML
29 september | 2023
Inte nog med att jag har sjuhundra andra projekt på gång, så tänkte jag starta en bloggserie: Lär dig grunderna i HTML. I den första delen behandlar jag vad HTML innebär.
- HTML står för Hyper Text Markup Language.
- HTML är ett standardmärkningsspråk för att skapa webbsidor (det språket som är mest accepterat och som används mest när man försöker beskriva strukturen och layouten av webbsidor på internet).
- HTML beskriver strukturen på en webbsida.
- HTML består av en serie element (HTML-element är de grundläggande byggstenarna i HTML, och de används för att definiera och strukturera innehållet på en webbsida. Varje HTML-element identifieras och beskrivs genom användning av HTML-taggar, som exempelvis “<p>”, “<h1>” och “<div>”. HTML-element innehåller ofta innehåll och attribut, som exempelvis “href”, “src” och “alt”, som specificerar hur innehållet ska visas och fungera.
- HTML-element berättar för webbläsaren hur innehållet ska visas HTML-element märker upp delar av innehållet som “detta är en rubrik”, “detta är en avsnittstext”, “detta är en länk”, etc.
Arkiverad under:
Blogg 2022-,
HTML
