Vil du lage en grunnleggende webside? Lær disse HTML-eksemplene og prøv dem ut i en tekstredigerer for å se hvordan de ser ut i nettleseren din.

17 enkle HTML-kodeeksempler du kan lære på 10 minutter

Annonse Selv om moderne nettsteder generelt er bygd med brukervennlige grensesnitt, er det nyttig å vite noe grunnleggende HTML. Hvis du kjenner de følgende 17 HTML-eksempler (og noen få ekstra), vil du kunne opprette en grunnleggende webside fra grunnen av eller finjustere koden som er opprettet av en app som WordPress. V

Annonse

Selv om moderne nettsteder generelt er bygd med brukervennlige grensesnitt, er det nyttig å vite noe grunnleggende HTML. Hvis du kjenner de følgende 17 HTML-eksempler (og noen få ekstra), vil du kunne opprette en grunnleggende webside fra grunnen av eller finjustere koden som er opprettet av en app som WordPress.

Vi har gitt HTML-kodeeksempler med utdata for de fleste av kodene. Hvis du vil se dem i aksjon, kan du laste ned HTML-prøven på slutten av artikkelen. Du kan leke med den i en tekstredigerer og laste den opp i nettleseren for å se hva endringene dine gjør.

1.

Du trenger denne taggen på begynnelsen av hvert HTML-dokument du oppretter. Det sikrer at en nettleser vet at den leser HTML, og at den forventer HTML5, den siste versjonen.

Selv om dette faktisk ikke er en HTML-kode, er det fortsatt en god en å vite.

2.

Dette er en annen tagg som forteller en nettleser at den leser HTML. Koden går rett etter DOCTYPE-koden, og du lukker den med en tagg rett på slutten av filen. Alt annet i dokumentet ditt går mellom disse kodene.

3.

Koden starter overskriftsdelen av filen din. Tingene som går inn her vises ikke på hjemmesiden din. I stedet inneholder den metadata for søkemotorer, og info for nettleseren din.

For grunnleggende sider vil koden inneholde tittelen, og det handler om det. Men det er noen få andre ting du kan inkludere, som vi vil gå over på et øyeblikk.

4.

html tittelkode

Denne taggen angir tittelen på siden din. Alt du trenger å gjøre er å sette tittelen i koden og lukke den, slik som dette (jeg har også tatt med overskrifttaggene):

  My Website

Det er navnet som vil vises som fanetittel når det åpnes i nettleseren.

5.

I likhet med tittelkoden legges metadata i overskriftsområdet på siden din. Metadata brukes primært av søkemotorer, og er informasjon om hva som er på siden din. Det finnes en rekke forskjellige metafelt, men dette er noen av de mest brukte:

  • beskrivelse - En grunnleggende beskrivelse av siden din.
  • nøkkelord - Et utvalg nøkkelord som gjelder for siden din.
  • forfatter — Forfatteren av siden din.
  • viewport - Et merke for å sikre at siden din ser bra ut på alle enheter.

Her er et eksempel som kan gjelde for denne siden:

"Viewport" -koden skal alltid ha "bredde = enhetsbredde, initialskala = 1.0" som innhold for å sikre at siden din vises godt på mobile og stasjonære enheter.

6.

Når du har lukket overskriftsdelen, kommer du til kroppen. Du åpner dette med koden, og lukker den med koden. Det går rett på slutten av filen din, rett før taggen.

Alt innholdet på nettsiden din går mellom disse kodene. Det er så enkelt som det høres ut:

  Everything you want displayed on your page.

7.

De

-taggen definerer en nivå-en-topptekst på siden din. Dette vil vanligvis være tittelen, og det vil ideelt sett bare være en på hver side.

definerer nivå to-overskrifter, for eksempel seksjonsoverskrifter,

nivå-tre underoverskrifter, og så videre, ned til

. Som et eksempel er navnene på kodene i denne artikkelen topp to nivåer.

 Stor og viktig overskrift 
