SIECI KOPMPUTEROWE
SIECI KOPMPUTEROWE
I TECHNOLOGIE INTERNETOWE
I TECHNOLOGIE INTERNETOWE
(SKiTI)
(SKiTI)
Wykład 8
Wykład 8
Wykład 8
Wykład 8
Wprowadzenie do (X)HTML
Wprowadzenie do (X)HTML
Politechnika Gdańska
Wydział Elektrotechniki i Automatyki
Kierunek: Automatyka i Robotyka
Studia stacjonarne I stopnia: rok I, semestr II
Opracowanie: dr inż. Tomasz Rutkowski
Katedra Inżynierii Systemów Sterowania
1
© SKiTI 2011
Plan Wykładu
Plan Wykładu
Część I
Część I
1. Podstawowe technologie dla potrzeb WWW
1. Podstawowe technologie dla potrzeb WWW
- przeglÄ…d technologii Generacji
- przeglÄ…d technologii Generacji
- przeglÄ…d technologii Prezentacji
- przeglÄ…d technologii Prezentacji
Część II
Część II
1. TrochÄ™ historii o: SGML, HTML, XHTML
1. TrochÄ™ historii o: SGML, HTML, XHTML
2. Konsorcjum W3C
2. Konsorcjum W3C
3. Podstawowe zasady (X)HTML
3. Podstawowe zasady (X)HTML
4. Przykładowa struktura szablonu strony (X)HTML
4. Przykładowa struktura szablonu strony (X)HTML
5. Podstawowe znaczniki (X)HTML
5. Podstawowe znaczniki (X)HTML
2
© SKiTI 2011
Część I
Część I
Część I
Część I
- technologie dla potrzeb WWW -
- technologie dla potrzeb WWW -
3
© SKiTI 2011
Technologie WWW
Technologie WWW
Podstawowe grupy technologii WWW:
Podstawowe grupy technologii WWW:
Generacji (ang. Server-Side)
Generacji (ang. Server-Side)
dynamiczne tworzenie, generowanie przez serwer
dynamiczne tworzenie, generowanie przez serwer
zawartości strony WWW w zależności od różnych
zawartości strony WWW w zależności od różnych
zawartości strony WWW w zależności od różnych
zawartości strony WWW w zależności od różnych
czynników, m.in.  wymagań użytkownika
czynników, m.in.  wymagań użytkownika
(proces generacji odbywa siÄ™ po stronie serwera)
(proces generacji odbywa siÄ™ po stronie serwera)
Prezentacji (ang. Client-Side)
Prezentacji (ang. Client-Side)
przedstawienie  wygenerowanej przez serwer treści
przedstawienie  wygenerowanej przez serwer treści
strony WWW w zrozumiałej, logicznej i atrakcyjnej dla
strony WWW w zrozumiałej, logicznej i atrakcyjnej dla
użytkownika postaci (proces prezentacji odbywa się po
użytkownika postaci (proces prezentacji odbywa się po
stronie klienta  przeglÄ…darka internetowa)
stronie klienta  przeglÄ…darka internetowa)
© SKiTI 2011
Technologie Server-Side
Technologie Server-Side
Przykłady technologii generacji:
Przykłady technologii generacji:
CGI (ang. Common Gateway Interface)
CGI (ang. Common Gateway Interface)
SSI (ang. Server Side Include)
SSI (ang. Server Side Include)
ASP (ang. Active Server Pages)
ASP (ang. Active Server Pages)
ASP (ang. Active Server Pages)
ASP (ang. Active Server Pages)
ISAPI (ang. Internet Server API) / NSAPI (ang. Netscape Server API)
ISAPI (ang. Internet Server API) / NSAPI (ang. Netscape Server API)
PHP (ang. Personal Home Page)
PHP (ang. Personal Home Page)
JSP (ang. Java Server Pages)
JSP (ang. Java Server Pages)
Servlety
Servlety
Serwery aplikacji
Serwery aplikacji
© SKiTI 2011
Technologie Client-Side
Technologie Client-Side
Przykłady technologii prezentacji:
Przykłady technologii prezentacji:
(X)HTML
(X)HTML
CSS (ang. Cascade Style Sheet)
CSS (ang. Cascade Style Sheet)
JavaScript, JScript, VBScript
JavaScript, JScript, VBScript
JavaScript, JScript, VBScript
JavaScript, JScript, VBScript
Aplety Javy
Aplety Javy
Shockwave, Flash
Shockwave, Flash
AJAX (ang. Asynchronous JavaScript and XML)
AJAX (ang. Asynchronous JavaScript and XML)
X3D
X3D
WML (ang. Wireless Markup Language)
WML (ang. Wireless Markup Language)
RSS (ang. Really Simple Syndication ) / Atom
RSS (ang. Really Simple Syndication ) / Atom
© SKiTI 2011
Testowanie technologii
Testowanie technologii
- Server-Side i Client-Side -
- Server-Side i Client-Side -
Przykładowa platforma potrzebna do testów w
Przykładowa platforma potrzebna do testów w
 domowym zaciszu :
 domowym zaciszu :
Komputer PC
Komputer PC
OS: Windows, Linux lub Mac OS X
OS: Windows, Linux lub Mac OS X
OS: Windows, Linux lub Mac OS X
OS: Windows, Linux lub Mac OS X
PrzeglÄ…darkÄ™ lub przeglÄ…darki internetowe
PrzeglÄ…darkÄ™ lub przeglÄ…darki internetowe
np.: XAMPP, który jest jedną z populraniejszych i
np.: XAMPP, który jest jedną z populraniejszych i
 wzbogaconych dystrybucji serwera Apache.
 wzbogaconych dystrybucji serwera Apache.
XAMPP oferuje między innymi: Apache, MySQL, PHP +
XAMPP oferuje między innymi: Apache, MySQL, PHP +
PEAR, Perl, FileZilla FTP Server, phpMyAdmin, OpenSSL, &
PEAR, Perl, FileZilla FTP Server, phpMyAdmin, OpenSSL, &
© SKiTI 2011
Część II
Część II
Część II
Część II
- (X)HTML -
- (X)HTML -
8
© SKiTI 2011
TrochÄ™ Historii
TrochÄ™ Historii
Historia SGML / HTML / XHTML
Historia SGML / HTML / XHTML
Dawno, dawno temu&
Dawno, dawno temu&
W latach 80 dwudziestego wieku wykorzystywano język SGML (ang.
W latach 80 dwudziestego wieku wykorzystywano język SGML (ang.
Standard Generalized Markup Languag) - Standardowy Uogólniony
Standard Generalized Markup Languag) - Standardowy Uogólniony
Język Znaczników
Język Znaczników
Język Znaczników
Język Znaczników
SGML jest językiem służącym do definiowania języków
SGML jest językiem służącym do definiowania języków
znacznikowych, zwłaszcza tych używanych w elektronicznej wymianie
znacznikowych, zwłaszcza tych używanych w elektronicznej wymianie
dokumentów, zarządzaniu dokumentami i ich publikowaniu.
dokumentów, zarządzaniu dokumentami i ich publikowaniu.
W 1986 roku uznano go jako międzynarodowy standard
W 1986 roku uznano go jako międzynarodowy standard
SGML posiada szeroki zasób możliwości i jednocześnie jest
SGML posiada szeroki zasób możliwości i jednocześnie jest
elastyczny
elastyczny
Owa elastyczność ma swą cenę, którą jest wysoki stopień złożoności,
Owa elastyczność ma swą cenę, którą jest wysoki stopień złożoności,
który zahamował jego wprowadzenie w różne środowiska, m.in. w sieć
który zahamował jego wprowadzenie w różne środowiska, m.in. w sieć
WWW
WWW
9
© SKiTI 2011
TrochÄ™ Historii
TrochÄ™ Historii
Historia SGML / HTML / XHTML
Historia SGML / HTML / XHTML
W 1990 roku
W 1990 roku
Na bazie SGML powstaje HTML (ang. HyperText Markup Language)
Na bazie SGML powstaje HTML (ang. HyperText Markup Language)
- Hipertekstowy Język Znaczników, opracowany przez Tima Berners-Lee i Daniela
- Hipertekstowy Język Znaczników, opracowany przez Tima Berners-Lee i Daniela
W. Connolly
W. Connolly
Początkowo HTML miał być językiem służącym do wymiany dokumentów
Początkowo HTML miał być językiem służącym do wymiany dokumentów
naukowych i technicznych, odpowiednim do używania przez specjalistów
naukowych i technicznych, odpowiednim do używania przez specjalistów
naukowych i technicznych, odpowiednim do używania przez specjalistów
naukowych i technicznych, odpowiednim do używania przez specjalistów
HTML rozwiązał problem złożoności SGML poprzez zdefiniowanie niewielkiego
HTML rozwiązał problem złożoności SGML poprzez zdefiniowanie niewielkiego
zestawu strukturalnych i semantycznych znaczników (tagów) nadającego się do
zestawu strukturalnych i semantycznych znaczników (tagów) nadającego się do
tworzenia względnie prostych dokumentów
tworzenia względnie prostych dokumentów
W krótkim czasie HTML stał się bardzo popularny i szybko wykroczył poza swój
W krótkim czasie HTML stał się bardzo popularny i szybko wykroczył poza swój
pierwotny cel
pierwotny cel
Od 1990 do 1997 roku
Od 1990 do 1997 roku
Powstają kolejne wersje języka HTML, w których pojawiają się nowe elementy
Powstają kolejne wersje języka HTML, w których pojawiają się nowe elementy
przeznaczone dla tego języka
przeznaczone dla tego języka
W 1997 roku pojawia siÄ™ wersja HTML 4.0
W 1997 roku pojawia siÄ™ wersja HTML 4.0
W 1999 roku pojawia siÄ™ ostatnia poprawka do wersji HTML 4.01
W 1999 roku pojawia siÄ™ ostatnia poprawka do wersji HTML 4.01
Wielość nowych elementów języka HTML doprowadziła do pojawiania się
Wielość nowych elementów języka HTML doprowadziła do pojawiania się
problemów ze wzajemnym współdziałaniem dokumentów na różnych platformach
problemów ze wzajemnym współdziałaniem dokumentów na różnych platformach
I co dalej?
I co dalej?
10
© SKiTI 2011
TrochÄ™ Historii
TrochÄ™ Historii
Historia SGML / HTML / XHTML
Historia SGML / HTML / XHTML
W 2000 roku
W 2000 roku
Na bazie SGML powstaje XML (ang. Extensible Markup Language )
Na bazie SGML powstaje XML (ang. Extensible Markup Language )
- Rozszerzalny Język Znaczników
- Rozszerzalny Język Znaczników
XML był pomyślany jako sposób na odzyskanie możliwości i
XML był pomyślany jako sposób na odzyskanie możliwości i
elastyczności SGML bez jego dużej złożoności
elastyczności SGML bez jego dużej złożoności
elastyczności SGML bez jego dużej złożoności
elastyczności SGML bez jego dużej złożoności
XML jest ograniczonÄ… formÄ… SGML
XML jest ograniczonÄ… formÄ… SGML
XML zachowuje większość z bogatych możliwości SGML przy czym
XML zachowuje większość z bogatych możliwości SGML przy czym
usuwa wiele z jego bardziej złożonych właściwości SGML
usuwa wiele z jego bardziej złożonych właściwości SGML
Następuje przeformułowanie HTML 4 w XML 1.0, powstaje XHTML 1.0
Następuje przeformułowanie HTML 4 w XML 1.0, powstaje XHTML 1.0
XHTML (ang. Extensible HyperText Markup Language) - Rozszerzalny
XHTML (ang. Extensible HyperText Markup Language) - Rozszerzalny
Hipertekstowy Język Znaczników  jest następcą języka HTML
Hipertekstowy Język Znaczników  jest następcą języka HTML
XHTML to rodzina obecnych i przyszłych typów dokumentów i
XHTML to rodzina obecnych i przyszłych typów dokumentów i
modułów, które kopiują i rozszerzają HTML 4
modułów, które kopiują i rozszerzają HTML 4
XHTML w porównaniu do HTML wprowadza pewne obostrzenia, które
XHTML w porównaniu do HTML wprowadza pewne obostrzenia, które
pozwalają dostosować składnię do języka XML
pozwalają dostosować składnię do języka XML
W 2001 roku powstaje XHTML 1.1 i co dalej ?
W 2001 roku powstaje XHTML 1.1 i co dalej ?
11
© SKiTI 2011
World Wide Web Consortium (W3C)
World Wide Web Consortium (W3C)
World Wide Web Consortium (W3C)
World Wide Web Consortium (W3C)
W3C to organizacja, która zajmuje się ustanawianiem
W3C to organizacja, która zajmuje się ustanawianiem
standardów pisania i przesyłu stron WWW
standardów pisania i przesyłu stron WWW
W3C jest obecnie zrzeszeniem ponad 400 organizacji,
W3C jest obecnie zrzeszeniem ponad 400 organizacji,
W3C jest obecnie zrzeszeniem ponad 400 organizacji,
W3C jest obecnie zrzeszeniem ponad 400 organizacji,
firm, agencji rządowych i uczelni z całego świata
firm, agencji rządowych i uczelni z całego świata
Publikowane przez W3C rekomendacje nie majÄ… mocy
Publikowane przez W3C rekomendacje nie majÄ… mocy
prawnej, nakazującej ich użycie, lecz wpływ samej
prawnej, nakazującej ich użycie, lecz wpływ samej
organizacji nie pozwala się z nimi nie liczyć
organizacji nie pozwala się z nimi nie liczyć
Link konsorcjum W3C: http://www.w3.org
Link konsorcjum W3C: http://www.w3.org
12
© SKiTI 2011
TrochÄ™ Historii
TrochÄ™ Historii
I co dalej ?
I co dalej ?
Do końca roku 2009 trwały pracę grupy W3C związane z XHTML 2
Do końca roku 2009 trwały pracę grupy W3C związane z XHTML 2
(całkowicie zrywa z kompatybilnością wstecz -> HTML), obecnie są one
(całkowicie zrywa z kompatybilnością wstecz -> HTML), obecnie są one
zarzucone
zarzucone
Niezależnie od organizacji W3C grupa WHATWG (ang. Web Hypertext
Niezależnie od organizacji W3C grupa WHATWG (ang. Web Hypertext
Application Technology Working Group) zrzeszająca środowiska i
Application Technology Working Group) zrzeszająca środowiska i
producentów przeglądarek zaczęła pracę nad HTML 5.0 i wspólnie z W3C
producentów przeglądarek zaczęła pracę nad HTML 5.0 i wspólnie z W3C
(od 2007) opracowuje pierwszy draft HTML 5.0 (2008 rok)
(od 2007) opracowuje pierwszy draft HTML 5.0 (2008 rok)
Planuje się że HTML 5.0 w 2022 roku będzie miał pełną implementację
Planuje się że HTML 5.0 w 2022 roku będzie miał pełną implementację
(bez błędów) w co najmniej dwóch przeglądarkach internetowych
(bez błędów) w co najmniej dwóch przeglądarkach internetowych
HTML 4 wciąż na to czeka ;)
HTML 4 wciąż na to czeka ;)
Różnice pomiędzy HTML 4 a 5: http://www.w3.org/TR/html5-diff/
Różnice pomiędzy HTML 4 a 5: http://www.w3.org/TR/html5-diff/
13
© SKiTI 2011
Przykładowa struktura szablonu strony
Przykładowa struktura szablonu strony
(X)HTML
(X)HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">"http://www.w3.org/TR/html4/loose.dtd">xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
>


















