HTML: Основа

HyperText Markup Language - это язык разметки гипертекста.

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

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

Существует 2 вида тегов : одинарные и двойные.

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

Двойной тег обязательно должен быть закрыт, иначе все сломается!
Одинарные теги не имеют пары. Их закрывать ненужно.
Например:
... прекрасные создания. 
<br>
<hr> 
Так же кошки... 
<br> - тег переноса строки.
<hr> - горизонтальная линия.

Результат кода выше:
Теги можно вкладывать друг в друга. При этом важно соблюдать «принцип матрёшки», т.е. мы не можем менять закрывающие теги местами, например:
Верный код
<p>
  <em>Курсив внутри абзаца</em>
</p>
Неверный код
<p> 
  <em> Так делать нельзя
</p>
  </em>
И ещё, не все теги можно вкладывать в другие теги, например тег <h1> нельзя вкладывать в <p>.
Атрибуты
Атрибуты — это свойства тега. С помощью них мы задаём параметры тега.

Сразу возьмём пример: тег <a> — это ссылка.
Для задания адреса, куда будет вести эта ссылка, нам понадобится атрибут href.

Вот так будет выглядеть ссылка на страницу Цифры Вконтакте:
<a href="https://vk.com/digitcenter">Цифра Вконтакте</a>
Имя атрибута говорит браузеру, какой признак нужно поменять, а значение — каким этот признак должен стать. Значение атрибута href представляет собой адрес ресурса, на который можно перейти.
Атрибуты присутствуют в любых тегах там, где нужна дополнительная информация.
Атрибут встраивается в открывающий тег.
Cначала пишется имя атрибута. Например, href.
За именем следует знак равенства и значение атрибута в кавычках href="https://vk.com/digitcenter".
Вместо двойных кавычек можно использовать одинарные 'https://vk.com/digitcenter'
Структура HTML-документа
Структура HTML документа - скелет, на основе которого строится вся страница.
<!DOCTYPE html> <!-- сообщает браузеру, что в этом документе используется пятая версия HTML. Всегда начинайте страницу именно с него. -->
<html>
  <head>
    <meta charset="utf-8">
    <title>Страница</title>
  </head>
  <body>
    <h1>Заголовок первого уровня</h1>
    <h2> Заголовок второго уровня</h2>
    <!-- Комментарий -->
    <p>Новый абзац текста</p>
    <p>А тут еще один абзац текста</p>
  </body>
</html>
Это обязательные теги каждой страницы, которые задают структуру всего будущего сайта.
Разберем, что написано выше.
Валидация
Перед тем как завершать создание любой страницы нужно провести её проверку на https://validator.w3.org

Валидация покажет есть ли на странице ошибки.
Полезные ссылки
Практика
1. Тест всех систем
Давай проверим, что все что мы узнали работает.

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

Необходимые материалы:
<!DOCTYPE html> 
<html lang="ru">
  <head>
  <title>Пальма</title>
   </head>
  <body>
  <p>Родина кокосовой пальмы точно неизвестна — предположительно она родом из Юго-Восточной Азии (Малайзии).</p>
  <p>Сейчас она повсеместно распространена в тропиках обоих полушарий, как в культурном, так и в дикорастущем виде. На Филиппинах, Малайском архипелаге, полуострове Малакка, в Индии и на Шри-Ланке её разводят с доисторических времён.</p>
  <p>Кокос — растение морских побережий, предпочитающее песчаные почвы, поэтому первое место по объёмам производства с большим отрывом занимает многоостровное государство с обширной прибрежной площадью — Индонезия.</p>
  <p>Расширение его ареала шло с помощью человека и естественным путём: кокосовые орехи водонепроницаемы и свободно держатся на воде, далеко разносятся океаническими течениями, сохраняя при этом жизнеспособность.</p>
  </body>
</html>
Примечание:
- В результате этого и следующих заданий будут получаться html файлы. Создавай для каждого задания отдельную папку, называй её названием задания и сохраняй все результаты там.
- При сохранении, укажи кодировку UTF-8.

Результат:
2. Доделай за ленивым
Исправь и дополни код, что бы получившаяся страница успешно прошла валидацию.

Необходимые материалы:
<html>
  <head>    
  <title>Я заголовочек</title>
  <head>
 
  <bod>
    <p>А я текстик
  </body>
Результат:
3. Повтори страницу
Повтори страницу по примеру ниже.
Следующее занятие