Тема роботи : HTML — основні поняття, структура документа
Лабораторна робота №3
Мета: опанувати принципи побудови логічної структури HTML-документа й основні принципи
форматування тексту.
Завдання №1
1. Викликала текстовий редактор Блокнот. Набрала заголовок документа й зберегла його в папці Web під іменем Прізвище.html.
<HTML>
<HEAD>
<TITLE> Комп'ютерний клас </TITLE>
</HEAD>
</HTML>
2. Переглянула створений документ за допомогою браузера Internet Explorer.
Завдання №2
1. Відкрила збережений документ попереднього завдання і створила розділ
змістовної частини, використовуючи різні заголовки:
<BODY>
<H1> Смілянський технікум харчових технологій НУХТ </H1>
<H2> дозволить Вам стати висококласними фахівцями </H2>
<H3>в області Інтернет технологій</H3>
<P> Ми раді привітати Вас у нашому технікумі та пропонуємо навчання за наступними
спеціальностями: </BODY>
2. Переглянула створений документ за допомогою браузера Internet Explorer. Після
перегляду змінила останній рядок так, як показано нижче:
<HR> <P> Ми раді привітати Вас <P> у нашому технікумі <BR> і
пропонуємо навчання за наступними спеціальностями :
Зберегла документ та за допомогою Internet Explorer переглянула, які зміни сталися у документі.
3. Самостійно відокремила лініями назву технікуму і зробила його накреслення курсивним.
Завдання №3
За допомогою текстового редактора Блокнот створила новий HTML –
документ comic.html наступного вигляду:
<HTML>
<HEAD>
<TITLE> Комікси </TITLE>
</HEAD> <BODY>
<P> <H1> Комікси для дітей і не тільки </H1> <HR> <H2> <EM>Це весела сторінка </EM></H2>
<H3> Що зібрала всілякі добутки жанру коміксів, </H3> <HR>
<P> Як вітчизняних, так і закордонних <HR><HR>
<P> Дедушка с внуком пошли в Интернет,
<BR> Старец вернулся, а мальчика нет.
</BODY>
</HTML>
Переглянула створену сторінку comic.html в Internet Explorer.
Завдання №4.
1. Відкрила створену в попередньому завданні сторінку comic.html у текстовому
редакторі Блокнот.
2. Внесла до сторінки comic.html наступні зміни:
• вирівняла текст сторінки таким чином: перші два рядки - по центру, чотири рядки по правому краю;
• змінила колір тексту: перший рядок - червоний, другий і третій - коричневий;
четвертий - зелений; вірш – синій;
• задала гарнітуру шрифту Verdana, розмір шрифту у вірші – кожен рядок за зростанням від 3 до 6.
3. Набрала в кінці документа в розділі BODYрядок:
<P> Анекдоти <SUB> для дорослих </SUB>, забавні картинки <SUP> для дітей </SUP>
Переглянула документ comic.html за допомогою програми перегляду Web – сторінок Internet Explorer. Проаналізувала зміни, що сталися в документі.
Завдання №5
Змінила сторінку comic.html наступним чином:
1) змінила основний шрифт за допомогою елемента <Basefont> таким чином:
гарнітура шрифту - Arial, розмір шрифту- 4, колір шрифту – чорний;
2) змінила зовнішній вигляд ліній.
Перша лінія: товщина лінії - 5, колір лінії – малиновий <HR size=5 color=magenta>.
Друга лінія: довжина - 60%, товщина лінії - 3, колір лінії - зелений, вирівняла лінію по правому краю <HR width=60% align= ―right‖>.
Третя лінія: довжина лінії - 80%, товщина лінії - 5, колір і вирівнювання лінії не
змінюються <HR width=80% align=right color=green size=5>
Завдання №6
1. Створила текстовий документ passion.txt, у якому наберала список захоплень.
Відформатувала набраний текст.
2. Вставила відформатований текст із файлу passion.txt у документ comic.html. При цьому необхідно, щоб всі ознаки попереднього форматування тексту при перегляді
сторінки comic.html були збережені.
3. Нижче наберала цитату:
...мне представляется , что человеческий мозг похож на мален ький пустой чердак,
который вы можете обставить как хотите. Дурак натащит туда всякой рухляди, какая попадётся под руку, и полезные, нужные вещи уже некуда будет всунуть, или в лучшем случае до них среди всей этой завали и не докопаешься. Шерлок Холмс (Артур Конан Дойль)
Контрольні питання:
1. Що таке гіпертекстовий документ? Будь гіпертекстовий документ являє собою звичайний текстовий файл у форматі ANSI ASCII (American Standard Code for Interchange Information - Американський Стандартний Код для Передачі Інформації), що містить власне текст і спеціальні теги для його розмітки, а також посилання на інші подібні документи, графічні зображення і будь-які інші файли.
2. Яка структура HTML документа? Документ HTML 4.01 складається з трьох частин:
Декларація типу документу (англ. Document type declaration, Doctype), на початку документа, в якій визначається тип документа (DTD).
Шапка документу (знаходиться в межах елементу head), в якій записано загальні технічні відомості або додаткова інформація про документ, яка не відтворюється безпосередньо в браузері
;Тіло документу (може знаходитися в елементах body або frameset), в якому міститься основна інформація документа.
3. За допомогою яких тегів можна задати або змінити шрифт? Тег <FONT> представляє собою контейнер для зміни характеристик шрифту, таких як розмір, колір і гарнітура.
Висновок. Опанувала принципи побудови логічної структури HTML-документа й основні принципи форматування тексту.