17 jednostavnih primjera HTML koda koje možete naučiti za 10 minuta

17 jednostavnih primjera HTML koda koje možete naučiti za 10 minuta

Iako su moderne web stranice općenito izgrađene sa sučeljima prilagođenim korisniku, korisno je poznavati neki osnovni HTML. Ako znate sljedećih 17 primjera HTML oznaka (i nekoliko dodataka), moći ćete izraditi osnovnu web stranicu od nule ili prilagoditi kôd koji je izradila aplikacija poput WordPressa.





Naveli smo primjere HTML koda s izlazom za većinu oznaka. Ako ih želite vidjeti na djelu, preuzmite oglednu HTML datoteku na kraju članka. Možete se igrati s njim u uređivaču teksta i učitati ga u preglednik da vidite što vaše izmjene čine.



1.

Ova će vam oznaka trebati na početku svakog HTML dokumenta koji stvorite. On jamči da preglednik zna da čita HTML i da očekuje HTML5, najnoviju verziju.





Iako ovo zapravo nije HTML oznaka, dobro ju je znati.

2.

Ovo je još jedna oznaka koja govori pregledniku da čita HTML. Oznaka ide odmah iza oznake DOCTYPE, a vi je zatvarate oznakom odmah na kraju datoteke. Sve ostalo u vašem dokumentu ide između ovih oznaka.



3.

Oznaka započinje odjeljak zaglavlja vaše datoteke. Ono što se ovdje unese ne pojavljuje se na vašoj web stranici. Umjesto toga, sadrži metapodatke za tražilice i podatke o vašem pregledniku.

Za osnovne stranice oznaka će sadržavati vaš naslov i to je sve. No postoji još nekoliko stvari koje možete uključiti, a na koje ćemo prijeći za trenutak.



Četiri.

Ova oznaka postavlja naslov vaše stranice. Sve što trebate učiniti je staviti naslov u oznaku i zatvoriti ga, ovako (uključio sam i oznake zaglavlja za prikaz konteksta):


My Website

To je naziv koji će se prikazati kao naslov kartice kada se otvori u pregledniku.



5.

Kao i naslovna oznaka, metapodaci se stavljaju u zaglavlje vaše stranice. Metapodaci prvenstveno koriste tražilice, a to su informacije o tome što se nalazi na vašoj stranici. Postoji niz različitih meta polja, ali ovo su neka od najčešće korištenih:

  • opis : Osnovni opis vaše stranice.
  • ključne riječi : Izbor ključnih riječi primjenjivih na vašu stranicu.
  • Autor : Autor vaše stranice.
  • vidno polje : Oznaka koja osigurava da vaša stranica izgleda dobro na svim uređajima.

Evo primjera koji bi se mogao primijeniti na ovu stranicu:




Oznaka 'viewport' uvijek bi trebala imati 'width = device-width, initial-scale = 1.0' kao sadržaj kako bi se vaša stranica dobro prikazivala na mobilnim i stolnim uređajima.

6.

Nakon što zatvorite odjeljak zaglavlja, dolazite do tijela. Otvorite ovo s oznakom, a zatvorite s oznakom. To ide odmah na kraju datoteke, neposredno prije oznake.

Sav sadržaj vaše web stranice nalazi se između ovih oznaka. Jednostavno je koliko zvuči:


Everything you want displayed on your page.

7.

Nešto manje veliko zaglavlje


Podzaglavlje

Proizlaziti:

Kao što vidite, oni se smanjuju na svakoj razini.

8.

Oznaka odlomka započinje novi odlomak. Obično se unose dva prijeloma retka.

Pogledajte, na primjer, prekid između prethodnog retka i ovog. To je ono što a

oznaka će učiniti.

Your first paragraph.


Your second paragraph.

Proizlaziti:

Tvoj prvi odlomak.

Vaš drugi odlomak.

Također možete koristiti CSS stilove u oznakama odlomka, poput ove koja mijenja veličinu teksta:

This is 50% larger text.

Proizlaziti:

9.

Oznaka prijeloma retka ubacuje jedan prijelom retka:

The first line.

The second line (close to the first one).

Proizlaziti:

Rad na sličan način je

označiti. Ovo povlači vodoravnu liniju na vašoj stranici i dobro je za odvajanje dijelova teksta.

10.

Ova oznaka definira važan tekst. Općenito, to znači da će biti podebljano. Međutim, za izradu je moguće koristiti CSS tekst se prikazuje drugačije.

kako mogu postaviti paypal račun za primanje novca

Međutim, možete ga sigurno koristiti podebljanom tekstu.

Very important things you want to say.

Proizlaziti:

Vrlo važne stvari koje želite reći.

Ako ste upoznati sa oznaku za podebljani tekst, još uvijek je možete koristiti. Nema jamstva da će nastaviti raditi u budućim verzijama HTML -a, ali za sada funkcionira.

jedanaest.

Kao i , i povezani su. The označava označeni tekst, što općenito znači da će biti kurzivan. Opet, postoji mogućnost da CSS učini naglašeni tekst drugačijim.

An emphasized line.

Proizlaziti:

Naglašena linija.

The tag i dalje radi, ali opet, moguće je da će biti zastario u budućim verzijama HTML -a.

12.

The , ili sidro, oznaka omogućuje stvaranje veza. Jednostavna veza izgleda ovako:

Idite na MUO

Atribut 'href' identificira odredište veze. U mnogim slučajevima ovo će biti još jedna web stranica. To može biti i datoteka, poput slike ili PDF -a.

