50533

Введение в язык разметки гипертекста версии

Книга

Информатика, кибернетика и программирование

Научиться использоватьосновные теги HTML принаписании страниц Web. Научиться форматироватьтекст средствами HTML. План Введение Языки разметки Создание файла HTML Основные теги Заголовки Стилевое оформление текста Гиперссылки Изображения Форматирование текста с помощью тега FONT Специальные символы горизонтальные линейки и другие разделители Обзор ресурсов Интернет и Всемирной паутины Резюме Терминология Типичные ошибки программирования Внешний вид документа Хороший стиль программирования Упражнения для...

Русский

2014-01-25

5.06 MB

3 чел.

8

Введение в язык разметки

гипертекста версии 4

(HTML 4)

Цели

Познакомиться со структурой
документа
HTML.

Научиться использовать
основные теги
HTML при
написании страниц
Web.

Научиться форматировать
текст средствами
HTML.

Научиться работать
с графикой в своих
Web-страницах.

Уметь создавать и
использовать гиперссылки
для перехода на другие
страницы
Web.


 

План

  1.  Введение
  2.  Языки разметки
  3.  Создание файла HTML
  4.  Основные теги
  5.  Заголовки
  6.  Стилевое оформление текста
  7.  Гиперссылки
  8.  Изображения
  9.  Форматирование текста с помощью тега <FONT>

Специальные символы, горизонтальные линейки и другие разделители

  1.  Обзор ресурсов Интернет и Всемирной паутины

Резюме Терминология * Типичные ошибки программирования Внешний вид документа Хороший стиль программирования Упражнения для самоконтроля Ответы к упражнениям для самоконтроля Упражнения

3.1. Введение

Добро пожаловать в мир удивительных возможностей, созданный Всемирной паутиной! В настоящий момент Интернету уже тридцать лет, но ранее он не был так популярен как сейчас, пока в 1990-х годах не была изобретена Всемирная паутина, с появлением которой начался поистине взрывной рост возможностей Сети. Кажется, что новые разработки создаются почти каждый день, — темп нововведений просто невероятный по сравнению с тем, что мы наблюдаем в области других технологий. Изучая данную главу, вы начнете разрабатывать свои собственные Web-страницы. По мере освоения материала книги вы научитесь создавать все более и более привлекательные и мощные страницы Web. После того как вы познакомитесь с заключительной частью книги, вы уже сможете разрабатывать законченные Web-приложения.

Мы начнем изучение возможностей Web с рассмотрения языка HTML (Hypertext Markup Language Язык Разметки Гипертекста). HTML не является языком процедурного программирования, как языки С, Fortran, Cobol или Pascal. Скорее, это язык разметки для определения элементов страницы, чтобы браузер, такой как Microsoft Internet Explorer или Netscape Communicator, смог должным образом отобразить страницу на мониторе компьютера.

В этой главе мы расскажем об основах создания Web-страниц с помощью языка HTML. Мы напишем множество простых страниц Web. В последующих главах мы рассмотрим более сложные возможности HTML, такие как таблицы, которые, в частности, используются для представления и обработки информации из баз данных.

В этой главе мы рассмотрим простые теги HTML и их атрибуты. Основная идея использования HTML заключается в разделении представления документа (т.е. способа отображения браузером документа на экране монитора) и структуры этого документа. В последующих главах книги мы подробно рассмотрим этот вопрос.

 

3.2. Языки разметки

HTML является языком разметки и используется для форматирования текста и данных. Применяемый в этом языке способ «разметки» информации отличается от принятого в традиционных языках программирования. В следующих нескольких главах мы обсудим в деталях разметку HTML. Пока мы не будем рассматривать управляемое событиями программирование. И только когда мы рассмотрим JavaScript и динамический HTML, мы покажем, как можно «оживить» написанные на HTML страницы Web с помощью методов управляемого событиями программирования.

В HTML для разметки текста используются элементы, которые вводятся в текст при помощи тегов. Тегом называется ключевое слово, заключенное в угловые скобки. Например, элемент HTML, используемый для указания на то, что данный документ является страницей Web, которая должна отображаться браузером, начинается с открывающего тега <HTML> и заканчивается закрывающим тегом </HTML>, как показано на рис. 3.1.

Хороший стиль программирования 3.1

Теги HTML не чувствительны к регистру. Тем не менее, для улучшения восприятия текста, желательно использовать символы в одном регистре. Мы используем верхний регистр, что, как нам кажется, предпочтительнее, так как позволяет выделять теги на фоне остального текста.

Типичная ошибка программирования 3.1

Пропуск закрывающих тегов для элементов, в которых они предусмотрены, является синтаксической ошибкой, в результате которой форматирование и внешний вид вашей страницы может чрезвычайно сильно измениться. Тем не менее, в отличие от традиционных языков программирования, синтаксическая ошибка в HTML обычно не  приводит к полной  остановке отображения страницы браузером.

Элементы HTML используются для разного рода форматирования страницы. На протяжении следующих двух глав мы расскажем о многих, часто используемых элементах и о том, каким образом их нужно применять.

3.3. Создание файла HTML

В этой главе мы будем создавать страницы HTML путем редактирования исходного кода. Мы будем создавать файлы HTML, которые также называются HTML-документами, при помощи обычного текстового редактора. В главе 6 мы рассмотрим пакет FrontPage Express, используемый для визуального создания Web-страниц. При работе с ним не возникает необходимость непосредственного, ручного редактирования кода HTML.

Мы будем использовать встроенный в Windows текстовый редактор Блокнот (Notepad). Найти его можно на панели Стандартные (Accessories) списка Программы (Program) в меню Пуск (Start).

Вместо этого редактора, вы можете использовать бесплатный редактор кода HTML, называемый HTML-Kit. Скачать его можно с сайта http://www.chami.com/html-kit. Такие программы, как эта, могут иметь некоторые полезные функции, например могут выполнять проверку кода и упрощать выполнение повторяющихся действий. В главе 7 мы также рассмотрим программу Microsoft Visual InterDev, которая может быть использована как для прямого редактирования кода HTML, так и для визуальной разработки более сложных Web-приложений.

Все HTML-файлы обычно имеют расширение .htm или .html (это зависит от программного обеспечения сервера). Во времена, когда была разработана первая  версия HTML, большинство персональных

компьютеров работали под управлением операционных систем Windows 3.1 и DOS, файлы которых могли иметь расширения, состоящие только из трех символов. В последних версиях Windows в расширении имени файла разрешается использовать большее число символов. В результате общепринятым расширением в последнее время стало расширение .html. Мы рекомендуем вам использовать в именах всех HTML-файлов расширение .html.

Хороший стиль программирования 3.2

Старайтесь подбирать файлам такие имена, которые как-то описывают их назначение. Это поможет вам быстрее ориентироваться в своих страницах. Такие имена будет проще запомнить вашим клиентам, и может быть, они будут чаще заглядывать на ваш сайт. Например, если в вашем документе HTML идет речь о каких-то товарах и продуктах, вы можете назвать его именем products.html.

Как уже было сказано, ошибки в программах, написанных на традиционных языках программирования, таких как С, C++ или Java, часто приводят к фатальным ошибкам и остановке выполнения программы. Ошибки в HTML-коде обычно не приводят к таким необратимым последствиям. Браузер продолжит процесс отображения страницы после возникновения ошибки, но, возможно, при этом будет получен не тот результат, на который вы рассчитывали. В наших «типичных ошибках программирования» и «советах по отладке и тестированию» мы будем рассматривать распространенные ошибки HTML, а также способы их обнаружения и исправления.

Файл вашей домашней страницы (первый из HTML файлов, который пользователь видит на экране, когда заходит на ваш сайт) должен называться именем index.html. Делается это вот почему: когда браузер не находит в каталоге указанного пользователем файла, то по умолчанию Web-сервер возвращает файл index.html (хотя на том сервере, который вы используете, может применяться другое имя отображаемого по умолчанию файла), если таковой имеется в каталоге. Например, когда вы набираете в браузере строку ресурса http://www.deitel.com, то в ответ сервер вышлет вашему браузеру файл http: //www.deitel. com/index.html.

3.4. Основные теги

На рис. 3.1 приведен HTML-файл, отображающий одну строку текста.

Рис. 3.1. Простейший HTML файл (часть 1)

Рис 3.1. Простейший HTML файл (часть 2)

Тег в строке 1

         <HTML>

сообщает браузеру о том, что за открывающим тегом <HTML> и вплоть до закрывающего тега </HTML> (строка 15) следует текст HTML. Файл HTML всегда должен начинаться с тега <HTML> в первой строке документа и заканчиваться тегом </HTML> в последней строке.

Хороший стиль программирования 3.3

Всегда включайте в начало и конец вашего HTML-документа теги <HTML>...</HTML>. Включайте в код вашего документа комментарии. Комментарии в HTML заключаются в теги <!--...-->. Они помогут другим программистам разобраться в вашем коде, помогут, в частности, при отладке. Такие комментарии могут содержать в себе много полезной информации, которая браузером отображаться не будет. Они также помогут вам вспомнить свой собственный код, если вы не работали с ним какое-то время.

Первые комментарии, созданные нами, находятся в строках 3 и 4

<!--  Рис.   3.1:  main.html      -->

<!--  Наша  первая Web-страница     -->

Комментарии в HTML всегда начинаются с тега <!-- и заканчиваются тегом -->. Текст и теги, помещенные внутри тегов комментария, браузером игнорируются. Во всех наших примерах мы будем включать строки комментариев в начало каждого HTML-документа и указывать в них номер примера, имя файла и давать краткое описание примера. Кроме того, мы будем включать в код примера дополнительные комментарии, особенно, когда речь будет идти о новых возможностях.

Каждый файл HTML подразделяется на две основные части — элемент заголовка, который содержит общую информацию о документе, и тело документа, в которое помещается содержательная часть страницы. Информация из заголовка страницы не отображается в окне браузера, но может быть доступна пользователю с помощью других средств.

В строках 6-9

<HEAD>

<TITLE>Kaк  программировать для Интернет  и WWW  -

Добро пожаловать!</TITLE>

</HEAD>

находится секция заголовка нашей Web-страницы. Указание заголовка является обязательным требованием для каждого HTML-документа. Текст заголовка вводится в страницу Web при помощи парных тегов <TITLE>...</TITLE>, помещаемых внутри заголовочной части страницы.

Хороший стиль программирования 3.4

Старайтесь придерживаться каких-то единых правил наименования страниц вашего сайта. Например, если ваш сайт называется «Мой Web-сайт», то для страницы, содержащей ссылки, можно было бы выбрать заголовок «Мой Web-сайт Ссылки» и т.п. Посетителю вашего сайта будет проще ориентироваться в нем, если вы будете следовать этому простому правилу при выборе имен заголовков страниц.

Итак, в элементе TITLE задается имя вашей Web-страницы. Обычно заголовок страницы отображается на цветном фоне в полосе в верхней части окна браузера. Этот же заголовок будет использоваться как текстовый идентификатор вашей страницы, если пользователь добавит ее в список Favorites (Избранное) своего браузера. Помимо этого, заголовки страниц используются поисковыми системами при поиске и составлении каталогов; таким образом, правильный выбор названий страниц может привлечь на ваш сайт большее количество заинтересованных посетителей.

В строке 11 тег

<BODY>

открывает элемент BODY. В тело документа HTML помещается то содержание, которое должно отображаться браузером. Сюда входят текст, изображения, гиперссылки, формы и т.п. Позже в этой главе мы обсудим много различных элементов, которые могут включаться в элемент BODY. В этих элементах можно заказывать цвет фона, цвет ссылок и тип шрифта. Пока мы будем использовать простейшую форму элемента <BODY>...</BODY>. Напоминаем вам, что вы не должны забывать указывать в конце документа закрывающий тег </BODY> перед закрывающим тегом </HTML>.

Для размещения текста в HTML документе используются различные элементы. В строке 13 мы видим элемент параграфа:

<Р>Добро пожаловать на наш Web-сайт!</Р>

Весь текст, помещенный между тегами <Р>...</Р>, образует один параграф. Этот параграф будет размещаться отдельно от остального материала страницы; он будет отделяться пустыми строками, вставляемыми до и после текста параграфа. Заданный в строке 13 HTML-текст будет отображаться браузером, как показано на рис. 3.1.

Код нашего примера заканчивается строками 15 и 16:

</BODY> </HTML>

Эти два тега закрывают раздел тела документа и сам HTML-документ в целом.
Как уже говорилось ранее, последним тегом в
HTML-документе должен быть тег
</HTML>, который служит признаком окончания HTML-кода. Закрывающий тег
</BODY> помещается перед тегом </HTML>, потому что тело документа должно
находиться внутри секции
HTML. Поэтому тело документа должно быть закрыто
перед тем, как будет закрыт раздел
HTML.

3.5. Заголовки

Заголовки являются простым средством разметки текста, а именно изменения его размера в зависимости от «уровня» заголовка. Обычно используются шесть уровней заголовков (начиная от H1 и кончая Н6) для выделения новых разделов и подразделов страницы. В примере, показанном на рис 3.2, использованы заголовки различных уровней, об относительных размерах которых вы можете судить по приведенному на этом же рисунке изображению этой страницы в браузере. Заметим, что реальные размеры текста каждого заголовочного элемента выбираются браузером и могут значительно изменяться в различных браузерах. Тем не менее вы можете «управлять» размерами, а также и другими атрибутами заголовков, но об этом мы поговорим позже.

Рис. 3.2. Пример использования заголовков Н1-Н6

Хороший стиль программирования 3.5

Добавление комментариев в правой части коротких строк HTML — лучший способ пояснения кода страниц

В строке 13

<CENTER>

используется элемент CENTER, который центрирует по горизонтали в окне браузера содержание, заключенное между тегами <CENTER> и </CENTER>. Большинство элементов HTML-страницы по умолчанию выравниваются по левому краю окна. Позже мы обсудим, каким образом выполняется выравнивание отдельных элементов.

В строке 14

<Н1>Заголовок  1-го уровня</Н1>      <!-- Заголовок  1-го уровня  -->

используется заголовочный элемент HI, открывающийся тегом <Н1> и закрывающийся тегом </Н1>. Изображаемый стилем заголовка текст помещается между двумя этими тегами. Все шесть заголовочных элементов — с HI по Н6 — сделаны по единому образцу, но с последовательно уменьшающимся размером шрифта.

Внешний вид документа 3.1

Заголовок, помещенный в начало каждой Web-страницы, сразу даст клиентам вашего сайта представление о назначении каждой страницы

3.6. Стилевое оформление текста

В HTML текст может выделяться жирным шрифтом, подчеркиванием или курсивом (см. рис. 3.3).

Рис. 3.3. Изменение стиля текста в Web-страницах (часть 1)

Рис. 3.3. Изменение стиля текста в Web-страницах (часть 2)

Первым в этом примере в строке 12 для выделения мы используем подчеркивание:

<Н1 ALIGN = "center"><U>Добро пожаловать на наш Web-caйт!</U></Hl>

Обратите внимание на строку ALIGN = "center" в теге <Н1>. Таким образом можно указать режим выравнивания для одного, отдельно взятого элемента страницы. Этот атрибут может быть использован в теге <Р>, равно как и в других элементах, таких как изображения и таблицы. Чтобы выровнять текст по правому краю, включите в открывающий тег элемента строку AL1NG = "right". По принятому в HTML 4.0 соглашению значения атрибута ALIGN (left, center или right) должны заключаться в кавычки. Это правило относится к значениям большинства атрибутов.

