Kako napraviti web sajt - 5. deo - HTML 5 struktura i tagovi - Podela stranice

Uvod

Kao što smo videli u prethodnom nastavku (iako je to bila samo proba), korišćenjem div elemenata uz dodatak odgovarajućeg CSS-a, možemo definisati strukturu stranice.

Međutim, negde usput, tokom razvoja internet tehnologija, postalo je bitno da HTML sadržaj bude razumljiv, ne samo ljudima, već i računarskim programima koji se bave strukturom HTML-a (pre svega, tu mislimo na "robote" koje koriste internet pretraživači, programe koji posećuju internet stranice i ocenjuju njihov sadržaj).

HTML 5 specifikacija - specijalizovani div tagovi

Zašto najčešće (ipak) nećemo koristiti obične div tagove

Struktura div elemenata i njihova međusobna povezanost (uz preduslov da je struktura korektna i povezanost logična), u većini slučajeva postaje jasna posmatraču već nakon otvaranja stranice (bez muke zapažamo gde su: naslovi, navigacioni elementi pasusi i svi ostali sadržaji), ali, programi koji pretražuju stranice, ne mogu se pohvaliti ovakvom (tipično ljudskom) sposobnošću uvida.

Ako pretpostavite da takvi programi mogu div elemenate prepozna(va)ti po pripisanim id atributima, bićete u pravu. Međutim - samo teoretski. U praktičnom smislu, budući da navedeni id-ovi mogi imati veoma raznolik sadržaj (pri tom, na svim mogućim svetskim jezicima), pomenuti "roboti" ne pišu na naveden način.

Ovakva HTML struktura ....

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

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

		<div id='footer'>
		</div>
	</div>
</body>

Slika 3. - Najosnovnija struktura (praznog) HTML dokumenta.

.... je logična i razumljiva, međutim, navedeni id-ovi samo su jedna u ogromnom nizu mogućih kombinacija, koje nije praktično pretraživati.

Rešenje je u standardizaciji koja je došla sa 5. verzijom HTML jezika, sa kojom su uvedeni (već pomenuti) div elementi sa zasebnim nazivima i određenom namenom (stručni naziv za ovakve elemente je "semantički tagovi", ali, gledaćemo da izbegnemo upotrebu te odrednice zarad mlađih čitalaca).

U ovom članku, osvrnućemo se na tagove "header", "nav", "main" i "footer" (elemente koji su ipak, po svim drugim tehničkim karakteristikama, zapravo samo obični div elementi).

Tagovi header, nav, main i footer

Pogledajmo sada kako možemo, uz HTML5 tagove, zapisati malopređašnju strukturu stranice ....

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

		<main>
		</main>

		<footer>
		</footer>
	</div>
</body>

Slika 3. - Najosnovnija struktura (praznog) HTML dokumenta.

Tag <header> opisuje gornji deo stranice u koji se tipično smeštaju <nav> tagovi sa navigacionim linkovima ("početna", "o nama", "kontakt" i slično), dok je tag <footer> specifično namenjen donjem delu stranice, u koji se tipično smeštaju: kratak opis 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.

Definisanje finalne strukture stranice

Dodaćemo sada i head tagove, kao i uokvirujuće html tagove, da bismo upotpunili HTML 5 strukturu, ali, pre svega (bukvalno), navešćemo direktivu "<!DOCTYPE html>" (koja vam je poznata od ranije), kojom se zapravo sugeriše programu koji pregleda stranicu, da treba da je čita po HTML 5 standardu.

									
<!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. - Najosnovnija struktura (praznog) HTML dokumenta.

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

U našem slučaju, CSS kod izgledaće ovako:

									
*{
	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 3. - Najosnovnija struktura (praznog) HTML dokumenta.

Dodatna objašnjenja

Iako primer nije ni izdaleka previše komplikovan, ovde je neophodno da se čitaoci detaljno pozabave analizom programskog koda (proučite ga slobodno više puta, dok vam svi detalji ne budu jasni).

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

Ponovo koristimo univerzalni selektor "*", da pristupimo svim elementima (naravno, samo za opšte parametre, kao što smo radili i prošlog puta)
U okviru 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. Ovo ne samo da je moguće, nego je (reklo bi se) i krajnje neophodno
U elemetu header, zapažamo tri elementa: sliku, prazan div i nav element sa linkovima. Svrha navedenog praznog diva 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". Ovim smo postigli da se visina slike proporcionalno prilagodi širini, čime mnogo lakše možemo sliku povećati ili smanjiti po potrebi.
Navigacionim linkovima pristupali smo putem vezivanja selektora "nav a"

Zaključak

HTML 5 tagova svakako ima više nego što je ovde navedeno, ali, budući da naš serijal članaka ne pretenduje da bude enciklopedija internet jezika, već da vas nauči da samostalno kreirate sajtove, moraćemo biti praktični i negde (nažalost) ipak podvući granicu (s tim što, naravno, u budućnosti svakako možete očekivati još članaka na temu web dizajna).

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

Web dizajn 05 - primer

.... a preostala dva članka iz serijala o web dizajnu posvetićemo responzivnom web dizajnu i tekstualnim editorima i efikasnoj obradi teksta.