Tu treść strony
Tu treść strony




14
© SKiTI 2011
Szablon strony (X)HTML w przeglÄ…darce
Szablon strony (X)HTML w przeglÄ…darce
15
© SKiTI 2011
Podstawowe zasady (X)HTML
Podstawowe zasady (X)HTML
Język (X)HTML składa się ze znaczników (tzw. tagów), które
Język (X)HTML składa się ze znaczników (tzw. tagów), które
zapisywane sÄ… w nawiasach klamrowych <>
zapisywane sÄ… w nawiasach klamrowych <>
Do każdego z tagów zwykle można podać pewne atrybuty (inaczej
Do każdego z tagów zwykle można podać pewne atrybuty (inaczej
parametry, nie zawsze jest to jednak konieczne, bÄ…dz
możliwe)
parametry, nie zawsze jest to jednak konieczne, bÄ…dz
możliwe)
Atrybut może posiadać także przypisaną pewną wartość, bądz

Atrybut może posiadać także przypisaną pewną wartość, bądz

występować samodzielnie - wtedy określa on pewne cechy danego
występować samodzielnie - wtedy określa on pewne cechy danego
znacznika
znacznika
znacznika
znacznika
Tagi nie sÄ… widoczne na ekranie, widoczne sÄ… tylko efekty ich
Tagi nie sÄ… widoczne na ekranie, widoczne sÄ… tylko efekty ich
działania
działania
Większość tagów wymaga także  zamknięcia przy użyciu taga o
Większość tagów wymaga także  zamknięcia przy użyciu taga o
identycznej nazwie jak tag otwierajÄ…cy, jednak poprzedzonej
identycznej nazwie jak tag otwierajÄ…cy, jednak poprzedzonej
znakiem "/
znakiem "/
Tagi zamykające nigdy nie posiadają parametrów
Tagi zamykające nigdy nie posiadają parametrów
Tekst pogrubiony
Tekst pogrubiony
16
© SKiTI 2011
Podstawowe zasady (X)HTML
Podstawowe zasady (X)HTML
Nazwy tagów oraz parametrów i ich wartości mogą być pisane
Nazwy tagów oraz parametrów i ich wartości mogą być pisane
dużymi, jak i małymi literami. Zaleca się jednak pisanie ich
dużymi, jak i małymi literami. Zaleca się jednak pisanie ich
wyłącznie małymi literami, ze względu na wymogi języka XHTML
wyłącznie małymi literami, ze względu na wymogi języka XHTML
Wartości poszczególnych parametrów zaleca się obejmowaniem
Wartości poszczególnych parametrów zaleca się obejmowaniem
cudzysłowami - wymogi XHTML
cudzysłowami - wymogi XHTML
Tagi można zagnieżdżać, przy czym kolejność zagnieżdżania
Tagi można zagnieżdżać, przy czym kolejność zagnieżdżania
Tagi można zagnieżdżać, przy czym kolejność zagnieżdżania
Tagi można zagnieżdżać, przy czym kolejność zagnieżdżania
ma znaczenie (przy jej zmianie wynikowy dokument wyświetlony
ma znaczenie (przy jej zmianie wynikowy dokument wyświetlony
przez przeglÄ…darkÄ™ jest zwykle inny)
przez przeglÄ…darkÄ™ jest zwykle inny)
Przy umieszczaniu tagów zamykających (rozpoczynających się
Przy umieszczaniu tagów zamykających (rozpoczynających się
od "/") należy pilnować kolejności w jakiej były otwierane, i
od "/") należy pilnować kolejności w jakiej były otwierane, i
zamykać je w odwrotnej kolejności (poczynając od najbardziej
zamykać je w odwrotnej kolejności (poczynając od najbardziej
zagnieżdzonego) - wymogi XHTML
zagnieżdzonego) - wymogi XHTML
Tekst pogrubiony i pochylony
Tekst pogrubiony i pochylony
17
© SKiTI 2011
Przykładowa struktura szablonu strony
Przykładowa struktura szablonu strony
(X)HTML
(X)HTML
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


















