1. Wprowadzenie do HTML dr inż. Jan Kapała 2007

2. HTML (Hyper Text Markup Language) jest językiem programowania, który umożliwia równoczesne: • redagowanie tekstu • umieszczanie obrazów w tekście • natychmiastowe przełączanie się między różnymi fragmentami tekstu (tzw linki) • generowanie treści interaktywnej • implementowanie w tekście samodzielnych programów oraz elementów multimedialnych (film, dźwięk )

3. Kod źródłowy języka HTML pisze się w trybie tekstowym a następnie odtwarza w przeglądarce. Przyjętym sposobem deklarowania tekstu jako obiektu HTML jest nadanie plikowi tekstowemu z treścią dokumentu rozszerzenia *.html lub *.htm Do edycji programów HTML (tzw. stron www) używa się specjalnych edytorów tekstowych, które zaznaczają kolorem lub rodzajem czcionkielementy języka (tzw. tagi).

4. Tag jest instrukcją w postaci słowa umieszczonego w nawiasach ostrych, na przykład: <body> Większość tagów używa się w parach jako tag otwierający i tag zamykający, na przykład: </body> Tag może zawierać różne atrybuty, które określają szczegółowe właściwości i jego sposób działania.

5. Przeglądarka analizując tekst dokumentu natrafiwszy na tag <html> interpretuje go aż do napotkania tagu </html> który oznacza koniec dokumentu html • Wnętrze dokumentu jest podzielone odpowiednimi tagami na dwie główne części: • <head> … </head> • <body> … </body>

6. Część pliku pomiędzy tagami <head> … </head> powinna zawierać co najmniej tag <title>tytuł strony</title>, między którymi umieszcza się tytuł pokazywany w nagłówku przeglądanej strony. Ponadto może zawierać tzw. metatagi, które są informacją dla robotów sieciowych zbierających informacje do serwisów wyszukujących informacje w internecie (Google, Altavista, Scirus itp.)

7. Część pliku pomiędzy tagami <body> … </body> Zawiera treść strony www zredagowaną za pomocą innych tagów. Jednym z głównych tagów jest tag formatujacy akapit : <p> tekst akapitu </p> Akapit modyfikuje się dodatkowymi atrybutami Na przykład: <p align=right> tekst akapitu align=right</p> <p align=left> tekst akapitu align=left </p> <p align=center> tekst akapitu align=center </p>

8. W rezultacie tekst pliku html wygląda tak: <html> <head> <title> strona testowa</title> <head> <body> <p align=right> tekst akapitu align=right </p> <p align=left> tekst akapitu align=left </p> <p align=center> tekst akapitu align=center </p> </body> </html> A strona wyświetlona w przegladarce tak:

9. Główne atrybuty taga <body> : • Określajace kolor: • text kolor tekstu • bgcolor kolor tła • link kolor odnośnika • alink kolor uruchamianego odnośnika • vlink kolor odnośnika odwiedzonego wcześniej • Inne: • background URL(odnośnik) do obrazka stanowiącego tło strony • onload, onunload reakcja na załadowanie i opuszczenie dokumentu przez przeglądarkę

10. Tekst pliku html (z tekstem testowym)wygląda tak: <html> <head> <title> strona testowa </title> <head> <body text=yellow bgcolor=maroon> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris sed massa sit amet leo aliquam tincidunt. Praesent consectetuer justo ut lacus. Fusce dolor. Aliquam ac sapien in quam accumsan dictum. </p> <p> Nunc vitae leo. Integer tristique tempus ipsum. Mauris id diam. Cras vel odio bibendum ipsum vulputate luctus. Maecenas tellus justo, ultrices non, commodo eget, convallis sit amet, magna. Nam lectus odio, nonummy nec, dictum a, dictum vel, leo. Nullam eu pede in nunc vulputate pharetra. Donec ornare mauris a eros. Maecenas non nunc at orci fringilla pretium. </p> </body> </html>

11. Plik z poprzedniej planszy po wyświetleniu w przegladarce wygląda tak (dwa akapity):

12. Tagi definiujące nagłówki: <h1> </h1> <h2> </h2> <h3> </h3> <h4> </h4> <h5> </h5> <h6> </h6> określają rozmiar tekstu nagłówka wzrastający od <h6> do <h1>

13. Tekst pliku html razem z obrazem z przeglądarki: <html> <head> <title> strona testowa </title> <head> <body text=yellow bgcolor=green> <h1> Lorem ipsumh1</h1> <h2> Lorem ipsumh2</h2> <h3> Lorem ipsumh3</h3> <h4> Lorem ipsumh4</h4> <h5> Lorem ipsumh5</h5> <h6> Lorem ipsumh6</h6> </body> </html>

14. Pliki graficzne (z rozszerzeniem jpg, gif, png) umieszcza się za pomoca tagu <img src=”url obrazka”>: <html> <head> <title> strona testowa </title> <head> <body text=yellow bgcolor=green> <h1> Lorem ipsum</h1> <p> <img src="small.jpg" width=80 border=4> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris sed massa sit amet leo aliquam tincidunt.</p> </body> </html>

15. Do tagu wprowadzającego obrazek warto dodać się atrybut alt, który podaje tekst wyświetlający się zamiast obrazka, gdy nie jest możliwe jego wyświetlenie (zmienione także sa inne atrybuty): <html> <head> <title> strona testowa </title> <head> <body text=antiquewhite bgcolor=firebrick> <h1> Lorem ipsum</h1> <p> <img src="" width=120 border=2 alt="fraktal"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris sed massa sit amet leo aliquam tincidunt.</p> </body> </html>

16. W każdym miejscu tekstu można natychmiast przejść do nowej linii tagiem <br> <html> <head> <title> strona testowa </title> <head> <body text=darkred bgcolor=aquamarine> <h2> Lorem ipsum</h2> <p> Lorem ipsum dolor sit amet,<br> consectetuer adipiscing elit. <br> Mauris sed massa sit amet leo aliquam tincidunt.</p> </body> </html>

17. Lista może być numerowana <ol> </ol> lub nienumerowana <ul> </ul> a każdy element listy oznacza się tagami <li></li> <html> <head> <title> strona testowa </title> <head> <body text=indigo bgcolor=beige> <h2> Lorem ipsum</h2> <ol> <li> Lorem ipsum </li> <li> dolor sit amet </li> </ol><ul> <li> consectetuer adipiscing elit. </li> <li> Mauris sed massa sit amet leo </li> <li> aliquam tincidunt. </li> </ul> </body> </html>

18. Większość podstawowych tagów wraz z opisem ich działania oraz stosownymi przykładami można znaleźć na stronie: http://alchemik.ch.pwr.wroc.pl/tin/kurs_html oraz na wielu innych stronach min. http://www.kurshtml.boo.pl/html/zielony.html http://pl.html.net/tutorials/html