КАТЕГОРИИ:
АстрономияБиологияГеографияДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРиторикаСоциологияСпортСтроительствоТехнологияФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
Виконання роботи
ЛАБОРАТОРНА РОБОТА № 1
Створення HTML-документу
1.Теоретичні відомості
Метою роботи є навчитися створювати файли, які містять елементи форматування, що задаються мовою HTML.
HTML-документ – це текстовий файл з розширенням *.htm або *.html.
Найпростіший HTML-документ має вигляд:
<html> <head> <title> Лабораторна 1. Приклад 1. </title> </head> <body> <H1> Тема роботи </H1> <P> Найпростіший приклад HTML-документу. </P> <P> Цей html-файл може бути одночасно відкритий в Блокнотіі в браузері. При збереженні змін в Блокноті треба натиснути кнопку Reload (перезавантажити) в браузері, щоб побачити ці зміни. </P> </body> </html>
Для зручності читання в приклад введені додаткові відступи, однак в HTML це зовсім не обов'язково. Більш того, браузери ігнорують символи кінця рядку і множину пробілів в HTML-файлах, тому приклад міг би виглядати ось так:
<html> <head> <title> Лабораторна 1. Приклад 1.</title> </head> <body> <H1>Тема роботи</H1> <P> Найпростіший приклад HTML-документу.</P> <P> Цей html-файл може бути одночасно відкритий і в Блокноті, і в браузері. При збереженні змін в Блокноті треба натиснути кнопку Reload (перезавантажити) в браузері, щоб побачити ці зміни.</P> </body> </html>Як видно з прикладу, вся інформація про форматування документу зосереджена в його фрагментах, що укладені між знаками < >. Такий фрагмент (наприклад, <html>) називається міткою або тегом (tag).
Більшість HTML-міток парні, тобто на кожну відкриту мітку виду <tag> є закриваюча мітка виду </tag>.
Мітки можна вводити як великими, так і малими літерами, наприклад, мітки <body>, <BODY> і <Body> будуть сприйняті браузером однаково.
Багато міток, крім імені, можуть містити атрибути – елементи, що дають додаткову інформацію про те, як браузер повинний обробити поточну мітку. Більш докладно мітки і їх атрибути буде розглянуто в ході виконання лабораторної роботи.
Виконання роботи
Створення найпростіших файлів HTML:
1. Створіть папку, в якій Ви будете зберігати свої Web-сторінки.
2. Запустіть стандартну програму Блокнот (Notepad) і наберіть наступний текст з елементами форматування:
<HTML><HEAD><TITLE> Навчальний файл HTML</TITLE></HEAD><BODY>Розклад занять на вівторок</BODY></HTML>3. Збережіть файл під назвою schedule.html.
4. Для перегляду створеної Web-сторінки завантажте браузер Microsoft Internet Explorer.
5. Відкрийте в меню браузера Файл (File) / Відкрити (Open) / Огляд (Browse) і знайдіть створений раніше файл schedule.html, завантажте його. Переконайтеся, що назва Web-сторінки (Навчальний файл HTML) відбилася у верхньому статусному рядку браузера.
Управління розташуванням тексту на екрані:
1. Внесіть зміни в текст, розташувавши слова "Розклад", "занять", "на вівторок" на різних рядках:
<HTML><HEAD><TITLE> Навчальний файл HTML</TITLE></HEAD><BODY>Розкладзанятьна вівторок</BODY></HTML>2. Збережіть внесені зміни за допомогою команд Файл (File) / Зберегти (Save).
3. Перегляньте за допомогою браузера Microsoft Internet Explorer нову Web-сторінку, використовуючи клавішу F5 або за допомогою кнопки Оновити (Refresh).
Попередні кроки не викликали ніяких видимих змін в документі html – при відображенні гіпертексту браузери автоматично розміщують текст на екрані, не беручи до уваги наявні у файлі переноси рядків і пробілів, що йдуть підряд. Існують спеціальні команди, що виконують перенос рядка і задають початок нового абзацу. Крім того, існує команда, яка забороняє програмі браузера яким-небудь чином змінювати форматування тексту і дозволяє точно відтворити на екрані заданий фрагмент текстового файлу.
Тег перенесення рядка <BR> відокремлює рядок від подальшого тексту або графіки. Тег абзацу <P> теж відділяє рядок, але ще додає порожній рядок, який візуально виділяє абзац. Обидва теги є одноелементні (не вимагають закриваючого тегу).
4. Внесіть зміни в текст файлу HTML:
<HTML><HEAD><TITLE> Навчальний файл HTML </TITLE></HEAD><BODY>Розклад <P>занять <BR>на вівторок</BODY></HTML>Збережіть зміни у файлі schedule.html. Перегляньте за допомогою браузера оновлену сторінку.
Виділення фрагментів тексту:
Теги виділення фрагментів тексту дозволяють керувати відображенням окремих символів і слів. Існує три тега виділення фрагментів тексту: <B>: </ B> – для виділення напівжирним, <I>: </I> – для виділення курсивом, <U>: </ U> – для виділення підкресленням.
1. Внесіть зміни в файл schedule.html:
<HTML><HEAD><TITLE> Навчальний файл HTML </TITLE></HEAD><BODY><B> Розклад </B> <I> занять </I> <U> на вівторок </U></BODY></HTML>2. Подивіться нову отриману Web-сторінку.
3. Спробуйте використати вкладення тегів:
<I> <B> Розклад </B> </ I> <I> занять </ I> <U> на вівторок </ U>
Зміна розміру тексту:
Існує два способи керування розміром тексту, відображуваного браузером:
a) використання стилів заголовку;
b) завдання розміру поточного шрифту.
1. Внесіть зміни в файл schedule.html:
<HTML><HEAD><TITLE> Навчальний файл HTML </ TITLE></ HEAD><BODY><H1> Розклад </ H1> <I> занять </ I> <U> на вівторок </ U></ BODY> </ HTML>2. Перегляньте оновлення через браузер.
3. Внесіть наступні зміни в файл schedule.html:
<HTML><HEAD><TITLE> Навчальний файл HTML </TITLE></HEAD><BODY><FONT SIZE="7"> Розклад </FONT> занять на вівторок</BODY></HTML>
4. Самостійно змініть розмір шрифту для тексту "заняття на вівторок", використовуючи тег <FONT>.
Гарнітура і колір шрифту:
Тег <FONT> надає можливості управління розміром, накресленням і кольором тексту. Зміна гарнітури шрифту виконується простим додаванням до тегу <FONT> атрибуту FACE. Наприклад, для зображення тексту шрифтом Arial необхідно записати <FONT FACE="ARIAL">.
Для зміни кольору шрифту в тезі <FONT> можна використовувати атрибут COLOR = "X". Замість Х треба підставити або назву кольору (в лапках), або його шістнадцяткове значення. При завданні кольору шістнадцятковим числом можна представити цей колір розкладеним на три складові: червоний (R), зелений (G), синій (B), кожен з яких має значення від 0 до FF. Приклади запису кольору в форматі RGB наведені в таблиці:
| Колір | RRGGBB |
| black | чорний | |
| white | білий | FFFFFF |
| red | червоний | FF0000 |
| green | зелений | 00FF00 |
| azure | бірюзовий | 00FFFF |
| blue | синій | 0000FF |
| gray | сірий | A0A0A0 |
| purple | фіолетовий | FF00FF |
| yellow | жовтий | FFFF00 |
| brown | коричневий | |
| orange | оранжевий | FF8000 |
| violet | ліловий | 8000FF |
1. Внесіть зміни в файл schedule.html:
<HTML><HEAD><TITLE> Навчальний файл HTML </TITLE></HEAD><BODY><U><I><B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7"> Розклад </FONT></B></I></U>занять на вівторок </BODY></HTML>2. Самостійно змініть розмір, колір, гарнітуру, стиль тексту документу.
Вирівнювання тексту по горизонталі:
За допомогою тегів HTML можна керувати горизонтальним вирівнюванням тексту. Якщо не обумовлювати спосіб вирівнювання, всі елементи в документі будуть вирівнюватися по лівому краю і мати нерівне праве поле.
Сучасні браузери для вирівнювання тексту використовують атрибут ALIGN =, який вбудовується в теги абзацу або заголовку.
ALIGN=CENTER – вирівнювання по центру.
ALIGN=RIGHT – вирівнювання по правому краю.
ALIGN=LEFT – вирівнювання по лівому краю.
1. Внесіть зміни в файл schedule.html:
<TITLE> Навчальний файл HTML </ TITLE></ HEAD><BODY><P ALIGN=CENTER><FONT COLOR="#008080" SIZE="7"> <B> Розклад </ B> </ FONT> <BR><FONT SIZE="6"> <I> занять на вівторок </ I> </ FONT></ P></ BODY></ HTML>2. Перегляньте документ.
Надання кольору фону та тексту:
Кольори фону і тексту документа встановлюються на початку файлу HTML у тегу <BODY>. Атрибут BGCOLOR = задає колір фону сторінки, TEXT = визначає колір тексту для всієї сторінки, LINK = і VLINK = визначають кольори, відповідно не переглянутих і переглянутих посилань.
1. Внесіть зміни в файл schedule.html:
<HTML><HEAD><TITLE> Навчальний файл HTML </ TITLE></ HEAD><BODY BGCOLOR="#FFFFCC" TEXT="#330066"><P ALIGN=CENTER><FONT COLOR="#008080" SIZE="7"> <B> Розклад </ B> </ FONT> <BR><FONT SIZE="6"> <I> занять на вівторок </ I> </ FONT></ P></ BODY></ HTML>Завдання для самостійного виконання:
1. Проведіть експериментальну роботу із створеним документом, змінюючи розміри вікна, подивіться, як браузер показує текст з примусовим розривом рядків. Що відбувається, коли вікно зменшується настільки, що в ньому не може поміститися цілком навіть одне слово?
2. Самостійно створіть власний HTML-документ.
3. Зміст звіту
1. Виконати операції з текстом, що містить особисту інформацію (П.І.Б., адреса, номер залікової книжки і т.д.).
2. Представити HTML-коди виконаних операцій.
3. Представити скріни готових HTML-документів.
4. При здачі роботи мати початкові файли.
4. Завдання і запитання для атестації
1. Вміти показати як створюється HTML-документ.
2. Знати принципи формування HTML-документу.
3. Знати основні теги.
Дата добавления: 2015-09-15; просмотров: 76; Мы поможем в написании вашей работы!; Нарушение авторских прав |