CSS - Creative Diary
Download
Report
Transcript CSS - Creative Diary
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)
• Tagovi se koriste za opis Web strana
• HTML dokument ili Web strana se sastoji
od teksta i HTML tagova
HTML – elementi
• HTML tagovi ili elementi su ključne reči
koje se nalaze između znakova “<“ i “>”
• Tagovi obično idu u parovima npr. <p> i
</p>
• Prvi tag služi za otvaranje a drugi za
zatvaranje elementa
HTML – primer dokumenta
<html>
<body>
<p>Hello World!</p>
</body>
</html>
HTML – struktura dokumenta
Svaki HTML dokument mora imati:
• <html></html> par tagova
• Tekst između ovih tagova opisuje Web stranicu
• <body></body> par tagova
• Tekst između ovih tagova predstavlja sadržaj
vidljiv za korisnika
• <body> tag se nalazi unutar <html> taga
• U HTML dokumentu može postojati samo jedan
<html> tag. Svi ostali tagovi se moraju nalaziti
unutar njega.
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
HTML elementi
Osnovni HTML elementi:
• <p> - paragraf
• <bold> - podebljan tekst
• <i> - kurziv
• <a> - link
• <h1> do <h6> - naslovi
• <hr/> - horizontalna linija
• <br/> - prelom u novi red
• <img> - slika
• <table> - tabela
• <th> - red sa naslovima u tabeli
• <tr> - red u tabeli
• <td> - ćelija u redu u tabeli
• <ul> - neuredjena lista
• <li> - stavka liste
• <ol> - uredjena lista
• <li> - stavka liste
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 atributa
značenje
id
Jedinstveni ID elementa
class
Definiše naziv klase elementa
style
Definiše inline stil elementa
title
Definiše dodatne informacije o elementu
HTML – slike
• Slike se u HTML dokumentu označavaju
pomoću <img> taga
• Svaki <img> tag, pored standardnih
atributa može imati i sledeće atribute:
Naziv atributa
Značenje
src
Putanja do slike
alt
Alternativni tekst
height
Definiše visinu slike
width
Definiše širinu slike
HTML – linkovi
• Linkovi u HTML-u se obeležavaju <a> tagom
• Link može biti slika, tekst, paragraf
(ugnježdavanje html elemenata)
• Svaki <a> tag, pored standardnih atributa
može imati i sledeće atribute:
Naziv atributa
Značenje
href
URL na koji link treba da vodi
name
Naziv linka
target
Definiše gde treba strana da bude
otvorena (_blank, _parent,_self, …)
HTML – linkovi
Primer:
<a href=“http://www.google.com” target=“_blank” >Search</a>
<a href=“http://www.google.com” target=“_self”><img
src=“http://www.richmondwiki.org/images/search-button.png”
width=“30” height=“30”></a>
<p>Za pretragu, 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 tabela dimenzija 3x3
<tr> tag se nalazi unutar <table></table> i označava red u tabeli
<td> tag se nalazi unutar <tr></tr> i označava kolonu (ćeliju) u redu
11
12
13
21
22
23
31
32
33
HTML - tabela
Atributi u <table> tagu:
Naziv atributa
značenje
border
Definiše širinu ivica tabele u pikselima
cellspacing
Definiše rastojanje između polja tabele u pixelima
cellpadding
Definiše rastojanje između sadržaja polja i ivice polja
Pored navedenih atributa, mogu se koristiti i standardni atributi.
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:
Naziv atributa
značenje
align
Definiše horizontalno poravnanje sadržaja polja (left, right, center,
justify…)
valign
Definiše vertikalno poravnanje sadržaja polja (top, middle,baseline,
bottom)
rowspan
Definiše na koliko redova treba da se proteže polje
colspan
Definiše na koliko kolona treba da se proteže polje
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, liste mogu biti:
• Uređene
• Neuređene
•
•
•
•
Uređene liste se obeležavaju <ol> tagom
Neuređene liste se obeležavajuy <ul> tagom
Stavke u listi se obeležavaju <li> tagom
<ul>, <ol> i <li> tagovi mogu imati samo standardan 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>
Pitanja?
CSS
Š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 <style></style> tagova
• U style atributu HTML elementa (inline style)
• Razmatraćemo samo inline style
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
CSS – background
• CSS background služi za stilizovanje
pozadine HTML elemenata
• Background osobine:
Osobina
Opis
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
CSS – text
• CSS text služi za stilizovanje teksta unutar
HTML elemenata
• Text osobine:
Osobina
Opis
color
Definiše boju teksta
direction
Definiše smer teksta
letter-spacing
Definiše rastojanje između slova u tekstu
line-height
Definiše visinu linije teksta
text-align
Definiše horizontalno poravnanje za tekst (center, left right, justify)
text-decoration
Definiše rastojanje između slova u tekstu(underline,overline,linethrough,blink)
text-indent
Definiše uvlačenje prve linije u bloku teksta
CSS – font
• CSS font služi za stilizovanje fonta unutar
HTML elemenata
• Font osobine:
Osobina
Opis
font-family
Definiše vrstu fonta (“Times New Roman”, Arial, Helvetica,…)
font-size
Definiše veličinu fonta
font-style
Definiše stil fonta (normal, italic, oblique)
font-weight
Definiše debljinu fonta (normal,bold,bolder,lighter, 100-900)
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
CSS - Margin
• Margin definiše, kako mu i samo ime kaže,
margine HTML elementa.
• Margine su uvek transparentne, tj ne
poprimaju pozadinu elementa
Osobina
Opis
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
CSS - Border
• Margin definiše ivice HTML elementa.
Osobina
Opis
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
CSS - Padding
• Padding definiše rastojanje između ivice i
samog sadržaja HTML elementa.
• Padding nije transparentan i poprimaju
pozadinu elementa
Osobina
Opis
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
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
Pitanja?
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
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:
•
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr> <td bgcolor=”#000000”>Kod email-a</td></tr>
</table>
Korisni linkovi
• http://www.campaignmonitor.com/designguidelines/
• http://www.w3schools.com/css/
• http://www.w3schools.com/html/
• http://www.campaignmonitor.com/css/
Pitanja?