1 HTML Język opisu strony www

2 Język HTML (Hypertext Markup Language)należy do grupy języków opisu tekstu, takich jak PostScript, ale pochodzi bezpośrednio od języka SGML (Standard Generalized Markup Language). Powodem, dla którego stworzono SGML, była konieczność łatwego przemieszczania dokumentów DTD (Dokument Type Definition) pomiędzy różnymi środowiskami, a także przenoszenie ich na zupełnie różnych nośnikach. Niezależność od platformy i nośnika została osiągnięta dzięki temu, że w dokumentach SGML jest opisywana jedynie struktura tekstu, a nie jego dokładny wygląd. Niezależność tę przeniesiono również do języka HTML, a to z tego powodu, że w Internecie pracuje ogromna liczba komputerów różnych typów i wyposażonych w różnorodne systemy operacyjne.

3 Język HTML pozwala na odczytywanie dokumentów (stron WWWJęzyk HTML pozwala na odczytywanie dokumentów (stron WWW*) praktycznie na każdym komputerze i w każdym środowisku; odczytywane są one przez tak zwane przeglądarki. Język HTML nie jest trudny ani do nauczenia się, ani nawet do dobrego opanowania. Na pewno jednak jest dobrym ćwiczeniem w uważnym pisaniu i logicznym myśleniu. Prawdę mówiąc, w kilka minut można napisać i udostępnić prostą stronę HTML.

4 Należy jednak wiedzieć, że różne firmy stosują dla swych przeglądarek pewne rozszerzenia języka HTML. Powoduje to, że niektóre strony WWW - bardzo atrakcyjne - oglądane w jednej przeglądarce, w innej mogą być nieczytelne. Można powiedzieć, że HTML jest językiem Internetu. Popularnie zwany jest on hypertextem, co w wolnym przekładzie znaczy "coś więcej niż tekst". W praktyce między innymi oznacza to, że w swoim dokumencie możesz umieścić odnośniki do innych stron WWW lub innych usług dostępnych w Internecie.

5 Tworzenie dokumentów HTMLDokument HTML możesz tworzyć używając dowolnego prostego edytora tekstów takiego jak Notatnik dla Windows. Nigdy nie stosuj edytorów formatujących tekst. Formatujesz go posługując się znacznikami HTML. Przed rozpoczęciem pracy musisz mieć wizję przyszłego dokumentu. UWAGA - WAŻNE: Pamiętaj, że dokument HTML musi mieć rozszerzenie HTM lub HTML. np.: Omnie.htm lub Omnie.html

6 Znaczniki w języku HTMLZnaczniki są niczym innym jak rozkazami umieszczanymi między znakami < a > określającymi w jaki sposób przeglądarka powinna wyświetlać zawartość dokumentu. Dla przeglądarki jest obojętne czy znaczniki wpisywane są wielkimi, czy małymi literami. Większość znaczników występuje parami. Parę taką tworzą znaczniki otwierające np.: i zamykające np.: . Między tymi znacznikami umieszcza się treść, do której one się odnoszą. Przykład: treść objęta znacznikami Zwróć uwagę na brak nadmiernych spacji pomiędzy objętym tekstem a nawiasami trójkątnymi.

7 Atrybuty Wiele znaczników posiada dodatkowe atrybuty, które precyzują wpływ znacznika na objęty tekst. Atrybuty wpisywane są pomiędzy słowo kluczowe a znak > . Stosować można kilka atrybutów do jednego znacznika, pisze się je jeden po drugim oddzielając spacją. Przykład:

8 Poniżej przedstawiony jest sposób w jaki należy rozpocząć i zakończyć dokument HTML treść dokumentu Znacznik informuje przeglądarkę, że jest to dokument HTML. Jest on znakiem rozpoczynającym. Natomiast znacznik jest znakiem końca dokumentu HTML. Znaczniki umieszcza się między znakami < > . Większość znaczników występuje parami, tak jak i .

9 Znaczniki HEAD i BODY Między znacznikiem HEAD a /HEADumieszcza się informacje między innymi o adresie danej strony, o sposobie kodowania znaków itd. Jedynym elementem widocznym w przeglądarce jest tytuł strony WWW. Sekcja Body dokumentu HTML zawiera właściwą treść, w tym teksty, grafikę i rodzaj formatowania. Poniżej przedstawiony jest ogólny schemat dokumentu HTML treść czołówki treść dokumentu

10 Tytuł strony i kolor tłaPoniżej przedstawiony jest kod źródłowy przykładowego dokumentu. Określenie sposobu kodowania polskich znaków (standard ISO jest ogólnie przyjęty i stosowany w sieci). Tytuł strony - pojawi się on w pasku nazwy przeglądarki (nie w treści stron). Znaczniki mogą mieć atrybuty - tu atrybut bgcolor mający wartość Silver informuje przeglądarkę, w jakim kolorze ma być przedstawione tło dokumentu. Między znacznikami i umieszcza się treść dokumentu.

11 Organizacja strony HTML daje możliwość stosowania aż sześciu poziomów nagłówków. Za pomocą polecenia np.

Poniżej przedstawiono fragment kodu źródłowego przykładowego dokumentu zawierającego nagłówki.

To jest nagłówek poziomu pierwszego

To jest nagłówek poziomu trzeciego

To jest nagłówek poziomu szóstego

Treść umieszczona na stronie Rady: Nagłówki tworzą strukturę hierarchiczną, należy więc ich używać konsekwentnie. Nagłówek automatycznie kończy akapit, nie ma więc potrzeby jawnego kończenia akapitu.

12 Początek nowego akapituHTML nie rozpoznaje znaków końca linii, wprowadzanych w edytorze tekstów. Aby rozpocząć nowy akapit w dokumencie HTML należy zastosować znacznik

. Znacznik ten nie wymaga pary

. Rady: Zastosowanie nagłówka oraz linii poziomej

---

również spowoduje rozpoczęcie nowego akapitu i dlatego nie trzeba po nich dodawać znacznika

.

13 Łamanie linii Podczas tworzenia nowego akapitu po zastosowaniu znacznika

, przeglądarki robią dość duży odstęp. Aby móc zacząć nową linię unikając takich odstępów, należy wykorzystać łamanie linii. W tym celu stosowany jest znacznik
. Znacznik ten nie posiada zamykającej pary.

14 Wyróżnianie tekstu pogrubienie tekstu pochylenie tekstu podkreślenie tekstu przekreślenie tekstu ^{indeks górny _{indeks dolny tekst pisany czcionką o stałej szerokości}} (czcionka maszyny do pisania)

15 Centrowanie tekstu

To jest wycentrowany nagłówek poziomu czwartego

Jeśli chcemy wycentrować nagłówek, to należy posłużyć się argumentem align o wartości center. Ten fragment tekstu będzie wyświetlany jako wyśrodkowany. Wycentrowanie normalnego tekstu i .

Ten tekst też warto zobaczyć.

Ten fragmencik będzie wyświetlanyna środku ekranu. Należy jednak pamiętać, że zastosowanie znacznika powoduje automatycznie rozpoczęcie nowego akapitu, natomiast zakończenie akapitu (czyli początek nowego).

16 Zmiana rozmiaru czcionki wybranego fragmentu tekstuwychowanie, kształcenie jest procesem ciągłym i złożonym. Tekst ten zostanie napisany czcionką o rozmiarze 4 Rady: Znacznika FONT należy używać do zmiany rozmiaru fragmentu tekstu, Nie należy wpisywać tekstu większą czcionką niż nagłówek.

17 Zmiana koloru tekstu wychowanie, kształcenie jest procesem ciągłym i złożonym. Tekst ten zostanie napisany czarną czcionką o wielkości 3 Rady: Kolory można ustalać za pomocą ich nazwy ( White, Black, Red itd.), lub użyć tak zwanej notacji heksadecymalnej. Tworząc dokument dobieraj odpowiednio kolor tła i tekstu, aby to co piszesz, było czytelne.

18 Ilustracje wklejone Tu wstawiony zostanie rysunek (zdjęcie) o nazwie rysunek.jpg, znajdujący się w tym samym katalogu, w którym znajduje się niniejszy dokument. Rady: Wklejaj tylko małe obrazki, aby czas ładowania strony był jak najkrótszy. Jeśli chcesz pokazać duży obrazek, stosuj ikony odsyłające do osobnej strony, na której zamieścisz duży rysunek.

19 Ilustracja jako tło dokumentu HTML Atrybut BACKGROUND znacznika BODY wskazuje na zbiór zawierający rysunek, który wyświetlany będzie jako tło dokumentu. Rady: Grafikę przygotuj tak, aby tło nie okazało się zbyt "agresywne" - rozjaśnij ją. W celu umieszczenia tekstu na tle jakiegoś deseniu, nie trzeba stosować grafiki o dużych rozmiarach, lecz sensowniej jest przygotować mały element graficzny. Stosując atrybut BACKGROUND, podaj jako jego wartość mały rysunek. Przeglądarka powieli go tak, że wypełni on całość dokumentu.

20 Wstawianie poziomych liniiJęzyk znaczników HTML posiada tylko jeden element graficzny. Jest to linia pozioma, którą poprawnie interpretuje większość stosowanych przeglądarek. Linia pozioma pomaga w oddzielaniu od siebie fragmentów tekstu.

---

HR bez atrybutów

---

linia o grubości 1 piksela i długości równej 70% szerokości okna, w którym jest wyświetlana, wyrównana do lewej krawędzi okna, z efektem 3D

21 Odsyłacze do innych dokumentówTekst zawarty między znacznikami: otwierającym A i zamykającym A, staje się odnośnikiem do strony wskazanej przez wartość atrybutu HREF znacznika A Odsyłacz do strony o nazwie prezentacja, znajdującej się w tym samym katalogu Odsyłacz do strony Ośrodka Edukacji Informatycznej

22 Odwołania wewnątrz dokumentuPoniższy fragment tekstu przedstawia przykład kodu źródłowego HTML umożliwiającego włączenie do dokumentu spisu treści z odsyłaczem do wskazanego miejsca w dokumencie. kotwica "sp" dla spisu treści

SPIS TREŚCI

SPIS TREŚCI skrót do kotwicy "sp", czyli do spisu treści

23 Listy uporządkowane Znacznik

rozpoczyna listę uporządkowanąZnacznik
1. rozpoczyna element listy
   1. Punkt pierwszy.
   2. Punkt drugi.
   3. Punkt trzeci.

   24 Lista nieuporządkowanaZnacznik

   rozpoczyna listę nieuporządkowaną Znacznik
   • rozpoczyna element listy
     • Dwa pęczki szarańczy.
     • Młode źdźbła trawy.
     • Majonez.
     • Szczypta pieprzu.

     25 Umieszczanie tabel w dokumentach HTMLTabela ta składa się z dwóch kolumn i trzech wierszy. Pierwsza kolumna będzie zawierać nagłówki wierszy, a druga - dane.

     Bardzo prosta tabela

26 Zapraszam do tworzenia własnych stron wwwOpracowała: Elżbieta Piszcz