Хороший стиль программирования З.6

Когда вы используете вложенные теги, не забывайте закрывать их в обратном порядке. Например, если вы выделили слово подчеркиванием и курсивом <EM><U>Привет!</U></EM>, то в таком случае закройте элемент U первым, а потом закройте элемент ЕМ

Как вы можете видеть, весь текст, заключенный между тегами <U>...</U>, изображается подчеркнутым. Вторым в строке 15 этого примера используется наклонный (курсив) или выделенный стиль:

чудесным возможностям языка <EM>HTML</EM>. Мы работаем

Используется он таким же образом, как и тег подчеркивания. Последний стиль — жирный — вводится в строке 16:

с  <EM>HTML</EM>,   начиная  с <U>версии<STRONG>  2 . 0</STRONG></U>,

Здесь используются теги <STRONG> и <ЕМ> вместо тегов <В> и <I> — старого стандарта введения стилей жирный и курсив. Введение этих тегов обусловлено тем, что целью HTML является только разметка текста, в то время как вопрос о конкретном способе отображения текста на экране решается браузером. Поэтому теги <В> и <I> являются нежелательными тегами (т.к. их использование в действующем стандарте HTML не рекомендуется, и поддержка этих тегов браузерами, в конце концов, осуществляться не будет). Другими словами, использование тегов <В> и <I> — это нарушение границы между содержанием и представлением документа.

Например, люди с ослабленным зрением могут использовать специальные браузеры, умеющие читать вслух текст, изображаемый на экране. Такие браузеры должны ориентироваться только на текст (они могут не показывать изображения, цвета и графику), но могут читать текст, выделенный элементами STRONG и ЕМ с различной интонацией, дабы передать пользователю стиль текста.

Внешний вид документа 3.2

Пользуйтесь на своем сайте выделением текста при помощи подчеркивания с осторожностью, потому что по умолчанию во многих браузерах гиперссылки также выделяются подчеркиванием. Подчеркивание в простом тексте может дезориентировать посетителей вашего сайта.

Внешний вид документа 3.3

Чтобы быть уверенным в правильном отображении ваших страниц всеми браузерами, используйте теги <STRONG> и <ЕМ> вместо тегов <В> и <I>.

И напоследок необходимо остановиться на содержимом строки 16:

c  <EM>HTML</EM>,   начиная  с <U>версии<STRONG>  2.0</STRONG></U>,

Здесь элементы U и STRONG перекрываются друг другом. В результате заключенный в эти элементы текст ("2.0") выделяется двумя стилями.

Также стоит обратить внимание на то, каким образом выставляются закрывающие теги в строке 15 примера. Так как элемент STRONG вводится в текст после элемента U, то закрывающий тег элемента STRONG стоит перед закрывающим тегом элемента U. Хотя порядок расстановки закрывающих тегов обычно не важен для браузеров, тем не менее будет хорошим тоном ставить их в порядке, обратном открывающим тегам.

3.7. Гиперссылки

Пожалуй, самой важной возможностью HTML является возможность создавать гиперссылки на документы, находящиеся в каком-либо другом месте на том же или на другом сервере, и тем самым связывать Всемирной паутиной документы и данные, где бы они ни находились. В HTML для ссылок на другие Web-страницы в качестве якоря может выступать как текст, так и изображения. Пример использования якорей и ссылок приводится на рис. 3.4.

Первая ссылка встречается нам в строках 18 и 19:

<P>Yahoo:   <A HREF =  "http://www.yahoo.com">

http://www.yahoo.com</A></P> 

Ссылки вводятся в текст с помощью элемента А (якорь). Элемент «якорь», в отличие от элементов, с которыми мы уже встречались, имеет определенные атрибуты в открывающем теге, что необходимо для активизации гиперссылки. Наиболее важным параметром является путь, на который будет ссылаться якорный объект. В качестве пути может выступать любая доступная страница либо URL файла, либо URL e-mail. Для задания адреса, на который вы хотите сделать ссылку, нужно использовать атрибут HREF тега «якорь» следующим образом: HREF = "адрес”>. В данном случае адресом, на который мы ссылаемся, является адрес http://www.yahoo.com. Гиперссылка, созданная в строке 18, использует текст строки 19 http://www.yahoo.com как якорь для указанного адреса.

Любой человек, загрузивший вашу страницу, может щелкнуть на якоре гиперссылки, и его браузер перейдет на заданную в гиперссылке страницу. В примере из рис. 3.4 имеется еще несколько тегов якоря.

Рис. 3.4. Ссылки на Другие Web-страницы

Кроме того, в примере на рис. 3.4 используется элемент Р. Напомним, что элемент параграфа добавляет вертикальный пробел до и после текста, заключенного в элемент параграфа. В строках с 18 по 28 создаются четыре самостоятельных элемента параграфа. Каждый из них является отдельным параграфом и поэтому отделяется пустой строкой как до, так и после себя.

Якоря также могут ссылаться на электронные адреса. Если щелкнуть на такой ссылке, то будет загружена используемая по умолчанию программа для работы с электронной почтой с автоматической инициализацией сообщения на заданный в ссылке адрес. Такой тип ссылки используется в примере на рис. 3.5

Рис. 3.5. Ссылка на электронный адрес

Ссылки на электронный адрес имеют практически тот же синтаксис, что и ссылки на Web-страницы. Такая ссылка находится в строках 15 и 16 рассматриваемого примера:

<Р>Наш адрес электронной почты: <А HREF = "mailto:deitel@deitel.com"> deitel@deitel.com</A>.

Ссылки на электронный адрес выглядят следующим образом: HREF = mailto:"электронный адрес">...</А>. Значение атрибута HREF, включая слово mailto:, должно быть заключено в кавычки.

3.8. Изображения

До настоящего момента мы работали только исключительно с текстом. Теперь покажем, каким образом можно включать изображения в страницы Web (см. рис. 3.6).

Рис. 3.6. Добавление изображений в файл HTML

В данной странице используется изображение для заднего плана, которое определяется в строке 10:

<BODY BACKGROUND  =   "background.gif">

Как мы ранее говорили, в теге <BODY> могут использоваться дополнительные атрибуты для задания различных характеристик страницы, и в том числе фона страницы, который определяется при помощи атрибута BACKGROUND. В качестве фона можно использовать изображение или заливку цветом. В данном случае мы используем изображение. Чтобы задать фоновое изображение, достаточно в открывающий тег <BODY> добавить атрибут BACKGROUND = "имя файла". В нашем примере в этом атрибуте задается файл с именем background.gif.

Изображение, используемое в качестве фонового, не обязательно должно быть большого размера. А поскольку загрузка в браузер большого изображения потребует и большего времени, то предпочтительнее для этой цели использовать файлы небольшого размера. Изображение, используемое нами в примере 3.6, имеет размеры всего 325 пикселов в ширину и 85 пикселов в высоту. Браузер покрывает (укладывает) этим небольшим изображением всю поверхность фона по горизонтали и вертикали, как кафельной плиткой. Под термином «пиксел» понимают минимальный элемент изображения: каждый пиксел представляет адресуемую цветовую точку на экране.

Внешний вид документа 3.4

Фоновые изображения могут придать вашим страницам приятный внешний вид. Старайтесь не использовать изображений с резкими переходами цвета, поскольку они будут отвлекать внимание пользователя, не говоря уже о том, что текст на таком фоне может еще и плохо читаться. Старайтесь подбирать такие графические образы, которые будут плавно переходить сами в себя, когда браузер будет выкладывать ими фон страницы.

Изображение на переднем плане страницы задается в строках 14-15:

<IMG  SRC = "deitel.gif" BORDER = "1" HEIGHT =  "144"

 WIDTH = "200" ALT  = "Харви и Пол Дейтелы">

Для этой цели используется тег <IMG>. Имя файла и путь задаются при помощи атрибута SRC = "месторасположение файла". В этом теге вы можете в атрибутах WIDTH и HEIGHT задать ширину и высоту изображения в пикселах. В данном примере ширина изображения равна 200, а высота — 144 пиксела.

Хороший стиль программирования 3.7

Всегда включайте атрибуты HEIGHT и WIDTH в тег IMG. Тогда при загрузке HTML файла браузер будет заранее знать, сколько места на экране нужно выделить под изображение, и правильно отобразит страницу на экране еще до того, как изображение будет загружено.

Типичная ошибка программирования 3.2

Задание новых размеров изображения, которые изменяют изначальные пропорции ширины и высоты, приведет к искажениям в изображении. Поэтому, например, если изображение имеет размеры 200 пикселов в ширину и 100 пикселов в высоту, то новые размеры всегда должны сохранять это соотношение 2:1 для ширины и высоты изображения.

Можно добавить рамку вокруг изображения (черную по умолчанию) при помощи атрибута BORDER = х. Если х — число большее 0, тогда толщина рамки будет равна соответствующему числу пикселов. В данном примере изображение помещено в рамку шириной в один пиксел в соответствии с заданным атрибутом BORDER = 1.

Еще одним важным атрибутом изображения является атрибут ALT. В примере 3.6
ему присваивается значение:

ALT = "Харви и Пол Дейтелы"

Атрибут ALT предназначается для тех браузеров, в которых отключен режим отображения изображений либо которые не могут отображать их в принципе, например, это могут текстовые браузеры. Эти браузеры будут отображать на том месте экрана, где должно быть изображение, значение атрибута ALT. Это даст пользователю хоть какое-то представление о том, что за изображение должно было бы присутствовать на странице.

Хороший стиль программирования 3.8

Обязательно задавайте для каждого изображения в атрибуте ALT  тега IMG его описание.

Теперь, после того как вы научились добавлять изображения в страницу Web, мы покажем вам, каким образом можно использовать изображение в качестве якоря гиперссылки на другие сайты в Интернет (см. рис. 3.7).

Рис. 3.7. Использование изображений в качестве якоря гиперссылок (часть 2)

Рис. 3.7. Использование изображений в качестве якоря гиперссылок (часть 1)

В строке 10 этого примера добавляется фон:

<BODY BGCOLOR =   "#CDCDCD">,      

Что-то похожее мы уже делали в примере 3.6. Отличие заключается лишь в том, что вместо фонового изображения мы задаем здесь сплошную заливку фона некоторым цветом. При этом меняется имя атрибута — он называется именем BGCOLOR, а не BACKGROUND, как в предыдущем примере.

Цвет фона можно задать одним из двух методов: либо указать цвет по названию (их насчитывается более 100 — смотрите список цветов в Приложении Д), либо использовать шестнадцатеричный код того цвета, который вы хотели бы использовать (в примере цвет задается по коду — #CDCDCD). Аналогичным образом, как будет показано в следующем разделе, задается цвет шрифта. Все цвета образуются смешением оттенков красного, зеленого и синего цветов (так называемые RGB-цвета). Первые два символа шестнадцатеричного кода представляют собой интенсивность  красного в данном цвете фона, следующие два отвечают за количество зеленого, а последние два представляют синий цвет. Значение 00 соответствует наиболее бледному оттенку, который может принимать данный цвет, a FF — самому яркому. В соответствии с таким форматом записи значению "#FF0000" будет соответствовать красный цвет, значению "#.00FF00" — зеленый, синий цвет обозначается константой "#0000FF", а значения "#000000" и "#FFFFFF" будут соответствовать черному и белому цветам соответственно. Если работать с шестнадцатеричными значениями вам неудобно, можете использовать предопределенные имена цветов, заданные в Приложении Д. Позже в этой книге мы покажем, каким образом можно определять код того или иного цвета, который вы хотели бы использовать. В строках 13—15 используется гиперссылка, привязанная к изображению:

<А HREF =  "main.html">

<IMG SRC = "buttons/about.jpg"   WIDTH = "65" HEIGHT = "50"

BORDER = "0" ALT = "Главная страница"></A><BR>

Для создания гиперссылки этого типа используются элементы А и IMG. Якорь здесь работает аналогично обычному, текстовому якорю; изображение становится активной гиперссылкой на определенный адрес в Интернете, заданный в атрибуте HREF тега <А>. Не забывайте в конце гиперссылки указывать закрывающий тег якорного элемента.

Если вы внимательно посмотрите на атрибут SRC элемента IMG

SRC = "buttons/about.jpg"

то заметите, что здесь форма записи несколько отличается от той, что использовалась в предыдущем примере. Дело в том, что используемое здесь изображение about.jpg расположено в подкаталоге buttons основного каталога нашего сайта. Мы сделали это, чтобы держать все графические кнопки в одном месте, это упрощает их поиск и редактирование.

Вы всегда можете использовать файлы из других каталогов, указав название каталога в атрибуте SRC. Если, например, в каталоге buttons имеется подкаталог images, и мы хотим поместить на страницу изображение из этого каталога, то все, что нам нужно, — это просто указать правильный путь к файлу изображения в атрибуте SRC, в данном случае  - SRC = "buttons/images/filename".

Более того, вы можете использовать на своем сайте изображения, расположенные на другом Web-сайте (конечно, только после получения разрешения на это от владельца сайта). В этом случае вам нужно указать в атрибуте SRC местоположение и название файла изображения.

В строке 15 используется элемент разрыва строки (окончания строки):

BORDER = "0"  ALT = "Главная  страница"> </А><ВК>

Элемент BR прекращает вывод текста в текущую строку. Если элемент BR встречается внутри текста, то текст, следующий за тегом <BR>, будет выводиться  с новой строки. В данном случае мы используем тег <BR> для перевода курсора на новую строку после вывода изображения.

3.9. Форматирование текста с помощью тега <FONT>

Вы уже знаете, как, используя изображения на заднем и переднем планах, можно улучшить внешний вид страниц и сделать их более эффектными. Теперь в примере на рис. 3.8 мы покажем, как изменяется цвет и форматирование текста страницы.

В строках с 16 по 18 используются стандартные методы форматирования текста:

<P><FONT COLOR = "red"   SIZE  =  "+1"   FACE  =  "Arial">Мы  разработали этот  сайт  для  обучения  чудесным возможностям языка <EM>HTML</EM>.</FONT>

Здесь используется элемент FONT и несколько его атрибутов. Первый из них —
это атрибут
COLOR, задающий цвет форматируемого текста тем же образом, что и
при указании цвета фона: в атрибуте нужно либо указать цвет по названию, либо
задать его шестнадцатеричный код. Не забывайте название цвета заключать в кавычки.   

Отметим тот факт, что можно установить единый цвет для шрифта всего документа, если поместить атрибут TEXT в элемент BODY и указать цвет так же, как ,мы делали только что.

Вторым в примере задается атрибут SIZE, используемый для изменения размера форматируемого текста. Установив значение SIZE = "+x", вы увеличите размер текста. Если хотите уменьшить размер текста, то вам нужно задать значение SIZE = "-х". В каждом случае х - это число пунктов, на которое вы хотите увеличить или уменьшить размер шрифта.

Последний шрифтовой атрибут, представленный в нашем примере, - это атрибут FACE. Он используется для задания гарнитуры шрифта форматируемого текста. Введите название шрифта в кавычках, и следующий далее текст будет выводиться на экран указанным шрифтом.

Рис. 3.8. Использование элемента FONT для форматирования текста (часть 1)

Рис. 3.8. Использование элемента FONT для форматирования текста (часть 2)

Типичная ошибка программирования 3.3

Будьте осторожны при использовании атрибута изменения начертания шрифта. Используйте только распространенные шрифты, например Times, Arial, Courier и Helvetica (мы перечислили только некоторые из них). Не используйте шрифты, которых может не оказаться на машине клиента, так как в этом случае браузер подставит вместо него шрифт, используемый по умолчанию (обычно Times New Roman).

3.10. Специальные символы, горизонтальные линейки и другие разделители

Набор символов, использовавшийся на клавиатуре старых пишущих машинок QWERTY, не удовлетворяет современным потребностям. Но в HTML 4.0 имеется возможность вставки в текст специальных знаков и символов (см. рис. 3.9).

Рис. 3.9 Вставка специальных символов в документ HTML

В строках 19 и 20 примера в текст документа вводятся специальные символы

<Р>Вся информация на этом сайте принадлежит <STRONG>&copy;

</STRONG>Deitel  <STRONG>&amp;</STRONG> Associates,   1999.</P>

Для вставки специальных символов нужно указать их кодовые значения. Формат кода должен иметь следующий вид: &код;. Например, при помощи комбинации &amp; в текст вставляется знак амперсанда. Коды, как правило, являются аббревиатурами символов (как, например, amp - для символа амперсанда и сору - для символа авторских прав), хотя разрешается использование шестнадцатеричных кодов. Например, можно указать шестнадцатеричный код символа & (38), для чего нужно использовать запись вида &#38;. В таблице Приложения А и В приводится список специальных символов и соответствующих им шестнадцатеричных кодов.

В строках с 25 по 27 использованы четыре новых стиля:

<DEL><P>Bu можете   скопировать  до   3.14   х  10<sup>2</sup>  байт данных  с   этого   сайта.</DEL>

<BR> Убедитесь  в  том,   что вы <SUB>He   копируете  больше  данных,</SUB>  чем разрешено.

Можно перечеркнуть текст горизонтальной линией, заключив его в элемент DEL. Этот наглядный оформительский прием можно использовать для уведомления о пересмотре версий электронных документов. Чтобы перевести текст в верхний индекс (текст выводится в верхней части строки шрифтом меньшего размера) или в нижний индекс (текст помещается внизу строки и меньшим размером), используйте элементы SUP и SUB соответственно.

В примере на рис. 3.7 мы говорили об элементе разрыва строки. Сейчас мы рассмотрим пример разрядки текста с использованием горизонтальных линеек (см. рис. 3.10).

Рис. 3.10. Использование горизонтальных линеек

В строке 14 нашего примера

<HR WIDTH  =   "25%"   SIZE  =   1>

в текст документа включается горизонтальная линейка, создаваемая с помощью тега <HR>. Горизонтальной линейкой называется прямая линия, пересекающая экран в горизонтальном направлении. Кроме этого, элемент <HR> переводит курсор в начало новой строки.

Рис. 3.10. Использование горизонтальных линеек

Можно задать ширину горизонтальной линии в горизонтальном направлении, включив в тег HR атрибут WIDTH. Ширину можно задать либо в пикселах, либо в процентах от ширины окна браузера. Например, если вы задали WIDTH = "50% ", а ширина окна равна 640 пикселов, то тег HR с таким атрибутом приведет к созданию горизонтальной линейки размером 320 пикселов по горизонтали.

Внешний вид документа 3.5

Для разделения текста на смысловые части можно использовать горизонтальные линейки. Это облегчит восприятие текста.

Данный способ задания ширины элемента широко используется и в других элементах HTML4, особенно часто в элементе TABLE, который мы обсудим в следующей главе.

Атрибут SIZE определяет высоту горизонтальной линейки в пикселах. Атрибут ALIGN, который мы уже использовали в элементе IMG, выравнивает элемент HR по горизонтали. Этот атрибут может принимать одно из следующих значений: left (по левому краю), center (по центру) или right (по правому краю). Последним атрибутом элемента HR является атрибут NOSHADE. Он убирает эффект тени, используемый по умолчанию, и изображает горизонтальную линейку в виде отрезка, заполненного сплошным цветом.

3.11. Обзор ресурсов Интернет и Всемирной паутины

Во Всемирной паутине доступно огромное количество ресурсов, намного более: глубоко освещающих те темы, которые мы обсуждали. Получить дополнительную информацию по темам настоящей главы вы можете, посетив следующие сайты.

http://www.w3.org

Консорциум Всемирной сети (W3C) - это группа, разрабатывающая рекомендации по
языку
HTML. Данный Web-сайт содержит различную информацию по HTML как исторического характера, так и по современному состоянию дел.

http://www. w3.org/TR/REC-html40/

На этом ресурсе вы найдете спецификацию HTML 4.0, все нюансы и особенности этой версии языка разметки.

http://freewebpromotion.com/hervillo/index.htm

На этом сайте находятся пошаговые инструкции создания Web-страниц, предназначенные для начинающих программистов.

http://www2.utep.edu/-kross/tutorial

Сайт Университета штата Техас в Эль Пасо также будет полезен начинающим программистам, поскольку его содержание посвящено в основном обучению и содержит много различных примеров.

Резюме

HTML не является языком процедурного программирования как языки С, Fortran, Cobol или Pascal. Скорее, это язык разметки для определения элементов страницы, чтобы браузер смог должным образом отобразить страницу на мониторе компьютера.

HTML используется для форматирования текста и данных. Применяемый в этом языке способ «разметки» информации отличается от принятого в традиционных языках программирования.

В HTML для разметки текста используются элементы, которые вводятся в текст при помощи тегов. Тегом называется ключевое слово, заключенное в угловые скобки.

Файлы HTML, которые также называются HTML-документами, создаются при помощи
обычного текстового редактора. Мы будем использовать встроенный в
Windows текстовый редактор Блокнот (Notepad). Вместо этого редактора, вы можете загрузить свободно распространяемый редактор кода HTML, или использовать редактор пакета Microsoft Visual InterDey.

Все HTML-файлы обычно имеют расширение .htm или .html.

Как уже было сказано, ошибки в программах, написанных на традиционных языках программирования, таких как С, C++ или Java, часто приводят к фатальным ошибкам и остановке выполнения программы. Ошибки в HTML-коде обычно не приводят к таким необратимым последствиям. Браузер продолжит процесс отображения страницы после возникновения ошибки, но, возможно, при этом будет получен не тот результат, на который вы рассчитывали. В наших «типичных ошибках программирования» и «советах по отладке и тестированию* мы будем рассматривать распространенные ошибки HTML, a также способы их обнаружения и исправления.

Файл вашей домашней страницы должен называться именем index.html. Делается это потому, что, когда браузер не находит в каталоге указанного пользователем файла, по умолчанию Web-сервер возвращает файл index.html, если таковой имеется в каталоге.

Тег сообщает браузеру о том, что между ним и закрывающим тегом </HTML> находится текст HTML.

Комментарии в HTML всегда начинаются с тега <!-- и заканчиваются тегом -->, они могут занимать несколько строк исходного кода. Текст и теги, помещенные внутри тегов комментария, браузером игнорируются.

Каждый файл HTML подразделяется на две основные части: элемент заголовка, который содержит общую информацию о документе, и тело документа, в которое помещается содержательная часть страницы.

Указание заголовка является обязательным требованием для каждого HTML-документа. Текст заголовка вводится в страницу Web при помощи парных тегов <TITLE>…</TITLE>, помещаемых внутри заголовочной части страницы,

Тег <BODY> открывает элемент BODY. В тело документа HTML помещается то содержание, которое должно отображаться браузером.

Весь текст, помещенный между тегами <Р>...</Р>, образует один параграф. Этот пара
граф будет размещаться отдельно от остального материала страницы; он будет отделяться
пустыми строками, вставляемыми до и после текста параграфа.

Заголовки являются простым средством разметки текста, а именно изменения его размера в зависимости от «уровня» заголовка. Обычно используются шесть уровней заголовков (начиная от H1 и кончая H6) для выделения новых разделов и подразделов страницы.

Элемент CENTER центрирует по горизонтали в окне браузера содержание, заключенное
между тегами
<CENTER> и </CENTER>.

При помощи атрибута ALIGN можно задать режим выравнивания для одного, отдельно взятого элемента страницы. По принятому в HTML 4.0 соглашению значения атрибута ALIGN (left, center или right) должны заключаться в кавычки. Это правило относится к значениям большинства атрибутов.

Язык HTML используется для разметки текста; вопрос о конкретном способе отображения текста на экране решается браузером.

Люди с ослабленным зрением могут использовать специальные браузеры, умеющие читать вслух текст, изображаемый на экране. Такие браузеры ориентированы на воспроизведение текста (они могут не показывать изображения, цвета и графику), но могут читать текст, выделенный элементами STRONG и ЕМ, с различной интонацией, дабы передать пользователю стиль текста.

Закрывающие теги должны расставляться в порядке, обратном открывающим тегам.

Самой важной возможностью HTML является возможность создавать гиперссылки на документы» находящиеся в каком-либо другом месте на том же или на другом сервере, и тем самым связывать Всемирной паутиной документы и данные, где бы они ни находились.

Ссылки вводятся в текст с помощью элемента А (якорь). Для задания адреса, на который вы хотите сделать ссылку, нужно использовать атрибут HREF и указать в нем значение
адреса.

Якоря также могут ссылаться на электронные адреса. Если щелкнуть на такой ссылке, то будет загружена используемая по умолчанию программа для работы с электронной почтой с автоматической инициализацией сообщения на заданный в ссылке адрес.

В элементе BODY могут использоваться дополнительные атрибуты для задания различных характеристик страницы, и в том числе фона страницы, который определяется при
помощи атрибута
BACKGROUND= "имя файла" в открывающем теге <BODY>.

Загрузка в браузер большого изображения потребует много времени, поэтому предпочтительнее для этой цели использовать файлы небольшого размера. Браузер покроет этим небольшим изображением всю поверхность фона по горизонтали и вертикали.

Под термином «пиксел» понимают минимальный элемент изображения: каждый пиксел
представляет адресуемую цветовую точку на экране.

Имя файла и путь задаются при помощи атрибута SRC = "месторасположение файла"
тега <IMG>. В этом теге вы можете в атрибутах WIDTH и HEIGHT задать ширину и высоту изображения в пикселах. Вокруг изображения можно добавить рамку при помощи атрибута BORDER = х.

Атрибут ALT предназначается для тех браузеров, в которых отключен режим отображения рисунков либо которые не могут отображать их в принципе, как, например, текстовые браузеры. Эти браузеры будут отображать на том месте экрана, где должно быть изображение, значение атрибута ALT. Это даст пользователю хоть какое-то представление о том, что за изображение должно было бы находиться в этом месте на странице.

В теге <BODY BGCOLOR = "#CDCDCD"> задается цвет фона страницы. Цвет можно указать по названию (их насчитывается более 100 — смотрите список цветов в Приложении Д), либо использовать его шестнадцатеричный код.

Все цвета образуются смешением оттенков красного, зеленого и синего цветов (так называемые ЯGВ-цвета). Первые два символа шестнадцатеричного кода представляют собой интенсивность красного в данном цвете, следующие два отвечают за количество зеленого, а последние два представляют синий цвет. Значение 00 соответствует наиболее слабому оттенку, который может принимать данный цвет, a FF - самому яркому.

Вы можете использовать файлы из других каталогов, указав название каталога в атрибуте SRC. Более того, вы можете использовать на своем сайте изображения, расположенные на другом Web-сайте (конечно, только после получения разрешения на это от владельца сайта). В этом случае вам нужно указать в атрибуте SRC местоположение и название файла изображения.

Элемент BR прекращает вывод текста в текущую строку. Если элемент BR встречается внутри текста, то текст, следующий за тегом <BR>, будет выводиться с новой строки. В атрибуте COLOR можно задать цвет форматируемого текста тем же образом, как и при указании цвета фона: в атрибуте нужно либо указать цвет по названию, либо задать его шестнадцатеричный код. Не забывайте название цвета заключать в кавычки.

Атрибут SIZE используется для изменения размера форматируемого текста. Установив значение SIZE = "+x", вы увеличите размер текста. Если хотите уменьшить размер текста, то вам нужно задать значение SIZE = "-х". Атрибут FACE используется для задания гарнитуры шрифта.

В HTML 4.0 имеется возможность вставки в текст специальных знаков и символов. Для вставки специальных символов нужно указать их кодовые значения. Формат кода должен иметь следующий вид: &код;. Например, при помощи комбинации &amp; в текст вставляется знак амперсанда. Коды» как правило, являются аббревиатурами символов (как, например, amp - для символа амперсанда и сору - для символа авторских прав), хотя разрешается использование шестнадцатеричных кодов. Например, можно указать шестнадцатеричный код символа & (38) для чего нужно использовать запись вида &#38;. В таблице Приложения А приводится список специальных символов и соответствующих им шестнадцатеричных кодов.

Вы можете перечеркнуть текст горизонтальной линией, заключив его в элемент DEL. Чтобы перевести текст в верхний индекс или в нижний индекс, используйте элементы SUP и SUB соответственно.

С помощью тега <HR> в документ включается горизонтальная линейка. Горизонтальной линейкой называется прямая линия, пересекающая экран в горизонтальном направлении. Можно задать ширину горизонтальной линии в горизонтальном направлении, включив в тег HR атрибут WIDTH. Ширину можно задать либо в пикселах, либо в процентах от ширины окна браузера. Данный способ задания ширины элемента широко используется и в других элементах HTML 4, особенно часто в элементе TABLE. Атрибут NOSHADE убирает эффект тени, используемый по умолчанию, и изображает горизонтальную линейку в виде отрезка, заполненного сплошным цветом.


Терминология

<!--...--> (комментарии)

А, элемент (якорь; <А>...</А>)

ALIGN = "center"

ALIGN = "left"

ALIGN = "right"

ALT

&amp;

BACKGROUND, атрибут элемента BODY

BGCOLOR, атрибут элемента BODY

<BODY></BODY>

CENTER, элемент

(<CENTER>...</CENTER>)

CLEAR = "all", атрибут тега

COLOR, атрибут элемента BODY

DEL, элемент

EM, элемент (<ЕМ>...</ЕМ>)

FACE, атрибут элемента FONT

FONT, элемент (<FONT>...</FONT>)

FORM, элемент (<FORM>...</FORM>)

FrontPage Express

HEAD, элемент (<HEAD>...</HEAD>)

H6, элемент (<H6>...</H6>)

H5, элемент (<Н5>...</H5>)

H4, элемент (<H4>...</H4>)

Н3, элемент (<H3>...</H3>)

H2, элемент (<Н2>...</Н2>)

HI, элемент (<H1>...</H1>)

<HR>, тег (горизонтальная линейка)

HREF, атрибут элемента <А>

.htm

.html

HTML (Язык Разметки Гипертекста)

HTML-документ

HTML, элемент (<HTML>...</HTML>)

HTML-файл

HTML-Kit, редактор HTML

представление в исходном коде

рамка рисунка

содержание элемента HTML

специальные символы

ссылка

структура страницы Web

теги HTML

текстовый браузер

укладка изображения на поверхности экрана

HTML, теги

IMG, элемент

Index.html

LINK, атрибут элемента BODY

mailto:

NAME, атрибут элемента FRAME

P, элемент (параграф; <Р>...</Р>)

RGB цвета

SIZE, атрибут элемента FONT

SRC, атрибут элемента IMG

STRONG, элемент

(<STRONG>...</STRONG>)

SUB (нижний индекс)

SUP (верхний индекс)

TEXT, атрибут элемента BODY

TITLE, элемент (<TITLE>...</TITLE>)

U, элемент

Web-сайт

WIDTH, атрибут

World Wide Web

WWW

атрибуты тега HTML

Всемирная паутина

выделенный стиль

высота

гиперссылка

гипертекст

горизонтальная линейка

закрывающий тег

изображение

комментарии

курсив

неупорядоченный список (<UL>...</UL>)

открывающий тег

полужирный стиль

представление Web-страницы         

цвет

шестнадцатеричные коды цветов

ширина в пикселах

ширина в процентах

элемент параграфа (<Р>...</Р>)

элемент разрыва строки (<BR>...</BR>)

язык разметки

якорь

Типичные ошибки программирования

  1.  Пропуск закрывающих тегов для элементов, в которых они предусмотрены, является
    синтаксической ошибкой, в результате которой форматирование и внешний вид вашей страницы может чрезвычайно сильно измениться. Тем не менее, в отличие от традиционных языков программирования, синтаксическая ошибка в
    HTML обычно не приводит к полной, остановке отображения страницы браузером.
  2.  Задание новых размеров изображения, которые изменяют изначальные пропорции ширины и высоты, приведет к искажениям в изображении. Поэтому, например, если рисунок имеет размеры 200 пикселов в ширину и 100 пикселов в высоту, то новые размеры всегда должны сохранять это соотношение 2:1 для ширины и высоты изображения.
  3.  Будьте осторожны при использовании атрибута изменения начертания шрифта. Используйте только распространенные шрифты, например Times, Arial, Courier и Helvetica (мы перечислили только некоторые из них). Не используйте шрифты, которых может не оказаться на машине клиента, так как в этом случае браузер подставит вместо него шрифт, используемый по умолчанию (обычно - Times New Roman).

Внешний вид документа

  1.  Заголовок, помещенный в начало каждой Web-страницы, даст клиентам вашего сайта представление о назначении каждой страницы.
  2.  Пользуйтесь на своем сайте выделением текста при помощи подчеркивания с осторожностью, потому что по умолчанию во многих браузерах гиперссылки также выделяются подчеркиванием. Подчеркивание в простом тексте может дезориентировать посетителей вашего сайта.
  3.  Чтобы быть уверенным в правильном отображении ваших страниц всеми браузерами, используйте теги <STRONG> и <ЕМ> вместо тегов <В> и <I>.
  4.  Фоновые изображения могут придать вашим страницам приятный внешний вид. Старайтесь не использовать изображений с резкими переходами цвета, поскольку они будут отвлекать внимание пользователя, не говоря уже о том, что текст на таком фоне может еще и плохо читаться. Старайтесь подбирать такие графические образы, которые будут плавно переходить сами в себя, когда браузер будет выкладывать ими фон страницы.
  5.  Для разделения текста на смысловые части можно использовать горизонтальные линейки. Это облегчит восприятие текста.

Хороший стиль программирования

  1.  Теги HTML не чувствительны к регистру. Тем не менее, для улучшения восприятия
    текста, желательно использовать символы в одном регистре. Мы используем верхний регистр, что, как нам кажется, предпочтительнее, так как позволяет выделять теги на фоне остального текста.
  2.  Старайтесь подбирать файлам такие имена, которые как-то описывают их назначение.
    Это поможет вам быстрее ориентироваться в своих страницах. Такие имена будет проще запомнить вашим клиентам, и может быть, они будут чаще заглядывать на ваш сайт. Например, если в вашем документе
    HTML идет речь о каких-то товарах и продуктах, вы можете назвать его именем products.html.
  3.  Всегда включайте в начало и конец вашего HTML-документа теги <HTML>...</HTML>.
    Включайте в код вашего документа комментарии. Комментарии в
    HTML заключаются
    в теги
    <!--...-->. Они помогут другим программистам разобраться в вашем коде, помогут, в частности, при отладке. Такие комментарии могут содержать в себе много полезной информации, которая браузером отображаться не будет. Они также помогут вам вспомнить свой собственный код, если вы не работали с ним какое-то время.
  4.  Старайтесь придерживаться единых правил наименования страниц вашего сайта. Например, если ваш сайт называется "Мой Web-сайт", то для страницы, содержащей ссылки, можно было бы выбрать заголовок "Мой Web-сайт — Ссылки" и т.п. Посетителю вашего сайта будет проще ориентироваться в нем, если вы будете следовать этому простому правилу при выборе имен заголовков страниц.
  5.  Добавление комментариев в правой части коротких строк HTML — лучший способ пояснения кода страниц.
  6.  Когда вы используете вложенные теги, не забывайте закрывать их в обратном порядке.
    Например, если вы выделили слово подчеркиванием и курсивом -
    <ЕМ><U>Привет!</U></EM>, то в таком случае закройте элемент U первым, а потом закройте элемент ЕМ.
  7.  Всегда включайте атрибуты HEIGHT и WIDTH в тег IMG. Тогда при загрузке HTML
    файла браузер будет заранее знать, сколько места на экране нужно выделить под рисунок, и правильно отобразит страницу на экране еще до того, как будет загружен рисунок.
  8.  Обязательно задавайте для каждого рисунка в атрибуте ALT тега IMG его описание.

Упражнения для самоконтроля

3.1. Установите, являются следующие утверждения верными или неверными. Если утверждение неверно, объясните почему.

  1.  Задать фон страницы можно в атрибуте тега <HTML>.
  2.  Элементы ЕМ и STRONG использовать не рекомендуется.
  3.  Домашняя страница вашего сайта всегда должна иметь имя homepage.html.
  4.  Использование комментариев в HTML-документе, объясняющих детали этого документа, -  это хороший стиль программирования.
  5.  Гиперссылка создается при помощи элементов LINK, указываемых до и после текста
    ссылки.

3.2. Заполните пропуски в каждом из следующих предложений.

  1.  Для вставки горизонтальной линейки используется элемент _______.        
  2.  Верхний индекс создается с помощью элемента _______, а нижний - элемента ______.
  3.  Элемент ______ размещается в тегах <HTML>...</HTML>.
  4.  Заголовок самого маленького размера создается элементом ________, а самый

большой заголовок - с помощью элемента _________.

  1.  Элемент ________используется для изменения размера и цвета текста.
  2.  Вы можете выровнять часть текста страницы по центру, если поместите этот текст
    в теги ________.

3.3. Определите для каждого элемента списка, является ли он элементом или атрибутом.

  1.  HTML
  2.  WIDTH
  3.  ALIGN
    d) BR

е) SIZE

f) H3

g) A 

h) SRC

Ответы на упражнения для самоконтроля

  1.  а) Неверно. Задавать фон можно либо в атрибуте BACKGROUND, либо в атрибуте BGCOLOR элемента BODY, b) Неверно. Не рекомендуется использование элементов I и В. Что же касается элементов ЕМ и STRONG, то их как раз и надо использовать, с) Неверно. Название вашей страницы всегда должно быть index.html. d) Верно, е) Неверно. Гиперссылка создается элементом А (якорь).
  2.  a) HR. b) SUP, SUB. с) TITLE, d) H6, H1. e) FONT, f) <CENTER>...</CENTER>.
  3.  a) Teг. b) Атрибут, с) Атрибут, d) Тег. е) Атрибут, f) Тег. g) Тег. h) Атрибут.

Упражнения

  1.  Разметьте  первый параграф данной главы. Используйте элементы H1 для заголовка и Р для текста, STRONG для первого слова каждого предложения, а ЕМ для всех заглавных букв.
  2.  Разметьте первый параграф вновь, но на этот раз используйте горизонтальные линейки с выравниванием по левому краю для разделения предложений. Размер каждой линейки должен быть равен числу слов в обрабатываемом предложении. Каждая из этих линий должна иметь атрибут NOSHADE.
  3.  Объясните, почему данный фрагмент кода HTML верен? (Подсказка: на сайте W3C
    http://www.w3.org/TR/REC-html140/struct/text.html вы можете найти описание элемента Р.)

<Р>Вот немного текста...

<HR>

<Р>А вот еще немного текста...</Р>

3.7. Найдите ошибку в следующих строках? (Подсказка: спецификацию элемента BR вы
можете найти на том же сайте, что был указан в предыдущем задании.)

<Р>Вот немного текста. . .<BR></BR>

А вот еще немного текста...</Р>

  1.  Дано: У нас есть изображение с именем deitel.gif. Его ширина - 200 пикселов, а высота - 150. Используя атрибуты WIDTH и HEIGHT тега IMG а) увеличьте размер на 100%; b) увеличьте размер на 50%; с) измените соотношение ширины и длины на 2:1, оставив ширину такой, какая она была в пункте а).
  2.  Создайте ссылку на каждый из следующих объектов: a) index.html, расположенный в каталоге files; b) index.html,  расположенный в подкаталоге text каталога files;

c) index.html, расположенный в другой каталоге родительского каталога (Подсказка:
две идущие подряд точки (..) используются для определения родительского каталога);

d) ссылку на электронный  адрес президента США (president@whitehouse.gov);

e) ссылку на файл README в каталога pub FTP-сервера ftp.cdrom.com (Подсказка: не забудьте указать протокол ftp://).


4

НТМL 4: часть II

Цели

Научиться работать со
списками.

Уметь создавать таблицы и
размещать в них данные.

Уметь изменять внешний вид
и форматирование таблиц.

Узнать, как создавать и
использовать формы.

Научиться создавать и
использовать карты ссылок и
гиперссылки.

Узнать, как сделать страницу
доступной поисковым
серверам.

Научиться создавать более
привлекательные
Web-страницы с помощью
тега
<FRAMESET>.


План

  1.  Введение

Неупорядоченные списки

Вложенные и упорядоченные списки

Основы таблиц НТМL

Таблицы НТМL и форматирование

Основы форм НТМL

Сложные формы НТМL

Внутренние гиперссылки

  1.  Создание и использование карт ссылок
  2.  Теги <МЕТА>
  3.  Тег <FRАМЕSЕТ>
  4.  Вложенные теги <FRАМЕSЕТ>
  5.  Обзор ресурсов Интернет и Всемирной паутины

 Резюме. Терминология Общие методические рекомендации Типичные ошибки

программирования * Внешний вид документа Советы по переносимости программ Советы по отладке и тестированию Хороший стиль программирования Упражнения для самоконтроля Ответы, к упражнениям, для самоконтроля Упраж-

нения

4.1. Введение

В предыдущей главе мы говорили об основных концепциях языка НТМL. Мы создали несколько законченных страниц Web, содержащих текст, гиперссылки, изображения, фоновые изображения; в них использовались различные цвета, а также такие элементы форматирования, как горизонтальные линейки и символы перевода строки.

В этой главе мы обсудим более существенные элементы и возможности НТМL. Вы узнаете, как оформлять данные в виде списков и таблиц. Вы научитесь использовать формы для получения информации от посетителей сайта. Мы расскажем, как с помощью внутренних гиперссылок и карт ссылок можно улучшить управляемость страницы. Мы обсудим фреймы, расскажем, как их нужно использовать для повышения привлекательности и интерактивности Web-сайтов.

К концу этой главы вы познакомитесь с основными тегами и возможностями языка НТМL. С их помощью вы сможете создавать более сложные и внешне привлекательные сайты Web. На протяжении всей книги мы будем вводить передовые технологии, связанные со страницами НТМL, такие как сценарии, динамический НТМL, Реrl и CGI и АSР (активные серверные страницы) и ХМL (расширяемый язык разметки).

4.2. Неупорядоченные списки

На рис. 4.1 приводится пример вывода текста в виде неупорядоченного списка. Здесь мы используем файл НТМL из главы 3, но добавляем в него, для улучшения внешнего вида, неупорядоченный список. Элемент неупорядоченный список создает список, элементы которого помечаются маркером. Начинаться и заканчиваться неупорядоченный список должен тегами   <UL> и </UL>.

 

Рис. 4.1. Неупорядоченный список HTML

Первый элемент списка вводится в строках 20-21

<LI>Yahoo:   <А НRAF" =   "http: //www.yahoo. com">

Каждый элемент неупорядоченного списка вводится тегом <LI> (сокращение list item). Сразу за тегом вы можете вводить текст, — он будет выводиться с новой строки и отмечаться маркером. Закрывающий тег </LI> не является обязательным и поэтому обычно опускается, но, для улучшения читабельности текста, мы его используем. В конце списка, открытого тегом <UL>, должен быть обязательно указан закрывающий список тег — </UL>.

4.3. Вложенные и упорядоченные списки

На рис. 4.2 приводится пример вложенных списков. Это еще одна возможность улучшения читабельности текста, которая используется, например, при составлении планов.

Рис. 4.2. Вложенные и упорядоченные списки HTML

Наш первый вложенный список начинается в строках 23-24:

<UL>

<LI>Новые  игры</LI>

Вложенные списки составляются так же, как и простой список, рассмотренный нами на рис. 4.1, просто вложенные списки содержатся внутри другого списка.

Каждый новый вложенный список сдвигается вправо относительно того, в который он вложен, и у него меняется маркер (делается это для того, чтобы подчеркнуть структуру вложенности разделов документа).

За последней строкой каждого закрытого списка браузер вставляет пустую строку. Это можно увидеть на рис. 4.2.

Хороший стиль программирования 4.1

Код страницы проще редактировать и отлаживать, если строки вложенных списков имеют соответствующие отступы.

На рис. 4.2 в строках 16-48 используется список с тремя уровнями вложенно-
сти. Работая с вложенными списками, не забывайте оканчивать каждый из спи
сков тегом
</UL>. В строках с 53 по 57 .

<OL>

<LI>Билл Гейтс</LI>    

<LI>Стив Джобс</LI>

<LI>Майкл Делл</LI>

</OL>

определяется упорядоченный список с помощью тегов <OL> и </OL>. Каждый элемент упорядоченного списка сопровождается последовательным числом. По умолчанию упорядоченные списки нумеруются последовательными десятичными числами (1, 2, 3, ...). На рис. 4.3 приводится вариант составления вложенного списка из упорядоченных списков.

Рис. 4.3. Различные типы упорядоченных списков

В этом примере используются четыре типа упорядоченных списков: в строках 24-25

<OL туре = "1">

<LI>Ссылки на поисковые  системы</LI> .

в строках 27-28

L  ТУРЕ   =   "А"> <LI>Сайты новостей</LI>

в строке 30

<LI  ТУРЕ  =   "i">Новости  ТВ:</LI> 

и в строках 31 - 32

L туре =  "а">

<LI>CNN</LI>

Для изменения типа нумерации используется атрибут ТУРЕ в открывающем теге L>. Вы можете ввести атрибут ТУРЕ и в отдельный тег <LI>, тогда действие атрибута будет распространяться только на этот элемент списка. По умолчанию в списках используется установка ТУРЕ="1", которой соответствует нумерация арабскими цифрами (1, 2, 3, ...). Если указать ТУРЕ="I", то список будет пронумерован римскими прописными цифрами (I, II, III, ...). Установка ТУРЕ="i" используется для нумерации римскими строчными цифрами (i,, ii, iii, ...). Два последних варианта - ТУРЕ="А" и ТУРЕ="а" — соответствуют нумерации буквами латинского алфавита в верхнем и нижнем регистре.

Внешний вид документа 4.1

Использование упорядоченных списков разных типов поможет вам создать хорошо организованный сайт, на котором информация подается в систематизированном виде.

4.4. Основы таблиц НТМL

Другой способ форматирования материала в НТМЬ 4.0 — это использование таблиц. В таблице на рис. 4.4 данные располагаются по строкам и столбцам.

Рис. 4.4. Таблица HTML

Все теги и содержание таблицы должны размещаться между тегами ABLE> и </TABLE>; первый из этой пары вы можете видеть в строке 16 листинга

<ТАВЬЕ  ВОRDER =   "1"  АLIGN =   "сеnter"   WIDTH =   "40%">

В элементе ТАВLE можно задать некоторое количество атрибутов. В атрибуте ВОRDER можно задать толщину рамки таблицы в пикселах. Если вы хотите убрать рамку, сделать ее невидимой, нужно задать ВОRDER="0". Чтобы таблица хорошо смотрелась, толщину рамки нужно подбирать экспериментально. Для таблицы, показанной на рис. 4.4, этому атрибуту присвоено значение 1.

В приведенной выше строке задается горизонтальное выравнивание атрибутом АLIG N Этот атрибут может принимать значения "left", "center" или "right". Атрибут WIDTH задает ширину таблицы; как и для НТМL-элемента HR, вы можете задать ее в пикселах и процентах относительно ширины окна браузера.

В строке 20

<САРТION>Это  пример  простой  таблицы.</САРТION>

при помощи элемента САРТIОN задается заголовок таблицы. Заключенный между тегами <САРТIОN> и </САРTION> текст выводится в окне браузера непосредственно над таблицей. Этот тег, кроме этого, может помочь в интерпретации табличных данных браузерам, работающим в текстовом режиме

Таблица может быть разбита на несколько горизонтальных и вертикальных разделов. Первый из таких разделов, раздел заголовка, находится в строках 25-27 примера

<ТНЕАD>

<ТR><ТН>Это  заголовок  таблицы.</ТН></ТR>

</ТНЕAD>


Все данные раздела заголовка должны быть заданы между тегами <ТНЕАD> и </ТНЕАD>; это могут быть заголовок таблицы и заголовки столбцов таблицы.

Элемент строки таблицы ТR выполняет форматирование ячеек отдельной строки таблицы. В строку попадают все ячейки, перечисленные между тегами R> и </ТR>. В следующем разделе мы поговорим об использовании этого элемента.

Самым мелким объектом таблицы, который мы можем определять, является ячейка данных. Существует только два типа ячеек: размещаемые в разделе заголовка (<ТН>...</ТН>) и в разделе тела таблицы (<ТD>...</ТD>). В строках, приведенных выше, задается ячейка заголовка. Ячейки заголовка обычно располагаются в теге <ТНЕАD>, в них задаются заголовок таблицы и заголовки столбцов таблицы.

Ниже приводится элемент ТВОDY, задаваемый в строках 32-34. 

<ТR>

<ТD АLIGN  =   "сепtег">Это тело таблицы. </ТD></ТR>

</TВODY>

Как и элемент ТНEAD, элемент ТВОDY используется для форматирования и группировки элементов таблицы. В нашем примере таблица содержит одну строку и одну ячейку, но обычно в теле таблицы размещается большее количество строк и ячеек. Ячейки в теле таблицы обрамляются тегами D>...</ТD>.

По умолчанию ячейки данных в теле таблицы имеют левое выравнивание. В приведенном примере, в строке 33, в атрибуте АLIGN задается другой режим выравнивания. Имеется в виду горизонтальное выравнивание, о вертикальном выравнивании мы поговорим в следующем разделе. Атрибут АLIGN используется здесь тем же образом, как и с другими тегами НТМL.

Внешний вид документа 4.2

Использование таблиц эффективный и привлекательный метод подачи материала.

Типичная ошибка программирования 4.1

Если вы забудете закрыть один из открытых в таблице тегов, то это может привести к искажениям при присмотре таблицы. Обязательно проверяйте, чтобы все открытые теги были закрыты, и закрыты в правильном месте. Только тогда вы получите то, что планировали получить.

4.5. Таблицы НТМL и форматирование

В предыдущем разделе мы на примере рассматривали общую структуру таблиц. Теперь мы расширим наш пример — он приведен на рис. 4.5 — дополнительными возможностями форматирования.

Рис. 4.5. Пример таблицы с цветовым оформлением и сложным форматированием

Новая таблица начинается со строки 32 листинга. В строках 39-42 задается элемент COLGROUP, с помощью которого можно определять формат группы столбцов.

<COLGROUP>

< COL ALIGN =  “right”

<COL SPAN =   "4"  ALIGN =   "center">

</COLGROUP>

Между тегами <COLGROUP>...</COLGROUP> помещается нужное число элементов COL, определяющих формат группы столбцов, число которых задается в атрибуте SPAN. Тот или иной режим форматирования для столбца или группы столбцов может задаваться в любом из тегов COLGROUP и COL. В нашем примере мы задаем правое выравнивание текста в левом столбце таблицы и выравнивание по центру — для остальных столбцов таблицы. Другой полезный атрибут, который можно использовать здесь, — это атрибут WIDTH, в котором можно задать ширину столбца.

В строках 48 и 49 вводятся новые возможности оформления ячеек таблицы.

<TR BGCOLOR=   "#8888FF">

<ТН  ROWSPAN  =   "2">

Вы можете поменять цвет фона или задать фоновое изображение для строки таблицы или отдельной ячейки при помощи атрибутов BGCOLOR и BACKGROUND. Используются они так же, как и в элементе ВОDY.

В таблицах имеется возможность увеличить размер некоторых ячеек по сравнению с остальными. Для этого нужно в открывающем ячейку теге указать атрибуты ROWSPAN и COLSPAN. Этим атрибутам присваивается числовое значение, определяющее число объединяемых ячеек. В нашем случае атрибут ROWSPAN = "2" означает объединение двух ячеек по вертикали. Ячейки объединяются по вертикали, при этом происходит «перекрытие строк», поэтому в имени атрибута использовано слово ROW, обозначающее строку. В строке 53 используется атрибут COLSPAN

<ТН  СOLSPAN  =   "4"   VALIGN  =   "top">

в результате ячейка заголовка в нашем примере будет расширена за счет объединения четырех ячеек.

Здесь же используется еще одна возможность форматирования — вертикальное выравнивание. Отвечает за это атрибут VALIGN, который может получать одно из следующих значений: "top", "middle", "bottom" или "baseline". Первая строка текста всех ячеек строки, для которой задан режим VALIGN = "baseline", будет располагаться на базовой линии. По умолчанию для всех ячеек заголовка и тела таблицы применяется режим LIGN = "middle".

В оставшейся части текста страницы используются элементы языка и атрибуты тегов, которые мы уже рассматривали.

4.6. Основы форм HTML

В HTML имеется несколько способов получения информации от посетителей сайта, один из них форма (см. рис. 4.6).

Рис. 4.6. Простая форма с полем ввода текста

Форма в нашем примере вводится в строке 18

<FORM METHOD  =   "POST" ACTION = "/cgi-bin/formmail">

элементом FORM. Атрибут METHOD определяет метод, которым сервер Web будет обрабатывать данные формы и отсылать вам результат обработки. Когда в результате обработки запроса от формы должны изменяться данные на сервере, например обновляться база данных, то этот атрибут нужно использовать следующим образом: METHOD = "post". При этом данные формы будут передаваться серверу через переменные окружения, которую могут использовать сценарии (Как это делается, мы обсудим в главе 27, в которой мы будем говорить о языке Perl). Другое

Рис. 4.6. Простая форма с полем ввода текста

возможное значение для этого атрибута, METHOD = "get", должно использоваться, когда запрос от формы не предназначается для изменения данных на сервере, а используется, например, для запроса к базе данных. При этом варианте запроса данные от формы добавляются к строке URL, при этом может получиться, например, такая строка - /cgi-bin/formmail?name=bob&order=5. По этой причине данные, передаваемые таким методом, ограничены величиной 4К Также нужно учитывать, что передаваемые данные ограничены стандартным набором символов и не должны содержать специальные символы, как уже об этом говорилось в разделе 3.10.

Сервером Web называется компьютер, на котором установлен один из следующих пакетов программного обеспечения: Microsoft PWS (Personal Web Server), Microsoft IIS (Internet Information Server), Apache или Jigsaw. Каждый из них обсуждается в главе 24, посвященной серверам Web. Сервера Web обслуживают запросы от клиентских браузеров. Когда браузер запрашивает страницу или файл, расположенные где-то на сервере, сервер обрабатывает этот запрос и возвращает ответ браузеру. В нашем примере данные формы поступают сценарию CGI (Common Gateway Interface — общий шлюзовой интерфейс). Сценарий (или программа) могут быть написаны на Perl, С, Tel или на каком-нибудь другом языке программирования. Сценарий обрабатывает полученные им от сервера данные и обычно возвращает какие-то данные пользователю. В атрибуте ACTION тега FORM указывается путь к сценарию, который должен обрабатывать данные формы. В нашем случае это стандартный сценарий, который отправляет электронное письмо, содержащее данные формы, по указанному адресу. У многих поставщиков услуг Интернет есть такой сценарий на их Web сайте; если вы будете его использовать, то вы должны уточнить у своего поставщика точное имя и путь для такого сценария.

В нашем примере в форме используются некие данные, не видимые пользователю. 0ни вводятся в форму в строках 20-25

<INPUT TYPE = "hidden"  NAME  = "recipient"

VALUE =  "deitel@deitel.com">

<INPUT  TYPE  = "hidden"   NAME  = "subject"

VALUE =  "Feedback Form">

<INPUT  TYPE  = "hidden"  NAME  = "redirect".

VALUE  = "main.html">

с помощью вкрытых элементов ввода. Элемент INPUT часто употребляется в формах вместе с обязательным атрибутом TYPE. Среди других атрибутов нужно упомянуть атрибут NAME, в котором задается имя идентификатора для элемента  ввода, и атрибут VALUE — в нем задается значение этого элемента, отсылаемое в запросе серверу.

Как видно из примера, скрытые элементы ввода должны иметь атрибут TYPE = "hidden". Эти три скрытых элёмента ввода типичны для сценариев CGI этого типа: в них передается адрес электронной почты получателя, строка темы сообщения и URL, на который пользователь должен перейти, после отправки данных от формы.

Хороший стиль программирования 4.2

Размещайте скрытые элементы. INPUT в начале формы, сразу за открывающим тегом <FORM>. В этом случае такие элементы будет просто найти и идентифицировать.

Способ употребления элемента INPUT определяется значением его атрибута TYPE. Давайте рассмотрим еще один фрагмент примера, строки 28-29.

<P><STRONG> Имя: </STRONG>

<INPUT  NAME  = "name"  TYPE  = "text"   SIZE  = "25"</P>

Атрибутом TYPE = "text" в форму вводится однострочное текстовое поле. Текст, который пользователь введет в это поле, будет отсылаться на сервер в качестве значения этого поля. Обычно элементы ввода этого типа применяются для ввода имен и других данных, помещающихся в одну строку.

В этом примере мы еще используем атрибут SIZE, в котором задается размер поля ввода в символах. Вы можете ограничить максимальное число символов, которое клиент может ввести в текстовое поле ввода, при помощи атрибута MAXLENGTH = "length".

Хороший стиль программирования 4.3

Когда вы используете в формах элементы INPUT, не забывайте, что они должны иметь размер, достаточный для ввода тех данных, для которых они предназначены.

Нужно заметить, что элементы INPUT на форме должны сопровождаться текстом, поясняющим назначение данного элемента ввода. Например, в нашей форме рядом с текстовым полем мы поместили строку Имя:

Типичная ошибка программирования 4.3

Если вы забудете расположить текстовую метку рядом с элементом ввода это будет грубая ошибка. Без этого необходимого пояснения у пользователя не будет другой возможности узнать назначение такого элемента.

В строках 33-34 вводятся два новых типа элементов ввода

<INPUT  TYPE  = "submit"  VALUE  = "Отправить  данные">

<INPUT  TYPE  = "reset"  VALUE  =  "Очистить  данные">

которые, в обязательном порядке, присутствуют на каждой форме. С помощью атрибута TYPE = "submit" на форме создается командная кнопка, при нажатии на которую данные, введенные в форму, отправляются на сервер. В атрибуте VALUE вы можете отказаться от надписи по умолчанию, "submit", используемую для такой кнопки, и задать свой текст. Атрибут TYPE = "reset" создает командную кнопку, нажатие которой вызывает очистку данных, введенных пользователем во все элементы ввода формы. Эта кнопка может понадобиться для исправления ошибок ввода, а также тогда, когда нужно все начать сначала. Как и для кнопки типа submit, вы можете изменить надпись по умолчанию для кнопки reset, задав нужный текст в атрибуте VALUE. При этом изменится только надпись на кнопке, функционально ничего не поменяется.

Хороший стиль программирования 4.4

Не забывайте завершать код вашей формы тегом </FORM>. Если вы этого не сделаете, то может быть нарушена работа других форм, используемых на данной странице.

4.7. Сложные формы HTML

На рис. 4.7 мы приводим пример использования дополнительных возможностей ввода данных с помощью формы.  

Рис. 4.7 Пример формы, использующей текстовые блоки, поля ввода пароля и кнопки лажки

В строке 29 на форме задается элемент TEXTAREA.

<TEXTAREA NAME  = "comments"  ROWS   =  "4" COLS   = "36"></TEXTAREA>

Этот элемент создает на форме элемент ввода текстовый блок. Размер блока (текст в блоке может прокручиваться) задается в открывающем элемент теге <TEXTAREA> при помощи атрибутов ROWS и COLS. Первый определяет количество строк в блоке (высота блока), а второй — число символов в строке (ширина блока). Блок в нашем примере состоит из 4 строк и может вместить 36 символов в строку. При создании блока вы можете внести в него текст. Текст этот нужно задавать внутри тегов <TEXTAREA>...</TEXTAREA>.

Атрибут TYPE = "password" в строке 35

<INPUT NAME  =  "email"  TYPE  =   "password"   SIZE  =   "25"></P>

вводит текстовое поле заданного размера. Разница между текстовым полем и полем для ввода пароля только в том, что при вводе символов во второе поле на экран они не выводятся, а вместо них «печатаются» символы «звездочка». Делается это для того, чтобы кто-нибудь не смог подсмотреть какие-то важные данные на экране. Символы «*» появляются только на экране, на сервер отправляются те данные, которые пользователь ввел в это поле.

В строках 40-49 вводится новый элемент ввода данных в форму.

Дизайн сайта

<INPUT NAME = "things" TYPE = "checkbox" VALUE = "Design">

Cсылки

<INPUT NAME = "things" TYPE = "checkbox" VALUE = "Links">

Удобство работы

<INPUT NAME = "things" TYPE = "checkbox" VALUE = "Ease">

Графика

<INPUT NAME = "things" TYPE = "checkbox" VALUE = "Images">

Исходный код

<INPUT NAME = "things" TYPE = "checkbox" VALUE = "Code">

Каждый элемент INPUT с атрибутом TYPE = "checkbox" создает кнопку-флажок на форме. Кнопки-флажки могут использоваться независимо друг от друга или в группе. Все элементы в группе должны иметь одно и то же значения атрибута NAME (в нашем случае NAME = "things"). В этом случае наш сценарий, отправляющий электронное письмо, будет знать, что эти кнопки-флажки связаны друг с другом, и расположит их вместе, в одной строке создаваемого письма.

Типичная ошибка программирования 4.4

Если на вашей форме используются несколько кнопок-флажков с одним NAME, они обязательно должны иметь разные значения для атрибута . VALUE. Если этого не сделать сценарий не сможет различать такие флажки.

В следующем примере мы продолжим освоение форм и рассмотрим другие элементы формы (см. рис. 4.8).

Рис. 4.8. Пример формы с радиокнопками и выпадающим списком

В нашем последнем примере мы рассмотрим два новых типа элементов ввода. Первыми в примере, в строках 53-67, появляются радиокнопки.

С помощью поисковой системы

<INPUT NAME = "how get to site" TYPE = "radio"

VALUE = "search engine" CHECKED>

По ссылке с другого сайта

<INPUT NAME = "how get to site" TYPE = "radio"

VALUE = "link"> С сайта Deitel.com

<INPUT NAME = "how get to site" TYPE = "radio"

VALUE = "deitel.com">

Узнал адрес из книги 

<INPUT NAME = "how get to site" TYPE = "radio"

VALUE  =   "book">

Другое

       <INPUT NAME  =   "how get  to  site"   TYPE  =   "radio" VALUE  "other">

Радиокнопки вводятся в форму элементом INPUT с атрибутом TYPE = "radio". По своим функциям они очень похожи на кнопки-флажки. Разница состоит только в том, что в группе радиокнопок может быть отмечена только одна кнопка. Значения атрибута NAME у всех радиокнопок группы должны совпадать, а значения атрибута VALUE должны отличаться. Атрибут CHECKED используется для задания изначально выбранной радиокнопки. Этот же атрибут может использоваться  и в группе кнопок-флажков.

Типичная ошибка программирования 4.5

Если вы присвоили разные значения для атрибута NAME радиокнопок, входящих в группу, то пользователь может отметить одновременно все радиокнопки в группе, что явно нежелательно.

Следующий элемент, который мы вводим в примере в строках 73-86 — это элемент SELECT. Этот элемент помещает на форму список.

<SELECT NAME  =   "rating">

<OPTION  SELECTED>Замечательный:-)

