Дорогой читатель! Добро пожаловать на цикл статьей "HTML для чайников". Начиная с этого урока, Вы сможете узнать об основах вёрстки на HTML, разобраться в работе различных тегов, а также сможете сделать свой первый сайт. Мне, как создателю, будет очень приятно, если Вы станете самоучкой по моим статьям. Что-же, начнём первый урок.
Введение в тему
Итак, для того, чтобы начать вёрстку на HTML, разберёмся, что это за язык вообще. Википедия говорит:
HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык гипертекстовой разметки документов для просмотра веб-страниц в браузере.
Взято из: https://ru.wikipedia.org/wiki/HTML
Проще говоря, HTML - это единый язык, на котором создаются все сайты, просматриваемые в браузере (Google Chrome, Яндекс Браузер, Атом, Mozilla FireFox и др.)
Если говорить об устройстве документов, написанных на HTML, то можно представить себе коробку с коробками поменьше внутри, в которых ещё больше маленьких коробочек, а у большой и маленьких коробок есть свои отличия и свойства.
То же самое и в HTML. Большая коробка - это документ, а коробочки внутри - это теги, а свойства коробочек - это атрибуты тегов.
Сейчас всё узнаем на практике. Но для того, чтобы начать писать сайты, нам нужен текстовый редактор, которых в Интернете полно и ещё больше будет. Например, можно использовать Microsoft Visual Studio Code. Как установить и начать работать в этой программе, Вы можете узнать, перейдя в видео ниже:
Ссылка на сайт из видео: https://code.visualstudio.com/
Инструкция по тому, как перевести Visual Studio Code на русский язык:
Название расширения из видео: Russian Language Pack for Visual Studio Code
Теперь, когда у нас есть текстовый редактор, мы можем начать писать код. Для начала нужно создать новый HTML-документ. Для этого:
1) Нажмите на меню "Файл" в левом верхнем углу;
2) Выбрать из выпавшего списка раздел "Создать текстовый файл";
3) В правом нижнем углу выберите тип документа, на данный момент тип будет "Простой текст";
4) Вверху по середине окна откроется список языков, над которыми будет окно для ввода текста, которое нужно найти и на которое нужно нажать;
5) Впишите в строку "HTML" и выберете единственный оставшийся пункт списка, это и есть нужный нам язык.
Теперь у нас есть документ, в котором установлен язык HTML. Сейчас предлагаю рассмотреть код, представленный на изображении ниже:
Попробуйте самостоятельно рассмотреть код. Что Вы можете заметить? Наверное, Вы обратили внимание, что тут очень много треугольных скобок (<>). Это теги, о которых говорилось раньше. Сейчас приготовьтесь: будет много информации, разберёмся, что значат каждые теги.
Важное примечание: каждая строка документа имеет порядковый номер, который указан на шкале справа от документа, используйте его для ориентирования.
- <!DOCTYPE html>(строка 1) - тег обозначает, что используется 5-я версия языка HTML в документе, обязателен в начале документа.
- <html> (строка 2) и </html> (строка 12) - теги являются началом и концом документа соответственно, обязательны в документе.
- <head> (строка 3) и </head> (строка 7) - теги являются началом и концом "шапки" страницы (см. значение ниже) соответственно, обязательны в документе.
- <!-- … --> (строки 4 и 9) - комментарий в документе, который не влияет на итоговый результат, необязателен.
- <meta charset="utf-8"> (строка 5) - тег задаёт кодировку* сайта для правильного отображения информации в браузере, имеется атрибут (см. значение ниже), желателен.
- <title> и </title> (строка 6) - между этими тегами прописывается название страницы (см. значение ниже), желателен, при отсутствии принимает значение названия документа.
- <body> (строка 8) и </body> (строка 11) - теги являются началом и концом "тела" страницы (см. значение ниже), обязателен.
*Кодировка - это соответствие между визуальными символами и числами. Кодировки необходимы, так как компьютеры созданы для работы с числами и не понимают текст.
Какие теги считаются парными? В некоторых пунктах списка выше представлено сразу по два тега, это значит, что они - парные, то есть имеют открывающий и закрывающий теги, между которых заносится информация. Такие теги подчёркнуты разными цветами на рисунке 3 (см. выше). Для того, чтобы прописать парный тег, нужно написать открывающий тег (это первый тег в пунктах списка), заполнить внутренность тега и прописать закрывающий тег (это второй тег из пункта списка), они отличаются от открывающих тегов тем, что между открывающей треугольной скобкой и названием тега имеется символ / (слеш). Примечание: в следующих уроках парные теги будут упоминаться по открывающему тегу, но запомнить, какие теги одиночные, а какие - парные, со временем будет легко.
Что такое шапка страницы? Шапка страницы, границей которой являются теги <head> и </head> (см. в списке выше) - это блок документа, в котором указывается основная информация о странице, не затрагивающая содержание (кроме <title> и </title>), например кодировка и другие параметры, с которыми познакомимся позже.
Что такое тело страницы? Тело страницы, границей которого являются теги <body> и </body> (см. в списке выше) - это блок документа, в котором находится содержание страницы, доступное пользователю, например, текст, изображения, таблицы, списки и др. Все теги, добавляющие информацию на страницу, мы изучим в следующих уроках.
Что такое атрибут тега? Атрибут тега - это модификатор тега, который дополняет и/или уточняет тег. Например, тег <meta charset="utf-8"> содержит атрибут "charset", который имеет значение "utf-8". Что это означает? Вспомним, что этот тег обозначает установку кодировки, хотя сам тег <meta>, как мы узнаем в будущем, используется не только для этого, а атрибут charset и уточняет, что тег используется для установки кодировки сайта, а значение utf-8 и есть устанавливаемая кодировка.
Что такое заголовок сайта? Это важное уточнение. Если Вы читаете эту статью с ПК, то в Вашем браузере имеется одна или несколько вкладок, кликая на которые Вы перемещаетесь между открытыми сайтами. Вышеописанные теги <title>, </title> задают текст, который отображается во вкладке. В общем, заголовок текста - это название вкладки страницы в браузере, которое указывается в теге <title>.
Практическая работа №1 "Создание базовой страницы HTML".
1) Создать чистый текстовый документ HTML (узнать как создать можно в инструкции выше, рисунки 1-2).
2) Прописать открывающую треугольную скобку, вследствие чего откроется выпадающий список, где нужно выбрать первый тег <!DOCTYPE html> (рис. 4).
3) Со следующей строки прописать тег <html>. Закрывающий тег допишет программа автоматически, а курсор будет стоять между двух тегов, нажмите Enter, чтобы между ними была пустая строка (рис. 5).
4) Курсор должен стоять посередине этих тегов, на небольшом расстоянии, если этого нет, то поставьте курсор на строку между ними и нажмите TAB. (Этот процесс далее будет упоминаться как "Проверка установки курсора") После этого, пропишите тег <head>, закрывающий тег допишется программой автоматически, а курсор встанет между тегами, нажмите Enter, чтобы между ними была пустая строка (рис. 6).
5) Поставьте курсор после тега </head> и нажмите Enter. Пропишите тег <body>, закрывающий тег допишет программа автоматически. Нажмите Enter, чтобы между ними была пустая строка (рис. 7).
6) Поставьте курсор между тегами <head>и </head>, а также проверьте установку курсора. Пропишите тег <meta charset="utf-8">, чтобы задать кодировку utf-8 (рис. 8).
7) Поставьте курсор после тега <meta …> и нажмите Enter. Пропишите тег <title>, закрывающий тег пропишет программа автоматически. Между этими тегами пропишите такое название документа, какое Вы хотите (рис. 9).
8) Поставьте курсор между тегами <body> и проверьте установку курсора. Пропишите начало тега комментария <!-- , а остальную часть допишет программа автоматически. Курсор будет находиться в теге комментария, поэтому можно сделать примечание того, что это - тело страницы (рис. 10).
9) Сохраните документ на Вашем компьютере под названием index.html (рис. 11).
Работа готова. Проверьте результат:
- откройте Вашу работу в любом браузере и проверьте, что в названии вкладки название сайта, которое Вы вбивали ранее (рис. 12).
Домашнее задание:
- постараться запомнить значения тегов, изученных в этом уроке
- повторить теоретический материал
- проделать практическую работу №1