Litt mindre stor topptekst 
Sub-Header

Resultat:

html-topptekster

Som du ser blir de mindre på hvert nivå.

8.

Paragrafkoden starter et nytt avsnitt. Dette setter vanligvis inn to linjeskift.

Se for eksempel på pausen mellom forrige linje og denne. Det er hva a

koden vil gjøre.

Første ledd.
Det andre avsnittet ditt.

Resultat:

Første ledd.

Det andre avsnittet ditt.

Du kan også bruke CSS-stiler i avsnittkodene dine, som denne som endrer tekststørrelse:

20% større tekst

Resultat:

20% større tekst

For å lære hvordan du bruker CSS til å style teksten din, sjekk ut disse HTML- og CSS-veiledningene.

9.

Linjeskiltkoden setter inn et enkelt linjeskift:

Den første linjen. 
Den andre linjen (nær den første).

Resultat:

Den første linjen.
Den andre linjen (nær den første).

Å jobbe på en lignende måte er

stikkord. Dette tegner en horisontal linje på siden din og er bra for å skille deler av tekst.

10.

Denne taggen definerer viktig tekst. Generelt betyr det at det vil være dristig. Imidlertid er det mulig å bruke CSS for å gjøre tekstvisning annerledes.

Du kan imidlertid trygt bruke til å fet tekst.

 Very important things you want to say.

Resultat:

Veldig viktige ting du vil si.

Hvis du er kjent med koden for fet tekst, kan du fortsatt bruke den. Det er ingen garanti for at det vil fortsette å fungere i fremtidige versjoner av HTML, men foreløpig fungerer det.

11.

Som og , og henger sammen. Koden identifiserer vektlagt tekst, noe som generelt betyr at den vil bli kursiv. Igjen, det er muligheten for at CSS vil gjøre vektlagt tekstvisning annerledes.

 An emphasized line.

Resultat:

En vektlagt linje.

Koden fungerer fortsatt, men igjen er det mulig at den vil bli utdatert i fremtidige versjoner av HTML.

12.

Etiketten, eller ankeret, lar deg opprette lenker. En enkel lenke ser slik ut:

 Go to MakeUseOf

Resultat:

Gå til MakeUseOf

"Href" -attributtet identifiserer destinasjonen for lenken. I mange tilfeller vil dette være et annet nettsted. Det kan også være en fil, for eksempel et bilde eller en PDF.

Andre nyttige attributter inkluderer "mål" og "tittel." Målattributtet brukes nesten utelukkende for å åpne en kobling i en ny fane eller vindu, som dette:

 Go to MakeUseOf in a new tab

Resultat:

Gå til MakeUseOf i en ny fane

"Tittelen" -attributtet lager en verktøytips. Hold musepekeren over lenken nedenfor for å se hvordan det fungerer:

 Hover over this to see the tool tip

Resultat:

Hold musepekeren over dette for å se verktøyets tips

1. 3.

Hvis du vil legge inn et bilde på siden din, må du bruke bildekoden. Du vil vanligvis bruke den i forbindelse med "src" -attributtet. Dette spesifiserer kilden til bildet, slik:

Resultat:

Solopplyste fugler bilde ved hjelp av img src-tagger

Andre attributter er tilgjengelige, for eksempel “høyde”, “bredde” og “alt.” Slik kan det se ut:

 navnet på bildet ditt

Som du kanskje forventer, angir attributtene "høyde" og "bredde" høyden og bredden på bildet. Generelt er det lurt å bare stille en av dem slik at bildet skaleres riktig. Hvis du bruker begge deler, kan du ende opp med et strukket eller klemt bilde.

"Alt" -koden forteller nettleseren hvilken tekst som skal vises hvis bildet ikke kan vises, og det er lurt å ta med noe bilde. Hvis noen har en spesielt treg forbindelse eller en gammel nettleser, kan de fortsatt få et inntrykk av hva som skal være på siden din.

