такого блока, тоже начнется с новой строки.
Строчные элементы
А теперь добавим к нашему документу еще два эле-
мента, em и strong:
На рис. 5.5 показано, как выглядит страница
с новыми тегами.
Привет, мир!
Моя перваявеб-страничка.
Добавим-ка еще параграф.
Рис. 5.5. Элементы em и strongЭлемент em отображает свое содержимое курсивом, а элемент
strong — жирным шрифтом. И em, и strong относятся к строчным
элементам, поскольку они, в отличие от блочных элементов, не выводят
свое содержимое отдельной строкой.
Чтобы отобразить текст одновременно жирным шрифтом и кур-
сивом, поместите его внутрь обоих тегов. Обратите внимание, что
в последнем примере теги стояли в такой последовательности:
параграф. Очень важно правиль-
ным образом вкладывать элементы друг в друга: если один элемент
находится внутри другого элемента, то его открывающий тег и его
88 Часть I. Основы
закрывающий тег также должны находиться внутри этого элемента.
Например, такой вариант недопустим:
параграф
Закрывающий тег расположен здесь перед закрываю-
щим тегом . Как правило, браузеры никак не сообщают о подобных
ошибках, однако неправильно вложенные теги приведут к неверному
отображению страниц.
Полноценный HTML-документ
До сих пор мы имели дело лишь с фрагментами HTML, тогда как полно-
ценный HTML-документ должен включать некоторые дополнительные
элементы. Давайте посмотрим на законченный HTML-документ и разбе-
ремся, зачем нужна каждая его часть. Добавьте в файл page.html следую-
щие элементы:
Head — здесь
«шапка
документа»
Title —
название
Body — тело
Привет, мир!
документа
Моя перваявеб-страничка.
параграф.
! Sublime Text автоматически ставит отступы при вводе некото-
рых строк кода, как показано в этом примере. По тегам (таким как
,
и т. д.) он определяет, внутри каких элементов нахо-
дится каждая строка, и делает отступы в соответствии с этим.
Перед тегами
и Sublime Text, в отличие от некото-рых других редакторов, отступов не ставит.
На рис. 5.6 показан законченный HTML-документ.
Давайте по очереди рассмотрим элементы из файла page.html.
Тег — всего лишь объявление, он сообщает: «это
HTML-документ». Далее следует открывающий тег (закры-
вающий тег находится в самом конце кода). Каждый
5. Основы HTML 89
HTML-документ должен содержать элемент html верхнего уровня
вложенности.
Рис. 5.6. Законченный HTML-документ
Внутри элемента html находятся элементы head и body. Элемент
head содержит определенную информацию об HTML-документе, напри-
мер элемент title, устанавливающий название документа, — обратите
внимание, что текст на закладке браузера на рис. 5.6 («Моя первая насто-
ящая HTML-страничка») соответствует содержимому title. Элемент
title находится внутри элемента head, который, в свою очередь, нахо-
дится внутри элемента html.
Внутри элемента body находится содержимое, которое отобража-
ется в браузере. В данном случае мы просто скопировали эти данные
из предыдущего примера.
Иерархия HTML
HTML-элементы подчинены строгой иерархии, которую можно себе
представить в виде перевернутого дерева. На рис. 5.7 в виде дерева пока-
зан наш документ.
в Моя
эб-страничка!
Привет,
первая
мир!
первая
Моя HTML-
страничка!
Привет, мир!
5. Основы HTML 91
Моя первая веб-страничка.
сюда, чтобы почитать отличные комиксы.
Сохраните файл и откройте страничку в браузере — она должна
выглядеть как на рис. 5.9.
Рис. 5.9. Веб-страница со ссылкой на http://comicsia.ru/collections/xkcd
Если кликнуть по этой ссылке, браузер должен пе рейти
по адресу http://comicsia.ru/collections/xkcd. На-
сладившись комиксами (выберите там тег «программи-
сты» и почитайте смешные истории из жизни разработ-
чиков), кликните на кнопку «назад», чтобы вернуться
к нашей страничке.
Атрибуты ссылок
Давайте разберемся, как мы создали эту HTML-ссылку.
Чтобы браузер знал, куда перейти по клику, мы добавили
элементу a так называемый атрибут. Атрибуты HTML-
документов напоминают пары «ключ-значение» в объек-
тах JavaScript: у каждого атрибута есть имя и значение.
Посмотрите еще раз на созданную нами ссылку:
Href —
В данном случае у атрибута есть имя href и значение "http://
от hypertext
comicsia.ru/collections/xkcd" — то есть веб-адрес.
reference —
На рис. 5.10 показаны все составные части этой ссылки.
гипертексто-
Ссылка отправит вас по любому адресу, который указан в качестве
вая ссылка
значения атрибута href.
92 Часть I. Основы
Этот текст
Веб-адрес
отобразится
в кавычках
как ссылка
Закрывающий тег
Рис. 5.10. Базовый синтаксис для создания гиперссылки
Атрибут title
Также к ссылкам можно добавлять атрибут title — он задает текст,
который появляется при наведении курсора на ссылку. Например,
давайте изменим открывающий тег , чтобы он выглядел так:
title="xkcd: Комиксы для гиков!">Нажмите сюда
Теперь перезагрузите страничку. При наведении мышки на ссылку
должна появиться надпись: «xkcd: Комиксы для гиков!», как на рис. 5.11.
Рис. 5.11. Веб-страничка, содержащая ссылку на адрес
http://comicsia.ru/collections/xkcd/ с атрибутом title
ПОПР ОБУ ЙТЕ !
Создайте новый файл под названием links.html. Пусть его HTML-структура
Links — ссылки
будет такой же, как у странички page.html, однако название и заголовок
поменяйте на другие, а также добавьте три элемента p («параграф»).
В каждом параграфе создайте ссылку на один из своих любимых сайтов.
Убедитесь, что для всех элементов a заданы атрибуты href и title.
5. Основы HTML 93
Что мы узнали
В этой главе мы познакомились с основами HTML — языка для созда-
ния веб-страниц. Также мы создали простой HTML-документ со ссылкой
на другую страницу.
В следующей главе мы разберемся, как встраивать в нашу страничку
JavaScript-код. Это облегчит создание более объемных программ по мере
изучения новых возможностей JavaScript.
Эта книга посвящена JavaScript, а не HTML, поэтому я рассмотрел
лишь самые азы создания HTML-документов. Вот некоторые ресурсы,
где можно узнать о HTML больше:
На английском языке:
• Курс HTML и CSS от Codeacademy: http://www.codecademy.com/
tracks/web/
• Mozilla Webmaker: https://webmaker.org/
На русском языке:
• Введение в HTML от Mozilla Developer Network: https://developer.
mozilla.org/ru/docs/Web/Guide/HTML/Introduction
• https://htmlacademy.ru/
6
УС Л О В И Я И Ц И К Л Ы
Условные конструкции и циклы — одни из самых важных понятий
в JavaScript. Условная конструкция представляет собой команду: «если
что-то истинно (true), сделай это, иначе сделай то». Пример: выпол-
нив домашнее задание, вы можете съесть мороженое, но, если домашнее
задание не готово, мороженое вам не светит. А цикл — это инструкция: