10 клас

14.03.2019 Інструктаж з БЖД. Поняття про мову розмічання гіпертекстового документа.

Цілі:

• навчальна: сформувати поняття про мову розмічання гіпертекстового документа;
• розвивальна: розвивати логічне мислення, пам’ять; формувати вміння узагальнювати;
• виховна: виховувати інформаційну культуру, формування бережливого ставлення до обладнання комп’ютерного кабінету, виховання уміння працювати в групі; формування позитивного ставлення до навчання.

Тип уроку: Комбінований.

Обладнання та наочність: дошка, комп’ютери з підключенням до мережі Інтернет, підручник, навчальна презентація.

Програмне забезпечення: браузер, офісні програми.

Хід уроку

І. Організаційний етап

• привітання
• перевірка присутніх
• перевірка готовності учнів до уроку

ІІ. Актуалізація опорних знань

ІІІ. Мотивацій навчальної діяльності

IV. Вивчення нового матеріалу

Пояснення вчителя з елементами демонстрування презентації

(використовуються можливості локальної мережі кабінету або проектор)

Робота з підручником: § 4.2

V. Засвоєння нових знань, формування вмінь

Робота за комп’ютером

1. Повторення правил безпечної поведінки за комп’ютером.
2. Інструктаж учителя.
3. Практична робота за комп’ютерами.

Підручник ст. 119-121

• Вправи для очей.

VI. Підсумки уроку

Фронтальне опитування

1. Які засоби можуть використовуватися для розробки веб-сайтів? Схарактеризуйте їх.
2. Що таке мова HTML?
3. Із чого складається HTML-код веб-сторінки?
4. Як записують теги в HTML-коді веб-сторінки? Як записують теги з атрибутами?
5. Які обов’язкові елементи структури HTML-коду веб-сторінки?
6. Для чого використовують тег meta з атрибутом charset?
7. Як можна записати значення кольорів для їх відображення на веб-сторінці?
8. Які програмні засоби використовують для створення веб-сторінок; для їх перегляду? Наведіть приклади.

Рефлексія

1. Під час уроку я

• дізнався…
• зрозумів…
• навчився…

2. Найбільше мені сподобалося…

3. На уроках найкраще в мене виходило…

4. Я мав (-ла) труднощі з…

5. Я хотів би ще дізнатися про…

VІI. Домашнє завдання

Підручник § 4.2 ст. 114-122

HTML  (Hypertext Markup Language — Мова гіпертекстової розмітки) — це мова опису структури сторінок документів, яка дозволяє звичайний текст форматувати в абзаци, заголовки, списки та інші структури, створювати посилання на інші сторінки. Це текстова мова, в якій інструкції з форматування, що називаються тегами, вбудовані в розділи документа, які містять конкретну інформацію. Теги повідомляють браузерам, як форматувати і представляти інформацію на екрані.

Мова гіпертекстової розмітки HTML була запропонована Тімом Бернерсом-Лі у 1989 як один з компонентів технології розробки розподіленої гіпертекстової системи World Wide Web. Ідея гіпертекстової інформаційної системи полягає у тому, що користувач має можливість переглядати документи (сторінки тексту) у найбільш зручному для себе порядку, а не послідовно, як це прийнято при читанні книг. Досягається це шляхом створення спеціального механізму пов`язуваня різних сторінок тексту за допомогою гіпертекстових посилань.

Мова НТМL дозволяє визначити структуру електронного документа з поліграфічним рівнем оформлення. Результуючий документ може містити різноманітні елементи: ілюстрації, аудіо і відео фрагменти. Мова НТМL включає розвинені засоби для визначення кількох рівнів заголовків, шрифтових виділень, різних груп об’єктів та багато інших можливостей.

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

Таким чином, гіпертекстова база даних у концепції WWW – це набір текстових файлів, розмічених мовою HTML, яка визначає форму представлення інформації (розмітка) і структуру зв’язків цих файлів (гіпертекстові посилання).

За основу моделі розмітки документів у HTML прийнята тегова модель. Тегова модель описує документ як сукупність контейнерів, кожен з яких починається і закінчується тегами. Тобто документ НТМL є не чим іншим, як звичайним АSСII-файлом з доданими до нього керуючими НТМL-кодами (тегами).

Теги НТМL-документів в основному є простими і зрозумілими для використання, оскільки вони створені за допомогою загальновживаних слів англійської мови, зрозумілих скорочень і позначень.

НТМL-тег складається з імені, за яким може слідувати необов’язковий список атрибутів тегу. Текст тегу вміщується у кутові дужки (<І>). Найпростіший варіант тегу – ім’я, вміщене у кутові дужки, наприклад, <HEAD>. Для більш складних тегів характерна наявність різних атрибутів, які можуть мати конкретні значення, визначені для видозмінення функцій тегу.

Атрибути тегу слідують за ім’ям і відділяються один від одного одним або кількома пропусками. Порядок запису атрибутів у тегу не має значення. Значення атрибута слідує за знаком рівняння, який стоїть після імені атрибута. Якщо значення атрибута – одне слово або число, його можна вказати безпосередньо після знаку рівняння, не виділяючи додатково. Решту значень необхідно вміщувати у одинарні або подвійні лапки, особливо якщо вони містять декілька розділених пропусками слів.

Найчастіше НТМL-теги складаються з початкового і кінцевого компонентів, між якими розміщуються текст та інші елементи документа. Ім’я кінцевого тега ідентичне імені початкового тегу, але перед ім’ям ставиться коса риска (/) (наприклад, для тегу заголовка <ТIТLЕ> закриваючою парою буде </ТIТLЕ>). Кінцеві теги не містять атрибутів.

При використанні вкладених тегів їх слід закривати, починаючи з останнього і рухаючись до першого.

Деякі НТМL-теги не мають кінцевого компонента, оскільки є автономними елементами. Наприклад, тег зображення <IMG>, призначений для вставки зображення у документ, не має кінцевого компонента.

Для створення HTML-документа можна застосувати редактор ASCII (зокрема, Блокнот системи Windows). Такі редактори дозволяють вводити HTML-теги, не додаючи до створеного нічого додатково. Створення документа у такому редакторі дозволяє паралельно переглядати результат у програмі- браузері. Інший тип редакторів – візуальні HTML-редактори, наприклад, Microsoft FrontPage. Їх інтерфейс побудований за тим же принципом, що і інтерфейс текстового процесора, такого, як, наприклад, Word. Для роботи з візуальним редактором можна взагалі не володіти мовою HTML. Недоліком візуальних редакторів є те, що розмір створюваного ними HTML-документа у декілька разів більший, ніж документа, створеного звичайним Блокнотом системи Windows. В умовах низької пропускної здатності вітчизняних мереж цей недолік, який стосується швидкості завантаження сторінки (і, відповідно, вартості часу, який на це витрачається), є досить суттєвим недоліком (файл .htm, створений у WORD, в 4 - 9 разів більший, ніж файл аналогічного змісту, створений програмою Блокнот).

2

Створення HTML-документа відбувається розташуванням тегів (tags) мови HTML всередині звичайного неформатованого тексту. Теги HTML — це послідовності символів, які починаються знаком “менше” (<) і закінчуються знаком “більше” (>). Теги можуть мати атрибути, які, в свою чергу, можуть приймати певні значення.

Браузери WWW обов’язково дотримуються трьох правил при синтаксичному аналізі HTML:

1. Пробіли та інші “невидимі символи” ігноруються.

2. Теги форматування можуть бути написані великими або малими літерами.

3. Більшість тегів форматування пишуться парами.

Технологія створення HTML-документа

HTML-документ можна створювати за допомогою найпростішого текстового процесора, який дозволяє зберігати текстові (ASCII) файли, наприклад Windows Notepad (Блокнот). При цьому не застосовуються ніякі коди для форматування.

Порядок створення Web-документа:

1. У головному меню WINDOWS вибрати пункт Пуск-Программы-Стандартные -Блокнот.

2. Ввести структуру документа.

3. Зберегти створений документ, обов`язково надавши йому розширення .htm

