Aplikacje Internetowe

HTML, CSS, DHTML, XML

Rafał Kasprzyk

Czym jest HTML ?

HTML

jest językiem opisu strony służącym do konstruowania

dokumentów przeznaczonych do prezentacji w Internecie.

Dokumenty HTML są zwykłymi plikami tekstowymi (z rozszerzeniem

.htm lub .html) które mogą być redagowane w dowolnym edytorze np.
Notatniku Windows.

Zawierają one tekst (właściwą treść dokumentu) i znaczniki (zwane

również

tagami

) czyli ujęte w nawiasy kątowe litery, mające ściśle

zdefiniowany wpływ na interpretację przez przeglądarkę tekstu
znajdującego się w pliku.

Ogólna składnia znaczników wygląda następująco:

<TAG parametr="wartość"> tekst </TAG>

Przeglądarka interpretuje zawartość pliku i przekształca go na postać

graficzną.

Specyfikacja standardu języka HTML opracowywana jest przez World

Wide Web Consortium (W3C). Obecnie standardem jest zatwierdzona
pod koniec grudnia 1997 roku specyfikacja HTML 4.0

Schemat komunikacji pomiędzy

przeglądarką a serwerem WWW

Przeglądarka

WWW

Serwer

WWW

Żądanie przesłania strony (URL)

http://www.serwer.com/obrazki.htm

Przesłanie zawartości dokumentu

http://www.serwer.com/obrazki.htm

HTTP

Szkielet (osnowa) dokumentu

<!DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.0//EN">

<HTML>

<HEAD>

nagłówek dokumentu

</HEAD>

<BODY>

treść dokumentu

</BODY>

</HTML>

prolog - informacja o wersji HTML używanej w dokumencie

HTML - zakres dokumentu

HEAD - nagłówek dokumentu

informacje o dokumencie (strona kodowa, tytuł dokumentu...)

BODY - ciało dokumentu

publikowana treść dokumentu (formatowany tekst, obrazki,
odsyłacze itp...)

<HEAD>

<TITLE>

Tytuł strony

</TITLE> -

tytuł strony wyświetlany na pasku

tytułowym okna przeglądarki

<META>

znacznik pozwalający na zdefiniowanie (meta)informacji

mających wpływ na sposób wyświetlania treści dokumentu. Może mieć
następujące trzy atrybuty:

HTTP-EQUIV

NAME

CONTENT

(w kombinacjach

pierwszy i trzeci lub drugi i trzeci)



informacja o stronie kodowej dokumentu



ISO Latin 2 (ISO-8859-2) - Polska Norma



MS Windows

<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=windows-

1250">

Uwaga!!! Standartem kodowania polskich znaków i jednocześnie
Polską Normą jest ISO-8859-2 !!!



informacja dla wyszukiwarek - nazwa i zawartość strony

<HEAD> cz.2



informacja dla wyszukiwarek - słowa kluczowe



informacja dla wyszukiwarek o języku strony



informacja o autorze strony



informacja o edytorze użytym do stworzenia strony



polecenie odświeżania zawartości strony co x sekund



polecenie wczytania nowej strony po x sekundach

<META HTTP-EQUIV="Refresh" CONTENT="x";

URL=http://serwer.com/.../strona.html">



informacja o dacie utworzenia dokumentu

<META HTTP-EQUIV="Creation-Date" CONTENT="Tue, 04 Dec 1993 21:29:02

GMT">



efekt przyejścia przy wejściu na stronę (tylko IE 4+)

<META HTTP-EQUIV="Page-Enter" CONTENT="filter:RevealTrans(Duration=3,

Transition=23)">

<HEAD> cz.3

<BASE>

definiuje bazowy adres dokumentu wykorzystywany przy

adresowaniu względnym. Parametry znacznika:



HREF

="http://serwer.com/../katalog/" - definiuje adres bazowy



TARGET

="nazwa" - definiuje sposób ładowania dokumentu określonego

przez parametr HREF do ramki o "nazwie" zdefiniowanej w tagu <FRAME>,
predefiniowane wartości to:



_blank

- dokument będzie załadowany do nowego okna bez nazwy



_self

- dokument będzie załadowany do aktywnego okna



_parent

- dokument będzie załadowany do okna na wyższym poziomie

zagnieżdżenia ramek



_top

- dokument będzie załadowany w cały obszar roboczy przeglądarki

<ISINDEX>

znacznik generujący pole do wprowadzenia słów

kluczowych, przeznaczony do wykorzystania ze skryptami CGI.
Obecnie rzadko używany, jego rolę przejęły formularze. Parametry:



PROMPT

="tekst" - określa tekst zachęty pojawiający się przed polem

wejściowym. Jeżeli parametr zostanie pominięty to wyświetlany jest tekst
standardowy

<BODY>

<BODY>

może zawierać parametry określające wygląd strony



BGCOLOR

=kolor - kolor tła dokumentu. Podawany jest on w

postaci nazwy jednego z 16 predefiniowanych kolorów (white,
yellow,...,black) lub #rrggbb - heksadecymalnego kodu RGB
poprzedzonego znakiem #.



BACKGROUND

