Embedded Files
HTML (Hypertext Markup Language) - мова розмітки гіпертекстових документів використовується для створення веб-сторінок і веб-додатків.
Наприкінці 1991 року Тім Бернерс-Лі опублікував перший загальнодоступний опис мови розмітки HTML, відомий як документ «HTML-теги». В ньому були описані 20 елементів відносно простої схеми розмітки HTML.
HTML5 — найпоширеніша нині версія мови HTML, яка в 2004 році прийшла на заміну стандартній HTML. https://uk.wikipedia.org/wiki/HTML5
Вона дає можливість полегшити користувачеві навігацію сайтом завдяки розмітці областей веб-сторінки за допомогою певних тегів, які описують основні елементи, що є спільними для всіх веб-сторінок.
Тіло сторінки умовно поділяється на блоки з відповідними назвами (як на картинці).
Теги – службові символи (команди HTML), що вказують браузеру, як слід відображати Web-сторінку. Теги починаються і закінчуються кутовими дужками.
Елементи гіпертекстового документа мають таку структуру:
Основні теги. Теги можуть бути парними і непарними.
Теги для форматування тексту:
<p> текст </p> Початок нового абзацу. Абзаци відокремлюються порожніми рядками. Якщо закриваючого тега немає, вважається, що кінець абзацу збігається з початком наступного абзацу або іншого блочного елемента.
<br> Непарний тег. Перехід у новий рядок. Текст буде наведено у новому рядку без пропуску рядка, як у випадку використання <p>
<hr> Непарний тег. У рядку буде проведена горизонтальна лінія
Для створення HTML-розмітки документа використовують будь-який текстовий редактор.
Для перегляду HTML- документа використовується браузер.
Завдання 1.1. Створення простої веб-сторінки
У папці Роботи учнів створіть папку зі своїм прізвищем, а в ній папку Web_Design, а в ній папку Урок2
Запустіть програму VScode
Виконайте команду Файл - Open Folder.
Оберіть папку зі своїм прізвищем та клацніть Урок 2
У папці Урок 2 створіть файл з іменем 1.html для майбутньої веб-сторінки. Для цього клацніть кнопку зі знаком “+” і впишіть назву файла
У тексті файлі введіть знак оклику ! і натисніть Tab або Enter. Автоматично появиться шаблон веб-сторінки. Це спрацює, якщо встановлено Emmet (він є за замовчуванням у VS Code).
Результат буде таким:
<!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>
</body>
</html>
Доповніть сторінку інформацією про себе.
Завдання 2.1.
У папці Урок 2 створіть файл з іменем 2.html для майбутньої веб-сторінки. Для цього клацніть кнопку зі знаком “+” і впишіть назву файла.
У тексті файлі введіть знак оклику ! і натисніть Tab або Enter. Появиться шаблон.
Змініть заголовок web-сторінки на "Філософія життя".
Скопіюйте текст з файлу Тема2-1-1.txt і вставте його в тіло документа 2.html.
ВІдформатуйте текст згідно зразка, скористайтеся тегами <p>,<br>, <hr>.
На зразку немає закриваючого тега </p>. Як ви думаєте, чому?
Page updated
Google Sites
Report abuse