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.
Ala ma <STRONG>psa</STRONG> Ję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> 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 <STRONG>psa</STRONG> 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 <P><STRONG>Witaj!</STRONG></P> 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 PRZYKŁAD NIEPOPRAWNY <P><EM>Żegnaj!</P></EM> Poprawne (EM italic) <P><EM>Żegnaj!</EM></P> Nie każde zagnieżdżenie jest dopuszczalne! PRZYKŁAD NIEPOPRAWNY <EM><BODY><TITLE>UFF! </TITLE></BODY></EM>
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 : <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> możemy pominąć.
<EM>Miała <EM>Baba <EM>Koguta Są elementy, które muszą posiadać znacznik otwierający, zaś znacznik zamykający jest opcjonalny. Przykładem takiego elementu jest LI (wypunktowanie): <LI>Kuba <LI>Wojtek <LI>Basia <LI>Kuba</LI> <LI>Wojtek</LI> <LI>Basia</LI> = Są elementy które muszą posiadać oba znaczniki: otwierający i zamykający. Przykładem jest elementy EM. Kod niepoprawny: <EM>Miała <EM>Baba <EM>Koguta Poprawny <EM>Miała</EM> <EM>Baba</EM> <EM>Koguta</EM> 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. <BR>Pies<BR>Kot<BR>Kura Elementy puste: AREA, BASE, BR, COL, HR, IMG, INPUT, LINK, META, PARAM, FRAME
<IMG src="pies.jpg" alt="PIES"> Atrybuty znaczników Niemal wszystkie znaczniki mogą posiadać atrybuty. Przykładami atrybutów są napisy src="pies.jpg" oraz alt="PIES" w znaczniku: <IMG src="pies.jpg" alt="PIES"> 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 <!--, zaś kończymy --> <!-- komentarz --> Komentarzy nie można zagnieżdżać.
Struktura dokumentu HTML 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). <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" „http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE></TITLE> <META http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> </HEAD> <BODY> </BODY> </HTML> Pusta, polska strona WWW w języku HTML 4.01 strict
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), <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Wersja ścisła dopuszcza tylko nieprzestarzałe elementy i nie dopuszcza ramek przejściowy (ang. transitional), <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 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). <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> 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 <HEAD> oraz </HEAD> 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 (<TITLE> oraz </TITLE>) 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 <META http-equiv="Content-Type" content="text/html; charset=windows-1250"> iso-8859-2: <META http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> 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 Z tekstem związane są następujące elementy HTML: <P></P> - jeden akapit tekstu; <BR> - złamanie wiersza; <EM></EM> - ukośny tekst; <STRONG></STRONG> - uwypuklenie tekstu. Przygotuj stronę o TYTULE: „ Pierwsza strona” Wyświetlającą na ekranie tekst: (kod: windows-1250, dialekt: strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" „http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE></TITLE> <META http-equiv="Content-Type" content="text/html; charset=windows-1250"> </HEAD> <BODY> </BODY> </HTML> Był sobie uczeń, wierny elew swojej szkoły, Szelma nie byle jaki, matoł nad matoły
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
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 <PRE></PRE>. Korzystając z preformatowania zbuduj stronę: for i=1 to 10 do m=m+10 begin n=5 i=1 end
Tabela 2. Najczęściej stosowane znaki specjalne lp. 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 <Strong> pogrubia tekst. Znacznika <EM> zmienia krój czcionki na kursywę.
Pozioma linia Znacznik <HR> wstawia do strony WWW pozioma linię. (<HR Size=4>, <HR Width=300>, <HR Width=50% color=„nazwa”> ) Odsyłacze <A href="adres dokumentu">informacje o treści</A> 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. <p style="font-size: large; ">Tekst o wielkości large</p> mogą być: xx-small, x-small, small, medium,normal, large, x-large, xx-large Kroje: <p style="font-family: arial; text-align:center">Treść akapitu wyświetlona krojem Arial</p> 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. <p style="color: blue; background: red;">Tekst w kolorze niebieskim na czerwonym tle</p> Zadanie: Zmień w poprzednim tekście na: Szelma nie byle jaki, matoł nad matoły
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: <H1 id="wierzby">O czym szumią wierzby</H1> lub <H1><A name="wierzby"></A>O czym szumią wierzby</H1> Odwołanie do tego miejsca: <A href="tv.html#wierzby">Wiersze o krajobrazie</A> 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
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
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 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" „http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>Hiperłącza</TITLE> <META http-equiv="Content-Type" content="text/html; charset=windows-1250"> </HEAD> <BODY> <A href="Hiper_Lacza.html#czerwony"><LI>Odwołanie do tekstu czerwonego</A> <A href="Hiper_Lacza.html#niebieski"><LI>Odwołanie do tekstu niebieskiego</A> <A href="Hiper_Lacza.html#zielony"><LI>Odwołanie do tekstu zielonego</A> <BR> <H1 style="text-align:center;"><P> Laboratorium z Technik Informacyjnych</P> <P>sem. II</P> <Br><Br><Br></H1> <A name="czerwony"></A><P style="text-align:left;font-size:x-large; color:red"><BR>To jest tekst<br><br>pisany czerwoną czcionką<BR></P><BR><BR><BR><BR><BR><BR> <A name="niebieski"></A><P style="text-align:center;font-size:x-large; color:blue;background:yellow"><BR>To jest tekst<br><br>pisany niebieską czcionką<BR><BR><BR></P><BR><BR><BR> <P id="zielony" style="text-align:left; font-size:x-large; color:green"><BR>To jest tekst<br><br>pisany zieloną czerwoną czcionką<BR></P><BR><BR><BR><BR><BR><BR> </BODY> </HTML>
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. 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 <META> i ma postać: nazwa-elementu { atrybut : wartość; ... } np: text-align : right; font-weight : bold; color : red;
Przykładowa modyfikowane czcionki: font-family : Verdana; <HEAD> <TITLE></TITLE> <META http-equiv="Content-Type„ content="text/html; charset=iso-8859-2"> <STYLE type="text/css"> opis stylów </STYLE> </HEAD> 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
Bibliografia: http://www.gajdaw.pl/html/html/p3.html http://webmaster.helion.pl/kurshtml/czcionka/czcionka.htm