HTML

Transcript HTML

2008/2009
HTML
Witamy w wirtualnym języku HTML
ostatni
następny
Wyjaśnienie:
Określenie "HTML" będzie używane w
znaczeniu ogólnego języka opisującego
strukturę dokumentów stron WWW.
Zapoznając się z tym językiem poznasz
zasady projektowania stron WWW
zgodnie z najnowszymi technologiami, a
jednocześnie działających także w
starszych przeglądarkach.
poprzedni
następny
Edytory:
Co jest potrzebne, żeby napisać stronę internetową?
Teoretycznie może to być dowolny edytor
tekstu.Dokument (X)HTML, czyli (Extensible)
Hypertext Markup Language - (Rozszerzalny)
Hipertekstowy Język Oznaczania, jest po prostu
plikiem tekstowym, gdzie wpisujemy wszystkie
polecenia, dotyczące formatowania tekstu,
wstawiania grafiki i inne. Lecz pisanie strony w
zwykłym edytorze tekstu, byłoby bardzo
uciążliwe. Dlatego powstało wiele
wyspecjalizowanych edytorów, które ułatwią
pracę.
poprzedni
następny
Początkowa strona WWW:
Cały dokument powinien być objęty parą znaczników
<html></html>. Między nimi powinna zaś się
znaleźć para znaczników <head> </head>, która
stanowi ramy dla informacji nagłówkowych.
Pozostałe informacje powinny być objęte z kolei
znacznikami <body> </body>. Wygląda to
następująco:
<html>
<head>
informacje nagłówkowe
</head>
<body>
właściwa treść (ciało) dokumentu
</body>
</html>
poprzedni
następny
cd.:
Między znacznikami <head> i </head>
powinno się znaleźć polecenie <title> </title>.
<head>
<title>Tytuł strony</title>
</head>
poprzedni
następny
Drugim bardzo ważnym elementem
jest informacja o stronie kodowej
dokumentu.
Zalecamy stosowanie strony kodowej ISO-8859-2
(czyli ISO Latin 2). Jest to międzynarodowy
standard, a "przy okazji" także Polska Norma.
Powinniśmy sporządzać dokument w tym
standardzie i zarazem opatrywać go informacją
typu META. Jest ona umieszczana w ramach
znaczników head i wygląda następująco:
<meta http-equiv="content-type" content="text/html; charset=iso8859-2">
poprzedni
następny
c.d.
Stosowanie standardu kodowania Windows-1250
nie jest zabronione, ale nie jest również
zalecane. Dokument HTML przygotowany
standardowym notatnikiem Windows zawiera
polskie znaki w formacie windows-1250. W
dokumencie takim należy umieścić element:
<HEAD>
<meta http-equiv="content-type" content="text/html;
charset=windows-1250">
</HEAD>
poprzedni
następny
Uwaga: wielkie litery w deklaracji DTD
(Document Type Definition) są konieczne!
Przed dokumentem, tj. przed otwierającym
znacznikiem <html> dodaj jeszcze zalecaną
definicję typu dokumentu, czyli tzw. prolog:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
poprzedni
następny
Oto jak przykładowo powinien wyglądać
dokument w formacie HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-88592" />
<meta name="Description" content="Tu wpisz opis zawartości strony" />
<meta name="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone
przecinkami" />
<meta name="Author" content="Tu wpisz swoje imię i nazwisko" />
<title>Tu wpisz tytuł strony</title>
</head>
<body> Tu wpisuje się treść strony </body>
</html>
poprzedni
następny
Tytuły:
W dokumentach często wprowadzamy tytuły, zwane też
nagłówkami. Służy do tego polecenie <hx> </hx>. Znak
h oznacza heading, natomiast x to stopień tytułu (mamy
ich sześć). Polecenie wprowadzające tytuł stopnia
pierwszego składa się ze znacznika otwierającego <h1> i
zamykającego </h1>.
<h1>Tytuł stopnia pierwszego</h1>
<h2>Tytuł stopnia drugiego</h2>
<h3>Tytuł stopnia trzeciego</h3>
<h4>Tytuł stopnia czwartego</h4>
<h5>Tytuł stopnia piątego</h5>
<h6>Tytuł stopnia szóstego</h6>
poprzedni
następny
Tytuły (nagłówki)
Kilka innych przykładów, z użyciem stylu lokalnego:
<h1 style="text-align: right; ">Śródtytuł wyrównany do prawego
marginesu</h1>
poprzedni
następny
cd.:
<h1 style="letter-spacing: 1mm; border: 3px double; padding:
10px; ">Obramowany śródtytuł z literami co 1mm</h1>
<h1 style="font-variant: small-caps; text-align: center; color:
darkseagreen; background-color: black; ">Śródtytuł w kolorze
darkseagreen na tle black</h1>
poprzedni
następny
Znacznik akapitu
Akapit jest podstawowym elementem zawierającym
tekst w dokumentach HTML i służy do wydzielania
fragmentów zawierających jakąś zwartą myśl.
<p> </p>
poprzedni
następny
<p style="text-align: right; ">Akapit wyrównany do prawego
marginesu </p>
<p style="width: 50%; text-indent: 5em; line-height: 200%; textalign: justify; color: blue; ">Akapit w niebieskim kolorze, w
pojemniku o szerokości 50%, wyrównany do obu marginesów, z
wcięciem pierwszego wiersza i podwójną wysokością wiersza</p>
poprzedni
następny
Znacznik końca wiersza
Znacznik końca wiersza służy do przełamywania
wiersza i przenoszenia treści do następnego wiersza
bez kończenia akapitu. Nowy wiersz jest
wprowadzany bez dodatkowej interlinii, w
przeciwieństwie do polecenia akapitu, które
wprowadza dodatkowy odstęp między dwoma
akapitami z tekstem.
<br>
poprzedni
następny
Następny akapit:
A teraz następny akapit, w którym zastosujemy...<br>
ten sam manewr.<br>
W taki sposób możemy skracać wiersze akapitu i przenosić je niżej,
co bardzo się przyda we współczesnej <br>
poezji <br>
pisanej <br>
często <br>
w słupkach <br>
poprzedni
następny
Pozioma linia
Pozioma linia to po prostu kreska ciągnąca
się przez całą szerokość okna lub
pojemnika, w którym została umieszczona.
<hr>
poprzedni
następny
Linia cd.:
2. Linii możemy nadać dowolną grubość i kolor: <hr
style="height: 5px; color: red">
3. Linia może mieć określoną długość w pikselach lub
procentach: <hr style="width: 50%; ">
4. Linia może być dosunięta do prawego marginesu: <hr
style="width: 50%; text-align: right; ">
poprzedni
następny
Blok preformatowany
Blok preformatowany jest blokiem tekstu, w
którym uwzględniane są białe znaki znajdujące się
w kodzie źródłowym, np. dodatkowe spacje,
punkty tabulacji, znaki końca akapitu itd., które są
pomijane w innych poleceniach, np. w akapicie.
<pre> </pre>
poprzedni
następny
Blok cytowany
Bloku cytowanego możemy użyć przy powoływaniu
się na jakieś źródło. Cytat jest wyświetlany z
uwzględnieniem tabulacji, zaś tekst powinien się
znajdować w jakimś elemencie blokowym, np. w
akapicie:
<blockquote> </blockquote>
poprzedni
następny
Adres
Polecenie (wyświetlane za pomocą kursywy) jest
często stosowane w odniesieniu do bloku tekstu
zawierającego imię i nazwisko, adres pocztowy,
adres poczty elektronicznej, np.:
<address> </address>
poprzedni
następny
Blok dokumentu
Polecenie div (blok, sekcja) odgrywa kluczową rolę w
grupowaniu wielu różnych elementów i pozycjonowaniu
większych fragmentów dokumentu. Na blokach
formatowanych za pomocą kaskadowych arkuszy stylów
oparte są dziś nowoczesne układy stron (ang. layouty).
<div> </div>
Polecenie pozwala wydzielić większy blok w dokumencie, np.
fragment tekstu, grafikę czy wykaz (nawet kilka różnych
elementów jednocześnie), a następnie nadać mu jakiś rodzaj
formatowania, np. środkowanie lub dosunięcie do prawego
marginesu, nadanie koloru itd.
poprzedni
następny
cd.:
<div style="text-align:right"> <ul>
<li>pierwszy punkt wykazu</li>
<li>drugi punkt wykazu</li>
<li>trzeci punkt wykazu</li></ul>
widoczny tekst,widoczny tekst, widoczny tekst,widoczny tekst, widoczny tekst,
<img src="enter.gif" width="80" height="114" alt="[ENTER]" /></div>
poprzedni
następny
Obramowanie formularza
Fieldset tworzy obramowanie dla znajdujących się w jego ramach
elementów formularza - każdy element, jak przyciski radiowe, pole
tekstowe czy rozwijana lista wyboru, może być objęty taką ramką.
<fieldset>definicja elementu formularza</fieldset>
Samo obramowanie można oczywiście uzyskać za pomocą stylów,
więc wprowadzanie nowego polecenia nie byłoby zasadne.
Rzeczywisty efekt widzimy dopiero po połączeniu go ze znacznikiem
<legend>.
<fieldset>
<legend>Ankieta</legend>
<textarea rows="3" cols="30">Wpisz opinię...</textarea>
</fieldset>
poprzedni
następny
Elementy liniowe - Zakres
Zakres definiowany jest za pomocą polecenia <span>
</span>. Jest elementem wydzielającym jakiś fragment
dokumentu, ale w przeciwieństwie do polecenia div pełni tę
rolę jako element liniowy, np. pozwala wydzielić fragment
akapitu i nadać mu za pomocą stylów specjalne formatowanie,
jak pogrubienie tekstu w kolorze niebieskim albo pochylenie
tekstu na zielonym tle.
<span> </span>
<p>W tym akapicie <span style="font-weight:bold; color:blue">ten
fragment jest pogrubiony i w niebieskim kolorze</span>, natomiast <span
style="font-style:italic; background-color:green">ten fragment jest
pochylony i na zielonym tle</span>, a tu jest koniec akapitu.</p>
poprzedni
następny
Komentarz
Polecenie pozwala wstawiać do dokumentu komentarz
autora. Treść komentarza nie będzie wyświetlana na
ekranie, ale stanowi dodatkową informację dla samego
autora lub osoby czytającej, gdy zajrzy do źródła
dokumentu.

poprzedni
następny
Czcionki
Czcionka pochylona :
Czcionka pogrubiona :
<b> </b>
Superskrypt (indeks górny) :
<i> </i>
Subskrypt (indeks dolny) :
<sup> </sup>
Czcionka o stałej szerokości znaku :
poprzedni
następny
<sub> </sub>
<tt> </tt>
Czcionki cd.:
Duża czcionka (+1 punkt) :
<big> </big>
Mała czcionka (-1 punkt) :
<small> </small>
poprzedni
następny
Znaczniki logiczne
Znaczniki logiczne odnoszą się do konkretnych zastosowań, ale
wizualny efekt ich działania jest analogiczny jak w przypadku
znaczników fizycznych. Czcionka pogrubiona, pochylona lub
monotypiczna są domyślnie przypisane do wybranego znacznika
logicznego.
Odwołanie do źródła : <cite> </cite>
Definicja :
<dfn> </dfn>
Znacznik <dfn>, czyli Defining Instance, jest poleceniem
stosowanym do wyróżniania jakiegoś fragmentu tekstu,
np. pojawiającego się po raz pierwszy w danym tekście
terminu. Przeglądarki interpretują <dfn> jako kursywę.
poprzedni
następny
cd. znaczniki logiczne:
Element usunięty :
<del> </del>
Element wstawiony :
<ins> </ins>
Czcionka mocno wyróżniona (strong) :
poprzedni
następny
<strong> </strong>
Kolory czcionki
Dowolnemu fragmentowi tekstu
można nadać kolor. W starszych
wersjach HTML stosowano
polecenie font
color="nazwa_koloru", jednak
w HTML 4 zostało ono uznane za
przestarzałe i do określania koloru
stosuje się obecnie style.
<p style="color: blue; ">Tekst w
kolorze niebieskim.</p>
poprzedni
następny
Znaki specjalne
W dokumentach WWW powinniśmy stosować standard kodowania
ISO-8859-2, gdyż taka jest przyjęta w naszym kraju norma.
Stosując standard ISO-8859-2 możemy też jednak wykorzystać
"opisowy" sposób wprowadzania znaków z innych języków, a
przede wszystkim różnych znaków specjalnych.
Przykładowe znaki specjalne:
(funt szterling)
(euro)
(znak praw autorskich)
(zastrzeżony znak towarowy)
(ułamek zwykły)
(index górny)
(znak akapitu)
(kropka)
(promil)
poprzedni
następny
&pound - £
&euro - €
&copy - ©
&reg - ®
&frac14 - ¼
&sup3 - ³
&para - ¶
&bull - •
&permil - ‰
Wielkość czcionki
<p style="font-size: large; ">Tekst o wielkości large</p>
poprzedni
następny
Krój czcionki
W starszych wersjach HTML stosowano polecenie font
face="nazwa_kroju". W HTML 4.01 zrezygnowano z
niego na rzecz stylów. Na przykład:
<p style="font-family: arial; ">Treść akapitu wyświetlona
krojem Arial</p>
poprzedni
następny
Odsyłacze
Odsyłacze (inaczej: hiperłącza, łącza hipertekstowe, odnośniki,
linki) charakterystyczne elementey dokumentów w światowej
sieci World Wide Web. Bez odsyłaczy nie istniałyby powiązania
między dokumentami na tym samym serwerze, w tym samym
mieście, kraju czy kontynencie. Dzięki odsyłaczom można
wiązać ze sobą poszczególne strony, a doskonałym przykładem
ich roli jest choćby niniejszy dokument, który został
opracowany na wielu, powiązanych ze sobą stronach. Gdyby
nie było odsyłaczy, cała treść kursu musiałaby zostać
przedstawiona na jednej stronie, która byłaby dość uciążliwa w
czytaniu.
Odsyłacz jest niczym innym, jak wskazaniem jakiegoś innego
miejsca.
poprzedni
następny
Etykieta
Można wyróżnić dwa rodzaje konstrukcji odsyłaczowych:
do etykiet i do stron.
Etykieta (zwana też zakładką lub kotwicą - ang. anchor) jest
znakiem, swoistą elektroniczną zakładką, podobną do zakładek
w książce, która zaznacza jakieś miejsce w tekście. Gdy
utworzymy etykietę, będziemy mogli się odwoływać nie tylko
do zawierającej ją strony, ale i do konkretnego miejsca na
stronie. W ten sposób czytelnik będzie mógł natychmiast
skoczyć do wskazanego punktu.
<a name="nazwa_etykiety"> </a>
poprzedni
następny
Odsyłacze do etykiet
<a href="strona.htm#nazwa_etykiety">Tekst</a>
Jeśli tworzymy odsyłacz do etykiety na tej samej stronie,
wystarczy użyć samej nazwy etykiety, czyli:
<a href="#nazwa_etykiety">Tekst, na którym należy kliknąć</a>
Uwaga: należy zwrócić uwagę na wielkość liter w
etykiecie. Gdy etykieta rozpoczyna się z wielkiej litery,
także odsyłacz powinien zawierać nazwę etykiety pisaną z
wielkiej litery.
poprzedni
następny
Odsyłacze
Odsyłaczem jest konstrukcja, która wskazuje pewne miejsce w
Internecie i pozwala skoczyć do niego za pomocą kliknięcia na
niej myszką.
<a href="miejsce_docelowe">Tekst, na którym należy kliknąć</a>
Oczywiście najczęściej stosujemy odsyłacze do stron WWW,
których charakterystycznym elementem jest ciąg http://.
Konstrukcja może więc mieć postać:
<a href="http://host.domena">tekst odsyłacza</a>
poprzedni
następny
Odsyłacze absolutne i względne
Warto wiedzieć, że rozróżniamy odsyłacze absolutne
i względne (relatywne). Pierwsze zawierają pełny adres
internetowy strony, natomiast drugie jedynie fragment ścieżki
dostępu.
Adresem absolutnym jest np. strona Portalu O2:
http://www.o2.pl
Adresem relatywnym jest np. adres jakiejś wiadomości w
Portalu O2:
/news/96251.html
poprzedni
następny
Odsyłacze cd.:
Odsyłacz do innej strony HTML (w tym samym katalogu):
<a href="nazwa_strony.html">Edytor Pajączek</a>
Odsyłacz do innej strony w katalogu podrzędnym :
<a href="katalog_podrzędny/nazwa_strony.html">Inna strona</a>
Odsyłacz do strony w innym katalogu, równorzędnym w hierarchii:
<a href="../katalog_równorzędny/nazwa_strony.html">Jeszcze inna
strona</a>
poprzedni
następny
Odsyłacze do poczty elektronicznej
i FTP
Często stosowanym odsyłaczem jest konstrukcja
pozwalająca czytelnikowi strony wysłać do jej autora (lub
jakiejkolwiek innej osoby) pocztę elektroniczną. Jej
konstrukcja wygląda następująco:
<a href="mailto:imie_nazwisko@adres">Tutaj kliknij</a>
Możemy jeszcze dodatkowo opatrzyć odsyłacz stosownym
obrazkiem. W tym miejscu zastosujemy obrazek email.png,
wstawiając definicję przed adresem.
poprzedni
następny
Odsyłacze cd.:
Gdybyśmy sobie zażyczyli, aby w momencie wysyłania poczty
przez czytelnika strony w polu tematu listu pojawiła się jakaś
domyślna treść, możemy zdefiniować odsyłacz na przykład
tak:
<a href="mailto:[email protected]?subject=Bardzo ważny list:">
W podobny sposób można predefiniować adres odbiorcy, do
którego idzie kopia listu:
<a href="mailto:[email protected][email protected]">
poprzedni
następny
Odsyłacze cd.:
Tzw. ślepa lub ukryta kopia, czyli BCC (żaden inny odbiorca
listu nie zobaczy tego adresu):
<a href="mailto:[email protected][email protected]">
Można też zdefiniować fragment ciała listu, a więc już
bezpośrednio w oknie edycji:
<a href="mailto:[email protected]?body=Panie Wimmer, ja w takiej
sprawie...">
poprzedni
następny
Odsyłacze cd.:
Można połączyć wszystkie te elementy i robi się to prosto,
stosując jako łącznik ciąg &.
<a href="mailto:[email protected][email protected]&
[email protected]&subject=Bardzo ważny list&
body=Witajcie Panowie">Wyślij pocztę</a>
poprzedni
następny
cd. odsyłacze:
Przy definiowaniu adresu poczty (a nawet szerzej, pełnego
adresu) możesz się także posłużyć znacznikiem logicznym
<address> </address>, który automatycznie nada
odpowiedni atrybut (zazwyczaj interpretowany przez
przeglądarki jako kursywa), a całość umieścić w obramowanym
bloku div.
<div style="border: 3px double olive; width:250px; ">
<address>
dane adresowe
</address>
</div>
poprzedni
następny
Mapy odsyłaczy na obrazkach
<img src="odsylacz.gif " usemap="#mapa1">
<map name ="mapa1">
<area shape="rect" coords="1, 1, 50, 50" href="1.html" alt="strona 1">
<area shape="rect" coords="51, 1, 100, 50" href="2.html" alt="strona
2">
<area shape="rect" coords="1, 51, 51, 100" href="3.html" alt="strona
3">
<area shape="rect" coords="51, 51, 100, 100" href="4.html"
alt="strona 4"></map>
poprzedni
następny
Wykazy
Wykazy, zwane też częściej listami, które służą do
sporządzania usystematyzowanych zestawień informacji,
prezentowanych w punktach - nieuporządkowanych
(punktowanych, nienumerowanych) lub uporządkowanych
(numerowanych). Wykazy należą do elementów blokowych.
poprzedni
następny
Wykaz nieuporządkowany
Wykaz nieuporządkowany - służy do sporządzenia wykazu
nienumerowanego, w którym kolejne punkty są wyróżniane
punktorami. Polecenie <ul> </ul> tworzy ramy wykazu, natomiast
polecenia <li> </li> wprowadzają konkretne punkty.
<ul>
<li>Pierwszy punkt</li>
<li>Drugi punkt</li>
<li>Trzeci punkt</li>
</ul>
poprzedni
następny
Atrybut type=disc wprowadza kółeczko, type=circle
wprowadza puste kółeczko, natomiast type=square
wprowadza kwadracik. Obecnie stosowane są style CSS,
dające znacznie większe mozliwości formatowania.
<ul style="list-style-type: circle">
<ul style="list-style-type: square">
poprzedni
następny
Zagnieżdżanie wykazów
nieuporządkowanych
Możemy zagnieżdżać kilka poziomów listy nieuporządkowanej. Każdy
kolejny, niższy poziom powinien zawierać własną definicję listy i
powinien się kończyć jej zamknięciem.
<ul>(otwarcie listy na pierwszym poziomie)
<li>Punkt 1</li>
<li>Punkt 2 (bez znacznika zamykającego)
<ul>(otwarcie listy na drugim poziomie)
<li>Podpunkt 2.1</li>
<li>Podpunkt 2.2 (bez znacznika zamykającego)
<ul>(otwarcie listy na trzecim poziomie)
<li>Podpunkt 2.2.1</li>
<li>Podpunkt 2.2.2</li>
</ul>(zamknięcie listy na trzecim poziomie)
</li> (zamknięcie podpunktu 2.2)
</ul>(zamknięcie listy na drugim poziomie)
</li> (zamknięcie Punktu 2)
<li>Punkt 3 - kontynuacja punktów pierwszego poziomu</li>
<li>Punkt 4 - kontynuacja punktów pierwszego poziomu</li>
</ul>(zamknięcie całej listy)
poprzedni
następny
Wykaz uporządkowany
Wykaz uporządkowany służy do sporządzenia wykazu numerowanego,
w którym istotna jest dla nas kolejność elementów. Ramy wykazu
tworzy polecenie <ol> </ol>, natomiast punkty są wprowadzane,
podobnie jak w wykazach nieuporządkowanych, za pomocą polecenia
<li> </li>.
<ol>
<li>Pierwszy punkt</li>
<li>Drugi punkt</li>
<li>Trzeci punkt</li>
</ol>
poprzedni
następny
cd. numerowanie:
Atrybut type, wprowadza numerowanie: Wartość type=A
wprowadza numerowanie według wielkich liter łacińskich, type=a
numerowanie według małych liter łacińskich, type=I numerowanie
według wielkich liczebników rzymskich, type=i numerowanie według
małych liczebników rzymskich, wreszcie type=1 numerowanie
według liczebników arabskich. W dzisiejszych czasach w ich miejsce
stosowane są style CSS.
<ol style="list-style-type: decimal”:>
<ol style="list-style-type: lower-roman”>
<ol style="list-style-type: upper-alpha”>
poprzedni
następny
Zagnieżdżanie wykazów
uporządkowanych
Możemy zagnieżdżać kilka poziomów listy uporządkowanej. Każdy
kolejny, niższy poziom powinien zawierać własną definicję listy i
powinien się kończyć jej zamknięciem.
<ol>(otwarcie listy na pierwszym poziomie)
<li>Punkt 1</li>
<li>Punkt 2 (bez znacznika zamykającego)
<ol>(otwarcie listy na drugim poziomie)
<li>Podpunkt 2.1</li>
<li>Podpunkt 2.2</li>
</ol>(zamknięcie listy na drugim poziomie)
</li> (zamknięcie Punktu 2)
<li>Punkt 3 (bez znacznika zamykającego)
<ol>(otwarcie listy na drugim poziomie)
<li>Podpunkt 3.1</li>
<li>Podpunkt 3.2</li>
</ol>(zamknięcie listy na drugim poziomie)
</li>(zamknięcie Punktu 3)
</ol>(zamknięcie całej listy)
poprzedni
następny
Wstawianie grafiki do dokumentu
Podstawowa konstrukcja ma następującą postać:
<img src="plik_graficzny" alt="nazwa alternatywna">
Img jest skrótem od Image (obraz), natomiast src jest skrótem
od Source (żródło). Alt jest nazwą alternatywną, a więc taką,
która poinformuje o zawartości ilustracji w urządzeniu nie
odczytującym grafiki. Efekt zastosowania konstrukcji jest
następujący:
poprzedni
następny
cd. wstawianie grafiki:
Przeglądarka automatycznie odczytuje właściwą wysokość
i szerokość ilustracji, ale zazwyczaj w edytorach HTML wielkości
te są jawnie wstawiane, np.
<img src=„fon.jpg" width="342" height="353" alt=„Fontanna">
Możemy ręcznie zmienić rozmiary :
<img src=„fon.jpg" height="150" width="200" alt=„Fontanna">
poprzedni
następny
Obramowania i odstępy
<img src=„fon.jpg" width="171" height="177" alt=„Fontanna"
style="border: 5px red solid; ">
poprzedni
następny
Style CSS - margines globalny (margin) lub
cząstkowy (margin-top, margin-bottom,
margin-left, margin-right).
<img src="fon.jpg" width="171" height="176" alt="Fontanna"
style="margin-left: 10px; margin-right: 50px; ">
Akapit 50 pikseli nad i 50 pod obrazkiem :
<img src=„fon.jpg" width="171" height="176" alt=„Fontanna"
style="margin-top: 50px; margin-bottom: 50px; ">
poprzedni
następny
Style CSS cd.:
Aby umieścić ilustrację przy prawym marginesie, należy jej nadać
styl style="float: right; ".
<img src=„fon.jpg" width="171" height="176" alt=„Fontanna"
style="float: right; ">
poprzedni
następny
Pozycjonowanie pionowe
Do dyspozycji mamy jeszcze technikę pionowego pozycjonowania
elementów względem siebie - wykorzystujemy w nim polecenie stylów
vertical-align, które zastąpiło przestarzały atrybut align (top,
middle, bottom).
<img src=„fon.jpg" width="85" height="88" alt=„Fontanna"
style="vertical-align: top; ">
poprzedni
następny
Macromedia Flash
Powszechnie stosowany kod:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/s
wflash.cab#version=6,0,0,0"
width="400" height="300" id="movie" align="">
<param name="movie" value="movie.swf">
<embed src="movie.swf" quality="high" width="400" height="300"
name="movie" align="" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer">
</object>
poprzedni
następny
Rozwiązanie McLellana (Flash):
<object type="application/x-shockwave-flash" data="film.swf"
width="200" height="150">
<param name="movie" value="film.swf">
</object>
poprzedni
następny
Rozwiązanie Elizabeth Castro:
Rozwiązanie Elizabeth Castro (WMV):
<object type="video/x-ms-wmv" data="kot.wmv"
width="320" height="260">
<param name="src" value="kot.wmv">
<param name="autostart" value="false">
<param name="controller" value="true">
</object>
Działa też analogiczne odwołanie do pliku Wav :
<object type="video-/x-ms-wmv" data="swist.wav" width="200"
height="60">
<param name="src" value="swist.wav">
<param name="autostart" value="true">
<param name="controller" value="true">
</object>
poprzedni
następny
cd.:
Działa odwołanie do pliku ASF (Advanced Streaming Format).
<object type="video-/x-ms-wmv" data="pliczek.asf" width="200"
height="60">
<param name="src" value="pliczek.asf">
<param name="autostart" value="true">
<param name="controller" value="true">
</object>
Real Media
<object type="audio/x-pn-realaudio-plugin" data="318.ra"
width="200" height="60">
<param name="src" value="318.ra">
<param name="autostart" value="true">
<param name="controller" value="true">
</object>
poprzedni
następny
Tabele
Cała zawartość tabeli musi być umieszczona
między tymi dwoma znacznikami, które stanowią
jej delimitery. W ich ramach są umieszczane
definicje rzędów, definicje komórek w rzędach,
konkretne dane w komórkach, tytuł tabeli i
nagłówki wierszy i kolumn.
<table border="1" width="50%">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
poprzedni
następny
Tabele
Szerokość
określona w
pikselach
Wyrównanie
do prawej
całej tabeli
Wstawienie
grafiki jako
tło tabeli
<table border width=„150"
style="float:right; "
style="background-image: url(pliki/1.jpg)">
<tr> <td> 1</td><td> 2</td><td> 3</td></tr>
<tr> <td> 1</td><td> 2</td><td> 3</td></tr>
<tr> <td> 1</td><td> 2</td><td> 3</td></tr>
</table>
poprzedni
następny
Ogólne ramy tabeli
Ramy tabeli tworzone są za pomocą polecenia:
<table> </table>
Cała zawartość tabeli musi być umieszczona między tymi dwoma
znacznikami, które stanowią jej delimitery. W ich ramach są
umieszczane definicje rzędów, definicje komórek w rzędach,
konkretne dane w komórkach, tytuł tabeli i nagłówki wierszy i
kolumn.
poprzedni
następny
Wiersz tabeli
Wiersze tabeli wprowadzamy za pomocą polecenia:
<tr> </tr>
Wiersz tabeli jest jej konkretyzacją, a sam tworzy z kolei ramy dla
komórek z danymi. W ramach <table> </table> można umieścić wiele
kolejnych definicji wierszy <tr> </tr>, dla przykładu:
<table>
<tr> </tr>
<tr> </tr>
<tr> </tr>
</table>
poprzedni
następny
Komórka w wierszu
Komórki tabeli wprowadzamy za pomocą polecenia:
<td> </td>
Komórka zawiera już konkretne dane. Między jej znacznikami można
umieszczać tekst i grafikę. Konkretne komórki są umieszczane między
znacznikami wybranego wiersza, na przykład:
<table>
<tr> <td> </td><td> </td><td> </td></tr>
<tr> <td> </td><td> </td><td> </td></tr>
<tr> <td> </td><td> </td><td> </td></tr>
</table>
poprzedni
następny
Obramowanie tabeli
Aby tabela zawierała naokoło obramowanie, wystarczy rozszerzyć
definicję o atrybut border. Jeśli nie podamy szerokości
obramowania, przyjmowana jest jej domyślna wartość.
<table border> </table>
Gdybyśmy podali szerokość obramowania w pikselach,
zostanie ona odpowiednio zinterpretowana przez
przeglądarkę, na przykład:
<table border="10"> </table>
poprzedni
następny
Odległości między komórkami
Aby odległości miedzy komórkami w pikselach były inne niż
domyślne, możemy użyć atrybutu cellspacing. Powoduje to
pogrubienie obramowania między nimi.
<table border cellspacing="8"> </table>
Odstępy w komórkach :
<table border cellspacing="5" cellpadding="15"> </table>
poprzedni
następny
Szerokość tabeli
Atrybut width daje nam możliwość samodzielnego zdefiniowania
szerokości tabeli. Podany atrybut jest "silniejszy" od innych atrybutów,
które wpływają na szerokość tabeli na ekranie.
<table border width="600"> </table>
Zamiast wartości absolutnej w pikselach możemy także użyć
wartości procentowej :
<table border width="50%"> </table>
poprzedni
następny
Szerokość komórki
<td style="width: 150px; ">zawartość komórki</td>
Można też podać wartość procentową, która odnosi się do
szerokości komórki w ramach tabeli, a nie całego ekranu.
<td style="width: 50%; ">zawartość komórki</td>
poprzedni
następny
Wyrównanie tabeli
W efekcie tabela zostanie przesunięta w prawo
<table style="float:right; "></table>
i oblana z lewej strony tekstem.
Tabela przesunięta w lewo :
<table style="float:left; "></table>
poprzedni
następny
Poziome wyrównanie danych
w komórkach
Atrybut align wykorzystuje się także do poziomego wyrównania
zawartości komórki (a nawet całego wiersza tr) - środkowania,
justowania do lewej i justowania do prawej, z użyciem wartości
center, left i right.
<td align="left"> </td>
<td align="center"> </td>
<td align="right"> </td>
poprzedni
następny
Wysokość tabeli
<table border style="height: 200px; width: 60%; ">
Wartość podana w procentach będzie interpretowana jedynie
wtedy, gdy tabela będzie umieszczona w pojemniku wyższego
rzędu o podanej wysokości.
<div style="height: 200px; ">
<table border style="height: 50%; width: 60%; ">
poprzedni
następny
Pionowe wyrównanie danych
w komórkach
Atrybut valign (vertical align) służy do pionowego wyrównania
zawartości komórki - do górnego brzegu, do środka i do dolnego
brzegu. Używamy wówczas odpowiednio konstrukcji:
<td valign="top"> </td>
<td valign="middle"> </td>
<td valign="bottom"> </td>
poprzedni
następny
Kolor tła tabeli
<table style="background-color: red">
<tr style="background-color: beige">
<td style="background-color: green">
poprzedni
następny
cd. tabele:
Jako tła tabeli (czy wręcz poszczególnych komórek) można także
użyć gotowego obrazka - poprzednio stosowano atrybut
background="nazwa_obrazka", ale obecnie jest to polecenie
przestarzałe i stosuje się style CSS:
<table style="background-image: url(adres_obrazka)">
poprzedni
następny
Kolor obramowania tabeli
<table border cellspacing="1" cellpadding="5„ style="border:
15px outset #D2691E; ">
poprzedni
następny
Tytuł tabeli
Tabela powinna na ogół zawierać tytuł, wyjaśniający jej treść.
Należy go umieścić zaraz za ogólnymi ramami tabeli.
<table border style="width: 300px; ">
<caption>Tytuł tabeli</caption>
Za pomocą stylów CSS możesz zdefiniować położenie tytułu,
nad lub pod tabelą:
<caption style="caption-side: top; ">Tytuł tabeli</caption>
poprzedni
następny
Nagłówek wiersza i kolumny
Zazwyczaj w tabelach są umieszczane nagłówki wierszy i kolumn,
obrazujące ich treść. Domyślnie nagłówki są pokazywane za
pomocą czcionki pogrubionej i w przypadku kolumn pozycjonowane
na środku.
Nagłówek jest definiowany za pomocą znaczników:
<th> </th>
poprzedni
następny
cd. tabele:
Analogicznie należy wprowadzać kody nagłówków wierszy. Każdy
wiersz należy rozpocząć od komórki z nagłówkiem.
<table border cellpadding="10" width="500">
<caption>Wzrost produkcji masła i margaryny w latach 1991-1995
(w mln USD)</caption>
<tr><td></td><th>1991</th> <th>1992</th> <th>1993</th>
<th>1994</th> <th>1995</th> </tr>
<tr style="text-align: center; "><th>Masło</th>
<td>1150</td><td>1240</td><td>1380</td><td>1420</td><t
d>1550</td></tr>
<tr style="text-align: center; "><th>Margaryna</th>
<td>800</td><td>900</td><td>980</td><td>1150</td><td>1
320</td></tr>
</table>
poprzedni
następny
Łączenie komórek
Komórki danych i/lub nagłówków można ze sobą łączyć. Przykład :
<tr style="text-align: center">
<th>Masło</th><td
rowspan="2">1950</td><td
rowspan="2">2120</td><td>1380</
td><td>1420</td><td>1550</td>
</tr>
Aby komórka w danym wierszu rozciągała się na x wierszy,
należy użyć w jej definicji atrybutu <td rowspan="x">. W
naszej tabeli zostały opatrzone atrybutem rowspan="2" dwie
pierwsze komórki z danymi w wierszu Masło (i oczywiście
podana łączna produkcja tłuszczów). Jednocześnie usunęto dwie
pierwsze komórki z danymi w wierszu Margaryna. Pozostałe trzy
komórki wiersza Margaryna (lata 1993-1995) dostosowały się
do odpowiednich komórek w wierszu Masło.
poprzedni
następny
Krawędzie tabeli
Atrybut frame="wartość" pozwala wyświetlać w specjalny sposób
obramowanie tabeli. Wstawiamy go bezpośrednio do definicji
tabeli.
Przykłady wartości frame podajemy w połączeniu z wartością
rules="none", czyli bez obecności wewnętrznych krawędzi.
<table border="1" frame="wartość" rules="none">
Wartość frame="void" pozwala usunąć zewnętrzne
obramowanie tabeli.
Wartość frame="above" wstawia górną krawędź
obramowania, a frame="below" - dolną.
poprzedni
następny
cd. tabele:
Wartość frame="vsides" wyświetla lewą i prawą krawędź
obramowania tabeli, a frame="hsides" - górną i dolną.
Wartość frame="lhs" wyświetla lewą krawędź obramowania,
a frame="rhs" - prawą.
Wartość frame="box" wyświetla wszystkie krawędzie
obramowania.
Seria wartości atrybutu rules="wartość" pozwala manipulować
wewnętrznymi krawędziami tabeli (przykłady z użyciem
frame="void", czyli bez obecności krawędzi zewnętrznych).
<table border="x" rules="wartość" frame="void">
poprzedni
następny
cd. tabele:
Wartość rules="none" powoduje usunięcie linii wewnętrznych.
Wartość rules=rows powoduje wyświetlenie tylko poziomych
linii wewnętrznych.
Wartość rules="cols" powoduje wyświetlenie tylko pionowych
linii wewnętrznych (Opera ma problemy).
Wartość rules="all" powoduje wyświetlenie wszystkich linii
wewnętrznych.
poprzedni
następny
Formularze
Formularze służą do otrzymywania i wysyłania informacji od gości
odwiedzających naszą strone.
Elementy formularza są tworzone w pewnych ramach są nimi:
<form> </form>
Wysyła tekst pod wskazany adres nie jako
załącznik, a jako zwykły tekst
(enctype="text/plain„).
<form enctype="text/plain"
action="mailto:autor_strony@jego_domena"method="post">
zawartość formularza
</form>
poprzedni
następny
Imię i nazwisko
<fieldset>
<form
action="mailto:[email protected]"
method="post">
<p><i><b>Wpisz swoje imię i
nazwisko:</b></i></p>
<div><input name="imie"
type="text" size="40" /></div>
</form>
</fieldset>
poprzedni
następny
Ile masz lat?
<fieldset>
<form
action="mailto:[email protected]"
method="post">
<p><i><b>Ile masz lat?</b></i></p>
<p><i><b>Mniej niż 20 <input
name="wiek" type="radio" value="020" /> 21-40 <input name="wiek"
type="radio" value="21-40" /> 41-60
<input name="wiek" type="radio"
value="41-60" /> więcej niż 60 <input
name="wiek" type="radio"
value=">60" /></b></i></p>
</form>
</fieldset>
Jakiej przeglądarki używasz?
<fieldset>
<form action="mailto:[email protected]"
method="post">
<p><b><i>Jakiej przegladarki WWW
używasz?</i></b></p>
<div><select name="Browser" size="3">
<option>Firefox</option>
<option>Microsoft Internet
Explorer</option>
<option>Opera</option>
<option>Konqueror</option>
<option>Safari</option>
</select></div>
</form>
</fieldset>
poprzedni
następny
Select - służy do
tworzenia rozwijalnych
list z opcjami, spośród
których czytelnik
wybiera interesujące
go pozycje.
Przykład:
<form action="mailto:[email protected]"
enctype="text/plain" method="post">
<div>
<textarea name="Okno tekstowe" cols="30"
rows="4">
</textarea></div>
<div>
<select name="Lista wyboru" size="3">
<option>Jabłka</option>
<option>Gruszki</option>
<option>Śliwki</option>
<option>Wiśnie</option>
<option>Maliny</option>
</select></div>
</form>
poprzedni
następny
Pole opcji
<p><input type="radio"
name="plec" value="kobieta"
checked="checked"> Kobieta</p>
<p><input type="radio"
name="plec" value="mezczyzna">
Mężczyzna</p>
poprzedni
następny
Pole wyboru
<p><input type="checkbox"
name="jezyk" value="angielski">
angielski</p>
<p><input type="checkbox"
name="jezyk" value="francuski">
francuski</p>
cd. formularze:
Jest to np. obramowane miejsce
na wpisanie tekstu.
<fieldset>
<legend>Ankieta</legend>
<textarea rows="3" cols="30">Wpisz opinię...</textarea>
</fieldset>
poprzedni
następny
Wysyłanie danych z formularza
<input type="submit"
value="Wyślij do nas informacje">
Usuwanie danych z formularza
<input type="reset" value="Usuń
wszystkie informacje">
Gdy wpiszesz coś do obszaru tekstowego i klikniesz przycisk
Wyślij informacje, zostanie uruchomiony program pocztowy
(uwaga: adres pod który wysyłane są informacje jest adresem
podanym po słowie Action).
Gdy klikniesz przycisk Usuń, zawartość obszaru tekstowego zostanie
przywrócona do pierwotnej postaci.
Przykład:
poprzedni
następny
Ramki
Opisują one technikę budowania witryny
poprzez ramki.
Najbardziej typowym przykładem
użycia ramek jest podział okna
przeglądarki na kilka części
poziomych lub pionowych.
Podstawową rolę w "ramkowym"
dokumencie pełni specjalna strona,
na której definiujemy liczbę, wielkość
i pozycję ramek oraz zachowanie się
innych dokumentów w momencie
uaktywnienia łącza hipertekstowego.
Jest ona kontenerem dla ramek.
Pozostałe strony, wchodzące w skład
całego, wielostronicowego układu,
są stronami podrzędnymi.
poprzedni
następny
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.d
td">
<html>
<head>
<title>Edytory HTML</title>
</head>
<frameset cols="25%,*%">
<frame scrolling="auto" name="lista
edytorów" src="spisedyt.htm">
<frame scrolling="yes" name="edytory"
src="edyt.htm">
<noframes>
<body>
Zawartość strony dla przeglądarek nie
obsługujących ramek
</body>
</noframes>
</frameset>
</html>
Ramki cd.:
<frameset> </frameset>
Stanowią one ramy dla całej konstrukcji i
między nimi są umieszczane bardziej
szczegółowe znaczniki, dotyczące liczby ramek,
podziału strony i wielkości ramek.
<noframes> </noframes>
Służą one do wprowadzenia elementów strony, które będą
widoczne dla posiadacza przeglądarki, która nie akceptuje
ramek. Jeśli natomiast czytelnik strony posługuje się
nowoczesną przeglądarką, wszelkie informacje między tymi
znacznikami zostaną zignorowane (rzadko stosowane).
poprzedni
następny
cd. ramki:
<frame>
Znacznik ten służy do wprowadzenia konkretnej ramki. Znacznik
jest uzupełniany dodatkowymi parametrami, mówiącymi o
zawartości (zagnieżdżone strony), o tym, czy ramka zawiera
suwaki, a także definiującymi nazwę ramki.
<frame src="nazwa_pliku.htm" ...>
Sam podział na ramki to nie wszystko. Należy im jeszcze przypisać
jakieś dokumenty, zazwyczaj w formacie HTML.
Przywoływany plik może się znajdować w tym samym katalogu lub
jakimkolwiek innym - podajemy wtedy nazwę pliku z pełną ścieżką
dostępu - może to nawet być dokument w innej witrynie.
poprzedni
następny
cd. ramki:
<frame scrolling="yes" ...>
Jeśli przywoływany plik jest spory objętościowo, zapewne nie
zmieści się w całości w ramce. Możemy w takim razie użyć atrybutu
scrolling, który wyświetli ramkę razem z suwakami (yes), bez
suwaków (no), lub automatyczne suwaki (auto).
<frame name="nazwa_ramki" ...>
Ponieważ stosując ramki używamy jednocześnie często odsyłaczy,
powinniśmy jakoś nazwać naszą ramkę - name. Nazwa będzie
służyć jako punkt orientacyjny dla odsyłaczy.
poprzedni
następny
cd. ramki:
<frame noresize ...>
Czytelnik dokumentu może regulować wielkość wyświetlonych
ramek, przesuwając brzegi za pomocą myszki. Gdy jednak użyjemy
w definicji atrybutu <frame noresize ...>
zabezpieczymy ramkę przed skalowaniem.. Domyślnie, wszystkie
ramki są skalowalne
<frame frameborder="1" ...>
Atrybut frameborder="1" lub frameborder="0" pozwala
ustalić, czy obramowanie danej ramki będzie wyświetlane, czy też
nie.
poprzedni
następny
cd. ramki:
<frameset cols="18%,82%">
Przykład, w którym lewa ramka
zajmuje 18% szerokości okna
przeglądarki, a prawa ramka - 82%.
<frameset rows="200,*,200">
Gdybyśmy dzielili stronę na trzy wiersze,
moglibyśmy, przez analogię, użyć
konstrukcji, w której np. górna ramka
ma 200 pikseli, dolna 200 pikseli, a
środkowa zajmuje pozostały obszar,
zależny od wielkości okna przeglądarki.
poprzedni
następny
cd. ramki:
Przykład w
całości:
<frameset cols="25%,75%">
<frame src="ramka1.html"
name="spis" scrolling="auto">
<frame src="ramka2.html"
name="tresc"scrolling=„no">
</frameset>
poprzedni
następny
Odsyłacze w ramkach:
Teraz powinniśmy się zastanowić, co zrobić, aby kliknięcie na
odsyłaczu w jednej ramce automatycznie ładowało odpowiednią
stronę w innej ramce.
Jest to kluczowa sprawa, jeśli chcemy wykorzystać ramki w
dokumentach.
Zauważmy, że w podanym na początku kliknięcie na odsyłaczu w
spisie treści w lewej ramce powinno załadować dokument do
prawej ramki, a nie do ramki ze spisem treści.
W tym miejscu wykorzystujemy nazwy, które nadawaliśmy
poszczególnym ramkom.
poprzedni
następny
Odsyłacze w ramkach:
<frameset cols="25%,*">
<frame scrolling="auto"
name="lista edytorów"
src="spisedyt.html">
<frame scrolling="auto"
name="edytory"
src="edyt.html">
<noframes>
</noframes>
</frameset>
Strona1:
<body bgcolor="green">
<HR>
<H1>To jest strona 1</H1>
<A HREF="ramka.html" target="_top">Wróć
</A>
Strona ta składa się z dwóch ramek.
Lewa zawiera spis treści, natomiast
do prawej są ładowane odpowiednie
strony z opisami. Lewej nadaliśmy
nazwę lista edytorów, natomiast
prawej edytory.
poprzedni
następny
Przykład:
Etykiety w ramkach:
Etykieta - inaczej zakładka lub kotwica (ang. anchor) - to pewne
zaznaczone miejsce na stronie. Jeśli zdefiniujemy taką zakładkę,
będziemy mogli się później do niej bezpośrednio przenosić.
Definiowanie etykiety:
<a name="nazwa_etykiety"></a>
Odwołanie do etykiety:
<a href="(ścieżka do strony)#nazwa_etykiety">opis odsyłacza</a>
Etykieta
zdefiniowana na
tej samej stronie
nie potrzebuje
ścieżki dostępu
poprzedni
następny
Przykład:
Odsyłacze
i etykiety w ramkach/ target:
Zwróćmy jeszcze uwagę na cztery zastrzeżone wartości w
przypadku atrybutu target.
target="_blank" - w tym przypadku przywoływany dokument
zostanie załadowany do nowego, pustego okna (uruchomi nowe
okno lub instancję przeglądarki.
target="_self" - w tym przypadku (przypadek domyślny) nowy
dokument zamieni w ramce dokument, z którego dokonujemy
skoku.
target="_parent" - w tym przypadku przywoływany dokument
zamieni dokument nadrzędny w hierarchii dla bieżącego
dokumentu.
target="_top" - w ostatnim przypadku przywoływany dokument
zostanie wstawiony na miejsce dokumentu pierwszego w hierarchii
naszych skoków, a więc na samą "górę".
Przykład ze strony poprzedniej:
poprzedni
następny
Ramki
(pływające):
Jest to technika umieszczania na stronach WWW tzw. pływających
ramek, czyli specjalnych okienek, do których wczytywane są inne
strony.
Pływająca ramka jest ramką umieszczoną w dowolnym miejscu
strony i jest prostsza w konstrukcji, gdyż ogranicza się w zasadzie
do jednego polecenia:
<iframe src="adres_dokumentu"
width="szerokość_w_pikselach"
height="wysokość_w_pikselach">
Twoja przeglądarka nie akceptuje pływających ramek!
</iframe>
poprzedni
następny
Pływające ramki:
plywajaca.html
<body>
<img src="1.jpg" >
</body>
<iframe src= "plywajaca.html"
width="450" height="250"
frameborder="1">Twoja
przeglądarka nie akceptuje
pływających ramek!</iframe>
poprzedni
następny
Ramka o wymiarach
450x250 pikseli z
obramowaniem
(w ramce wstawiona
strona o nazwie
plywajaca.html).
Przykład:
KONIEC
NA POCZĄTEK
PREZENTACJI