ПРАКТИЧНА РОБОТА №1
Тема. Створення HTML-документа, що містить теги оформлення тексту.
Мета. Вироблення умінь і навичок створення HTML-документів, які містять теги оформлення тексту.
Теоретичні відомості
1. Створення та форматування текстів.
Більшість HTML документів мають заголовок. Для його створення використовують теги <Hn></Hn>, де n – число від 1 до 6. Уклавши текст між цими тегами, ви отримаєте заголовок певного розміру.
<H1>Заголовок</H1>
<H2>Заголовок</H2>
<H3>Заголовок</H3>
<H4>Заголовок</H4>
<H5>Заголовок</H5>
<H6>Заголовок</H6>
Для створення нового абзацу використовується тег <P>, а для переходу на нову стрічку без створення абзацу - тег <BR>. Ці теги закривати не обов'язково. Звичайно, якщо Ви не використовуєте в тегові <P> елемент ALIGN, яким може задаватся вирівнювання абзацу:
<P ALIGN=LEFT> По лівому краю </P>
<P ALIGN=CENTER> По центру </P>
<P ALIGN=RIGHT> По правому краю </P>
<P ALIGN=JUSTIFY> Текст, що знаходиться між цими елементами вирівнюється по ширині </P>
Для надання тексту певного зображення - жирний, курсив, підкреслений і так далі, помістите його між відповідними тегами|:
<B> Жирний текст </B> |
<I> Курсив </I> |
<U> Підкреслений </U> |
<STRIKE> Перекреслений </STRIKE> |
<SUP> Верхній індекс </SUP> |
<SUB> Нижній індекс </SUB> |
Деякі теги можуть або повинні застосовуватися з певними параметрами, які указуються в елементі тега, що відкривається (можна відразу указувати декілька параметрів в одному тегові). Наприклад, якщо відкривається тег <FONT> (то закривається тег </FONT> обов'язко) може мати декілька атрибутів:
SIZE - задає розмір тексту (за умовчанням розмір тексту дорівнює 3). Помістивши текст між тегами <FONT SIZE=n></FONT>, де n - цифрове значення, Ви додасте йому потрібний вам розмір:
<font size="1"> Приклад 1 </font>
<font size="2"> Приклад 2 </font>
<font size="3"> Приклад 3 </font>
<font size="4"> Приклад 4 </font>
<font size="5"> Приклад 5 </font>
<font size="6"> Приклад 6 </font>
FACE - задає стандартне ім'я шрифту. Використовуйте шрифти, які встановлені на комп'ютері користувача, інакше Оглядач використовуватиме шрифт, визначений за умовчанням (зазвичай Times New Roman). До стандартних шрифтів можна віднести шрифти, що поставляються з Windows 98, Ms Plus, Ms Office. У самому нижньому рядку даної таблиці представлено використання наборів шрифтів - ім'я кожного шрифту пишеться через кому. Якщо у користувача на комп'ютері немає шрифту Comic Sans MS, Оглядач підставить наступний в цьому списку - Tahoma.
<font face="Times New Roman"> Times New Roman </font> |
<font face="System"> System </font> |
<font face="Arial"> Arial </font> |
<font face="Courier"> Courier </font> |
<font face="Verdana"> Verdana </font> |
<font face="Comic Sans MS, Tahoma"> Comic Sans MS </font> |
COLOR - задає колір тексту (за умовчанням чорний - #000000). Колір тексту може визначаться як самою назвою, наприклад, red, blue і т. д, так і представлений в шістнадцятковому вигляді - #FF0000 (червоний) (за умовчанням чорний
<font COLOR="red"> Червоний </font>
<font COLOR="#FF0000"> Червоний </font>
За допомогою елементу STYLE тега <SPAN> (що закривається тег </SPAN> обов'язковий) можна задавати виділення тексту будь-яким кольором:
<SPAN| STYLE="BACKGROUND-COLOR|: lightgreen"|> Світлозелений </SPAN>
<SPAN| STYLE="BACKGROUND-COLOR|: yellow"|> Жовтий </SPAN>
<SPAN| STYLE="BACKGROUND-COLOR|: lightblue"|> Світлосиній </SPAN>
2. Оформлення фону сторінки.
Колір|цвіт| і фон сторінки выбираються| за бажанням дизайнера, але|та| потрібно враховувати і той факт, що від них залежить візуальне сприйняття всього сайту. Не прагніть все затемнити, текст зручно читати, якщо його добре видно|показний|.
Отже спочатку про колір. Для його вставки в рядок з тегом <BODY> Вашого документа потрібно додати параметр BGCOLOR і вказати його значення - назву кольору або його шістнадцятковий вигляд. Приведені два приклади заповнюють сторінку документа червоним кольором.
<BODY BGCOLOR="RED"> (використана назва кольору)
<BODY BGCOLOR="#FF0000"> (використаний шістнадцятковий вид кольору)
Тепер про фонову картинку. Фоном може бути як великий графічний файл (врахуйте - в цьому випадку сторіночка вантажитиметься довше) так і його фрагмент, що розумніше. При використанні останнього він буде автоматично розмножений Вашим Оглядачем, тому добирайте фрагмент таким, що добре стикується. Вставити в сторінку фонову картинку можна так:
<BODY BACKGROUND="images. gif">
Параметру BACKGROUND привласнено значення images. gif - це ім'я графічного файлу з розширенням (підтримуються *.jpg, *.gif, *.png). Природно воно може бути іншим. Передбачається, що графічний файл розміщений в одній папці з Вашим документом, інакше потрібно вказати до нього шлях. Розберемося з шляхами на прикладі файлу images. gif.
На два рівні вниз. Параметр="folder_1/folder_2/images. gif" |
На два рівні вгору|угору|. Параметр="../../images. gif" |
Подібна вказівка шляхів|доріг| застосовується для різних елементів, наприклад, посилань, малюнків, файлів.
Тег <BODY> може також мати параметри відступів в документі (визначаються числовим значення).
leftmargin - відступ зліва
rightmargin - відступ справа
topmargin - відступ зверху
bottom margin - відступ знизу
<BODY leftmargin="0", topmargin="0", marginwidth="0" marginheight="0">
У даному тегові| можуть бути присутніми і інші параметри, наприклад, якісь функції JavaScript|, задавання кольорів|цвіту| тексту і посилань.
3. Загальна структура сторінки.
Усі WEB сторінки мають однакову структуру.
Тегами <HTML> та </HTML> починається та закінчується сторінка. Усі інші теги містяться між ними.
Заголовок сторінки та інформація для оглядача розміщується між дескрипторами
<HEAD> та </HEAD> . Заголовок сторінки (відображається в рядку заголовка браузера) створюється за допомогою дескрипторів <TITLE> та </TITLE>.
Зміст сторінки обмежується дескрипторами </BODY> та </BODY>. Усі теги, які відповідають за розміщення тексту, малюнків, посилань розміщені між ними.
Шаблон для створення WEB сторінки:
<HTML>
<HEAD>
<TITLE> Назва сторінки </TITLE>
<HEAD>
</BODY> Вміст сторінки: текст, графіка, посилання, тощо... </BODY>
<HTML>
ХІД РОБОТИ
1.Запустити на виконання текстовий редактор Блокнот командою Пуск-Программы-Стандартные-Блокнот.
2.Увести текст необхідний для створення WEB сторінки, яка у вікні браузера має вигляд:
3.Зберегти в папці учня на диску Е у файлі з ім’ям Прізвище. htm.
4.Відкрити файл у програмі ІЕ, двічі клацнувши на значку файла і переглянути відображення HTML-документа в робочій області.
5.Повернутись у вікно Блокнота, клацнувши на його кнопці на панелі задач, і доповнити свою сторінку змінами, щоб у вікні браузера вона мала вигляд:
Зберегти документ, натиснувши клавіші <Ctrl+S>.
6.Переглянути одержаний HTML-документ у ІЕ. Для цього клацнути на кнопці ІЕ на панелі задач і обновити вміст робочої ділянки вікна ІЕ, натиснувши функціональну клавішу <F5>.
7. Створити фон для своєї сторінки. Щоб при перегляді вона мала вигляд:
 |
ОФОРМЛЕННЯ РОБОТИ
За результатами виконаної практичної роботи оформити звіт, у якому відповісти на такі запитання:
1.Чому змінилося відображення тексту HTML-документа у вікні ІЕ при останньому перегляді в порівнянні з його першим переглядом?
2.Яке призначення має кожний тег створеного HTML-документа?
3. Записати у зошиті для практичних робіт текстовий варіант вашої сторінки.
