1. HTML newsletter

2. Pričaćemo o… HTML CSS HTML, CSS i newsletteri

3. HTML

4. HTML – osnove HTML – skraćeno od Hyper Text Markup Language HTML nije klasičan programski jezik HTML predstavlja jezik za označavanje Sastoji se iz skupa oznaka (HTML tagova) Tagovi se koriste za opis Web strana HTML dokument ili Web strana se sastoji od teksta i HTML tagova

5. HTML – elementi HTML tagovi ili elementi su ključne reči koje se nalaze između znakova “ ” Tagovi obično idu u parovima npr. i Prvi tag služi za otvaranje a drugi za zatvaranje elementa

6. HTML – primer dokumenta Hello World!

7. HTML – struktura dokumenta Svaki HTML dokument mora imati: par tagova Tekst između ovih tagova opisuje Web stranicu par tagova Tekst između ovih tagova predstavlja sadržaj vidljiv za korisnika tag se nalazi unutar taga U HTML dokumentu može postojati samo jedan tag. Svi ostali tagovi se moraju nalaziti unutar njega.

8. HTML – Sintaksa Sadržaj elementa je sve što se nalazi između taga otvaranja i taga zatvaranja Neki HTML elementi mogu imati prazan sadržaj (prazni elementi) Prazni elementi se zatvaraju u tagu otvaranja Većina HTML elemenata mogu imati atribute HTML elementi se mogu nalaziti unutar drugih HTML elemenata (ugnježdavanje) Većina HTML elemenata mogu imati atribute

9. HTML elementi Osnovni HTML elementi: - paragraf - podebljan tekst - kurziv - link do - naslovi - horizontalna linija - prelom u novi red - slika - tabela - red sa naslovima u tabeli - red u tabeli - ćelija u redu u tabeli - neuredjena lista - stavka liste - uredjena lista - stavka liste

10. HTML – atributi elemenata HTML elementi mogu imati atribute Atributi obezbeđuju dodatne informacije o elementu Atributi se uvek navode u tagu otvaranja Atributi se navode u parovima naziv/vrednost kao: ime="vrednost” Lista nekih standardnih atributa: Naziv atributaznačenje idJedinstveni ID elementa classDefiniše naziv klase elementa styleDefiniše inline stil elementa titleDefiniše dodatne informacije o elementu

11. HTML – slike Slike se u HTML dokumentu označavaju pomoću taga Svaki tag, pored standardnih atributa može imati i sledeće atribute: Naziv atributaZnačenje srcPutanja do slike altAlternativni tekst heightDefiniše visinu slike widthDefiniše širinu slike

12. HTML – linkovi Linkovi u HTML-u se obeležavaju tagom Link može biti slika, tekst, paragraf (ugnježdavanje html elemenata) Svaki tag, pored standardnih atributa može imati i sledeće atribute: Naziv atributaZnačenje hrefURL na koji link treba da vodi nameNaziv linka targetDefiniše gde treba strana da bude otvorena (_blank, _parent,_self, …)

13. HTML – linkovi Primer: Search Za pretragu, kliknite ovde.

14. HTML - tabela Primer: 11 12 13 21 22 23 31 32 33 111213 212223 313233 Prikazuje se tabela dimenzija 3x3 tag se nalazi unutar i označava red u tabeli tag se nalazi unutar i označava kolonu (ćeliju) u redu

15. HTML - tabela Atributi u tagu: Naziv atributaznačenje borderDefiniše širinu ivica tabele u pikselima cellspacingDefiniše rastojanje između polja tabele u pixelima cellpaddingDefiniše rastojanje između sadržaja polja i ivice polja Pored navedenih atributa, mogu se koristiti i standardni atributi. Primer: 11 12 13 21 22 23

16. HTML - tabela Atributi u tagu: Naziv atributaznačenje alignDefiniše horizontalno poravnanje sadržaja polja (left, right, center, justify…) valignDefiniše vertikalno poravnanje sadržaja polja (top, middle,baseline, bottom) rowspanDefiniše na koliko redova treba da se proteže polje colspanDefiniše na koliko kolona treba da se proteže polje Primer: 11 13 21 22 23

17. HTML – liste U HTML dokumentu, liste mogu biti: Uređene Neuređene Uređene liste se obeležavaju tagom Neuređene liste se obeležavajuy tagom Stavke u listi se obeležavaju tagom, i tagovi mogu imati samo standardan set atributa Primer: Prva Druga Treca Primer: Prva Druga Treca

18. Pitanja?

19. CSS

20. Šta je CSS? CSS predstavlja Cascading Style Sheets Stilovi definišu kako se prikazuju HTML elementi CSS pravila: Mogu se definisati na 3 mesta: U zasebnom.css fajlu U okviru tagova U style atributu HTML elementa (inline style) Razmatraćemo samo inline style

21. CSS - deklaracija CSS deklaracija se sastoji od naziva deklaracije i vrednosti deklaracije Odvajaju se pomocu : Svaka deklaracija se od druge deklaracije odvaja tačka-zarezom

22. CSS – background CSS background služi za stilizovanje pozadine HTML elemenata Background osobine: OsobinaOpis background-color Definiše boju pozadine elementa background-image Definiše sliku pozadine elementa background-repeat Definiše ponavljanje slike pozadine po x i y osi unutar elementa background-position Definiše poziciju slike pozadine u elementu

23. CSS – text CSS text služi za stilizovanje teksta unutar HTML elemenata Text osobine: OsobinaOpis colorDefiniše boju teksta directionDefiniše smer teksta letter-spacingDefiniše rastojanje između slova u tekstu line-heightDefiniše visinu linije teksta text-alignDefiniše horizontalno poravnanje za tekst (center, left right, justify) text-decorationDefiniše rastojanje između slova u tekstu(underline,overline,line- through,blink) text-indent Definiše uvlačenje prve linije u bloku teksta

24. CSS – font CSS font služi za stilizovanje fonta unutar HTML elemenata Font osobine: OsobinaOpis font-familyDefiniše vrstu fonta (“Times New Roman”, Arial, Helvetica,…) font-sizeDefiniše veličinu fonta font-styleDefiniše stil fonta (normal, italic, oblique) font-weightDefiniše debljinu fonta (normal,bold,bolder,lighter, 100-900)

25. CSS – Box Model Svi HTML elementi se mogu posmatrati preko HTML box modela. Box model omogućava da se definiše visina, širina, margine, padding i border svakog elementa

26. CSS - Margin Margin definiše, kako mu i samo ime kaže, margine HTML elementa. Margine su uvek transparentne, tj ne poprimaju pozadinu elementa OsobinaOpis margin-top Definiše gornju marginu elementa margin-right Definiše desnu marginu elementa margin-bottom Definiše donju marginu elementa margin-left Definiše levu marginu elementa margin Definiše sve margine odjednom

27. CSS - Border Margin definiše ivice HTML elementa. OsobinaOpis border-style Definiše stil ivice (dotted, solid, dashed, double, groove, ridge…) border-width Definiše desnu marginu elementa border-color Definiše donju marginu elementa Definisanje svake ivice posebno: border[-left | -right | -top | -bottom]-style border[-left | -right | -top | -bottom]-width border[-left | -right | -top | -bottom]-color

28. CSS - Padding Padding definiše rastojanje između ivice i samog sadržaja HTML elementa. Padding nije transparentan i poprimaju pozadinu elementa OsobinaOpis padding-top Definiše gornji padding elementa padding-right Definiše desni padding elementa padding-bottom Definiše donji padding elementa padding-left Definiše levi padding elementa padding Definiše sve padding vrednosti odjednom

29. CSS – visina i širina Visina i širina HTML elemenata definiše se pomoću width i height osobina. Width i height se odnose samo na content deo box modela! To znači da u ukupni visinu i širinu HTML elementa se moraju uračunat još i border, padding i margin Izračunavanje širine i visine elementa: Širina = margin-left + border-left-width + padding-left + width+ padding-right + border-right-width + margin-right Visina = margin-top+ border-top-width + padding-top+ height+ padding-bottom+ border-bottom-width + margin-bottom

30. Pitanja?

31. HTML, CSS i newsletteri Postoji veliki broj programa u kom se otvaraju email-ovi i da bi se u svim programima newsletter prikazao što je moguće bolje, potrebno je držati se sledećih osnovnih pravila prilikom kodiranja: Najvažnije pravilo za kodiranje newslettera jeste da on bude što jednostavniji Slike je najbolje postaviti na javni server pa ih direktno pozivati u kodu U samom kodu navesti veličinu slike Najbolje da koristite tabele prilikom kodiranja newslettera, jednostavne su i u većini slučajevanewsletter će biti prikazan kako treba Koristiti uvek piksele za veličine, nikako procente Širina newslettera ne sme biti veća od 600px - većina korisnika gleda mail u prevew modu

32. HTML, CSS i newsletteri Obavezno je testiranje kako će se prikazivati u različitim email klijentima (Outlook, Outlook 2007, Outlook 2003, Outlook Express, Thunderbird, Apple Mail, Lotus, Gmail, Yahoo!Mail, Hotmail, MSN...) Online email klijenti poput gmail-a, yahoo mail-a i sl. neće prikazati podešavanja koja se nalaze unutar DOCTYPE, BODY, i HEAD tagova Ako imate previše slika, premalo teksta u mailu filteri će ga smatrati za spam Većina CSS koda neće biti prikazana u online mail klijentima, dakle treba koristiti obične tagove za font. Da bi Vam se prikazala pozadina emaila obuhvatite kompletnu tabelu sa novom tabelom čija je širina 100% i njoj zadajte boju pozadine ili sliku. Nemojte zaboraviti da neki email klijenti ne prikazuju slike pozadine, pa za svaki slučaj stavite i boju pozadine. Primer za boju pozadine: Kod email-a

33. Korisni linkovi http://www.campaignmonitor.com/design- guidelines/ http://www.w3schools.com/css/ http://www.w3schools.com/html/ http://www.campaignmonitor.com/css/

34. Pitanja?