План-конспект уроку на тему Засоби створення HTML-документівТема: Засоби створення HTML-документів. Мета: дати учням поняття про засоби створення HTML-документів, навчити їх на практиці застосовувати свої знання, виховати наполегливість, спостережливість, розвинути логічне та абстрактне мислення. Тип уроку. пояснення нового матеріалу. План. 1. Організаційна частина. 2. Пояснення нового матеріалу. 3. Підсумки уроку. 4. Домашнє завдання. Л-ра: 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 тощо, І 5. Елемент (тег) BODY. У середині пари тегів <BODY па«| paMeTpn>...</BODY> записують увесь текст сторінки. Цей текст відображатиметься у вікні браузера. Щоб на екрані відобразити звичайним способом стандартний текст, жодного програмування не потрібно - достатньо набрати потрібний текст. Якщо ж дизайнер хоче подати текст спеціально, щоб він виглядав якнайкраще, до тексту застосовують теги форматування. У цьому, зокрема, і полягає суть програмування мовою HTML. Розглянемо головні параметри тега BODY: BACKGROUND = "d:\myweb\picturel .ipj" Задає шлях до картинки для тла BGCOLOR = "white" Задає білий колір тла, якщо не використовується тло-картинка BGPROPERTIES = "fixed" Фонове зображення не прокручується TEXT = "black" Задає колір тексту (тут чорний) на сторінці Інші параметри, що стосуються способів відображені гіперпосилань (LINK, VLINK, ALINK), вивчатимемо пізніше 6. Форматування тексту для web-сторінок. Розглянемо теги, які використовують для форматування тексту. Теги форматування символів тексту (вони парні): <В> текст </В> Товстий шрифт тексту <І> текст </І> Шрифт - курсив <SUB> текст </SUB> Нижній індекс. Наприклад, щоб отримати вираз Н2О, пишуть H<SUB>2</SUB>0 <SUP> текст </SUP> Верхній індекс, наприклад, Iа вулиця,а2 <BIG> текст </BIG> ВЄЛИКИЙ шрифт <SMALL> текст </SMALL> Малий шрифт <EM> текст </ЕМ> Виокремлений курсивом текст (те саме, що тег І) <B> <I> текст </Іх/В> Товстий курсив. Цей приклад демонструє застосування принципу вкладення тегів Теги для розміщення тексту (вони одинарні): <Р> Цей тег означає початок нового абзацу. Його можна записувати в кінці попереднього. На¬ступне після тега <Р> речення починатиметься з нового, вирівняного до лівого краю, абзацу без відступу. Між абзацами буде порожній рядок. Зауважимо, що тег <Р> може викорис-товуватися як парний: <Р> текст абзацу </Р> <BR> Наступний за цим тегом текст буде наведено у новому рядку без пропуску рядка <HR> У рядку буде проведена горизонтальна лінія 7. Заголовки і теги вирівнювання. Заголовок - окремий вид абзацу. Є шість видів заголовків, які відрізняються роз¬мірами символів: Теги Результат на екрані <Н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. Домашнє завдання. Вивчити матеріал за конспектом та підручником.
