HTML je vitalni dio weba kako ga poznajemo. I dok nekolicina web dizajnera stvara stranice ručnim upisivanjem HTML-a, još uvijek je korisno znati malo o tome.

Pogledati ćemo neke osnove jezika, uključujući ono što je HTML zapravo, neke temeljne pojmove i način na koji on utječe na druge jezike. Mislite na to kao na “HTML za lutke” pad sustava.

Osnove HTML-a: Što je HTML?

HTML znači Jezik za označavanje hiperteksta. I dok se ponekad susreću s programskim jezicima, to nije točno.

Kao označni jezik, HTML vam omogućuje samo stvaranje izgleda prikaza stranica. Istina programski jezik, poput Java ili C ++, sadrži logiku i naredbe koje se provode.

Iako je jednostavan, HTML je okosnica svake stranice na webu. Odgovorna je za to što se tekst prikazuje podebljano, dodavanje slika i povezivanje s drugim stranicama. Imamo HTML često postavljana pitanja. Najvažnija HTML pitanja koja biste trebali označavati Ključna pitanja o HTML-u po kojima biste trebali označiti HTML je neko vrijeme, tako da je vrijeme da naučite osnove. Evo što je to, kako to funkcionira i kako danas možete napisati neke uobičajene elemente u HTML-u! to objašnjava više.

Možete kliknuti desnom tipkom miša na većinu web stranica u vašem pregledniku i odabrati Pogledaj izvor stranice ili slično da biste vidjeli HTML iza njih. To će vjerojatno sadržavati i puno koda koji nije HTML, ali možete ga prosijati.

Čak i ako nemate iskustva s označavanjem ili programskim jezicima, učenje malo o HTML-u učinit će vas informiranijim web korisnikom. Krenimo kroz pet osnovnih koraka koji će vam pomoći da shvatite kako funkcionira HTML. Navest ćemo primjere na ovom putu.

1. korak: razumijevanje koncepta tagova

HTML koristi sustav od oznake kategorizirati različite elemente dokumenta.

Većina oznaka dolazi u parovima radi zamotavanja pogođenog teksta u njih. Evo jednostavnog primjera (the oznaka čini tekst odvažan; o tome ćemo više raspravljati u trenu.)

Ovo je neki podebljani tekst.

Opazite kako započinje oznaka počinje s kosom naprijed (/). To označava završnu oznaku, što je važno. Ako ne zatvorite oznaku, sve će od početka nadalje imati taj atribut.

Međutim, nemaju sve oznake par. Neki HTML elementi, nazvani praznih elemenata, nemaju sadržaj i postoje sami. Primjer je
oznaka, što predstavlja prijelaz retka. Možeš “Zatvoriti” takve oznake dodavanjem crte (kao što je
) ali to nije strogo potrebno.

Korak 2: Izgled HTML skeleta

Ispravan HTML dokument mora imati određene oznake, tako da je pravilno postavljen. Ovo su bitni dijelovi:

• Svaki HTML dokument mora početi s da se izjasni kao takav. Dakle, njegova završna oznaka, , je posljednja stavka u HTML datoteci.
• Zatim slijedi odjeljak sadrži informacije poput naslova stranice, raznih skripti koje se pokreću na stranici i slično. Kao što ime sugerira, obično dolazi odmah nakon početnog označiti. Krajnji korisnik ne vidi mnogo sadržaja u ovim oznakama.
• Napokon oznaka sadrži tekst stranice koji čitatelj vidi (plus još mnogo toga). Ovdje ćete pronaći slike, linkove i još mnogo toga.

Od vremena Odjeljak čini najveći dio HTML dokumenta, ostatak našeg koraka pregledava elemente koji se na njega odnose.

Korak 3: Osnovne HTML oznake za oblikovanje

Zatim pogledajmo neke uobičajene oznake koje čine HTML dokumente. Naravno, nije moguće pokriti svaki element, pa ćemo pregledati neke najvažnije. Pokrili smo još mnogo primjera HTML-a 17 Jednostavnih primjera HTML koda koje možete naučiti u 10 minuta 17 Jednostavnih primjera HTML koda koje možete naučiti u 10 minuta Želite stvoriti osnovnu web stranicu? Naučite ove primjere HTML-a i isprobajte ih u uređivaču teksta da biste vidjeli kako izgledaju u vašem pregledniku. ako vas ovi ne zadovoljavaju.

Ako se te oznake čine prilično osnovnim, imajte na umu da je HTML nastao još 1993. godine. Web je u velikoj mjeri bio temeljen na tekstu tada..

Jednostavno oblikovanje teksta

HTML podržava osnovne stilove teksta kao što biste pronašli u programu Microsoft Word:

• oznake čine tekst odvažan.
• oznake (što znači “isticanje”) hoće štampati kurzivom tekst.

HTML također podržava starije oznaka za podebljane i za kurziv. Međutim, poželjno je koristiti gornje.

Ukratko, i pokažite kako nešto treba shvatiti, dok vam potonje oznake samo govore kako bi to trebalo izgledati. Te su bivše oznake dostupnije čitačima zaslona koje koriste slabovidni.