Tu treść strony
Tu treść strony




18
© SKiTI 2011
Deklaracja typu dokumentu- DTD
Deklaracja typu dokumentu- DTD
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
"http://www.w3.org/TR/html4/loose.dtd">
DTD (ang. Document Type Declaration), określa która wersja
DTD (ang. Document Type Declaration), określa która wersja
języka (X)HTML i w jakim zakresie będzie wykorzystywana na
języka (X)HTML i w jakim zakresie będzie wykorzystywana na
języka (X)HTML i w jakim zakresie będzie wykorzystywana na
języka (X)HTML i w jakim zakresie będzie wykorzystywana na
stronie, w tym przypadku Transitional (przejściowa) , co
stronie, w tym przypadku Transitional (przejściowa) , co
zagwarantuje, że strona używająca znaczników i atrybutów
zagwarantuje, że strona używająca znaczników i atrybutów
zdeprecjonowanych (nie zalecanych) zawsze będzie
zdeprecjonowanych (nie zalecanych) zawsze będzie
poprawna pod względem zgodności ze standardem HTML
poprawna pod względem zgodności ze standardem HTML
Deklarację typu dokumentu DTD należy wpisać jako pierwszą
Deklarację typu dokumentu DTD należy wpisać jako pierwszą
linijkÄ™ w dokumencie - jeszcze przed znacznikiem
linijkÄ™ w dokumencie - jeszcze przed znacznikiem
otwierajÄ…cym
otwierajÄ…cym
Podanie adresu wersji DTD, pozwala przeglądarce pobrać
Podanie adresu wersji DTD, pozwala przeglądarce pobrać
wersję DTD oraz wszystkie potrzebne zestawy znaków
wersję DTD oraz wszystkie potrzebne zestawy znaków
19
© SKiTI 2011
Inne przykłady DTD
Inne przykłady DTD
Ścisła deklaracja dokumentu (ang. Strict DTD ) zawiera
Ścisła deklaracja dokumentu (ang. Strict DTD ) zawiera
wszystkie elementy i atrybuty, które nie są zdeprecjonowane
wszystkie elementy i atrybuty, które nie są zdeprecjonowane
oraz nie pojawiajÄ… siÄ™ w dokumentach z ramkami
oraz nie pojawiajÄ… siÄ™ w dokumentach z ramkami
"http://www.w3.org/TR/html4/strict.dtd">
"http://www.w3.org/TR/html4/strict.dtd">
Deklaracja dokumentu dla ramek (ang. Frameset DTD)
Deklaracja dokumentu dla ramek (ang. Frameset DTD)
zawiera wszystko co w Transitional DTD plus elementy
zawiera wszystko co w Transitional DTD plus elementy
odnoszÄ…ce siÄ™ do ramek
odnoszÄ…ce siÄ™ do ramek
"http://www.w3.org/TR/html4/frameset.dtd">
"http://www.w3.org/TR/html4/frameset.dtd">
20
© SKiTI 2011
Inne przykłady DTD
Inne przykłady DTD
Ścisła (jedyna) deklaracja dokumentu XHTML 1.1
Ścisła (jedyna) deklaracja dokumentu XHTML 1.1
(obecnie zalecana)
(obecnie zalecana)
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
21
© SKiTI 2011
Przykładowa struktura szablonu strony HTML
Przykładowa struktura szablonu strony HTML
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


















