Vill du skapa en grundläggande webbsida? Lär dig dessa HTML-exempel och prova dem i en textredigerare för att se hur de ser ut i din webbläsare.

17 enkla HTML-exempel som du kan lära dig om 10 minuter

Annons Även om moderna webbplatser generellt är byggda med användarvänliga gränssnitt, är det bra att känna till några grundläggande HTML. Om du känner till följande 17 HTML-exempeltaggar (och några extra) kan du skapa en grundläggande webbsida från början eller finjustera koden som skapats av en app som WordPress. Vi har tillha

Annons

Även om moderna webbplatser generellt är byggda med användarvänliga gränssnitt, är det bra att känna till några grundläggande HTML. Om du känner till följande 17 HTML-exempeltaggar (och några extra) kan du skapa en grundläggande webbsida från början eller finjustera koden som skapats av en app som WordPress.

Vi har tillhandahållit HTML-kodexempel med output för de flesta taggar. Om du vill se dem i aktion, ladda ner HTML-filen i slutet av artikeln. Du kan spela med den i en textredigerare och ladda den i en webbläsare för att se vad dina ändringar gör.

1.

Du behöver den här taggen i början av varje HTML-dokument du skapar. Det säkerställer att en webbläsare vet att den läser HTML och att den förväntar sig HTML5, den senaste versionen.

Även om detta inte är en HTML-tagg, är det fortfarande bra att veta.

2.

Detta är en annan tagg som berättar för en webbläsare att den läser HTML. Taggen går direkt efter DOCTYPE-taggen och du stänger den med en tagg precis i slutet av filen. Allt annat i ditt dokument går mellan dessa taggar.

3.

Taggen startar rubrikavsnittet i din fil. Det som går in här visas inte på din webbsida. Istället innehåller den metadata för sökmotorer och information för din webbläsare.

För grundläggande sidor innehåller taggen din titel, och det handlar om det. Men det finns några andra saker som du kan inkludera, som vi kommer att gå över om ett ögonblick.

4.

html titel tagg

Den här taggen anger titeln på din sida. Allt du behöver göra är att sätta din titel i taggen och stänga den, så här (jag har också inkluderat rubriktaggarna):

  My Website

Det är namnet som kommer att visas som flikens titel när det öppnas i en webbläsare.

5.

Liksom titel-taggen läggs metadata i rubrikområdet på din sida. Metadata används främst av sökmotorer och är information om vad som finns på din sida. Det finns ett antal olika metafält, men dessa är några av de mest använda:

  • beskrivning - En grundläggande beskrivning av din sida.
  • nyckelord - Ett urval av sökord som är tillämpliga på din sida.
  • författare - Författaren till din sida.
  • viewport - En tagg som garanterar att din sida ser bra ut på alla enheter.

Här är ett exempel som kan gälla för den här sidan:

Taggen "viewport" bör alltid ha "bredd = enhetsbredd, initialskala = 1, 0" som innehåll för att se till att din sida visas bra på mobila och stationära enheter.

6.

När du har stängt rubrikdelen kommer du till kroppen. Du öppnar detta med taggen och stänger det med taggen. Det går precis i slutet av din fil, strax före taggen.

Allt innehåll på din webbsida går mellan dessa taggar. Det är så enkelt som det låter:

  Everything you want displayed on your page.

7.

De

taggar definierar en nivå-en-rubrik på din sida. Detta kommer vanligtvis att vara titeln, och det kommer helst bara att finnas en på varje sida.

definierar nivå två-rubriker som avsnitt rubriker,

nivå-tre underrubriker, och så vidare, ner till

. Som exempel är namnen på taggarna i den här artikeln nivå-två-rubriker.

 Stor och viktig rubrik 
Lite mindre stor rubrik 
Sub-Header

Resultat:

html-rubriktaggar

Som ni ser blir de mindre på varje nivå.

8.

Paragraftaggen startar ett nytt stycke. Detta infogar vanligtvis två rader.

Titta till exempel på brytningen mellan den föregående raden och den här. Det är vad en

taggen kommer att göra.

Ditt första stycke.
Ditt andra stycke.

Resultat:

Ditt första stycke.

Ditt andra stycke.

Du kan också använda CSS-stilar i dina stycketaggar, som den här som ändrar textstorleken:

20% större text

Resultat:

20% större text

För att lära dig hur du använder CSS för att utforma din text, kolla in dessa HTML- och CSS-handledning.

9.

Linjen bryts tagg infogar en enda radbrytning:

Den första raden. 
Den andra raden (nära den första).

Resultat:

Den första raden.
Den andra raden (nära den första).

Att arbeta på liknande sätt är

märka. Detta ritar en horisontell linje på din sida och är bra för att separera textavsnitt.

10.

Den här taggen definierar viktig text. I allmänhet betyder det att det kommer att vara djärvt. Det är dock möjligt att använda CSS för att göra textvisning annorlunda.

Du kan dock säkert använda för att skriva fet text.

 Very important things you want to say.

Resultat:

Mycket viktiga saker du vill säga.

Om du känner till taggen för fetstil kan du fortfarande använda den. Det finns ingen garanti för att det kommer att fortsätta att fungera i framtida versioner av HTML, men för tillfället fungerar det.

11.

Gilla och , och är släkt. Taggen identifierar betonad text, vilket generellt betyder att den kommer att vara kursiv. Återigen finns möjligheten att CSS kommer att göra betonad textvisning annorlunda.

 An emphasized line.

Resultat:

En betonad linje.

Taggen fungerar fortfarande, men återigen är det möjligt att den kommer att avskrivas i framtida HTML-versioner.

12.

Med etiketten eller ankaret kan du skapa länkar. En enkel länk ser ut så här:

 Go to MakeUseOf

Resultat:

Gå till MakeUseOf

Attributet "href" identifierar destinationen för länken. I många fall kommer detta att vara en annan webbplats. Det kan också vara en fil, som en bild eller en PDF.

Andra användbara attribut inkluderar "mål" och "titel." Målattributet används nästan uteslutande för att öppna en länk i en ny flik eller ett fönster, så här:

 Go to MakeUseOf in a new tab

Resultat:

Gå till MakeUseOf i en ny flik

Attributet "title" skapar ett verktygstips. Håll muspekaren över länken nedan för att se hur det fungerar:

 Hover over this to see the tool tip

Resultat:

Håll muspekaren över detta för att se verktygstipset

13.

Om du vill bädda in en bild på din sida måste du använda bildtaggen. Du kommer normalt att använda det tillsammans med attributet "src". Detta anger bildens källa, så här:

Resultat:

Solbelysta fåglar avbildar med img src-taggar

Andra attribut är tillgängliga, som "höjd", "bredd" och "alt." Så här kan det se ut:

 namnet på din bild

Som du kan förvänta dig sätter attributen "höjd" och "bredd" bildens höjd och bredd. I allmänhet är det en bra idé att bara ställa in en av dem så att bilden skalas korrekt. Om du använder båda kan du sluta med en utsträckt eller squished bild.

Taggen "alt" berättar för webbläsaren vilken text som ska visas om bilden inte kan visas och är en bra idé att inkludera med någon bild. Om någon har en särskilt långsam anslutning eller en gammal webbläsare kan de fortfarande få en uppfattning om vad som ska finnas på din sida.

14.

    Med den beställda listtaggen kan du skapa en beställd lista. I allmänhet betyder det att du får en numrerad lista. Varje objekt i listan behöver en listobjekttagg (

  1. ), så din lista kommer att se ut så här:

    1. Först
    2. Andra saken
    3. Tredje sak

    Resultat:

    1. Först
    2. Andra saken
    3. Tredje sak

    I HTML5 kan du använda

      för att vända siffrornas ordning. Och du kan ställa in startvärdet med startattributet.

      Attributet "typ" låter dig berätta för webbläsaren vilken typ av symbol du vill använda för listobjekten. Det kan ställas in på "1", "A", "a", "I" eller "i" och ställa in listan som ska visas med den indikerade symbolen så här:

        15.

          Den oordnade listan är mycket enklare än dess ordnade motsvarighet. Det är helt enkelt en punktlista.

          • Första artikel
          • Andra artikeln
          • Tredje artikel

          Resultat:

          • Första artikel
          • Andra artikeln
          • Tredje artikel

          Oordnade listor har också "typ" -attribut, och du kan ställa in den till "skiva", "cirkel" eller "fyrkant."

          16.

          När du använder ron och tabeller för att formatera rynkor finns det många gånger när du vill använda rader och kolumner för att segmentera information på din sida. Flera taggar behövs för att få en tabell att fungera. Här är exemplet HTML-kod:

          1: a kolumnen2: a kolumnen
          Rad 1, kolumn 1Rad 1, kolumn 2
          Rad 2, kolumn 1Rad 2, kolumn 2
          De 
           och 
           taggar anger tabellens början och slut. De  taggen innehåller allt tabellinnehåll.
          Varje rad i tabellen är bifogad i en märka. Varje cell inom varje rad är lindad i endera taggar för kolumnrubriker, eller taggar för kolumndata. Du behöver en av dessa för varje kolumn på varje rad.
          Resultat:
          1: a kolumnen2: a kolumnen
          Rad 1, kolumn 1Rad 1, kolumn 2
          Rad 2, kolumn 1Rad 2, kolumn 2
          17. 
          När du citerar en annan webbplats eller person och vill skilja offerten från resten av ditt dokument använder du blockquote-taggen. Allt du behöver göra är att bifoga offerten när du öppnar och stänger blockquote-taggar:
           Nätet, som jag föreställde mig det, har vi inte sett det ännu. Framtiden är fortfarande så mycket större än tidigare. 
          Resultat:
          Nätet, som jag föreställde mig det, har vi inte sett det ännu. Framtiden är fortfarande så mycket större än tidigare.
          Den exakta formateringen som används kan bero på webbläsaren du använder eller CSS på din webbplats. Men taggen förblir densamma.
          Gå framåt och HTML 
          Med dessa 17 HTML-exempel (och räkning) bör du kunna skapa en enkel webbplats 5 gratis HTML-mallar för att enkelt skapa snabba webbplatser 5 gratis HTML-mallar för att enkelt skapa snabba webbplatser Prova dessa HTML-mallar för att bygga din webbplats idag även om du inte Jag har ingen HTML-kompetens. Läs mer . För att se hur man sätter ihop alla, kan du ladda ner vår HTML-sida. Öppna den i din webbläsare för att se hur det går samman, eller i en textredigerare för att se exakt hur koden fungerar.
          För fler lektioner i bitstorlek i HTML, prova dessa mikrolearning-appar för kodning Vill du lära dig om grundläggande kodning? Försök med 5 bit-storlekskodningsappar på din fritid Vill du lära dig grundläggande kodning? Försök 5 bitstorlekskodningsappar på din fritid Vill du lära dig grundläggande kodning men har lite tid? Dessa bitstorlekskodningsappar tar bara några minuter av din hektiska dag. Läs mer .
          Utforska mer om: Coding Tutorials, HTML, webbutveckling, Wordpress.
          
                     
          
                  
        1.