Stavak i druge podjele

HTML-a Oznaka vam omogućuje definiranje odjeljka dokumenta. Obično je to upareno s CSS-om (vidi dolje) radi oblikovanja odjeljka na određeni način.

U svoj dokument možete dodati zaglavlja i olakšati ga praćenje korištenjem

kroz

oznake. H1 je najvažnije zaglavlje, dok je H6 najmanje važan. Gotovo svaki MakeUseOf članak koristi H2 i H3 zaglavlja za organiziranje informacija.

udaranje Unesi dodavanje prijeloma redaka u vašem HTML dokumentu zapravo ih neće prikazati. Umjesto toga, možete koristiti
da biste dodali prijelom retka.

Evo primjera koji koristi sve sljedeće:

 
Primjer naslova
 
Ovo je jedan odlomak.
 
Ovo je sekunda
odlomak razdijeljen između dva retka.
  

4. korak: umetanje slika

Slike su vitalni dio većine web stranica. Možete ih lako dodati pomoću HTML-a i čak im postaviti drugačija svojstva.

Umetanje slike koristite

Ali sada, imamo puno više. CSS (Cascading Style Sheets) je jezik koji se koristi za opisivanje izgleda teksta koji ste pripremili u HTML-u. Sjetite se tag smo razgovarali? Unutar ove (i drugih oznaka) možete definirati a klasa atribut. Zatim u svoj prateći CSS dokument možete napisati upute za to klasa treba gledati.

Možete definirati ove elemente stila unutar vašeg HTML koda, ali to se smatra lošom praksom jer je mnogo teže održavati. Saznajte više s ovim jednostavnim primjerima CSS-a 10 Jednostavnih primjera CSS koda koji možete naučiti u 10 minuta 10 Jednostavnih primjera CSS koda koje možete naučiti u 10 minuta. Mi ćemo istražiti kako stvoriti inline tablicu stila kako biste mogli vježbati svoje CSS vještine. Zatim ćemo prijeći na 10 osnovnih primjera CSS-a. Odatle je vaša mašta granica! .

JavaScript

Vidjeli smo da HTML definira sadržaj i CSS određuje izgled. JavaScript, posljednji član trija od vitalnog značaja za web, omogućava web stranicama da reagiraju na akcije ljudi bez svakog učitavanja nove stranice.

Na primjer, JavaScript omogućava web mjestu da vas upozori da lozinka koju ste unijeli ne ispunjava njene zahtjeve prije nego što je pokušate poslati. Web dizajner može koristiti JavaScript da bi se kretao kroz slike u prezentaciji ili promicao korisnika za unos.

Ovo je samo nekoliko elementarnih primjera. JavaScript je skriptni jezik koji može učiniti puno, a relativno je složeniji od HTML-a i CSS-a. Pogledajte naš pregled JavaScript Što je JavaScript i kako funkcionira? Što je JavaScript i kako funkcionira? Što je Javascript? To je programski jezik koji se koristi za poboljšanje web stranica. To uključuje dinamičko ažuriranje web stranica, korisničkih sučelja i još mnogo toga. Zavirimo u ono o čemu se radi u Javascriptu. za puno više.

Gledajući cjelokupni opseg web dizajna izvan okvira ovog članka, ali dovoljno je reći da HTML komunicira s drugim jezicima kako bi stvorio web stranice koje danas poznajemo.

Evolucija HTML-a

Važno je napomenuti da HTML nije statičan. HTML je prošao kroz nekoliko revizija, od kojih je najnovija HTML 5. Značajno da ovaj standard podržava ugradnju izvornog videa, umjesto da se oslanja na vlasničke formate poput Adobe Flash.

Nove iteracije HTML-a također proglašavaju određene arhaične oznake povremeno zastarjelim. To uključuje grozne oznake poput i (koji se pomiče i flešuje tekst) obično viđen u dizajnu web stranica 1990-ih. Stoga imajte na umu da se standardi s vremenom mijenjaju.

Malo HTML znanja ide dug put

Kratko smo pregledali kako funkcionira HTML dokument. Sada znate osnove strukturiranja web stranica. Čak i ako ne nastavite s izradom web stranica, malo ste svjesniji interneta koji svakodnevno koristite.

Da biste saznali više, nadogradite svoje vještine za web razvoj osnovnim alatima. Nadogradite vještine za razvoj web stranica pomoću ovih 10 osnovnih alata. Nadogradite svoje vještine za razvoj web stranica s ovih 10 osnovnih alata. Jeste li spremni za početak izrade web stranica? Ovi internetski alati za nove i stručne web programere garantirano će poboljšati vaše vještine! a zatim pogledajte naš vodič o tome kako dizajnirati svoju prvu web stranicu Kako napraviti web stranicu: za početnike Kako napraviti web stranicu: za početnike Danas ću vas voditi kroz postupak izrade kompletne web stranice. Ne brinite ako ovo zvuči teško. Vodit ću vas kroz to na svakom koraku. .

Kreditna slika: Belyaevskiy / Depositphotos