Edit in JSFiddle

<h1>Hiperveze u okviru jednog dokumenta</h1>
<p>Najjednostavnije hiperveze ili linkovi referišu na druge delove dokumenta u kome se nalaze. Sledeći primer (odlomak iz Nušićeve <span class='naslov_dela'>Autobiografije</span>) ima dve hiperveze. Prva hiperveza se nalazi na početku odlomka i predstavlja referencu na njegov kraj, dok se druga hiperveza nalazi na kraju odlomka i predstavlja referencu na njegov naslov. Odlomak je namerno na ćiriličnom pismu da bi se u HTML-zapisu lakše uočilo kako se hiperveze kreiraju.</p>


<h3>Бранислав Нушић</h3>
<h2><a id='naslov_odlomka'>Аутобиографија</a></h2>
<h3>(одломак из поглавља Страни језици; пређите на <a href='#kraj_odlomka'>крај одломка</a> )</h3>


<p>Немачки језик већ нам је ишао нешто теже, а савладали смо га једино благодарећи околности што смо имали професора који нам је необично лепо умео да објасни многе ствари које би нам иначе биле нејасне. </p>
<p>Примера ради само, да наведем како нам је лепо и разумљиво објаснио шта значи у немачком језику: помоћни глагол: </p>
<p>— Помоћни глагол, децо, то је онај глагол који помаже главном. На пример, ја копам виноград и онда ја сам глагол graben, дакле: іch grabe. Јест, ал' graben не може да стигне да окопа сам виноград, кратак дан па не може да стигне. Шта ће, како ће, него 'ајд' да позове свога комшију habena. Вели му: „Учини ми толико, комшија haben, помози ми да окопамо виноград!“ На ben, као добар комшија, пристане и онда запну на рад заједно, и то је онда іch habe gegraben. Haben је дакле у овоме случају помоћни глагол, то јест глагол који је притекао у помоћ grabenu. Јест, али није био само онда кратак дан кад је graben окопавао виноград; има још кратких дана у години. Тако опет једном приликом има graben да окопа кукуруз, па запео, запео, али не може да стигне. Кратак дан па не може да стигне. Шта ће, шта ће, домишља се он, јер не бива да опет зове habena, пошто му је он већ једанпут учинио љубав и помогао му окопати виноград. Тад се сети graben да зовне другога комшију werdena. А werden, неки добар човек, па се и он одазове молби и дође своме комшији у помоћ и запну заједно да раде, и то је онда іch werde graben. Werden је дакле у овоме случају тако исто помоћни глагол. Јесте ли добро разумели, децо? </p>
<p>— Разумели смо! — одговарамо ми једногласно, јер одиста смо необично добро разумели ово објашњење. </p>
<p>Када је, на пример, идућег часа професор запитао Сретена Јовића шта су то помоћни глаголи у немачком језику, он је, са дубоким уверењем да је објашњење потпупо разумео, одговорио: </p>
<p>— Помоћни глаголи, то су комшије. Кад неко не може сам да сврши окопавање винограда, то он зовне комшију па га замоли и овај пристане, те заједно окопају виноград. Други пут, кад опет не може да сврши окопавање кукуруза, а он зовне другог комшију па му он помогне. Према томе, сваки помоћни глагол на немачком језику јесте комшија. </p>
<p>— Па добро, Сретене, кажи ти мени — вели му професор — кога ћеш ти да зовнеш у помоћ кад не знаш лекцију? </p>
<p>— Комшију Живка! — одговара Сретен. </p>
<p>— Овога Живка што седи до тебе у клупи? </p>
<p>— Јесте! </p>
<p>— А како ти он може помоћи? </p>
<p>— Да ми шапне. </p>
<p>— Шта да ти шапне? </p>
<p>— Оно што не знам. </p>
<p>— И онда би Живко био теби помоћни глагол? </p>
<p>— Јесте. </p>
<p>— Е па хајде ти, помоћни глаголе, устани и шапни да чујемо сви. Реци, дакле, шта је оно главно што је Сретен заборавио да каже? </p>
<p>— Заборавио је, — устаје Живко — заборавио је да каже да је био кратак дан и зато онај човек није могао да стигне да окопа виноград. </p>
<p><a id='kraj_odlomka'>Крај одломка</a></p>
<p>Вратите се на <a href='#naslov_odlomka'>наслов одломка</a>.</p>

<h2>Sidra i hiperveze na sidra</h2>

