Доброго времени суток, дорогой читатель!
Прежде чем приступить к изучения программированию сайтов, необходимо разобраться из чего состоит сайт.
В первую очередь сайт - это HTML документ. Как бы многие не хотели, но HTML не является языком программирования, о чем явно говорится в его названии. HTML расшифровывается как HyperText Markup Language. Как видим - это язык разметки.
Хорошей новостью для новичков будет то, что освоить HTML при большом желании можно за очень короткий промежуток времени, т.к. язык имеет хорошо прописанные стандарты. Также в данном языке разметки все просто и логично.
Ну что ж, приступим к изучению того, из чего состоит html-документ
Из чего состоит HTML-документ
Основной сущностью в HTML-документе является тег. Выглядят они следующим образом:
<название_тега></название_тега>
Теги бывают одиночные и парные.
<!-- парные -->
<div></div>
<p></p>
<!-- одиночные -->
<img>
<input>
У каждого тега есть свои атрибуты.
<a class="my-class"></a>
<img src="img.png">
Теги можно вкладывать друг в друга, порядок в котором закрываются теги очень важен.
<!-- правильно -->
<div>
<p>Какой-то <span>текст</span></p>
</div>
<!-- неправильно -->
<div>
<p>Какой-то <span>текст</p></span>
</div>
Разобравшись с тегами, давайте перейдем к самому html-документу
Как выглядит HTML-документ
Cам html документ выглядит следующим образом:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Наша первая страница</title>
<link href="css/style.min.css" rel="stylesheet">
</head>
<body>
<h1>Заголовок</h1>
<p>Какой-то абзац с текстом.</p>
<script src="js/script.min.js"></script>
</body>
</html>
Разберем подробнее что здесь написано:
<!DOCTYPE html> - это декларация типа документа, который используется. В данном примере используется стандарт HTML5. В настоящее время использовать что-то другое не имеет смысла, т.к. все современные браузеры уже поддерживают последний стандарт html, но если вы желаете узнать как объявляются другие версии html и xhtml, можете посмотреть эту статью https://htmlweb.ru/html/doctype.php
Следом открывается тег <html> - это уже начинается наш html документ. Все, что находится внутри него, это различная информация, которая необходима для браузера и поисковых систем чтобы корректно отобразить нашу страницу. Атрибут lang="ru" в примере, говорит поисковым системам, что контент на данной странице на русском языке. Также данный атрибут можно использовать и для других тегов на странице.
Следом идут теги <head> и <body>. Они должны присутствовать в каждом html документе. В теге <head> содержится все необходимая для браузера и поисковых систем информация.
В теге <meta> указывается кодировка, которая используется на странице. чаще всего используется кодировка utf-8, но могут быть и другие в зависимости от требований к сайту.
В теге <title> содержиться заголовок нашей страницы, который отображается на вкладке в браузере.
Тег <link> используется для подключения различных файлов, например, стилевой файл, как в примере, или шрифт.
В теге <body> содержится то, что будет отображаться на нашей странице. в примере используется заголовок <h1> и абзац <p>.
Тег <script> случжит для подключения внешних js-скриптов или для написания js прямо в теле самой страницы.
Также в работе вам могут потребоваться следующие теги
<header> - шапка страницы или блока.
<main> - главная смысловая часть страницы.
<footer> - подвал страницы или блока.
<section> - разделы внутри основного контента
<article> - отдельная статья, пост или комментарий
<nav> - навигация, ссылки для перемещения по сайту
<aside> - боковая колонка, дополнительный контент не входящий в main
<div> - пустой блок, не несет никакой смысловой нагрузки. если не один из указанных выше тегов не подошел, используем div
<ul>/<ol> > <li> - списки, служат для перечисления каких либо элементов
<img> - картинки
<a> - ссылки
<b> - жирный текст
<i> - курсив
<span> - пустышка для стилизации текстовых элементов
<table> > <th>/<tr>/<td> - работа с таблицами
Подробнее про теги и их атрибуты можно почитать тут:
https://developer.mozilla.org/ru/docs/Web/HTML/Element