Podstawy HTML 1. HTML - to język formatowania dokumentów elektronicznych, który pozwala uformować tekst oraz połączyć go z grafiką. Dokument HTML ma postać pliku tekstowego, gdzie tekst przeplatany jest komendami (ang. tags) języka. 2. Komendy ujęte są w nawiasy ostre - < > i występują najczęściej parami. np. <html></html> 3. Plik źródłowy jest interpretowany przez "przeglądarkę", która prezentuje dokument w jego ostatecznym kształcie. 4. Do tworzenia dokumentów HTML można stosować każdy edytor plików tekstowych. Typowy dokument HTML zdefiniowany jest poprzez komendy podane poniżej: Prolog - deklaracja dokumentu - początek kodu HTML - początek nagłówka treść nagłówka - koniec nagłówka <BODY> - początek części właściwej zawartość części właściwej - koniec części właściwej - koniec kodu HTML Przykład <TITLE> Strona Gimnazjum w Trzebieszowie</TITLE> <BODY> Witajcie na mojej stronie! Polecenie: Skopiuj kod do notatnika i zapisz plik jako strona.html
Ustalamy kolor tła strony <body bgcolor="silver"></body> <BODY bgcolor="silver"> Witajcie na mojej stronie! Wprowadzamy nagłówek strony. Pomiędzy znacznikami <BODY bgcolor="silver"> wpisujemy nagłówek strony. <h2 align = "center"> Publiczne Gimnazjum w Trzebieszowie </h2> align = "center" - oznacza wyśrodkowanie h2 - oznacza nagłówek drugiego stopnia. <BODY bgcolor="silver"><h2 align = "center"> Publiczne Gimnazjum w Trzebieszowie </h2> Wstawiamy linię rozdzielającą <hr width = "570" size = "4" color = "red"/>
<BODY bgcolor="silver"><h2 align = "center"> Publiczne Gimnazjum w Trzebieszowie </h2> <hr width = "570" size = "4" color = "red"/> Wstawiamy zdjęcie <p align = "center"> <img src = "123.jpg" width = "200" height = "130> </p> Uwaga! - należy podać ścieżkę dostępu do pliku 123.jpg <body bgcolor="silver"> <h2 align = "center"> Publiczne Gimnazjum w Trzebieszowie </h2> <hr width = "570" size = "4" color = "red"/> <p align="center"> <img src="c:\users\darek\desktop\strona\123.jpg.jpg" width="400" height="300" alt="alternatywny tekst wyświetlany, gdy nie można wczytać obrazka"> </p>
Wstawiamy listę wypunktowaną <h3> align = "left"> Nasza szkoła zapewnia:</h3> <ol> <li> jeden, <li> dwa, <li> trzy. </ol> <body bgcolor="silver"><h2 align = "center"> Publiczne Gimnazjum w Trzebieszowie </h2><hr width = "570" size = "4" color = "red"/><p align="center"> <img src="c:\users\darek\desktop\strona\123.jpg" width="400" height="300" alt="alternatywny tekst wyświetlany, gdy nie można wczytać obrazka"></p> <h3 align = "left"> Nasza szkoła zapewnia:</h3> <ol> <li> jeden</li> <li> dwa</li> <li> trzy</li> </ol>
Akapit i jego atrybuty Aby zaznaczyć przejście do nowej linii należy zastosować komendę <BR>. Główną komendą formatującą akapit jest <P>.Jeśli używamy jej poprawnie (tzn. zgodnie ze specyfikacją HTML), ujmując pomiędzy <P> i </P> całość tekstu akapitu, to możemy stosować atrybut ALIGN oznaczający: ALIGN=left - równanie do lewej ALIGN=center - centrowanie ALIGN=right - równanie do prawej Przykładowo: <P>Ten tekst domyślnie wyrówna się do lewej</p> <P ALIGN=center>Ten będzie na środku</p> <P ALIGN=right>Ten zaś wyrówna się do prawej</p> da w efekcie: Ten tekst domyślnie wyrówna się do lewej Hierarchia stron Ten będzie na środku Ten zaś wyrówna się do prawej Łączenie stron poprzez "linki" jest podstawową cechą języka HTML (litera H oznacza hipertekst czyli dynamiczny system stron). Planując system stron zaczynamy zwykle od strony głównej, która nazywa się najczęściej index.htm lub index.html (ma to związek z konfiguracją serwerów HTTP, które przyjmują te nazwy jako nazwy domyślne głównych dokumentów systemu stron, wtedy w adresie można pominąć nazwę tej strony, kończąc na nazwie foldera). Połączenie można stworzyć do dowolnej strony w Internecie o znanym adresie (bezwzględnym). W przypadku stron znajdujących się na tym samym komputerze adres może być względny, tak samo jak przy adresie pliku z obrazkiem. Składnia linku ma następującą postać: <A HREF="adres pliku ze stroną">aktywny napis linku</a> Zwykły link odsyła do początku strony. Jeśli jest ona bardzo długa, to można odesłać również do dowolnego punktu strony, pod warunkiem, że zostanie tam umieszczony punkt orientacyjny o następującej składni: <A NAME="dowolna nazwa">napis, od którego ma zostać wyświetlona strona</a>
Wracamy do naszej strony <body bgcolor="silver"><h2 align = "center"> Publiczne Gimnazjum w Trzebieszowie </h2><hr width = "570" size = "4" color = "red"/><p align="center"> <img src="c:\users\darek\desktop\strona\123.jpg" width="400" height="300" alt="alternatywny tekst wyświetlany, gdy nie można wczytać obrazka"></p> <h3 align = "left"> Nasza szkoła zapewnia:</h3> <ol> </ol> <li> jeden</li> <li> dwa</li> <li> trzy</li> Przy pomocy programu Paint wykonajcie taki przycisk. Plik zapiszcie pod nazwą przycisk.png w tym samym katalogu co index.html. Teraz przygotujmy nową stronę i zapiszmy ją pod nazwą omnie.html <TITLE> O mnie</title> <BODY bgcolor="silver"> Kim jestem?
Teraz wykonamy połączenie obu stron index.html oraz o mnie.html w taki sposób aby klik na przycisk powodował otwarcie strony "omnie". Musimy zmodyfikować kod do postaci <body bgcolor="silver"><h2 align = "center"> Publiczne Gimnazjum w Trzebieszowie </h2><hr width = "570" size = "4" color = "red"/><p align="center"> <p align=center> <a href="omnie.html"><img src="c:\users\darek\desktop\strona\przycisk.png"/></a> </p> <br> <p align=center><img src="c:\users\darek\desktop\strona\123.jpg" width="400" height="300" alt="alternatywny tekst wyświetlany, gdy nie można wczytać obrazka"></p> <h3 align = "left"> Nasza szkoła zapewnia:</h3> <ol> <li> jeden</li> <li> dwa</li> <li> trzy</li> </ol> Pamiętajcie o wpisaniu właściwej ścieżki dostępu do przycisku oraz podstrony omnie.html. Elementy tabelek Tabelki są bardzo użyteczną strukturą, która pozwala nie tylko tworzyć tabele i zestawienia ale również budować ogólny szkielet strony, lub dokładnie kontrolować położenie różnych elementów względem siebie i całości strony.
Tabele definiuje się w trzech krokach: a. najpierw defiuje się ramy tabeli (TABLE) b. potem definiuje się wiersz (TR) c. zaś w wierszu poszczególne komórki (TD lub TH) Struktura wiersza wraz z zawartymi w niej komórkami powtarzana jest tyle razy ile jest wierszy w tabeli, zaś powtarzające się komórki tworzą kolumny. Schematycznie wygląda to tak: <TABLE> <TR> <TD>zawartość</TD> <TD>zawartość</TD></TR> <TR> <TD>zawartość</TD> <TD>zawartość</TD</TR> <TR> <TD>zawartość</TD> <TD>zawartość</TD></TR> </TABLE> W naszym schemacie nie uwzględniliśmy polecenia <TH>...</TH>, bo jak się później przekonamy jest ono tylko szczególnym przypadkiem polecenia <TD>...</TD>. W tabelkach szczególnie ważne jest "domykanie" poleceń, ponieważ "otwarta" tabelka (np. taka gdzie jakiś wiersz się zaczyna a nie kończy) jest zwykle w przeglądarce zupełnie niewidoczna. Jeśli jest obszerna, to znalezienie odpowiedniego miejsca w kodzie źródłowym jest bardzo trudne. Wszystkie elementy struktury tabeli mają wiele opcji, które omówimy sobie poniżej.