="plik" - określa URL lub ścieżkę dostępu do pliku

graficznego który posłużyć ma jako tło dokumentu



ALINK

="kolor" - określa kolor tekstu odsyłacza do właśnie

ładowanej strony



LINK

="kolor" - kolor tekstu odsyłaczy



VLINK

="kolor" - kolor tekstu odsyłaczy dokumentów już

przeczytanych



TEXT

="kolor" - kolor podstawowego tekstu w dokumencie



LEFTMARGIN

="xx” i

TOPMARGIN

="xx” - liczony w pikselach lewy i

górny margines zawartości strony (tylko IE4+)

Formatowanie tekstu - bloki

<P>

tekst

</P>

- akapit oddzielony interlinią (Paragraph). Parametr:



ALIGN

- wyrównanie tekstu (left, right, center, justify, indent)

<BLOCKQUOTE>

tekst

</BLOCKQUOTE>

- blok cytowany, powoduje

przesunięcie w lewo bloku tekstu otaczanego przez ten znacznik

<BR>

- przełamanie tekstu (BReak). Parametry:



CLEAR

="położenie" - wpływa na sposób przełamania tekstu w przypadku gdy

oblewa on grafikę, domyślnie przejście następuje do miejsca określonego przez
krawędź grafiki.



left

- przejście do lewego marginesu dokumentu, poniżej rysunku



right

- przejście do prawego marginesu dokumentu, poniżej rysunku



all

- przejście poniżej rysunku(ów) dla obu marginesów

&nbsp

- niełamliwa spacja (NoBreakSPace), pozwala na wcięcie tekstu

<NOBR>

tekst

</NOBR>

- tekst znajdujący się wewnątrz tego znacznika nie

jest łamany

<WBR>

tekst

</WBR>

- pozwala na złamanie tekstu w sytuacji gdy znajduje

się on wewnątrz znacznika <NOBR>

<!--

...

-->

- komentarz nie interpretowany przez przeglądarkę

<FIELDSET>

tekst

</FIELDSET>

- obramowanie wokół elementu

Formatowanie tekstu cz.2

<HR>

- pozioma linia (Horizontal Rule). Parametry:



ALIGN

="położenie" - określa sposób wyrównania linii (left, right, center)



NOSHADE

- linia wyświetlana bez cienia



SIZE

="n" - grubość linii w pikselach



WIDTH

="długość" - długość wyświetlanej linii w pikselach (WIDTH=200) lub w

procentach szerokości okna (WIDTH=50%)

<B>

tekst

</B>

- tekst pogrubiony (Bold)

<I>

tekst

</I>

- tekst pochylony (Italic)

<U>

tekst

</U>

- tekst podkreślony (Underline)

<TT>

tekst

</TT>

Czcionka o stałej szerokości

<STRIKE>

tekst

</STRIKE> - t

ekst przekreślony

<SUP>

tekst

</SUP>

- indeks górny X

(Superscript)

<SUB>

tekst

</SUB>

- indeks dolny X

(Subscript)

<BIG> tekst </BIG>

- zwiększenie czcionki o 1 stopień

<SMALL> tekst </SMALL>

- zmniejszenie czcionki o 1 stopień

Czcionki

<H#>

tekst

</H#>

- tytuł pisany wytłuszczoną czcionką o wielkości n

(n=1..6). Parametry:



ALIGN

- wyrównanie tekstu (left, right, center, justify)



TITLE

- tekst podpowiedzi (dymku) wyskakującego po najechaniu myszką na

tytuł (tylko IE 4+)

<FONT>

- ustawienie kroju czcionki



COLOR

=kolor - kolor czcionki



SIZE

= [+-]x - rozmiar czcionki podany jako wartość bezwzględna (x=1..6) lub

względna (+/- względem aktualnego rozmiaru)



BASEFONT

nowa wartości bazowa rozmiaru czcionki (domyślnie 3)



FACE

=nazwa_czcionki

- krój czcionki np. Courier, TimesNewRoman. Stosowanie

tego parametru nie jest zalecane (nie wiadomo jakimi czcionkami dysponuje
odbiorca)

<BASEFONT>

- ustawienie nowej wartości bazowej wielkości czcionki

(domyślnie 3). Parametry jak dla znacznika <FONT>. Zalecana jest
rezygnacja ze stosowania tego znacznika w dokumentach HTML

Odsyłacze

<A>

treść odsyłacza

</A>

- wyświetla tekst po kliknięciu którego

przeglądarka wczytuje plik z nowa zawartością



odsyłacze do etykiet

- definicja etykiety

NAME

=”#nazwa_etykiety" > </A>



Odsyłacz do etykiety na tej samej stronie

<A HREF="#nazwa_etykiety" > Kliknij na mnie </A>



Odsyłacz do etykiety na innej stronie

<A HREF="strona.htm#nazwa_etykiety" > Kliknij na mnie </A>



odsyłacze do stron

HREF

=URL>

treść odsyłacza

</A>



adres absolutny

Kliknij na mnie

</A>



strona w tym samym katalogu

Kliknij na mnie

</A>



strona w katalogu podrzędnym

Kliknij na mnie

</A>



strona w katalogu równorzędnym

Kliknij na mnie

</A>

Odsyłacze do poczty

elektronicznej



odsyłacze do poczty elektronicznej

HREF

="mailto:skrzynka@serwer.com"

Kliknij na mnie

</A>



Wyślij pocztę do kilku osób

<A HREF="mailto:skrzynka@serwer.com;skrzynka2@serwer.com" > Kliknij na mnie
</A>



Wyślij list z tytułem

<A HREF="mailto:skrzynka@serwer.com?subject=Tytuł listu" > Kliknij na mnie </A>



Wyślij kopie listu do...

<A HREF="mailto:skrzynka@serwer.com?cc=skrzynka2@serwer.com" > Kliknij na
mnie </A>



Wyślij ukrytą kopię do...

<A HREF="mailto:skrzynka@serwer.com?bcc=skrzynka2@serwer.com" > Kliknij na
mnie </A>



Wyślij list z treścią...

<A HREF="mailto:skrzynka@serwer.com?body=Treść wiadomości" > Kliknij na mnie
</A>



Wyślij wypełniony list...

<A HREF="mailto:skrzynka@serwer.com?subject=List ze strony&body=Treść
wiadomości& cc=mail2@serwer.com" > Kliknij na mnie </A>

Odsyłacze graficzne



odsyłacze graficzne



prostokątne (współrzędne lewego górnego i prawego dolnego rogu)



koło (środek okręgu i promień)



wielobok (współrzędne wierzchołków - co najmniej 3 pary)

Listy (wykazy)

<UL>

elementy listy

</UL>

- lista nieuporządkowana. Parametry:



COMPACT

- zmniejsza odstępy pomiędzy liniami (nie działa w większości

przeglądarek)



PLAIN

- brak znacznika elementu listy



SRC

="plik_źródłowy" - grafika stosowna jako wyróżnik elementu listy



TYPE

=typ - ustala rodzaj wyróżnienia poszczególnych pól listy



square

- wypełniony kwadrat



disc

- koło



circle

- okrąg

<OL>

elementy listy

</OL>

- lista uporządkowana. Parametry:



COMPACT

- zmniejsza odstępy pomiędzy wierszami (nie działa w większości

przeglądarek)



TYPE

=symbol - określa sposób numerowania elementów listy



- kolejne duże litery



- kolejne małe litery



- kolejne duże liczby rzymskie



- kolejne małe liczby rzymskie



- kolejne liczby arabskie



START

=n - liczba od której rozpoczyna się numerowanie listy, podawana dziesiętnie

niezależnie od wartości argumentu TYPE

Listy cz.2



<LI>

tekst elementu

</LI>

- element listy. Parametry:



TYPE

=typ - rodzaj wyróżnienia lub numerowania (w zależności od typu listy)

elementów listy stosowany od tego miejsca



VALUE

=n - nowa numeracja listy od wartości n (tylko dla list uporządkowanych)

Istnieje możliwość zagnieżdżania list uporządkowanych i

nieuporządkowanych w celu uzyskania list wielopoziomowych



<DL>

elementy listy

</DL>

- lista definicyjna (Definition List)

<DT>

termin - hasło (nieobowiązkowe)

<DD>

definicja - objaśnienie hasła

Grafika i multimedia

<IMG>

- osadzenie pliku graficznego w dokumencie



SRC

="plik_graficzny" - określa URL lub ścieżkę dostępu do pliku graficznego



WIDTH

="n" - szerokość obrazka



HEIGHT

="n" - wysokość obrazka



BORDER

="n" - grubość obramowania



HSPACE

="n" - pozioma odległość od otaczającego tekstu



VSPACE

="n" - pionowa odległość od otaczającego tekstu



ALIGN

="typ" - sposób oblewania tekstem (left, right, top, bottom, middle)



ALT

="informacja" - informacja wyświetlana w przypadku gdy przeglądarka nie może

wyświetlić grafiki

<BGSOUND>

- podkład dźwiękowy (IE)



SRC

="plik_dźwiękowy" - określa URL lub ścieżkę dostępu do pliku dźwiękowego



LOOP

="n" - ilość powtórzeń (

infinite

-nieskończoność)



BALANCE

="n" - balans dla dźwięku stereofonicznego; n=(-10000,10000)



VOLUME

="n" - głośność n=(-10000,0)

Mulitimedia najczęściej publikuje się zamieszczając odsyłacz do pliku lub znacznik

Tabele



Definicja tabeli - może być zagnieżdżana wewnątrz znaczników <TD>

</TD>

<TABLE>

Tytuł tabeli

</CAPTION>

<TR>

<TH>

kol 1

</TH><TH>

kol 2

</TH><TH>

kol 3

</TH>

</TR>

<TR>

<TD>

1,1

</TD><TD>

1,2

</TD><TD>

1,3

</TD>

</TR>

<TR>

<TD>

2,1

</TD><TD>

2,2

</TD><TD>

2,3

</TD>

</TR>

<TR>

<TD>

3,1

</TD><TD>

3,2

</TD><TD>

3,3

</TD>

</TR>

</TABLE>

<CAPTION>

Tytuł tabeli

</CAPTION>

- podpis nad/pod tabelą. Parametry:



VALIGN

- poziome wyrównanie podpisu (

top

bottom

) (tylko IE)



ALIGN

- wyrównanie podpisu względem tabeli (

top

bottom

) lub (

left

right

)

Tabele

<TABLE>

</TABLE>; <TR>

</TR>; <TH>

</TH>; <TD>

</TD>



BORDER

= "n" - grubość obramowania w pikselach



BORDERCOLOR

="kolor" - kolor obramowania



BORDERCOLORDARK

BORDERCOLORLIGHT

="kolor" - kolory cieniowania obramowania



BGCOLOR

="kolor" - kolor tła tabeli



BACKGROUND

="plik" - określa URL lub ścieżkę dostępu do pliku graficznego który

posłużyć ma jako tło tabeli



WIDTH

="szerokość" - szerokość tabeli w pikselach (WIDTH=200) lub w procentach

szerokości okna (WIDTH=50%)



HEIGHT

=”wysokość" - wysokość tabeli w pikselach (HEIGHT=100) lub w procentach

szerokości okna (WIDTH=40%)



CELLSPACING

=n - szerokość obramowania komórek



CELLPADDING

=n - szerokość odstępu zawartości komórki od jej krawędzi



ALIGN

- wyrównanie tabeli względem oblewającego ją tekstu (

right

left

)



VALIGN

- pionowe wyrównanie zawartości komórek (

top

middle

bottom

)



ROWSPAN, COLSPAN

=x - łączenie wierszy w x kolumnach lub kolumn w x wierszach



FRAME

- pozwala na wyświetlanie wybranych elementów zewnętrznego obramowania

(

void

lhs

rhs

above

bottom

vsides

hsides

box

)



RULES

- wewnętrzne obramowania (

none

groups

rows

cols

all

)

Ramki - zasada działania



Ramki stanowią rozwiązanie pozwalające na wyświetlanie w oknie

przeglądarki kilku dokumentów HTML jednocześnie. Pozwala to na
budowanie m. in. spisów treści przez co nawigowanie po witrynie
jest łatwiejsze

Ramki

<FRAMESET> </FRAMESET>

- definicja zbioru ramek



ROWS

COLS

= "x,y,z..." - szerokość wiersz/kolumn w pikselach (COLS=100) lub w

procentach szerokości okna (COLS=50%,*%), symbol * oznacza resztę okna



BORDER

="x" - szerokość obramowania pomiędzy ramkami (w pikselach)



BORDERCOLOR

="kolor" - kolor obramowania



FRAMEBORDER

="x" - czy wyświetlać obramowanie x=(0..1) (w IE należy dodatkowo

ustawić

FRAMESPACING=0

aby nie wyświetlać obramowania)

<FRAME>

- definicja ramki



SRC

="plik.htm” - ścieżka lub URL do dokumentu HTML



SCROLLING

=yes/no/auto - czy ma być widoczny pasek przewijania



NAME

="nazwa" - nazwa ramki



NORESIZE

- zablokowanie możliwości regulacji wielkości ramek przy pomocy myszki



FRAMEBORDER

FRAMESPACING

- znaczenie identyczne jak w przypadku <FRAMESET>



MARGINHEIGHT

MARGINWIDTH

=x - margines pomiędzy krawędzią ramki a jej

zawartością

<NOFRAMES> </NOFRAMES>

- znacznik którego treść jest interpretowana

przez przeglądarkę, jeżeli nie obsługuje ona ramek. W jego wnętrzu powinna
znaleźć się sekcja BODY

Ramki - wywoływanie

Wywoływanie stron realizowane jest przez standardowy odnośnik:

<A HREF

="powitanie.htm"

TARGET

= "srodek"

Powitanie

</A>

<A HREF

="fotki.htm"

TARGET

="srodek"

Moje zdjęcia

</A>

<A HREF

="linki.htm"

TARGET

="srodek"

Ciekawe strony

</A>

Atrybut

TARGET

określa do jakiej ramki ma być załadowany

dokument. Oprócz nazwy ramki można stosować 4 predefiniowane
wartości



_self

- (domyślnie) - załadowanie dokumentu do tego samego okna w

którym znajdował się odnośnik (zastąpienie starej zawartości)



_blank

- załadowanie dokumentu do nowego pustego okna



_parent

- załadowanie dokumentu do ramki nadrzędnej w hierarchii



_top

- załadowanie dokumentu do okna najwyższego w hierarchii (czyli

do tego samego okna co aktualny układ ramek)

Ramki

Ramki stanowią rozwiązanie pozwalające na wyświetlanie w oknie
przeglądarki kilku dokumentów HTML jednocześnie. Pozwala to na budowanie
m. in. spisów treści przez co nawigowanie po witrynie jest łatwiejsze

<frameset frameborder="0" noresize framespacing="0" border="0" cols="179,*">
<frame name=„menu" scrolling="no" noresize src="menu.htm"
tppabs="http://serwer.com/menu.htm">
<frameset border="0" frameborder="0" rows="130,*">
<frame name=„gora" src="gora.htm"

tppabs="http://serwer.com/gora.htm" noresize scrolling="no">

<frame name=„srodek" src="srodek.htm"

tppabs="http://serwer.com/srodek.htm" noresize>

</frameset>
<noframes>
<body>
<p>Twoja przeglądarka nie obsługuje ramek.</p>
</body>
</noframes>
</frameset>

CSS



CSS - Cascading Style Sheets - Kaskadowe Arkusze Stylów

CSS jest mechanizmem pozwalającym na definiowanie wyglądu

dokumentu HTML poprzez przypisanie znacznikom (grupom
znaczników) sposobu wyświetlania. Style pozwalają uniezależnić
wygląd dokumentu od jego treści. Zasada ich działania podobna jest
do np. szablonów Word’a.



Zalety:



elastyczność



przejrzystość



intuicyjność i łatwość definiowania



Wady:



tylko niektóre przeglądarki (Netscape Navigator i Internet Explorer)

interpretują jedynie część stylów, niekiedy w sposób odmienny niż nakazuje
oficjalna specyfikacja

Najnowsza specyfikacja CSS to tzw. CSS Level 2.

Budowa stylu



definicja stylu ma postać:

selektor

{

cecha:

wartość

}



selektor

to znacznik HTML np.

BODY

TABLE



cecha

to pewna własność wyglądu znacznika np.

wielkość czcionki -

font-size

, kolor czcionki -

color

, kolor tła

background

. Specyfikacja CSS określa szczegółowo

zestawy cech dla poszczególnych selektorów



wartość

- wielkość ze zbioru możliwych stanów w jakich

może znajdować się określona cecha np. dla cechy

font-

style

dostępne wartości to:

normal

italic

oblique

inherit

<P STYLE

font-size

20pt

;

font-weight

bold

;

background

yellow

;

color

red

"> Tekst akapitu

</P>

Klasy



Klasy

to nazwane wzorce stylów definiowane w nagłówku

dokumentu lub w arkuszu zewnętrznym. Klasy można
definiować jako



związane z selektorem:



definicja:

P.cytat

= {

font-style

italic

}



użycie:

<p class

cytat>

Tekst akapitu

<P>



niezależne (uogólonione)



definicja:

.wazne

{

font-family

Helvetica

;

font-size

14pt

;

font-weight

bold

;

color

red

}



użycie:

Tekst akapitu

<P>

Dziedziczenie



dziedziczenie

- własność stylów polegająca na tym, że

elementy leżące niżej w hierarchii drzewa dokumentu
dziedziczą formatowanie (wartości cech) ustalone dla
elementów leżących wyżej, chyba że wyraźnie nadano im
inne formatowanie (inaczej - zawieranie się wewnątrz innej
pary znaczników posiadających zdefiniowany styl)

<OL STYLE

font-weight

bold

;

color

red

<LI>

Punkt pierwszy

</LI>

<LI STYLE

color

green

Punkt drugi

</LI>

<LI>

Punkt trzeci

</LI>

</OL>

Drzewo hierarchii dokumentu

T I T L E

H E A D

H 1

L I

O L

B O D Y

H T M L

Kaskadowość



kaskadowość

- zasada ustalająca hierarchię źródeł definicji stylów.

Style mogą być definiowane w kilku miejscach, pierwszeństwo mają
style znajdujące się „bliżej” elementu.



definicja stylu umieszczona w środku tekstu (in-line style)

dotycząca wybranego znacznika dokumentu.



definicja stylu umieszczona w środku tekstu obejmująca

większy fragment dokumentu, związane ze znacznikami
ogólniejszym w hierarchii.



definicja stylu umieszczona na początku strony dotycząca

całego dokumentu



definicja stylu umieszczona w pliku zewnętrznym, w

dokumencie wstawiony jest jedynie odwołanie do tego pliku (tzw.
style zewnętrzne).



definicja stylu umieszczona importowana jest z innej strony za

pomocą polecenia @import

Style wewnętrzne



styl lokalny

- umieszczony bezpośrednio za znacznikiem:

<P STYLE

font-size

20pt

;

font-weight

bold

;

background

yellow

;

color

navy

Tekst akapitu

</P>



styl blokowy

- umieszczony wewnątrz znacznika bloku

<SPAN>

</SPAN>

lub

<SPAN STYLE

font-size

20pt

;

font-weight

bold

;

background

yellow

;

color

navy

”

</SPAN>

Wydzielane bloki (<DIV></DIV>) są podobne w działaniu do SPAN

(działającego obrębie jednego akapitu), ale obejmują szersze fragmenty
dokumentu. Mogą zawierać w sobie tytuły, akapity, wykazy, a nawet
inne bloki. Dzięki temu nadają się do wydzielania większych, logicznych
fragmentów dokumentów i nadawania im specyficznego formatowania
za pomocą stylów.

Style zagnieżdżone

Definicja stylu zagnieżdżona w nagłówku pozwala na

zdefiniowanie arkusza stylów obowiązującego w całym
dokumencie oraz na deklarowanie klas

<HEAD>

