HTML Część I - Podstawy Architektura WWW HTML – język

Transkrypt

Architektura WWW
• strona - jednostka informacji w WWW
• łączniki (ang. link) prowadzące do innych
dokumentów
• przeglądarki (ang. browser) - programy klienta
uŜywane do czytania dokumentów WWW
• hipertekst - dokumenty połączone łącznikami
• HTML (ang. Hyper Text Markup Language) język do tworzenia hipertekstu
• HTTP (ang. Hyper Text Transfer Protocol)
protokół wykorzystywany w WWW
HTML
Część I - Podstawy
Beata Pańczyk
1
HTML – język tworzenia stron
WWW
2
Znaczniki HTML
• 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. 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)
• 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"....>
3
Kodowanie polskich liter
4
Struktura dokumentu HTML
• 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">
5
• 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
6
1
Struktura dokumentu HTML
<html>
<head>
<title>tytul w naglowku
</title>
<meta … >
</head>
<body>
<p>akapit1 <br>
akapit1 akapit1 ...
</p>
<p>akapit2 akapit2
akapit2 akapit2 ...
</p>
</body>
</html>
- początek dokumentu
Znaczniki w sekcji HEAD
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
7
• 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
8
<base href="http://www.mojserwer.pl" >
Przykład – znacznik head
Przykład – dokument p1.html
<html>
<body>
<p>HTML - Lekcja 1
<br>1. Podstawowe znaczniki
<br>2. Struktura dokumentu
</p>
</body>
</html>
9
<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>
10
Parametry znacznika body
Parametry znacznika body
<html><head....,/head>
<body text="#000099"
bgcolor="lightyellow">
<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">
11
12
2
Tabela wybranych kodów znaków
Znaki specjalne
Wartość
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;
"
Encja
"
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
13
Formatowanie tekstu, akapity,
nagłówki, komentarze
Formatowanie czcionki
•
•
•
•
•
•
•
•
•
•
<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>
•
•
•
•
•
•
•
•
•
•
14
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"
15
color="red"> tekst </font>
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>
17
• 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:

