HTML/CSS, Урок 2

Живой_мертвый · Nov 28, 2018

И так здрасте, или как говорят испанцы

Bievenidos a la casa que está libre de maldiciones.
Добро пожаловать в дом без проклятий.

Сегодня на повестке 2 сука урок. Таки товарищи начнем.

И так. Помните код который был в конце прошлого урока, кста вот он:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Разберемся что здесь за чертовщина твориться.
<!DOCTYPE html> говорит веб-серверу что сайт сделан на версии HTML-5. Если что, версия самая последняя на которой будем писать
<html></html> Главный контейнер веб-страницы.
<head></head> Тут пишется подключаймые файлы, мета-теги и остальная страшная хуйня.
<meta charset="utf-8"> мета тэг обозначает что кодировка нормальная, utf-8 капитан.
<title></title> Определяет заголовок документа
<body</body> Тело для сайта, тут пишется весь код

Теги, мать твою за ногу(не в обиду ветеранам)

Теги как основа HTML-страницы
Создание web страницы с помощью HTML осуществляется с использованием тегов. Каждый тег содержит в себе определенный элемент. А все вместе они образуют именно ту страницу, которая отображается в окнах браузеров. Это и есть те самые основы HTML. Давайте поговорим о них более подробно.
Любой тег, вне зависимости от его назначения и месторасположения, размещается между символами < и >, расположенными в начале и конце тега, соответственно.

Пример: . Он парный и обозначает абзац

Парные теги
Теги бывают двух видов. К первому относятся парные, включающие в себя две составляющие, от чего и получили свое название. Эти составляющие называются открывающимися и закрывающимися тегами. Закрывающийся тег отличается от своей пары наличием символа /, который ставится сразу после <.

Пример:
Абзац

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

Пример:
Строка - перенос на следующая строка

Атрибуты HTML-тегов
Также в разговоре об основах HTML нельзя не упомянуть об атрибутах тегов. Для определенных тегов использование атрибутов не являются обязательным, но вполне допустимо. А в некоторых случаях – они нужны однозначно.

Примером такого случая может быть тег <img>, который предназначен для того, чтобы вставлять на страницу изображение. Обязательным атрибутом для данного тега является src, с помощью которого можно указать, а где же именно находится картинка. Это делается для того, чтобы браузер смог открыть изображение. Если адрес картинки будет указан без атрибута, изображение на странице не отобразится.

Как правило, в большинстве случаев теги и атрибуты прописываются в HTML вот так:

<имя-тега атрибут1="значение1" атрибут2="значение2" …>
У тега может быть как один, так и несколько атрибутов. Ниже вы можете видеть примеры.

HTML:

<p class="text">АБЗАЦ</p>
<img class="logo" src="logo.jpg" width="200px">

HTML:

<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <title>Урок 2</title>
    <!--Подключаем css-->
    <link rel="stylesheet" href="css/main.css">
    <!--Подключаем гугл шрифты-->
    <link href="https://fonts.googleapis.com/css?family=Black+Han+Sans" rel="stylesheet">
</head>

<body>
    <!--Заголовки-->
    <h1>Flex</h1>
    <h2>Chill</h2>
    <h3>No Crinj</h3>
    <!--Коментарий-->
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic asperiores vero, doloremque quo itaque amet!</p>
    <!--
    Выше тег обозначающие параграф
    -->
    <!--Добавляем Картино4чку-->
    <img src="img/тутуту.jpg" alt="JoJo ReFerens for Sharuishii Men/or Musor">
    <div>
        <ul>
            <li><a href="#">Тупа</a></li>
            <li><a href="#">Текст</a></li>
            <li><a href="#">Рыба</a></li>
            <li><a href="#">Мангал</a></li>
        </ul>
    </div>

</body>

</html>

мой код поясняет за себя, кроме момента с <div>
Тег ul скелет списка (не нумерованный) и li один компонент.
div является блочным элементом. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.

CSS (Каскадные Таблицы Стилей) позволяют создавать веб-страницы, которые радуют глаз.
Браузер применяет CSS правила к документу, чтобы описать, как он будет отображаться. CSS-правила формируются из:

Набора свойств, которые имеют значения, устанавливающие, как будет отображаться содержимое(HTML), Например Я хочу, чтобы ширина элемента равнялась 50% ширины родительского элемента, и его фон был красным.
Селектор, который выбирает (англ. selects) элемент/элементы, к которым вы хотите применить измененные значения. Например, Я хочу применить это CSS-правило ко всем параграфам в моем HTML-документе.
Набор правил CSS, содержащихся в таблице стилей(stylesheet), определяет, как должна выглядеть веб-страница.

Как на самом деле работает CSS?
Когда браузер отображает документ, он совмещает содержимое документа с информацией о стиле. Он обрабатывает документ в два этапа:

Браузер конвертирует HTML и CSS в DOM (англ. Document Object Model). DOM представляет документ в память компьютера и применяет к содержимому стили.
Браузер отображает содержимое DOM.

О DOM
DOM имеет древовидную структуру. Каждый элемент, атрибут и кусочек текста в языке разметки представляется как узел DOM в этой структуре. Узлы определяются их отношением к другим DOM-узлам. Элементы могут иметь потомков, а потомки могут иметь братские(соседние) элементы.

Понимание DOM поможет вам в проектировании, отладке и поддержке вашего CSS, потому что DOM это место, в котором CSS встречается с содержимым документа.

Представление DOM
Вместо долгих и скучных объяснений давайте рассмотрим пример, который покажет, как DOM и CSS работают вместе.

Давайте рассмотрим представленный HTML-код:
View attachment 8415
В DOM узел, соответствующий элементу , является родителем. Его дети являются текстовыми узлами и соответствуют элементу . Узлы SPAN также являются родителями, а их потомки -- текстовые элементы:
View attachment 8414

CSS:

* {
    margin: 0;
    padding: 0;
    /*Убираем отступы на странице*/
}

body {
    /*атрибут означающие тело для сайта*/

    background-color: blanchedalmond;
    /*задний цвет/фон для веб-страницы*/

    font-family: 'Black Han Sans', sans-serif;
    /*Щрифт с гугла*/

    margin: 0;
    padding: 0;

    color: coral;
    /*цвет для текста*/

    font-size: 1em;
    /*Размер для шрифта, 1em=16px*/
}

img {
    max-width: 60%;
    /*Максимальный размер для картинки 100%, простая адаптивность для картинок*/
    height: auto;
    /*Высота подстраиваться под ширину*/
}

div {
    background-color: darkseagreen;
}
/*Указываем цвет для ссылок*/
li a {
    text-decoration: none;
    color: #000;
}

Так будет выглядеть готовая страничка
View attachment 8416
знаю выглядит пока что уебищно но сделаем конфетку блятб.

Итак, надеюсь, тут всё просто и понятно. Но если вдруг что, смело спрашивайте - обязательно помогу.

Живой_мертвый · Nov 28, 2018

Дерево проэкта кста
View attachment 8418

View attachment 8417

View attachment 8419

Sondzin · Jan 17, 2019

За урок спасибо. А когда к более сложным материям перейдем?)

Живой_мертвый · Jan 27, 2019

Sondzin said:
За урок спасибо. А когда к более сложным материям перейдем?)

Кое-что из своих проектов доделаю, тогда точно будет

HTML/CSS, Урок 2

Живой_мертвый

Кислотный дом

Живой_мертвый

Кислотный дом

Sondzin

Member

Живой_мертвый

Кислотный дом