Radosław Rudnicki (joix@mat.umk.pl) 05.09.2009 r. Wprowadzenie do języka HTML Do tworzenia stron internetowych wystarczy użyd zwykłego Notatnika oferowanego przez system Windows, czy dowolny inny system operacyjny. Tworzymy przy jego pomocy plik i zapisujemy na dysku pod nazwą z rozszerzeniem.htm lub.html, np. index.html Możemy też użyd doskonalszych narzędzi, np. EasyEclipse (www.easyeclipse.org), ConTEXT (www.context.cx). Kod źródłowy umieszczony w tym pliku zawierał będzie oprócz tekstu także znaczniki następującej postaci: <POLECENIE atrybut_1= wartość_1 atrybut_2= wartość_2 >. Wiele z tych znaczników (ale nie wszystkie) będzie pełniło rolę nawiasu zamykanego przez znacznik </POLECENIE>. Aby wyświetlid stronę internetową zaprogramowaną w pliku.html należy wpisad pełną ścieżkę dostępu do pliku w oknie przeglądarki internetowej (Mozilla Firefox, Internet Explorer), np. C:\html\index.htm. Przeglądarka dokona kompilacji i interpretacji kodu strony, czego efektem będzie wyświetlenie sformatowanego dokumentu HTML. Zasadnicza struktura dokumentu konwencje w programowaniu Szkielet dokumentu HTML z ubogą wersją nagłówka <HTML> <HEAD> <TITLE>Moja pierwsza strona internetowa</title> </HEAD> <BODY bgcolor= #eeeeff > Treść mojej pierwszej strony internetowej </BODY> </HTML> Uwaga: wielokrotne użycie spacji pomiędzy wyrazami będzie pomijane. Znak kooca linii (ENTER) będzie traktowany jak zwykła spacja! Aby użyd kilku efektywnych spacji użyj w kodzie, natomiast przejście do nowej linii uzyskasz wpisując w kodzie znacznik <BR>. Podstawowe polecenia nagłówka (HEAD) Poniższe polecenia umieszcza się jedynie pomiędzy znacznikami <HEAD> oraz </HEAD>.
TITLE - umożliwia wstawienie tytułu strony internetowej, który pojawi się w pasku tytułu przeglądarki internetowej. META definiuje właściwości dokumentu HTML Przykłady: <META http-equiv="content-type" content="text/html; charset=iso-8859-2"> <META name="author" content="jan Kowalski"> <META name="keywords" content="nurkowanie, jezioro, morze, pływanie"> <META name="robots" content="noindex,nofollow"> <META http-equiv="refresh" content="3; url=http://www.reporter.pl/"> Podstawowe polecenia ciała dokumentu. BODY określa ciało dokumentu bgcolor - określa kolor tła dokumentu link - kolor odnośników alink - kolor naciśniętych (aktywnych) odnośników vlink - kolor odwiedzonych odnośników text - kolor tekstu onload, onunload - reakcje na pobranie lub usunięcie dokumentu HTML przez przeglądarkę <BODY bgcolor= #FFDDFF text= #000000 link= #0000DD alink= #DD0000 vlink= #00DD00 > Treść strony </BODY> DIV wstawia dział/paragraf atrybut: align, wartości: center, justify, left, right. <DIV align= justify > Tekst rozdziału </DIV> <I> - pochyla tekst, <I>ten tekst ma być pochylony</i> <B> - pogrubia tekst,
<B>ten tekst ma być pogrubiony</b> <I><B>ten tekst ma być pochylony i pogrubiony </B></I> <U> - podkreśla tekst, <U>ten tekst ma być podkreślony</u> <BR> - przejście do nowej linii HR rysuje linię poziomą align, wartości: left, right, center size - grubośd linii w pikselach, color kolor, width szerokośd w pikselach lub procentach, przykłady: <HR align= center width= 560 color= #000000 size= 1 > <HR align= left width= 100% color= #AAAAAA size= 1 > IMG wstawia obrazek src określa ścieżkę dostępu do pliku/źródła obrazka (source) align określa położenie pliku w tekście, wartości: middle, left, right, top, bottom, border określa grubośd obramowania, gdy obrazek jest odnośnikiem, 0 brak obramowania, alt tekst alternatywny (konieczny), hspace, vspace odległości tekstu od obrazka w poziomie i w pionie, width, height szerokośd i wysokośd obrazka, title tekst opisujący obrazek, wyświetlany po naprowadzeniu wskaźnika myszy, <IMG src= zdjecie.jpg alt= Zdjecie Kowalskiego title= Zdjecie Kowalskiego width= 200 height= 150 hspace= 5 vspace= 5 border= 0 > A wstawia kotwicę albo odnośnik. name wstawia kotwicę o danej nazwie href wstawia odnośnik do dokumentu o danym adresie class korzysta ze zdefiniowanego uprzednio stylu
przykłady: target definiuje okno lub ramkę, w której otwarty zostanie odnośnik, wartości: _blank, _top, _self, nazwa-własna <A name= rozdzial_1 ></A> <A href= http://wp.pl target= _blank >Wirtualna Polska</A> <A href= #rozdzial_1 >przejdź do rozdziału 1</A> OL lista numerowana, atrybut type, wartości: 1,i,a,A,I LI element listy <OL type= 1 > <LI>Element pierwszy</li> <LI>Element drugi</li> <LI>Element trzeci <OL type= a > <LI>podpunkt pierwszy</li> <LI>podpunkt drugi</li> </OL> </LI> </OL> UL lista nienumerowana, atrybut type, wartości: disc, square, circle LI element listy <UL type= square > <LI>Element pierwszy</li> <LI>Element drugi</li> <LI>Element trzeci <UL type= square > <LI>podpunkt pierwszy</li> <LI>podpunkt drugi</li> </UL> </LI> </UL> TABLE tabelka border, width, align, cellspacing, cellpadding, bgcolor TR wiersz tabeli
width, height, bgcolor, align, valign, rowspan, style= backgroundrepeat: url(http://wp.pl/obrazek.gif); TD kolumna tabelki width, height, bgcolor, align, valign, colspan, style= backgroundrepeat: url(http://wp.pl/obrazek.gif); <TABLE border="1" cellspacing="1" cellpadding="5" align="center" width="300" summary="wizytowka Kowalskiego"> <TD align="center" colspan="2"><b>wizytówka</b></td> <TD align="right" width="150">imie i nazwisko :</TD> <TD align="right" width="150">jan Kowalski</TD> <TD rowspan="2" align="right">numer telefonu :</TD> <TD>0-56 123 45 67</TD> <TD>0 663 456 789</TD> </TABLE> Ćwiczenie Utworzyd własną stronę internetową w języku HTML (plik nazwad index.html) zawierającą: swoją wizytówkę (imie, nazwisko, e-mail z odnośnikiem mailto:, zdjęcie) z wykorzystaniem tabelki, numerowaną listę wykładów w kursie studiów podyplomowych, odnośnik do drugiego pliku (linki.html), który będzie zawierał listę odnośników do ulubionych stron WWW otwierających się w nowym oknie przeglądarki.