Architektura WWW. HTML Część I - Podstawy. HTML język tworzenia stron WWW. Znaczniki HTML. Struktura dokumentu HTML. Kodowanie polskich liter

Transkrypt

1 HTML Część I - Podstawy Beata Pańczyk 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 1 2 HTML język tworzenia stron WWW 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) 3 Znaczniki HTML 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"...> 4 Kodowanie polskich liter najbardziej polecana norma ISO (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 "> Struktura dokumentu HTML Tekst ASCII zawarty pomiędzy znacznikami:... Nagłówek nie wyświetlana część informacyjna o dokumencie: <head>...</head> Ciało dokumentu, część właściwa: <body>... Ignorowanie: wielokrotnych spacji, przejścia do nowego wiersza (ENTER) => jawność określania końca akapitów, wcięcia w celu wydzielenia struktury dokumentu 5 6 1

2 Struktura dokumentu HTML <head> <title>tytul w naglowku </title> <meta > </head> <body> <p>akapit1 <br> akapit1 akapit1... <p>akapit2 akapit2 akapit2 akapit 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 7 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 "> podstawowy adres URL dla wszystkich adresów względnych <base href=" > 8 Przykład dokument p1.html <body> <p>html - Lekcja 1 <br>1. Podstawowe znaczniki <br>2. Struktura dokumentu 9 Przykład znacznik head <head> <meta http-equiv= content-type" content="text/html;charset=iso "> <meta name="author" content="beatap"> <title>przykład 1</title> </head> <body> <p>html - Lekcja 1 <br>1. Podstawowe znaczniki <br>2. Struktura dokumentu 10 Parametry znacznika body 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 Parametry znacznika body <head...,/head> <body text="#000099" bgcolor="lightyellow"> <p>html - Lekcja 1 <br>1. Podstawowe znaczniki <br>2. Struktura dokumentu 12 2

3 Znaki specjalne 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; 13 " & Tabela wybranych kodów znaków Wartość ²³¹ ¼½¾ " & Encja ² ³ ¹ ¼½¾ & Symbol " (cudzysłów prosty) twarda spacja (znak paragrafu) (symbol copyright) (zastrzeŝony znak towarowy) (2, 3, 1 w indeksie górnym) ¼ ½ ¾ ułamki 14 Formatowanie czcionki Formatowanie tekstu, akapity, nagłówki, komentarze <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" 15 color="red"> tekst </font> Wyrówanie tekstu parametr align o wartościach: left (domyślnie), center, right np. <p align=center> tekst akapitu <br> - łamanie wiersza <hr> - pozioma linia <h1>,<h2>,... - nagłówki (7 poziomów) Komentarz:  16 Przykład formatowanie tekstu <head>... </head> <body text="#000099" bgcolor="lightyellow"> <h3 align=center> HTML - Lekcja 1 </h3> <p align=left> 1. Podstawowe <b>znaczniki</b> <br> 2. Struktura <i>dokumentu</i> 17 Lista numerowana <ol>, wypunktowana <ul> i lista definicji <dl> <ol> <li>element numerowany 1 </li> <li>element numerowany 2 </li> <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

4 Przykład - listy <ul> <li>podstawowe znaczniki</li> <li>struktura dokumentu</li> </ul> <ol> <li>podstawowe znaczniki</li> <li>struktura dokumentu</li> <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> 19 Listy zagnieŝdŝone <ul>  <li>podstawowe znaczniki <ol>  <li>p</li> <li>hr</li> <li>br</li> </li> <li>struktura dokumentu <ul>  <li>html</li> <li>head</li> <li>body</li> </ul> </li> </ul> 20 <img > src="plik luburl" align="połoŝenie" alt="tekst" ismap border height width Dodawanie grafiki 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 wstawianie obrazka <body> <h2>html - Lekcja 1</h2> <ol> <li>podstawowe znaczniki</li> <li>struktura dokumentu</li> <img src="duke.gif" alt="tu jest obrazek"> 22 Przykład parametry obrazka <body> <h2>html - Lekcja 1</h2> <ol> <li>podstawowe znaczniki</li> <li>struktura dokumentu</li> <p align=center> <img src="duke.gif" border=2 alt="tu jest obrazek" height=100 width=90> 23 Odwołania hipertekstowe (linki) <a href="plik lub url"> tekst odnośnika </a> np. <a href="rys.htm"> zobacz rys.1 </a> <a href= " > wyszukaj </a> <a name="r1"> rozdział 1 </a> <a href="#r1"> przeczytaj roz. 1 </a> kotwica (anchor) odwołanie hipertekstowe do pliku na serwerze lokalnym lub URL (łącznie z protokołem http) do serwera odległego odwołanie do miejsca (zaznaczonego wcześniej) wewnątrz aktualnego dokumentu 24 4

