Html5 за один урок

§2.2 Позиционирование title относительно кодировки

    Разбираемся с порядком. Очень часто встречается ошибка с позиционированием заголовка документа .

Не стоит задавать его до объявления кодировки!

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

    Поэтому задаем тег title после объявления кодировки:

  
   Shift The Web Expirience!

    Великолепно, теперь браузер сможет прочитать заголовок документа и правильно вывести его в своём интерфейсе, а злоумышленники получат дополнительную порцию геморроя при попытке XSS-инклюдинга (вид атаки посредством включения Java Scripts в код страницы; делится на активный и пассивный).

Работа с селекторами

Селекторы, как уже упоминалось ранее, указывают, какие элементы HTML будут стилизованы

Важно полностью понимать как использовать селекторы и как они действуют. Первым шагом должно стать знакомство с различными типами селекторов

Мы начнём с самых основных селекторов: селекторы типа, классы и идентификаторы.

Селекторы типа

Селекторы типа нацелены на элементы по их типу. Например, если мы хотим ориентироваться на все элементы <div> мы должны использовать селектор div. Следующий код показывает селектор типа для элементов <div>, а также соответствующий HTML.

CSS

HTML

Классы

Классы позволяют выбрать элемент на основе значения атрибута class. Селекторы классов немного более конкретны, чем селекторы типа, так как они выбирают определённую группу элементов, а не все элементы одного типа.

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

В CSS классы обозначаются с точкой впереди, за которой следует значение атрибута класса. Ниже селектор класса выбирает все элементы, содержащие значение awesome атрибута class, включая элементы <div> и <p>.

CSS

HTML

Идентификаторы

Идентификаторы ещё точнее, чем классы, так как они нацелены только на один уникальный элемент за раз. Подобно тому, как селекторы классов используют значение атрибута class, идентификаторы используют значение атрибута id в качестве селектора.

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

В CSS идентификаторы обозначаются с символом решётки впереди, после чего идёт значение атрибута id. Здесь идентификатор выберет только элемент, содержащий атрибут id со значением shayhowe.

CSS

HTML

Дополнительные селекторы

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

Ладно, начинаем собирать всё вместе. Мы добавляем элементы на страницу внутри нашего HTML, затем можем выбрать эти элементы и применить к ним стили с помощью CSS. Теперь давайте соединим точки между HTML и CSS, чтобы эти два языка работали вместе.

Favicon

Следующий раздел в шаблоне HTML5 включает элементы, которые указывают на иконки ресурса:

<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

favicon.ico — файл предназначен для устаревших браузеров, и его необязательно включать в код. Пока ваш favicon.ico включен в корень вашего проекта, браузер автоматически найдет его. favicon.svg — файл для современных браузеров, которые поддерживают SVG иконки. Последний элемент ссылается на значок, который используется на устройствах Apple при добавлении страницы на главный экран.

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

Файл стилей css

Язык HTML имеет различные способы для форматирования содержания, но все они имеют заметные недостатки. Придётся оформлять все элементы на каждой странице сайта. Если это 1−2 страницы, это терпимо, но если страниц сотни или даже тысячи применяют Cascading Style Sheets — css. Такие стили можно сформировать в отдельном файле, ссылка на который с помощью тега <link rel=»stylesheet» href=»file.css»>, выносится в заголовок документа, между <head> и</head>.

Для успешного использования файла стилей нужно будет назначить элементам свойства класса или присвоить значение id. Например: <div class=»post»>. Использование css:

<style type=»text/css»>.post {margin: 10px; padding-top: 12px;}</style>

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

В дальнейшем для работы с веб-документами необходимо будет изучить css, нелишними будут и уроки по javascript и php.

Что такое HTML?

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

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

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

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

§1.3 Стандарт HTML 5

html — для всех документов

    Можно рассматривать Doctype Definition в качестве ГОСТ’а. Любите качественную тушёнку произведённую с соблюдением ГОСТ’а? Также и браузеры с поисковиками любят странички, написанные в соответствии со спецификацией. Вы же не собираетесь угощать гостей беспонтовщиной?

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

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

    Дальше разберёмся с — головой документа.

Раздел документа HEAD

Раздел документа  документа HEAD включает в себя заголовок и не
является обязательным. Тем не менее присутствие этого раздела весьма желательно.
Задачей заголовка является предоставление информации для
программы просмотра документа (Браузера).

Раздел документа HEAD открывается тегом <HEAD> и закрывается
тегом  </HEAD>. Единственным обязательным тегом заголовка является тег
<TITLE>, определяющий название документа. Обычно оно
показывается в заголовке окна браузера. Рекомендуется ограничивать текст строки
названия 60 символами. По умолчанию, текст, содержащийся в названии, используется
при создании закладки (bookmark) в браузере.

Формирование структуры

Любая страница, которую пользователи видят в браузере, имеет чёткую структуру — синтез html-элементов и текста.

Заголовок <head> и тело страницы <body> записываются в парный тег <html>, который сообщает браузеру, какое расширение ему нужно обработать. Согласно стандартам W3C, первым должен стоять тег <!DOCTYPE>. Он описывает тип документа — DTD и даёт браузеру команду как следует обрабатывать текущую страницу, так как не только есть разные версии HTML, но есть и другие технологии, например, XHTML, XML.

Полностью веб-документ будет иметь следующую структуру:

<!DOCTYPE html>

<html>

<head>

Заголовок сайта

<title> Заголовок </title>

</head>

<body>

<!—Тело сайта ->

</body>

</html>

Заголовок и тело страницы

Задаётся контейнерным тегом <head>, его функция заключается в определение названия документа и предоставление служебной информации для браузеров. В его составе обязательно должен присутствовать <title>Название…</title>, этот тег определяет название страницы. Это единственный видимый элемент заголовка. Все остальные теги относятся к служебным и браузерами не отображаются:

1. <base> — указывает адрес текущего документа, может изменить целевое окно для всех ссылок в теле документа (<base href=»http://www.mysite.ru/&quot; target=»_blank»>).
2. <basefont> — задаёт размер, цвет, шрифт текста (<basefont face=»Arial, Helvetica, sans-serif» size=»4″ color=»blac»>).
3. <link> — ссылка на внешние файлы стиля (css) (<link rel=»stylesheet» href=»style.css»>).
4. <style> — позволяет описывать стиль в заголовке (<style type=»text/css»> h1{color:#000000;}</style>).
5. <script> — описание скриптов или указание на сторонний файл, содержащий их (<script type=»text/javascript» href=»http://mysite.ru/myscript.js&quot;&gt;&lt;/script&gt;).
6. <meta> — теги для хранения информации.(<meta name=»keywords» content=»Ключевые, слова, через, запятую»>).

Всё, что расположено в контейнерном теге

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

Команды оформления содержания

По типу содержимого и характе́рному поведению в структуре документа элементы html делятся на строчные и блочные. При вёрстке они дополняют друг друга. В случае необходимости, с помощью css некоторым блочным элементам можно задать свойство блочно-строчных, присвоив display значение inline-block.

Элементы строки:

• <b>жирный шрифт</b>;
• <strong>логическое выделение написанного</strong>;
• <i>курсив физическая разметка</i>;
• <em>выделение текста курсивом, логическая разметка</em>;
• <big> увеличивает на одну единице текст</big>;
• <small>уменьшает текст на 1 единицу</small>;
• ^{шрифт в верхнем индексе};
• _{шрифт в нижнем индексе};
• <a>определяет текстовые ссылки, имеет атрибуты: href=»ссылка», name=»якорь»</a>;
• <img> для вставки изображений в формате jpeg, png, gif;
• <br> перенос строки.

Элементы блока:

• <blockquote>цитата</blockquote>;
• <div>блочный контейнер</div>;
• <h1>Заголовки разного уровня в тексте <h1> — <h6>Другой уровень</h6>;
• <p>абзац, новый параграф</p>;
• <pre>вставка предварительно форматированного текста</pre>;
• <hr> линия.

Таблицы и списки

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

Таблицы в HTML создаются с помощью контейнерных тегов:

<table>

<tbody>

<caption>Название таблицы</caption>

<tr> строка

<th>Название столбца </th>

<td>содержимое ячейки</td>

</tr>

</tbody>

</table>

Управлять таблицей можно с помощью атрибутов: border — бордюр, alighn — выравнивание по ширине, valign — по высоте, cellpadding — отступ в ячейках, cellspacing — отступ между ячейками, width — ширина.

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

Его поведение в структуре веб-страницы аналогично блочным элементам. <li> — это всегда пункт списка.

Списки бывают трёх типов:

• маркированные <ul><li></li></ul>.;
• нумерованные <ol><li></li></ol>;
• список определения <dl><dt>Термин</dt><dd>определение</dd></dl>.

Преимущества и недостатки языка HTML

Разумеется, в использовании языка HTML есть и плюсы, и минусы. Положительные моменты тут следующие:

• Он весьма популярен, и его ресурсы огромны.
• Язык HTML заложен изначально в каждом поисковике.
• Дает чистую и упорядоченную разметку.
• Консорциум World Wide Web (W3C) обеспечивает официальную поддержку веб-стандартов.
• Возможна интеграция с базовыми языками вроде PHP или Node.js.
• Всегда доступен для бесплатного использования.

Преимущества и недостатки языка HTML

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

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

Иерархические отношения между HTML-элементами

Родитель (parent). Каждый HTML-элемент имеет родителя. Для некоторого HTML-элемента родительским является тот элемент, в который он вложен.

Ребёнок (child). В каждый HTML-элемент (1) может быть вложен другой HTML-элемент (2) или несколько HTML-элементов (3). Каждый из этих элементов (2, 3) являются для элемента (1) ребёнком.

Предок (ancestor). HTML-элемент (1) считается предком некоторого другого HTML-элемента (2), если он является родителем его родителя или имеет ещё более дальнюю родительскую связь.

Потомок (descendant). HTML-элемент (1) считается потомком некоторого другого HTML-элемента (2), если он (1) является ребёнком его ребёнка (2) или ребёнком ещё более дальнего прародителя.

Сиблинг (брат, сестра, сосед, sibling). HTML-элемент (1) считается сиблингом по отношению к другому HTML-элементу (2), если оба элемента имеют одного и того же родителя.

Гипертекстовый учебник на HTML

Урок 1. Создание html-страницы

Прежде, чем приступить к изучению, скачайте необходимые материалы «К разделу «Гипертекстовый учебник на HTML». Ссылка для скачивания расположена на желтом фоне вверху урока. Разархивируйте файлы.

Задание:

1. Изучить основные команды, используемые при создании HTML-страниц.
2. Выполнить 5 упражнений, приведенных в тексте урока.
3. Выполнить контрольное задание.
4. Сдать урок преподавателю устно, отвечая на вопросы и демонстрируя все действия на компьютере.

В результате изучения этого урока Вы создадите web-страницу об РГППУ, как показано на рисунке ниже.

Откуда появился HTML

Язык гипертекстовой разметки использовался ещё во времена создания первых рукописных книг. Иногда на полях делались сноски, например, «см. такую-то страницу», что и являлось собственно первыми, очень неудобными гипертекстовыми ссылками.

В 60-е годы ХХ века впервые в истории было употреблено понятие «гипертекст» учёным Т. Нильсоном. Его проект «Ксанаду» создавал электронные библиотеки, базы которых должны были храниться на спутнике и управляться с помощью радио и телефонной связи. Использование в работе гипертекстовых ссылок позволяло выполнение перехода с одного документа на другой.

На основе языка разметки документов SGML в начале 90-х г. Тимом Бернерсом-Ли был создан язык разметки гипертекста HTML. Однако он так и остался бы теорией, но М. Андриссен и группа студентов Иллинойского университета разработали первый браузер — Mosaic и запустили его бесплатное распространение. Во Всемирной паутине браузер демонстрировал гипертекстовые странички. С этого момента началось развитие веб-страниц и веб-серверов.

Парные теги html, head и body

Теги
<html>, <head> и
<body> являются представителями
парных тегов, т.к. они всегда используются в паре с соответствующими закрывающими
тегами </html>, </head> и </body>.
Это самые известные теги языка HTML. Они используются при разметке любого
html-документа.

Первая пара тегов <html> и </html>
формирует контейнер «html», который вмещает
все остальное содержимое веб-страницы. Поэтому, открывающий тег <html> пишется сразу же после тега определения
типа документа <!DOCTYPE html>, затем записываются все остальные элементы документа, и уже
в самом конце ставится закрывающий тег </html>, свидетельствующий об окончании
html-документа.

Вторая пара <head> и </head>
формирует элемент разметки, называемый заголовком документа
(от англ. head – голова). Он располагается после открывающего тега
<html> и предназначен для хранения служебных тегов с метаданными, которые сообщают
браузеру информацию, необходимую для работы с данными страницы.

Одним из таких служебных тегов является тег <meta charset=»utf-8″>. Здесь идентификатор
charset представляет собой атрибут тега, а строка «utf-8» –
значение данного атрибута. Благодаря этому атрибуту, браузер понимает, что при отображении текста необходимо использовать кодировку
utf-8, указанную в качестве его значения. Более подробно тег
<meta> мы рассмотрим в дальнейшем. Отметим лишь, что он относится к одиночным тегам
и, следовательно, используется без закрывающего тега, формируя пустой элемент разметки.

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

Ну, и наконец, третья пара тегов
<body> и </body> формирует элемент
разметки, называемый телом документа
(от англ. body – тело).
Тело документа располагают сразу же после заголовка документа. В него помещают всю информацию, которую необходимо вывести на экран, а также
теги, отвечающие за форматирование этой информации.

6. Таблицы

<table class="styled">
  <tr>
      <th colspan="3">Spanning 3 Columns</th>
  </tr>
  <tr>
      <td rowspan="3">Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
  </tr>
  <tr>
      <!-- rowspan -->
      <td>Table Data</td>
      <td>Table Data</td>
  </tr>
  <tr>
      <!-- rowspan -->
      <td>Table Data</td>
      <td>Table Data</td>
  </tr>
</table>

<table class="styled">
  <colgroup>
      <col style="background-color: blueviolet;">
  </colgroup>
  <colgroup>
      <col style="background-color: #f4e767;" span="2">
  </colgroup>
  <thead>
      <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Email</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>John</td>
          <td>Doe</td>
          <td>[email protected]</td>
      </tr>
      <tr>
          <td>Jane</td>
          <td>Doe</td>
          <td>[email protected]</td>
      </tr>
  </tbody>
</table>

Описание типа документа HTML5

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

Первое, что бросается в глаза в описании типа документа HTML5 — это его поразительная простота. Сравните его, например, с неуклюжим описанием типа документа, который требуется использовать веб-разработчикам при работе со строгим XHTML 1.0:

Даже профессиональные веб-разработчики были вынуждены вставлять описание типа документа XHTML методом копирования и вставки из другого документа. А описание типа документа HTML5 короткое, четкое и легко вводится вручную.

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

Все это порождает непростой вопрос: если HTML5 — живой язык, то зачем тогда для страницы вообще нужно описание типа документа?

Ответ на этот вопрос таков: описание типа документа продолжает использоваться по историческим причинам. При обработке страницы с отсутствующим описанием типа документа большинство браузеров (включая Internet Explorer и Firefox) переходят в режим совместимости (quirks mode). В этом режиме они пытаются отобразить страницу с учетом ошибок в правилах, которые использовались в более ранних версиях. Проблема с этим состоит в том, что режим совместимости одного браузера может отличаться от режима совместимости другого браузера, вследствие чего страницы, разработанные для одного браузера, на другом браузере будут, скорее всего, отображаться с ошибками, такими как неправильный размер шрифта, нарушенная структура оформления и т.п.

А обнаружив на странице описание типа документа, браузер знает, что обработку этой страницы требуется выполнять, следуя более строгим правилам режима стандартов (standards mode), который обеспечивает единообразное форматирование и структуру страницы при ее отображении любым современным браузером. За некоторыми исключениями, браузеру совершенно безразлично, какой именно тип документа указан в описании. Он просто проверяет, что страница имеет какое-либо описание типа документа. Описание типа документа HTML5 просто самое короткое действительное описание типа документа, которое задействует режим стандартов браузера.

Структура HTML-документа

Типичный HTML-документ имеет головную
часть и тело. Начало
документа отмечается флагом <HTML>,
а конец — флагом </HTML>.

Синтаксис

<HTML>
<HEAD><TITLE>...</TITLE>
</HEAD>
<BODY>...</BODY>
</HTML>

Пример

<HTML>
<HEAD><TITLE>Vasya's Homepage</TITLE>
</HEAD>
<BODY>Добро пожаловать ко мне в гости!<BR>Рад вас видеть у себя дома.
</BODY>
</HTML>

Головная часть
документа
(Head)

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

Синтаксис

<HEAD>...</HEAD>

Пример

<HEAD><TITLE>Caucasian Ovcharka Homepage</TITLE></HEAD>

Как выглядит на дисплее

(На дисплей вместе с остальной
частью документа не выводится.)

Название документа
(Title)

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

Поле title в документе
является обязательным. Его не
следует делать длиннее 64 символов.
Название документа должно быть
осмысленным, поскольку это поле
читается программами-роботами и
заносится в базы данных поисковых
систем (см. стр.
и ).

Синтаксис

<TITLE>...</TITLE>

Пример

<HEAD><TITLE>Caucasian Ovcharka Homepage</TITLE></HEAD>

Как выглядит на дисплее

(Выводится отдельно от самого
документа)

Тело
(Body)

Определяет
«видимую» часть HTML-документа. В
документе должно быть только одно
тело.

Синтаксис

<BODY>...</BODY>

Пример

<BODY>Это крошечный HTML-документ.</BODY>

Как выглядит на дисплее

Это крошечный HTML-документ.

Комментарий
(Comment)

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

Синтаксис

<!-- текст_комментария -->

Пример

<!-- This document was created from RTF source by rtftohtml version 2.7.5 -->

Как выглядит на дисплее

(На дисплей не выводится.)

Замечание: в виде
комментария в HTML-файл могут быть
помещены различные инструкции для
WWW-сервера и других служебных
программ. Например, при
сответствующей настройке
WWW-сервера комментарий <!--#exec
cgi="/cgi-bin/counter"-->, включенный
в HTML-файл, будет вызывать запуск
программы counter каждый раз,
когда кто-нибудь «берет» этот
файл с сервера.