Урок.Засоби створення HTML-документів

Матеріал з Фізмат Вікіпедії
Перейти до: навігація, пошук

Тема: Засоби створення HTML-документів.

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

Тип уроку: засвоєння нового матеріалу.

Література:

       1. Глинський „Інформатика”.
       2. Симонович „Общая информатика”.
       3. Зарецька „Інформатика”.

Хід уроку.

І. Організаційна частина.

ІІ. Пояснення нового матеріалу.

     Для створення web-сторінок послуговуються гіпертекстовими редакторами, наприклад, HotMetalPRO, Hot Dog Professional, Netscape Editor, webedit, HTMLWriter, HTML Assistant, HTMLed, де використовується мова HTML -Hyper Text Markup Language (мова для розмічування гіпер-текстових документів). Сучасні редактори, такі як FrontPage, Dream Viewer, MS Word тощо, дають змогу створювати web-сторінки методом конструювання, тобто без застосування кодів мови HTML. Вони генерують цей код автоматично.

Ми вивчатимемо два способи створення web-сторінки: за допомогою мови HTML; методом візуального конструювання засобами програм MS Word і FrontPage.

Розглянемо перший спосіб. Для підготовки html-файлу можна використати текстовий редактор NotePad чи будь-який інший, що дає змогу готувати файли у текстовому форматі. Після написання html-файл потрібно зберегти на диску з деякою назвою з розширенням назви htm чи html.

Приклад 1. Структуру html-файлу продемонструємо за допомогою тексту, де деяка особа розповідає про себе: <HTML> <!-Це файл filel.htm -->

<HEAD>

<TITLE> Назва вікна web-сторінки </TITLE>

</HEAD>

<BODY параметри>

<!—Далі йде текст, наприклад, такий.->

Мене звати Світлана. Мені 16 років.

Я хочу стати web-дизайнером.

Це моя перша web-сторінка. Тут я можу писати будь-який текст, наприклад, про себе і мої інтереси. Пізніше я навчуся вставляти фотографії, картинки, звук, відео-зображення шляхом посилання на відповідні графічні, звукові чи відео-файли. Я збережу цей файл на диску і відкрию його у браузері. Моя сторінка ще не красива і не цікава. Але скоро я навчуся робити цікаві web-сторінки.

Я розташую файл на сервері, і мою сторінку зможуть побачити в різних кінцях світу.

</BODY>

</HTML>

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

Службові слова, наведені великими літерами, вивчатимемо далі. Їх можна писати також малими літерами.

Команди мови HTML називаються тегами. Теги бувають одинарними і парними. Більшість тегів парні, як, наприклад, тег означення html-файлу: HTML> ... </HTML>. Такі теги називаються інакше контейнерами. Контейнер може містити текст та інші теги. Парні теги позначають початок і кінець області дії відповідної команди. Теги записують у кутових дужках. Тег, що відкриває область дії, має косу риску. Не забувайте її писати, інакше тег працюватиме неправильно.

Тег може містити параметри, які користувач записує у першому блоці тега через пропуск чи з нового рядка, наприклад, <BODY TEXT="red">...</BODY>. Нечислові значення параметрів прийнято записувати у лапках.

У середині пари тегів <HEAD>...</HEAD> описують заголовок документа. Головна частина заголовка документа - заголовок Windows-вікна, який пишуть у середині пари тегім <TITLE>...</TITLE>. Інші елементи заголовка вивчатимемо пізніше.

Тег позначає коментар. Текст у середині цього тега виводитися на екран не буде. Коментар можна писати також у середині парного тега <COMMENT> текстовий коментар </COMMENT>.

Зауваження. У багатьох книжках замість слова параметр вживають термін атрибут, а одинарний чи парний теги називають елементом, наприклад, елемент BODY тощо.

1. Елемент (тег) BODY. У середині пари тегів <BODY па«| paMeTpn>...</BODY> записують увесь текст сторінки. Цей текст відображатиметься у вікні браузера.

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