Tu treść strony
Tu treść strony




22
© SKiTI 2011
Sekcja:
Sekcja:
...
...


...
...


Element definiuje poczÄ…tek dokumentu HTML
Element definiuje poczÄ…tek dokumentu HTML
Element definiuje poczÄ…tek dokumentu HTML
Element definiuje poczÄ…tek dokumentu HTML
Atrybut xmlns definiuje przestrzeń nazw dla języka XML
Atrybut xmlns definiuje przestrzeń nazw dla języka XML
Atrybut definiuje język dla zawartości elementu
Atrybut xml:lang definiuje język dla zawartości elementu
Element powinien znalez
ć się na końcu dokumentu
Element powinien znalez
ć się na końcu dokumentu
HTML
HTML
23
© SKiTI 2011
Przykładowa struktura szablonu strony
Przykładowa struktura szablonu strony
(X)HTML
(X)HTML
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


















Tu treść strony
Tu treść strony




24
© SKiTI 2011
Sekcja:
Sekcja:
...
...


...
...


...
...
Sekcja tzw.  nagłówka dokumentu
Sekcja tzw.  nagłówka dokumentu
Wewnątrz części nagłówkowej można określić ogólne
Wewnątrz części nagłówkowej można określić ogólne
informacje o dokumencie oraz jego zawartości (tag ),
informacje o dokumencie oraz jego zawartości (tag ),
między innymi stronę kodową, opis zawartości strony, słowa
między innymi stronę kodową, opis zawartości strony, słowa
kluczowe zwiÄ…zane ze stronÄ… i jej autora
kluczowe zwiÄ…zane ze stronÄ… i jej autora
Oraz tytuł dokumentu, pomiędzy tagami:





