Найти в Дзене

1ч. Создание сайтов. HTML и CSS

Доброго времени суток! Пожалуй начнём наше путешествие.
Будем учиться чему-то новому, в данный момент, начнём создавать собственные сайты.

Не думаю что это будет легко моему ленивому Высочеству, но и сидеть без дела - не дело.
Начнём с озов! Как-бы то ни было, я уже изучал связку html+css, но было это давно и из моей дырявой головы эти знания благополучно выветрились, так-что теперь я уже абсолютно ничего не вспомню.
Думаю хватить теребить моё альтер эго и погнали.

Великая двоица
Великая двоица

Любой веб-сайт состоит из отдельных страниц, написанных на 'великом'. HTML. Ну то есть, нажимаю на большую кнопку "Главная" или "Корзина", вы просто бегаете с одной страницы на другую. Т.е. это не просто кнопка, а ссылка на другую страницу.

!!!Далее некорректное сравнение
Можно сравнить "Проводником" в Windows, есть одна папка, вы открываете видите, что в ней находится, неприличные видео или рабочие документы, открываете другую папку, а там другие папки, которые вы можете тоже открыть.
Это пример файловой системы Windows
Это пример файловой системы Windows

У нас есть главная страница нашего воображаемого сайта(Это корневой раздел - Локальный диск С: ), мы можем перейти, по ссылкам, на две других страницы, допустим мы перешли на страницу 'Мои документы', тогда наш путь будет - C:\Мои документы.

Теперь более жизненный пример. Мы зашли на поисковик Яндекс, тогда наша ссылка будет
https://www.yandex.ru/

HTTPS - это протокол с помощью которого мы общаемся
WWW - указывает, что мы общаемся по глобальной сети
yandex.ru - это главная(корневая) страница сайта яндекс

Мы захотели найти нужную нам pic., тогда мы щелкаем по кнопке 'Картинки' и теперь можем исткать, но если мы взглянем на адрес сайта, то увидим
https://www.yandex.ru/images/
Теперь к нашему яндексу приписалось /images , т.е. мы зашли в новую
папку.
Надеюсь я понятно объяснил, но если ничерта не понятно, пишите в комментариях, будем думать вместе.

Вот пример сайта www.chitai-gorod.ru 
Много кода скрыто, т.к. общий его объем около 9к строк, и это не предел
Вот пример сайта www.chitai-gorod.ru Много кода скрыто, т.к. общий его объем около 9к строк, и это не предел

На самом деле я вас обманул, помимо HTML и CSS есть ещё JS, но он пока не нужен, по крайне мере на начальном уровне, пока не узнаем больше о первых двух.

Ну чтож, HTML - это HyperText Markup Language (язык гипертекстовой разметки). Это язык разметки документов во Всемирной паутине (World Wide Web, WWW). HTML — это стандартизированный язык, позволяющий составлять форматированный текст. Браузер интерпретирует его и отображает на экране элементы веб-страниц.

Ну для начала, html - это некий контент облаченный в определенный ТЭГ, и вот эти тэги позволяют крутить текст как нам надо.

Теперь тэг.
Тэг - специальное(служебное) слово, заключённое в <> - треугольные (угловые) скобки. Тэги бывают(чаще всего) парные <ТЭГ>Контент<ТЭГ/> и непарные <ТЭГ некая информация>, этой информацией может быть, к примеру, ссылка.

В следующей статье перейдем к практике, но прежде, надо узнать, что нам необходимо для "программирования" на HTML.

Чисто теоретически, можно и блокнот использовать, да почему теоретически, и практически тоже, только это не удобно. Многие советуют Visual Studio Code, но как по мне он слишком тяжёлый(во всех смыслах), особенно для начинающего. Недавно я познакомился с редактором Atom, он мне так понравился, вообщем, теперь я им пользуюсь, тык чтобы скачать.

Вот так выглядит мой Atom
Вот так выглядит мой Atom

Но к сожалению он довольно-таки бесполезен без плагинов, вот те, которыми я пользуюсь:

  1. autoclose-html
  2. highlight-selected
  3. linter
  4. project-manager
  5. atom-beautify
  6. atom-clock
  7. atom-icons
  8. busy-signal
  9. intentions
  10. linter-ui-default
  11. open-in-browsers
  12. pigments
  13. Emmet (но для него еще рано)

Так-же хорош редактор Sublime text.

Пока множество буковок кончились, спасибо что дочитали до конца.