Пошук уроків, статей та іншого контенту
Створите першу HTML-сторінку з правильним каркасом і відкриєте її в браузері.
HTML — це мова розмітки, яка описує структуру вебсторінки. За допомогою HTML ми визначаємо:
заголовки;
абзаци;
списки;
зображення;
посилання;
інші елементи сторінки.
HTML-файл — це звичайний текстовий файл із розширенням .html. Браузер читає його та відображає результат як вебсторінку.
Створіть нову папку, наприклад first-page.
У цій папці створіть файл index.html.
Відкрийте файл у текстовому редакторі.
Додайте базову структуру HTML-документа.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Моя перша сторінка</title>
</head>
<body>
<h1>Вітаю на моїй першій HTML-сторінці!</h1>
<p>Це мій перший вебдокумент.</p>
</body>
</html>Збережіть файл після внесення змін.
<!DOCTYPE html>Цей рядок повідомляє браузеру, що документ використовує сучасну версію HTML.
Декларація DOCTYPE не є HTML-тегом, але вона необхідна для правильного режиму відображення сторінки.
<html><html lang="uk">
...
</html>Елемент <html> є коренем документа. Усі інші HTML-елементи розташовані всередині нього.
Атрибут lang="uk" вказує, що основна мова сторінки — українська.
<head><head>
...
</head>У <head> розміщують службову інформацію про сторінку. Ця інформація зазвичай не відображається безпосередньо в основній області сторінки.
У прикладі всередині <head> є три елементи.
<meta charset="UTF-8">UTF-8 дає змогу правильно відображати українські літери та інші символи.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Цей елемент допомагає сторінці коректно відображатися на екранах смартфонів, планшетів і комп’ютерів.
<title>Моя перша сторінка</title>Текст усередині <title> відображається:
на вкладці браузера;
у назві вікна браузера;
у закладках, якщо сторінку зберегти.
<body><body>
...
</body>У <body> розміщують увесь вміст, який бачить користувач на сторінці.
У нашому прикладі це заголовок і абзац:
<h1>Вітаю на моїй першій HTML-сторінці!</h1>
<p>Це мій перший вебдокумент.</p><h1><h1> позначає головний заголовок сторінки. На одній сторінці зазвичай використовують один основний <h1>.
<h1>Назва сторінки</h1><p><p> позначає абзац тексту.
<p>Текст першого абзацу.</p>
<p>Текст другого абзацу.</p>Щоб переглянути створену сторінку:
Збережіть файл index.html.
Відкрийте папку first-page.
Двічі клацніть файл index.html.
Сторінка відкриється у браузері.
Також файл можна відкрити через меню браузера або перетягнути його у відкрите вікно браузера.
Після зміни HTML-коду потрібно:
зберегти файл;
оновити сторінку в браузері.
Для оновлення сторінки можна натиснути F5 або кнопку оновлення в браузері.
Спробуйте змінити текст і додати ще один заголовок та абзац:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Про мене</title>
</head>
<body>
<h1>Про мене</h1>
<p>Мене звати Олена. Я вивчаю HTML.</p>
<h2>Мої цілі</h2>
<p>Я хочу навчитися створювати вебсторінки.</p>
</body>
</html>Елемент <h2> позначає підзаголовок, який є частиною структури сторінки.
Заголовки мають рівні від <h1> до <h6>:
<h1>Головний заголовок</h1>
<h2>Розділ</h2>
<h3>Підрозділ</h3>Не варто використовувати заголовки лише для збільшення тексту. Їхнє основне призначення — показати структуру документа.
Коментарі допомагають залишати пояснення в коді. Браузер не показує їх на сторінці.
<!-- Це головний заголовок сторінки -->
<h1>Моя сторінка</h1>Коментар починається з <!-- і завершується -->.
Перевірте, що назва файлу закінчується на .html, а не на .txt.
Правильно:
index.htmlНеправильно:
index.html.txtDOCTYPEБез <!DOCTYPE html> браузер може використовувати несумісний режим відображення документа.
Більшість елементів мають відкривальний і закривальний теги:
<p>Абзац тексту</p>Якщо забути </p>, структура документа може працювати неочікувано.
Основна структура має виглядати так:
<html>
<head>
...
</head>
<body>
...
</body>
</html><body> не потрібно розміщувати всередині <head>, а <head> — усередині <body>.
Після редагування файлу збережіть його та оновіть сторінку в браузері.
Створіть сторінку про себе. Додайте:
назву сторінки в <title>;
головний заголовок у <h1>;
два або більше абзаців у <p>;
підзаголовок у <h2>.
Приклад структури:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Про мене</title>
</head>
<body>
<h1>Мене звати ...</h1>
<p>Я вивчаю веброзробку.</p>
<h2>Мої інтереси</h2>
<p>Мені подобається ...</p>
</body>
</html>HTML-файл має розширення .html.
Базова структура документа містить <!DOCTYPE html>, <html>, <head> і <body>.
У <head> розміщують службову інформацію, зокрема кодування та назву сторінки.
У <body> розміщують вміст, який бачить користувач.
<h1> використовують для головного заголовка, а <p> — для абзаців.
Щоб переглянути HTML-сторінку, відкрийте файл у браузері.
Після змін у коді файл потрібно зберегти, а сторінку — оновити.