<OPTION>10

<OPTION>9

<OPTION>8

<OPTION>7

<OPTION>6

<OPTION>5

<OPTION>4

<OPTION>3

<OPTION>2

<OPTION>1

<ОРТ1СЖ>Ужасный:-(

</SELECT></P>

Этот тип элемента ввода создается не элементом INPUT, а элементом SELECT. В открывающем теге <SELECT> не забывайте определить значение для атрибута NAME.

Элементы списка добавляются в него при помощи элементов OPTION, которые вводятся между тегами <SELECT>...</SELECT>. Значение элемента списка вводится за тегом <OPTION>, в той же строке. Значение, выбранное клиентом из списка, отсылается в запросе на сервер. Закрывающий тег элемента OPTION не является обязательным и, как правило, не используется. За последним элементом OPTION должен следовать зарывающий тег элемента SELECT. Атрибут SELECTED выполняет в этом элементе ту же роль, что и атрибут CHECKED в радиокнопках и кнопках-флажках: им помечается выбранный по умолчанию элемент списка.

Рассмотренный нами элемент используется для создания выпадающего списка с вариантами ответов (см. рис. 4.8). У этого элемента есть еще один атрибут, помещаемый в тег <SELECT>, который управляет внешним видом списка: можно задать число элементов, которые выводятся в окно списка, определив атрибут SIZE = "x". При этом список перестает быть выпадающим. Вы получите вариант развернутого списка, с линейкой прокрутки, если она нужна.

4.8. Внутренние гиперссылки

В главе 3 мы говорили о связывании страниц Web с помощью текстовых или графических якорей. На рис. 4.9 приводится пример использования внутренних ссылок. Для реализации этого механизма в нужных местах HTML-файла организуются точки привязки или закладки, которым присваиваются имена. Эти имена закладок могут добавляться к URL страницы. Это дает возможность осуществлять переходы в заданные места страницы, а не только на начало страницы.

Рис. 4.9. Внутренние гиперссылки улучшают возможности передвижения по вашим страницам

В строке 14 определяется внутренняя гиперссылка.

NAME  =   " features "></A>

Здесь на странице создается закладка при помощи атрибута NAME = "features" элемента А. Поскольку имя файла, содержащего нашу страницу, list.html, то URL для этой закладки на нашей странице будет выглядеть так -  list.html#features. В строке 50 вводится гиперссылка на закладку #features этой страницы.

<НЗ><А HREF =   "#features">Перейти  на:

                                  <ЕМ>Основные  возможности Интернет</ЕМ</А>

Если щелкнуть в браузере на этой гиперссылке, то текст в окне браузера будет прокручен к этому месту на странице. На рис. 4.9 приведены два изображения окна браузера, в которых наша страница просматривается, начиная с закладок. Вы можете также создавать гиперссылки на закладки на других страницах HTML, указывая URL вида HREF = "page.html#name".

Внешний вид документа 4.4

Внутренние гиперссылки особенно полезны в больших файлах HTML, содержащих большое количество информации. Они избавят пользователя от утомительных прокруток текста и поиска нужного места страницы.

4.9. Создание и использование карт ссылок

Вы уже знаете, что графическое изображение можно использовать в качестве якоря для привязки к ним гиперссылок на другие документы, расположенные на вашем сайте или где-либо в Интернет. Мы поговорим теперь о возможности создания так называемых карт ссылок (см. рис. 4.10), в которых в качестве якоря гиперссылок используются отдельные части изображения, называемые горячими областями (или горячими пятнами).

Рис. 4.10. Привязывание гиперссылок к изображению с помощью карты ссылок

Все элементы карты ссылок находятся между тегами <МАР>...</МАР>. Обязательным атрибутом элемента MAP, который открывается в строке 15, является атрибут NAME.

<МАР NAME  =   "picture"> 

Как мы увидим дальше, имя элемента MAP будет использоваться для ссылок на карту. Горячие точки на изображении вводятся элементами AREA. Каждый тег <AREA> должен содержать следующие атрибуты: HREF — целевой адрес гиперссылки для данной горячей точки; SHAPE и COORDS определяют тип геометрической фигуры горячей области и ее координаты; ALT — выполняет те же функции, что и в теге <IMG>.

В строках 19-20 нашего примера появляется первый атрибут SHAPE = "red".

<AREA HREF =   "form.html"   SHAPE  =   "rect"

COORDS  =   "3,   122,   73,   143"   ALT  =  "На  форму  обратной  связи">

Этот атрибут создает на изображении горячую область в форме прямоугольника, координаты которого задаются в атрибуте COORDS. Координаты в нем создаются при помощи координатных пар, состоящих из двух чисел, определяющих положение точки на оси x и у. Ось x располагается горизонтально и начинается с левого нижнего угла, а ось у — направлена вверх из этой точки. Каждая точка на изображении имеет уникальную пару координат x-y. Для определения прямоугольной горячей области достаточно задать координаты левого верхнего и правого нижнего углов прямоугольника. В нашем случае x-координата верхнего левого угла прямоугольника равна 3, а y-координата — 122. Записывается координатная пара обычно так: (3, 122). Соответственно, координаты нижнего правого угла — (73, 143). Другой тип горячей области определяется в строках 30-32.

<AREA HREF =   "mailto:deitel@deitel.com"   SHAPE  =   "poly" |

COORDS  =  "28,   22,   24,   68,   46,   114,   84,   111,   99,   56,   86,   13"

ALT  =  "Отправить  письмо  Дейтелам">

Здесь используется вариант атрибута SHAPE = "poly", который определяет многоугольник произвольной формы, координаты которого определяются в атрибуте COORDS простым перечислением координат всех вершин, или углов многоугольника. Браузер автоматически построит нужную фигуру, соединив эти вершины отрезками прямых.

Последний, из обычно используемых в картах ссылок вариантов горячей области, задается значением SHAPE = "circle". В этом случае горячая область имеет форму круга. В качестве координат области здесь определяются координаты центра окружности и радиус окружности в пикселах.

Чтобы связать с картой ссылок графический образ, вы должны определить последний в элементе IMG и включить в этот элемент атрибут USEMAP = "#пате", где в качестве "пате" нужно указать значение атрибута NAME элемента MAP. Что и делается в строках 42-43 нашего примера.

<IMG  SRC  =   "deitel.gif"   WIDTH =  "200"   HEIGHT  =  "144"   BORDER =  "1" ALT =   "Харви и Пол Дейтелы"   USEMAP =   "#picture">

Хороший стиль программирования 4.5

Располагайте теги <МАР>...</МАР> на одной странице с графическим образом, который их использует. Это упростит для вас процесс редактирования карты ссылок.

4.10. Теги <МЕТА>

Для поиска информации в Web используются поисковые системы. Поисковые системы обычно исследуют сайты по ссылкам на их страницах и запоминают информацию, идентифицирующую и классифицирующую каждую из этих страниц. Основной элемент языка HTML, который поставляет такую информацию поисковым системам, — это элемент МЕТА (см. рис. 4.11).

В строке 1 помещается информация для браузера

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRansitional//EN">

о том, что данный документ соответствует стандарту HTML Transitional 4.0. Хотя для интерпретации документа браузером эта строка не является обязательной, рекомендуется включать ее в начало каждого документа HTML.

Рис. 4.11. Использование тегов <МЕТА> и <!DOCTYPE>

Совет по переносимости программ 4.1

В процессе своего развития HTML претерпел несколько версий. Хотя последняя версия имеет номер 4, существует еще много браузеров и страниц Web, использующих стандарт HTML версии 3.2 и ниже. А так как в каждую новую версию вносились нововведения, то полезно сказать браузеру, с какой версией HTML он имеет дело это повысит его производительность. Кроме того, такие документы будут отвечать требованиям совместимости и переносимости.

Теги МЕТА должны содержать два обязательных атрибута. Первый из них, NAME, используется для идентификации типа самого тега МЕТА. В атрибуте CONTENT задаются данные, предназначенные для поисковых систем.

В строках 10-12 примера используется тег МЕТА.

<МЕТА NAME  =   "keywords"   CONTENT  =   "Webpage,   design,   HTML, tutorial,   personal,   help,   index,   form,   contact,   feedback, list,   links,   frame,   deitel,   Дейтел,   фрейм,   ссылки,   списки">

В данном случае используется элемент МЕТА с атрибутом  NAME = "keywords", у которого в атрибуте CONTENT перечисляются ключевые слова, описывающие тематику вашего сайта и предназначенные для поисковых систем. Эти ключевые слова используются поисковыми системами при поиске в Web; если часть из них будет соответствовать строке поиска, заданной клиентом, то у вашего сайта будут хорошие шансы оказаться в списке, который поисковый сайт выдаст клиенту. Итак, использование тегов МЕТА и удачный подбор ключевых слов в атрибуте CONTENT могут привлечь на ваш сайт больше посетителей, причем, что очень важно, - квалифицированных посетителей.

В строках 14-16 используется тег МЕТА с атрибутом NAME = "description".

<МЕТА NAME = "description" CONTENT = "Этот Web-сайт поможет вам познакомиться  с  основами  HTML и методами разработки Web-сайтов на  основе  примеров  и  советов.">

Этот вариант тега похож на вариант с ключевыми словами. Только вместо списка ключевых слов здесь приводится краткое, в три или четыре строки, удобочитаемое описание вашего сайта. Это описание также используется поисковыми системами для классификации вашего сайта.

Общая методическая рекомендация 4.1

Элементы МЕТА невидимы для пользователя Web-сайта и должны размещаться в заголовочной части документа HTML.

4.11. Тег <FRAMESET>

Все рассмотренные нами до сих пор страницы имели возможность ссылаться друг на друга, но не могли воспроизводиться браузером одновременно, а только по одной. На рис. 4.12 приводится пример страницы, в которой используются фреймы, применяя которые, вы можете просматривать несколько документов HTML одновременно. Фреймы, если использовать их умело, могут прибавить привлекательности вашему сайту и сделать его более удобным в использовании.

 

Рис. 4.12. Пример использования двух фреймов -  для навигации по сайту и представления содержания

В строке 1 мы видим несколько видоизмененный тег <!DOCTYPE>. <!DOCTYPE  HTML  PUBLIC   "-//W3C//DTD  HTML  4.0  Frameset//EN">

В качестве типа документа здесь используется термин Frameset, а не TRansitional. Тем самым тег предупреждает браузер, что в этом документе будут использоваться фреймы. В тех ваших документах, в которых используются фреймы, вы должны указывать этот вариант тега <!DOCTYPE>.

Страница, содержащая фреймы, должна начинаться открывающим тегом FRAMESET. В нашем примере он помещается на строке 20:

<FRAMESET  COLS   =   "110,*">

Этот тег сообщает браузеру, что в документе будут использоваться фреймы, описание которых приводится между тегами <FRAMESET>...</FRAMESET>. В открывающем теге <FRAMESET> в атрибуте COLS задается расположение фреймов в окне браузера. Значение, присваиваемое атрибуту COLS (или атрибуту ROWS, если вы создаете горизонтальные фреймы), задает ширину фрейма в пикселах или в процентах относительно ширины окна браузера. В нашем случае в атрибуте COLS = "110,*" объявляются два фрейма. Первый из них должен начинаться от левой стороны окна браузера и быть шириной 110 пикселов, а второй фрейм займет все оставшееся пространство (для этого используется символ «звездочка»).

После того как мы распределили экранное пространство, мы должны задать файлы, которые будут выводиться во фреймы. Делается это с помощью элементов FRAME в строках 24-25:

<FRAME NAME  =   "nav"   SRC  =  "nav.html">

<FRAME NAME  =   "main"   SRC  = "main.html">

В каждом элементе FRAME, в атрибуте SRC указывается URL выводимой в данный фрейм страницы. В нашем примере в первый фрейм, занимающий ПО пикселов в левой стороне экрана, выводится файл nav.html, которому в атрибуте NAME присваивается имя "nav". Во второй фрейм будет выводиться страница main.html, а фрейм получит имя "main".

Атрибут NAME используется для идентификации фреймов, что может понадобиться в гиперссылках для указания фрейма, в который нужно загружать целевую страницу. Например, гиперссылка

HREF =   "links.html"   TARGET =   "main">

будет вызывать загрузку файла links.html во фрейм со значением "name" у атрибута NAME.

Атрибут TARGET элемента якорь может принимать следующие предопределенные значения: TARGET = "_blank" — страница будет загружаться в новое, пустое окно браузера; TARGET = "_self" — загрузка страницы в то же окно, в котором находится якорь; TARGET = "_parent" — загрузка страницы в родительский FRAMESET (т.е. во FRAMESET, инкапсулирующий данный фрейм); TARGET = "_top" — загружаемая страница будет помещаться в окно браузера и будет занимать его полностью (т.е. страница грузится поверх FRAMESET).

Далее, в строках 26—32 нашего примера из рис. 4.12 используется элемент NOFRAMES, который обрабатывает ситуацию, когда клиентский браузер не поддерживает фреймов.

Совет по переносимости программ 4.2

Не все еще браузеры поддерживают фреймы. На этот случай включайте в элемент FRAMESET элемент NOFRAMES, в котором либо переводите клиента на версию вашего сайта, где фреймы не используются, либо предлагайте ему ссылку для загрузки поддерживающего фреймы браузера.

Внешний вид документа 4.5

Фреймы способны украсить ваш сайт, но не следует ими злоупотреблять. Не используйте фреймы для решения тех задач, которые можно выполнить с помощью таблиц или других, более простых средств форматирования HTML.

4.12. Вложенные теги <FRAMESET>

Страницы, использующие фреймы, можно сделать еще более изящными, если использовать вложенные фреймы, как это сделано на рис. 4.13. Первый уровень тегов FRAMESET вводится в строках 20-21:

<FRAMESET COLS = "110,*">

<FRAME NAME = "nav" SCROLLING = "no" SRC = "nav.html">

Элементы FRAMESET и FRAME используются здесь так же, как и в примере на рис. 4.12. До этого места у нас создан один фрейм, который занимает левую часть окна браузера, размером 110 пикселов. Атрибут SCROLLING получает значение "nо"; в результате браузер создаст фрейм без линейки прокрутки. Атрибут NORESIZE запрещает пользователю мышкой изменять размер фрейма.

Рис. 4.13. Web-сайт с вложенными фреймами (часть 1)

Рис. 4.13. Web-сайт с вложенными фреймами (часть 2)

Элемент FRAMESET второго, вложенного уровня распространяется только на оставшуюся часть элемента FRAMESET первого уровня, не занятую элементом FRAME. Другими словами, никакой из фреймов второго уровня в нашем примере не может занять левую часть окна браузера шириной 110 пикселов. В строках 25-27 вводятся теги наборов фреймов второго уровня.

<FRAMESET  ROWS   =   "175,*">

    <FRAME NAME  =   "picture"   SRC  =  "picture.html"  NORESIZE>

    <FRAME NAME  =   "main"   SRC = "main.html">

В этой области первые 175 пикселов из верхней половины окна браузера отводятся первому фрейму, а оставшаяся часть — второму фрейму, как это следует из атрибута ROWS = "175,*". Старайтесь не ошибаться, задавайте нужное число фреймов во втором уровне вложенности. Также не забывайте включить элемент NOFRAME и закрывающие теги для всех элементов FRAMESET.

Совет по отладке и тестированию 4.1

При использовании вложенных фреймов выделяйте каждый уровень вложенности соответствующим отступом. Такие страницы легко читать, отлаживать и редактировать.

Внешний вид документа 4.6

Вложенные фреймы могут послужить хорошим инструментом для создания привлекательных и простых в управлении Web-сайтов.

4.13. Обзор ресурсов Интернет и Всемирной паутины

Во Всемирной паутине довольно много сайтов, посвященных углубленному использованию HTML. Некоторые из них мы предложим вашему вниманию,              http://markradcliffe.со.uk/html/advancedhtml.htm

Сайт посвящен вопросам использования «продвинутых» возможностей HTML. В основном обсуждается использование фреймов и таблиц.

http://www.geocities.com/SiliconValley/Orchard/5212/

Этот ресурс также посвящен нетривиальным возможностям HTML. Основные затрагиваемые темы - таблицы, фреймы и другие прогрессивные технологии.

http://www.webdeveloper.com

Отличный ресурс для разработчиков Web-страниц. На сайте можно найти исчерпывающие описания практически по всем вопросам, касающимся создания страниц Web. На доходчивых примерах, представленных на сайте, даже сложные темы легко осваиваются.

Резюме

Элемент неупорядоченный список создает список, элементы которого помечаются маркером.  Начинаться  и заканчиваться  неупорядоченный  список должен тегами  <UL>  и </UL>, между которыми должны располагаться все элементы списка.

Каждый элемент неупорядоченного списка вводится тегом <LI>. Сразу за тегом вы можете вводить текст. Он будет выводиться с новой строки и отмечаться маркером. Закрывающий тег </LI> не является обязательным.

Вложенные списки применяются при составлении планов? Вложенный список содержится внутри другого списка. Каждый новый вложенный список сдвигается вправо относительно того, в который он вложен, и у него меняется маркер. Делается это для того, чтобы подчеркнуть структуру вложенности документа.

За последней строкой каждого закрытого списка браузер вставляет пустую строку.

Каждый элемент упорядоченного списка (<OL>...</OL>) сопровождается последовательным числом, а не маркером. По умолчанию упорядоченные списки нумеруются последовательными десятичными числами (1, 2, 3, ...).

Для изменения типа нумерации используется атрибут TYPE в открывающем теге <0L>.
Вы можете ввести атрибут
TYPE и в отдельный тег <LI>. По умолчанию в списках используется установка TYPE = "1", которой соответствует нумерация арабскими цифрами(1, 2, 3, ...). Если указать TYPE = "1", то список будет пронумерован римскими прописными цифрами (I, II, III, ...). Установка TYPE = "i" используется для нумерации римскими строчными цифрами (i, ii, iii, ...). Два последних варианта — TYPE="A" и TYPE="a" —соответствуют нумерации буквами латинского алфавита в верхнем и нижнем регистре.

В таблице данные располагаются по строкам и столбцам. Все теги и содержание таблицы
должны размещаться между тегами
<TABLE> и </TABLE>. В атрибуте BORDER можно
задать толщину рамки таблицы в пикселах. Атрибут
WIDTH задает ширину таблицы; вы
можете задать ее в пикселах и процентах относительно ширины окна браузера.

Заключенный между тегами <CAPTION> и </CAPTION> текст выводится в окне браузера непосредственно над таблицей. Этот тег, кроме этого, может помочь браузерам, работающим в текстовом режиме, интерпретировать табличные данные.

Таблица может быть разбита на несколько горизонтальных и вертикальных разделов. Все
данные раздела заголовка должны быть заданы между тегами
<THEAD> и </THEAD>;
это могут быть заголовок таблицы и заголовки столбцов таблицы. Элемент строки таблицы
TR выполняет форматирование ячеек отдельной строки таблицы. В строку попадают все ячейки, перечисленные между тегами <TR> и </TR>.

Самым мелким объектом таблицы, который мы можем определять, является ячейка данных. Существует только два типа ячеек: размещаемые в разделе заголовка (<ТН>...</ТН>)
и в разделе тела таблицы (
<TD>...</TD>). Ячейки заголовка обычно располагаются в теге
<THEAD>, в них задаются заголовок таблицы и заголовки столбцов таблицы.

Как и элемент THEAD, элемент TBODY используется для форматирования и группировки
элементов таблицы. Обычно в теле таблицы размещается большая часть данных таблицы.

По умолчанию ячейки данных (элементы TD) в теле таблицы имеют левое выравнивание,
а ячейки заголовка (элементы
ТН) — выравнивание по центру.

Аналогично тому, как элементы THEAD и TBODY используются для форматирования
групп строк таблицы, элемент
COLGROUP применяется для группировки и форматирования групп столбцов таблицы.

Между тегами <COLGROUP>...< /COLGROUP> могут вводиться элементы COL, задающие формат для указанного количества столбцов таблицы.

Вы можете поменять цвет фона или задать фоновое изображение для строки таблицы или
отдельной ячейки при помощи атрибутов
BGCOLOR и BACKGROUND. Используются
они так же, как и в элементе
BODY.

В таблицах имеется возможность увеличить размер некоторых ячеек по сравнению с остальными. Для этого нужно указать в атрибутах ROWSPAN и COLSPAN число объединяемых ячеек.

Атрибут VALIGN определяет вертикальное выравнивание ячеек таблицы и может принимать одно из следующих значений: "top", "middle", "bottom" или "baseline".

Первая строка текста всех ячеек строки, для которой задан режим VALIGN = "baseline", будет располагаться на базовой линии.

• По умолчанию для всех ячеек заголовка и тела таблицы применяется режим VALIGN = "middle".

  •  В HTML имеется несколько способов получения информации от посетителей сайта, один из них — форма.

Когда в результате обработки запроса от формы должны изменяться данные на сервере, на
пример, обновляться база данных, то нужно использовать атрибут
METHOD = "post". При этом данные формы будут передаваться серверу через переменные окружения, которые могут использовать сценарии. (Как это делается, мы обсудим в главе 27, в которой мы будем
говорить о языке
Perl). Другое возможное значение, METHOD = "get", должно использоваться, когда запрос от формы не предназначается для изменения данных на сервере, а используется, например, для запроса к базе данных. При этом варианте запроса данные от формы добавляются к строке URL. По этой причине данные, передаваемые таким методом,
ограничены величиной 4К. Также нужно учитывать, что передаваемые данные ограничены
стандартным набором символов и не должны содержать специальные символы.

Сервером Web называется компьютер, на котором установлен программный пакет Apache или Microsoft IIS. Серверы Web обслуживают запросы от клиентских браузеров. Когда
браузер запрашивает страницу или файл, расположенные где-то на сервере, сервер обрабатывает этот запрос и возвращает ответ браузеру.

В атрибуте ACTION тега FORM указывается путь к сценарию, который должен обрабатывать данные, формы.

Элемент INPUT часто употребляется в формах вместе с обязательным атрибутом TYPE. Среди других атрибутов нужно упомянуть атрибут NAME, в котором задается имя идентификатора для элемента ввода, и атрибут VALUE — в нем задается значение этого элемента, отсылаемое в запросе серверу.

Атрибутом TYPE = "text" в форму вводится однострочное текстовое поле. Текст, который пользователь введет в это поле, будет отсылаться на сервер в качестве значения этого поля. В атрибуте SIZE задается размер поля ввода в символах. Вы можете ограничить максимальное число символов, которое клиент может ввести в текстовое поле ввода, при помощи атрибута MAXLENGTH = "length".

Нужно заметить, что элементы INPUT на форме должны сопровождаться текстом, поясняющим назначение данного элемента ввода. Например, на форме нашего примера рядом с текстовым полем мы поместили строку Имя:.

С помощью атрибута TYPE = "submit" на форме создается командная кнопка, при нажатии на которую данные, введенные в форму, отправляются на форму. В атрибуте VALUE вы можете указать текст надписи для такой кнопки.

Атрибут TYPE = "reset" создает командную кнопку, нажатие которой вызывает очистку данных, введенных пользователем во все элементы ввода формы.

Элемент TEXTAREA создает на форме элемент ввода текстовый блок. Размер блока (текст в блоке может прокручиваться) задается в открывающем элемент теге <TEXTAREA> при помощи атрибутов ROWS и COLS.

Атрибут TYPE = "password" вводит текстовое поле. Разница между текстовым полем и полем для ввода пароля только в том, что при вводе символов во второе поле на экран они не выводятся, а вместо них «печатаются» символы «звездочка». Делается это для того,
чтобы кто-нибудь не смог подсмотреть какие-то важные данные на экране. Символы «*» появляются только на экране, на сервер отправляются те данные, которые пользователь ввел в это поле.

Каждый элемент INPUT с атрибутом TYPE = "checkbox" создает кнопку-флажок на форме. Кнопки-флажки могут использоваться независимо друг от друга или в группе. Все
элементы в группе должны иметь одно и то же значения атрибута
NAME (в нашем случае
NAME = "things").

Радиокнопки вводятся в форму элементом INPUT с атрибутом TYPE = "radio", по своим функциям они очень похожи на кнопки-флажки. Разница состоит только в том, что в группе радиокнопок может быть отмечена только одна кнопка. Значения атрибута NAME у всех радиокнопок группы должны совпадать, а значения атрибута VALUE должны отличаться.

Атрибут CHECKED используется для задания изначально выбранной радиокнопки..

Элемент SELECT помещает на форму список. Элементы списка добавляются в него при помощи элементов OPTION, которые вводятся между тегами <SELECT>...</SELECT>.
Значение элемента списка вводится за тегом <SELECT>, в той же строке. Можно, задать число элементов, которые выводятся в окно списка, определив атрибут SIZE ="x". При этом список перестает быть выпадающим. Вы получите вариант развернутого списка.

Закладка на странице создается при помощи атрибута NAME элемента А. Если щелкнуть в браузере на внутренней гиперссылке, то текст в окне браузера будет прокручен к нужному месту на странице.

В карте ссылок отдельные части изображения, называемые горячими областями (или горячими пятнами), используются в качестве якоря гиперссылок.

Все элементы карты ссылок находятся между тегами <МАР>...</МАР>. Обязательным атрибутом элемента MAP является атрибут NAME.

Горячие точки на изображении вводятся элементами AREA. Каждый тег <AREA> должен содержать следующие атрибуты: HREF — целевой адрес гиперссылки для данной горячей точки; SHAPE и COORDS определяют тип геометрической фигуры горячей области и ее координаты; ALT — выполняет те же функции, что и в теге <IMG>.

Атрибут SHAPE = "feet" создает на изображении горячую область в форме прямоугольника, координаты которого задаются в атрибуте COORDS.

Координатные пары состоят из двух чисел, определяющих положение точки на оси x и у. Ось x располагается горизонтально и начинается с левого нижнего угла, а ось у — направлена вверх из этой точки. Каждая точка на изображении имеет уникальную пару координат x-у, которая, обычно, записывается в виде (x, у).

Для определения прямоугольной горячей области достаточно задать координаты левого верхнего и правого нижнего углов прямоугольника.

Атрибут SHAPE = "poly" определяет многоугольник произвольной формы, координаты которого задаются в атрибуте COORDS простым перечислением координат всех вершин (углов) многоугольника.

Атрибут SHAPE = "circle" задает горячую область в форме круга. В качестве координат области здесь определяются координаты центра окружности и радиус окружности в пикселах.

Чтобы связать с картой ссылок графический образ, вы должны определить последний в элементе IMG и включить в этот элемент атрибут USEMAP = "#пате", где в качестве "пате" нужно указать значение атрибута NAME элемента MAP.

Основной элемент языка HTML,  который поставляет информацию поисковым системам, — это элемент МЕТА.

Строка <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> информирует браузер о том, что данный документ соответствует стандарту HTML Transitional 4.0.

Теги МЕТА должны содержать два обязательных атрибута. Первый из них, NAME, используется для идентификации типа тега МЕТА. В атрибуте CONTENT задаются данные, предназначенные для поисковых систем.

У элемента МЕТА с атрибутом NAME  = "keywords" в атрибуте CONTENT перечисляются ключевые слова, описывающие тематику вашего сайта, предназначенные для поисковых систем. При помощи этих ключевых слов вы можете дать поисковым системам более точную информацию о себе и привлечь на свой сайт нужных вам клиентов.

Содержание элемента МЕТА с атрибутом NAME = "description" должно быть кратким, в три или четыре строки, и удобочитаемым описанием вашего сайта. Это описание используется поисковыми системами для классификации вашего сайта.

Элементы МЕТА невидимы для пользователя Web-сайта и должны размещаться в заголовочной части документа HTML.

Строка <!DOCTYPE HTML PUBLIC  “-//W3C//DTD HTML 4.0 Frameset//EN">предупреждает браузер, что в этом документе будут использоваться фреймы. В тех ваших документах,  в  которых  используются фреймы,  вы должны указывать этот вариант тега
<!DOCTYPE>.

Тег FRAMESET сообщает браузеру, что в документе будут использоваться фреймы.

Атрибуты COLS или ROWS задают размер фрейма в пикселах или в процентах относительно ширины окна браузера.

В каждом элементе FRAME, в атрибуте SRC указывается URL выводимой в данный фрейм страницы.

Атрибут NAME используется для идентификации фреймов, что может понадобиться в Гиперссылках для указания фрейма, в который нужно загружать целевую страницу. Атрибут TARGET элемента якорь должен указывать на имя фрейма, т.е. должен быть равен
значению атрибута
NAME элемента FRAME, в который нужно загружать файл.

Атрибут TARGET элемента якорь может принимать следующие предопределенные значения: TARGET = "_blank" - страница будет загружаться в новое, пустое окно браузера;
TARGET = "_self" – загрузка страницы в то же окно, в котором находится якорь; TARGET = "_parent" — загрузка страницы в родительский FRAMESET (т.е. во FRAMESET, инкапсулирующий данный фрейм); TARGET = "_top" - загружаемая страница будет помещаться в окно браузера и будет занимать его полностью.

Не все посетители вашего сайта будут использовать браузеры, поддерживающие фреймы. На этот случай включайте в элемент FRAMESET элемент NOFRAMES, в котором либо переводите клиента на версию вашего сайта, где фреймы не используются, либо предлагайте ему ссылку для загрузки поддерживающего фреймы браузера.

Страницы, использующие вложенные фреймы, можно сделать более информативными.


Терминология

ACTION, атрибут элемента FORM

AREA

BORDER, атрибут элемента TABLE

CAPTION, элемент

CELLSPACING, атрибут элемента TABLE

CHECKED

COL, элемент

COLGROUP, элемент

COLS, атрибут элемента TABLE

COLSPAN, атрибут элемента TD

COORDS, атрибут элемента AREA

DATAFIELD, атрибут элемента TD

<!DOCTYPE...>

FRAME, элемент (<FRAME>...</FRAME>)

FRAMESET, элемент

INPUT, элемент (<INPUT>...</INPUT>)

INPUT Type="button"

INPUT Type= "checkbox"

INPUT Type='password "

INPUT Type="radio"

INPUT Type="reset"

INPUT Type="submit "

INPUT Type="text"

INPUT Type= "text area"

MAP, элемент

MAXLENGTH="#"

<META>, тег

METHOD="get"

METHOD="post"

NAME, атрибут элемента INPUT

NAME="recipient" в элементе INPUT

NAME="redirect' в элементе INPUT

NAME="subject" в элементе INPUT

NOFRAMES

NORESIZE, атрибут элемента FRAME

OL, элемент упорядоченного списка (<OL>…</OL>)

ROWSPAN, атрибут элемента TD

SCROLLING, атрибут элемента FRAME

SELECT, элемент

(<SELECT >...</SELECT>)

SHAPE, атрибут элемента AREA

SIZE, атрибут элемента SELECT

SRC, атрибут элемента FRAME

TABLE, элемент (<TABLE>...</TABLE>)

TARGET="_blank"

TARGET="_parent"

TARGET="_self'

TARGET="_top"

TBODY

TD, элемент ячейка данных (<TD>...</TD>)

TH, элемент ячейка заголовка

THEAD, элемент

(<THEAD>...</THEAD>)

TR, элемент строка таблицы

(<TR>...</TR>)

TYPE=1, атрибут элемента OL

TYPE=A, атрибут элемента OL

TYPE=a, атрибут элемента OL

TYPE=I, атрибут элемента OL 

TYPE=i, атрибут элемента OL 

UL, элемент неупорядоченного списка

   (<UL>...</UL>)

USEMAP="name", атрибут элемента IMG

VALUE, атрибут элемента INPUT

браузер, работающий в текстовом режиме

вложенные списки

внутренняя ссылка

горячая область

горячая область, в форме круга

горячая область, в форме прямоугольника

карта ссылок

переменная окружения  

сервер Web

список

столбец таблицы

строка таблицы

сценарий CGI

таблица

форма

система координат х-у

ячейка данных

ячейка таблицы

Общая методическая рекомендация

4.1.    Элементы МЕТА невидимы для пользователя Web-сайта и должны размещаться в заголовочной части документа HTML.

Типичные ошибки программирования

  1.  Если вы забудете закрыть один из открытых в таблице тегов, то это может привести
    к искажениям при присмотре таблицы. Обязательно проверяйте, чтобы все открытые
    теги были закрыты, и закрыты в правильном месте. Только тогда вы получите то, что
    планировали получить.
  2.  Не забывайте, что когда вы используете атрибуты COLSPAN и ROWSPAN, расширяемая ячейка занимает место других ячеек. Соответственно, вы должны в коде страницы использовать меньшее число тегов ячеек в нужной строке или столбце. Если вы не учтете этот эффект, то структура вашей таблицы будет нарушена, поскольку в ней окажется больше столбцов или строк, чем вы планировали.
  3.  Если вы забудете поместить текстовую метку рядом с элементом ввода — это будет грубая ошибка. Без этого необходимого пояснения у пользователя не будет другой возможности узнать назначение такого элемента.
  4.  Если на вашей форме используются несколько кнопок-флажков с одним NAME, они
    обязательно должны иметь разные значения для атрибута
    VALUE. Если этого не сделать — сценарий не сможет различать такие флажки.
  5.  Если вы присвоили разные значения для атрибута NAME радиокнопок, входящих
    в группу, то пользователь может отметить одновременно все радиокнопки в группе, что
    явно нежелательно.

Внешний вид документа

  1.  Использование упорядоченных списков разных типов поможет вам создать хорошо организованный сайт, на котором информация подается в систематизированном виде.
  2.  Использование таблиц — эффективный и привлекательный метод подачи материала.
  3.  Вы можете улучшить расположение данных в таблице с помощью атрибутов COLS
    PAN и ROWSPAN, в результате чего ваша таблица будет смотреться лучше.
  4.  Внутренние гиперссылки особенно полезны в больших файлах HTML, содержащих
    большое количество информации. Они избавят пользователя от утомительных прокруток текста и поиска нужного места страницы.
  5.  Фреймы способны украсить ваш сайт, но не следует ими злоупотреблять. Не используйте фреймы для решения тех задач, которые можно выполнить с помощью таблиц или других, более простых средств форматирования HTML.
  6.  Вложенные фреймы могут послужить хорошим инструментом для создания привлекательных и простых в управлении Web-сайтов.

Советы по переносимости программ

4.1. В процессе своего развития HTML претерпел несколько версий. Хотя последняя версия
'имеет номер 4, существует еще много браузеров и страниц
Web, использующих стандарт HTML версии 3.2 и ниже. А так как в каждую новую версию вносились нововведения, то полезно сказать браузеру, с какой версией HTML он имеет дело, это повысит
его производительность. Кроме того, такие документы будут отвечать требованиям со
вместимости и переносимости.

4.2. Не все еще браузеры поддерживают фреймы. На этот случай включайте в элемент
FRAMESET элемент NOFRAMES, в котором либо переводите клиента на версию ваше
го сайта, где фреймы не используются, либо предлагайте ему ссылку для загрузки поддерживающего фреймы браузера.

Совет по отладке и тестированию

4.1.   При использовании вложенных фреймов выделяйте каждый уровень вложенности соответствующим отступом. Такие страницы легко читать, отлаживать и редактировать.

Хороший стиль программирования

  1.  Код страницы проще редактировать и отлаживать, если строки вложенных списков
    имеют соответствующие отступы.
  2.  Размещайте скрытые элементы INPUT в начале формы, сразу за открывающим тегом
    <FORM>. В этом случае такие элементы будет просто найти и идентифицировать.
  3.  Когда вы используете в формах элементы INPUT, не забывайте, что они должны иметь
    размер, достаточный для ввода тех данных, для которых они предназначены.
  4.  Не забывайте завершать код вашей формы тегом </FORM>. Если вы этого не сделаете,
    то может быть нарушена работа других форм, используемых на данной странице.
  5.  Располагайте теги <МАР>...</МАР> на одной странице с графическим образом, который их использует. Это упростит для вас процесс редактирования карты ссылок.

Упражнения для самоконтроля

4.1. Установите, являются следующие утверждения верными или неверными. Если утверждение неверно, — объясните почему.

  1.  На количество уровней вложений упорядоченных и неупорядоченных списков ограничений нет.
  2.  Все ячейки таблицы имеют одинаковую ширину.
  3.  В упорядоченном списке можно использовать только один тип нумерации. Сменить
    тип нумерации вы можете, только начав новый список.
  4.  Элемент THEAD является обязательным элементом таблицы HTML.
  5.  На одной странице можно использовать не более 100 гиперссылок.
  6.  Все браузеры могут отображать фреймы.

4.2. Заполните пропуски в следующих утверждениях.

  1.  Клавиша формы, при щелчке на которую очищаются все введенные в форму данные,
    создается с помощью атрибута элемента
    INPUT.
  2.  Экранное пространство делится между фреймами атрибутом или атрибутом  тега <FRAMESET>.
  3.  Новый элемент в список добавляется элементом HTML .

d) Элемент   применяется для указания браузеру номера версии языка

