HTML vodič (za početnike)

HTML vodič za početnikeŽelite li naučiti neki HTML?


Zvuči kao sjajna ideja. Otuda i razlog zašto smo sastavili ovaj HTML vodič za početnike.

Danas u svijetu postoji najmanje 1,7 milijardi web stranica. Praktično sve ove web stranice koriste HTML na ovaj ili onaj način.

P.S: Ako ne želite naučiti HTML i odmah započeti s izradom vaše web stranice, nije potrebno kodiranje, pogledajte ovaj vodič: Kako napraviti BESPLATNO web mjesto (bez učenja HTML-a).

Uvod u HTML


Što je HTML?

Što je HTMLHTML, akronim za HyperText Markup Language, računalni je jezik za izradu web stranica i web aplikacija. Sastoji se uglavnom od niza kodova koji se obično pišu u tekstualnoj datoteci i spremaju kao HTML, a kôd napisan na HTML jeziku prevodi se u prekrasan, dobro oblikovan tekst ili kombinaciju teksta i medija kada se gleda putem preglednika.

HTML je prvi put razvio britanski fizičar Tim Berners-Lee 1990. godine, a od tada je prošao toliko evolucija da najnovija inačica može postići puno više nego što se zamislilo moguće kad je jezik prvi put izmišljen.

U ovom ćemo vodiču proći osnove HTML jezika i sve što trebate znati da biste započeli s HTML-om kao početnikom.

Verzije HTML-a

Prvo, brzo pokretanje svih HTML verzija od kada je HTML izumljen.

  • HTML 1.0: Ovo je bila barebones verzija HTML-a i prvo izdanje jezika.
  • HTML 2.0: Ova verzija predstavljena je 1995. Postupno se razvijala, omogućujući dodatne mogućnosti uključujući prijenos datoteka temeljenih na obrascima, tablice, mape slika na strani klijenta i internacionalizaciju..
  • HTML 3.2: U pokušaju da se osigura razvoj standarda za svjetsku mrežu, Konzorcij za svjetsku mrežu (W3C) osnovao je Tim Berners-Lee 1994. godine. Do 1997, objavio je HTML 3.2.
  • HTML 4.0: Kasnije 1997. godine W3C je objavio HTML 4.0 – verziju koja je usvojila mnoge vrste i atribute specifične za preglednik.
  • HTML 4.0 kasnije je ponovno objavljen manjim izmjenama 1998. godine.
  • HTML 4.01: U prosincu 1999. objavljen je HTML 4.01.
  • XHTML: Specifikacije su uvedene 2000. godine i preporučeno je da se koristi kao zajednički standard sa HTML 4.01. Uključio je XML kako bi se osiguralo da je kôd pravilno napisan i da se osigura interoperabilnost između programskih jezika.
  • HTML5: W3C je objavio HTML5 kao preporuku u listopadu 2014., a kasnije je objavio HTML 5.1 u studenom 2016. godine.

Odabir HTML uređivača

Odaberite HTML uređivačAko razmišljate o stvaranju web stranica u HTML-u, potreban vam je HTML uređivač. Nekoliko je prednosti korištenja HTML uređivača.

Dobar HTML uređivač čuvat će kôd čistim i organiziranim. Otkrivat će i kad otvorite novu oznaku i automatski je zatvoriti kako ne bi došlo do pogrešnog koda i, kao rezultat, umanjilo koliko tipkanja morate učiniti. Većina HTML uređivača danas vam omogućuje pregled vaše web stranice da biste vidjeli kako će ona izgledati u web pregledniku pomoću njihove funkcije WYSIWYG.

Postoji mnogo besplatnih i plaćenih HTML uređivača, u nastavku su neke od najboljih opcija koje možete odabrati:

Osnovni građevni blokovi HTML-a


Nakon što se odlučite za HTML uređivač koji želite koristiti, sljedeći je korak razumijevanje gradivnih blokova HTML-a. Prilikom kodiranja u HTML-u, bitno je razumjeti ove građevne blokove. Uključuju oznake, atribute i elemente. U nastavku ćemo ih pogledati:

Uvod u oznake

Jednom kada uđete u HTML, prvo morate shvatiti oznake. U osnovi, oznake odvajaju normalan tekst od HTML koda.

Prema tome, kad je riječ o HTML-u, oznake čine razliku između toga je li vaš dokument prikazan kao običan tekst ili “preobraženi tekst”, što je u osnovi kod teksta koji izgleda kao da prikazuje niz stvari (hiperveze, slike, mediji ili drugo metode oblikovanja) na temelju onoga što je upućeno za prikaz na temelju oznaka.

Pogledajmo riječ “On je dječak” kao primjer:

  • U običnom tekstu teksta dobivate: On je dječak.
  • U podebljanom tekstu teksta dobivate: On je dječak

Da biste postigli ono što imamo u podebljanom formatu, morate koristiti označiti.

čineći tekst podebljanim u html-u

U sirovom HTML-u imamo On je dječak što preglednik tada prevodi na ovo: On je dječak.

“On je dječak”, također bi mogao izaći kurziv.

To se postiže korištenjem označiti.

