HTML5 для начинающих / Урок #2 - Файл «index.html». Отображение сайта

За урок мы создадим наш первый проект и добавим внутрь него файл «index.html». Мы рассмотрим основную структуру HTML разметки, узнаем что такое теги и научимся отображать HTML файлы в браузере.
✅ Полезные ссылки:
✏️ Урок на сайте itProger: itproger.com/course/html/2
⏰ Тайм коды:
00:00 - Начало
00:22 - Создание папки проекта
00:55 - Добавление основного файла
01:33 - Теги в HTML
02:37 - Основная структура HTML
05:50 - Открываем файл в браузере
06:22 - Название страницы - «title»
07:55 - Установка кодировки
10:35 - Установка DOCTYPE
12:11 - Заключительная часть
✔ Сообщество программистов: itproger.com/
✔ -------------
Вступай в группу Вк - prog_life 🚀
Группа FaceBook - goo.gl/XW0aaP
Инстаграм itProger: / itproger_official
Instagram: / gosha_dudar
Telegram: t.me/itProger_official
Twitter - / goshadudar
- Уроки от #itProger 👨🏼‍💻
- Все уроки по хештегу #itprogerLessons

[@mskek1811]

как уже опытный программист говорю, что весь плейлист очень поможет новичкам в изучении javascript

[@jekuwatemirbekova4156]

Скажите пожалуйста,я правильно всё понял , сначала надо изучить HTML потом CSS и в конце уже JS? Последний вопрос, любой ноутбук подойдёт для изучения всего этого? Заранее спасибо

[@clarsekyt3475]

​@@jekuwatemirbekova4156 Сначала html потом css и потом джава скрипт,насчёт ноутбука незнаю

[@user-bu8lf7ic3c]

​@@jekuwatemirbekova4156 Конечно любой ноут,главное желание чтобы не пропало.

[@jekuwatemirbekova4156]

@@user-bu8lf7ic3c Спасибо вам за совет

[@user-sx4lz7wq7s]

​@@jekuwatemirbekova4156я изучал все вместе

[@stroke7227]

Великолепно. У автора прирожденный талант к объяснению. Отличный курс, буду делать до конца))) Спасибо ☺

[@miaxatt]

Очень понятно и доступно объясняешь

[@TheBigChannel_]

You are a great teacher 👍🏻 thank you very much 🙏🏻

[@user-so3ds4gr7j]

Прям шикарно. все очень разжованно и доходчиво изложено, что очень важно для новичка! кстати скорость 0.75 топ)

[@user-ol3hj2cc1e]

скорость 1.5 также😄

[@MsVolkodav]

Только 0,5 или 2)))

[@user-ut9xl9ph5c]

Мне нравится этот канал! Спасибо большое вы мне очень помогаете.

[@jozidayaharim7240]

Спасибо тебе большое,хорошо рассказываешь и обьясняешь, все очень понятно

[@lhlebatinet]

я пока только начала, но уже рада, что нашла такой курс, где рассказывают интересно и понятно :)

[@mariannareinsalu39]

Как успехи?

[@VitalBotvi]

на самом деле довольно быстро и сумбурно рассказывают совсем для новичков придется перематывать и перепрослушивать а в целом норм

[@ZheKaYT]

у меня нет кнопки команд где её найти? я не могу сохранить сайт!!👿

[@user-sx4lz7wq7s]

​@@ZheKaYTctr+s

[@Kirinnsenbon]

@@ZheKaYT жми ctrl левый нижний угол

[@Roma.x]

Очень нравится и все понятно спасибо большое буду слушать с радостью

[@az09aqi17]

В 14 году ты говорил "Бади", а сейчас "Боди", меняешься, чел..

[@user-mc7zv9tg4g]

и цсес

[@user-mc7zv9tg4g]

а сейчас сисес))

[@exelione2229]

ориентированность на аудиторию же)

[@ava_crey]

14 году? В него же сам канал создан 2020 году, наверно тф путаешь его кем-то

[@user-nc5fp1fp8q]

​@@ava_creyэто его не основной канал, его основной канал:Гоша дударь.

[@das_ten]

пересматриваю курсы для закрепления информации

[@LeshaGuitar]

Спасибо за урок!

[@user-bt8qp1ic6f]

Мне понравился урок , благодарю ,понятно некоторые вещи очень хорошо

[@user-rn5ou4hu1y]

Привет, прошел год. Как успехи? Просто я новичок, и хочу спросить у тебя

[@turbo7542]

@@user-rn5ou4hu1y прошло 8 месяцев, а как твои успехи? Теперь просто я новичок)) :D

[@user-se3rp1wt8u]

Спасибо вам большое за урок!!!

[@svetlanapolonets1147]

Понравилось видео, спасибо!

[@evgeniyglushchenko9275]

