17 lihtsat HTML -koodi näidet, mida saate õppida 10 minutiga

17 lihtsat HTML -koodi näidet, mida saate õppida 10 minutiga

Kuigi kaasaegsed veebisaidid on üldiselt ehitatud kasutajasõbralike liidestega, on kasulik teada mõnda lihtsat HTML-i. Kui teate järgmisi 17 HTML -näitesilti (ja mõningaid lisasid), saate luua lihtsa veebilehe nullist või kohandada sellise rakenduse nagu WordPress loodud koodi.





Oleme pakkunud enamiku siltide jaoks väljundiga HTML -koodi näiteid. Kui soovite neid tegevuses näha, laadige artikli lõpus alla HTML -näidisfail. Saate sellega tekstiredaktoris mängida ja selle brauserisse laadida, et näha, mida teie muudatused teevad.



1.

Seda märgendit vajate iga loodud HTML -dokumendi alguses. See tagab, et brauser teab, et loeb HTML -i, ja ootab uusimat HTML5 -versiooni.





Kuigi see pole tegelikult HTML -silt, on see siiski hea teada.

2.

See on veel üks silt, mis ütleb brauserile, et see loeb HTML -i. Märgend läheb kohe pärast märgendit DOCTYPE ja sulgete selle märgendiga otse faili lõpus. Kõik muu teie dokumendis läheb nende siltide vahele.



3.

Silt alustab teie faili päiseosa. Siin sisalduvaid asju ei kuvata teie veebisaidil. Selle asemel sisaldab see otsingumootorite metaandmeid ja teie brauseri teavet.

Põhilehtede puhul sisaldab silt teie pealkirja ja see on ka kõik. Kuid võite lisada veel mõned asjad, millest me hetke pärast üle vaatame.



Neli.

See märgend määrab teie lehe pealkirja. Kõik, mida pead tegema, on panna oma pealkiri märgendisse ja sulgeda see nii (konteksti näitamiseks olen lisanud ka päisesildid):


My Website

See on nimi, mis kuvatakse vahekaardi pealkirjana, kui see brauseris avatakse.



5.

Sarnaselt tiitlimärgendile paigutatakse metaandmed teie lehe päisealale. Metaandmeid kasutavad peamiselt otsingumootorid ja see on teave teie lehe sisu kohta. Metavälju on mitmeid, kuid need on mõned kõige sagedamini kasutatavad:

  • kirjeldus : Teie lehe põhikirjeldus.
  • märksõnad : Valik teie lehele sobivaid märksõnu.
  • autor : Teie lehe autor.
  • vaateava : Märgend tagamaks, et teie leht näeb hea välja kõigis seadmetes.

Siin on näide, mis võib sellel lehel kehtida:




Märgendi „viewport” sisu peaks alati olema „width = device-width, initial-scale = 1.0”, et teie leht kuvataks hästi mobiili- ja lauaarvutites.

6.

Pärast päiseosa sulgemist jõuate keha juurde. Avage see sildiga ja sulgege see sildiga. See läheb otse faili lõppu, vahetult märgendi ette.

Kogu teie veebilehe sisu läheb nende siltide vahele. See on nii lihtne kui see kõlab:


Everything you want displayed on your page.

7.

Veidi vähem suur päis


Alampäis

Tulemus:

Nagu näete, muutuvad need igal tasandil väiksemaks.

8.

Lõikesilt alustab uut lõiku. See lisab tavaliselt kaks reavahet.

Vaadake näiteks vaheaega eelmise ja selle rea vahel. Seda a

silt teeb.

Your first paragraph.


Your second paragraph.

Tulemus:

Sinu esimene lõik.

Sinu teine ​​lõik.

Sa saad ka kasutage CSS -stiile oma lõigumärgendites, nagu see, mis muudab teksti suurust:

This is 50% larger text.

Tulemus:

9.

Reavahetuse silt lisab ühe reavahe:

The first line.

The second line (close to the first one).

Tulemus:

Sarnasel viisil töötamine on

silt. See tõmbab teie lehele horisontaalse joone ja sobib hästi tekstiosade eraldamiseks.

10.

See silt määratleb olulise teksti. Üldiselt tähendab see, et see on julge. Siiski on CSS -i kasutamine võimalik teksti kuvatakse erinevalt.

iphone 12 pro max vs pro

Siiski saate seda ohutult kasutada paksule tekstile.

Very important things you want to say.

Tulemus:

Väga olulised asjad, mida soovite öelda.

Kui olete tuttav teksti paksus kirjas, saate seda siiski kasutada. Pole garantiid, et see töötab ka tulevastes HTML -i versioonides, kuid praegu see toimib.

üksteist.

Nagu ja , ja on seotud. The silt identifitseerib rõhutatud teksti, mis tavaliselt tähendab, et see läheb kursiivis. Jällegi on võimalus, et CSS muudab rõhutatud teksti kuvamise erinevalt.

An emphasized line.

Tulemus:

Rõhutatud joon.

The silt töötab endiselt, kuid jällegi on võimalik, et see on tulevastes HTML -versioonides aegunud.

12.

The või ankur, võimaldab silt luua linke. Lihtne link näeb välja selline:

Minge MUO -sse

Atribuut „href” tuvastab lingi sihtkoha. Paljudel juhtudel on see teine ​​veebisait. See võib olla ka fail, näiteks pilt või PDF.

Muude kasulike atribuutide hulka kuuluvad sihtmärk ja pealkiri. Sihtatribuuti kasutatakse peaaegu eranditult lingi avamiseks uuel vahelehel või aknas.

Go to MUO in a new tab

Tulemus:

