Bel html

Мова HTML:Мова HTML:
сінтаксіс мовысінтаксіс мовы
Ганчарова С.А.
1

World Wide Web – механізм апрацоўкіWorld Wide Web – механізм апрацоўкі
запытаўзапытаў
2
Кліент
HTML
Браўзер
Малюнак
Гукавы
файл….
Аддалены вузел
Кліент звяртаецца да вузла, які перадае запыт вэб-серверу.
Вэб-сервер перадае тэкставы дакумент кліенту, ад якога ідзе
запыт на перадачу дадатковых даных, якія ўтрымліваюцца ў
дакуменце (графіка, відэа і г.д.).
HTML
Image
SQL
...
Вэб-сервер

Асноўныя азначэнніАсноўныя азначэнні
• Вэб-старонка – гіпермедыйны HTML-дакумент
• HTML (Hyper Text Markup Language) – мова разметкі
гіпертэкставых дакументаў – мова стварэння вэб-старонак
• Браузер – праграма, патрэбная для прагляду вэб-старонак
(Internet Explorer, Chrome…)
• Вэб-сайт – группа вэб-старонак, звязаных адзінай тэмай,
схемай афармлення і гіпертэкставымі спасылкамі
3

Мова HTMLМова HTML
Мова, прызначаная для стварэння фарматаванага
тэксту, які насычаны малюнкамі, гукам, анімацыяй і
спасылкамі на іншыя аб'екты, напрыклад гіпертэкставыя
дакументы, графічныя файлы і г.д., раскіданыя па ўсёй
прасторы вэб-сервераў Інтэрнет / Інтранет
4

Дрэва моўДрэва моў
5
GML
1960
SGML
сяр.1980х
HTML
1990
XML
1996

6
Чарльз Гольдфарб – стваральнікЧарльз Гольдфарб – стваральнік
мовы разметкімовы разметкі
Кампанія IBM,
1969г.

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

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

Версіі HTMLВерсіі HTML
• 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/html5
9

Стандарт HTML 4.0Стандарт HTML 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.htm
dom.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:siteimageris.gif
....imageris.gif
Не правільна Правільна
site
html
image
video
other
rus
eng
25

Фарматы графічных файлаў уФарматы графічных файлаў у
ІнтэрнетІнтэрнет
• Растравыя:
o gif
o png
o jpg
• Вектарныя:
o swf - флэш
o svg
26

• Памер малюнка (у пікселях або %
ад шырыні акна)
• Альтэрнатыўны тэкст
(адлюстроўваецца ў рэжыме
адключэння графікі або
неграфічнымі браўзэрамі)
• Мініяцюры
• Графічныя карты
27
У HTML-дакуменце прысутнічае не сам графічны аб'ект, а толькі адрас
файла, які адпавядае дадзенаму графічнаму малюнку
ГрафікаГрафіка

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

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

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
Сінтаксіс мовы – набор правіл пабудовы
фраз, які дазваляе вызначыць
асэнсаваныя сказы на гэтай мове

Сінтаксіс мовы HTMLСінтаксіс мовы HTML
Тэг (дэскрыптар) – інструкцыя мовы HTML. Тэг бывае адкрывалы
(<тэг>) і зачыняльны (</тэг>), прычым тэг, які адкрывае, можа мець
атрыбуты (параметры), якія ўплываюць на яго паводзіны.
Кантэйнер (блок) - структура, якая складаецца з адкрывалага або
адкрывалага і зачыняльнага тэгаў.
Прыклады:
o <ТЭГ параметр1=значэнне1 параметр2=значэнне2 ...>
тэкст
іншыя канструкцыі
o </ ТЭГ>
o <ТЭГ параметр1=значэнне1...>
тэкст
іншыя канструкцыі
43

44
Лепшы спосаб вывучэнняЛепшы спосаб вывучэння HTMLHTML
–– чытанне зыходнчытанне зыходнікікаўаў

Графічнае прадстаўленнеГрафічнае прадстаўленне
структуры HTML-дакументаструктуры HTML-дакумента
45
HTML
HEAD BODY
LINKS IMAGES

46
Структура HTML-дакументаСтруктура HTML-дакумента
Дэкларацыя версіі HTML
Дакумент
Загаловак дакумента
Назва дакумента
Цела дакумента
Змест
Службовая інфармацыя

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

Загаловак
48
Адкрываючы тэг

49
Загаловак
Даныя

50
Загаловак
Зачыняльны тэг

Базавыя колерыБазавыя колеры
52
RGB (Red, Green, Blue) (0-FF,0-FF,0-FF)
Колер указваецца шаснаццатковым кодам

Змест вобласці HEADЗмест вобласці HEAD
У вобласці загалоўка дакумента могуць утрымлівацца
як тэгі, якія апісваюць ўласцівасці дакумента, так і
коды праграм (сцэнарыяў), выкліканых у целе
дакумента.
Прыклады тэгаў:
•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

Параметры элемента BODYПараметры элемента BODY
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

Элементы фарматавання наЭлементы фарматавання на
ўзроўні блокаўўзроўні блокаў
• Параграф
o <p align=(left|center|right|justify)>
• Загаловак
o <H1|H2|H3|H4|H5|H6 align=...>
• Перавод карэткі (новая радок)
o <br>
61

Элементы, якія задаюцьЭлементы, якія задаюць
напісанненапісанне
• <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
colspan
rowspan!!!
злучэнне слупкоў і
радкоў

ТабліцаТабліца
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:maryia@study.minsk.by”>Ліст</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 - водступ тэксту па
вертыкалі ад малюнка.

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

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

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

Функціі JavaScriptФункціі JavaScript
91
У большасці выпадкаў функцыі ўяўляюць сабой толькі спосаб
звязаць разам некалькіх каманд.
Давайце, да прыкладу, напішам скрыпт, які друкуе тэкст тры разы
запар. Разгледзім просты падыход:
<html>
<script language="JavaScript">

</script>
</html>

Функціі JavaScriptФункціі JavaScript
92
<html>

</script>
</html>
Іншая
рэалізацыя
папярэдняга
прыкладу!!!

Прыклад: стварэнне новага акнаПрыклад: стварэнне новага акна
93
<html>
<head>

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

Аб PHPАб PHP
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.ru
2. Веб-дизайн: книга Дмитрия Кирсанова –
Спб.: Символ-плюс, 200Х
3. Веб-дизайн: книга Якоба Нильсена – Спб.:
Символ-плюс, 200Х
96

Bel html

More Related Content

Featured

Bel html

Editor's Notes