1 / 34

HTML newsletter

HTML newsletter. Pričaćemo o…. HTML CSS HTML, CSS i newsletteri. HTML. 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 )

kairos
Download Presentation

HTML newsletter

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML newsletter

  2. Pričaćemo o… • HTML • CSS • HTML, CSS inewsletteri

  3. HTML

  4. HTML – osnove • HTML – skraćeno od Hyper Text Markup Language • HTML nijeklasičanprogramskijezik • HTML predstavljajezikzaoznačavanje • Sastoji se izskupaoznaka (HTML tagova) • Tagovi se koristezaopis Web strana • HTML dokumentili Web strana se sastoji od tekstai HTML tagova

  5. HTML – elementi • HTML tagoviilielementisuključnerečikoje se nalazeizmeđuznakova “<“ i “>” • Tagoviobičnoidu u parovimanpr. <p> i </p> • Prvi tag služizaotvaranje a drugizazatvaranjeelementa

  6. HTML – primer dokumenta <html> <body> <p>Hello World!</p> </body> </html>

  7. HTML – strukturadokumenta Svaki HTML dokumentmoraimati: • <html></html> par tagova • Tekstizmeđuovihtagovaopisuje Web stranicu • <body></body> par tagova • Tekstizmeđuovihtagovapredstavljasadržajvidljivzakorisnika • <body> tag se nalaziunutar<html> taga • U HTML dokumentumožepostojatisamojedan<html> tag. Sviostalitagovi se morajunalazitiunutarnjega.

  8. HTML – Sintaksa • Sadržajelementaje svešto se nalaziizmeđutagaotvaranjaitagazatvaranja • Neki HTML elementimoguimatiprazansadržaj (praznielementi) • Praznielementi se zatvaraju u taguotvaranja • Većina HTML elemenatamoguimatiatribute • HTML elementi se mogunalazitiunutardrugih HTML elemenata (ugnježdavanje) • Većina HTML elemenatamoguimatiatribute

  9. HTML elementi Osnovni HTML elementi: • <p> - paragraf • <bold> - podebljantekst • <i> - kurziv • <a> - link • <h1> do <h6> - naslovi • <hr/> - horizontalnalinija • <br/> - prelom u novi red • <img> - slika • <table> - tabela • <th> - red sanaslovimau tabeli • <tr> - red u tabeli • <td> - ćelija u redu u tabeli • <ul> - neuredjenalista • <li> - stavkaliste • <ol> - uredjenalista • <li> - stavkaliste

  10. HTML – atributielemenata • HTML elementimoguimatiatribute • Atributiobezbeđujudodatneinformacije o elementu • Atributi se uveknavode u taguotvaranja • Atributi se navode u parovimanaziv/vrednostkao: ime="vrednost” Listanekihstandardnihatributa:

  11. HTML – slike • Slike se u HTML dokumentuoznačavajupomoću <img> taga • Svaki<img> tag, pored standardnihatributamožeimatiisledećeatribute:

  12. HTML – linkovi • Linkovi u HTML-u se obeležavaju <a> tagom • Link možebitislika, tekst, paragraf(ugnježdavanje html elemenata) • Svaki<a> tag, pored standardnihatributamožeimatiisledećeatribute:

  13. HTML – linkovi Primer: <a href=“http://www.google.com” target=“_blank” >Search</a> <a href=“http://www.google.com” target=“_self”><imgsrc=“http://www.richmondwiki.org/images/search-button.png” width=“30” height=“30”></a> <p>Zapretragu, kliknite<a href=“http://www.google.com” target=“_blank” >ovde</a>.</p>

  14. HTML - tabela Primer: <table border=“1”> <tr> <td>11</td><td>12</td><td>13</td> </tr> <tr> <td>21</td><td>22</td><td>23</td> </tr> <tr> <td>31</td><td>32</td><td>33</td> </tr> <table> • Prikazuje se tabeladimenzija 3x3 • <tr> tag se nalaziunutar <table></table> ioznačava red u tabeli • <td> tag se nalaziunutar <tr></tr> ioznačavakolonu (ćeliju) u redu

  15. HTML - tabela Atributi u <table> tagu: Pored navedenihatributa, mogu se koristitiistandardniatributi. Primer: <table cellspacing=“2” cellpading=“2” border=“1”> <tr> <td>11</td><td>12</td><td>13</td> </tr> <tr> <td>21</td><td>22</td><td>23</td> </tr> </table>

  16. HTML - tabela Atributi u <td> tagu: Primer: <table cellspacing=“2” cellpading=“2” border=“1”> <tr> <td colspan=“2”>11</td><td valign=“middle” align=“left”>13</td> </tr> <tr> <td>21</td><td>22</td><td>23</td> </tr> </table>

  17. HTML – liste • U HTML dokumentu, listemogubiti: • Uređene • Neuređene • Uređeneliste se obeležavaju <ol> tagom • Neuređeneliste se obeležavajuy <ul> tagom • Stavke u listi se obeležavaju <li> tagom • <ul>, <ol> i <li> tagovimoguimatisamostandardan set atributa Primer: <ul> <li>Prva</li> <li>Druga</li> <li>Treca</li> </ul> Primer: <ol> <li>Prva</li> <li>Druga</li> <li>Treca</li> </ol>

  18. Pitanja?

  19. CSS

  20. Šta je CSS? • CSSpredstavljaCascading Style Sheets • Stilovidefinišukako se prikazuju HTML elementi CSS pravila: • Mogu se definisatina 3 mesta: • U zasebnom .cssfajlu • U okviru <style></style> tagova • U style atributu HTML elementa (inline style) • Razmatraćemosamo inline style

  21. CSS - deklaracija • CSS deklaracija se sastoji od nazivadeklaracijeivrednostideklaracije • Odvajaju se pomocu : • Svakadeklaracija se od drugedeklaracijeodvajatačka-zarezom

  22. CSS – background • CSS background služizastilizovanjepozadine HTML elemenata • Background osobine:

  23. CSS – text • CSS text služizastilizovanjetekstaunutar HTML elemenata • Text osobine:

  24. CSS – font • CSS font služizastilizovanjefontaunutar HTML elemenata • Font osobine:

  25. CSS – Box Model • Svi HTML elementise moguposmatratipreko HTML box modela. • Box model omogućava da se definiševisina, širina, margine, padding i border svakogelementa

  26. CSS - Margin • Margin definiše, kako mu isamoimekaže, margine HTML elementa. • Marginesuuvektransparentne, tj ne poprimajupozadinuelementa

  27. CSS - Border • Margin definišeivice HTML elementa. • Definisanjesvakeiviceposebno: • border[-left | -right | -top | -bottom]-style • border[-left | -right | -top | -bottom]-width • border[-left | -right | -top | -bottom]-color

  28. CSS - Padding • Padding definišerastojanjeizmeđuiviceisamogsadržaja HTML elementa. • Padding nijetransparentanipoprimajupozadinuelementa

  29. CSS – visinaiširina • Visinaiširina HTML elemenatadefiniše se pomoćuwidth i height osobina. • Width i height se odnosesamona content deo box modela! • To znači da u ukupnivisinuiširinu HTML elementa se morajuuračunatjoši border, padding i margin Izračunavanješirineivisineelementa: Š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 inewsletteri • Postojivelikibrojprograma u kom se otvaraju email-ovii da bi se u svimprogramima newsletter prikazaoštoje mogućebolje, potrebno je držati se sledećihosnovnihpravilaprilikomkodiranja: • Najvažnijepravilozakodiranjenewsletterajesteda on budeštojednostavniji • Slike je najboljepostavitinajavni server pa ihdirektnopozivati u kodu • U samomkodunavestiveličinuslike • Najbolje da koristitetabeleprilikomkodiranjanewslettera, jednostavnesui u većinislučajevanewsletterćebitiprikazankakotreba • Koristitiuvekpikselezaveličine, nikakoprocente • Širinanewslettera ne smebitiveća od 600px - većinakorisnikagleda mail u prevewmodu

  32. HTML, CSS inewsletteri • Obavezno je testiranjekakoć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 klijentipoputgmail-a, yahoo mail-a i sl. nećeprikazatipodešavanjakoja se nalazeunutarDOCTYPE, BODY, i HEAD tagova • Akoimateprevišeslika, premaloteksta u mailufilterićegasmatratizaspam • VećinaCSS kodanećebitiprikazana u online mail klijentima, dakletrebakoristitiobičnetagove • za font. • Da bi Vam se prikazalapozadinaemailaobuhvatitekompletnutabelusanovomtabelomčijaje širina100% injojzadajtebojupozadineilisliku. • Nemojtezaboraviti da neki email klijentine prikazujuslikepozadine, pa zasvakislučajstaviteibojupozadine. • Primer zabojupozadine: • <table cellspacing="0" cellpadding="0" border="0" width="100%"> <tr> <td bgcolor=”#000000”>Kodemail-a</td></tr> </table>

  33. Korisnilinkovi • http://www.campaignmonitor.com/design-guidelines/ • http://www.w3schools.com/css/ • http://www.w3schools.com/html/ • http://www.campaignmonitor.com/css/

  34. Pitanja?

More Related