В этом гайде мы научимся использовать HTML
Всё начинается с основы любого HTML документа
Поэтому пишем
!DOCTYPE указывает на тип файла
В теле всегда должны находится 2 тега с закрытием.
В head пишутся headers, то есть заголовки страницы. Их множество, но большинство редко используются. В основном тут подключаются файлы .css (стили) и скрипты .js (JavaScript), тут же заголовок сайта
В body пишется тело сайта, все выводимые на страницу элементы будут здесь.
Давайте рассмотрим несколько примеров того, что можно прописать в head
Здесь мы добавляем заголовок страницы "Главная".
Мы подключаем файл styles.css в той же директории.
Мы подключаем файл jquery-3.7.1.js в той же директории
jQuery - это библиотека, облегчающая написания кода на JS. Если хотите узнать больше, зайдите сюда.
Помимо прочего, в теге head можно писать CSS код в теге style
Обычная практика ставить внешние отступы (margin) и внутренние отступы (padding) элементов, как 0. Обычно это пишут в отдельном файле.
Теперь переходим к самому интересному, к тегу body.
Как мы обсудили ранее, в теге body перечисляются элементы, которые будут показаны пользователю. Давайте перечислим основные теги, которые постоянно используются
Давайте теперь разберём каждый из тегов
div - это блочный элемент, используется как контейнер для объединения элементов. Очень полезен.
p - параграф, в котором пишут большие текста.
a - ссылка
h1,h2,h3,h4,h5,h6 - теги заголовочного текста, отличаются по размеру, от большего к меньшему.
form - форма для отправки данных из инпутов (input)
input - поле для ввода данных, часто используется в форме. В языке PHP
span - почти тоже самое, что и div, но располагается inline (в линию/в ряд)
br - перенос строки с отступом.
Вы наверняка заметили в этих 2 строчках
Атрибут href, указывающий на файл/ссылку/ссылку на файл в интернете
Мы плавно перешли к атрибутам.
До этого мы просто перечисляли элементы (теги). Но у каждого элемента есть атрибуты. Атрибуты, по своей сути, это свойства элемента.
Вы заметили? Когда мы подключали скрипт там был атрибут src="", где мы ссылались на файл, так уж завелось, что атрибут href и src почти идентичны, но используются для разных элементов.
Тег img , как вы могли догадаться , это картинка.
Атрибут alt у картинок - это текст, в случае, если картинка не будет показана по разным причинам.
Если есть тег img, то есть и тег video.
Вы заметили, что у тега video есть атрибуты width и height, обычно они находятся в CSS, но для этого элемента сделали исключение
Так же, в теге video должен быть тег source, у которого будет атрибут src и type, ссылка на файл и тип файла.
Вообще-то нужно сказать, что тегов HTML огромное множество. Вот вам подробный список.
Давайте разберём основные атрибуты и где они применяются
Как создавать комментарии? Очень просто, вот формат комментария в HTML
Комментарий ограничивается с двух сторон <!-- и -->
И ещё один важный момент, в HTML можно создавать свои теги. Тег должен иметь определенный формат: должен быть в нижнем регистре, должен содержать только латинские буквы, должен содержать дефис. Можно добавить цифры и даже смайлики. Вот пара примеров
Как видите, есть дефис, это важно. Вот еще более безумный пример
Такой элемент будет иметь свойство
Это как тег span, чтобы сделать его как тег div, нужно прописать стиль display: block; для вашего элемента.
Спасибо за изучение данного скрипта. Вы также можете изучить скрипт по CSS, чтобы дополнить знания.