Інформатика. Частина 3
.pdfЗміст
документа
</BODY>
</HTML>
Збережіть цей документ під іменем first.htm.
Перед збереженням переконайтеся, що скинутий прапорець Приховувати розширення для зареєстрованих типів файлів (Пуск > Настройки > Панель управления > Свойства папки > Вид). Інакше редактор Блокнот може автоматично додати в кінець імені розширення .ТХТ.
Запустіть програму Internet Explorer (Пуск > Программы > Internet Explorer).
Дайте команду Файл > Открыть. Клацніть на кнопці Просмотр і відкрийте файл fjrst.htm.
Подивіться, як відображається цей файл — простий коректний документ HTML. Де відображається вміст елемента TITLE? Де відображається вміст елемента BODY?
5.2.Виконати форматування абзаців
Відкрийте документ first.htm у програмі Блокнот.
Видаліть весь текст, що знаходиться між тегами <BODY> і </BODY>. Текст, який вводитиметься, необхідно помістити після тегу <BODY>, а його конкретний зміст може бути будь-яким.
Введіть заголовок першого рівня, розсмістивши його між тегами <Н1 > і </Н1 >.
Введіть заголовок другого рівня, розмістивши його між тегами <Н2>
і </Н2>.
Введіть окремий абзац тексту, почавши його з тегу <Р>. Пропуски і символи переведення рядка можна використовувати всередині абзацу довільно.
Введіть тег горизонтальної лінійки <HR>.
Введіть ще один абзац тексту, почавши його з тегу <Р>. Збережіть цей документ під іменем paragraph.htm.
Запустіть програму Internet Explorer (Пуск > Программы > Internet Explorer).
Дайте команду Файл > Открыть. Клацніть на кнопці Просмотр і відкрийте файл paragraph.htm.
31
Подивіться, як відображається цей файл. Встановіть відповідність між елементами коду HTML і фрагментами документа, що відображаються на екрані.
5.3.Створити гіперпосилання
Відкрийте документ first.htm у програмі Блокнот.
Видаліть весь текст, що знаходиться між тегами <BODY> і </BODY>. Текст, який вводитиметься, необхідно помістити після тегу <BODY>.
Введіть фразу: Текст до посилання.
Введіть тег: <A HREF=”first.htm”>.
Введіть фразу: Посилання. Введіть закриваючий тег </А>.
Введіть фразу: Текст після посилання. Збережіть документ під ім'ям link.htm.
Запустіть програму Internet Explorer (Пуск > Програми > Internet
Explorer).
Дайте команду Файл > Відкрити. Клацніть на кнопці Огляд і відкрийте файл link.htm.
Переконайтеся в тому, що текст між тегами <А> і </А> виділений як посилання (кольором і підкресленням).
Клацніть на посиланні і переконайтеся, що при цьому завантажується документ, на який указує посилання.
Клацніть на кнопці Назад на панелі інструментів, щоб повернутися до попередньої сторінки. Переконайтеся, що посилання тепер вважається за «проглянуті» і відображається іншим кольором.
5.4.Створити зображення і використати його на Webсторінці
Відкрийте програму Paint (Пуск > Программы > Стандартные > Paint). Задайте розміри нового рисунка, наприклад 50x50 точок (Рисунок > Атрибути).
Виберіть червоний колір переднього плану і зелений колір фону. Залийте рисунок фоновим кольором.
Інструментом Кисть нанесіть довільний червоний рисунок на зелений фон.
Збережіть рисунок під іменем pid .gif (у форматі GIF).
32
У деяких версіях Windows програма Paint дозволяє створювати рисунки GIF з прозорим фоном. У цьому випадку діалогове вікно Атрибути (Рисунок > Атрибути) містить прапорець Використовувати прозорий колір фону.
Відкрийте документ first.htm у програмі Блокнот.
Видаліть весь текст, що знаходиться між тегами <BODY> і </BODY>. Текст, який вводитиметься, необхідно помістити після тегу <BODY>.
Введіть довільний текст (довжиною 4-5 рядків) і встановіть текстовий курсор у його початок.
Введіть тег <IMG SRC="pic1 .gif" ALIGN="BOTTOM">.
Збережіть документ під іменем picture.htm.
Запустіть програму Internet Explorer (Пуск > Программы > Internet Explorer).
Дайте команду Файл > Открыть. Клацніть на кнопці Просмотр і відкрийте файл picture.htm. Подивіться на документ, що вийшов, особливо на зображення.
Поверніться в програму Блокнот і змініть значення атрибуту: ALlGN="TOP". Збережіть файл під тим же іменем.
Поверніться в програму Internet Explorer і клацніть на кнопці Востановить на панелі інструментів. Подивіться, як змінився вигляд сторінки при зміні атрибутів.
Поверніться в програму Блокнот і змініть значення атрибуту: ALIGN="LEFT". Збережіть файл під тим же іменем.
Поверніться в програму Internet Explorer і клацніть на кнопці Возобновить на панелі інструментів. Подивіться, як змінився вигляд сторінки при зміні атрибутів.
Поверніться в програму Блокнот і додайте в тег <IMG> атрибути: HSPACE=40 VSPACE=20. Збережіть файл під тим же іменем. Поверніться в програму Internet Explorer клацніть на кнопці Востановить на панелі інструментів. Подивіться, як змінився вигляд сторінки при зміні атрибутів.
5.5.Виконати форматування тексту
Відкрийте документ first.htm у програмі Блокнот.
Видаліть весь текст, що знаходиться між тегами <BODY> і </BODY>. Текст, який вводитиметься, необхідно помістити після
33
тегу <BODY>, а його конкретний зміст може бути будь-яким.
Введіть тег <BASEFONT SIZE="5" COLOR="BROWN">. Він задає виведення тексту за замовчуванням збільшеним шрифтом і коричневим кольором.
Введіть довільний абзац тексту, який виводитиметься шрифтом, заданим за замовчуванням. Почніть цей абзац з тегу <Р>.
Введіть теги: <P>FONT SIZE="-2" FACE="ARIAL" COLOR="GREEN">.
Введіть черговий абзац тексту, закінчивши його тегом </FONT>.
Унаступному абзаці використовуйте на свій розсуд парні теги: <В> (напівжирний шрифт), <1> (курсив), <U> (підкреслення), <S> (викреслення), <SUB> (нижній індекс), <SUP> (верхній індекс).
Унаступному абзаці використовуйте на свій розсуд парні теги: <ЕМ> (виділення), <STRONG> (сильне виділення), <CODE> (текст програми), <KBD> (клавіатурне введення), <SAMP> (приклад виведення), <VAR> (комп'ютерна змінна).
Зберегти отриманий документ під іменем format.htm.
Запустіть програму Internet Explorer (Пуск > Программы > Internet Explorer).
Дайте команду Файл > Открыть. Клацніть на кнопці Просмотр і відкрийте файл format.htm.
Прокоментуйте, як використані елементи HTML впливають на спосіб відображення тексту.
Поверніться в програму Блокнот і змініть документ так, щоб елементи, задаючі форматування, були вкладені один в одний. Збережіть документ під тим же іменем.
Поверніться в програму Internet Explorer і клацніть на кнопці Відновити на панелі інструментів. Подивіться, як змінився вигляд сторінки.
5.6.Використати прийоми створення списків
Відкрийте документ first.htm у програмі Блокнот.
Видаліть весь текст, що знаходиться між тегами <BODY> і </BODY>. Текст, який вводитиметься, необхідно помістити після тегу <BODY>, а його конкретний зміст може бути будь-яким.
Вставте в документ тег <OL TYPE="I">, який починає впорядкований (нумерований) список.
34
Вставте в документ елементи списку, передуючи кожному з них тег
<LI>.
Завершити список за допомогою тегу </OL>. Збережіть отриманий документ під іменем list.htm.
Запустіть програму Internet Explorer {Пуск > Программы > Internet Explorer).
Дайте команду Файл > Открыть. Клацніть на кнопці Просмотр і відкрийте файл list.htm.
Прокоментуйте, як впорядкований список відображається в програмі Internet Explorer, звертаючи особливу увагу на спосіб нумерації, заданий за допомогою атрибута TYPE=.
Поверніться в програму Блокнот і встановіть текстовий курсор після закінчення введеного списку.
Вставте в документ тег <UL TYPE="SQUARE">, який починає невпорядкований (маркірований) список.
Вставте в документ елементи списку, передуючи кожному з них тег
<LI>.
Завершити список за допомогою тегу </UL>. Збережіть документ під тим же іменем.
Поверніться в програму Internet Explorer і клацніть на кнопці Возобновить на панелі інструментів. Подивіться, як змінився вигляд сторінки.
Поверніться в програму Блокнот і встановіть текстовий курсор після закінчення введеного списку.
Вставте в документ тег <DL>, який починає список визначень. Вставте в список визначены слова, передуючи відповідним абзацам тег <DT>.
Вставте в список відповідні визначення, передуючи їм тег <DD>. Завершити список за допомогою тегу </DL>. Збережіть документ під тим же іменем.
Поверніться в програму Internet Explorer і клацніть на кнопці Возобновить на панелі інструментів. Подивіться, як виглядає при відображенні веб - сторінки список визначень.
5.7.Створити таблицю.
Відкрийте документ fjrst.htm у програмі Блокнот.
Видаліть весь текст, що знаходиться між тегами <BODY> і
35
</BODY>. Текст, який вводитиметься, необхідно помістити після тегу <BODY>. У даній вправі використовується список номерів телефонів.
Введіть тег <TABLE BORDER="10" WIDTH="100%">.
Введіть рядок: <CAPTION ALIGN="TOP">список телефонів</CAPTION>.
Перший рядок таблиці повинен містити заголовки стовпців. Визначіть її таким чином:
<TR BGCOLOR="YELLOW" ALIGN="CENTER">
<ТH>прізвище<TH>номер телефону
Визначте подальші рядки таблиці, передуючи кожній з них тег <TR> і поміщаючи вміст кожної комірки після тегу <TD>.
Останній рядок таблиці задайте таким чином:
<TR><TD ALIGN="CENTER" COLSPAN="2">Ha першому поверсі будівлі є безкоштовний телефон-автомат.
Завершіть таблицю тегом </TABLE>. Збережіть документ під іменем table.htm.
Запустіть програму Internet Explorer (Пуск > Програми > Internet Explorer).
Дайте команду Файл > Открыть. Клацніть на кнопці Просмотр і відкрийте файл table.htm.
Прокоментуйте, як створена таблиця відображається в програмі Internet Explorer, звертаючи особливу увагу на вплив заданих атрибутів.
Змініть ширину вікна браузера і встановіть, як при цьому змінюється зовнішній вигляд таблиці.
5.8.Створити опис фреймів.
Запустіть текстовий редактор Блокнот (Пуск > Программы > Стандартные > Блокнот).
Введіть наступне :
<HTML>
<HEAD>
<TITLE>опис фреймів</TITLE>
</HEAD>
36
<FRAMESET
ROWS="60%,*">
<FRAME SRC="table.htm"> <FRAMESET COLS="35%,65%"NO RESIZE> <FRAME SRC="first.htm">
<FRAME
SRC="links.htm">
</FRAMESET>
</HTML>
Збережіть цей документ під іменем frames.htm.
Запустіть програму Internet Explorer (Пуск > Програми > Internet Explorer).
Дайте команду Файл > Открыть. Клацніть на кнопці Просмотр і відкрийте файл frames.htm.
Проаналізуйтезображення кількох створених раніше документів в окремих фреймах.
Подивіться, що відбувається при зміні ширини вікна браузера. Перевірте, чи можна змінити положення меж фреймів методом перетягування за допомогою миші.
Клацніть на посиланні, наявному в одному з фреймів, і подивіться, як буде відображений новий документ.
Клацніть на кнопці Назад на панелі інструментів і переконайтеся, що повернення до попереднього документа не порушує структуру фреймів.
Поверніться в програму Блокнот і змініть структуру і параметри фреймів на свій розсуд. Збережіть документ під тим же іменем.
12. Поверніться в програму Internet Explorer і клацніть на кнопці Возобновить на панелі інструментів. Переконайтеся, що змінений вигляд веб - сторінки відповідає задуманому. Якщо це не так, поверніться в програму Блокнот, знайдіть і виправте помилки.
5.9. Створити Web-документ за допомогою редактора
FrontPage.
Запустіть програму FrontPage (Пуск > Программы > Microsoft FrontPage).
37
Введіть в автоматично створену веб - сторінку довільний текст документа.
За допомогою панелі інструментів Форматирование відформатуйте текст за власним розсудом.
Для створення таблиці клацніть на кнопці Додбавить таблицу на панелі інструментів Стандартная.
Для додавання ілюстрацій використовуйте кнопку Добавить рисунок з файлу на панелі інструментів Стандартная. Ілюстрації візьміть з папки \Windows.
Дайте команду Файл > Сохранить і задайте ім'я файлу wysiwyg.htm. Підтвердіть збереження зображень, що вимагають перетворення формату.
Запустіть програму Internet Explorer (Пуск > Программы > Internet Explorer).
Дайте команду Файл > Открыть. Клацніть на кнопці Просмотр і відкрийте файл wysiwyg.htm.
Переконайтеся, що створений документ правильно відображається браузером.
Змініть ширину вікна браузера і подивіться, як при цьому
змінюєтться вигляд документа. |
|
Поверніться в програму FrontPage і клацніть на кнопці |
HTML- |
код. |
|
Вивчіть код HTML, що автоматично згенерувався, визначте, як за допомогою тегів HTML реалізовані використані команди форматування.
Оцініть якість коду HTML.
5.10. Дослідити методи створення абзацного відступу в документах HTML
Запустити текстовий редактор (наприклад Блокнот) і створити документ HTML. Ввести теги структурних елементів і дати документу заголовок, наприклад Імітація абзацних відступів.
Ввести невеликий абзац тексту, який використовуватиметься як еталон. Зберегти документ.
Запустити браузер Internet Explorer і відкрити в ньому створений документ. Відрегулювати ширину вікна програми так, щоб досліджуваний абзац займав кілька рядків. Переконатися, що він виводиться без відступу.
38
Додавання пропусків. Поверніться до редагування документа. Розмістіть після еталонного абзацу горизонтальну лінійку (тег <HR>). Скопіюйте еталонний абзац через буфер обміну, помістивши копію нижче за лінійку. Додайте в початок скопійованого абзацу кілька пропусків. Збережіть документ.
Поверніться в програму Internet Explorers клацніть на кнопці Обновить. Погляньте на доданий абзац. Поясніть, чому створити абзацний відступ у такий спосіб не вдається.
Метод елемента списку. Поверніться до редагування документа. Розмістіть після останнього абзацу горизонтальну лінійку. Скопіюйте еталонний абзац через буфер обміну, помістивши копію нижче за лінійку. Додайте в початок скопійованого абзацу тег <DD>. Збережіть документ.
Поверніться в програму Internet Explorers, клацніть на кнопці Обновить. Погляньте на доданий абзац. Переконайтеся, що з'явився абзацний відступ. Чи правильно використовується код HTML в отриманому документі? Чи можна рекомендувати такий метод створення абзацного відступу? Чому?
Метод нерозривних пропусків. Поверніться до редагування документа. Розташуйте після останнього абзацу горизонтальну лінійку. Скопіюйте еталонний абзац через буфер обміну, помістивши копію нижче за лінійку. Додайте в початок скопійованого абзацу повторену кілька разів комбінацію символів . Збережіть документ.
Поверніться в програму Internet Explorer та клацніть на кнопці Обновить. Погляньте на доданий абзац. Переконайтеся, що з'явився абзацний відступ. Чи можна рекомендувати такий метод створення абзацного відступу? Чому?
Метод тексту, що заздалегідь відформатувався. Поверніться до редагування документа. Розмістіть після останнього абзацу горизонтальну лінійку. Скопіюйте еталонний абзац через буфер обміну, помістивши копію нижче за лінійку. Додайте в початок скопійованого абзацу тег <PRE>, що задає заздалегідь відформатований текст і декілька пропусків. У кінці абзацу додайте тег </PRE>. Збережітеь документ.
Поверніться в програму Internet Explorer і клацніть на кнопці Обновить. Погляньте на доданий абзац. Переконайтеся, що з'явився абзацний відступ. Зверніть увагу на спосіб обробки пропусків і символів кінця рядка в попередньо відформатованому тексті. У чому особливість використовуваного шрифту? Висловіть свою думку про використання цього методу створення абзацного відступу.
39
Метод невидимого зображення. Поверніться до редагування документа. Розмістіть після останнього абзацу горизонтальну лінійку. Скопіюйте еталонний абзац через буфер обміну, помістивши копію нижче за лінійку. Додайте в початок абзацу тег <IMG>, вкажіть використовуваний файл зображення і задайте відступ по горизонталі в 10 пікселів (HSPACE="10M). Файл зображення має бути картинкою у форматі GIF, що складається з одного пікселя (1x1), заданого прозорим кольором. Збережіть документ.
Поверніться в програму Internet Explorer до клацніть на кнопці Обновить. Погляньте на доданий абзац. Переконайтеся, що з'явився абзацний відступ. Проаналізуйте всі використані методи і висловіть свою думку про доцільність їх використання і про те, який з них найбільш зручний.
6. Вимоги до звіту
Оформити звіт в електронному вигляді у pdf - форматі. У звіт включити назву, мету, завдання, хід роботи, отримані результати, необхідні графічні зображення (зображення сторінки) та висновки. Звіт надати на електронному носії.
7.Контрольні запитання
7.1.Структура XHTML - документа?
7.2.У чому відмінність XHTMLта HTML - документа?
7.3.Якими методами можливо добитися необхідного розташування елементів HTML - сторінки?
7.4.Які елементи HTML можуть бути візуальним блоком?
7.5.Що таке крос-браузерність HTML - документів і яким чином її досягти?
7.6.Яким тегом позначається візуальний блок, заданий явно?
7.7.Як тег CSS відповідає за відступ візуального блока від сусідніх блоків?
7.8.Які теги CSS відповідають за форматування тексту всередині блока?
7.9.Що таке бокс-поплавок і якими тегами він керується?
7.10.Які є моделі позиціонування боксів?
7.11.Який тег відповідає за відображення боксу?
40