Elementy projektowania stron WWW Część 2 Język HTML

Transkrypt

Język HTML
Elementy projektowania stron WWW
Część 2
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
dr inŜ. Tomasz Traczyk
2
Idea języków znakowania
Języki znakowania
HTML (Hypertext Markup Language)
• 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>
• 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 i typograficzne
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
– najbardziej znani przedstawiciele rodziny
♦ HTML
♦ XML
3
T.Traczyk: WWW, cz. 2
4
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
Budowa dokumentu HTML
Budowa dokumentu
Budowa dokumentu HTML – przykład
Komentarze
• 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
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
• Ujęte w znaki 
• Nie mogą zawierać --
Encje
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1250">
<title>Struktura dokumentu HTML</title>
</head>
• Pozwalają wstawiać znaki specjalne
i niestandardowe
• Encje predefiniowane
– < > & "
–  
– © µ ½ ...
– Ä è ...
• Kody liczbowe  
<body>
<p>Prosty dokument zawierający jeden akapit.</p>
</body>
</html>
Rygory składni
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
• 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
Znaczniki HTML – przegląd
Ramki
W kierunku znakowania typograficznego
– style fizyczne
• 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
•
•
•
•
•
•
•
•
•
•
•
7
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
•
•
•
•
•
•
•
•
•
•
•
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
Znaczniki HTML – przegląd, c.d.
Tabele
Multimedia
• 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
Formularze
• form – formularz
– input – umieszczenie
pola
standardowego przycisku
– select – lista rozwijana
♦ option – element listy
– textarea – wielowierszowe pole
tekstowe
– button – przycisk
♦
♦
Skrypty i aplety
Łączniki i mapy
• a – określenie łącznika
• map – definicja mapy aktywnej
(musi być załadowana przez img)
– area – określenie obszaru aktywnego
8
• img – wstawienie obrazu
• bgsound – odtworzenie muzyki
• object – wstawienie obiektu multimedialnego
• script – wstawienie skryptu
• applet|object – wstawienie apletu
– param – parametr apletu
Struktura dokumentu – przykład
Struktura dokumentu – przykład
<body>
<h1>Tytuł rozdziału</h1>
<p>Pierwszy akapit rozdziału.</p>
<p>Drugi akapit rozdziału.</p>
<body>
<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>
</body>
<p>Pierwszy akapit podrozdziału.</p>
<p>Drugi akapit podrozdziału.</p>
</body>
9
10
Style logiczne – przykład
<body>
<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>
</body>
11
Style logiczne – przykład
<body>
<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>
</body>
12
Style fizyczne – przykład
Style fizyczne – przykład
<body>
<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>
</body>
<body>
<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>
</body>
13
14
Listy – przykład
<body>
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>
</body>
15
Listy – przykład
<body>
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>
</body>
16
Obrazy i odsyłacze – przykład
<body>
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:[email protected]">Tomasza T.</a></i>
</body>
linki2.html
<body>
</body>
linki2.html
<body>
<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>
<body>
<h1>Tomasz T.</h1>
</a>
<a name="tt">
A teraz naucza podstaw języka HTML.
</body>
<a name="tt">
</body>
17
18
<body>
</body>
linki2.html
<body>
</body>
linki2.html
<body>
<h1>Tomasz T.</h1>
alt="PrzybliŜony wygląd Tomasza T. "
</a>
<body>
<h1>Tomasz T.</h1>
</a>
<a name="tt">
</body>
<a name="tt">
</body>
19
20
Tabele – przykład
Tabele – przykład
<body>
<table border="0">
<tr>
<td>Nasz wykładowca udostępnił nam przykłady HTML:</td>
<td>
<table border="1">
<tr><th colspan="3">Przykłady HTML</th></tr>
<tr><td align="center">Temat</td><td align="center">Pliki</td></tr>
<tr>
<td rowspan="2">Struktura</td>
<td><a href="strukt1.html">strukt1.html</a></td>
</tr>
<tr>
</tr>
<tr>
<td rowspan="2">Style logiczne i fizyczne</td>
<td><a href="znak1.html">znak1.html</a></td>
</tr>
<tr>
</tr>
</table>
</td>
</tr>
</table>
</body>
21
<body>
<table border="0">
<tr>
<td>Nasz wykładowca udostępnił nam przykłady HTML:</td>
<td>
<table border="1">
<tr><th colspan="3">Przykłady HTML</th></tr>
<tr><td align="center">Temat</td><td align="center">Pliki</td></tr>
<tr>
<td rowspan="2">Struktura</td>
</tr>
<tr>
</tr>
<tr>
<td rowspan="2">Style logiczne i fizyczne</td>
</tr>
<tr>
</tr>
</table>
</td>
</tr>
</table>
</body>
22
Ramki – przykład

