HTML Opracowała: Iwona Kowalik
HTML to język, w którym tworzone są strony WWW HTML to język, w którym tworzone są strony WWW. Strony te umożliwiają reklamę firmy lub osoby, tworzenie formularzy, opracowywanie gazetek i stron o dowolnej tematyce, popularyzację swoich zainteresowań i zdobywanie nowych znajomych. Skrót HTML oznacza HyperText Markup Language – język hipertekstowego znakowania. Charakterystyczne dla tego języka są tzw. znaczniki (polecenia), czyli informacje zawarte w nawiasach kątowych <>. W nawiasach tych definiujemy elementy strony lub sposób ich formatowania.
Aby zobaczyć przykład kodu, w którym zapisano daną stronę WWW należy w przeglądarce wybrać opcję Widok/Źródło. Postać źródłowa to po prostu plik tekstowy, do którego nazwy dołączono przedłużenie .html lub .htm . Jeden plik w języku HTML opisuje jedną stronę. Kilka stron tworzy prezentację WWW. Gdy wyświetlimy kod źródłowy strony WWW zobaczymy szeregi poleceń języka HTML umieszczonych w nawiasach kątowych, czyli znaczników, które występują najczęściej w parach: <znacznik otwierający>, </znacznik zamykający> . Ukośnik „/” odróżnia znacznik zamykający od otwierającego. Wyjątkami, czyli znacznikami występującymi pojedynczo są: <P> - znacznik akapitu, (stosujemy go by rozpocząć nowy akapit) <BR> - znaczni nowego wiersza <HR>- znacznik umożliwiający dodanie na stronie linii poziomej
Przykład kodu źródłowego:
Jeżeli strona ma być umieszczona w Internecie należy przestrzegać zasad nazywania plików: Nie używamy polskich znaków (ą, ć, ż itp.) Nie używamy w nazwach plików spacji Używamy tylko małych liter
ELEMENTY STRONY to zazwyczaj dwie części: nagłówek i treść ( w języku angielskim te elementy to head i body). Znaczniki <HTML> i </HTML> informują o tym, że wszystko co znajduje się między nimi jest dokumentem HTML. Każdą nową stronę zawsze rozpoczynamy znacznikiem <HTML> i kończymy </HTML>. Para <HEAD> i </HEAD> wyznacza nagłówek, a między nimi wpisujemy kod definiujący tytuł strony. W nagłówku umieszcza się specjalne znaki opisujące m.in. kodowanie znaków specyficznych dla danego języka, informacje o autorze strony, informacje dla wyszukiwarek (np. słowa kluczowe). Powinno się ty znaleźć wyrażenie: <TITLE>Tytuł strony</TITLE>, które definiuje tytuł strony pojawiający się na pasku tytułowym przeglądarki. Para <BODY> i </BODY> wyznacza podstawową treść strony: tekst, obrazy, hiperłącza i inne obiekty, które zamieszcza autor. Dla komputera nie ma znaczenia czy używamy małych, czy wielkich liter w zapisie znaczników.
Przykład: Po wpisaniu w Notatniku poniższego kodu: Kod strony w języku HTML będziemy opracowywać w Notatniku i zapisywać w pliku z rozszerzeniem .htm lub .html. Aby obejrzeć efekt otwieramy ten plik w przeglądarce internetowej. Przykład: Po wpisaniu w Notatniku poniższego kodu: <HTML> <HEAD> <TITLE> Moja strona testowa </TITLE> </HEAD> <BODY>To moja strona testowa. Spróbuję wykonywać na niej pierwsze ćwiczenia z języka HTML. Ciekawe co z tego będzie? </BODY> </HTML> otrzymujemy w przeglądarce następujący wynik:
Nagłówki dzielą tekst na części i służą zwróceniu uwagi czytelnika Nagłówki dzielą tekst na części i służą zwróceniu uwagi czytelnika. Aby zapisać test jako nagłówek należy go ująć między znaczniki nagłówka: <H1>tekst nagłówka </H1> . Znaczniki nagłówka powiększają i pogrubiają tekst. Do dyspozycji mamy sześć poziomów nagłówka, choć projektanci polecają użycie głownie nagłówków drugiego i trzeciego poziomu ( znaczniki <H2> i </H2> oraz <H3> i </H3> ), ponieważ stosowanie znaczników <H1> i <H1> powoduje zbyt duże powiększenie, natomiast tekst między znacznikami <H4> i </H4>, <H5> i </H5> oraz <H6> i </H6> ma rozmiar bliski normalnemu tekstowi.
Przykład: Po wpisaniu do Notatnika kodu: <HTML> <HEAD> <TITLE> Moja strona testowa </TITLE> </HEAD> <BODY> <H1> STRONA POŚWIĘCONA KOTOM I KOTKOM</H1> Kot to słowo o wielu znaczeniach. Może oznaczać zwierzę domowe <BR> ale równie dobrze dzikiego drapieżnika. Kotem nazywa się czasem zająca.<BR> Inne znaczenia kota to m.in. rodzaj kotwicy albo kwiatostan wierzby. <H2> KOT JAKO ZWIERZĘ</H2> <H3> Definicja </H3> Felidae, rodzina ssaków z rzędu drapieżnych, odznaczających się smukłym<BR> i zręcznym ciałem oraz miękką sierścią. <H4> Podział kotów</H4> Do rodziny kotowatych należą dzikie koty oraz koty domowe towarzyszące ludziom. <H5> Przykłady kotów </H5> Koty dzikie: <BR> lew, tygrys, lampart, gepard, serwal, jaguar, puma <H6>Lwy</H6> Lwy żyją na trawiastych równinach lub wśród ciernistych zarośli. <BR> Kilkaset osobników pozostało w jedynym rezerwacie w Indiach, <BR> pozostałe żyją w Afryce. </BODY> </HTML> otrzymamy w przeglądarce:
Tak jak w edytorach tekstu również w języku HTML można podzielić tekst na akapity. Przy wyświetlaniu strony w przeglądarce, akapity zostaną rozdzielone dodatkową przestrzenia. Aby utworzyć akapit stosujemy znaczniki <P> i </P>. Możemy pominąć znacznik kończący akapit </P>. Każdy akapit możemy wyrównać na wybrany spośród niżej wymienionych sposób: Akapit wyrównany do lewej strony <P ALIGN=”left”> Akapit wyrównany do prawej strony <P ALIGN=”right”> Akapit wyśrodkowany <P ALIGN=”center”> Akapit wyjustowany <P ALIGN=”justify”> Podobnie jak akapity możemy wyrównywać nagłówki (tytuły), dodając do znacznika atrybut ALIGN=”rodzaj wyrównania”.
FORMATOWANIE TEKSTU W JĘZYKU HTML Do formatowania tekstu używamy w HTML–u następujących znaczników: Test pogrubiony <B> </B> Kursywa <I> </I> Tekst podkreślony <U> </U> Tekst przekreślony <S> </S> lub <STRIKE> </STRIKE> Indeks górny <SUP> </SUP> Indeks dolny <SUB> </SUB> Tekst zapisany czcionką o stałej szerokości <TT> </TT> Tekst zapisany nieco większą czcionką <BIG> </BIG> Tekst zapisany nieco mniejszą czcionką <SMALL> </SMALL> Zmiana koloru tekstu <FONT COLOR=”określenie koloru”> </FONT> Zmiana wielkości tekstu <FONT SIZE=”wielkość”> </FONT> Zmiana kroju pisma <FONT FACE=”czcionka”> </FONT>
Przykład: W poprzednio użytym kodzie dodamy znaczniki formatujące tekst. Definicję zapiszemy kursywą, a nazwy poszczególnych gatunków zapiszemy pogrubioną czcionką. Ponadto pierwszy nagłówek zostanie wyśrodkowany poprzez dodanie znaczników <CENTER> , </CENTER> .
Otrzymaliśmy następujący wynik:
<FONT FACE=”Arial CE; Helvetica”> nasz tekst </FONT> Przy ustalaniu czcionki dla tekstu na naszej stronie należy unikać egzotycznych krojów pisma, ponieważ na innym komputerze może ich brakować . Z tego powodu należy podawać nie jeden krój, ale najlepiej listę alternatywnych krojów rozdzielonych średnikami, np.: <FONT FACE=”Arial CE; Helvetica”> nasz tekst </FONT>
UWAGA! ZNACZNIK <IMG/> NIE MA POSTACI ZAMYKAJĄCEJ! RYSUNKI I ZDJĘCIA Dzięki wstawianiu obrazków i zdjęć strony WWW stają się bardziej atrakcyjne i ciekawsze. Należy pamiętać o tym, że strona zwierająca duże ilości grafiki dłużej się otwiera, co może zniechęcić ewentualnego gościa naszej strony. Wstawiana grafika powinna być zapisana w pliku typu GIF lub JPEG, ponieważ właściwie wszystkie przeglądarki internetowe umożliwiają oglądanie rysunków zapisanych w tych formatach. Aby wstawić rysunek stosujemy znacznik: <IMG SRC=”nazwarysunku”/> , gdy mamy rysunek w naszym komputerze lub: <IMG SRC=„URL_pliku_graficznego”/> , gdy znamy jego URL. Bardzo ważne jest to by podać dokładne położenie rysunku w komputerze (poprawność ścieżki dostępu)! Aby skrócić ścieżkę dostępu należy obraz umieścić w tym samym katalogu, w którym znajduje się nasza strona. UWAGA! ZNACZNIK <IMG/> NIE MA POSTACI ZAMYKAJĄCEJ!
Szerokość ramki wokół obrazu (np. BORDER=6) Obrazy można wstawiać w odrębnym akapicie lub wewnątrz tekstu. Gdy wstawiamy obraz wewnątrz tekstu znacznik <IMG> musi być umieszczony wewnątrz odpowiedniego znacznika. Obraz może być umieszczony również w nagłówku- wówczas znacznik <IMG/> zapisujemy wewnątrz znaczników nagłówka. Aby wstawić obraz w odrębnym akapicie, umieszczamy znacznik <IMG/> między znacznikami <P> </P> Położenie obrazu ustalamy dzięki następującym atrybutom znacznika <IMG/>: Obraz jest wyświetlany przy lewym marginesie, a tekst pojawia się obok w obszarze między obrazem a prawym marginesem ALIGN=LEFT Obraz jest wyświetlany przy prawym marginesie, a tekst pojawia się obok w obszarze między obrazem a lewym marginesem ALIGN=RIGHT Atrybuty kontrolujące pionowe położenie obrazu względem tekstu, który znajduje się w tym samym wierszu ALIGN=TEXTTOP ALIGN=ABSMIDDLE ALIGN=BASELINE ALIGN=ABSBOTTOM Szerokość ramki wokół obrazu (np. BORDER=6) BORDER
<IMG SRC="html01.jpg" ALT="Zdjęcie kota" /> Język HTML dysponuje mechanizmem umożliwiającym wyświetlanie komentarza w miejscu przewidzianym na obraz. Przeglądarka automatycznie dokonuje wyboru wyświetlanej treści — jeśli pobieranie obrazów jest możliwe i nie zostało zablokowane, komentarz w ogóle nie pojawi się na ekranie; jednak jeśli użytkownik zablokował wyświetlanie obrazów lub też pobranie obrazu z sieci nie powiodło się, na ekranie pojawi się prostokątna ramka z ikoną oraz wprowadzonym wcześniej komentarzem. Opatrzenie komentarzem wszystkich obrazów występujących na stronie jest obowiązkowe. Należy pamiętać o umieszczaniu komentarza już podczas osadzania obrazu na stronie — nie będzie trzeba dokonywać późniejszych korekt kodu. Np. aby opatrzyć komentarzem ”Zdjęcie kota” obraz html01.jpg zapisujemy w kodzie źródłowym: <IMG SRC="html01.jpg" ALT="Zdjęcie kota" /> Opis ten nie będzie w ogóle widoczny. Na ekranie pojawi się dopiero w przypadku problemów z pobraniem obrazu z sieci lub odczytania go z dysku twardego komputera, na którym się znajduje, na przykład jeżeli poda się złą nazwę lub nie umieści pliku obrazu we właściwym katalogu.
Przykład: Jeżeli w tym samym folderze co nasz plik zapiszemy zdjęcie kotka kot.jpg, to może być ono częścią naszej strony. Ustalamy jego położenie po prawej stronie tekstu z ramką o grubości 6 i komentarzem Zdjęcie kota. Wpisujemy zatem pod nagłówkiem H1 kod: <IMG SRC=kot.jpg ALIGN=RIGHT BORDER=6 ALT="Zdjęcie kota" /> Na ekranie zobaczymy:
Aby dostosować rozmiary obrazu do naszych potrzeb stosujemy atrybuty WIDTH=„szerokość w pikselach” lub HIGHT=„wysokość w pikselach” wstawiane wewnątrz znacznika <IMG SRC/>. Wystarczu użyć jednego z tych atrybutów ponieważ HTML zwiększa lub zmniejsza obraz zachowując proporcje w jego wymiarach.
KOLORY Elementom strony WWW można nadawać różne kolory. Można to robić poprzez podawanie określanie angielskiej nazwy koloru lub poprzez podanie wartości koloru w systemie RGB (wartość ta składa się z krzyżyka, trzech liczb zapisanych w systemie szesnastkowym, odpowiadających składowym: czerwonej, zielonej i niebieskiej koloru). Bezpieczniej jest definiować kolory za pomocą notacji RGB niż definiować kolory za pomocą ich nazw, ponieważ nie wszystkie przeglądarki go rozumieją .
Znacznika pozwalające zmienić elementy strony WWW: Zmieniany element Znacznik Kolor tekstu <FONT COLOR=”kolor”> Kolor tła strony <BODY BGCOLOR=”kolor”> Kolor znaków na stronie <BODY TEXT=”kolor”> Kolor nie użytych jeszcze hiperłączy <BODY LINK=”kolor”> Kolor użytych już hiperłączy <BODY VLINK=”kolor”> Kolor aktywnych hiperłączy <BODY ALINK=”kolor”> Kolor tła tabeli <TABLE BGCOLOR=”kolor”> <TR BGCOLOR=”kolor”> <TD BGCOLOR=”kolor”> Kolor obramowania tabeli <TABLE BORDERCOLOR=”kolor”> <TR BORDERCOLOR=”kolor”> <TD BORDERCOLOR=”kolor”>
Wartości kolorów w systemie RGB: Nazwa koloru Angielska nazwa Wartość w systemie RGB Czarny Black #000000 (same zera) Srebrny Silver #C0C0C0 (c zero itd.) Szary Gray #808080 Biały White #FFFFFF Kasztanowy Maron #800000 Czerwony Red #FF0000 Ciemnopurpurowy Purple #800080 Jasnopurpurowy Fuchsia #FF00FF Zielony Green #008000 Cytrynowy Lime #00FF00 Oliwkowy Olive #808000 Żółty Yellow #FFFF00 Granatowy Navy #000080 Niebieski Blue #0000FF Bladoniebieski Aqua #00FFFF Ciemnoturkusowy Teal #008080a
Przykład: Po wprowadzeniu do znacznika BODY informacji o kolorze tła i tekstu: <BODY BGCOLOR=#C0C0C0 BODY TEXT=#000080> otrzymujemy bardziej interesującą stronę:
LINIA ROZDZIELAJĄCA Aby utworzyć poziomą linię, np. rozdzielającą tekst natronie stosujemy znacznik <HR>. Znacznik ten ma swoje atrybuty, umożliwiające definiowanie grubości, długości i wyrównania linii. <HR ALIGN=„położenie”> Określa położenie linii względem okna przeglądarki (po lewej, na środku, po prawej) <HR SIZE=„grubość”> Określa grubość linii w pikselach <HR WIDTH=„szerokość w pikselach”> lub <HR WIDTH=„szerokość w procentach%> Określa szerokość linii w pikselach lub w proporcji do szerokości strony
LISTY PODTEMATÓW, LISTY UPORZĄDKOWANE I NIEUPORZĄDKOWANE HTML pozwala na tworzenie: list uporządkowanych (których elementy są numerowane), poprzez zastosowanie znaczników <OL> </OL> oraz rozpoczęcie każdego elementu listy od znacznika <LI> np. <OL> <LI> element listy <LI> następny element listy ….. </OL> listy nieuporządkowanej, której elementy są oznaczone znakiem wypunktowania. Tworzymy je stosując znaczniki <UL> </UL> i rozpoczynając każdy elementu listy od znacznika <LI> np. <UL> <LI> element listy <LI> następny element listy ….. </UL>
Przykład: Po wpisaniu kodu strony, którą zapiszemy jako zuzia.html: <HEAD> <TITLE> Moja strona WWW </TITLE> </HEAD> <BODY> <BODY BGCOLOR=#800080> <FONT COLOR=#FFFFFF> <CENTER><H1>MOJA STRONA WWW </H1></CENTER> <HR WIDTH=60% SIZE=5 ALIGN=CENTER COLOR=#808080> <P ALIGN="center">Nazywam się Zuzia. Chodzę do szkoły i uwielbiam się uczyć. Moje ulubione przedmioty to: <center> <OL> <LI> język polski <LI> język angielski <LI>historia </OL> </center> <P ALIGN=center>Mam dużo koleżanek i kolegów, np: <UL> <LI> Mariusz <LI>Karolina <LI>Basia </UL> </BODY> </HTML>
Otrzymujemy:
HIPERŁĄCZA Hiperłącze to wyróżniony element, po wybraniu którego (np. przez klikniecie na niego myszą) do okna przeglądarki zostaje załadowany nowy dokument. Do tworzenia hiperłączy służy znacznik <A>. Przyjmuje on postać: <A HREF=”obiekt docelowy”>Treść hiperłącza </A> Treścią hiperłącza może być rysunek lub tekst aktywujący hiperłącze po kliknięciu myszą. Tekst jest zwykle wyświetlany na niebiesko i z podkreśleniem, a rysunek jest otoczony niebieską ramką. Obiektem docelowym jest nazwa lub URL pliku, który ma zostać otwarty przez przeglądarkę. Np. <A HREF=”kotek.html”>DALEJ</A> - po kliknięciu myszą na tekst DALEJ do przeglądarki zostanie załadowany dokument kotek.html Jeżeli hiperłącze ma nas przenosić do strony zamieszczonej w Internecie poza naszym folderem kod HTML przyjmuje postać: <A HREF=http://www.wp.pl/>Wirtualna Polska</A>
KOTWICE WEWNĘTRZNE Przy tworzeniu długich dokumentów zachodzi czasem potrzeba szybkiego przejścia do niektórych miejsc tego dokumentu, np. do pewnego rozdziału. Takiemu przejściu służą w języku HTML tzw. kotwice. Tworzymy je poleceniem: <A NAME=”nazwa kotwicy”>, gdzie nazwa kotwicy to ciąg znaków, do którego będziemy przechodzili. Aby następnie przejść do takiego miejsca, tworzymy hiperłącze poleceniem: <A HREF=”plik.html#nazwa kotwicy”> , gdzie plik.html, to nazwa pliku, w którym stworzyliśmy kotwicę.
JAK W JĘZYKU HTML OPISUJE SIĘ TABELĘ Kod opisujący tabelę zawarty jest wewnątrz elementu <TABLE>. Niestety, olbrzymia elastyczność języka HTML spowodowała, że nie wystarczy utworzyć element <TABLE>, podać liczbę wierszy i kolumn tabeli i rozpocząć wprowadzanie danych. By utworzyć tabelę, konieczne jest utworzenie odrębnych elementów dla każdego wiersza i każdej komórki tabeli! Powoduje to, że tworzenie tabel jest jednym z najbardziej skomplikowanych i frustrujących zadań, przed którymi stają początkujący twórcy stron WWW. Projektując tabele w języku HTML, należy cały czas pamiętać o podstawowej zasadzie: najważniejszym elementem tabeli jest wiersz, który z kolei podzielony jest na komórki. Wierszowi tabeli odpowiada element <TR>, a pojedynczej komórce — element <TH> (w przypadku komórek pełniących funkcję nagłówka) oraz <TD> (w przypadku zwykłych komórek danych). Elementy <TH> oraz <TD> muszą być zawarte w elemencie <TR>, a ten z kolei — w elemencie <TABLE>.
Struktura kodu tabeli wygląda zatem następująco: <TABLE> <TR> <TD> </TD> </TR> <TR> </TD> <TD> </TR> </TABLE> Projektowanie tabeli najlepiej rozpocząć od… narysowania jej na kartce papieru. Naprawdę. To pozwoli zaoszczędzić sporo czasu, gdyż pomoże w przełożeniu podziału na wiersze i komórki na prawidłowy kod HTML tabeli. Tabele o ustalonej szerokości mają stały rozmiar bez względu na wielkość okna przeglądarki. Szerokość tabeli określa się za pomocą parametru WIDTH, np. <TABLE WIDTH=”550”> </TABLE>. Zamiast wartości wyrażonej w pikselach można posłużyć się wartością procentową, np. pół szerokości ekranu przeglądarki zapiszemy następująco: <TABLE WIDTH=50%> </TABLE>. Parametr WIDTH podany w poleceniu <TD> określa szerokość komórki. Aby określić kolor tła tabeli dodajemy parametr BGCOLOR, np. <TABLE WIDTH=”550” BGCOLOR=YELLOW> </TABLE>
Przykład: Do wcześniej stworzonej strony zuzia Przykład: Do wcześniej stworzonej strony zuzia.html dodamy kolejną linię, a pod nią zapiszemy jako nagłówek H2 tekst: Oto moje oceny: . Poniżej zapiszemy tabelę (nie musi mieć obramowania), która zajmuje szerokość 60% strony: Język polski Język angielski Historia 5,5,6,5,4,6 6,5,4,5,6,6 5,6,5,6,5,6,6,6 Ustawimy oceny na środku poszczególnych komórek, posługując się znacznikami <CENTER>, </CENTER>, które można umieścić między znacznikami <TD> i </TD>. Ewentualnie poprawimy kolor czcionki lub wstawimy tło dla tabeli. Wyśrodkujemy poszczególne elementy.
Uzyskujemy to wpisując kod:
A oto efekt naszej pracy: