Citiranje sa <q> & <blockquote>-om:
<q> Short Quotations, kratki navod u okviru već postojećeg texta - browser stavlja navodnike. Obavezno koristite <q> ako je u pitanju PRAVI navod, nemojte da kucate navodnike.
<p>Najpoznatiji citat glasi: <q>O, biti ili ne biti - pitanje je sad!</q></p>
Najpoznatiji citat glasi: O, biti ili ne biti - pitanje je sad!
<blockquote> Long Quotations, dugi navod - browser izdvoji citiranu sekciju. Text ne sme direktno da ide u <blockquote> već mora biti u nekom drugom BLOCK elementu u okviru <blockquote>-a. Primer:
Then Faramir stood up and spoke in a clear voice: 'Men of Gondor hear now the Steward of this Realm! Behold! one has come to claim the kingship again at last. Here is Aragorn son of Arathorn, chieftain of the Dúnedain of Arnor, Captain of the Host of the West, bearer of the Star of the North, wielder of the Sword Reforged, victorious in battle, whose hands bring healing, the Elfstone, Elessar of the line of Valandil, Isildur's son, Elendil's son of Númenor. Shall he be king and enter into the City and dwell there?' And all the host and all the people cried yea with one voice.
Tipovi elemenata - Block & Inline:
Veoma važno! Elementi se dele na BLOCK i INLINE tip.
BLOCK elementi su uvek prikazani kao da imaju prazan red ispred i iza sebe i po defaultu zauzimaju PUNU širinu strane: <h1>, <h2>, ..., <h6>, <p>, <blockquote>, <ul>, <ol>, <li>, <div>
INLINE elementi se uvek prikazuju u zamišljenoj liniji koja "teče"(e, za ovako nešto se koriste obični navodnici a ne <q>) u pravcu texta - sleva nadesno: <q>, <a>, <em>, <img> (da, da <img> je inline), <span>, <input>
BLOCK elemeti "grade"(i opet bez <q>) stranu, oni su kao velike cigle, a INLINE elementi obeležavaju manje delove sadržaja u OKVIRU tih cigli. Kada pravite stranu, počnite od velikih delova (block) a zatim je doterajte manjim (inline).
A sada, SVETO pravilo striktnog koda: inline elementi NIKADA ne smeju da stoje sami od sebe! UVEK, ali UVEK, svaki inline element MORA biti deo BLOCK elementa! Ovo je toliko važno da ću ponoviti još jednom: SVAKI INLINE ELEMENT UVEK MORA BITI DEO BLOCK ELEMENTA! Dakle, u <body> HTML-a direktno smeju da idu SAMO BLOCK elementi!
Naravno, podrazumeva se da BLOCK element NIKADA ne sme da ide u INLINE element. U INLINE elemente može da ide samo text ili DRUGI INLINE elementi, ali NIKADA BLOCK element. Takođe, u <p> ne smeju da idu drugi BLOCK elementi. I kao što smo već rekli iznad, u <blockquote> ne smeju direktno da idu INLINE elementi ili text, već samo ako su u nekom drugom BLOCK elementu u okviru <blockquote>-a.
<a> element ne može da ide u drugi <a> element. Nijedan element ne ide u samozatvarajuće elemente tipa <img />.
Ako ste se u poglavlju 2 čudili zašto stavljam <a> i <img> elemente u <p>, sada znate.
Napomena: Browseri praštaju greške i nepravilnosti. Sadržaj će biti prikazan, slika će se videti i ako NIJE u block elementu. Takođe, i ako se ne iskuca zatvarajući tag, browser će prepoznati šta ste hteli i prikazaće sadržaj. Čak i ako vrednosti atributa nisu pod navodnicima, browser će ih primeniti. NEMOJTE se oslanjati na ovo! Naučite da kucate kod pravilno! To će Vam MNOGO značiti u budućnosti.
Izuzetak <br />:
Šta ako, na primer, želimo da citiramo pesmu? Koristili bismo <blockquote> naravno, ali da vidimo kako bi to izgledalo:
Oprosti, Majko Sveta, oprosti, Što naših gora požalih bor, Na kom se, ustuk svakoje zlosti, Blaženoj Tebi podiže dvor; Prezri, nebesnice, vrelo milosti, Što ti zemaljski sagreši stvor: Kajan ti ljubim prečiste skute, Santa Maria della Salute.
Šta bi..? Užas, Laza nam se prevrće u grobu... Iako sam u kodu udario enter posle svakog stiha, u browseru se to ignoriše... Mogao bih svaki stih da stavim u <p>, ali postoji bolji način:
<br /> linebreak = break in the line, isto kao Enter (ili Return) je poseban, u limbu je između block i inline elementa. Nema zatvarajući tag i spada u samozatvarajuće (self-closing) elemente.
Već smo imali jedan takav, <img />. Nazivaju se još i empty (prazni) elementi. Kada element po svom dizajnu nema sadržaj, umesto da kucamo <br></br>, kucamo samo jedan tag <br />.
Da vidimo kako izgleda pesma kada udarimo po jedan <br /> nakon svakog stiha (osim poslednjeg, jer će zatvarajući </blockquote> ionako da stavi nov red):
Oprosti, Majko Sveta, oprosti,
Što naših gora požalih bor,
Na kom se, ustuk svakoje zlosti,
Blaženoj Tebi podiže dvor;
Prezri, nebesnice, vrelo milosti,
Što ti zemaljski sagreši stvor:
Kajan ti ljubim prečiste skute,
Santa Maria della Salute.
Liste (sa redosledom, bez redosleda, ...):
<ul> unordered list, lista bez redosleda. <li> jedna stavka u okviru liste. <ul> parent, <li> children.
<ul> <li>Dragana Mirković</li> <li>Lepa Brena</li> <li>Ceca</li> <li>Vesna Zmijanac</li> </ul>
- Dragana Mirković
- Lepa Brena
- Ceca
- Vesna Zmijanac
<ol> ordered list, lista sa redosledom. <li> jedna stavka u okviru liste. <ol> parent, <li> children.
start atribut je za <ol>. Određuje broj od koga se počinje, u slučaju da NE želite da počne od 1. U suprotnom je nepotreban.
value atribut se koristi kako biste promenili vrednost stavke <li> unutar <ol>. Broj koji naznačite će slediti ostale stavke.
<ol start="50"> <li>Pedeset</li> <li>Pedeset jedan</li> <li value="100">Pedeset dva</li> <li>Pedeset tri</li> </ol>
- Pedeset
- Pedeset jedan
- Pedeset dva
- Pedeset tri
U <ol> i <ul> ne treba da ide NIJEDAN drugi element osim <li>. Ali u <li> može da ide bilo šta. Lista može da ide u listu (bilo koja u bilo koju):
<ul> <li>Dragana Mirković <ol> <li>Imam Dečka Nemirnog (1984)</li> <li>Umiljato Oko Moje (1985)</li> <li>Spasi Me Samoće (1986)</li> <li>Ruže Cvetaju Samo U Pesmama (1987)</li> </ol> </li> <li>Lepa Brena</li> <li>Ceca</li> <li>Vesna Zmijanac</li> </ul>
- Dragana Mirković
- Imam Dečka Nemirnog (1984)
- Umiljato Oko Moje (1985)
- Spasi Me Samoće (1986)
- Ruže Cvetaju Samo U Pesmama (1987)
- Lepa Brena
- Ceca
- Vesna Zmijanac
<dl> definition list, definisana lista. <dt> naziv stavke, <dd> opis stavke.
<dl> <dt>Dragana Mirković</dt> <dd>rođena 18. januara 1968.</dd> <dt>Fahreta Jahić</dt> <dd>rođena 20. okotobra 1960.</dd> <dt>Svetlana Veličković</dt> <dd>rođena 14. juna 1973.</dd> <dt>Vesna Zmijanac</dt> <dd>rođena 4. januara 1957.</dd> </dl>
- Dragana Mirković
- rođena 18. januara 1968.
- Fahreta Jahić
- rođena 20. okotobra 1960.
- Svetlana Veličković
- rođena 14. juna 1973.
- Vesna Zmijanac
- rođena 4. januara 1957.
SVI list elementi: <ol>, <ul>, <li>, <dl>, <dt> i <dd> su BLOCK elementi!
Entiteti:
Pošto HTML kod koristi < > da označi tag-ove, kako onda koristiti ova dva znaka u tekstu a da potpuno ne poremetimo sistem? Tako što umesto njih u kodu zapravo kucamo entitete, a u browseru se prikazuju željeni znakovi. SVAKI put kada VIDITE < ili > na stranici, to znači da su u kodu iskucani < i >. Takođe, umesto & kucamo &. Spisak HTML 4 entiteta (HTML 5 kompatibilni).
Još par elemenata:
<address> obaveštava browser da je sadržaj adresa, npr. kontakt info. Većina browsera ispisuje tekst italik i dodaje praznu liniju pre i posle elementa.
<pre> preformatted text. Sadržaj je prikazan fontom fixne širine (uglavnom Courier) i prikazuje nove redove, tabove i razmake. Ovo je element koji koristim kako bih prikazao primere HTML i CSS koda (uz pomoć sa strane). BLOCK element.
<code> je INLINE, dakle za deo koda u okviru texta. Uglavnom Monospace font-family.
<hr /> horizontal rules, horizontalna linija novog reda. Samozatvarajući.
<strong> Important text, označava da je text važan. Služi za STRUKTURU. Iako ga browser prikazuje bold, ne koristite ga za boldovanje, samo za označavanje nečeg važnog.
<b> Bold text. Ali za stil bi zaista trebalo da koristite CSS. Debljina fonta se menja font-weight osobinom (property).
<em> Emphasized text, istaknuti ili naglašeni text. Služi za STRUKTURU. Iako ga browser prikazuje italik, ne koristite ga za to, već samo ako zaista želite nešto da istaknete / naglasite.
<i> Italic text. I opet ponavljam, za stil bi zaista trebalo da koristite CSS. Stil fonta se menja font-style osobinom (property).