Html создание сайта: Как создать простой HTML сайт в блокноте

Начало работы с HTML — Изучение веб-разработки

• Обзор: Начало работы
• Далее

В этой статье мы охватим азы HTML, необходимые для начала работы. Дадим определение «элементам», «атрибутам», «тегам» и прочим важным понятиям, о которых вы, возможно, слышали, а также об их роли в языке. Мы также покажем, как устроены HTML-элементы, типичная HTML-страница, и объясним другие важные аспекты языка. По ходу дела, чтобы вы не заскучали, мы поиграем с настоящей HTML-страницей!

HTML (HyperText Markup Language — язык гипертекстовой разметки) не является языком программирования; это язык разметки, используемый для определения структуры веб-страниц, посещаемых пользователями. Они могут иметь сложную или простую структуру, всё зависит от замысла и желания веб-разработчика. HTML состоит из ряда элементов, которые вы используете для того, чтобы охватить, обернуть или разметить различные части содержимого, чтобы оно имело определённый вид или срабатывало определённым способом. Встроенные тэги могут преобразовать часть содержимого в гиперссылку, по которой можно перейти на другую веб-страницу, выделить курсивом слова и так далее. Например, рассмотрим следующую строку:

Мой кот очень сердитый

Если мы хотим, чтобы строка отобразилась в таком же виде, мы можем определить её, как «параграф», заключив её в теги элемента «параграф» (<p>), например:

<p>Мой кот очень сердитый</p>

Примечание: Метки в HTML нечувствительны к регистру, то есть они могут быть записаны в верхнем или нижнем регистре. Например, тег <title> может быть записан как <title>, <TITLE>, <Title>, <TiTlE>, и т.д., и он будет работать нормально. Лучшей практикой, однако, является запись всех тегов в нижнем регистре для обеспечения согласованности, удобочитаемости и других причин.

Давайте рассмотрим элемент «параграф» чуть подробнее:

Основными частями элемента являются:

1. Открывающий тег: Он состоит из названия (обозначения) элемента (в нашем случае, p), помещённого внутри угловых скобок. Данный тег служит признаком начала элемента, с этого момента тег начинает влиять на следующее после него содержимое.
2. Закрывающий тег: выглядит как и открывающий, но содержит слеш перед названием тега. Он служит признаком конца элемента. Пропуски закрывающих тегов — типичная ошибка новичков, которая может приводить к неопределённым результатам — в лучшем случае всё сработает правильно, в других страница может вовсе не прорисоваться или прорисоваться не как ожидалось.
3. Содержимое: Как видно, в нашем случае содержимым является простой текст.
4. Элемент: открывающий тег + закрывающий тег + содержимое = элемент.

Активное изучение: создание вашего первого HTML-элемента

Отредактируйте строку текста ниже в поле Ввод, обернув её тегами <em> и </em> (вставьте <em> перед строкой, чтобы указать начало элемента, и </em> после неё, чтобы указать конец элемента) — эти действия должны выделить строку текста курсивом! Вы можете видеть изменения в реальном времени в поле Вывод.

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

Вложенные элементы

Вы также можете вкладывать элементы внутрь других элементов — это называется вложенностью. Если мы хотим подчеркнуть, что наш кот очень сердитый, мы можем заключить слово «очень» в элемент <strong> , который означает, что это слово крайне важно в данном контексте:

<p>Мой кот <strong>очень</strong>  сердитый.</p>

Вы должны удостовериться, что элементы вложены должным образом: в следующем примере мы открываем p элемент первым, затем элемент strong, затем мы закрываем элемент strong первым, затем p. Следующее писать неправильно:

<p>Мой кот <strong>очень сердитый.</p></strong>

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

Блочные и строчные элементы

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

• Элементы блочного уровня формируют видимый блок на странице — они окажутся на новой строке после любого контента, который шёл до них, и любой контент после них также окажется на новой строке. Чаще всего элементами блочного уровня бывают структурные элементы страницы, представляющие собой, например, параграфы (абзацы), списки, меню навигации, футеры, или подвалы, и т. п. Элементы блочного уровня не вкладываются в строчные элементы, но иногда могут вкладываться в другие элементы блочного уровня.
• Строчные элементы — это те, которые содержатся в элементах блочного уровня и окружают только малые части содержимого документа, не целые абзацы и группировки контента. Строчные элементы не приводят к появлению новой строки в документе: они обычно встречаются внутри абзаца текста, например, элемент <a> (ссылка) или акцентирующие элементы вроде <em> или <strong>.

Посмотрите на следующий пример:

<em>Первый</em><em>второй</em><em>третий</em>
<p>четвёртый</p><p>пятый</p><p>шестой</p>

<em> — это строчный элемент, так что, как вы здесь видите, первые три элемента находятся на одной строке друг с другом без пробелов между ними. С другой стороны, <p> — это элемент блочного уровня, так что каждый элемент находится на новой строке, с пространством выше и ниже каждого (этот интервал определяется CSS-оформлением по умолчанию, которое браузеры применяют к абзацам).

Примечание: HTML5 переопределил категории элементов в HTML: смотрите Категории типов содержимого элементов. Хотя эти определения точнее и однозначнее, чем те, которые были раньше, их гораздо сложнее понять, чем «блочный» и «строчный», поэтому мы будем придерживаться их в этом разделе.

Примечание: Не путайте термины «блочный» и «строчный», используемые в этом разделе, с одноимёнными типами отображения в CSS. Хотя по умолчанию они коррелируют, смена типа отображения в CSS не меняет категорию элемента и не влияет на то, во что его можно вкладывать и что можно вкладывать в него. Эта довольно частая путаница — одна из причин, почему HTML5 отказался от этих терминов.

