- •Практична робота №1
- •Теоретична частина
- •Практична робота №2
- •Теоретична частина Управління кольором фону сторінки
- •Порядок виконання роботи
- •Практична робота №3
- •Теоретична частина Теги заголовків. Зміна розміру шрифту
- •Порядок виконання роботи
- •Практична робота №4
- •Теоретична частина Параметри вирівнювання тексту
- •Порядок виконання роботи
- •Практична робота №5
- •Теоретична частина
- •Практична робота №9
- •Теоретична частина Списки визначень
- •Порядок виконання роботи
- •Практична робота №10
- •Теоретична частина Розміщення інформації в таблиці
- •Порядок виконання роботи
- •Практична робота №11
- •Теоретична частина
- •Порядок виконання роботи
- •Практична робота №12
- •Вставка малюнка на сторінку
Практична робота №1
Мета роботи: Закріпити одержані знання зі створення HTML-документа, практично сформувати його структуру, оформити заголовок документа.
Теоретична частина
Структура HTML-документів
Документ, написаний на мові HTML, є текстом зі вставленими тегами розмітки, які повідомляють програму перегляду — Браузер — як повинен бути представлений текст на екрані, де в ньому розташовані графічні елементи і т. д. Текст із тегами називається початковим кодом. 80% тегів парні. Теги в документі не повинні перетинатися. Усі документи HTML мають строго визначену структуру:
<HTML> — повідомляє браузеру, що далі слідує текст, який слід інтерпретувати як HTML-документ.
<HEAD> — виділяють заголовок документа, у якому міститься службова інформація.
< TITLE > ... </TITLE> — виділяють назву сторінки, яка відображається в заголовку вікна браузера.
</HEAD>
<BODY> — виділяють основну частину — «тіло» web-сторінки.
<ADDRESS> ... </ADDRESS> — виділення контактної інформації — електронної або поштової адреси, телефону і т. д.
</BODY> — контактна інформація може займати декілька рядків.
</HTML>
Оформлення заголовка сторінки
Заголовок сторінки служить для формування загальної структури документа, містить службову інформацію, інформацію, необхідну для роботи браузера і пошукових машин і т. д. Ця інформація представляється тегами:
<МЕТА...> — необов'язковий тег, повідомляє браузеру, у якому кодуванні виготовлена сторінка, ця інформація називається профілем сторінки. Кожен тег має два основні атрибути: перший визначає тип даних, а другий — зміст.
name=Expires content= "Дaтa" — визначає термін придатності документа.
name=Reply-to соntent="имя@адрес" — адреса електронної пошти.
name=Author content='HM'H автора" — ім'я автора web-сторінки.
name=Keywords content="словa 1, слово 2, і тд." — набір ключових слів для пошукових машин.
name=Description con-tent=''зміст сторінки" — короткий опис змісту сторінки.
name=Content-Type con-tent="Oпис сторінки" — опис типу і характеристик web-сторінки.
name=Generator content = "Назва HTML редактора" — вказівка на програму, якою створена сторінка.
http-equiv=Content-Type content=text/html;
charset= windows-1251 — вказівка на кодову сторінку Windows-1251, виключає невизначеність у разі споглядання сторінки.
http-equiv=Content-Style-Type content=text/css — повідомлення браузеру про використання на сторінці стилів, визначення мови CSS.
<HEAD profile=URL> — атрибут, який вказує на файл, що містить профіль сторінки. Профіль — інформація, що зосереджена в елементах МЕТА, та визначає загальні настройки сторінки.
<STYLE>...</STYLE> — дозволяє задати нестандартні формати (стилі) для елементів сторінки, розширює можливості з оформлення сторінок і спрощує процес опису стилів у Web-сторінці.
<LINK...> — описує гіперпосилання в заголовку сторінки.
Порядок виконання роботи
1. На робочому столі створити текстовий докуменрт (команда Створити\Текстовий документ контекстного меню).
2. Відкрити текстовий документ і створити структуру HTML-документа в програмі Блокнот за зразком:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
3. Зберегти зміни у файлі командою Файл\3берегти.
4. Змінити ім'я створеного документа: Текстовий дOKyMeHT.txt замінити на Прізвище.Мті.
5. Відкрити файл Прізвище.Мті.
6. Для редагування HTML-коду, виконати команду меню Вигляд\Перегляд HTML-коду.
7. У вікні Блокнота вказати назву сторіночки: <TITLE> Петров Сергій. Перший досвід</ТІТL;>.
8. Зберегти зміни в програмі Блокнот командою Файл\36ерегти.
9. У вікні Internet Explorer виконати команду Відновити. У заголовку програми Internet Explorer з'явиться назва сторінки.
10. Нижче тега </TITLE> додайте мета-визначення, яке виключить невизначеність у виборі кодування у випадку перегляду вашої сторінки: <МЕТА http-equiv= Content-Type content=text/html; charset=windows-12 51 >.
11. Зберегти зміни в програмі Блокнот командою Файл\3берегти.
12. У вікні Internet Explorer виконати команду Відновити. На сторіночці видимих змін не з'явилося.
13. Завдання для самостійної роботи:
•додати в документ контактну інформацію, виділивши її тегом <ADDRES>;
•додайте до заголовка теги, що визначають: автора документа; термін дії сторінки; набір ключових слів для пошукових машин (10-12 слів з урахуванням тематики сторінки); зміст сторінки.