Реферат Основи WEB дизайну
Работа добавлена на сайт bukvasha.net: 2015-10-28Поможем написать учебную работу
Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
от 25%
Подписываем
договор
1.3 Основи WEB – дизайну
World Wіde Web (WWW) - глобальна комп'ютерна мережа на сьогоднішній день містить мільйони сайтів, на яких розміщена всіляка інформація.
Окремий документ WWW називають WEB - сторінкою. Звичайно це комбінований документ, що може містити текст, графічні ілюстрації, мультимедійні й інші вставні об'єкти.
Програми перегляду Web-сторінок називаються браузерами. Браузер відображає документ на екрані відповідно до команд, які впроваджені в текст цього документа. Автономні Web-документи використовують мову HTML (HyperText Markup Language – мова розмітки гіпертексту). Мова HTML призначена не для форматування документа, а для його функціональної розмітки. Конструкції мови HTML називаються тегами (іноді їх називають дескрипторами). Вони вставляються безпосередньо в текст документа. Усі теги розміщуються у кутових дужках <…>...
Теги HTML бувають парними і непарними. Непарні (одиночні, автономні) теги впливають на весь документ або визначають разовий ефект у місці своєї появи. При використанні парних тегів у документ додаються відкриваючий і закриваючий теги, що впливають на частину документа між ними. Закриваючий тег відрізняється від відкриваючою наявністю символу / (коса риска) перед ключовим словом (</HEAD>). Закриття парних тегів виконується так, щоб дотримувалися правила вкладення. Парні теги ще називаються контейнерними, разом зі своїм умістом вони утворюють контейнер.
Зручним засобом для створення файлів HTML є блокнот. Блокнот надає мінімальні засоби оформлення, тому тут виключена імовірність випадкового збереження спеціальних атрибутів форматування текстових файлів. Це особливо важливо мати на увазі при створенні документів HTML для Web -сторінки, тому що присутність спеціальних символів або інших атрибутів форматування на опублікованій Web -сторінці може виявитися небажаним або навіть викликати помилки [4].
1.
Структура документа HTML
Усі документи HTML мають однакову структуру, обумовлену фіксованим набором тегів структури. Документ HTML завжди має починатися з тега <HTML> і закінчуватися відповідним закриваючим тегом </HTML>. Усередині документа виділяються два основних розділи: заголовків і тіла документа, що йдуть саме в такому порядку. Розділ заголовків містить інформацію, що описує документ у цілому, і обмежується тегами <HEAD> і </HEAD>. Зокрема, розділ заголовків мусить містити загальний заголовок документа, обмежений парним тегом <TITLE>. Ця назва з'являється в заголовку вікна браузера. Назви документів враховуються пошуковими машинами, так що їх варто робити максимально інформативними.
Основний зміст розміщається в тілі документа, що обмежується парним тегом <BODY>. Насправді, положення структурних тегів у документі неважко визначити, навіть якщо вони опущені. Тому стандарт мови HTML вимагає тільки наявності тега <TITLE> (і, відповідно, </TITLE>). Проте, при створенні документа HTML опускати структурні теги не рекомендується.
Найпростіший, правильний документ HTML, що містить усі теги, які визначають його структуру, може виглядати в такий спосіб:
<HTML>
<HEAD>
<TITLE> Заголовок документа </TITLE>
</HEAD>
<BODY>
Текст документа
</BODY> </HTML>
Тег може містити список атрибутів. Атрибути вказуються після імені тега в довільному порядку. Один від одного вони відокремлюються одним або декількома пробілами або знаками табуляції. Після імені атрибута вводиться знак рівності і значення атрибута. Якщо значення складається з декількох слів або чисел, включаючи пробіли й інші спеціальні знаки, то воно має бути взято в лапки. Наприклад, <BODY BGCOLOR=Green TEXT=White> задає зелений колір фону документа і білий колір тексту.
Елемент
BODY
Елемент BODY може містити велику кількість атрибутів. Усі вони важливі, тому що визначають загальний вигляд документа. У табл. 1.1 наведені деякі атрибути, що задають зовнішній вигляд документа.
Якщо кольори не визначені, то використовуються кольори за замовчуванням, відповідно до установок клієнтського браузера.
У HTML кольори визначаються цифрами в шістнадцятирічним коді. Колірна система базується на трьох основних кольорах: червоному (Red), зеленому (Green) і синьому (Blue), що позначаються RGВ.
Таблиця 1.1
Атрибути елемента BODY
| Атрибут | Призначення |
| ALINK | Визначає колір активного посилання. |
| BGCOLOR | Визначає колір фону документа. |
| LINK | Визначає колір ще непереглянутого посилання. |
| ТЕХТ | Визначає колір тексту. |
| VLINK | Цей атрибут установлює колір тексту посилань, по яких був зроблений перехід (для візуальних браузерів). |
| ALINK | Цей атрибут установлює колір тексту посилань, коли вони обрані користувачем (використовується для візуальних браузерів). |
Для кожного кольору задається шістнадцятирічне значення від 00 до FF, що відповідає діапазонові 0-255 у десятковому вирахуванні. Для простоти в HTML визначені 16 стандартних кольорів, які разом з їх шістнадцятирічними кодами, наведені в таблиці 1.2.
Таблиця 1.2
Коди шістнадцяти стандартних кольорів у HTML 4
| Колір | Код | Колір | Код |
| Black (чорний) | #000000 | Silver (срібний) | #СОСОСО |
| Maroon (темно-бордовий) | #800000 | Red (червоний) | #FFOOOO |
| Green (зелений) | #008000 | Lime (вапно) | #OOFFOO |
| Olive (маслиновий) | #808000 | Yellow (жовтий) | #FFFFOO |
| Navy (темно-синій) | #000080 | Blue (синій) | #OOOOFF |
| Purple (фіолетовий) | #800080 | Fuchsia (фуксія) | #FFOOFF |
| Teal (темно-зелений) | #008080 | Aqua (аква) | #OOFFFF |
| Gray (сірий) | #808080 | White (білий) | #FFFFFF |
Елементи H1,
H2, Н3, H4, Н5, H6
Подальше структурування тіла документа виконується усередині елемента BODY за допомогою заголовків, що задаються елементами H1, Н2, Н3, Н4, Н5 і Н6. Функції елементів заголовків подібні звичайним стилям заголовків у текстових редакторах. Заголовки мають найважливіше значення в структуруванні HTML-документів, теги заголовків є одними із самих уживаних засобів HTML.
Елементи заголовків є контейнерами і тому повинні мати парні, наприклад, <H1> і </H1> теги. В HTML існує шість рівнів заголовків: самий верхній рівень – H1, далі Н2, Н3, Н4, Н5 і самий нижній Н6.
Елемент ADDRESS
Елемент ADDRESS служить для ідентифікації автора документа і (за бажанням) для вказівки адреси автора. Сюди ж звичайно поміщаються дані про авторські права. Цей елемент розташовується або на початку, або в самому кінці документа.
Елемент ADDRESS складається з тексту, розміщеного між тегами <ADDRESS> і </ADDRESS>. Текст, укладений між цими тегами, звичайно відображається у вікні браузера курсивом.
2.
Створення гіперпосилань
Основним засобом створення гіпертекстового документа є посилання, що зветься також гіперпосиланням або Web-посиланням. Посилання зв'язують один ресурс мережі з іншим. Посилання має два кінці, які звуться якорями, і напрямок, що визначає, який елемент до якого прив'язується. Посилання починається в «вихідному» якорі (джерелі) і вказує на«цільовий» якір, що може бути будь-яким Web-ресурсом.
Для завдання якорів і посилань можна використовувати елементи A і LINK. Елемент LINK може бути присутнім тільки в заголовку документа, елемент A – тільки в тілі документа. Розглянемо тільки атрибут HREF елемента A. Цей атрибут визначає місце розташування Web-ресурсу, тобто його URL адресу (Uniform Resource Locator – уніфікований покажчик інформаційного ресурсу, стандартизований рядок символів, що вказує місцезнаходження документа в мережі Internet).
Приклад:
Пропонуємо переглянути <A HREF="http//www.dnepr.com.ua"> карту </A> м. Дніпропетровська.
Слово "карта" буде виділено іншим кольором, як посилання, клацнувши по якому ви перейдете в зазначену URL адресу.
3.
Прийоми форматування HTML- документів
Форматування містить у собі:
- поділ тексту на абзаци
- переведення рядка – тег <BR>
- структурування тексту горизонтальними лініями – тег <HR>
- Шрифти
- Списки тощо.
Поділ тексту на абзаци
Для кращого сприйняття тексту його варто розбивати на абзаци, що виражають окрему, закінчену думку, на зразок того, як розбитий на абзаци текст у будь-якій книзі. HTML-документи не є виключенням з цього правила.
Поділ на абзаци здійснюється за допомогою спеціальних елементів. Якщо помістити тег <P> у початок кожного нового абзаца тексту, то програма перегляду відокремить абзаци один від одного порожнім рядком. Використання тега </P> необов'язково.
Одним з важливих атрибутів тега абзаца є ALIGN. Цей атрибут установлює тип вирівнювання тексту. За замовчуванням, при відсутності атрибута ALIGN, текст вирівнюється по лівій границі вікна браузера.
Таблиця 1.3
Значення атрибута ALIGN
| Значення | Опис |
| LEFT | Вирівнювання тексту по лівій границі вікна браузера. |
| CENTER | Вирівнювання тексту по центру вікна браузера. |
| RIGHT | Вирівнювання тексту по правій границі вікна браузера. |
| JUSTIFY | Вирівнювання тексту по обох полях документа (аналог "по ширине" в Word) |
Переведення рядка – тег <BR>
Щоб у будь-якому потрібному місці поточного рядка перейти на наступний рядок, у HTML використовується тег розриву рядка <BR>. Він змушує клієнтські браузери виводити символи, що стоять після нього, з початку нового рядка. На відміну від тега абзаца, тег <BR> не вставляє в текст порожній рядок, і не має кінцевого тега. Тег <BR> зручний для відображення списків, де важливий порядок розташування слів по рядках. Приклад використання тега розриву рядка для відображення невеликого списку.
<HTML>
<BODY>
<P>Складові частини персонального комп'ютера</P>
Системний блок<BR>
Монітор<BR>
Клавіатура<BR>
Миша<BR>
Принтер<BR>
Модем<BR>
</BODY>
</HTML>
Заборона переведення рядка
У деяких випадках з'являється необхідність у протилежній операції - забороні переведення рядка. Таку можливість надають контейнерні теги <NOBR> і </NOBR>, що є розширеннями мови HTML 4. Текст між цими тегами буде розташований в одному рядку, без переносу на інший. Іноді це дуже важливо, наприклад, при введенні гіперпосилань, однак надмірне вживання цих тегов може непередбачено порушити природне переведення рядків браузером клієнта.
Структурування тексту
горизонтальними лініями – тег <HR>
Одним зі способів структурування тексту служить уведення горизонтальних лінійок.
Звичайно горизонтальні лінії використовують для візуального виділення області HTML-сторінки. Для цього часто використовують рельєфну втиснену лінію, що додає документу "об'ємність". Для введення втиснених ліній використовується тег <HR>.
Тег <HR> дозволяє провести рельєфну горизонтальну лінію у вікнах більшості браузерів. Цей тег є одиночним, тому не вимагає кінцевого тега. До і після лінії автоматично вставляється порожній рядок.
Шрифти, елементи
FONT і BASEFONT
Елемент FONT являє собою контейнер, тобто є парним тегом. Він призначений для завдання кольору і розміру шрифту тексту в контейнері і може вкладатися в будь-який інший текстовий контейнер.
Елемент BASEFONT є одиночним і використовується для завдання розміру базового шрифту. За замовчуванням, при відсутності елемента BASEFONT, використовується шрифт розміру 3. Атрибути елементів FONT і BASEFONT наведені в табл. 1.4.
Приклад: <FONT FACE=Arial SIZЕ=4>
Таблиця 1.4
Атрибути елементів FONT і BASEFONT
| Атрибут | Призначення |
| SIZE | Задає розмір шрифту і може приймати наступні значення. 1. Значення в діапазоні від 1 до 7 задають відображення шрифту заданого фіксованого розміру. 2. Значення, що задають відносну зміну розміру шрифту. Наприклад, значення +1 збільшить розмір шрифту на 1, а значення -3 приведе до зменшення розміру шрифту на 3. |
| COLOR | Задає колір шрифту. |
| FACE | Задає список типів шрифту у виді розділеного комами списку, з якого браузер клієнта вибирає кращий . |
Списки
Списки - один з найбільш ефективних способів представлення інформації в HTML-документі. Вони легко сприймаються і можуть представляти послідовність процедур, параметри для вибору рішень, перелік посилань, меню тощо. Списки є фундаментальним способом організації і представлення інформації.
HTML дозволяє використовувати наступні три типи списків:
- упорядкований список (елемент OL).
- неупорядкований список (елемент UL).
- список визначень (елемент DL).
Упорядковані списки - тег
<OL>
Упорядкований список (те ж, що нумерований список у Word) відкривається контейнерним тегом <OL>, а кожен його пункт починається стандартним тегом <LI>. Програма перегляду, зустрівши тег <OL> упорядкованого списку, послідовно нумерує пункти списку: 1, 2, 3 тощо. Для форматування заголовка списку використовується спеціальний тег <LH> Для закриття списку використовується тег </OL>. Початковий і кінцевий теги забезпечують переведення рядка до і після списку, відокремлюючи, таким чином, список від іншого тексту. Це виключає необхідність використовувати теги абзаца <P>.
Для відділення пунктів списку один від одного можна використовувати теги абзаца.
Упорядковані списки допускають вкладення один у одного.
Таблиця 1.5
Атрибути упорядкованого списку
| Атрибут | Призначення |
| Compact | Указує браузерові клієнта представити список у більш компактному вигляді. Вид списку буде залежати від браузера і його настроювань. |
| Type | Установлює стиль списку. Стиль визначається одним з наступних значень. |
| l (L маленька)- установлює маркер у виді арабських цифр. | |
| I- установлює маркер у вигляді великих римських цифр. | |
| i - установлює маркер у вигляді маленьких римських цифр. | |
| А - установлює маркер у вигляді великих букв. | |
| а - установлює маркер у вигляді малих літер. | |
| Start | Установлює початковий маркер у поточному списку. |
Неупорядкований список
У HTML існує можливість створення неупорядкованих, маркірованих, списків - без нумерації абзаців. Для створення неупорядкованих списків використовують елемент UL.
Елемент UL
У неупорядкованих списках замість цифр використовують різні символи – маркери списку. Як і в упорядкованих списках, тут також забезпечується переведення рядка до і після списку і допускається створення вкладених списків. Список міститься усередині контейнерного тега <UL>. У неупорядкованих списках можна використовувати ті ж атрибути, що й в упорядкованих. Однак атрибут TYPE елемента UL допускає тільки три наступні значення: «disc», «square» і «circle», що задають маркери, відповідно, у вигляді жирної крапки, квадрата й окружності.
Список визначень
Списки визначень представляють текст у формі словникової статті, що складається з терміну і наступного текстового абзаца, що пояснює зміст терміна. Такі списки зручні, наприклад, для складання каталогів або для опису функцій підрозділів якої-небудь організації. Елемент списку визначень DL є контейнером і відокремлює список від іншого тексту HTML-документа порожніми рядками. Усередині контейнера термін, який треба визначити, позначається тегом <DT>, а абзац з його описом - тегом <DD>. Теги <DT> і <DD> відносяться до одиночних тегів.
Списки можна комбінувати.
4.
Створення зображення і використання його на Web-сторінці
Елемент IMG дозволяє включати в поточний HTML-документ зображення, що зберігається у файлі. Це одиночний тег. Значення деяких атрибутів:
SRC – задає місце розташування зображення форматів gif, jpeg, png.
HEIGHT – перевизначення висоти зображення.
WIDTH - перевизначення ширини зображення.
VSPACE – визначає вільний простір над і під зображеннями.
HSPACE - визначає вільний простір ліворуч і праворуч від зображення.
ALIGN – вирівнювання. Може приймати наступні значення:
bottom, middle, top – вирівнювання вікна об'єкта по вертикалі по нижньому рівні базової лінії, по центру і по верхньому рівні відповідно;
left, right, center – вирівнювання по горизонталі ліворуч, праворуч і по центру відповідно.
5.
Створення таблиць
Мова HTML надає можливість створення таблиць.
Елемент TABLE являє собою контейнерний тег, у якому знаходиться весь уміст таблиці. Для позначення рядка використовується контейнерний тег TR, для позначення заголовків стовпців (рядків) – контейнерний тег TH, а для даних в осередках – контейнерний тег TD.
Атрибути елемента TABLE.
ALIGN задає вирівнювання таблиці усередині документа і може приймати наступні значення:
left – таблиця знаходиться в лівій частині документа;
center
– таблиця знаходиться в центрі документа;
right – таблиця знаходиться в правій частині документа;
BORDER – задає товщину лінії таблиці.
WIDTH – визначає ширину таблиці. Якщо значення зазначене у відсотках, це означає частку у відсотках від доступного браузеру горизонтального простору.
Елемент CAPTION призначений для введення заголовка (назви) таблиці. Атрибут ALIGN указує розташування заголовка щодо таблиці – угорі (top), унизу (bottom), ліворуч (left), праворуч (right). За замовчуванням використовується значення top.
Елементи TR, TH і TD
Елемент TR не має характерних атрибутів і служить контейнером для осередків, що входять у рядок таблиці. Кожен новий рядок таблиці повинен починатися з тега TR. Кінцевий тег елемента TR можна опустити. Осередки, що входять у рядок, задаються елементами TH (заголовок) і TD (дані), оскільки в осередках таблиці можуть утримуватися дані двох типів: заголовна інформація і дані. Для об'єднання рядків або стовпців використовуються відповідно атрибути ROWSPAN і COLSPAN. Вони визначають, яка кількість рядків і стовпців займає осередок. Наприклад, ROWSPAN=3 поєднує в одному осередку три рядки.
6.
Створення опису фреймів
Мова HTML дозволяє в рамках однієї Web-сторінки відобразити декілька елементів. Для цього сторінка повинна бути розбита на декілька областей – фреймів. Розбивка сторінки описується документом HTML особливого роду, структура якого відрізняється від звичайної. Тіло документа заміняється описом фреймів, що задається парним тегом <FRAMESET>. Елемент BODY у такому документі має бути відсутнім, а при наявності - ігнорується браузером.
Відкриваючий тег <FRAMESET> мусить містити обов'язковий атрибут COLS= або ROWS=, що визначає спосіб розбивки вікна. У першому випадку вікно розбивається вертикальними лініями, у другому - горизонтальними. Якщо задані обидва атрибути, створюється сітка фреймів. Значення кожного з цих атрибутів - це перераховані через кому розміри окремих фреймів.
<FRAMESET COLS="60%, 40%">
Значення можуть бути задані в пікселях або у відсотках від ширини вікна. Остання область може бути визначена за допомогою символу «*», що означає, що їй виділяється весь простір, що залишився.
<FRAMESET ROWS="40%, 40%, *">
Між тегами <FRAMESET> і </FRAMESET> має бути розташовано рівно стільки елементів, скільки областей створено за допомогою атрибутів COLS= і ROWS=. При цьому можуть використовуватися додаткові елементи FRAMESET, що описують подальшу розбивку на підобласті ще меншого розміру або непарні теги <FRAME>, що визначають спосіб використання області.
Тег <FRAME> мусить містити обов'язковий атрибут SRC=, за допомогою якого вказується, який документ спочатку завантажується у відповідну область. Значення цього атрибута - абсолютна або відносна адреса URL потрібного документа.
Серед інших атрибутів виділяється атрибут NAME=, що дозволяє задати «ім'я» створеної області у виді послідовності латинських букв і цифр, використаної як значення цього атрибута.
<FRAME SRC="text.htm" NAME="left">
Це ім'я можна використовувати, щоб завантажувати нові документи в раніше створену область. Для цього в тег <A>, що визначає гіперпосилання, необхідно додати атрибут TARGET=, значення якого збігається з раніше визначеним ім'ям області. При переході по даному гіперпосиланню новий документ завантажиться в зазначений фрейм.
Методичні вказівки до виконання завдання № 6
Тема: Створення Web-документів
Ціль: Одержати навички роботи в середовищі HTML. Навчитися основних прийомів проектування і розробки Web-документів.
План
1. Створення найпростішої Web-сторінки.
2. Вивчення прийомів форматування HTML-документів.
3. Створення гіперпосилань.
4. Прийоми форматування тексту.
5. Прийоми створення списків.
6. Створення зображення і використання його на Web-сторінці.
7. Створення таблиць.
8. Створення опису фреймів.
1. Створення найпростішої web-сторінки
1. Запустіть текстовий редактор Блокнот (Пуск\Все программы\ Стандартны
е\ Блокнот).
2. Уведіть наступний документ:
<HTML>
<HEAD>
<TITLE> Лабораторна робота 4 </TITLE>
</HEAD>
<BODY>
Створення
Web документа
</BODY>
</HTML>
3. Збережіть цей документ під ім'ям first.htm.
Перед збереженням переконайтеся, що скинуто прапорець Не показывать расширения для зареєстрованих типів файлів (Пуск\Панель управления\Свойства папки\Вид). У противному разі редактор Блокнот може автоматично додати в кінець імені розширення .txt.
4. Запустите програму Internet Explorer (Пуск\Программы\Internet Explorer).
5. Дайте команду Файл\Открыть. Клацніть на кнопці Обзор і відкрийте файл first.htm.
6. Подивіться, як відображається цей файл - найпростіший коректний документ HTML. Де відображається вміст елемента TITLE? Де відображається вміст елемента BODY?
7. Як відображаються слова «Створення» і «Web документа», введені в двох окремих рядках? Чому? Перевірте, що відбувається при зменшенні ширини вікна.
2. Вивчення прийомів форматування документів
html
1. Відкрийте документ first.htm у програмі Блокнот і збережіть цей документ під ім'ям paragraph.htm (Файл\Сохранить как).
2. Видаліть весь текст, що знаходиться між тегами <BODY> і </BODY>. Текст, що буде вводитися в наступних пунктах цього завдання, необхідно помістити після тега <BODY>.
3. Уведіть заголовок першого рівня між тегами <H1> і </ H1>.
<H1>Базові програмні засоби інформаційних технологій</ H1>
4. Уведіть заголовок другого рівня, уклавши його між тегами <H2> і </H2>
<H2> Класифікація програмного забезпечення </H2>
5. Введіть окремий абзац тексту, почавши його з тега <P>. Пробіли і символи переводу рядка можна використовувати усередині абзаца довільно.
<P> У залежності від функцій, що виконуються програмним забезпеченням, його можна розділити на дві групи:
6. Уведіть тег горизонтальної лінії <HR>.
7. Уведіть наступні абзаци тексту, почавши їх з тега <P>.
<P>базове програмне забезпечення;
<P>прикладне програмне забезпечення.
8. Уведіть тег горизонтальної лінії <HR>.
9. Продовжіть введення тексту.
<P> Під базовим програмним забезпеченням інформаційних систем розуміється сукупність програмних і документальних програмних засобів створення й експлуатації системи обробки даних.
<P>Прикладне програмне забезпечення призначене для рішення конкретних задач користувача й організації обчислювального процесу.
10. Збережіть змінений файл paragraph.htm
11. Запустіть Internet Explorer (Пуск\Программы\Internet Explorer).
12. Дайте команду Файл\Открыть. Клацніть на кнопці Обзор і відкрийте файл paragraph.htm.
13. Подивіться, як відображається цей файл. Установіть відповідність між елементами коду HTML і фрагментами документа, що відображені на екрані.
3. Створення гіперпосилань
1. Відкрийте документ first.htm у програмі Блокнот і збережіть під ім'ям link.htm (Файл\Сохранить как).
2. Видаліть весь текст, що знаходиться між тегами <BODY> і </BODY>. Текст, що буде вводитися в наступних пунктах цього завдання, необхідно помістити після тега <BODY>.
3. Уведіть фразу: Текст до посилання.
4. Уведіть тег: <А HREF="first.htm">.
5. Уведіть фразу: Посилання.
6. Уведіть закриваючий тег </A>.
7. Уведіть фразу: Текст після посилання.
8. Збережіть змінений документ link.htm
9. Запустіть Internet Explorer (Пуск\Программы\Internet Explorer)..
10. Дайте команду Файл\Открыть. Клацніть на кнопці Обзор і відкрийте файл link.htm.
11. Переконайтеся в тому, що текст між тегами <A> і </А> виділений як посилання (кольором і підкресленням).
12. Клацніть на посиланні і переконайтеся, що при цьому завантажується документ, на який указує посилання.
13. Клацніть на кнопці Назад на панелі інструментів, щоб повернутися до попередньої сторінки. Переконайтеся, що посилання тепер вважається переглянутим і відображається іншим кольором.
4. Прийоми форматування тексту
1. Відкрийте документ paragraph.htm у програмі Блокнот і збережіть його з ім'ям format.htm (Файл\Сохранить как).
2. Задайте форматування тексту, використовуючи наступні теги й атрибути.
Після тега <BODY> уведіть тег <BASEFONT SIZE="5" COLOR="BROWN">. Він задає виведення тексту шрифтом, більшим ніж за замовчуванням, і коричневим кольором.
3. Перший абзац тексту залиште без змін, він буде виводитися шрифтом, заданим за замовчуванням.
5. У наступному абзаці, після тега <Р> уведіть тег <FONT SIZE="-2" FACE="ARIAL" COLOR="GREEN">.
6. Завершіть абзац тегом </FONT>.
7. У наступному абзаці використовуйте за своїм розсудом парні теги: <B> (напівжирний шрифт), <I> (курсив), <U> (підкреслення}, <S> (викреслювання), <SUB> (нижній індекс), <SUP> (верхній індекс).
8. У наступному абзаці використайте за своїм розсудом парні теги: <EM> (виділення), <STRONG> (сильне виділення).
9. Збережіть змінений документ format.htm.
10. Запустіть Internet Explorer (Пуск\Программы\Internet Explorer).
11. Дайте команду Файл\Открыть. Клацніть на кнопці Обзор і відкрийте файл format.htm.
12. Вивчіть використані елементи HTML, що впливають на спосіб відображення тексту.
13. Поверніться в програму Блокнот і змініть документ так, щоб елементи, що задають форматування, були вкладеними один у одного. Збережіть документ під тим же ім'ям.
14. Поверніться в програму Internet Explorer і клацніть на кнопці Обновить на панелі інструментів. Подивіться, як змінився вигляд сторінки.
5. Прийоми створення списків
1. Відкрийте документ first.htm у програмі Блокнот і збережіть його під ім'ям list.htm (Файл\Сохранить как).
2. Видаліть весь текст, що знаходиться між тегами <BODY> і </BODY>. Текст, що буде вводитися в наступних пунктах цього завдання, необхідно помістити після тега <BODY>.
3. Уведіть текст заголовка:
<H1>Приклад упорядкованого списку</H1>
4. Введіть абзац:
Метод-орієнтовані пакети прикладних програм включають наступні ППП.
5. Вставте в документ тег <OL TYPE="I">, що починає упорядкований (нумерований) список.
6. Вставте в документ елементи списку, випереджаючи кожний з них тегом <LI>:
математичного програмування;
мережного планування і управління;
теорії масового обслуговування;
математичної статистики.
7. Завершіть список за допомогою тега </OL>.
8. Збережіть отриманий документ під ім'ям list.htm.
9. Запустіть Internet Explorer (Пуск\ Программы\ Internet Explorer).
10. Дайте команду Файл\ Открыть. Клацніть на кнопці Обзор і відкрийте файл list.htm.
11. Вивчіть, як упорядкований список відображається в програмі Internet Explorer, звертаючи особливу увагу на спосіб нумерації, заданий за допомогою атрибута TYPE=.
12. Поверніться в програму Блокнот і установіть курсор після закінчення введеного списку.
13. Уведіть текст заголовка:
<H1>Приклад неупорядкованого списку</H1>
14. Введіть абзац:
Базова конфігурація комп'ютера включає чотири пристрої:
15. Вставте в документ тег <UL TYPE="SQUARE">, що починає неупорядкований (маркірований) список.
16. Вставте в документ елементи списку, випереджаючи кожний з них тегом <LI>.
системний блок;
монітор;
клавіатуру;
мишу.
17. Завершіть список за допомогою тега </UL>. Збережіть документ.
18. Поверніться в програму Internet Explorer і клацніть на кнопці Обновить на панелі інструментів. Подивиться, як змінився вид сторінки, звернувши увагу на спосіб маркірування, заданий за допомогою атрибута TYPE =.
19. Поверніться в програму Блокнот і установіть текстовий курсор після закінчення введеного списку.
20. Уведіть текст заголовка:
<H1>Приклад списку визначень</H1>
21. Введіть абзац:
Деякі визначення мови HTML
22. Вставте в документ тег <DL>, що починає список визначень.
23. Вставте в список слова, значення яких треба визначити, випереджаючи відповідні абзаци тегом <DT>.
24. Вставте в список відповідні визначення, випереджаючи їх тегом <DD>.
Браузер - програма перегляду Web-сторінок
Теги – керуючої конструкції мови HTML
Контейнер – парний тег зі своїм умістом
25. Завершіте список за допомогою тега </DL>. Збережіть документ.
26. Поверніться в програму Internet Explorer і клацніть на кнопці Обновить на панелі інструментів. Подивіться, як виглядає при відображенні Web-сторінки список визначень.
6. Створення зображення і використання його на web-сторінці
1. Створіть у Word рисунок і скопіюйте його в буфер обміну, для чого виділите рисунок і скористайтеся командою Правка\Копировать або контекстне меню\Копировать.
2. Відкрийте програму Paint: (Пуск\Программы\Стандартные\Paint). Уставте скопійований малюнок.
3. Виберіть кольори фону для тексту й іншої частини рисунка. Залийте рисунок фоновим кольором.
4. Збережіть малюнок під ім'ям pic1.gif (у форматі GIF).
5. Відкрийте документ paragraph.htm у програмі Блокнот і збережіть його під ім'ям picture.htm (Файл\Сохранить как).
6. Після заголовка другого рівня (теги <H2> </H2>) уведіть тег <IMG SRC="pic1.gif" ALIGN="BOTTOM">.
7. Збережіть змінений документ picture.htm.
8. Запустіть Internet Explorer (Пуск\Программы\ Internet Explorer).
9. Дайте команду Файл\Открыть. Клацніть на кнопці Обзор і відкрийте файл picture.htm. Подивіться на документ, який з'явився на екрані.
10. Поверніться в програму Блокнот і змініть значення атрибута: ALIGN="TOP". Збережіть файл під тим же ім'ям.
11. Поверніться в програму Internet Explorer і клацніть на кнопці Обновить на панелі інструментів. Подивіться, як змінився вид сторінки при зміні атрибутів.
12. Поверніться в програму Блокнот і змініть значення атрибута: ALIGN="LEFT". Збережіть файл під тим же ім'ям.
13. Поверніться в програму Internet Explorer і клацніть на кнопці Обновить на панелі інструментів. Подивіться, як змінився вид сторінки при зміні атрибутів.
14. Поверніться в програму Блокнот і додайте в тег <IMG> атрибути: HSPACE=40 VSPACE=20. Збережіть файл під тим же ім'ям.
15. Поверніться в програму Internet Explorer і клацніть на кнопці Обновить на панелі інструментів. Подивіться, як змінився вид сторінки при зміні атрибутів.
7. Створення таблиць
Створіть таблицю:
Інформація про витрати на рекламу й обсяги продаж фірми
| Квартал | Витрати на рекламу, грн. | Обсяг продаж | |
| Кількість проданої продукції, шт. | Сума, грн. | ||
| 1 | 6650 | 18175 | 50560 |
| 2 | 19139 | 6936 | 14850 |
| 3 | 22456 | 1946 | 4650 |
| 4 | 70680 | 8459 | 2260 |
| Разом | 118925 | 35516 | 72320 |
1. Відкрийте документ first.htm у програмі Блокнот і збережіть його під ім'ям table.htm.
2. Видаліть весь текст, що знаходиться між тегами <BODY> і </BODY>. Текст, що буде вводитися в наступних пунктах, необхідно помістити після тега <BODY>.
3. Уведіть тег таблиці:
<TABLE BORDER=10 WIDTH= "60%">
4. Уведіть рядок заголовка таблиці:
<CAPTION ALIGN=ТОР>Інформація про витрати на рекламу й обсяг продаж фірми<CAPTION>
5. Заголовки стовпців займають 2 рядка таблиці. У першому і другому стовпцях ці рядки поєднуються (атрибут ROWSPAN), третій і четвертий стовпці повинні мати загальний заголовок, тобто вони поєднуються (атрибут COLSPAN). В другому рядку потрібно ввести заголовки третього і четвертого стовпців:
1-я рядок:
<TR BGCOLOR="YELLOW" ALIGN="CENTER">
<TH ROWSPAN=2>Квартал
<TH ROWSPAN=2>Витрати на рекламу, грн
<TH COLSPAN=2>Обсяг продажів
2-я рядок:
<TR BGCOLOR=YELLOW ALIGN=CENTER>
<TH>Кількість проданої продукції, шт.
<TH>Сума, грн.
6. Визначте наступні рядки таблиці, випереджаючи кожен з них тегом <TR> і поміщаючи вміст кожного осередку після тега <TD>.
<TR><TD>1<TD>6650<TD>18175<TD>50560
7. Останній рядок таблиці виділіть фоном:
8. Завершіть таблицю тегом </TABLE>.
9. Збережіть змінений документ.
10. Запустіть Internet Explorer (Пуск\Программы\ Internet Explorer).
11. Дайте команду Файл\Открыть. Клацніть на кнопці Обзор і відкрийте файл table.htm.
12. Вивчіть, як створена таблиця відображається в програмі Internet Explorer, звертаючи особливу увагу на вплив заданих атрибутів.
Ви познайомилися з прийомами створення таблиць засобами мови HTML. Навчилися створювати таблиці і змінювати їх вигляд за допомогою атрибутів тегів HTML.
8.
Створення опису фреймів
Послідовність виконання роботи
1. Запустіть текстовий редактор Блокнот (Пуск\Программы\ Стандартне\ Блокнот).
2. Уведіть наступний документ:
<HTML>
<HEAD>
<TITLE>Опис фреймів</TITLE>
</HEAD>
<FRAMESET ROWS="20%, 50,*">
<FRAME SRC="picture.htm">
<FRAME SRC="link.htm">
<FRAMESET COLS="200, 100">
<FRAME SRC="table.htm">
<FRAME SRC="list.htm">
</FRAMESET>
</HTML>
З. Збережіть цей документ під ім'ям frames.htm.
4. Запустіть оглядач Internet Explorer (Пуск\Программы\Internet Explorer).
5. Дайте команду Файл\ Открыть. Клацніть на кнопці Обзор і відкрийте файл frames.htm.
6. Вивчіть представлення декількох створених раніш документів в окремих фреймах.
7. Подивіться, що відбувається при зміні ширини вікна оглядача.
8. Перевірте, чи можна змінити положення границь фреймів методом перетаскування за допомогою миші.
9. Клацніть на посиланні, що мається в одному з фреймів, і подивіться, як буде відображений новий документ.
10. Клацніть на кнопці Назад на панелі інструментів і переконайтеся, що повернення до попереднього документа на порушує структуру фреймів.
11. Поверніться в програму Блокнот і змініть структуру і параметри фреймів за своїм розсудом. Збережіть документ під тим же ім'ям.
12. Поверніться в програму Internet Explorer і клацніть на кнопці Обновить на панелі інструментів. Переконайтеся, що змінений вид Web-сторінки відповідає задуму. Якщо це не так, поверніться в програму Блокнот, знайдіть і виправте помилки.
