nav_dugme codeBlog codeBlog
  • početna Početna stranica
  • Sačuvani članci Sačuvani članci
  • Učionica
  • Saveti
  • Zanimljivosti
  • Kontakt

Uvod u web dizajn - 5. deo - HTML 5 struktura i tagovi - Podela stranice

Facebook LinkedIn Twitter Viber WhatsApp E-mail
zoom_plus zoom_minus bookmark

Uvod

Kao i većina drugih računarskih jezika, HTML je tokom vremena prolazio kroz različite revizije, a sa najnovijom (petom) verzijom, uvedeno je nekoliko specijalizovanih <div> tagova sa posebnim nazivima i unapred pripisanim značenjem.

Svrha novih tagova je - povećanje preglednosti HTML koda (i lakše prepoznavanje uloge različitih elemenata stranice), a pitanje koje se prirodno postavlja pri prvom susretu sa pomenutim HTML5 tagovima je: da li postoji prava potreba za specijalizovanim <div> tagovima, budući da smo videli u prethodnom nastavku da se korišćenjem <div> elemenata (koji su podešeni preko odgovarajućeg CSS koda), sasvim uspešno može definisati korektna struktura web stranice i prikazati na pregledan i vizuelno dopadljiv način.

Ukratko o preglednosti HTML koda

Problematika preglednosti može se svesti na dva glavna pitanja:

  • kako omogućiti programerima i web dizajnerima (korisnicima "ljudskog roda"), da što lakše razaznaju strukturu sajtova
  • kako omogućiti računarskim programima - da obave isti zadatak

Što se tiče programa, mislimo pre svega na tzv. "robote", specijalizovane programe koje internet pretraživači koriste zarad analize web stranica (pri čemu pravilna struktura sajtova povoljno utiče na rang koji će sajt imati pri pokretanju pretrage).

Programi prepoznaju strukturu stranice preko tekstualnih obrazaca i svakako su u stanju da razaznaju hijerarhiju elemenata (koja, kao što znamo, u praktičnom smislu predstavlja - stablo).

U današnje vreme, postoji i tehnologija koja omogućava da se prepozna smisao <div> elemenata, shodno pripisanim id-ovima, ali se u praksi ipak očekuje od programera i web dizajnera da koriste optimalnu HTML strukturu.

Pogledajmo jednostavan primer koji potcrtava ono što smo do sada naveli ....

Primer HTML strukture - bez HTML5 tagova

Možemo reći da sledeća (vrlo jednostavna), HTML struktura ....

		
<body>
	<div id='okvir'>
		<div id='navigacija'>
		</div>

		<div id='centralni'>
		</div>

		<div id='footer'>
		</div>
	</div>
</body>
		
	
Slika 1. - Najosnovnija struktura (praznog) HTML dokumenta.

.... sama po sebi deluje veoma jasno i razumljivo (i recimo da bismo lako mogli zamisliti kako bi stranica koja je definisana preko gornjeg koda, uz dodatak odgovarajućeg CSS, mogla izgledati kada se otvori u browseru).

Međutim, da li smo (skroz) sigurni da bismo bili u stanju da razumemo istovetnu strukturu <div> elemenata, kojima je neko drugi dodelio id-ove (pogotovo ako bi id-ovi pripadali nekom drugom prirodnom jeziku)?!

Na primer, <div> element sa tri unutrašnja <div> elementa (struktura kakvu vidimo na gornjoj slici), mogao bi - sa drugačijim id-ovima na nekom drugom jeziku * - predstavljati i navigacionu traku sa tri linka (kao i mnoge druge strukture).

* Osim toga što je potrebno uvažiti nekoliko osnovnih tehničkih karakteristika, id-ovi mogu biti krajnje proizvoljni.

Ako raspoznavanje obavlja računar, u obzir mora biti uzet izrazito velik broj reči, na (makar potencijalno), svim svetskim jezicima, pa tako, ako smo mi za jedan od <div> elemenata izabrali id "navigacija", web dizajnerima sa drugih govornih područja bi mogli da padnu na pamet id-ovi kao što su: "navigation" (engleski), "navigazione" (italijanski), "navigering" (švedski) i sl.

Ljudi ne mogu razumeti sve jezike, web pretraživači "ne gledaju blagonaklono" na sajtove sa nepreglednom HTML strukturom (i neće se pri rangiranju stranica previše truditi da razumeju "šta smo hteli da kažemo" preko generičkih <div> elemenata), pa rešenje predstavlja upravo - standardizacija koja je došla sa 5. verzijom jezika HTML (sa kojom su uvedeni, ranije pomenuti, <div> elementi sa posebnim nazivima i unapred određenom namenom).

HTML 5 specifikacija - specijalizovani div tagovi

Zarad upoznavanja sa HTML5 tagovima, osvrnućemo se (u ovom članku), pre svega na tagove <main>, <header>, <nav> i <footer> - najvažnije i najčešće korišćene HTML5 tagove, ali svakako i na nekolicinu drugih zanimljivih tagova.

Stručni naziv za tagove sa unapred pripisanim značenjem je: "semantički tagovi", ali, trudićemo se da u daljem tekstu izbegnemo upotrebu navedene odrednice zarad mlađih čitalaca.

Tagovi header, nav, main i footer

Pogledajmo kako se malopređašnja struktura stranice može zapisati uz korišćenje HTML5 tagova ....

		
<body>
	<div id='okvir'>
		<header>
			<nav>
			</nav>
		</header>

		<main>
		</main>

		<footer>
		</footer>
	</div>
</body>
		
	
Slika 2. - Najosnovnija struktura (praznog) HTML dokumenta - definisana preko HTML5 tagova.
  • Tag <header> opisuje gornji deo stranice u koji se tipično smeštaju logotip sajta i <nav> tagovi sa navigacionim linkovima ("početna", "o nama", "kontakt" i slično).
  • Tag <nav> koristi se kao okvir za kolekciju navigacionih linkova prema drugim stranicama sajta (najčešće, na vrhu stranice, ali često i na drugim mestima).
  • Tag <footer> specifično je namenjen definisanju "podnožja" stranice, u koje se tipično smeštaju: kratak opis sajta (odnosno, firme/preduzeća čiji sajt posmatramo), kontakt informacije, nekoliko najvažnijih navigacionih linkova, linkovi ka pravilniku korišćenja i druge srodne informacije.
  • Tag <main> namenjen je centralnom delu stranice koji "nosi" glavni sadržaj.

Struktura stranice je sada univerzalna i lako je razumeti šta je prava namena pojedinačnih elemenata (odnosno tagova).

Definisanje finalne strukture stranice

Da bismo upotpunili (HTML5) strukturu stranice, dodaćemo i tagove <head>, kao i uokvirujuće <html> tagove.

Ali, pre svega (doslovno - pre ostatka sadržaja), navešćemo direktivu <!DOCTYPE html> sa kojom smo se već susretali, preko koje se browseru sugeriše da je stranica formatirana po standardu HTML5 (i da je tako treba interpretirati).

		
<!DOCTYPE html>

<html>
	<head>
		<meta charset='UTF-8'/>
		<title>Web dizajn 5</title>
		<link rel='stylesheet' href='stil.css'>
	</head>

	<body>
		<div id='okvir'>
			<header>
				<img id='nav_logo' src='/slike/logo.png' alt='logo' title='logo'/>

				<div id='nav_razdvajac'>
				</div>

				<nav>
					<a href='index.html'>Početna</a>
					<a href='o_nama.html'>O nama</a>
					<a href='kontakt.html'>Kontakt</a>
				</nav>
			</header>

			<main>
				<h1>Naslov stranice</h1>
				
				<p>
					Prvi pasus
				</p>
				
				<p>
					Drugi pasus
				</p>
			</main>

			<footer>
			</footer>
		</div>
	</body>
</html>
		
	
Slika 3. - Dopunjen primer HTML strukture, sa HTML5 tagovima i id-ovima.

Specijalizovanim tagovima koje smo koristili možemo pripisivati i id-ove (naravno i klase), ali, u slučaju jednostavnih sajtova, možemo čak i izbeći upotrebu id atributa i pisati CSS selektore koji se direktno obraćaju navedenim HTML elementima.

Međutim, u praksi (bez obzira na prethodno navedeno), navigacioni elementi i footer najčešće (ipak) imaju pripisan id (pogotovo ako je elementima potrebno pristupati preko JavaScript-a).

Prethodno definisanoj HTML strukturi, može se pripisati sledeći CSS kod:

		
* {
	margin:          0;
	padding:         0;
	font-family:     Arial, sans-serif;
	text-decoration: none;
}

#okvir {
	width:           100vw;
	height:          100vh;
	
	display:         flex;
	flex-direction:  column;
	justify-content: flex-start;
	align-items:     stretch;
}

header {
	height:          60px;
	background:      #707070;

	display:         flex;
	flex-direction:  row;
	justify-content: flex-start;
	align-items:     center;
}

nav {
	display:         flex;
	flex-direction:  row;
	justify-content: flex-start;
	align-items:     stretch;

	margin-right:    20px;
}

#nav_logo {
	width:  24px;
	height: auto;
	margin: 0 0 0 18px;
}

#nav_razdvajac {
	flex: 1;
}

nav a {
	color:       #ffffff;
	font-weight: bold;
	margin:      0 24px 0 0;
}

main {
	flex:    1;
	padding: 10vh 30vw 10vh 30vw;

	display:         flex;
	flex-direction:  column;
	justify-content: flex-start;
	align-items:     stretch;
}

footer {
	height:      100px;
	background:  #999999;
}
		
	
Slika 4. - CSS kod koji se povezuje sa HTML kodom sa prethodne slike.

Dodatna objašnjenja

Iako stranica koju smo definisali, ni izdaleka nije komplikovana, pozabavićemo se detaljnijom analizom (slobodno proučite kod više puta, dok vam svi detalji ne budu sasvim jasni).

Navodimo detalje na koje treba obratiti najviše pažnje:

  • ponovo koristimo univerzalni selektor *, da pristupimo svim elementima (naravno, univerzalni selektor sadrži samo atribute opšteg tipa)
  • unutar flex kontejnera "okvir", elementi <header> i <footer> imaju zadatu fiksnu visinu, dok se element <main> (posredstvom parametra flex), širi i skuplja
  • elementi <header> i <main> su (kao što smo videli), flex elementi kontejnera "okvir", ali su, sami za sebe, takođe i flex kontejneri (odnosno, nosači za svoje unutrašnje elemente; a tako nešto je, ne samo moguće, već i krajnje neophodno - i naravno, vrlo praktično)
  • unutar taga <header>, zapažamo tri elementa: sliku, prazan <div> i <nav> element sa linkovima, a svrha navedenog praznog <div> elementa, je da se širi i skuplja tako da "otera" sliku levo, a <nav> element sa linkovima desno
  • budući da <nav> element nema eksplicitno zadate dimenzije (niti atribut flex), njegove dimenzije prilagodiće se sadržaju
  • visina slike (nav_logo) nije zadata eksplicitno, već je korišćena vrednost auto, čime smo postigli da se visina slike proporcionalno prilagodi širini
  • navigacionim linkovima smo u CSS-u pristupali metodom vezivanja selektora (nav a)

Za kraj, izdvojili smo još nekoliko popularnih tagova koji su vredni pažnje pri početnom upoznavanju sa HTML-om.

Drugi popularni HTML5 tagovi

Pored tagova <main>, <header>, <nav> i <footer> koji su (praktično) neizostavan deo modernog web dizajna (odnosno, još praktičnije - velike većine modernih sajtova), postoji još nekoliko HTML5 tagova koji se koriste često, pa ćemo im posvetiti pažnju.

HTML5 tagovi koje ćemo navesti u nastavku nisu (baš) toliko "sveprisutni" kao osnovni HTML5 tagovi koje smo ranije opisali i na mnogim krajnje adekvatno dizajniranim sajtovima (jednostavno rečeno) nema potrebe za njima.

Ali, u pitanju su tagovi koji se koriste često i (i te kako) doprinose ''čitljivosti' strukture sajtova (kao što ćete i sami zaključiti).

<article>

Preko taga <article> uokviruju se zaokružene celinu u HTML kodu, kao što su (na primer) pojedinačni oglasi na sajtovima sa oglasima, pojedinačne poruke u chat aplikacijama (ili na forumima) i naravno, kako samo ime taga navodi, tekstualni članci (kao na primer članak koji trenutno čitate).

