2010-03-31
Technologie internetowe
Wykład 1
Wprowadzenie do HTML
Serwer
" Serwer
" program komputerowy (lub komputer) udostępniający różne usługi
dla programów klienckich (lub komputerów)
" podejmuje akcję i komunikację zwykle tylko na żądanie klienta
" Klient
" program komputerowy (lub komputer) korzystający z usług
udostępnianych przez serwer
" to klient zwykle podejmuje komunikację i inicjuje działania
serwera
1
2010-03-31
Modele kompunikacji
" P2P (od ang. peer-to-peer - równy z równym)
Każdy komputer w sieci może być serwerem lub klientem
" Skype
" eMule
" Klient-serwer
Komunikacja asymetryczna, tylko jeden komputer pełni rolę serwera
" WWW
" email
Język HTML (HyperText Markup
Language )
Język opisu treści i wyglądu strony
internetowej
Aplikacja języka SGML (Standard Generalized
Markup Language)
Język wykorzystuje znaczniki (tags)
2
2010-03-31
Wersje HTML
HTML 2.0
HTML 3.2 (tabele,ramki)
HTML 4.01
Strict, w którym używanie elementów uznanych za przestarzałe jest zabronione.
Transitional, w którym używanie elementów uznanych za przestarzałe jest dopuszczalne.
Frameset, w którym dopuszczone są głównie elementy związane z ramkami;
XHTML 1.0
XHTML 1.1
XHTML 2.0 - niekompatybilny
HTML 5.0
W3C - World Wide Web Consortium
Budowa znacznika
Atrybut
Wartość atrybutu
Hello world
Zawartość znacznika
Znacznik początkowy Znacznik końcowy
Uwaga: W HTML istnieją znaczniki,
które nie posiadają znacznika końcowego.
3
2010-03-31
Zagnieżdżanie znaczników
Ala ma psa.As to pies Ali
Uwaga: Pierwszy znacznik otwarty powinien być zamknięty jako ostatni !
Ala ma psa.As to pies Ali
Struktura dokumentu HTML
- deklaracja
typu dokumentu

... - nagłówek
... - zawartość strony

4
2010-03-31
"http://www.w3.org/TR/html4/strict.dtd">

Nagłówek pierwszego stopnia stopnia

Pierwsza linia

Druga linia


Otworz Onet w nowym oknie

Prolog strony
Prolog identyfikuje poziom używanego na stronie języka HTML.
Prolog wykluczający elementy prezentacyjne uznane w HTML 4.0 za
schyłkowe  przedkłada poprawną strukturę nad prezentację
"http://www.w3.org/TR/html4/strict.dtd">
Prolog dopuszczający wersję przejściową  znaczniki prezentacyjne (np..
Kolorowe suwaki)
"http://www.w3.org/TR/html4/loose.dtd">
Prolog dla strony zawierającej ramki
"http://www.w3.org/TR/html4/frameset.dtd">
Prolog dla strony zgodnej ze specyfiką HTML 3.2

5
2010-03-31
Znacznik META
Znacznik zawiera informacje o zawartości dokumentu, np. dla celów katalogowych czy indeksów,
wykorzystywanych przez odpowiednie programy, np. wyszukiwarki sieciowe.
Określenie strony kodowej



Opis zawartości strony

Słowa kluczowe opisujące zawartość strony

Informacja o języku strony

Informacja o autorze

Informacja o użytym do stworzenia strony narzędziu

Znacznik META
Data utraty ważności przez dokument

Informacja, czy stroan ma być składowana w buforze przeglądarki (cache)

Automatyczne odświeżenie lub przekierowanie po x sekundach


Data czas utworzenia

Sposób pojawiania się strony
CONTENT="filter:RevealTrans(Duration=3,Transition=23)">
Informacje dla robotów internetowych
dyrektywy = index, noindex, follow,
nofollow
6
2010-03-31
Znaczniki formatowania czcionki
Wytłuszczenie ..
Pochylenie ..
Podkreślenie ..
Stała szerokość ..
Przekreślenie ..
Indeks górny ^..
Indeks dolny _..
Rozmiar, kolor, rodzaj face="Arial, Times New Roman > ..
Znaczniki logiczne
Cytat ..
Definicja ..
Czcionka wyróżniona ..

Kod ..
7
2010-03-31
Kolory w HTML
00
01
02
black
..
purple 1F
:
silver
:
yellow
21
aqua
:
:
FF
Wstawiane grafiki
Grafika w tym samy katalogu co strona

Grafika w katalogu równorzędnym

Zmiana rozmiarów  bezwzględna

Grafika w tle strony

Zalecane formaty: jpg, gif
8
2010-03-31
Hiperłącza
Widoczna reprezentacja linku
Politechnika
Napisz do mnie
Otwarcie strony w nowym oknie
Politechnika

Mapa hiperłączy


9
2010-03-31
Tabele
Tabela (table)
Imie Nazw Wiek Ocena
Wiersz
Jan Kowal 23 5.0
Komórka
Anna Nowak 22 4.0




Kowal

Imie	Nazw	Wiek	Ocena
23	5.0
Anna	Nowak	22	4.0

Formatowanie tabeli
" Wyrównanie w poziomie
" align="left
" align="center
" align="right
" Grubość ramki  border="1
" Odległość pomiędzy komórkami  cellspacing="3
" Wewnętrzny margines  cellpadding="5
Tekst
10
2010-03-31
Formatowanie komórki

" Wyrównanie w poziomie " align="left " align="center " align="right " Wyrównanie w pionie " valign="top " valign="middle " valign="bottom " Szerokość, wysokość " bezwzględna w pikselach  width="200 , height="150 " względem szerokości, wys. tabeli  width="50% height="120% Tabele nieregularne  rozciąganie komórek Rozciąganie w pionie  rowspan="3 Rozciąganie w poziomie - colspan="2 colspan=2 x zagnieżdżanie tabel x x

x

<br><body><br><body><br>Strona startowa<br>Strona nie obsługuje ramek<br></body><br></body><br></html><br> Start Część Menu Info główna Atrybuty Podział na kolumny Bezwzgędny cols="500,300,200 cols="500,*,200 Względny cols="30%,70% cols="30%,* Podział na wiersze rows="*,500 rows="30%,*,20% Ukrywanie ramek frameboreder="0 border="0 (dla niektórych przeglądarek) 13 2010-03-31 Atrybuty Nazwa ramki podawana jako target łącza name="glowna Strona wczytywana do ramki domyślnie src="menu.htm Strerowanie możliwością przewijania zawartości ramki Suwaki zawsze widoczne scrolling="yes Suwaki włączane w razie potrzeby scrolling="auto Suwaki zawsze niewidoczne scrolling="no Blokowanie możliwości zmiany rozmiaru ramki noresize Złożone struktury ramek Tytuł Menu Witaj 14 2010-03-31 Pływające ramki Transitional kontra Strict Znaczniki prezentacyjne u, s i strike, center, font Atrybuty background i bgcolor dla elementu body, align dla elementów div, form, paragraph (p) oraz nagłówków (h1...h6) align, noshade, size oraz width dla elementu hr align, border, vspace oraz hspace dla elementów img oraz object align oraz bgcolor dla elementu table bgcolor, width, height dla elementów td oraz th bgcolor dla elementu tr Elementy związane z mechanizmem ramek frameset (używany zamiast elementu body w wersji Frameset) frame iframe noframes atrybut target w elementach anchor, link, form 15 2010-03-31 Transitional kontra Framset Wartości elementu head. XML (Extensible Markup Language) W poprawnym dokumencie XML: " istnieje deklaracja XML " istnieje jeden element główny " wszystkie znaczniki są zamknięte " nazwy elementów mogą zawierać znaki alfanumeryczne (litery a-z, A-Z oraz cyfry 0-9), znaki ideograficzne (ą, ó, ń jednak należy unikać takich konstrukcji) oraz 3 znaki interpunkcyjne (_ - .). 16 2010-03-31 XHTML Extensible HyperText Markup Language Wersja  formalna Wersja  kompatybilna 17