![[New!]](../img/smallnew.gif){kind=small}
Набор специальных символов на Web-страницах
Формы Web-страниц
![[New!]](../img/smallnewr.gif){kind=small}
Примерная тематика вопросов итоговой к/р
Набор специальных символов на Web-страницах
Формы Web-страниц
Примерная тематика вопросов итоговой к/р
HTML – аббревиатура от HyperText Markup Language (язык гипертекстовой разметки). Является одним из простейших, но наиболее распространенных примеров языка теговой разметки.
Тегом (англ. tag) называют специальные маркеры, указывающие программе, что заключенная между открывающим и закрывающим тегами информацию нужно обрабатывать (интерпретировать) и/или выводить на экран особым образом.
Среди тегов можно выделить
В литературе можно найти различную запись этого слова: «тег», «тэг» или даже «таг».
В обобщенном виде можно говорить, что для теговых языков характерно использование ограниченного набора символов (256 или даже 128) для обозначения любого знака. Кроме того, тексту может быть присвоено практически любое форматирование, зависящее только от возможностей программы, используемой для вывода на экран.
Примерами теговых форматов файлов могут служить RTF (Reach Text Format), TEX (от греч. «искусство», «мастерство») и, конечно, SGML (Standard Generalized Markup Language), подмножеством (а точнее основой) которого является и сам HTML.
HTML-документ начинается и заканчивается тегом HTML, указывающим браузеру на свое содержание.
Далее, весь документ делится на две части: заголовок и тело, выделяемые парными
тегами <HEAD></HEAD> и <BODY></BODY> соответственно.
Заголовок документа может не содержать ничего, но обычно туда включается, как минимум, тег
<TITLE></TITLE>, задающее документу название, выводимое в окне браузера.
Кроме того там может размещаться множество мета-тегов (<META>), атрибуты
которых дают браузеру информацию о документе. Это – кодовая страница, описание, ключевые слова, дата изменения,
переадресация на другую страницу и многое другое.
В заголовок могут также вставляться скрипты и стилевые таблицы.
Пример простейшей структуры HTML-документа:
<HTML> <HEAD> <TITLE>Это заголовок окна</TITLE> </HEAD> <BODY> Здесь будет размещено все, что нужно отобразить на экране. </BODY> </HTML>
Тег <BODY> может содержать довольно много атрибутов.
Наиболее важная информация на Web-страницах представлена в виде текста. В связи с этим теги форматирования текста играют особую роль.
Эта процедура производится парным тегом <P></P>. Нужно отметить, что несмотря на спецификацию, возможно использование только одного из тегов. В этом случае открывающий тег задаст начало абзаца, который сам закончится, когда встретятся такие объекты, как заголовок, список или таблица. Закрывающий же тег показывает, что последующие символы должны восприниматься как новый абзац.
Стандартно, по умолчанию абзацы отделяются друг от друга пустой строкой и выравниваются влево.
Выравнивание абзаца можно изменить, воспользовавшись атрибутом ALIGN.
| Тег | Результат |
| <P ALIGN="LEFT"> (значение по умолчанию) | Образец выравнивания текста Образец выравнивания текста |
| <P ALIGN="RIGHT"> |
Образец выравнивания текста Образец выравнивания текста |
| <P ALIGN="CENTER"> |
Образец выравнивания текста |
| <P ALIGN="JUSTIFY"> |
Образец выравнивания текста Образец выравнивания текста |
Выравнивание по формату значительно привычнее для русскоязычных текстов, но из-за отсутствия возможности автоматической расстановки переносов, такой документ может выглядеть довольно неряшливо.
Частичное решение ситуации может быть получено вставкой символов скрытых переносов: «­». Они будут появляться только когда потребуется перенести слово в этом месте. Вместе с тем, их массовая растановка слишком трудоемка.
При использовании заголовков в тех случаях, когда их внешний вид не задан принудительно, следует быть аккуратным. Браузер пользователя отобразит их в соответствии со своими настройками.
Все теги, связанные с начертанием, представлены обязательной к использованию парой, в которую заключается изменяемый текст.
По правилам, если текст имеет несколько начертаний, то теги разного назначения не должны перекрещиваться:
НЕПРАВИЛЬНО: <B><I>Полужирный курсив</B></I>;
ПРАВИЛЬНО: <B><I>Полужирный курсив</I></B>
То есть, если открывающий тег стоит первым, то закрывающий должен быть последним. В нашем же неправильном примере, закрывающий тег полужирного начертания оказался между тегами курсива.
Чрезвычайно важные теги для оформления математических, химических, физических текстов, а также в большинстве случаев оформления научных документов. Представлены двумя вариантами:
Списки могут быть трех основных типов: маркированные, нумерованные и списки определений.
Маркированные и нумерованные списки создаются по одинаковой схеме.
Создается контейнер списка парой тегов <ul></ul> (Unordered List) и <ol></ol> (Ordered List), соответственно. Далее, каждый пункт отделяется парой тегов <li></li>.
Особый вид списка, оформляемый «флажком», то есть когда весь текст кроме первой строки сдвинут вправо.
Контейнер списка описывается тегом <dl></dl>, строки терминов – <dt></dt> и строки определений – <dd></dd>
Гиперссылка – объект на Web-странице, обеспечивающий переход к другим документам или местам текущего документа при щелчке на нем левой клавишей мыши.
Документом может быть файл любого формата, расположенный как в WWW, так и в Интранете или на локальном компьютере.
В тех случаях, когда при создании гиперссылки использован параметр onClick, нажатие может приводить к запуску программы одном из языков программирования, используемых для протокола HTTP, например, JavaScript, VBScript или PHP.
Для отображения гиперссылки используется парный тег <A></A>. Закрывающий тег является обязательным. В зависимости от назначения, открывающий тег будет содержать один из обязательных атрибутов.
Наиболее распространенным вариантом использования является ссылка на другой документ. Она имеет следующий синтаксис:
<A HREF="URL">Подчеркнутый текст ссылки</A>
Любой текст, находящийся между тегами, отображается Web-браузером специальным образом. По умолчанию, он выделяется синим цветом с подчеркиванием. Текст, обозначающий URL, не отображается браузером, а используется только как адрес для выполнения перехода при активизации ссылки (обычно при щелчке мыши). Его можно увидеть в строке состояния, если навести курсор мыши на ссылку.
Под URL (Uniform Resource Locator), подразумевается адрес, который однозначно указывает, на что производится переход. Так как он представляет собой текстовую строку, URL обязательно приводится в кавычках. Все, что располагается между открывающим и закрывающим тегом будет выводимой на экран гиперссылкой. По спецификации HTML 4.0, в литературе может использоваться термин URI (Uniform Resource Identifier). Не следует забывать, что значительная часть Интернет-серверов рассматривает имена файлов и папок с учетом регистра. Так что, для того чтобы избежать распространенной ошибки с неработающей ссылкой, нужно тщательно следить за регистром набираемых символов.
Адрес может быть двух видов: абсолютным и относительным.
Абсолютный адрес должен состоять из нескольких обязательных частей, которые можно обозначить схематично:
method://ServerName[:port]/PathName#anchor
Разберем отдельные части адреса.
Относительный адрес следует предпочесть для всех случаев, когда ссылка указывается на тот же ресурс, то есть файлы размещаются в той же папке или ее подпапках. Преимущество такого подхода очевидно. Где бы мы не разместили свои страницы (на локальном компьютере или в сети), все гиперссылки будут работать правильно без каких-либо исправлений.
Существует два способа задания относительной ссылки.
В первом случае, в области заголовка (HEAD) документа приводится тег BASE, относительно которого и будут просчитываться все ссылки. Например,
<BASE href="http://www.microsoft.com/">
Теперь все ссылки, не имеющие в адресе "http://", будут искаться на сервере www.microsoft.com.
Во втором случае, размещение по умолчанию оценивается относительно текущего документа.
Для того, чтобы сделать ссылку на файл в текущей папке (Файл⇒FileName), потребуется создать ссылку вида
<A HREF="FileName">Текст ссылки</A>,
где FileName – имя файла с расширением, но без каких бы то ни было данных о пути доступа к нему.
Для ссылок между папками, построим схему размещения файлов, когда в корневом каталоге находится файл FileName и две папки Sub1 и Sub2, содержащие соответственно файлы FileName1 и FileName2:
![[Структура папок]](img/linkdir.gif)
<A HREF="Sub1/FileName1">Переход FileName⇒FileName1</A>.
То есть, мы даем команду опуститься в папку Sub1 и обратиться в ней к файлу FileName1.
Для ссылки из этого файла (FileName1) на предыдущий, нам потребуется наоборот, подняться на один уровень выше
(../) и адрес приобретет следующий вид:
<A HREF="../FileName">Переход FileName1⇒FileName</A>.
Наконец, ссылка между папками: нужно подняться в Root (../), а затем спуститься в Sub2:
<A HREF="../Sub2/FileName2">Переход FileName1⇒FileName2</A>.
Кроме ссылок на другие документы, нередко бывает полезно создавать ссылки на разные части текущего документа. В качестве классического примера можно привести содержание, которое можно быстро просмотреть, в отличие от длинного документа.
Чтобы такая ссылка заработала, нужно в точке назначения создать метку (её еще называют маркером, указателем или якорем [от английского anchor]). Для этого используют все тот же тег гиперссылки, но с атрибутом NAME:
<A NAME="part2"></A>.
В приведенном примере указателю присвоено имя «part2». Чтобы попасть в это место, достаточно создать гиперссылку следующего вида:
<A HREF="#part2">Переход на метку «part2»</A>.
Обратите внимание, что перед именем стоит решетка (диез), что дает
команду браузеру искать в документе метку с таким названием.
После перехода, строка, в которой стоит маркер данного раздела (обычно, первая строка раздела или заголовок раздела) будет размещена на первой строке окна браузера (если данная строка ещё не присутствует на экране).
При необходимости сослаться на метку другого документа, в конец его URL добавляется имя метки после решетки. Например,
<A HREF="index.html#part2">Переход на метку «part2» в файле index.html</A>.
<A HREF="mailto:НазваниеЯщика@сервер.ru">Текст, который увидит пользователь</A>.
Использованием данного атрибута не следует пренебрегать, так как он позволяет добавлять разнообразные пояснения, облегчающие чтение текста пользователем. Он особенно удобен для пояснения пунктов меню, название которых во многих случаях должно быть довольно лаконичным, что не всегда позволяет точно выразить мысль.
Так как данный текст может быть весьма объемным, его иногда используют для создания псевдоссылок. В них вместо URL используется диез с меткой, которой нет в данном документе, что не приводит к сбою или перемещению по документу, но позволяет почитать комментарий к слову. Таким образом можно сделать терминологический глоссарий, не создавая специальной страницы и не утомляя читателя лишними переходами.
<A HREF="#0" TITLE="Текст всплывающей подсказки">Текст на странице</A>.
С точки зрения нетикета, лучше, если такие ссылки будут выглядеть несколько иначе, чем обычные: Пример псевдоссылки
Еще один пример – пункт верхнего меню «Связь» данного сайта.
Иногда возникает необходимость открыть документ, на который ведет ссылка не в текущем окне, а в новом. Как правило это связано с переходом на другой сайт, когда посетитель может больше не вернуться на вашу страницу, что нежелательно. Для этого нужно добавить в тег гиперссылки атрибут TARGET, которому присвоить зарезервированное значение "_blank".
<A HREF="URL документа" TARGET="_blank">Текст гиперссылки</A>.
Если ему присвоить другое значение, то будет создано окно, имеющее такое имя. А если оно уже существует, то документ откроется в этом окне, однако его активации не произойдет и пользователь может подумать, что ссылка не работает. Это – весьма распространенная в Интернете ошибка. Простейший случай ее возникновения – пропуск знака подчеркивания в начале слова или замене буквы "K" на "C" в его конце.
Аналогичный эффект будет получен в Internet Explorer, если щелкнуть на ссылке, удержифая клавишу Shift: Shift+click.
Бегущая строка может быть создана с помощью парных тегов <marquee> и </marquee> (нужно заметить, что в Netscape Navigator данный тег не поддерживается). Текст, заключенный между этими тегами будет двигаться (прокручиваться) справа налево:
Эта строка сделана без каких-либо дополнений и хорошо видно, что воспринимать ее довольно сложно.
Недостаточная функциональность тега компенсируется его многочисленными атрибутами.
| <marquee width=150 direction="left">Налево</marquee> | |
| <marquee width=150 direction="right">Направо</marquee> | |
| <marquee width=150 direction="up">Вверх</marquee> | |
| <marquee width=150 direction="down">Вниз</marquee> |
Кроме того, для улучшения оформления можно использовать атрибут style, в частности, для задания рамки (style="BORDER: red 3px solid").
Прокручиваемый текст, заключенный между тегами, можно оформить при помощи любых тегов форматирования или создать в нем гиперссылки.
Для улучшения читабельности текста можно использовать встроенные функции событий onmouseover=this.stop(); и onmouseout=this.start();, соответственно приостанавливающий прокрутку при наведении на строку курсора мыши и вновь запускающий ее после отведения курсора в сторону. Эта возможность использована во всех примерах, кроме первого.
Стандартными форматы файлов для Интернета являются JPEG (JPG), GIF и PNG. Именно они выбраны в связи с высокой степенью сжатия изображений.
Вместе с тем, каждый из форматов имеет свои особенности, достоинства и недостатки, что и обусловливает сферу их применения.
Ниже приведены примеры иллюстраций разного типа в разных форматах с размерами результирующих файлов.
Для флага (120×80 пикселей) использованы чистые красный и синий цвета, файлы JPEG сохранены со средней степенью сжатия (6 из 12). Натюрморт имеет размеры 200×200 пикселей. Оба изображения
восьмиразрядные, в цветовой схеме RGB.
| JPEG | GIF | PNG |
![[JPEG]](img/flag.jpg) |
![[GIF]](img/flag.gif) |
![[PNG]](img/flag.png) |
| 12192 б | 260 б | 294 б |
![[JPEG]](img/natyutm.jpg) |
![[GIF]](img/natyutm.gif) |
![[PNG]](img/natyutm.png) |
| 47330 б | 20218 б | 85761 б |
В натюрморте, сохраненном в формате GIF, хорошо виден эффект пастеризации (в левом нижнем углу).
Для отображения изображений на веб-странице используется непарный тег <IMG>. Он имеет единственный обязательный параметр src, который содержит адрес файла с картинкой.
<img src="img/flag.jpg" alt="[Флаг]">
Если вывод изображения осуществляется между тегами гиперссылки (<a>), то изображение становится гиперссылкой.
В большинстве случаев изображение, непригодно для непосредственного использования на Web-страницах. Сначала графика должна быть оптимизирована. Это делается с целью уменьшения сетевого трафика за счет выбора оптимального формата файла, размеров, разрешения и количества цветов иллюстрации.
Изображение, предназначенное для вывода на экран монитора, обычно имеет разрешение 72 ppi (dpi). Это число не случайно. Оно было расчитано из разрешения монитора VGA (800×600 точек), которое при расчете относительного разрешения дает примерно 72 ppi. И, хотя разрешение абсолютного большинства современных мониторов не превышает 120 ppi, в качестве максимальной величины разрешения следует выбирать 150 ppi.
При использовании данной технологии, изображение является не просто гиперссылкой. Результирующий адрес перехода зависит от того, на какой области картинки был сделан щелчок. Такой подход не только очень привлекателен, но и незаменим во многих случаях: карта местности, хорошо знакомые изображения.
Чтобы включить поддержку карты для изображения, необходимо добавить дополнительный параметр USEMAP в тег IMG:
<IMG SRC="адрес источника" USEMAP="адрес#имя файла карты">
Описание карты может содержаться в самом файле иллюстрации, но такой вариант значительно сложнее для рядового пользователя, в связи с чем рассмотрим сохранение карты в виде отдельного текстового фрагмента нашего HTML-файла.
Общий синтаксис карты заключается в создании парным тегом <MAP></MAP> контейнера, включающего описание каждой отдельной области:
<MAP NAME="map_name"> <AREA [SHAPE="shape"] COORDS="x,y,..." [HREF="адр.источника"]|[NOHREF] [TITLE="Подск"]> <AREA [SHAPE="shape"] COORDS="x1,y1,..." [HREF="адр.источника1"]|[NOHREF] [TITLE="Подск1"]> ... </MAP>
<MAP NAME="map_test"> <AREA SHAPE="circle" COORDS="33,30,15" HREF="it_DM_abbr.html" TITLE="Область-круг - аббревиатуры" TARGET="_blank"> <AREA SHAPE="rect" COORDS="100,10,120,50" HREF="it_DM_abbr.html" TITLE="Область-прямоугольник - аббревиатуры" TARGET="_blank"> <AREA SHAPE="poly" COORDS="155,34,173,15,191,34,173,52" HREF="it_DM_abbr.html" TITLE="Область-ромб - аббревиатуры" TARGET="_blank"> </MAP> <IMG SRC="img/map.gif" USEMAP="#map_test">
В данном случае подсказка будет выводиться при попадании на прямоугольник вокруг фигуры, но гиперссылка сработает только при наведении курсора точно на фигуру. Документ про аббревиатуры откроется в новом окне.
Для вывода на странице таблицы нужно создать ее контейнер с помощью пары тегов <TABLE></TABLE>, между которыми вставляется описание таблицы.
ВНИМАНИЕ! Все теги в таблице – парные, то есть обязательно наличие как открывающего, так и закрывающего тега!
Чтобы показать таблицу с рамкой (по умолчанию она не выводится), нужно в открывающем теге указать толщину линии в пикселах, задав значение атрибута BORDER:
<TABLE BORDER=1>
Описание таблицы делается с помощью тега строки (<TR></TR>) и вставленных в него тегов ячеек (<TD></TD>).
Так, приведенный ниже исходный текст выведет таблицу из двух строк по две ячейки (то есть из двух колонок).
<TABLE BORDER=1>
<TR>
<TD>A</TD>
<TD>B</TD>
</TR>
<TR><TD>C</TD><TD>D</TD></TR>
</TABLE>
| A | B |
| C | D |
Текст специально отформатирован только для первой строки таблицы. Такой вариант наиболее удобен для тех случаев, когда ячейки содержат сравнительно большой текст. Зато во втором случае намного удобнее последовательно прочитывать каждый элемент при существенно меньшем количестве строк на экрана (компактность).
Определяется атрибутом WIDTH тега TABLE или TD. Может быть выражена в
пикселях (без размерности) или в процентах (после числового значения ставится знак "%").
Для ячеек нет необходимости указывать значения во всей таблице. Достаточно сделать это в первой строке, а остальные сами сформируются вслед за ней.
ПРИМЕР:
<TABLE BORDER=1 WIDTH=200> <TR> <TD WIDTH=100>A</TD> <TD WIDTH=100>B</TD> </TR> <TR><TD>C</TD><TD>D</TD></TR> </TABLE>
| A | B |
| C | D |
Для того, чтобы выделить отдельные таблицы, строки или ячейки, в тегах, которые открывают соответствующий объект можно использовать дополнительные атрибуты bordercolor (цвет рамки) и bgcolor (цвет фона).
В приведенном ниже примере сделаны следующие изменения:| A | B |
| C | D |
| E | F |
| A | B |
| C | D |
Фреймы (в литературе можно встретить термин кадры) позволяют разбить страницу на фрагменты, в которых может содержаться независимая информация. Фактически, можно получить страницы в страницах.
Фреймовая разбивка задается тегами контейнера <FRAMESET> </FRAMESET>. Для него характерно задание одного или пары обязательных атрибутов, описывающих число рядов и/или строк:
<FRAMESET ROWS="Описание" COLS="Описание"> </FRAMESET>.
"Описание" задает список значений в процентах, пикселах или относительных единицах, разделенных запятыми.
Файл с контейнером отличается от обычного тем, что не будет содержать тега <BODY>, но обязан содержать тег <HEAD></HEAD>, после которого и описывается контейнер.
Контейнеры <FRAMESET> могут быть вложены друг в друга. Более того, это просто необходимо в случае сложной структуры, когда в разных строках страницы содержится различное количество фреймов.
Для каждого фрейма в наборе страницы должен быть создан свой HTML-документ. Тег заголовка в этих документах не имеет смысла, так как считываться он будет из файла в котором задан контейнер фреймов.
Пример сложной страницы на основе фреймов
Если описание фрейма содержит атрибут присвоения ему имени, например,
<FRAME SRC="URL" name="MainPage">,
то появляется возможность загрузки новой страницы при помощи гиперссылки (из меню...) именно в этот фрейм:
<a href="URL1" TARGET="MainPage">Загрузить URL1 во фрейм MainPage</a>
Несмотря на свое кажущееся удобство, в современном Web-дизайне фреймы используются довольно редко. Основная причина этого – «загромождение» экрана набором фреймов и просмотр основного содержания страниц через сравнительно небольшое окошко. Хотя для определенных случаев именно такой вариант и должен рассматриваться как предпочтительный.
В большом числе случаев подготовки страниц требуется ввод специальных символов, которые отсутствуют на клавиатуре. Особенно это относится к сайтам научной тематики, хотя грамотное оформление без них практически невозможно для любого текста. Вот некоторые примеры наиболее важных символов:
Более подробную (исчерпывающую) информацию можно получить, перейдя по ссылке (страницы на английском языке!):
Дополнительные символы
Для того, чтобы автор страницы мог получить ответы на свои вопросы от читателей его сайта, существует технология создания форм. К сожалению, она изначально ориентирована на работу с Web-сервером. Из-за этого и дополнения мер безопасности, получение данных формы зачастую весьма затруднено.
Вместе с тем, у разработчика остается возможность получить введенную информацию посредством отправки через электронную почту.
Для создания формы используется контейнер <FORM></FORM>, имеющий два основных атрибута: ACTION И METHOD.
При создании форм важно следить, чтобы не поместить (вложить) одну форму в другую
В качестве элементов ввода могут использоваться все те же основные варианты, что и при создании стандартных диалогов: текстовые поля, переключатели (радиокнопки), флажки, списки, кнопки. Все эти варианты реализуются при помощи трех тегов: <TEXTAREA>, <SELECT> и <INPUT>.
Данный элемент представляет собой поле для ввода информации любого типа, чаще текстового или числовых значений.
Контрольная работа будет заключаться в основном в записывании нужных тегов и/или атрибутов. В некоторых случаях потребуется выбрать правильные ответы из перечня (тест).
ПРОДОЛЖЕНИЕ СЛЕДУЕТ (но не для нерадивых старшеклассников)
