Всем привет, мы продолжаем с вами изучать программирование! На прошлом занятии мы с вами кратко изучили среду разработки, основной шаблон и кратко главные теги шаблона, сегодня мы с вами изучим и отработаем на практике теги форматирования. В крации это теги которые отвечают за придания тексту разнообразного внешнего вида. Итак начнем с тегов <H> а всего этих тегов 6 и пишутся они следующим образом <h1> <h2> <h3> <h4> <h5> <h6> и естественно тег <h1> будет выделять текс и шрифт будет крупным, а в свою очередь тег <h6> будет самым маленьким из 6 выше перечисленных. А теперь давайте откроем наш с вами документ index.html, если он закрылся по какой-то причине в саблайме, то просто нажмите на файл правой кнопкой и выберете открыть в саблайм! А теперь надпись которая у вас написана в теле сайта поместите в тег <H1> по формату "<h1> Ваш любой текст </h1>" ну или как на картинке с низу
А теперь, соответственно сохраните ваш редактированный код, откройте файл в браузере и посмотрите на изменения!
Соответственно понижая число в теге <h> вы будете уменьшать сам шрифт, но не в коем случае не надо думать, что этот тег отвечает за шрифт, это абсолютно не так, шрифты и другие и другие манипуляции с размерами и стилями регулируются различными возможностями, а у тегов <h> есть свои предназначения, которые грамотному программисту в корне запрещено игнорировать. Часто замечаю что тегу <h1> уделяют мало внимания или вовсе поверхностно трактуют этот трек, хотя опытные программисты или сеошники (от аббревиатуры SEO, что простыми словами система продвижения) знают, что этот тег первого уровня используется для написания заголовка страницы или сайта, а по заголовку поисковые роботы, так называемые пауки, ищут эту страницу и если тег <h1> используется не правильно или с ошибками, то сайт не появится в топах выдачи по запросам, а соответственно не будет работать по назначению, именно по этому, не стоит использовать на странице больше 1 тега <h1> а в нем нужно указывать конкретную информацию про страницу, но на данном этапе не стоит на этом заострять внимание, нужно просто запомнить это, а уже в последующем вы поймете как усваивается информация и постепенно вы все начинаете понимать. Так с тегом <h1> разобрались, а с остальными тегами этой ветки, попрактикуйтесь сами, так же это будет домашним заданием. Идем дальше. Попробуйте написать простым текстом какой-нибудь стих, скажем, на 4 строчки. Как сделал я ниже
Вроде бы все правильно и красиво расположено, давайте сохраним и посмотрим что же получилось в браузере.
Все это потому, что текст в коде пишется последовательно и браузер не распознает наши пробелы, но для этого, есть несколько тегов. Например тег <p> он же "параграф" или тег <br> который не требует закрытия , но тут есть нюанс, тег <p> делает большой отступ между строками, а вот тег <br> более менее читабельный. Давайте используем их, оба, по формату <p>Текст</p> и <br>текст, но в данном случае, его надо ставить в начале каждой предполагаемой строки, как в примере нижу, ну и заодно уменьшим первую надпись.
Вот такой код у нас получился, обратите внимание на все изменения в том числе на тег <h3>, да я решил для удобства уменьшить его, а теперь сохраним и посмотрим в браузере что у нас с вами получилось!
Достаточно приятно у нас получилось, и теперь текста в строчку, но согласитесь, что второй вариант более менее выглядит презентабельной, но вы попрактикуйтесь с другими текстами это необходимо для запоминания и набивки руки.
Совсем забыл сказать, теги можно использовать одновременно, к примеру, вы захотели чтобы в стихотворении выше, вот и пятница были жирным шрифтом, вторя строчка под наклонку или курсивом, а третья подчеркнута, вообще без проблем, за это отвечают теги <i> курсив или наклонка <b> выделение жирным шрифтом <u> подчеркивание и они все требуют закрытие, чтож давайте попробуем их испольpовать, если еще затрудняетесь самостоятельно, то используйте пример который я оставил вам нижу в картинке.
Обратите ваше внимание, что тег расположены внутри другого тега, так можно с разными миксовать, но еще более внимательно присмотритесь к тегам <b> он затрагивает только ту часть текста, которую мы хотели выделить, но слово настала, мы не стали затрагивать, таким образом, оно не было подчеркнуто. Так двигаемся дальше. Предположим, что вы захотели написать формулу 2+2 и вторую двойку записать в квадрате, есть отличный тег <sup> который отлично поможет вам справится с этой задачей, давайте попробуем это реализовать на практике
Вот как это выглядит, если правильно использовать, а теперь давайте посмотрим что получилось
Мы возвели 3 в квадрат и так можно использовать и в другом ключе, но у этого тега есть так же зеркальное отличие, например, что если вы хотите записать химическую формулу воды??? Как быть, тут к нам на помощь приходит тег <sub> разница в одной букве, но результат другой, не буду показывать вам пример кода думаю вы и сами разберетесь как это написать, по принципу выше, а просто выложу результат!
Ну, вот и первые результаты, на наших с вами сайтах уже есть наполнение, которое вы сами сделали. Это уже результат, вы прошли два занятия, а теперь я бы хотел чтобы вы вспомнили ваши первые мысли, как только вы начали и сравнили их с тем, какие мысли сейчас. Это уже не кажется чем то страшным и запредельным, да, мы в самом начале изучения, но по чуть чуть, вкладывая труд, вы и не заметите, как станете высоко квалифицированными программистами разработчиками, а чтобы ускорить результат, я попрошу вас повторить все что мы изучили и проявить фантазию, будет хорошо если поделитесь скриншотами в коментах, со следующего занятия я буду давать задачи, которые нужно будет решить. На сегодня все, хорошего времяпрепровождения!!!!