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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3 Przykłady oprogramowanych kreacji mailingowych HTML

1Wolters Kluwer

2IKEA Family

3DAS

4Rohlig Suus

1Wolters Kluwer

2IKEA Family

3DAS

4Rohlig Suus

4 Ćwiczenia praktyczne

Dziękuję za uwagę

Dziękuję za uwagę