Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Челендж: Структура Документа | Структура Документа
Знайомство з HTML
course content

Зміст курсу

Знайомство з HTML

Знайомство з HTML

1. Веб Розробка
Світ ВебуЩо таке Інтернет?Розуміння того, як Працює ІнтернетЯк Працює Веб-СайтFrontend проти Backend
2. Теги та Атрибути
ТегиАтрибутиПарні та Одиночні тегиРозмітка ТекстуЧелендж 1: Розмітка ТекстуЧелендж 2: Розмітка ТекстуЧелендж 3: Розмітка ТекстуРозмітка Тексту Спеціального ПризначенняЧелендж: Розмітка Тексту Спеціального ПризначенняВалідація
3. Структура Документа
Секрети Структурних Веб-сторінокСтруктураHead ДокументаПотік ДокументуЧелендж: Структура ДокументаІнструменти Розробника
4. Медіа та Таблиці
Магія Мультимедіа та Динамічних ТаблицьЗображенняЧелендж: ЗображенняЗображення Спеціального ПризначенняГрафічні ФорматиВбудовування Аудіо та ВідеоЧелендж: Аудіо та ВідеоТаблиціЧелендж: Таблиці
5. Форми
Сила Форм: Взаємодійте та ЗалучайтеОснова для Створення ФормиLabel для Input ЕлементаАтрибути Елементу Input Типи Елементу Input Челендж: Input та LabelЕлемент TextareaЕлемент SelectЕлемент DatalistГрупування Елементів Форм

bookЧелендж: Структура Документа

🏁 Мета

Створіть правильну веб-сторінку, створивши базову структуру HTML-документа. Ця структура є основою кожної HTML-сторінки і складається з основних елементів, необхідних браузерам для правильного відображення вашого контенту.

Примітка

Нехай вас не вводить в оману уявна простота дизайну веб-сторінки. Хоча це може здатися простим, надзвичайно важливо підтримувати правильну структуру документа. Це гарантує, що веб-сайт зберігає читабельність і функціональність у всіх браузерах.

📋 Завдання

Створити базову структуру HTML-документа. Якщо ви вже впевнені у своїх здібностях, можете продовжити роботу без покрокового керівництва. Однак, якщо вам потрібна додаткова допомога, ви можете скористатися покроковою інструкцією, яка допоможе вам у виконанні завдання. Інструкції / Челендж

📝 Step-by-Step Guide

Step 1: Start the HTML Document

Begin by typing the HTML doctype declaration, which tells the browser that the document is written in HTML. The declaration should be the first line of your HTML document:

Крок 1: Початок HTML-документа

Почніть з введення оголошення doctype, який повідомляє браузеру, що документ написано мовою HTML. Це оголошення має бути першим рядком вашого HTML-документа:

Крок 2: Додавання відкриваючого та закриваючого тегів HTML

Після оголошення типу doctype додайте відкриваючий і закриваючий HTML-теги. Уся структура HTML-документа буде міститися у цих тегах. Додатково додайте атрибут lang, щоб вказати мову документа:

Крок 3: Створіть head розділ

Додайте відкриваючий і закриваючий теги <head> всередині тегів HTML. Head містить мета-інформацію про HTML-документ, таку як заголовок і посилання на зовнішні таблиці стилів:

Крок 4: Додавання заголовка

У тегах <head> додайте відкриваючий і закриваючий теги <title>. Текст, який ми введемо між цими тегами, буде відображено як заголовок веб-сторінки в рядку заголовка браузера або на вкладці:

Крок 5: Створення Body секції

Після розділу <head> додайте відкриваючий і закриваючий теги <body>. Секція body містить видимий вміст веб-сторінки:

Крок 6: Додавання вмісту до body

Ми можемо додавати елементи всередині тегів <body>, такі як заголовки, абзаци, зображення, посилання тощо. Ось приклад додавання заголовка і абзацу:

🔍 Спробуйте самі!

html

index

css

index

js

index

copy
Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 3. Розділ 5
some-alt