Kurs HTML - Republika WWW

Transkrypt

Rys historyczny
HTML
Część I - Wprowadzenie
Beata Pańczyk
1
• Tim Berners-Lee (1989) - twórca koncepcji
hipertekstu, związany ze szwajcarskim CERN
(Organisation Européenne pour la Recherche
Nucléaire) - opracował pierwszą składnię języka
HTML, zaimplementował pierwszy serwer WWW
(httpd) i pierwszą przeglądarkę WWW
(WorldWideWeb - z edytorem HTML)
• pierwszy serwer WWW - uruchomiony 6 sierpnia
1991 roku pod adresem http://info.cern.ch/.
• w 1994 Tim Berners-Lee załoŜył przy MIT
(Massachusetts Institute of Technology) organizację
World Wide Web Consortium (W3C) - do dziś
zajmuje się koordynacją rozwoju technologii WWW
2
Strony WWW umieszcza sie na serwerach WWW.
Serwer WWW to specjalne oprogramowanie, uruchamiane
zazwyczaj na wydzielonym do tego celu komputerze, umozliwiajace
udostepnianie stron WWW uzytkownikom sieci Internet lub sieci
lokalnej. Internauta (klient) moze odczytac pliki stron dzieki
specjalnemu oprogramowaniu - przegladarce WWW, ktora
interpretuje kod jezyka HTML (HyperText Markup Language) prosty jezyk opisu wygladu strony. Aby serwer WWW i przegladarka
mogly nawiazac polaczenie, musza poslugiwac sie tym samym
jezykiem, ktory w terminologi transmisji danych nazwano
protokolem. Do przeslania plikow wchodzacych w sklad strony
WWW sluzy protokol HTTP (HyperText Transfer Protocol) protokol przesylania hipertekstu - realizowany na bazie protokolu
sieciowego TCP/IP
Składniki architektury WWW
• Klient HTTP (przeglądarka WWW)
• Serwer HTTP (serwer WWW)
• Protokół HTTP (Hyper Text Transfer Protocol)
• śródło: http://wazniak.mimuw.edu.pl/index.php?title=Aplikacje_WWW
3
4
Zadania klienta HTTP
(przeglądarki WWW - Web Browser)
•
•
•
•
•
Inicjowanie połączenia HTTP
Pobieranie interfejsu uŜytkownika
Prezentacja interfejsu uŜytkownika
Interakcja z uŜytkownikiem
Buforowanie odpowiedzi (zapisywanie w lokalnym
systemie plików, a następnie wykorzystanie do
obsługi identycznych, powtórzonych Ŝądań w
przyszłości - skrócenia czasu odpowiedzi)
• Kryptografia (podniesienia bezpieczeństwa
komunikacji - moŜliwe szyfrowanie połączeń
sieciowych z serwerami HTTP)
5
Zadania serwera HTTP
(serwera WWW)
•
•
•
•
•
Obsługa Ŝądań HTTP
Rejestracja Ŝądań
Uwierzytelnianie i kontrola dostępu
Kryptografia
Wybór wersji językowej wysyłanych plików
6
1
Adresy w sieci Internet
Adres jednoznacznie identyfikuje dokument, do ktorego chcemy
dotrzec w sieci. Sklada sie z:
- przedrostka okreslajacego rodzaj protokolu (np. http:// ftp://
Protokół HTTP
mailto:
•
news://
Oparty
na TCP
Adres URL
telnet:// )
- adresu
serwera tekstowe
• Komendy
- ew. sciezki dostepu i nazwy pliku, do ktorego chcemy dotrzec
• Transmisja 8-bitowa
• Bezstanowy, bezsesyjny
Adres serwera stron WWW sklada sie najczesciej z identyfikatora
uslugi (www) i nazwy domenowej (serwer.com.pl) a poszczegolne
jego czesci oddzielone sa kropkami. Identyfikator uslugi moze zostac
pominiety wowczas adres serwera bedzie taki sam jak przydzielonej
nazwy domenowej. Nazwy domen musza byc niepowtarzalne i sa
przydzielane przez specjalne organizacje w Polsce NASK (NaukowoAkademicka Siec Komputerowa)
• Wskaźnik do zasobu w sieci Internet
http://www.serwer.com.pl/jakisfolder/strona.html
http://www.pollub.pl/plany/inf.html
7
Pierwszy czlon nazwy domeny z prawej strony stanowi stanowi
nazwe domeny najwyzszego poziomu - w naszym kraju .pl
Na lewo od niego po kropce kolejna czesc nazwy .com i nastepna
serwer . W USA domeny najwyzszego poziomu nie zawieraja
identyfikatora
krajuURN
i odpowiadaja typowi organizacji: .com
URI, URL,
(organizacje komercyjne), .edu (organizacje edukacyjne) .gov
• URI, czyli Uniform Resource Identifier
(organizacje rzadowe) itp. W pozostalych krajach domeny najwyzszego
URL, czyli
Uniform
Resource
rzedu •identyfikuja
kraj
a domeny
drugiegoLocator
poziomu rodzaj organizacji i
URN, bedzie
czyli Uniform
tak np.• .gov.de
oznaczac Resource
niemiecka Name
organizacje rzadowa,
a .edu.jp
- japonska organizacje edukacyjna.
Spojrzenie
Jezeli w okienku adresowym przegladarki wpiszemy tylko nazwe
• Klasyczne (URI = [URL lub URN])
serwera np. http://serwer.com.pl to zostanie zaladowany plik
• Obecne (URI = URL)
zawierajacy kod strony glownej serwisu, zazwyczaj jest to index.html.
Jezeli interesuje nas jakis konkretny plik to po nazwie serwera nalezy
podac sciezke dostepu i nazwe tego pliku np.:
9
http://www.serwer.com.pl/strona.html
W wiekszosci przegladarki traktuja protokol http jako domyslny i czlon
http:// w adresie mozna pominac, wpisujac tylko nazwe serwera.
Adres URI
Organizacja stron WWW
Zwykle nie budujemy tylko jednej strony www lecz cala
Protokół
HTTP
- powiazanych
przykładze soba.
witryne. Witryna
stanowi zestaw
stron
Jedna z nich jest strona glowna, a takze punktem wyjscia do
Przykład schematu http
pozostalych stron zwanych podstronami. Pliki zawierajace kod
http://my.host.pl:8080/index.php?z1=w1&z2=w2
HTML maja rozszerzenia .htm lub .html. Glowny plik witryny
• http:
– schemat,
rodzaj protokołu
powinien
nazywac
sie index.htm
lub index.html. Pilki z
• //my.host.pl
– autoryzacja,
hosta
tkestem
HTML, dzwiekowe,
graficzne,nazwa
filmowe
itp. powinny
• 8080 sie
– nrwportu
znajdowac
odrebnych folderach.
• /index.php
– ścieŜka
do zasobu
Proces
budowania witryny
nalezy
rozpoczac od dokladnego
przemyslenia
jej struktury,
a nastepnie opracowania projektu,
• z1=w1&z2=w2
– zapytanie
ktory powinien obejmowac: projekt graficzny, rozmieszczenie
elementow na poszczegolnych stronach, powiazania miedzy
strona glowna a podstronami i pozostalymi elementami. 11
8
W rzeczywistosci komputery komunikuja sie w sieci wykorzystujac
nie nazwy a adresy IP (Internet Protocol). Adres IP jest unikatowy i
sklada sie z czterech liczb z przedzialu od 0-255, oddzielonych
kropkami np. 216.109.125.67 - adres IP serwera www.yahoo.com.
Rzadko
korzystamy
Składnia
URIz adresow IP, gdyz latwiej zapamietac nazwe niz
adres IP.
• <scheme>://<authority><path>?<query>
Powiazanie nazw serwerow z adresami IP jest realizowane przez
Przykłady
typowych
schematów
Name Service)
- serwer uslug rozwiazywania
serwer
DNS (Domain
• http://localhost:80/index.php?z1=w1&z2=w2
nazw
domenowych. Serwer DNS potrafi zalezc adres IP, majac
podana
nazwe serwera (wyszukiwanie proste) lub znalezc nazwe
• ftp://user:[email protected]:21/dokument.txt
serwera
na podstawie adresu IP (wyszukiwanie odwrotne). Kiedy
• mailto:[email protected]
wpisujemy
nazwe serwera www.serwer.com.pl pierwsza czynnoscia
• news://pl.comp.os.linux/
jaka wykona przegladarka, jest wyslanie zapytania do serwera DNS,
• telnet://156.17.4.4/
ktory czesto znajduje sie w tej samej sieci co nasz komputer. W
odpowiedzi serwer DNS przesyla adres IP serwera WWW, z ktorym
chcielismy sie polaczyc i od tej chwili rozpoczyna sie transmisja10
danych. Do najczesciej uzywanych przegladarek naleza: Internet
Explorer, Netscape Navigator, Mozilla oraz Opera.
Protokół HTTP
Dokumenty
statyczne i dynamiczne
• Dokument statyczny - gotowy do pobrania plik
w systemie plików serwera HTTP
• Dokument dynamiczny - dokument generowany
na Ŝądanie przez program po stronie serwera
HTTP
• Aplikacje WWW
12
2
Język HTML
HTML – zalety i wady
• najwaŜniejszy język definicji dokumentów dla
klientów HTTP - umoŜliwia zapis treści dokumentu
i równocześnie opis jego układu
• opracowany przez Tima Bernersa-Lee w 1990,
częściowo w oparciu o język SGMLguid (lokalna
odmiana języka SGML stosowana w CERN
• prawdopodobnie najstarszy dokument HTML dostępny
w Internecie - utworzony 13 listopada 1990 roku:
http://www.w3.org/History/19921103hypertext/hypertext/WWW/Link.html
(http://infomesh.net/html/history/early/).
• Zalety
– prostota składni
– dostępność przeglądarek
• Wady
– brak szablonów/wzorców
– brak separacji formy i treści
– ubogi graficznie
13
Główne etapy rozwoju HTML
• SGML (1986) - fundamentalny pomysł na komputeryzację tekstu w
epoce, w której mógł znaleźć zastosowanie w lokalnych systemach,
obsługiwanych przez grono profesjonalistów (dokumentacja
techniczna, bazy prawne, encyklopedie, itp).
• wersje HTML 2.0, 3.2, 4.0 i 4.01 (1995-1999), oparte formalnie na
SGML, realizowały pomysł na nowe medium publikacji - odniosło
wielki sukces, lecz w praktyce nastąpiło zepsucie koncepcji
dokumentów elektronicznych i brak perspektyw rozwoju.
• XML (1998) - przemyślana adaptacja SGML do warunków
sieciowego medium, z naciskiem na automatyzację tworzenia
dokumentów, z myślą o złoŜonych transformacjach treści czy wręcz
transakcjach zawieranych przez maszyny w Sieci.
14
Główne etapy rozwoju XHTML
• XHTML 1.0 (2000) - XML-owa wersja HTML 4.01,
zachowuje ciągłość znaczeń i interpretacji języka przez
przeglądarki, ale spełnia juŜ wymogi przetwarzania
dokumentów dobrze uformowanych.
• XHTML 1.1 (2001), standard, który kontynuuje juŜ tylko
wersję ścisłą (strict) języka HTML, zrywając z
kompatybilnością języka wobec wcześniejszych wersji.
Jego istotą jest stworzenie wspólnych ram dla
modularnych języków rodziny XHTML.
• XHTML 2.0 jest w trakcie procesu standaryzacji - ma być
pełną realizacją koncepcji modularyzacji, obejmującą cały
wachlarz od nowa zdefiniowanych funkcjonalności
dokumentów XHTML
15
Ewolucja standardu języka
HTML
16
HTML – język tworzenia stron
WWW
śródło: http://www.wszpwn.com.pl/i10/html/html04.htm
• HTML - sfera
metajęzyka
SGML
• XHTML - oparty na
metajęzyku XML
• Pomocnicze języki
arkuszy stylów
(DSSSL, CSS)
nie są oparte
na SGML/XML.
• Zielona kreska obszar norm W3C
• Dokument HTML – plik tekstowy (ASCII) z opisem przy
pomocy znaczników
• DuŜa zaleŜność wyglądu strony od przeglądarki (Mozilla
Firefox, Internet Explorer, Lynx) i narzędzi
wspomagających (odtwarzanie dźwięków, animacji,
obrazów)
• Problemy: techniczne, wersja (standard HTML),
rozszerzenia specyficzne dla określonych przeglądarek,
ustawienia przeglądarki, znaki narodowe
• Edytory HTML (np. Ked, Front Page, Pajączek, Zajączek),
edytory wbudowane do przeglądarek (np. Netscape
Navigator), edytory tekstu z moŜliwością zapisu w
formacie HTML – nie polecane (np. Microsoft Word)
17
18
3
Znaczniki HTML
Kodowanie polskich liter
• Znaczniki (tagi) - opis sposobu formatowania strony i jej
struktury (wstawienie dodatkowych elementów
generowanych lub teŜ z pliku);
• Zasada ignorowania nieznanych znaczników
• Rodzaje znaczników:
Parzyste:
<znacznik>....</znacznik>
Nieparzyste:
<znacznik>....
• Parametry (atrybuty, własności) znacznika: wpisywane
po nazwie, wartość parametru: po znaku = (ujęta w prosty
cudzysłów "..." lub pojedynczy apostrof '...' )
<znacznik par1="wart_par1" par2="wart_par2"....>
• najbardziej polecana norma ISO-8859-2 (ewentualnie
strona kodowa Windows 1250)
• zaleŜność od ustawień przeglądarki
• polecenie informujące przeglądarkę o zastosowanym
zestawie (w nagłówku dokumentu):
<meta http-equiv="content-type"
content="text/html; charset=windows-1250">
<meta http-equiv="content-type"
content="text/html; charset=iso-8859-2">
19
20
Struktura dokumentu HTML
Struktura dokumentu HTML
• Tekst ASCII zawarty pomiędzy znacznikami:
<html> ... </html>
• Nagłówek – nie wyświetlana część informacyjna o
dokumencie:
<head>...</head>
• Ciało dokumentu, część właściwa:
<body>...</body>
• Ignorowanie: wielokrotnych spacji, przejścia do
nowego wiersza (ENTER) => jawność określania
końca akapitów, wcięcia w celu wydzielenia struktury
dokumentu
21
<!doctype html public "-//w3c//dtd
html 4.01 transitional//en">
<html>
<head>
<title>tytul w naglowku
</title>
<meta … >
</head>
<body>
<p>akapit1 <br>
akapit1 akapit1 ...
</p>
<p>akapit2 akapit2
akapit2 akapit2 ...
</p>
</body>
</html>
- Prolog dokumentu (od wersji HTML 4.01)
- początek dokumentu HTML
- początek nagłówka
- napis w nagłówku strony
- informacje dla przeglądarki
- koniec nagłówka
- początek właściwej treści dokumentu
- początek akapitu1 i podział wiersza
- koniec akapitu 1
- koniec treści
- koniec dokumentu HTML
22
Znaczniki w sekcji HEAD
• Tytuł dokumentu wyświetlany w pasku tytułowym przeglądarki:
<title> … </title>
• Dodatkowe informacje dla przeglądarki, dla wyszukiwarek
(atrybut NAME stosowany jest wymiennie z atrybutem
HTTP-EQUIV)
– <meta name="keywords" content="slowa kluczowe">
– <meta name="description" content="opis strony">
– <meta name="generator" content="edytor">
– <meta name="autor" content="autor">
– <meta name="copyright" content=" … ">
– <meta http-equiv="content-type"
content="text/html; charset=iso-8859-2">
• podstawowy adres URL dla wszystkich adresów względnych
23
<base href="http://www.mojserwer.pl" >
Przykład – dokument p1.html
<html>
<body>
<p>HTML - Lekcja 1
<br>1. Podstawowe znaczniki
<br>2. Struktura dokumentu
</p>
</body>
</html>
24
4
Przykład – znacznik head
Parametry znacznika body
<html>
<head>
<meta http-equiv= " content-type"
content="text/html;charset=iso-8859-2">
<meta name="Author" content="BeataP">
<title>Przykład 1</title>
</head>
<body>
<p>HTML - Lekcja 1
</p>
</body>
</html>
• background - tło dokumentu w postaci pliku
graficznego (.gif lub .jpg)
• bgcolor - kolor tła dokumentu
• text - kolor tekstu
• link - kolor połączeń początkowych
• alink - kolor połączeń aktywnych
• vlink - kolor połączeń wykorzystanych
• Np.
<body bgcolor="blue" text="yellow" link="red">
25
26
Parametry znacznika body
Znaki specjalne
<html><head....,/head>
<body text="#000099"
bgcolor="lightyellow">
<p>HTML - Lekcja 1
</p>
</body>
</html>
Znaki nie naleŜące do standardowego zestawu
znaków alfanumerycznych (np. ), niektóre znaki
specjalne (np. &) czy teŜ twardą spację naleŜy
określać w dokumentach HTML za pomocą
kodów. Kody znaków mogą być definiowane
poprzez:
• nazwę (encję): &nazwa;
• wartość liczbową: &#nnn;
27
28
Tabela wybranych kodów znaków
Wartość
Encja
Formatowanie czcionki
Symbol
"
"
" (cudzysłów prosty)
&
&
&
 
 
twarda spacja
§
§
§ (znak paragrafu)
©
©
 (symbol copyright)
®
®
 (zastrzeŜony znak
towarowy)
²³¹ ² ³ ¹
2 3 1 (2, 3, 1 w
indeksie górnym)
¼½¾ ¼½¾
¼ ½ ¾
ułamki
29
•
•
•
•
•
•
•
•
•
•
<i> tekst </i>
<b> tekst </b>
<u> tekst </u>
<tt> tekst </tt>
<em> tekst </em>
<strong> tekst </strong>
<blink> tekst </blink>
<sup> ... </sup>
<sub> ... </sub>
<font ...>... </font>
•
•
•
•
•
•
•
•
•
•
pochylenie
pogrubienie
podkreślenie
„maszyna do pisania”
wyróŜnienie zwykle kursywą
wyróŜnienie zwykle pogrubieniem
migotanie
indeks górny
indeks dolny
parametry czcionki: color, size,
face np.
<font size=+1 face="arial" 30
color="red"> tekst </font>
5
Formatowanie tekstu, akapity,
nagłówki, komentarze
Przykład – formatowanie tekstu
<html>
<head>... </head>
<body text="#000099"
<h3 align= "center" >
HTML - Lekcja 1 </h3>
<p align= "left" >
1. Podstawowe <b>znaczniki</b>
<br> 2. Struktura <i>dokumentu</i>
</p>
</body>
</html>
• Wyrówanie tekstu – parametr align o
wartościach: left (domyślnie), center, right
np. <p align= "center" > tekst akapitu </p>
• <br> - łamanie wiersza
• <hr> - pozioma linia
• <h1>,<h2>,... - nagłówki (7 poziomów)
• Komentarz:

31
32
Przykład - listy
Lista numerowana <ol>, wypunktowana
<ul> i lista definicji <dl>
• <ol>
<li>element numerowany 1 </li>
<li>element numerowany 2 </li>
</ol>
• <ul>
<li>element punktowany 1 </li>
<li>element punktowany 2 </li>
</ul>
• <dl>
<dt> termin 1 </dt>
<dd>objaśnienie terminu 1</dd>
<dt> termin 2 </dt>
<dd>objaśnienie terminu 2</dd>
</dl>
<ul> <li>Podstawowe znaczniki</li>
<li>Struktura dokumentu</li>
</ul>
<ol> <li>Podstawowe znaczniki</li>
</ol>
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language
– język do tworzenia hipertekstu
</dd>
<dt>HTTP</dt>
<dd>Hyper Text Transfer Protocol
– protokół wykorzystywany w WWW
</dd>
</dl>
33
Listy zagnieŜdŜone
<ul> 
<li>Podstawowe znaczniki
<ol> 
<li>P</li>
<li>HR</li>
<li>BR</li>
</ol>
</li>
<li>Struktura dokumentu
<ul> 
<li>HTML</li>
<li>HEAD</li>
<li>BODY</li>
</ul>
</li>
</ul>
34
Dodawanie grafiki
<img
src="plik luburl"
align="połoŜenie"
alt="tekst"
ismap
border
height width
35
>
• nazwa URLa lub pliku graficznego w
formacie .gif lub .jpg
• określa połoŜenie obrazka na stronie
WWW: top, middle lub centre,
bottom, right, left
• pokazuje tekst w miejscu elementów
graficznych uŜytkownikom, którzy
nie mogą oglądać grafiki;
• obrazek w formacie mapy
• Linia wokół obrazu (=0 brak)
• Wysokość i szerokość
36
6
Przykład – wstawianie obrazka
Przykład – parametry obrazka
<html>
<body>
<h2>HTML - Lekcja 1</h2>
<ol>
<li>Podstawowe znaczniki</li>
</ol>
<img src="duke.gif"
alt="Tu jest obrazek">
</body>
</html>
37
<html><body>
<ol>
<li>Podstawowe znaczniki</li>
</ol>
<p align= "center" >
<img src="duke.gif"
border= "2"
alt="Tu jest obrazek"
height= "100"
width= "90" >
</p>
</body></html>
Przykład – wstawianie linków
Odwołania hipertekstowe (linki)
<a href="plik lub url">
tekst odnośnika </a>
np.
<a href="rys.htm">
zobacz rys.1 </a>
<a href= "http://www.google.pl" >
wyszukaj </a>
• kotwica (anchor)
<a name="r1"> rozdział 1 </a>
<a href="#r1">
przeczytaj roz. 1 </a>
• odwołanie do miejsca
(zaznaczonego wcześniej)
wewnątrz aktualnego
dokumentu
• odwołanie hipertekstowe
do pliku na serwerze
lokalnym lub URL
(łącznie z protokołem
http) do serwera odległego
39
38
<html><body>
<ol>
<li><a href=
"http://webmaster.helion.pl/kurshtml">
Podstawowe znaczniki</a></li>
<li><a href="w1.html">
Struktura dokumentu</a></li>
</ol>
<a href="http://java.sun.com">
<img SRC="duke.gif"
border= "0" ALT="Tu jest obrazek"
</a>
</body></html>
40
Definiowanie tabeli
•
•
•
•
•
•
HTML
Część II - Tabele
41
<table> ... </table>
znacznik tabeli
<caption>...</caption> nagłówek tabeli
<tr> ... </tr> wiersz
<td> ... </td> pojedyncza komórka
<th> ... </th> komórka w postaci nagłówka
Przykładowa tabela 2 x 2:
<table>
<tr>
<td> ... </td> <td> ... </td> </tr>
<tr>
<td> ... </td> <td> ... </td> </tr>
</table>
42
7
Parametry znacznika <table>
Przykład – prosta tabela
<html><body>
<h3>Tworzenie tabel</h3>
<table>
<tr><td>Ania</td>
<td>Ola</td>
<td>Ela</td>
</tr>
<tr>
<td>Adam</td>
<td>Piotr</td>
<td>Stanisław</td>
</tr>
</table>
</body></html>
43
• border - szerokość krawędzi np.
border= "0" – ukrywa krawędzie,
border= "3"
• cellspacing - szerokość odstępów między
komórkami
• cellpadding - szerokość odstępu pomiędzy
wewnętrzną krawędzią komórek a umieszczonych
w nich tekstem
• width - szerokość tabeli (w % lub punktach) np.
width="100% "
width= "50"
• height - wysokość tabeli (wartości jak wyŜej)
44
Przykład – parametry table
Parametry <td> i <tr>
• width - szerokość komórki (w % lub punktach)
np. <td width= " 30% " >
• height - wysokość wiersza (wartości jak wyŜej)
np. <tr height= " 100 " >
• align - wyrównanie tekstu w komórce w poziomie (wartości:
left, center, right)
np. <td align="right">
• valign - wyrównanie tekstu w komórce w pionie (wartości: top,
middle, bottom)
np. <tr valign="top">
• colspan - połączenie komórek (kolumn) np.
<td colspan= " 3 " >
• rowspan - połączenie komórek (wierszy) np.
<td rowspan= " 2 " >
45
Przykład – wysokość, szerokość tabeli
<table border="10" width="100%" height="60%">
<html><body>
<h3>Tworzenie tabel</h3>
<table border="1">
<caption> Imiona</caption>
<tr><td>Ania</td>
<td>Ola</td>
<td>Ela</td>
</tr>
<tr> <td>Adam</td>
<td>Piotr</td>
<td>Stanisław</td>
</tr>
</table>
</body></html>
46
Przykład – cellpadding i cellspacing
<table border="10" width="150" height="75"
cellspacing="6" cellpadding="10">
47
48
8
Przykład – wyrównanie tekstu w wierszach
i komórkach
<table border="5" width="250"
height="200" cellpadding="3">
<tr>
<td align="left"
valign="top">Ania</td>
<td align="center"
valign="middle">Ola</td>
<td align="right"
valign="bottom">Ela</td>
</tr>
<tr align="center" valign="top" >
<!– dalej zawartość komórek
bez zmian -->
49
Mozilla a IE
Przykład – scalanie komórek
51
<table border="5"
width="100%" height="60%">
<tr>
<td rowspan="2" >Ania</td>
<td>Ola</td>
<td>Ela</td>
</tr>
<tr>
<td colspan= "2" >Adam</td>
<td>Piotr</td>
<td>Stanisław</td>
</tr>
</table>
52
Inne znaczniki
Przykład – scalanie komórek
<table border="5" width="100%"
height="60%">
<tr>
<td rowspan="2" >Ania</td>
<td>Ola</td>
<td>Ela</td>
</tr>
<tr>
<td colspan="2" >Adam</td>
</tr>
</table>
</body></html>
Przykład – kolory tła
<table border="5" bordercolor="navy"width="250" height="200"
cellspacing="10"cellpadding="10"
<tr bgcolor="yellow" >
<td bgcolor="red" >
Ania</td>
<td>Ola</td><td>Ela</td>
</tr>
<tr> <td>Adam</td>
<td>Piotr</td>
<td>Stanisław</td>
</tr>
</table>
50
53
• Umieszczanie dźwięku na stronie:
– <a href="http://www.mojserwer.pl/plik.wav"> posłuchaj </a>
– <embed src="melodia.mid" autostart= " false " loop= " true "
width= " 145 " height= " 55 " align= " center " > </embed> osadzenie obiektu (pliku dźwiękowego), w specyfikacji HTML
zastąpiony znacznikiem <object>
• Znacznik <applet>:
– <applet code="test.class" codebase="folder" height= " 40 "
width= " 400 " > </applet>
• Uniwersalny znacznik <OBJECT> - wstawia obiekt (np. obrazek,
aplet, plik multimedialny .avi, .mov, .mpg ) na stronę WWW,
podobny do <embed>
– <object data="obrazek.gif" type="image/gif"> </object>
– <object data="test.class"> </object>
54
– <object data="film.avi" type="application/avi"> </object>
•
9
Wstawianie formularza
HTML
Część III - Formularze
55
Dokument z formularzem
<form action="plik lub url" method="metoda">
– action - określa sposób opracowywania danych
pochodzących z formularza (dokąd odesłać
dokument)
– method - określa metodę przesyłania danych
do serwera:
method="POST"- w postaci pliku,
method="GET" - po dołączeniu do URL-a
</form>
UWAGA! Wszystkie pola formularza powinny
posiadać parametr name, jednoznacznie
56
identyfikujący dane pole
Pole formularza <input type=...>
<html>
<head>
<title> Wstęp do tworzenia formularzy </title>
</head>
<body>
<form method= "post" action="mailto:[email protected]"
enctype="text/plain">

<legend>Pola tekstowe</legend> 
<label for="imie">Imie: </label> 
<input type="text" id="imie"/><br/>
<label for="nazwisko">Nazwisko: </label>
<input type="text" id="nazwisko"/><br/>
Pole bez label: <input type="text"/><br/>
</fieldset> 
<p></p>
75
<fieldset> 
<legend>Pola wyboru</legend> 
<select>
<optgroup label="Systemy operacyjne"> 

<option label="windows" value="w">System Windows</option>
<option label="unix" value="u">System Unix</option>
</optgroup> 
<optgroup label="Procesor"> 

<option label="intel" value="i">Procesor Intel</option>
<option label="amd" value="a">Procesor Amd</option>
</optgroup> 
</select>
</fieldset>
<p> <input type="submit" value=" wyślij dane "/> </p>
</form>
76
Przykład
Wynik
77
13

Kurs HTML - Republika WWW

Transkrypt

Podobne dokumenty

JS - obsługa formularzy

Ćw.1. Przykładowa walidacja formularza PoniŜsza strona wyświetla

Kurs css - formularze - zmiana wyglądu css input

1 mySql i php – łączenie materiały dydaktyczne dla uczniów

Formularze w PHP dla początkujących Zaawansowane

Liczby Pierwsze

Formularze w PHP – testy, dyktanda i inne pomoce