HTML 4 Zebrał i opracował : dr inż. Jerzy Zgraja
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.
Język HTML jest językiem znacznikowym (w 1999r ukazała się HTML 4.01): Znaczniki to napisy otoczone znakami. 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
Zagnieżdżanie znaczników Elementy HTML możemy zagnieżdżać. Oznacza to, że jeden element HTML może zawierać inny element Witaj! W powyższym przykładzie występują dwa elementy: element P oraz element STRONG, przy czym element STRONG jest zawarty wewnątrz elementu P. Zwróćmy uwagę, na sposób otwierania i zamykania znaczników Poprawne (EM italic) Żegnaj! PRZYKŁAD NIEPOPRAWNY Żegnaj! Nie każde zagnieżdżenie jest dopuszczalne! PRZYKŁAD NIEPOPRAWNY UFF!
Znaczniki wymagane, opcjonalne oraz elementy puste Przykł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ąć.
Są elementy, które muszą posiadać znacznik otwierający, zaś znacznik zamykający jest opcjonalny. Przykładem takiego elementu jest LI (wypunktowanie): Kuba Wojtek Basia = Są elementy które muszą posiadać oba znaczniki: otwierający i zamykający. Przykładem jest elementy EM. Kod niepoprawny: Miała Baba Koguta Poprawny Miała Baba Koguta Są elementy które nie posiadają znacznika zamykającego ani żadnej treści. Nazywamy je elementami pustymi (ang. empty elements). Przykładem elementu pustego jest BR element powodujący złamanie wiersza. Pies Kot Kura Elementy puste: AREA, BASE, BR, COL, HR, IMG, INPUT, LINK, META, PARAM, FRAME
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ć.
Struktura dokumentu HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" Pusta, polska strona WWW w języku HTML 4.01 strict Poprawny dokument HTML składa się z trzech części: definicji typu dokumentu (element DOCTYPE), nagłówka dokumentu (element HEAD), treści dokumentu (element BODY).
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.
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 ( oraz ) oraz informacji na temat stosowanego kodowania znaków. Element TITLE odgrywa niezmiernie ważną rolę w pozycjonowaniu stron w wyszukiwarkach. Kodowanie polskich znaków: windows-1250 iso : musimy wiedzieć, jakie kodowanie polskich znaków stosuje dany edytor. Na przykład oprogramowanie Windows stosuje kodowanie windows-1250 (Notatnik też)
Pierwsza strona www z tekstem - jeden akapit tekstu; - złamanie wiersza; - ukośny tekst; - uwypuklenie tekstu. Z tekstem związane są następujące elementy HTML: Przygotuj stronę o TYTULE: Pierwsza strona Wyświetlającą na ekranie tekst: (kod: windows-1250, dialekt: strict Był sobie uczeń, wierny elew swojej szkoły, Szelma nie byle jaki, matoł nad matoły
Zmodyfikuj stronę tak aby: La Fontaine Bajki Był sobie uczeń, wierny elew swojej szkoły, Szelma nie byle jaki, matoł nad matoły Wielkość czcionki, nagłówki: Nagłówki oznaczamy elementami H1, H2, H3, H4, H5 oraz H6.
Korzystając z preformatowania zbuduj stronę: 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. for i=1 to 10 do m=m+10 begin n=5 i=1 end
Znaki specjalne lp.NazwaZnak drukowanyZnak 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 Język HTML Np. znacznik pogrubia tekst. Znacznika zmienia krój czcionki na kursywę. Zbuduj stronę z tekstem:
Pozioma linia Znacznik wstawia do strony WWW pozioma linię. (,, ) informacje o treści Odsyłacze Zadanie:
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 mogą być: xx-small, x-small, small, medium,normal, large, x-large, xx-large Kroje: Treść akapitu wyświetlona krojem Arial Kolor: W starszych wersjach HTML stosowano polecenie font color="nazwa_koloru", jednak w HTML 4 zostało ono uznane za przestarzałe i do określania koloru stosuje się obecnie style. Tekst w kolorze niebieskim na czerwonym tle Szelma nie byle jaki, matoł nad matoły Zadanie: Zmień w poprzednim tekście na:
Hiperłącza wewnętrzne Odnoszą 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 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
Hiperłącza Odwołanie do tekstu czerwonego Odwołanie do tekstu niebieskiego Odwołanie do tekstu zielonego 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ą
Struktura tabeli HTML Tabela HTML składa się z wierszy podzielonych na komórki. Całą tabelę otaczamy znacznikami oraz, wewnątrz umieszczając wiersze. Do definiowania wierszy stosujemy znaczniki i. Nazwa znacznika TR jest skrótem Table Row - wiersz tabeli. Komórki umieszczamy pomiędzy oraz (ang. Table Data - dane tabeli). Podpis: Podpis Wykonaj Tabelę 1 A B C D Wykonaj Tabelę 2
Struktura tabeli HTML Wykonaj Tabelę 1 Tabela A B C D Zestaw Liter
Struktura tabeli HTML Wykonaj Tabelę Po wykonaniu Tabeli sprawdź jak ona wygląd bez atrybutu border Wykonaj Podpis tabeli Zestaw Liczb Zestaw Liczb ……………
Style, czyli jak modyfikować wygląd dokumentów Ję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: text-align : right; font-weight : bold; color : red; Opis stylu jest umieszczany w Nagłówku np. po i ma postać: nazwa-elementu { atrybut : wartość;... atrybut : wartość; } 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 stylów Przykładowa modyfikowane czcionki: font-family : Verdana; font-size : 10 pt; font-weight : Bold (lub normal), font-style : Italic (lub normal) color : red Modyfikacja akapitu text-indent : 2em; text-align : justify (left, center, right ) ; text-decoration : none (underline, overline, line-through lub blink) Modyfikacja koloru: background, oraz color
Zadanie: Określ style css dla elementu P elementu (czcionka Arial, 16pkt, zielona, wyrównanie do środka) H2 (czcionka Verdada, 16pkt, czarna, wyrównanie do lewej) jak również dla elementu Body (szare tło) Zbuduj stronę z użyciem powyższych styli
Klasy znaczników Co robić, gdy ten sam znacznik (np. TD) ma być w wielu miejscach w różnych formatach? Problem ten rozwiązuje się stosując klasy znaczników, co pozwala niejako na zdefiniowanie nowych znaczników, (różniących się formatem). Dokonujemy tego korzystając z atrybutu class. Atrybut ten możemy stosować w odniesieniu do każdego elementu języka HTML zawartość Np. wprowadźmy klasę naglowek dla elementu TD Format takiego elementu definiujemy stosując selektor TD.naglowek : TD.naglowek { definicje stylów... } A następnie wykorzystujemy: Dopuszczalne jest stosowanie tej samej nazwy klasy w odniesieniu do różnych znaczników, np. TD.naglowek, P.naglowek, STRONG.naglowek, itd. Można wtedy zdefiniować każdy selektor lub jedynie selektor.naglowek
Zadanie Przygotuj stronę pt. "Pies-Kot-Koń" zawierającą tabelę, o trzech komórkach. Każdej komórce nadaj odmienny kolor tła. TD.kot { background : lightgreen; padding : 35px; width : 150px; } TD.pies { background : yellow; } TD.kon { background : red; text-align : center; } KOT PIES KOŃ Zadanie: Zmodyfikuj poprzednią stronę wykorzystując klasy
Bibliografia: