360 likes | 684 Views
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 )
E N D
Pričaćemo o… • HTML • CSS • HTML, CSS inewsletteri
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
HTML – elementi • HTML tagoviilielementisuključnerečikoje se nalazeizmeđuznakova “<“ i “>” • Tagoviobičnoidu u parovimanpr. <p> i </p> • Prvi tag služizaotvaranje a drugizazatvaranjeelementa
HTML – primer dokumenta <html> <body> <p>Hello World!</p> </body> </html>
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.
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
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
HTML – atributielemenata • HTML elementimoguimatiatribute • Atributiobezbeđujudodatneinformacije o elementu • Atributi se uveknavode u taguotvaranja • Atributi se navode u parovimanaziv/vrednostkao: ime="vrednost” Listanekihstandardnihatributa:
HTML – slike • Slike se u HTML dokumentuoznačavajupomoću <img> taga • Svaki<img> tag, pored standardnihatributamožeimatiisledećeatribute:
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:
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>
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
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>
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>
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>
Š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
CSS - deklaracija • CSS deklaracija se sastoji od nazivadeklaracijeivrednostideklaracije • Odvajaju se pomocu : • Svakadeklaracija se od drugedeklaracijeodvajatačka-zarezom
CSS – background • CSS background služizastilizovanjepozadine HTML elemenata • Background osobine:
CSS – text • CSS text služizastilizovanjetekstaunutar HTML elemenata • Text osobine:
CSS – font • CSS font služizastilizovanjefontaunutar HTML elemenata • Font osobine:
CSS – Box Model • Svi HTML elementise moguposmatratipreko HTML box modela. • Box model omogućava da se definiševisina, širina, margine, padding i border svakogelementa
CSS - Margin • Margin definiše, kako mu isamoimekaže, margine HTML elementa. • Marginesuuvektransparentne, tj ne poprimajupozadinuelementa
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
CSS - Padding • Padding definišerastojanjeizmeđuiviceisamogsadržaja HTML elementa. • Padding nijetransparentanipoprimajupozadinuelementa
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
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
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>
Korisnilinkovi • http://www.campaignmonitor.com/design-guidelines/ • http://www.w3schools.com/css/ • http://www.w3schools.com/html/ • http://www.campaignmonitor.com/css/