Введение в разметку сайта (Урок 1)

от

Итак, из чего состоят сайты? Чем описываются те, или иные его части и элементы? Какой минимум всех этих непонятных слов нужен, чтобы пользователь зашел по адресу и увидел мой «сайт»?

1. HTML

Первое, что приходит в голову, это теги <html> и </html>. Да, можно воспользоваться ими, но это будет неправильно. Когда-то, несколько десятков лет назад, браузеры были простыми, они «понимали» какой-то минимальный набор тэгов. Тогда люди не задумывались о всех тех возможностях, которые могут появиться на сайтах в будущем. Всё, что требовалось, это установка размеров текста, гарнитуры, цвета и варианта написания типа жирного, или курсивного. Но с тех пор всё очень сильно изменилось. И в процессе изменений изменялись и браузеры тоже. При появлении новых возможностей разработчикам требовалось адаптировать так называемый парсер к пониманию новых тегов и новых возможностей.

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

2. Так на чем же мы пишем?

Как было сказано выше, браузеры содержат в себе по нескольку разных парсеров. Но как они выбирают, какой из них использовать? Всё очень просто — перед тегом <html> должен находиться заголовок страницы. Например, такой:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

В данном случае мы говорим браузеру, что мы используем вариант HTML версии 4.01, причем строгий (strict). В чем строгость? Он не содержит устаревших и «не рекомендованных» элементов.

Кроме него, естественно, есть несколько других вариантов:

 <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

Это переходный (Transitional): содержит устаревшие теги в целях совместимости и упрощения перехода со старых версий HTML.

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN»»http://www.w3.org/TR/html4/frameset.dtd»>

А это с фреймами (Frameset): аналогичен переходному, но содержит также теги для создания наборов фреймов.

3. А какой выбрать лучше?

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

<!DOCTYPE HTML>

Просто, неправда ли? Совершенно не надо заморачиваться над тем, что там надо писать после букв HTML. Просто запомните это и пишите это в самом начале файла. Так браузер будет точно знать, на каком «языке» он загрузил страницу.

4. HTML 5

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

Самыми главными идеями создания этого стандарта были: выработать формат вставки мультимедийных возможностей, таких как аудио и видео, в страницы сайтов, но сохранить при этом очень простую запись. Раньше, для встраивания использовался Flash, но для того, чтобы встроить один видео-ролик, надо было достать где-то видео-плеер, написанный на Flash’е, либо написать его самому, а потом вставить кучу параметров в дикий тэг <embed>.

5. Довольно, давай что-нибудь напишем!

Вот пример страницы на HTML5 из Википедии:

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>(Это title) Пример страницы на HTML5</title>
  </head>
  <body>
    <header>
      <hgroup>
         <h1>Заголовок "h1" из hgroup</h1>
         <h2>Заголовок "h2" из hgroup</h2>
      </hgroup>
    </header>
    <nav>
      <menu>
        <li><a href="link1.html">Первая ссылка из блока "nav"</a></li>
        <li><a href="link2.html">Вторая ссылка из блока "nav"</a></li>
      </menu>
    </nav>
    <section>
      <article>
        <h1>Заголовок статьи из блока "article"</h1>
        <p>Текст абзаца статьи из блока "article"</p>
        <details>
          <summary>Блок "details", текст тега "summary"</summary>
          <p>Абзац из блока "details"</p>
        </details>
      </article>
    </section>
    <footer>
      <time>Содержимое тега "time" блока "footer"</time>
      <p>Содержимое абзаца из блока "footer"</p>
    </footer>
  </body>
</html>

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

6. Что дальше?

А дальше у меня для вас задание:

  1. Переписать страницу выше в обычном текстовом редакторе типа Блокнота
  2. Сохранить в файл с расширением html, например — work1.html
  3. Открыть его двойным щелчком мыши и проверить, совпадает ли она визуально с тем, что я представил по предыдущей ссылке.

Если вы справились с этим заданием, пусть даже не с первого раза, то я вас поздравляю, у вас есть всё, чтобы стать отличным web-мастером! Осталось дело за малым — почитать представленные ссылки пока ждёте следующего урока. Удачного кодинга! 😉

По этой же теме: