Drzewo dokumentu HTML

(1)

Zajęcia 17 i 24 Styczeń 2011r.

Jeśli materiał w tym opracowaniu będzie niewystarczający zerknij do strony:

http://www.kurshtml.boo.pl/

Stronę WWW to:

 treść

tekst i ilustracje do niego, czyli to, co ma być opublikowane w sieci.

 struktura (ang. markup)

podział tekstu na sekcje, akapity, listy, tabele i połączenie go z ilustracjami.

 prezentacja (ang. layout)

definiowanie wyglądu dokumentu (jego elementów strukturalnych).

 zachowanie (ang. behavior)

kontrolowanie zachowaniem poszczególnych elementów na stronie.

Drzewo dokumentu HTML

Drzewo dokumentu HTML to drzewo elementów umieszczonych w dokumencie źródłowym. Każdy element w takim drzewie ma dokładnie jednego rodzica, oprócz elementu podstawowego, czyli korzenia drzewa (root).

1<html>

2 <head>

3 <title>...</title>

4 </head>

5 <body>

6 <h1>...</h1>

7 <p>...</p>

8 <table>

9 <tr>

10 <td>...</td>

11 <td>...</td>

12 </tr>

13 <tr>

14 <td>...</td>

15 <td>...</td>

16 </tr>

17 </table>

18 </body>

19</html>

Start

1. Uuruchom edytor tekstu (np. notatnik).

2. Wpisz zawartość strony WWW jak to jest w każdym przykładzie poniżej.

Jeśli używasz notatnika:

3. wydaj polecenie Plik > Zapisz Jako,

4. wybierz jako format (typ) pliku Dokument tekstowy 5. nadaj plikowi rozszerzenie htm lub html.

6. zapisz swój projekt na dysku "WWW" pod nazwą index.htm lub index.html.

7. uruchom przeglądarkę (np. Internet Explorer) i otwórz w niej swój projekt (Plik > Otwórz).

Nie zamykaj dokumentu w edytorze - od tej pory po każdym zapisaniu dokonanych zmian, możesz

wrócić do przeglądarki i kliknąć przycisk Odśwież, aby zobaczyć efekty.

(2)

Prosty dokument

1<html>

2 <head>

3 <title> ... tytuł strony ...</title>

4 </head>

5 <body>

6 ... to co widać jako zawartość strony ...

7 </body>

8</html>

Pobierz plik: http://zsi.tech.us.edu.pl/~nowak/ti/html/0.html

Dokument HTML

1<html>

2 <head>

3 <title>Przykładowa struktura dokumentu</title>

4 </head>

5 <body>

6 <h1> Część I </h1> <-- poziom nagłówków 1 7 <h2> Chapter 1 </h2> <-- poziom nagłówków 2 8 <p> <-- Paragraf

9 ... Lorem ipsum dolor sit amet ...

10 </p>

11 <h2> Chapter 1 </h2>

12 <p>

14 </p>

15 <h1> Część II </h1>

16 <h2> Chapter 1 </h2>

17 <p>

19 </p>

20 <h2> Chapter 2 </h2>

21 <p>

23 to jest test 24 linia 2 25 linia 2 26 </p>

27 </body>

28</html>

Odnośniki

1<html>

2 <head>

3 <title>Hiperlinki</title>

4 </head>

5 <body>

6 <h1> Zawartość </h1>

7 Część I <br>

(3)

8 użyj znacznika miejsca dla chapter 1 9 <a href="#chap1_1">Chapter 1</a> <br>

10 <a href="#chap1_2">Chapter 2</a> <br>

11 Część II <br>

14 <h1> Część I </h1>

15 ustaw znacznik miejsca dla chapter 1

16 <h2> <a name="chap1_1"></a> Chapter 1 </h2>

17 <p> Lorem ipsum dolor sit amet, ... </p>

20 <h1> Część II </h1>

23

26

27 <h1>Referencje</h1>

28 <a href="http://www.lipsum.com/">Lorem Ipsum text generator</a>

29 <a href="http://www.w3schools.com/html/">W3 School HTML Tutorial</a>

30

31 </body>

32</html>

Listy

1<html>

2 <head>

3 <title>Listy</title>

4 </head>

5

6 <body>

7 <h1> Zawartość </h1>

8 Część I

9 <ol> <-- Lista uporządkowana 10 <li> <-- element Listy

11 <a href="#chap1_1">Chapter 1</a>

12 </li>

13 <li>

14 <a href="#chap1_2">Chapter 2</a>

15 </li>

16 </ol>

17 Część II 18 <ol>

19 <li> <a href="#chap2_1">Chapter 1</a> </li>

20 <li> <a href="#chap2_2">Chapter 2</a> </li>

21 </ol>

22 <a href="#ref">Referencje</a>

23 <a href="#voc">Słownik</a>

24

25 <h1><a name="ref">Referencje</h1>

26 <ul> <-- lista nieuporządkowana 27 <li> <-- element Listy

28 <a href="http://www.lipsum.com/">

29 Lorem Ipsum text generator 30 </a>

31 </li>

32 <li>

(4)

33 <a href="http://www.w3schools.com/html/">

34 W3 School HTML Tutorial 35 </a>

36 </li>

37 <li>

38 <a href="http://www.obta.uw.edu.pl/%7Edraco/docs/voccomp.html">

39 Vocabula computatralia 40 </a>

41 </li>

42 </ul>

43

