Живой_мертвый
Кислотный дом
- Joined
- Aug 8, 2018
- Messages
- 142
- Reaction score
- 22
И так здрасте, или как говорят испанцы
Сегодня на повестке 2 сука урок. Таки товарищи начнем.
Теги, мать твою за ногу(не в обиду ветеранам)
мой код поясняет за себя, кроме момента с <div>
Тег ul скелет списка (не нумерованный) и li один компонент.
div является блочным элементом. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.
Так будет выглядеть готовая страничка
View attachment 8416
знаю выглядит пока что уебищно но сделаем конфетку блятб.
Итак, надеюсь, тут всё просто и понятно. Но если вдруг что, смело спрашивайте - обязательно помогу.
Сегодня на повестке 2 сука урок. Таки товарищи начнем.
И так. Помните код который был в конце прошлого урока, кста вот он:
Разберемся что здесь за чертовщина твориться.
<!DOCTYPE html> говорит веб-серверу что сайт сделан на версии HTML-5. Если что, версия самая последняя на которой будем писать
<html></html> Главный контейнер веб-страницы.
<head></head> Тут пишется подключаймые файлы, мета-теги и остальная страшная хуйня.
<meta charset="utf-8"> мета тэг обозначает что кодировка нормальная, utf-8 капитан.
<title></title> Определяет заголовок документа
<body</body> Тело для сайта, тут пишется весь код
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" …>
У тега может быть как один, так и несколько атрибутов. Ниже вы можете видеть примеры.
Создание 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>Тег ul скелет списка (не нумерованный) и li один компонент.
div является блочным элементом. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.
CSS (Каскадные Таблицы Стилей) позволяют создавать веб-страницы, которые радуют глаз.
Браузер применяет CSS правила к документу, чтобы описать, как он будет отображаться. CSS-правила формируются из:
Когда браузер отображает документ, он совмещает содержимое документа с информацией о стиле. Он обрабатывает документ в два этапа:
Браузер применяет CSS правила к документу, чтобы описать, как он будет отображаться. CSS-правила формируются из:
- Набора свойств, которые имеют значения, устанавливающие, как будет отображаться содержимое(HTML), Например Я хочу, чтобы ширина элемента равнялась 50% ширины родительского элемента, и его фон был красным.
- Селектор, который выбирает (англ. selects) элемент/элементы, к которым вы хотите применить измененные значения. Например, Я хочу применить это CSS-правило ко всем параграфам в моем HTML-документе.
- Набор правил CSS, содержащихся в таблице стилей(stylesheet), определяет, как должна выглядеть веб-страница.
Когда браузер отображает документ, он совмещает содержимое документа с информацией о стиле. Он обрабатывает документ в два этапа:
О DOM
DOM имеет древовидную структуру. Каждый элемент, атрибут и кусочек текста в языке разметки представляется как узел DOM в этой структуре. Узлы определяются их отношением к другим DOM-узлам. Элементы могут иметь потомков, а потомки могут иметь братские(соседние) элементы.
Понимание DOM поможет вам в проектировании, отладке и поддержке вашего CSS, потому что DOM это место, в котором CSS встречается с содержимым документа.
Представление DOM
Вместо долгих и скучных объяснений давайте рассмотрим пример, который покажет, как DOM и CSS работают вместе.
Давайте рассмотрим представленный HTML-код:
View attachment 8415
В DOM узел, соответствующий элементу <p>, является родителем. Его дети являются текстовыми узлами и соответствуют элементу <span>. Узлы SPAN также являются родителями, а их потомки -- текстовые элементы:
View attachment 8414
DOM имеет древовидную структуру. Каждый элемент, атрибут и кусочек текста в языке разметки представляется как узел DOM в этой структуре. Узлы определяются их отношением к другим DOM-узлам. Элементы могут иметь потомков, а потомки могут иметь братские(соседние) элементы.
Понимание DOM поможет вам в проектировании, отладке и поддержке вашего CSS, потому что DOM это место, в котором CSS встречается с содержимым документа.
Представление DOM
Вместо долгих и скучных объяснений давайте рассмотрим пример, который покажет, как DOM и CSS работают вместе.
Давайте рассмотрим представленный HTML-код:
View attachment 8415
В DOM узел, соответствующий элементу <p>, является родителем. Его дети являются текстовыми узлами и соответствуют элементу <span>. Узлы 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
знаю выглядит пока что уебищно но сделаем конфетку блятб.
Итак, надеюсь, тут всё просто и понятно. Но если вдруг что, смело спрашивайте - обязательно помогу.