HTML
Struktura strony WWW prolog <html> <head> treść nagłówka <body> treść dokumentu HTML </body> </html>
Prolog Informacja o standardzie, w jakim ten dokument został wykonany Deklaracja typu dokumentu + ewentualnie odnośnik do dokumentu zawierającego formalny opis składni dla danego standardu <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 //EN"> <!DOCTYPE html PUBLIC "-//W3C //DTD HTML 4.01 Transitional//EN"> <!DOCTYPE html PUBLIC "-//W3C //DTD HTML 4.01 Frameset//EN"> <!DOCTYPE xhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD /xhtml1-strict.dtd">
Polskie litery <meta http-equiv="Content-Type" content= „text/html; charset=kodowanie " > dla Windows-1250: charset=windows-1250 dla ISO-8859-2: dla iso-8859-2 dla UTF-8: charset=utf-8
Znaczniki HTML Twórcy stron WWW <znacznik> treść </znacznik> <znacznik1> <znacznik2> treść </znacznik2> </znacznik1> <znacznik1> treść1 <znacznik2> treść2 </znacznik2> treść3 </znacznik1> tagi
Atrybuty znaczników <znacznik atrybut="wartość">treść</znacznik> <znacznik atrybut1="wartość1" atrybut2="wartość2" >treść </znacznik>
<html> <html lang="pl"> sugestia dla przeglądarki, że głównym językiem strony będzie język polski
Główne znaczniki sekcji <head> <title> - definiuje tytuł strony <link> - określa odwołania do zasobów zewnętrznych, np. stylów lub skryptów <meta> - określa rozmaite dane dodatkowe, np. rodzaj kodowania, opis strony, słowa kluczowe, autor, przekierowanie na inny adres
<title>treść tytułu</title> <meta name= "description" content= "opis strony"> <meta name= "keywords" content= „słowo1, słowo2,słowo3"> <meta name= "author" content= "Imię Nazwisko">
atrybuty <body> background – określa obraz stosowany jako tło; bgcolor – określa kolor tła; text – określa kolor tekstu; link – określa kolor nieodwiedzonego odnośnika; vlink – określa kolor odwiedzonego odnośnika; alink – określa kolor aktywnego odnośnika
Przykłady <body bgcolor="navy" text="yellow "> <body background="obraz.jpg" text="green">
Nagłówki (Tytuły) Dzielą stronę na sekcje. Mają wartości od 1 do 6. pozwala to na budowanie hierarchii tytułów. <h1>treść </h1> główny <h2> treść </h2> .....
Znaczniki formatowania tekstu: blokowe – definiują bloki tekstu, np. <p>, <h1>, <hr>, <ul> , <li>; wierszowe – z reguły zmieniają atrybuty tekstu, np. <b>, <i>, <img>, <a> uwaga! Znaczników nie mieszamy dowolnie. W elemencie wierszowym nie umieszczamy znaczników blokowych.
Znacznik akapitu <p>tekst</p> <p align="right">tekst</b> <p align="center">tekst</b> <br/> przełamanie wiersza w obrębie akapitu jak nie podamy nazwy protokołu przy wpisywaniu adresu zasobu w przeglądarce internetowej przeglądarka przyjmie domyślnie, że jest to http
Formatowanie czcionki <b>tekst</b> tekst pogrubiony <i>tekst </i> kursywa <u>tekst<u> tekst podkreślony
Znacznik <hr> wstawia linię poziomą <hr color="green" width="50%"> <hr align="center" color="green" size=7 width="30%">
Atrybuty znacznika <hr> size – zmienia grubość linii width – ustala długość linii w procentach strony align – określa położenie linii na stronie, domyślnie pośrodku color – określa kolor linii
Znacznik <font> Definiuje czcionkę. Atrybuty: size="x" wielkość czcionki; x=1..7 standard x=3; size="+x " o x więcej od standardu; size="-x " o x mniej od standardu color="kolor " kolor czcionki
Listy <znacznik_listy> <znacznik_elementu>treść elementu</ znacznik_elementu> ... </znacznik_listy>
Listy nieuporządkowane wypunktowanie <ul type="punktor"> <li> pierwszy element </li> <li> drugi element </li> ... <li> n-ty element </li> </ul> punktor = disc, square, circle (koło, wypełniony kwadrat, okrąg)
Listy nieuporządkowane wyliczanie <ol type=„wyróżniki"> <li> pierwszy element </li> <li> drugi element </li> ... <li> n-ty element </li> </ol> wyróżniki=a, A, i, I, 1 (małe litery, duże litery, liczby w zapisie rzymskim z małymi literami, liczby w zapisie rzymskim z dużymi literami, cyfry w zapisie arabskim)
Grafika znacznik <img src> <img src="względną ścieżka dostępu do o23brazka" alt="Tu podaj tekst alternatywny" />
Poprawne ścieżki dostępu do obrazka plik.jpg – obrazek i dokument html w tym samym katalogu katalog/plik.gif – obrazek znajduje się w podkatalogu katalogu z dokumentem html ../ plik.jpg – dokument html w podkatalogu ../katalog/plik.gif – obrazek i strona w dwóch różnych podkatalogach
Atrybuty znacznika <img src> align ="top" tekst przy górnej krawędzi grafiki ="left" tekst po lewej stronie grafiki ="right" tekst po lewej stronie grafiki =„bottom" tekst przy górnej krawędzi grafiki =„midlle" tekst na wysokości środka grafiki
wysokość i szerokość grafiki <img src="obraz.jpg" height="wysokość" width="szerokość">
Formaty plików graficznych GIF - dla rysunków składających się z mniej niż 256 kolorów, np. przyciski menu i inne "ręcznie" rysowane ozdobniki. Format ten obsługuje przezroczystość. JPG - dla zdjęć wielokolorowych. Nie obsługuje przezroczystości. PNG - pozwala zapisywać z bardzo dobrą jakością zarówno ręcznie rysowane grafiki jak i zdjęcia. Obsługuje kompresję oraz zarówno pełną przezroczystość jak i półprzezroczystość.
Odnośniki (hiperłącza) <a> wskazują miejsce, do którego przeniesie nas przeglądarka po kliknięciu na wyróżnionym przez nas tekście lub obrazku. Znacznik <a> definiuje tzw. kotwicę: źródłową – zaznacza obiekt, tworzący połączenie z obiektem docelowym; docelową – to miejsce do którego nastąpi przeniesienie.
Odsyłacz do podstrony <a href="ścieżka dostępu do podstrony"> opis odsyłacza</a> np. <a href="O firmie.html">O firmie</a> <a href="Grafika/Galeria.html">Galeria</a> <a href="../index.html">Strona startowa</a>
Odsyłacz do adresu internetowego <a href="adres internetowy"> opis odsyłacza</a> np. <a href=" http:///www.techpal.com.pl"> Strona firmowa</a>
Odsyłacz pocztowy połączenie automatycznie wywołujące zaadresowany formularz poczty elektronicznej <a href="mailto:adres poczty e-mail"> opis odsyłacza</a> np. <a href="mailto:techpal@techpal.com.pl"> poczta elektroniczna</a>
Odsyłacz obrazkowy <a href="adres"><img src="ścieżka dostępu do obrazka" alt="tekst alternatywny" border="0" /></a> gdzie adres: ścieżka dostępu do dowolnej Twojej podstrony (np.: index.html, strona2.html), adres internetowy poprzedzony przez http://, adres poczty elektronicznej poprzedzony przez "mailto:".
Nazwy odnośników wykorzystuje się przy hiperłączach lokalnych <a name="nazwa odnośnika">tekst</a> wstawiamy w miejscu, do którego będziemy chcieli się przenieść; <a href=#nazwa odnośnika>tekst lub obrazek</a> wstawiamy w miejscu, z którego chcemy się przenieść
Przykład <a name="słowniczek">Terminy i definicje</a> <a href="#słowniczek">Dodatek</a>
Tabele <table> <tr><!--wiersz1> <td>komórka1</td><td>komórka2</td> <!--...--><td>komórkaN</td> </tr> <!--dalsze wiersze tabeli--> <tr><!--wierszM> <td>komórka1</td><td>komórka2 </td><!--...--><td>komórkaN</td> </table>
Dodatkowe znaczniki tabeli <caption> podpis, umieszczany w obrębie tabeli <th> komórka nagłówka tabeli, <thead> część nagłówkowa tabeli, <tbody> część zawierająca główną tabelę, <tfood> stopka tabeli, np. podpis pod tabelą podział tabeli przy wykorzystaniu tych elementów przydatny jest w przypadku długich tabel (nagłówek i stopka mogą być drukowane na każdej stronie)
Mapy odnośników na obrazach <img src= "adres_obrazu" usemap= "#nazwa_mapy" alt= "opis alternatywy"> <map_name= "nazwa_mapy"> <area shape= "rodzaj obszaru" coords= "koordynaty" href="adres_odnośnika" alt="tekst alternatywny"> ..... </map>
Atrybut Shape określa kształt obszaru reagującego na kliknięcia, ma 4 wartości: default – cały obszar obrazu; rect – prostokąt o zadanych wymiarach; circle – koło o zadanym środku i promieniu; poly – wielokąt o zadanych wierzchołkach.
koło circle – coords="x, y, r" gdzie x, y współrzędne środka r – promień rect – prostokąt coords="x1, y1, x2, y2" gdzie x1, y1 – współrzędne lewego górnego rogu x2, y2 – współrzędne prawego dolnego rogu; poly – wielokąt coords="x1, y1, x2, y2,...,xN, yN" gdzie x1, y1 – współrzędne 1 wierzchołka, x2, y2 – współrzędne 2 wierzchołka, .... xN, yN – współrzędne N-tego wierzchołka.
Struktura z ramkami Definiowanie strony z ramkami składa się z następujących kroków: podział witryny na sekcje przy pomocy znacznika <framset>, przypisanie ramkom zawartości <frame>, zdefiniowanie treści dla przeglądarek, które nie obsługuja ramek <noframes> Uwaga! <framset> występuje zaraz za </head>, <body> tylko w sekcji <noframes>
Ogólna definicja ramek <framset atrybuty> <frame atrybuty > .... </framset> Układ strony, czyli liczbę ramek i ich rozmieszczenie regulują atrybuty znacznika <framset>: cols i rows Rozmiar w pikselach, w procentach lub automatycznie (znak *).
Przykłady: cols="25%, 75%" cols="150, * " rows="15%, *, 15%"
Znacznik <frame> przyjmuje następujące atrybuty: frameborder – określa, czy ma być widoczne obramowanie ramki (0-brak, 1- jest); marginheight – okresla rozmiar górnego i dolnego marginesu; marginwidht – okresla rozmiar lewego i prawego marginesu; name – określa nazwę ramki; noresize – powoduje, że rozmiar ramki nie będzie mógł być zmieniany przez użytkownika; scrolling – określa, czy mają być widoczne paski przewijania: yes, no, auto. src – określa adres dokumentu, który ma się pojawić w ramce.
Przykład </head> <framset cols=„25%,*> <frame src=„strona1.html”> <frame src=„strona2.html”> <noframes> <body> <p> Twoja przeglądarka nie obsługuje ramek.</p> <p> Dokumenty znajdziesz <a href=„strona1.html”>tutaj</a> i <a href=„strona.html”></a> </p> </body> </noframes> </framset>
Zagnieżdżanie ramek <framset rows=„30%,*> <framset cols=„25%,*,25%> <frame src=„strona1.html”> <frame src=„strona2.html”> <frame src=„strona3.html”> </framset> <framset cols=„50%,*%> <frame src=„strona4.html”> <frame src=„strona5.html”>