14.

    Den bestilte listekoden lar deg opprette en bestilt liste. Generelt betyr det at du får en nummerert liste. Hvert element på listen trenger en listeelementkode (

  1. ), så listen din ser slik ut:

    1. Første ting
    2. Andre ting
    3. Tredje ting

    Resultat:

    1. Første ting
    2. Andre ting
    3. Tredje ting

    I HTML5 kan du bruke

      for å reversere rekkefølgen på tallene. Og du kan angi startverdien med startattributtet.

      "Type" -attributtet lar deg fortelle nettleseren hvilken type symbol du vil bruke for listeelementene. Det kan settes til “1, ” “A, ” “a, ” “I, ” eller “i”, og angi listen som skal vises med det indikerte symbolet slik:

        15.

          Den uordnede listen er mye enklere enn den bestilte motstykket. Det er ganske enkelt en punktliste.

          • Første varen
          • Andre vare
          • Tredje vare

          Resultat:

          • Første varen
          • Andre vare
          • Tredje vare

          Uordnede lister har også "type" attributter, og du kan sette den til "plate", "sirkel" eller "firkant."

          16.

          Mens du bruker rynker og kolonner for å segmentere informasjon på siden din, er det mange ganger når du vil bruke rader og kolonner. Flere koder er nødvendige for å få en tabell til å fungere. Her er eksemplet på HTML-kode:

          1. spalte2. spalte
          Rad 1, kolonne 1Rad 1, kolonne 2
          Rad 2, kolonne 1Rad 2, kolonne 2
          De 
           og 
           tagger spesifiserer starten og slutten av tabellen. De  -koden inneholder alt tabellinnholdet.
          Hver rad i tabellen er omsluttet av en stikkord. Hver celle innenfor hver rad er pakket inn i begge koder for kolonneoverskrifter, eller koder for kolonnedata. Du trenger en av disse for hver kolonne på hver rad.
          Resultat:
          1. spalte2. spalte
          Rad 1, kolonne 1Rad 1, kolonne 2
          Rad 2, kolonne 1Rad 2, kolonne 2
          17. 
          Når du siterer et annet nettsted eller en person og ønsker å sette prisantydningen fra resten av dokumentet ditt, bruker du blokkeringsbrevet. Alt du trenger å gjøre er å legge ved tilbudet når du åpner og lukker blockquote-tagger:
           Internett slik jeg så for meg, vi har ikke sett det ennå. Fremtiden er fremdeles så mye større enn fortiden. 
          Resultat:
          Internett slik jeg så for meg, vi har ikke sett det ennå. Fremtiden er fremdeles så mye større enn fortiden.
          Den nøyaktige formateringen som brukes kan avhenge av nettleseren du bruker eller CSS på nettstedet ditt. Men taggen forblir den samme.
          Gå videre og HTML 
          Med disse 17 HTML-eksemplene (og telling) skal du være i stand til å lage et enkelt nettsted 5 gratis HTML-maler for enkelt å lage raske nettsteder 5 gratis HTML-maler for enkelt å lage raske nettsteder. Prøv disse HTML-malene for å bygge nettstedet ditt i dag selv om du ikke t har noen HTML-ferdigheter. Les mer . For å se hvordan du setter dem sammen, kan du laste ned vår HTML-side. Åpne den i nettleseren din for å se hvordan det hele går sammen, eller i en tekstredigerer for å se nøyaktig hvordan koden fungerer.
          For flere leksjoner i HTML-størrelse, kan du prøve disse mikrolæringsappene for koding. Vil du lære grunnleggende koding? Prøv 5 bit-størrelse kodingsapper på fritiden Vil du lære grunnleggende koding? Prøv 5 bit-størrelse kodingsapper på fritiden Vil du lære grunnleggende koding, men har lite tid? Disse kodingsappene for bite-størrelse vil ta opp bare noen få minutter av din travle dag. Les mer .
          Utforsk mer om: Kodingsveiledninger, HTML, Webutvikling, Wordpress.
          
                     
          
                  
        1.