Ostali korisni atributi uključuju 'cilj' i 'naslov'. Atribut target koristi se gotovo isključivo za otvaranje veze u novoj kartici ili prozoru, na primjer:

Go to MUO in a new tab

Proizlaziti:

Idite na MUO na novoj kartici

Atribut 'title' stvara opis alata. Zadržite pokazivač miša iznad donje veze da vidite kako to funkcionira:

Hover over this to see the tool tip

Proizlaziti:

Zadržite pokazivač iznad ovoga da biste vidjeli savjet alata

13.

Ako želite umetnuti sliku u svoju stranicu, morat ćete upotrijebiti oznaku slike. Obično ćete ga koristiti zajedno s atributom 'src'. Ovo određuje izvor slike, ovako:

Proizlaziti:

koliko možete zaraditi rudarenje bitcoina

Dostupni su i drugi atributi, poput 'visine', 'širine' i 'alt'. Evo kako bi to moglo izgledati:

the name of your image

Kao što ste mogli očekivati, atributi 'height' i 'width' postavljaju visinu i širinu slike. Općenito, dobra je ideja postaviti samo jedan od njih kako bi se slika ispravno povećala. Ako koristite oboje, mogli biste imati istegnutu ili zgnječenu sliku.

Oznaka 'alt' govori pregledniku koji tekst prikazati ako se slika ne može prikazati i dobra je ideja uključiti je u bilo koju sliku. Ako netko ima posebno sporu vezu ili stari preglednik, i dalje može steći predodžbu o tome što bi trebalo biti na vašoj stranici.

14.

    Oznaka uređenog popisa omogućuje vam stvaranje uređenog popisa. Općenito, to znači da ćete dobiti numerirani popis. Svaka stavka na popisu treba oznaku stavke popisa (

  1. ), pa će vaš popis izgledati ovako:


    1. First thing

    2. Second thing

    3. Third thing

    Proizlaziti:

    1. Prva stvar
    2. Druga stvar
    3. Treća stvar

    U HTML5 možete koristiti

      obrnuti redoslijed brojeva. Početnu vrijednost možete postaviti pomoću atributa start.

      Atribut 'type' omogućuje vam pregledniku reći koju vrstu simbola koristiti za stavke popisa. Može se postaviti na '1', 'A', 'a', 'I' ili 'i', postavljajući popis tako da se prikazuje s označenim simbolom ovako:

        petnaest.

          Neuređen popis mnogo je jednostavniji od naručenog pandana. To je jednostavno označeni popis.


          • First item

          • Second item

          • Third item

          Proizlaziti:

          • Prva stavka
          • Druga stavka
          • Treća stavka

          Neuređeni popisi također imaju atribute 'type', pa ga možete postaviti na 'disc', 'circle' ili 'square'.

          16.

          Iako se korištenje tablica za oblikovanje ne razumije, postoji mnogo slučajeva kada ćete htjeti koristiti retke i stupce za segmentiranje podataka na svojoj stranici. Nekoliko oznaka potrebno je za rad stola. Evo primjera HTML koda:














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

          The

          i
          oznake određuju početak i kraj tablice. Theoznaka sadrži sav sadržaj tablice.

          Svaki red tablice zatvoren je u aoznačiti. Svaka ćelija unutar svakog retka omotana je bilo jednomoznake za zaglavlja stupaca, ilioznake za podatke stupaca. Za svaki stupac u svakom retku potreban vam je jedan od ovih.

          Proizlaziti:

          1. stupac2. stupac
          Red 1, stupac 1Red 1, stupac 2
          Red 2, stupac 1Red 2, stupac 2

          17.

          Kada citirate drugu web stranicu ili osobu i želite citat razlikovati od ostatka dokumenta, upotrijebite oznaku blockquote. Sve što trebate učiniti je priložiti citat u otvaranje i zatvaranje oznaka blok citata:

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

          Proizlaziti:

          Web kakav sam zamislio, još ga nismo vidjeli. Budućnost je još uvijek mnogo veća od prošlosti.

          Točno oblikovanje koje se koristi može ovisiti o pregledniku koji koristite ili CSS -u vaše web stranice. Ali oznaka ostaje ista.

          Uzorci HTML koda

          S ovih 17 primjera HTML -a trebali biste moći stvoriti jednostavnu web stranicu. Sve ih možete odmah isprobati u mrežnom uređivaču teksta kako biste stekli osjećaj o njihovom funkcioniranju.

          Za više zalogaja u HTML-u isprobajte neke aplikacije za mikroučenje za kodiranje. Oni će vam pomoći da ubrzate radnju.

          Udio Udio Cvrkut E -pošta Želite naučiti osnovno kodiranje? Isprobajte 5 aplikacija za kodiranje veličine zalogaja u svoje slobodno vrijeme

          Želite naučiti osnovno kodiranje, ali imate malo vremena? Ove aplikacije za kodiranje veličine ugriza oduzet će vam samo nekoliko minuta vašeg napornog dana.

          Pročitajte Dalje           Povezane teme
          • Programiranje
          • Wordpress
          • HTML
          • Web razvoj
          • Vodiči za kodiranje
          O autoru Andy Betts(221 objavljenih članaka)

          Andy je bivši tiskani novinar i urednik časopisa koji već 15 godina piše o tehnologiji. U to vrijeme pridonio je nebrojenim publikacijama i napravio tekstopisce za velike tehnološke tvrtke. Također je dao komentare stručnjaka za medije i vodio panele na industrijskim događajima.

          Više od Andyja Bettsa

          Pretplatite se na naše obavijesti

          Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e -knjige i ekskluzivne ponude!

          Kliknite ovdje za pretplatu