Bel html

Мова Мова HTMLHTML: : сінтаксіс мовысінтаксіс мовы

Ганчарова С.А.

1

World Wide WebWorld Wide Web – механізм – механізм апрацоўкі запытаўапрацоўкі запытаў

2

Кліент

HTML

Браўзер

МалюнакГукавы файл….

Аддалены вузел

Кліент звяртаецца да вузла, які перадае запыт вэб-серверу. Вэб-сервер перадае тэкставы дакумент кліенту, ад якога ідзе запыт на перадачу дадатковых даных, якія ўтрымліваюцца ў дакуменце (графіка, відэа і г.д.).

HTML

Image

SQL

...

Вэб-сервер

Асноўныя азначэнніАсноўныя азначэнні

• Вэб-старонка – гіпермедыйны HTML-дакумент

• HTML (Hyper Text Markup Language) – мова разметкі

гіпертэкставых дакументаў – мова стварэння вэб-

старонак

• Браузер – праграма, патрэбная для прагляду вэб-

старонак (Internet Explorer, Chrome…)

• Вэб-сайт – группа вэб-старонак, звязаных адзінай

тэмай, схемай афармлення і гіпертэкставымі

спасылкамі

3

Мова Мова HTMLHTML

Мова, прызначаная для стварэння

фарматаванага тэксту, які насычаны малюнкамі,

гукам, анімацыяй і спасылкамі на іншыя аб'екты,

напрыклад гіпертэкставыя дакументы,

графічныя файлы і г.д., раскіданыя па ўсёй

прасторы вэб-сервераў Інтэрнет / Інтранет

4

Дрэва моўДрэва моў

5

GML1960

SGMLсяр.1980х

HTML1990

XML1996

6

Чарльз Гольдфарб – Чарльз Гольдфарб – стваральнік мовы разметкістваральнік мовы разметкі

Кампанія IBM, 1969г.

7

GML - GML - універсальная мова універсальная мова разметкіразметкі

ГГііпертэкставыя спасылкіпертэкставыя спасылкі

8

Версіі Версіі HTMLHTML

• HTML – распрацаваны ў 1991 г., стаў асновай для іншых версій мовы;

• HTML 2.0 - 1994 г .;• HTML 3.0 - уведзена падтрымка CSS,

апублікаваны ў 1995, але ў якасці стандарту рэалізаваны не быў;

• HTML 3.2 - першая публікацыя ў 1996 г.;• HTML 4.0 – 1997 г.• HTML 5.0 – 2014 г.

http://www.w3.org/TR/html59

Стандарт Стандарт HTML 4.0HTML 4.0

10

HTML 4.0 (кодавая назва праекта “Cougar – Пума”) – самая распаўсюджаная з сучасных версій HTML. Цалкам адпавядае стандарту ISO8879 (стандарт мовы SGML). Апошняя версія поўнай спецыфікацыі мовы HTML 4.0 знаходзіцца на серверы W3C па адрасе http://www.w3.org/TR/html401.

<!DOCTYPE html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

11

Табліцы стыляўТабліцы стыляўАддзяленне афармлення ад зместуАддзяленне афармлення ад зместу

12


13


14

Храналогія развіцця вэб-Храналогія развіцця вэб-

тэхналогійтэхналогій

ВэбВэб--старонка з пункту старонка з пункту

гледжання файлавай гледжання файлавай

структурыструктуры

Вэб-старонка – гэта

• HTML-дакумент (.htm) +

• Файлы мультымедыя +

• Актыўныя кампаненты

15

Структура сайтаСтруктура сайта

• Лагічная

інфармацыйная арганізацыя

• Фізічная

алгарытм размяшчэння файлаў па падкаталогам каранёвай папкі сайта

16

Імёны файлаў – Імёны файлаў – html-html-

старонак і папак сайтастаронак і папак сайта

лацінскія сімвалы, лічбы, некаторыя спецзнакі, без

прабелаўі

ніякай кірыліцы!

index.htmdom.html

Lelik-2.htm

17

Назва галоўнай (першай) Назва галоўнай (першай) старонкі сайтастаронкі сайта

index.html index.htm

18

Фізічная структура вэбФізічная структура вэб--ввузлаузла

Фізічная структура вузла – сістэма ўкладзеных каталогаў адносна каранёвага каталога (root), у кожным з якіх размяшчаецца інфармацыя па тэматычнай прыкмеце. Структура не жорсткая, можна выкарыстоўваць свой варыянт.

19

rootroot

imageimage

htmlhtml

videovideo

otherother

belbel

engeng

rusrus

Фізічная структура сайта і Фізічная структура сайта і

сувязі паміж дакументамісувязі паміж дакументаміroot

image

html

video

other

bel

eng

rus

pc.gif

index-en.html

index-by.html

index-ru.html

index.html

У каранёвым каталогу вузла (root) размяшчаецца пачатковы дакумент вузла, імя файла якога index.html. У астатніх каталогах размяшчаюцца іншыя гіпертэкставыя дакументы і выкарыстоўваныя графічныя выявы, а таксама файлы іншых тыпаў.

20

• xyz.htmlФайл HTML з назвай xyz.html знаходзіцца ў бягучым каталогу;

• abc / xyz.htmlФайл HTML з назвай xyz.html знаходзіцца ў падкаталогу abc бягучага каталога;

• http://myDomain.by/abc/xyz.htmlФайл HTML з назвай xyz.html знаходзіцца ў каталогу abc на сэрвэры MyDomain.by;

• ../abc/xyz.htmlФайл HTML з назвай xyz.html знаходзіцца ў падкаталогу abc каталога, які ляжыць на адзін узровень вышэй бягучага;

• ../../abc/xyz.htmlФайл HTML з назвай xyz.html знаходзіцца ў падкаталогу abc каталога, які ляжыць на два ўзроўні вышэй бягучага.

21

Абсалютны і адносны шляхАбсалютны і адносны шлях

Элементы вэбЭлементы вэб--старонкі.старонкі.

ЗагаловакЗагаловак

Тэкст, які адлюстроўваецца ў радку загалоўка браўзэра пры праглядзе старонкі

•Першым з'яўляецца пры загрузцы

•Служыць закладкай на старонку

•Мае большую вагу пры індэксацыі

o Запіс: <TITLE>Мая старонка</TITLE>

22

Фарматаванне:• гарнітура• спосаб напісання• колер• памер• інтэрвал• палі• колер фону• …

23


ТэкстТэкст

• фонавы колер• фонавы гук• фонавы малюнак

24


Параметры фонаПараметры фона


ГрафікаГрафіка

У HTML-дакуменце прысутнічае толькі адрас файла з графічным малюнкам

D:\мае малюнкі\ris.gif

D:\site\image\ris.gif

..\..\image\ris.gif

Не правільна Правільна

site

html

image

video

other

rus

eng

25

Фарматы графічных файлаў у Фарматы графічных файлаў у

ІнтэрнетІнтэрнет

• Растравыя:o gifo pngo jpg

• Вектарныя:o swf - флэшo svg

26

• Памер малюнка (у пікселях або % ад шырыні акна)

• Альтэрнатыўны тэкст (адлюстроўваецца ў рэжыме адключэння графікі або неграфічнымі браўзэрамі)

• Мініяцюры• Графічныя карты

27

У HTML-дакуменце прысутнічае не сам графічны аб'ект, а толькі адрас файла, які адпавядае дадзенаму графічнаму малюнку


ГрафікаГрафіка

28

Фонавая графіка

29

Выставачная графіка.

30

Лагатыпы

31

Банеры

Візуал

Прыклад візуала і банераў на сайце. http://www.tut.by/

32

Фавікон - значок вэб-сайта ці вэб-старонкі ў радку браўзера.

Элементы вэбЭлементы вэб--старонкі: старонкі:

гіперспасылкігіперспасылкі

Гіперспасылка - гэта сродак ўстаноўкі

сувязяў у вэб-прасторы

Элементы гіперспасылкі:указальнік спасылкіадрасная частка

33


гіперспасылкігіперспасылкі

Указальнік спасылкі

• вылучаны фрагмент тэксту• графічныя малюнак• кнопка• малюнак-карта

34

Указальнік спасылкі: фрагмент тэкступадкрэслены, выдзелены колерам •непрагледжаная спасылка•прагледжаная спасылка

35

Элементы вэбЭлементы вэб--старонкі: гіперспасылкістаронкі: гіперспасылкі


адрасная частка гіперспасылкіадрасная частка гіперспасылкі

• Пэўную вобласць старонкі (закладка)

• Іншую старонку таго ж сайта або дакумент іншага тыпу на дадзеным кампутары

• Старонку вонкавага сайта (URL)

• Іншы сэрвіс Інтэрнэт (адрас e-mail)

36

Указанне на:


табліцытабліцы

• Памер (у пікселях або % акна)

• Метад прадстаўлення даных• Сродак кампаноўкі старонак

37

Элементы вэб-старонкі:Элементы вэб-старонкі:

дынамічныя кампанентыдынамічныя кампаненты

• лічыльнік наведванняў• рэкламны банэр• формы• бягучы радок• анімацыйныя эфекты пры пераходзе

да іншай старонцы• паліморфных кнопка• ...

38

ФормыФормыАпрацоўка даных з формы:• Запіс у вызначаны файл• Адпраўка па электроннай пошце• Захаванне ў базе даных• Перадача іншай праграме• Вызначэнне вонкавага выгляду

генерыруемай старонкі

39

Элементы вэб-старонкі: Элементы вэб-старонкі:

фрэймыфрэймы

Фрэйм – вобласць акна браўзэра, у якой ажыццяўляецца прагляд асобнага HTML-дакумента

Установачны файл фрэймаў - асобны дакумент HTML, які задае спосаб раскладкі і фарматавання фрэймаў і альтэрнатыўнае прадстаўленне для браўзэраў, якія не падтрымліваюць фрэймы

40

КадыроўкіКадыроўкі

• Аднабайтавыя – 256 сімвалаў:o ASCII;o КОИ8 (код абмену інфармацыяй) (KOI8-R);o CP1251;o CP866;o ISO 8859-5

• Двухбайтавыя – 65636 сімвалаў:o UNICODE;

• Чатырохбайтавыя: o ISO 10646

• Іншыя:o UTF-8 – з'яўляецца камбінацыяй ISO 10646 і

UNICODE.Чырвоным колерам пазначаны кадыроўкі, якія маюць

беларускія літары і ўжываюцца часцей. 41

42

Сінтаксіс мовы – набор правіл пабудовы фраз, які дазваляе вызначыць асэнсаваныя сказы на гэтай мове

Сінтаксіс мовы Сінтаксіс мовы HTMLHTML

Тэг (дэскрыптар) – інструкцыя мовы HTML. Тэг бывае адкрывалы (<тэг>) і зачыняльны (</тэг>), прычым тэг, які адкрывае, можа мець атрыбуты (параметры), якія ўплываюць на яго паводзіны.Кантэйнер (блок) - структура, якая складаецца з адкрывалага або адкрывалага і зачыняльнага тэгаў.

Прыклады:o <ТЭГ параметр1=значэнне1 параметр2=значэнне2 ...>

тэкстіншыя канструкцыі

o </ ТЭГ>

o <ТЭГ параметр1=значэнне1...>тэкстіншыя канструкцыі

43

44

Лепшы спосаб вывучэння Лепшы спосаб вывучэння

HTML – HTML – чытанне зыходнчытанне зыходнікікаўаў

Графічнае прадстаўленне Графічнае прадстаўленне

структуры HTML-дакументаструктуры HTML-дакумента

45

HTML

HEAD BODY

LINKS IMAGES

46

Структура HTML-дакументаСтруктура HTML-дакумента

Дэкларацыя версіі HTML

Дакумент

Загаловак дакумента

Назва дакумента

Цела дакумента

Змест

Службовая інфармацыя

47

Дакумент HTML з'яўляецца блокавым элементам і сам складаецца з блокаў. Два асноўныя блокі - гэта HEAD (вызначае ўласцівасці дакумента) і BODY (вызначае цела дакумента). Кожны з іх уключае іншыя блокі. HTML-дакумент складаецца са стандартных элементаў разметкі: загалоўкі, спісы, табліцы, параграфы і г.д. - якія падзелены на два тыпу: радковыя і блокавыя. Да блокавых адносяцца параграф, спіс, табліца. Да радковых адносяцца напісанне, тэкст гіпертэкставых спасылак, ….

Структура HTML-дакументаўСтруктура HTML-дакументаў

Загаловак

48

Адкрываючы тэг

49

Загаловак

Даныя

50

Загаловак

Зачыняльны тэг

51

Атрыбут

Базавыя колерыБазавыя колеры

52

RGB (Red, Green, Blue) (0-FF,0-FF,0-FF)

Колер указваецца шаснаццатковым кодам

53

Падстаноўка

Змест вобласці Змест вобласці HEADHEAD

У вобласці загалоўка дакумента могуць утрымлівацца як тэгі, якія апісваюць ўласцівасці дакумента, так і коды праграм (сцэнарыяў), выкліканых у целе дакумента. Прыклады тэгаў:•title - вызначае тэкст, які адлюстроўваецца ў загалоўку браўзэра;•meta - вызначае розныя ўласцівасці дакумента, напрыклад, тып кадыроўкі, ключавыя словы, апісанне дакумента, аўтар і г.д .;•base href - паказвае адрас дакумента;•link - вызначае спасылку на іншы файл.

54

Прыклад арганізацыі вобласціПрыклад арганізацыі вобласці

HEADHEAD• <HEAD>

o <TITLE>Мая старонка</TITLE>o <META name=“keywords” content=“спіс

тэрмінаў”>o <META name=“description” content=“кароткае

апісанне зместу...”>o <META HTTP-EQUIV="Content-Type"

CONTENT="text/html; charset= utf-8">o <META NAME="Author" CONTENT=«Svetlana

Hancharova">o <META NAME="GENERATOR"

CONTENT="Mozilla/35.01 [en] (WinХР; I) [Netscape]">

o <base href=“http://www.buk.by/itk.html”>o <link rel=“StyleSheet” type=“text/css”

href=“http://www.buk.by/site.css”>• </HEAD> 55

Элемент BODYЭлемент BODY

Тэг <BODY> азначае цела дакумента, мае розныя атрыбуты для вызначэння колеру фону дакумента, колеру тэксту, колеру спасылак і г.д. Прыклад запісу:

•<BODY параметр1=данные1 параметр2= данные2...>

o текст документа

•</BODY>

56

Параметры элемента Параметры элемента BODYBODY

bgcolor - вызначае колер фону для дакумента;text - вызначае колеру тэксту гэтага дакумента;background - вызначае адрас URL, адкуль будзе брацца малюнак для фону дакумента;link - вызначае колер пры вывадзе на экран тэксту з яшчэ не выбраных вамі гіпертэкставых сувязяў;vlink - вызначае колер тэксту з ужо правераных вамі гіпертэкставых сувязяў;alink - задае колер, якім будуць вылучацца ў тэксце гіпертэкставыя сувязі ў той момант, калі карыстальнік пстрыкае па іх клавішай мышы.

57

Элементы, якія задаюць Элементы, якія задаюць

шрыфтшрыфт

