Кол-во просмотров с 24.01.24г. :: 121
Доброго времени суток. Я вроде смотрю, все подошли. Доброе. Доброе утро. Ну, продолжаем. Я сегодня хочу, если получится по времени успеть, Мы сегодня проговорим про вот такой вот блок DIV, называется. Это, ну, можно сказать так, такой основной, главный строительный блок сайтов. Про него поговорим немножко, что называется, поупражняемся, дальше продвинемся по пониманию того, как у нас строится сайт, как мы это делаем. понятно, что вот эта штука, которая здесь написана, это tag, то есть нам нужно привыкнуть к некоторой новой лексике. вот этот tag div, а то, что внутри этого tag div, мы туда помещаем какие-то как внутрь некоторого блока, как внутрь некоторого ящика, мы туда будем погружать то или иное содержимое нашего сайта. Но с помощью вот этих вот блоков div, мы будем нарезать наш сайт. То есть мы будем создавать нарез. В частности, для того, чтобы нам страницу нашего сайта превратить в финансовый отчет, нам необходимо эту самую страницу нашего сайта тоже как-то вот ее нарезать на вот эти вот самые Excel'евские ячейки. В кавычках, естественно, Excel'евские, да? То есть по аналогии, как вот в Excel'е, так и вот необходимо здесь эту нарезку понять, как ее хотя бы делать, да, как ее собствовать. уже более-менее понятно, то есть если у нас здесь идут вот эти вот ячеечки, в которых появляются все или иные цифры, там результаты каких-то расчетов, то понятно, что нам тоже нужно вот эти вот прямоугольнички, прямоугольные какие-то вот такие блоки иметь на нашем сайте. Ну а как это делать? Вот надо в этом во всем разобраться. Да, причем надо же это сделать так, чтобы это как-то тоже было удобно читаемо, чтобы это было красиво, в понятном смысле слова, то есть с точки зрения использования этой информации. Для этого нам в помощь вот этот вот самый TagDeep. Вот мы его как раз поизучаем. Это у нас будет то, что касается вот этой вот второй части, ну, там, технической, писать сайт. Мы находимся сейчас вот здесь. И потом я бы хотел все-таки опять возвращаться к этим вопросам, философски, так скажем, связанным с управлением. Потому что нам нужно понимать, какую цель мы хотим достичь. Потому что все равно, когда вы начинаете переходить онлайн, то, так или иначе, где-то на заднем плане всё равно возникает вопрос. А зачем тут мучиться вот в этом самом онлайне? Ну, если, в принципе, Excel работает. В принципе, это такой нормальный вполне вопрос. Есть даже у нас такая поговорка в России – «Лучшее враг хорошего». Зачем что-то ещё городить, если, в принципе, ну, вот оно работает, и во многих компаниях этот самый Excel работает, а во многих компаниях вообще там ставят дорогостоящие ERP-системы, потом из них вытаскивают данные, так же как из 1S, вставляют в Excel и там создают отчет. Есть такое? Ну, есть, да. Поэтому нам, конечно же, необходимо все-таки проговорить и как-то более конкретизировать те цели, которых мы хотим, вообще говоря, здесь достичь. Иначе получится курс, ну, ради курса просто познакомиться с тем, как можно там на сайте что-то делать. Ну, как бы, так скажем, это можно и в интернете прочитать, да, вы скажете. Вот. Ну, это действительно, это будет правда. Поэтому нам нужно понять ценность, да, которую мы хотим приобрести, идя вот в эту сторону, да, онлайна и отказываясь от Excel, грубо говоря. Вот. При переходе между технической частью вот этой философской, я постараюсь вот в это окно, вы сегодня все вместе как бы в сборе, я постараюсь сегодня это сформулировать, ну там вот то, что я хотел рассказать про некоторые организационные изменения, вот я внутри в окошечко постараюсь это вклинить. Вот. Ну а сейчас мы переходим вот к этому самому дикту. Ну, давайте мы вот что сделаем, то есть вот у нас записано здесь заголовок, компания OOP++. И посмотрим, что означает tag div. Да, кстати, еще давайте я небольшую остановочку сделаю. Смотрите, если есть какие-то вопросы по технической реализации, если кто-либо из вас начал вот эти вот домены создавать, Ну, во-первых, хотелось бы понимать, у кого уже есть домен, и у кого нет, у кого какие-то проблемы, если что, вы задавайте эти вопросы, потому как мы будем делать следующее. Вот этот вот файлик, который мы сейчас создаем, индекс.h имеет, ну, я его выложу, естественно, вот как вот обычно мы в материалах, вот здесь металлички, да, вот тут мы это выкладываем, вот. и его можно будет скачать ну и в принципе начать его там использовать да ну понятно что для себя вы можете вот эти вот названия там что-то еще менять да и посмотреть поиграться и так далее но в принципе желательно чтобы вы начали это как бы делать ну понятно это прям не является жестким до необходимости так пока никто ничего не говорит, у всех все хорошо. ладно, идем дальше. значит, пишем div, вот этот блок div. мы запишем вот так вот блок div, и внутрь этого блока мы вот как раз-таки поместим вот эту вот самую компанию. давайте вот так вот делаем. и здесь, соответственно, пишем Закрытие вот этого блока. Посмотрим, что сейчас, как у нас сейчас будет выглядеть. Я сохраняю. Сохраняем и идем сюда. Перейду в наш. Я выхожу на сервер, в корневой каталог сервера и иду на наш сайт. а эти четыре пин и здесь мне нужно выйти учение современно это неделя так или один индекс я копирую окей заменить и сейчас смотрим что у нас там заменив вот мы видим что а у нас бы Мы видим, что у нас здесь просто вот это вот расстояние увеличивает. То есть получается так, что сам по себе вот этот вот блок дифт, он по умолчанию, получается, производит перевод текста на следующую строчку. То есть это вы сейчас увидите. то есть если я теперь уберу вот этот вот самый br, то есть br вот это вот, вот этот тег, это есть принудительный перенос на следующую строчку. если мы просто пишем block diff, получается так, что мы можем br не использовать. то есть br, вот этот вот br, который здесь у нас был, он получается еще делает дополнительную строчку, то есть еще один перенос. я вот сейчас сохраняю, копирую. Вот мы посмотрим, что будет. Ну вот, в принципе, мы вернулись к тому, что было. То есть мы убрали вот этот BR, принудительный перенос стратегии, и у нас теперь вот эта вот самая запись, компания OOP++, она у нас находится вот в этом внутри блока GIF. Вот так вот, когда мы смотрим, ну, в принципе, ничего не понятно. Нам необходим какой-то дизайн, то есть стилизация. Что такое слово «стиль»? Стиль – это совокупность атрибутов, которые сопровождают объект, атрибутов внешних, то есть какие-то цвета, закругления, выделения гранит, тип шрифта, цвет, какие-то отступы, размеры и так далее. То есть нам необходимо еще научиться какому-то минимальному дизайну, то есть оформлению, стилизации. При сайтостроительстве это называется стилизация блоков или стилизация тегов, стилизация каких-то вот этих областей сайта. Как я уже говорил, я буду обращаться к поисковику. Для чего? Для того, чтобы лишний раз вам показать, ну, по крайней мере, как, например, я сам лично, допустим, находил и, в общем, обучался всей вот этой вот сайтостроительной технике. То есть меня меньше всего интересует то, каким образом создавать сайт. Но минимальные знания для того, чтобы создать финансовую модель, ну они необходимы. Поэтому сейчас мы фактически занимаемся тем, что мы познаем какие-то минимальные знания, Обучаемся минимальным каким-то вещам, которые необходимы для того, чтобы создавать сайт. Понятно, что ребята прошаренные, которые на этом собаку съели, которые занимаются именно непосредственно созданием сайта, они это более изящно делают, более какими-то современными методами и так далее. Мы сейчас научимся базовых вещам для того, чтобы просто различать хотя бы. То есть если вы, например, заходите в Excel, ну понятно, что вот Вот эти вот ячейки, да, они имеют жирный шлейф и серенькую заливку. Здесь вот еще есть подчеркивание, да. Здесь у нас синенькая заливка, здесь у нас какая-то красненькая звездочка стоит. То есть вот это оформление, оформление, минимальное оформление для того, чтобы нам различать, да, что где находится и ориентироваться в пространстве сайта по каким-то внешним признакам, вот эту, это минимальная стилизация сайта, вот это нам нужно по-любому как-то с этим познакомить. поэтому мы можем написать как, давайте напишем так, как прописать стиль блока, блока, ну прямо напишем дип, да, ваш кемерь, да, вот как прописать стиль блока дип, ваш кемерь, правильно, вот прям наш называется вопрос. А пока что вот с него начнем. Как задать стиль с помощью CSS? Признается, наверное, HTML-текст. Давайте вот сюда зайдем. Первое, что мы рекомендуем сделать только в случае, когда нет... Так, синтаксис, да, вот мы можем прям посмотреть, как вот здесь. Вот смотрите, вот он, блок дикт идет. И вот здесь мы написали, как у нас, вот этого всего у нас нет. у нас просто есть вот это вот левая угловая скобочка мы написали гип потом мы закрыли и потом у нас есть закрывающий здесь вот внутри вот мы использовали так и чтобы сгруппировать да вот видите мы из вот здесь вот результат да то есть вот это вот видите вот так же здесь доктайп html html head да вот title И так далее. Примерно вот то, как вот здесь вот это вот все прописано, вот если вы сейчас вот сюда вот обратите внимание, вот эту вот всю вот эту разметку, как она здесь вот оформлена, она ровно такая же, как и у нас. Вот он DogType, HTML, Head, Head, Body, Body, и так далее. Вот он GIF. Что у них просто внутри этого дива, что-то другое написано, но суть как бы в следующем. Видите, вот здесь вот такую вот запись. Вот давайте мы ее прямо вот возьмем, вот эту запись выделим и просто ее скопируем. Давайте посмотрим на результат. То есть вот результат вот какой. То есть здесь возникает вот такой вот блок, вот этот самый дифф, вот этот блок, который, как мы видим, он не на белом фоне, а он залит зеленым фоном. давайте вот если мы это скопируем