Курс вышел на мою днюху

[@fredifridman9039]

По мне для меня это лучший курс из которых на нашол

[@ThinManSix]

большое спасибо за ваши старания

[@XHuntingX]

Однозначно лайк и подписка 👍 все понятно

[@hearthstone5065]

Спасибо! Пока очень все понятно😊

[@SidiussGD]

шикарно, спасибо!!!

[@MotoMiteng]

Спасибо большое)

[@Burovasofia]

спасибо за урок

[@bushmishmen]

Thank you very much! Спс)

[@user-oy1pb9ne5r]

Спасибо огромное

[@ebyirtvoyeymamki]

Георгий. Вы очень хорошо помогаете

[@user-zn1zl8df3h]

В теге хед написал текст, и он всё равно виден, почему?

[@momentbs]

@@user-zn1zl8df3h текст заголовка ваш

[@nigarb1040]

Новые уроки лучше. Нет лишней воды

[@stern2936]

если и тут нет лишней воды страшно представить что было в старых, то что можно объяснить в 5 слов объясняет в 15-20

[@uniorblade817]

@@stern2936 Потому что урок для новичков это раз, а во вторых для больших типов людей. Кто-то, кто хуже понимает нуждается в этих 15-20 словах вместо пяти, а тем, кому легко даётся, эти лишние слова не повредят, а может даже наоборот - помогут закрепить информацию

[@user-sb1ge9xl5w]

Спасибо огромное, всё понятно и разжевано

[@morlulas1395]

Как успехи?

[@abaikazak1656]

а это информация до сих пор актуально

[@user-sc5dw7ih3b]

Отличный курс, автор вопрос, почему на itproger не представлен Ruby? Сейчас начал заниматься самостоятельно, а вернее изучать этот язык, а у Вас не много информации или я ошибаюсь?

[@doom678]

Урок шикарен. Я десятки курсов перебрал и перепробовал, сюда забрел из-за курса по Jjango

[@vsratie1964]

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

[@SETTO_WOTBlitz]

Как хорошо что я нашел ваш канал)

[@gtxrtx815]

как успехи брат ?

[@alexpetrov521]

Как уже это достало( Типичный комментарий побирашки. Ходят слоняются, ждут манну небесную. Что вы от него ждёте? Что бы он сказал, да чувак, залетай и мёд ложкой загребай, всё зае..сь и легко!? И каждый второй такой.

[@alexveha3467]

Бро ты лучший!

[@RasXOD_Mercenary]

Слушай классно

[@naputivoina]

Mucho Gracias

[@muhammadjonxolmatov890]

Привет я из Узбекистана.Спассибо всем.

[@user-vl7hy3se2g]

thanks

[@hakimjonghaniev5536]

Спасибо

[@aori3076]

Мне вот интересно а в Atom, обязательно нужно писать стрелочки, слеш, или можно как в VS просто написать название тега и нажать таб?

[@faridmaqsudov2787]

а что делать если выскакивает при скачивании atom ошибка с другими работать непонятно потому что видео другое а там другое

[@nonot5181]

Спасибо большое, обязательно оформлю подписку на вашем сайте, а по CSS и JavaScript у вас есть уроки?

[@user-sw5cq7wk9h]

Есть

[@mirci5459]

А что у Вас за плагин, который дает подсказки о том, что писать следующим и который показывает полное название тега, например, когда в body создаете абзац, Вы пишите "p", а справа показывается, что это сокращение от "paragraph"?

[@sergof2656]

👍👍👍

[@ZXChaszer]

Как узнать какая версия HTML установлена через Visual Studio???

[@malpico]

7:14. Я попробовал вставить не в хед и название тайтла таке появилось, те не обязательно ставить в хед? или разницы нет, но по сути лучше уж поставить?

[@anasteishn_]

Подскажите, пожалуйста, какой редактор и какую его версию скачать для windows 7 32-bit. Или как запустить код из блокнота. А то найти что-то подходящее для такого ноута это целый квест.

[@parahumanoid]

латиница = ascii, она в любом случае будет, не зависимо от выбранной кодировки. сказанул. варианты начинаются уже в верхней половине таблицы знаков. если она восмибитная.

[@Vlad-Ra]

Nice

[@user-db3ku5vi1i]

За 1 ролик понял больше чем за 3-4пары

[@user-hz9zf3ei4o]

а в notepad на правую кнопу мыши нельзя добавить файлы в папку

[@alyonaap99]

*Помогите пожалуйста* у меня не получается работать с Атомом. После загрузки в окне открылось белое поле и на нём НИЧЕГО!!! Подвигала мышкой на секунду "засветилась" папка перенесённая с рабочего стола, и пропала, при нажатии на кнопки мыши выходят команды на английском - "новая папка" например, но при нажатии на команду опять ничего не происходит. Удалила программу Атом, удалила файл "setup" из папки загрузок, скачала заново, но результат тот же - белое окно и ничего.

[@notalent598]

👍

[@samserikbaev7706]

привет ! как сделать расширения для автозаполнения ?

[@muradbendaliyev3624]

установи emmet.

[@ProCatsLetsGo]

А как сделать,чтобы указать,что 4-ая версия(например) 10:35

[@user-ex9cs8zi7e]

😊😊😊😊😊😊

[@Q_roxe]

До конца дойдут только избранные) Ну что ж поехали)

[@Miraisgandarzada]

👍🏻

[@q1wizzy41]

я программирую на brackets, все делаю по инструкции и когда захожу в папку меня выбивает в интернет с пустой страницей, что делать?

[@user-pp3ko3xk3p]

Спасибо большое за курс уроков...мне надо за месяц обучится верстачить сайты, надеюсь мне поможет ваш канал

[@murou3968]

Привет, как успехи, дружище?

[@user-lm4nc1dl8o]

Тоже интересно , месяц прошол)

[@murou3968]

@@user-lm4nc1dl8o я уже сам научился немного верстать сайты, так что он точно справился

[@user-lm4nc1dl8o]

@@murou3968 надеюсь и я научусь))) Посмотрем что из этого выйдет )

[@shkeldm]

@@user-lm4nc1dl8o что по итогу?)

[@user-jp1sm6xl1h]

Atom для Винды по другому устроен, у меня нет слева проводника, и я не могу понять как назвать файл который создал. Разжуйте как настроить вид подобный вашему на виндовс 10!?

[@itproger]

Просто папку проекта перетащите в редактор и она откроется так же

[@muhammadjonxolmatov890]

ПРИВЕТ ВСЕМ Я ТОЖЕ ИЗУЧАЮ ЭТОТ КУРС.СПАСИБО ВСЕМ.

[@klyarchik]

как успехи?

[@nikolayermoshin6389]

Что делать если у меня в место привет выходит весь код в хроме(код написанный мной) Что делать, подскажите пожалуйста

[@romanevdokimov3660]

У меня в браузере появляется символ < перед словом «привет». Как его убрать?

[@malpico]

а если другие версии html то что прописывается?

[@risalatrasulova3186]

у меня вопрос, я начинающая в этом, скажите пожалуйста имеют ли значения пробелы? Если да должна ли углубляться в этой теме? заранее спасибо🙂

[@user-ou3ix4cp6v]

Для самого html не обязательно, но для лучшей читабельности, пробелы необходимы

[@Krylowandrey]

Получается текст может отображаться без тегов ???

[@Krylowandrey]

А из самой прогаммы (из редактора) не запускается HTML файл?

[@hd-my9fb]

Прошел курсы тестировщика - там щас жесть конкуренция по 100 человек на джуна, расплодилось их жесть, начал учить html далее css и потом планирую php, посмотрим что получится

[@nikandrov]

Лучше вместо PHP учи JS

[@vladislav_1993]

Как ваши успехи спустя 11 месяцев ?

[@hd-my9fb]

@@vladislav_1993 инженером пто работаю по специальности, опять в планах продолжить обучение как уволюсь. Совмещать не получается.

[@vladislav_1993]

@@hd-my9fb я вот сейчас тоже задумался учиться на фронтенд, но не знаю получится ли…( нужно что то менять в жизни

[@hd-my9fb]

@@vladislav_1993 согласен, я не хочу по вахтам ездить больше. Че делать нз, в крипте ещё попроьовать хочу как приеду, зарабатывают же люди, банк у меня будет не большой

[@GulnurAsanalieva]

Здравствуйте Как создать другие файлы как расширение?

[@slavik9730]

Oldest Junior, вот посмотрите норм чувак, хотя где то потерялся

[@user-lp5yk3gu4y]

Подскажите пожалуйста, при вводе Главная страница , название страницы прописывается на сайте, а не на вкладке страницы, что я делаю не так? Делала по видео точь-в-точь

[@whateven2836]

title одна т

[@pablo_barnes7329]

Решил?

[@flickzfn2167]

почему у меня на сайте главная страница и привет вместе в описании стоит а название вкладки ссылка сайта?

[@KhzAlm]

like

[@xeither289]

☦❤💕❤🙏

[@imanofficial7802]

В браузере не показывает мой код и сайт. В чем проблема?( а в файле показона, что он пуст, хотя там огромный код)

[@user-pr1yf6gf3f]

мне 14, все понял! Шикарно объясняете! Не думали начать праздновать день педагога?!

[@azov1456]

Что ты высрал

[@arcichhh]

а есть какой нибудь онлайн редактор для 10 windows?

[@alexandermetadonov]

Вы говорили что мы должны писать все в ручную без плагинов и т.дб и т.п. Но у меня установлен Emmet и можно ли его использовать или выключить?

[@nigarb1040]

Я не использовал его первые 5-7 уроков. Затем выучил как правильно писать теги и включил emmet.

[@qqqu1ncy121]

@@nigarb1040Слушай а эммет только для Sublime Text вроде - бы ?

[@CodeQuestRu]

@@qqqu1ncy121 нет, Emmet есть для всех редакторов, где-то встроен, а где-то нужно установить

[@dmytrodyakun6512]

@@qqqu1ncy121 нет , я например Emmet для Vim юзаю

[@stanislavkruglyk4978]

А еще мельче можно где то Н6 будет нормально , и желательно в самом верхнем углу.

[@Esperantistoelisraelo]

интересно а я смогу сделать курс при помощи html5¿

[@mixgametv2373]

если у меня все нормально я могу не писать мета тег?

[@legoblox3793]

1:20 я где-то читал, что есть расширение htm

[@Nicolas-db3qo]

Почему я пишу в body Привет а у меня ничего не отображается ????

[@GmanKsen]

Название сайта = названию страницы? Столкнулся с такой проблемой, когда в поисковике вбиваю имя сайта(не доменное, а например то которое указал в title или близкое к нему), а по запросу отображается имя доменное. Сайт уже был проиндексирован роботами.

[@MohcheDD]

Нашли решение?

[@alexandermetadonov]

Была одна ошибочка, в теге Head отображается title пользователю

[@Mestniy389]

Для начинающих облегчить работу подойдет Visual Studio Code-весь первоначальный блок html описывается одним символом ! плюс TAB

[@Broneboyshik1311]

Скажите пожалуйста, у меня установлен вскод, если я хочу учится html по этому каналу ,то мне обязательно нужно устанавливать atom или я могу заниматься по этим урокам в вскоде?

[@Mestniy389]

@@Broneboyshik1311 вполне подойдёт вс как для начала так и для будущего.

[@Broneboyshik1311]

@@Mestniy389 Вас понял, спасибо

[@Mestniy389]

@@Broneboyshik1311 Посмотрите видео по установке доп плагинов для удобства в работе вс

[@Broneboyshik1311]

@@Mestniy389 Хорошо,а какие бы вы посоветовали?

[@specnaz.Levinho]

Shift + !, тогда не нужно будет писать вручную head,body,meta,title

[@criminal1864]

у меня не октрывается файл в браузере( что делать?

[@raisiekudzero1961]

А в начале?!

[@unknownunknown9510]

да все верно

[@anatole4582]

Разницы нет

[@sergeyhovakimyan176]

Ребят кто нибудь киньте источник где можно в кратце познакомиться со всеми тегами?

[@evgeniyglushchenko9275]

В блокнотик записывай так и запомниться лучше)

[@alikhankalmanbay4840]

у меня при открытии страницы код и сам текст не отображается, браузер сафари

[@fish1314]

я не експерт в етом, но вроде Сафари только для видео, бо раньше мне так говорили

[@drunk_daddy9268]

получается в папке WWW все файлы будут называться index.html?

[@user-fd6il4we1g]

Создается папка в которой будут находится все файлы и папки с необходимым содержимым. index.html называется главная страница, она всегда должна называться так, и никак иначе. Я не уверен, но кажется если назвать ее как-то по-другому, то что-то не будет работать.

[@drunk_daddy9268]

@@user-fd6il4we1g спасибо

[@Dj-fh4kg]

Только начала смотреть ,не могу понять ,эти все тегги вы запоминаете ?Как вы понимаете когда каклй нужно написать ?

[@nazar-tv-i-3d-printer]

2:24

[@Krylowandrey]

Зачем существуют одинарные и парные теги? Почему не все теги парные или не все одинарные? Зачем они так отличаются? Это какая то необходимость? Если да, то какая?

[@Krylowandrey]

Что будет , если мы не пропишем тег Доктайп?

[@user-me4vt3uy7r]

Добрый день, подскажите пожалуйста в чем проблема, открываю документ в браузере сафари и выдает вместо привет такие символы: Привет

[@evgeniyglushchenko9275]

В видосе есть там где Установка кодироки

[@minecraft-play.]

@@evgeniyglushchenko9275 чел прав или сафари не поддерживается

[@huyhuyhuyhuyhuy6836]

Это выдает если ты написал на русском текст

[@user-me4vt3uy7r]

Через хром открывает нормально

[@drunk_daddy9268]

предположим я хочу создать еще один файл в этой папке, я создал с таким же именем но мне отвечает что файл с таким именем уже существует

[@alexandersobolev2769]

Другие файлы имеют другие имена. index.html - это просто _стартовый_ файл для сайта