dwcc_08-4585214

Copyright © Link group

8. Osnovni tekst tagovi

Osnovni tagovi stranice - block vs. inline Već smo pomenuli osnove HTML tagova i strukture. Pre nego što krenemo sa kreiranjem sadržaja i formatiranjem, moramo napomenuti dva tipa gradivnih elemenata. Postoje block i inline tagovi. Iako su svi tagovi deo šire strukture, block elementi se pojavljuju kao pravougaoni objekti koji zauzimaju maksimalnu širinu, a njihova širina i visina može se postavljati nezavisno od drugih susednih elemenata. Nasuprot njih, inline elementi se predstavljaju kao deo toka teksta, i ne mogu imati svoju visinu širinu, niti se prelamati kroz više linija teksta. Najlakše je zamisliti inline elemente kao jedan karakter, kao jedno slovo teksta. Neki od najčešće korišćenih block elemenata su:

● Paragrafi: p ● Naslovi (Heading): h1, h2, h3, h4, h5, h6 ● DIV tagovi: div ● Liste (ureñene, neureñene): ol, ul

Neki od najčešće korišćenih inline elemenata su:

● Boldiranje teksta: strong ● Slika: img ● Deo teksta: span ● Link (Anchor): a

Da podsetimo, svi ovi elementi, iz obe grupe, jesu tagovi, samo se drugačije manifestuju. Kasnije ćemo se u lekcijama pozabaviti gradivnim elementima u okviru CSS Box modela. Osnovni unos teksta Ukoliko želimo da unosimo tekst direktno u DW, možemo to učiniti u design prikazu. Komande su slične drugim tekst editorima. Na slici ispod vidimo otvorenu HTML stranu u split prikazu (code i design prikaz istovremeno). Unet je tekst koji se sastoji od tri paragrafa. Svaki paragraf je okružen p tagom koji smo ranije pominjali (<p>...</p>). Iako tekst može stajati direktno u body, takvu praksu bi trebalo izbegavati. Pravilno je da postavimo p tag oko svakog paragrafa.


slika 8.1 - HTML strana sa unetim tekstom Možemo raditi direktno u design prikazu i tada će svaki novi red (taster Enter) biti pretvoren u novi paragraf, tj. DW će sam kreirati tagove. Sa druge strane, možemo raditi u code prikazu i tu menjati tekst, ali onda moramo paziti na tagove, jer ukoliko slučajno obrišemo neki deo ili ceo tag, DW nas neće ispraviti i napravićemo grešku u kodu. Najvažniji tekst tagovi su:

<p> </p> - definiše paragraf <h1> </h1> - definiše naslov prvog nivoa. <h2> </h2> - definiše naslov drugog nivoa. Ostali nivoi (zaključno sa šestim) se definišu po istom principu, samo sa drugim brojem u tagu. <strong> </strong> - definiše bold tekst. Može se koristiti i <b> ali nije u potpunosti isto. <em> </em> - definiše italic tekst. Može se koristiti i <i> ali nije u potpunosti isto. <a> </a> - definiše link. <pre> </pre> - definiše preformatirani tekst. Koristimo najčešće kada želimo da prikažemo neki kod na stranici. <ul>, <ol> i <li> - koriste se za liste. O tome više u narednoj jedinici.

Ukoliko obratimo pažnju na properties inspector panel, videćemo da nam prikazuje osobine i formatiranje paragrafa ili drugog elementa u kome se nalazi kursor. Za sada ćemo se pozabaviti samo HTML delom. Ukoliko je izabran CSS, klikom prebacite na HTML (slika ispod). Properties inspector panel, ukoliko nije vidljiv, uključujemo iz padajućeg menija Window > Properties (ctrl + f3).


slika 8.1 - HTML/CSS formatiranje u Properties inspector panelu U properties panelu možemo pretvoriti paragraf u naslov (heading). Dovoljno je da postavimo kursor bilo gde unutar željenog paragrafa i da izaberemo neki od headinga iz padajućeg menija Format. Ne moramo selektovati ceo paragraf ručno (kao što bismo to radili u MS Wordu) već samo postaviti kursor unutar njega, jer se format padajući meni odnosi na ceo block elemenat. Slično pomenutom, možemo dodeliti ID ili klasu elementu (koji se koriste za povezivanje sa CSS-om), promeniti poravnanje, postaviti nabrajanje (listu) i tako dalje. Nasuprot tome, ukoliko želimo da paragraf, ili bilo koji drugi deo teksta postavimo u bold ili italic, moramo tačno selektovati željeni tekst i potom izabrati iz properties panela bold, odnosno italic. Ukoliko ne bismo selektovali, ništa se ne bi promenilo, jer DW ne bi znao na šta da primeni željeno formatiranje. Slično je i kada želimo da postavimo link na odreñeni tekst. Dreamwaver se ovako ponaša zbog block i inline elemenata. Kada radimo sa tekstom, kod block elemenata (paragrafi, naslovi, liste...), dovoljno je da kursor bude unutar elementa, ne moramo selektovati. Što se tiče inline elemenata (bold, italic...), u tom slučaju moramo tačno selektovati šta želimo.

