Студопедия

КАТЕГОРИИ:

АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника



Виконання роботи




Читайте также:
  1. II. Основні етапи підготовки курсової роботи й графік її виконання
  2. III. Основні вимоги до оформлення курсової роботи
  3. VII. Надання і рецензування курсової роботи
  4. Варіанти завдання до лабораторної роботи 10
  5. Варіанти завдань для самостійного виконання
  6. Вивчити режими роботи ABS.
  7. Визначення затрат на проектні роботи
  8. Виконання господарських договорів
  9. Виконання моделювання

ЛАБОРАТОРНА РОБОТА № 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; просмотров: 9; Нарушение авторских прав







lektsii.com - Лекции.Ком - 2014-2021 год. (0.02 сек.) Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав
Главная страница Случайная страница Контакты