Embed Size (px)
Citation preview
HTML- мова розмітки гіпертекстового документу
ПідготувалаУчениця 8 групи
Потієва Катерина
Мета:
• Познайомити учнів з структурою WEB-документу.
• Вивчити основні команди форматування WEB-документу.
• Ознайоми учнів, з правилами створення простих WEB-документів.
• Отримати практичні навики їх створення.
Знайомство з мовою HTML• Гіпертекст – це електронний документ, який містить гіперсилки
на інші документи.
• Гіпертекстовий документ призначений для виведення інформації на екран комп’ютера.
• Гіпертекстова технологія – це технологія,яка базується на використанні гіпертекстових документів. Цютехнологію застосовують в комп’ютерних енциклопедіях і навчальних програмах, прикладних програмах для работи з довідковою інформацією і для організації доступу до інформації в W W W, тобто при работі з WEB-документами.
• WEB-документ – це текст, написаний на мові HTML або інші, яка використовується для перегляду електронної інформації на екрані комп’ютера за допомоою програми-браузера.
Так як WEB-документ призначений для перегляду його на комп’ютері, то бажано, щоб він розмістився повністю на екрані.
WEB-документи називають ще WEB-сторінками.
Декілька WEB-сторінок на одну тему називають WEB-вузлом або WEB-сайтом.
WEB-сайти створюють WEB-дизайнери.
WEB-дизайн – це сукупність правил і рекомендацій, якими повинен керуватися автор, щоб його сайт був інформативним і виглядав привабливо.
Команди мови HTML називають теги і вони записуються в < >. Більшість тегів – парні <html>…</html>
Документи HTML мають таку вмістимість:Теги – команди в < >.
Коментарі –пояснення до документу. Вони помогають разібратися в його змісті <!-- … -- >.
Текст – це те, що користувач бачить на екрані браузера.Мультимедійні елементи – картинки, звук, відео – не
являються частиною HTML-документу і зберігаються в окремих файлах. HTML-документ містить тільки ссилки на ці файли в вигляді тегів.
теги і атрибути• Кожний тег складається з імені тега, за яким може слідувати
список атрибутів (параметрів)• <i>• <img src=“dog.gif” width=6>• Атрибути відділяються від імені тега і один відодного
проміжками. Значення атрибута пишеться після знаку рівності. Якщо значення складається із одного слова або цифри, то його можна писати без лапок. Для значення із декількох слів лапки обовязкові ( “ ).
• Тег з всіма атрибутами бажано размістити на одному рядку. • Для більшості тегів потрібен закриваючий тег:• <i> </i>
Структура HTML-документа• <html>• <head>• <title> Моя перша сторінка
</title>• </head>• <body>• Привіт всім! Мене зовуть
Олена.<br>Я хочу стати Web-
дизайнером <br>• Чекаю Вас на сайті! • </body>• </html>
Заголовок документу – теги <Head> и <Title>
Тег <Head>…</Head> заключає в себе теги заголовка.
1. Тег <Title>…</Title> містить слова, які появляються в рядку заголовка браузера
<html><head><title>Мой перша сторінка </title></head>2. Додаткові теги заголовка:<meta> - містить додаткові дані про документ, що
використовується пошуковими серверами;
<base> і <link> - визначають базову адресу документу і деякі інші
Тіло документа – тег <body>
Все, що знаходиться між<body> і </body>, називається тілом документа.
Тег <body> може мати 3 групи параметрів:
1. Керування зовнішнім видом документа.
2. Атрибути програмувания – по події, таблиці стилів і інші.
3. Атрибути ссилок і ідентифікації.
Параметри тега <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 – колір активної гіперсилки (під курсором мишки під час натискання)
Оформлення тексту Заголовки
Існує 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>
Абзаци• Тег <p> початок нового абзацу і вставляє пустий
рядок перед абзацом.• Атрибут align.
• Тег <br> - розрив рядка. використовується для переходу на новий рядок.
• Атрибут clear використовується для продовження потоку тексту після (нижче) малюнка або таблиці. Значення left, right, all - виведення тексту там, де вказує значення атрибуту
• . Цей атрибут має відношення тільки з вирівнюванням вліво або вправо малюнка або таблиць.
теги форматування тексту<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>
Зміна шрифту• тег <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”
<html><head><title>Моя сторінка </title></head><body>Це звичайний шрифт<p><font size=5 color="#CC3399" face="Comic Sans MS, Courier New">Це зміненний шрифт</font><p>Це звичайний шрифт</body></html>
Теги логічних стилів<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>Адреса (курсив)
Теги логічного і фізичного
форматувания можуть
комбінуватися один з одним.
Створення WEB-сторінки в блокноті.
• Створити свою папку для файлов сайта.• Відкрити програму БЛОКНОТ.• Написати в ній текст WEB-сторінки.• Зберегти цей текст в цій папці під довільним іменем з
разширенням .html.• Перейти в цю папку. Документ повинен мати значок або
• Відкрити цей документ. (відкриється програма-браузер).
• Якщо потрібно внести зміни в документ, то текст WEB-сторінки потрібно відкрити в блокноті.
• Внести в текст зміни. Зберегти його (Ctrl+S), перейти в програму-браузер і натиснути
• кнопку ОБНОВИТЬ.
• Запам’ятали структуру WEB-документа.
• Познайомились з основними командами форматування WEB-документа.
• Вивчили, як створити простий WEB-документ.
• Познайомились з структурою і основними командами форматування WEB-документу.
Завдання на урок:
Створити дві WEB-сторінки за власним проектом.
1.На першій застосувати фізичний стиль форматування (шрифт, курсив і т.д.), фон зробити кольоровим.
2. На другій попробувати комбінування стилів, добавити і логічні стилі форматування.
