Podstawowe wiadomości HTML 4.0 Podstawowe wiadomości
HTML HTML – Hypertext Markup Language – język znaczników hipertekstowych umożliwia definiowanie struktury i wyglądu stron internetowych, ich zawartości oraz powiązań z innymi zasobami Sieci Charakterystycznym elementem tego języka są tagi (znaczniki). Standaryzacją znaczników HTML zajmuje się konsorcjum W3C (World Wide Web Consortium). www.w3c.org Aktualna wersja: 4.0 – dalej nie jest rozwijana. Dokument HTML to zwykły plik tekstowy ASCII (z odpowiednim rozszerzeniem np.html)– nie zwiera żadnych informacji właściwych dla konkretnej platformy systemowej.
Znaczniki Znaczniki (tagi) - definiują parametry dokumentu i obiektów. Umieszczamy je w nawiasach ostrych np. <html> Większość znaczników obowiązuje w określonym obszarze dokumentu i ma swój początek i koniec działania <b> obszar ... </b> Niektóre znaczniki występują pojedynczo, np. <br> , <img> Tagi mogą posiadać także swoje atrybuty np. <font color=”red” size=”12”> tekst </font> Znaczniki można zagnieżdżać podobnie jak nawiasy w matematyce.
Struktura dokumentu HTML Zawartość całego dokumentu umieszczamy pomiędzy znacznikami <html> </html> ; znacznik otwierający wraz ze znacznikiem zamykającym tworzą tzw. Element HTML Komentarze w dokumentach HTML : <!-- treść komentarza --> <html> <head> <!-- nagłowek dokumentu – zawiera informacje i parametry dotyczące dokumentu --> </head> <body> <!-- body zawiera zasadniczą treść naszego dokumentu --> </body> </html>
Struktura dokumentu HTML – sekcja <head> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2"> <meta name="description" content="opis naszej strony www"> <meta name="keywords" content="słowa kluczowe"> <meta name="author" content="twórca strony”> <meta name="generator" content="nazwa naszego edytora HTML"> <title>Tytuł naszego dokumentu HTML</title> </head>
Struktura dokumentu HTML – sekcja <body> HTML jest językiem bezformatowym, w którym ignorowane są przejścia do nowej linii i spacje, odpowiednią strukturę tekstu na stronie uzyskujemy za pomocą odpowiednich znaczników. <p> </p> - akapit <div> </div> - grupuje elementy w jeden blok np. tekst <pre> </pre> - wyświetla tekst wraz z białymi znakami <hr> - linia pozioma <br> - przejście do nowej linii <h1></h1> - ....<h6></h6> - elementy definiujące nagłówki; h1 – największy Należy używać CSS (Cascade Style Sheet) do ustawiania formatu czcionek np. koloru, rodzaju, podkreśleń pogrubień itp.
Wstawianie grafiki Do umieszczania grafiki na stronie służy znacznik <img>. Nazwę pliku graficznego podajemy jako wartość atrybutu src np. możemy również wskazać miejsce w sieci do naszego obrazka: Najczęściej spotykane formaty graficzne w sieci: JPG, JPEG – najlepiej nadaje się do obrazów zawierających dużą ilość przejść tonalnych np. zdjęć GIF – najczęściej używany do grafiki zawierającej: napisy i elementy na jednolitym tle oraz obszary o jednolitym wypełnieniu, obsługuje max 256 kolorów <img src="foto.jpg" height="50" width="120" alt="tekst zastępczy"> <img src="http://www.adreswww.pl/foto.jpg" height="50" width="120" alt="tekst zastępczy">
Odnośniki Odsyłacze (linki, odnośniki, łącza) są najbardziej charakterystycznymi elementami dokumentu HTML, umożliwiają powiązanie miedzy sobą dokumentów w sieci WWW. Pierwszy odnośnik spowoduje otwarcie dokumentu strona_druga.html w tym samym oknie przeglądarki, natomiast drugi odnośnik otworzy nowe okno przeglądarki i w nim stronę drugą. 1) <a href="strona_druga.html" target="_self">odnośnik do strony drugiej</a> 2) <a href="strona_druga.html" target="_blank">odnośnik do strony drugiej</a>
Odnośniki cd... Odnośniki mogą wskazywać nie tylko na dokumenty html lecz np. na plik graficzny, miejsce na serwerze FTP lub na adres poczty elektronicznej. Przykład odnośnika prowadzącego do adresu poczty elektronicznej: Po uaktywnieniu takiego odnośnika zostaniemy przeniesieni do domyślnego klienta poczty zainstalowanego w systemie, zostanie w nim utworzona nowa wiadomość pocztowa z wypełnionymi polami dot. adresu odbiorcy, tematu wiadomości i częściowo jej treści. <a href="mailto:autor@strony.pl?subject=temat wiadomości&body=Piszę do Pana bo...">napisz do autora strony</a>
Etykiety Etykieta – kotwica, zakładka – czyli odsyłacz do wnętrza dokumentu Znacznik <a></a> umożliwia stworzenie zakładki czyli miejsca do którego ma prowadzić hiperłacze. <a href=”#zakładka_m”>link powodujący przeskok do m</a> A ................. <a name=”zakładka_m”>M</a>
Tabele Tabele języka HTML są ważnym narzędziem kształtującym wygląd strony; umożliwiają poprawne rozmieszczenie na stronie takich elementów jak tekst, grafika czy formularze. Tabelę tworzymy za pomocą znacznika <table> </table>. Każdy wiersz tabeli określa para znaczników <tr></tr> (table row). W każdym wierszu określamy komórki z danymi za pomocą znaczników <td> </td> (table data) <!– prosta tabela składająca się z 2 wierszy i 2 kolumn --> <table border="1" width="40"> <tr><td>komórka1</td><td>komórka2</td></tr> <tr><td>komórka3</td><td>komórka4</td></tr> </table>
Przydatne adresy Strona World Wide Web Consortium http://www.w3c.org Kurs HTML Pawła Wimmera http://webmaster.helion.pl/kurshtml Kurs HTML na stronie magazynu komputerowego „Enter” http://www.enter.pl Kursy HTML i wiele przydatnych narzędzi i wskazówek na stronach dla webmasterów np. http://www.webhelp.pl