Na stranici koju trenutno čitate, možete zapaziti i većinu drugih HTML5 tagova koje opisujemo.

<section>

Tag <section> definiše odeljak stranice koji predstavlja - u organizacionom smislu - zaokruženu celinu koja obuhvata grupu elemenata koji su sami po sebi zaokružene celine (takvi unutrašnji elementi ne moraju biti definisani preko tagova <article>, ali, često jesu).

Na primer:

  • na sajtu sa auto-oglasima, jedan oglas uokviren je tagovima <article>, dok je više povezanih oglasa, uokvireno tagovima <section>
  • na online forumu, jedna poruka smešta se unutar tagova <article>, dok se cela diskusija (sve poruke), smešta unutar tagova <section>

<aside>

Preko taga <aside> definišu se sporedni odeljci stranice sa informacijama koje su vezane za glavni sadržaj, a tagovi <aside> često se koriste i za uokviravanje usputnih napomena unutar pasusa, ili između pasusa.

.... kao što je (na primer) napomena koju upravo čitate.

<canvas>

Preko taga <canvas> ....

		
<canvas id='canvas_1'>
</canvas>
		
	
Slika 5. - Tag <canvas>, preko koga se definišu (virtuelna) platna za iscrtavanje grafičkih elemenata.

.... uz malo CSS-a ....

		
#canvas_1 {
	border:        solid 1px #5599ff;
	border-radius: 12px;
	background:    #fcfcfd;
}
		
	
Slika 6. - CSS kod za <canvas> element sa prethodne slike.

.... i JavaScript-a * ....

		
let cnv = document.getElementById("canvas_1");
let ctx = cnv.getContext("2d");

ctx.beginPath();
ctx.arc(45, 40, 25, 0, 2 * Math.PI);
ctx.stroke();
	
// Sami dodajte preostale dve kružnice
		
	
Slika 7. - JS kod za iscrtavanje kružnica.

.... mogu se definisati "platna" za iscrtavanje 2D grafičkih elemenata.

U gornjem primeru, koristili smo JavaScript, jer iscrtavanje na <canvas> elementima nije moguće bez JavaScript-a (a sa druge strane, red je da u članku pomenemo i bar jedan ponešto "egzotičniji" HTML5 tag). JS kod smo pisali direktno unutar HTML tagova, tako da - ukoliko želite - možete samostalno probati primer i pre nego što se 'zvanično' posvetimo uvodu u JavaScript, u nekom od narednih članaka (vodite samo računa o tome, da se <script> tagovi pojave posle <canvas> tagova).

<figure> i <figcaption>

Tag <figure> definiše okvir koji sadrži sliku sa opisom: preko taga <img> definisana je sama slika, a preko taga <figcaption>, definiše se opis slike.

Bez pravih semantičkih tagova, ne bi bilo lako razumeti da li se određeni opis odnosi na određenu sliku (ili treba da stoji samostalno).

		
<figure>
	<img src='slika.png' alt='figure i figcaption'/>
	<figcaption>
		Slika 12. - Primer upotrebe tagova figure i figcaption.
	</figcaption>
</figure>
		
	
Slika 8. - Primer upotrebe tagova figure i figcaption.

Ostali popularni tagovi

Da bismo upotpunili diskusiju o osnovama HTML-a, pomenućemo još nekoliko često korišćenih tagova (koji su deo HTML-a duži niz godina unazad i pojavili su se pre HTML5 specifikacije).

<pre>, <code> i <samp>

Za pravilan prikaz programskog koda na sajtovima, koristi se kombinacija tagova <pre>, <code> i <samp>, kao što ste do sada mnogo puta mogli videti na našim stranicama:

		
let a = [ 1, 2, 3 ]
// .... ali, niz je tu samo za ukras;
// zapravo govorimo o HTML tagovima
		
	
Slika 9. - Primer upotrebe tagova pre i code.
  • Tag <pre> ("preformated") obezbeđuje da tekst unutar taga bude prikazan u browseru, doslovno onako kako je napisan u izvornoj datoteci (podsetimo se da inače interpretacija HTML koda unutar tagova kao što su <p>, <div> i sl, podrazumeva da će znaci za prelazak u novi red, kao i višestruke uzastopne pojave ostalih whitespace znakova - biti zanemarene).
  • Tagovi <code> i <samp> su (praktično) semantički tagovi, koji označavaju delove programskog koda (code) i simulirani rezultat izvršavanja programa u konzoli (samp).

<q> (quote)

Za označavanje citata u HTML kodu, koristi se tag <q> (quote), semantički tag koji automatski dodaje znake navoda.

Sledeći odeljak sadrži citat uokviren <q> tagovima (koji se nalaze unutar tagova <aside>):

What we do in life, echoes in eternity!

<em>, <strong> i <mark>

Za posebno označavanje pojedinih reči ili celina u pasusima (kao i drugim elementima), koriste se sledeći tagovi:

  • <em> - naglašavanje delova teksta (naizgled deluje kao da je upotrebljen tag <i>)
  • <strong> - posebno naglašavanje delova teksta (naizgled deluje kao da je upotrebljen tag <b>)
  • <mark> - markiranje teksta bojom

Bez posebnih semantičkih tagova, moguće je postići da određeni delovi teksta izgledaju naglašeno, ali, programi za prepoznavanje strukture stranice i sadržaja, takvom tekstu neće pripisati nikakvo posebno značenje.

<sub> i <sup>

Za zapis indeksa i eksponenata koriste se tagovi <sub> (subscript) i <sup> (superscript).

Sledeći koraci ....

Pre svega, ponovimo da HTML 5 tagova svakako ima više nego što je u članku navedeno, ali, budući da naš serijal članaka o web dizajnu ne pretenduje da bude enciklopedija internet jezika (već da čitaocima pomogne da dobrao razumeju tematiku i samostalno kreiraju prve sajtove), moramo biti praktični i negde ipak 'podvući granicu' (s tim što, u budućnosti svakako možete očekivati još članaka na temu osnovne HTML strukture i naravno, članke o izradi web stranica u opštem smislu).

Primere gotove stranice možete pronaći na sledećoj adresi:

Web dizajn 05 - primer

.... a u sledećem članku ćemo se baviti responzivnim web dizajnom.

Autor članka Nikola Vukićević Za web portal www.codeblog.rs
Napomena: Tekstovi, slike, web aplikacije i svi ostali sadržaji na sajtu www.codeblog.rs (osim u slučajevima gde je drugačije navedeno) predstavljaju intelektualnu svojinu autora sajta www.codeblog.rs i zabranjeno je njihovo korišćenje na drugim sajtovima i štampanim medijima, kao i bilo kakvo drugo korišćenje u komercijalne svrhe, bez eksplicitnog pismenog odobrenja autora.
© 2020-2023. Sva prava zadržana.
Facebook LinkedIn Twitter Viber WhatsApp E-mail
početna Početna > Članci > Uvod u web dizajn - 5. deo - HTML 5 struktura i tagovi - Podela stranice

Info & povezani članci Info o članku - dugme

Info

trejler_sat Datum objave: 03.10.2020.

trejler_olovka Poslednja izmena: 03.11.2021.

trejler_dokument Jezici: HTML,
CSS

trejler_teg_narandzasti Težina: 5/10

Povezani članci

Povezani članci

Svi članci
Computers are getting smarter all the time. Scientists tell us that soon they will be able to talk to us. And by ‘they’, I mean ‘computers’. I doubt scientists will ever be able to talk to us.
Dave Barry
codeBlog codeBlog
Sajt posvećen popularizaciji kulture i veštine programiranja.
Napomena: Tekstovi i slike na sajtu www.codeblog.rs (osim u slučajevima, gde je drugačije navedeno) predstavljaju intelektualnu svojinu autora sajta www.codeblog.rs i zabranjeno je njihovo korišćenje na drugim sajtovima i štampanim medijima, kao i bilo kakvo drugo korišćenje u komercijalne svrhe, bez eksplicitnog odobrenja autora.
© 2020-2023. Sva prava zadržana.
Facebook - logo
Instagram - logo
LinkedIn - logo
Twitter - logo
E-mail
Naslovna
   •
Uslovi korišćenja
   •
Obaveštenja
   •
FAQ
   •
Kontakt