Попередня сторінка: 21. Автоматизовані засоби для створенн...
Наступна сторінка: 23. Форматування символів
22.1.
ПОНЯТТЯ ПРО МОВУ HTML
У попередньому параграфі було вказано, що існує два підходи для створення вебсторінок. З першим, автоматизованим способом, ми вже познайомилися, розглянемо другий спосіб.
Мова гіпертекстової розмітки HTML розшифровується, як Hyper Text Markup Language — це мова розмітки гіпертексту для подальшого його відображення у вікні браузера. Являє собою сукупність тегів та правил їхнього застосування.
Тегом називається так званий код мови і являє собою службове слово, записане в кутових дужках < >. Наприклад <html>.
Правила запису тегів
1. Теги записують латинськими літерами.
2. Регістр у тегах не розрізняється.
3. Існують парні та непарні теги. Парні теги містять відкриваючий і закриваючий теги. Закриваючий тег починається символом «/» (слеш).
Наприклад, парні теги — <html></html>; непарні теги <br>, <hr>.
22.2.
СТРУКТУРА HTML-ДОКУМЕНТА
Для правильного відображення браузером вебсторінки слід дотримуватися певної структури html-документа (рис. 22.1):
Рис. 22.1. Структура html-документа та відповідне відображення в браузері
Рис. 22.2. Позначення тіла документа в html-коді та у вікні браузера
22.3.
СТВОРЕННЯ ВЕБСТОРІНКИ
Для створення вебсторінок існує безліч різноманітних редакторів (Notepad++, Brackets, VS Code тощо). Проте в якості редактора html-ко-ду підійде і звичайний блокнот. Подальші поясненя ми будемо здійснювати з використанням редактора NotePad++. Цей редактор є зручним у використанні, також його безкоштовно можна скачати з мережі Інтернет.
Алгоритм створення вебсторінки
1. Відкрити редактор коду для введення html-коду.
2. Увестиь html-код.
Це може бути найпростіший html-код з дотриманням загальної структури документа (рис. 22.3).
Аби браузер міг відтворити створений код, необхідно зберегти документ у форматі, який може сприймати браузер, а саме: у форматі html. Як правило перша сторінка сайту має назву Index.html.
3. Зберегти файл. Для цього слід обрати команду Зберегти як... та ввести ім’я Index.html.
Зауваження. Після збереження файла у вікні редактора коди документа будуть структуровані та підсвічені різними кольорами (рис. 22.3). Це дуже зручно, особливо при роботі з великими файлами. Отже, аби підсвічення кодів відбувалося під час уведення та редагування коду, можна файл зберегти до початку введення коду з форматом html.
Також у результаті збереження файла його піктограма набуде вигляду, встановленого за умовчанням на вашому комп’ютері браузера.
4. Відкрити файл у вікні браузера (рис. 22.4).
У разі необхідності переглянути код вебсторінки, в контекстному меню вікна браузера оберіть команду Переглянути джерело сторінки. В результаті буде відображено html-код цієї сторінки.
ПРАКТИЧНЕ ЗАВДАННЯ 1
Під час ознайомлення з мовою HTML створимо вебсто-рінку BestTravel подібну до тієї, яку ми робили в автоматичному режимі.
Розпочнемо створення сайту з найпростішого. Додамо до сторінки необхідний текст та збережемо файл під назвою Index.html.
1. Відкрийте редактор NotePad++.
2. Збережіть файл з назвою Index.html. Це потрібно для того, щоб редактор сприймав документ як вебсторінку і підсвічував кольором теги документа.
3. Уведіть у файлі загальний код html-документа.
4. Додайте текст вебсторінки між тегами <body>...</body>, скопіювавши його з файла заготовка.М.
5. Між тегами <title>...</title> введіть заголовок вебсторінки BestTravel.
6. Збережіть документ.
7. Відкрийте документ у вікні браузера. В результаті вебсторінка має містити доданий текст. Але, звичайно, до одержання бажаного результату ще далеко.
22.4.
ТЕГИ ДЛЯ СТВОРЕННЯ СТРУКТУРИ ДОКУМЕНТА
Продовжимо знайомство з тегами. І далі розглянемо, як з допомогою тегів установити заголовки та абзаци документа. В мові HTML виділяють усього 6 рівнів заголовків, що позначаються відповідно тегами від <h1>...</h1> до <h6>...</h6>. У браузері заголовок першого рівня буде відображено найбільшим, а заголовок шостого рівня — найменшим. На рис. 22.5 показано відображення заголовків у вікні браузера та відповідний html-код.
Для встановлення абзаців використовують тег <p>...</p>. Для налаштування параметрів розміщення тексту та структурування документа використовують непарні теги: <br> — для розриву рядка; <hr> — для встановлення горизонтальної лінії.
ПРАКТИЧНЕ ЗАВДАННЯ 2
Додайте до вебсторінки BestTravel теги для структурування документа.
1. Перший рядок не є заголовком, отже, його позначте тегом <p>, указавши, що він є окремим абзацом:
<p>BestTravel</p>.
2. Наступний рядок, назва сайту, безперечно є заголовком, і він є найвищого рівня, отже, позначте його заголовком першого рівня: <h1>BestTravel</h1>.
3. Відповідно заголовок Гарячі тури позначте заголовком другого рівня.
4. Заголовки, що містять назву готеля та країну, позначте заголовками 3-го рівня.
5. Заголовок Київ — столиця України також позначте як заголовок 3-го рівня.
6. Усі інші частини тексту позначте тегами абзацу.
7. Перелік визначних місць Києва відокремте тегами розриву рядка, а саме, <br>:
<Ьг>Софійський собор <Ьг>Києво-Печерська лавра
22.5.
АТРИБУТ ВИРІВНЮВАННЯ ТЕКСТУ
Для вирівнювання тексту по лівому та правому краю, по центру та по ширині використовують атрибут align. Він може приймати значення left, right, center та justify відповідно. Атрибути записують відразу після тега, для якого його необхідно застосувати. Значення атрибута записують у лапках.
Наприклад, якщо необхідно вирівняти деякий заголовок першого рівня по центру слід записати наступний код:
Для вирівнювання абзацу по ширині, код буде такий:
ПРАКТИЧНЕ ЗАВДАННЯ 3
1. Виконайте вирівнювання усіх заголовків у сайті BestTravel по центру.
а. Для вирівнювання по центру першого заголовка додайте атрибут вирівнювання тексту, аби код набув такого виду:
b. Для вирівнювання інших заголовків атрибути додайте самостійно.
2. Додайте атрибути вирівнювання по центру абзаців у розділі опису гарячих турів.
3. Збережіть файл.
4. Виконайте оновлення документа у вікні браузера, натиснувши F5.
22.6.
ВСТАНОВЛЕННЯ КОЛЬОРУ ФОНУ ТА ШРИФТУ
За умовчанням сторінка має білий колір фону та чорний колір літер. Проте ці значення можна змінити. Для цього використовують атрибути для тега <body>.
Так, при встановленні чорного кольору фону та білих літер тег <body> буде мати вигляд:
Тут bgcolor — атрибут для встановлення кольору фону, text — атрибут для встановлення кольору шрифту. #000000 та #FFFFFF — значення цих атрибутів, які визначають чорний та білий колір відповідно. Взагалі кольори можна встановлювати і звичними для нас словами англійської мови black, white тощо. Але перелік цих слів досить обмежений.
Для визначення коду бажаного кольору можна скористатися кольоровою онлайн-палітрою. Ось один із таких сайтів, що надають можливість визначити код кольору:
https://html-color-codes.info/
.
ПРАКТИЧНЕ ЗАВДАННЯ 4
1. Додайте до вебсторінки атрибути для встановлення чорного кольору фону та білого кольору літер.
a. У редакторі коду додайте атрибут кольору фону bgcolor та встановіть чорний колір.
b. Поряд через пробіл додайте атрибут text та надайте йому значення білого кольору:
c. Збережіть внесені зміни та оновіть вебсторінку у вікні браузера. В результаті колір фону і літер має бути змінено.
2. Ще раз виконайте зміни в атрибутах тегу <body>, встановивши ті значення кольорів, що є реальними у сайті.
а. Для фону поверніть білий колір. Для цього приберіть атрибут bgcolor.
b. Для літер установіть темно-сірий колір літер, змінивши код чорного кольору на код темно-сірого кольору (#333333).
Контрольні запитання та завдання
1. Що таке тег? Які використовуються правила для запису тегів?
2. Укажіть основні теги, що має містити html-документ.
3*. Опишіть алгоритм створення вебсторінки.
4. Які теги використовуються для створення заголовків; абзаців; розриву рядка; горизонтальної лінії?
5. Як виконати вирівнювання абзацу в html-документі?
6. Як змінити колір тексту та фону в html-документі?
Питання для роздумів
1. Для чого використовується два різних теги для створення абзацу та розриву рядка?
2. Чому при створенні html-документа необхідно дотримуватися вкладеності тегів один в одний?
Завдання для дослідження
1*. Дослідіть можливості онлайнових редакторів html-коду, визначте їхні відмінності з редакторами, встановленими на комп’ютері.
Це матеріал з підручника Інформатика 8 клас Казанцева, Стеценко (2021)
Наступна сторінка: 23. Форматування символів