<STYLE TYPE="text/css">
<!--
BODY {margin-left: 1cm; margin-right: 1cm}
P {font-size: 10pt; font-family: Arial, Helvetica; font-weight: normal}
P.tytul {font-size: 14pt; font-family: Tahoma, Arial; font-weight: bold}
P.srodtytuł {font-size: 12pt; font-family: Arial, Helvetica; font-weight: normal}

.tresc {font-size: 10pt; font-family: Arial; font-weight: bold}
.cytat {font-family: CourierNew,Arial; font-weight:normal; font-style:italic}
-->
</STYLE>

</HEAD>

Style zewnętrzne

Style zewnętrzne definiowane są w odrębnym pliku (domyślnie z

rozszerzeniem .css). Jego przykładowa zwartość to:

Wywołanie takiego arkusza stylów wygląda następująco:

Style importowane

Import arkusza stylu polega na wskazaniu adresu zawierającego go
pliku (może to być zarówno adres względny i bezwzględny)

Wewnątrz znacznika <STYLE> możliwe jest łączenie różnych definicji
np.

@import url("http://www.polbox.com.pl/lupus/style/toolstyl.css");
H1 {font-size: 30pt; font-family: Helvetica}
BODY {text-align: justify; margin-left: 1cm; margin-right: 1cm; margin-top: 1cm}

Formularze

Formularze to zbiór komponentów dzięki którym możliwa jest

komunikacja z użytkownikiem strony. Pozwalają one na
wprowadzanie i wysyłanie danych.

Użycie formularzy nie jest jednak rzeczą prosta, gdyż często

wymaga znajomości zasad wymiany informacji z serwerem.

W prostszą wersji formularze pozwalają na zdefiniowanie i wysłanie

poczty elektronicznej poprzez zdefiniowanie jako akcji:

ACTION="mailto:jannowak@serwer.pl?subject=Ankieta"

Każdy formularz ujęty jest pomiędzy parę znaczników:

<FORM>

komponenty

</FORM>



ACTION

- definicja akcji która ma być wykonana przez formularz



METHOD

=post/get - typ akcji



ENCTYPE

- format przesyłania danych np. "text/html", "text/plain”



ACCEPT-CHARSET

- strona kodowa danych

Formularze - komponenty

<INPUT>

- formularz do wprowadzania danych



TYPE

="typ" - typ formularza



domyślny - pole tekstowe



checkbox

- pole wyboru



radio

- przełącznik



submit

reset

- przycisk wysyłający dane, czyszczący dane



NAME

="nazwa" - nazwa formularza



VALUE

="wartosc" - wyświetlany podpis formularza



MAXLENGTH

=n - ograniczenie długości wpisywanej informacji do n

znaków

<BUTTON>

Tekst

</BUTTON>

- przycisk, wszystkie elementy

zadeklarowane pomiędzy tymi znacznikami będą wyświetlane na
powierzchni przycisku. Funkcjonalność przycisku może być
rozszerzona o skrypty.

Formularze - komponenty

<TEXTAREA>

Tekst

</TEXTAREA>

- wieloliniowe pole edycyjne



NAME

="nazwa" - nazwa formularza



ROWS

COLS

=n - rozmiar okna w znakach (domyślnie 4, 40)



WRAP

="typ_zawijania" - sposób zawijania linii tekstu



- brak zawijania linii



physical

- linie zawijane



virtual

- linie zawijane w oknie lecz wysyłane bez zawijania

<SELECT> </SELECT>

- definiuje listę z kilkoma elementami do

wyboru



NAME

="nazwa" - nazwa menu



MULTIPLE

- pozwala wybrać kilka elementów jednocześnie



SIZE

- wysokość listy (podana jako liczba widocznych elementów)

<OPTION>

Pozycja - definicja pozycji menu <SELECT>



SELECTED

- element domyślnie wybrany

DHTML

Dynamic HTML

- zbiorczy termin określający język opisu strony

HTML wraz z jego rozszerzeniami umożliwiającymi tworzenie
interaktywnych i zmieniających się dynamicznie stron WWW.

Częściami składowymi DHTML są HTML, style, języki skryptowe (JavaScript,

VBScript) oraz DOM. Witryny stworzone w technologii dynamicznego HTML mogą
zawierać takie elementy jak przeciągane w obrębie strony rysunki, pozycje menu
zmieniające kolor lub kształt po naprowadzeniu nań kursora myszy, ruchome
marginesy strony, itp. Stosowanie elementów DHTML sprawia, ze internetowe
dokumenty zyskują wygląd prostych produkcji multimedialnych i funkcjonalność
programów komputerowych przy zachowaniu niewielkiej objętości pliku.
Ponieważ kod DHTML przed wykonaniem pobierany jest przez przeglądarkę w
całości, wspomniane efekty obserwować można niezależnie od tego, czy
połączenie z serwerem macierzystym witryny jest utrzymywane czy też zostało
zerwane (technologia client-side).

Aby w pełni zobaczyć możliwości DHTML wskazane jest posiadanie

przeglądarek obsługujących poszczególne jego składowe czyli NN i IE w wersjach
4.0+

Document Object Model

DOM

- programowy interfejs (API) dla dokumentów HTML -

mechanizm pozwalający na dostęp do obiektów strony WWW
realizowany głównie przy pomocy języków skryptowych.

DOM stanowi podstawę działania dynamicznego HTML wprowadzając

obiektową hierarchię elementów występujących w dokumencie HTML. Dzięki
temu każda z części dokumentu może zostać poddana modyfikacji -
zaplanowanej wcześniej lub będącej odpowiedzią na określone działanie
użytkownika. Ponieważ "aranżacja" strony WWW wykonywana jest już po
pobraniu całego kodu przez przeglądarkę (client-side), swoją dynamikę
zachowuje ona również po odłączeniu od sieci. DOM umożliwia także
zarządzanie właściwościami dokumentu (np. kolor tła i odnośników, tytuł),
uzyskiwanie informacji o systemie użytkownika oglądającego stronę (liczba
kolorów, rozdzielczość ekranu, lokalna data i godzina) oraz o przeglądarce
(producent, numer wersji).

JavaScript, VBScript



JavaScript

- skryptowy język programowania interpretowany przez

przeglądarkę, wprowadzony przez firmę Netscape w przeglądarce Netscape
Communicator.



JScript

- zmodyfikowana wersja JavaScript wbudowana w Internet Explorer



VBScript

- oparty na Visual Basic for Applications skryptowy język

programowania wbudowany i interpretowany wyłącznie przez Internet
Explorer

Języki skryptowe używane są z reguły do tworzenia krótkich programów dołączanych

do stron WWW. Oferują możliwość kontrolowania elementów dokumentu HTML
(zdefiniowanych w DOM) za pomocą poleceń, pozwalają wzbogacić je o nowe
interaktywne i animowane elementy.

Przy ich pomocy tworzone są takie popularne efekty jak przesuwany tekst na pasku

statusu, pola zawierające aktualny czas i datę, odsyłacze otwierające osobne okienko
informacyjne, itp. Funkcje języków skryptowych pozwalają pisać programy reagujące na
zdarzenia. Przykładem zdarzenia może być akcja użytkownika - np. przesunięcie kursora
w obręb elementu graficznego powoduje jego podmianę na inny obrazek. Za akcję
uznawane jest również wczytanie strony WWW lub zamknięcie okna przeglądarki.
Każdemu pojedynczemu zdarzeniu programista przypisać może dowolną procedurę.

Podstawy JavaScript

Skrypty wstawiane są do dokumentów HTML za pomocą znaczników

<SCRIPT>
<!--

treść skryptu

//-->
</SCRIPT>

Funkcje definiowane są w sekcji HEAD (oczywiście wewnątrz
znaczników SCRIPT)

function

nazwa_funkcji

(

lista_argumentów

)

JavaScript jest wrażliwy na wielkość liter !!!

Wykorzystanie DOM

Języki skryptów umożliwiają kontrolę wyglądu dokumentu poprzez

dostęp do metod i właściwości jego i obiektów w nim zawartych.

Odwołanie do obiektów DOM ma postać

obiekt

metoda

(

lista_argumentów

)

lub

obiekt

własność

Przykłady:
document.write("Hello World!")
document.bgcolor="red”
window.status=”To jest napis w wierszu statusu";

Przykłady JavaScript

Pierwszy program

<html>
<head>
Mój pierwszy skrypt JS!
</head>
<body>
<br>
To jest normalny dokument HTML.
<br>

<script language=„JavaScript">

