1 HTML Opracowała: Iwona Kowalik
2 HTML to język, w którym tworzone są strony WWWHTML 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.
3 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 akapitu, (stosujemy go by rozpocząć nowy akapit)
- znaczni nowego wiersza
- znacznik umożliwiający dodanie na stronie linii poziomej
4 Przykład kodu źródłowego:
5 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
6 ELEMENTY STRONY to zazwyczaj dwie części: nagłówek i treść ( w języku angielskim te elementy to head i body). Znaczniki i informują o tym, że wszystko co znajduje się między nimi jest dokumentem HTML. Każdą nową stronę zawsze rozpoczynamy znacznikiem i kończymy . Para i 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:
7 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:
8 Nagłówki dzielą tekst na części i służą zwróceniu uwagi czytelnikaNagłó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: tekst nagłówka
. 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 i
oraz i
), ponieważ stosowanie znaczników i
powoduje zbyt duże powiększenie, natomiast tekst między znacznikami
i
, i
oraz i
ma rozmiar bliski normalnemu tekstowi.
9 Przykład: Po wpisaniu do Notatnika kodu: STRONA POŚWIĘCONA KOTOM I KOTKOM
Kot to słowo o wielu znaczeniach. Może oznaczać zwierzę domowe
ale równie dobrze dzikiego drapieżnika. Kotem nazywa się czasem zająca.
Inne znaczenia kota to m.in. rodzaj kotwicy albo kwiatostan wierzby. KOT JAKO ZWIERZĘ
Definicja
Felidae, rodzina ssaków z rzędu drapieżnych, odznaczających się smukłym
i zręcznym ciałem oraz miękką sierścią. Podział kotów
Do rodziny kotowatych należą dzikie koty oraz koty domowe towarzyszące ludziom. Przykłady kotów
Koty dzikie:
lew, tygrys, lampart, gepard, serwal, jaguar, puma Lwy
Lwy żyją na trawiastych równinach lub wśród ciernistych zarośli.
Kilkaset osobników pozostało w jedynym rezerwacie w Indiach,
pozostałe żyją w Afryce. otrzymamy w przeglądarce:
10
11 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 i
12 FORMATOWANIE TEKSTU W JĘZYKU HTMLDo formatowania tekstu używamy w HTML–u następujących znaczników: Test pogrubiony Kursywa Tekst podkreślony Tekst przekreślony lub Indeks górny Indeks dolny Tekst zapisany czcionką o stałej szerokości Tekst zapisany nieco większą czcionką Tekst zapisany nieco mniejszą czcionką Zmiana koloru tekstu Zmiana wielkości tekstu Zmiana kroju pisma
13 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
14 Otrzymaliśmy następujący wynik:
15 nasz tekst 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.: nasz tekst
16 UWAGA! ZNACZNIK 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:
, gdy mamy rysunek w naszym komputerze lub:
, 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
NIE MA POSTACI ZAMYKAJĄCEJ!
17 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 musi być umieszczony wewnątrz odpowiedniego znacznika. Obraz może być umieszczony również w nagłówku- wówczas znacznik
zapisujemy wewnątrz znaczników nagłówka. Aby wstawić obraz w odrębnym akapicie, umieszczamy znacznik
między znacznikami
: 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
18 
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: 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.
19 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: 
Na ekranie zobaczymy:
20 Aby dostosować rozmiary obrazu do naszych potrzeb stosujemy atrybuty WIDTH=„szerokość w pikselach” lub HIGHT=„wysokość w pikselach” wstawiane wewnątrz znacznika . Wystarczu użyć jednego z tych atrybutów ponieważ HTML zwiększa lub zmniejsza obraz zachowując proporcje w jego wymiarach.
21 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ą .
22 Znacznika pozwalające zmienić elementy strony WWW:Zmieniany element Znacznik Kolor tekstu Kolor tła strony Kolor znaków na stronie Kolor nie użytych jeszcze hiperłączy Kolor użytych już hiperłączy Kolor aktywnych hiperłączy Kolor tła tabeli 23 Wartości kolorów w systemie RGB:Nazwa koloru Angielska nazwa Wartość w systemie RGB Czarny Black # (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 24 Przykład: Po wprowadzeniu do znacznika BODY informacji o kolorze tła i tekstu: otrzymujemy bardziej interesującą stronę: 25 LINIA ROZDZIELAJĄCA Aby utworzyć poziomą linię, np. rozdzielającą tekst natronie stosujemy znacznik 26 LISTY PODTEMATÓW, LISTY UPORZĄDKOWANE I NIEUPORZĄDKOWANEHTML pozwala na tworzenie: list uporządkowanych (których elementy są numerowane), poprzez zastosowanie znaczników 27 Przykład: Po wpisaniu kodu strony, którą zapiszemy jako zuzia.html: Nazywam się Zuzia. Chodzę do szkoły i uwielbiam się uczyć. Moje ulubione przedmioty to: Mam dużo koleżanek i kolegów, np: 28 Otrzymujemy: 29 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 . Przyjmuje on postać: Treść hiperłącza 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. DALEJ - 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ć: Wirtualna Polska 30 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: , 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: , gdzie plik.html, to nazwa pliku, w którym stworzyliśmy kotwicę. 31 JAK W JĘZYKU HTML OPISUJE SIĘ TABELĘKod opisujący tabelę zawarty jest wewnątrz elementu 32 Struktura kodu tabeli wygląda zatem następująco: 33 Przykład: Do wcześniej stworzonej strony zuziaPrzykł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 34 Uzyskujemy to wpisując kod: 35 A oto efekt naszej pracy:
Kolor obramowania tabeli
. Znacznik ten ma swoje atrybuty, umożliwiające definiowanie grubości, długości i wyrównania linii.
Określa położenie linii względem okna przeglądarki (po lewej, na środku, po prawej)
Określa grubość linii w pikselach
lub
Określa szerokość linii w pikselach lub w proporcji do szerokości strony
oraz rozpoczęcie każdego elementu listy od znacznika
i rozpoczynając każdy elementu listy od znacznika
MOJA STRONA WWW
. Niestety, olbrzymia elastyczność języka HTML spowodowała, że nie wystarczy utworzyć element
, 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
, a pojedynczej komórce — element (w przypadku komórek pełniących funkcję nagłówka) oraz (w przypadku zwykłych komórek danych). Elementy oraz muszą być zawarte w elemencie , a ten z kolei — w elemencie .
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.
. 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:
. Parametr WIDTH podany w poleceniu określa szerokość komórki. Aby określić kolor tła tabeli dodajemy parametr BGCOLOR, np.
i . Ewentualnie poprawimy kolor czcionki lub wstawimy tło dla tabeli. Wyśrodkujemy poszczególne elementy.