не можу побачити різниці тобто і чим зручно що я просто мені не треба відкривати ще одну програму зм треба ще одну програму Він багато буде ну умовно кого там не дуже там сильний комп'ютер тобто буде додатково хавати дуже багато пам'яті а ми просто в браузері відкриваємо вкладку і вона багато тоже не забирає тим воно напевно Мені більш зручніше А так все то саме мені здається І тим паче коли зараз в мене ноутбук виключають світло і на одній батареї він трошечки добрий на Добрий день На одній батареї він трошки так ну типа не видає всіх потужностей які може і він так щоразу коли батарея присідає він зразу починає Влад Вероніка вмикайте камери заразще мене просто трохи проблеми Ну в мене проблеми зме а що ззнаю Ну не працює Треба там требагу тобто якщо ви натиснете віконечку увімкнути камеру вона не увімкнеться так ну дивіться тоді Влад до наступного заняття це потрібно буде вирішити добре Зараз ми ще проговоримо кілька правил І ви вже будете стартувати ще ми чекаємо на одного учасника правильно розумію так так так це в нас так є Вероніка є Артем Марина є Влад так Марина Марина власне долучається просто не було проінформована що власне Google meats У нас буду проходити уроки ці технології Як ваш настрій ви такі всі тихенькі Посміхніться все добре Все в порядку тут зараз такі ще організаційні моменти вирішиємо зараз за хвилинку розпочнемо світло у всіх є Поки що да поки що ну це дуже добре ну взагалі в неділю як правило дають більше світла Та зараз походу щось вже змінилося що вже набагато більше світла є потім дуже рідко виключають дві години десь або чотири в мене мабуть У Марини якісь моменти із підключення ми так мачва вона думала Я бачу вона пише думала що тут треба додатково щось записувати Я так поняв що ми просто не користувалися мітом дивіться а можливо краще тоді Михайло якщо виникнуть якісь труднощі в Марини то можливо ми перш урок проведемо в Зумі а далі в googleмі може зараз я я зараз дочекаюсь її відповіді що вона скаже і тоді має правда на комп'ютері встановлено так не всі мають Я так поняв не всі напевно ні Ну Артем точно має що Вероніка має так Артем і Влад тіки ще мене чи що Ні ні Zoom Ніні зм а змє зум вимагаєте так дуже добре добре зараз подивимося зараз Ще чекаємо на одну дівчинку підписала Марина е ще ні покавайте Я пропоную просто щоб дійсно всім було комфортно так як мають всі zoм просто скинути просто посилання на zoм щоб всі долучилися вже з наступних разів я бачу Та я бачу вона відписує що Telegram на телефоні Вона не може просто перейти по тій ссилці Ага тоді просто ну в zoм так роміп ніхто не проти Мені здається що і в Zoom вона не зможе перейти Ні Так є в Марини там все добре В неї завантажений він на ноутбуці Добре Зараз Ну давайте тоді просто перезайдемо зараз за іншим посиланням всім Добре я заходжу в зму Так дякую с iPhone usзer - це хто Це я а я тадада да каємо всі А я ще побачив одну е один плюс Google міта одного разу як я був на якомусь міті там можна навіть робити ці транскрипцію розмови що там воно автоматично навіть українською Ти нормально робить транскрипцію а тут напевно такого нема Ну Марина підні ма мабуть там якісь є моменти із налаштуванням так тепер скину їй ссилку Влад Влад долучається та Влад Я тільки що підтвердив я Марині скинув і Вероніка ще ага угу тако що в нас тут немає поки та Вероніка долучається добре і Марина ще має бути так так так ще Марина має бути Я пропоную Можливо тоді коротенько я принаймні наступну частину схожу так від себе по правилах таких невеличких групи А там далі вже Михайло вам все розкаже покаже та буде вас навчати дивіться друзі перш за все Вітаю вас так зі стартом вчення програмування на курсі нтен ви дійсно молодці те що і для себе по суті ви познайомились цією мовою програмування цікаво підцінавально і я впевнена що буде дуже результативно якщо коротенько говорити по правилах дивіться я писала там таку коротеньку інформацію по регламенту так Те що всі мають бути з увімкненими камерами звуком на заняттях якщо ви раптом запізнюєтесь знаєте що ви не зможете бути присутні обов'язково інформуйте про це Михайло тобто ментор має бути в курсі А чи ви Чому у вас так немає на занятті тобто чи Чому ви пропустили О Марина Доброго дня Марина чути нас чути все добре дуже добре ми розпочали говорити так коротенько по правилах групи дивіться я так розпочну знову є регламент академії так відповідно в якому йдеться про те що всі учасники обов'язково мають бути з увімкненими камерами звуком Влад має виправити ці моменти до наступного заняття якщо припустили якщо ма знаєте що ви не зможете бути присутніми на занятті якомусь Так ви маєте обов'язково про це заздалегідь повідомити ментора щоб він був в курсі домашн завдання їх виконання є обов'язковим тому що ближче до завершення курсу Повірте майже цих п'ять місяців вони промайнуть дуже швидко викладач систематично інформуватиме кожного тижня будуть також постійно переглядатись заняття тобто записи цих занять і відповідно інформація там хто виконує хто не виконує так і ваша активність та динаміка росту вони будуть систематично надані вашим батькам тобто ваш Ну фідбек так по успішності що стосується останнього фінального заняття Всі ви знаєте що на цьому етапі ви будете презентувати фінальний проєкт Але для того щоб його презентувати гарно успішно вам потрібно гарно плідно вчитись і виконувати також домашні завдання вам розкаже як взагалі буде відбуватись перевірка цього тобто як взагалі він все надаватиме ну тобто такі деталі він вже вам все розкаже можливо є якісь запитання у вас тобто по організаційних моментах усміхніться ви всі такі серйозні Добре я розумію що питань немає І на завершення дивіться Нагадую що всі заняття будуть в записі також Якщо раптом десь там в когось вимкнули світло хтось не зміг бути присутній ви завжди зможете переглянути Цей урок в записі а потім там серед тижня звернутись до Михайла написавши йому чи в групу чи в особисті повідомлення але будь ласка Не соромтесь ставити питання це дуже важливо щоб ви не замовчували щось десь пропустили щось десь забули пишете Михайлові Допоможіть Підкажіть він з вами на зв'язку Як ваш повноцінний куратор ментор і добрий друг домовились скажіть щось так дуже добре От Перший раз усміхнулись я вам Бажаю гарного гарного заняття гарного настрою Все всім па-па добре добре добре що ми сьогодні поговоримо я почну знову розказувати з самого початку про наш HTML Хоча я і так розказую але все одно знову Ми повторимо всякі такі маленькі нюанси Можливо хтось собі пригадає Можливо хтось щось нове побачить в цьому е так де наш У нас тут скажіть чи добре видно екран мій добре добре ее добре добре добре все я тоді від я відкрив вз код Тобто це наш основний інструмент в якому будемо писати код ее в даному мене не чути чути Марина мене чути не чути не чути Походу походу тільки ти мене не чуєш Бо решту чують а вже чути Добре А добре ми тоді добре що в мене тут в нашому взкоді в мене тут дуже багато всякого різного коду але я буду поступово розказувати що ми взагалі що я тут взагалі написав такко для початку що таке В нас HTML це не повноцінна мова програмування це мова розмітки простішекажучи це якась інструкція для нашого браузера як витворити той чи інший елемент е-е також з цієї сторінки можемо побачити що більшість наших html-тегів мають дещо подібне а саме символи такі Зліва і справа це знак менше і знак більше це саме оці символи які будуть нам виділяти цей наш htmlтех з поміж іншого і він буде їх наділяти ее такими додатковими можливостями тобто якщо ми бачимо порівнювати зі звичайним текстом наприклад цей lon і Title тобто він Title - це вже htmlтег lesson - Це звичайний текст якщо я зараз спробую огорнути lon в ці два знаки він автоматично vsod буде розуміти що я хочу відтворити взагалі якись тег хоча такого тегу немає але він автоматично навіть міняє змінює колір тобто так настроєно що він оці символи вони є такими як визначальними які точно підказують що це конкретно htmlтех дальше коли я кажу за htmlтег Тут мається Я маю на увазі два слова навіть або дві частинки або якщо говорити ще якимись порівняннями це може бути дві дві стінки якоїсь коробки або колони можна так ще сказати тобто є якийсь початок є кінець тобто і вони відрізняються між собою тільки о таким слешем це цей слеш використовується у тій частині яка відповідає за закінчення або яка вказує на На межі нашого тегу Тобто вона виконує тільки одну роль відповідає за те щоб позначити де наш тег закінчується Наша перша частинка Вона має трошки більше можливостей на ці можливості вони називаються атрибутами Тобто ми можемо їх цими атрибутами наділяти конкретний тег і самі ці атрибути мають також своєрідний синтаксис тобто синтаксис - це якраз методи на метод написання або правильного написання навіть в даному випадку ми наприклад бачимо що в нас наші атрибути навіть відрізняються іншим кольором тобто в нас червоним кольором Ну в мене конкретно тому то що в мене така тема стоїть у вас може бути трохи інше але в мене наприклад тех кольором червоним потім ключ від нашого атрибуту таким можна сказати пісочним або оранжевим кольором і зеленим визначається значення цього атрибуту тобто з цього всього можемо побачити що атрибути Вони мають незмінний синтаксис ми пишемо якийсь ключ тобто ключ під ключем я розумію якесь слово яке під собою містить або завжди підказує що вон взагалі який функціонал вона виконує піс потім ми ставимо дорівнює і в лапках ми пишемо значення е ми пишемо значення в лапках і воно може бути як одним словом так може бути як ціле речення але це розуміється як одне значення Тобто ми в одних лапках його записуємо в більшості наших тегів і ключів ее вони є певним скороченням від якогось цілого слова або Деколи може може бути і не скорочення в даному випадку Ні як name це як повне слово і контент але є в нас такі атрибути наприклад цечарс є RL є hrf тобто якесь скорочення від якогось цілого слова і ми можемо це е ну тобто ми розуміючи що взагалі Це слово таке ціле означає і ми будемо взагалі розуміти що він за що Який функціонал виконує той чи інший атрибут R В нас означає за relative тобто якусь якесь [музика] е відношення в даному випадку це тоже сталий вираз Style sheets це я маю Тут мається на увазі що я кажу що я створюю якесь певне посилання і це посилання відноситься до конкретно стилів тобто до CSS стилів про це ми будемо пізніше говорити але просто суть в тому що ми тут вказує якесь відношення і є ще такий ключ href тут можна сказати що це якийсь референс тобто щось якесь посилання в даному випадку це ми маємоказати тут якесь якусь ссилку на конкретний конкретний файл або це може бути якийсь зовнішній файл в даному випадку це це файл який знаходиться в нашому проекті тобто на одному рівні із нашим HTML документом також два слова за ці ссилки е ця ссилка яка знаходиться в проекті вона називається локальною і вона буде залежати навіть її початок буде залежати е від того На якому рівні знаходиться файл по відношенню до нашого HTML документу Наприклад якщо ми бачимо Ми хочемо підключати файл тобто створювати посилання на файл Style CSS ми бачимо що він знаходиться на одному і тому самому рівні що наш HTML тобто я можу написати тако крапка/ш і мені зразу vзкод підказує взагалі що на цьому рівні які є файли взагалі на цьому рівні Я бачу є там папка imд і такі то три файла це коли я пишу крапка і слеш якщо я пишу дві крапки і слеш це означає що я повертаюся назад Тобто виходить що я повертаюся назад в іншу папку і тут ви бачите тут різні папки тобто які не відносяться до цього проекту значить Нам не потрібно туди лізти ми почина маємо писати крапку СШ і бачимо в нас є наші файли Ми хочемо якщо ми бачимо створили якісь нові папки ми знову переходимо в них і знову вже добираємося до конкретного файла тобто оце називається локальна ссилка також є зовнішні ссилки які ми десь умовно можемо знайти в якомусь ресурсі ми їх просто копіюємо і вставляємо так так так так так Ага також можна побачити ее що наші html-теги вони побудовані на основі такої певної ієрархії або вкладеності тобто є якийсь один тег який містить собі все в даному випадку цей тег називається HTML тобто він містить собі буквально весь наш сайт і ми коли відкриваємо його ми можемо також ще сказати що він ніби знаходиться на якомусь першому або нульовому рівні або Ну як кому зручно тобто комусь зручно рівні рахувати вверх комусь вниз наприклад нульовий рівень В нас HTML і Ми рахуємо дальше наприклад на наступному рівні там на першому знаходиться наступний ряд наших тегів один з них Це є тег headad headad в перекладі з англійської голова і ми щось можемо навіть здогадатися у нас наприклад за що відповідає голова в людини і тут е е сам тех він відповідає за якусь таку комунікацію за е те щоб за інформацією комунікацією з іншими наприклад файлами або ресурсами що я маю на увазі за цю комунікацію тобто Ми створюємо такі певні посилання на якісь оце що я казав на файли або на це локальні або зовнішні посилання на якісь файли або якісь додаткові ресурси це може бути як шрифти може бути якісь іконки тощо також чому я сказав що це якийсь інформативний в нас є такі метатеги які ми використовуємо для того щоб описати нашу сторінку для нашого браузера і для пошукових систем е наприклад я тут вказую ну це такі стандартні теги але є в нас теги які дозволяють нам якось відобразити наприклад як як наш тег буде описуватися наприклад в нашому браузорі там наприклад який буде заголовок цього тегу який буде опис цього те цього нашої сторінки там Потім можемо окремо вказувати який буде опис конкретно в якісь соціальній мережі наприклад там в Твіттері це буде помітно коли ми робимо наприклад посилання ми копіюємо ссилку на нашу сторінку і комусь наприклад я думаю що ви бачили таке в телеграмі коли ви скидуєте наприклад ссилку на YouTube і воно автоматично підтягує таке як зображення таке цього нуто самого відео тобто і там може бути якась додаткова інформація там може бути якийсь опис там ще щось та опис Там зазвичай є опис і назва і Це ми так само можемо зробити наприклад з нашими цими ссилками ми можемо там на якісь соціальні мережі вставити це називається якраз метатеги дальше в нас є наш тег Боді тіло в перекладі е і це в цьому Тезі відображається все що ми хочемо ее що бачив наш користувач тобто оці звичайні оці наші ссилки оцю нашу інформацію про сторінку звичайний користувач не побачить крім одного тега це Title Тобто сама назва сторінки Та він це може побачити а решту він не побачить А те що ми поміщаємо в середину Боді це він буде бачити і в самомумелі є певний обмежений перелік тегів які мають своєрідний функціонал в більшості наші теги вони так як я казав є певним скороченням від якогось цілого слова або якогось більшого слова ее зараз секунду можливо щоб я не не збився з курсу е тако добре добре добре добре І зараз пройдемо частково якісь такі найбільш використовані те наприклад Наш тег pі ее він є певним скороченям від слова параграф Тобто ми розуміємо що ми взагалі розуміємо під словом параграф це якись частинка якогось тексту або якогось опису Наприклад якщо ми говоримо про м якщо ми говоримо про якусь статтю наприклад стаття має заголовок має опис тобто заголовок це в нас буде наш тег наприклад H1 якхдер А самий текст опис ми можемо відтворити за допомогою тегу P тобто параграф також оці два теги вони відносяться до категорії блокових тегів що я маю на увазі Під словом блоковий тег Наприклад якщо ми відкриваємой десь в браузері такого я зараз відкриваю в браузері якщо я відкриваю наш нашу от наш код в браузері що я можу побачити на над нашим заглувком коли я наводжу на нього Я бачу що його ширина тобто займає навіть він займає всю ширину мого екрану ну навіть чуть менше бо я тут зробив обмеження але він все одно простягається на всю ширину або можна ще сказати що він робить за собою якийсь абзац тобто і ми бачимо що ці теги вони створюють ніби як такий блок або цеглину тобто вони як розміщені один на одному і є в нас такі теги ее як вбудовані тобто вони в більшості використовуються для того щоб якось форматувати якийсь конкретний контент наприклад якийсь текст Наприклад якщо ми маємо в даному випадку якийсь текст і ми хочемо стилізувати тобто або якось виділити конкретно якесь якесь одне слово тобто що Що мені для цього необхідно мені необхідно створити новий тег вбудований вже і огорнути цим тегом конкретне слово як в даному випадку я використав тег спан І що я зробив я виходить огорнув цим тегом конкретно слово і потім зробив якусь певну стилізацію ну про стилізацію ми Пізніше будемо говорити але факт того що я використав я використав цей тег для того щоб якось виділити конкретне Слово також в нас є теги наприклад як тег А які він використовується для того щоб створити певну ссилку або посилання Ми також це робимо наступним чином ми знову огортаємо якесь певне слово в цей тег що я маю на увазі Під словом огортаємо тобто я створюю тег наприклад я створив тег А я розумію що ліва частина відповідає за початок права за кінець Я також знаю що ліва частина Вона має Може містити містити додаткові якісь можливості або функціонал і в даному випадку цей тег потребує ще вказати конкретно якесь посилання взагалі Ну куда він буде відсилати і цей атрибут називається hrf або і між цими двома колонами або стінками я пишу конкретно той текст який буде відображатися І який буде наділений конкретно цим функціоналом Тобто який буде виділятися Ну спочатку він буде виділятися від іншого тексту Зараз ми побачимо як він буде виділятися він буде виділятися спочатку іншим кольором і буде таке підкреслення Я думаю що всі бачили Це зазвичай так виділяють ссилку так Е що там в нас наступний наш тег Ага ее наступний наш тег називається emg Тобто це також скорочення від слова imд картинка е і цей тег він трошки відрізняється від від звичайних наших тегів він не потребує зазначення конкретно точки де він зупиняється тобто другої частинки Не потрібно і ми можемо що щоб це зробити тобто щоб написати його правильно ми маємо написати слово emg і ну зліва від нього буде знак менше А справа буде знак більше і перед цим знаком ми тако також ставимо цей слеш який буде який дає зрозуміти браузеру що цей тег він самозакриває тобто йому не потрібно ці ще одну як колону для того щоб відмітити де він закінчується і також цей щоб відтворити його коректно ми маємо вказати додаткові атрибути для цього конкретного тегу один з цих атрибутів є атрибут під назвою src Тобто це скорочення від слова Source джерело Тобто ми маємо вказати конкретно джерело нашої картинки або посилання на нашу картинку Якщо наша картинка міститься в нашому проекті ми робимо таке локальне посилання якщо Нам необхідно відтворити зовнішнє ми просто вставляємо сюди посилання також наш наступний атрибут який Ми включаємо в картинку Image emg називається Alt тобто він це певне скорочення від слова альтернативний тобто альтернативний текст якщо в випадку нашої сторінка десь ой картинка десь там не відтвориться зазвичай в цьому альтернативному тексті пишуть якийсь опис Наприклад якщо на картинці там не знаю Стріла то ми ми пишемо наприклад Стріла там отаке Тобто ми не будь-що пишемо а якийсь альтернативний текст тобто щось змістовне Також ми можемо добавити ще інші такі атрибути які в даному випадку визначають висоту і ширину нашої картинки але тут буде нюанс що нам необхідно вказати хоча б одну сторону другу ми можемо не вказувати тому що ми можемо цю картинку зіпсувати або розтягнути або стиснути тобто і також ми якщо картинка взагалі маленького розміру і ми Стараємося її збільшити то ми будуть бага будуть втрата самої якості буде цієї картинки наступний наш тег це є тег Button Тобто ми розуміємо це як якась кнопка так і по суті вона таку саму роль виконує кнопка ми тут щось написали в неї І вона відтворюється наступним чином ми бачимо натисніть мене е сама кнопка ми це про це напевно на другому занятті будемо говорити але вона там має певні типи і від цього типу секунду від цього типу буде залежати який він функціонал буде виконувати Тобто який функціонал буде виконувати ця кнопка дальше наступний наступний наш тег називається тобто наступний взагалі елемент який ми хочемо втворити це список тобто якщо ми розуміємо під списком взагалі це ее якісь конкретні речення які виділяються з поміж інших і Зазвичай вони е перед перед тим як починаються ее вони е Вони мають якесь якісь напевно якусь картинку або якісь певний елемент наприклад якесь колечко або квадратик наприклад в даному випадку ми бачимо що наш список має такі колечка перед перед початком і ще є один список має цифри в htmлі вони називаються невпорядкованими або маркованим маркований список і також упорядкований або нумерований список Тобто Ну ми розуміємо що нумерований - це тому що є якісь цифри тобто цифри ми можемо бачити як такі римські але є ще інші цифри але е не не впорядкований Або маркований він не має як такого нумерації є якісь якісь елементи в даному випадку якісь колечка отак і щоб його відтворити ми використовуємо е спочатку такий тег як контейнер тобто Ми створюємо умовно якусь коробочку яка буде вре всередині в собі містити ці елементи які будуть мати відображатися як список і цей тег називається ul Тобто це скорочення від unordered list тобто Тото не впорядкований список ми ми беремо два символа два слова перших і ми маємо unordered list і в середині цього контейнера або коробки е Ми створюємо Ще одні теги ми вже конкретно пишемо як елементи списку в даному випадку теглі - це як list item тобто елемент списку і ми вказуємо наприклад Скільки тих елементів Нам необхідно там 2 3 4 і так далі тобто Ми створюємо стільки елементів скільки нам потрібно і це буде розумітися браузером як що я хочу відтворити список ее так так так так так так Е тут також можна побачити що ее мене нічого не обмежує вставляти вредину теги оці вбудовані тобто я можна побачити що я огорнув декількома тегами три слова тобто і це мене нічого не обмежує ми можемо якось потім ці слова виділити споміж інших і в даному випадку якщо ми використовуємо такі теги То вони не мають між Ну якщо ми не фізично не поставимо пробіл між ними то вони будуть ніби як ее можна сказати зліплятися між собою ну тобто як ми розуміємо там речення має пробіли свої а вони будуть зліплятися між собою якщо ми не поставимо між ними пробіли е так так так так так ага це ми говорили за невпорядкований список і похожий список вже впорядкований називається наш контейнер або коробка називається OL тобто ordered list або нумерований список і Там Тут так само ми знову звертаємося до наш тегівлі як list item і створюємо стільки скільки нам потрібно цих тегів і вредині цього тега ми вже пишемо конкретно якесь контент або якесь Ну слова або що нам взагалі пони хідно дальше дальше що в нас агу Також ми можемо виділити в нашому htmлі такий можна сказати ще одну підкатегорію наших те та скоріше всього підкатегорію наших тегів і вони ця категорія називається семантичні теги взагалі самі саме слово семантика це вивчення значень слів і фраз у мові але семантичні це семантичні елементи або теги - це елементи з зі смислом тобто сематичний елемент чітко описує його значення як для браузера так і для розробника якщо в нас наприклад ми розуміємо ну тобто ми візуально розуміємо що там тег P - це параграф Імідж такий то такий то це зрозуміло але є в нас ще такий тег наприклад тег дів для браузера він Ну немає такого якогось чіткого опису він являє собою умовно якась пуста без іменна коробка тобто умовно тут є коробка яка розуміється як параграф або як місце для якогось тексту тобто коробка для яка використовується для якогось тексту тут наприклад Це коробка яка використовується для заголовку а оцей елемент дів він браузером Ну тобто він не має якогось чіткого такого пису і браузер не може зрозуміти для чого взагалі цей елемент він розуміє що це типа якийсь там блоковий елемент він там нічого собі не описує і ми в ньому щось там зберігаємо е цей елемент в більшості використовується для групування якихось інших елементів Тобто ми можемо всередину помістити декілька тегів і їх потім якось групувати ее це можна сказати прийшло з часом оскільки раніше не було таких семантичних тегів і раніше з тобто і зі зі зміною версій дійшли до того що необхідно створити таку такі певні семантичні теги щоб умовно розділяти наш нашу веб-сторінку на якісь конкретні частини наприклад ее ми розуміємо що наш сайт складається з конкретних таких елементів таких глобальних які е ну майже завжди наявні на цій сторінці наприклад навігація Е Там фу футер тобто низ низ ее е там де є всякі контакти там ще щось ще щось ще щось наприклад є якась основна частина там де наприклад весь контент е є якісь так і ця основна частина може також розділятися на певні такі підчастини нап вони називаються секції тобто є певні секції які які містять вже конкретно контент І також я пропустив ще такий елемент як headдеer ну тобто ми розуміємо Едер - це якийсь заголовок і умовно з зновою версію зробили такі семантичні теги які просто вже конкретно кажуть нашому браузеру от наступне тобто вони браузер бачить що є тегхедер і він зразу знає Ага тегхедер він використовується отут визначає заголовок документа або розділу і він зразу розуміє Ага хедер використовується для такого-то такогото Тобто це заголовок я точно знаю Тобто там є інформація про якусь там наприклад про сторінку і тут є наприклад тег Nav ее тут він визначає визначається як контейнер для посилань навігації і умовно написавши цей тег браузер буде розуміти тобто він проаналізував сторінку і бачить Ага там є тег naв А я якраз шукаю навігацію тобто я можу можна сказати пришвидшено знайти то що мені необхідно І наприклад в нас там є футер зазвичай футер там Я думаю що ви десь чули таке нижній колонтитул Тобто це в документі він тут зазвичай використовується для якоїсь там наприклад наприклад контактів також може бути посилання по нашій сторінці тощо і це також допомагає браузер якось пришвидшити пошуки на конкретному сайті ну на нашій наприклад на нашій сторінці секція це визначає як розділ в документі ми секції використовуємо для того щоб розділяти якісь секції ці частини конкретно В нашому сайті Тобто ми розуміємо що на сайті є навігація там якась основна сторінка щось там ще щось ще щось якась сторінка з якимись там картинками ще там щось наприклад футр Тобто ми вже я вже нарахував десь чотири елементи які ми можемо виділити як Якісь частини тобто або розділи от Ну як наприклад Ви читаєте якісь там в книжці параграф чи там якусь тему і там є своєрідні розділи тобто розділ ми розуміємо щось яке е тобто не подібне між собою це щось нове тобто є розділ один там умовно як в кни розділ оди розділ д розділтри тобто не не може бути такого що розділ один і розділ три прям ідентичні тобто вони чимось відрізняються між собою Тобто і тут так само ми вважаємо що секція - це щось як Новий Розділ в документі де в даному випадку наявні якісь інші там елементи там контент або якийсь функціонал Також ми можемо виділити ще такий аticle тобто тутто визначаю як незалежну автономну статтю Ну тут щось схоже до нашої секції але е ми можемо також використати наприклад коли ми умовно маємо сайт де міститься блог наприклад блог о ми можемо ми розуміємо що там блог містить там різні якісь там теми і ми можемо цю тему помістити в наш атикл тобто незалежну автономну статтю Ну це вже так як кому краще м тобто Великої різниці там не буде між секцією і цим article також в нас є тег називається Ей Тото визначає контент окрім основного контекту наприклад бокову панель то Ну тут з з самого опису Зрозуміло Що наприклад браузер умовно знаючи цю інформацію він вже на щось там розраховує тобто він каже Ага основна інформація міститься то а тут наприклад якийсь там контент щось може бути якась бокова панель от в даному випадку тобто і це якісь такі маленькі підказки для нашого браузера що шукати там о таке подібне details додаткові деталі summary визначає заголовок для елемента details тобто details зараз ми подивимося як він виглядає details detils і ми наприклад пишемо lorem і зараз виберемо sumary Ой і зараз подивимося як воно виглядає Де той наш А во як воно виглядає details тобто зі слова ми розуміємо якісь там деталі звичай що ми розуміємо під словом деталі Тобто Це щось таке Ну якась інформація яка звичай читається навіть не що читається а умовно Якщо так по-простому пишеться дрібним шрифтом типу що хто хоче Почитай тобто і ми тут так само можемо виділити наступним чином це ми робимо як таку якусь назву sumary це буде як назва цього цих деталей і ми відкриваємо їх типа щоб просто подивитися в цей текст Оце suar це details це наш тег details Я думаю що ви завжди бачили на різних там не знаю товарах там ще щось дрібним шрифтом щось там пише якась там інформація яка нікому не потрібна але це якісь там деталі тобто оце ми говоримо за details тепер що в нас там ще по наших семантичних тегах Ага Тайм тобто от от наприклад є тег такий Тайм Ну якщо ми в нас умовно є якийсь проект де дуже багато всяких якоїсь важливо інформації і одна із таких важливих інформацій це конкретно час наприклад час виїзду автобуса Тобто Це важлива інформація тобто ну комусь це важливо знати коли там виїде автобус коли приїде і таке подібне якщо ми говоримо за якісь там сайти пов'язані з автобусами тобто і ми виділяємо одразу це слово тобто цей Тайм Ой цей час виділяємо завжди в тег Time і браузер зразу от ну умовно людина шукає там автобус там ще щось ще щось написав в в Гуглі і написав якусь годину і браузер роз Тобто сама пошукова система починає шукати там годин ще щось І вона е якраз розуміє що в Тезі Тайм є конкретно час Тобто ми ж не просто будемо відмічати там будь-який час ми відмічаємо час як щось ну тобто важливу якусь інформацію яка буде важлива от в даному випадку яка стосується виїзду автобусу тобто і браузер розуміє ага в таймі я типер швиденько шукаю в таймі я бачу ага є важлива для мене інформація або для конкретної людини І це набагато пришвидшує пошук конкретної інформації необхідної пошуковою системою тому тому так і назвали що це семантичні елементи елементи зі смислом тобто вони дають більший опис про себе і сама пошкова система швидше знаходить цю інформацію також Марк він просто просто відмічає якимось кольором наш текст Ага Main ще є Main - це по суті щось основне в даному випадку ми можемо розуміти що Main є наприклад дер є навігація є Main це оце все і є футер тобто можемо так розділити Main - це по суті вся основна інформація яка наявна в нашому сайті в більшості це може бути там головна сторінка і там дуже багато всяких секцій і вони можуть належати до нашого Main А футер - це вже окремо е скажіть Можливо в когось питання виникли Ой я щось забув з ту камеру е так Зараз я подивлюся якийсь Ще цікавий тег тому що е нам трошки займе дуже багато часу щоб ми розглядали повністю всі теги бо є велика кількість тегів які ми по факту можемо ніколи не використати тобто і трошки недоцільно приділяти якомусь тегу час який ми ніколи по суті не використаємо е так що в нас ще є так от це Ми пройшли це Ми пройшли Угу AMG Select о подивимося Select так от Я думаю ви зустрічали такий такий елемент десь на якомусь сайті тобто що ви вам необхідно вибрати щось якийсь елемент з якогось там випадаючого вікна цей тег називається selк тобто сеelкт вибрати і ми це є контейнер для цього вибору і ми добавляємо всередину такі опшени тобто як значення що вибирати ми бачимо він виглядає наступним чином де він в нас є ага внизу в нас кава ми вибираємо чай молоко отак оце називається в нас вибір то сект Е подивимося що в нас ще такого цікавого З таких тегів є щоб я угу так так так так що в нас тут є таке Едер хедер хедер хедер Угу Добре тоді ми спробуємо перейти до Ага О ну зараз все спробуємо тоді є в нас такий тег називається iframe що він нам дає взагалі якщо в нас Якщо нам потрібно десь в нашу сторінку конкретно помістити ще одну сторінку Тобто ми тут розуміється як ну от є сайт наш і ми хочемо сюди всередину помістити ще один сайт але щоб він мав обмежену якусь там ширину висоту Що ми робимо ми використовуємо наш iframe для того щоб це зробити зараз я буду що я тут зробив таке Ага ясно От наприклад е сам звичайне посилання яке я по якому Я переходжу мене перекидує на якісь там картинку яку я тобто сам я сам сюда посилання це вставив мене перекидує на цю картинку але я не хочу щоб це перекидувало я можу змінити Е оцей ще один атрибут нашого тегу А в перекладі таargт означає якась ціль тобто в загальному ми якось визначаємо іншу ціль нашої ссилки в даному випадку є декілька варіантів для вибору Тобто parent - Це звичайний це означає що ми хочемо що при натисненні на ссилку ми відкривали той сайт в тій же вкладці тобто якщо ви бачили що в мене просто змінюлася ссилка я переходи на інший цей інш посилання тепер коли я натисну це посилання в мене відкривається нова вкладка в браузері тоді відкрива ться якраз ця сторінка це вже інша властивість Тобто ми можемо так зробити а також ми можемо відкрити конкретно наш сайт в нашому айфреймі тобто в тій ну виходитьфрейм це якась рамка то ми створиємо якусь певну рамку на конкретному нашому сайті І ми хочемо в ній же відтворити щось я бачу не загружає зараз спробуємо якийсь інший сайт наприклад цей Щось воно не хоче ее цей картинку цю відкривати зараз ми подивимося йой що ж таке Добре тепер я зміню і нажимаю посилання мені загружає тобто в маленькому можна сказати в маленькій рамці інший сайт оцей тобто оце великий сайт який я просто перейшов А це маленький який я відтворив в своєму же сайті тобто тому що ми зараз розробляємо буває зручно коли вам необхідно зробити якесь певне посилання от е нам в нас вже є от як в даному випадку наприклад якась бібліотека ну Тут мається на увазі е на ми по програмуванню наприклад шукаємо якусь там лекцію і ми бачимо о є прикольна лекція хтось там Типу зробив її ми робимо такий маленький опис до неї і робимо таке певне посилання в айфреймі на неї і людина ніби переходить їй загружається ця ссилка і все і людина будучи на вашому сайті поможе собі гортати другий сайт тобто і собі там читати умовно цю статтю там ще щось таке ми можемо ці ссилки змінювати тобто зробити такий один iframe тобто саму якусь рамку і вже просто міняти ссилки на нього як я взагалі це зробив я просто поміняв ну тобто я зробив створив тег а а він використовується для того щоб зробити посилання а також це певне скорочення від слова Ener Тобто це як його українською Якір Якір тобто він вам дозволяє зробити там Мона зачепити це як ссилка щось там ми зачіпляємо і я вказую просто як атрибут таarгет це як ціль назву конкретного цього айфрейму отут ви бачите я вказав не vт schol і вказав тут ціль vт schol тобто я сказав що мені необхідно відкрити ссилку конкретно не в якомусь там браузері якісь там вкладці а конкретно В айфреймі тобто і назвав написав назву цього айфрейму І ми бачимо відтворило Все як має бути тако що в нас ще за таких цікавих тегів Угу Напевно що ми зараз подиви дивлюся що я там чи нічого не перескочив отут можна побачити частинку таких вбудованих тегів які відповідають за форматування якогось тексту тобто Нам необхідно жирний текст жирним ми використовуємо тег B Нам необхідно вказати якийсь важливий текст або просто виділяється жир тоже Ми визначаємо тег Strong нам треба текст курсивом В нас є і або там itталік я думаю що так буде зручніше Я думаю в нас є важливий текст виділяється курсивом Також ми маємо тег м маk то помічати small маленький Dell видалений інс вставлений Sub підрядковий нижній індекс Тобто виходить що якщо нам треба якось змінити якесь конкретне слово ми огортаємо це конкретне слово в якийсь тег і потім він він наділяється тими властивостями конкретного тегу тобто ну розглядати повністю всі ці теги також буде недоцільно оскільки реальності з тих всіх тегів тут що я зараз Бачу ви можете використовувати реально один тобто а решту можете навіть ніколи не використовувати бо дуже рідко я думаю ви бачите десь на якихо сайтах якийсь там підрядковий або нижній індекс нижній індекс це розуміється Я думаю що ви бачили заходили на Вікіпедію Віки Там дуже багато різних отаких елементів є зараз якщо воно прогрузить Що там воно Вікіпедія о ми бачимо тут дуже багато на Вікіпедії ссилок і дуже багато є таких Де я зараз його знайду щось тут нема щось я напевно попав на таку сторінку де було дуже багато таких такого дрібного тексту який був над якимось словом Ану зараз ту пройдемо е Я думаю ви бачи О є я думаю ви бачили навіть в книжках є таке що пишуть якесь слово і потім ставлять отак двійку і якісь там ну щось там двійку наприклад Тобто це це означає що ми робимо такі певні відмічаємо номер порядковий в якомусь там такому списку чи словнику пояснюючому тобто Зазвичай це в книжках може бути внизу таке ми тут можемо в Вікіпедії воно деколи показує навіть якусь підказку ще щось таке оце називається якраз оцей індекс це вже верхній індекс надрядковий текст щоб його зробити ми робимо наступ Тобто ми маємо одне слово тако наприклад де в наш там е наприклад оце якесь там одне слово ми маємо і я тут хочу оце слово підняти верхній індекс я знов його просто огортаю і бачимо верхній індекс все працює угу так так так так так є така штука на ритковий Угу Та ее Я думаю що ми зараз зробимо перерву а наступне заняття ми вже поговоримо про ее Ну ми до можна сказати продовжимо поговорити про наші теги оскільки там є ще декілька таких тегів які ми дуже часто будемо використовувати просто ці теги вже мають ее вінже вони вже такі більш розширені мають більше можливостей і ми маємо Це трошки детальніше оглянути е так в загальному ми пройшлися по таких ее ну часто використованих тегах Які ми напевно будемо використовувати в кожному нашому проекті і так та і ми також пройшли про синтаксис написання наших htmlте скажіть Можливо по цьому всьому виникли якісь питання чи не виникають Ну че немає Добре давайте зробимо десь хвилин 10 або 15 перерви і будемо потім спробуємо подумати що робити оскільки це перша тема і спробуємо ще щось обговорити Алло так Добрий день угу Добре я зрозумів будем дивитися як і у вас наберу Угу добре та та та там щось було таке В нас є ми робили там щось казали що схоже на рижу там щось так так так я зрозуміла Добре дякую добре дякую задку на дивися скажіть чи ви мене чуєте бо в мене трошки пропало світло я мусив переключитися скажіть чи ви мене чуєте бо в мене трохи світло пропало А добре значить все добре Я просто я переключався і так тако ви вже тут так е давайте що ми зараз спробуємо е тако зараз де в мене тут тут а бачу я зараз я зараз вам скину е такі маленькі скріншоти я поробив І ми зараз просто ознайомимося ну я скину кожному окремо ви подивитесь е на тих взагалі картинках я виділив якісь елементи і просто побачити на наскільки багато наскільки часто використовуються оці теги що ми тільки от буквально пройшли там от декілька тегів Ми пройшли і просто побачте скільки взагалі на майже на кожній сторінці там вони буквально е Тобто їх дуже багато е такко Зараз я спробую тако тако тако тако скидую Марині Угу йдемо дальше скидую владу чекай А а Добре тепер йдемо дальше комаринаглад Вероніка скидую дальше йдемо тако Артем йдемо дальше і ще одна тем здається вона ви просто перегляньте цю картинку Ага я тут секунду А тут в тебе артемія тут дещо ще не повиділяв але я зараз просто розкажу за що я мав на увазі ви перегляньте ці картинки Я зараз просто почергово запитаю як ви можете взагалі як ви Ну тож чекай секунду Як ви взагалі Бачите як ви собі уявляєте взагалі що ці елементи мають виконувати на на тих сторінках тобто те що я говорив за оцю семантичні теги там наприклад тег Main тобто якась основна сторінка є якась там другорядна частина є що там є футер є навігація Едер тобто І що там є секції секції і аticle то ну в більшості секції і ті теги які ми частково розглянули це наприклад параграф хдер як заголовок список що там посилання картинка кнопка і сеelк Тобто ви зараз просто оглянете наскільки там На деяких сторінках їх прям дуже багато тобто і ми це обговоримо Давайте тоді тоді подивимося по в нас кому я першому скидував я скидував 3 4 5 я Марині скидув перше От ти бачиш я майже все тут по повиділяв червоним Тобто що ти можеш взагалі сказати які які ти вже побачиш знайомі або подібні теги які ми вже тільки що проходили тобто я їх тобто я виділяв якісь такі певні моменти з яких їх зразу можна взагалі вловити Ну будь-яких там на будь-якому сайті Тобто ми зараз дивимося наприклад в тебе сайт є якийсь і які ти взагалі зараз побачила тут знайомі теги або елементи можна сказати вже не теги а елементи якісь що щось там відтворюють тут я я попередньо сказав там наприклад це є заголовок там параграф список Що там в нас було кнопка що я що ме ще сьогодні А картинка ссилка і selк що ти зараз на цій картинці ти мене чуєш Марин бо я не знаю Просто бо я не чую тебе А ми тебе не чуємо значить я я чую о добре Скажи оглянувши цю картинку Е що ти можеш виділити Які Які взагалі теги ти можеш звідси виділити або елементи вже не теги а елементи що ти бачиш і як ти візуально їх розумієш ти можеш Ну тебе Ти можеш якісь думки сказати то тут нічого страшного нема Просто як ти розумієш це Тобто Ну ти заходиш на якийсь Сайт ти щось Бачиш там наприклад якісь Ти можеш виділити щось якісь глобальні такі елементи або маленькі елементи наприклад там заголовок або ще щось там Що ти можеш виділити з того всього що тобі зараз що тобі най най найперше спадає на думку типа оглянувши цю картинку заголовок Та і що в нас тут заголовок тобто то що дуже велике це вже заголовок Тобто ми бачимо заголок це добре що тут ще таке візуально підпадає під якийсь ну елемент або тег пам'ятаю пам'ятаєш я казав за такі маленькі кружечки там чи ще щось там картинки можуть бути циферки Ну тоже підпадає під якийсь певний тег пам'ятаєш як він називається Я казав тут ми розуміємо це як список тобто вони якісь речення вони виділяються зпоміш інших і вони мають якісь там кружечки або циферки Ліворуч від себе це на список Тобто ми вже бачимо що ми ми можемо відтворити список можемо заголок відтворити і звичайний текст Він зазвичай використовує для відтворення звичайного тексту ми зазвичай використовуємо параграф Тобто це для іншого звичайного тексту А що ти можеш сказати за наприклад оцей ліворуч такий елемент я розділив він такий великий Там буквально багато речень є всяких тобто що він на що він може натякати взагалі цей елемент такий Ліворуч від основної сторінки нашої від основного контенту тобто тут ми бачимо якісь там Quick Start installation що там describing The ui правильно я говорю чи ні Бо я щось А Та добре що воно на що воно натякає ну тобто що воно може тобі візуально підказати що це таке Ну можу тобі відказати якщо ми на сайті бачимо щось в такому вигляді ми це можемо відтворити як список чогось і в даному випадку під список може підпасти також якісь елементи які по суті виконують одну і ту саму функцію наприклад навігація що ми розуміємо під словом навігація ми розуміємо що це умовно якесь слово яке посилається на щось там ну в даному випадку на якусь частинку якогось ну нашої сторінки е бо є навігація умовно така внутрішня і ну є навігація Звичайно що ми можемо десь посилатися на якісь зовнішні ресурси але в більшості це наприклад Оце quickst installation це по суті якісь частинки якоїсь таммовно загальної там статті хай буде Тобто ми ми так розділили собі такими маленькими пунктами і можемо сказати що це все Навігація по конкретно якійсь там загальній величезній Ну от умовно книзі ми бачимо о ми ми бачимо книга є і є внизу є зміст О це напевно найкраще буде так в нас в книзі є зміст і ми і ми можемо швидко орієнтуватися що взагалі в цій книзі є Які теми і тут таке саме І оцей зміст Ми також можемо відтворити як список тобто і справа так само тут пише on this Page Тут також такий вони зробили ще деталізованіший цей цей не опис а навігацію Ми тоже можемо між маленькими статтями ще пере цей як це називається скролити Тобто ми нажимаємо на якесь речення і нам автоматично скролить робить таку мінімальну навігацію Також ми можемо побачити тут в нас є наприклад лого сайту воно завжди в більшості напевно сайтів воно десь зліва вверху тобто лого ми бачимо якась там іконка і також ми можемо бачити таки глобальну навігацію Тобто Це була така навігація умовно ее така може можливо деталізована а можливо якогось конкретного розділу А в нас є навігація така глобальна така вже яка нас посилає між розділами тобто є там наприклад в тебе пише learn потім reference Community блоog це вже такі глобальніші посилання Вони завжди десь там є уверху або навіть вони дублюються ще також внизу у футрі і в нас є певні такі кнопочки які дають нам якись додатковий функціонал це якісь там тему змінити мову перекласти щось таке Та ти не не встидайся щось говорити це треба просто чому чому я взагалі почав цю тему тому що нам треба завжди розуміти як ми можемо описати взагалі якийсь Сайт тобто якщо ми будемо умовно комунікувати навіть там з якимись членами команди або з дизайнером Тобто ми не просто маємо сказати людині О я бачу тут якусь іконку зліва вверху то зліва вверху тобто і потім після такого опису виникають додаткові питання де зліва вверху там ще щось ще щось А ви кажете я бачу зліва вверху там лого і ну це зразу зрозуміло лого там я бачу Тото Тото тобто я я ми можемо виділити якісь певні частинки за якими ми можемо зразу же тобто Описати якусь частинку сайту і більшості там дизайнери там які розробники вони розуміють це ну можуть вони вас зрозуміють співслова Тобто ви сказали навігація все о навігація знаю там то навігація тобто якщо ми скажемо там чотири слова десь там уверху ну тобто ніхто не ну ніхто не зрозуміє навіть там чи якась інша людина не зрозуміє взагалі про що йде мова тому я якраз чому я почав за це говорити Давайте ми перейдемо тоді до Влада що ти бачиш на цій картинці Ну я бачу лого я бачу а лого де знаходиться лого де знаходиться е в верхньому лівому куті Добре Добре молодець дальше е зліва я бачу ну фото товару та Та є така штука бачу клопку ага є що ще можеш тут виділити ну ну три посилання Я ще бачу угу ага Та є такі штуки посилання є е ну і так і тут ще можна виділити такий глобальний тег як headдеer я казав що в більшості в таких тегах Ми залишаємо якісь контакти Тобто ми бачимо там графік роботи якісь телефони там емейли посилання на соцмережі Тобто це ми можемо сказати що це якісь контакти ми можемо це помістити в якийсь хедер і ми бачимо незабаваю вверху є оце про нас контакти допомога це по суті Навігація по сайту Тобто ми ми ми ж не переходимо в якийсь інший сайт ми ми ми можна сказати переносимося до якогось іншого розділу отак чому я тут виділив ще таким червоним якісь інші елементи тобто щоб ми побачили що крім таких звичайних елементів ми можемо виділити якісь певні такі е функціональні елементи наприклад Ввійти в кабінет тобто тут пише там ввійти реєстрацію Ну тут це можна сказати вже такий елемент для входу або особистий кабінет можна коротко так назвати можемо ще виділити от я виділив там де доставка і гарантія оплата це може бути тоже якесь окрема секція або навіть оцей есайт тобто якась частина від ее збоку від нашого основного контенту по факту вона робить якийсь там опис нам Ну і та і в нас є ще я забув виділити в нас пише пошук по каталогам це можна сказати також певний функціонал конкретного сайту Тобто Це пошук по нашому сайту також можна називати тобто Зазвичай вони виглядають таким чином тобто є якесь поле для уводу і є зазвичай якісь там ці лупа намальована отак е так добре добре Давай ми тоді перейдемо до Вероніки що ти скажеш Вероніка що ти тут бачиш Вероніка ти тут І що ти можеш сказати взагалі як що тобі найбільше кидається в очі з цих всіх всякого тут тексту У тебе Вікіпедія тут багато всього що подібне картинка Так так Ну так є Тобто там Ми вже по суті можемо відтворити там д ящо що що ще щось тут знайоме можеш побачити візуально таке Ну виділений шрифт Угу жирний Ну та та та До речі да Та я щось це навіть Та ну це якраз оці такі виділені жирним наприклад синім таким курсивом це по суті також тоже теги тоже ми їх використовуємо для того щоб це зробити Та це точно От синім зазвичай в Вікіпедії позначають посилання тут бачимо дуже багато синього тут багато посилань є Тото це все посилання Але це вже можна сказати посилання такі більш глобальніші тому що вони посилаються на якусь іншу статтю це та такі посилання по самому сайту але вони між статтями зазвичай роблять а у тебе зліва О такий є пише котен і там різні штуки якісь там тексту багато Е що тут Ти можеш ще про це сказати що це таке Ну тут навіть умовно дивитися на сам контент ми можемо побачити що вони наприклад можть стосуватися якоїсь там подібної теми або одної теми і ми можемо знову ж таки сказати що це якесь також посилання ну для конкретно якоїсь там теми ну Вікіпедії може бути і між статтями але це також посилання можуть бути і можна побачити що вони ніби виділяються так тобто є якісь там два слова потім абзац Тобто ми можемо це також Враховувати що це якийсь список який по суті містить якісь слова які виступають як посиланнями але вони по суті виконують той Ну вони виконують один і той самий функціонал це посилання тобто на якісь Ясь там або статтю або між статтями там між розділами щось таке що в нас тут є ще Ага тут бачиш в нас вправо вверху пише Create account logіin що в нас це може підказувати нам на який нам функціонал може натякати Ну я попередньо якраз сказав з кимто його з Владом здається говорив Ну Зазвичай ми Заходимо на будь-який сайт і нам просять зареєструватися Тобто ми реєструємося для чого ми зареєструємося для того щоб створювати особистий кабінет ми можемо назвати це таким чином це то в нас це можна сказати фун фціонал для створення особистого кабінету або входу в особистий кабінет по суті це для того і робиться Ну от створити акаунт Ну звичайно що якщо ми говоримо за сайт це Так там ми вже не говоримо за якісь інші там ігри чи ще щось але на сайтах це зазвичай робиться особистий кабінет деє якась інформація якісь там додаткові там якісь збереження якісь там ще щось ну але це ми розуміємо функціонал особистого кабінету то ее Також ми бачимо пошук є і не забувай що там вліва вверху пише Вікіпедія що це в нас там ще яка картинка намальована е зліва вверху там пише Вікіпедія і такий Глобус намальований що це як ми можемо це назвати на нашому сайті Ну здивіться хто це говорив Влад здається говорив логотип чи що Та та та логотип лого нашого сайту це логотип так добре добре добре Ну так також верніка ти не не вдайся ти ну ти можеш висловлювати свою думку це ее не думаю що це може бути щось неправильне чесно ми тут всі вчимося я просто тобі Ну запропонував сказати що що ти бачиш взагалі Звичайно що не може зразу все тут там все роз розкласти по полочкам але просто щоб ви розуміли так само як ви відкриваєте книжку ви тоже щось виділяєте там в книжці умовно там зміст там явно пише Це зміст там умовно що там заголовок там якийсь текст Там картинки тобто розділяючи по таких елемента моментах ми вже просто самі собі підказуємо як їх ми можемо відтворити це же ми не просто так називаємо там Ну от ми бачимо картинку Тобто ми щоб відтворити картинку ми звертаємося до конкретного тегу там імg все ми все ми тут питання закрили йдемо дальше ми бачимо заголовок Ага зазвичай заголовок Він завжди виділяється там якимось жирним шрифтом або великим шрифтом і ми зразу собі підказуємо Ага заголок В нас виділяє Тобто ми Ми відтворюємо загалок там за допомогою там H1 H2 і так далі Тобто ми вже собі підказали йдемо дальше в нас бачимо звичайний текст тобто якимось одним зазвичай на одном одним шрифтом там без всякого виділення витворюємо параграф все ми собі самі підказали тобто і Ми вже знаємо що робити ми знаємо ми знаємо три тега там тег і MG h1p і все ми відтворюємо наприклад якісь певну частинку якогось там сайту ми вже її відтворили і ми дальше йдемо дивимося якісь там посилання ще щось там ще щось там і ми собі думаємо Ага я можу це зробити як список тобто список якихось там посилань все я знаю а список в мене є такийто тег тобто я це можу зробити чому я взагалі почав таку тему тому що зазвичай ми тпа починаємо робити там з маленьких завдань там дальше дальше і просто хтось може дивити бо я буду давати на наприклад домашнього завдання якусь там от умовно скріншот там частини і треба відтворити то що ти бачиш тобто якщо там буде картинка там умовно заголовок і текст і ти ну тобто треба якийсь тег використати щоб це відтворити і Ти вже сама можна умовно з оглянувши в цю картинку там скріншот ми вже зразу розуміємо Ага це картинка це то це це со і для цього ми маємо відповідні теги і все і ми типа не задумуючись беремо пишемо тег і все і ми відтворили тобто Таким чином ми Так поступово йдемо щоб ми розуміли що ми взагалі відтворюємо тому що якщо ми не будемо знати тих конкретно якісь елементи сайту Ну ми Ми просто будемо не розуміти що взагалі відтворювати тобто іде йде мова умовно там якась навігація і і всі так думають Блін що це за навігація це що треба десь там в Google Maps лізти чи ще щось там і ну а навігація - це що ж це ж посилання по сторі по тому по нашому сайту тобто і все і ну тобто ми це не мова про якісь карти там ще щось це Навігація по сторінці вона вона відтвориюється таким чином що ми просто змінюємо можна сказати цей ну ми скролимо до конкретного якогось там абзацу чи конкретно якогось пункту нашого там нашої статті умовно Тобто це навігаєція така швидка Навігація по факту це виглядає що ми просто натискаємо там ссилку і воно просто скролить до відповідного пункту оце навігація тобто ну щось схоже звичайно на Google тому що ми в Гуглі там Google Maps ми пишемо там умовно адресу і нам типа зразу там вибиває місце там тобто щось схоже на це е ми казали що ми зараз будемо говорити з Артемом Де він є в нас я давай Артем Що там ти бачиш на цій фотографії я бачу виділений жирний текст І що це за виділений жирний як це правильно називається ну це Як ти Бачиш От ми говорили за заголовок там або звичайний текст цеце заголовок Так це заголовок Так що ти ще тут бачиш таке Ну звичайний текст ти бачиш Та та да звичайний текст мичим як ми це розуміємо тобто в нас є заголовок в нас є параграф тобто звичайний текст в нас до чого найбільш підходить ти щось пропав чи то я пропав Не знаю ви Вас погано чути в мене може інтернет поганий може в мене поганий блін то щось тільки що було добре Щось в мене пропало світло і почало все псуватися Ой добре тут є ссилка та і де тут сама ссилка є на там де пише підручники там htmail а та та та тобто самі виходить посилання між нашим якоюсь там загальною темою тобто джаваскриптом наприклад Та добре що ти ще тут бачиш там у нас є така в нас там є така маленька навіть не іконка А такий текст напи написано ін що щось воно нам підказує Правда щось воно таке ін що воно зазвичай нам може підказувати Я думаю ти це ма ба типу колися розгортає допустим пише чуть-чуть текста нажимаєш на і там повний текст Ні тут я мав на увазі трохи інше рівні з заголовком Там пише так ін ну типа як N English Я бачу то даному випадку ін вони так певне скорочення для переключення мови тобто на англійську тобто можеш сказати Можна сказати функціонал переключення мов або цього перекладу Що ти ще тут бачиш таке Ми якраз говорили за посилання Тобто ми говорили посилання про по конкретній темі А які ти ще бачиш ту я бачу тут перехід зі сторінок тут пише Next та та добре Так є така штука А ще в нас вище є тоже такі там HTML CSS javascript це що ми можемо як ми можемо це описати То мову програмування чи що Ну так але ну ми зараз не говоримо за мову програмування ми говоримо за суто ті як ті елементи що вони взагалі роблять ну в даному випадку ми бачимо що це різні якісь там мови програмування але по факту воно що що воно нам робить коли ми натиснемо на них ти тільки що казав переки та та Тобто це тоже посилання це також навігація навігація але вже така більш глобальніша між якимись розділами бо це була навігація ліворуч така в ну в конкретній темі там наприклад тема в даному випадку ну javascript А оця навігація вона така глобальніша Тобто це вже навігація між великими розділами там секціями а тут ми навігацію в конкретній темі робимо Також ми бачимо там що миту Ну і лого тут ми бачимо тоже тут таке лого та V School ту то таке лого в них на тому сайті і бачимо там є така лупа на ще бачу палітру кольорів Та тут тоже якийсь функціонал чогось там палітри кольорів і така лупа В нас є справа може помітив що вона нам Може взагалі підказувати не бачиш да як на лупу там можна написати та та тобто що вона нам дає що або Я самий допустим вибрав що я хочу Та написати Ну це Та ти правильно цей ведеш це якийсь такий банальний пошук що я хочу знайти по нашому сайту Тобто це тоже умовно певний функціонал ми розуміємо що це Це пошук Тобто ти візуально розумієш зразу що це таке і нас зазвичай дуже часто вибражають у формі будиночка що там ми відображаємо у формі будиночка на сайтах це головна сторінка Ну правильно Бачиш Все круто тоже посилання на головну сторінку тобто все ми бачимо ми все тобто все правильно та Добре йдемо тепер до наступного Артема де на Артем ми зараз дивимося тако Де наш другий Артем тута кажи що ти тут бачиш взагалі ее Ну що лого Так є якась навігація так пка пошуку заголовок текст фото угу угу ну справи типу щось переходити по темам на цьому сайті та та та тобто щось на схоже на на Та так є виділення шрифту та та та та До речі да да виділення шрифту на Ну ще є кнопка зміни теми на світлобо А да дійсно так і тут ще можна звернути увагу в нас є конкретно тег називається тег код тобто коди пишеться і він просто що він робить він форматує текст і робить його під певний конкретний шрифт який дуже часто використовується для написання коду там я не пам'ятаю як правильно можливо чули за шрифтом називається убунту А він просто вигляд має такий ніби як написаний код Тобто ми просто можемо виділити огорнути в тех код і він просто змінює як саме відображення шрифта отак і тут можемо так також сказати Ну Зазвичай це якраз отут ми відображаємо якийсь код тобто в більшості на таких сайтах Це я зробив скрін з якогось з бібліотеки конкретної і е вони дуже я яскраво виділяють якийсь певний код тут ми можемо побачити навіть візуально що Ну тут дуже багато всякого там білого тексту Там фіолетового тобто на чорному фоні але дуже яскраво виділяється конкретно поле де є Де є код Там червоні е ці зелені жовті то дуже Яскраво і тут Так Якраз так само як в скот робить Він дуже яскраво виділяє код що ми явно Бачили там конкретні елементи А так все правильно та Молодець так добре ну це Можна сказати ми ми тільки почали я просто не може щось так придумати для на першу на перше заняття щось таке таке с не знаю чи простіше чи складніше але просто це тоже така доволі важлива тема яку ми повинні ми повинні розуміти що ми взагалі відтворюємо тобто бо ми за Зазвичай ми працюємо ми бачимо візуально і відтворюємо це в коді ми будемо працювати Ну спочатку ми будемо працюва я буду скидувати суту фотографії а потім ми вже будемо працювати по таких макетах тобто і хтось там зробив макет дизайнер І ми будемо по них працювати І це все тоже в наі все візуальна частина Тобто ми бачимо там то і ми маємо розуміти що це конкретно якась частинка там умовно навігація там ще ще щось е зараз секунду [музика] Мене чути чи я пропав Ні мене чути Добре бо я в мене та і чекайте що я говорив скажіть Можливо в когось виникне питання по цьому всьому що ми Сьогодні оглянули розглянули Ні нач немає ні все зрозуміло правда Все можна зразу починати писати сайти Все добре Та ну добре ми тоді я постараюся чим пошвидше вам підготувати якусь домашню роботу і також підготую якісь посилання для того щоб перечитати те що ми сьогодні пройшли тобто в мене є один хороший ресурс де я і до то я з нього також починав читати Тобто де там є Ну доволі все те що потрібно і з багато прикладів це що важливо щоб ви бачили візуально як це виглядає тому чому я так звертаю завжди увагу на це візуальне тому що там наприклад буде написано якийсь код і нам потрібно бачити як він що він відтворює тобто бо ми працюємо завжди по Тобто ми те що ми бачимо те ми і відтворюємо і на цьому сайті є багато прикладів де ми можемо побачити ее багато коду і багато прикладів що він взагалі відтворює е-е там здається що та і ще щось підготую якесь маленьке якесь таке практичне Де також буде умовно якась фотографія і треба буде з ну по візуальній частині з'ясувати який саме там нам тех найкраще підходить для того щоб це відтворити якось так е добре Мені здається що в нас було шестеро хтось не зайшов Ага Марини нема Ясно побачив Ясно Ну добре тоді будемо на зв'язку в кого будуть виникати питання протягом тижня не соромтеся пишіть звертайтеся щось буде потрібно допоможу або щось не будете розуміти там в домашній роботі що куди заходити там там можете писати Все тоді до побачення до побачення