Tu treść strony
Tu treść strony




26
© SKiTI 2011
Sekcja:
Sekcja:


Tu treść strony
Tu treść strony


Sekcja tzw.  ciała dokumentu
Sekcja tzw.  ciała dokumentu
Sekcja tzw.  ciała dokumentu
Sekcja tzw.  ciała dokumentu
W tej części dokumentu można dzielić tekst na
W tej części dokumentu można dzielić tekst na
akapity, tworzyć tytuły spisy, określać łącza do innych
akapity, tworzyć tytuły spisy, określać łącza do innych
dokumentów itp..
dokumentów itp..
27
© SKiTI 2011
Podstawowe zabawy z tekstem
Podstawowe zabawy z tekstem
Akapit
Akapit
jest to część tekstu objęta znacznikami:

...

jest to część tekstu objęta znacznikami:

...

Przykłady, wyrównanie w lewo (domyślne), w prawo,
Przykłady, wyrównanie w lewo (domyślne), w prawo,
do środka oraz justowanie tekstu
do środka oraz justowanie tekstu
do środka oraz justowanie tekstu
do środka oraz justowanie tekstu

...

...

...

...

...

...

...

...

28
© SKiTI 2011
Podstawowe zabawy z tekstem
Podstawowe zabawy z tekstem
Tytuł
Tytuł
Stosowany aby nadać tytuł (nagłówek) jakiejś części
Stosowany aby nadać tytuł (nagłówek) jakiejś części
tekstu (rozdziałowi)
tekstu (rozdziałowi)
Tytuł, w zależności od wielkości czcionki obejmuje
Tytuł, w zależności od wielkości czcionki obejmuje
siÄ™ znacznikami: od