Примечание: вам могут пригодиться справочники, включающие списки блочных и строчных элементов — смотри Элементы блочного уровня и Строчные элементы.

Пустые элементы

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

<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">

Это выведет на вашу страницу следующее:

Примечание: Пустые элементы иногда называют void-элементами.

У элементов также могут быть атрибуты, которые выглядят так:

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

Атрибут должен иметь:

1. Пробел между атрибутом и именем элемента (или предыдущим атрибутом, если у элемента уже есть один или несколько атрибутов).
2. Имя атрибута и следующий за ним знак равенства.
3. Значение атрибута, заключённое в кавычки.

Активное изучение: Добавление атрибутов в элемент

Возьмём для примера элемент <a> — означает anchor (якорь) и делает текст внутри него гиперссылкой. Может иметь несколько атрибутов, вот несколько из них:

• href: В значении этого атрибута прописывается веб-адрес, на который, по вашей задумке, должна указывать ссылка, куда браузер переходит, когда вы по ней кликаете. Например, href="https://www.mozilla.org/".
• title: Атрибут title описывает дополнительную информацию о ссылке, такую как: на какую страницу она ведёт. Например, title="The Mozilla homepage". Она появится в виде всплывающей подсказки, когда вы наведёте курсор на ссылку.
• target: Атрибут target определяет контекст просмотра, который будет использоваться для отображения ссылки. Например, target="_blank" отобразит ссылку на новой вкладке. Если вы хотите отобразить ссылку на текущей вкладке, просто опустите этот атрибут.

Измените строку текста ниже в поле Ввод так, чтобы она вела на ваш любимый веб-сайт. Сначала добавьте элемент <a>затем атрибут href и атрибут title. Наконец, укажите атрибут target чтобы открыть ссылку на новой вкладке. Вы можете наблюдать сделанные изменения в реальном времени в поле Вывод. Вы должны увидеть гиперссылку, при наведении курсора на которую появляется содержимое атрибута title, а при щелчке переходит по адресу в атрибуте href. Помните, что между именем элемента и каждым из атрибутов должен быть пробел.

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

Булевые атрибуты

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

<input type="text" disabled="disabled">

Для краткости совершенно допустимо записывать их следующим образом (мы также для справки разместили не деактивированный элемент input, чтобы дать вам большее понимание происходящего):

<input type="text" disabled>
<input type="text">

На выходе оба варианта будут выглядеть следующим образом:

Опускание кавычек вокруг значений атрибутов

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

<a href=https://www.mozilla.org/>любимый веб-сайт</a>

Однако, как только мы добавим атрибут title в таком же стиле, мы поступим неверно:

<a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite website</a>

В этом месте браузер неверно истолкует вашу разметку, думая, что атрибут title — это на самом деле три разных атрибута — атрибут title со значением «The» и два булевых атрибута: Mozilla и homepage. Это, очевидно, не то, что имелось в виду, и приведёт к ошибке или неожиданному поведению кода, как это показано в живом примере ниже. Попробуйте навести курсор на ссылку, чтобы увидеть, на что похож текст title!

Наш совет: всегда используйте кавычки в атрибутах — это позволит избежать подобных проблем, и, следовательно, код будет более читабельным.

Одинарные или двойные кавычки?

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

<a href="http://www.example.com">Ссылка к моему примеру.</a>
<a href='http://www.example.com'>Ссылка к моему примеру.</a>

Однако вы должны убедиться, что не смешиваете их вместе. Следующее будет неверным!

<a href="http://www.example.com'>Ссылка к моему примеру.</a>

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

<a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>

Если вы хотите вставить кавычки того же типа, то вы должны использовать объекты HTML. Например, это работать не будет:

<a href='http://www. example.com' title='Isn't this fun?'>A link to my example.</a>

Поэтому вам нужно сделать так:

<a href='http://www.example.com' title='Isn&#39;t this fun?'>A link to my example.</a>

Ниже дан пример оборачивания основных, самостоятельных HTML-элементов, которые сами по себе не очень полезны. Давайте посмотрим, как самостоятельные элементы объединяются для формирования всей HTML страницы:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Тестовая страница</title>
  </head>
  <body>
    <p>Это — моя страница</p>
  </body>
</html>

Вот что мы имеем:

1. <!DOCTYPE html>: Объявление типа документа. Очень давно, ещё когда HTML был молод (1991/2), типы документов использовались в качестве ссылок на набор правил, которым HTML-страница должна была следовать, чтобы она считалась хорошей, что может означать автоматическую проверку ошибок и другие полезные вещи. Объявление типа документа выглядело примерно вот так:

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   Однако в наши дни никто особо не думает о них, и типы документа стали историческим артефактом, которые должны быть включены везде, чтобы всё работало правильно. <!DOCTYPE html> — это самый короткий вид типа документа, который считается действующим. На самом деле это всё, что нужно вам знать о типах документов .
2. <html></html>: Элемент <html> содержит в себе всё содержимое на всей странице, и иногда его называют «корневой элемент».
3. <head></head>: Элемент <head>. Данный элемент выступает в качестве контейнера для всего содержимого, которое вы хотите включить в HTML документ, но не хотите показывать посетителям вашей страницы. Он включает такие вещи, как ключевые слова и описание страницы, которые вы хотели бы показывать в поисковых запросах, CSS для стилизирования вашего контента, объявление поддерживаемого набора символов и многое другое. Вы узнаете больше об этом из следующей статьи данного руководства.
4. <meta charset="utf-8">: Этот элемент устанавливает в качестве символьной кодировки для вашего документа utf-8 , который включает большинство символов из всех известных человечеству языков. По существу, теперь страница сможет отобразить любой текстовый контент, который вы сможете в неё вложить. Нет причин не устанавливать эту кодировку, это также позволит избежать некоторых проблем позднее.
5. <title></title>: Элемент <title>. Этот элемент устанавливает заголовок вашей страницы, который появляется во вкладке браузера, загружающей эту страницу, также это заглавие используется при описании страницы, когда вы сохраняете её в закладках или избранном.
6. <body></body>: Элемент <body>. Он содержит весь контент, который вы хотите показывать посетителям вашей страницы, — текст, изображения, видео, игры, проигрываемые аудио дорожки или что-то ещё.

