Język HTML Elementy projektowania stron WWW Część 2 dr inŝ. Tomasz Traczyk Języki znakowania Znakowanie znaczeniowe i typograficzne Budowa dokumentu HTML Przegląd znaczników HTML Arkusze stylistyczne Narzędzia do tworzenia stron WWW Zasady tworzenia poprawnych stron WWW XHTML 2 Idea języków znakowania Znakowanie znaczeniowe i typograficzne Języki znakowania SłuŜą do reprezentowania informacji w postaci tekstu z określoną strukturą Znakowanie (markup) przestawienie struktury tekstu za pomocą znaczników (tags) Rodzina SGML SGML (Standard Generalised Markup Language) metajęzyk słuŝący do tworzenia języków znakowania powstał w 1969 r. standard ISO 8879 (1986) znaczniki w postaci <znacznik atrybut=""> </znacznik> najbardziej znani przedstawiciele rodziny HTML XML HTML (Hypertext Markup Language) Opracowany w 1989-90 przez T. Bernersa-Lee w CERN pierwotnie miał słuŝyć do wymiany informacji naukowo-technicznej Konkretyzacja SGML zawiera predefiniowany zbiór znaczników Standard W3C (World Wide Web Consortium) powszechnie uŝywana wersja: HTML 4.0 rozwiązania akceptowane przez poszczególne przeglądarki często odbiegają od standardu przyszłość: XHTML HTML ujęty w reguły składni XML Znakowanie znaczeniowe Znaczniki określanie znaczenie poszczególnych części tekstu w strukturze dokumentu odpowiadają logicznej strukturze tekstu nie niosą konkretnej informacji o wyglądzie Formatowanie przypisywane poszczególnym znacznikom za pomocą osobnego dokumentu (arkusza stylistycznego, stylesheet) albo domyślne (ustalane przez program klienta) Zalety znakowania znaczeniowego Czystość informacji informacja nie jest zaśmiecona oznaczeniami sterującymi formatowaniem jest więc łatwiejsza do wykorzystania i dalszego przetwarzania Elastyczność formatowania sposób formatowania nie jest sztywno narzucony moŝe być dostosowany do warunków środowiska wymagań/upodobań odbiorcy Znakowanie typograficzne Znaczniki określają sposób prezentacji poszczególnych części tekstu odpowiadają typograficznej strukturze tekstu nie muszą nieść informacji o strukturze logicznej Cechy znakowania typograficznego MoŜliwość narzucenia zaprojektowanego sposobu prezentacji Brak elastyczności formatowania Trudne lub niemoŝliwe dalsze przetwarzanie informacji Model znakowania w HTML Początkowo niemal czyste znakowanie znaczeniowe Burzliwy rozwój w kierunku znakowania typograficznego Odwrót w kierunku znakowania znaczeniowego i osobnej informacji o formatowaniu 3 4
Budowa dokumentu DTD definicja typu dokumentu Nagłówek tytuł strony znacznik meta, np. typ zawartości zestaw znaków» iso-8859-2 (preferowany)» windows-1250 Ŝądanie przekierowania dane autora, generatora Ciało znaczniki Znaczniki i atrybuty Znaczniki początkowe <znacznik> końcowe </znacznik> Atrybuty znaczników <znacznik atrybut="wartość" > Znaczniki moŝna zagnieŝdŝać Ciągi białych znaków są traktowane jako pojedynczy odstęp (z wyjątkiem zawartości znaczników takich jak pre) Znaczniki nieznane przeglądarce są ignorowane 5 Budowa dokumentu HTML Komentarze Ujęte w znaki <!-- i --> Nie mogą zawierać -- Encje Pozwalają wstawiać znaki specjalne i niestandardowe Encje predefiniowane < > & " µ ½ Ä è Kody liczbowe Rygory składni W HTML niektóre znaczniki mogą nie być jawnie zamknięte (np. <p>) znaczniki puste nie muszą być wyróŝnione (np. <br>) wielkość liter w nazwach znaczników i atrybutów nie ma znaczenia atrybuty nie muszą być ujęte w cudzysłowy W XHTML reguły składni są znacznie zaostrzone 6 Budowa dokumentu HTML przykład <!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <title>struktura dokumentu HTML</title> </head> <p>prosty dokument zawierający jeden akapit.</p> </html> Znaczniki HTML przegląd Znaczniki HTML przegląd, c.d. Ramki frameset definicja zestawu ramek (moŝna zagnieŝdŝać) frame definicja ramki w zestawie Struktura dokumentu h1..h6 nagłówki kolejnych poziomów p akapit (paragraph) * div wydzielona część dokumentu* span wydzielony fragment tekstu Znakowanie znaczeniowe style logiczne address dane twórcy strony* blockquote cytat blokowy* cite odwołanie do innego tekstu code kod programu* em tekst wyróŝniony kbd tekst wpisany z klawiatury pre tekst preformatowany q krótki cytat strong tekst silnie wyróŝniony sub, sup indeks dolny/górny var nazwa zmiennej W kierunku znakowania typograficznego style fizyczne b pogrubienie big powiększenie tekstu blink mruganie br złamanie linii center centrowanie tekstu hr poziomy separator i kursywa s przekreślenie small zmniejszenie tekstu tt czcionka maszynowa u podkreślenie Znakowanie typograficzne basefont, font ustawienia czcionek Tabele table tabela tr wiersz tabeli th komórka nagłówka tabeli td komórka zawartości tabeli caption podpis pod tabelą Listy dl lista definicji dt hasło dd treść definicji ol lista numerowana li pozycja listy ul lista wypunktowana li pozycja listy Łączniki i mapy a określenie łącznika map definicja mapy aktywnej (musi być załadowana przez img) area określenie obszaru aktywnego Multimedia img wstawienie obrazu bgsound odtworzenie muzyki object wstawienie obiektu multimedialnego Formularze form formularz input umieszczenie pola standardowego przycisku select lista rozwijana option element listy textarea wielowierszowe pole tekstowe button przycisk Skrypty i aplety script wstawienie skryptu applet object wstawienie apletu param parametr apletu 7 8
Struktura dokumentu przykład <h1>tytuł rozdziału</h1> <p>pierwszy akapit rozdziału.</p> <p>drugi akapit rozdziału.</p> <h2>tytuł podrozdziału</h2> <p>pierwszy akapit podrozdziału.</p> <p>drugi akapit podrozdziału.</p> Struktura dokumentu przykład <h1>tytuł rozdziału</h1> <p>pierwszy akapit rozdziału.</p> <p>drugi akapit rozdziału.</p> <h2>tytuł podrozdziału</h2> <p>pierwszy akapit podrozdziału.</p> <p>drugi akapit podrozdziału.</p> 9 10 Style logiczne przykład Style logiczne przykład <p>język HTML stworzono z intencją stosowania znakowania <strong>znaczeniowego</strong>.</p> <p>w prawidłowo zbudowanym dokumencie, <em>jeśli to tylko moŝliwe</em>, naleŝy stosować znakowanie znaczeniowe.</p> <p>do włączania tekstów programów najwygodniej uŝyć znacznika <code><pre></code>, np.</p> <pre> <html> <head> </head> <body> </body> </html> </pre> <p>język HTML stworzono z intencją stosowania znakowania <strong>znaczeniowego</strong>.</p> <p>w prawidłowo zbudowanym dokumencie, <em>jeśli to tylko moŝliwe</em>, naleŝy stosować znakowanie znaczeniowe.</p> <p>do włączania tekstów programów najwygodniej uŝyć znacznika <code><pre></code>, np.</p> <pre> <html> <head> </head> <body> </body> </html> </pre> 11 12
Style fizyczne przykład <hr> Niestety, twórcy standardu HTML nie byli dość <s>ortodoksyjni</s> konsekwentni i zezwolili na stosowanie <i>stylów fizycznych</i>, co stanowi krok w kierunku <font color="red">znakowania typograficznego</font>. <br> Stosując tego typu znakowanie mamy duŝe moŝliwości wpływania na <u>wygląd</u> tekstu, ale tracimy moŝliwość jawnego określenia jego <b>struktury logicznej</b>, co prowadzi do <i><big>bałaganu</big></i> i trudności w interpretacji tej struktury. <hr> Style fizyczne przykład <hr> Niestety, twórcy standardu HTML nie byli dość <s>ortodoksyjni</s> konsekwentni i zezwolili na stosowanie <i>stylów fizycznych</i>, co stanowi krok w kierunku <font color="red">znakowania typograficznego</font>. <br> Stosując tego typu znakowanie mamy duŝe moŝliwości wpływania na <u>wygląd</u> tekstu, ale tracimy moŝliwość jawnego określenia jego <b>struktury logicznej</b>, co prowadzi do <i><big>bałaganu</big></i> i trudności w interpretacji tej struktury. <hr> 13 14 Listy przykład Listy przykład W HTML moŝna uŝyć trzech rodzajów list: <dl> <dt>lista definicji</dt> <dd>słuŝy np. do tworzenia słowników</dd> <dt>lista numerowana</dt> <dd>słuŝy do podawania numerowanych <ol> <li>spisów <li>wyliczeń </ol> itp. </dd> <dt>lista wypunktowana</dt> <dd>pozwala wyróŝnić kolejne punkty tekstu <ul type="disc"> <li> kropką, <li type="circle">okręgiem, <li type="square">prostokątem. </ul> </dd> </dl> W HTML moŝna uŝyć trzech rodzajów list: <dl> <dt>lista definicji</dt> <dd>słuŝy np. do tworzenia słowników</dd> <dt>lista numerowana</dt> <dd>słuŝy do podawania numerowanych <ol> <li>spisów <li>wyliczeń </ol> itp. </dd> <dt>lista wypunktowana</dt> <dd>pozwala wyróŝnić kolejne punkty tekstu <ul type="disc"> <li> kropką, <li type="circle">okręgiem, <li type="square">prostokątem. </ul> </dd> </dl> 15 16
Obrazy i odsyłacze przykład Nasz wykładowca <a href="linki2.html#tt" target="_blank">tomasz T.</a> udostępnił nam przykłady HTML.<p> Uwagi i zapytania naleŝy więc kierować do <i><a href="mailto:ttraczyk@ia.pw.edu.pl">tomasza T.</a></i> Obrazy i odsyłacze przykład Nasz wykładowca <a href="linki2.html#tt" target="_blank">tomasz T.</a> udostępnił nam przykłady HTML.<p> Uwagi i zapytania naleŝy więc kierować do <i><a href="mailto:ttraczyk@ia.pw.edu.pl">tomasza T.</a></i> linki2.html <h1>tomasz T.</h1> <a href="http://www.ia.pw.edu.pl/~ttraczyk/"> <img src="rudygosc.gif" alt="przybliŝony wygląd Tomasza T." align="left" height="169" width="132" hspace="30"> </a> Zajmuje się systemami informacyjnymi, takŝe systemami Web-owymi.<p> <a name="tt"> A teraz naucza podstaw języka HTML. linki2.html <h1>tomasz T.</h1> <a href="http://www.ia.pw.edu.pl/~ttraczyk/"> <img src="rudygosc.gif" alt="przybliŝony wygląd Tomasza T." align="left" height="169" width="132" hspace="30"> </a> Zajmuje się systemami informacyjnymi, takŝe systemami Web-owymi.<p> <a name="tt"> A teraz naucza podstaw języka HTML. 17 18 Obrazy i odsyłacze przykład Obrazy i odsyłacze przykład Nasz wykładowca <a href="linki2.html#tt" target="_blank">tomasz T.</a> udostępnił nam przykłady HTML.<p> Uwagi i zapytania naleŝy więc kierować do <i><a href="mailto:ttraczyk@ia.pw.edu.pl">tomasza T.</a></i> Nasz wykładowca <a href="linki2.html#tt" target="_blank">tomasz T.</a> udostępnił nam przykłady HTML.<p> Uwagi i zapytania naleŝy więc kierować do <i><a href="mailto:ttraczyk@ia.pw.edu.pl">tomasza T.</a></i> linki2.html <h1>tomasz T.</h1> <a href="http://www.ia.pw.edu.pl/~ttraczyk/"> <img src="rudygosc.gif" alt="przybliŝony wygląd Tomasza T. " align="left" height="169" width="132" hspace="30"> </a> Zajmuje się systemami informacyjnymi, takŝe systemami Web-owymi.<p> <a name="tt"> A teraz naucza podstaw języka HTML. linki2.html <h1>tomasz T.</h1> <a href="http://www.ia.pw.edu.pl/~ttraczyk/"> <img src="rudygosc.gif" alt="przybliŝony wygląd Tomasza T." align="left" height="169" width="132" hspace="30"> </a> Zajmuje się systemami informacyjnymi, takŝe systemami Web-owymi.<p> <a name="tt"> A teraz naucza podstaw języka HTML. 19 20
Tabele przykład Tabele przykład <table border="0"> <td>nasz wykładowca udostępnił nam przykłady HTML:</td> <td> <table border="1"> <th colspan="3">przykłady HTML</th> <td align="center">temat</td><td align="center">pliki</td> <td rowspan="2">struktura</td> <td><a href="strukt1.html">strukt1.html</a></td> <td><a href="strukt2.html">strukt2.html</a></td> <td rowspan="2">style logiczne i fizyczne</td> <td><a href="znak1.html">znak1.html</a></td> <td><a href="znak2.html">znak2.html</a></td> </td> <table border="0"> <td>nasz wykładowca udostępnił nam przykłady HTML:</td> <td> <table border="1"> <th colspan="3">przykłady HTML</th> <td align="center">temat</td><td align="center">pliki</td> <td rowspan="2">struktura</td> <td><a href="strukt1.html">strukt1.html</a></td> <td><a href="strukt2.html">strukt2.html</a></td> <td rowspan="2">style logiczne i fizyczne</td> <td><a href="znak1.html">znak1.html</a></td> <td><a href="znak2.html">znak2.html</a></td> </td> 21 22 Ramki przykład Ramki przykład <!-- Nie ma elementu body! --> <frameset rows="100,*"> <frame src="linki1.html"> <frameset cols="30%,*"> <frame src="tabela2.html"> <frame name="ramka" src="linki2.html"> </frameset> </frameset> <noframes>nie ma obsługi ramek - nie uda się</noframes> <!-- Nie ma elementu body! --> <frameset rows="100,*"> <frame src="linki1.html"> <frameset cols="30%,*"> <frame src="tabela2.html"> <frame name="ramka" src="linki2.html"> </frameset> </frameset> <noframes>nie ma obsługi ramek - nie uda się</noframes> tabela2.html <table border="0"> <th>temat</th><th>pliki</th> <td rowspan="2" valign="top">struktura</td> <td><a href="strukt1.html" target="ramka">strukt1.html</a></td> <td><a href="strukt2.html" target="ramka">strukt2.html</a></td> tabela2.html <table border="0"> <th>temat</th><th>pliki</th> <td rowspan="2" valign="top">struktura</td> <td><a href="strukt1.html" target="ramka">strukt1.html</a></td> <td><a href="strukt2.html" target="ramka">strukt2.html</a></td> 23 24
Arkusze stylistyczne Arkusze stylistyczne przykład Idea arkusza stylistycznego Oddzielenie znakowania od formatowania UmoŜliwienie zróŝnicowanego formatowania w zaleŝności od sytuacji Język CSS (Cascading Style Sheets) Standard W3C (Level 1 1996, Level 2 1998) Język formatowania dla HTML i XML Działanie CSS Reguły przypisują formatowanie typom elementów, pseudoklasom lub konkretnym elementom lub ich częściom (np. pierwszej literze) Klasy słuŝą do oznaczania fragmentów tekstu tzw. pseudoklasy oznaczają części będące w pewnym stanie, np. odwiedzone łącze tzw. pseudoelementy oznaczają pewne typowe fragmenty, np. pierwszą literę Dziedziczenie reguły określające poszczególne właściwości formatowania są dziedziczone od elementu nadrzędnego w dokumencie HTML Łączenie CSS z HTML Znacznik link Lokalny CSS: atrybut style <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <link rel="stylesheet" href="css.css"> <title>formatowanie za pomocą CSS</title> </head> <h1 style="text-decoration=underline">tytuł rozdziału</h1> <p>pierwszy <span class="akapit">akapit</span> rozdziału.</p> <p class="drugi">drugi <span class="akapit">akapit</span> rozdziału.</p> <h2>tytuł podrozdziału</h2> <p>pierwszy <span class="akapit">akapit</span> podrozdziału.</p> <p class="drugi">drugi <span class="akapit">akapit</span> podrozdziału.</p> </html> css.css h1:first-letter {font-size: 300%; font-weight: bold} p {font-family: sans-serif}.akapit {font-family: serif}.drugi {color="green"} 25 26 Arkusze stylistyczne przykład Narzędzia do tworzenia stron WWW <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <link rel="stylesheet" href="css.css"> <title>formatowanie za pomocą CSS</title> </head> <h1 style="text-decoration=underline">tytuł rozdziału</h1> <p>pierwszy <span class="akapit">akapit</span> rozdziału.</p> <p class="drugi">drugi <span class="akapit">akapit</span> rozdziału.</p> <h2>tytuł podrozdziału</h2> <p>pierwszy <span class="akapit">akapit</span> podrozdziału.</p> <p class="drugi">drugi <span class="akapit">akapit</span> podrozdziału.</p> </html> Dla konserwatystów Edytor tekstowy (vi, notepad, itp.) Przeglądarka WWW Dla leniwych konserwatystów Edytor tekstowy z wbudowanym wsparciem dla HTML kolorowanie uzupełnianie składni Dla leniwych Specjalizowany edytor HTML css.css h1:first-letter {font-size: 300%; font-weight: bold} p {font-family: sans-serif}.akapit {font-family: serif}.drugi {color="green"} Firmowe Acrobat Flash itd. 27 28
Zasady tworzenia poprawnych stron WWW Szablony stron WWW Zalecenia ogólne Zasada najprostszych środków stosować (X)HTML jeśli na pewno nie wystarczy, to JavaScript jeśli na pewno nie wystarczy, to Javę itd. w stosunku do wyglądu, grafiki i animacji uŝyć (X)HTML i stylów CSS jeśli na pewno nie wystarczy, to wstawić grafikę, ew. grafikę animowaną (.gif) jeśli na pewno nie wystarczy, uŝyć Flash lub SVG Zasada oddzielenia formatowania od informacji Zalecenia co do funkcjonalności stron Na stronie powinny istnieć łącze do strony nadrzędnej (działające nie tylko lokalnie!) kontakt do autora lub administratora Strony główne witryn powinny być krótkie (mieścić się na przeciętnym ekranie) Strony nie powinny być przeładowane grafiką, a zwłaszcza róŝnymi wodotryskami W głębi hierarchii stron poŝądana jest informacja o bieŝącym połoŝeniu w strukturze Estetyki stron WWW Estetyka ksiąŝki / dokumentu Estetyka gazety Estetyka pisma dla młodzieŝy Imię, nazwisko itp. Prezentacja osiągnięć, łączniki do dalszych stron. Pozycja>pozycja>pozycja Wyszukiwarka Typowe szablony stron WWW Strona osobista Witryna firmowa Strona startowa portalu Skrót Skrót Skrót Skrót Zawartość Logo Skrót Skrót Skrót Skrót Reklama Reklama Reklama Wyszukiwarka Site map Katalog Katalog Katalog Katalog Katalog Katalog Aktualności Aktualności 29 30 Poprawność stron WWW XHTML Testowanie stron WWW Testować na róŝnych przeglądarkach co najmniej FireFox i MSIE dla konserwatystów lynx Testować przy aktywnych ograniczeniach przeglądarki wyłączone ładowanie grafiki wyłączone ładowanie tła włączone wymuszanie domyślnych czcionek, kolorów itp. Testować, czy da się pobrać fragment tekstu ze strony wydrukować dokument włączyć dokument do innej strony (np. w ramkę) zmienić wielkość liter Częste błędy na stronach WWW Zła koncepcja funkcjonalna strony bardzo napakowane naduŝywanie skryptów programowe przykrycie typowych funkcji przeglądarki uŝycie nietypowych gadŝetów programowych zamiast funkcjonalności HTML zbędne elementy wymagające wtyczek (np. Flash) Niefortunna realizacja formatowania grafika zamiast napisów brak alt w obrazkach bardzo jasne litery narzucony rozmiar liter (zwykle za mały) Łączniki martwe często zmieniane Zawartość generowana dynamicznie o zbyt często zmieniającej się strukturze z niepowtarzalnymi łącznikami Składnia HTML w rygorach składniowych XML prolog z nagłówkiem XML tam określa się m.in. stronę kodową znaczniki/atrybuty małymi literami wartości atrybutów obowiązkowe i w cudzysłowach prawidłowe zagnieŝdŝanie znaczniki obowiązkowo zamknięte znaczniki puste: <br/> Przestrzenie nazw pozwalają łączyć XHTML z innymi dialektami XML, np. SVG Moduły Pozwalają legalnie rozszerzać język definiują języki z rodziny XHTML pozwalają tworzyć kombinacje elementów istniejących i nowych nie muszą być obsługiwane przez wszystkie przeglądarki Przykład: XForms 31 32