УРОК Nº 2.
Простое и понятное руководство по созданию (по-настоящему) простых веб-страниц
HTML определяет содержание каждой веб-страницы в Интернете. Разметив исходное содержимое с помощью HTML-тегов, можно указать веб-браузерам, как следует отображать различные части содержимого. Создание HTML-документа с правильно размеченным содержимым - это первый шаг в разработке веб-страницы.
В этой главе мы создадим нашу первую веб-страницу. На ней не будет ни одного CSS, поэтому выглядеть она будет как полная хрень. Зато она послужит основательным введением в элементы HTML, с которыми веб-разработчики работают каждый день.
При работе с примерами старайтесь подходить к ним как к более практичной версии WYSIWYG-редактора, например Google Docs или Microsoft Word. Мы будем работать со всеми теми же типами контента (заголовки, абзацы, списки и т.д.), просто мы будем определять их немного более наглядно с помощью HTML.
Для начала создадим в Atom новый проект с именем basic-web-pages. Затем создадим в этой папке новый файл basics.html. Этот HTML-файл представляет собой одну веб-страницу, и именно в него мы поместим весь наш код для этой главы. Если вы еще не знакомы с Atom, обязательно прочитайте Введение к этой серии уроков.
Напоминаем, что рабочий процесс веб-разработчиков - большей частью редактирование HTML в текстовом редакторе и просмотр изменений в веб-браузере. Именно это вы должны делать для каждой секции этого урока.
Добавьте в наш файл basics.html показанную ниже HTML-разметку. Это то, с чего вы будете начинать каждую свою веб-страницу. Обычно для того, чтобы избежать повторного ввода лишних частей, используется какой-либо шаблонизатор, но в данном учебном пособии мы сосредоточимся на исходном HTML.
<!DOCTYPE html>
<html>
<head>
<!-- Метаданные будут здесь -->
</head>
<body>
<!-- Содержание (content) будет здесь -->
</body>
</html>
Прежде всего, с помощью строки <!DOCTYPE html>, необходимо указать браузерам, что это веб-страница HTML5. Это специальная строка, которую браузеры ищут при попытке отобразить нашу веб-страницу, и она всегда должна выглядеть в точности так, как показано выше.
Затем вся наша веб-страница должна быть обернута в теги <html>. Сам текст <html> называется "открывающим тегом" [opening tag], а </html> - "закрывающим тегом" [closing tag]. Все, что находится внутри этих тегов, считается частью "элемента" <html>, то есть той невидимой части, которая создается, когда веб-браузер анализирует ваши HTML-теги.
Внутри элемента <html> есть еще два элемента, называемые <head> и <body>. В головном элементе веб-страницы содержатся все метаданные, такие как заголовок страницы [page title], таблицы стилей CSS [CSS stylesheets] и другие элементы, необходимые для отображения страницы, но которые пользователю видеть совсем не обязательно. Основная часть нашей HTML-разметки будет находиться в элементе <body>, который представляет собой видимое содержимое страницы. Обратите внимание, что при открытии нашей страницы в браузере ничего не отобразится, поскольку она имеет пустой <body>.
Назначение этого разделения <head>/<body> станет более понятным через несколько уроков, когда мы начнем работать с CSS.
Обратите также внимание на синтаксис HTML-комментария в приведенном выше фрагменте. Все, что начинается с <!-- и заканчивается на -->, будет полностью проигнорировано браузером. Это удобно для работы над документированием кода и создания заметок "для себя". Эти заметки пользователь не увидит.
Одной из наиболее важных частей метаданных является заголовок документа. Он задается HTML-элементом <title>. Браузеры отображают этот элемент на самом верху страницы - а именно на вкладке (см. скриншот ниже). Также заголовок документа отображается в результатах поиска [в Гугл и др. поисковиках].
Попробуйте обновить <head> нашего файла basic.html следующим образом:
<!DOCTYPE html>
<html>
<head>
<title>Interneting Is Easy! </title>
</head>
<body>
<!-- Содержание (content) будет здесь -->
</body>
</html>
При перезагрузке страницы в браузере должна появиться пустая страница, но при этом во вкладке браузера будет отображаться надпись Interneting Is Easy!
Обратите внимание, как аккуратно вложены все HTML-теги в нашей веб-странице. Очень важно следить за тем, чтобы не было пересекающихся элементов. Например, элемент <title> должен находиться внутри <head>, поэтому ни в коем случае нельзя добавлять закрывающий тег </head> перед закрывающим тегом </title>:
<!-- (Никогда не делайте так!) -->
<head>
<title>Interneting Is Easy!</head>
</title>
Заголовки - это, конечно, хорошо, но давайте сделаем что-то, что можно реально увидеть воочию. Элемент <p> выделяет весь текст внутри себя как отдельный абзац. Добавьте следующий элемент <p> в тело нашей веб-страницы:
<!DOCTYPE html>
<html>
<head>
<title>Interneting Is Easy! </title>
</head>
<body>
<p>First, we need to learn some basic HTML.</p>
</body>
</html>
На странице должно появиться некоторое содержимое. Опять же, поскольку это содержимое, которое мы хотим отобразить, оно должно быть помещено в элемент <body>, а не в <head>.
Обратите внимание, что элементы <p> и <title> имеют двойной indent-отступ*, а <body> и <head> - одинарный. Подобные отступы для вложенных элементов - наилучшая практика. Это делает ваш HTML более удобным для чтения другими разработчиками (или для вас лично, если вы вернетесь через 5 месяцев и захотите что-то изменить).
Вы и ваша команда разработчиков сами решаете, использовать ли для отступов пробелы или символы табуляции. Вы можете установить это предпочтение в своем текстовом редакторе в разделе Atom > Preferences > Editor и прокрутить вниз до параметра Tab Type.
* - по техническим причинам, в русскоязычном переводе данного учебника indent-отступы отсутствуют.
Заголовок секции <h1> похож на заголовок документа <title>. Но в отличие от заголовков документов, заголовки h1...h6 фактически отображаются на странице. В HTML предусмотрено шесть уровней заголовков. Это <h1>, <h2>,<h3>, ... , <h6>. Чем выше номер, тем менее значимым является заголовок.
Первым заголовком на странице, как правило, должен быть <h1>, поэтому давайте вставим его над существующим элементом <p>. Очень часто первый элемент <h1> совпадает с <title> документа, как это сделано здесь:
<body>
<h1>Interneting Is Easy! </h1>
<p>First, we need to learn some basic HTML.</p>
</body>
По умолчанию браузеры отображают менее важные заголовки меньшим шрифтом. Для примера включим заголовок второго уровня и посмотрим, что получится:
<!DOCTYPE html>
<html>
<head>
<title>Interneting Is Easy! </title>
</head>
<body>
<h1>Interneting Is Easy! </h1>
<p>First, we need to learn some basic HTML.</p>
<h2>Headings</h2>
<p>Headings define the outline of your site.
There are 6 levels of headings.</p>
</body>
</html>
В результате веб-страница будет выглядеть примерно так:
Заголовки секций - это основной способ обозначения различных компонентов содержимого. Элементы заголовков секций определяют контур веб-страницы, как ее видят люди и поисковые системы. Поэтому выбор подходящих заголовков очень важен для создания качественной веб-страницы.
Всякий раз, заключая какой-либо текст в HTML-теги, мы придаем ему новый смысл. "Обертывание" содержимого в теги <ul> сообщает браузеру, что все, что находится внутри, должно отображаться как "неупорядоченный список". Чтобы обозначить отдельные элементы этого списка, нужно обернуть каждый из этих элементов тегами <li>, например, так:
<h2> Lists </h2>
<p>This is how you make an unordered list:</p>
<ul>
<li>Add a "ul" element (it stands for unordered list)</li>
<li>Add each item in its own "li" element</li>
<li>They don't need to be in any particular order</li>
</ul>
После добавления этой разметки в элемент <body> (под существующим содержимым) должен появиться маркированный список с отдельным маркером в виде круга (bullet) для каждого элемента <li>:
Спецификация HTML определяет строгие правила относительно того, какие элементы могут находиться внутри других элементов. В данном случае элементы <ul> должны содержать только элементы <li>. Это означает, что вы никогда не должны писать что-то подобное:
<!-- Никогда не делайте так! -->
<ul>
<p>Add a "ul" element (it stands for unordered list)</p>
</ul>
Вместо этого следует обернуть этот абзац тегами <li>:
<!-- Вместо этого сделайте вот это -->
<ul>
<li><p>Add a "ul" element (it stands for unordered list)</p></li>
</ul>
А откуда мы знаем, что <ul> принимает только элементы <li> и что <li> допускает вложенные абзацы? Потому что так утверждает Mozilla Developer Network (MDN). MDN - это превосходный справочник по элементам HTML. В этом учебнике мы постараемся рассказать как можно больше о том, как использовать основные элементы HTML, но если вы не уверены в каком-либо элементе, введите в Google* такой запрос "MDN <некий элемент>".
* - Если желаете увидеть результаты поиска на русском языке, вместо Гугла ищите в Яндексе. Например, спросите в Яндексе: "MDN <li>".
В неупорядоченном списке перестановка элементов <li> не должна изменить смысл списка. Если же последовательность элементов списка все же имеет значение, то вместо нее следует использовать "упорядоченный список". Чтобы создать упорядоченный список, просто замените родительский элемент <ul> на <ol>. Добавьте следующее содержимое в раздел Lists файла basics.html:
<p>This is what an ordered list looks like:</p>
<ol>
<li>Notice the new "ol" element wrapping everything</li>
<li>But, the list item elements are the same</li>
<li>Also note how the numbers increment on their own</li>
<li>You should be noticing things is this precise order, because this is
an ordered list</li>
</ol>
При перезагрузке страницы в браузере можно заметить, что браузер автоматически увеличил числовое значение для каждого элемента <li>. В разделе Привет, CSS мы узнаем, как изменить тип отображаемых чисел.
Разница между неупорядоченным и упорядоченным списком может показаться незначительной, но для веб-браузеров, поисковых систем и, конечно же, читателей разница очень даже значительна. Кроме того, это проще, чем вручную нумеровать каждый элемент списка.
Пошаговые процедуры, такие как рецепты, инструкции и даже оглавления, являются хорошими "кандидатурами" для упорядоченных списков. В то время как списки <ul> лучше подходят для представления инвентаризации товаров, характеристик продуктов, сравнения "за" и "против", а также для создания меню навигации.
До сих пор мы работали только с "блоковыми элементами" [block-level elements]. Они также называются "потоковый контент" [flow content]. Второй тип содержимого, крупный и крайне важный - "строчные элементы" [inline elements]. Другое название - "фразовый контент" [phrasing content]. Блочные элементы всегда отображаются на новой строке, в то время как строчные элементы могут воздействовать на участки текста в любом месте строки.
Например, <p> - это блоковый элемент, а <em> - строчный элемент. <em> воздействует на участок текста внутри абзаца. Он означает "акцентирование" и обычно отображается в виде текста, выделенного курсивом. Для демонстрации акцентированного текста на нашей веб-странице, добавьте на нее новый раздел:
<h2> Inline Elements </h2>
<p><em>Sometimes</em>, you need to draw attention to a
particular word or
phrase.</p>
При этом часть, обернутая в тэги <em>, должна отображаться курсивом, как показано на скриншоте ниже. Обратите внимание, что затронута только часть строки. Это характерно для строчных элементов. В главе Блоковая модель CSS мы узнаем, как строчные и блоковые элементы могут существенно влиять на оформление страницы.
На всякий случай, если все еще осталась неясность, повторимся. Крайне важно правильно вложить друг в друга элементы HTML. Когда несколько HTML элементов вложены друг в друга, легко может возникнуть путаница с порядком следования тегов. Поэтому убедитесь, что ваша разметка не выглядит так, как показано ниже:
<!-- (Никогда не делайте так!) -->
<p>Это курсивом <em>выделенный текст</p></em>
Если вы хотите придать тексту еще больше значения, серьезности или срочности, чем с помощью тега <em>, используйте элемент <strong>. Это такой же строчный элемент, как и <em>, а выглядит он так:
<p>Other times, you need to <strong>strong</strong>ly emphasize
the importance
of a word or phrase.</p>
На веб-странице элемент <strong> проявится в виде полужирного* текста, см. ниже:
* - для меня все еще загадка, почему в ИТ слово bold переводится как "полужирный".
Чтобы привлечь еще большее внимание к участку текста, можно вложить элемент <strong> в элемент <em> (или наоборот). В результате текст будет одновременно и полужирным и курсивным:
<p><em><strong>And sometimes you need to shout!</strong></em></p>
Как следует из текста примера, это фактически типографский эквивалент крика. Ознакомьтесь с главой Веб-Типографика, чтобы не переборщить с использованием полужирных и курсивных шрифтов.
Вам интересно, почему мы используем термины "акцентирование" [emphasis] вместо "курсив" [italic] и "сильный" [strong] вместо "полужирный" [bold]? Вот мы и подошли к важному различию между HTML и CSS. Разметка HTML должна предоставлять семантическую [смысловую] информацию о контенте, а не презентационную. Другими словами, HTML должен определять структуру документа. В то время как в за его внешний вид отвечает CSS.
Классическими примером вышеупомянутого различия являются якобы устаревшие элементы <b> и <i>. Раньше они обозначали "полужирный" [bold] и "курсив" [italic] соответственно. Однако в HTML5 была сделана попытка создать четкое разделение между структурой документа и его презентацией. Поэтому <i> был заменен на <em>, поскольку акцентировать текст можно не только курсивом, но и другими способами (например, другим шрифтом, другим цветом или бОльшим размером). По такому же принципу <b> поменяли на <strong>.
В разделе Привет, CSS, вы узнаете, как изменять отображение браузером элементов <strong> и <em>. Это еще раз подтверждает тезис, согласно которому не следует выделять курсивом или жирным шрифтом текст в HTML. Это должен делать CSS.
HTML-теги, с которыми мы до сих пор встречались, обертывают либо текстовый контент (например, <p>), либо другие HTML-элементы (например, <ol>). Но это не относится ко всем элементам HTML. Некоторые из них могут быть "пустыми" или "самозакрывающимися". Переносы строк и горизонтальные прямые - наиболее распространенные пустые элементы.
HTML объединяет идущие друг за другом пробелы, табуляции или новые строки (вместе известные как "пробельные символы") в один пробел. Для лучшего понимания добавим в наш файл basics.html следующий раздел:
<h2>Empty Elements</h2>
<p>Thanks for reading! Interneting should be getting easier now.</p>
<p>Regards,
The Authors</p>
Новая строка после Regards в приведенном фрагменте будет преобразована в пробел, а не отображена как перенос строки:
Такое поведение может показаться интуитивно понятным, но веб-разработчики часто устанавливают в своих редакторах ограничение на длину строки около 80 символов. Программисту так удобнее работать с кодом. Но если каждая новая строка будет отображаться на готовой веб-странице, это сильно испортит ее внешний вид.
Чтобы "приказать" браузеру сделать на готовой веб-странице перенос строки, используем элемент <br/>, например, так:
<p>Regards,<br/>
The Authors</p>
Элемент <br/> полезен там, где важно форматирование текста. Хайку, тексты песен, подписи - вот лишь несколько примеров, где он может пригодиться.
Однако следует быть очень осторожным и не злоупотреблять тегом <br/>. Каждый из них должен нести смысловую нагрузку. Не стоит использовать его, например, для добавления промежутков между абзацами:
<!-- За такой код вас "запинают" -->
<p>This paragraph needs some space below it...</p>
<br/><br/><br/><br/><br/><br/><br/><br/>
<p>So, I added some hard line breaks.</p>
Как уже упоминалось ранее, подобная презентационная вёрстка должна быть определена в CSS, а не в HTML.
Элемент <hr/> - это "горизонтальное прямая", которое представляет собой тематическое разделение. Переход от одной сцены рассказа к другой или между концом письма и постскриптумом - хорошие примеры того, когда горизонтальное линия уместна. Например:
<h2>Empty Elements</h2>
<p>Thanks for reading! Interneting should be getting easier now.</p>
<p>Regards,<br/>
The Authors</p>
<hr/>
<p>P.S. This page might look like crap, but we'll fix
that with some CSS
soon.</p>
Одной из тем этого урока было отделение содержания (HTML) от презентации (CSS), и <hr/> не является исключением. Как и <em> и <strong>, он имеет определенный вид по умолчанию (горизонтальная линия). Но как только мы начнем работать с CSS, мы сможем использовать его для создания дополнительного пространства между секциями, декоративного символа или вообще для любых других целей.
Подобно <br/>, элемент <hr/> должен нести смысловую нагрузку - не стоит использовать его, когда нужно просто вывести строку лишь для эстетики. Для эстетики лучше использовать свойство CSS "border", о котором мы поговорим через несколько уроков.
Другой способ восприятия элемента <hr/> заключается в том, что он имеет меньшее значение, чем разделение, создаваемое элементом заголовка нового абзаца, но большее значение, чем непосредственно новый абзац.
Завершающий слеш (символ "/") во всех пустых HTML-элементах совсем необязателен. Приведенный ранее фрагмент можно было бы разметить и так, как показано на скриншоте ниже. Обратите внимание на отсутствие слеша в тегах <br> и <hr>:
<p>Regards,<br>
The Authors</p>
<hr>
В принципе, нет разницы, какую разметку вы выберете, но для достижения единообразия выберите одну и придерживайтесь ее. В данном учебнике мы будем включать символ "/" [slash], так как он ясно показывает, что это самозакрывающийся элемент. А это, в свою очередь, поможет избежать поиска закрывающего тега в другом месте документа.
Этот урок мог показаться бесконечным списком элементов HTML, и, в общем-то, так оно и было. HTML довольно прост, если разобраться. Веб-страницы состоят из HTML-элементов. Каждый элемент привносит свой смысл в текст, который он содержит. Элементы могут быть вложены друг в друга.
То, что мы сделали в этом уроке, схематично показывает первый шаг в процессе разработки веб-страниц: сначала определяем, что будет сказано - это HTML. А затем уже определяем как оно будет представлено - это CSS. Надеемся, что файл basics.html, созданный нами в этой главе, послужит полезным кратким справочником по основным элементам HTML. Если вы вдруг потеряете его, то вот как он должен выглядеть:
Ранее говорилось, что написание HTML кода похоже на работу в редакторе WYSIWYG. Разумеется, писать на HTML - гораздо более трудоемкий процесс. Однако трудоемкость уравновешивается его невероятной гибкостью. Написанный вами код отобразится на экране ноутбука или ПК, смартфоне, планшете или на листе бумаги. Причем каждое из этих отображений может иметь другое оформление. Изменить стиль нескольких документов, можно всего лишь изменив одну строку CSS. Microsoft Word и близко не стоит к потенциалу HTML/CSS как инструмента для работы с контентом.
На следующем уроке мы завершим наше обучение HTML с помощью остальных элементов, с которыми вы будете сталкиваться постоянно: ссылок и изображений. Если желаете самостоятельно изучить менее известные элементов, рекомендуем справочник MDN по элементам HTML.