HTML, используемого на странице. Этот элемент может быть двух типов:

и .

e) В карте ссылок обычно используются следующие обозначения для трех геометрических областей: , и .

4.3. Напишите теги HTML, с помощью которых можно решить следующие задачи:

а) Создайте страницу Web с фреймами, первый из которых занимает левую часть окна браузера размером 300 пикселов.

  1.  Создайте упорядоченный список, пронумерованный римскими цифрами в нижнем
    регистре.
  2.  Создайте на форме элемент управления раскрытый список, в окно которого выводятся четыре элемента списка.
  3.  Введите на страницу изображение deitel.gif, которое должно использоваться с картой ссылок по имени NAME="hello". В качестве текста для атрибута ALT задайте
    строку "
    hello".

Ответы к упражнениям для самоконтроля

4.1. а) Верно.

  1.  Неверно. Вы можете задать ширину любого столбца таблицы в пикселах или в про
    центах от обшей ширины таблицы.
  2.  Неверно. Вы можете указать тип нумерации для любого элемента списка в атрибуте
    TYPE=" name".
  3.  Неверно. Элемент THEAD применяется для оформления таблицы и не является обязательным, но его рекомендуется использовать.
  4.  Неверно. Количество гиперссылок на странице не ограничивается.
  5.  Неверно. Браузеры, работающие в текстовом режиме, не могут отображать фреймы и
    будут использовать часть страницы, заданную вами между тегами <
    NOFRAMES>...
    </NOFRAMES>.

  1.  a) TYPE="reset". b) COLS, ROWS, с) LI. d) <!DOCTYPE...>, TRANSITIONAL, FRAME
    SET, e) poly, circle
    и rect.
  2.  a) <FRAMESET COLS = "300,* ">...< /FRAMESET>

  1.  <OL TYPE = "i">...</OL> a
  2.  <SELECT SIZE = "4">...</SELECT>
  3.  <IMG SRC = "deitel.gif" ALT = "hello" USEMAP = "#hello"

