#старт #it #айти #HTML

Я создал папку для этого видео (можно любое название).

Зашел в нее в программе Giga IDE и создал структуру пригодную для многих проектов без сервера.

В любом сайте есть CSS файл. Они лежат в папке css.
Папка js для JavaScript файла.
Папка src для папок img и video.

Все эти папки для удобного хранения информации для сайта.

Далее в папке css создается файл каскадной таблицы стилей.

В папке js мы создаем файл для скриптов.

В базовом уровне (вне этих папок, но в папке проекта) создаем файл index.html

Это и есть наш будущий сайт.

Пока создаем наш базовый шаблон написав там восклицательный знак и за ним сразу нажав ТАБ. Программа GigaIDE автоматический создаст основные элементы страницы в файле index.html.

HTML - это язык гипертекстовой разметки. Расширение тоже такое. Эти файлы спокойно просматриваются в браузере.

Как Вы видите в основном заполнен блок head - это голова сайта.

В нем есть кодировка для символов utf-8 - это чтобы символы правильно отображались и читались.

Есть тег с информацией для адаптивности под мобильные устройства.

Есть тег title для имени вкладки в браузере. Его мы изменим.

Есть строчка для браузера ebge.

Добавляем тег скрипта с ссылкой на файл. Можно писать и между тегом открывающим и закрывающим, но только что-то одно.

Тут важно понимать. Есть два вида тегов.
Одиночные и парные. Одиночные они потому что не нужно маркировать информацию как между парными. Парные имеют открывающий и закрывающий тег. Теги должны быть вложенными - это значит каждый тег внутри какого-то тега (парный) должен быть закрыт там же.

То есть так нельзя!

<p> text <span></p></span>

Тег span в примере выше без контента. Но закрывать его нужно внутри тега p

Кроме этого тег для скрипта ставим так чтобы он работал после загрузки контента. То есть после пустого тега body. Потому ставим его под body.

Добавляем CSS файл по аналогии со скриптом с припиской о типе в разделе head.

Эти стили позже нужны будут нам для дизайна нашей страницы.

Какой тег для чего и как их правильно понимать подробнее на сайте проекта doka guide (открытая документация). Данный сайт не относится к этому каналу, но он поможет понять тему глубже.

https://doka.guide/html/

Кстати строчка про тип документа на самом верху дает браузеру подсказку про язык.

Не стесняйтесь заглядывать в справочник если что-то забыли. Материала много и не каждый все сможет запомнить.

Шаблоны лучше сохранять при тренировках и не боятся экспериментов.

Наш сайт пока пустой ведь мы занимались обустройством файловой системы. Сами файлы пустые включая body в index.html.

В следующих видео и текстах - про создание меню. И вообще про блок шапки сайта.

Бонусом будет скрипт для прописи вашего имени проекта в любом удобном месте.

Мы изучим как работает CSS и классы там. Как JavaScript помогает убрать лишнюю работу.

До следующего видео!