document.write("To jest
JavaScript!")
</script>

<br>
I znowu dokument HTML.
</body>
</html>

Wykorzystanie funkcji i
zdarzenia

</head>
<body>
<form> <input type="button"
name="Button1" value="Naciśnij
mnie"

onclick="pushbutton()

</form>
</body>
</html>

Przykłady JavaScript

Otwarcie nowego okna

</head>
<body>
<form>
<input type="button" name="Button1" value="Naciśnij mnie"
onclick=”OtworzOkno()">
</form>
</body>
</html>

10 przykazań webmastera

1. Ustal PO CO ? i DLA KOGO ? tworzysz witrynę
2. Staraj się tworzyć witryny które można oglądać w różnych
przeglądarkach
3. Unikaj przeładowania grafiką - witryna będzie się szybciej ładowała
4. Ucz się od lepszych - podglądaj sposób konstrukcji profesjonalnych
witryn
5. Forma nie może wziąć góry nad treścią
6. Podawaj wymiary elementów na stronach w pikselach, a nie w
procentach
7. Używaj kodowania polskich znaków w standardzie ISO-8859-2
8. Daj szansę innym na znalezienie twojej witryny - zarejestruj ją w
systemach wyszukiwawczych, w nagłówku umieszczaj sekcję META
9. Pamiętaj o aktualizacji treści witryny
10. Szanuj prawa autorskie innych twórców

XML (Extensible Markup Language)



XML (Extensible Markup Language)

- język służący do

definiowania formatu i struktury dokumentów, podzbiór
języka SGML (Standard Generalized Markup Language)
przeznaczonego do opisywania złożonych struktur danych w
plikach tekstowych.

Język XML pozwala na wygodne definiowanie składni kolejnych

(czytaj: niższego poziomu) języków opisu dokumentów i struktur
danych. Te zaś umożliwiać mają wyświetlanie specjalizowanych
dokumentów przez odbiorniki – przez co należy rozumieć przede
wszystkim przeglądarki WWW i aplikacje biurowe. XML wprowadza
hierarchię elementów umieszczonych w dokumencie, a przez to
pozwala na zdalne przetwarzanie jego treści.



XSL (Extensible Stylesheet Language)

- język służący do

definiowania sposobu prezentacji dokumentów XML.

Dokument w HTML ...

Bolesław Leśmian - ***

</title>

</head>
<body>
<div align="center">
<H2>Bolesław Leśmian</H2>
<font size="+1">

***

</font>

<p>

Zmienionaż po rozłące? O, nie, niezmieniona!

<br>

Lecz jakiś kwiat z twych włosów zbiegł do stóp ołtarzy,

<br>

A choć brak tego zbiega nie skalał twej twarzy,

<br>

Serce me w tajemnicy przed twym sercem kona...

</p>

<p>

Dusza twoja śmie marzyć, że w gwiezdne zamiecie

<br>

Wdumana, będzie trwała raz jeszcze i jeszcze -

<br>

Lecz ciało? Któż pomyśli o nim we wszechświecie,

<br>

Prócz mnie, co tak w nie wierzę i kocham i pieszczę?

</p>

</body>
</html>

... i dokument w XML *

<?xml-stylesheet type="text/xsl" href="utwor.xsl"?>
<utwor typ="wiersz">
<autor>

Bolesław Leśmian

</autor>

<tytul>

***

</tytul>

<zwrotka><wers>

Zmienionaż po rozłące? O, nie, niezmieniona!

</wers>

<wers>

Lecz jakiś kwiat z twych włosów zbiegł do stóp ołtarzy,

</wers>

<wers>

A choć brak tego zbiega nie skalał twej twarzy,

</wers>

<wers>

Serce me w tajemnicy przed twym sercem kona...

</wers>

</zwrotka>

<zwrotka><wers>

Dusza twoja śmie marzyć, że w gwiezdne zamiecie

</wers>

<wers>

Wdumana, będzie trwała raz jeszcze i jeszcze -

</wers>

<wers>

Lecz ciało? Któż pomyśli o nim we wszechświecie,

</wers>

<wers>

Prócz mnie, co tak w nie wierzę i kocham i pieszczę?

</wers>

</zwrotka>
</utwor>

* Przykład zaczerpnięty z artykułu Andrzeja Dmocha „XML i XSL czyli treść i forma” - Webmaster 12/99

Rodzina XML



Specjalizowane dialekty XML to m.in.:



MathML (Mathematical Markup Language) – przeznaczony do

prezentowania wzorów matematycznych



XHTML – język HTML 4.0 uzupełniony o dodatkowe ograniczenia

wynikające z wymagań specyfikacji XML



SMIL (Standardized Multimedia Integration Language) – język

pozwalający w nowy sposób umieszczać na stronach WWW elementy
multimedialne



CML (Chemical Markup Language) – umożliwia graficzne

przedstawianie związków chemicznych



AML (Astronomy Markup Language) – język przeznaczony dla

zastosowań w astronomii



BSML (Biosequence ML) – język opracowany na potrzeby genetyków



XBRL (Extensible Business Reporting Language)– promowany

przez największe instytucje i firmy nowy standard wymiany danych
finansowych w Internecie

Document Outline

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Slide 11
Slide 12
Slide 13
Slide 14
Slide 15
Slide 16
Slide 17
Slide 18
Slide 19
Slide 20
Slide 21
Slide 22
Slide 23
Slide 24
Slide 25
Slide 26
Slide 27
Slide 28
Slide 29
Slide 30
Slide 31
Slide 32
Slide 33
Slide 34
Slide 35
Slide 36
Slide 37
Slide 38
Slide 39
Slide 40
Slide 41
Slide 42
Slide 43
Slide 44
Slide 45
Slide 46
Slide 47
Slide 48

Wyszukiwarka

Podobne podstrony:
HTML
AI 2 2 XML
Ramki w HTML
kurs html rozdział II
Bogucki D, html i rozne prace, Prezentacja maturalna
HTML, PJWSTK, 0sem, MUL
Basic Codes HTML
zajęcia HTML
Model ai ansoffa
04 html div
html tablice
HTML teoria
dyd tech405a, chemia, 0, httpzcho.ch.pw.edu.pldydaktyk.html, Technologia Chemiczna, Chemia Organiczn
AI test1, Studia, ZiIP, SEMESTR IV, semestr IV zaoczny, Metody szt. int
dyd tech412, chemia, 0, httpzcho.ch.pw.edu.pldydaktyk.html, Technologia Chemiczna, Chemia Organiczna
HTML & PHP Jak działają formularze , WAP Statystyki przez WAP, czyli jak połączyć PHP z językiem W
HTML i CSS id 206793 Nieznany
ABC jezyka html i xhtml
html tablice informatyczne helion F562QEMR3Y6PKJHIGA2JQ7ZSV4JT3ZIQ6266GGQ

więcej podobnych podstron

AI 2 1 HTML

Document Outline