Hur skapar jag en enkel webbsida med HTML?

När du har skapat din webbsida kan du spara den som ett HTML-dokument och visa den i din webbläsare.

Den här guiden lär dig hur du skriver en enkel webbsida med HTML (hypertext markup language). HTML är en av kärnkomponenterna på World Wide Web och utgör webbsidornas struktur. När du har skapat din webbsida kan du spara den som ett HTML-dokument och visa den i din webbläsare. Det är möjligt att skapa en HTML-sida med grundläggande textredigerare som finns på både Windows- och Mac-datorer.

Del 1 av 5: lägga till ett huvud i din html

1
Öppna en textredigerare. På en dator som kör av Windows operativsystem, kommer du brukar använda Anteckningar eller Notepad ++ medan MacOS användare kommer att använda Textedit:
- Windows - Öppna Start, skriv in notepad eller notepad++ klicka på Anteckningar eller "Anteckningar ++ eller sublim" högst upp i fönstret.
- macOS - Klicka på Spotlight, skriv in textedit och dubbelklicka på Textedit längst upp i resultaten.
2

Skriv in <!doctype html> och tryck ↵ enter. Detta berättar för webbläsaren att detta är ett HTML-dokument.
3

Skriv in <html> och tryck ↵ enter. Denna inledande tagg för din HTML-kod.
4

Skriv in <head> och tryck ↵ enter. Det här är taggen som öppnar ditt HTML-huvud. HTML-huvudinformationen som vanligtvis inte visas på din webbsida. Denna information kan inkludera titel, metadata, CSS-formatmallar och andra skriptspråk.
5

Skriv in <title>. Detta är taggen för att lägga till en titel på din sida.
6

Skriv en titel på din webbsida. Detta kan vara vilken titel du vill namnge din webbsida.
7

Skriv in </title> och tryck ↵ enter. Detta är taggen för att stänga din titeltagg.
8
Skriv </head> och tryck ↵ enter. Detta är taggen för att stänga huvudet. Din HTML-kod ska se ut så här.
```
<! DOCTYPE html> <html> <head> <title> Min webbsida </title> </head> 
```

Del 2 av 5: lägga till en text och text till din html

1

Skriv in <body> under den stängda taggen "head". Den här taggen öppnar kroppen i ditt HTML-dokument. Allt som finns i HTML-kroppen visas på webbsidan.
2

Skriv in <h1>. Detta är taggen för att lägga till en rubrik i ditt HTML-dokument. En rubrik är stor fet text som vanligtvis visas högst upp i ditt HTML-dokument.
3

Skriv en rubrik för din sida. Detta kan vara titeln på din sida eller en hälsning.
4
Skriv </h1> efter rubriktexten och tryck på ↵ enter. Den här taggen stänger din rubrik.
- Lägg till ytterligare rubriker när du går. Det finns sex olika rubriker som du kan skapa med hjälp av <h1></h1> genom <h6></h6> taggar. Dessa skapar rubriker i olika storlekar. För att till exempel skapa tre rubriker i olika storlek i följd kan du skriva följande:
  <h1> Välkommen till min sida! </h1> <h2> Jag heter Bob. </h2> <h3> Jag hoppas att du gillar det här. </h3>
- Rubrikerna visar textens prioritet eller betydelse. Men det är inte nödvändigt att använda en högre rubrik om du vill använda någon lägre rubrik. Man kan direkt använda H3, även om det inte finns någon H1 i ditt inlägg.
5

Typ <p>. Detta är taggen för att öppna ett stycke. Stycketext används för att visa text i normal storlek.
6

Skriv in lite text. Detta kan vara en beskrivning för din webbsida eller annan information du vill dela.
7
Skriv </p> efter din text och tryck på ↵ enter. Detta är taggen för att stänga din stycketext. Följande är ett exempel på stycketext i HTML:
```
<p> Det här är mitt stycke. </p> 
```
- Du kan lägga till flera stycke rader i rad för att skapa en serie stycken under en rubrik.
- Du kan ändra färgen av någon text genom att rama in texten med <font color="color"> och </font> taggar. Se till att skriva din önskade färg i avsnittet "färg" (du kommer att behålla offerten). Du kan förvandla vilken text som helst (t.ex. rubriker) till en annan färg med denna uppsättning taggar. Om du till exempel vill göra ett stycks text blå, skulle du skriva följande kod:<p><font color="blue">Whales are majestic creatures.</font></p>
- Du kan lägga till fetstil, kursiv stil och andra textformat med HTML. Följande är exempel på hur du kan formatera text med HTML-taggar:
  <b> Fet text </b> <i> Kursiv text </i> <u> Understräckt text </u> <sub> Prenumerationstext </sub> <sup> Överskriftstext </sup>
- Om du använder fet och kursiv text för betoning, inte bara för styling, använd <strong> och <em> elementen i stället för <b> och <i>. Detta gör din webbsida lättare att förstå när du använder tekniker som en skärmläsare eller läsarläge i vissa webbläsare.

Hur länkar jag en HTML-sida med en annan HTML-sida?

Del 3 av 5: lägga till ytterligare element i din html

1
Lägg till en bild på din sida. Du kan lägga till en bild i din HTML med följande steg:
- Skriv för <img src= att öppna din bildtagg.
- Kopiera och klistra in bildens URL efter "=" -tecknet i citattecken.
- Skriv > efter bildwebbadressen för att stänga bildtaggen. Till exempel, om bildens URL är "http://mypicture.com/lake", skulle du skriva följande:
  <img src = "aHR0cDovL215cGljdHVyZS5jb20vbGFrZS5qcGc =">
