14.10.2009
Podstawowa struktura dokumentu:
<!DOCTYPE HTML PUBLIC "-W3CDTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
Informacje nagłówkowe o dokumencie
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<title>tytuł dokumentu</title>
</head>
<body>
Treść dokumentu - śródtytuły, tekst, grafika, odsyłacze itp.
</body>
</html>
Elementy blokowe i liniowe
Tytuły (nagłówki)
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>
Znacznik akapitu
<p> </p>
Znacznik końca wiersza
<br>
Pozioma linia
<hr>
Blok preformatowany
<pre> </pre>
Blok cytowany
<blockquote> </blockquote>
Komentarz
<!— … —>
21.10.2009
Znaczniki czcionki
Znaczniki fizyczne:
Czcionka pogrubiona
<b> </b>
Czcionka pochylona
<i> </i>
Superskrypt (indeks górny)
<sup> </sup>
Subskrypt (indeks dolny)
<sub> </sub>
Duża czcionka (+1 punkt)
<big> </big>
Mała czcionka (-1 punkt)
<small> </small>
Znaczniki logiczne:
Odwołanie do źródła
<cite> </cite>
Definicja
<dfn> </dfn>
Element usunięty
<del> </del>
Element wstawiony
<ins> </ins>
Czcionka mocno wyróżniona (strong)
<strong> </strong>
Czcionka wyróżniona (emfaza)
<em> </em>
Kolory czcionki
<p style="color: blue; ">Tekst w kolorze niebieskim.</p>
black; olive; teal; red; blue; maron; navy; gray; lime; fuchsia; white; green; purple; silver; yellow; aqua
Wielkość czcionki
<p style="font-size: large; ">Tekst o wielkości large</p>
xx-small; x-small; small; medium; large; x-large; xx-large
Krój czcionki
<p style="font-family: arial; ">Treść akapitu wyświetlona krojem Arial</p>
Arial, Courier, Verdana
Wykazy (listy)
Wykaz nieuporządkowany
<ul>
<li>Pierwszy punkt</li>
<li>Drugi punkt</li>
<li>Trzeci punkt</li>
</ul>
<ul style="list-style-type: disc">
<ul style="list-style-type: circle">
<ul style="list-style-type: square">
Zagnieżdżanie wykazów nieuporządkowanych
<ul>(otwarcie listy na pierwszym poziomie)
<li>Punkt 1</li>
<li>Punkt 2 (bez znacznika zamykającego)
<ul>(otwarcie listy na drugim poziomie)
<li>Podpunkt 2.1</li>
<li>Podpunkt 2.2</li>
</ul>(zamknięcie listy na drugim poziomie)
</li> (zamknięcie Punktu 2)
<li>Punkt 3 - kontynuacja punktów pierwszego poziomu</li>
</ul>(zamknięcie całej listy)
Wykaz uporządkowany
<ol>
<li>Pierwszy punkt</li>
<li>Drugi punkt</li>
<li>Trzeci punkt</li>
</ol>
<ol style="list-style-type: decimal">
<ol style="list-style-type: lower-roman">
<ol style="list-style-type: upper-alpha">
Lista definicyjna
<dl>początek listy definicyjnej
<dt>pierwszy termin</dt>
<dd>wyjaśnienie pierwszego terminu</dd>
<dt>drugi termin</dt>
<dd>wyjaśnienie drugiego terminu</dd>
</dl>koniec listy definicyjnej
4.11.2009
Odsyłacze
Do podstrony (w obrębie tego samego serwisu, jeśli plik w tym samym katalogu)
<a href="nazwa pliku">opis</a>
Do etykiety
<a name="nazwa_etykiety">(opis etykiety)</a> - definicja etykiety w wybranym miejscu strony
<a href="(ścieżka do strony)#nazwa_etykiety">opis odsyłacza</a> - odsyłacz do zdefiniowanej na stronie etykiety
Do adresu internetowego
<a href="http://adres strony">opis</a>
Odsyłacz pocztowy
<a href="mailto:adres e-mail">opis</a>
Grafika
Zwykły obrazek
<img src="ścieżka dostępu" alt="Tekst alternatywny" />
Obrazek o określonych rozmiarach
<img src="ścieżka dostępu" alt="Tekst alternatywny" width="x" height="y" /> gdzie jako "x" oraz "y" podajemy długość i wysokość obrazka w pikselach
lub
<img src="ścieżka dostępu" alt="Tekst alternatywny" width="x%" height="y%" /> jako "x%" oraz "y%" należy wpisać długość i wysokość obrazka w procentach ekranu
Obramowanie
<img src="ścieżka dostępu" alt="Tekst alternatywny" style="border: 10px green solid; "> 1px - wielkość, solid - styl, green - kolor obramowania (przykładowe wartości)
Odstęp (margines)
<img src="ścieżka dostępu" alt="Tekst alternatywny" style="margin-left: 50px; margin-right: 50px; ">
Pozycja grafiki
Grafika jako blok
Grafika aby stanowić samodzielny element w wierszu, może być umieszczona w elemencie blokowym div.
<div>
<img src="ścieżka dostępu" alt="Tekst alternatywny" />
</div>
Pozycjonowanie w poziomie
Obrazek przy lewym marginesie:
<img src="ścieżka dostępu" alt="Tekst alternatywny" style="float: left; ">
Obrazek przy prawym marginesie:
<img src="ścieżka dostępu" alt="Tekst alternatywny" style="float: right; ">
Pozycjonowanie w pionie
<img src="ścieżka dostępu" alt="Tekst alternatywny" style="vertical-align: top; "> - góra
<img src="ścieżka dostępu" alt="Tekst alternatywny" style="vertical-align: bottom; "> - dół
<img src="ścieżka dostępu" alt="Tekst alternatywny" style="vertical-align: middle; "> - środek
Odsyłacz obrazkowy
<a href="adres"><img src="ścieżka dostępu do obrazka" alt="tekst alternatywny" /></a>
18.11.2009
Tabele
Ogólne ramy tabeli
<table> </table>
Wiersz tabeli
<tr> </tr>
Komórka w wierszu
<td> </td>
Obramowanie tabeli
<table border> </table>
Odległości między komórkami
<table border cellspacing="8"> </table>
Odstępy w komórkach
<table border cellspacing="5" cellpadding="15"> </table>
Szerokość tabeli
<table border width="600"> </table> LUB <table border width="50%"> </table>
Szerokość komórki
<td style="width: 150px; ">zawartość komórki</td> LUB <td style="width: 50%; ">zawartość komórki</td>
Wyrównanie tabeli
<table style="float:right; "></table> LUB <table style="float:left; "></table>
Poziome wyrównanie danych w komórkach
<td style="text-align: left; "> </td>
<td style="text-align: center; "> </td>
<td style="text-align: right; "> </td>
Pionowe wyrównanie danych w komórkach
<td valign="top"> </td>
<td valign="middle"> </td>
<td valign="bottom"> </td>
Wysokość tabeli
<table border style="height: 200px; width: 60%; ">
Kolor tła tabeli
<table style="background-color: red">
<tr style="background-color: beige">
<td style="background-color: green">
<table style="background-image: url(adres_obrazka)">
Kolor obramowania tabeli
<table border cellspacing="1" cellpadding="5" style="border: 15px outset #D2691E; ">
Tytuł tabeli
<table border style="width: 300px; ">
<caption>Tytuł tabeli</caption>
Za pomocą stylów CSS możesz zdefiniować położenie tytułu, nad lub pod tabelą:
<caption style="caption-side: top; ">Tytuł tabeli</caption>
<caption style="caption-side: bottom; ">Tytuł tabeli</caption>
Nagłówek wiersza i kolumny
<th> </th>
Łączenie komórek
Aby komórka w danym wierszu rozciągała się na x wierszy, należy użyć w jej definicji atrybutu <td rowspan="x">.
Podobnie można łączyć komórki w kolumnach, stosując dla nagłówków atrybut th colspan="y", a dla danych td colspan="z".
25.11.2009
Formularze
Ogólne ramy formularza
<form> </form>
Opcje formularza
Wysłanie czytelnego formularza posiadającego tytuł pod wskazany adres
<form enctype="text/plain" action="mailto:login@domena?subject=Temat" method="post">
Pole tekstowe
<input type="text" name="nazwa_pola" value="wartość początkowa" size="rozmiar pola w znakach" maxlength="maksymalny rozmiar pola">
Pole hasła
<input type="password" name="haslo" value="" size="15" maxlength="15">
Pole opcji
<input type="radio" name="nazwa" value="wartosc">
Pole wyboru
<input type="checkbox" name="nazwa" value="wartosc">
Lista wyboru
<select name="nazwa_listy" size="liczba wyświetlanych pozycji">
<option> pierwsza pozycja
<option> druga pozycja
<option> trzecia pozycja
…
</select>
Obszar tekstowy
<textarea name="nazwa" rows="x" cols="y"> </textarea>
Wysyłanie danych
<input type="submit" value="Wyślij informacje"> - utworzy przycisk z napisem 'Wyślij informacje'
Czyszczenie formularza
<input type="reset" value="Usuń informacje"> - utworzy przycisk z napisem 'Usuń informacje'
2.12.2009
Ramki
Budowa strony w oparciu o ramki:
<!DOCTYPE HTML PUBLIC "-W3CDTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>tytuł strony</title>
</head>
<frameset rows="80,*" border="0" frameborder="0" framespacing="0">
<frame name="banner" noresize="noresize" scrolling="no" frameborder="0" src="banner.html" />
<frameset cols="180,*" border="0" frameborder="0" framespacing="0">
<frame name="spis" noresize="noresize" frameborder="0" src="spis.html" />
<frame name="strona" noresize="noresize" frameborder="0" src="home.html" />
</frameset>
<noframes><body><a href="spis.html">Spis treści</a></body></noframes>
</frameset>
</html>
Podzielenie okna przeglądarki
lewa ramka zajmuje 18% szerokości okna przeglądarki, a prawa ramka - 82%:
<frameset cols="18%,82%">
górna ramka ma 200 pikseli, dolna 200 pikseli, a środkowa zajmuje pozostały obszar, zależny od wielkości okna przeglądarki:
<frameset rows="200,*,200">
Aby przypisać ramce dokument, musimy podać źródło src dokumentu:
<frame src="nazwa_pliku.htm" …>
Odsyłacze
Kliknięcie na odsyłaczu w jednej ramce automatycznie ładuje odpowiednią stronę w innej ramce.
<a href="nazwa_strony.htm" target="nazwa_ramki">Nazwa strony</a>
a href="nazwa_strony.htm" dotyczy nazwy pliku, w którym jest zapisana dana strona
target="nazwa_ramki" dotyczy docelowego miejsca, do którego ma być załadowana strona.
Uwaga! zmienia się definicja typu dokumentu:
<!DOCTYPE HTML PUBLIC "-W3CDTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
9.12.2009
Podstawa składni CSS
selektor {właściwość: wartość;}
Dodawanie CSS do dokumentu HTML
Metoda 1: W linii (atrybut style)
<html>
<head>
<title>Przykład</title>
</head>
<body style="background-color: red;">
<p>Strona z czerwonym tłem</p>
</body>
</html>
Metoda 2: Wewnętrzna (znacznik style)
<html>
<head>
<title>Przykład</title>
<style type="text/css">
body {background-color: red;}
</style>
</head>
<body>
<p>Czerwona strona</p>
</body>
</html>
Metoda 3: Zewnętrzna (odnośnik do arkusza stylów)
W jednym katalogu mamy dwa pliki:
1. Plik cos.html
<html>
<head>
<title>Mój dokument</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Mój pierwszy arkusz stylów</h1>
</body>
</html>
2. plik style.css
body {
background-color: red;
}
Kolor i tło
Kolor pierwszoplanowy (np. czcionka)
color
Kolor tła
background-color
Obraz jako tło
background-image
Zaczepienie tła
background-attachment
opcje: fixed, scroll
Pozycja tła
background-position
opcje: x y, x% y%, left|center|right, top|center|bottom
Powtarzanie tła
background-repeat
opcje: repeat, repeat-x (poziom), repeat-y (pion), no-repeat
kompilacja
body{
background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
}
Własności czcionek
Rodzina czcionek
font-family
Rozmiar czcionki
font-size
opcje: wielkość w jednostkach miary, wysokość w procentach normalnego, imienne wielkości absolutne (xx-small, x-small, small, medium, large, x-large, xx-large), imienne wielkości relatywne (smaller, larger)
Styl czcionki
font-style
opcje:normal, italic, oblique
Waga czcionki
font-weight
opcje: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900
kompilacja
p {
font: italic bold 30px arial, sans-serif;
}
Tekst
Wyrównanie tekstu
text-align
opcje: left, right, center, justify
Dekoracja tekstu
text-decoration
opcje: none, underline, overline, line-through, blink
Wcięcie tekstu
text-indent
opcje: długość w jednostkach lub procentach
Transformacja tekstu
text-transform
opcje: capitalize, uppercase, lowercase, none
Rozsunięcie wyrazów
word-spacing
Interlinia:
line-height
16.12.2009
Identyfikacja i grupowanie elementów
Grupowanie za pomocą klasy
fragment pliku html:
<p> Kwiaty żółte</p>
<ul>
<li><a href="" class="zolte">słonecznik<a></li>
<li><a href="" class="zolte">żonkil<a></li>
…
</ul>
<p>Kwiaty czerwone</p>
<ul>
<li><a href="" class="czerwone">mak<a></li>
<li><a href="" class="czerwone">tulipan<a></li>
…
</ul>
plik css:
a.zolte{
color: yellow;
}
a.czerwone{
color: red;
}
Grupowanie za pomocą id
fragment pliku html:
<h1 id="A1">Sekcja 1</h1>
…
<h2 id="A1-1">Sekcja 1.1</h2>
…
<h2 id="A1-2">Sekcja 1.2</h2>
fragment pliku css:
#A1-2 {
color: green;
}
Grupowanie za pomocą SPAN (elementy w linii)
plik HTML:
<p>Na zielonej <span class="zielony">trawie </span> biegają czerwone <span class="czerwony"> mrówki</span>.</p>
plik CSS:
span.zielony{
color: green;
}
span.czerwony{
color: red;
}
Gruopwanie za pomocą DIV (elementy w bloku)
fragment pliku HTML:
<div class="zolte">
<p> Kwiaty żółte</p>
<ul>
<li><a href="">słonecznik<a></li>
<li><a href="">żonkil<a></li>
…
</ul>
</div>
<div class="czerwone">
<p>Kwiaty czerwone</p>
<ul>
<li><a href="">mak<a></li>
<li><a href="">tulipan<a></li>
…
</ul>
</div>
fragment pliku CSS:
#zolte{
color: yellow;
}
#czerwone{
color: red;
}
Szerokość dolnego/lewego/prawego/górnego marginesu
margin-bottom, margin-left, margin-right, margin-top
Atrybuty dolnego/lewego/prawego/górnego odstępu
padding-bottom, padding-left, padding-right, padding-top
Kolor obramowania
border-color
Styl obramowania
border-style
opcje: none, dotted, dashed, solid, double, groove, ridge, inset, outset
Grubość obramowania
border-width
opcje: thin (cienkie), medium (średnie), thick (grube), wartość w jednostkach
Wysokość elementu
height
Szerokość elementu
width