Основы HTML | Часть 1
Эта статья ориентирована на тех, кто твёрдо решил стать Frontend-разработчиком и влиться в IT-тусовку. Мы начнём с самого главного, а именно - с HTML. Данная статья является первой в цикле статей про HTML, поэтому, советую подписаться, чтобы не пропускать выходы следующий частей )
HTML-программистам
Для тех, кто думает, что выучив HTML вы станете крутым программистом - к сожалению, это не так. HTML - не язык программирования, однако, он играет ключевую роль во всей WEB-разработке.
HTML - это язык разметки гипертекста. Простым языком, это определённый синтаксис, набор правил, следуя которым браузер отображает текст так, как это необходимо разработчику. В этом языке нет переменных, нет условий, нет циклов, нет абсолютно ничего общего с программированием. Однако, освоив этот язык, ты положишь начало своей карьере в мире Frontend-разработки.
Тэги
Единственная сущность HTML - это тэг. Тэг - отдельное правило, которое диктует браузеру как отобразить его содержимое. Тэг всегда описывается внутри треугольных скобок (< >) и большинство тегов необходимо закрывать (</>). Начнем сразу с примеров:
1) Для отображения текста, используется параграф - тэг <p>:
<p> Здесь будет текст </p>
Данная конструкция как будто говорит браузеру: "Внутри меня находится обычный текст, отобрази его".
2) Для создания блока используется блочный тэг - <div>:
<div>
<p>
Здесь текст
</p>
</div>Блоки служат для разделения сущностей на странице. Для разработчика блок - это строительный кирпичик, из которого он будет создавать всю страницу. Он может придумать абсолютно любой подход к организации этих блоков - этот процесс называется "вёрстка". Для наглядности, разделим сайт "teletype.in" на блоки:
Каждая рамка является отдельным блоком, который логически разделяет содержимое страницы.
3) Для отрисовки изображений используется тэг <img>:
<img src="/image.jpg">
И этот тэг немного отличается от тех, которые мы встречали ранее.
Во-первых - его не обязательно закрывать. Таких тэгов немного, но они есть, среди них - <img>, <p>, <br>, <link> и др. Во-вторых, у тэга появился атрибут "src", в который мы передаем путь к файлу изображения.
Список всех HTML-тэгов очень длинный, да и многие из них используются крайне редко. На практике, применяется, скорее всего, процентов 20 от всего многообразия тэгов, поэтому важно запомнить их, а по поводу остальных - достаточно будет просто знать про их существование.
Атрибуты
Атрибут - это свойство тэга, иными словами - определённый набор параметров, который передает браузеру дополнительную информацию для отображения тэга. В примере выше - мы говорим браузеру с помощью атрибута "src", откуда он должен взять картинку, которую мы хотим отрисовать.
Атрибутов так же, как и тэгов - очень много. Мы не будем их затрагивать в этой статье, корректнее будет изучать их по мере появления на практике.
Пишем первую страничку
Итак, приведённой выше информации нам более чем достаточно, чтобы написать нашу первую HTML-страничку.
Создавай файл с названием "index.html", открывай свой любимый текстовый редактор (могу порекомендовать Visual Studio Code или Sublime, но хватит даже обычного "Блокнот"), мы начинаем )
Для начала, мы должны дать браузеру понять, что будем работать с HTML, поэтому, пишем следующих код:
<html> <head> </head> <body> </body> </head>
Давай разберём, что же тут написано:
1) <html></html> - основной контейнер всей веб-страницы.
2) <head></head> - контейнер для тэгов, содержащих системную информацию. Она почти никогда не отображается напрямую на странице и служит для подключения различных вспомогательных модулей, таких как таблицы стилей или JS-скрипты.
3) <body></body> - контейнер для содержимого нашей страницы.
Теперь, нам надо как-нибудь назвать нашу страничку и добавить на неё блок с текстом. Для этого нам нужно сделать две вещи:
1) Внутри тэга <head></head>, пишем следующее:
<title>My first page</title>
2) Внутри тэга <body></body> пишем:
<div> <p> Hello, world! </p> </div>
<html>
<head>
<title>My first page</title>
</head>
<body>
<div>
<p>
Hello, world!
</p>
</div>
</body>
</head>Вот и всё!
Теперь, если ты откроешь наш index.html с помощью браузера, ты увидишь, что страничка называется "My first page" и внутри, на белом фоне с тобой здоровается новый Frontend-разработчик !!!
Я надеюсь, эта статья была интересной, в следующих частях мы более подробно поговорим о подходах к вёрстке, о семантике тэгов и ещё о многих интересных мелочах.