#4 Теги глобальной структуры сайта: header, nav, main, footer [Курс по Верстке от AROKEN]

Поделиться
HTML-код
  • Опубликовано: 17 мар 2022
  • 👋 Привет! Это курс по верстке от Арокен.ру!
    В этом курсе ты обучишься основам верстки, поймешь, как создавать сайты и сделаешь свой собственный крутой проект!
    👨‍💻 Материалы курса (верстка и макеты):
    Яндекс.Диск - disk.yandex.ru/d/sPwFI1parDsGSA
    💥 Основной канал - / @arokenez
    ✈️ Телеграм - t.me/moodaroken
    🖥 Бесплатное сообщество - t.me/arokenru
    📜 Группа ВКонтакте - aroken
    🔥 Мой сайт AROKEN.RU - aroken.ru
    📩 Мой Телеграм Бот - t.me/aroken_bot
    🙋‍♂️ Мой блог - t.me/arokendays
    ⚠️ Осторожно! После прохождения курса ты рискуешь научиться создавать удобные сайты и ворваться в развивающийся айти рынок!
    ❓ Остались вопросы? Нет мотивации и уверенности в обучении? Пиши в наше бесплатное сообщество в телеграмме!
    Там опытные ребята помогут тебе разобраться в проблеме!
    👨‍🏫 Преподаватель курса - выпускник Личного Менторства (ныне Премиум) (aroken.ru) и ныне участник команды АроКод: Никита Бёркхардт.

Комментарии • 67

  • @azia.t
    @azia.t Год назад +7

    Интересно и очень доступно объясняете, не все на примерах объясняют структуру сайта

  • @user-wt6uz3zr1r
    @user-wt6uz3zr1r Год назад +1

    Благодарю, да, классные примеры))

  • @leslieburkeCW
    @leslieburkeCW 4 месяца назад +8

    Пыталась найти хороший пример сайта для повторения, в итоге после просмотра кода у всех почти сайт состоял на 90% из дивов) В итоге забила и на основе урока сделала сама по семантике, логически разобрав сайт.

    • @ffestiik
      @ffestiik Месяц назад +1

      +++, я так и не нашел нормальный сайт(

  • @OtamanMamoru
    @OtamanMamoru Год назад +2

    Лайк, информация подана отлично!

  • @MrHeavy-po2or
    @MrHeavy-po2or 8 месяцев назад +2

    Хорошее видео,спасибо большое,очень информативно

  • @azn8703
    @azn8703 5 месяцев назад +1

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

  • @kluqueen569
    @kluqueen569 5 месяцев назад +1

    примеры имба, спасибо за ролик

  • @user-nf2hg6eb4m
    @user-nf2hg6eb4m Год назад +10

    Четвёртый урок на уровне, полёт нормальный. Разбил сайт на части, при этом сильно глубоко не лез, не делил на очень маленькие секции (хотя в режиме разработчика это было сделано). И при таком грубом обрубилове получилось 137 строчек!!! Если не сворачивать готовый код, то и потеряться легко... Спасибо за урок!!

    • @arokenru
      @arokenru  Год назад

      Кул) Молодец)

    • @penisegvetv2yv
      @penisegvetv2yv 13 дней назад

      у меня 87 получилось

  • @OlchiMio
    @OlchiMio Год назад +19

    разбираю сайт, на мой взгляд там много article, нажимаю "исследовать элемент" и это все оказывается div 😮‍💨. Там в принципе весь сайт в div

    • @user-sc7qb4id1u
      @user-sc7qb4id1u 9 месяцев назад +1

      полностью согласен
      большинство сайтов делают через див ) походу всем пофигу на семантику

  • @TeomunMete
    @TeomunMete 11 месяцев назад +1

    Спасибо мужик

  • @orazaliorazali1000
    @orazaliorazali1000 3 месяца назад

    Благодарю!

  • @anvarxabibov8969
    @anvarxabibov8969 Год назад +3

    спасибо за такой ролик, посмотрел один сайт и около 10 или 15 потратил чтоб угадать какой код в нем а оказалось там все написано с div

  • @antiplash5935
    @antiplash5935 9 месяцев назад +16

    с header, footer, aside, main и nav проблем нет, а вот с секциями и артикулами я чего то так до конца и не понял 🥺

    • @fortnite20261
      @fortnite20261 17 часов назад

      согласен ахахахах 9 месяцев назад

  • @user-qk3fy7he8v
    @user-qk3fy7he8v Год назад

    Подскажи плиз. А как ты сделал что у тебя после ентера сразу пустое место с табом есть? Мне приходится нажимать два раза его и таб потом, а это не удобно и занимает много времени.

  • @f-len
    @f-len Год назад +10

    Тегов header на странице может быть несколько (маленькое незначительное замечание))). А в остальном урок по html крутой.

    • @zagites7763
      @zagites7763 7 месяцев назад +2

      но это как-то странно, чисто по логике, шапка у сайта-то одна

  • @mihail_krash
    @mihail_krash 3 месяца назад +1

    header может быть и два, один глобальный -шапка сайта с навигацией его role должна быть banner, и второй header это начало какойнибуть статьи например где общая информация а дальше идет остальная статья. Счас многие уже говорят что ошибочно считать что header может быть только один.

  • @Sergey_Yrevich
    @Sergey_Yrevich 9 месяцев назад +4

    Есть более удобный способ копирования строки Ctrl+D 😉, а еще vs code поддерживает запись например section * n где n количество повторений.
    В целом очень доходчиво, спасибо! 👍

    • @user-vi4cu5mb1j
      @user-vi4cu5mb1j 8 месяцев назад

      O, полезная инфа с умножением тэгов.

  • @nastyarobloxplay
    @nastyarobloxplay 6 месяцев назад +1

    Спасибо

  • @augustfondrajk2440
    @augustfondrajk2440 8 месяцев назад

    ты лучший

  • @KoltovichLAB
    @KoltovichLAB 2 года назад +3

    2:40 - Разве не наоборот принято? - Определяет статью в документе. В него принято помещать несколько блоков из , т.к. нечто крупное. А лишь раздел. Их может быть несколько в .

    • @arokenru
      @arokenru  2 года назад +3

      Оба варианта верны) Артикл не привязан к размеру, это может быть как крупная статья, так и мелкая самостоятельная карточка в каком-нибудь эсайде или секции

  • @loutreck
    @loutreck Год назад +4

    Открыл сайт компании в которой работаю (компания небольшая локальная) и нашел пасхалку в логотипе разработчика сайта "Мы здесь были ;)"

  • @iamnovikovmaksim
    @iamnovikovmaksim 27 дней назад

    в прошлом уроке была картинка где показано main>section>article
    почему тут идет main>article>section?

  • @clojure_sith
    @clojure_sith Год назад +8

    Открыл два сайта, оба были написаны исключитльно на div)))

  • @SEO-mq5tz
    @SEO-mq5tz 2 года назад +1

    🔥

  • @lialiova9084
    @lialiova9084 7 месяцев назад

    2:54 "... - может быть на сайте только один- ..."
    3:08 "... - он тоже только один- ..."
    3:11 "... - всегда находится внизу- ..."
    4:31 - добавляйте это лучше после каждого своего утверждения
    Всегда считал, что учить - большая ответственность.

  • @rsotm435
    @rsotm435 5 месяцев назад

    я написал див блок и спан инлайн , они просто написались без окантовки в чем проблема моя?

  • @yamanekopaws
    @yamanekopaws Год назад +1

    Ютуб написан div-ами. Еще нашла в нем какой-то уникальный тег ytd-playlist-panel-renderer

  • @shayh9699
    @shayh9699 Год назад +1

    не расслышала в видео момент, то ли закоментирую, или другое, но это сочетание CNTRL+/. Что это и для чего это делают?

    • @20ash14
      @20ash14 Год назад +1

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

    • @shayh9699
      @shayh9699 Год назад +1

      @@20ash14 спасибо)

    • @arokenru
      @arokenru  Год назад

      :)

    • @arokenru
      @arokenru  Год назад

      Верно!

  • @sayme_az3069
    @sayme_az3069 2 года назад +1

    а можно было ли после header написать main, а потом aside? ( 1 пример )

    • @arokenru
      @arokenru  2 года назад

      Конечно, если это необходимо. В данном же примере aside потребовалось написать до main)

  • @user-sk6pu8rk2x
    @user-sk6pu8rk2x 27 дней назад

    при вводе ! ни чего не происходит вопрос почему?

  • @user-hb1ms2qc5w
    @user-hb1ms2qc5w Год назад +1

    у меня в браузере открывается просто код, который написан в редакторе. Что то не так делаю?

    • @musicfan507
      @musicfan507 Год назад

      У меня тоже,походу здесь и мы остановимся

  • @user-wl9dy2dz2p
    @user-wl9dy2dz2p Месяц назад

    ребят, кто знает скажите, почему когда я ввожу "div" или "span", то появляется просто текст без блока (в css я даже не лез, для справки)

    • @usermanafrtyh
      @usermanafrtyh Месяц назад

      Нужно задать background

  • @theniks1437
    @theniks1437 Год назад +3

    я не знаю почему , но когда я написал див блок и спан инлайн , они просто написались без окантовки как в видео 😮‍💨

    • @theniks1437
      @theniks1437 Год назад

      мне кажется я даун

    • @arokenru
      @arokenru  Год назад

      напиши в чат бесплатного тарифа

    • @youdotaalex1229
      @youdotaalex1229 Год назад +5

      это потому что ты не применил стили css, которые были в видео, но их не нужно было добавлять)

  • @damir5581
    @damir5581 6 месяцев назад

    Открыл исходный код 5 сайтов, везде используется только div и span... Даже Хабр ими написан, ХАБР!!! Появляется вопрос, а так ли семантика влияет на продвижение сайта и важна ли она вообще? Все сайты, которые я проверял, были на первом месте в поиске.

    • @nevercrymore
      @nevercrymore 4 месяца назад

      Не всегда выйдет с помощью div`a сделать разметку сайта как с секциями и тому подобным.
      На продвижение сайта оно не влияет, и каждый делает по своему или как может.

    • @he1vann-42
      @he1vann-42 3 месяца назад +1

      давно хабр у нас теперь венец творения человеческого?)

  • @user-bo9hp4qy7c
    @user-bo9hp4qy7c 6 месяцев назад

    Со всего у меня получилось только значёк поменять😂 на остальном ошибки,блочный элемент не показывает...тупо нифига не работает от слова вообще

  • @musicfan507
    @musicfan507 Год назад

    у меня в начале не получается .с тегом див и спан

    • @user-bn7fl9ny1t
      @user-bn7fl9ny1t Год назад +1

      Так как там в CSS добавлены стили, ты пока что ещё его не изучал и он сделал это для наглядности

    • @musicfan507
      @musicfan507 Год назад

      @@user-bn7fl9ny1t зачем показывать того чего ещё не было

  • @rufus1110
    @rufus1110 Год назад +1

    твой плагин по обвертке тегов марочный какой-то. Все это есть в деффолтном emmet. Просто клавиши устанавливай

  • @wigeonN
    @wigeonN 2 месяца назад

    3:33

  • @User-wi7rd
    @User-wi7rd 10 месяцев назад

    11:05 - что есть "закомментировать" плохо понятно

    • @User-wi7rd
      @User-wi7rd 10 месяцев назад

      нашёл ответ в комментариях*

    • @yanziuy
      @yanziuy 6 месяцев назад

      можешь сказать пожалуйста@@User-wi7rd

    • @fusha_andrurin
      @fusha_andrurin 5 месяцев назад

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

  • @lonelybosh
    @lonelybosh 4 месяца назад

    со структурой разобрался фух