16
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>
18
3
Przykład - listy
<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>
Listy zagnieŜdŜone
19
<img
align="połoŜenie"
alt="tekst"
ismap
border
height width
• 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ść
>
21
Przykład – parametry obrazka
<html><body>
<h2>HTML - Lekcja 1</h2>
<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>
20
Przykład – wstawianie obrazka
Dodawanie grafiki
src="plik luburl"
<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>
<html>
<body>
<ol>
<li>Podstawowe znaczniki</li>
</ol>
<img src="duke.gif"
alt="Tu jest obrazek">
</body>
</html>
22
Odwołania hipertekstowe (linki)
23
<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
24
4
Przykład – wstawianie linków
<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>
HTML
Część II - Tabele
25
Przykład – prosta tabela
Definiowanie tabeli
•
•
•
•
•
•
26
<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>
27
<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>
28
Parametry znacznika <table>
Parametry <td> i <tr>
• 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)
29
• 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>
30
5
Przykład – wysokość, szerokość tabeli
Przykład – parametry table
<html><body>
<h3>Tworzenie tabel</h3>
<table border>
<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>
<table border="10" width="100%" height="60%">
31
Przykład – cellpadding i cellspacing
<table border="10" width="150" height="75"
cellspacing="6" cellpadding="10">
33
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>
35
32
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 -->
34
Mozilla a IE
36
6
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>
<td>Piotr</td>
<td>Stanisław</td>
</tr>
</table>
Przykład – scalanie komórek
37
<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>
38
Inne znaczniki
• 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>
39
– <object data="film.avi" type="application/avi"> </object>
•
HTML
Część III - Formularze
40
Wstawianie formularza
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
41
identyfikujący dane pole
<html>
<head>
<title> Wstęp do tworzenia formularzy </title>
</head>
<body>
<form method=post action="mailto:[email protected]"
enctype="text/plain">
<!-- w tym miejscu będą wstawiane pola
formularza np. pola input, lista select itp. ->
</form>
</body>
</html>
42
7
Pole formularza <input type=...>
Parametr type:
• <input type="text"> pole tekstu
• <input type="password"> pole tekstowe typu hasło
• <input type="radio"> przycisk typu radio
• <input type="checkbox"> pole wyboru (check box)
• <input type="submit"> przycisk potwierdzający formularz i
wysyłający go do serwera
• <input type="reset"> przycisk do usuwania zawartości
formularza
Inne parametry pola input:
• name, value
• checked
• size, maxlength
43
Pole formularza <select>
<select
name="... "
size="n"
multiple>
<option> wybór1 </option>
<option> wybór2 </option>
<option selected>wybór3
</option>
• lista rozwijana (lub przewijana
jeśli określono parametr size)
• name - nazwa listy
• size - ilość elementów
widocznych na liście przewijanej
• multiply - moŜliwość wybrania
kilku elementów jednocześnie
• <option> - indywidualne pole
wyboru
• selected – pole zaznaczone jako
wartość domyślna
</select>
44
Pole input typu text i password
Pole formularza <textarea>
<input type="text">
<input type="text" name="adres">
<textarea
name="t1"
<input type="text" name="adres" value="Wileńska 5">
Wileńska 5
rows="2"
cols="3"
>
Tu moŜna podać
tekst domyślny
</textarea>
<input type="text" name="adres" value="Wileńska" size= "10">
Wileńska
<input type= "text" name="adres" size= "30" maxlength= "10" >
input type= "password" name="hasło"> - parametry size,
value i maxlength jak w polu text)
45
Pole input typu radio
Przykład – pole radio
• <input type=radio name="ulubiona zupa”>
• <input type=radio name="ulubiona zupa”> <br>
<input type=radio name="ulubiona zupa”> <br>
<input type=radio name="ulubiona zupa”> <br>
• <input type=radio name="ulubiona zupa" value="zur">
Ŝurek<br>
<input type=radio name=" ulubiona zupa " value="ros">
rosół<br>
<input type=radio name=" ulubiona zupa " value="bar">
barszcz<br>
Ŝurek
rosół
barszcz
46
47
<html><body>
<form>jaka jest twoja ulubiona zupa?<br>
<input type=radio
name="ulubiona zupa"
value="zur" > Ŝurek <br>
<input type=radio
value="ros"> rosół<br>
<input type=radio
value="bar" checked> barszcz
</form>
</body></html>
48
8
Przykład – pole checkbox
Pole input typu submit i reset
• KaŜde pole checkbox musi mieć róŜne nazwy name,
natomiast wartość value="yes" jest taka sama (odwrotnie jak
w przypadku radio):
<form>Jaka jest twoja ulubiona
zupa?<br>
<input type=checkbox
name="zur" value="yes"
checked > Ŝurek <br>
name="ros" value="yes"
checked > rosół <br>
name="bar" value="yes">
barszczyk
49
</form>
Pole <select>
• Standardowo:
<input type=submit>
Submit
<input type=reset>
Reset
• Zmiana tekstu pojawiającego się na przycisku:
<input type=submit value="Wyślij" >
Wyslij
<input type=reset value="Wyczyść" >
Wyczyść
50
Przykład – pole select
• lista select i opcje wyboru:
<select name="zupa" >
Ŝurek
<option> Ŝurek
<option> rosół
<option> barszczyk
<option> pomidorowa
</select>
• wartości dla kaŜdej opcji:
<select name="zupa" >
barszczyk
<option value="zur" > Ŝurek
<option value="rosol" > rosół
<option value="barszcz" selected > barszczyk
<option value="pomidor" > pomidorowa </select>
51
<html><body><form>
jaka jest twoja ulubiona zupa?<br>
<select name="zupa" size=3>
<option value="zur" > Ŝurek
<option value="rosol" > rosół
<option value="barszcz" selected>
barszczyk
<option value="pomidor">
pomidorowa
<option value="ogorek">
ogórkowa
<option value="grzyb"> grzybowa
</select>
</form></body></html>
52
Przykład
– pole button
Pole <button>
• <button>treść przycisku</button>
• nowy element HTML 4 - podobny do klasycznego
input, ale pozwala wprowadzić do przycisku znacznie
więcej elementów (np. wstawiać grafikę):
<button>Kliknij tutaj<br><img src="duke.gif">
</button>
• Atrybuty przycisku:
disabled - wyłączenie przycisku (nie działa kliknięcie)
name - unikatowa nazwa
type - typ przycisku, submit, reset
value - przypisanie przyciskowi określonej wartości
• Funkcjonalność przycisku moŜna rozbudowywać o
skrypty
53
<html><body><form>
A teraz:<br>
<button name="p1">
kliknij tutaj
</button>
<br> lub <br>
<button name="p2">
kliknij tutaj<br>
<img src="duke.gif">
</button>
<br>
</form>
</body></html>
54
9
Przykład - kod formularza
Przykład
formularza
55
Przykład – pola formularza w tabeli
<table border=1 >
<tr> <td>Nazwisko, imię </td>
<td><input name="nazwisko" size=30> </td>
</tr>
<tr> <td>Ulica </td>
<td><input name="ulica" size=30></td>
</tr>
<tr> <td>Kod, miejscowosć </td>
<td><input name="miejsc" size=30> </td>
</tr>
<tr> <td>Adres e-mail </td>
<td><input name="email" size=30></td>
</tr>
</table>
57
<h3>Formularz do składania zamówień</h3>
<form method=post action="mailto:[email protected]">
Nazwisko, imię: <input name="nazwisko" size=30><br>
Ulica: <input name="ulica" size=30><br>
Kod, miejscowość: <input name="miejsc" size=30><br>
Adres e-mail: <input name="email" size=30><br>
<h4>Proszę zaznaczyć zamawiane produkty:</h4>
<input name="tp" type="checkbox">turbo pascal
<input name="c" type="checkbox">c++
<input name="java" type="checkbox">java
<h4>Sposób zapłaty:</h4>
<input name="zapłata" type="radio" value="euro" >eurocard
<input name="zapłata" type="radio" value="euro" >visa
<input name="zapłata" type="radio" value="euro" >przelew bankowy<br>
<input type="submit" value="Wyślij zamówienie">
<input type="reset" value="Anuluj zamówienie">
56
</form>
Formularz
z tabelą
58
10

HTML Część I - Podstawy Architektura WWW HTML – język

Transkrypt

Podobne dokumenty

Instrukcja instalacji modułu płatności Transferuj.pl