Web development

Канал принимает донаты

Нажмите на кнопку, чтобы отправить донат и помочь каналу

Дамы и Господа.

По видео дальше будет задержка с выходом.

Дел много и при этом хочется лучше раскрыть тему CSS.

Не просто готовый файл показать, а принцип работы.

Потому для людей не желающих ждать чуть выше есть Doka Guide. Я обязательно выложу CSS Вам, но значительно позже!

Здравствуйте.

Вот и новые видео с легкой задержкой. Всего будет 3 части посвященные верхней части сайта или по другому header элемент. Он расположен в самом верху элемента body обычно и в нем часто лежит меню и логотип компании. Логотип можно сделать картинкой или просто названием. На больших сайтах лучше делать ссылку о которых мы поговорим чуть ниже.

Из этого следует, что в первой части видео мы сделали меню и названием в данном случае этого канала.

раздел меню - это навигация и обозначает его тег парный nav. В нем обычно размещают элемент ul - не маркированный список. Вы увидите как он выглядит без стиля css на чистом html. ul тег тоже парный как и сами его элементы li - list item, а в них уже мы кладем сами ссылки a (anchor). Ссылки тега a и сделали веб таким как мы его знаем с возможностью перейти в любую часть сайта, на другой сайт или к нужному элементу. У многих тегов есть атрибуты и тег a не исключение. Его основным атрибутом будет href или гипертекстовая ссылка по сути где после этого ставим равно и в кавычках двойных пишем адрес или хештег нужного элемента. Ссылки внутри сайта должны быть относительно html файла с ними. Можно указать полный адрес любой доступной веб страницы. С переходом к нужному элементу нужна цель куда перейдет пользователь или адрес элемента. Про переходы позже. Учтите, что два раза UL список - это не ошибка. В нашем случае мы сделали hover меню и применив стили спрятали подменю во втором ul до наведения мыши. Hover так же позволяет открывать меню на мобильном по тапу пальцем. Тут важно сделать удобный размер под тап.

Заготовка под название пишется в теге заголовка первого уровня h1 - это самый важный заголовок страницы. Советую не забывать про слоган в месте размещения вашего имени проекта. Слоган можно разместить в теге p, но сами текстовые элементы обернуть в тег div. Попробуйте после повторения кода сделать это в отдельном файле (копии).

Позже заголовок станет доступен и Вам после написания части на javaScript. Пока он у Вас будет пустой или можете вписать туда что-то. Но это будет не совсем удобно. Порой мы пишем название нашего проекта много раз и эту работу будет делать за нас скрипт в 3 части.

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

К слову просмотр будет удобнее на ПК с веб версией МАХ или программой.

Вообще кроме header есть еще основная часть сайта main и подвал footer. Они уже написаны, но пустые для будущих видео.

До нового видео!

#старт #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 помогает убрать лишнюю работу.

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

Здравствуйте.

Перед созданием любого проекта стоит обдумать зачем нам вообще сайт? Что из себя представляет сайт и какие задачи он решает?

Сайт - это страница в интернете существующая на сервере с айпи адресом и именем. Именно так его и находит поисковик. Отсюда вытекает, что сайт позволяет разместить информацию в интернете.

Он так же позволяет сделать это удобно при грамотном интерфейсе. Сайт позволяет настроить выдачу его по определенным поисковым запросам.

Вы возможно скажете "зачем Нам это? Сейчас же есть Искусственный интеллект" и отчасти они будут правы. Но при создании сайта Вы будете учить языки для их написания и понимать как они работают. Что позволит Вам как лучше работать с ИИ, так и вносить правки или делать сайты даже лучше чем ИИ при упорстве и труде.

То есть сайт даст нам удобно размещенный контент с поисковой выдачей нужной нам в системе интернет. Содержания вебсайта не такое дорогое сейчас и позволяет потратив мизерную сумму держать в интернете что угодно (в зависимости от навыков и тарифов хостинга. И конечно при соблюдении законодательства).

И выходит это идеальный инструмент для демонстрации чего-то во всемирной паутине. Пользователю легче найти нужные ему товары или услуги. Или просто почитать что-то интересное.

На этом и закончим продумывать идею. Мы будем делать одностраничный сайт посвященный этому каналу Web development (webd) для упрощения его нахождения в сети интернет и получению подписок. Конечно Вы сможете наблюдая за постепенным созданием страницы для этого МАХ канала создавать свой собственный ресурс к любому месту в сети интернет или из реального мира.

Теперь важная часть любого проекта - задачи и желательно время на их выполнения.
Мы будем разбирать все постепенно от html и заканчивая обычным javaScript. Но я не буду писать Вам про все и буду добавлять материалы. Мы будем изучать сами элементы веб сайта от самого начала страницы и следовательно затрагивать лишь то, что будет там использовано. Следующие материалы будут по созданию файловой системы сайта. Созданию страницы стартовой в giga IDE. Написанию каркаса блока сайта с меню и его стилей. Я буду постить в крайнем случае раз в 3 дня. Этого хватит чтобы Вы изучили видео и текст, посмотрели дополнительную информацию и повторили мое или сделали свой вариант

До скорых материалов!

Здравствуйте, Уважаемые читатели!

Раз Вы тут - Вы скорее всего решили начать изучение IT. Я буду выкладывать короткие видео с разным кодом и прикреплять документы. Все абсолютно бесплатно. Разве что Вы хотите отблагодарить автора. Но перед изучением по написанию кода и иным вещам Мы с Вами установим Giga IDE для его написания. Учтите! Giga IDE вполне хороший софт, но в виндовс из-за снижения репутации от пользователей может писать про проблемы. Устанавливайте только с официального сайта gitVerse! Ссылка: https://gitverse.ru/features/gigaide/desktop/download/