2. Мета:
• Познайомити учнів з структурою WEB-
документу.
• Вивчити основні команди
форматування WEB-документу.
• Ознайоми учнів, з правилами
створення простих WEB-документів.
• Отримати практичні навики їх
створення.
3. Знайомство з мовою HTML
• Гіпертекст – це електронний документ, який містить гіперсилки
на інші документи.
• Гіпертекстовий документ призначений для виведення
інформації на екран комп’ютера.
• Гіпертекстова технологія – це технологія,яка базується на
використанні гіпертекстових документів. Цютехнологію
застосовують в комп’ютерних енциклопедіях і навчальних
програмах, прикладних програмах для работи з довідковою
інформацією і для організації доступу до інформації в W W W,
тобто при работі з WEB-документами.
• WEB-документ – це текст, написаний на мові HTML або інші,
яка використовується для перегляду електронної інформації на
екрані комп’ютера за допомоою програми-браузера.
4. Так як WEB-документ призначений для перегляду його на
комп’ютері, то бажано, щоб він розмістився повністю на
екрані.
WEB-документи називають ще WEB-сторінками.
Декілька WEB-сторінок на одну тему називають WEB-вузлом
або WEB-сайтом.
WEB-сайти створюють WEB-дизайнери.
WEB-дизайн – це сукупність правил і рекомендацій, якими
повинен керуватися автор, щоб його сайт був
інформативним і виглядав привабливо.
5. Команди мови HTML називають теги і вони записуються в
< >. Більшість тегів – парні <html>…</html>
Документи HTML мають таку вмістимість:
Теги – команди в < >.
Коментарі –пояснення до документу. Вони помогають
разібратися в його змісті <!-- … -- >.
Текст – це те, що користувач бачить на екрані браузера.
Мультимедійні елементи – картинки, звук, відео – не
являються частиною HTML-документу і зберігаються в
окремих файлах. HTML-документ містить тільки ссилки
на ці файли в вигляді тегів.
6. теги і атрибути
• Кожний тег складається з імені тега, за яким може слідувати
список атрибутів (параметрів)
• <i>
• <img src=“dog.gif” width=6>
• Атрибути відділяються від імені тега і один відодного
проміжками. Значення атрибута пишеться після знаку рівності.
Якщо значення складається із одного слова або цифри, то його
можна писати без лапок. Для значення із декількох слів лапки
обовязкові ( “ ).
• Тег з всіма атрибутами бажано размістити на одному рядку.
• Для більшості тегів потрібен закриваючий тег:
• <i> </i>
7. Структура HTML-документа
• <html>
• <head>
• <title> Моя перша сторінка
</title>
• </head>
• <body>
• Привіт всім! Мене зовуть
Олена.
<br>
Я хочу стати Web-
дизайнером <br>
• Чекаю Вас на сайті!
• </body>
• </html>
8. Заголовок документу – теги
<Head> и <Title>
Тег <Head>…</Head> заключає в себе теги заголовка.
1. Тег <Title>…</Title> містить слова, які появляються в рядку
заголовка браузера
<html>
<head>
<title>Мой перша сторінка </title>
</head>
2. Додаткові теги заголовка:
<meta> - містить додаткові дані про документ, що
використовується пошуковими серверами;
<base> і <link> - визначають базову адресу документу і деякі інші
9. Тіло документа – тег <body>
Все, що знаходиться між<body> і </body>,
називається тілом документа.
Тег <body> може мати 3 групи
параметрів:
1. Керування зовнішнім видом
документа.
2. Атрибути програмувания – по події,
таблиці стилів і інші.
3. Атрибути ссилок і ідентифікації.
10. Параметри тега <body>
Bgcolor – змінюється колір фону. Колір задається словом або
кодом RGB
<body bgcolor = “red”>
<body bgcolor = “#FF0000”>
Text – задає колір тексту.
<body bgcolor = “red” text=“blue”>
Background – розміщає в якості фона зображення із файла з
картинкою.
<body background = “dog.gif”>
Bgproperties = “fixed” – фоновий малюнок не прокручується разом
з сторінкою.
Link – задає колір гіперсилок, за якими користувач ще «не ходив».
Vlink – задає колір використаних гіперсилок.
Alink – колір активної гіперсилки (під курсором мишки під час
натискання)
11. Оформлення тексту
Заголовки
Існує 6 рівнів заголовків:
<h1> . . . </h1>, …,
<h6> . . . </h6>
Атрибут – align – вирівнювання
Значення: Left (за
замовчуванням)
<body bgcolor ="#CC3399" text
="#CCCCCC">
<h1 align = “center”> Title 1 </H1>
<h2 align = “right”> Title 2 </H2>
<h3 align = “left”> Title 3 </H3>
<h4> Title 4 </H4>
<h5> Title 5 </H5>
<h6> Title 6 </H6>
</body>
12. Абзаци
• Тег <p> початок нового абзацу і вставляє пустий
рядок перед абзацом.
• Атрибут align.
• Тег <br> - розрив рядка. використовується для
переходу на новий рядок.
• Атрибут clear використовується для продовження
потоку тексту після (нижче) малюнка або таблиці.
Значення left, right, all - виведення тексту там, де
вказує значення атрибуту
• . Цей атрибут має відношення тільки з
вирівнюванням вліво або вправо малюнка або
таблиць.
13. теги форматування тексту
<b>…</b> Полужирний шрифт
<big>… </big> Збільшений шрифт
<i>…</i> Курсив
<small>…</small> Зменшений шрифт
<u>…</u> Підкреслений
<sup>… </sup> Верхній індекс
<s>…</s> Закреслений шрифт
<sub>… </sub> Нижній індекс
<tt>…</tt> Стиль друкарської машинки
<blink>…</blink> Мерехтіння тексту
(в Internet Explorer)
Можна комбінувати теги стилів:
<b><i>Полужирний курсив</i></b>
14. Зміна шрифту
• тег <font> … </font>- змінює размір, колір і стиль тексту.
• Атрибуты:
• size - розмір шрифту 1-7. За замовчуванням size=3
• Розмір змінюється на 20%: 4 розмір більше 3 на 20%,
• 5 розмер більше 4 на 20%
• size=4 – абсолютний розмір,
• size= +1 – відносний (на 1 більше, чим базовий розмір шрифту)
• color - колір тексту,
• face - назва шрифту
• face="Comic Sans MS, Courier New”
16. Теги логічних стилів
<abbr> </abbr> Аббревіатура
<acronym> </acronym> Скорочення, напр., HTML
<samp>… </samp> Текст з «буквальным» змістом
<code> </code> Для текстів програм
<var>… </var> Для імен змінних
<em>… </em> Візуальне виділення (курсив)
<strong>… </strong> Логічне виділення (полужирний)
<dfn>… </dfn> Для спеціальних термінів
<kbd>… </kbd>Для технічних термінів
<q> … </q> Блок цитат (атрибут cite=“URL” -джерело цитати)
<address>…</address>Адреса (курсив)
17. Теги логічного і фізичного
форматувания можуть
комбінуватися один з одним.
18. Створення WEB-сторінки в
блокноті.
• Створити свою папку для файлов сайта.
• Відкрити програму БЛОКНОТ.
• Написати в ній текст WEB-сторінки.
• Зберегти цей текст в цій папці під довільним іменем з
разширенням .html.
• Перейти в цю папку.
Документ повинен мати значок або
• Відкрити цей документ. (відкриється програма-
браузер).
• Якщо потрібно внести зміни в документ, то текст
WEB-сторінки потрібно відкрити в блокноті.
• Внести в текст зміни. Зберегти його (Ctrl+S), перейти
в програму-браузер і натиснути
• кнопку ОБНОВИТЬ.
19. • Запам’ятали структуру WEB-документа.
• Познайомились з основними командами
форматування WEB-документа.
• Вивчили, як створити простий WEB-
документ.
• Познайомились з структурою і основними
командами форматування WEB-документу.
20. Завдання на урок:
Створити дві WEB-сторінки за власним
проектом.
1.На першій застосувати фізичний стиль
форматування (шрифт, курсив і т.д.),
фон зробити кольоровим.
2. На другій попробувати комбінування
стилів, добавити і логічні стилі
форматування.