Упражнения

4.4. Укажите, какие из указанных ключевых слов является элементами или атрибутами,
a) SIZE

b)OL -

  1.  LI
  2.  FRAME
  3.  CAPTION
  4.  SELECT
  5.  TYPE

4.5. Что будет отображено на экране в результате просмотра следующего фрагмента страницы, содержащего вложенные фреймы? Предположим, что используемые страницы —
пустые, а цвет фона у них — белый. Монитор работает в режиме 800x600. Сделайте на
бросок изображений, учитывающий соотношения размеров.

<FRAMESET ROWS = "20%,*">

<FRAME SRC = "hello.html "NAME = "hello">  <FRAMESET COLS = "150,*">

<FRAME SRC = "nav.html" NAME = "nav">

<FRAME SRC = "deitel.html" КАМЕ = "deitel">

</FRAMESET> </FRAMESET>

4.6. Напишите HTML - код, создающий таблицу, изображение которой приведено на рисунке. Таблица должна быть шириной 400 пикселов, толщина рамки - 1 пиксел. В заголовке таблицы используйте элемент Н2.

4.7.  Предположим, что у вас есть документ с большим количеством разделов. Создайте страницу HTML с двумя фреймами: в левом выведите список оглавления, а в правом — текст документа. Элементы оглавления должны содержать внутреннюю гиперссылку, вызывающую прокрутку документа к нужному разделу.

PAGE  84


 

А также другие работы, которые могут Вас заинтересовать

49949. Вероятностные методы расчета конструкций 852 KB
  Поверхность плотности распределения pxy Вероятностные методы расчета конструкций Литература Арнольд В. В теории вероятностей главная задача зная состав генеральной совокупности изучить распределения для состава случайной выборки. разрушение одного элемента изза перераспределения усилий приводит к изменению вероятностей разрушения остальных элементов. Характеристики распределения случайных величин 3.
49951. Вступ до теорії і методики викладання гімнастики 38 KB
  Стройові вправи. Стройові вправи: стройові прийоми шикування пересування Класифікація стройових вправ Стройові вправи класифікуються таким чином: стройові прийоми пересування шикування та перешикування розмикання та змикання див. Місце стройових вправ у загальній структурі уроку і їх значення Стройові вправи є одним із засобів гімнастики; однією із складових фізичного виховання дітей дошкільного віку школярів студентів а також підготовки допризивної молоді та військовослужбовців. Як правило стройові вправи застосовуються у...
49952. Расчет ветровой нагрузки 75 KB
  Эпюра средней скорости ветра и ветровая нагрузка Расчет волновой нагрузки на опорные колонны СПБУ при регулярном волнении Волновая нагрузка преграды с малыми относительно длины волны l размерами поперечного сечения может быть представлена как сумма скоростной Qск и инерционной Qин составляющих: Q = Qин Qск Однако учитывая что вопервых скоростная составляющая Qск при воздействии на форменные решетчатые конструкции является преобладающей т. Qск Qин и вовторых инерционная составляющая Qин во времени действует асинхронно по отношению к...
49954. Законы распределения случайных величин 413 KB
  Функция распределения x b. Функция плотности распределения вероятности: М. Нормальное распределение Плотность распределения: 45.
49955. АБСОРБЦИОННЫЙ МЕТОД ОПРЕДЕЛЕНИЯ МАКСИМАЛЬНОЙ ЭНЕРГИИ БЕТА-СПЕКТРА РАДИОНУКЛИДА 254.5 KB
  Соловьев АБСОРБЦИОННЫЙ МЕТОД ОПРЕДЕЛЕНИЯ МАКСИМАЛЬНОЙ ЭНЕРГИИ БЕТАСПЕКТРА РАДИОНУКЛИДА Практическое руководство Томск 2012 Утверждено ОМС 5 мая 1999г. Определение максимальной энергии бетаспектра радионуклида: Руководство к лабораторной работе. В руководстве рассмотрены методы идентификации радионуклидов с помощью определения максимальной энергии излучения.