...

...

siÄ™ znacznikami: od

...

do

...

...

do

...

...

...

Przykłady,  bardzo duży tytuł oraz tytuł normalnej
Przykłady,  bardzo duży tytuł oraz tytuł normalnej
wielkości (ale pogrubiony)
wielkości (ale pogrubiony)

Bardzo duży tytuł

Bardzo duży tytuł

Tytuł normalnej wielkości

Tytuł normalnej wielkości

29
© SKiTI 2011
Podstawowe zabawy z tekstem
Podstawowe zabawy z tekstem
Przejście do nowego wiersza
Przejście do nowego wiersza




Podkreślenie wybranego tekstu
Podkreślenie wybranego tekstu
tekst do podkreślenia
tekst do podkreślenia
Pogrubienie wybranego tekstu
Pogrubienie wybranego tekstu
tekst do pogrubienia
tekst do pogrubienia
Pochylenie wybranego tekstu
Pochylenie wybranego tekstu
tekst do pochylenia
tekst do pochylenia
30
© SKiTI 2011
Podstawowe zabawy z tekstem
Podstawowe zabawy z tekstem
Indeks dolny
Indeks dolny
_...
...
Podkreślenie wybranego tekstu
Podkreślenie wybranego tekstu
^...
...
Wielkość czcionki, gdzie "n" oznacza wielkość pisma
Wielkość czcionki, gdzie "n" oznacza wielkość pisma
(1 - najmniejsza, 7 - największa, 3 - domyślna)
(1 - najmniejsza, 7 - największa, 3 - domyślna)
...
...
Kolor czcionki
Kolor czcionki
...
...
31
© SKiTI 2011
Odsyłacze
Odsyłacze
Odsyłacze
Odsyłacze
To inaczej hiperłącza, odnośniki hipertekstowe, linki
To inaczej hiperłącza, odnośniki hipertekstowe, linki
Są wykorzystywane głównie do:
Są wykorzystywane głównie do:
Tworzenie spisu treści serwisu
Tworzenie spisu treści serwisu
Tworzenie spisu treści serwisu
Tworzenie spisu treści serwisu
Linki do innych ciekawych miejsc w Internecie
Linki do innych ciekawych miejsc w Internecie
opis
opis
Strona główna
Strona główna
Otwarcie linku w nowym oknie:
Otwarcie linku w nowym oknie:
Start
Start
32
© SKiTI 2011
Listy (wykazy)
Listy (wykazy)
Listy (wykazy)
Listy (wykazy)
Typowo wykorzystywane do sporzÄ…dzania
Typowo wykorzystywane do sporzÄ…dzania
usystematyzowanych zestawień informacji w postaci
usystematyzowanych zestawień informacji w postaci
wyszczególnionych punktów (

&

) :
wyszczególnionych punktów (

&

) :
nieuporzÄ…dkowanych (nienumerowanych) 

nieuporzÄ…dkowanych (nienumerowanych) 

nieuporzÄ…dkowanych (nienumerowanych) 

nieuporzÄ…dkowanych (nienumerowanych) 

• Pierwszy element listy nieuporzÄ…dkowanej


• Pierwszy element listy nieuporzÄ…dkowanej


• Drugi element listy nieuporzÄ…dkowanej


• Drugi element listy nieuporzÄ…dkowanej

lub uporzÄ…dkowanych (numerowanych) 

lub uporzÄ…dkowanych (numerowanych) 

1. Pierwszy element listy uporzÄ…dkowanej


2. Pierwszy element listy uporzÄ…dkowanej


3. Drugi element listy uporzÄ…dkowanej


4. Drugi element listy uporzÄ…dkowanej

