КАТЕГОРИИ:
АстрономияБиологияГеографияДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРиторикаСоциологияСпортСтроительствоТехнологияФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
|
Виконання роботи ⇐ ПредыдущаяСтр 2 из 2 ЛАБОРАТОРНА РОБОТА № 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 наведені в таблиці:
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. Знати основні теги.
|