čineći tekst kurzivom u html-u

Imamo: On je dječak koja tada izlazi kao On je dječak.

Hiperpovezanost se postiže upotrebom označiti.

čineći tekst hipervezanim u html-u

U sirovom HTML-u imamo: On je dječak koji se prikazuje kao Dječak.

Nekoliko je stvari koje biste trebali razumjeti u vezi s oznakama:

  • Oznake su praktički sastavni blok HTML-a – ne možete bez HTML-a! Ako ste zapeli na kojoj se oznaci koristite, svakako pogledajte našu HTML periodičnu tablicu.
  • Gotovo svaka otvorena oznaka mora biti zatvorena. Imajte na umu da postoje iznimke. Primjer oznake koji ne mora biti zatvoren je prazna oznaka, poput prekida retka:
    .
  • Oznake su sadržane u manje od (“<”) and greater than (“>”) Ugaoni nosač. Oznake za zatvaranje sadrže zadnju kosu crte koja postaje prije zatvaranja naziva. Primjer otvorene oznake: . Primjer zatvorene oznake .
  • Svaka HTML datoteka započinje s početnom oznakom a završava završnom oznakom. Prvi redak HTML datoteke trebao bi objaviti vrstu dokumenta kako bi preglednik znao koji HTML okus koristite. Zbog toga vidite HTML stranice koje započinju s ““Prije nego što započne HTML kod.

Prije dodavanja sadržaja većina HTML datoteka u osnovi izgleda ovako:

HTML--

Odjeljak koji slijedi nakon Oznaka obično sadrži podatke o dokumentu, kao što su njegov naslov, meta oznake i gdje pronaći njegovu CSS datoteku – sadržaj koji nije vidljiv izravno na stranici preglednika. Odjeljak između “ i“(Koji smo predstavljali” GLAVNI SADRŽAJ “) nalazi se glavni sadržaj HTML datoteke koju će gledatelj vidjeti u pregledniku. To uključuje sve, od prvog odlomka do hiperveza do oblikovanja u multimediji i sve ostalo.

Uvod u elemente

uvod u elemente

U HTML-u se “element” sastoji od oznake za otvaranje i zatvaranje kao i sadržaj između oznaka.

U odjeljku “On je dječak“(Podebljanim) primjerom, to imamo u HTML-u: On je dječak. Tekst “On je dječak” okružen je otvorenom i zatvorenom oznakom. Element je sve, uključujući početnu oznaku, sadržaj i oznaku zatvaranja.

Kada se oznaka otvori, uvodi se sadržaj i oznaka je zatvorena, imamo element.

Element može biti u osnovnom obliku ili u složenom obliku. Zašto? Jer ništa između otvorene i završne oznake, kao i te oznake, je element. To znači da možemo imati elemente unutar elementa. U našem trenutnom primjeru “on je dječak” (On je dječak) je element.

Primijetit ćete da smo ranije rekli da HTML dokumenti sadrže označite prije početka sadržaja. Sadržaj može sadržavati stotine različitih elemenata, ali svi su ti elementi dio “tijela” elementa (budući da je element tijela otvoren, sadrži sadržaj i zatim je zatvoren).

Uvod u atribute

Iako HTML dokumenti u osnovi koriste oznake za sve, ponekad želimo priopćiti dodatne informacije unutar elementa. U ovom slučaju koristimo atribut. Atribut se koristi za definiranje karakteristika elementa, a koristi se unutar početne oznake elementa. Atributi se sastoje od imena i vrijednosti.

Imajte na umu da se vrijednost atributa postavlja unutar navodnika koristeći format Tvoj tekst.

primjer atributa

Primjer:

On je dječak

U ovom primjeru upućujemo da je “On je dječak” poravnat u sredini dokumenta.

Početak rada s HTML-om


Početak rada s HTML-omPod pretpostavkom da danas želite stvoriti vlastiti osnovni HTML dokument, kako započeti? Od stvaranja naslova stranica do stvaranja obrazaca, u nastavku ćemo vas opisati kako započeti upotrebu HTML-a.

Stvaranje HTML-a Element

Prilikom stvaranja HTML dokumenta jedna je od prvih stvari koju ćete stvoriti element. Sadrže metapodatke (ili podatke o HTML dokumentu). To uključuje informacije poput skupa znakova, naslova dokumenta, stilova dokumenta, skripte itd.

Neki od elemenata u uključuje naslov koji je stvoren s označiti.</p><p><strong>Primjer</strong>:</p><pre><title>Ovo je naslov naše stranice

Taj će se naslov prikazati na kartici preglednika. Također će se indeksirati kao naslov stranice kada botovi tražilice indeksiraju vašu web lokaciju.

To uključuje i element koji se često koristi za određivanje informacija koje tražilice mogu koristiti za opisivanje sadržaja u njihovim popisima. To uključuje opis, ključne riječi, podatke o autoru itd. element također određuje skup znakova koji koristi HTML dokument.

Izrada naslova u HTML-u

stvaranje naslova u html-u

