17 yksinkertaista HTML -koodiesimerkkiä, jotka opit 10 minuutissa

17 yksinkertaista HTML -koodiesimerkkiä, jotka opit 10 minuutissa

Vaikka nykyaikaiset sivustot on yleensä rakennettu käyttäjäystävällisillä käyttöliittymillä, on hyödyllistä tietää joitain HTML-perusasetuksia. Jos tiedät seuraavat 17 HTML -esimerkkitagia (ja muutamia lisäominaisuuksia), voit luoda perusverkkosivun tyhjästä tai säätää WordPressin kaltaisen sovelluksen luomaa koodia.





Olemme toimittaneet HTML -koodiesimerkkejä useimpien tunnisteiden kanssa. Jos haluat nähdä ne toiminnassa, lataa HTML -mallitiedosto artikkelin lopussa. Voit pelata sillä tekstieditorissa ja ladata sen selaimeen nähdäksesi, mitä muutokset tekevät.



1.

Tarvitset tämän tunnisteen jokaisen luomasi HTML -asiakirjan alussa. Se varmistaa, että selain tietää lukemansa HTML -koodia ja että se odottaa uusinta HTML5 -versiota.





Vaikka tämä ei oikeastaan ​​ole HTML -tagi, se on silti hyvä tietää.

2.

Tämä on toinen tunniste, joka kertoo selaimelle, että se lukee HTML -koodia. Tunniste menee suoraan DOCTYPE -tunnisteen perään ja suljet sen tunnisteella suoraan tiedoston lopussa. Kaikki muu asiakirjasi menee näiden tunnisteiden väliin.



3.

Tunniste aloittaa tiedoston otsikko -osion. Sisältö ei näy verkkosivullasi. Sen sijaan se sisältää hakukoneiden metatietoja ja tietoja selaimestasi.

Perussivuilla tagi sisältää otsikkosi ja siinä kaikki. Mutta voit sisällyttää muutamia muita asioita, joita käsittelemme hetken kuluttua.



Neljä.

Tämä tunniste määrittää sivusi otsikon. Sinun tarvitsee vain laittaa otsikko tunnisteeseen ja sulkea se näin (olen lisännyt otsikkotunnisteet myös kontekstin näyttämiseksi):


My Website

Tämä nimi näkyy välilehden otsikkona, kun se avataan selaimessa.



5.

Kuten otsikkotunniste, myös metatiedot sijoitetaan sivusi otsikkoalueelle. Metatietoja käyttävät pääasiassa hakukoneet, ja ne ovat tietoja sivusi sisällöstä. On olemassa useita erilaisia ​​metakenttiä, mutta nämä ovat joitakin yleisimmin käytetyistä:

  • kuvaus : Peruskuvaus sivustasi.
  • avainsanoja : Valikoima sivullesi soveltuvia avainsanoja.
  • kirjoittaja : Sivusi kirjoittaja.
  • näkymä : Tunniste, jolla varmistetaan, että sivusi näyttää hyvältä kaikilla laitteilla.

Tässä on esimerkki, joka saattaa koskea tätä sivua:




Viewport-tunnisteen sisällön tulee aina olla 'width = device-width, initial-scale = 1.0', jotta sivusi näkyy hyvin mobiililaitteissa ja pöytäkoneissa.

6.

Kun olet sulkenut otsikko -osan, pääset runkoon. Avaat tämän tunnisteella ja suljet sen tunnisteella. Se menee suoraan tiedoston loppuun, juuri ennen tunnistetta.

Kaikki verkkosivusi sisältö menee näiden tunnisteiden väliin. Se on niin yksinkertaista kuin se kuulostaa:


Everything you want displayed on your page.

7.

Hieman vähemmän iso otsikko


Alaotsikko

Tulos:

Kuten näette, ne pienenevät kullakin tasolla.

8.

Kappaleetunniste aloittaa uuden kappaleen. Tämä lisää yleensä kaksi rivinvaihtoa.

Katso esimerkiksi edellisen rivin ja tämän rivin välistä taukoa. Sitä a

tag tekee.

Your first paragraph.


Your second paragraph.

Tulos:

Ensimmäinen kappaleesi.

