7. Язык HTML.

Информатика. Учебник для 9 класса (по учебнику К. Ю. Полякова, Е.А. Еремина, базовый уровень)

§7. Язык HTML.

Простейшая страница

Ключевые слова:

• тэг	
• контейнер	
• атрибут
• гиперссылка
• список

Веб-страница — это текстовый файл в формате «только текст», который можно редактировать в любом текстовом редакторе, таком как Блокнот в Windows. Этот файл должен иметь расширение htm или html. Двойной щелчок на значке файла открывает его в браузере.

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

Используя дополнительные источники, выясните, что означает английское слово tag.

Простейшая веб-страница состоит из двух тэгов: начинается с открывающего тэга <html> и заканчивается закрывающим тэгом </html>:

<html>

</html>

Такие пары тэгов образуют контейнеры: закрывающий тэг ограничивает область действия открывающего. Закрывающий тэг всегда начинается знаком «/» (прямой слеш, от англ. slash).

В записанной выше странице, кроме тэгов, нет никаких данных, поэтому, если открыть её в браузере, мы увидим пустое поле.

Разберём теперь более сложный пример. Ниже мы видим код вебстраницы, а на рис. 1.16 — её вид в браузере.

<html>

<head>

<title>Первая страница</title>

</head>

<body>

Привет!

</body>

</html>

Рис. 1.16

Здесь два блока содержательной информации — надписи «Первая страница» и «Привет!». Посмотрев на код, можно заметить, что он разбит на две части контейнерами <head> и <body>.

Первая часть (контейнер <head>) — это головная часть страницы. Там размещается служебная информация, например ключевые слова и описание страницы для поисковых систем, кодировка символов и т. п. В нашем примере здесь всего один элемент — <title>, в нём записывают название страницы.

Найдите на рис. 1.16, в каком месте веб-страницы выводится текст из контейнера <title>.

Содержимое элемента <title> — очень важная информация, на которую поисковые системы смотрят в первую очередь. Поэтому нужно, чтобы этот текст как можно точнее отражал содержимое веб-страницы.

Вторая (основная) часть страницы расположена внутри контейнера <body>. В нашем случае там находится строка «Привет!», которую мы видим в окне браузера. В примерах, которые будут приводиться далее, мы будем писать только то, что содержится в контейнере <body>.

Используя дополнительные источники, переведите на русский язык английские слова head, body и title.

Заголовки

В языке HTML есть специальные тэги для выделения заголовков разных уровней:

<h1> — заголовок документа;

<h2> — заголовок раздела;

<h3> — заголовок подраздела;

<h4> — заголовок параграфа.

Первая буква «h» в названии тэга связана с английским словом header — заголовок. Вот как выглядит текст с заголовками двух уровней (рис. 1.17).

Рис. 1.17

Для этого требуется написать такие команды:

<h1>Глава 1. Информация</h1>

<h2>1.1 Что такое информация?</h2>

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

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

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

<h1 align=»center»>Глава 1. Информация</h1>

Здесь тэг <h1> содержит ещё дополнительное свойство, или атрибут align. Атрибуты тэгов записывают в открывающем тэге внутри угловых скобок. Значение атрибута указывают после знака равенства в кавычках. Для заголовков используют три типа выравнивания: left (по умолчанию), center и right.

Используя дополнительные источники, переведите на русский язык английские слова align, left, center и right.

Абзацы

Абзац в языке HTML выделяется контейнером <p> (от англ. paragraph — абзац) — рис. 1.18:

<p>
В школе учится 70 человек.
Остальные 430 учеников валяют дурака.
</p>
<p>
Сколько всего учеников в этой школе?
</p>

Рис. 1.18

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

Для выравнивания строк абзаца в тэг <p> можно добавлять атрибут align, как для заголовков. Кроме уже упомянутых вариантов выравнивания (left, center, right) для широких текстовых колонок часто используется значение justify — выравнивание по ширине.

Как нужно оформить для веб-страницы абзац с текстом «Pacta sunt servanda» с выравниванием по правому краю? Найдите перевод этого выражения на русский язык.

Для того чтобы просто перейти на новую строку, не начиная новый абзац (как при записи стихотворения), нужно использовать непарный тэг <br>(рис. 1.19).

И вечный бой! Покой нам
только снится <br>Сквозь
кровь и пыль...<br>Летит,
летит степная кобылица
<br>И мнёт ковыль...

Рис. 1.19

Как нужно оформить на веб-странице трёхстрочное стихотворение японского поэта Р. Коно (перевод В. Маркова)?

Сквозь урагана рев,
Когда дрожит вся кровля,
Цикады слышен звон...

Используя дополнительные источники, выясните, как называется этот жанр поэзии.

Гиперссылки

Гиперссылка связывает элемент веб-страницы с другим документом. Гиперссылки по умолчанию выделяются синим цветом и подчёркиваются. Цвет посещённых гиперссылок изменяется на фиолетовый (чтобы пользователь видел, где он уже был).

Для создания гиперссылки в языке HTML служит тэг <a> (от англ. anchor — якорь). Его атрибут href (от англ. hyper reference — гиперссылка) указывает на документ, который должен быть загружен после щелчка на гиперссылке. Например (рис. 1.20):

Переход на <а href=»newpage.html»> новую страницу<a>.

Рис. 1.20

Обратите внимание, что адрес связанного документа (newpage. html) в окне/ браузера не виден ¹⁾, а на экране появляется выделенное содержимое контейнера (текст «новую страницу»).

¹⁾ Его обычно можно увидеть в строке состояния в нижней части окна браузера, если навести указатель мыши на гиперссылку.

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

Ссылка на файл info.htm в папке news запишется в виде:

<а href=»news/info.htm>Информация<a>.

Две точки означают выход из каталога «наверх», в родительскую папку. Например:

<а href=»../../news/info.htm>Информация<a>.

В этом случае для поиска файла info.htm нужно выйти на два уровня вверх по дереву папок и затем войти в папку news.

Все рассмотренные выше гиперссылки — локальные (местные), т. е. они ведут к файлам, находящимся на том же сервере. Внешняя ссылка представляет собой полный адрес документа — URL, который включает протокол доступа к данным, имя сервера, папки и имя самого документа. Например:

<а href=»example.net/news/info.htm>Информация<a>.

Если имя папки и файла не указано, ссылка ведёт на главную страницу сайта:

<а href=»example.net/news/info.htm>Главная страница<a>.

Оформите на языке HTML гиперссылку с текстом «Информация», которая ссылается на:

а) документ moreinfo.htm в текущей папке;
б) рисунок тоге.рпд в папке images;
в) главную страницу сайта moreinfo.ru;
г) архив songs.zip в папке download на сайте moreinfo.ru.

Списки

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

Маркированный список применяется для перечисления элементов множества, когда их порядок не важен. В языке HTML он строится с помощью тэга <ul> (от англ. Unordered List). Каждый элемент списка вложен в контейнер <li> (от англ. List Item) — рис. 1.21:

Рис. 1.21

Если порядок перечисления элементов важен, применяется нумерованный список. В языке HTML для этой цели используют тэг <оl> (от англ. Ordered List). В остальном оформление очень похоже на маркированный список (рис. 1.22):

<ul> <li>Детский сад</li> <li>Школа</li> <li>Унверситет</li> </ol>

Рис. 1.22

Используя дополнительные источники, переведите на русский язык английские выражения unordered list, ordered list, list item.

Найдите ошибки в оформлении списка на веб-странице:

<li>Васнецов</li>
<li>Суриков</li>
<li>Шишкин</li>
</ol>

Рисунки

Рисунки хранятся на веб-серверах в виде отдельных файлов. Браузеры умеют работать с тремя форматами растровых рисунков: GIF, JPEG и PNG.

Рисунки в формате GIF применяются для кодирования чётких изображений (схем, чертежей) или мелких деталей, имеющих не более 256 цветов. Рисунки в формате JPEG используют для хранения изображений с размытыми границами объектов, например фотографий. Формат PNG был создан для замены формата GIF, его можно применять для изображений с полупрозрачными областями.

Для вставки изображения в код веб-страницы используется непарный тэг <img> (от англ. image). Его атрибут src (от англ. source) задаёт имя файла, например:

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

или даже загружать картинку с другого веб-сервера:

По умолчанию рисунок вставляется прямо в текст как одна «большая буква» (рис. 1.23, а). Для того чтобы установить обтекание текстом, используют атрибут align:

Для этого атрибута чаще всего используют значения left и right (рис. 1.23, б и в).

Рис. 1.23

Вариант с выравниванием по левому краю смотрится плохо, потому что фотография «стучится» о соседний текст, подходит к нему вплотную. Чтобы этого не происходило, можно добавить отступы с помощью атрибутов hspace (от англ. horizontal space) и vspace (от англ. vertical space):

Значения отступов указаны в пикселях. Вот что получается (рис. 1.24).

Рис. 1.24

