Лекции / Глава 19. Введение в веб-программирование

Рисунок 19.5

Если необходимо добавить подзаголовки (заголовки низкого уровня), нужно

использовать элемент h2. Полезно визуализировать заголовки в виде списка.

§19.7 Списки в HTML

Чтобы составить нумерованный список элементов, нужно использовать элемент

ol, маркированный – ul. В обоих случаях каждый элемент списка выделяется

элементом li.

Пример использования:

…

<p>

Существуют обязательные элементы, которые должны присутствовать на любой веб-странице:

</p>

<ol>

<li>doctype – тип документа;</li>

<li>тег html;</li> <li>тег head</li> <li>тег title;</li> <li>тег body.</li> </ol>

</body>

</html>

Результат выполнения программы (рисунок 19.6):

11

Рисунок19. 6

§19.8 Комментарии в HTML

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

Комментарии позволяют делать пометки во время работы над сайтом. Кроме того,

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

§19.9 Спецсимволы

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

Для устранения данной проблемы можно использовать специальные кодирующие последовательности &qt:, которую можно добавить в текст скрипта.

Много различных последовательностей существует для представления широкого набора символов, большинство из которых отсутствует на клавиатуре. Все они начинаются со знака амперсанда & и заканчиваются точкой с запятой (;). Некоторые из них представлены в таблице 19.1.

Таблица 19.1. Некоторые кодирующие последовательности

12

§19.10 Загрузка изображений

Вставим в документ изображение, воспользовавшись элементом img6. Он используется для вставки изображения на веб-страницу, а атрибуты src, alt, width, height

описывают параметры рисунка. Атрибут src – имя файла изображения. В данном случае это htmllogo.jpg, который надо разместить в одной папке с кодом сайта. Атрибут alt –

альтернативный текст, который будет показан, если изображение не загрузилось. width

и height – ширина и высота изображения в пикселях.

Добавим следующую разметку в наш файл:

<img src="htmllogo.jpg" width="200" height="200" alt="htmllogo"/>

Результат выполнения программы (рисунок 19.7):

Рисунок 19.7

§19.11 Структурирование с использованием элемента div

Элемент div7 служит для разделения веб-страницы на отдельные секции. Он предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.

Когда вы помещаете какой-то контент в элемент div, это не оказывает явного влияния на отображение самого текста.

6http://htmlbook.ru/html/img

7http://htmlbook.ru/html/div

13

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

который должен объединить связанные между собой элементы.

Разделим исходный скрипт на заголовочный раздел (<div id="header">), раздел с картинками (<div id="image">) и основной раздел (<div id="content">). Для каждого раздела указываем уникальные (не повторяющиеся) атрибуты.

Когда вы будете работать с CSS и JS, атрибуты id вам пригодятся.

§19.12 Тег привязки <a>

Тег <a>8 является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег <a>

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

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

Атрибут href отсылает пользователя на страницу, куда ведет ссылка (будь то файл на вашем компьютере или страница в Интернете).

Синтаксис:

<a href="URL">...</a>

<a name="идентификатор">...</a>

Создадим еще две веб-страницу «Lesson2.html» и «Lesson3.html» и с помощью тега привязки организуем организацию между страницами. Привязанные ссылки между страницы находятся внутри раздела <div id="blocklink">.

Lesson2.html

<!DOCTYPE html> <html lang="en"> <head>

<meta charset="UTF-8"/> <meta name="author"

content="Заид Мингалиев"> <title>Урок второй - Элемент html</title>

</head>

<body>

8 http://htmlbook.ru/html/a

14

<div id="header"> <h1>

Элемент html </h1>

</div>

<div id="image">

<img src="html.jpg" width="150" height="100" alt="html"/> <div id="content">

<p>

html – контейнер, содержащий описание всех элементов html-документа. Там находятся два главных раздела: head и body.

</p>

<p>

Обратите внимание на открывающийся тег. Здесь lang=”en” - имя атрибута в открывающемся теге. html-элементы могут один или несколько атрибутов, зависящих от того, к какому элементу они применяются. Каждый атрибут имеет название и значение, которые записываются следующим образом:

</p>

<p align="center">

название = «значение»

</p>

</div>

<div id="blocklink"> <p>

<a href="Lesson1.html">Предыдущий урок</a> <a href="Lesson3.html">Следующий урок</a>

</p>

</div>

</body>

</html>

Lesson3.html

<!DOCTYPE html> <html lang="en"> <head>

<meta charset="UTF-8"/> <meta name="author"

content="Заид Мингалиев"> <title>Урок второй - Элемент html</title>

</head>

<body>

<div id="header">

15

<h1>

Элемент head

</h1>

</div>

<div id="image">

<img src="head.jpg" width="300" height="200" alt="head"/> <div id="content">

<p>

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

всебя элемент title (название), который сообщает браузеру, что нужно отобразить на заголовке веб-страницы.

</p>

<p>

Стоит заметить, что элемент title используется для обработки содержимого страницы и для выбора информации, которая будет показана

врезультатах поиска.</p>

</div>

<div id="blocklink"> <p>

<a href="Lesson2.html">Предыдущий урок</a>

</p>

</div>

</body>

</html>

Результат работы программы (три веб-страницы) представлены на рисунке 8:

Рисунок 19.8

16

§19.13 Тег <span>

Элемент <span> предназначен для определения строчных элементов документа.

В отличие от блочных элементов, таких как <p> или <div>, с помощью тега <span>

можно выделить часть информации внутри других тегов и установить для нее свой стиль. Например, внутри абзаца (тега <p>) можно изменить цвет и размер первой буквы,

если добавить начальный и конечный тег <span> и определить для него стиль текста.

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

§19.14 Тег <input>

Тег <input> является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем.

Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков. Хотя элемент <input> не требуется помещать внутрь контейнера <form>, определяющего форму, но если введенные пользователем данные должны быть отправлены на сервер, где их обрабатывает серверная программа,

то указывать <form> обязательно. То же самое обстоит и в случае обработки данных с помощью клиентских приложений, например, скриптов на языке JavaScript.

Основной атрибут тега <input>, определяющий вид элемента — type. Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем

(password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка

(button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file) и кнопка с изображением (image). Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики.

Кроме того, в HTML5 добавлено еще более десятка новых элементов.

Рассмотрим пример:

<!DOCTYPE HTML> <html>

<head>

<meta charset="utf-8"> <title>Тег INPUT</title> </head>

<body>

17

<form name="test" method="post" action="input1.php">

<p><b>Ваше имя:</b><br>

<input type="text" size="40"> </p>

<p><b>Каким браузером в основном пользуетесь:</b><Br>

<input type="radio" name="browser" value="ie"> Internet Explorer<Br>

<input type="radio" name="browser" value="opera"> Opera<Br> <input type="radio" name="browser" value="firefox"> Firefox<Br> </p>

<p>Комментарий<Br>

<textarea name="comment" cols="40" rows="3"></textarea></p> <p><input type="submit" value="Отправить">

<input type="reset" value="Очистить"></p> </form>

</body>

</html>

Результат работы программы представлен ниже:

Рисунок 19.9 Вид элементов формы в браузере

Здесь атрибут type сообщает браузеру, к какому типу относится элемент формы.

В таблице 19.2 перечислены возможные значения атрибута type и получаемый вид поля формы.

18

Таблица 19.2. Значения type

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

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

«имя=значение»,

где имя задается атрибутом name тега <input>, а значение — атрибутом value.

§19.15 События HTML

События HTML — это специальные глобальные атрибуты, используемые в тегах для вызова обработчиков событий, написанных на различных языках сценариев таких,

как JavaScript и вызываемых, когда на странице происходит какое-либо действие.

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

События делятся на следующие категории:

1.Атрибуты событий окна - события, вызываемые на объект окна.

Применяются с тегом <body>.

19

Например: событие onload возникает, когда объект загружен.

<body type="text" onload="myFunction()">

2. События формы – события, которые срабатывают на действия внутри HTML

формы. Могут применяться почти ко всем элементам HTML, но чаще всего применяются к элементам формы.

Например: событие onchange срабатывает когда изменяется значение элемента либо когда элемент теряет фокус (выбран другой элемент веб-страницы) при условии,

что его значение с момента потери фокуса изменилось.

<input type="text" name="txt" value="Текст..."

onchange="myFunction(this.value)">

3. События клавиатуры - события, вызываемые клавиатурой. Могут применяться ко всем элементам HTML.

Например: событие onkeypress срабатывает, когда клавиша на клавиатуре нажата и отпущена, что эквивалентно совместному действию onkeydown (нажатие клавиши) и onkeyup (отпускание клавиши).

<input type = "text" onkeypress = "keyboardTest()">

4. События мыши - события, вызываемые действиями мышкой или аналогичными действиями пользователя.

Например: событие onclick возникает при щелчке левой кнопкой мыши на элементе, к которому добавлен атрибут onclick.

<p id="demo" onclick="myFunction()">Кликни меня, чтобы поменять

стиль абзаца.</p>

5. События буфера обмена – события, вызываемые при копировании или вставки

элементов.

Например: событие oncopy возникает, когда пользователь копирует в буфер

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

Также, событие oncopy возникает, когда пользователь копирует сам HTML

элемент, например, изображение, созданное тегом <img>.

20