Tworzenie stron internetowych Podstawy HTML „Ucz się, jak gdybyś miał żyć wiecznie, żyj – jak gdybyś miał umrzeć jutro” Św. Izydor z Sewilli Tomasz Piłka
HTML – historycznie HTML (Hypertext Markup Language) to język znacznikowy służący do pisania stron WWW. Przyjmuje się, że został opracowany przez Tima Bernersa-Lee w roku 1990, Prawdopodobnie najstarszy dokument HTML dostępny w Internecie został utworzony 13 listopada 1990 roku. Tim Berners-Lee twórca koncepcji WWW (WorldWideWeb) Komputer NeXT, na którym pracował pierwszy serwer WWW (dziś znajduje się on w muzeum CERN w Meyrin).
HTML HTML umożliwia zapis treści dokumentu i równocześnie opis jego układu graficznego. Dokument HTML to plik tekstowy, z ewentualnymi załącznikami, w którym znajduje się tekstowa treść przeplatana z rozkazami formatującymi, zapisanymi w formie tzw. znaczników (tags). Każdy znacznik HTML przyjmuje postać słowa kluczowego otoczonego ostrymi nawiasami (znakami "<" i ">").
HTML Większość znaczników HTML występuje w parach, na które składają się znacznik otwierający i znacznik zamykający. Znacznik zamykający różni się od otwierającego wyłącznie znakiem ukośnika poprzedzającym słowo kluczowe. Znaczniki HTML mogą posiadać atrybuty sterujące, które wpływają na ich funkcjonowanie. Atrybuty te są umieszczane wewnątrz znacznika, za słowem kluczowym. Język HTML dopuszcza też możliwość stosowania komentarzy, będących blokami tekstu ignorowanymi przez programy klientów HTTP (przeglądarki). Komentarze otacza się znakami "<!--" i "-->".
Struktura dokumentu HTML Typ dokumentu <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Tekst</title> </head> <body> </body> </html> Niewidoczna Zawartość pliku Widoczna Zawartość pliku
Elementy nagłówka <head> <title> tytuł strony </title> <base href="http://www.firma.com/dokument.html"> <meta name="Description" content=„opis strony"> <meta name="Keywords" content="lista wyrazów kluczowych"> <meta name="Author" content="nazwisko autora"> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> <meta http-equiv="Content-Language" content="pl"> <meta http-equiv="Creation-Date” content="Tue, 04 Dec 1993 21:29:02 GMT"> <meta name="Generator" content="nazwa edytora">
Elementy <body> - tło dokumentu Obraz jako tło <body background=„URL pliku graficznego"> Kolor tła <body bgcolor="kolor"> "kolor" może być podany „imiennie” (np. red, green, black, white) lub za pomocą wartości heksadecymalnych (szesnastkowych) w systemie RGB
Kolory w HTML-u Każda przeglądarka stron WWW pozwala uzyskać na ekranie jednocześnie 256 różnych kolorów, jednak tylko 216 z nich poprawnie wyświetlają wszystkie przeglądarki internetowe. Dowolny kolor składa się z trzech barw podstawowych: czerwonej, zielonej i niebieskiej (red, green, blue - czyli RGB). Do dyspozycji mamy 256 odcieni każdego z tych kolorów i poprzez ich mieszanie otrzymujemy dowolny inny kolor. Kolor RGB zapisywany jest w postaci #RRGGBB gdzie RR to zapisany szesnastkowo (heksadecymalnie) kolor czerwony (red), GG to kolor zielony (green), a BB to kolor niebieski (blue). Oznacza to, że każdy kolor może przyjmować wartości od 00 do FF.
Kolory w HTML-u Można też używać nazw kolorów. Podstawowe 16 określeń pochodzi od nazw kolorów, które można było uzyskać na komputerach z kartą graficzną VGA (komputery pokazywały kiedyś tylko 16 kolorów): white (kolor biały - #FFFFFF), black (kolor czarny - #000000), green, blue, fuchsia, yellow, lime, olive, purple, teal, silver, red, navy, maroon, gray, aqua. Ostatecznie zwiększono jednak liczbę dostępnych nazw kolorów do 140.
Elementy <body> - pozioma linia Linię poziomą wstawiamy za pomocą polecenia <hr>. Linii możemy nadać atrybuty: grubość, np.: <hr size=”5”> długość określoną w pikselach <hr width=”300”> lub w procencie szerokości strony <hr width=”50%”> wyrównanie na stronie (domyślnie na środku), np.: <hr align=”left”> Atrybuty można łączyć, np.: <hr align=”right” size=”8” width=”200”>
Formatowanie tekstu - wiersz Polecenie <br> przenosi tekst o jeden wiersz w dół (w ramach akapitu): To jest pierwszy wiersz <br> To jest drugi wiersz <br> To jest trzeci wiersz <br> To jest czwarty wiersz <br> Napisanie kilku kolejnych <br> pozwala poszerzyć pionowy odstęp między elementami (przez wstawianie pustych wierszy): <br><br><br><br>
Formatowanie tekstu - akapity Aby rozdzielić akapity, należy się posłużyć poleceniem <p> : <p>To jest treść pierwszego akapitu</p> <p>To jest treść drugiego akapitu</p> Wyrównywanie tekstu w akapicie: środkowanie <p align=”center”> tekst akapitu </p> wyrównywanie do prawego marginesu <p align=”right”> tekst akapitu </p> wyrównywanie do lewego marginesu <p align=”left”> tekst akapitu </p> wyrównanie jednocześnie do lewego i prawego marginesu <p align=”justify”> tekst akapitu </p>
Formatowanie tekstu - nagłówki <hn> </hn> cyfra n oznacza stopień nagłówka (mamy ich 6). Polecenie wprowadzające nagłówek stopnia pierwszego może wyglądać następująco: <h1> nagłówek pierwszego poziomu </h1>. Nagłówki można wyrównać używając polecenia align: na środku strony <h1 align=”center”> tytuł </h1> wyrównywanie do prawego marginesu <h1 align=”right”> tytuł </h1> wyrównywanie do lewego marginesu <h1 align=”left”> tytuł </h1>
Formatowanie tekstu - czcionka <b> tekst pogrubiony </b> <i> tekst pochylony </i> <u> tekst podkreślony </u> <strike> tekst przekreślony </strike> <tt> tekst maszynowy </tt> <sup> indeks górny </sup> <sub> indeks dolny </sub> <blink> tekst migający </blink> <center> tekst lub obrazek na środku </center>
Formatowanie tekstu - czcionka Krój czcioki: <font face="nazwa_kroju"> tekst </font> Na przykład: Time Arial Courier Kolor czcionki: <font color=„kolor"> tekst </font>
Formatowanie tekstu - czcionka Wielkość czcionki. wartość absolutna: <font size="x">Tekst </font> Możemy stosować czcionkę o wielkości od 1 do 7 (x = 1...7). Im większa wartość, tym większa czcionka w przeglądarce. wartość relatywna (względna)- wielkość zmiany. Czcionka standardowa ma wielkość 3, możemy dodać do niej co najwyżej 4 jednostki lub odjąć co najwyżej 2. <font size="+x">Tekst </font> <font size="-x">Tekst </font>
Listy (wykazy) wypunktowane kod efekt wykonania <ul> <li> Pierwszy punkt <li> Drugi punkt <li> Trzeci punkt </ul> Pierwszy punkt Drugi punkt Trzeci punkt <ul type=”disc”> <ul type=”circle”> <ul type=”square”>
Listy (wykazy) numerowane kod efekt wykonania <ol> <li> Pierwszy punkt <li> Drugi punkt <li> Trzeci punkt </ol> 1. Pierwszy punkt 2. Drugi punkt 3. Trzeci punkt <ol start=”x”> <ol type=”A”> numerowanie wg wielkich liter <ol type=”a”> numerowanie wg małych liter <ol type=”I”> numerowanie wg wielkich liczebników rzymskich <ol type=”i”> numerowanie wg małych liczebników rzymskich <ol type=”1”> numerowanie wg liczebników arabskich
<a href="adres_strony_internetowej"> nazwa strony </a> Odsyłacze do stron WWW <a href="adres_strony_internetowej"> nazwa strony </a> Przykład: <a href="http://www.onet.pl"> Portal Onet.pl</a> Wynik: Portal Onet.pl Uwagi: Na ekranie przeglądarki jest wyświetlany tekst, który znajduje się między znacznikami <a href="... "> i </a>. Adres internetowy jest podawany w cudzysłowie.
Odsyłacze do plików Odsyłacz do innego pliku HTML (w tym samym katalogu): <a href="nazwa_strony.html” target=”_blank”> Napis </a> Odsyłacz do innego pliku HTML w katalogu podrzędnym: <a href=”nazwa_katalogu/nazwa_strony.html"> Napis </a> Odsyłacz do pliku HTML w katalogu równorzędnym: <a href="../nazwa_katalogu/nazwa_strony.html"> Napis</a> Odsyłacz do pliku tekstowego: <a href=„nazwa_pliku_tekstowego"> Tekst </a> Odsyłacz do pliku dźwiękowego/filmu: <a href=”nazwa_pliku_multim"> Tekst </a>
Odsyłacze do miejsca na stronie Oznaczenie miejsca (etykiety) <a name="nazwa_etykiety"> Odsyłacz do etykiety na tej samej stronie <a href="#nazwa_etykiety"> Tekst lub obrazek, na który klikamy </a> Odsyłacz do etykiety na innej stronie <a href="strona.htm#nazwa_etykiety"> Tekst lub obrazek, na który klikamy </a>
Odsyłacze do poczty elektronicznej <a href=”mailto:adres@poczty”> tekst lub obrazek, na który klikamy </a> Po kliknięciu zostanie na komputerze klienta uruchomiony standardowy program do obsługi poczty e-mail. Dodatkowe opcje: <a href="mailto:nowak@amu.edu.pl ?cc=jan.kowal@firma.pl &subject=List ze strony &body=Witajcie Moi drodzy"> Napisz do mnie </a>
<img src=”URL_pliku_graficznego” /> Grafika Elementy graficzne są wyświetlane na stronie dzięki poleceniu: <img src=”URL_pliku_graficznego” /> Znacznik img może mieć dodatkowe atrybuty: width=”szerokość” height=”wysokość” alt=”tekst_opisu obrazka” border=”grubość_obramowania” align=”top | middle | bottom | left | right” (!) hspace=”odstępy_poziome” vspace=”odstępy_pionowe” Pliki graficzne muszą zostać umieszczone na serwerze razem z plikami html tworzącymi stronę.
<img src="razem1.gif" usemap="#razem1" border="0"> Grafika Na stronie można umieszczać również tzw. mapy obrazkowe, czyli obrazy ze zdefiniowanymi obszarami, których kliknięcia powoduje wyświetlenie innego pliku (są to tzw. hot-spots) przykład Definicja obrazka będącego mapą: <img src="razem1.gif" usemap="#razem1" border="0"> Definicja obszarów hot-spots: <map id="razem1" name="razem1"> <area shape="circle" coords="193,86,36" href=„plik1.html" alt="Kubuś Puchatek"> <area shape="rect" coords="114,96,161,157" href=„plik2.html" alt="Kłapouchy"> <area shape="poly" coords="92,72,153,94,144,37" href=„plik3.html" alt="Tygrysek"> <area shape="circle" coords="92,132,24" href=„plik4.html" alt="Prosiaczek"> <area shape="default" nohref="nohref" alt="Moja strona o Kubusiu Puchatku"> </map>
Tabele Tabela w HTML-u składa się z wierszy (zaznaczanych znacznikiem <tr>) oraz zawartych w nich komórek (wprowadzanych znacznikiem <td>). W komórkach można umieszczać tekst lub grafikę. <table width=”50%” border=”5” > <tr> <td> Komórka 11</td> <td> Komórka 12 </td> </tr> <tr> <td> Komórka 21</td> <td> Komórka 22 </td> </tr> </table>
Tabele Znacznik <table> może mieć wiele atrybutów, m.in.: align – określa sposób wyrównania tabeli, width - określa szerokość tabeli w pikselach albo w postaci procentu szerokości ekranu przeglądarki, bgcolor - kolor tła we wszystkich komórkach tabeli, cellpading – ilość wolnej przestrzeni między zawartością komórki a jej brzegiem, cellspacing – przerwa (w pikselach) między poszczególnymi komórkami, border - grubość brzegów w pikselach frame - określa, które części zewnętrznych brzegów tabeli są wyświetlane. rules - pozwala manipulować wewnętrznymi liniami tabeli.
Tabele Niektóre atrybuty można nadać komórkom lub wierszom tabeli, np.: Atrybut colspan – umożliwia rozciągnięcie komórki tabeli na więcej kolumn w wierszu <td colspan=”3”> Atrybut rowspan – umożliwia rozciągnięcie komórki na więcej wierszy w kolumnie <td rowspan=”4”> Komórkom można nadać kolor tła inny niż kolor tła całej tabeli.
Ramki Ramki pozwalają na wyświetlenie na stronie innej strony internetowej lub innego pliku. <iframe src=”URL_dokumentu” name=”nazwa_ramki”>tekst dla użytkowników przeglądarek nie obsługujących takich ramek </iframe> Znacznik iframe może mieć dodatkowe atrybuty: frameborder=”0|1” height=”wysokość_ramki” width=”szerokość_ramki” marginwidth=”szerokość_marginesu” marginheight=”wysokość_marginesu” scrolling=”yes|no|auto” align=”top | middle | bottom | left | right”>
Dziękuję za uwagę