Розглянемо головні параметри тега BODY:

BACKGROUND = "d:\myweb\picturel .ipj" Задає шлях до картинки для тла

BGCOLOR = "white" Задає білий колір тла, якщо не використовується тло-картинка

BGPROPERTIES = "fixed" Фонове зображення не прокручується

TEXT = "black" Задає колір тексту (тут чорний) на сторінці

Інші параметри, що стосуються способів відображені гіперпосилань (LINK, VLINK, ALINK), вивчатимемо пізніше.

2. Форматування тексту для web-сторінок. Розглянемо теги, які використовують для форматування тексту.

Теги форматування символів тексту (вони парні):

<В> текст </В> Товстий шрифт тексту

<І> текст </І> Шрифт - курсив</nowiki>

SUB> текст </SUB> Нижній індекс. Наприклад, щоб отримати вираз Н2О, пишуть H20

<SUP> текст </SUP> Верхній індекс, наприклад, Iа вулиця,а2

<BIG> текст </BIG> Великий шрифт

<SMALL> текст </SMALL> Малий шрифт

<EM> текст </ЕМ> Виокремлений курсивом текст (те саме, що тег І)

<B> <I> текст </Іх/В> Товстий курсив. Цей приклад демонструє застосування принципу вкладення тегів.

Теги для розміщення тексту (вони одинарні):

<Р> Цей тег означає початок нового абзацу. Його можна записувати в кінці попереднього. Наступне після тега <Р> речення починатиметься з нового, вирівняного до лівого краю, абзацу без відступу. Між абзацами буде порожній рядок. Зауважимо, що тег <Р> може використовуватися як парний:

<Р> текст абзацу </Р>.


Наступний за цим тегом текст буде наведено у новому рядку без пропуску рядка.


У рядку буде проведена горизонтальна лінія.

3. Заголовки і теги вирівнювання. Заголовок - окремий вид абзацу. Є шість видів заголовків, які відрізняються розмірами символів:

Теги Результат на екрані

<Н1>Заголовок 1</Н1> Заголовок 1

<Н2>Заголовок 2</Н2> Заголовок 2

<НЗ>Заголовок 3</Н3> Заголовок 3

<Н4>Заголовок 4</Н4> Заголовок 4

<Н5>Заголовок 5</Н5> Заголовок 5

<Н6>Заголовок 6</Н6> Заголовок 6

Заголовок за замовчуванням вирівнюється до лівого краю вікна. Якщо вирівнювання заголовка чи іншого елемента сторінці потрібно задати явно, то використовують теги вирівнювання:

<CENTER> елемент </CENTER> Вирівнювання до центру

<LEFT> елемент </LEFT> Вирівнювання до лівого краю

<RIGHT> елемент </RIGHT> Вирівнювання до правого краю

Зауваження. Теги заголовків не варто використовувати для створення звичайних абзаців з різними розмірами шрифту.

Приклад 2. Розгляньте зразок форматування тексту ДЛЯ web-сторінки з розповіддю деякої особи про себе.

<HTML> <!-Це файл file2.htm ->

<HEAD>

<TITLE> My web-page </TITLE>

</HEAD>

<BODY BGCOLOR ="yellow" TEXT = "navy">

<CENTER><H1 >Привіт!</Н1 >

<H2> Мене звуть Світлана </Н2> </CENTER>

<HR>

<H3> Мені 16 років </НЗ>

<Н4> Я хочу стати web-дизайнером </Н4>

<HR>

Це моя <В>друга</В> спроба створити web-сторінку. Я вже вмію користуватися заголовками, вставляти лінії, форматувати текстові абзаци. Пізніше я навчуся вставляти <1>фотографії, картинки, звук, відео зображення </1> шляхом посилання на відповідні графічні, звукові чи відео файли.

Я збережу цей файл на диску і відкрию його у браузері. Цю web-сторінку я буду удосконалювати. Її ще рано розміщувати на сервері.

<HR>

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

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

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

Вивчити матеріал за конспектом та підручником.