9 дней изучения html. Решил сформулировать и изложить все свои знания:
Неделю назад эта информация ломала мне мозг, а теперь я её наверно с закрытыми глазами напишу. Конечно, это капля в море, но всё же...
В коде я изложил практически все свои знания:
Начнём. ☕ Для начала работы, конечно же, нужно создать текстовый файл index и преобразовать его в html файл, поменяв расширение "index.html".
Но, я не могу понять. Если сайт многостраничный, то для каждой страницы нужно создавать файл "index.html"?
На каком-то из форумов прочитал, что сейчас вообще эти файлы используются только в лендингах (лендинг-одностраничный сайт).
Далее, можем писать код. Конечно можно было писать его прямо в текстовом документе, а после поменять расширение на ".html", но это максимально не удобно.
Лично я использую редактор "Sublime Text 3", изначально я пробовал "Atom", но чисто визуально больше мне понравился Sublime.
Так вот, первым обязательным элементом идёт <!DOCTYPE html>.
Объяснить я это могу так: существует несколько разновидностей языка html.
- XHTML - это расширенная версия html.
- И есть более старая версия, это HTML 4.
И что бы браузер понял, какой перед ним html документ, и нужен этот элемент.
Далее идёт элемент <html lang="ru">.
Тег <html> парный, то есть с закрывающим тегом </html>. Это корневой элемент, и контейнер для всего содержимого веб страницы, кроме <!DOCTYPE html>.
По сути, его можно не писать, но на сколько я понял, это считается хорошим тоном/стилем у веб мастеров.
У меня он с атрибутом lang="ru" - это универсальный атрибут, для того, что бы браузер мог отображать некоторые национальные символы.
Следующим идёт структура сайта:
- <head> - "голова", контейнер, для какой-то технической информации, которая не отображается визуально на сайте. Кроме элемента <title>Заголовок</title>. В <head> пишутся мета теги
(пока что, о них я ничего не знаю). - </head> - закрывающий тег "головы", не обязателен.
- <body> - "тело", контейнер, для визуальной части веб страницы. Сюда пишется всё, что будет отображаться на странице сайта.
- </body> - закрывающий тег "тела", не обязателен.
Вот, это было самое лёгкое! Далее идут различные теги, типа:
- <meta charset="utf-8"> - (meta - metadata - метаданные), метатег с атрибутом кодировки, что бы не было такого:
- <title>...</title> - (title — название, заголовок), имя/заголовок html документа. Используется только один заголовок на один документ. Отображается так:
- <header>...</header>, <nav>...</nav>, <footer>...</footer>, <div>...</div> - это строительные элементы. Могу только сказать, что <header> - это шапка страницы или сайта, <nav> - это тег для какой-то там навигации, <footer> - так называемый подвал сайта, в котором контактная информация, даты, имя автора и т.п., и <div> - вроде как самый частый в использовании элемент, для построения блоков страницы.
- <h1>...</h1> <h6>...</h6> - это заголовки, всего 6 уровней заголовков. <h1> самый большой, жирный и главный. На странице должен быть один. Ну и <h2>, <h3> и т.д., заголовки меньшие как в размерах, так и в значимости.
- <p>...</p> - это обычный параграф.
- <br> - а это обычный перенос строки.
На деле, это выглядит так:
Упс! Начиная статью, я не предполагал, что выйдет так много текста.