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

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

Selv om moderne nettsteder generelt er bygget med brukervennlige grensesnitt, er det nyttig å kjenne til noen grunnleggende HTML. Hvis du kjenner de følgende 17 HTML -eksempelkodene (og noen få tillegg), kan du lage en grunnleggende webside fra bunnen av eller justere koden som er opprettet av en app som WordPress.





Vi har levert HTML -kodeeksempler med utdata for de fleste taggene. Hvis du vil se dem i aksjon, kan du laste ned eksempel -HTML -filen på slutten av artikkelen. Du kan leke med det i et tekstredigeringsprogram og laste det opp i en nettleser for å se hva endringene dine gjør.



1.

Du trenger denne koden i begynnelsen av hvert HTML -dokument du lager. Den sikrer at en nettleser vet at den leser HTML, og at den forventer HTML5, den siste versjonen.





Selv om dette egentlig ikke er en HTML -tag, er det fortsatt godt å vite.

2.

Dette er en annen tag som forteller en nettleser at den leser HTML. Koden går rett etter DOCTYPE -taggen, 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 overskriftsseksjonen i filen din. Tingene som kommer inn her, vises ikke på nettsiden din. I stedet inneholder den metadata for søkemotorer og informasjon for nettleseren din.

For grunnleggende sider vil taggen inneholde tittelen din, og det er omtrent det. Men det er noen andre ting du kan inkludere, som vi skal gå over om et øyeblikk.



Fire.

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


My Website

Det er navnet som vil vises som fanetittel når den åpnes i en nettleser.



5.

I likhet med tittelkoden settes metadata i topptekstområdet på siden din. Metadata brukes hovedsakelig av søkemotorer, og er informasjon om hva som er på siden din. Det er en rekke forskjellige metafelt, men disse er noen av de mest brukte:

  • beskrivelse : En grunnleggende beskrivelse av siden din.
  • søkeord : Et utvalg søkeord som gjelder for siden din.
  • forfatter : Forfatteren av siden din.
  • visningshavn : En tag for å sikre at siden din ser bra ut på alle enheter.

Her er et eksempel som kan gjelde for denne siden:




'Viewport' -taggen bør alltid ha 'width = device-width, initial-scale = 1.0' som innhold for å sikre at siden din vises godt på mobile og stasjonære enheter.

6.

Etter at du har lukket overskriftsseksjonen, kommer du til kroppen. Du åpner dette med taggen, og lukker det med taggen. Det går rett på slutten av filen, like 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.

Litt mindre stor overskrift


Underoverskrift

Resultat:

Som du kan se, blir de mindre på hvert nivå.

8.

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

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

tag vil gjøre.

Your first paragraph.


Your second paragraph.

Resultat:

Ditt første avsnitt.

Ditt andre avsnitt.

Du kan også bruk CSS -stiler i avsnittstaggene dine, som denne som endrer tekststørrelsen:

This is 50% larger text.

Resultat:

9.

Linjeskiftstaggen setter inn et enkelt linjeskift:

The first line.

The second line (close to the first one).

Resultat:

Å 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. Det er imidlertid mulig å bruke CSS til å lage tekst vises annerledes.

nettsteder for å kjøpe ting billig online

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 tag 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.

elleve.

Som og , og er i slekt. De tag identifiserer understreket tekst, noe som vanligvis betyr at den blir kursiv. Igjen er det muligheten for at CSS vil få fremhevet tekstvisning annerledes.

An emphasized line.

Resultat:

En understreket linje.

De tag fortsatt fungerer, men igjen er det mulig at den blir avskrevet i fremtidige versjoner av HTML.

12.

De eller anker, tag lar deg lage koblinger. En enkel lenke ser slik ut:

Gå til MUO

Attributtet 'href' 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 til å åpne en lenke i en ny fane eller et nytt vindu, slik:

Go to MUO in a new tab

Resultat:

Gå til MUO i en ny fane

Attributtet 'tittel' lager et verktøytips. Hold markøren over lenken nedenfor for å se hvordan det fungerer:

Hover over this to see the tool tip

Resultat:

Hold markøren over dette for å se verktøytipset

1. 3.

Hvis du vil legge inn et bilde på siden din, må du bruke bildemerket. Du vil normalt bruke det sammen med attributtet 'src'. Dette spesifiserer kilden til bildet, slik:

Resultat:

hvilket hovedkort har jeg?

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

the name of your image

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

Alt -taggen forteller nettleseren hvilken tekst som skal vises hvis bildet ikke kan vises, og det er en god idé å inkludere det med et hvilket som helst bilde. Hvis noen har en spesielt treg tilkobling eller en gammel nettleser, kan de fortsatt få en ide om hva som skal stå på siden din.

14.

    Med den bestilte liste -taggen kan du opprette en bestilt liste. Generelt betyr det at du får en nummerert liste. Hvert element i listen trenger en listeelementtag (

  1. ), så listen din vil se slik ut:


    1. First thing

    2. Second thing

    3. Third thing

    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.

      Attributtet 'type' lar deg fortelle nettleseren hvilken symboltype du skal bruke for listeelementene. Den kan settes til '1,' 'A,' 'a,' 'I' eller 'i', og sette listen til å vise med det angitte symbolet slik:

        femten.

          Den uordnede listen er mye enklere enn den bestilte motparten. Det er rett og slett en punktliste.


          • First item

          • Second item

          • Third item

          Resultat:

          • Første element
          • Andre element
          • Tredje element

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

          16.

          Selv om det er misunnet å bruke tabeller for formatering, er det mange ganger du vil bruke rader og kolonner til å segmentere informasjon på siden din. Flere koder er nødvendig for å få et bord til å fungere. Her er eksempel HTML -koden:














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

          De

          og
          tagger angir begynnelsen og slutten av tabellen. Detag inneholder alt tabellinnhold.

          Hver rad i tabellen er omsluttet av astikkord. Hver celle i hver rad er pakket inn i ententagger for kolonneoverskrifter, ellertagger 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 annen person og du vil skille tilbudet fra resten av dokumentet, bruker du blockquote -taggen. Alt du trenger å gjøre er å legge ved sitatet i åpne og lukke blockquote -tagger:

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

          Resultat:

          Internett slik jeg så det for oss, vi har ikke sett det ennå. Fremtiden er fortsatt så mye større enn fortiden.

          Den eksakte formateringen som brukes, kan avhenge av nettleseren du bruker eller CSS på nettstedet ditt. Men taggen forblir den samme.

          HTML -kodeeksempler

          Med disse 17 HTML -eksemplene bør du kunne lage et enkelt nettsted. Du kan teste dem alle akkurat nå i en online tekstredigerer for å få en følelse av hvordan de fungerer.

          For flere bittstore leksjoner i HTML, kan du prøve noen mikrolære-apper for koding. De vil hjelpe deg med å få fart på et blunk.

          Dele Dele kvitring E -post Vil du lære grunnleggende koding? Prøv 5 bit-sized kodingsapper på fritiden

          Vil du lære grunnleggende koding, men har lite tid? Disse bite-size kodingsappene vil ta bare noen få minutter av din travle dag.

          Les neste           Relaterte temaer
          • Programmering
          • Wordpress
          • HTML
          • Webutvikling
          • Opplæringsprogrammer for koding
          Om forfatteren Andy Betts(221 artikler publisert)

          Andy er en tidligere trykkjournalist og tidsskriftredaktør som har skrevet om teknologi i 15 år. På den tiden har han bidratt til utallige publikasjoner og produsert tekstforfatterarbeid for store teknologiselskaper. Han har også gitt ekspertkommentarer til media og vært paneler på bransjearrangementer.

          Mer fra Andy Betts

          Abonner på vårt nyhetsbrev

          Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis ebøker og eksklusive tilbud!

          Klikk her for å abonnere