2
Länk till en annan sida. Du kan lägga till en länk till din HTML med följande steg:
- Skriv för <a href= att öppna din länktagg.
- Kopiera och klistra in webbadressen efter "=" -tecknet i citattecken.
- Skriv > efter webbadressen för att stänga länkdelen av HTML.
- Skriv ett namn på länken efter den avslutande parentesen.
- Skriv </a> efter länkens namn för att stänga HTML-länken. Följande är ett exempel på en länk till Facebook.
  <a href="https://facebook.com"> Facebook </a>.
3

Lägg till en radbrytning i din HTML. Du kan lägga till en radbrytning genom att skriva <br> i din HTML. Detta skapar en horisontell linje som kan användas för att dela upp olika delar av din sida.

Läs också: Hur tar jag bort din datorhistorik (endast för krom)?

Del 4 av 5: stänga ditt HTML-dokument

1

Skriv för </body> att stänga kroppen. När du har lagt till all din text, bilder och andra element i ditt HTML-dokument, lägg till den här taggen längst ner i ditt HTML-dokument för att stänga HTML-dokumentets kropp.

2

Skriv för </html> att stänga ditt HTML-dokument. Den här taggen går under taggen för att stänga din HTML-kropp i slutet av ditt HTML-dokument. Detta berättar för webbläsaren att det inte finns mer HTML-kod efter den här taggen. Hela ditt HTML-dokument ska se ut så här:

<! DOCTYPE html> <html> <head> <title> guide Fan Page </title> </head> <body> <h1> Välkommen till min sida! </h1> <p> Detta är en fansida för guide. Känn dig som hemma! </p> <h2> Viktiga datum </h2> <p> <i> 15 januari 2019 </i> - guide födelsedag </p> <h2> Länkar </h2> <p> Här är en länk till guide: <a href="http://google.com"> guide </a> </p> </body> </html>

Del 5 av 5: Spara och öppna din webbsida

1

Konvertera ditt dokument till vanlig text (endast mac-användare). Klicka på menyalternativet Format längst upp på skärmen och klicka sedan på Skapa ren text i den resulterande rullgardinsmenyn.
2

Klicka på Arkiv. Det finns i menyraden längst upp på skärmen.
3
Klicka på Spara som. Det finns i rullgardinsmenyn under "Arkiv".
- Alternativt kan du trycka på Ctrl+ S(Windows) eller ⌘ Command+ S(Mac) för att göra det.
- Detta steg är varken nödvändigt eller möjligt på Windows.
4

Ange ett namn för ditt HTML-dokument. Skriv vad du vill ge namnet på ditt dokument i textrutan "Filnamn" (Windows) eller "Namn" (Mac).
5
Ändra dokumentets filtyp. Du måste ändra dokumentet från en textfil till en HTML-fil. Använd följande steg för att ändra filtyp:
- Windows - Klicka på listrutan "Spara som typ", klicka på Alla filer och skriv sedan .html i slutet av filnamnet.
- Mac - Byt ut .txt i slutet av filnamnet med .html istället.
6
Klicka på Spara. Det är längst ner i fönstret. Om du gör det skapas en HTML-fil.
- HTML-filer öppnas vanligtvis med din standardwebbläsare.
7

Stäng din textredigerare. Vid den här tiden är du redo att öppna din HTML-fil i din webbläsare så att du kan se din webbsida.
8
Öppna HTML-dokumentet med din webbläsare. I de flesta fall kommer du att kunna dubbelklicka på HTML-dokumentet för att göra detta. Om du dubbelklickar på dokumentet resulterar det i ett fel, gör följande:
- Windows - Högerklicka på dokumentet, välj Öppna med och klicka på önskad webbläsare.
- Mac - Klicka på dokumentet en gång, klicka på Arkiv, välj Öppna med och klicka på din önskade webbläsare.
9
Redigera HTML-dokumentet om det behövs. Du kanske märker ett fel på din HTML-sida. För att ändra det kan du redigera HTML-dokumentets text:
- I Windows kan du högerklicka på dokumentet och klicka på Redigera i den resulterande rullgardinsmenyn (om du har Notepad ++ installerat kommer detta att säga Redigera med notepad ++ istället).
- På Mac vill du klicka på dokumentet för att markera det, klicka på Arkiv, välj Öppna med och klicka på Textedit. Du kan också dra dokumentet till TextEdit.

Den här guiden lär dig hur man skriver en enkel webbsida med HTML (hypertext markup language).

Tips

Taggar ska alltid stängas i en spegelbild av deras öppna motsvarigheter. Till exempel <tag1><tag2>bör stängas som </tag2></tag1>.
Du kan lägga till sidrullande text till din webbplats med <marquee></marquee>taggen, men kom ihåg att den här taggen kanske inte känns igen av vissa webbläsare.
Många använder Notepad ++ för att skriva och kompilera sin kod.
Om du vill centrera en bild på din sida kan du skriva <class="center">efter bildens namn i img- taggen (till exempel <img src="" class="center">).

Varningar

Det är bäst att vara värd för dina egna bilder på Imgur eller liknande om du planerar att ladda upp bilder till din webbsida. Att lägga upp andras bilder kan leda till upphovsrättsintrång.

Hur skapar jag en enkel webbsida med HTML?

Steg