 |
АвтоАвтоматизацияАрхитектураАстрономияАудитБиологияБухгалтерияВоенное делоГенетикаГеографияГеологияГосударствоДомДругоеЖурналистика и СМИИзобретательствоИностранные языкиИнформатикаИскусствоИсторияКомпьютерыКулинарияКультураЛексикологияЛитератураЛогикаМаркетингМатематикаМашиностроениеМедицинаМенеджментМеталлы и СваркаМеханикаМузыкаНаселениеОбразованиеОхрана безопасности жизниОхрана ТрудаПедагогикаПолитикаПравоПриборостроениеПрограммированиеПроизводствоПромышленностьПсихологияРадиоРегилияСвязьСоциологияСпортСтандартизацияСтроительствоТехнологииТорговляТуризмФизикаФизиологияФилософияФинансыХимияХозяйствоЦеннообразованиеЧерчениеЭкологияЭконометрикаЭкономикаЭлектроникаЮриспунденкция
ПРИКЛАД ВИКОНАННЯ ЗАВДАННЯ
ЗАВДАННЯ: створити гіпертекстову сторінку, що містить три абзаци довільного тексту й список з п'яти пунктів. Додайте три стилі для оформлення абзаців:
1 - обрамляє абзац жовтою смугою з лівого краю, ширина смуги 5 пікселей;
2 - кольори тексту в абзаці зелений;
3 - тлом абзацу є деяка картина.
Додайте стиль для оформлення мітки кожного пункту списку за допомогою деякого малюнка.
Виконаєте завдання використовуючи три типи підключення стилів:
1-безпосередньо в тегах;
2-визначаючи стилі в заголовку документа;
3-визначаючи стилі в окремому файлі.
РІШЕННЯ:
Перший варіант - підключення стилів безпосередньо у відповідні теги гіпертекстового документа
- Відкрийте редактор Блокнот (ПУСК - ПРОГРАМИ - СТАНДАРТНІ - БЛОКНОТ)
- Збережете порожній документ у робочій папці public_html/6 привласніть йому ім'я 1.html.
- У створений документ внесіть обов'язкові теги гіпертекстового документа. Внесіть необхідні Позначка інструкції. Запишіть у тілі документа (між <BODY></BODY>)
<P>Абзац №1</P>
<P>Абзац №2</P>
<P>Абзац №3</P>
<UL>
<LI>Пункт №1</LI>
<LI>Пункт №2</LI>
<LI>Пункт №3</LI>
</UL>
Замість слів "Абзац №1" вставте текст завдання. При виконанні Ваших варіантів завдання створіть даний абзац на початку документа з копією Вашого завдання.
- Додайте у відповідні теги стилі (<P style="...">або<UL style="...">):
- Абзац №1 - style="border-left-width: 5px; border-left-style: solid; border-left-color: #FFFF00" Зіставте по таблиці стилів як формується даний стиль
- Абзац №2 - style="color: green"
- Абзац №3 - style="background-image: url(../pictures/6/title.jpg)" (картинка title.jpg повинна перебувати в папці public_html/pictures/6)
- Ненумерований список - style="list-style-image: url(point.jpg)" (картинка point.jpg повинна перебувати в папці public_html/pictures/6)
- Збережете зміни у файлі public_html/6/1.html
Другий варіант - визначення стилів у заголовку гіпертекстового документа
- Відкрийте редактор Блокнот (ПУСК - ПРОГРАМИ - СТАНДАРТНІ - БЛОКНОТ)
- Збережете порожній документ у робочій папці public_html/6 привласніть йому ім'я 2.html.
- У створений документ внесіть обов'язкові теги гіпертекстового документа. Внесіть необхідні Позначка інструкції. Запишіть у тілі документа (між <BODY></BODY>)
<P>Абзац №1</P>
<P>Абзац №2</P>
<P>Абзац №3</P>
<UL>
<LI>Пункт №1</LI>
<LI>Пункт №2</LI>
<LI>Пункт №3</LI>
</UL>
Замість слів "Абзац №1" вставте текст завдання. При виконанні Ваших варіантів завдання створіть даний абзац на початку документа з копією Вашого завдання.
- Додайте необхідні стилі в заголовок гіпертекстового документа (між <HEAD>...</HEAD>)
<STYLE TYPE="text/css">
<!-і
P.a1{border-left-width: 5px; border-left-style: solid; border-left-color: #FFFF00;}
P.a2{color: green;}
P.a3{background-image: url(../pictures/6/title.jpg);}
UL{list-style-image: url(../pictures/6/point.jpg);}
-і>
</STYLE>
- Після додавання наведених вище стилів у заголовок тег <UL> перевизначений по новому стилі, а для тегу <P> визначено три нових класи стилів, які підключаються у відповідні теги за допомогою атрибута CLASS="..." (<P CLASS="...">)
- Абзац №1 - CLASS="a1"
- Абзац №2 - CLASS="a2"
- Абзац №3 - CLASS="a3"
- Збережете зміни у файлі public_html/6/2.html
Третій варіант - визначення стилів в окремому файлі.
- Виконаєте всі дії 1-3 пунктів другого варіанта рішення завдання, створюючи файл public_html/6/3.html
- За допомогою редактора БЛОКНОТ створіть файл public_html/6/1.css, у який необхідно внести наступні стилі:
P.a1{border-left-width: 5px; border-left-style: solid; border-left-color: #FFFF00";}
P.a2{color: green;}
P.a3{background-image: url(../pictures/6/title.jpg);}
UL{list-style-image: url(../pictures/6/point.jpg);}
- Підключити створений файл зі стилями до документа public_html/6/3.html необхідно за допомогою наступного тегу: <LINK REL=STYLESHEET TYPE="text/css" HREF="1.css">. Даний тег необхідно додати в заголовок гіпертекстового документа (звичайно перед тегом, що закривається, <HEAD>)
- Підключення стилів з файлу виконується аналогічно підключенню стилів, які описані в заголовку гіпертекстового документа. У такий спосіб необхідно внести наступні зміни в тіло гіпертекстового документа public_html/6/3.html
- Абзац №1 - CLASS="a1"
- Абзац №2 - CLASS="a2"
- Абзац №3 - CLASS="a3"
- Збережете зміни у файлі public_html/6/3.html
Останньою дією є створення файлу-звіту public_html/L6.html, що містить список гіперпосилань на файли з варіантами рішення завдання. Далі необхідно створений файл-звіт підключити у вигляді гіперпосиланню до файлу public_html/main.html
Поиск по сайту: