Файл: Особенности алгоритмизации при разработке WEB-приложений.pdf
Добавлен: 29.03.2023
Просмотров: 76
Скачиваний: 1
HTML-документы мо?гут быть соз?даны при по?мощи любого те?кстового ре?дактора ил?и специализ?ированных HT?ML-редакторо?в и конвертеро?в.
C другой сторо?ны можно ис?пользовать с?пециальные про?граммы – редакторы HT?ML текстов.
2.2 Структура документа
Основными ко?нструкциям?и языка яв?ляются тэг?и [1, 2]. Все тэги HT?ML начинаютс?я с "<" (ле?вой углово?й скобки) и з?аканчиваютс?я символом ">" (?правой угло?вой скобки). К?ак правило, су?ществует ст?артовый тэг и з?авершающий тэг.
<title> Заголово?к документ?а </title>
Завершающий тэ?г выглядит т?ак же, как ст?артовый, о?н отличаетс?я от него пр?ямым слэше?м перед те?кстом внутр?и угловых с?кобок. Некотор?ые тэги, такие, как <?hr> (тэг, о?пределяющи?й горизонт?альную лин?ию), не требу?ют завершающего тэ?га.
HTML не ре?агирует на ре?гистр симво?лов, на си?нтаксис. Тэ?ги либо распознаются бр?аузером, л?ибо нет.
Когда Web-бр?аузер получ?ает докуме?нт, он опре?деляет, ка?к документ до?лжен быть и?нтерпретиро?ван. Самый пер?вый тэг, котор?ый встречаетс?я в документе, до?лжен быть тэ?гом <html>. Просте?йший HTML-?документ бу?дет выглядеть та?к:
<html>
<head>
<title>.......</title>
</head>
<body>
……..
</body>
</html>
Рассмотрим основные эле?менты страницы.
Заголовочная част?ь документ?а <head> .
Элементы, н?аходящиеся в?нутри разде?ла head (кро?ме названи?я документа, записы?ваемого с по?мощью разде?ла title), не в?идны на экр?ане (во вс?яком случае, н?апрямую). Э?лементы, со?держащиеся внутр?и раздела he?ad документа, нужн?ы для того, чтоб?ы:
- Дать документу назв?ание.
- Определить от?ношения ме?жду нескол?ькими документ?ами.
- Дать указа?ние браузеру соз?дать форму д?ля поиска.
- Добавить д?инамическу?ю составляющую.
Стартовый тэ?г <head> по?мещается не?посредстве?нно перед тэ?гом <title>, а з?авершающий тэ?г </head> р?азмещается ср?азу после о?кончания о?писания до?кумента. Н?апример:
<head>
<title> Сп?исок сотру?дников </title>
</head>
Заголовок до?кумента <title> .
Раздел tit?le служит д?ля того, чтоб?ы дать доку?менту назв?ание. Оно об?ычно показыв?ается в заго?ловке окна 6p?ayзepa.
Название до?кумента за?писывается ме?жду тэгами <t?itle> и </t?itle> и представляет собо?й текстову?ю строку.
Тело докуме?нта <body>.
Тело докуме?нта должно н?аходиться ме?жду тэгами <body> и </body>. Атр?ибуты этого те?га определ?яют общий об?лик вашего до?кумента. О?ни перечислены в Т?аблице 1.
Таблица 1.
|
Атрибут |
Назначение |
|
background |
Указывает н?а URL-адрес изобр?ажения, которое ис?пользуется в к?ачестве фо?нового. |
|
bgcolor |
Определяет ц?вет фона до?кумента |
|
bgproperties |
Если устано?влено значе?ние fixed, фоновое изобр?ажение не про?кручивается. |
|
alink |
Определяет ц?вет активно?й ссылки. |
|
link |
Определяет ц?вет еще не прос?мотренной ссылки. |
|
vlink |
Определяет ц?вет уже прос?мотренной сс?ылки. |
|
text |
Определяет ц?вет текста. |
|
topmargin |
Устанавливает гр?аницу верх?него поля в пиксе?лах. |
|
leftmargin |
Устанавливает гр?аницу лево?го поля в п?икселах. |
Комментарии.
Как любой яз?ык, HTML поз?воляет вст?авлять в те?ло документ?а комментарии, котор?ые сохраня?ются при пере?даче докуме?нта по сет?и, но не отображаются браузером. С?интаксис ко?мментария:
<!-- Это ко?мментарий -->
Комментарии мо?гут встреч?аться в до?кументе где у?годно и в л?юбом количестве.
Элемент add?ress. Этот э?лемент слу?жит для иде?нтификации а?втора документа. Сюд?а же обычно по?мещаются с?ведения об а?вторских пр?авах. Этот э?лемент рас?полагается л?ибо в нача?ле, либо в с?амом конце до?кумента. Э?лемент address состо?ит из текст?а, помещен?ного между тэ?гами <address> и </?address>. Те?кст, заключе?нный между эт?ими тэгами, об?ычно показ?ывается в о?кне браузер?а курсивом.
Цветовое офор?мление доку?мента.
Если цвета сост?авных часте?й документ?а не опреде?лены авторо?м, то используются ц?вета по умо?лчанию. Он?и определя?ются устано?вками прогр?аммы просмотр?а. В HTML ц?вета опреде?ляются цифр?ами в шест?надцатерич?ном коде. Цветов?ая система б?азируется н?а трех осно?вных цвета?х – красно?м, зеленом и с?инем – и обоз?начается RG?B. Для каж?дого цвета з?адается шест?надцатеричное значен?ие в преде?лах от 00 до F?F, что соот?ветствует д?иапазону 0 – 255 в дес?ятичном исч?ислении. З?атем эти з?начения объе?диняются в о?дно число, перед которы?м ставится с?имвол #. Н?апример, ч?исло #800080 обоз?начает фио?летовый цвет. Д?ля простот?ы в HTML о?пределены 16 ст?андартных ц?ветов, которые вместе с и?х шестнадцатеричными ко?дами приве?дены в Таб?лице 2.
Таблица 2.
|
Цвет |
Код |
Цвет |
Код |
|
Black (чер?ный) |
#000000 |
Silver (серебряный) |
#C0C0C0 |
|
Maroon (те?мно-бордов?ый) |
#800000 |
Red (красн?ый) |
#FF0000 |
|
Green (зеле?ный) |
#008000 |
Lime (извест?ь) |
#00FF00 |
|
Olive (оли?вковый) |
#808000 |
Yellow (же?лтый) |
#FFFF00 |
|
Navy (темно-с?иний) |
#000080 |
Blue (сини?й) |
#0000FF |
|
Purple (фио?летовый) |
#800080 |
Fuchsia (фу?ксия) |
#FF00FF |
|
Teal (чиро?к) |
#008080 |
Aqua (аква) |
#00FFFF |
|
Gray (серы?й) |
#808080 |
White (бел?ый) |
#FFFFFF |
Атрибут bgco?lor отвечает з?а цвет фон?а документ?а. Атрибут te?xt определяет цвет те?кста докуме?нта. Атрибут l?ink используется бр?аузером дл?я показа е?ще непросмотре?нных ссыло?к. Атрибут v?link служит д?ля показа у?же просмотренных сс?ылок. Как пр?авило, их о?крашивают бо?лее темным отте?нком того же ц?вета, что и не?просмотрен?ные ссылки. Атр?ибут alink о?пределяет ц?вет ссылки, активно?й в текущи?й момент.
Установка по?лей.
Атрибут le?ftmargin уст?анавливает р?асстояние ме?жду левым кр?аем текста и ле?вым краем о?кна браузер?а, которое из?меряется в п?икселах. Атр?ибут topma?rgin служит д?ля установ?ки расстоя?ния между вер?хним краем те?кста и вер?хним краем о?кна браузер?а.
Специальные с?имволы.
Некоторые с?пециальные с?имволы не в?ходят в базо?вую часть т?аблицы кодо?в ASCII. К н?им относятс?я буквы алф?авитов част?и европейс?ких языков, м?атематичес?кие и некотор?ые другие с?имволы. Од?нако они то?же могут б?ыть введен?ы в ваш HT?ML-документ пр?и помощи с?имвола & (?амперсант) и и?мени симво?ла. Например, пробе?л:  .
2.3 Форматирование документов
Любые опуб?ликованные м?атериалы имеют опре?деленную стру?ктуру.
Разделение те?кста на абз?ацы.
Необходимо по?местить открывающ?ий тэг <p> в н?ачало каждо?го нового абз?аца вашего те?кста, и про?грамма прос?мотра отде?лит абзацы дру?г от друга пусто?й строкой. Ис?пользование з?акрывающего тэ?га </p> необ?язательно.
Атрибут al?ign, имеющ?ий значени?я, предста?вленные в Т?аблице 3. По у?молчанию происходит выр?авнивание по ле?вому краю [1, 6].
Таблица 3.
|
Значение |
Функция |
|
left |
Выравнивание те?кста по ле?вой границе окна бр?аузера. |
|
center |
Выравнивание по це?нтру окна бр?аузера. |
|
right |
Выравнивание по пр?авой грани?це окна браузер?а. |
В HTML нес?колько сто?ящих подря?д тэгов <p> не д?ают дополн?ительного пространства ме?жду абзаца?ми.
Перевод стро?ки
Для того чтоб?ы перейти н?а следующу?ю строку в л?юбом нужно?м вам месте текуще?й строки, в HT?ML существует тэ?г разрыва стро?ки <br>. О?н заставляет прогр?амму просмотр?а выводить сто?ящие после не?го символы с нач?ала новой стро?ки. В отлич?ие от тэга абз?аца, тэг <b?r> не доба?вляет пусту?ю строку.
Пример:
<body>
Эта и следу?ющая строка разделе?ны тэгом ко?нца абзаца
<p>
А эти две стро?ки разделены тэ?гом конца стро?ки.
<br>
Разница ви?дна?
</body>
Бывают случ?аи, когда воз?никает надоб?ность в опер?ации проти?воположного назначе?ния - запретить пере?вод строки. Те?кст, заключе?нный между тэ?гами <nobr> и </?nobr>, будет г?арантирова?нно распол?агаться в о?дной строке без пере?носа на дру?гую.
Во избежан?ие неприят?ностей с э?лементом <?nobr> вы мо?жете предложить браузеру ч?итателя ал?ьтернативное место пере?вода строки при помо?щи тэга <wb?r> ("мягки?й" перевод стро?ки). Эта и?нструкция бу?дет выполне?на только в то?м случае, ес?ли браузер не с?может вывест?и вашу фразу о?дной строкой в преде?лах окна прос?мотра.
Пример:
<nobr> Дан?ная строка я?вляется са?мой длинно?й строкой до?кумента,<wbr> котор?ая не допус?кает какого-либо р?азбиения г?де бы то н?и было </nob?r>
В данном с?лучае пере?вод строки бу?дет произве?ден только пос?ле запятой.
Структурирование те?кста.
Для удобст?ва читателе?й текст ре?комендуетс?я разбить н?а логическ?ие части, кажда?я из которых посвя?щена отдел?ьной теме.
Заголовки.
Элемент "з?аголовок" я?вляется ко?нтейнером и поэто?му должен и?меть открывающий (<?h1>) и закр?ывающий (</?h1>) тэги. HT?ML располагает шест?ью уровням?и заголовко?в: h1 (сам?ый верхний), h?2, h3, h4, h5 и h6 (с?амый нижний). Прогр?амма просмотр?а выводит к?аждый из н?их, но вы не мо?жете точно з?нать, в ка?ком именно в?иде. Это обсто?ятельство я?вляется част?ью философии HTML: в?ы, как автор, от?вечаете за со?держание, а ч?итатель опре?деляет окончательный об?лик докуме?нта. Предн?азначение з?аголовков – по?казать стру?ктуру вашего до?кумента. Точ?но так же, к?ак и в теге "?абзац", в з?аголовках мо?жно использо?вать атрибут a?lign.
Горизонтальные линии.
Элемент <h?r> позволяет про?вести рельеф?ную горизо?нтальную л?инию в окне бо?льшинства про?грамм прос?мотра. Этот тэ?г не являетс?я контейнеро?м, поэтому не требует з?акрывающего тэ?га. До и пос?ле линии а?втоматически вставл?яется пуст?ая строка.
Таблица 4.
|
Атрибут |
Назначение |
|
align |
Выравнивает по кр?аю или центру; и?меет значе?ния left, ce?nter, right. |
|
width |
Устанавливает д?лину линии в п?икселах или про?центах от ш?ирины окна бр?аузера; в пос?леднем случ?ае добавляется сим?вол % |
|
size |
Устанавливает ш?ирину лини?и в пикселах. |
|
noshade |
Отменяет ре?льефность л?инии. |
|
color |
Указывает ц?вет линии. Ис?пользуется фор?мат RGB ил?и стандарт?ное имя. |
Пример:
<body>
<hr align=ce?nter>
<hr align=ce?nter width=100>
<hr align=ce?nter width=50%>
<hr align=ce?nter width =100 s?ize=5>
<hr align=ce?nter width =100 s?ize=5 color=red>
</body>
Использование пре?дварительно отфор?матированно?го текста.
Наиболее у?потребляем?ым являетс?я контейнер <p?re>. Текст в?нутри него мо?жет записываться в л?юбой форме. По?ддерживаютс?я также тэ?ги <p> и <b?r>. Универс?альность этого ко?нтейнера поз?воляет соз?давать таб?лицы и ров?ные колонк?и текста.
Текст внутр?и контейнер?а <pre> мо?жет содерж?ать любые э?лементы физического и ло?гического фор?матировани?я. Однако з?апрещено использование тэ?га <address> и тэ?гов заголо?вка.
Самым боль?шим недост?атком конте?йнера <pre> я?вляется воз?можность в?ывода префор?матированно?го текста то?лько монош?иринным шрифто?м.
Пример:
<pre>
HR ALIGN=C?ENTER
HR ALIGN=CENT?ER WIDTH=100
HR ALIGN=C?ENTER WIDT?H=50%
HR ALIGN=CENTER W?IDTH=100 S?IZE=5
HR ALIGN=C?ENTER WIDT?H=100 SIZE=5 COLOR=RED
</pre>
Цитата <bloc?kquote>.
Данный тэг пре?дназначен д?ля обозначе?ния в доку?менте цитат?ы из другого источни?ка. Текст, обоз?наченный тэ?гом <blockquote>, отсту?пает от ле?вого края доку?мента на 8 пробе?лов.
<body>
На открыти?и данной ко?нференции г?лава предст?авительств?а произнес:
<blockquote>
Сегодня од?ин из велич?айших дней д?ля нашей ко?мпании. <br>
</ blockquote>
</body>
При отобра?жении браузеро?м текст бу?дет выглядеть так:
Особенности а?лгоритмиза?ции на JavaScript при разработ?ке Web-приложений
2.4 Обзор возможностей языка JavaScript
Взаимодействие к?лиента и сер?вера в Интер?нете осущест?вляется с по?мощью запросо?в, посылае?мых клиенто?м серверу, и от?ветов сервер?а на запрос к?лиента [3, 4, 5]:
Его осно?ву составл?яют HTTP-сооб?щения, подразделяемые н?а:
- запрос (request) к?лиента к сер?веру;
- ответ (respo?nse) сервер?а клиенту.
Стандартный яз?ык разметк?и HTML поз?воляет лег?ко создават?ь статичные Web-страницы. По?льзователь не мо?жет менять и?х содержимое, не мо?жет взаимодействовать с н?ими. Для то?го чтобы с?делать стр?аницу по-н?астоящему интерактивной, ну?жен еще од?ин язык, в?ыполняемый в ко?нтексте бр?аузера, - с?криптовый язык.
Исследования р?аботы прило?жений интер?нета показ?али, что д?ля выполнения опре?деленных де?йствий пол?ьзователя нет необ?ходимости посто?янно обращ?аться к сер?веру - эти де?йствия мож?но реализо?вать на сторо?не клиента, ес?ли бы он поз?волял каки?м-то образо?м их запро?граммироват?ь. Так поя?вился встрое?нный в про?грамму прос?мотра Web-страниц – браузер - язык JavaScript, который р?асширил воз?можности яз?ыка размет?ки HTML, предоста?вляя разработчику воз?можность встр?аивать в до?кумент HTML код прогр?аммы, выполняющейся н?а клиенте.