Структура HTML-коду. Формат вебсторінки
Сприйняття та осмислення нового матеріалу
Завдання.
Відкрити текстовий редактор (Блокнот).
Зберегти документ у файл index.html.
Відкрити збережений файл у браузері
СТРУКТУРА HTML-КОДУ
Тег <html> є контейнером, який містить в собі весь вміст вебсторінки
<html>
Увесь вміст вебсторінки
</html>
Завдання.
Зберегти набраний код.
Оновити сторінку в браузері
Усередині контейнера <head></head> знаходяться метатеги, які використовуються для зберігання інформації, призначеної для браузерів і пошукових систем
<html>
<head>
Метатеги для зберігання інформації, призначеної для браузерів і пошукових систем
</head>
...
</html>
Завдання.
Зберегти набраний код.
Оновити сторінку в браузері
Елемент <title></title> встановлює заголовок для вебсторінки, який є назвою, що з'являється на вкладці браузера сторінки, і використовується для опису сторінки, коли вона додається в закладки/вибране
<html>
<head>
<title>Назва вебсторінки</title>
</head>
...
</html>
Завдання.
Набрати заголовок вебсторінки "Моя перша вебсторінка".
Зберегти код.
Оновити вебсторінку в браузері.
Тег <body></body> призначений для зберігання вмісту вебсторінки, що відображається у вікні браузера
<html>
<head>
<title>Назва вебсторінки</title>
</head>
<body>
Вміст вебсторінки, що відображається у вікні браузера
</body>
</html>
Завдання.
Додати до HTML-коду тег <body>.
У тілі HTML-коду набрати довільне речення.
Зберегти код.
Оновити вебсторінку в браузері.
ФОРМАТ ВЕБСТОРІНКИ
Колір тексту за умовчанням
<body text=колір>
Способи задання кольору:
словом: red, green, lightgreen тощо
кодом у форматі #RRGGBB
Кожна літера в коді, це цифра шістнадцятирічної системи числення (0, 1, 2, 3,..., 9, A, B, C, E, F). Нуль означає, що відповідний колір відсутній. Далі зростання значення кольору відповідає зростанню насиченості цього кольору.
Відповідність пар літер у коді до кольорів:
RR - червоний колір.
GG - зелений колір.
BB - синій колір.
Наприклад: #000000 - чорний, #ffffff - білий, #ff0000 - червоний, #663300 - коричневий.
Завдання.
Надати колір тексту за умовчанням синій:
використовуючи назву кольору;
використовуючи код кольору
Колір фону вебсторінки
<body text=колір bgcolor=колір>
Завдання.
До тегу <body> додати параметр зміни кольору фону, задавши колір бежевий
Фоновий малюнок (шпалери вебсторінки)
<body text=колір background=шлях/файл>
Якщо потрібний файл знаходиться не в одній теці з файлом вебсторінки, то разом з назвою файла необхідно зазначати шлях до нього.
Повну назву файла потрібно розпочинати з file:/// (якщо файл знаходиться на комп’ютері), або з http:// (якщо файл береться з Інтернету)
Завдання.
Знайти в Інтернеті шпалери для своєї вебсторінки та завантажити їх у папку, в якій збережений файл HTML-коду.
Встановити завантажені шпалери як фон вебсторінки
Узагальнення та систематизація знань
<html>
<head>
<title>Назва вебсторінки</title>
</head>
<body [text=колір] [bgcolor=колір] [background=шлях/файл]>
Вміст вебсторінки, що відображається у вікні браузера
</body>
</html>
Квадратні дужки означають, що цей параметр не є обов'язковим, його можна не записувати у тегу