1 HTML 4 Zebrał i opracował : dr inż. Jerzy Zgraja
2 Dokumenty dostępne w sieci WWW, nazywane potocznie stronami internetowymi lub stronami WWW są zapisane w plikach tekstowych. Zawartość plików tekstowych możemy przeglądać i edytować niemal każdym edytorem, na przykład notatnikiem. Najczęściej stosowane jest rozszerzenie .html, .htm lub .xml, jednakże w pewnych sytuacjach możemy się spotkać np.. .php, .pl, .cgi, czy nawet .exe. Rozszerzenia różne od .html, .htm oraz .xml mówią o tym, że dana strona jest wynikiem działania pewnego programu uruchomionego na serwerze WWW.
3 Ala ma psaJęzyk HTML jest językiem znacznikowym (w 1999r ukazała się HTML 4.01): Znaczniki to napisy otoczone znakami < oraz >. Bezpośrednio po znaku < występuje nazwa znacznika: STRONG i jest to znacznik otwierający elementu STRONG. Duża część znaczników otwierających, lecz nie wszystkie, posiada odpowiadające im znaczniki zamykające. Znacznik zamykający różni się od znacznika otwierającego znakiem / ukośnika (ang. slash) Znaczniki otwierający i zamykający otaczają pewien fragment tekstu nadając mu odpowiednie znaczenie. Na przykład przedstawiony znacznik STRONG uwypukla fragment dokumentu: Ala ma psa Para znaczników, znacznik otwierający oraz znacznik zamykający, określa element, np. element STRONG o zawartości „pies”
4 Zagnieżdżanie znaczników Elementy HTML możemy zagnieżdżać. Oznacza to, że jeden element HTML może zawierać inny element Witaj! Żegnaj! Żegnaj!
5 Znaczniki wymagane, opcjonalne oraz elementy pustePrzykładami znaczników opcjonalnych są znaczniki otwierające i zamykające elementów HTML, HEAD oraz BODY. Oznacza to, że pełny kod : możemy pominąć.
6 Miała Baba KogutaSą elementy, które muszą posiadać znacznik otwierający, zaś znacznik zamykający jest opcjonalny. Przykładem takiego elementu jest LI (wypunktowanie):
Pies
Kot
Kura Elementy puste: AREA, BASE, BR, COL, HR, IMG, INPUT, LINK, META, PARAM, FRAME
7 
Atrybuty znaczników Niemal wszystkie znaczniki mogą posiadać atrybuty. Przykładami atrybutów są napisy src="pies.jpg" oraz alt="PIES" w znaczniku: Po nazwie atrybutu następuje znak równości oraz wartość atrybutu. Należy zwrócić uwagę, by nie stawiać znaków spacji dookoła znaku równa się. Komentarze w HTML Komentarze w języku HTML rozpoczynamy napisem Komentarzy nie można zagnieżdżać.
8 Struktura dokumentu HTMLPoprawny dokument HTML składa się z trzech części: definicji typu dokumentu (element DOCTYPE), nagłówka dokumentu (element HEAD), treści dokumentu (element BODY). „http://www.w3.org/TR/html4/strict.dtd">
9 W języku HTML 4.01 dostępne są trzy dialekty: ścisły (ang. strict), Typ dokumentu Element DOCTYPE określa użyty dialekt języka HTML (Każdy dokument w języku HTML musi zawierać element DOCTYPE. Brak elementu DOCTYPE powoduje, że dokument nie jest poprawny!) . W języku HTML 4.01 dostępne są trzy dialekty: ścisły (ang. strict), Wersja ścisła dopuszcza tylko nieprzestarzałe elementy i nie dopuszcza ramek przejściowy (ang. transitional), Wersja przejściowa jest rozszerzeniem wersji ścisłej. Zawiera wszystkie elementy dozwolone w wersji ścisłej jak również elementy wycofane z języka ( ang. deprecated). zawierający ramki (ang. frameset). Stosując wersję z ramkami możemy używać wszystkich elementów dopuszczonych w wersji przejściowej, a także elementów definiujących ramki.
10 Nagłówek strony WWW Nagłówek znajduje się pomiędzy znacznikami oraz i zawiera informacje charakteryzujące dany dokument, takie jak. nazwisko autora, język dokumentu czy jego tytuł. Decyzja o tym, jakie informacje ogólne o dokumencie umieścić w nagłówku należy do autora strony. Konieczne jest jedynie umieszczenie tytułu dokumentu (
11 Pierwsza strona www z tekstemZ tekstem związane są następujące elementy HTML: - jeden akapit tekstu;
- złamanie wiersza; - ukośny tekst; - uwypuklenie tekstu. Przygotuj stronę o TYTULE: „ Pierwsza strona” Wyświetlającą na ekranie tekst: (kod: windows-1250, dialekt: strict
12 La Fontaine Bajki Wielkość czcionki, nagłówki:Nagłówki oznaczamy elementami H1, H2, H3, H4, H5 oraz H6. Zmodyfikuj stronę tak aby: La Fontaine Bajki Był sobie uczeń, wierny elew swojej szkoły, Szelma nie byle jaki, matoł nad matoły
13 Tekst preformatowany Tekst preformatowany zachowuje białe znaki: spację oraz złamanie wiersza. Jest on pisany czcionką o stałej szerokości. Głównie stosujemy go do kodów programów i skryptów komputerowych. Tekst preformatowany obejmujemy znacznikami . Korzystając z preformatowania zbuduj stronę: for i=1 to 10 do m=m+10 begin n=5 i=1 end
14 Tabela 2. Najczęściej stosowane znaki specjalnelp. Nazwa Znak drukowany Znak specjalny 1. Znak mniejszości < 2. Znak większości > 3. Ampersand & & 4. Copyright © 5. Twarda spacja 6. Cudzysłów " " 7. Apostrof ' ' 8. Myślnik — — 9. Półpauza – – 10. Otwierający polski cudzysłów „ „ 11. Zamykający polski cudzysłów ” ” 12. Iloczyn kartezjański × × 13. Wielokropek … … 14. Strzałka w prawo → → 15. Strzałka do góry ↑ ↑ 16. Strzałka do dołu ↓ ↓ 17. Strzałka w lewo ← ← Tabela 2. Najczęściej stosowane znaki specjalne Zbuduj stronę z tekstem: Język HTML Np. znacznik pogrubia tekst. Znacznika zmienia krój czcionki na kursywę.
15 Pozioma linia Znacznik
wstawia do strony WWW pozioma linię. (
,
,
) Odsyłacze informacje o treści Zadanie:
16 Kolory i wielkości czcionek:Dowolnemu fragmentowi tekstu można nadać wielkość czcionki. W starszych wersjach HTML stosowano polecenie font size="wielkość", jednak w HTML 4 zostało ono uznane za przestarzałe i do określania wielkości stosuje się obecnie style. Tekst o wielkości large Treść akapitu wyświetlona krojem Arial Tekst w kolorze niebieskim na czerwonym tle
17 Hiperłącza wewnętrzneOdnoszą się one do konkretnego miejsca w dokumencie. Są dwie metody z wykorzystaniem atrybutu „id” lub elementu „a”. Np. oznaczenie miejsca na stronie dla elementu H1: O czym szumią wierzby
lub O czym szumią wierzby
Odwołanie do tego miejsca: Wiersze o krajobrazie Na stronie tv.html powinien znajdować się identyfikator „wierzby” Zadanie: Przygotuj stronę posiadającą spis treści (3 punkty) oraz dowolne (długie) trzy fragmenty tekstu w różnych kolorach. Spowoduj aby kliknięcie w spisie treści przenosiło do odpowiedniego fragmentu tekstu
18 Zadanie: Przygotuj stronę posiadającą spis treści (3 punkty) oraz dowolne (długie) trzy fragmenty tekstu w różnych kolorach. Spowoduj aby kliknięcie w spisie treści przenosiło do odpowiedniego fragmentu tekstu
19 Zadanie: Przygotuj stronę posiadającą spis treści (3 punkty) oraz dowolne (długie) trzy fragmenty tekstu w różnych kolorach. Spowoduj aby kliknięcie w spisie treści przenosiło do odpowiedniego fragmentu tekstu Laboratorium z Technik Informacyjnych sem. II
To jest tekst
pisany czerwoną czcionką
To jest tekst
pisany niebieską czcionką
To jest tekst
pisany zieloną czerwoną czcionką
20 Style, czyli jak modyfikować wygląd dokumentówJęzyk HTML nie zawiera żadnych wbudowanych mechanizmów pozwalających na modyfikacje wyglądu dokumentów. Elementy takie jak CENTER czy FONT oraz atrybuty w rodzaju align zostały już zasadniczo wycofane z języka. W ich miejsce pojawiły się kaskadowe arkusze stylów (CSS). Definicja stylów to lista elementów HTML z opisem właściwości wizualnych. Np. wyrównanie do prawej, wytłuszczenie i zmianę koloru czcionki na czerwony nagłówka H1 realizuje styl: H1 { text-align : right; font-weight : bold; color : red; } Opis stylu jest umieszczany w Nagłówku np. po i ma postać: nazwa-elementu { atrybut : wartość; ... } np: text-align : right; font-weight : bold; color : red;
21 Przykładowa modyfikowane czcionki: font-family : Verdana;
22 Bibliografia: