HTML/CSS, Урок 2

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

Кислотный дом
Pro Member
Сообщения
53
Реакции
19
Посетить сайт
И так здрасте, или как говорят испанцы
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. Давайте поговорим о них более подробно.
Любой тег, вне зависимости от его назначения и месторасположения, размещается между символами < и >, расположенными в начале и конце тега, соответственно.

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

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

Пример:
<p>Абзац</p>

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

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

Атрибуты 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-правила формируются из:
  • Набора

    Авторизируйтесь или Зарегистрируйтесь что бы просматривать ссылки.

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

  • Авторизируйтесь или Зарегистрируйтесь что бы просматривать ссылки.

    , который выбирает (англ. selects) элемент/элементы, к которым вы хотите применить измененные значения. Например, Я хочу применить это CSS-правило ко всем параграфам в моем HTML-документе.
  • Набор правил CSS, содержащихся в таблице стилей(stylesheet), определяет, как должна выглядеть веб-страница.
Как на самом деле работает CSS?
Когда браузер отображает документ, он совмещает содержимое документа с информацией о стиле. Он обрабатывает документ в два этапа:
  1. Браузер конвертирует

    Авторизируйтесь или Зарегистрируйтесь что бы просматривать ссылки.

    и

    Авторизируйтесь или Зарегистрируйтесь что бы просматривать ссылки.

    в

    Авторизируйтесь или Зарегистрируйтесь что бы просматривать ссылки.

    (англ. Document Object Model). DOM представляет документ в память компьютера и применяет к содержимому стили.
  2. Браузер отображает содержимое DOM.
О DOM
DOM имеет древовидную структуру. Каждый элемент, атрибут и кусочек текста в языке разметки представляется как

Авторизируйтесь или Зарегистрируйтесь что бы просматривать ссылки.

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

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

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

Давайте рассмотрим представленный HTML-код:
Посмотреть вложение 8415
В DOM узел, соответствующий элементу <p>, является родителем. Его дети являются текстовыми узлами и соответствуют элементу <span>. Узлы SPAN также являются родителями, а их потомки -- текстовые элементы:
Посмотреть вложение 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;
}
Так будет выглядеть готовая страничка
Посмотреть вложение 8416
знаю выглядит пока что уебищно но сделаем конфетку блятб.

Итак, надеюсь, тут всё просто и понятно. Но если вдруг что, смело спрашивайте - обязательно помогу.
 
Название темы
Автор Заголовок Раздел Ответы Дата
H HTML/CSS инъекция в веб-приложениях Уязвимости и взлом 0
ShadowMaXD Курсы по c++ , c# , php , python , css , html и т.д. С/C++ 4
Живой_мертвый Садись присаживайся, курс по HTML/CSS, урок 1 Другие ЯП 1
Bogette Взлом сайта и кража всех исходников (css,js,html) Полезные статьи 3
Traven Слив платного курса по HTML/CSS за 12.000 рублей Другие ЯП 11
Stych создание сайта на html и css Ищу работу. Предлагаю свои услуги. 8
Olie Уроки по HTML & CSS Другие ЯП 1
Forevonly 6 полезных книг по HTML и CSS Полезные статьи 5
Seven34rus Изучение html, css!!! Другие ЯП 2
Makskajdakov адаптированный HTML шаблон LANDING PAGE Другое 0
Makskajdakov Шаблон JB desks Responsive HTML Template Сайты/Хостинг/Сервера 0
Makskajdakov Brightbox - Business Agency Template HTML Другое 0
H HTML and Javascript Teacher - Code examples in HTML and Javascript. Другие ЯП 0
P Проверено Создание HTML-писем/Рандомизация текста | Creating HTML-letters/Text Randomization Услуги дизайнеров/веб-разработчиков 0
A Введение в HTML DOM (модель объекта документа) Другие ЯП 0
BuriTTo Помощь в PHP\JS\HTML, API VK\ Telegram бесплатно. Ищу работу. Предлагаю свои услуги. 0
kdroshev Напоследок 360 гигабайт курсов по программированию на английском языке (Открываем файл index.html и смотрим список курсов ) Другое 0
hggug77 Как своровать магазин на html Другие ЯП 0
R Шпаргалка по HTML Другие ЯП 0
R Адаптивных HTML шаблона v2/ → 3 шт Другие ЯП 0
Nicko77 [Школа современных технологий] HTML PRO. Профессиональная вёрстка Другие ЯП 3
MrLeam1 Учим HTML Софт для работы с текстом/Другой софт 17
Forevonly HTML шаблоны под любые нужны Полезные статьи 2
С Вопрос к тем, кто знаком с html и java скриптами Вопросы и интересы 0
АнАлЬнАя ЧуПаКаБрА Ivi.ru B&C [Private Keeper] - HTML Log Проекты Private Keeper 0
K Можно ли хакнуть сайт HTML,JC.Если да,то помогите как ? Свободное общение и флейм 0
yumpa CSS. Изменяем отображение любого сайта Полезные статьи 0
snr93 Взлом админки CSS & CSGO с помощью плагина Раздача email 4
klobald Уроки по XSS: Урок 3. Контексты внедрения XSS Уязвимости и взлом 0
klobald Уроки по XSS: Урок 2. Скрытая передача данных, перехват нажатия клавиш, изменение внешнего вида сайта, подцепление на BeEF, фишинг, подсказки обхода ф Уязвимости и взлом 0
klobald Уроки по XSS: Урок 1. Основы XSS и поиск уязвимых к XSS сайтов Уязвимости и взлом 0
AngelOfLove Delphi. Урок 17. Типы С/C++ 0
AngelOfLove Delphi. Урок 16. Исключительные ситуации С/C++ 0
AngelOfLove Delphi. Урок 15. Математические операции С/C++ 0
AngelOfLove Delphi. Урок 14. Работа со списками строк TStringList или «сложные» типы С/C++ 0
AngelOfLove Delphi. Урок 13. Работа со строками С/C++ 0
AngelOfLove Delphi. Урок 12. Преобразование числа в строку и строки в число С/C++ 0
AngelOfLove Delphi для начинающих. Урок 11. Процедуры и функции С/C++ 0
AngelOfLove Delphi для начинающих. Урок 10. Циклы. Работа с массивами С/C++ 0
AngelOfLove Delphi для начинающих – Урок 9 – Массивы С/C++ 0
AngelOfLove Delphi для начинающих – Урок 8 – Условия. Оператор Case С/C++ 0
AngelOfLove Delphi для начинающих – Урок 7 – Условия. Оператор IF С/C++ 0
AngelOfLove Delphi для начинающих – Урок 6 – Пишем свой калькулятор С/C++ 0
AngelOfLove Delphi для начинающих – Урок 5 – Работаем с компонентами С/C++ 0
AngelOfLove Delphi для начинающих – Урок 4 – Работа с переменными С/C++ 0
AngelOfLove Delphi для начинающих – Урок 3 – Создание переменных С/C++ 0
AngelOfLove Delphi для начинающих – Урок 2 — События С/C++ 0
AngelOfLove Delphi для начинающих — Урок 1 — Среда разработки Delphi С/C++ 0

Название темы