Браузер может определить размеры рисунка только тогда, когда он загрузит его с сервера. Поэтому сначала вместо рисунка на веб-странице появляется небольшой прямоугольник, который потом заменяется изображением. При этом размеры поля, отведённого рисунку, меняются, остальной материал на экране тоже сдвигается, что неудобно для пользователя. Однако есть простое решение этой проблемы — заранее указать браузеру размеры рисунка (атрибуты width — ширина и height — высота):

Атрибут alt (англ. alternative) задаёт текст, который показывается на месте рисунка, пока тот ещё не загружен. Кроме того, значение атрибута alt учитывают поисковые системы.

Рисунки очень часто служат гиперссылками. Для этого тэг <img> нужно поместить внутрь контейнера-ссылки <а>, например:

<а href=»gallery.html»><img src=»night.jpg» border=»0″></а>

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

Используя дополнительные источники, переведите на русский язык английские слова и выражения image, source, align, vertical space, horizontal space, alternative, border.

Запишите в тетради тэг, с помощью которого можно добавить в веб-страницу:

а) рисунок dawn.png из текущей папки;
б) рисунок sunny-day.jpg из папки images с выравниванием по правому краю;
в) рисунок beatles.jpg из папки img с сайта mysongs.ru, размеры рисунка — 450 х 338 пикселей, выравнивание по правой границе, замещающий текст — «Группа Битлз».

Выводы

• Веб-страница — это текстовый файл в формате «только текст», который можно редактировать в любом текстовом редакторе.
• Для разметки веб-страниц используется язык HTML. Команды языка HTML (тэги) заключаются в угловые скобки. Тэги могут содержать дополнительные свойства — атрибуты.
• Парные тэги — контейнеры — состоят из двух частей: открывающей и закрывающей. Закрывающая часть начинается знаком / (прямой слэш).
• Существуют специальные тэги для выделения заголовков, абзацев, списков, гиперссылок, вставки рисунков.

Нарисуйте в тетради интеллект-карту этого параграфа.

Вопросы и задания

1. Из каких двух блоков состоит веб-страница?
2. Почему нужно внимательно выбирать название страницы в контейнере <title>?
3. Объясните, что неправильно в такой записи: <h1><h2>Важный момент</h2></h1>
4. Откуда браузер «узнаёт», как оформлять заголовки и гиперссылки?
5. Как отличить в тексте веб-страницы локальную ссылку от внешней (на другой сайт)?
6. В каких случаях лучше использовать нумерованные списки, а в каких — маркированные?
7. Выполните по указанию учителя задания в рабочей тетради.

Подготовьте сообщение
а) «Таблицы в языке HTML»
б) «Оформление страницы с помощью стилей»
в) «Примеры использования Javascript»

Интересные сайты

htmlbook.ru — сайт для тех, кто делает сайты

javascript.ru — учебник Javascript

Практическая работа № 5 «Простая веб-страница»

Составьте простую веб-страницу, на которой поместите небольшое стихотворение и краткую справку об авторе (см. пример справа).

1) В заголовке страницы (<title>) должны быть указаны фамилия и имя автора: «Работа Василия Иванова».

2) Заголовок документа – название стихотворения. Выравнивание по центру.

3) Под стихотворением – фамилия автора (отдельный абзац).

4) В самом низу – два абзаца с краткой информацией об авторе. Установите выравнивание по ширине.

Практическая работа № 6 «Гиперссылки, списки и рисунки»

Перейдите в каталог work-6. Загрузите документ ruskeala.html – заготовку для новой веб-страницы. Оформите страницу так, как на образце справа:

Уровень А.

1) В заголовке страницы (<title>) должны быть указаны фамилия и имя автора: «Работа Василия Иванова».

2) Выделить заголовок документа.

3) Выделите абзацы с помощью нужного тэга, установите выравнивание по ширине.

4) Оформите перечисления как маркированный и нумерованный списки.

Уровень B.

5) Добавьте фотографии: одну с обтеканием влево, вторую – с обтеканием вправо, третью – в отдельном абзаце с выравниванием по центру.

6) Сделайте названия соборов, музеев и дворцов Санкт-Петербурга ссылками на соответствующие страницы в Интернете.

Уровень C.

7) Добавьте небольшой значок, обозначающий международную трассу E105. сделайте этот значок гиперссылкой (куда – решите сами).

8) Сделайте названия населённых пунктов ссылками на карты сервиса Яндекс-Карты.

§6. Веб-сайты.

§7. Язык HTML.

§8. Логика и компьютеры.