Управління кольором фону сторінки
ПРАКТИЧНА РОБОТА №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 слів з урахуванням тематики сторінки); зміст сторінки.
ПРАКТИЧНА РОБОТА №2
Мета роботи: Навчитися використовувати на практиці різні методи задання колірного фону сторінки. Відпрацювати прийоми оформлення смислових частин документа за допомогою тегів параграфа і абзацу.
Теоретична частина
Управління кольором фону сторінки
Основна частина документа містить всю інформацію з тематики сторінки і всі елементи, що використовуються для дизайну Web-сторінки. Тег тіла сторінки має атрибути, які задають колірне оформлення сторінки, що, у першу чергу, впливає на її сприйняття. Можливість зміни кольорів і фонових малюнків (шпалер) додає індивідуальність кожній сторінці. Теги забарвлення не є альтернативними і можуть використовуватися спільно: якщо з яких-небудь причин не знайдений малюнок, використовується колір.
|
|
|
<BODY bgcolor="коліip"> — атрибут задає колір фону сторінки. Колір може бути заданий двома способами: англійською назвою або 16-ковим кодом (RGB — код: для кожного кольору виділено 2 розряди (256 значень) всього більше 1,6 млн. відтінків).
<BODY background=URL\*.gif> — атрибут заповнює сторінку графічним малюнком, якщо графічний файл в одній папці із сторінкою вказується тільки ім'я файла.
<BODY text="колip "> — задає базовий колір шрифту для сторінки.
Оформлення смислових частин сторінки абзацами
Текст — єдиний об'єкт Web-сторінки, який не вимагає спеціального визначення — всі символи інтерпретуються як текстові дані, але для форматування тексту є велика кількість елементів — тегів та їх атрибутів.
<Р>...</Р> — тег розбиває текст на параграфи (абзаци). Параграфи відділяються порожнім рядком. Що закриває тег може не ставитися, тому що новий
відкриваючий тег параграфа має на увазі закриття попереднього параграфа.
<BR> — обриває рядок і починає новий.
<NOBR>...</NOBR> — забороняє перенос тексту на інший рядок, при довгих рядках у вікні браузера з'являється смуга прокрутки — використовується для абревіатур, акронимів і т. д.
<WBR>...</WBR> — дозволяє розривати довгі слова (наприклад, під час виведення довгих медичних термінів).
<!----...----> — тег коментаря, текст у тезі на екран не виводиться, використовується авторами для коментарів.
Порядок виконання роботи
1. Відкрийте свою web-сторінку «Перший досвід» для редагування HTML-коду.
2. Відредагуйте сторінку, вказавши колір фону назвою кольору: <BODYbgcolor=Gray>.
3. Зберегти зміни в програмі Блокнот командою Файл\ Зберігти.
4. У вікні Internet Explorer виконати команду Відновити. Колір фону сторінки став сірим.
5. Змініть значення атрибуту, задавши колір 16-ковим кодом <BODY bgcolor=#FFFFOO>.
6. Зберегти зміни в програмі Блокнот командою Файл \3берегти.
7. У вікні Internet Explorer виконати команду Відновити. Колір фону сторінки — жовтий.
8. Пограйте з кольором фону, задаючи колір фону сторінки і назвою, і 16-ковим кодом.
9. Після тега <BODY> введіть наступний текст (за наявності фантазії дозволяється вносити коректування, що відображають фактичні дані і переваги автора сторінки):
Радий вітати Вас на моїй сторінці.
Я — Сергій.
Не судіть мене суворо — це мій перший досвід у
створенні web-сторінок, але я зобов'язуюся
старанно освоювати ази Web-дизайну, постійно
вдосконалювати й оновлювати свою сторінку.
Мій учитель сподівається, що в кінці року йому
не соромно буде дивитися на моє творіння.
10. Збережіть зміни в програмі Блокнот і прогляньте результат у браузері — кнопка Відновити. Введений текст має зім'ятий вигляд.
11. Завдання для самостійної роботи:
•створіть на робочому столі папку Прізвище Web і перенесіть в неї свою web-сторінку;
•у папці BACKGROUND на дискеті Практичні роботи виберіть фоновий малюнок для своєї сторінки і скопіюйте файл з малюнком до своєї папки Прізвище Web;
•у початковому коді сторінки задайте для неї шпалери, використовуючи файл з вибраним малюнком (для шпалер не рекомендується використовувати яскраві контрастні малюнки);
•оформити введений фрагмент тегами, щоб вигляд на сторінці відповідав оригіналу;
•підписати розділи сторінки, використовуючи теги коментаря;
•задати базовий колір тексту сторінки (зверніть увагу на сполучуваність кольорів тексту і фону — кольори не повинні зливатися).
ПРАКТИЧНА РОБОТА №3
Мета роботи: Навчитися формувати структуру Web-документа, отримати практичні навички в управлінні розміром шрифту на сторінці. Навчитися виділяти розділи сторінки заголовками різного рівня й виділяти фрагменти тексту розміром символів. Відпрацювати практичні прийоми виділення смислових частин сторінки горизонтальними лініями, вивчити роботу атрибутів горизонтальної лінії.
Теоретична частина
Дата добавления: 2020-04-25; просмотров: 86; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!