<FONT size=… color=...> текст </FONT>•size - ўсталёўвае памер шрыфта. Змяняецца ў межах ад 1 да 7. Памер па змаўчанні - 3. Можа быць паказаны адносны памер, напрыклад size = "+ 1" ці size = "- 2";•color - паказвае колер, якім будзе выдзелены дадзены тэкст. Колеры задаюцца ў выглядзе RGB-значэння з шаснаццатковай натацыяй, альбо выбіраецца адзін з 16 стандартных колераў, апісаных у элеменце BODY у атрыбуту BGCOLOR.

58

59

60

Элементы фарматавання на Элементы фарматавання на

ўзроўні блокаўўзроўні блокаў

• Параграфo <p align=(left|center|right|justify)>

• Загаловакo <H1|H2|H3|H4|H5|H6 align=...>

• Перавод карэткі (новая радок)o <br>

61

62

63

Элементы, якія задаюць Элементы, якія задаюць

напісанненапісанне

• <TT> тэлетайпны тэкст • <I> стыль з нахільным шрыфтам • <B> стыль з тлустым шрыфтам • <U> стыль з падкрэсліваннем тэкста • <BIG> друк тэкста шрыфтам

павялічанага размера • <SMALL> друк тэксту шрыфтам паменшанага

памеру

• <SUB> друк тэксту са зрухам ўніз (ніжні індэкс) • <SUP> друк тэксту са зрухам ўверх (верхні індэкс) • <STRIKE> стыль з перакрэсленым тэкстам

64

Маркіраваныя спісыМаркіраваныя спісы

• <UL>o <LI> ... першы пункт спісаo <LI> ... другі пункт спісаo ...

• </UL>

65

<UL><LI> нага<LI> рука

</UL>

нагарука

Нумараваныя спісыНумараваныя спісы

• <OL>o <LI> ... першы пункт спісаo <LI> ... другі пункт спісаo ...

• </OL>

66

<OL><LI> крокам<LI> марш<LI> уперад

</OL>

1. крокам2. марш3. уперад

Табліца Табліца

• <TABLE BORDER=... WIDTH=... >o <TR>

• <TD параметры=… > 1-я клетка 1-ага радка </TD> • <TD параметры=... > 2-я клетка 1-ага радка </TD>

o </TR> o <TR>

• <TD> 1-я клетка 2-ога радка </TD> • ...

o </TR>o …

• </TABLE>

67

colspanrowspan!!!злучэнне слупкоў і

радкоў

ТабліцаТабліца

68

<table><tr><td></td><td></td><td></td></tr>

<tr><td colspan=3></td></tr></table>

Тыпы сувязейТыпы сувязейСувязь, якая ўсталёўваецца паміж гіпертэкставых дакументамі, называецца спасылкай (link) або гіперспасылкай (hyperlink). Існуюць наступныя тыпы сувязяў:•якар (anchor, target) або закладка (bookmark) - ўстаноўка пазнакі перад пэўным блокам дакумента;•спасылка на закладку (якар) - зварот да ўсталяванай пазнацы;•адносная спасылка - шлях да файла адносна каранёвага каталога вузла;•абсалютная спасылка - поўны шлях да файла з указаннем даменнага адрасу вузла і шляху да файла на дадзеным вузле.

69

СпасылкіСпасылкі• <a href=... title=...>

тэкст або паказальнік на аб'ект

</a>• Прыклады:

o<a href=“my.html”> Пстрыкніце па гэтай спасылцы </a>o<a href=“ship.gif” title=“Корабль моей мечты”> Ничего кораблик!!!</a>o<a href=“mailto:[email protected]”>Ліст</a>

• Якар (anchor):oАзначэнне якара - <a name=“maryia”>Maryia</a>oЗварот да якара -<a href=“#maryia”>Maryia</a>

70

ВыявыВыявы

• <img src=... alt=... align=... width=... height=... border=... hspace=... vspace=...>

• <img src=“ship.gif” alt=“Корабль моей мечты” align=left width=70 height=50 border=2 hspace=3 vspace=3>

71

Апісанне атрыбутаў тэга img:

o src - шлях да файла;o alt - тэкст подпісу;o align - выраўноўванне;o width - шырыня;o height - вышыня;o border - таўшчыня

контуру;o hspace - водступ тэксту

па гарызанталі ад малюнка;

o vspace - водступ тэксту па вертыкалі ад малюнка.

72

73

ФормыФормы

• <FORM METHOD=POST ACTION=«email»>o <INPUT TYPE=CHECKBOX> - у <form> ствараецца

элемент уводу «опция»;o <INPUT TYPE=FILE> - у <form> ствараецца элемент

уводу «выбар файла»;o <INPUT TYPE=HIDDEN> - у форме ствараецца скрыты

элемент;o <INPUT TYPE=IMAGE> - ствараецца элемент уводу

«выява»;o <INPUT TYPE=PASSWORD> - ствараецца элемент

уводу тэкста з абеспячэннем аховы зместа;o <INPUT TYPE=RADIO> - ствараецца элемент уводу

«селектарная кнопка»;

74

Формы (працяг)Формы (працяг)

o <INPUT TYPE=RESET> - ствараецца кнопка скіду;o <INPUT TYPE=SUBMIT> - ствараецца кнопка перадачы;o <INPUT TYPE=TEXT> - ствараецца элемент уводу

тэкста;o тег OPTION – з дапамогай канструкціі тэгаў <option>

азначаецца меню ўнутры элемента <select>;o тег SELECT – пачатковы і канчатковы тэгі азначаюць

меню з некаторымі варыянтамі выбару ці спіс;o тег TEXTAREA – шматрадковая вобласць уводу тэксту ў

форме;

• </FORM>

75

76

Дадзеная форма ўтрымлівае шэсць элементаў. Першы элемент - радок для ўводу імя, другі - выбар варыянту адказу на пытанне, трэці - аналагічны другому, чацвёрты - меню выбару, пяты - тэкставы шматрадковы блок і шосты - кнопкі кіравання змесцівам формы.

Каскадныя таблКаскадныя таблііцы стыляў цы стыляў

(CSS)(CSS)Перавагі выкарыстання каскадных табліц стыляў:У асноўнай частцы дакумента адсутнічаюць тэгі фізічнага фарматавання тэксту, г.зн. прадстаўлена толькі лагічная структура дакумента.Скарачаецца аб'ём HTML-дакументаСпрашчаецца працэдура праўкі дакумента.CSS не чулы да рэгістра, пераносу радкоў, прабелаў і знакаў табуляцыі, таму форма запісу залежыць ад жадання распрацоўніка.

Табліца стыляў кіруе фарматаваннем тэгаў ў дакуменце.

•Правіла складаецца з:o селектара (тэга)o азначэння - ўласцівасці і значэння

H2 {color: green; font-size: 20 pt}

Сінтаксіс Сінтаксіс CSSCSS

Селектар {уласцівасць1: значэнне; уласцівасць2: значэнне; ...},

дзе селектар - імя HTMLтега (H1, P, TD, A і т. д.), ці класа, ці ідентіфікатора, а параметры ў фігурных дужках - спіс уласцівасцяў элемента і прысвоеных ім значэнняў.

Прыклад:

• ТэгH1 {font-size: 30pt; color: blue;}• Клас

.special {color: blue; font-size: 14 pt; text-align: center; background-color: red}

CSS рэалізуе магчымасць прысвойваць стылі не ўсім аднолькавым элементам старонкі, а выбіральна - для гэтага выкарыстоўваецца параметр CLASS = "імя класа" ці ідэнтыфікатар ID = "імя элемента", які прысвойваецца любому элементу старонкі. Прысваенне стыляў з дапамогай ідэнтыфікатараў ужываецца ў выпадку, калі гэтаму ідэнтыфікатару адпавядае толькі адзін элемент на старонцы. Калі элементаў, якім неабходна прысвоіць такі стыль, некалькі - гэта ўжо клас.

Сінтаксіс Сінтаксіс CSSCSS

Прыклад:

.bс {font-weight: bold; text-align: center} – апісанне стылю для класа bс

Усе элементы класа bс будуць адлюстроўвацца тлустым шрыфтам з выраўноўваннем па цэнтры старонкі (або ячэйкі табліцы).

<P CLASS = "bс"> Тэкст параграфа </ P> - параграфу прысвоены стыль класа bс.

<TD CLASS = "bc"> тэкст </ TD>- ячейкі табліцы прысвоены стыль

класа bc.

Cascading Style SheetCascading Style Sheet

81

Вызначэнне двух стыляў у вобласці загалоўку дакумента:<HEAD>...<style> <! -.nachalnіk {color: red; text-align: center; font-size: 24; background-color: green}.і {color: blue; text-align: left; font-size: 12; background-color: purple}-> </ style>...</ HEAD>

Cascading Style SheetCascading Style Sheet

82

Зварот да стылявых класаў ў целе дакумента:

<BODY>...<p class = "начальнік"> Начальнік сказаў трэба!<p class = "я"> Я выконваю

Начальнік сказаў трэба!Начальнік сказаў трэба!Я выконваю

Каскадныя табліцы стыляў. Каскадныя табліцы стыляў.

Злучэнне з дакументамЗлучэнне з дакументам

• Звязванне - табліца стыляў захоўваецца ў асобным файле (.css)Далучаецца да дакумента з дапамогай тэга LINK ў службовай частцы дакументу

• Укараненне - табліца стыляў задаецца ў самым дакуменце

Размяшчэнне апісання стыляў у асобным файле мае сэнс у выпадку, калі гэтыя стылі ўжываць да большай, чым адна, колькасці старонак. Для гэтага трэба стварыць звычайны тэкставы файл, апісаць з дапамогай мовы CSS неабходныя стылі, размясціць гэты файл на вэб-сэрвэры, а ў кодзе вэб-старонак, якія будуць выкарыстоўваць стылі з гэтага файла, трэба будзе зрабіць спасылку на яго з дапамогай тэга <LINK >, які размяшчаецца ўнутры тэга <НEAD>:

<LINK REL = STYLESHEET TYPE = "text/css" HREF = "URL">

Першыя два параметры гэтага тэга з'яўляюцца зарэзерваванымі імёнамі, паведамляючымі браўзэру, што на гэтай старонцы будзе выкарыстоўвацца CSS. Трэці параметр - HREF = "URL" - паказвае на файл, які ўтрымлівае апісання стыляў. Гэты параметр павінен утрымліваць альбо адносны шлях да файла - калі ён знаходзіцца на тым жа сэрвэры, што і дакумент, з якога да яго звяртаюцца - або поўны URL («http: // ...»), калі файл стыляў знаходзіцца на іншым серверы.

ЗвязваннеЗвязванне

Укараненне, 1 спосабУкараненне, 1 спосаб

Апісанне стыляў размяшчаецца ў кодзе вэб-старонкі, ўнутры тэга <HEAD>, ў тэгу

<STYLE type = "text/css"> ... </ STYLE>.

У гэтым выпадку вы можаце выкарыстоўваць гэтыя стылі для элементаў, якія размяшчаюцца ў межах старонкі. Параметр type = "text/css" з'яўляецца абавязковым і служыць для ўказання браўзэру выкарыстаць CSS.

Прыклад:

<HEAD>

<STYLE type = "text/css">

H2 {color: green; font-size: 20 pt}

</STYLE>

</HEAD>


Апісанне стылю размяшчаецца непасрэдна ўнутры тэга элемента, які вы апісваеце. Гэта робіцца з дапамогай параметру STYLE з большасцю стандартных тэгаў HTML.

Гэты метад непажаданы: ён прыводзіць да страты аднаго з асноўных пераваг CSS - магчымасці аддзялення інфармацыі ад апісання афармлення інфармацыі.

