© М.Е.Макарова Переклад: І.В.Здорєва. Hyper Text Markup Language Мова розмітки гіпертексту. - презентация

1 © М.Е.Макарова Переклад: І.В.Здорєва

2 Hyper Text Markup Language Мова розмітки гіпертексту

3 Мета уроку: 1.Познайомитися зі структурою WEB-документу. 2.Вивчити основні команди форматування WEB-документу. 3.Отримати знання як створювати найпростіші WEB-документи. 4.Отримати практичні навики їх створення.

4 Знайомство з мовою HTML Гіпертекст – це електронний документ, що містить гіперпосилання на інші документи. Гіпертекстовий документ призначений для виведення інформації на екран комп'ютера. Гіпертекстова технологія – це технологія, що базується на використанні гіпертекстових документів. Її застосовують у комп'ютерних енциклопедіях і навчальних програмах, прикладних програмах для роботи з довідковою інформацією й для організації доступу до інформації в WWW, тобто при роботі з WEB-документами. WEB-документ – це текст, написаний мовою HTML або іншою, що призначений для перегляду електронної інформації на екрані комп'ютера за допомогою програми-браузера.

5 Так як WEB-документ призначений для перегляду його на комп'ютері, то бажано, щоб він містився цілком на екрані. Тому WEB-документи називають ще WEB-сторінками. Кілька WEB-сторінок на одну тему називають WEB-вузлом або WEB-сайтом. WEB-сайти створюють WEB-дизайнери. WEB-дизайн - це сукупність правил і рекомендацій, якими повинні керуватися автори, щоб їхні сайти були інформативними й виглядали привабливо.

6 Команди мови HTML називаються теги й вони записуються в. Більшість тегів – парні … Документ HTML має три структурних типи вмісту: Теги – команди в. Коментарі - пояснення до документа. Вони допомагають розібратися в його змісті. Текст – те, що користувач бачить на екрані браузера. Мультимедійні елементи - картинки, звук, відео - не є частиною HTML-документа й зберігаються в окремих файлах. HTML-документ містить тільки посилання на ці файли у вигляді тегів.

7 теги і атрибути Кожний тег складається з імені тегу, за яким може йти список атрибутів (параметрів) Атрибути відділяються від імені тегу й друг від друга пропусками. Значення атрибута пишеться після знака рівності. Якщо значення складається з одного слова або цифри, то його можна писати без лапок. Для значень із декількох слів лапки обов'язкові ( ). Тег з усіма атрибутами бажано розташовувати на одному рядку. Для більшості тегів потрібний закриваючий тег:

8 Мій перший крок Привіт, це моя перша сторінка! Радий вітати! Структура HTML-документа Привіт, це моя перша сторінка! Радий вітати!

9 Заголовок документу – теги и Тег … містить у собі теги заголовка. Тег … містить слова, які з'являються в рядку заголовка браузера Мій перший крок 2. Додаткові теги заголовка: - містить додаткові дані про документ, використовувані пошуковими серверами; і - визначають базову адресу документа й деякі інші

10 Тіло документу – тег Все, що знаходиться між і, називається вмістом тіла документу. Тег може містити 3 групи параметрів: 1.Керування зовнішнім виглядом документу. 2.Атрибути програмування. 3.Атрибути ссилок и ідентифікації.

11 Параметри тегу Bgcolor – змінює колір тла. Колір задається словом або кодом RGB Text – задає колір тексту. Background – поміщає як тло зображення з файлу з картинкою. Bgproperties = fixed – фоновий малюнок не прокручується разом зі сторінкою. Link – задає колір гіперпосилань, за якими користувач ще «не ходив». Vlink – задає колір гіперпосилань. Alink – колір активного гіперпосилання (під курсором мишки під час натискання)

12 Оформлення тексту Заголовки Існує 6 рівнів заголовків:..., …,... Атрибут – align – вирівнювання Значення: Left (за замовчуванням) Right Centr Title 1 Title 2 Title 3 Title 4 Title 5 Title 6

13 Абзаци Тег показує початок нового абзацу и вставляє порожній рядок перед абзацем. Атрибут align. Тег - розриває рядок. Використовується для запису текстів віршів та пісень. Атрибут clear дозволяє продовжити слідування тексту після (нижче) малюнка або таблиці. Значення left, right, all - продовжують виведення тексту там, де указаний в атрибуті край чи обидва краї вільні від таблиць та малюнків. Цей атрибут має зміст тільки з вирівняними вліво або вправо малюнками або таблицями.

14 Точні інтервали Тег … створює область, в якій текст не розбивається на рядки. Тег використовується разом з і показує браузеру місце де, якщо необхідно, можна розірвати рядок. Тег … виділяє частину початкового тексту, який повинен відображатися «як є» - з тими же відступами та розбиттям на рядки. Використовується для запису текстів програм. Всередині цього тегу можуть знаходитися гіперпосилання, картинки и т.д. Тег … - зміст вирівнює по центру – текст, малюнки, таблиці. Аналог атрибуту align=center

15

16 Фізичне і логічне форматування тексту 1.Фізична розмітка документу – це явна вказівка браузеру, який повинен мати вигляд той чи інший фрагмент тексту – розмір шрифту, курсив та т.д. 2.Логічна розмітка враховує зміст виділеного фрагменту – цитата, відомості про автора і т.д. Сучасні стандарти мови HTML радять використовувати наскільки можливо логічну розмітку, хоча фізичне форматування ще ніхто не відміняв.

17 теги фізичних стилів … Напівжирний шрифт … Збільшенний шрифт … Курсив … Зменшенний шрифт … Підкреслення … Верхній індекс … Закресленний шрифт … Нижній індекс … Стиль друкарської машинки … Мигаючий текст (в Internet Explorer) Можна комбінувати теги стилів: Напівжирний курсив

18 Зміна шрифту тег … - змінює розмір, колір та стиль тексту. Атрибути: 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

19 Мій другий крок Це звичайний шрифт Це змінений шрифт Це знову звичайний шрифт

20 теги логічних стилів Аббревіатура Скорочення, напр., HTML … Бібліографічна ссилка, вик. для запису назви книг і інш. (курсив) … Текст с «буквальним» змістом Для текстів програм … Для імен змінних … Візуальне виділення (курсив) … Логічне виділення (напівжирний) … Для спеціальних термінів … Для технічних термінів … Блок цитат (а трибут cite=URL - джерело цитати) … Адреса (курсив)

21 Теги логічного та фізичного форматування можуть комбінуватися друг с другом та с тегами установки інтервалів.

22 Створення WEB-сторінок в Блокноті. В своїй папці створити окрему папку для файлів сайту. Відкрити програму БЛОКНОТ. Написати в ній html-код WEB-сторінки. Зберегти цей текст в цій папці під любим именем з розширенням.html. Перейти в цю папку. Документ повинен мати значок або Відкрити цей документ. (Відкриється програма-браузер). Якщо потрібно внести зміни в документ, то виконати команду ВИД Просмотр HTML-кода. Текст WEB- сторінки відкриється в Блокноті. Внести в текст зміни. Зберегти його (Ctrl+S), перейти в програму-браузер и натиснути клавішу ОБНОВИТЬ. (F1)

23 Познайомилися зі структурою та основними командами форматування WEB-документу. Узнали, як створювати найпростіші WEB-документи.

24 Завдання на урок: Створити дві WEB-сторінки на довільну тему 1.На першій використати фізичні стилі форматування (шрифт, курсив и т.п.), фон зробити кольоровим. 2. На другій використати логічні стилі форматування. В якості фону використати малюнок з файлу.

25