<p>Da bi uopšte moglo da se referiše na neki određeni deo dokumenta, taj deo dokumenta mora da poseduje <span class='novi_pojam'>sidro</span> (eng. <span class='strani_pojam'>anchor</span>). HTML-element za kreiranje sidra se naziva <span class='html_element'>a</span>, kao skraćenica od engleske reči <span class='strani_pojam'>anchor</span>. Istovremeno se isti element koristi i za kreiranje hiperveza, odnosno linkova. Atributi <span class='html_atribut prevazidjeno'>name</span>, <span class='html_atribut'>id</span> i <span class='html_atribut'>href</span>  elementa <span class='html_element'>a</span> određuju da li će element predstavljati samo sidro, samo hipervezu ili oba.</p>

<p>Ako element <span class='html_element'>a</span> sadrži atribut <span class='html_atribut prevazidjeno'>name</span> ili atribut <span class='html_atribut'>id</span>, element predstavlja sidro. Ako element <span class='html_element'>a</span> sadrži atribut <span class='html_atribut'>href</span>, element predstavlja hipervezu, odnosno link.</p>

<p>Uloga atributa <span class='html_atribut prevazidjeno'>name</span> ili <span class='html_atribut'>id</span> je da sidru pridruže jedinstveno ime, odnosno identifikator, u okviru stranice. Atribut <span class='html_atribut prevazidjeno'>name</span> se više koristio u ranijim verzijama HTML-a, dok ga je u verziji HTML5 zamenio atribut <span class='html_atribut'>id</span>, s obzirom da nema potrebe da se koriste dva različita atributa u istu svrhu, a uz to se i vrednost atributa <span class='html_atribut'>id</span> često primenjuje kao selektor u CSS-u (na primer pravilo sa selektorom #naslov_odlomka).</p>

<p>Hiperveza referiše na sidro tako što kao vrednost atributa <span class='html_atribut'>href</span> koristi ime ili identifikator sidra ispred kog se obavezno navodi karakter #.</p>

<p>Ako sidro nije formatirano na poseban način, korisnik ne može da odredi gde su sidra u prikazu stranice. Sadržaj elementa <span class='html_element'>a</span> može da bude običan tekst ili neki drugi HTML-element. Taj sadržaj u slučaju sidra predstavlja mesto na koje se može referisati preko hiperveze, tj. ako se klikne na link koji referiše na sidro, prikaz stranice se menja tako što se fokus prebacuje na sadržaj sidra.</p>

<p>Ovaj tekst ujedno ilustruje i primenu elementa <span class='html_element'>span</span> i CSS-klasa radi semantičkog formatiranje teksta, kao i mogućnost da se na isti element primeni više klasa (html_element i prevazidjeno). Tako su u ovom tekstu korišćene posebne klase za formatiranje novih i stranih pojmova u tekstu, HTML-elemenata i atributa, kao i naslova književnih dela. Iako semantičko formatiranje izgleda komplikovanije u odnosu na isti efekat koji pruža fizičko formatiranje, prava prednost se postiže tek kada poželimo da ažuriramo prikaz pojedinih klasa. U slučaju semantičkog formatiranja dovoljno je na jednom mestu promeniti način na koji se formatiraju, na primer, novi pojmovi u tekstu (u pravilu koje opisuje klasu novi_pojam), dok bi u slučaju fizičkog formatiranja pomoću elementa <span class='html_element'>b</span> morali da pregledamo svaki takav element ponaosob ne bismo li utvrdili da li on predstavlja novi pojam ili strani pojam ili pak HTML-element jer bi za sve njih bio upotrebljen element <span class='html_element'>b</span>. Štaviše, ako bismo nove pojmove formatirane pomoću elementa <span class='html_element'>b</span> izmenili tako da ponovo koristimo fizičko formatiranje, ponovo bi nas čekao isti posao pri sledećoj potrebi da se izmeni format novih pojmova. U tom smislu, iako deluje da ima posla oko semantičkog formatiranja, ima ga i kod fizičkog formatiranja, ali ključna prednost semantičkog formatiranja je što će taj posao biti urađen samo jednom i sa lakoćom će se ažurirati prikaz, dok će kod fizičkog formatiranja svaka izmena iziskivati isti napor i obim posla kao kod prvog formatiranja.</p>
	p { text-align: justify; }
	#naslov_odlomka { font-variant: small-caps; }
	.naslov_dela { font-style: italic; }
	.novi_pojam { font-weight: bold; }
	.strani_pojam { font-weight: bold; }
	.html_element { 
	         font-family: "Courier New", monospace; 
	         font-size: 12pt;
			 font-weight: bold;
	}
	.html_atribut { 
	         font-family: "Courier New", monospace; 
	         font-size: 12pt;
	}
	.prevazidjeno { color: red; }