html & css basic19032013
TRANSCRIPT
Czysty e-mail marketing
HTML i CSS SARE
19032013
Plan spotkania
2 STYLE CSS 1 PODSTAWY HTML
4 ĆWICZENIA 3 PRZYKŁADY
1 Podstawy HTML a) Budowa znacznikoacutew html
b) Struktura strony HTML (html nagłoacutewek ciało)
c) Teksty paragrafy nagłoacutewki pogrubienie kursywa łamanie wiersza linia listy
d) Grafiki ndash odnośnie względne i bezwzględne
e) Powiązań i hiperłącza
f) Tworzenie wiadomości w tabelach ndash kolumny wiersze łączenie komoacuterek
HTML = Hyper Text Markup Language
ltHTMLgt
lthtmlgt
ltHtMlgt
Budowa tagoacutewelementoacutew
Budowa tagoacutewelementoacutew
Budowa tagoacutewelementoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
Atrybuty znacznikoacutew
ltbgthellipltbgt
lth1gthelliplth1gt
lth2gthelliplth2gt
ltagthellipltagt
ltbodygthellipltbodygt
ltheadgthellipltheadgt
lthtmlgthelliplthtmlgt
lttablegthelliplttablegt
lttdgthelliplttdgt
lttrgthelliplttrgt
Budowa tagoacutewelementoacutew ndash przykłady
Budowa znacznikoacutew
Struktura strony HTML
lthtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
Struktura strony HTML
lthtmlgt
ltheadgt
ltheadgt
ltbodygtWitaj piękny świecie
ltbodygt
lthtmlgt
Struktura strony HTML - ćwiczenie
lthtmlgt
ltheadgt lttitlegtMoja pierwsza strona internetowalttitlegt
ltheadgt
ltbodygtWitaj piękny świecie
ltbodygt
lthtmlgt
Struktura strony HTML - ćwiczenie
lth1gtLorem ipsum dolor sit amethelliplth1gt
lth2gtPellentesque habitant morblth2gt
lth3gtTo jest trzeci nagłoacutewkeklth3gt
lth4gtNagłoacutewek 4 rzędulth4gt
lth5gtTytuł nr 5lth5gt
lth6gtNumer 6lth6gt
Teksty nagłoacutewki
ltpgtLitwo Ojczyzno moja Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deski Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie Roacuteżnorakie i znaczenia tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty paragrafy
ltpgtLitwo Ojczyzno moja ltbgtTy jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie Roacuteżnorakie i znaczenia tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty pogrubienie
ltpgtLitwo Ojczyzno moja ltbgtTy jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty kursywa
ltpgtLitwo Ojczyzno moja ltbgt Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem ltbr gtRumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty łamanie wiersza
ltpgtLitwo Ojczyzno moja ltbgt Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem ltbr gtRumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
lthr gt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty linia pozioma
ltolgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltolgt
Teksty lista uporządkowana
ltulgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltulgt
Teksty Lista nieuporządkowana
ltimg src=paletejpg alt=Paleta gt
ltimg src=imagespaletejpg alt=Paleta gt
Grafiki ndash odnośnie względne
ltimg src=
httpwwwdecathlonplmedia
8238239828classic_400PX_me
diacom_525355685jpg
alt=bdquoBluza Domyos gt
Grafiki ndash odnośnie bezwzględne
ltimg src=paletejpg alt=Paleta
width=141 height=128 gt
Grafiki ndash atrybut ltwidthgt i ltheightgt
ltimg src=paletejpg alt=Paleta
width=141 height=128 align=left gt
Grafiki ndash atrybut ltaligngt [leftcenterrightjustifytopbottommiddle]
lta href=httpwwwsareplgtTo jest
link do strony SAREltagt
Hiperłącza linki odnośniki do stron zewnętrznych
lta href=kontaktplgtSkontaktuj się z
namiltagt
Hiperłącza linki odnośniki do stron wewnętrznych
lta href=kontaktpl target=_blankgtSkontaktuj się
z namiltagt
Otwieranie linkoacutew w nowym oknie
lta href=mailtobiuroabcplgtNapisz
do nas emailltagt
Email link
lttablegt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele
lttable border=1gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - obramowanie
lttable border=1 width=300gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - szerokość
lttable border=1 width=300gt
lttrgt
lttd align=right valign=topgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - pozostałe
lttable border=1 width=300gt
lttrgt
lttd colspan=3gtKomoacuterka 1lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 2lttdgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - colspan
lttable border=1 width=300gt
lttrgt
lttd rowspan=3gtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - rowspan
CSS = Cascading Style Sheets
2 Stosowanie styloacutew CSS a) Stosowanie czcionek
b) Wielkość tekstu i formatowanie tekstu poprzez style css
c) Zmiana kolor tekstu tła
d) Pozycjonowanie tekstu
e) Pozycjonowanie tekstu i grafik
f) Style linkoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
CSS stosowanie czcionek
ltp style=font-size16pxgtTo jest czcionka wielkości 16ltpgt
ltp style=font-familycouriergtTo jest czcionka Courierltpgt
ltp style=font-size16px font-familycouriergtTo jest czcionka Courier wielkości 16 pikseliltpgt
CSS stosowanie czcionek
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 font-size 30px font-family arial
h2 font-size 15px font-family courier
p font-size 8px font-family times new roman
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Wielkość tekstu i formatowanie tekstu
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
Plan spotkania
2 STYLE CSS 1 PODSTAWY HTML
4 ĆWICZENIA 3 PRZYKŁADY
1 Podstawy HTML a) Budowa znacznikoacutew html
b) Struktura strony HTML (html nagłoacutewek ciało)
c) Teksty paragrafy nagłoacutewki pogrubienie kursywa łamanie wiersza linia listy
d) Grafiki ndash odnośnie względne i bezwzględne
e) Powiązań i hiperłącza
f) Tworzenie wiadomości w tabelach ndash kolumny wiersze łączenie komoacuterek
HTML = Hyper Text Markup Language
ltHTMLgt
lthtmlgt
ltHtMlgt
Budowa tagoacutewelementoacutew
Budowa tagoacutewelementoacutew
Budowa tagoacutewelementoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
Atrybuty znacznikoacutew
ltbgthellipltbgt
lth1gthelliplth1gt
lth2gthelliplth2gt
ltagthellipltagt
ltbodygthellipltbodygt
ltheadgthellipltheadgt
lthtmlgthelliplthtmlgt
lttablegthelliplttablegt
lttdgthelliplttdgt
lttrgthelliplttrgt
Budowa tagoacutewelementoacutew ndash przykłady
Budowa znacznikoacutew
Struktura strony HTML
lthtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
Struktura strony HTML
lthtmlgt
ltheadgt
ltheadgt
ltbodygtWitaj piękny świecie
ltbodygt
lthtmlgt
Struktura strony HTML - ćwiczenie
lthtmlgt
ltheadgt lttitlegtMoja pierwsza strona internetowalttitlegt
ltheadgt
ltbodygtWitaj piękny świecie
ltbodygt
lthtmlgt
Struktura strony HTML - ćwiczenie
lth1gtLorem ipsum dolor sit amethelliplth1gt
lth2gtPellentesque habitant morblth2gt
lth3gtTo jest trzeci nagłoacutewkeklth3gt
lth4gtNagłoacutewek 4 rzędulth4gt
lth5gtTytuł nr 5lth5gt
lth6gtNumer 6lth6gt
Teksty nagłoacutewki
ltpgtLitwo Ojczyzno moja Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deski Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie Roacuteżnorakie i znaczenia tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty paragrafy
ltpgtLitwo Ojczyzno moja ltbgtTy jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie Roacuteżnorakie i znaczenia tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty pogrubienie
ltpgtLitwo Ojczyzno moja ltbgtTy jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty kursywa
ltpgtLitwo Ojczyzno moja ltbgt Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem ltbr gtRumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty łamanie wiersza
ltpgtLitwo Ojczyzno moja ltbgt Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem ltbr gtRumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
lthr gt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty linia pozioma
ltolgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltolgt
Teksty lista uporządkowana
ltulgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltulgt
Teksty Lista nieuporządkowana
ltimg src=paletejpg alt=Paleta gt
ltimg src=imagespaletejpg alt=Paleta gt
Grafiki ndash odnośnie względne
ltimg src=
httpwwwdecathlonplmedia
8238239828classic_400PX_me
diacom_525355685jpg
alt=bdquoBluza Domyos gt
Grafiki ndash odnośnie bezwzględne
ltimg src=paletejpg alt=Paleta
width=141 height=128 gt
Grafiki ndash atrybut ltwidthgt i ltheightgt
ltimg src=paletejpg alt=Paleta
width=141 height=128 align=left gt
Grafiki ndash atrybut ltaligngt [leftcenterrightjustifytopbottommiddle]
lta href=httpwwwsareplgtTo jest
link do strony SAREltagt
Hiperłącza linki odnośniki do stron zewnętrznych
lta href=kontaktplgtSkontaktuj się z
namiltagt
Hiperłącza linki odnośniki do stron wewnętrznych
lta href=kontaktpl target=_blankgtSkontaktuj się
z namiltagt
Otwieranie linkoacutew w nowym oknie
lta href=mailtobiuroabcplgtNapisz
do nas emailltagt
Email link
lttablegt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele
lttable border=1gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - obramowanie
lttable border=1 width=300gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - szerokość
lttable border=1 width=300gt
lttrgt
lttd align=right valign=topgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - pozostałe
lttable border=1 width=300gt
lttrgt
lttd colspan=3gtKomoacuterka 1lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 2lttdgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - colspan
lttable border=1 width=300gt
lttrgt
lttd rowspan=3gtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - rowspan
CSS = Cascading Style Sheets
2 Stosowanie styloacutew CSS a) Stosowanie czcionek
b) Wielkość tekstu i formatowanie tekstu poprzez style css
c) Zmiana kolor tekstu tła
d) Pozycjonowanie tekstu
e) Pozycjonowanie tekstu i grafik
f) Style linkoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
CSS stosowanie czcionek
ltp style=font-size16pxgtTo jest czcionka wielkości 16ltpgt
ltp style=font-familycouriergtTo jest czcionka Courierltpgt
ltp style=font-size16px font-familycouriergtTo jest czcionka Courier wielkości 16 pikseliltpgt
CSS stosowanie czcionek
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 font-size 30px font-family arial
h2 font-size 15px font-family courier
p font-size 8px font-family times new roman
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Wielkość tekstu i formatowanie tekstu
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
1 Podstawy HTML a) Budowa znacznikoacutew html
b) Struktura strony HTML (html nagłoacutewek ciało)
c) Teksty paragrafy nagłoacutewki pogrubienie kursywa łamanie wiersza linia listy
d) Grafiki ndash odnośnie względne i bezwzględne
e) Powiązań i hiperłącza
f) Tworzenie wiadomości w tabelach ndash kolumny wiersze łączenie komoacuterek
HTML = Hyper Text Markup Language
ltHTMLgt
lthtmlgt
ltHtMlgt
Budowa tagoacutewelementoacutew
Budowa tagoacutewelementoacutew
Budowa tagoacutewelementoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
Atrybuty znacznikoacutew
ltbgthellipltbgt
lth1gthelliplth1gt
lth2gthelliplth2gt
ltagthellipltagt
ltbodygthellipltbodygt
ltheadgthellipltheadgt
lthtmlgthelliplthtmlgt
lttablegthelliplttablegt
lttdgthelliplttdgt
lttrgthelliplttrgt
Budowa tagoacutewelementoacutew ndash przykłady
Budowa znacznikoacutew
Struktura strony HTML
lthtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
Struktura strony HTML
lthtmlgt
ltheadgt
ltheadgt
ltbodygtWitaj piękny świecie
ltbodygt
lthtmlgt
Struktura strony HTML - ćwiczenie
lthtmlgt
ltheadgt lttitlegtMoja pierwsza strona internetowalttitlegt
ltheadgt
ltbodygtWitaj piękny świecie
ltbodygt
lthtmlgt
Struktura strony HTML - ćwiczenie
lth1gtLorem ipsum dolor sit amethelliplth1gt
lth2gtPellentesque habitant morblth2gt
lth3gtTo jest trzeci nagłoacutewkeklth3gt
lth4gtNagłoacutewek 4 rzędulth4gt
lth5gtTytuł nr 5lth5gt
lth6gtNumer 6lth6gt
Teksty nagłoacutewki
ltpgtLitwo Ojczyzno moja Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deski Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie Roacuteżnorakie i znaczenia tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty paragrafy
ltpgtLitwo Ojczyzno moja ltbgtTy jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie Roacuteżnorakie i znaczenia tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty pogrubienie
ltpgtLitwo Ojczyzno moja ltbgtTy jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty kursywa
ltpgtLitwo Ojczyzno moja ltbgt Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem ltbr gtRumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty łamanie wiersza
ltpgtLitwo Ojczyzno moja ltbgt Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem ltbr gtRumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
lthr gt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty linia pozioma
ltolgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltolgt
Teksty lista uporządkowana
ltulgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltulgt
Teksty Lista nieuporządkowana
ltimg src=paletejpg alt=Paleta gt
ltimg src=imagespaletejpg alt=Paleta gt
Grafiki ndash odnośnie względne
ltimg src=
httpwwwdecathlonplmedia
8238239828classic_400PX_me
diacom_525355685jpg
alt=bdquoBluza Domyos gt
Grafiki ndash odnośnie bezwzględne
ltimg src=paletejpg alt=Paleta
width=141 height=128 gt
Grafiki ndash atrybut ltwidthgt i ltheightgt
ltimg src=paletejpg alt=Paleta
width=141 height=128 align=left gt
Grafiki ndash atrybut ltaligngt [leftcenterrightjustifytopbottommiddle]
lta href=httpwwwsareplgtTo jest
link do strony SAREltagt
Hiperłącza linki odnośniki do stron zewnętrznych
lta href=kontaktplgtSkontaktuj się z
namiltagt
Hiperłącza linki odnośniki do stron wewnętrznych
lta href=kontaktpl target=_blankgtSkontaktuj się
z namiltagt
Otwieranie linkoacutew w nowym oknie
lta href=mailtobiuroabcplgtNapisz
do nas emailltagt
Email link
lttablegt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele
lttable border=1gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - obramowanie
lttable border=1 width=300gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - szerokość
lttable border=1 width=300gt
lttrgt
lttd align=right valign=topgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - pozostałe
lttable border=1 width=300gt
lttrgt
lttd colspan=3gtKomoacuterka 1lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 2lttdgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - colspan
lttable border=1 width=300gt
lttrgt
lttd rowspan=3gtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - rowspan
CSS = Cascading Style Sheets
2 Stosowanie styloacutew CSS a) Stosowanie czcionek
b) Wielkość tekstu i formatowanie tekstu poprzez style css
c) Zmiana kolor tekstu tła
d) Pozycjonowanie tekstu
e) Pozycjonowanie tekstu i grafik
f) Style linkoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
CSS stosowanie czcionek
ltp style=font-size16pxgtTo jest czcionka wielkości 16ltpgt
ltp style=font-familycouriergtTo jest czcionka Courierltpgt
ltp style=font-size16px font-familycouriergtTo jest czcionka Courier wielkości 16 pikseliltpgt
CSS stosowanie czcionek
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 font-size 30px font-family arial
h2 font-size 15px font-family courier
p font-size 8px font-family times new roman
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Wielkość tekstu i formatowanie tekstu
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
HTML = Hyper Text Markup Language
ltHTMLgt
lthtmlgt
ltHtMlgt
Budowa tagoacutewelementoacutew
Budowa tagoacutewelementoacutew
Budowa tagoacutewelementoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
Atrybuty znacznikoacutew
ltbgthellipltbgt
lth1gthelliplth1gt
lth2gthelliplth2gt
ltagthellipltagt
ltbodygthellipltbodygt
ltheadgthellipltheadgt
lthtmlgthelliplthtmlgt
lttablegthelliplttablegt
lttdgthelliplttdgt
lttrgthelliplttrgt
Budowa tagoacutewelementoacutew ndash przykłady
Budowa znacznikoacutew
Struktura strony HTML
lthtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
Struktura strony HTML
lthtmlgt
ltheadgt
ltheadgt
ltbodygtWitaj piękny świecie
ltbodygt
lthtmlgt
Struktura strony HTML - ćwiczenie
lthtmlgt
ltheadgt lttitlegtMoja pierwsza strona internetowalttitlegt
ltheadgt
ltbodygtWitaj piękny świecie
ltbodygt
lthtmlgt
Struktura strony HTML - ćwiczenie
lth1gtLorem ipsum dolor sit amethelliplth1gt
lth2gtPellentesque habitant morblth2gt
lth3gtTo jest trzeci nagłoacutewkeklth3gt
lth4gtNagłoacutewek 4 rzędulth4gt
lth5gtTytuł nr 5lth5gt
lth6gtNumer 6lth6gt
Teksty nagłoacutewki
ltpgtLitwo Ojczyzno moja Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deski Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie Roacuteżnorakie i znaczenia tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty paragrafy
ltpgtLitwo Ojczyzno moja ltbgtTy jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie Roacuteżnorakie i znaczenia tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty pogrubienie
ltpgtLitwo Ojczyzno moja ltbgtTy jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty kursywa
ltpgtLitwo Ojczyzno moja ltbgt Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem ltbr gtRumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty łamanie wiersza
ltpgtLitwo Ojczyzno moja ltbgt Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem ltbr gtRumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
lthr gt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty linia pozioma
ltolgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltolgt
Teksty lista uporządkowana
ltulgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltulgt
Teksty Lista nieuporządkowana
ltimg src=paletejpg alt=Paleta gt
ltimg src=imagespaletejpg alt=Paleta gt
Grafiki ndash odnośnie względne
ltimg src=
httpwwwdecathlonplmedia
8238239828classic_400PX_me
diacom_525355685jpg
alt=bdquoBluza Domyos gt
Grafiki ndash odnośnie bezwzględne
ltimg src=paletejpg alt=Paleta
width=141 height=128 gt
Grafiki ndash atrybut ltwidthgt i ltheightgt
ltimg src=paletejpg alt=Paleta
width=141 height=128 align=left gt
Grafiki ndash atrybut ltaligngt [leftcenterrightjustifytopbottommiddle]
lta href=httpwwwsareplgtTo jest
link do strony SAREltagt
Hiperłącza linki odnośniki do stron zewnętrznych
lta href=kontaktplgtSkontaktuj się z
namiltagt
Hiperłącza linki odnośniki do stron wewnętrznych
lta href=kontaktpl target=_blankgtSkontaktuj się
z namiltagt
Otwieranie linkoacutew w nowym oknie
lta href=mailtobiuroabcplgtNapisz
do nas emailltagt
Email link
lttablegt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele
lttable border=1gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - obramowanie
lttable border=1 width=300gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - szerokość
lttable border=1 width=300gt
lttrgt
lttd align=right valign=topgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - pozostałe
lttable border=1 width=300gt
lttrgt
lttd colspan=3gtKomoacuterka 1lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 2lttdgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - colspan
lttable border=1 width=300gt
lttrgt
lttd rowspan=3gtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - rowspan
CSS = Cascading Style Sheets
2 Stosowanie styloacutew CSS a) Stosowanie czcionek
b) Wielkość tekstu i formatowanie tekstu poprzez style css
c) Zmiana kolor tekstu tła
d) Pozycjonowanie tekstu
e) Pozycjonowanie tekstu i grafik
f) Style linkoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
CSS stosowanie czcionek
ltp style=font-size16pxgtTo jest czcionka wielkości 16ltpgt
ltp style=font-familycouriergtTo jest czcionka Courierltpgt
ltp style=font-size16px font-familycouriergtTo jest czcionka Courier wielkości 16 pikseliltpgt
CSS stosowanie czcionek
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 font-size 30px font-family arial
h2 font-size 15px font-family courier
p font-size 8px font-family times new roman
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Wielkość tekstu i formatowanie tekstu
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
ltHTMLgt
lthtmlgt
ltHtMlgt
Budowa tagoacutewelementoacutew
Budowa tagoacutewelementoacutew
Budowa tagoacutewelementoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
Atrybuty znacznikoacutew
ltbgthellipltbgt
lth1gthelliplth1gt
lth2gthelliplth2gt
ltagthellipltagt
ltbodygthellipltbodygt
ltheadgthellipltheadgt
lthtmlgthelliplthtmlgt
lttablegthelliplttablegt
lttdgthelliplttdgt
lttrgthelliplttrgt
Budowa tagoacutewelementoacutew ndash przykłady
Budowa znacznikoacutew
Struktura strony HTML
lthtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
Struktura strony HTML
lthtmlgt
ltheadgt
ltheadgt
ltbodygtWitaj piękny świecie
ltbodygt
lthtmlgt
Struktura strony HTML - ćwiczenie
lthtmlgt
ltheadgt lttitlegtMoja pierwsza strona internetowalttitlegt
ltheadgt
ltbodygtWitaj piękny świecie
ltbodygt
lthtmlgt
Struktura strony HTML - ćwiczenie
lth1gtLorem ipsum dolor sit amethelliplth1gt
lth2gtPellentesque habitant morblth2gt
lth3gtTo jest trzeci nagłoacutewkeklth3gt
lth4gtNagłoacutewek 4 rzędulth4gt
lth5gtTytuł nr 5lth5gt
lth6gtNumer 6lth6gt
Teksty nagłoacutewki
ltpgtLitwo Ojczyzno moja Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deski Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie Roacuteżnorakie i znaczenia tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty paragrafy
ltpgtLitwo Ojczyzno moja ltbgtTy jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie Roacuteżnorakie i znaczenia tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty pogrubienie
ltpgtLitwo Ojczyzno moja ltbgtTy jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty kursywa
ltpgtLitwo Ojczyzno moja ltbgt Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem ltbr gtRumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty łamanie wiersza
ltpgtLitwo Ojczyzno moja ltbgt Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem ltbr gtRumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
lthr gt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty linia pozioma
ltolgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltolgt
Teksty lista uporządkowana
ltulgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltulgt
Teksty Lista nieuporządkowana
ltimg src=paletejpg alt=Paleta gt
ltimg src=imagespaletejpg alt=Paleta gt
Grafiki ndash odnośnie względne
ltimg src=
httpwwwdecathlonplmedia
8238239828classic_400PX_me
diacom_525355685jpg
alt=bdquoBluza Domyos gt
Grafiki ndash odnośnie bezwzględne
ltimg src=paletejpg alt=Paleta
width=141 height=128 gt
Grafiki ndash atrybut ltwidthgt i ltheightgt
ltimg src=paletejpg alt=Paleta
width=141 height=128 align=left gt
Grafiki ndash atrybut ltaligngt [leftcenterrightjustifytopbottommiddle]
lta href=httpwwwsareplgtTo jest
link do strony SAREltagt
Hiperłącza linki odnośniki do stron zewnętrznych
lta href=kontaktplgtSkontaktuj się z
namiltagt
Hiperłącza linki odnośniki do stron wewnętrznych
lta href=kontaktpl target=_blankgtSkontaktuj się
z namiltagt
Otwieranie linkoacutew w nowym oknie
lta href=mailtobiuroabcplgtNapisz
do nas emailltagt
Email link
lttablegt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele
lttable border=1gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - obramowanie
lttable border=1 width=300gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - szerokość
lttable border=1 width=300gt
lttrgt
lttd align=right valign=topgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - pozostałe
lttable border=1 width=300gt
lttrgt
lttd colspan=3gtKomoacuterka 1lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 2lttdgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - colspan
lttable border=1 width=300gt
lttrgt
lttd rowspan=3gtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - rowspan
CSS = Cascading Style Sheets
2 Stosowanie styloacutew CSS a) Stosowanie czcionek
b) Wielkość tekstu i formatowanie tekstu poprzez style css
c) Zmiana kolor tekstu tła
d) Pozycjonowanie tekstu
e) Pozycjonowanie tekstu i grafik
f) Style linkoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
CSS stosowanie czcionek
ltp style=font-size16pxgtTo jest czcionka wielkości 16ltpgt
ltp style=font-familycouriergtTo jest czcionka Courierltpgt
ltp style=font-size16px font-familycouriergtTo jest czcionka Courier wielkości 16 pikseliltpgt
CSS stosowanie czcionek
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 font-size 30px font-family arial
h2 font-size 15px font-family courier
p font-size 8px font-family times new roman
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Wielkość tekstu i formatowanie tekstu
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
Budowa tagoacutewelementoacutew
Budowa tagoacutewelementoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
Atrybuty znacznikoacutew
ltbgthellipltbgt
lth1gthelliplth1gt
lth2gthelliplth2gt
ltagthellipltagt
ltbodygthellipltbodygt
ltheadgthellipltheadgt
lthtmlgthelliplthtmlgt
lttablegthelliplttablegt
lttdgthelliplttdgt
lttrgthelliplttrgt
Budowa tagoacutewelementoacutew ndash przykłady
Budowa znacznikoacutew
Struktura strony HTML
lthtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
Struktura strony HTML
lthtmlgt
ltheadgt
ltheadgt
ltbodygtWitaj piękny świecie
ltbodygt
lthtmlgt
Struktura strony HTML - ćwiczenie
lthtmlgt
ltheadgt lttitlegtMoja pierwsza strona internetowalttitlegt
ltheadgt
ltbodygtWitaj piękny świecie
ltbodygt
lthtmlgt
Struktura strony HTML - ćwiczenie
lth1gtLorem ipsum dolor sit amethelliplth1gt
lth2gtPellentesque habitant morblth2gt
lth3gtTo jest trzeci nagłoacutewkeklth3gt
lth4gtNagłoacutewek 4 rzędulth4gt
lth5gtTytuł nr 5lth5gt
lth6gtNumer 6lth6gt
Teksty nagłoacutewki
ltpgtLitwo Ojczyzno moja Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deski Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie Roacuteżnorakie i znaczenia tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty paragrafy
ltpgtLitwo Ojczyzno moja ltbgtTy jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie Roacuteżnorakie i znaczenia tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty pogrubienie
ltpgtLitwo Ojczyzno moja ltbgtTy jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty kursywa
ltpgtLitwo Ojczyzno moja ltbgt Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem ltbr gtRumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty łamanie wiersza
ltpgtLitwo Ojczyzno moja ltbgt Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem ltbr gtRumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
lthr gt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty linia pozioma
ltolgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltolgt
Teksty lista uporządkowana
ltulgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltulgt
Teksty Lista nieuporządkowana
ltimg src=paletejpg alt=Paleta gt
ltimg src=imagespaletejpg alt=Paleta gt
Grafiki ndash odnośnie względne
ltimg src=
httpwwwdecathlonplmedia
8238239828classic_400PX_me
diacom_525355685jpg
alt=bdquoBluza Domyos gt
Grafiki ndash odnośnie bezwzględne
ltimg src=paletejpg alt=Paleta
width=141 height=128 gt
Grafiki ndash atrybut ltwidthgt i ltheightgt
ltimg src=paletejpg alt=Paleta
width=141 height=128 align=left gt
Grafiki ndash atrybut ltaligngt [leftcenterrightjustifytopbottommiddle]
lta href=httpwwwsareplgtTo jest
link do strony SAREltagt
Hiperłącza linki odnośniki do stron zewnętrznych
lta href=kontaktplgtSkontaktuj się z
namiltagt
Hiperłącza linki odnośniki do stron wewnętrznych
lta href=kontaktpl target=_blankgtSkontaktuj się
z namiltagt
Otwieranie linkoacutew w nowym oknie
lta href=mailtobiuroabcplgtNapisz
do nas emailltagt
Email link
lttablegt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele
lttable border=1gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - obramowanie
lttable border=1 width=300gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - szerokość
lttable border=1 width=300gt
lttrgt
lttd align=right valign=topgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - pozostałe
lttable border=1 width=300gt
lttrgt
lttd colspan=3gtKomoacuterka 1lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 2lttdgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - colspan
lttable border=1 width=300gt
lttrgt
lttd rowspan=3gtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - rowspan
CSS = Cascading Style Sheets
2 Stosowanie styloacutew CSS a) Stosowanie czcionek
b) Wielkość tekstu i formatowanie tekstu poprzez style css
c) Zmiana kolor tekstu tła
d) Pozycjonowanie tekstu
e) Pozycjonowanie tekstu i grafik
f) Style linkoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
CSS stosowanie czcionek
ltp style=font-size16pxgtTo jest czcionka wielkości 16ltpgt
ltp style=font-familycouriergtTo jest czcionka Courierltpgt
ltp style=font-size16px font-familycouriergtTo jest czcionka Courier wielkości 16 pikseliltpgt
CSS stosowanie czcionek
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 font-size 30px font-family arial
h2 font-size 15px font-family courier
p font-size 8px font-family times new roman
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Wielkość tekstu i formatowanie tekstu
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
Budowa tagoacutewelementoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
Atrybuty znacznikoacutew
ltbgthellipltbgt
lth1gthelliplth1gt
lth2gthelliplth2gt
ltagthellipltagt
ltbodygthellipltbodygt
ltheadgthellipltheadgt
lthtmlgthelliplthtmlgt
lttablegthelliplttablegt
lttdgthelliplttdgt
lttrgthelliplttrgt
Budowa tagoacutewelementoacutew ndash przykłady
Budowa znacznikoacutew
Struktura strony HTML
lthtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
Struktura strony HTML
lthtmlgt
ltheadgt
ltheadgt
ltbodygtWitaj piękny świecie
ltbodygt
lthtmlgt
Struktura strony HTML - ćwiczenie
lthtmlgt
ltheadgt lttitlegtMoja pierwsza strona internetowalttitlegt
ltheadgt
ltbodygtWitaj piękny świecie
ltbodygt
lthtmlgt
Struktura strony HTML - ćwiczenie
lth1gtLorem ipsum dolor sit amethelliplth1gt
lth2gtPellentesque habitant morblth2gt
lth3gtTo jest trzeci nagłoacutewkeklth3gt
lth4gtNagłoacutewek 4 rzędulth4gt
lth5gtTytuł nr 5lth5gt
lth6gtNumer 6lth6gt
Teksty nagłoacutewki
ltpgtLitwo Ojczyzno moja Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deski Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie Roacuteżnorakie i znaczenia tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty paragrafy
ltpgtLitwo Ojczyzno moja ltbgtTy jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie Roacuteżnorakie i znaczenia tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty pogrubienie
ltpgtLitwo Ojczyzno moja ltbgtTy jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty kursywa
ltpgtLitwo Ojczyzno moja ltbgt Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem ltbr gtRumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty łamanie wiersza
ltpgtLitwo Ojczyzno moja ltbgt Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem ltbr gtRumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
lthr gt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty linia pozioma
ltolgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltolgt
Teksty lista uporządkowana
ltulgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltulgt
Teksty Lista nieuporządkowana
ltimg src=paletejpg alt=Paleta gt
ltimg src=imagespaletejpg alt=Paleta gt
Grafiki ndash odnośnie względne
ltimg src=
httpwwwdecathlonplmedia
8238239828classic_400PX_me
diacom_525355685jpg
alt=bdquoBluza Domyos gt
Grafiki ndash odnośnie bezwzględne
ltimg src=paletejpg alt=Paleta
width=141 height=128 gt
Grafiki ndash atrybut ltwidthgt i ltheightgt
ltimg src=paletejpg alt=Paleta
width=141 height=128 align=left gt
Grafiki ndash atrybut ltaligngt [leftcenterrightjustifytopbottommiddle]
lta href=httpwwwsareplgtTo jest
link do strony SAREltagt
Hiperłącza linki odnośniki do stron zewnętrznych
lta href=kontaktplgtSkontaktuj się z
namiltagt
Hiperłącza linki odnośniki do stron wewnętrznych
lta href=kontaktpl target=_blankgtSkontaktuj się
z namiltagt
Otwieranie linkoacutew w nowym oknie
lta href=mailtobiuroabcplgtNapisz
do nas emailltagt
Email link
lttablegt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele
lttable border=1gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - obramowanie
lttable border=1 width=300gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - szerokość
lttable border=1 width=300gt
lttrgt
lttd align=right valign=topgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - pozostałe
lttable border=1 width=300gt
lttrgt
lttd colspan=3gtKomoacuterka 1lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 2lttdgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - colspan
lttable border=1 width=300gt
lttrgt
lttd rowspan=3gtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - rowspan
CSS = Cascading Style Sheets
2 Stosowanie styloacutew CSS a) Stosowanie czcionek
b) Wielkość tekstu i formatowanie tekstu poprzez style css
c) Zmiana kolor tekstu tła
d) Pozycjonowanie tekstu
e) Pozycjonowanie tekstu i grafik
f) Style linkoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
CSS stosowanie czcionek
ltp style=font-size16pxgtTo jest czcionka wielkości 16ltpgt
ltp style=font-familycouriergtTo jest czcionka Courierltpgt
ltp style=font-size16px font-familycouriergtTo jest czcionka Courier wielkości 16 pikseliltpgt
CSS stosowanie czcionek
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 font-size 30px font-family arial
h2 font-size 15px font-family courier
p font-size 8px font-family times new roman
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Wielkość tekstu i formatowanie tekstu
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
ltp style=font-size 16pxgt Witaj świecieltpgt
Atrybuty znacznikoacutew
ltbgthellipltbgt
lth1gthelliplth1gt
lth2gthelliplth2gt
ltagthellipltagt
ltbodygthellipltbodygt
ltheadgthellipltheadgt
lthtmlgthelliplthtmlgt
lttablegthelliplttablegt
lttdgthelliplttdgt
lttrgthelliplttrgt
Budowa tagoacutewelementoacutew ndash przykłady
Budowa znacznikoacutew
Struktura strony HTML
lthtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
Struktura strony HTML
lthtmlgt
ltheadgt
ltheadgt
ltbodygtWitaj piękny świecie
ltbodygt
lthtmlgt
Struktura strony HTML - ćwiczenie
lthtmlgt
ltheadgt lttitlegtMoja pierwsza strona internetowalttitlegt
ltheadgt
ltbodygtWitaj piękny świecie
ltbodygt
lthtmlgt
Struktura strony HTML - ćwiczenie
lth1gtLorem ipsum dolor sit amethelliplth1gt
lth2gtPellentesque habitant morblth2gt
lth3gtTo jest trzeci nagłoacutewkeklth3gt
lth4gtNagłoacutewek 4 rzędulth4gt
lth5gtTytuł nr 5lth5gt
lth6gtNumer 6lth6gt
Teksty nagłoacutewki
ltpgtLitwo Ojczyzno moja Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deski Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie Roacuteżnorakie i znaczenia tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty paragrafy
ltpgtLitwo Ojczyzno moja ltbgtTy jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie Roacuteżnorakie i znaczenia tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty pogrubienie
ltpgtLitwo Ojczyzno moja ltbgtTy jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty kursywa
ltpgtLitwo Ojczyzno moja ltbgt Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem ltbr gtRumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty łamanie wiersza
ltpgtLitwo Ojczyzno moja ltbgt Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem ltbr gtRumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
lthr gt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty linia pozioma
ltolgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltolgt
Teksty lista uporządkowana
ltulgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltulgt
Teksty Lista nieuporządkowana
ltimg src=paletejpg alt=Paleta gt
ltimg src=imagespaletejpg alt=Paleta gt
Grafiki ndash odnośnie względne
ltimg src=
httpwwwdecathlonplmedia
8238239828classic_400PX_me
diacom_525355685jpg
alt=bdquoBluza Domyos gt
Grafiki ndash odnośnie bezwzględne
ltimg src=paletejpg alt=Paleta
width=141 height=128 gt
Grafiki ndash atrybut ltwidthgt i ltheightgt
ltimg src=paletejpg alt=Paleta
width=141 height=128 align=left gt
Grafiki ndash atrybut ltaligngt [leftcenterrightjustifytopbottommiddle]
lta href=httpwwwsareplgtTo jest
link do strony SAREltagt
Hiperłącza linki odnośniki do stron zewnętrznych
lta href=kontaktplgtSkontaktuj się z
namiltagt
Hiperłącza linki odnośniki do stron wewnętrznych
lta href=kontaktpl target=_blankgtSkontaktuj się
z namiltagt
Otwieranie linkoacutew w nowym oknie
lta href=mailtobiuroabcplgtNapisz
do nas emailltagt
Email link
lttablegt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele
lttable border=1gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - obramowanie
lttable border=1 width=300gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - szerokość
lttable border=1 width=300gt
lttrgt
lttd align=right valign=topgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - pozostałe
lttable border=1 width=300gt
lttrgt
lttd colspan=3gtKomoacuterka 1lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 2lttdgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - colspan
lttable border=1 width=300gt
lttrgt
lttd rowspan=3gtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - rowspan
CSS = Cascading Style Sheets
2 Stosowanie styloacutew CSS a) Stosowanie czcionek
b) Wielkość tekstu i formatowanie tekstu poprzez style css
c) Zmiana kolor tekstu tła
d) Pozycjonowanie tekstu
e) Pozycjonowanie tekstu i grafik
f) Style linkoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
CSS stosowanie czcionek
ltp style=font-size16pxgtTo jest czcionka wielkości 16ltpgt
ltp style=font-familycouriergtTo jest czcionka Courierltpgt
ltp style=font-size16px font-familycouriergtTo jest czcionka Courier wielkości 16 pikseliltpgt
CSS stosowanie czcionek
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 font-size 30px font-family arial
h2 font-size 15px font-family courier
p font-size 8px font-family times new roman
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Wielkość tekstu i formatowanie tekstu
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
ltbgthellipltbgt
lth1gthelliplth1gt
lth2gthelliplth2gt
ltagthellipltagt
ltbodygthellipltbodygt
ltheadgthellipltheadgt
lthtmlgthelliplthtmlgt
lttablegthelliplttablegt
lttdgthelliplttdgt
lttrgthelliplttrgt
Budowa tagoacutewelementoacutew ndash przykłady
Budowa znacznikoacutew
Struktura strony HTML
lthtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
Struktura strony HTML
lthtmlgt
ltheadgt
ltheadgt
ltbodygtWitaj piękny świecie
ltbodygt
lthtmlgt
Struktura strony HTML - ćwiczenie
lthtmlgt
ltheadgt lttitlegtMoja pierwsza strona internetowalttitlegt
ltheadgt
ltbodygtWitaj piękny świecie
ltbodygt
lthtmlgt
Struktura strony HTML - ćwiczenie
lth1gtLorem ipsum dolor sit amethelliplth1gt
lth2gtPellentesque habitant morblth2gt
lth3gtTo jest trzeci nagłoacutewkeklth3gt
lth4gtNagłoacutewek 4 rzędulth4gt
lth5gtTytuł nr 5lth5gt
lth6gtNumer 6lth6gt
Teksty nagłoacutewki
ltpgtLitwo Ojczyzno moja Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deski Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie Roacuteżnorakie i znaczenia tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty paragrafy
ltpgtLitwo Ojczyzno moja ltbgtTy jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie Roacuteżnorakie i znaczenia tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty pogrubienie
ltpgtLitwo Ojczyzno moja ltbgtTy jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty kursywa
ltpgtLitwo Ojczyzno moja ltbgt Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem ltbr gtRumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty łamanie wiersza
ltpgtLitwo Ojczyzno moja ltbgt Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem ltbr gtRumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
lthr gt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty linia pozioma
ltolgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltolgt
Teksty lista uporządkowana
ltulgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltulgt
Teksty Lista nieuporządkowana
ltimg src=paletejpg alt=Paleta gt
ltimg src=imagespaletejpg alt=Paleta gt
Grafiki ndash odnośnie względne
ltimg src=
httpwwwdecathlonplmedia
8238239828classic_400PX_me
diacom_525355685jpg
alt=bdquoBluza Domyos gt
Grafiki ndash odnośnie bezwzględne
ltimg src=paletejpg alt=Paleta
width=141 height=128 gt
Grafiki ndash atrybut ltwidthgt i ltheightgt
ltimg src=paletejpg alt=Paleta
width=141 height=128 align=left gt
Grafiki ndash atrybut ltaligngt [leftcenterrightjustifytopbottommiddle]
lta href=httpwwwsareplgtTo jest
link do strony SAREltagt
Hiperłącza linki odnośniki do stron zewnętrznych
lta href=kontaktplgtSkontaktuj się z
namiltagt
Hiperłącza linki odnośniki do stron wewnętrznych
lta href=kontaktpl target=_blankgtSkontaktuj się
z namiltagt
Otwieranie linkoacutew w nowym oknie
lta href=mailtobiuroabcplgtNapisz
do nas emailltagt
Email link
lttablegt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele
lttable border=1gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - obramowanie
lttable border=1 width=300gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - szerokość
lttable border=1 width=300gt
lttrgt
lttd align=right valign=topgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - pozostałe
lttable border=1 width=300gt
lttrgt
lttd colspan=3gtKomoacuterka 1lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 2lttdgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - colspan
lttable border=1 width=300gt
lttrgt
lttd rowspan=3gtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - rowspan
CSS = Cascading Style Sheets
2 Stosowanie styloacutew CSS a) Stosowanie czcionek
b) Wielkość tekstu i formatowanie tekstu poprzez style css
c) Zmiana kolor tekstu tła
d) Pozycjonowanie tekstu
e) Pozycjonowanie tekstu i grafik
f) Style linkoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
CSS stosowanie czcionek
ltp style=font-size16pxgtTo jest czcionka wielkości 16ltpgt
ltp style=font-familycouriergtTo jest czcionka Courierltpgt
ltp style=font-size16px font-familycouriergtTo jest czcionka Courier wielkości 16 pikseliltpgt
CSS stosowanie czcionek
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 font-size 30px font-family arial
h2 font-size 15px font-family courier
p font-size 8px font-family times new roman
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Wielkość tekstu i formatowanie tekstu
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
Budowa znacznikoacutew
Struktura strony HTML
lthtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
Struktura strony HTML
lthtmlgt
ltheadgt
ltheadgt
ltbodygtWitaj piękny świecie
ltbodygt
lthtmlgt
Struktura strony HTML - ćwiczenie
lthtmlgt
ltheadgt lttitlegtMoja pierwsza strona internetowalttitlegt
ltheadgt
ltbodygtWitaj piękny świecie
ltbodygt
lthtmlgt
Struktura strony HTML - ćwiczenie
lth1gtLorem ipsum dolor sit amethelliplth1gt
lth2gtPellentesque habitant morblth2gt
lth3gtTo jest trzeci nagłoacutewkeklth3gt
lth4gtNagłoacutewek 4 rzędulth4gt
lth5gtTytuł nr 5lth5gt
lth6gtNumer 6lth6gt
Teksty nagłoacutewki
ltpgtLitwo Ojczyzno moja Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deski Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie Roacuteżnorakie i znaczenia tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty paragrafy
ltpgtLitwo Ojczyzno moja ltbgtTy jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie Roacuteżnorakie i znaczenia tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty pogrubienie
ltpgtLitwo Ojczyzno moja ltbgtTy jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty kursywa
ltpgtLitwo Ojczyzno moja ltbgt Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem ltbr gtRumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty łamanie wiersza
ltpgtLitwo Ojczyzno moja ltbgt Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem ltbr gtRumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
lthr gt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty linia pozioma
ltolgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltolgt
Teksty lista uporządkowana
ltulgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltulgt
Teksty Lista nieuporządkowana
ltimg src=paletejpg alt=Paleta gt
ltimg src=imagespaletejpg alt=Paleta gt
Grafiki ndash odnośnie względne
ltimg src=
httpwwwdecathlonplmedia
8238239828classic_400PX_me
diacom_525355685jpg
alt=bdquoBluza Domyos gt
Grafiki ndash odnośnie bezwzględne
ltimg src=paletejpg alt=Paleta
width=141 height=128 gt
Grafiki ndash atrybut ltwidthgt i ltheightgt
ltimg src=paletejpg alt=Paleta
width=141 height=128 align=left gt
Grafiki ndash atrybut ltaligngt [leftcenterrightjustifytopbottommiddle]
lta href=httpwwwsareplgtTo jest
link do strony SAREltagt
Hiperłącza linki odnośniki do stron zewnętrznych
lta href=kontaktplgtSkontaktuj się z
namiltagt
Hiperłącza linki odnośniki do stron wewnętrznych
lta href=kontaktpl target=_blankgtSkontaktuj się
z namiltagt
Otwieranie linkoacutew w nowym oknie
lta href=mailtobiuroabcplgtNapisz
do nas emailltagt
Email link
lttablegt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele
lttable border=1gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - obramowanie
lttable border=1 width=300gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - szerokość
lttable border=1 width=300gt
lttrgt
lttd align=right valign=topgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - pozostałe
lttable border=1 width=300gt
lttrgt
lttd colspan=3gtKomoacuterka 1lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 2lttdgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - colspan
lttable border=1 width=300gt
lttrgt
lttd rowspan=3gtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - rowspan
CSS = Cascading Style Sheets
2 Stosowanie styloacutew CSS a) Stosowanie czcionek
b) Wielkość tekstu i formatowanie tekstu poprzez style css
c) Zmiana kolor tekstu tła
d) Pozycjonowanie tekstu
e) Pozycjonowanie tekstu i grafik
f) Style linkoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
CSS stosowanie czcionek
ltp style=font-size16pxgtTo jest czcionka wielkości 16ltpgt
ltp style=font-familycouriergtTo jest czcionka Courierltpgt
ltp style=font-size16px font-familycouriergtTo jest czcionka Courier wielkości 16 pikseliltpgt
CSS stosowanie czcionek
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 font-size 30px font-family arial
h2 font-size 15px font-family courier
p font-size 8px font-family times new roman
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Wielkość tekstu i formatowanie tekstu
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
Struktura strony HTML
lthtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
Struktura strony HTML
lthtmlgt
ltheadgt
ltheadgt
ltbodygtWitaj piękny świecie
ltbodygt
lthtmlgt
Struktura strony HTML - ćwiczenie
lthtmlgt
ltheadgt lttitlegtMoja pierwsza strona internetowalttitlegt
ltheadgt
ltbodygtWitaj piękny świecie
ltbodygt
lthtmlgt
Struktura strony HTML - ćwiczenie
lth1gtLorem ipsum dolor sit amethelliplth1gt
lth2gtPellentesque habitant morblth2gt
lth3gtTo jest trzeci nagłoacutewkeklth3gt
lth4gtNagłoacutewek 4 rzędulth4gt
lth5gtTytuł nr 5lth5gt
lth6gtNumer 6lth6gt
Teksty nagłoacutewki
ltpgtLitwo Ojczyzno moja Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deski Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie Roacuteżnorakie i znaczenia tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty paragrafy
ltpgtLitwo Ojczyzno moja ltbgtTy jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie Roacuteżnorakie i znaczenia tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty pogrubienie
ltpgtLitwo Ojczyzno moja ltbgtTy jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty kursywa
ltpgtLitwo Ojczyzno moja ltbgt Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem ltbr gtRumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty łamanie wiersza
ltpgtLitwo Ojczyzno moja ltbgt Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem ltbr gtRumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
lthr gt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty linia pozioma
ltolgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltolgt
Teksty lista uporządkowana
ltulgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltulgt
Teksty Lista nieuporządkowana
ltimg src=paletejpg alt=Paleta gt
ltimg src=imagespaletejpg alt=Paleta gt
Grafiki ndash odnośnie względne
ltimg src=
httpwwwdecathlonplmedia
8238239828classic_400PX_me
diacom_525355685jpg
alt=bdquoBluza Domyos gt
Grafiki ndash odnośnie bezwzględne
ltimg src=paletejpg alt=Paleta
width=141 height=128 gt
Grafiki ndash atrybut ltwidthgt i ltheightgt
ltimg src=paletejpg alt=Paleta
width=141 height=128 align=left gt
Grafiki ndash atrybut ltaligngt [leftcenterrightjustifytopbottommiddle]
lta href=httpwwwsareplgtTo jest
link do strony SAREltagt
Hiperłącza linki odnośniki do stron zewnętrznych
lta href=kontaktplgtSkontaktuj się z
namiltagt
Hiperłącza linki odnośniki do stron wewnętrznych
lta href=kontaktpl target=_blankgtSkontaktuj się
z namiltagt
Otwieranie linkoacutew w nowym oknie
lta href=mailtobiuroabcplgtNapisz
do nas emailltagt
Email link
lttablegt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele
lttable border=1gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - obramowanie
lttable border=1 width=300gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - szerokość
lttable border=1 width=300gt
lttrgt
lttd align=right valign=topgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - pozostałe
lttable border=1 width=300gt
lttrgt
lttd colspan=3gtKomoacuterka 1lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 2lttdgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - colspan
lttable border=1 width=300gt
lttrgt
lttd rowspan=3gtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - rowspan
CSS = Cascading Style Sheets
2 Stosowanie styloacutew CSS a) Stosowanie czcionek
b) Wielkość tekstu i formatowanie tekstu poprzez style css
c) Zmiana kolor tekstu tła
d) Pozycjonowanie tekstu
e) Pozycjonowanie tekstu i grafik
f) Style linkoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
CSS stosowanie czcionek
ltp style=font-size16pxgtTo jest czcionka wielkości 16ltpgt
ltp style=font-familycouriergtTo jest czcionka Courierltpgt
ltp style=font-size16px font-familycouriergtTo jest czcionka Courier wielkości 16 pikseliltpgt
CSS stosowanie czcionek
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 font-size 30px font-family arial
h2 font-size 15px font-family courier
p font-size 8px font-family times new roman
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Wielkość tekstu i formatowanie tekstu
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
lthtmlgt
ltheadgt
ltheadgt
ltbodygt
ltbodygt
lthtmlgt
Struktura strony HTML
lthtmlgt
ltheadgt
ltheadgt
ltbodygtWitaj piękny świecie
ltbodygt
lthtmlgt
Struktura strony HTML - ćwiczenie
lthtmlgt
ltheadgt lttitlegtMoja pierwsza strona internetowalttitlegt
ltheadgt
ltbodygtWitaj piękny świecie
ltbodygt
lthtmlgt
Struktura strony HTML - ćwiczenie
lth1gtLorem ipsum dolor sit amethelliplth1gt
lth2gtPellentesque habitant morblth2gt
lth3gtTo jest trzeci nagłoacutewkeklth3gt
lth4gtNagłoacutewek 4 rzędulth4gt
lth5gtTytuł nr 5lth5gt
lth6gtNumer 6lth6gt
Teksty nagłoacutewki
ltpgtLitwo Ojczyzno moja Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deski Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie Roacuteżnorakie i znaczenia tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty paragrafy
ltpgtLitwo Ojczyzno moja ltbgtTy jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie Roacuteżnorakie i znaczenia tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty pogrubienie
ltpgtLitwo Ojczyzno moja ltbgtTy jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty kursywa
ltpgtLitwo Ojczyzno moja ltbgt Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem ltbr gtRumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty łamanie wiersza
ltpgtLitwo Ojczyzno moja ltbgt Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem ltbr gtRumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
lthr gt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty linia pozioma
ltolgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltolgt
Teksty lista uporządkowana
ltulgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltulgt
Teksty Lista nieuporządkowana
ltimg src=paletejpg alt=Paleta gt
ltimg src=imagespaletejpg alt=Paleta gt
Grafiki ndash odnośnie względne
ltimg src=
httpwwwdecathlonplmedia
8238239828classic_400PX_me
diacom_525355685jpg
alt=bdquoBluza Domyos gt
Grafiki ndash odnośnie bezwzględne
ltimg src=paletejpg alt=Paleta
width=141 height=128 gt
Grafiki ndash atrybut ltwidthgt i ltheightgt
ltimg src=paletejpg alt=Paleta
width=141 height=128 align=left gt
Grafiki ndash atrybut ltaligngt [leftcenterrightjustifytopbottommiddle]
lta href=httpwwwsareplgtTo jest
link do strony SAREltagt
Hiperłącza linki odnośniki do stron zewnętrznych
lta href=kontaktplgtSkontaktuj się z
namiltagt
Hiperłącza linki odnośniki do stron wewnętrznych
lta href=kontaktpl target=_blankgtSkontaktuj się
z namiltagt
Otwieranie linkoacutew w nowym oknie
lta href=mailtobiuroabcplgtNapisz
do nas emailltagt
Email link
lttablegt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele
lttable border=1gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - obramowanie
lttable border=1 width=300gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - szerokość
lttable border=1 width=300gt
lttrgt
lttd align=right valign=topgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - pozostałe
lttable border=1 width=300gt
lttrgt
lttd colspan=3gtKomoacuterka 1lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 2lttdgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - colspan
lttable border=1 width=300gt
lttrgt
lttd rowspan=3gtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - rowspan
CSS = Cascading Style Sheets
2 Stosowanie styloacutew CSS a) Stosowanie czcionek
b) Wielkość tekstu i formatowanie tekstu poprzez style css
c) Zmiana kolor tekstu tła
d) Pozycjonowanie tekstu
e) Pozycjonowanie tekstu i grafik
f) Style linkoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
CSS stosowanie czcionek
ltp style=font-size16pxgtTo jest czcionka wielkości 16ltpgt
ltp style=font-familycouriergtTo jest czcionka Courierltpgt
ltp style=font-size16px font-familycouriergtTo jest czcionka Courier wielkości 16 pikseliltpgt
CSS stosowanie czcionek
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 font-size 30px font-family arial
h2 font-size 15px font-family courier
p font-size 8px font-family times new roman
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Wielkość tekstu i formatowanie tekstu
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
lthtmlgt
ltheadgt
ltheadgt
ltbodygtWitaj piękny świecie
ltbodygt
lthtmlgt
Struktura strony HTML - ćwiczenie
lthtmlgt
ltheadgt lttitlegtMoja pierwsza strona internetowalttitlegt
ltheadgt
ltbodygtWitaj piękny świecie
ltbodygt
lthtmlgt
Struktura strony HTML - ćwiczenie
lth1gtLorem ipsum dolor sit amethelliplth1gt
lth2gtPellentesque habitant morblth2gt
lth3gtTo jest trzeci nagłoacutewkeklth3gt
lth4gtNagłoacutewek 4 rzędulth4gt
lth5gtTytuł nr 5lth5gt
lth6gtNumer 6lth6gt
Teksty nagłoacutewki
ltpgtLitwo Ojczyzno moja Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deski Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie Roacuteżnorakie i znaczenia tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty paragrafy
ltpgtLitwo Ojczyzno moja ltbgtTy jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie Roacuteżnorakie i znaczenia tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty pogrubienie
ltpgtLitwo Ojczyzno moja ltbgtTy jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty kursywa
ltpgtLitwo Ojczyzno moja ltbgt Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem ltbr gtRumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty łamanie wiersza
ltpgtLitwo Ojczyzno moja ltbgt Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem ltbr gtRumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
lthr gt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty linia pozioma
ltolgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltolgt
Teksty lista uporządkowana
ltulgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltulgt
Teksty Lista nieuporządkowana
ltimg src=paletejpg alt=Paleta gt
ltimg src=imagespaletejpg alt=Paleta gt
Grafiki ndash odnośnie względne
ltimg src=
httpwwwdecathlonplmedia
8238239828classic_400PX_me
diacom_525355685jpg
alt=bdquoBluza Domyos gt
Grafiki ndash odnośnie bezwzględne
ltimg src=paletejpg alt=Paleta
width=141 height=128 gt
Grafiki ndash atrybut ltwidthgt i ltheightgt
ltimg src=paletejpg alt=Paleta
width=141 height=128 align=left gt
Grafiki ndash atrybut ltaligngt [leftcenterrightjustifytopbottommiddle]
lta href=httpwwwsareplgtTo jest
link do strony SAREltagt
Hiperłącza linki odnośniki do stron zewnętrznych
lta href=kontaktplgtSkontaktuj się z
namiltagt
Hiperłącza linki odnośniki do stron wewnętrznych
lta href=kontaktpl target=_blankgtSkontaktuj się
z namiltagt
Otwieranie linkoacutew w nowym oknie
lta href=mailtobiuroabcplgtNapisz
do nas emailltagt
Email link
lttablegt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele
lttable border=1gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - obramowanie
lttable border=1 width=300gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - szerokość
lttable border=1 width=300gt
lttrgt
lttd align=right valign=topgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - pozostałe
lttable border=1 width=300gt
lttrgt
lttd colspan=3gtKomoacuterka 1lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 2lttdgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - colspan
lttable border=1 width=300gt
lttrgt
lttd rowspan=3gtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - rowspan
CSS = Cascading Style Sheets
2 Stosowanie styloacutew CSS a) Stosowanie czcionek
b) Wielkość tekstu i formatowanie tekstu poprzez style css
c) Zmiana kolor tekstu tła
d) Pozycjonowanie tekstu
e) Pozycjonowanie tekstu i grafik
f) Style linkoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
CSS stosowanie czcionek
ltp style=font-size16pxgtTo jest czcionka wielkości 16ltpgt
ltp style=font-familycouriergtTo jest czcionka Courierltpgt
ltp style=font-size16px font-familycouriergtTo jest czcionka Courier wielkości 16 pikseliltpgt
CSS stosowanie czcionek
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 font-size 30px font-family arial
h2 font-size 15px font-family courier
p font-size 8px font-family times new roman
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Wielkość tekstu i formatowanie tekstu
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
lthtmlgt
ltheadgt lttitlegtMoja pierwsza strona internetowalttitlegt
ltheadgt
ltbodygtWitaj piękny świecie
ltbodygt
lthtmlgt
Struktura strony HTML - ćwiczenie
lth1gtLorem ipsum dolor sit amethelliplth1gt
lth2gtPellentesque habitant morblth2gt
lth3gtTo jest trzeci nagłoacutewkeklth3gt
lth4gtNagłoacutewek 4 rzędulth4gt
lth5gtTytuł nr 5lth5gt
lth6gtNumer 6lth6gt
Teksty nagłoacutewki
ltpgtLitwo Ojczyzno moja Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deski Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie Roacuteżnorakie i znaczenia tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty paragrafy
ltpgtLitwo Ojczyzno moja ltbgtTy jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie Roacuteżnorakie i znaczenia tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty pogrubienie
ltpgtLitwo Ojczyzno moja ltbgtTy jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty kursywa
ltpgtLitwo Ojczyzno moja ltbgt Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem ltbr gtRumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty łamanie wiersza
ltpgtLitwo Ojczyzno moja ltbgt Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem ltbr gtRumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
lthr gt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty linia pozioma
ltolgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltolgt
Teksty lista uporządkowana
ltulgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltulgt
Teksty Lista nieuporządkowana
ltimg src=paletejpg alt=Paleta gt
ltimg src=imagespaletejpg alt=Paleta gt
Grafiki ndash odnośnie względne
ltimg src=
httpwwwdecathlonplmedia
8238239828classic_400PX_me
diacom_525355685jpg
alt=bdquoBluza Domyos gt
Grafiki ndash odnośnie bezwzględne
ltimg src=paletejpg alt=Paleta
width=141 height=128 gt
Grafiki ndash atrybut ltwidthgt i ltheightgt
ltimg src=paletejpg alt=Paleta
width=141 height=128 align=left gt
Grafiki ndash atrybut ltaligngt [leftcenterrightjustifytopbottommiddle]
lta href=httpwwwsareplgtTo jest
link do strony SAREltagt
Hiperłącza linki odnośniki do stron zewnętrznych
lta href=kontaktplgtSkontaktuj się z
namiltagt
Hiperłącza linki odnośniki do stron wewnętrznych
lta href=kontaktpl target=_blankgtSkontaktuj się
z namiltagt
Otwieranie linkoacutew w nowym oknie
lta href=mailtobiuroabcplgtNapisz
do nas emailltagt
Email link
lttablegt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele
lttable border=1gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - obramowanie
lttable border=1 width=300gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - szerokość
lttable border=1 width=300gt
lttrgt
lttd align=right valign=topgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - pozostałe
lttable border=1 width=300gt
lttrgt
lttd colspan=3gtKomoacuterka 1lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 2lttdgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - colspan
lttable border=1 width=300gt
lttrgt
lttd rowspan=3gtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - rowspan
CSS = Cascading Style Sheets
2 Stosowanie styloacutew CSS a) Stosowanie czcionek
b) Wielkość tekstu i formatowanie tekstu poprzez style css
c) Zmiana kolor tekstu tła
d) Pozycjonowanie tekstu
e) Pozycjonowanie tekstu i grafik
f) Style linkoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
CSS stosowanie czcionek
ltp style=font-size16pxgtTo jest czcionka wielkości 16ltpgt
ltp style=font-familycouriergtTo jest czcionka Courierltpgt
ltp style=font-size16px font-familycouriergtTo jest czcionka Courier wielkości 16 pikseliltpgt
CSS stosowanie czcionek
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 font-size 30px font-family arial
h2 font-size 15px font-family courier
p font-size 8px font-family times new roman
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Wielkość tekstu i formatowanie tekstu
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
lth1gtLorem ipsum dolor sit amethelliplth1gt
lth2gtPellentesque habitant morblth2gt
lth3gtTo jest trzeci nagłoacutewkeklth3gt
lth4gtNagłoacutewek 4 rzędulth4gt
lth5gtTytuł nr 5lth5gt
lth6gtNumer 6lth6gt
Teksty nagłoacutewki
ltpgtLitwo Ojczyzno moja Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deski Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie Roacuteżnorakie i znaczenia tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty paragrafy
ltpgtLitwo Ojczyzno moja ltbgtTy jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie Roacuteżnorakie i znaczenia tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty pogrubienie
ltpgtLitwo Ojczyzno moja ltbgtTy jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty kursywa
ltpgtLitwo Ojczyzno moja ltbgt Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem ltbr gtRumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty łamanie wiersza
ltpgtLitwo Ojczyzno moja ltbgt Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem ltbr gtRumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
lthr gt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty linia pozioma
ltolgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltolgt
Teksty lista uporządkowana
ltulgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltulgt
Teksty Lista nieuporządkowana
ltimg src=paletejpg alt=Paleta gt
ltimg src=imagespaletejpg alt=Paleta gt
Grafiki ndash odnośnie względne
ltimg src=
httpwwwdecathlonplmedia
8238239828classic_400PX_me
diacom_525355685jpg
alt=bdquoBluza Domyos gt
Grafiki ndash odnośnie bezwzględne
ltimg src=paletejpg alt=Paleta
width=141 height=128 gt
Grafiki ndash atrybut ltwidthgt i ltheightgt
ltimg src=paletejpg alt=Paleta
width=141 height=128 align=left gt
Grafiki ndash atrybut ltaligngt [leftcenterrightjustifytopbottommiddle]
lta href=httpwwwsareplgtTo jest
link do strony SAREltagt
Hiperłącza linki odnośniki do stron zewnętrznych
lta href=kontaktplgtSkontaktuj się z
namiltagt
Hiperłącza linki odnośniki do stron wewnętrznych
lta href=kontaktpl target=_blankgtSkontaktuj się
z namiltagt
Otwieranie linkoacutew w nowym oknie
lta href=mailtobiuroabcplgtNapisz
do nas emailltagt
Email link
lttablegt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele
lttable border=1gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - obramowanie
lttable border=1 width=300gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - szerokość
lttable border=1 width=300gt
lttrgt
lttd align=right valign=topgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - pozostałe
lttable border=1 width=300gt
lttrgt
lttd colspan=3gtKomoacuterka 1lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 2lttdgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - colspan
lttable border=1 width=300gt
lttrgt
lttd rowspan=3gtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - rowspan
CSS = Cascading Style Sheets
2 Stosowanie styloacutew CSS a) Stosowanie czcionek
b) Wielkość tekstu i formatowanie tekstu poprzez style css
c) Zmiana kolor tekstu tła
d) Pozycjonowanie tekstu
e) Pozycjonowanie tekstu i grafik
f) Style linkoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
CSS stosowanie czcionek
ltp style=font-size16pxgtTo jest czcionka wielkości 16ltpgt
ltp style=font-familycouriergtTo jest czcionka Courierltpgt
ltp style=font-size16px font-familycouriergtTo jest czcionka Courier wielkości 16 pikseliltpgt
CSS stosowanie czcionek
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 font-size 30px font-family arial
h2 font-size 15px font-family courier
p font-size 8px font-family times new roman
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Wielkość tekstu i formatowanie tekstu
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
ltpgtLitwo Ojczyzno moja Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deski Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie Roacuteżnorakie i znaczenia tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty paragrafy
ltpgtLitwo Ojczyzno moja ltbgtTy jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie Roacuteżnorakie i znaczenia tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty pogrubienie
ltpgtLitwo Ojczyzno moja ltbgtTy jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty kursywa
ltpgtLitwo Ojczyzno moja ltbgt Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem ltbr gtRumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty łamanie wiersza
ltpgtLitwo Ojczyzno moja ltbgt Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem ltbr gtRumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
lthr gt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty linia pozioma
ltolgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltolgt
Teksty lista uporządkowana
ltulgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltulgt
Teksty Lista nieuporządkowana
ltimg src=paletejpg alt=Paleta gt
ltimg src=imagespaletejpg alt=Paleta gt
Grafiki ndash odnośnie względne
ltimg src=
httpwwwdecathlonplmedia
8238239828classic_400PX_me
diacom_525355685jpg
alt=bdquoBluza Domyos gt
Grafiki ndash odnośnie bezwzględne
ltimg src=paletejpg alt=Paleta
width=141 height=128 gt
Grafiki ndash atrybut ltwidthgt i ltheightgt
ltimg src=paletejpg alt=Paleta
width=141 height=128 align=left gt
Grafiki ndash atrybut ltaligngt [leftcenterrightjustifytopbottommiddle]
lta href=httpwwwsareplgtTo jest
link do strony SAREltagt
Hiperłącza linki odnośniki do stron zewnętrznych
lta href=kontaktplgtSkontaktuj się z
namiltagt
Hiperłącza linki odnośniki do stron wewnętrznych
lta href=kontaktpl target=_blankgtSkontaktuj się
z namiltagt
Otwieranie linkoacutew w nowym oknie
lta href=mailtobiuroabcplgtNapisz
do nas emailltagt
Email link
lttablegt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele
lttable border=1gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - obramowanie
lttable border=1 width=300gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - szerokość
lttable border=1 width=300gt
lttrgt
lttd align=right valign=topgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - pozostałe
lttable border=1 width=300gt
lttrgt
lttd colspan=3gtKomoacuterka 1lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 2lttdgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - colspan
lttable border=1 width=300gt
lttrgt
lttd rowspan=3gtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - rowspan
CSS = Cascading Style Sheets
2 Stosowanie styloacutew CSS a) Stosowanie czcionek
b) Wielkość tekstu i formatowanie tekstu poprzez style css
c) Zmiana kolor tekstu tła
d) Pozycjonowanie tekstu
e) Pozycjonowanie tekstu i grafik
f) Style linkoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
CSS stosowanie czcionek
ltp style=font-size16pxgtTo jest czcionka wielkości 16ltpgt
ltp style=font-familycouriergtTo jest czcionka Courierltpgt
ltp style=font-size16px font-familycouriergtTo jest czcionka Courier wielkości 16 pikseliltpgt
CSS stosowanie czcionek
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 font-size 30px font-family arial
h2 font-size 15px font-family courier
p font-size 8px font-family times new roman
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Wielkość tekstu i formatowanie tekstu
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
ltpgtLitwo Ojczyzno moja ltbgtTy jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie Roacuteżnorakie i znaczenia tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty pogrubienie
ltpgtLitwo Ojczyzno moja ltbgtTy jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty kursywa
ltpgtLitwo Ojczyzno moja ltbgt Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem ltbr gtRumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty łamanie wiersza
ltpgtLitwo Ojczyzno moja ltbgt Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem ltbr gtRumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
lthr gt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty linia pozioma
ltolgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltolgt
Teksty lista uporządkowana
ltulgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltulgt
Teksty Lista nieuporządkowana
ltimg src=paletejpg alt=Paleta gt
ltimg src=imagespaletejpg alt=Paleta gt
Grafiki ndash odnośnie względne
ltimg src=
httpwwwdecathlonplmedia
8238239828classic_400PX_me
diacom_525355685jpg
alt=bdquoBluza Domyos gt
Grafiki ndash odnośnie bezwzględne
ltimg src=paletejpg alt=Paleta
width=141 height=128 gt
Grafiki ndash atrybut ltwidthgt i ltheightgt
ltimg src=paletejpg alt=Paleta
width=141 height=128 align=left gt
Grafiki ndash atrybut ltaligngt [leftcenterrightjustifytopbottommiddle]
lta href=httpwwwsareplgtTo jest
link do strony SAREltagt
Hiperłącza linki odnośniki do stron zewnętrznych
lta href=kontaktplgtSkontaktuj się z
namiltagt
Hiperłącza linki odnośniki do stron wewnętrznych
lta href=kontaktpl target=_blankgtSkontaktuj się
z namiltagt
Otwieranie linkoacutew w nowym oknie
lta href=mailtobiuroabcplgtNapisz
do nas emailltagt
Email link
lttablegt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele
lttable border=1gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - obramowanie
lttable border=1 width=300gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - szerokość
lttable border=1 width=300gt
lttrgt
lttd align=right valign=topgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - pozostałe
lttable border=1 width=300gt
lttrgt
lttd colspan=3gtKomoacuterka 1lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 2lttdgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - colspan
lttable border=1 width=300gt
lttrgt
lttd rowspan=3gtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - rowspan
CSS = Cascading Style Sheets
2 Stosowanie styloacutew CSS a) Stosowanie czcionek
b) Wielkość tekstu i formatowanie tekstu poprzez style css
c) Zmiana kolor tekstu tła
d) Pozycjonowanie tekstu
e) Pozycjonowanie tekstu i grafik
f) Style linkoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
CSS stosowanie czcionek
ltp style=font-size16pxgtTo jest czcionka wielkości 16ltpgt
ltp style=font-familycouriergtTo jest czcionka Courierltpgt
ltp style=font-size16px font-familycouriergtTo jest czcionka Courier wielkości 16 pikseliltpgt
CSS stosowanie czcionek
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 font-size 30px font-family arial
h2 font-size 15px font-family courier
p font-size 8px font-family times new roman
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Wielkość tekstu i formatowanie tekstu
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
ltpgtLitwo Ojczyzno moja ltbgtTy jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem Rumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty kursywa
ltpgtLitwo Ojczyzno moja ltbgt Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem ltbr gtRumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty łamanie wiersza
ltpgtLitwo Ojczyzno moja ltbgt Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem ltbr gtRumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
lthr gt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty linia pozioma
ltolgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltolgt
Teksty lista uporządkowana
ltulgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltulgt
Teksty Lista nieuporządkowana
ltimg src=paletejpg alt=Paleta gt
ltimg src=imagespaletejpg alt=Paleta gt
Grafiki ndash odnośnie względne
ltimg src=
httpwwwdecathlonplmedia
8238239828classic_400PX_me
diacom_525355685jpg
alt=bdquoBluza Domyos gt
Grafiki ndash odnośnie bezwzględne
ltimg src=paletejpg alt=Paleta
width=141 height=128 gt
Grafiki ndash atrybut ltwidthgt i ltheightgt
ltimg src=paletejpg alt=Paleta
width=141 height=128 align=left gt
Grafiki ndash atrybut ltaligngt [leftcenterrightjustifytopbottommiddle]
lta href=httpwwwsareplgtTo jest
link do strony SAREltagt
Hiperłącza linki odnośniki do stron zewnętrznych
lta href=kontaktplgtSkontaktuj się z
namiltagt
Hiperłącza linki odnośniki do stron wewnętrznych
lta href=kontaktpl target=_blankgtSkontaktuj się
z namiltagt
Otwieranie linkoacutew w nowym oknie
lta href=mailtobiuroabcplgtNapisz
do nas emailltagt
Email link
lttablegt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele
lttable border=1gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - obramowanie
lttable border=1 width=300gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - szerokość
lttable border=1 width=300gt
lttrgt
lttd align=right valign=topgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - pozostałe
lttable border=1 width=300gt
lttrgt
lttd colspan=3gtKomoacuterka 1lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 2lttdgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - colspan
lttable border=1 width=300gt
lttrgt
lttd rowspan=3gtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - rowspan
CSS = Cascading Style Sheets
2 Stosowanie styloacutew CSS a) Stosowanie czcionek
b) Wielkość tekstu i formatowanie tekstu poprzez style css
c) Zmiana kolor tekstu tła
d) Pozycjonowanie tekstu
e) Pozycjonowanie tekstu i grafik
f) Style linkoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
CSS stosowanie czcionek
ltp style=font-size16pxgtTo jest czcionka wielkości 16ltpgt
ltp style=font-familycouriergtTo jest czcionka Courierltpgt
ltp style=font-size16px font-familycouriergtTo jest czcionka Courier wielkości 16 pikseliltpgt
CSS stosowanie czcionek
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 font-size 30px font-family arial
h2 font-size 15px font-family courier
p font-size 8px font-family times new roman
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Wielkość tekstu i formatowanie tekstu
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
ltpgtLitwo Ojczyzno moja ltbgt Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem ltbr gtRumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty łamanie wiersza
ltpgtLitwo Ojczyzno moja ltbgt Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem ltbr gtRumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
lthr gt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty linia pozioma
ltolgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltolgt
Teksty lista uporządkowana
ltulgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltulgt
Teksty Lista nieuporządkowana
ltimg src=paletejpg alt=Paleta gt
ltimg src=imagespaletejpg alt=Paleta gt
Grafiki ndash odnośnie względne
ltimg src=
httpwwwdecathlonplmedia
8238239828classic_400PX_me
diacom_525355685jpg
alt=bdquoBluza Domyos gt
Grafiki ndash odnośnie bezwzględne
ltimg src=paletejpg alt=Paleta
width=141 height=128 gt
Grafiki ndash atrybut ltwidthgt i ltheightgt
ltimg src=paletejpg alt=Paleta
width=141 height=128 align=left gt
Grafiki ndash atrybut ltaligngt [leftcenterrightjustifytopbottommiddle]
lta href=httpwwwsareplgtTo jest
link do strony SAREltagt
Hiperłącza linki odnośniki do stron zewnętrznych
lta href=kontaktplgtSkontaktuj się z
namiltagt
Hiperłącza linki odnośniki do stron wewnętrznych
lta href=kontaktpl target=_blankgtSkontaktuj się
z namiltagt
Otwieranie linkoacutew w nowym oknie
lta href=mailtobiuroabcplgtNapisz
do nas emailltagt
Email link
lttablegt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele
lttable border=1gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - obramowanie
lttable border=1 width=300gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - szerokość
lttable border=1 width=300gt
lttrgt
lttd align=right valign=topgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - pozostałe
lttable border=1 width=300gt
lttrgt
lttd colspan=3gtKomoacuterka 1lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 2lttdgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - colspan
lttable border=1 width=300gt
lttrgt
lttd rowspan=3gtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - rowspan
CSS = Cascading Style Sheets
2 Stosowanie styloacutew CSS a) Stosowanie czcionek
b) Wielkość tekstu i formatowanie tekstu poprzez style css
c) Zmiana kolor tekstu tła
d) Pozycjonowanie tekstu
e) Pozycjonowanie tekstu i grafik
f) Style linkoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
CSS stosowanie czcionek
ltp style=font-size16pxgtTo jest czcionka wielkości 16ltpgt
ltp style=font-familycouriergtTo jest czcionka Courierltpgt
ltp style=font-size16px font-familycouriergtTo jest czcionka Courier wielkości 16 pikseliltpgt
CSS stosowanie czcionek
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 font-size 30px font-family arial
h2 font-size 15px font-family courier
p font-size 8px font-family times new roman
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Wielkość tekstu i formatowanie tekstu
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
ltpgtLitwo Ojczyzno moja ltbgt Ty jesteś jak zdrowie Nazywał się na szańcach Pragi na kształt deskiltbgt Nogi miał być siedzeniem ltbr gtRumienił się lecz go nie daje czasu szukać mody małpowanie milczał ltpgt
lthr gt
ltpgt Drogi Marszałku Wysoka Izbo PKB rośnie ltigt Roacuteżnorakie i znaczenialtigt tych problemoacutew nie tak daleko do przeanalizowania dalszych kierunkoacutew rozwoju W ltpgt
Teksty linia pozioma
ltolgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltolgt
Teksty lista uporządkowana
ltulgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltulgt
Teksty Lista nieuporządkowana
ltimg src=paletejpg alt=Paleta gt
ltimg src=imagespaletejpg alt=Paleta gt
Grafiki ndash odnośnie względne
ltimg src=
httpwwwdecathlonplmedia
8238239828classic_400PX_me
diacom_525355685jpg
alt=bdquoBluza Domyos gt
Grafiki ndash odnośnie bezwzględne
ltimg src=paletejpg alt=Paleta
width=141 height=128 gt
Grafiki ndash atrybut ltwidthgt i ltheightgt
ltimg src=paletejpg alt=Paleta
width=141 height=128 align=left gt
Grafiki ndash atrybut ltaligngt [leftcenterrightjustifytopbottommiddle]
lta href=httpwwwsareplgtTo jest
link do strony SAREltagt
Hiperłącza linki odnośniki do stron zewnętrznych
lta href=kontaktplgtSkontaktuj się z
namiltagt
Hiperłącza linki odnośniki do stron wewnętrznych
lta href=kontaktpl target=_blankgtSkontaktuj się
z namiltagt
Otwieranie linkoacutew w nowym oknie
lta href=mailtobiuroabcplgtNapisz
do nas emailltagt
Email link
lttablegt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele
lttable border=1gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - obramowanie
lttable border=1 width=300gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - szerokość
lttable border=1 width=300gt
lttrgt
lttd align=right valign=topgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - pozostałe
lttable border=1 width=300gt
lttrgt
lttd colspan=3gtKomoacuterka 1lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 2lttdgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - colspan
lttable border=1 width=300gt
lttrgt
lttd rowspan=3gtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - rowspan
CSS = Cascading Style Sheets
2 Stosowanie styloacutew CSS a) Stosowanie czcionek
b) Wielkość tekstu i formatowanie tekstu poprzez style css
c) Zmiana kolor tekstu tła
d) Pozycjonowanie tekstu
e) Pozycjonowanie tekstu i grafik
f) Style linkoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
CSS stosowanie czcionek
ltp style=font-size16pxgtTo jest czcionka wielkości 16ltpgt
ltp style=font-familycouriergtTo jest czcionka Courierltpgt
ltp style=font-size16px font-familycouriergtTo jest czcionka Courier wielkości 16 pikseliltpgt
CSS stosowanie czcionek
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 font-size 30px font-family arial
h2 font-size 15px font-family courier
p font-size 8px font-family times new roman
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Wielkość tekstu i formatowanie tekstu
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
ltolgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltolgt
Teksty lista uporządkowana
ltulgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltulgt
Teksty Lista nieuporządkowana
ltimg src=paletejpg alt=Paleta gt
ltimg src=imagespaletejpg alt=Paleta gt
Grafiki ndash odnośnie względne
ltimg src=
httpwwwdecathlonplmedia
8238239828classic_400PX_me
diacom_525355685jpg
alt=bdquoBluza Domyos gt
Grafiki ndash odnośnie bezwzględne
ltimg src=paletejpg alt=Paleta
width=141 height=128 gt
Grafiki ndash atrybut ltwidthgt i ltheightgt
ltimg src=paletejpg alt=Paleta
width=141 height=128 align=left gt
Grafiki ndash atrybut ltaligngt [leftcenterrightjustifytopbottommiddle]
lta href=httpwwwsareplgtTo jest
link do strony SAREltagt
Hiperłącza linki odnośniki do stron zewnętrznych
lta href=kontaktplgtSkontaktuj się z
namiltagt
Hiperłącza linki odnośniki do stron wewnętrznych
lta href=kontaktpl target=_blankgtSkontaktuj się
z namiltagt
Otwieranie linkoacutew w nowym oknie
lta href=mailtobiuroabcplgtNapisz
do nas emailltagt
Email link
lttablegt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele
lttable border=1gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - obramowanie
lttable border=1 width=300gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - szerokość
lttable border=1 width=300gt
lttrgt
lttd align=right valign=topgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - pozostałe
lttable border=1 width=300gt
lttrgt
lttd colspan=3gtKomoacuterka 1lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 2lttdgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - colspan
lttable border=1 width=300gt
lttrgt
lttd rowspan=3gtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - rowspan
CSS = Cascading Style Sheets
2 Stosowanie styloacutew CSS a) Stosowanie czcionek
b) Wielkość tekstu i formatowanie tekstu poprzez style css
c) Zmiana kolor tekstu tła
d) Pozycjonowanie tekstu
e) Pozycjonowanie tekstu i grafik
f) Style linkoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
CSS stosowanie czcionek
ltp style=font-size16pxgtTo jest czcionka wielkości 16ltpgt
ltp style=font-familycouriergtTo jest czcionka Courierltpgt
ltp style=font-size16px font-familycouriergtTo jest czcionka Courier wielkości 16 pikseliltpgt
CSS stosowanie czcionek
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 font-size 30px font-family arial
h2 font-size 15px font-family courier
p font-size 8px font-family times new roman
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Wielkość tekstu i formatowanie tekstu
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
ltulgt
ltligtPierwszy element listyltligt
ltligtDrugi element listyltligt
ltulgt
Teksty Lista nieuporządkowana
ltimg src=paletejpg alt=Paleta gt
ltimg src=imagespaletejpg alt=Paleta gt
Grafiki ndash odnośnie względne
ltimg src=
httpwwwdecathlonplmedia
8238239828classic_400PX_me
diacom_525355685jpg
alt=bdquoBluza Domyos gt
Grafiki ndash odnośnie bezwzględne
ltimg src=paletejpg alt=Paleta
width=141 height=128 gt
Grafiki ndash atrybut ltwidthgt i ltheightgt
ltimg src=paletejpg alt=Paleta
width=141 height=128 align=left gt
Grafiki ndash atrybut ltaligngt [leftcenterrightjustifytopbottommiddle]
lta href=httpwwwsareplgtTo jest
link do strony SAREltagt
Hiperłącza linki odnośniki do stron zewnętrznych
lta href=kontaktplgtSkontaktuj się z
namiltagt
Hiperłącza linki odnośniki do stron wewnętrznych
lta href=kontaktpl target=_blankgtSkontaktuj się
z namiltagt
Otwieranie linkoacutew w nowym oknie
lta href=mailtobiuroabcplgtNapisz
do nas emailltagt
Email link
lttablegt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele
lttable border=1gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - obramowanie
lttable border=1 width=300gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - szerokość
lttable border=1 width=300gt
lttrgt
lttd align=right valign=topgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - pozostałe
lttable border=1 width=300gt
lttrgt
lttd colspan=3gtKomoacuterka 1lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 2lttdgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - colspan
lttable border=1 width=300gt
lttrgt
lttd rowspan=3gtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - rowspan
CSS = Cascading Style Sheets
2 Stosowanie styloacutew CSS a) Stosowanie czcionek
b) Wielkość tekstu i formatowanie tekstu poprzez style css
c) Zmiana kolor tekstu tła
d) Pozycjonowanie tekstu
e) Pozycjonowanie tekstu i grafik
f) Style linkoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
CSS stosowanie czcionek
ltp style=font-size16pxgtTo jest czcionka wielkości 16ltpgt
ltp style=font-familycouriergtTo jest czcionka Courierltpgt
ltp style=font-size16px font-familycouriergtTo jest czcionka Courier wielkości 16 pikseliltpgt
CSS stosowanie czcionek
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 font-size 30px font-family arial
h2 font-size 15px font-family courier
p font-size 8px font-family times new roman
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Wielkość tekstu i formatowanie tekstu
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
ltimg src=paletejpg alt=Paleta gt
ltimg src=imagespaletejpg alt=Paleta gt
Grafiki ndash odnośnie względne
ltimg src=
httpwwwdecathlonplmedia
8238239828classic_400PX_me
diacom_525355685jpg
alt=bdquoBluza Domyos gt
Grafiki ndash odnośnie bezwzględne
ltimg src=paletejpg alt=Paleta
width=141 height=128 gt
Grafiki ndash atrybut ltwidthgt i ltheightgt
ltimg src=paletejpg alt=Paleta
width=141 height=128 align=left gt
Grafiki ndash atrybut ltaligngt [leftcenterrightjustifytopbottommiddle]
lta href=httpwwwsareplgtTo jest
link do strony SAREltagt
Hiperłącza linki odnośniki do stron zewnętrznych
lta href=kontaktplgtSkontaktuj się z
namiltagt
Hiperłącza linki odnośniki do stron wewnętrznych
lta href=kontaktpl target=_blankgtSkontaktuj się
z namiltagt
Otwieranie linkoacutew w nowym oknie
lta href=mailtobiuroabcplgtNapisz
do nas emailltagt
Email link
lttablegt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele
lttable border=1gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - obramowanie
lttable border=1 width=300gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - szerokość
lttable border=1 width=300gt
lttrgt
lttd align=right valign=topgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - pozostałe
lttable border=1 width=300gt
lttrgt
lttd colspan=3gtKomoacuterka 1lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 2lttdgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - colspan
lttable border=1 width=300gt
lttrgt
lttd rowspan=3gtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - rowspan
CSS = Cascading Style Sheets
2 Stosowanie styloacutew CSS a) Stosowanie czcionek
b) Wielkość tekstu i formatowanie tekstu poprzez style css
c) Zmiana kolor tekstu tła
d) Pozycjonowanie tekstu
e) Pozycjonowanie tekstu i grafik
f) Style linkoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
CSS stosowanie czcionek
ltp style=font-size16pxgtTo jest czcionka wielkości 16ltpgt
ltp style=font-familycouriergtTo jest czcionka Courierltpgt
ltp style=font-size16px font-familycouriergtTo jest czcionka Courier wielkości 16 pikseliltpgt
CSS stosowanie czcionek
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 font-size 30px font-family arial
h2 font-size 15px font-family courier
p font-size 8px font-family times new roman
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Wielkość tekstu i formatowanie tekstu
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
ltimg src=
httpwwwdecathlonplmedia
8238239828classic_400PX_me
diacom_525355685jpg
alt=bdquoBluza Domyos gt
Grafiki ndash odnośnie bezwzględne
ltimg src=paletejpg alt=Paleta
width=141 height=128 gt
Grafiki ndash atrybut ltwidthgt i ltheightgt
ltimg src=paletejpg alt=Paleta
width=141 height=128 align=left gt
Grafiki ndash atrybut ltaligngt [leftcenterrightjustifytopbottommiddle]
lta href=httpwwwsareplgtTo jest
link do strony SAREltagt
Hiperłącza linki odnośniki do stron zewnętrznych
lta href=kontaktplgtSkontaktuj się z
namiltagt
Hiperłącza linki odnośniki do stron wewnętrznych
lta href=kontaktpl target=_blankgtSkontaktuj się
z namiltagt
Otwieranie linkoacutew w nowym oknie
lta href=mailtobiuroabcplgtNapisz
do nas emailltagt
Email link
lttablegt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele
lttable border=1gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - obramowanie
lttable border=1 width=300gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - szerokość
lttable border=1 width=300gt
lttrgt
lttd align=right valign=topgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - pozostałe
lttable border=1 width=300gt
lttrgt
lttd colspan=3gtKomoacuterka 1lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 2lttdgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - colspan
lttable border=1 width=300gt
lttrgt
lttd rowspan=3gtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - rowspan
CSS = Cascading Style Sheets
2 Stosowanie styloacutew CSS a) Stosowanie czcionek
b) Wielkość tekstu i formatowanie tekstu poprzez style css
c) Zmiana kolor tekstu tła
d) Pozycjonowanie tekstu
e) Pozycjonowanie tekstu i grafik
f) Style linkoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
CSS stosowanie czcionek
ltp style=font-size16pxgtTo jest czcionka wielkości 16ltpgt
ltp style=font-familycouriergtTo jest czcionka Courierltpgt
ltp style=font-size16px font-familycouriergtTo jest czcionka Courier wielkości 16 pikseliltpgt
CSS stosowanie czcionek
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 font-size 30px font-family arial
h2 font-size 15px font-family courier
p font-size 8px font-family times new roman
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Wielkość tekstu i formatowanie tekstu
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
ltimg src=paletejpg alt=Paleta
width=141 height=128 gt
Grafiki ndash atrybut ltwidthgt i ltheightgt
ltimg src=paletejpg alt=Paleta
width=141 height=128 align=left gt
Grafiki ndash atrybut ltaligngt [leftcenterrightjustifytopbottommiddle]
lta href=httpwwwsareplgtTo jest
link do strony SAREltagt
Hiperłącza linki odnośniki do stron zewnętrznych
lta href=kontaktplgtSkontaktuj się z
namiltagt
Hiperłącza linki odnośniki do stron wewnętrznych
lta href=kontaktpl target=_blankgtSkontaktuj się
z namiltagt
Otwieranie linkoacutew w nowym oknie
lta href=mailtobiuroabcplgtNapisz
do nas emailltagt
Email link
lttablegt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele
lttable border=1gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - obramowanie
lttable border=1 width=300gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - szerokość
lttable border=1 width=300gt
lttrgt
lttd align=right valign=topgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - pozostałe
lttable border=1 width=300gt
lttrgt
lttd colspan=3gtKomoacuterka 1lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 2lttdgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - colspan
lttable border=1 width=300gt
lttrgt
lttd rowspan=3gtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - rowspan
CSS = Cascading Style Sheets
2 Stosowanie styloacutew CSS a) Stosowanie czcionek
b) Wielkość tekstu i formatowanie tekstu poprzez style css
c) Zmiana kolor tekstu tła
d) Pozycjonowanie tekstu
e) Pozycjonowanie tekstu i grafik
f) Style linkoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
CSS stosowanie czcionek
ltp style=font-size16pxgtTo jest czcionka wielkości 16ltpgt
ltp style=font-familycouriergtTo jest czcionka Courierltpgt
ltp style=font-size16px font-familycouriergtTo jest czcionka Courier wielkości 16 pikseliltpgt
CSS stosowanie czcionek
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 font-size 30px font-family arial
h2 font-size 15px font-family courier
p font-size 8px font-family times new roman
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Wielkość tekstu i formatowanie tekstu
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
ltimg src=paletejpg alt=Paleta
width=141 height=128 align=left gt
Grafiki ndash atrybut ltaligngt [leftcenterrightjustifytopbottommiddle]
lta href=httpwwwsareplgtTo jest
link do strony SAREltagt
Hiperłącza linki odnośniki do stron zewnętrznych
lta href=kontaktplgtSkontaktuj się z
namiltagt
Hiperłącza linki odnośniki do stron wewnętrznych
lta href=kontaktpl target=_blankgtSkontaktuj się
z namiltagt
Otwieranie linkoacutew w nowym oknie
lta href=mailtobiuroabcplgtNapisz
do nas emailltagt
Email link
lttablegt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele
lttable border=1gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - obramowanie
lttable border=1 width=300gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - szerokość
lttable border=1 width=300gt
lttrgt
lttd align=right valign=topgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - pozostałe
lttable border=1 width=300gt
lttrgt
lttd colspan=3gtKomoacuterka 1lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 2lttdgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - colspan
lttable border=1 width=300gt
lttrgt
lttd rowspan=3gtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - rowspan
CSS = Cascading Style Sheets
2 Stosowanie styloacutew CSS a) Stosowanie czcionek
b) Wielkość tekstu i formatowanie tekstu poprzez style css
c) Zmiana kolor tekstu tła
d) Pozycjonowanie tekstu
e) Pozycjonowanie tekstu i grafik
f) Style linkoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
CSS stosowanie czcionek
ltp style=font-size16pxgtTo jest czcionka wielkości 16ltpgt
ltp style=font-familycouriergtTo jest czcionka Courierltpgt
ltp style=font-size16px font-familycouriergtTo jest czcionka Courier wielkości 16 pikseliltpgt
CSS stosowanie czcionek
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 font-size 30px font-family arial
h2 font-size 15px font-family courier
p font-size 8px font-family times new roman
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Wielkość tekstu i formatowanie tekstu
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
lta href=httpwwwsareplgtTo jest
link do strony SAREltagt
Hiperłącza linki odnośniki do stron zewnętrznych
lta href=kontaktplgtSkontaktuj się z
namiltagt
Hiperłącza linki odnośniki do stron wewnętrznych
lta href=kontaktpl target=_blankgtSkontaktuj się
z namiltagt
Otwieranie linkoacutew w nowym oknie
lta href=mailtobiuroabcplgtNapisz
do nas emailltagt
Email link
lttablegt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele
lttable border=1gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - obramowanie
lttable border=1 width=300gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - szerokość
lttable border=1 width=300gt
lttrgt
lttd align=right valign=topgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - pozostałe
lttable border=1 width=300gt
lttrgt
lttd colspan=3gtKomoacuterka 1lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 2lttdgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - colspan
lttable border=1 width=300gt
lttrgt
lttd rowspan=3gtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - rowspan
CSS = Cascading Style Sheets
2 Stosowanie styloacutew CSS a) Stosowanie czcionek
b) Wielkość tekstu i formatowanie tekstu poprzez style css
c) Zmiana kolor tekstu tła
d) Pozycjonowanie tekstu
e) Pozycjonowanie tekstu i grafik
f) Style linkoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
CSS stosowanie czcionek
ltp style=font-size16pxgtTo jest czcionka wielkości 16ltpgt
ltp style=font-familycouriergtTo jest czcionka Courierltpgt
ltp style=font-size16px font-familycouriergtTo jest czcionka Courier wielkości 16 pikseliltpgt
CSS stosowanie czcionek
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 font-size 30px font-family arial
h2 font-size 15px font-family courier
p font-size 8px font-family times new roman
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Wielkość tekstu i formatowanie tekstu
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
lta href=kontaktplgtSkontaktuj się z
namiltagt
Hiperłącza linki odnośniki do stron wewnętrznych
lta href=kontaktpl target=_blankgtSkontaktuj się
z namiltagt
Otwieranie linkoacutew w nowym oknie
lta href=mailtobiuroabcplgtNapisz
do nas emailltagt
Email link
lttablegt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele
lttable border=1gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - obramowanie
lttable border=1 width=300gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - szerokość
lttable border=1 width=300gt
lttrgt
lttd align=right valign=topgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - pozostałe
lttable border=1 width=300gt
lttrgt
lttd colspan=3gtKomoacuterka 1lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 2lttdgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - colspan
lttable border=1 width=300gt
lttrgt
lttd rowspan=3gtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - rowspan
CSS = Cascading Style Sheets
2 Stosowanie styloacutew CSS a) Stosowanie czcionek
b) Wielkość tekstu i formatowanie tekstu poprzez style css
c) Zmiana kolor tekstu tła
d) Pozycjonowanie tekstu
e) Pozycjonowanie tekstu i grafik
f) Style linkoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
CSS stosowanie czcionek
ltp style=font-size16pxgtTo jest czcionka wielkości 16ltpgt
ltp style=font-familycouriergtTo jest czcionka Courierltpgt
ltp style=font-size16px font-familycouriergtTo jest czcionka Courier wielkości 16 pikseliltpgt
CSS stosowanie czcionek
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 font-size 30px font-family arial
h2 font-size 15px font-family courier
p font-size 8px font-family times new roman
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Wielkość tekstu i formatowanie tekstu
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
lta href=kontaktpl target=_blankgtSkontaktuj się
z namiltagt
Otwieranie linkoacutew w nowym oknie
lta href=mailtobiuroabcplgtNapisz
do nas emailltagt
Email link
lttablegt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele
lttable border=1gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - obramowanie
lttable border=1 width=300gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - szerokość
lttable border=1 width=300gt
lttrgt
lttd align=right valign=topgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - pozostałe
lttable border=1 width=300gt
lttrgt
lttd colspan=3gtKomoacuterka 1lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 2lttdgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - colspan
lttable border=1 width=300gt
lttrgt
lttd rowspan=3gtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - rowspan
CSS = Cascading Style Sheets
2 Stosowanie styloacutew CSS a) Stosowanie czcionek
b) Wielkość tekstu i formatowanie tekstu poprzez style css
c) Zmiana kolor tekstu tła
d) Pozycjonowanie tekstu
e) Pozycjonowanie tekstu i grafik
f) Style linkoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
CSS stosowanie czcionek
ltp style=font-size16pxgtTo jest czcionka wielkości 16ltpgt
ltp style=font-familycouriergtTo jest czcionka Courierltpgt
ltp style=font-size16px font-familycouriergtTo jest czcionka Courier wielkości 16 pikseliltpgt
CSS stosowanie czcionek
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 font-size 30px font-family arial
h2 font-size 15px font-family courier
p font-size 8px font-family times new roman
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Wielkość tekstu i formatowanie tekstu
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
lta href=mailtobiuroabcplgtNapisz
do nas emailltagt
Email link
lttablegt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele
lttable border=1gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - obramowanie
lttable border=1 width=300gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - szerokość
lttable border=1 width=300gt
lttrgt
lttd align=right valign=topgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - pozostałe
lttable border=1 width=300gt
lttrgt
lttd colspan=3gtKomoacuterka 1lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 2lttdgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - colspan
lttable border=1 width=300gt
lttrgt
lttd rowspan=3gtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - rowspan
CSS = Cascading Style Sheets
2 Stosowanie styloacutew CSS a) Stosowanie czcionek
b) Wielkość tekstu i formatowanie tekstu poprzez style css
c) Zmiana kolor tekstu tła
d) Pozycjonowanie tekstu
e) Pozycjonowanie tekstu i grafik
f) Style linkoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
CSS stosowanie czcionek
ltp style=font-size16pxgtTo jest czcionka wielkości 16ltpgt
ltp style=font-familycouriergtTo jest czcionka Courierltpgt
ltp style=font-size16px font-familycouriergtTo jest czcionka Courier wielkości 16 pikseliltpgt
CSS stosowanie czcionek
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 font-size 30px font-family arial
h2 font-size 15px font-family courier
p font-size 8px font-family times new roman
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Wielkość tekstu i formatowanie tekstu
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
lttablegt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele
lttable border=1gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - obramowanie
lttable border=1 width=300gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - szerokość
lttable border=1 width=300gt
lttrgt
lttd align=right valign=topgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - pozostałe
lttable border=1 width=300gt
lttrgt
lttd colspan=3gtKomoacuterka 1lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 2lttdgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - colspan
lttable border=1 width=300gt
lttrgt
lttd rowspan=3gtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - rowspan
CSS = Cascading Style Sheets
2 Stosowanie styloacutew CSS a) Stosowanie czcionek
b) Wielkość tekstu i formatowanie tekstu poprzez style css
c) Zmiana kolor tekstu tła
d) Pozycjonowanie tekstu
e) Pozycjonowanie tekstu i grafik
f) Style linkoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
CSS stosowanie czcionek
ltp style=font-size16pxgtTo jest czcionka wielkości 16ltpgt
ltp style=font-familycouriergtTo jest czcionka Courierltpgt
ltp style=font-size16px font-familycouriergtTo jest czcionka Courier wielkości 16 pikseliltpgt
CSS stosowanie czcionek
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 font-size 30px font-family arial
h2 font-size 15px font-family courier
p font-size 8px font-family times new roman
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Wielkość tekstu i formatowanie tekstu
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
lttable border=1gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - obramowanie
lttable border=1 width=300gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - szerokość
lttable border=1 width=300gt
lttrgt
lttd align=right valign=topgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - pozostałe
lttable border=1 width=300gt
lttrgt
lttd colspan=3gtKomoacuterka 1lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 2lttdgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - colspan
lttable border=1 width=300gt
lttrgt
lttd rowspan=3gtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - rowspan
CSS = Cascading Style Sheets
2 Stosowanie styloacutew CSS a) Stosowanie czcionek
b) Wielkość tekstu i formatowanie tekstu poprzez style css
c) Zmiana kolor tekstu tła
d) Pozycjonowanie tekstu
e) Pozycjonowanie tekstu i grafik
f) Style linkoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
CSS stosowanie czcionek
ltp style=font-size16pxgtTo jest czcionka wielkości 16ltpgt
ltp style=font-familycouriergtTo jest czcionka Courierltpgt
ltp style=font-size16px font-familycouriergtTo jest czcionka Courier wielkości 16 pikseliltpgt
CSS stosowanie czcionek
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 font-size 30px font-family arial
h2 font-size 15px font-family courier
p font-size 8px font-family times new roman
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Wielkość tekstu i formatowanie tekstu
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
lttable border=1 width=300gt
lttrgt
lttdgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - szerokość
lttable border=1 width=300gt
lttrgt
lttd align=right valign=topgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - pozostałe
lttable border=1 width=300gt
lttrgt
lttd colspan=3gtKomoacuterka 1lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 2lttdgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - colspan
lttable border=1 width=300gt
lttrgt
lttd rowspan=3gtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - rowspan
CSS = Cascading Style Sheets
2 Stosowanie styloacutew CSS a) Stosowanie czcionek
b) Wielkość tekstu i formatowanie tekstu poprzez style css
c) Zmiana kolor tekstu tła
d) Pozycjonowanie tekstu
e) Pozycjonowanie tekstu i grafik
f) Style linkoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
CSS stosowanie czcionek
ltp style=font-size16pxgtTo jest czcionka wielkości 16ltpgt
ltp style=font-familycouriergtTo jest czcionka Courierltpgt
ltp style=font-size16px font-familycouriergtTo jest czcionka Courier wielkości 16 pikseliltpgt
CSS stosowanie czcionek
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 font-size 30px font-family arial
h2 font-size 15px font-family courier
p font-size 8px font-family times new roman
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Wielkość tekstu i formatowanie tekstu
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
lttable border=1 width=300gt
lttrgt
lttd align=right valign=topgtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele - pozostałe
lttable border=1 width=300gt
lttrgt
lttd colspan=3gtKomoacuterka 1lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 2lttdgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - colspan
lttable border=1 width=300gt
lttrgt
lttd rowspan=3gtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - rowspan
CSS = Cascading Style Sheets
2 Stosowanie styloacutew CSS a) Stosowanie czcionek
b) Wielkość tekstu i formatowanie tekstu poprzez style css
c) Zmiana kolor tekstu tła
d) Pozycjonowanie tekstu
e) Pozycjonowanie tekstu i grafik
f) Style linkoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
CSS stosowanie czcionek
ltp style=font-size16pxgtTo jest czcionka wielkości 16ltpgt
ltp style=font-familycouriergtTo jest czcionka Courierltpgt
ltp style=font-size16px font-familycouriergtTo jest czcionka Courier wielkości 16 pikseliltpgt
CSS stosowanie czcionek
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 font-size 30px font-family arial
h2 font-size 15px font-family courier
p font-size 8px font-family times new roman
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Wielkość tekstu i formatowanie tekstu
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
lttable border=1 width=300gt
lttrgt
lttd colspan=3gtKomoacuterka 1lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 2lttdgt
lttdgtKomoacuterka 3lttdgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - colspan
lttable border=1 width=300gt
lttrgt
lttd rowspan=3gtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - rowspan
CSS = Cascading Style Sheets
2 Stosowanie styloacutew CSS a) Stosowanie czcionek
b) Wielkość tekstu i formatowanie tekstu poprzez style css
c) Zmiana kolor tekstu tła
d) Pozycjonowanie tekstu
e) Pozycjonowanie tekstu i grafik
f) Style linkoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
CSS stosowanie czcionek
ltp style=font-size16pxgtTo jest czcionka wielkości 16ltpgt
ltp style=font-familycouriergtTo jest czcionka Courierltpgt
ltp style=font-size16px font-familycouriergtTo jest czcionka Courier wielkości 16 pikseliltpgt
CSS stosowanie czcionek
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 font-size 30px font-family arial
h2 font-size 15px font-family courier
p font-size 8px font-family times new roman
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Wielkość tekstu i formatowanie tekstu
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
lttable border=1 width=300gt
lttrgt
lttd rowspan=3gtKomoacuterka 1lttdgt
lttdgtKomoacuterka 2lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 3lttdgt
lttrgt
lttrgt
lttdgtKomoacuterka 4lttdgt
lttrgt
lttablegt
Tabele zaawansowane - rowspan
CSS = Cascading Style Sheets
2 Stosowanie styloacutew CSS a) Stosowanie czcionek
b) Wielkość tekstu i formatowanie tekstu poprzez style css
c) Zmiana kolor tekstu tła
d) Pozycjonowanie tekstu
e) Pozycjonowanie tekstu i grafik
f) Style linkoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
CSS stosowanie czcionek
ltp style=font-size16pxgtTo jest czcionka wielkości 16ltpgt
ltp style=font-familycouriergtTo jest czcionka Courierltpgt
ltp style=font-size16px font-familycouriergtTo jest czcionka Courier wielkości 16 pikseliltpgt
CSS stosowanie czcionek
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 font-size 30px font-family arial
h2 font-size 15px font-family courier
p font-size 8px font-family times new roman
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Wielkość tekstu i formatowanie tekstu
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
CSS = Cascading Style Sheets
2 Stosowanie styloacutew CSS a) Stosowanie czcionek
b) Wielkość tekstu i formatowanie tekstu poprzez style css
c) Zmiana kolor tekstu tła
d) Pozycjonowanie tekstu
e) Pozycjonowanie tekstu i grafik
f) Style linkoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
CSS stosowanie czcionek
ltp style=font-size16pxgtTo jest czcionka wielkości 16ltpgt
ltp style=font-familycouriergtTo jest czcionka Courierltpgt
ltp style=font-size16px font-familycouriergtTo jest czcionka Courier wielkości 16 pikseliltpgt
CSS stosowanie czcionek
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 font-size 30px font-family arial
h2 font-size 15px font-family courier
p font-size 8px font-family times new roman
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Wielkość tekstu i formatowanie tekstu
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
2 Stosowanie styloacutew CSS a) Stosowanie czcionek
b) Wielkość tekstu i formatowanie tekstu poprzez style css
c) Zmiana kolor tekstu tła
d) Pozycjonowanie tekstu
e) Pozycjonowanie tekstu i grafik
f) Style linkoacutew
ltp style=font-size 16pxgt Witaj świecieltpgt
CSS stosowanie czcionek
ltp style=font-size16pxgtTo jest czcionka wielkości 16ltpgt
ltp style=font-familycouriergtTo jest czcionka Courierltpgt
ltp style=font-size16px font-familycouriergtTo jest czcionka Courier wielkości 16 pikseliltpgt
CSS stosowanie czcionek
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 font-size 30px font-family arial
h2 font-size 15px font-family courier
p font-size 8px font-family times new roman
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Wielkość tekstu i formatowanie tekstu
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
ltp style=font-size 16pxgt Witaj świecieltpgt
CSS stosowanie czcionek
ltp style=font-size16pxgtTo jest czcionka wielkości 16ltpgt
ltp style=font-familycouriergtTo jest czcionka Courierltpgt
ltp style=font-size16px font-familycouriergtTo jest czcionka Courier wielkości 16 pikseliltpgt
CSS stosowanie czcionek
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 font-size 30px font-family arial
h2 font-size 15px font-family courier
p font-size 8px font-family times new roman
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Wielkość tekstu i formatowanie tekstu
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
ltp style=font-size16pxgtTo jest czcionka wielkości 16ltpgt
ltp style=font-familycouriergtTo jest czcionka Courierltpgt
ltp style=font-size16px font-familycouriergtTo jest czcionka Courier wielkości 16 pikseliltpgt
CSS stosowanie czcionek
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 font-size 30px font-family arial
h2 font-size 15px font-family courier
p font-size 8px font-family times new roman
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Wielkość tekstu i formatowanie tekstu
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 font-size 30px font-family arial
h2 font-size 15px font-family courier
p font-size 8px font-family times new roman
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Wielkość tekstu i formatowanie tekstu
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
lthtmlgt
ltheadgt
lttitlegtMoja pierwsza strona CSSlttitlegt
ltstyle type=textcssgt
h1 background-color blue
h2 font-size 15px font-family courier
p font-size 8px color green
ltstylegt
ltheadgt
ltbodygt
lth1gtWitaj piękny świecielth1gt
lth2gtOto moja pierwsza strona w HTML i CSSlth2gt
ltpgtA to jest paragrafltpgt
ltbodygt
lthtmlgt
CSS Zmiana kolor tekstu tła
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
lthtmlgt
ltheadgt
ltmeta http-equiv=Content-Type content=texthtml
charset=utf-8gt
lttitlegtTo jest moja stronalttitlegt
ltstyle type=textcssgt
outline none
a outline none
body color 000000 font-family Verdana Geneva sans-
serif font-size 11px
img displayblock border0
br line-height normal
td line-height normal
ltstylegt
ltbase target=_blankgt
ltheadgt
ltbody bgcolor=FFFFFFgt
CSS Przykład
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
ltp style=padding25px border1px
solid redgtKocham CSSltpgt
CSS Pozycjonowanie tekstu
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
A ltimg src= paletejpg alt=Paleta style=
floatleft gt
ltpgt Początek traktatu czasu być cnotliwym lub
środkoacutew tym pytamy się nazywa się ideą A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje sięltpgt
B ltimg style=display block border=0
src=imagesindex_02jpg width=492 height=81
alt=Na tym zdjęciu widać narciarzygt
CSS Pozycjonowanie grafik i tekstu
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
lta href=httpwwwsarepl style=font-family
Arial font-size 11px color 555555 line-height
normal outline none target=_blankgt Skontaktuj
się z namiltagt
CSS Style linkoacutew
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
3 Przykłady oprogramowanych kreacji mailingowych HTML
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
1Wolters Kluwer
2IKEA Family
3DAS
4Rohlig Suus
4 Ćwiczenia praktyczne
Dziękuję za uwagę
4 Ćwiczenia praktyczne
Dziękuję za uwagę
Dziękuję za uwagę