00:00
в этом уроке мы с вами рассмотрим как
00:01
выглядит веб-страницы изнутри посмотрим
00:04
эту то примере главной странице моего
00:07
сайта давайте откроем из хочет открывать
00:11
исходники
00:12
через горячую клавишу control либо
00:16
соответственно может поискать я честно
00:19
даже ни разу так не захожу вот исхода
00:26
косы сможет так ну принципе поищите там
00:28
настройка до исходный код можно даже вот
00:31
так вот можно посмотреть да вот исходный
00:33
код страницы вот но я просто привык в
00:35
любых браузерах это работает просто
00:37
control у
00:38
ну по крайне мере в google chrome так

00:41
работает и firefox нам другие браузер
00:42
вообще уже не нужны к счастью и так
00:45
насчет у нас исходный код так вот
00:47
выглядит это уже нет именно html-код нас
00:50
есть css код к нему сами будем говорить
00:53
другой раз можете просто посмотрите css
00:56
код но мы сами будем строить именно html
00:59
а ведь сочтут logo конечно написано это
01:02
впечатление что что-то очень сложное что
01:05
что то что невозможно выучить понять на
01:07
самом деле я так . ты думал к
01:09
только-только начинал изучать создание
01:11
сайтов и сейчас язык html начинал хищник
01:15
нельзя как-то к еще можно написать чтобы
01:17
ты еще как тут грамотно работал на самом
01:19
деле все очень и очень просто и так наш
01:23
веб страниц стоит из множества множество
01:25
тегов так это вот такая вот штука то
01:29
есть нас нет начало левой угловая скобка
01:32
с тем название тега и закрывающая
01:33
угловая скобка то есть провода то есть
01:36
знак больше вот эта вот вещь называется
01:40
тегом так бывает парный а бывает водяной
01:45
что такое парни так парни т.к. тот кто
01:47
который имеет закрывающий тип тот на
01:49
свете т.к. открывающий а вот он спит со
01:52
слышим таким вот прямым слышим это у нас
01:54
закрывающий тег но такой так называется
01:58
порно открылся закрылся одиночный т т т
02:04
т который не имеет закрывающего варианта
02:06
то есть вот он идет на стек вот ведь это
02:09
все идут у нас пока что всякие атрибуты
02:11
места них еще поговорим
02:13
и вот видит слеш и все сразу же угловая
02:16
скобка знак больше приходит называется
02:20
одиночных признаться tickling
02:22
он одиночный он не менее не является
02:23
парным то же самое например так мета то
02:27
же самое на одиночный а вот например
02:30
утек head голова документа
02:33
он ведь у нас является парным то есть он
02:37
имеет закрывающий вариант вот это
02:40
открылся хоть закрылся у тегов есть
02:44
атрибуты атрибут означается таким
02:47
образом они имеют свое имя либо же т.п.
02:50
kef ней там type реал грех и
02:54
соответственно имеет какое-то
02:56
определенное значение которое идет у нас
02:58
через равно и в кавычках указывается
03:00
значение например вот атрибут класс
03:03
равно
03:04
актив это требует класс который имеет
03:07
значение актив или атрибут хлеб который
03:10
имеет значения прямого слыша там или
03:15
например у формы так форм вот форма есть
03:19
атрибут ней есть требуют экшн
03:21
если требует метод у нее maaws тут слеш
03:25
и метод значение пост атрибуты значения
03:29
на то есть это вот атрибуты имя атрибута
03:31
значение атрибута имя атрибута значений
03:34
атрибута имя атрибута значений атрибута
03:36
есть все срочно просо то есть есть теги
03:39
они бывают парные и одиночные у любых
03:42
тегов неважно porn одиночный имеет свои
03:44
определенные атрибуты далеко не все их
03:48
нужно указ из 3 букв можно сэкономить
03:50
много мука за только те которые нам
03:52
нужно ли вообще никаких не указываются
03:54
не например не нужны например витюха да
03:55
у меня таких атрибутов хотя и можем ему
03:58
можно было пить атрибута поставить но у
04:00
них просто-напросто нет или вот например
04:05
у нас т.п. отвечающий за абзац текста
04:07
сим такой один конкретный абзац текста
04:10
эти и тут уже не таких атрибутов хотя мы
04:13
могли бы без проблем добавить множество
04:15
атрибутов то есть они могут быть а могут
04:18
и не быть
04:21
в процессе создания веб-страниц и очень
04:23
важно понимать что все теги имеет такой
04:26
принцип вложенности то есть мы можем в
04:28
один тег вложить другой втык в этот во
04:31
второй так ложить 3 tec и так далее ну
04:33
например на 7 посмотри вот например у
04:35
нас есть тэг body тело документа в него
04:39
вложен тег div внутри 9 деф на всю не
04:43
закрывать видит нету закрывающий
04:45
скобочки у такой нас получается на стык
04:47
является парным то есть ведь и мы пока
04:49
что не закрывали тег div и мы уже идем
04:53
уже внутри декодер это получать на
04:55
западе differs они друг в друга вложены
04:58
система сбить идет аж два который уже на
05:02
закрывается вот на этом же уровне
05:04
если ждет т.к. на эти средства он идет
05:07
уже после а h2
05:09
который на степанов тоже закрывается так
05:12
с навигацией это за шт м л 5 так уже
05:16
внутри тегов нас нет уайлд потом внутри
05:19
тега у нас идет так ли просто целая куча
05:22
ли с тегом эй да который нас отвечает за
05:26
ссылки целая куча тэгов ли и потом ведь
05:30
когда на все ли закончились то есть они
05:32
вот открыл закрыл закрылся открылся
05:34
закрылся и вот пока потом мы закрываем
05:36
tkl закрыли потом мы начинаем закрывать
05:39
те канав он весит следующий идет потом
05:42
т.к. header
05:43
то есть важно понимать что у нас теги не
05:46
только могут быть друг в друга вложены
05:48
но и при этом обязательно сначала
05:51
закрываются внутренние теги и только
05:53
потом внешнее то есть мы не можем
05:56
например написать тут у л открыть т к у
05:59
л открыть потом ли открыть а потом бац и
06:03
еще не закрывай вот этот лида не
06:05
закрывай внутренней так закрыть его тут
06:07
примеру тут мы не можем написать что мы
06:11
закрываем will хотя на самом деле это
06:13
криво косо но будет отображаться но это
06:15
будет уже сразу же не валидно это вообще
06:17
безграмотно так писатель вверх
06:19
безграмотности сначала закрываются все
06:22
внутренние теги только потом еще
06:24
закрываются внешние то же самое проведет
06:26
например так у нас или да вот отелей
06:29
внутреннего ведь идет декой декой ведь
06:32
но суд закрывается
06:33
мы не могли сначала вот где-нибудь тут
06:36
закрыть тег li
06:37
а потом закрыть т.к. это опять же наружу
06:40
нарушит иерархию тегов саму всю
06:44
структуру поэтому сначала закрываем
06:48
внутренней теги потом закрываем внешней
06:50
теги потом внешнее еще были внешние еще
06:54
были внешние обсудить там в конце еще
06:57
наверняка будет закрыт этот div
06:59
контейнер вот этот вот есть понимаете да
07:03
пусть вас именно такая архитектура виде
07:07
древовидной такой структуры у нас один
07:09
тег вложен в другой тег итак у нас вся
07:13
страница по сути
07:14
и строится на самом деле вот
07:17
определенные теги отвечает за свои
07:18
определенные задачи мы опять же вы не
07:21
сами эти теги разбирать то сектор часа
07:23
тут видите мы все их будем очень
07:24
тщательно разбирать они все используют
07:26
все очень важны быть там так т.д.
07:29
отвечающий за ячейку в таблице будь там
07:33
тех форм отвечающий за вывод формы
07:37
будь так input отвечающий зовут хита там
07:40
полей формы там были бы текстовое поле
07:42
либо кнопка либо checkbox а либо
07:46
радиокнопка либо там еще какие-нибудь
07:49
там выпадающий список то есть множество
07:52
что все input ой ну вообще-то список об
07:54
этом другой тег ну не суть короче вот
07:56
отвечает за определенные поля ввода
08:01
потом начну насадив отвечаешь просто за
08:03
определенный код некий блок
08:05
некий такой блочный элемент такой
08:06
контейнер можно так так его назвать у
08:09
нас есть также например заголовки вот h2
08:13
нас заголовок ясно заголовки там h1 то
08:17
есть но это все уже потом нас есть
08:20
ссылка это так и юна за ссылку отвечает
08:25
потом там лейбл отвечает заметку форме
08:29
т.п. отвечающий за абзац то есть вот у
08:32
множества всё от этого наса и составляет
08:35
всю веб-страницу есть также найти
08:38
скрипты на java скрипте вот но мы данный
08:40
курс жалкой будем ходить стороной
08:42
конечно же там уж эта тема сложная
08:46
отдельно курса служат и кстати говоря
08:48
такой курс у меня есть то пусть вас сжал
08:51
скрыться интересует на самом деле им
08:53
стоит точно интересоваться ночью это
08:55
очень важная вещь при просто верстки а
08:58
приз и так а именно добавление жизни на
09:03
страницу и скидкам сложные анимации
09:05
какими-то динамические от практики судил
09:07
сначала скрипте это не то чтобы верстка
09:10
но такая вот важная вещь на веб-странице
09:14
особенно последние годы вот так в целом
09:18
и все и последующего хочу сказать что
09:20
это общее общий вид страница об этом еще
09:21
будет с вами говорить но у нас есть
09:24
определенный доктор
09:25
он отвечает за стандарт по которому мы
09:29
тут html-документ создаем то есть на
09:31
стандарты и есть самые разные the html 4
09:34
the html5 player 10 x 411 сейчас а самый
09:40
самый самый современный это html5 такой
09:43
стандарт это определенное правило
09:45
написания те же самых тегов примеру
09:48
стандарт стандарт html 4 вот так писать
09:52
нельзя а то есть там нужно писать и
09:56
научной теги вот он без это вот слышь то
09:58
есть вот мы открыли его
10:00
браузер и так знает что это одиночный
10:02
т.к. он не ждет ни не будет ждать
10:04
закрывающий link потому что нас он знает
10:06
что ты клинку нас одиночный потом такой
10:08
слэш который тут имеется он не нужен
10:11
совершенно это вот html 4 или примеры в
10:15
xhtml 10 там или 11 уже слышали уже
10:18
является обязательным сети такое
10:20
различие вот а в html5 в штабель той
10:24
которая тут как раз мне и указан doctype
10:27
в нем позволительно писать и вот так вот
10:31
и без слышал но так и так почитаться
10:34
такой код валидным и правильным вот я
10:37
приписать слышим потому что я когда не
10:39
было еще html5 писала выкл xhtml
10:43
11 и соответственно томас тоже было
10:45
обязательно просто нему привык и мне
10:47
кажется так наиболее логично к наиболее
10:49
правильно то есть чтобы выделить вот так
10:51
нас именно одиночный это именно такая
10:54
характеристика одиночно тега у парнова
10:56
виде такого просто просто нету
11:01
на этом все
11:02
в следующем разделе мы сами уже перейдем
11:04
к изучению html а пока спасибо вам за
11:07
внимание с вами был михаил русаков