Всем читателям привет, это DevNoob.
Сегодня мы разберём основы основ вёрстки, а именно язык гипертекстовой разметки HTML.
Содержание:
1. Базовая разметка и редактор кода.
2. Что такое одиночные и парные теги.
3. Как добавить информацию на страницу.
4. ДЗ.
5. Бонусные материалы.
Рекомендации
Перед началом этого урока я настоятельно рекомендую во время чтения переходить в редактор кода и повторять мои действия.
Базовая разметка и редактор кода.
Для начала нужно разобраться в какой программе писать код.
Как по мне есть 3 варианта:
В моём случае писать код я буду в программе sublime text 3.
Редактор кода - это место где мы будем писать и редактировать наш код.
Sublime text 3 устанавливается как обычная программа, поэтому показывать процесс установки я не буду.
Итак, мы установили редактор кода, запускаем его.
Как только программа откроется, нас будет ждать пустое окно
Чтобы начать писать код на HTML нужно создать пустой файл (ctrl + n) и сохранить его (ctrl + s).
Называем наш файл index и выбираем ему расширение .html.
В дальнейшем мы будем создавать файлы именно так.
Если вы сделали всё правильно, то внизу должна отображаться надпись HTML - это означает что редактор кода понимает. что в дальнейшем весь код будет писаться на HTML.
Отлично, приступим к разметке. Разметка - это то, без чего не будет работать веб страница. Стартовая разметка HTML выглядит так:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
Давайте разберём ее подробнее. Вся разметка начинается с тега <!DOCTYPE html>, этот тег говорит браузеру что весь код ниже написан на новейшей версии HTML - 5. Про теги поговорим чуть позже.
Далее идёт тег <html> в котором и будет находится весь код веб-страницы.
В теге <head> находится информация, которая нужна браузеру, но мы её не видим. Далее идёт тег <meta>, который хранит в себе кодировку UTF-8.
Что это такое и как оно работает можно прочитать здесь.
Тег <title> хранит в себе название вкладки, к примеру если написать в нём: Мой первый сайт, то при открытии вашего сайта название вкладки будет "Мой первый сайт".
Далее идёт тег <body> - в нём хранится вся информация которую мы видим на сайте: картинки, текст, и так далее.
Что такое одиночные и парные теги
Вы наверняка заметили, что в разметки есть странные теги со слешем -
к примеру </body>. Это называется закрывающим тегом и эта конструкция относиться к парным тегам. Проще говоря: парные теги это конструкция из открывающего и закрывающего тега. В нашем случае теги <html>, <head>, <title> и <body> - парные.
Одиночные теги не содержат закрывающего тега со слешем.
Подробнее про одиночные теги можно прочитать здесь,
про парные здесь.
Как добавить информацию на страницу
Мы разберём несколько основных тегов для создания материала.
1. Теги заголовков.
Теги заголовков - <h1> - <h6> являются парными тегами, внутрь которых нужно поместить текст заголовка.
Чтобы посмотреть страницу, нужно открыть созданный нами файл в браузере.
Заголовки бывают разных размеров от самого большого (h1), до самого маленького (h6).
ВНИМАНИЕ - заголовок h1 должен быть только один, если таких заголовков будет много, то он будет реже появляться в поисковой строке!
2. Тег <p>
Тег <p> или тег параграфа содержит в себе весь текст, который находится на веб-странице. Он является парным.
3. Тег <img>
В тег <img> мы помещаем изображение, а также он является одиночным.
Чтобы добавить картинку, мы должны переместить её в директорию вместе с нашим файлом html. Лучше создать для них отдельную папку img.
Далее мы обращаемся к нашей директории внутри тега img, указывая расширение картинки.
4. Комментарии
Комментарии нужны для того чтобы не запутаться в своём коде через время или для других людей.
Делаются они вот так - <!-- -->, обратите внимание, что sublime text не подсвечивает наш комментарий, потому что он не влияет на саму страницу.
ДЗ
Спасибо, что прочитали мою статью, ваша домашняя работа: сверстать вот такую простую страницу:
В качестве изображения выбирайте своё, в странице используются теги
<h1>, <h2>, <p> и <img>
БОНУС
Установка плагинов для ускорения работы.
Особое внимание уделите плагину Emmet, который ускоряет вашу разработку в несколько раз.