Toinen kappaleesi.

Voit myös käytä CSS -tyylejä kappaleetunnisteissasi, kuten tämä, joka muuttaa tekstin kokoa:

This is 50% larger text.

Tulos:

9.

Rivinvaihtotunniste lisää yhden rivinvaihdon:

The first line.

The second line (close to the first one).

Tulos:

Samalla tavalla toimiminen on

tag. Tämä piirtää sivullesi vaakasuoran viivan ja on hyvä erottaa tekstin osat.

10.

Tämä tunniste määrittelee tärkeän tekstin. Yleensä se tarkoittaa, että se on rohkea. CSS: n käyttäminen on kuitenkin mahdollista teksti näkyy eri tavalla.

iphone 12 pro max vs pro

Voit kuitenkin käyttää turvallisesti lihavoituun tekstiin.

Very important things you want to say.

Tulos:

Erittäin tärkeitä asioita, jotka haluat sanoa.

Jos olet tutustunut lihavoitu teksti, voit silti käyttää sitä. Ei ole takeita siitä, että se toimii edelleen tulevissa HTML -versioissa, mutta toistaiseksi se toimii.

yksitoista.

Kuten ja , ja liittyvät toisiinsa. The -tunniste tunnistaa korostetun tekstin, mikä yleensä tarkoittaa sitä, että se kursivoidaan. Jälleen on mahdollista, että CSS näyttää korostetun tekstin eri tavalla.

An emphasized line.

Tulos:

Korostettu linja.

The tunniste toimii edelleen, mutta on jälleen mahdollista, että se poistetaan käytöstä tulevissa HTML -versioissa.

12.

The tai ankkuritagin avulla voit luoda linkkejä. Yksinkertainen linkki näyttää tältä:

Mene MUO: hon

Href -määritteellä määritetään linkin kohde. Monissa tapauksissa tämä on toinen sivusto. Se voi olla myös tiedosto, kuten kuva tai PDF.

Muita hyödyllisiä määritteitä ovat kohde ja otsikko. Kohdemääritettä käytetään lähes yksinomaan linkin avaamiseen uudella välilehdellä tai ikkunassa, kuten tämä:

Go to MUO in a new tab

Tulos:

Siirry MUO -palveluun uudella välilehdellä

Otsikko -attribuutti luo työkaluvihjeen. Vie hiiri alla olevan linkin päälle nähdäksesi kuinka se toimii:

Hover over this to see the tool tip

Tulos:

Vie hiiri tämän päälle nähdäksesi työkaluvihjeen

13.

Jos haluat upottaa kuvan sivullesi, sinun on käytettävä kuvatagia. Käytät sitä yleensä src -määritteen yhteydessä. Tämä määrittää kuvan lähteen seuraavasti:

Tulos:

ohjelmat, jotka asennetaan uuteen tietokoneeseen

Muita määritteitä on saatavana, kuten 'korkeus', 'leveys' ja 'alt'. Tältä se saattaa näyttää:

the name of your image

Kuten arvata saattaa, korkeus- ja leveys -määritteet määrittävät kuvan korkeuden ja leveyden. Yleensä on hyvä asettaa vain yksi niistä, jotta kuva skaalautuu oikein. Jos käytät molempia, saatat saada venytetyn tai rypistyneen kuvan.

Alt -tagi kertoo selaimelle, mitä tekstiä näytetään, jos kuvaa ei voida näyttää, ja se kannattaa sisällyttää mihin tahansa kuvaan. Jos jollakin on erityisen hidas yhteys tai vanha selain, hän voi silti saada käsityksen siitä, mitä sivullasi pitäisi olla.

