Створення та форматування HTML-документа
І. Структура. Документи HTML мають таку структуру: об’яву, заголовок, тіло, коментарі. Об’ява. Пара тегів <html> </html> повідомляють браузеру, що між ними міститься документ у форматі HTML. Заголовок.Між тегами<head> </head>міститься інформація про документ: назва (між тегами <title>), ключові слова, опис, інше. Тіло.Воно розміщується після тегу <body>. Коментарі. Вони не відображаються браузером, наприклад, <! Це коментар>.
ІІ. Теги. HTML документ, крім звичайного тексту, має теги - спеціальні команди розмітки. Тег містить такі символи: ліву кутову дужку <; ім’я, наприклад, pre; необов’язковий атрибут; необов’язковий слеш /; праву кутову дужку >. Атрибут містить: ім’я, наприклад, align; знак =; значення атрибута, наприклад, center. Доцільно вміщувати значення атрибута в лапки (одинарні чи подвійні).
ІІІ. Парні-непарні. Теги бувають парні й непарні. Більшість тегів мови HTML (наприклад, <HTML>, <TITLE>, <HEAD>, <FONT>, теги форматування) потребують тег із символом </>для закриття команди. Існують теги, наприклад, <Р> , для яких кінець команди ставити необов’язково. Є теги (наприклад, <ВР>, <НР>), для яких тег кінця команди непотрібний. Існують команди, які мають так звані атрибути, які модифікують команду. Теги можна писати як великими, так і маленькими буквами; більшості сучасних браузерів байдуже, якого розміру буква.
IV. Форматування. HTML-документ, який міститься між тегами <body> </body>, може містити заголовки, форматований текст, таблиці тощо. Форматування гіпертекстового документа може бути авторським (використовується тег <pre> ) або безпосереднім. Такі теги, як <p> - абзац, <hr> - горизонтальна лінія, <br> - обривання рядка. належать до безпосереднього форматування. У HTML-документі можливе таке форматування: центрування тексту - <p align=center>; вирівнювання тексту ліворуч або праворуч; можливість розділяти текст горизонтальною лінією - <hr>. Текст можна робити жирним за допомогою тега <b>, курсивом - <i>, підкреслювати - <u>, збільшеного розміру - <big>, зменшеного - <small>, створювати верхній індекс - <sup> чи нижній - <sub>. Можна створювати марковані чи нумеровані списки, робити вкладені списки будь-якої глибини. Для цих тегів обов’язковою є наявність закриваючого тега. У тексті можна змінювати шрифт, його розмір, колір. Текстовий рядок можна розміщувати над рисунком (top), під рисунком (bottom) або навколо нього (middle); перелічені значення атрибутів використовуються з тегом <img src…>.
V. Логічне. Форматування HTML-документа може бути фізичним або логічним. Теги логічного форматування сприймаються будь-яким браузером (Internet Explorer, Netscape Navigator ), тому й рекомендуються для використання. Теги жирного тексту <strong>, курсиву <em>, моноширинного (фіксованого) шрифту <code> використовуються у логічному форматуванні, а відповідно <b>, <i>, <tt> - у фізичному.
МЕТОДИЧНІ ВКАЗІВКИ ДО ЛАБОРАТОРНОГО ЗАНЯТТЯ
№ 6.4
Тема заняття:Створення списків і таблиць у Веб-документі.
Мета: Навчитися створювати списки і таблиці у Веб-документі.
Теоретичні зауваження.
1. Ознайомтеся з основними тегами, що застосовуються під час створення Web – сторінок і законспектуйте їх (див. таблицю 1).
2. Ознайомтеся з інформацією про службу Інтернету «ICQ».
Таблиця 1 – Основні теги, їх призначення та використання
| № | Теги | Призначення |
| <html></html> | початок і кінець документа | |
| <head></head> <title></title> | область заголовка документа заголовок документа | |
| <body></body> | зміст документа | |
| <font faсe=arial size=”6” color=#dd0000> | визначення типу шрифту, його розміру, кольору | |
| <img src=ім’я файлу width=220 height=140> | вставлення графічного об’єкта з визначенням його ширини | |
| <p></p> <p align =center> | абзац визначення виду вирівнювання абзацу | |
| <br> | перехід на новий рядок | |
| <b></b> <i></i> <u></u> | форматування тексту напівжирним, курсивом, підкресленим шрифтом | |
| <a href = ім’я файлу> Посилання на файл</a> | гіперпосилання на інший файл | |
| <body bасkground=файл фону> <body bgcolor=кольор фону> | визначення фону визначення фону | |
| <table></table> <table border></table> <caption></caption > <tr></tr> <th></th> <td></td> | початок і кінець таблиці таблиця з границями заголовок таблиці рядки таблиці комірка заголовка комірка з даними | |
| <ul></ul> <ol></ol> <li></li> | марковані списки нумеровані списки елементи списку |
МЕТОДИЧНІ ВКАЗІВКИ ДО ЛАБОРАТОРНОГО ЗАНЯТТЯ №6.5
Тема заняття: Пошук інформації в Інтернеті.
Мета: Оволодіти навичками пошуку інформації в мережі Internet.
| Internet Explorerє програмою, призначеною для перегляду ресурсів Internet; це – програма браузер (інакше провідник, або оглядач) |
Завдання 1. Перегляд вікна програми Internet Explorer
1. Завантажте програму Internet Explorer.Для цього клацніть на Робочому столі по ярлику Провідника. Другий спосіб запуску – активізація команди Internet Explorer у Головному меню Windows.
2. Уважно прогляньте вікно програми Internet Explorer. Зверніть увагу на наявність наступних об'єктів у вікні програми: рядок заголовка, рядок меню програми, панелі інструментів (Обычные кнопки, Адресная строка, Ссылки, Радио), панелі перегляду (Поиск, Избранное, Журнал, Папки), панель посилань, робоче поле, рядок стану.
Завдання 2. Огляд пошукових систем ресурсів Інтернет
1. Прогляньте робоче поле програми і зверніть увагу на те, що завантажилась (по замовченню) Web-сторінка з адресою http://www.kharkov.ua, яка є інформаційно-пошуковою системою міста Харкова.
2. Запишіть у зошит меню цієї Web-сторінки (Приветствие, О Харькове, Город официальный, Промышленность, Бизнес и право, Наука и образование, Культура и искусство, Досуг и туризм, Город и область, Что, Где, Когда, Интернет, Каталог, Отправьте SMS, IRC ЧАТ)
3. Завантажте пункт меню Інтернет, прогляньте і запишіть у зошит його підменю (Поисковые системы, Сайты о Харькове, Каталоги харьковских сайтов, Сайты Украины и мира, Украина официальная, Каталоги сайтов СНГ, Электронные каналы новостей).
4. Завантажте пункт меню Поисковые системы, прогляньте їх. Запишіть у зошит адреси пошукових систем України: http://www.meta.ua/, http://uaport.net, http://www.uazone.net, http://www.bigmir.net, http://www.topping.com.ua , а також інформаційні пошукові системи ресурсів Росії:http://www.rambler.ru, http://www.aport.ru, http://www.yandex.ru, http://www.google.ru.
Завдання 3. Робота з пошуковою системою http://www.meta.ua/
1. Завантажте пошукову систему http: //www.meta.ua/ і прогляньте її меню.
2. Активізуйте пункт меню Госоргани і прогляньте завантажену Web-сторінку.
3. Запишіть у зошит (або скопіюйте в окремий файл) адреси Web-серверів: Верховної Ради, Президента України, Кабінету міністрів України, Національного банку, Державного комітету статистики, Міністерств фінансів та освіти.
Завдання 4. Огляд серверів Держорганів
1.Прогляньте Web-серверВерховної Радиі запишіть у зошит (або скопіюйте в окремий файл) два останніх законопроекти.
2.Прогляньте Web-сервер Президентаі запишіть у зошит (або скопіюйте в окремий файл) два останніх укази президента.
3.Прогляньте Web-сервер Міністерства освітиі запишіть у зошит (або скопіюйте в окремий файл) останнє інформаційне повідомлення, лист, бюлетень, наказ.
4.Прогляньте Web-сервер Міністерства фінансіві запишіть у зошит (або скопіюйте в окремий файл) два останніх інформаційних повідомлення.
5.Прогляньте Web-сервер Вісника податкової служби і запишіть дві новини в законодавстві, які містяться в останньому номері.
6.Прогляньте Web-сервер Національного банку Україниі запишіть два останніх інформаційних повідомлення.
Завдання 5. Формування документа «Огляд Web-серверів»
1. Створіть у редакторі Word текст під назвою “Огляд Web-серверів” у відповідності до інформації, одержаної на Web-серверах. Для інформації з кожного серверу створіть окремий абзац (всього 6 абзаців).
2. Відредагуйте створений текст, збережіть з ім’ям огляд* у папці гіпер* і виведіть на друк.