5 Przykład wstawianie linków <body> <h2>html - Lekcja 1</h2> <ol> <li><a href= " Podstawowe znaczniki</a></li> <li><a href="w1.html"> Struktura dokumentu</a></li> <a href=" <img SRC="duke.gif" border=0 ALT="Tu jest obrazek" </a> 25 HTML Część II - Tabele 26 Definiowanie tabeli <table>... znacznik tabeli <caption>...</caption> nagłówek tabeli... wiersz <td>... </td> pojedyncza komórka <th>... </th> komórka w postaci nagłówka Przykładowa tabela 2 x 2: <table> <td>... </td> <td>... </td> <td>... </td> <td>... </td> 27 Przykład prosta tabela <body> <h3>tworzenie tabel</h3> <table> <td>ania</td> <td>ola</td> <td>ela</td> <td>adam</td> <td>piotr</td> <td>stanisław</td> 28 Parametry znacznika <table> 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 Parametry <td> i 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

6 Przykład parametry table <body> <h3>tworzenie tabel</h3> <table border> <caption> Imiona</caption> <td>ania</td> <td>ola</td> <td>ela</td> <td>adam</td> <td>piotr</td> <td>stanisław</td> 31 Przykład wysokość, szerokość tabeli <table border="10" width="100%" height="60%"> 32 Przykład cellpadding i cellspacing <table border="10" width="150" height="75" cellspacing="6" cellpadding="10"> 33 Przykład wyrównanie tekstu w wierszach i komórkach <table border="5" width="250" height="200" cellpadding="3"> <caption> Imiona</caption> <td align="left" valign="top">ania</td> <td align="center" valign="middle">ola</td> <td align="right" valign="bottom">ela</td> <tr align=center valign=top> <! dalej zawartość komórek bez zmian --> 34 Przykład kolory tła <table border="5" bordercolor="navy"width="250" height="200" cellspacing="10"cellpadding="10" bgcolor="lightyellow"> <caption> Imiona</caption> <tr bgcolor="yellow" > <td bgcolor="red" > Ania</td> <td>ola</td><td>ela</td> <td>adam</td> <td>piotr</td> <td>stanisław</td> Mozilla a IE

7 Przykład scalanie komórek <table border="5" width="100%" height="60%"> <caption> Imiona</caption> <td rowspan=2>ania</td> <td>ola</td> <td>ela</td> <td colspan=2>adam</td> <td>piotr</td> <td>stanisław</td> 37 Przykład scalanie komórek <table border="5" width="100%" height="60%"> <caption> Imiona</caption> <td rowspan=2>ania</td> <td>ola</td> <td>ela</td> <td colspan=2>adam</td> 38 Inne znaczniki Umieszczanie dźwięku na stronie: <a href=" 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> <object data="film.avi" type="application/avi"> </object> 39 HTML Część III - Formularze 40 Wstawianie formularza <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 UWAGA! Wszystkie pola formularza powinny posiadać parametr name, jednoznacznie Dokument z formularzem <head> <title> Wstęp do tworzenia formularzy </title> </head> <body> <form method=post action="mailto:xxx@xxx.xxx" enctype="text/plain"> <!-- w tym miejscu będą wstawiane pola formularza np. pola input, lista select itp. -> identyfikujący dane pole 7

8 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 <select name="... " size="n" multiple> Pole formularza <select> <option> wybór1 </option> <option> wybór2 </option> <option selected>wybór3 </option> </select> 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 44 Pole formularza <textarea> <textarea name="t1" rows="2" cols="3" > Tu moŝna podać tekst domyślny </textarea> 45 Pole input typu text i password <input type="text"> <input type="text" name="adres"> <input type="text" name="adres" value="wileńska 5"> Wileńska 5 <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) 46 Pole input typu 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 47 Przykład pole radio <body> <form>jaka jest twoja 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" checked> barszcz 48 8

9 Przykład pole checkbox 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> <input type=checkbox name="ros" value="yes" checked > rosół <br> <input type=checkbox name="bar" value="yes"> barszczyk 49 Pole input typu submit i reset 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 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 Przykład pole select <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> 52 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 Przykład pole button <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> 54 9

10 Przykład formularza 55 Przykład - kod formularza <h3>formularz do składania zamówień</h3> <form method=post action="mailto:beatap@pluton.pol.lublin.pl"> Nazwisko, imię: <input name="nazwisko" size=30><br> Ulica: <input name="ulica" size=30><br> Kod, miejscowość: <input name="miejsc" size=30><br> Adres <input name=" " 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 Przykład pola formularza w tabeli <table border=1 > <td>nazwisko, imię </td> <td><input name="nazwisko" size=30> </td> <td>ulica </td> <td><input name="ulica" size=30></td> <td>kod, miejscowosć </td> <td><input name="miejsc" size=30> </td> <td>adres </td> <td><input name=" " size=30></td> 57 Formularz z tabelą 58 10