4. Перевірити вигляд створеної гіпертекстової сторінки. Для перевірки одержаної сторінки завантажити Internet Explorer, відкрити меню File, вибрати команду Open file, завантажити створений файл.

5. Для внесення змін повернутись до програми Блокнот, внести зміни, зберегти файл.

6. Активізувати Internet  Explorer, натиснути кнопку Обновить.

Структурні теги HTML-документа визначають початок і закінчення різних частин документа. Хоча багато браузерів правильно інтерпретують документ і без них, правила вимагають, щоб структурні теги були включені до документа. На початковому етапі вивчення мови HTML ці теги обов’язково повинні включатись до кожного із створюваних документів.

Позначення HTML-документа

<HTML>… < /HTML> - включають в себе всі інші теги HTML і весь інформаційний зміст документа.

< HTML> розташовується у першому рядку документа;

< /HTML> - у останньому рядку.

Заголовок документа

<HEAD>… </HEAD> - містить інформацію про документ.

Назва документа

<TITLE>… </TITLE> - назва документа, яка відображається в рядку заголовка Internet Explorer.

Тіло документа

<BODY>…</BODY> - тіло документа містить весь текст з інформацією і всі теги HTML, які використовуються для форматування тексту.

ПРИКЛАД (базова структура HTML-документа)

Файл у форматі HTML:

<HTML>

<HEAD>

<TITLE>Моя перша HTML-сторінка</TITLE>

</HEAD>

<BODY>

…

</BODY>

</HTML>

Відображення файла програмою-браузером:

Microsoft Internet Explorer та інші браузери допускають застосування атрибутів LEFTMARGIN=”n” і  ТОРМАRGIN=”n” у тегу <ВОDY>. Атрибут LEFTMARGIN = задає ліве поле для всієї сторінки. ТОРМАRGIN= визначає верхнє поле. Число n вказує на ширину поля у пікселях. Наприклад, тег <ВОDY LEFTMARGIN =”40"> створює на всій сторінці ліве поле шириною 40 пікселів. При n= 0 ліве поле відсутнє.

3

Розмітка, яка створюється за допомогою мови HTML, дозволяє організовувати текст у логічні, легко зрозумілі розділи або застосовувати до нього специфічний формат. Теги форматування дозволяють визначити такі елементи:

−       початок абзацу і кінець рядка;

−       стилі заголовків;

−       фізичні стилі;

−       логічні стилі;

−       списки;

−       спеціальні символи.

Тег управління абзацом

Початок абзацу

<P>…</P> – позначає початок і кінець нового абзацу.

Атрибути тега <P>

ALIGN=LEFT|RIGHT|CENTER|JUSTIFY – вирівнює текст всередині абзацу

Приклад запису тегу абзацу з атрибутом:

<P ALIGN= JUSTIFY> - абзац вирівнюється по ширині

Тег управління переходом на новий рядок

Тег <BR> – розпочинає новий рядок тексту в межах поточного абзацу. Примусове переведення рядка використовується для того, щоб порушити стандартний порядок відображення тексту.

Теги змістового  виділення тексту

<BLOCKQUOTE>…</BLOCKQUOTE> - дозволяє розміщувати текст на рівній відстані від меж екрану і створювати відступи ліворуч і праворуч.

Тег додає поля ліворуч і праворуч від тексту і дозволяє розташувати текст компактно у центрі сторінки. При використанні <ВLОСKQUOTE > декілька разів текст все більше стискається до центру.

<CITE>….</CITE> - розмічає текст як цитату, як правило, курсивом.

Теги стильового  виділення тексту

Фізичні стилі  – це реальні атрибути шрифту, такі, як курсив або жирне виділення.

Тег                                            Значення

<I>.....</I>                              курсив (ITALIC)

<B>...</B>                              жирний шрифт  (ВОLD)

<ТТ>... </TТ>                        телетайп

<U>. ..</U>                            підкреслений

<S>...</S>                              перекреслений текст

< BIG >... </ BIG >                 збільшений шрифт

< SMALL >...</ SMALL >      зменшений шрифт

< SUB >...</ SUB >                підрядкові символи

< SUP >... </ SUР >               надрядкові символи