Всем привет, в этой статье я расскажу про язык разметки документа HTML. Статья рассчитана исключительно для новичков, поэтому если у вас есть хоть немного знаний в программировании вам это будет вряд-ли интересно. Ну а если ты только-только начинаешь изучать волшебный мир кода, то приятного прочтения!
Что такое HTML?
Начнем с того, что HTML это не язык программирования — с помощью HTML нельзя создать программу, но зато можно превратить несколько картинок и текст в документ, имеющий расширение .html
Грубо говоря, HTML размечает на странице нужный нам контент в определенном порядке, создавая документ, который читается браузером.
Кто такой верстальщик?
Верстальщик — это человек, который занимается созданием внешнего вида для сайта, используя HTML и css, в некоторых случаях Javascript. На данный момент эпоха чистых верстальщиков уходит, поэтому сейчас знать только HTML и css мало.
Структура документа HTML
Любой HTML документ имеет стандартную структуру.
<!DOCTYPE html>
Как мы можем заметить, первой идет строчка <!doctype html> Что же она означает? Она обозначает тип текущего документа. Проще говоря, эта строчка нужна для правильной интерпретации веб-страницы браузером.
Есть несколько видов <!DOCTYPE>, но я не вижу смысла разбирать все, поскольку достаточно знать, что в документе первая строчка должна быть <DOCTYPE html>.
Кстати, <html>, <head>, <title>, <body> называются тегами. Они бывают Одинарные (Это когда пишется только один тег, например <img>) и Двойные (это можно видеть на фотографии выше, например <title></title>)
Тег с слэшем, (например </body>) Также называется закрывающим тегом.
Тэг <html>
Имеет все данные документа. Ставится в начале (после <!DOCTYPE html>) и конце (после него обычно ничего нету).
Тэг <head>
head в переводе с английского голова. В этом тэге хранится информация о странице, которую читает браузер, для того, чтобы понять что на ней вообще находится. Также тут размещается заголовок веб-страницы, это тэг <title>. Именно этот тэг ответственен за название вкладки, которую мы так привыкли видеть. В тэге <head> подключаются скрипты для страницы, шрифты, стили и тд.
Тэг <body>
Переводим с английского и получаем слово тело — и верно, в этом тэге хранится тело документа: Картинки, тексты, аудио, видео и тд.
Существует огромное количество тэгов, которые имеют разное предназначение.
Ресурс для изучения
В интернете есть полно статей на тему изучения HTML. Я же пользовался этим тык.
В чем писать?
Не стоит писать код в обычном блокноте, как это многих заставляли делать в школах и колледжах. Сейчас на просторах интернета есть огромное количество редакторов кода, которые не только будут подсвечивать каждый элемент в коде, но и предлагать варианты для быстрого заполнения. Возьмем в пример программу Visual Studio Code.
Это бесплатная программа от компании Microsoft. Конечно, ее многие ругают, но факт того, что она бесплатная сразу все меняет. У нее очень большой функционал, по ее использованию на ютубе существует куча гайдов.
А нужно ли вообще изучать HTML?
Это, пожалуй, слегка глуповатый вопрос. Ведь изучение HTML нужен для понимания самых азов. А как мы знаем, без азов никуда. Представьте, что вы — гениальный ученый, который может в уме высчитать сложные задачи, но при этом не знает как писать. Тут тоже самое.
При должном желании и усердии, изучение HTML не будет сложным. Самое главное в HTML это запомнить теги и для чего они нужны. И не бойтесь, когда увидите огромное количество тегов — большая часть из них вам по просту будет не нужна.