Naslovi igraju glavnu ulogu u uspjehu web stranice. Prvo, čitateljima olakšava skeniranje sadržaja vaših stranica. Drugo, i što je još važnije – oni pretraživačkim mrežama komuniciraju strukturu vaših web stranica i stoga često utječu na rangiranje vašeg sadržaja u rezultatima tražilice..

U skladu s tim, važno je izbjegavati upotrebu oznaka zaglavlja kako biste tekst učinili velikim ili podebljanim. Postoje i druge oznake koje se mogu koristiti za to (o čemu ćemo kasnije u ovom odjeljku). Umjesto toga, oznake naslova trebaju se koristiti samo za strukturu.

U HTML-u postoji šest oznaka naslova:

do
, s

oznaku koja označava najvažnije zaglavlje i
oznaka koja označava najmanje važan naslov.

Da biste stvorili naslove, jednostavno odlučite koji naslov stvarate, otvorite naslov uobičajenom oznakom zaglavlja i uvijek zapamtite da biste zatvorili oznake nakon što završite..

Primjer HTML naslova:

  • Ovo je vaš prvi HTML naslov

    (Najveći)

  • Ovo je vaš drugi HTML naslov

  • Ovo je vaš treći HTML naslov

  • Ovo je vaš četvrti HTML naslov

  • Ovo je vaš Peti HTML naslov
  • Ovo je vaš šesti HTML naslov

Stvaranje odlomaka

stvarajući odlomke u HTML-u

Sljedeći je korak početak stvaranja odlomaka. Odlomci se mogu stvoriti s

označiti.

Primjer:

Ovo je vaš prvi odlomak.

Ovo je vaš drugi odlomak, a vi ćete stvoriti mnogo više odlomaka.

Imajte na umu da se pisanje u HTML-u razlikuje od pisanja čistim tekstom. Stoga, ako razbijete tekst unutar HTML-a bez započinjanja novog odlomka, zapravo neće biti važno kada preglednik prikazuje tekst. Umjesto toga, želite upotrijebiti prijelom retka koji je predstavljen s
označiti.

Primjer:

Ovo je novi odlomak. I želim koristiti niz novih redaka. Dakle, razlazim.

Ovo se neće pojaviti na sljedeći način:

Ovo je novi odlomak.
I želim koristiti niz novih redaka.
Dakle, razlazim.

Umjesto toga, ispostavit će se ovako:

Ovo je novi odlomak. I želim koristiti niz novih redaka. Dakle, razlazim.

Dakle, kako rastaviti tekstove na nove retke kako bi se pokazao ovako:

Ovo je novi odlomak.
I želim koristiti niz novih redaka.
Dakle, razlazim.

Pomoću prijeloma linija.

Primjer:

Ovo je novi odlomak.
I želim koristiti niz novih redaka.
Dakle, razlazim.

U skladu s tim, važno je napomenuti da je prekid linije (
) oznaka je prazna oznaka, pa je ne morate zatvarati.

Formatiranje teksta u HTML-u

formatiranje teksta u HTML-u

Sljedeći je korak formatiranje teksta u HTML-u. Ovdje možete naznačiti želite li da vaš tekst izađe podebljan, kurzivan, podvučen, podcrtan, pretplaćen, pretispisan, itd. Ovo je osnovni vodič, tako da ovaj odjeljak neće biti konačan za oblikovanje. Umjesto toga, uključit ćemo samo neke osnovne oznake oblikovanja. Proces korištenja drugih oblika oblikovanja je jednostavan – samo pronađite željenu oznaku i nastavite:

Koristite podebljano: On je dječak izlazi kao On je dječak

Korištenje kurziva: On je dječak izlazi kao On je dječak

Podvlačenje teksta: On je dječak izlazi kao On je dječak. Vrijedi napomenuti da oznaka je zastarjela u HTML-u 4.01 i redefinirana je da predstavlja stilski različit tekst u HTML5. Kao rezultat, preporučuje se korištenje CSS-a za označavanje teksta koji treba naglasiti. Kako je ovaj članak osnovni vodič, to radimo jednostavnim.

Upotreba pretplate: On je dječak izlazi kao On je dječak

Pomoću nadpisa: On je dječak izlazi kao On je dječak

Za ostale oznake koje se mogu koristiti za oblikovanje potražite pojmovnik na kraju ovog resursa gdje smo uključili obilje relevantnih HTML oznaka.

Naručeni i neuređeni popisi

Prije ili kasnije morat ćete stvoriti popise. Popisi mogu biti naručeni (tj. Numerirani) ili neuređeni (tj., Nebrojeni).

Evo primjera naručene liste:

  1. Točka 1
  2. Točka 2
  3. Točka 3

Evo kako to stvoriti:

  1. Točka 1
  2. Točka 2
  3. Točka 3

Evo primjera neuređenog popisa:

  • Točka 1
  • Točka 2
  • Točka 3

Evo kako to stvoriti:

  • Točka 1
  • Točka 2
  • Točka 3

Ako to već nije očito. Evo rascjepa:

  • Oznaka se koristi za označavanje svake stavke na popisu. Prilikom izrade popisa možete koristiti
      oznaku da naznačite poredani popis (“o” = naredio i “l” = popis) ili