всем привет, меня зовут Лев и я хочу научить вас делать сайты, зная всего базовые теги и научу вас всему тому, что умею сам
первым делом надо скачать программу visual studio code по этой ссылке https://code.visualstudio.com/download
далее создаем папку где будут храниться наши все фалы для сайтов; в этой папке для данного проекта я создал папку site1. если будут изображения на вашем сайте, то создаем в этой папке папку под названием img (названия внутри вашей папки необходимо называть правильно, чтобы структура была понятной)
далее все необходимые изображения добавляем в вашу папку img
далее переходим в программу visual studio code, пропускаем приветствие, создаем новый файл, вверху в поисковой строке выбираем язык HTML.
пишем ! и нажимаем таб. должно получиться так:
в строке 6 вместо слово Document пишем свое название (данная строка внутри тега title отвечает за название вкладки)
я назвал свой сайт "печенье" (у вас может быть все что угодно, необязательно тоже делать про печенье), затем переходим к тегу head, затем нажимаем enter и получаем свободную строку, где необходимо написать тег header:
в теге header пишем то, чтобы мы хотели видеть в шапке своего сайта
после переходим в пустую строчку между тегов body и пишем там <div class="container"></div>. перед закрытием тега enter, затем там пишем основную инфу, которая будет у вас на сайте. если вы хотите посмотреть результат, который пока что получается у вас, то нажимаем f5, сохраняем проект под названием index.html !!!!! (это очень важно), после переходим в vs снова нажимаем f5, выбираем браузер (в моем случае это гугл)
получается сайт очень скучным, но сейчас мы сделаем так, чтобы текст был красиво отформатирован
в шапке (вкусные печеньки) пишем свой div и словосочетание обращаем в тег и получаем: <b>вкусные печеньки</b>. в выбранном нами браузером нажимаем ф5 и смотрим как изменился текст:
чтобы основной текст не прилипал к заголовку, то после тега <body> пишем несколько раз тег <br>, затем добавляем или убираем по тегу, обновляем страницу, пока не получим желанный результат:
также чтобы текст не был как одним сплошным, то стоит его разделить на подзаголовки с помощью тега <p></p> во внутрь тега оборачиваем текст, который хотим сделать отдельно от основного, и получаем:
обновляем нашу страницу и получаем:
выглядит уже получше. затем, если у вас есть какой-либо список как у меня, то можно его сделать либо нумерованным, либо маркированным. я сделаю маркированным. для этого используем тег <ul></ul> в этот тег обращаем весь список, тем самым создавая сам список. после этого в теге ul надо создать еще оидн тег <li></li>, непосредственно помещая каждый элемент списка в этот тег. код должен выглядеть так:
а на сайте получаем такое чудо:
также можно использовать тег <p> для создания отступов. также я обернул мини-заголовок в тег <i></i>, чтобы текст был курсивом
теперь перейдем к добавлению изображений на сайте. добавлю картинку печенья в конце всего текста.
для этого используем тег <img src="" alt="">. так, в кавычках в пункте src надо писать путь к файлу (т.е. к картинке), а пункт alt отвечает за то, что если система будет вводить, если не найдет или не загрузит изображение (все картинки загружаем в формате .png, иначе оно попросту не загрузится)
в src мы пишем путь к файлу и получаем: <img src="../site1/img/1647728788_26-amiel-club-p-kartinki-pechenek-28.png" alt="">
с помощью ../ мы ищем нашу папку, затем папку img и в этой папке находим нужное изображение
переходим на результат:
если же у вас картинка слишком огромная или маленькая, то это можно легко исправить и даже сделать некий дизайн изображению
первым делом нормализуем размер: после alt="" продлеваем строчку и пишем width="150px" height="150px". у вас могут быть другие значения
получаем результат:
уже гораздо лучше. и так далее. также если ваш основной текст длинный (опять же как у меня), то можно настроить его ширину. для этого обернем нужный текст в тег div и добавим любой класс. я добавил класс maincontent
должно получиться так:
затем как и в настройке изображения мы продлевали строчку и вписывали свои значения, так же и тут - пишем width="800px", переходим на результат, обновляем страницу и видим то, как блок с основным текстом стал не до края экрана.
итак, за этот пост вы научились написанию сайта с нуля, узнали часть базовых тегов для создания сайта, форматировать изображение, список и тд
спасибо за просмотр, надеюсь, что вы научились всему тому, чему я вас научил в этой статье, в следующей статье будет форматирования кода и изучение новых тегов. до встречи!