44 <h1><a name="voc">Słownik</h1>

45

46 <dl> <-- Lista definicji

47 <dt>binary</dt> <-- Term definicji

48 <dd>adj. binaris,e </dd> <-- Opis definicji 49 <dt>command</dt>

50 <dd>subst. iussum,i n.; mandatum,i n. </dd>

51 <dt>computer</dt>

52 <dd>1. subst. computatrum,i n; ordinatrum,i n.</dd>

53 <dd>2. adj. computatralis,e; ordinatralis,e </dd>

54 </dl>

55 </body>

56</html>

Grafika

1<html>

2 <head>

3 <title>Obrazy</title>

4 </head>

5 <body background="imgSample01.jpg">

6 <h1>Rozmiar</h1>

7 <p>

8 <img src="imgSample03.jpg" >

9 <img src="imgSample03.jpg" width="80" >

10 <img src="imgSample03.jpg" height="80" >

11 <img src="imgSample03.jpg" width="80" height="80" >

14 </p>

15 <h1>Format</h1>

16 <p>

15 <h1>Format</h1>

16 <p>

17 JPG<img src="imgSample04.jpg" >

18 PNG<img src="imgSample04.png" >

19 GIF<img src="imgSample04.gif" >

20 BMP<img src="imgSample04.bmp" >

21 </p>

22 <h1>Położenie</h1>

23 <p>

24 <img src="imgSample02.jpg">

25 Lorem ipsum dolor sit, <br />consectetuer adipiscing elit.<br />

26 Curabitur lectus.<br />...

27 </p>

28 29 <p>

30 <img src="imgSample02.jpg" align="top" >

(5)

33 </p>

34 35 <p>

36 <img src="imgSample02.jpg" align="left" >

39 </p>

40 41 <p>

42 <img src="imgSample02.jpg" align="right">

45 </p>

46 </body>

47</html>

Tabele

1<html>

2 <head>

3 <title> Tabele </title>

4 </head>

5 <body>

6 <h1>Prosta tabela</h1>

7 <table>

8 <tr> <td>A</td> <td>B</td> </tr>

9 <tr> <td>C</td> <td>D</td> </tr>

10 <tr> <td>E</td> <td>F</td> </tr>

11 </table>

12 <h1>Tabela z obramowaniem</h1>

13 <table border="1">

14 <tr>

15 <td>... </td>

16 <td>kolumna 1</td>

17 <td>kolumna 2</td>

18 </tr>

19 <tr>

20 <td>wiersz 1</td>

21 <td>A</td>

22 <td>B</td>

23 </tr>

24 <tr>

26 <td>C</td>

27 <td>D</td>

28 </tr>

29 </table>

30 <h1>Nie taka prosta tabela</h1>

31 <table border="1">

32 <tr>

33 <td rowspan="2">... </td>

34 <td colspan="2">kolumna 1</td>

35 <td colspan="2">kolumna 2</td>

36 </tr>

37 <tr>

38 <td>podkolumna 1.1</td>

(6)

42 </tr>

43 <tr>

45 <td rowspan="2" colspan="2">6</td>

46 <td>7</td>

47 <td>8</td>

48 </tr>

49 <tr>

51 <td>10</td>

52 <td>11</td>

53 </tr>

54 <tr>

56 <td colspan="2">13</td>

57 <td rowspan="2">14</td>

58 <td rowspan="2">15</td>

59 </tr>

60 <tr>

62 <td>17</td>

63 <td>18</td>

64 </tr>

65 </table>

66 <h1>Tekst w kolumnach</h1>

67 <table>

68 <tr>

69 <td width="33%">

70 <h3>headline 1</h3>

71 Lorem ipsum dolor sit amet, ...

73 <img src="imgSample04.jpg" align="left">

75 </td>

76 <td width="33%">

77 <img src="imgSample04.jpg" align="left">

80 <img src="imgSample04.jpg" align="right">

81 Nulla felis ...

82 </td>

83 <td width="33%">

87 </td>

88 </tr>

89 </table>

90 </body>

91</html>

Formularze

1<html>

2 <head>

3 <title>Listy</title>

4 </head>

5

(7)

6 <body>

7 <h1>Ankieta</h1>

8 <form>

9 <table>

10 <tr>

11 <td> Imię:

12 <input type="text" name="imie">

13 </td>

14 <td> Nazwisko:

15 <input type="text" name="nazwisko">

16 </td>

17 </tr>

18 <tr>

19 <td>

20 <input type="radio" name="sex" value="male"> Mężczyzna <br>

21 <input type="radio" name="sex" value="female"> Kobieta <br>

22 <input type="radio" name="sex" value="unknown"> Nie wiem <br>

23 </td>

24 <td>

25 <input type="checkbox" name="hobby">Lubię informatykę<br>

26 <input type="checkbox" name="zawód">Jestem studentem Uś<br>

27 </td>

28 </tr>

29 <tr>

30 <td colspan="2">

31 <input type="submit" value="Wyślij">

32 </td>

33 </tr>

34 <table>

35 </form>

36 </body>

37</html>

Polskie znaki na stronach HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//PL">

<HTML>

<HEAD>

</HEAD>

<BODY>

ą ć ę ł ń ó ś ź ż Ą Ć Ę Ł Ń Ó Ś Ź Ż

</BODY>

</HTML>

Pobierz plik: http://zsi.tech.us.edu.pl/~nowak/ti/html/6a.html