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

Viber
zoom_plus zoom_minus bookmark

Uvod

Kao što smo videli u prethodnom nastavku, korišćenjem <div> elemenata (koji su podešeni preko odgovarajućeg CSS koda), nije teško definisati korektnu strukturu web stranice koju će browseri pravilno interpretirati.

Međutim, tokom razvoja internet tehnologija, postalo je bitno da HTML sadržaj bude: ne samo korektan i razumljiv ljudima - već i da bude formatiran tako da računarski programi koji se bave strukturom web stranica (pre svega, "roboti" koje koriste internet pretraživači, programi koji posećuju internet stranice i ocenjuju njihovu strukturu i sadržaj) - budu u stanju da što lakše protumače sadržaj ....

HTML 5 specifikacija - specijalizovani div tagovi

Da pojasnimo: 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 ("ljudskom") posmatraču već nakon otvaranja stranice, pa bez muke zapažamo gde su naslovi, navigacioni elementi, pasusi i svi ostali sadržaji - ali se zato programi koji pretražuju stranice ne mogu "pohvaliti" takvom sposobnošću uvida.

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

Ako pretpostavljate da bi roboti ("botovi") mogli da prepoznaju i namenu <div> elemenata po pripisanim id atributima (a ne samo hijerarhiju), niste daleko od istine, međutim - samo u tom smislu da je u današnje vreme veštačka inteligencija dovoljno razvijena da omogući takav poduhvat, ali ne i u smislu da bi kompanijama koje se bave proučavanjem internet saobraćaja zapravo "palo na pamet" da takvu ideju sprovedu u delo.

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

U praktičnom smislu, id-ovi pripisani <div> elementima mogi imati veoma raznolik sadržaj (pri tom, na svim mogućim svetskim jezicima).

Sledeća 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.

.... je logična i razumljiva, međutim, svaki od upotrebljenih id-ova je samo jedna od mogućnosti iz ogromnog niza mogućnosti koje nije praktično uzimati u obzir.

Na primer, ako smo mi za jedan od div elemenata izabrali id "navigacija", web dizajnerima sa drugih govornih područja bi takođe mogle da padnu na pamet slične ideje: "navigation" (engleski), "navigazione" (italijanski), "navigering" (švedski) i sl.

Prosto rečeno, postoji mnogo jednostavniji način da se razazna struktura stranice, umesto da se pretražuju: "svi" mogući obrasci - na "svim" mogućim jezicima.

Rešenje predstavlja standardizacija koja je došla sa 5. verzijom HTML jezika, sa kojom su uvedeni (već pomenuti) div elementi sa posebnim nazivima i unapred određenom namenom.

Osvrnućemo se, pre svega, na tagove <main>, <header>, <nav> i <footer>, najvažnije i najčešće korišćene HTML5 tagove, kao 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 izbegavamo upotrebu te odrednice zarad mlađih čitalaca.

Tagovi header, nav, main i footer

Pogledajmo kako možemo zapisati malopređašnju strukturu stranice 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 <nav> tagovi sa navigacionim linkovima ("početna", "o nama", "kontakt" i slično).

Tag <nav> ne koristi se samo "na vrhu stranice", već i na bilo kom drugom mestu gde postoji kolekcija navigacionih linkova prema drugim stranicama istog sajta.

Tag <footer> specifično je namenjen definisanju "podnožja" stranice, u koje 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

Da bismo upotpunili (HTML5) strukturu stranice, dodaćemo i <head> tagove, 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 HTML5 standardu (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. - Najosnovnija struktura (praznog) HTML dokumenta.

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.

U praksi (bez obzira na prethodno navedeno), navigacioni elementi i footer često (ipak) imaju pripisan id (pogotovo ako je datim 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 detaljnom analizom koda (slobodno proučite kod više puta, dok vam svi detalji ne budu jasni).

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

  • ponovo koristimo univerzalni selektor * da pristupimo svim elementima (naravno, samo za 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 (ovako nešto je, ne samo moguće, već i krajnje neophodno)
  • 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 pristupali metodom vezivanja selektora (nav a)

Za kraj, izdvojili smo još nekolicinu 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, postoji još nekoliko HTML5 tagova koji se koriste često.

Tagovi koje ćemo navesti u ovom odeljku nisu (baš) toliko "sveprisutni" kao prethodno navedeni 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 i te kako dobro dođu (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, 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, a inače na stranici možete zapaziti i većinu ostalih tagova koje opisujemo u ovom odeljku).

<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 (ti 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 uokireno 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 ste upravo pročitali.

<canvas>

Preko taga <canvas> mogu se definisati "platna" za iscrtavanje 2D grafičkih elemenata.

<figure> i <figcaption>

Tag <figure> definiše okvir koji sadrži sliku sa opisom a preko taga <figcaption> definisan je sam 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 5. - Primer upotrebe tagova figure i figcaption.

Ostali popularni tagovi

Da bismo upotpunili diskusiju o osnova HTML-a, pomenućemo još nekoliko često korišćenih tagova.

<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 6. - 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šeni delovi teksta (naizgled deluje kao da je upotrebljen tag <i>)
  • <strong> - posebno naglašeni delovi 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 samostalno kreiraju sajtove, moramo biti praktični i negde ipak podvući granicu (s tim što, naravno, 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.
Viber
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_sat Poslednja izmena: ----

trejler_dokument Jezici: HTML,
CSS

trejler_teg_zeleni Težina: 5/10

Uvod u web dizajn

1. deo - Početni koraci 2. deo - Klasa - Id - Interni i linijski CSS 3. deo - CSS Box i pseudoklase 4. deo - Tagovi div i span - Flex box 6. deo - Responzivni web dizajn 7. deo - Podešavanja editora i efikasna obrada teksta

Povezani članci

Uvod u Javascript i DOM Napredna Google pretraga Kako napraviti dobru lozinku Struktura web adresa i pristup internet stranicama Fontovi u web dizajnu Rad sa tekstualnim datotekama u programskom jeziku C JSON - tekstualni format za predstavljanje objekata Aritmetika velikih brojeva Šta je zapravo programiranje? BFS i DFS - Pronalaženje putanje kroz lavirint Aritmetika boja i režimi preklapanja u programima za obradu fotografija Ostali članci
If debugging is the process of removing software bugs, then programming must be the process of putting them in.
Edsger Dijkstra
codeBlog codeBlog
Projekat 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