33
© SKiTI 2011
Tabele
Tabele
Struktura tabeli
Struktura tabeli

komórka1	komórka2	komórka1	komórka2
komórka3	komórka4	komórka3	komórka4

Powyższe polecenia tworzą tabelę, złożoną z dwóch kolumn i
Powyższe polecenia tworzą tabelę, złożoną z dwóch kolumn i
dwóch wierszy (razem cztery komórki)
dwóch wierszy (razem cztery komórki)
Tabela zajmie 100% szerokości przeglądarki minus marginesy
Tabela zajmie 100% szerokości przeglądarki minus marginesy
Znaczniki wierszy ..., znaczniki kolumn ...
Znaczniki wierszy ..., znaczniki kolumn ...
34
© SKiTI 2011
Tabele  przykład wykorzystania
Tabele  przykład wykorzystania
35
© SKiTI 2011
Obrazek
Obrazek
Wstawianie obrazka do dokumentu:
Wstawianie obrazka do dokumentu:
width="x" height="y" />
width="x" height="y" />
 ścieżka dostępu wskazuje lokalizację obrazka na dysku, może
 ścieżka dostępu wskazuje lokalizację obrazka na dysku, może
 ścieżka dostępu wskazuje lokalizację obrazka na dysku, może
 ścieżka dostępu wskazuje lokalizację obrazka na dysku, może
być ścieżką względną lub ścieżką bezezględną
być ścieżką względną lub ścieżką bezezględną
 Tekst alternatywny oznacza krótką informację, która pojawi się w
 Tekst alternatywny oznacza krótką informację, która pojawi się w
przypadku, kiedy obrazek nie zostanie wyświetlony
przypadku, kiedy obrazek nie zostanie wyświetlony
 x szerokość obrazka
 x szerokość obrazka
 y wysokość obrazka
 y wysokość obrazka


36
© SKiTI 2011
Wybrane z wielu innych &
Wybrane z wielu innych &
Pozioma linia  np. do rozdzielania tekstu
Pozioma linia  np. do rozdzielania tekstu

---

---

Komentarz  np. do opisywania fragmentów kodu (X)HTML
Komentarz  np. do opisywania fragmentów kodu (X)HTML
Komentarz  np. do opisywania fragmentów kodu (X)HTML
Komentarz  np. do opisywania fragmentów kodu (X)HTML
(tekst objęty w znaczniki komentarza nie jest wyświetlany
(tekst objęty w znaczniki komentarza nie jest wyświetlany
przez przeglÄ…darkÄ™ internetowÄ…)
przez przeglÄ…darkÄ™ internetowÄ…)


37
© SKiTI 2011
Czym jest walidator ?
Czym jest walidator ?
Walidator jest to program sprawdzający poprawność dokumentu
o określonej składni np.: HTML, XHTML, CSS, RSS&
Walidator języków znacznikowych (HTML, XHTML,& ):
http://validator.w3.org/
Walidator CSS i dokumentów (X)HTML z CSS:
http://jigsaw.w3.org/css-validator/
38
© SKiTI 2011
Bibliografia
Bibliografia
Przykładowa Literatura:
Przykładowa Literatura:
Konsorcjum W3C:
Konsorcjum W3C:
http://www.w3.org
http://www.w3.org
Specyfikacja HTML:
Specyfikacja HTML:
http://www.w3.org/TR/html4/
http://www.w3.org/TR/html4/
Specyfikacja XHTML:
Specyfikacja XHTML:
http://www.w3.org/TR/xhtml1/
http://www.w3.org/TR/xhtml1/
Walidator języków znacznikowych (HTML, XHTML,& ):
Walidator języków znacznikowych (HTML, XHTML,& ):
http://validator.w3.org/
http://validator.w3.org/
Walidator CSS i dokumentów (X)HTML z CSS:
Walidator CSS i dokumentów (X)HTML z CSS:
http://jigsaw.w3.org/css-validator/
http://jigsaw.w3.org/css-validator/
Linki do różnych kursów (X)HTML na internetowej stronie przedmiotu
Linki do różnych kursów (X)HTML na internetowej stronie przedmiotu
(zakładka: Literatura)
(zakładka: Literatura)
39
© SKiTI 2011
Dziękuję za uwagę !!!
Dziękuję za uwagę !!!
Dziękuję za uwagę !!!
Dziękuję za uwagę !!!
40
© SKiTI 2011