Avage MUO uuel vahekaardil

Atribuut „title” loob kohtspikri. Hõljutage kursorit alloleva lingi kohal, et näha, kuidas see toimib:

Hover over this to see the tool tip

Tulemus:

Tööriista näpunäite nägemiseks hõljutage kursorit selle kohal

13.

Kui soovite oma lehele pildi manustada, peate kasutama pildimärgendit. Tavaliselt kasutate seda koos atribuudiga „src”. See määrab pildi allika järgmiselt:

Tulemus:

kuidas parandada ebakõlade serverit

Saadaval on ka muud atribuudid, näiteks „kõrgus”, „laius” ja „alt”. See võib välja näha järgmine:

the name of your image

Nagu arvata võis, määravad atribuudid „kõrgus” ja „laius” pildi kõrguse ja laiuse. Üldiselt on hea mõte seada neist ainult üks, et pilt skaleeruks õigesti. Kui kasutate mõlemat, võite saada venitatud või lihvitud pildi.

Silt „alt” ütleb brauserile, millist teksti kuvada, kui pilti ei saa kuvada, ja see on hea mõte lisada igale pildile. Kui kellelgi on eriti aeglane ühendus või vana brauser, saab ta ikkagi aimu, mis teie lehel peaks olema.

14.

    Tellitud loendi silt võimaldab teil luua tellitud loendi. Üldiselt tähendab see, et saate nummerdatud loendi. Iga loendi üksus vajab loendiüksuse märgendit (

  1. ), nii et teie loend näeb välja selline:


    1. First thing

    2. Second thing

    3. Third thing

    Tulemus:

    1. Esimene asi
    2. Teine asi
    3. Kolmas asi

    HTML5 -s saate kasutada

      numbrite järjekorra ümberpööramiseks. Ja saate määrata algväärtuse atribuudi start abil.

      Atribuut „type” võimaldab brauseril öelda, millist tüüpi sümbolit loendiüksuste jaoks kasutada. Selle saab seada väärtustele '1', 'A', 'a', 'I' või 'i', määrates loendi kuvamiseks näidatud sümboliga järgmiselt:

        viisteist.

          Korrastamata loend on palju lihtsam kui tellitud analoog. See on lihtsalt täpploend.


          • First item

          • Second item

          • Third item

          Tulemus:

          • Esimene ese
          • Teine ese
          • Kolmas ese

          Korrastamata loenditel on ka atribuudid „tüüp” ja saate määrata väärtusteks „ketas”, „ring” või „ruut”.

          16.

          Kuigi vormindamiseks tabelite kasutamine on pahaks pandud, on palju kordi, kui soovite oma lehe teabe segmentimiseks kasutada ridu ja veerge. Tabeli toimimiseks on vaja mitmeid silte. Siin on HTML -koodi näidis:














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

          The

          ja
          sildid määravad tabeli alguse ja lõpu. Thesilt sisaldab kogu tabeli sisu.

          Tabeli iga rida on ümbritsetud a -gasilt. Iga rea ​​iga lahtrisse pakitakse kumbagiveerupäiste sildid võiveergude andmete sildid. Teil on vaja ühte neist iga rea ​​iga veeru jaoks.

          Tulemus:

          1. veerg2. veerg
          1. rida, 1. veerg1. rida, 2. veerg
          2. rida, 1. veergRida 2, veerg 2

          17.

          Kui tsiteerite mõnda muud veebisaiti või inimest ja soovite hinnapakkumise ülejäänud dokumendist eraldada, kasutage märgendit blockquote. Kõik, mida pead tegema, on lisada tsitaat plokktsitaadi märgendite avamisse ja sulgemisse:

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

          Tulemus:

          Veeb, nagu ma seda ette kujutasin, pole me seda veel näinud. Tulevik on ikka palju suurem kui minevik.

          Kasutatav täpne vormindus võib sõltuda kasutatavast brauserist või saidi CSS -ist. Kuid silt jääb samaks.

          HTML -koodi näidised

          Nende 17 HTML -näite abil peaksite saama luua lihtsa veebisaidi. Saate neid kõiki praegu veebitekstiredaktoris testida, et saada aimu nende toimimisest.

          Kui soovite rohkem HTML-i tunde, proovige kodeerimiseks mõnda mikroõpperakendust. Need aitavad teil kiiresti kiirust saada.

          Jaga Jaga Piiksuma E -post Kas soovite õppida kodeerimise põhitõdesid? Proovige oma vaba aja jooksul 5 hammustada suurusega kodeerimisrakendust

          Kas soovite õppida põhilist kodeerimist, kuid teil on vähe aega? Need hammustussuuruses kodeerivad rakendused võtavad teie kiirest päevast vaid mõne minuti.

          Loe edasi           Seotud teemad
          • Programmeerimine
          • Wordpress
          • HTML
          • Veebiarendus
          • Kodeerimise õpetused
          Autori kohta Andy Betts(Avaldatud 221 artiklit)

          Andy on endine trükiajakirjanik ja ajakirjatoimetaja, kes on tehnoloogiast kirjutanud 15 aastat. Selle aja jooksul on ta andnud kaastööd lugematutele väljaannetele ja koostanud tekstikirjutamistöid suurtele tehnoloogiaettevõtetele. Samuti on ta andnud meediale asjatundlikke kommentaare ja võõrustanud paneele tööstuse üritustel.

          Veel Andy Bettsilt

          Telli meie uudiskiri

          Liituge meie uudiskirjaga, et saada tehnilisi näpunäiteid, ülevaateid, tasuta e -raamatuid ja eksklusiivseid pakkumisi!

          Tellimiseks klõpsake siin