<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
Ramki – przykład

<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
<body>
<table border="0">
<tr><th>Temat</th><th>Pliki</th></tr>
<tr>
<td rowspan="2" valign="top">Struktura</td>
<td><a href="strukt1.html" target="ramka">strukt1.html</a></td>
</tr><tr>
</tr>
...
</table>
</body>
23
<body>
<table border="0">
<tr><th>Temat</th><th>Pliki</th></tr>
<tr>
<td rowspan="2" valign="top">Struktura</td>
</tr><tr>
</tr>
...
</table>
</body>
24
Arkusze stylistyczne
Idea arkusza stylistycznego
Działanie CSS
• 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
• 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
25
Arkusze stylistyczne – przykład
<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>
<body>
<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>
<p>Pierwszy <span class="akapit">akapit</span> podrozdziału.</p>
<p class="drugi">Drugi <span class="akapit">akapit</span> podrozdziału.</p>
</body>
</html>
css.css
h1:first-letter {font-size: 300%; font-weight: bold}
p {font-family: sans-serif}
.akapit {font-family: serif}
.drugi {color="green"}
26
Arkusze stylistyczne – przykład
<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>
<body>
<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>
<p>Pierwszy <span class="akapit">akapit</span> podrozdziału.</p>
<p class="drugi">Drugi <span class="akapit">akapit</span> podrozdziału.</p>
</body>
</html>
css.css
Narzędzia do tworzenia stron WWW
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
Firmowe
h1:first-letter {font-size: 300%; font-weight: bold}
p {font-family: sans-serif}
.akapit {font-family: serif}
.drugi {color="green"}
27
• Acrobat
• Flash
itd.
28
Zasady tworzenia poprawnych stron WWW
Zalecenia ogólne
Zalecenia co do funkcjonalności stron
• 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
• 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
Szablony stron WWW
Estetyki stron WWW
Typowe szablony stron WWW
• Estetyka ksiąŜki / dokumentu
• Estetyka gazety
• Estetyka pisma dla młodzieŜy • Strona osobista
• Witryna firmowa
• Strona startowa portalu
Pozycja>pozycja>pozycja
Imię, nazwisko
itp.
Skrót Skrót Skrót Skrót
Menu
• Zasada oddzielenia formatowania od informacji
Prezentacja osiągnięć,
łączniki do dalszych stron.
30
Poprawność stron WWW
Testowanie stron WWW
Częste błędy na stronach 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
31
• 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
Menu
Zawartość
Menu
Reklama
Reklama
Skrót Skrót
Reklama
Wyszukiwarka
Katalog Katalog Katalog
Katalog Katalog Katalog
Aktualności
Aktualności
XHTML
Składnia
Moduły
• 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
• 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
– 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
Logo
Menu Menu Menu Menu Menu Menu Menu
Menu Menu Menu Menu Menu Menu Menu
Menu
Site map
29
Skrót Skrót
Wyszukiwarka
Menu
32

Elementy projektowania stron WWW Część 2 Język HTML

Transkrypt

Podobne dokumenty

Podstawy informatyki – Ja w Sieci Internet

PHP + MySQL w laboratorium (1)

Wprowadzenie do języka html