Добавил:
ivanov666
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Предмет:
Файл:Основы работы в сети Интернет. Учебное пособие
.pdf
Соз да ние за го лов ков в тек сте вы пол ня ет ся те гом H. При ня то го во рить
о за го лов ках оп ре де лен но го ти па раз ме ра
Фор мат те га:
n.
<Hn></Hn> , где n=1...6 раз мер сим во лов. Раз мер сим во лов тек ста яв ля-
ет ся ус лов ным и оп ре де ля ет ся брау зе ром. Раз мер 1 – круп ные сим во лы, далее сим во лы умень ша ют ся.
Текст на стра ни це мож но раз де лить ли ния ми с по мо щью те га
Фор мат те га:
HR.
<HR color=”цвет”> – вы вод ли нии.
Текст стра ни цы мо жет цен три ро вать ся по гра ни цам ок на брау зе ра те гом
<CENTER>со дер жа ние</CENTER>. Вы де лить текст мож но как ци тат-
ный блок те гом
Управ ле ние ви дом от дель ных час тей стра ни цы мож но вы пол нить, ис-
поль зуя тег
тек ста, раз мер сим во лов тек ста. В со ста ве те га ис поль зу ют па ра мет ры:
<BLOCKQUOTE>со дер жа ние</BLOCKQUOTE>.
FONT. С по мо щью это го те га из ме ня ют цвет сим во лов, шрифт
FACE – в не го за пи сы ва ют сис тем ное имя шриф та;
COLOR – хра нит цве то вой код;
SIZE – хра нит раз мер сим во лов шриф та.
Раз мер шриф та за да ет ся в от но си тель ных еди ни цах от 1 до 7. Раз мер 1 –
сим во лы наи мень ше го раз ме ра.
При мер.
<font size=”7” face=”Courier”>
<blockquote>Hello World!<br>При вет Мир!</blockquote>
</font>
На име но ва ние шриф та вво дит ся с со блю де ни ем ре ги ст ра. Ес ли та ко го
шриф та нет на ком пь ю те ре кли ен та се ти, то ис поль зу ет ся шрифт по умолча нию брау зе ра.
При соз да нии ин фор ма ци он но го со дер жа ния стра ни цы мо гут при менять ся спе ци аль ные сим во лы. Та кие сим во лы ис поль зу ют ся, ес ли нуж но
вве сти сим вол, ко то ро го нет в яв ном ви де на кла виа ту ре ли бо его ис поль зова ние вы зы ва ет про ти во ре чие в раз мет ке.
Спе ци аль ные сим во лы вво дят ся по ссыл ке
фи ка тор сим во ла. Ссыл ки на спе ци аль ные сим во лы при во дят ся в табл. 2.1.
21
&name; здесь name – иден ти-

Таб ли ца 2.1
Таб ли ца спе ци аль ных сим во лов
Сим вол На зна че ние Сим вол На зна че ние
©
®
Сим вол ав тор ско го пра ва ©
За ре ги ст ри ро ван ная тор го вая мар ка ®
Не раз рыв ный про бел
>
<
&
"
Знак >
Знак <
Сим вол &
Сим вол “
C по мо щью ссыл ки на не раз рыв ный про бел мож но по лу чить крас ную
стро ку при вы во де тек ста в ок но брау зе ра.
На при мер, нуж но вы вес ти текст:
Hello World !
При вет МИР !
Раз мет ка при мет вид:
<b>Hello World !</b><br>
<i>При вет МИР !</i>
В раз мет ке мож но ис поль зо вать ком мен та рий. Это по яс няю щий текст,
ко то рый не вы во дит ся в ок но брау зе ра. Оформ ля ет ся ком мен та рий те гом
<! – -Текст ком мен та рия – ->. Ком мен та рий дол жен на чи нать ся
с сим во ла «
!».
2.2.3. Упо ря до чи ва ние ин фор ма ции на стра ни це
Мо жет быть вы пол не но с по мо щью сле дую щих средств язы ка раз мет ки:
спи сков;•
таб лиц.•
Спи ски
С по мо щью спи сков мож но упо ря до чить стро ки тек ста, снаб див их оп ре-
де лен ны ми мар ке ра ми, и по лу чить оп ре де лен ное вза им ное рас по ло же ние.
Су ще ст ву ют три ви да спи сков, по ка зан ных в табл. 2.2.
22

Ти пы спи сков
Таб ли ца 2.2
Ну ме ро ван ный
спи сок
<OL>
<LI>стро ка
<LI>стро ка
...
<LI>строка
</OL>
1
2
i
Мар ки ро ван ный
спи сок
<UL>
<LI>стро ка
<LI>стро ка
...
<LI>строка
</UL>
Спи сок оп ре де ле ний
<DL>
1
2
<DT>Тер мин
<DT>Тер мин2<DD>Оп ре де ле ние
<DD>Оп ре де ле ние
1
1
2
...
i
<DT>Термин
<DD>Определение
i
i
</DL>
Те ги OL, UL и DL от ме ча ют об ласть стра ни цы, где на хо дит ся спи сок. Тег
LI от ме ча ет стро ку – эле мент спи ска, его мож но за крыть пар ным те гом
</LI>. Тег DT от ме ча ет стро ку тер мин, а тег DD – стро ку оп ре де ле ния это го
тер ми на, она вы во дит ся ни же тер ми на с от сту пом.
В табл. 2.3 при ве де ны те ги для фор ми ро ва ния трех раз ных ти пов списков.
Таб ли ца 2.3
При ме ры спи сков
Ну ме ро ван ный спи сок Мар ки ро ван ный Спи сок оп ре де ле ний
<ol>
<li>Yes
<li>No
<li>Ignore
</ol>
<ul>
<li>Yes
<li>No
<li>Ignore
</ul>
<dl>
<dt>Yes<dd>Да
<dt>No<dd>Нет
<dt>Ignore<dd>От ме на
</dl>
Ре зуль тат дей ст вия те гов по ка зан на рис. 2.1.
Рис. 2.1. Фраг мент стра ни цы со спи ска ми в брау зе ре
23

Таб ли цы
Соз да ние таб ли цы тре бу ет ис поль зо ва ния ря да те гов. Те гом TABLE от меча ют об ласть стра ни цы, где бу дет на хо дить ся таб ли ца. Стро ки таб ли цы разме ча ют ся те гом TR. Для соз да ния яче ек таб ли цы слу жит тег TD, а для соз дания яче ек шап ки таб ли цы мож но ис поль зо вать тег TH, его со дер жа ние вы водит ся жир ным шриф том.
Таб ли цу мож но снаб дить под пи сью – за го лов ком, ис поль зуя тег CAPTION.
Фор мат те га:
<CAPTION ALIGN=»Type»></CAPTION> – за го ло вок таб ли цы.
Тип вы рав ни ва ния
таб ли цей),
Те ги фор ми ро ва ния яче ек мож но снаб дить па ра мет ром
за да ет вы рав ни ва ние со дер жа ния яче ек. Фор ма ты этих те гов при мут вид:
<TH ALIGN=»Type»></TD>
Bottom (за го ло вок под таб ли цей).
Typе мо жет при ни мать зна че ния Top (за го ло вок над
ALIGN, ко то рый
<TD ALIGN=»Type»></TD>
Здесь зна че ние Type – тип вы рав ни ва ния в ячей ке: center (вы рав ни-
ва ние по цен тру),
ни ва ние по пра во му краю).
При соз да нии слож ных таб лиц в те гах
left (вы рав ни ва ние по ле во му краю), right (вы рав-
TH и TD ис поль зу ют па ра мет ры
COLSPAN и ROWSPAN, ко то рые по зво ля ют за да вать ши ри ну ячей ки в клет-
ках и вы со ту ячей ки в стро ках со от вет ст вен но.
При мер.
Да на таб ли ца, нуж но сфор ми ро вать раз мет ку для ее вы во да.
Table sample
One Two Three
Ye s
No Two Five
Cancel Three Six
Раз мет ка для вы во да дан ной таб ли цы при мет вид:
Ok
One Four
<table border>
<caption align=»top»><b>Table sample</b></caption><tr>
<th>One</th><th>Two</th><th colspan=»2»>Three</th>
</tr><tr>
<td>Yes</td><td rowspan=»3» align=»center»>Ok</td>
24

<td>One</td><td>Four</td>
</tr><tr>
<td>No</td><td>Two</td><td>Five</td>
</tr><tr>
<td>Cancel</td><td>Three</td><td>Six</td></tr>
</table>
Па ра метр BORDER те га TABLE пред пи сы ва ет
вы во дить раз де ли тель ные ли нии в таб ли це. Вид
таб ли цы в ок не брау зе ра по ка зан на рис. 2.2.
До пус ка ет ся за да вать тол щи ну ли ний раз-
BORDER.
Рис. 2.2. Таб ли ца
в брау зе ре
граф ки таб ли цы с по мо щью па ра мет ра
На при мер,
в 2 пик се ла.
BORDER=»2» за да ет тол щи ну ли ний
2.2.4. Ор га ни за ция ги пер тек сто вых пе ре хо дов
Ги пер тек сто вые пе ре хо ды на стра ни цах бы ва ют двух ти пов: внеш ние
ссыл ки и яко ря.
Внеш ние ссыл ки
Внеш няя ссыл ка оформ ля ет ся те гом:
<A HREF = «uri»>Со дер жа ние</A>
Здесь uri – ад рес стра ни цы.
За ме тим, что воз мож но сти про то ко ла пе ре да чи ги пер тек ста HTTP го-
раз до ши ре,
мер, на файл с гра фи че ским изо бра же ни ем, на файл с муль ти ме диа дан ными. Текст со дер жа ния под чер ки ва ет ся в тек сте стра ни цы и яв ля ет ся ссылкой. Ме ха низм внеш них ссы лок по зво ля ет объ е ди нить не сколь ко стра ниц.
Та кое объ е ди не ние стра ниц по оп ре де лен ной те ма ти ке на зы ва ет ся сай том.
В со ста ве сай та обыч но есть глав ная стра ни ца, ко то рая от кры ва ет ся пользо ва те лем, на этой стра ни це на хо дит ся ог лав ле ние сай та в ви де ги пер ссы лок.
Та кую стра ни цу мож но ор га ни зо вать в ви де на бо ра фрей мов.
Соз да ют та кую стра ни цу с по мо щью те гов
тег соз да ет на бор фрей мов. Фрейм – часть ок на брау зе ра, ку да мо жет за гружать ся ин фор ма ция. Вто рой тег оп ре де ля ет ад рес стра ни цы, по ме щае мой во
фрейм.
uri-ад рес мо жет ссы лать ся на лю бой файл с дан ны ми, на при-
FRAMESET, FRAME. Пер вый
25

Стра ни ца, со дер жа щая на бор фрей мов, не долж на со дер жать те га BODY.
Фор мат те га для соз да ния фрей мов име ет вид:
<FRAMESET COLS=»n1,n2» | ROWS=»m1,m2»></FRAMESET>
Па ра мет ры COLS и ROWS оп ре де ля ют про пор ции де ле ния ок на брау зера по вер ти ка ли и го ри зон та ли. Ис поль зо вать мож но толь ко один па ра метр.
Про пор ции де ле ния за да ют ся в про цен тах.
Тег соз да ния фрей ма име ет фор мат:
<FRAME NAME=»fraName1» SRC=»uri»>
Здесь uri – ад рес стра ни цы, за гру жае мый во фрейм. Па ра метр NAME
со дер жит иден ти фи ка тор фрей ма. Это ус лов ное имя за да ет ся ла тин ски ми
бу к ва ми и ис поль зу ет ся для ор га ни за ции об ра ще ния к фрей му. Те ги
вкла ды ва ют ся в тег
за дан ным в па ра мет ре
FRAMESET. Их чис ло долж но со от вет ст во вать час тям,
ROWS или COLS.
Стра ни ца сай та с ог лав ле ни ем за гру жа ет ся в один из сво бод ных фреймов, а дру гой сво бод ный фрейм ис поль зу ет ся для про смот ра со дер жа ния
стра ниц, за гру жае мых по ссыл ке ог лав ле ния. Для это го в тег
<A HREF…>
стра ни цы ог лав ле ния нуж но вклю чить па ра метр TARGET, зна че ние ко то ро-
го долж но быть иден ти фи ка то ром фрей ма
за груз ки.
На при мер, тре бу ет ся по стро ить глав ную
стра ни цу сай та по сле дую щей схе ме, по ка-
ɋɜɨɛɨɞɧɵɣ
ɮɪɟɣɦ.
NAME=”display”
index.html
зан ной на рис. 2.3.
Та кая стра ни ца со сто ит из двух фрей мов:
ле во го и пра во го. Пра вый фрейм сво бодный, в не го бу дут за гру жать ся стра ни цы при
вы бо ре их в ог лав ле нии. Ог лав ле ние со держит ся в фай ле index.html. Оно долж но содер жать те ги, за гру жаю щие стра ни цы в пра-
Рис. 2.3. Глав ная стра ни ца
с дву мя фрей ма ми
вый фрейм.
Стра ни ца, де ля щая ок но брау зе ра на
фрей мы, долж на со дер жать раз мет ку:
FRAME
<html>
<frameset cols=»50%,*»>
<frame src=»index.html»>
<frame src=»» name=»display»>
</frameset>
</html>
26

При за да нии про пор ций ос тав шую ся часть ок на мож но за ме нять сим во-
лом «*».
Пусть в со ста ве сай та есть три стра ни цы: p1.htm, p2.htm, p3.htm, ко то рые
хра нят ин фор ма цию по трем глав ным раз де лам сай та. То гда раз мет ка страни цы index.htm бу дет иметь следующий вид:
<html>
<body>
<a href=»p1.htm» target=»display»>Пер вая гла ва</a><br>
<a href=»p2.htm» target=»display»>Вто рая гла ва</a><br>
<a href=»p3htm» target=»display»>Тре тья гла ва</a><br>
</body>
</html>
При ор га ни за ции внеш них ссы лок не об хо ди мо пом нить, что ес ли за гружае мая стра ни ца на хо дит ся на уда лен ном сер ве ре се ти, то нуж но ука зы вать
ее пол ный URI-ад рес. Ес ли стра ни ца на хо дит ся в ка ком-ли бо ка та ло ге клиен та се ти, то пе ре да ча та кой стра ни цы вы пол ня ет ся по ло каль но му URI-адре су по про то ко лу file. Фор мат та ко го ад ре са име ет вид:
fi le:///имя_дис ка|/путь_к_стра ни це/my.htm
При мер:
fi le:///e|/doc/html/my.htm
Та кой ад рес оз на ча ет, что стра ни ца my.htm на хо дит ся в пап ке doc/html на
дис ке E.
Ис поль зо ва ния пол но го име ни фай ла, при ня то го в опе ра ци он ной сис теме Windows
рас по зна ют ся кор рект но толь ко брау зе ром MS Internet Explorer. Ес ли в ка чест ве URI-ад ре са ука за но имя фай ла стра ни цы, на при мер my.html, то по иск
это го фай ла бу дет про ис хо дить в пап ке, где на хо дит ся стра ни ца, со дер жа щая
тег внеш ней ссыл ки.
e:\doc\html\my.htm, сле ду ет из бе гать, так как та кие ад ре са
Ор га ни за ция яко рей
Яко рем на зы ва ет ся тех но ло гия ор га ни за ции ссы лок на час ти од но го и того же до ку мен та. Тех но ло гия ис поль зо ва ния яко ря по ка за на на рис. 2.4.
Из ри сун ка вид но, что стра ни ца со сто ит из трех час тей. Пер вая часть связа на со вто рой, вто рая часть с треть ей, тре тья часть со вто рой. Ор га ни за ция
яко ря тре бу ет ис поль зо ва ния двух те гов. Пер вый тег фор ми ру ет ссыл ку на
оп ре де лен ную часть стра ни цы и име ет вид:
<A HREF=»#key»>со дер жа ние</A>
27

Вто рой тег по ме ча ет ту часть тек ста, на ко то рую
по па да ет поль зо ва тель при об ра ще нии к со дер жанию яко ря. Фор мат те га:
<A HREF=”#key”>текст</A>
В обо их те гах key – это иден ти фи ка тор пе рехо да яко ря, за да ет ся ла тин ски ми бу к ва ми и его назва ние вы би ра ет ся раз ра бот чи ком стра ни цы. Это
на зва ние долж но ис поль зо вать ся с уче том ре ги стра сим во лов.
Рис. 2.4. До ку мент
с яко ря ми
При мер ор га ни за ции яко ря:
<a href=”#part1” Гла ва 1.</a> В ко то рой по яв ля ет ся
ге рой ро ма на.
……
<a name=”part1”>Гла ва 1.</a> Яв ле ние ге роя.
Бы ло те п лое ве сен нее ут ро. Солн це уже вста ло над
кры ша ми го ро да и ос ве ти ло яр ким све том че ре пич ные
крас ные кры ши…
2.2.5. Ос нов ные по ня тия ди зай на стра ниц
Что бы стра ни ца при вле ка ла вни ма ние поль зо ва те ля и по зво ля ла луч ше
вос при ни мать ма те ри ал, ис поль зу ют раз лич ные прие мы оформ ле ния.
Рас смот рим ос нов ные из них.
Гра фи че ские изо бра же ния
Что бы по мес тить ил лю ст ра ции в тек сте стра ни цы, ис поль зу ют спе ци аль-
ный тег:
<IMG SRC=»uri» WIDTH=»w» HEIGHT=»h» ALT=»Text»
ALIGN=»Type»>
Здесь uri – ад рес гра фи че ско го фай ла с изо бра же ни ем. Па ра мет ры
WIDTH и HEIGHT за да ют раз ме ры об лас ти вы во да гра фи че ско го изо бра же-
ния. Па ра метр
со ра мы ши при на ве де нии его на изо бра же ние. Кро ме то го, этот текст вы-
во дит ся, ес ли в брау зе ре от клю чен по каз изо бра же ний. Па ра метр
ALT хра нит текст, ко то рый вы во дит ся как под сказ ка для кур-
ALIGN
28

по зво ля ет управ лять раз ме ще ни ем изо бра же ния от но си тель но тек ста. Вырав ни ва ние
Type мо жет при ни мать сле дую щие зна че ния:
Middle• (текст вы рав ни ва ет ся по цен тру изо бра же ния);
Bottom• (ниж няя гра ни ца изо бра же ния вы рав ни ва ет ся по ок ру жаю ще му
ее тек сту, ис поль зу ет ся по умол ча нию);
Top• (верх изо бра же ния вы рав ни ва ет ся по верх ней стро ке ок ру жаю ще-
го его тек ста);
Left• (текст об те ка ет изо бра же ние спра ва);
Right• (текст об те ка ет изо бра же ние сле ва).
Изо бра же ние мож но взять в рам ку, ес ли в тег
IMG до ба вить па ра метр
BORDER=”n”. Здесь n – ши ри на рам ки в пик се лах.
Для оформ ле ния обыч но ис поль зу ют гра фи че ские изо бра же ния фор ма-
та GIF и JPEG.
Изо бра же ния пер во го ти па за ни ма ют ма ло мес та в па мя ти, так как их
цве то вая па лит ра рав на 256 цве там. Кро ме то го, они под дер жи ва ют ани мацию и про зрач ные цве та.
Изо бра же ния вто ро го ти па по зво ля ют хра нить и пе ре да вать в сжа том виде ил лю ст ра ции, ко то рые ха рак те ри зу ют ся на сы щен ной цве то вой па лит рой
и боль шим раз ре ше ни ем.
Гра фи че ские изо бра же ния мо гут ис поль зо вать ся в ка че ст ве ссы лок, то гда
их по ме ща ют в ка че ст ве со дер жа ния в тег:
<A HREF…><IMG SRC=»uri»></А>.
Изо бра же ния мож но ис поль зо вать как фон стра ни цы, та кие изо бра жения на зы ва ют ся обоя ми и ти ра жи ру ют ся по по лю стра ни цы при ее про смот-
ре в брау зе ре. Раз ме ща ют обои с по мо щью па ра мет ра
те га BODY. Здесь uri – ад рес фай ла изо бра же ния.
Фо но вые изо бра же ния мож но за да вать для яче ек таб ли цы с по мо щью
это го же па ра мет ра, по ме щая его в тег соз да ния ячей ки таб ли цы
BACKGROUND=»uri»
TD.
Цве то вая па лит ра брау зе ра
При раз ра бот ке ги пер тек сто вых до ку мен тов ис поль зу ет ся R(ed)G(reen)
B(lue) цве то вая мо дель. В та кой мо де ли цвет об ра зу ет ся из крас ной, си ней
и зе ле ной со став ляю щих. Ка ж дая со став ляю щая за да ет оп ре де лен ную интен сив ность ба зо во го цве та. Ито го вый цвет – это сме ше ние ин тен сив ностей. За да ет ся цвет в ше ст на дца те рич ном фор ма те в ви де трех бай тов. Код
ка ж до го бай та из ме ня ет ся в пре де лах от 00 до FF. Цве то вая кон стан та должна на чи нать ся с пре фик са #.
В на стоя щее вре мя су ще ст ву ют оп ре де лен ные со гла ше ния по цве там
ги пер тек ста. Ка ж до му цве ту по став ле на в со от вет ст вие оп ре де лен ная сим-
29

воль ная кон стан та. В табл. 2.4 при во дят ся ос нов ные цве та па лит ры ги пертек ста.
Таб ли ца 2.4
Стан дарт ные цве та
Сис тем ная кон стан та, цвет RGB зна че ние Сис тем ная кон стан та RGB зна че ние
Black (чер ный)
Navy (мор ская вол на)
Silver (се рый)
Blue (го лу бой)
Maroon (фио ле то вый)
Purple (пуп рпур ный)
Red (крас ный)
Fuchsia (ры жий)
#000000
#000080
#c0c0c0
#0000ff
#800000
#800080
#ff0000
#ff00ff
Green (зе ле ный)
Teal (тем ная мор ская
вол на)
Lime (яр ко зе-ле ный)
Aqua (про зрач ная
мор ская вол на)
Olive (олив ко вый)
Gray (тем но-се рый)
Yellow (жел тый)
White (бе лый)
#008000
#008080
#00ff00
#00ffff
#808000
#808080
#ffff00
#ffffff
Цвет мо жет быть ис поль зо ван в па ра мет ре COLOR те гов HR, FONT. В па-
ра мет рах те га
BODY).
га
BODY: TEXT, BGCOLOR, LINK, VLINK (см. опи са ние те-
Цвет мож но ис поль зо вать при ра бо те с таб ли ца ми. Так, в тег TD фор ми-
ро ва ния ячей ки таб ли цы мож но вклю чить па ра метр:
<TD BGCOLOR=”цвет”></TD>, па ра метр мож но так же по мес тить
TABLE и за дать цвет для всей таб ли цы. Кро ме то го, в тег TABLE мож-
в тег
но по мес тить па ра метр
ли цы.
BORDERCOLOR и за дать цвет ли ни ям раз граф ки таб-
Кон троль ные во про сы
Ка кие со вре мен ные язы ки раз мет ки ис поль зу ют ся для соз да ния ин фор-1.
ма ци он ных ре сур сов?
Как ад ре су ет ся се те вой ре сурс с по мо щью URI-ад ре са?2.
Пе ре чис ли те струк тур ные те ги и их осо бен но сти.3.
Как стро ит ся раз мет ка, ес ли нуж но соз дать текст с крас ной стро кой и за-4.
дан ным пе ре но сом слов?
Как вы пол ня ет ся вы рав ни ва ние тек ста на стра ни це?5.
30
Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]
