
- •Лекція 1
- •Основи Інтернету
- •Створення та підтримка веб-ресурсів в автоматизованому режимі.
- •Лекція 2
- •Основні веб-технології.
- •Головне про веб-дизайн.
- •Лекція 3
- •Базові конструкції мови html
- •Структура html-документа
- •Лекція 4 Теги форматування тексту Створення гіперпосилань та списків в Html-документі
- •2. Теги логічного форматування тексту
- •4. Текстові гіперпосилання
- •5. Списки
- •Лекція 6
- •1. Використання таблиць у html-документах
- •2. Форматування таблиць.
- •3. Форматування тексту та оформлення рамок таблиці
- •4. Використання таблиць для розміщення об'єктів на веб-сторінці
- •1. Фрейми, їхні теги та атрибути
- •2. Використання посилань у фреймах
- •3 Вкладені набори фреймів
- •Лекція 6
- •1. Поняття форми
- •Створення форм
- •2. Елементи форми в html
- •Поле для пароля
- •Кнопка submit
- •Кнопка reset
- •Прапорці (checkbox)
- •Перемикачі (radiobutton)
- •Кнопка із зображенням
- •Приклад комбінованої форми
- •Лекція 7
- •1. Фрейми, їхні теги та атрибути
- •2. Використання посилань у фреймах
- •3 Вкладені набори фреймів
- •Лекція 8
- •1. Поняття форми
- •Створення форм
- •2. Елементи форми в html
- •Поле для пароля
- •Кнопка submit
- •Кнопка reset
- •Прапорці (checkbox)
- •Перемикачі (radiobutton)
- •Кнопка із зображенням
- •Приклад комбінованої форми
- •Лекція 10
- •1. Технологія створення веб-вузла.
- •Інтерфейс та режими роботи програми
- •Режими перегляду веб-документа
- •Відкривання та створення сайтів і веб-сторінок
- •5.Створення веб-сторінки за допомогою шаблона
- •Контрольні запитання
- •Лекція 11
- •1. Створення форми.
- •Ефекти динамічної html у FrontPage
- •MySql - субд для Інтернету
- •Інтеграція сценаріїв з базами даних
- •2. Використання php
- •3. Вбудовування php в html
- •5. Доступ до змінних форми
- •Лекція 15
- •1. Поняття об'єктної моделі
- •2. Властивості, методи та події
- •3. Сценарії
2. Теги логічного форматування тексту
Перерахуємо основні теги логічного форматування і приведемо приклади їх використання.
-
Тег <ACRONYM|> використовують для відмітки абревіатур, акронімів| (акронім| - вимовне слово, що складається з початкових букв словосполучення). Цей тег використовується з параметром TITLE|, в якості якого можна вказати “розшифровку” акроніма|. Ця “розшифровка” з'являється на екрані, коли курсор розташовується на акронімі|. Приведемо приклад використання цього тега|:
Рис.1.
Приклад тега <ACRONYM>
-
Тег <CITE|> використовують для відмітки цитат або назв книг і статей, посилань і так далі Такий текст зазвичай виводиться курсивом. Приклад використання цього тега:
<CITE>Ваш шанс </CITE>
є одна з найбільш популярних міських газет м. Суми.
-
Тег <CODE|> відзначає свій текст як невеликий фрагмент програмного коду, який виводиться моноширинним шрифтом.
Зауваження. Моноширинним називається такий шрифт, у якого розміри символів однакові, тобто кожен символ має одну і ту ж ширину, яка не залежить від його зображення. Таким шрифтом є, наприклад, шрифт Courier|.
Використання цього тега нічим не відрізняється від застосування тега <CITE|>. Приклад простого оператора мови програмування Паскаль:
<CODE|> WriteLn|(‘Hello|, World|!’); </CODE>
-
Тег <DEL|> відзначає текст як видалений, перекреслюючи його. Приклад використання:
<DEL|> Цей текст перекреслений.</DEL>
-
Тег <DFN|> відзначає свій текстовий фрагмент як визначення (DeFinitioN| - визначення). Цим тегом можна відзначити термін, що перший раз зустрічається в тексті. Такий текст відображатиметься курсивом:
<DFN|> Internet| Explorer| </DFN> - це популярний WEB–браузер|.
-
Тег <INS|> відзначає свій текст як вставку (INSertion| - вставка). Відображається підкресленим шрифтом:
<INS|> Цей текст є вставкою і буде підкреслений. </INS>
-
Тег <EM|> (Emphasis| – виділення, підкреслення) використовують для виділення важливих фрагментів тексту, які відображається курсивом, наприклад:
Приклад виділення <EM|> окремих слів </EM> тексту.
-
Тег <KBD|> відзначає текст як що вводиться з клавіатури, відображається моноширинним шрифтом:
Щоб запустити текстовий редактор, надрукуйте: <KBD|> notepad| </KBD>.
-
Тег <SAMP|> відзначає текст як зразок (SAMPle| – зразок, приклад). Використовується для відмітки результатів, що видаються програмами, також для виділення декількох символів моноширинним шрифтом:
В результаті роботи програми буде надруковано:
<SAMP|> Hello|, World|! </SAMP>
-
Тег <STRONG|> використовується для відображення важливих елементів тексту, відображається напівжирним шрифтом:
Місто Суми розташоване на річці <STRONG|> Сумка </STRONG>
-
Тег <VAR|> відзначає імена змінних програм, відображається курсивом:
Задайте значення змінної <VAR|> N </VAR>
Мал.2.Приклади
логічного форматування
тексту
На малюнку видно, як при наведенні покажчика миші на текст, відмічений тегом <ACRONYM|>, видається підказка. Вийшло?.. Швидше за все, немає. У вас, напевно, рядки в браузере| розташовуються одна за одною, а не з нового рядка, як показано на малюнку 2. І це не дивлячись на те, що в тексті HTML| -документа| кожен рядок тексту розташовується з нового рядка!
Річ у тому, що браузер| ігнорує переходи на новий рядок в тексті HTML| -документа| і сам здійснює перехід на новий рядок залежно від розміру вікна, в якому виводиться Web-страница|. Для того, щоб змусити браузер| здійснити перехід на новий рядок, потрібно скористатися тегом BR|. Таким чином, текст, що знаходиться у файлі PR1|.HTML може бути наступним:
<HTML>
<HEAD>
<TITLE> Логічне форматування тексту </TITLE>
</HEAD>
<BODY>
<ACRONYM TITLE="Машинобудівний коледж СумДУ">МКСумДУ</acronym> -
провідний коледж міста Суми<br>
<CITE>Ваш шанс</CITE>
є одній з найбільш популярних міських газет м. Суми.<BR>
<DEL>Этот текст перекреслений.</DEL><BR>
Приклад простого оператора мови програмування Паскаль: <BR>
<CODE> WriteLn(‘Hello, World!’) </CODE><BR>
<DFN>Internet Explorer</DFN> - це популярний WEB–браузер.<BR>
<INS>Цей текст є вставкою і буде підкреслений.</INS>;<BR>
Приклад виділення <EM>отдельных слов</EM> тексту.<BR>
Щоб запустити текстовий редактор, надрукуйте: <KBD>notepad</KBD>.<BR>
В результаті роботи программмы будуть надруковано:
<SAMP>Hello, World!</SAMP><BR>
Місто Суми розташоване на річці <STRONG>Сумка.</STRONG><BR>
Задайте значення змінної <VAR> N </VAR>.<BR>
</BODY>
</HTML>
Ви, напевно, звернули увагу на те, що деякі теги дають однаковий результат. Виникає питання: навіщо потрібно було придумувати таку різноманітність тегів форматування? Відповідь полягає в їх назві. Дивлячись на HTML-документ|, програміст (користувач) по тексту повинен представляти, для чого використовується той або інший фрагмент. Досягти цього можна швидше, якщо запам'ятовувати слова, що мають сенс, чим безглузді букводрукувальні.
3. Способи завдання кольору і теги фізичного форматування <FONT|> і <BASEFONT|>.
У мові HTML| колір може визначається двома способами:
-
числами в шістнадцятиричній системі числення. Колірна система базується на трьох основних кольорах – червоному, зеленому і синьому – і позначається RGB| (по початкових буквах слів Red| – червоний, Green| – зелений, Blue| - синій). Це означає, що кожен колір задається кількістю червоного, зеленого і синього кольору в нім. Ця кількість визначається значенням від 00 до FF| (від 0 до 255 в десятковій системі числення). Наприклад, конструкція #FF0000| задає червоний колір, а #FFFFFF| – білий (символ # говорить про те, що числа представляються в шістнадцятиричній системі числення);
-
мнемонічними позначеннями. Можна використовувати назви квітів, наприклад: Red| (червоний), White| (білий) і так далі.
Продовжимо перерахування тегів фізичного форматування.
Тег <FONT|> дозволяє змінити шрифт, який використовує браузер| для проглядання Web-сторінки|. Це перший тег, для якого ми розглянемо параметри, що є у цього тега. Це:
-
FACE| – задає назву шрифту, яким буде виводиться текст. Якщо такого шрифту немає, то значення параметра ігнорується. Можна задавати імена декількох шрифтів; в цьому випадку вони розділяються комами;
-
SIZE| – задає розміри шрифту в умовних одиницях від 1 (найменшого) до 7 (найбільшого). Прийнято вважати, що шрифт “нормального” розміру відповідає значенню 3. Розмір шрифту можна задавати як абсолютною величиною (наприклад, SIZE=2|), так і відносною (SIZE=+1|). В цьому випадку така конструкція еквівалентна наступному операторові привласнення: SIZE=| SIZE| +1;
-
COLOR| – встановлює колір шрифту, який може задаватися за допомогою стандартних імен або набором шістнадцятиричних цифр.
Приведемо приклад використання тега <FONT|>:
<HTML|>
<HEAD|>
<TITLE>Приклади використання параметрів тега FONT| </TITLE>
</HEAD>
<BODY|>
Текст, записаний шрифтом за замовчуванням.<BR>
<FONT| FACE="Courier| New|, Arial|, Helvetica|" Color=#FF0000|>
Приклад завдання назв шрифту і кольору
</FONT><BR>
<FONT| SIZE=5>Шрифт| розміру 5</FONT><BR>
<FONT| SIZE=+3| COLOR=Green>Шрифт| розміру 6, колір зелений</FONT><BR>
</BODY>
</HTML>
Є можливість задати характеристики шрифту, який використовуватиметься у всьому документі. А як же бути, якщо потрібно якийсь фрагмент тексту вивести шрифтом з іншими характеристиками? В цьому випадку на допомогу прийде тег <FONT|>. Після завершення його дії знову в силу вступлять раніше встановлені параметри шрифту або, як прийнято говорити, параметри за умовчанням.
Тег <BASEFONT|> використовується для вказівки розміру, типу і кольору шрифту, використовуваного в документі за умовчанням. Приведемо приклад використання цього тега:
<HTML|>
<HEAD|>
<TITLE>Приклади використання параметрів тега BASEFONT</TITLE>
</HEAD>
<BODY|>
Текст, записаний шрифтом за замовчуванням.<BR>
<BASEFONT| SIZE=2>Шрифт| розміру 2.<BR>
<BASEFONT| SIZE=4| COLOR=Green>Шрифт| розміру 6, колір зелений</FONT><BR>
</BODY>
</HTML>
У приведеному прикладі двічі перевизначається розмір шрифту, заданого за умовчанням. Спочатку він рівний 3 (не забули, що якщо розмір шрифту не встановлений, то він рівний 3), потім встановлюється рівним 2, а потім – 4.
Зауваження. Працюючи з цим тегом важливо пам'ятати про наступні особливості його використання:
-
він не має парного, тобто тег </BASEFONT> відсутній!
-
більшість браузеров| ігнорують його установки усередині таблиць;
-
у HTML-документе| може бути скільки завгодно тегів <BASEFONT|>.