Глава 2. Часть 2.
В предыдущем уроке мы узнали, что такое теги и для чего они нужны.
Здесь я не буду писать перечень наиболее употребляемых тегов, как это обычно принято на курсах. За меня это уже сделали многие ресурсы. Мы постепенно освоим теги по мере использования их в своих примерах.
А пока изучите самостоятельно полный перечень тегов, которые существуют в html и размещены на сайте WebReference, расположенном по адресу: https://webref.ru/html. На сегодняшний день это самый полный и информативный русскоязычный ресурс в интернете по html и css.
Как я писал уже ранее, нельзя всё знать. И наша задача научиться находить информацию и умело пользоваться всем тем, что уже создано до нас и для нас.
Параллельно с изучением тегов на ресурсе, который уже ранее назвал, попрактикуйтесь в написании тегов. Для этого на данном этапе удобно воспользоваться онлайн сервисом CodePen по адресу https://codepen.io/pen/.
На будущее возьмите себе на заметку, что иногда для маленьких экспериментов удобнее использовать онлайн ресурсы, каковым является CodePen, чем писать код в редакторе.
А сейчас коротко хотелось бы сказать о том, как браузер умудряется понимать язык разметки (html) и как работать с VSCode редактором при написании кода html.
Для того, чтобы браузер правильно понял, что мы передали ему код написанный с помощью html, при написании html должна быть соблюдена определенная структура создаваемого документа.
На первой строчке находится такая запись, в виде одинарного тега –
<!DOCTYPE html>, вот это и есть самая главная запись, которая указывает браузеру, что наш документ создан по стандарту HTML.
На второй строчке открывается парный тег <html> с обязательным атрибутом lang=”ru”, который показывает браузеру для какого языка создан документ html. А атрибутом в данном случае является элемент, который задает тегу html дополнительное свойство.
Далее в парный тег <html> вкладываются два парных тега <head></head> и <body></body>. Да, теги можно вкладывать друг в друга. Главное, чтобы вкладываемый тег стоял до закрывающего тега, в который он вкладывается.
Например, вот эта запись правильная: <html> <body> </body> </html>.
А вот так делать нельзя: <html> <body> </html> </body>.
Парный тег <head> это специальный блок, который содержит всю служебную информацию о нашем создаваемом документе. Более подробно будем изучать его постепенно, по мере необходимости.
А вот парный тег <body> это основной блок для размещения нашего кода. В нём происходит вся наша работа по созданию документа.
Надо ли заучивать структуру документа? Заучивать не надо, но знать – обязательно. По мере работы с кодом структура сама отложится у Вас в памяти. Но если что и забудете, то в редакторе кода есть такая функция Emmet, с помощью которой ошибки при создании структуры документа у Вас не будет.
Emmet это очень мощный набор плагинов (дополнительных инструментов) для быстрого написания кода.
Например, для создания структуры документа html достаточно в пустом вновь создаваемом документе, поставить в начале самой первой строчки восклицательный знак (!) и нажать на клавиатуре клавишу Tab. Всё, вся структура автоматически появится в документе, можете начинать работу.
А теперь подключим в нашем редакторе кода VSCode еще одно расширение. Называется оно Live Server.
Данное расширение позволит нам набирать код в редакторе и тут же смотреть его результат в браузере без перезагрузки страницы в браузере.
Сейчас это расширение становится актуальным, поскольку впереди Вас ждет много работы с кодом, и очень удобно видеть сразу результат.
Подведём итоги этого урока:
· Познакомились с ресурсом, где можно посмотреть все теги html;
· Узнали, что есть онлайн редакторы;
· Узнали, что теги можно вкладывать один в другой;
· Познакомились со структурой документа, благодаря которой браузер
распознаёт код html;
Теперь мы знаем достаточно много, чтобы двигаться дальше. Не забывайте только самостоятельно работать над углублением полученных знаний.
Продолжение следует...