HTML 4 Zebrał i opracował : dr inż. Jerzy Zgraja.

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 psa
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 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 PRZYKŁAD NIEPOPRAWNY Żegnaj! Poprawne (EM italic) Żegnaj! Nie każde zagnieżdżenie jest dopuszczalne! PRZYKŁAD NIEPOPRAWNY <BODY><TITLE>UFF! </TITLE></BODY>

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ąć.

Miała Baba 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: 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

<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   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" „ <HTML> <HEAD> <TITLE></TITLE> <META http-equiv="Content-Type" content="text/html; charset=iso "> </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" " 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" " 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" " 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 : <META http-equiv="Content-Type" content="text/html; charset=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
Z 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 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" „ <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 &copy 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ę.

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. 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 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" „ <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> <H1 style="text-align:center;"> Laboratorium z Technik Informacyjnych sem. II </H1> <A name="czerwony"></A> To jest tekst pisany czerwoną czcionką <A name="niebieski"></A> To jest tekst pisany niebieską czcionką To jest tekst pisany zieloną czerwoną czcionką </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 "> <STYLE type="text/css"> opis stylów </STYLE> </HEAD> Przykładowa modyfikowane czcionki: font-family : Verdana; font-size : 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:

HTML 4 Zebrał i opracował : dr inż. Jerzy Zgraja.

Podobne prezentacje

Prezentacja na temat: "HTML 4 Zebrał i opracował : dr inż. Jerzy Zgraja."— Zapis prezentacji:

Podobne prezentacje

О projekcie

Zwrotny adres

Wejść

Zaloguj się poprzez sieć społeczną:

HTML 4 Zebrał i opracował : dr inż. Jerzy Zgraja.

Podobne prezentacje

Prezentacja na temat: "HTML 4 Zebrał i opracował : dr inż. Jerzy Zgraja."— Zapis prezentacji:

Podobne prezentacje

О projekcie

Zwrotny adres