slika 8.2 - properties inspector panel

A. Formatiranje, odnosno izbor osnovnog formatiranja. Izbor je izmeñu:


○ None - ne postavlja nikakav tag. ○ Paragraf - osnovno formatiranje za standardni paragraf teksta <p> ○ Heading 1-6 - Izbor jednog od šest nivoa naslova. Heading 1 je naznačajniji, 6 je najmanje. <h1>, <h2>...<h6> ○ Preformatted - Slično paragraf formatiranju, ali postavlja <pre> tag koji se koristi za prikaz koda (obično monospace font).

B. Izbor identifikacione vrednosti (ID) koji želimo primeniti na izabrani element. Trenutno je prazno (none) jer nemamo učitanih CSS stilova, a samim tim ni dostupnih selektora C. Izbor klase (Class) koju želimo primeniti na izabrani elemenat. Slično kao ID. D. Postavljanje bold formatiranja (<strong> ili <b>) E. Postavljanje Italic formatiranja (<em> ili <i>) F. Postavljanje neureñene (ul) liste G. Postavljanje ureñene (ol) liste H. Dodavanje/uklanjanje blockquote tagova radi uvlačenja paragrafa - <blockquote> I. Hiperlink do stranice/fajla/elementa koji se postavlja na selektovan tekst. Možemo uneti link ručno u polje, prevući ikonicu linka (Point to File) do fajla u files panelu ili izabrati fajl klikom na folder ikonicu (Browse for File) J. Title, odnosno naslov linka (dostupno je samo kada je kreiran link) K. Odreñuje kako će se otvoriti linkovani dokument (samo kada je kreiran link):

○ _blank - učitava linkovani dokument u novom okviru/prozoru ○ _parent - učitava linkovani dokument u roditeljskom elementu strane u kojoj se nalazi link. Ukoliko se link ne nalazi u ugnježdenoj strani, učitava u punom prozoru. ○ _self - učitava linkovani dokument u istom prozoru gde se nalazi i link. Ukoliko izostavimo target, ova vrednost se uzima kao default. ○ _top - Učitava u punom prozoru, zanemarujući sve frejmove.

Pored ovih opcija, nalazimo i na dva dugmeta: Page Properties i List Item. Page properties poziva istoimeni dijalog koji smo upoznali ranije. List item otvara dijalog sa opcijama liste (nabrajanja) i aktivan je samo kada se nalazimo u listi, kao što ćemo videti u nastavku kada bude više reči o listama. Kopiranje teksta iz drugih programa (Paste special) Kada radimo sa tekstom u HTML dokumentima, veoma je važno da sam tekst bude pravilno postavljen i da nema suvišnih tagova i atributa. Na primer, ako je paragraf teksta, postavićemo p tag. Ukoliko postavljamo naslov, stavićemo oko tog teksta neki h tag, na primer h1, i tako dalje. Idealna solucija za unos teksta je direktno kucanje u Dreamweaveru, jer tada on automatski postavlja potrebne tagove, ali to se retko kad dešava, jer tekst obično kopiramo iz nekog drugog programa. Ukoliko kopiramo iz notepada, ili sličnog programa koji ne poseduje nikakvo formatiranje, možemo koristiti standardno cut/copy/paste kopiranje teksta (Ctrl+X, Ctrl+C, Ctrl+V). U tom slučaju, pošto je tekst neformatiran, DW će ga prihvatiti kao plain (običan) tekst. Opcije za kopiranje možemo pozvati i putem padajućeg menija Edit ili desnim klikom miša na željenu lokaciju.


Sa druge strane, ukoliko pastujemo iz nekog programa koji i sam sadrži formatiranje i stilove (poput MS Worda i sličnih) ili sa neke web strane, jednostavno copy/paste bi unelo gomilu nepotrebnog koda. To formatiranje se onda sukobljava sa našim formatiranjem strane. Slično kao HTML, i Word pomoću svojih tagova, opisa i drugih nevidljivih elemenata ureñuje tekst na stranicama. Ti elementi nisu vidljivi u Wordu, ali ako kopiramo u HTML postaju vidljivi i stvaraju problem. Pogledajmo sledeću sliku. Isti je tekst postavljen, ali uz razliku da je levi kopiran iz Worda, dok je desni iz Notepada:

slika 8.3 - Isti tekst kopiran iz Worda i Notepada direktno u Dw Nema potrebe da detaljno analiziramo kod koji smo dobili iz Worda, ali primećujemo mnogo više detalja koji su nam nepotrebni. Ne samo da imamo višak, već će se verovatno desiti sukob izmeñu stilizacije koju budemo sami kreirali u Dw-u i tih detalja iz Worda. U tom slučaju, postoji rešenje. Možemo koristiti paste special opciju koja, za razliku od običnog paste, sadrži još jedan korak u kome odreñujemo kako i šta ćemo iskopirati, a šta odbaciti. Pomenutu funkciju pokrećemo slično kao paste, desnim klikom miša na poziciju gde želimo da iskopiramo i biranjem Paste Special.. ili pozivanjem istoimene opcije iz Edit padajućeg menija. Pojaviće nam se sledeći dijalog:


slika 8.4 - Paste Special dijalog Postoje sledeće opcije:

● Text only - Samo tekst u bukvalnom smislu, svako formatiranje je izuzeto. ● Text with structure (paragraphs, lists, tables, etc) - Ova opcija će pored teksta ostaviti i naslove, pasuse, tabele, liste i drugo strukturno označavanje. ● Text with structure plus basic formatting (Bold, Italic) - Ova opcija će ostaviti Bold i Italic formatiranje pored elemenata iz prethodne stavke. ● Text with structure plus full formatting (Bold, Italic, Styles) - Ova opcija konvertuje fontove, boje i druge stilove u CSS fajl. Rezultat u Design prikazu može biti ok, ali u kodu je noćna mora.

Preporučujem da ne koristite poslednju opciju. Mnogo je bolje izabrati drugu ili treću, pa urediti svoj CSS. Najčistija varijanta je prva (text only) ali tada gubite svo formatiranje i dosta je vremena potrebno za naknadno sreñivanje. U istom dijalogu su i tri dodatne opcije:

● Retain line brakes - Ovaj checkbox nam omogućava da odredimo da li će se line breaks (br) sačuvati ili ne. ● Clean up Word paragraph spacing - Ova opcija izbacuje ekstra liniju izmeñu paragrafa u tekstu dodatom iz Microsoft Worda. Dostupna je ako postoji u tekstu. ● Convert smart quotes to straight quotes - Možda niste znali, ali postoji više različitih tipova znaka navoda. Najčešće srećemo straight i smart znake navoda (pogledajte sliku ispod). Kada je u kodu potreban znak navoda (npr za html atribute) uvek koristimo straight varijantu, ali u vidljivom tekstu možemo koristiti šta želimo. Ovom opcijom biramo da li želimo da konvertujemo smart u straight ili ne.


slika 8.5 - Straight i Smart quotes

Primetićete da u paste special dijalogu nisu sve opcije uvek dostupne. To zavisi od samog teksta koji je na clipboardu. U ranije pomenutom Preferences panelu (Edit > Preferences...), ali sada u grupi Copy/Paste možemo postaviti default ponašanje opcije Paste. Ova podešavanja su potpuno ista kao u dijalogu Paste Special, ali odnose se na običan Paste, odnosno na default, podrazumevanu varijantu. Specijalni karakteri Ranije u ovoj jedinici smo pomenuli dva tipa znaka navoda. Pomenuli smo da u kodu uvek koristimo straight navodnike, dok u vidljivom tekstu možemo koristiti i jedne i druge. Pored toga, postoji mnogo drugih specijalnih karaktera koje možemo koristiti u našim tekstovima. Kao što su na primer ™ © i sl. Svi oni se mogu koristiti u tekstovima web stranica, ali se u kodu zapisuju malo drugačije. Tako i smart znaci navoda u kodu nisu znaci navoda, već imaju specijalnu oznaku. Pogledajte sledeću tabelu:

Vidljiv znak

Unos u kodu

© © ™ ™ € € & & ” ”

U tabeli su dati samo neki od mnogih zamenskih karaktera. Sasvim je logično da nećete pamtiti napamet njihove oznake i zbog toga je tu olakšavajuća okolnost u Dw. Možemo iz Insert panela (toolbara) otvoriti kategoriju Common i kao poslednja opcija se nalazi ubacivanje specijalnih karaktera. Pogledajte sliku ispod.


slika 8.6 - specijalni karakteri u Insert panelu

Iz podmenija stavke, možemo izabrati željeni karakter. Najpopularniji su odmah dati, dok se dodatni mogu naći u okviru poslednje stavke (Other Characters) kojom otvaramo dodatni dijalog. Ne zaboravite da ukoliko iskopirate tekst koji uključuje ove karaktere iz nekog drugog softvera, Dreamweaver će sam upisati odgovarajući kod. Unos MS Word i Excel fajlova Iako nije preporučljivo, Dreamweaver može uvesti (import) Word i Excel fajlove izborom opcije iz padajućeg menija File > Import > Word Document... Odnosno, Excel Document… Pojavljuje nam se, zatim, standardni dijalog za izbor fajlova, sa tom napomenom da se u donjem delu mogu podesiti opcije uvoza, kao kod Paste special. Kursor mora biti postavljen u dizajn prikazu.


slika 8.9 - Import opcije Ove opcije neće biti dostupne ukoliko MS Office nije instaliran na računaru. Osim uvoza fajlova, DW može i otvoriti HTML fajlove koje smo sačuvali u bilo kom programu, pa i u MS Wordu. U tom slučaju, po otvaranju fajla, možemo koristiti opciju iz padajućeg menija Commands > Clean Up Word HTML… Pojavljuje nam se dijalog u kome možemo izabrati šta sve želimo da uklonimo od Word formatiranja. Preporuka je da se sve opcije ostave štiklirane.


slika 8.10 - čišćenje Word HTML dokumenata

Čišćenje neželjenih tagova Pored uklanjanja Word specifičnog formatiranja, možemo automatski ukloniti neke druge neželjene tagove i elemente iz naše HTML stranice. Ukoliko izaberemo iz padajućeg menija Commands > Clean Up HTML, odnosno Commands > Clean Up XHTML, ukoliko radimo sa xHTML dokumentom, pozivamo dijalog koji vidimo na slici ispod.

slika 8.11 - Clean up dijalog


Remove Empty Container Tags uklanja sve tagove koji nemaju nikakav sadržaj. Na primer <b></b> i <font color="#FF0000"></font> će biti uklonjeni. Remove Redundant Nested Tags uklanja nepotrebno duplirane tagove. Na primer <em>. Ovo je <em>neki</em> citat.</em>. Unutrašnji em tag će biti uklonjen, ali će njegov sadržaj ostati. Remove Non-Dreamweaver HTML Comments uklanja komentare koji nisu kreirani u Dreamweaveru. Remove Dreamweaver Special Markup uklanja komentare koje je Dreamweaver dodao zbog praćenja šablona i library objekata. Ukoliko uklonimo te tagove, a radimo na stranici baziranoj na šablonu, veza šablon-stranica će biti prekinuta. Remove Specific Tag(s) uklanja tagove koje upišemo u polju pored. Pišemo samo nazive tagova (bez < >) i, ukoliko ih je više, odvajamo ih zarezom. Combine Nested <font> Tags When Possible opcija kombinuje više font tagova (koji se odnose na isti tekst) u jedan tag sa istim atributima. Na primer <font size="7"><font color="#FF0000">tekst red</font></font> se menja u <font size="7" color="#FF0000">tekst</font>. Font tagove više ne koristimo, ali je ova opcija zgodna kada radimo sa starijim stranicama koje je potrebno prepraviti. Show Log On Completion prikazuje koje su izmene izvršene po završetku čišćenja. Dreamweaver:

● Poseduje ugrañene opcije za uvoz Word i Excel fajlova ● Poseduje ugrañene opcije za uvoz Word fajlova ● Poseduje ugrañene opcije za uvoz Excel fajlova

Sažetak Postoje dva tipa gradivnih elemenata, block i inline tagovi. Ukoliko želimo da unosimo tekst direktno u DW, možemo to učiniti u design prikazu. Komande su slične drugim tekst editorima. Kada radimo sa tekstom u HTML dokumentima, veoma je važno da sam tekst bude pravilno postavljen i da nema suvišnih tagova i atributa. Ukoliko kopiramo iz Worda i sličnih alata, potrebno je da očistimo kod.

dwcc_08-4585214

Documents