Часть № 2
В процессе данной статьи мы рассмотрим основные моменты, которые необходимы для написания HTML кода.
И так начнем, первое, что надо уяснить и запомнить – это структуру самой страницы. Она выглядит на рисунке.
В теге <head>…</head> размещаются так называемые мета теги, которые при загрузке страницы мы их не видим, но через них мы задаем функционал роботам, компьютеру и т.д. Примером служит <title> …</title> в котором мы указывает краткое описание страницы (или сайта в целом). Например:
<title> Официальный сайт адвоката</title>;
<meta property="og:locale" content="ru_RU"> указывает на язык, который используется на странице;
<meta name="description" content="…….">, а тут описывается сама деятельность, т.е. допустим «Адвокат по уголовным делам», «Как приготовить очень вкусный суп» и т.д.;
<link rel="stylesheet" href="CSS/main.css"> - и подключаем файл main.css с написанными нами стилями.
О мета-тегах чуть позже, они нужны конкретно перед размещением сайта на хостинг (об этом тоже чуть позже).
А вот далее мы идет к тегу <body>…</body>! И вот в нем происходит сама магия (но не самая основная) создания скелета страницы. В частности, самый основной элемент – это <div>…</div> элемент. Его надо знать наизусть. Это парный элемент, т.е. его надо закрывать (</div>), блочный. Иными словами – это некий контейнер, который позволяет группировать все заложенные в него элементы и изменять их в дальнейшем через так называемые стили. Т.е. изменять размер и стиль текста, располагать, допустим, картинку в любой части экрана, делать анимацию и т.д.
В него помещаются (я перечислю самое основное):
<h1></h1> … <h6></h6> - заголовки;
<p></p> - параграф, где располагается сам текст страницы;
<span></span> - является основным строковым контейнером, он может использоваться для стилизации текста, т.е. фактически в нем можно располагать сам текст (как делаю я <p class="text_p"><span>… сам текст … </span></p>);
<img src="Foto/foto-2.JPG"> - располагаем картинку, фото, графику. В src="" прописывается путь к картинке.
Смотрите, чтобы не писать к каждому элементу код для стилизации, указывается класс <p class="text_p">. Название класса придумываете Вы сами, но пишите все на английском языке. В main.css файле мы будем стилизовать их.
И так, запомним раз и навсегда, что в HTML - это либо блоки (где размещается Ваша информация, картинки и т.д.), либо строки.
Погнали дальше, переходим к самому интересному. Помещаем текст <h1 class="data_h">Привет всем! Вы на моем канале</h1> (я сразу добавил класс) и <p class="data_p">Здесь распологается сам текст, который рассказывает Вам, что программирование это очень просто!</p>. Смотрим.
Далее усложняем. Добавляем еще текста <p class="data_p2">"Это два разных текста и я хочу его расположить справа и уменьшить!"</p>, обворачиваем все это в <div class="content">, а внутри его текст еще раз обвернем в отдельные <div class="content_h">, <div class="content_p"> и <div class="content_p2">. Не забываем их обязательно закрывать.
Отлично, для наглядности давайте зададим нашим контейнерам разные цвета для наглядности. Создаем наш файл main.css и прописываем внем:
1. начиная с точки . и указываем класс нашего контейнера . content_h,
.content_p и .content_p2;
отлично, теперь открывает скобки { вот такие и там указываем следующее свойство background: (задает фон блока) и задаем цвет #f0cd6e, незабываем ставить ; после каждого свойства;
Смотрим, отлично.
Как мы видим все блоки располагаются последовательно друг за другом. Я хочу чтобы они были в колону и располагались на одном уровне. Все пишем в CSS файле, у родителя (самого первого div) задаем свойство flex. Ухххххх. Сейчас сама магия начнется. И так, обращаемся к родителю .content и указываем display: flex, и как мы хотим расположить их на экране justify-content: space-around. И задаем отступ для наглядности каждому блоку - margin: (это внутренний отступ) и я хочу, чтобы отступ был по кругу (сверху, справа, снизу, слева) по 10px.
Отлично. Я очень противный (да такой я) и я хочу (как в сказках «Повелеваю»), чтобы текст внутри контейнеров были по центру. Ага, такой я. Ок. пишем в родительском контейнере text-align: center;. И хочу, чтобы в контейнере который по середине текст был прижат по правой стороне. Але опппп. Теперь уже обращаемся к этому блоку content_p и говорим (эй браток а ну ка сделай ко мне вещи))))))))) text-align: end;.
Теперь Вы понимаете, что сложного ничего нет!!! В следующем уроке мы продолжим изучать flex элементы. Это очень увлекательная процедура. Рассмотрим z-index, интересная фигня, я скачаю несколько картинок и на них покажу, как можно сделать вещи.
Если Вам понравилась статья пожалуйста поставьте лайк и подпишитесь на меня. Если же не понравилось тоже поставьте лайк и подпишитесь (шучу).
