17 enkla HTML -kodexempel du kan lära dig på 10 minuter

17 enkla HTML -kodexempel du kan lära dig på 10 minuter

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





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



1.

Du behöver denna tagg i början av varje HTML -dokument du skapar. Den 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 din fil. Allt annat i ditt dokument går mellan dessa taggar.



3.

Taggen startar rubriksektionen i din fil. De saker 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 kommer taggen att innehålla din titel, och det är ungefär det. Men det finns några andra saker som du kan inkludera, som vi kommer att gå över om ett ögonblick.



Fyra.

Denna tagg 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 för att visa sammanhanget):


My Website

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



5.

Precis som titeltaggen läggs metadata in i sidhuvudet 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 vanligaste:

  • beskrivning : En grundläggande beskrivning av din sida.
  • nyckelord : Ett urval av nyckelord som gäller för din sida.
  • författare : Författaren till din sida.
  • viewport : En tagg för att se till att din sida ser bra ut på alla enheter.

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




Taggen 'viewport' bör alltid ha 'width = device-width, initial-scale = 1.0' som innehåll för att säkerställa att din sida visas bra på mobila och stationära enheter.

6.

När du stänger rubriksektionen 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.

Något mindre stort huvud


Underrubrik

Resultat:

Som du kan se blir de mindre på varje nivå.

8.

Stycke -taggen startar ett nytt stycke. Detta infogar vanligtvis två radbrytningar.

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

tagg kommer att göra.

Your first paragraph.


Your second paragraph.

Resultat:

Ditt första stycke.

Ditt andra stycke.

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

This is 50% larger text.

Resultat:

9.

Linjeskiftstaggen infogar en enda radbrytning:

The first line.

The second line (close to the first one).

Resultat:

Att arbeta på ett liknande sätt är

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

10.

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

kan du använda bluetooth -hörlurar på xbox one

Men du kan säkert använda den till fet text.

Very important things you want to say.

Resultat:

Väldigt viktiga saker du vill säga.

Om du är bekant med 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.

elva.

Tycka om och , och är släkt. De tag identifierar betonad text, vilket i allmänhet betyder att den blir kursiv. Återigen finns det en möjlighet att CSS kommer att göra betonad textvisning annorlunda.

An emphasized line.

Resultat:

En betonad linje.

De tagg fungerar fortfarande, men igen är det möjligt att den kommer att avvecklas i framtida versioner av HTML.

12.

De , eller ankare, tag kan du skapa länkar. En enkel länk ser ut så här:

Gå till MUO

Attributet 'href' identifierar länkens destination. I många fall blir detta 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 MUO in a new tab

Resultat:

Gå till MUO 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 använder det normalt tillsammans med attributet 'src'. Detta anger bildens källa, så här:

Resultat:

hur man förbättrar prestanda för bärbar dator

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

the name of your image

Som du kanske förväntar dig anger 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 få en utsträckt eller klämd bild.

'Alt' -taggen berättar för webbläsaren vilken text som ska visas om bilden inte kan visas och är en bra idé att inkludera med vilken bild som helst. 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 ordnade listtaggen kan du skapa en ordnad 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. First thing

    2. Second thing

    3. Third thing

    Resultat:

    1. Först
    2. Det andra
    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.

      Med 'typ' -attributet kan du berätta för webbläsaren vilken typ av symbol som ska användas för listobjekten. Den kan ställas in på '1', 'A', 'a', 'I' eller 'i' och ställa in listan så att den visas med den angivna symbolen så här:

        femton.

          Den oordnade listan är mycket enklare än den beställda motsvarigheten. Det är helt enkelt en punktlista.


          • First item

          • Second item

          • Third item

          Resultat:

          • Första objektet
          • Andra objektet
          • Tredje artikeln

          Oordnade listor har också 'typ' -attribut, och du kan ställa in den på 'skiva', 'cirkel' eller 'kvadrat'.

          16.

          Medan tabeller för formatering är rynkad, 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å ett bord att fungera. Här är exempel på HTML -kod:














          1st column 2nd column
          Row 1, column 1 Row 1, column 2
          Row 2, column 1 Row 2, column 2

          De

          och
          taggar anger tabellens början och slut. Detaggen innehåller allt tabellinnehåll.

          Varje rad i tabellen är innesluten i amärka. Varje cell i varje rad är insvept i enderataggar för kolumnrubriker ellertaggar 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 du vill skilja offerten från resten av ditt dokument använder du blockquote -taggen. Allt du behöver göra är att bifoga citatet i öppna och stänga blockquote -taggar:

          The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.

          Resultat:

          Webben som jag tänkt mig den, vi har inte sett den ännu. Framtiden är fortfarande så mycket större än det förflutna.

          Den exakta formateringen som används kan bero på webbläsaren du använder eller CSS på din webbplats. Men taggen förblir densamma.

          HTML -kodprover

          Med dessa 17 HTML -exempel bör du kunna skapa en enkel webbplats. Du kan testa dem alla just nu i en online -textredigerare för att få en känsla för hur de fungerar.

          För mer bitstora lektioner i HTML, prova några mikrolärningsprogram för kodning. De hjälper dig att få fart på nolltid.

          Dela med sig Dela med sig Tweet E-post Vill du lära dig grundläggande kodning? Prova 5 bitstora kodningsappar på fritiden

          Vill du lära dig grundläggande kodning men har lite tid? Dessa kodstorlekar kommer att ta bara några minuter av din hektiska dag.

          Läs Nästa           Relaterade ämnen
          • Programmering
          • Wordpress
          • HTML
          • Webbutveckling
          • Handledning för kodning
          Om författaren Andy Betts(221 artiklar publicerade)

          Andy är en tidigare tryckt journalist och tidningsredaktör som har skrivit om teknik i 15 år. Under den tiden har han bidragit till otaliga publikationer och producerat copywriting för stora teknikföretag. Han har också gett expertkommentarer för media och varit värd för paneler vid branschevenemang.

          Mer från Andy Betts

          Prenumerera på vårt nyhetsbrev

          Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e -böcker och exklusiva erbjudanden!

          Klicka här för att prenumerera