Калі неабходна апісаць толькі адзін элемент, гэты варыянт размяшчэння апісання стыляў можа быць выкарыстаны.


XML (XML (eXtensible Markup LanguageeXtensible Markup Language))

Мова XML (eXtensible Markup Language - пашыраемая мова разметкі) падзяляе змест і прадстаўленне дакумента. Дазваляе карыстацца любымі тэгамі, якія ствараюцца аўтарам у працэсе распрацоўкі дакумента. У рамках XML распрацоўваюцца фіксаваныя сістэмы разметкі дакументаў, напрыклад, MathML - мова разметкі матэматычных тэкстаў, ChemML - мова разметкі хімічных тэкстаў. Пра XML можна сказаць, што гэта HTML + сэмантычная разметка.

88

JavaScriptJavaScript

89

Дакументы можна генерыраваць як на баку кліента, так і на боку сервера. Апошняе рэалізуецца праз механізм падстановак на баку сервера (Server Site Includes). Кампанія Netscape распаўсюдзіла ў 1995 годзе механізм кіравання дакументамі і на баку кліента, распрацаваўшы мову праграмавання JavaScript.

JavaScript - гэта мова кіравання сцэнарамі прагляду гіпертэкставых дакументаў на баку кліента.

Падзеі Падзеі JavaScriptJavaScript

90

Падзеі і апрацоўшчыкі падзей з'яўляюцца вельмі важнай часткай для праграмавання на мове JavaScript. Падзеі, галоўным чынам, ініцыююцца тымі ці іншымі дзеяннямі карыстальніка. Калі ён шчоўкае па некаторай кнопцы, адбываецца падзея "Click". Калі паказальнік мышы перасякае якую-небудзь спасылку гіпертэксту - адбываецца падзея MouseOver. Існуе некалькі розных тыпаў падзей.

Функціі Функціі JavaScriptJavaScript

91

У большасці выпадкаў функцыі ўяўляюць сабой толькі спосаб звязаць разам некалькіх каманд.Давайце, да прыкладу, напішам скрыпт, які друкуе тэкст тры разы запар. Разгледзім просты падыход:

<html><script language="JavaScript"></script></html>

Функціі Функціі JavaScriptJavaScript

92

<html><script language="JavaScript"></script></html>

Іншая рэалізацыя папярэдняга прыкладу!!!

Прыклад: стварэнне новага акнаПрыклад: стварэнне новага акна

93

<html><head><script language="JavaScript"></script></head><body><form><input type="button" value="Адчыніць новае акно" onClick="openWin()"></form></body></html>

Аб Аб PHPPHP

94

PHP - гэта мова праграмавання для дынамічнай генерацыі вэб-старонак з дапамогай скрыптоў, якія запускаюцца на вэб-серверы. Вы ствараеце старонку з дапамогай PHP і HTML. Калі наведвальнік сайта адкрывае старонку, сервер выконвае уключаныя ў html-код аператары PHP і пасылае вынік браўзэру наведвальніка. PHP з'яўляецца прадуктам з адчыненым зыходным кодам (Open Source) і платформа-незалежны. PHP працуе на Windows і Unix.Прыклад:

<?php $message = "Hello, World!"; echo $message; ?>

Сродкі стварэння вэб-старонакСродкі стварэння вэб-старонак

• Найпростыя тэкставыя рэдактары - Блакнот, Far Editor, Norton Editor

• Спецыялізаваныя HTML-рэдактары - AceHTML ці Notepad++

• Рэдактары візуальнага праектавання WYSIWYG – MS VisualStudio.NET., Adobe Dreamweaver

95

ЛітаратураЛітаратура

1. http://htmlbook.ru2. Веб-дизайн: книга Дмитрия

Кирсанова – Спб.: Символ-плюс, 200Х3. Веб-дизайн: книга Якоба Нильсена –

Спб.: Символ-плюс, 200Х

96