Активное изучение: Добавление элементов в ваш HTML-документ

Если вы хотите поэкспериментировать с написанием HTML на своём компьютере, то можете:

1. Скопировать пример HTML-страницы, расположенный выше.
2. Создать новый файл в текстовом редакторе.
3. Вставить код в ваш новый текстовый файл.
4. Сохранить файл как index.html.

Примечание: вы также можете найти этот базовый пример HTML на MDN Learning Area Github repo.

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

Для этого упражнения вы можете редактировать код локально на своём компьютере, как предлагается выше, а можете работать в редакторе, расположенном ниже. В редакторе показано только содержимое элемента <body>. Попробуйте сделать следующее:

• Добавьте заголовок страницы сразу за открывающим тегом <body>. Текст должен находиться между открывающим тегом <h2> и закрывающим </h2> .
• Напишите в параграфе о чём-нибудь, что кажется вам интересным.
• Выделите важные слова, обернув их в открывающий тег <strong> и закрывающий </strong>
• Добавьте ссылку на свой абзац так, как объяснено ранее в статье.
• Добавьте изображение в свой документ под абзацем, как объяснено ранее в статье. Если сможете использовать другую картинку (со своего компьютера или из интернета). Вы большой молодец!

Если вы запутались, всегда можно запустить пример сначала кнопкой Сбросить. Сдаётесь — посмотрите ответ, нажав на Показать решение.

Пробелы в HTML

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

<p>Собаки глупы.</p>
<p>Собаки
         глупы.</p>

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

В HTML символы <, >, ", ' и & являются специальными. Они являются частью самого синтаксиса HTML. Так как же включить в текст один из этих специальных символов? Например, если вы хотите использовать амперсанд или знак «меньше» и не интерпретировать его как код.

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

В следующем примере вы видите два абзаца, которые рассказывают о веб-технологиях:

<p>В HTML вы определяете параграф элементом <p>.</p>
<p>В HTML вы определяете параграф элементом &lt;p">&gt;.</p>

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

Примечание: Таблица всех доступных в HTML символов-мнемоников — в Википедии: List of XML and HTML character entity references.

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

Чтобы превратить часть содержимого HTML-файла в комментарий, нужно поместить её в специальные маркеры <!-- и -->, например:

<p> Меня нет в комментариях( </p>
<!-- <p>А теперь есть!</p> -->

Как вы увидите ниже, первый параграф будет отображён на экране, а второй нет.

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

Примечание: Сейчас, когда вы начинаете больше узнавать о HTML, вы также можете начать изучать основы каскадных таблиц стилей Cascading Style Sheets, или CSS. CSS — это язык, который используется для стилизации веб-страниц (например, изменение шрифта или цветов или изменение макета страницы). Как вы скоро поймёте, HTML и CSS созданы друг для друга.

• Применение цвета к элементам HTML с помощью CSS

• Обзор: Начало работы
• Далее

• Начало работы с HTML
• Что такое заголовок? Метаданные в HTML
• Основы редактирования текста в HTML
• Создание гиперссылок
• Углублённое форматирование текста
• Структура документа и веб-сайта
• Отладка HTML
• Разметка письма
• Структурируем страницу

Last modified: 000Z»>4 авг. 2022 г., by MDN contributors

1. Создание первой страницы

Глава 1. Создание первой страницы

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

Технически, веб-страница — это особый тип документа, написанного на компьютерном языке под названием HTML (сокращение от языка гипертекстовой разметки). Веб-страницы написаны для веб-браузеров — такие программы, как Internet Explorer, Google Chrome и Safari. Эти браузеры выполняют простую, но чрезвычайно важную работу: они читают HTML-код в документе веб-страницы и отображают идеально отформатированный результат для чтения.

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

HTML: язык Интернета

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

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

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

Примечание

Стандарт HTML не имеет ничего общего с тем, как веб-браузер возвращает страницу в Интернете. Эта задача возложена на другой стандарт, называемый HTTP (HyperText Transport Protocol), который представляет собой коммуникационную технологию, позволяющую двум компьютерам обмениваться данными через Интернет. Если использовать аналогию с телефонным разговором, телефонные провода представляют собой HTTP, а лакомые кусочки сплетен, которыми вы обмениваетесь с тетей Мартой, — это HTML-документы.

Взлом Открытие HTML-файла

Внутри HTML-страница на самом деле представляет собой не что иное, как обычный текстовый файл. Это означает, что необработанный код каждой созданной вами веб-страницы будет полностью состоять из букв, цифр и нескольких специальных символов (таких как пробелы, знаки препинания и все остальное, что вы можете заметить на клавиатуре). На рис.  1–1 представлен обычный (и очень простой) HTML-документ в разрезе.

Вот один из секретов написания веб-страниц: вам не нужен работающий веб-сайт, чтобы начать создавать свои собственные веб-страницы. Это потому, что вы можете легко создавать и тестировать страницы, используя только свой компьютер. На самом деле, вам даже не нужно подключение к Интернету. Единственные инструменты, которые вам нужны, — это простой текстовый редактор и стандартный веб-браузер.

Ваш текстовый редактор

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

Рис. 1-1. Каждый HTML-документ на самом деле представляет собой обычный текстовый файл. Вверху: веб-браузер отображает простой HTML-документ, демонстрируя все его великолепное форматирование. Внизу: Но когда вы открываете тот же документ в текстовом редакторе, вы видите весь текст из исходного документа, а также несколько дополнительных фрагментов информации в угловых скобках < > . Эти теги HTML передают информацию о структуре и форматировании документа.

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

• Если у вас компьютер с Windows, вы используете простой редактор Notepad. Плывите к следующему разделу.

• Если у вас компьютер Mac, вы можете использовать встроенный редактор TextEdit. Но сначала вам нужно внести коррективы, описанные ниже.

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

1. Выберите TextEdit → Настройки .

   Откроется окно с вкладками параметров TextEdit (рис. 1-2).

   Рис. 1-2. Окно настроек TextEdit имеет две вкладки настроек: «Новый документ» (слева) и «Открыть и сохранить» (справа).

2. Нажмите «Новый документ», а затем в разделе «Формат» выберите «Обычный текст».

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

3. Нажмите «Открыть и сохранить» и включите первый параметр «Отображать HTML-файлы в виде HTML-кода вместо форматированного текста».

   Это указывает TextEdit, чтобы вы могли видеть (и редактировать) настоящую HTML-разметку, теги и все остальное, а не отформатированную версию страницы, как она будет отображаться в веб-браузере.

4. Закройте окно настроек, а затем закройте TextEdit .

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

Ваш веб-браузер

Как вы наверняка знаете, веб-браузер — это программа, которая позволяет вам перемещаться по веб-страницам и отображать их. Без браузеров Интернет все еще существовал бы, но вы не смогли бы в него заглянуть.

Работа браузера на удивление проста — на самом деле основная часть его работы состоит из двух задач. Во-первых, он запрашивает веб-страницы, что происходит, когда вы вводите адрес веб-сайта (например, www.google.com) или щелкаете ссылку на веб-странице. Браузер отправляет этот запрос удаленному компьютеру под названием 9. 0007 веб-сервер . Сервер обычно намного мощнее домашнего компьютера, потому что ему необходимо обрабатывать несколько запросов браузера одновременно. Сервер прислушивается к этим запросам и отправляет обратно содержимое нужных веб-страниц.

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

Рис. 1-3. Веб-браузер разработан, чтобы действительно хорошо делать две вещи: связываться с удаленными компьютерами, чтобы запрашивать веб-страницы, а затем отображать эти страницы на вашем компьютере.

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

Хотя обычным людям нужен только один веб-браузер, обучающимся веб-разработчикам (например, вам) полезно ознакомиться с наиболее распространенными браузерами (см. рис. 1–4). Это потому, что когда вы разрабатываете свой веб-сайт, вам нужно подготовиться к широкой аудитории людей с разными браузерами. Чтобы убедиться, что ваши изящные страницы не выглядят странно, когда их просматривают другие люди, вы должны протестировать свой сайт, используя различные браузеры, размеры экрана и операционные системы.

В следующем списке описаны самые популярные браузеры на сегодняшний день:

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

  Получите с Google Chrome по адресу www.google.com/chrome.

• Internet Explorer — самый долгоживущий браузер и официальный стандарт во многих корпоративных и государственных средах. Это также браузер, который предустановлен в Windows, поэтому люди, не являющиеся техническими специалистами, используют его, если они не хотят (или не знают, как) устанавливать что-то новое. Даже крутые веб-дизайнеры должны проверять, понимает ли Internet Explorer их страницы, потому что даже старые версии IE, такие как IE 8, остаются популярными.

  Чтобы загрузить последнюю версию Internet Explorer, посетите веб-сайт www.microsoft.com/ie.

  Рис. 1-4. Статистика использования браузера, которая оценивает процент людей, использующих каждый основной браузер, варьируется в зависимости от того, какие сайты вы просматриваете и как вы подсчитываете посетителей, но на момент написания этой статьи это одна разумная оценка. (Для текущей статистики использования браузера посетите http://tinyurl.com/stats-browsers.)

• Firefox начал свою жизнь как современный ответ на Internet Explorer. Он по-прежнему опережает конкурентов благодаря невероятно гибкому надстройки , крошечные программы, которые другие люди разрабатывают для улучшения Firefox дополнительными функциями, такими как веб-уведомление о почте и эскизы сайтов, которые отображаются на странице результатов поиска. Лучше всего то, что армия программистов-добровольцев постоянно поддерживает Firefox в актуальном состоянии.

  Попробуйте Firefox на www.mozilla.org/firefox.

• Safari — это браузер, разработанный Apple, который поставляется с текущими версиями операционной системы Mac OS. Продукты Apple, такие как iPhone, iPad и iPod Touch, также используют браузер Safari (хотя и мобильную версию, которая ведет себя немного иначе). Хорошие ребята из Apple создали воплощение Safari для компьютеров с Windows, но с тех пор отказались от него, сделав Safari вариантом только для Apple.

  Зайдите в Safari на странице www.apple.com/safari.

• Opera — это упрощенный и простой в установке браузер, который существует уже более десяти лет и служит противоядием от раздутого размера и бессмысленных излишеств Internet Explorer. В течение многих лет Opera сдерживала неприятная деталь: если вы хотели версию без рекламы, вам нужно было платить. Сегодня Opera также бесплатна и не содержит рекламы, как и другие браузеры в этом списке. У него небольшая, но лояльная аудитория, но он занимает пятое место в рейтинге веб-браузеров.

  Проверьте Opera на сайте www.opera.com.

Учебное пособие: создание HTML-файла

Теперь, когда вы подготовили свою веб-кухню, вы готовы создать свою собственную веб-страницу. В этом руководстве вы создадите базовую страницу, показанную на рис. 1–1.

Совет

Как и все руководства в этой книге, вы найдете решение для этого упражнения на сопутствующем сайте http://prosetech. com/web. Просто загляните в папку с именем Tutorial-1-1 (что означает «Глава 1, первое руководство», если вам интересно).

Готовы начать? Вот что нужно сделать:

1. Запустите текстовый редактор .

   На компьютере с Windows это Блокнот. Чтобы открыть «Блокнот», нажмите кнопку «Пуск», введите «блокнот», а затем щелкните появившийся значок «Блокнот».

   На Mac это TextEdit. Чтобы запустить его, перейдите в папку «Приложения» и дважды щелкните TextEdit.

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

2. Начните писать HTML-код .

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

    
   Объединенный профсоюз работников эскимо
    
   Мы боремся за ваши права. 
    

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

3. Когда вы закончите свою веб-страницу, выберите Файл → Сохранить .

   Откроется окно «Сохранить» или «Сохранить как», в котором вы вводите данные для нового файла (Рисунок 1-5).

   Рис. 1-5. Независимо от того, используете ли вы Блокнот (показан здесь) или TextEdit, в сохранении файла нет ничего сложного. Просто не забудьте добавить «.htm» или «.html» в конце имени файла, чтобы идентифицировать его как HTML-документ.

4. Выберите место для сохранения вашего файла и дайте ему имя фруктовое мороженое.htm .

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

   Присваивая имя файлу, убедитесь, что в конце имени файла указано расширение .htm или .html. Например, используя имя popsicles.htm или popsicles.html , вы гарантируете, что ваш компьютер распознает ваш документ как файл HTML.

   Примечание для параноиков: нет никакой разницы между файлами .htm и .html. Оба на 100% одинаковы — текстовые файлы, содержащие HTML-контент.

   Примечание

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

5. При необходимости измените кодировку файла в текстовом редакторе на UTF-8 .

   Это стандарт TextEdit, поэтому пользователи Mac могут пропустить этот шаг. Но в «Блокноте» вам нужно выбрать UTF-8 в списке «Кодировка» внизу окна «Сохранить как».

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

6. Нажмите Сохранить, чтобы сделать его официальным .

   Если вы используете TextEdit, программа может спросить, действительно ли вы хотите использовать расширение .htm или .html вместо .txt , стандартного текстового файла; нажмите «Использовать .htm». В Блокноте такой шаг не требуется. Однако на самом деле вы не увидите свои HTML-файлы в списке, если не выберете «Все файлы (*.*)» в поле «Сохранить как тип» (в котором изначально выбрано «Текстовые документы (*. txt)»).

7. Чтобы просмотреть свою работу, откройте файл в браузере (Рисунок 1-6) .

   Если вы используете расширение .htm или .html, открыть страницу обычно так же просто, как дважды щелкнуть имя файла. Или вы можете перетащить файл веб-страницы в открытое окно браузера.

   Рис. 1-6. Адресная строка браузера показывает, где на самом деле находится текущая веб-страница. Если вы видите «http://» в адресе, он исходит от веб-сервера в Интернете (вверху). Если вы посмотрите на веб-страницу, которая находится на вашем собственном компьютере, вы увидите обычный адрес локального файла (посередине, показывающий расположение файла Windows в Internet Explorer) или URL-адрес, начинающийся с префикса «file://». /» (внизу показано расположение файла в Chrome).

8. По окончании редактирования закройте текстовый редактор .

   В следующий раз, когда вы захотите изменить свой документ, просто запустите текстовый редактор, выберите «Файл» → «Открыть», а затем выберите нужный файл или перетащите файл и поместите его в уже открытое окно текстового редактора.

Совет

Вот трюк, который поможет вам быстро открыть HTML-файлы. Найдите свой файл, а затем щелкните его правой кнопкой мыши (удерживая клавишу Control на Mac) и выберите «Открыть с помощью». Откроется список программ, которые вы можете использовать для открытия файла. Щелкните Блокнот (или TextEdit) в списке, чтобы запустить новое окно текстового редактора и одним махом открыть файл HTML.

Если вы оставите окно веб-браузера открытым во время редактирования HTML-файла в текстовом редакторе, браузер сохранит старую версию вашего файла. Чтобы увидеть последние изменения, снова сохраните текстовый файл (выберите «Файл» → «Сохранить»), а затем обновите страницу в браузере (обычно это так же просто, как щелкнуть страницу правой кнопкой мыши и выбрать «Обновить» или «Обновить»).

Просмотр HTML-кода активной веб-страницы

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

Если вы используете Internet Explorer, Chrome, Firefox или любой другой браузер, кроме Safari, вы можете использовать ярлык. Как только вы перейдете на веб-страницу, которую хотите изучить, щелкните правой кнопкой мыши в любом месте страницы и выберите «Просмотреть исходный код» или «Просмотреть исходный код страницы» (точная формулировка зависит от браузера). Появится новое окно, показывающее необработанный HTML-код, лежащий в основе страницы.

Если вы используете Safari на Mac, вам придется проделать дополнительную работу, чтобы увидеть HTML-код веб-страницы. Сначала включите меню «Разработка», выбрав «Safari» → «Настройки» → «Дополнительно», а затем установив флажок «Показать меню «Разработка» в строке меню». Как только вы это сделаете, посетите страницу, которую хотите проанализировать, и выберите «Разработка» → «Показать исходный код страницы».

Совет

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

Большинство веб-страниц значительно сложнее, чем пример popsicles.htm , показанный на рис. 1-1, поэтому при просмотре разметки веб-страницы вам придется использовать гораздо больше HTML-тегов. Вы также, вероятно, обнаружите густые заросли кода JavaScript, набитого в верхней части страницы, лишенного всех пробелов и почти невозможного для чтения. Но даже если разметка выглядит как тарабарщина, не паникуйте. К тому времени, когда вы закончите читать эту книгу, вы сможете просматривать беспорядочную смесь HTML, чтобы найти фрагменты, которые вас интересуют. На самом деле, профессиональные веб-разработчики часто используют технику View Source для проверки работы своих конкурентов.

Пристальный взгляд на HTML-теги

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

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

Что содержится в теге

Вы можете распознать тег по угловым скобкам, двум специальным символам, которые выглядят следующим образом: < > . При создании тега вы вводите HTML-код между скобками. Этот код предназначен только для глаз браузера; веб-посетители никогда не увидят его (если только они не воспользуются командой View Source для просмотра HTML-кода). По сути, код — это инструкция, которая передает браузеру информацию о том, как форматировать последующий текст.

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

 Этот текст не выделен жирным шрифтом. Этот текст выделен жирным шрифтом. 

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

Вы можете легко распознать конечный тег. Они выглядят так же, как открывающие теги, за исключением того, что они начинаются с косой черты. Это означает, что они начинаются вот так вместо вот так < . Таким образом, конечный тег для жирного шрифта — . Вот пример:

 Это не жирный шрифт. Внимание! Теперь все в порядке. 

Что браузер отображает как:

Это не жирный шрифт. Внимание! Теперь все в порядке.

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

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

Примечание

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

Понимание элементов

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

Вот основная идея: пара тегов создает контейнер (см. рис. 1–7). Вы помещаете контент (например, текст) внутрь этого контейнера. Например, при использовании тегов и создается контейнер, который применяет полужирное форматирование к тексту внутри контейнера. При создании веб-страниц вы будете использовать разные контейнеры для переноса разных фрагментов текста. Если вы думаете об элементах таким образом, вы никогда не забудете включить конечный тег.

Рис. 1-7. Чтобы получить полужирный текст, вам нужно начать с правильного контейнера. Это элемент .

Примечание

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

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

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

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

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

Примечание

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

На рис. 1-8 показаны два типа элементов в перспективе.

Рис. 1-8. Вверху: этот фрагмент HTML показывает как элемент-контейнер, так и отдельный элемент. Внизу: Браузер показывает результирующую веб-страницу.

Вложенные элементы

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

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

 Это слово выделено жирным шрифтом и курсивом. 

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

Это слово выделен жирным шрифтом и курсивом.

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

 Это слово выделено курсивом и жирным шрифтом. 

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

 Это слово выделено курсивом и жирным шрифтом. 

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

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

Note

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

Понимание HTML-документов

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

Определение типа документа

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

Спустя годы правила HTML (и CSS, стандарт таблицы стилей, о котором вы узнаете в главе 3) были формализованы. Используя эти новые правила, каждый браузер мог отображать одну и ту же страницу абсолютно одинаково. Но это изменение вызвало серьезную головную боль у старых браузеров, таких как Internet Explorer, которые пережили темные века HTML. Он должен каким-то образом поддерживать новые стандарты, но при этом иметь возможность правильно отображать существующие веб-страницы, в том числе те, которые основаны на старых причудах.

Интернет-сообщество остановилось на простом решении. При разработке новой современной веб-страницы вы указываете этот факт, добавляя код, называемый определением типа документа (DTD) или типом документа , который идет в самом начале вашего HTML-документа (рис.  1–9).

Рис. 1-9. Определение типа документа (DTD) — это первая часть информации в файле HTML. Он сообщает браузеру, какой стандарт разметки вы использовали для написания страницы.

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

Но когда браузер встречает документ HTML, у которого нет типа документа, все ставки сняты. Internet Explorer, например, переключается в ужасный режим причуд , где он пытается вести себя так же, как 10 лет назад, со всеми причудами и всем остальным. Это гарантирует, что действительно старые веб-страницы сохранят вид, который они имели при первом создании, даже если они основаны на старых ошибках браузера, которые уже давно исправлены. К сожалению, разные браузеры ведут себя по-разному, когда вы просматриваете страницу без типа документа. Скорее всего, вы получите текст разного размера, несогласованные поля и границы, а также неправильно расположенное содержимое. По этой причине веб-страницы без типов документов — плохие новости, и вам следует избегать их создания.

В прошлом веб-дизайнеры использовали разные типы документов для обозначения разных версий HTML-разметки (например, XHTML, HTML5 или действительно старый HTML 4.01). Но сегодня веб-разработчики почти всегда используют простой универсальный тип документа HTML5:

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

Для сравнения, вот гораздо более многословный тип документа для XHTML 1. 0, который вы все еще можете встретить на старых веб-страницах:

Даже опытным веб-разработчикам приходилось копировать тип документа XHTML 1.0 с существующей веб-страницы, чтобы избежать неправильного ввода.

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

Note

В этой книге вы будете использовать только функции HTML5, которые работают во всех современных браузерах. Но если вам интересно узнать о более экспериментальных частях языка, которые все еще слабо поддерживаются браузерами, ознакомьтесь с 9. 0007 HTML5: Пропавшее руководство (О’Рейли).

Базовый скелет

Теперь вы готовы заполнить остальную часть своей веб-страницы.

Чтобы создать настоящий HTML-документ, вы начинаете с трех элементов-контейнеров: , и . Эти три элемента вместе описывают базовую структуру вашей страницы:

Этот элемент охватывает все (кроме типа документа) на вашей веб-странице.

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

<тело>

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

Есть только один правильный способ использовать эти три элемента на странице. Вот их правильное расположение с типом документа HTML5 в начале страницы:

 

<голова>
...

<тело>
...

 

Каждая веб-страница использует эту базовую структуру. Многоточие (…) показывает, куда вы вставляете дополнительную информацию. Пробелы между строками необязательны — они нужны только для того, чтобы вам было легче увидеть структуру элемента.

Когда у вас есть HTML-скелет, вам нужно добавить еще два элемента-контейнера. Для каждой веб-страницы требуется элемент <тело>

 

<голова>


<тело>
Я Ли Пак. Наймите меня в свою компанию, потому что моя работа выходит за рамки
хиззл.
   Мои навыки включают:  
   *Быстрая печать (почти 12 слов в минуту).  
   *Экстраординарная заточка карандашей.  
   *Изобретательское оправдание.  
   *Ведение переговоров с блюстителями порядка.
  

 

 

<голова>


<тело>
   
   Я Ли Пак. Наймите меня в свою компанию, потому что моя работа выходит за рамки
хиззл.   
  
   
   Мои навыки включают:   
  
   <ул>  
     
   Быстрая печать (почти 12 слов в минуту).   
  
     
   Экстраординарная заточка карандашей.   
  
     
   Изобретательное оправдание.   
  
     
   Переговоры с блюстителями порядка.    
  
     

 

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

Рисунок 1-14 анализирует документ HTML с использованием модели дерева . Древовидная модель — это удобный способ познакомиться с анатомией веб-страницы, поскольку она сразу показывает общую структуру страницы. Однако по мере того, как ваши веб-страницы становятся более сложными, они, вероятно, станут слишком сложными, чтобы древовидная модель могла быть полезной.

Рис. 1-14. Вот еще один способ взглянуть на созданный вами HTML. Модель дерева показывает, как вы вложили элементы HTML. Следуя по стрелкам, вы можете видеть, что элемент верхнего уровня содержит элементов и элементов. Внутри элемента находится элемент

Я Ли Парк. Наймите меня в свою компанию, потому что моя работа не в моде .

Мои навыки включают в себя:

• быстрый набор текста (почти 12 слов в минуту).
• Невероятная заточка карандашей.
• Изобретательность оправдание.
• Ведение переговоров с блюстителями порядка.

Конечно, человеку почти невозможно написать такой HTML-код, не допустив ошибки.

Где все картинки?

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

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

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

Хотя вы узнаете все, что когда-либо хотели знать о веб-графике, в главе 4, сейчас стоит рассмотреть простой пример. Чтобы попробовать это, вам нужно изображение, готовое к использованию в Интернете. (Наиболее часто поддерживаемыми типами файлов изображений являются JPEG, GIF и PNG.) Если у вас нет под рукой изображения, вы можете загрузить образец изображения leepark. jpg из папки Tutorial-1-2. Вот пример элемента , в котором используется файл leepark.jpg :

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

Однако существует очевидная разница между элементом
и элементом . Хотя является самостоятельным элементом, он не является самодостаточным. Для того, чтобы элемент что-то значил, вам нужно предоставить еще две части информации: имя файла изображения и некоторый альтернативный текст, который используется в случаях, когда браузер не может загрузить или отобразить изображение (см. Альтернативный текст ). Чтобы включить эту дополнительную информацию в элемент изображения, HTML использует атрибуты , дополнительная информация, которая появляется после имени элемента, но до закрывающего символа >.

Пример включает два атрибута, разделенных пробелом. Каждый атрибут состоит из двух частей: имени (которое сообщает браузеру, что делает атрибут) и значения (часть информации, которую вы предоставляете). Имя первого атрибута — src , что является сокращением от «источник»; он сообщает браузеру, где взять нужное изображение. В этом примере значение 9Атрибут 0055 src — это leepark.jpg , это имя файла с хедшотом Ли Парка.

Имя второго атрибута — alt , что является сокращением от «альтернативный текст». Он сообщает браузеру, что вы хотите, чтобы он отображал текст, если он не может отобразить изображение. Его значение — это текст, который вы хотите отобразить, в данном случае это «Портрет Ли Парка».

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

 

<голова>


<тело>
Я Ли Пак.  Наймите меня в свою компанию, потому что моя работа выходит за рамки
хиззл.
     

Мои навыки включают:
<ул>
  
Быстрый набор текста (почти 12 слов в минуту).
  
Невероятная заточка карандашей.
  
Изобретательное оправдание.
  
Ведение переговоров с блюстителями порядка.


 

На рис. 1-15 показано, где именно заканчивается изображение.

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

Примечание

В главе 4 вы узнаете о многих других приемах работы с веб-графикой, в том числе о том, как изменять ее размер и обтекать ее текстом.

10 самых важных элементов (и еще несколько)

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

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

Примечание

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

Некоторые элементы, такие как элемент

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

Вы можете размещать блочные элементы непосредственно внутри раздела вашей веб-страницы или внутри другого блочного элемента. В Таблице 1-1 представлен краткий обзор некоторых наиболее фундаментальных блочных элементов, некоторые из которых вы уже видели. Он также указывает, какие из них являются контейнерными элементами, а какие автономными элементами. (Как вы узнали из раздела «Понимание элементов», для элементов-контейнеров требуются начальный и конечный теги, а для автономных элементов достаточно одного тега.) Вы более подробно изучите все эти элементы в главе 2. 9.0005

Таблица 1-1. Базовые блочные элементы.

ELEMENT	NAME	TYPE OF ELEMENT	DESCRIPTION
	Paragraph	Контейнер	Как, вероятно, говорил вам ваш школьный учитель английского языка, абзац является основной единицей организации текста. Когда вы используете более одного элемента абзаца в строке, браузер вставляет пробел между двумя абзацами — чуть больше, чем полная пустая строка.
, , , , ,	Заголовок	Контейнер	КОНТРОИЛЬНЫЕ Элементы - это хороший способ добавить структуру для вашей страницы и создать название. Они отображают текст крупными полужирными буквами. Чем меньше число, тем больше текст, поэтому производит самый большой заголовок. К тому времени, как вы дойдете до , размер заголовка уменьшится до размера обычного текста, а , хотя и жирный, на самом деле меньше обычного текста.
	Горизонтальная линия (или горизонтальное правило в HTML-Speak)	. . Строка автоматически соответствует ширине окна браузера. (Или, если вы поместите строку внутрь другого элемента, например ячейки в таблице, она примет ширину своего контейнера.)
,	Неупомянутый список, список	Контейнер	Эти элементы. Браузер автоматически размещает отдельные элементы списка на отдельных строках и делает отступы для каждого из них. Для быстрого изменения темпа вы можете заменить на , чтобы получить автоматически нумерованный список вместо маркированного списка (ol означает «упорядоченный список»).

Другие элементы предназначены для работы с более мелкими структурными деталями, например фрагментами текста, выделенного жирным шрифтом или курсивом, разрывами строк, ссылками, ведущими на другие веб-страницы, и изображениями. Эти элементы называются встроенными элементами . Вы можете поместить встроенный элемент в блочный элемент, но вы никогда не должны помещать блочный элемент внутрь встроенного элемента. В Табл. 1–2 перечислены наиболее полезные встроенные элементы.

Таблица 1-2. Основные встроенные элементы.

ELEMENT	NAME	TYPE	DESCRIPTION
,	Bold и курсив	Контейнер	Эти два элемента применяют стиль символов — полужирный или курсивный текст. (Технически означает «текст альтернативным голосом» и означает "стилистически смещенный текст", и есть способы изменить применяемое форматирование, как вы увидите в главе 3. Но в реальном мире почти все веб-разработчики ожидают, что означает курсив и означает Bold.)
	Разрыв линий	Сторонний	Иногда вам. не отдельные абзацы. Это удерживает последующие строки текста ближе друг к другу, чем при использовании абзаца.
	Изображение	Автономный	Используйте изображение внутри веб-страницы. Убедитесь, что вы указали атрибут src , чтобы указать имя файла изображения, которое вы хотите отобразить в браузере.
	Якорь	Контейнер	Элемент привязки — это отправная точка для создания гиперссылок с одного сайта на другую. Вы узнаете об этом незаменимом элементе в главе 6.

Чтобы образец резюме выглядел более респектабельно, вы можете использовать некоторые ингредиенты из Таблицы 1-1 и Таблицы 1-2. На рис. 1–16 показана исправленная версия веб-страницы, в которую добавлены некоторые новые элементы.

Рис. 1-16. Благодаря большему количеству заголовков, списков и горизонтальной линии этот HTML-документ добавляет немного стиля резюме.

Вот переработанный HTML-код с новыми заголовками и горизонтальной линейкой, выделенной жирным шрифтом:

 

<голова>
  

<тело>
   
Наймите меня!
 
  
Я Ли Пак. Наймите меня в свою компанию, потому что моя работа выходит за рамки
хиззл. Как доказательство моих ошеломляющих компьютерных навыков и монументальной работы
этике, пожалуйста, наслаждайтесь этим электронным резюме.
      
Незаменимые навыки
   
  
Мои навыки включают:
  <ул>
    
Быстрый набор текста (почти 12 слов в минуту).
    
Невероятная заточка карандашей.
    
Изобретательное оправдание.
    
Ведение переговоров с блюстителями порядка.
  
  
А еще я знаю HTML!
      
Предыдущий опыт работы
   
  
У меня долгая и блестящая карьера в самых разных профессиях.
     Вот некоторые основные моменты:
  <ул>
    
2008–2009 – работала машинисткой в ​​компании Flying Fingers
. 
    
2010 – 2013 – выполнение передового веб-дизайна в компании Ривердейл.
     Ферма
    
2014–2015 – Главы 1 книги Создание веб-сайта: The
     Отсутствует руководство
  
     <час />  

 

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

Проверка ваших страниц на наличие ошибок

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

На первый взгляд это кажется отличным дизайном — в конце концов, он сглаживает любые мелкие оплошности, которые вы можете допустить. Но есть и темная сторона терпимости к ошибкам. В частности, такое поведение позволяет слишком легко скрыть серьезные ошибки на ваших веб-страницах. Что такое серьезная ошибка? Проблема, которая безобидна, когда вы просматриваете страницу в своем любимом браузере, но выглядит неловко, когда кто-то просматривает страницу в другом браузере; ошибка, которая остается незамеченной до тех пор, пока вы не отредактируете код, что непреднамеренно выявит проблему при следующем отображении страницы вашим браузером; или ошибка, которая не влияет на отображение страницы, но не позволяет автоматизированному инструменту (например, поисковой системе) прочитать страницу.

К счастью, есть способ обнаружить подобные проблемы. Вы можете использовать инструмент проверки , который читает вашу веб-страницу и проверяет ее разметку. Если вы используете профессиональный инструмент для веб-дизайна, такой как Dreamweaver, вы можете воспользоваться его встроенным средством проверки ошибок (подробнее см. в главе 5). Если вы создаете страницы вручную в текстовом редакторе, вы можете использовать бесплатный онлайн-инструмент проверки (см. ниже).

Вот некоторые потенциальные проблемы, которые может обнаружить валидатор:

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

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

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

 <голова>
    <мета-кодировка="utf-8">
    
    
    
    

 

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

Добавление тега

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

 <тело>



 

Убедитесь, что он идет после тега (а не внутри него).

Тег

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

Внутри тега заголовка мы поместим тег

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

 <заголовок>
     
Джереми Рю
 
     
Моя первая веб-страница
 

 

Этот тег заголовка появляется между открывающим тегом и закрывающим тегом.

Элемент