1. HTML i CSS
SARE
19/03/2013
Czysty e-mail marketing
2. Plan spotkania
1. PODSTAWY
2. STYLE CSS 3. PRZYKŁADY 4. ĆWICZENIA
HTML
3. 1. Podstawy HTML
a) Budowa znaczników html
b) Struktura strony HTML (html, nagłówek, ciało)
c) Teksty: paragrafy, nagłówki, pogrubienie, kursywa, łamanie wiersza, linia, listy
d) Grafiki – odnośnie względne i bezwzględne
e) Powiązań i hiperłącza
f) Tworzenie wiadomości w tabelach – kolumny, wiersze, łączenie komórek
13. Struktura strony HTML - ćwiczenie
<html>
<head>
</head>
<body>Witaj piękny świecie!
</body>
</html>
14. Struktura strony HTML - ćwiczenie
<html>
<head>
<title>Moja pierwsza strona
internetowa</title>
</head>
<body>Witaj piękny świecie!
</body>
</html>
15. Teksty: nagłówki
<h1>Lorem ipsum dolor sit amet…</h1>
<h2>Pellentesque habitant morb...</h2>
<h3>To jest trzeci nagłówkek</h3>
<h4>Nagłówek 4. rzędu</h4>
<h5>Tytuł nr 5</h5>
<h6>Numer 6</h6>
16. Teksty: paragrafy
<p>Litwo! 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ł. </p>
<p> Drogi Marszałku, Wysoka Izbo. PKB rośnie.
Różnorakie i znaczenia tych problemów nie tak daleko
do przeanalizowania dalszych kierunków rozwoju. W.
</p>
17. Teksty: pogrubienie
<p>Litwo! Ojczyzno moja! <b>Ty jesteś jak zdrowie.
Nazywał się na szańcach Pragi, na kształt deski.</b>
Nogi miał być siedzeniem. Rumienił się, lecz go nie daje
czasu szukać mody małpowanie, milczał. </p>
<p> Drogi Marszałku, Wysoka Izbo. PKB rośnie.
Różnorakie i znaczenia tych problemów nie tak daleko
do przeanalizowania dalszych kierunków rozwoju. W.
</p>
18. Teksty: kursywa
<p>Litwo! Ojczyzno moja! <b>Ty jesteś jak zdrowie.
Nazywał się na szańcach Pragi, na kształt deski.</b>
Nogi miał być siedzeniem. Rumienił się, lecz go nie daje
czasu szukać mody małpowanie, milczał. </p>
<p> Drogi Marszałku, Wysoka Izbo. PKB rośnie. <i>
Różnorakie i znaczenia</i> tych problemów nie tak
daleko do przeanalizowania dalszych kierunków
rozwoju. W. </p>
19. Teksty: łamanie wiersza
<p>Litwo! Ojczyzno moja! <b> Ty jesteś jak zdrowie.
Nazywał się na szańcach Pragi, na kształt deski.</b>
Nogi miał być siedzeniem. <br />Rumienił się, lecz go
nie daje czasu szukać mody małpowanie, milczał. </p>
<p> Drogi Marszałku, Wysoka Izbo. PKB rośnie. <i>
Różnorakie i znaczenia</i> tych problemów nie tak
daleko do przeanalizowania dalszych kierunków
rozwoju. W. </p>
20. Teksty: linia pozioma
<p>Litwo! Ojczyzno moja! <b> Ty jesteś jak zdrowie.
Nazywał się na szańcach Pragi, na kształt deski.</b>
Nogi miał być siedzeniem. <br />Rumienił się, lecz go
nie daje czasu szukać mody małpowanie, milczał. </p>
<hr />
<p> Drogi Marszałku, Wysoka Izbo. PKB rośnie. <i>
Różnorakie i znaczenia</i> tych problemów nie tak
daleko do przeanalizowania dalszych kierunków
rozwoju. W. </p>
39. 2. Stosowanie stylów 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 linków
41. CSS: stosowanie czcionek
<p style="font-size:16px;">To jest czcionka
wielkości 16</p>
<p style="font-family:courier;">To jest czcionka
Courier</p>
<p style="font-size:16px; font-
family:courier;">To jest czcionka Courier
wielkości 16 pikseli</p>
42. CSS: Wielkość tekstu i formatowanie tekstu
<html>
<head>
<title>Moja pierwsza strona CSS</title>
<style type="text/css">
h1 {font-size: 30px; font-family: arial;}
h2 {font-size: 15px; font-family: courier;}
p {font-size: 8px; font-family: "times new roman";}
</style>
</head>
<body>
<h1>Witaj piękny świecie</h1>
<h2>Oto moja pierwsza strona w HTML i CSS</h2>
<p>A to jest paragraf</p>
</body>
</html>
43. CSS: Zmiana kolor tekstu, tła
<html>
<head>
<title>Moja pierwsza strona CSS</title>
<style type="text/css">
h1 {background-color: blue;}
h2 {font-size: 15px; font-family: courier;}
p {font-size: 8px; color: green;}
</style>
</head>
<body>
<h1>Witaj piękny świecie</h1>
<h2>Oto moja pierwsza strona w HTML i CSS</h2>
<p>A to jest paragraf</p>
</body>
</html>
46. CSS: Pozycjonowanie grafik i tekstu
A: <img src=" palete.jpg " alt="Paleta" style=
"float:left;" />
<p> Początek traktatu czasu być cnotliwym lub
środków, tym pytamy się, nazywa się. ideą. A zatym
nazwiemy to przedstawiać nogrody jak tylko przewyżkę
mojej znajduje się...</p>
B: <img style="display: block;" border="0"
src="images/index_02.jpg" width="492" height="81"
alt="Na tym zdjęciu widać narciarzy">
