Zbiór poznanych elementów HTML

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