HTML & CSS Basic19032013

HTML i CSS
SARE
19/03/2013

Czysty e-mail marketing

Plan spotkania

1. PODSTAWY
2. STYLE CSS 3. PRZYKŁADY 4. ĆWICZENIA
HTML

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

HTML =
Hyper Text Markup Language

Budowa tagów/elementów

<HTML>?
<html> ?
<HtMl> ?

Atrybuty znaczników

<p style="font-size: 16px">
Witaj świecie</p>

Budowa tagów/elementów – przykłady

<b>…</b>
<h1>…</h1>
<h2>…</h2>
<a>…</a>
<body>…</body>
<head>…</head>
<html>…</html>
<table>…</table>
<td>…</td>
<tr>…</tr>

Struktura strony HTML

<html>
<head>
</head>

<body>
</body>
</html>

Struktura strony HTML - ćwiczenie

<html>
<head>
</head>

<body>Witaj piękny świecie!
</body>
</html>

Struktura strony HTML - ćwiczenie

<html>
<head>
<title>Moja pierwsza strona
internetowa</title>
</head>
<body>Witaj piękny świecie!
</body>
</html>

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>

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>

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
<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>

Teksty: kursywa

<p>Litwo! Ojczyzno moja! <b>Ty jesteś jak zdrowie.
Nogi miał być siedzeniem. Rumienił się, lecz go nie daje
<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>

Teksty: łamanie wiersza

<p>Litwo! Ojczyzno moja! <b> Ty jesteś jak zdrowie.
Nogi miał być siedzeniem. <br />Rumienił się, lecz go
nie daje czasu szukać mody małpowanie, milczał. </p>
rozwoju. W. </p>

Teksty: linia pozioma

<p>Litwo! Ojczyzno moja! <b> Ty jesteś jak zdrowie.
Nogi miał być siedzeniem. <br />Rumienił się, lecz go
nie daje czasu szukać mody małpowanie, milczał. </p>
<hr />
rozwoju. W. </p>

Teksty: lista uporządkowana

<ol>
<li>Pierwszy element listy</li>
<li>Drugi element listy</li>
</ol>

Teksty: Lista nieuporządkowana

<ul>
<li>Pierwszy element listy</li>
<li>Drugi element listy</li>
</ul>

Grafiki – odnośnie względne

<img src="palete.jpg" alt="Paleta" />

<img src="images/palete.jpg" alt="Paleta" />

Grafiki – odnośnie bezwzględne

<img src="
http://www.decathlon.pl/media
/823/8239828/classic_400PX_me
diacom_525355685.jpg "
alt=„Bluza Domyos" />

Grafiki – atrybut: <width> i <height>

<img src="palete.jpg" alt="Paleta"
width="141" height="128" />

Grafiki – atrybut: <align>
[left/center/right/justify/top/bottom/middle]

<img src="palete.jpg" alt="Paleta"
width="141" height="128" align="left" />

Hiperłącza, linki, odnośniki do stron zewnętrznych

<a href="http://www.sare.pl">To jest
link do strony SARE</a>

Hiperłącza, linki, odnośniki do stron wewnętrznych

<a href="kontakt.pl">Skontaktuj się z
nami</a>

Otwieranie linków w nowym oknie

<a href="kontakt.pl" target="_blank">Skontaktuj się
z nami</a>

Email link

<a href="mailto:biuro@abc.pl">Napisz
do nas email</a>

Tabele

<table>
<tr>
<td>Komórka 1</td>
<td>Komórka 2</td>
</tr>
<tr>
<td>Komórka 3</td>
<td>Komórka 4</td>
</tr>
</table>

Tabele - obramowanie

<table border="1">
<tr>
<td>Komórka 1</td>
<td>Komórka 2</td>
</tr>
<tr>
<td>Komórka 3</td>
<td>Komórka 4</td>
</tr>
</table>

Tabele - szerokość

<table border="1" width="300">
<tr>
<td>Komórka 1</td>
<td>Komórka 2</td>
</tr>
<tr>
<td>Komórka 3</td>
<td>Komórka 4</td>
</tr>
</table>

Tabele - pozostałe

<tr>
<td align="right" valign="top">Komórka 1</td>
<td>Komórka 2</td>
</tr>
<tr>
<td>Komórka 3</td>
<td>Komórka 4</td>
</tr>
</table>

Tabele zaawansowane - colspan

<tr>
<td colspan="3">Komórka 1</td>
</tr>
<tr>
<td>Komórka 2</td>
<td>Komórka 3</td>
<td>Komórka 4</td>
</tr>
</table>

Tabele zaawansowane - rowspan

<tr>
<td rowspan="3">Komórka 1</td>
<td>Komórka 2</td>
</tr>
<tr>
<td>Komórka 3</td>
</tr>
<tr>
<td>Komórka 4</td>
</tr>
</table>

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

CSS: stosowanie czcionek

<p style="font-size: 16px">
Witaj świecie</p>

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>

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>

CSS: Zmiana kolor tekstu, tła

<html>
<head>
<title>Moja pierwsza strona CSS</title>
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>

CSS: Przykład
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>To jest moja strona</title>
* {outline: none; }
a {outline: none; }
body { color: #000000; font-family: Verdana, Geneva, sans-
serif; font-size: 11px; }
img { display:block; border:0; }
br { line-height: normal; }
td { line-height: normal; }
</style>
<base target="_blank">
</head>
<body bgcolor="#FFFFFF">

CSS: Pozycjonowanie tekstu

<p style="padding:25px; border:1px
solid red;">Kocham CSS</p>

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">

CSS: Style linków

<a href="http://www.sare.pl" style="font-family:
Arial; font-size: 11px; color: #555555; line-height:
normal; outline: none;" target="_blank"> Skontaktuj
się z nami</a>

3. Przykłady oprogramowanych kreacji mailingowych
HTML

1.Wolters Kluwer
2.IKEA Family
3.DAS
4.Rohlig Suus

HTML & CSS Basic19032013

Recommended

More Related Content

Viewers also liked (15)

HTML & CSS Basic19032013