Embedded Files
Мова гіпертекстової розмітки. Структура HTML-коду. Формат вебсторінки
Тип уроку: урок розвитку компетентностей
Контроль знань
Контроль знань
Мотивація навчальної діяльності
Мотивація навчальної діяльності
Основні питання уроку
Актуалізація знань
Актуалізація знань
Запитання.
Які об'єкти можуть бути розміщені на вебсторінках? Які ви знаєте властивості цих об'єктів?
Як здійснюється форматування об'єктів у текстовому документі?
Як ви розумієте поняття "розмітка сторінки"?
Сприйняття та осмислення нового матеріалу
Сприйняття та осмислення нового матеріалу
Розмітка вебсторінки здійснюється мовою HTML
Означення мови HTML
Мова HTML (Hyper Text Markup Language) — це стандартизована мова розмітки документів для перегляду вебсторінок у браузері.
https://uk.wikipedia.org/wiki/HTMLБраузер завантажує гіпертекст вебсторінки
За запитом користувача відкрити певну сторінку браузер завантажує з сервера гіпертекст цієї сторінки та усі необхідні для неї медіафайли
Завдання.
Відкрийте сайт wikipedia.org та через контекстне меню сторінки виконайте команду "Переглянути джерело сторінки" (Ctrl+U)
Засоби, що реалізовані у мові HTML:
визначення структури тексту та його форматування;
створення гіперпосилань;
створення форм для реєстрації, опитування тощо;
додавання до тексту зображень, відео, звуку та інших об'єктів
Складові HTML-коду (гіпертексту) вебсторінки:
текст, який відображатиметься на вебсторінці;
теги - команди, що визначають:
структурні елементи документа (заголовки, абзаци, таблиці, списки тощо);
формат тексту (колір символів, розмір, вид шрифту тощо);
встановлення та розміщення на сторінці не текстових об'єктів (графічних зображень, анімації, відео- та аудіофайлів тощо)
СТРУКТУРА HTML-КОДУ (ГІПЕРТЕКСТУ)
Тег <HTML>
Тег <html> є контейнером, який містить в собі весь вміст вебсторінки
<html>
Увесь вміст вебсторінки
</html>
Завдання.
Учитель демонструє, учні повторюють на своїх комп'ютерахВідкрити текстовий редактор (Блокнот).
Набрати текст:
<html>
</html>Зберегти набраний код у файл index.html.
Відкрити створений файл у браузері
Тег <HEAD>
Усередині контейнера <head></head> знаходяться метатеги, які використовуються для зберігання інформації, призначеної для браузерів і пошукових систем
<html>
<head>
Метатеги для зберігання інформації, призначеної для браузерів і пошукових систем
</head>
...
</html>
Завдання.
До коду додати тег <head>.
Зберегти набраний код.
Оновити сторінку в браузері
<html>
<head>
</head>
</html>
Тег <TITLE>
Тег <title></title> встановлює заголовок для вебсторінки, який є назвою, що з'являється на вкладці браузера сторінки, і використовується для опису сторінки, коли вона додається в закладки/вибране
<html>
<head>
<title>Назва вебсторінки</title>
</head>
...
</html>
Завдання.
Набрати назву вікна/вкладки вебсторінки "Моя перша вебсторінка".
Зберегти код.
Оновити вебсторінку в браузері
Тег <BODY>
Тег <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>
Квадратні дужки означають, що цей параметр не є обов'язковим, його можна не записувати у тегу
Домашнє завдання
Домашнє завдання
Підручник, п. 5.2
Page updated
Google Sites
Report abuse