14.

    Tilatun luettelotagin avulla voit luoda tilatun luettelon. Yleensä tämä tarkoittaa, että saat numeroidun luettelon. Jokainen luettelon kohde tarvitsee luettelokohdetunnisteen (

  1. ), joten luettelosi näyttää tältä:


    1. First thing

    2. Second thing

    3. Third thing

    Tulos:

    1. Ensimmäinen asia
    2. Toinen asia
    3. Kolmas asia

    HTML5: ssä voit käyttää

      kääntääksesi numeroiden järjestyksen. Ja voit määrittää aloitusarvon start -määritteellä.

      Tyyppi -määritteen avulla voit kertoa selaimelle, minkä tyyppistä symbolia luettelokohteissa käytetään. Se voidaan asettaa arvoon '1', 'A', 'a', 'I' tai 'i', jolloin luettelo näytetään osoitetulla symbolilla seuraavasti:

        viisitoista.

          Järjestämätön luettelo on paljon yksinkertaisempi kuin tilattu vastine. Se on yksinkertaisesti luettelomerkki.


          • First item

          • Second item

          • Third item

          Tulos:

          • Ensimmäinen kohde
          • Toinen kohde
          • Kolmas kohde

          Järjestämättömissä luetteloissa on myös 'type' -määritteitä, ja voit asettaa ne 'levyksi', 'ympyräksi' tai 'neliöksi'.

          16.

          Vaikka taulukoiden käyttämistä muotoilussa paheksutaan, on monia kertoja, jolloin haluat käyttää rivejä ja sarakkeita sivusi tietojen segmentoimiseen. Taulukon toimimiseksi tarvitaan useita tunnisteita. Tässä on esimerkki HTML -koodista:














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

          The

          ja
          tunnisteet määrittävät taulukon alun ja lopun. The-tagi sisältää kaiken taulukon sisällön.

          Taulukon jokainen rivi on sulkeutunut kohtaan atag. Jokaisen rivin jokainen solu on kääritty kumpaan tahansasarakeotsikoiden tunnisteet taisarakkeen tietojen tunnisteet. Tarvitset yhden näistä jokaisen rivin jokaiselle sarakkeelle.

          Tulos:

          1. sarake2. sarake
          Rivi 1, sarake 1Rivi 1, sarake 2
          Rivi 2, sarake 1Rivi 2, sarake 2

          17.

          Kun lainaat toista verkkosivustoa tai henkilöä ja haluat erottaa tarjouksen muusta asiakirjasta, käytä blockquote -tunnistetta. Sinun tarvitsee vain liittää lainaus lainausmerkkien avaamiseen ja sulkemiseen:

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

          Tulos:

          Verkko sellaisena kuin sen kuvittelin, emme ole vielä nähneet sitä. Tulevaisuus on edelleen paljon suurempi kuin menneisyys.

          Tarkka muotoilu, jota käytetään, voi riippua käyttämästäsi selaimesta tai sivustosi CSS: stä. Mutta tunniste pysyy samana.

          HTML -koodinäytteet

          Näiden 17 HTML -esimerkin avulla sinun pitäisi pystyä luomaan yksinkertainen verkkosivusto. Voit testata niitä kaikkia nyt online -tekstieditorissa saadaksesi käsityksen niiden toiminnasta.

          Jos haluat saada enemmän HTML-opetusta, kokeile joitain mikro-oppimissovelluksia koodausta varten. Ne auttavat saamaan sinut vauhtiin hetkessä.

          Jaa Jaa Tweet Sähköposti Haluatko oppia peruskoodauksen? Kokeile 5 Bite-Sized -koodaussovellusta vapaa-ajallasi

          Haluatko oppia peruskoodauksen, mutta sinulla on vähän aikaa? Nämä purentakokoiset koodaussovellukset vievät vain muutaman minuutin kiireisestä päivästäsi.

          Lue seuraava           Liittyvät aiheet
          • Ohjelmointi
          • Wordpress
          • HTML
          • Verkkokehitys
          • Koodausoppaat
          Kirjailijasta Andy Betts(221 artikkelia julkaistu)

          Andy on entinen painettu toimittaja ja aikakauslehtitoimittaja, joka on kirjoittanut tekniikasta 15 vuoden ajan. Tänä aikana hän on osallistunut lukemattomiin julkaisuihin ja tuottanut tekstinkirjoitustöitä suurille teknologiayrityksille. Hän on myös antanut asiantuntija -kommentteja medialle ja isännöinyt paneeleja alan tapahtumissa.

          Lisää Andy Bettsiltä

          tilaa uutiskirjeemme

          Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia ​​e -kirjoja ja ainutlaatuisia tarjouksia!

          Klikkaa tästä tilataksesi