Vzorec kode HTML: Osnove spletnega razvoja

HTML je brez pretiravanja glavni jezik interneta, rojen s tem. Njegova odgovornost vključuje osnovno oblikovanje spletnih strani, njihovo logično strukturiranje in oblikovanje. Ni potrebe, da bi daleč za primere HTML, samo odprite brskalnik. Vsako prikazano spletno mesto je HTML, ki ga iščete. Če ga želite bolje spoznati, si oglejte konzolo za razvijalce.

Za kulisami interneta

Odprite priljubljeno spletno mesto v brskalniku Google Chrome. Ta brskalnik ima najprimernejši razvojni panel, zato je idealen za učenje.

Če želite hitro priti do plošče, pritisnite vročo tipko F12 na tipkovnici. Če iz nekega razloga to ni uspelo, v meniju brskalnika poiščite potreben element in ga izberite tako, da kliknete »Dodatna orodja«> »Orodja za razvijalce«.

Odpre se nova plošča z več zavihki, od katerih potrebujemo prvo - Elementi. Tukaj je opisana celotna HTML koda trenutne strani.

Struktura dokumenta HTML

S pomočjo plošče je možno na živo sliko ugotoviti, kako je urejeno mesto, da bi videli njene komponente. Pomembno je razumeti, da končni videz ne zagotavlja le oznaka HTML, temveč tudi slogi, opisani z uporabo CSS. Na zavihku Elementi lahko vidite samo osnovno strukturo.

Vse komponente strani so urejene v hierarhičnem vrstnem redu. Vgnezdene elemente si lahko ogledate s puščicami.

Celotna stran HTML je na primer ovita v blok z imenom HTML, znotraj katerega so nameščeni zabojniki za glavo in telo. Če jih razširite, lahko v notranjosti najdete še več nivojev elementov z različnimi imeni.

Vsega v razdelku glave brskalnik ne prikaže. Edina izjema je naslovna vrstica, ki je prikazana na zavihku. V "glavi" spletnega mesta so informacije o storitvah, potrebne za pravilno delovanje internetnega brskalnika.

Nasprotno pa so vsebine dela telesa vidne uporabniku. Konzola za razvijalce vam celo omogoča, da natančno vidite, kje se posamezni blok nahaja na strani. To naredite tako, da na njem premaknete kazalec.

Posnetek zaslona prikazuje, kako izstopa navigacijska vrstica:

Na vrhu je tudi element DOCTYPE. Navaja tudi podatke o storitvah.

Oznake in njihovi atributi

Kratica HTML pomeni dobesedno »Hypertext Markup Language«. To pomeni, da je vsaka spletna stran samo besedilo, označeno na določen način. Za oblikovanje so uporabljeni posebni elementi - oznake (deskriptorji).

Da bi razlikovali oznako od samega besedila, je zaprta v kotnih oklepajih. Na primeru HTML kode lahko vidite različne oznake: html, head, body, header, div. Dve vrsti sta:

• Zapiranje oznak z vsebino ima dva dela in besedilo med njimi. Deskriptor glave je na primer mogoče zapreti. Drugi del se od prvega razlikuje po prisotnosti poševnice naprej pred imenom oznake.
• Oznake brez zaprtja brez vsebine so sestavljene samo iz enega dela. Primer je metaoznaka.

Upoštevajte, da se lahko deskriptorji HTML med seboj vdelujejo. Izjema so nezaprite oznake, ki nimajo vsebine, zato v njih ni mogoče vstaviti ničesar.

Pomembno je, da sledite končnemu vrstnemu redu. V konzoli lahko vidite, kako skrbno so ugnezdeni ročaji. Zunanji element se ne more zapreti pred notranjim.

Vsaka oznaka ima lahko številne parametre (atribute), ki določajo njegove lastnosti. V HTML-ju je primer deskriptor hiperpovezave a in njegov atribut href, ki vsebuje naslov strani, na katero se bo povezava vzpostavila ob kliku povezave.

HTML za učenje vizualnega učenja

Za začetnike spletnih oblikovalcev, spletnih razvijalcev in samo ljudi, ki se zanimajo za osnove internetne tehnologije, je učenje HTML prvi korak na dolgem, zanimivem potovanju. Obstaja na stotine tečajev in učbenikov, ki predstavljajo informacije na najrazličnejše načine. Izberite med njimi primerne ni težko.

Ne glede na to, kako dober je učbenik, sta za uspeh potrebni še dve komponenti:

• izkušnje z neodvisnim tipiziranjem;
• preučevanje HTML primerov drugih ljudi.

Konzola razvijalca v priljubljenih brskalnikih (poleg brskalnika Google Chrome, ki je na voljo v Mozilla Firefoxu in Internet Explorerju) je najboljši način za raziskovanje spletnih strani. Omogoča vam, da obvladate osnovne vzorce postavitve, se naučite videti končno predstavitev kode in celo dinamično spreminjate njeno kodo.