Программирование через HTML
- Власне документа (Body). Для виділення заголовка потрібно ввести: Потрібно зазначити,
що титульний рядок повинен бути на англійській мові в латинському кодуванні
оскільки вона відображається в спеціальних полях броузера. Для запису основного
тексту потрібно ввести: Основний текст Таким чином, загальна схема документа
в форматі HTML виглядає таким чином: Титульний рядок документа Основний текст
документа При написанні команд HTML не має значення, якими буквами - рядковими
або прописними Ви пишете команди. 2.2. Створення заголовків Заголовки в документі
створюються за допомогою команд: Заголовок , причому при i = 1 заголовок
самий великий, а при i = 6 - самий дрібний. Наприклад, Текст, що Відображається
Запис в форматі HTML
Заголовок1
Заголовок1
Заголовок2
Заголовок2
Заголовок3
Заголовок3
Заголовок4
Заголовок4
Заголовок5
Заголовок5
Заголовок6
Заголовок6
2.3. Створення списків Списки призначені для представлення інформації
у впорядкованому вигляді. У HTML - документах використовується 3 види
списків: 1. Неупорядковані списки, 2. Упорядковані списки, 3. Списки - визначення.
Неупорядкований список використовує для виділення записів спеціальні символи.
Неупорядкований список визначається наступними командами початку і кінця списку:
і Кожний елемент списку починається з команди: У команді може бути параметр
TYPE, який визначає зовнішній вигляд символа, що використовується для виділення
рядка в списку і може мати наступні значення: - кругла жирна точка, - коло,
- маленький чорний квадрат. В упорядкованому списку всі записи пронумеровані.
Упорядкований список визначається наступними командами початку і кінця списку:
і Кожний елемент списку починається з команди: У команді може бути параметр TYPE,
який визначає тип нумерації і може мати наступні значення: - великими буквами,
- малими буквами, - прописними римськими цифрами, - рядковими римськими цифрами,
- арабськими цифрами. У списку - визначенні всі записи здвинуті ліворуч за
допомогою табуляції. Список - визначення визначається наступними командами початку
і кінця списку: і Кожний елемент списку починається з команди: 2.4. Форматування
параграфів і виведення в декілька стовпців. У документі HTML неможливо створити
абзац, використовуючи клавішу [Enter]. Використання цієї клавіші поліпшує
зовнішній вигляд початкового тексту, але не впливає на отримане зображення.
Для переходу на наступний рядок скористайтеся командою Для створення пустого рядка
скористайтеся командою Для створення горизонтальної смуги скористайтеся командою
Якщо смуга створюється не на весь рядок, а на якусь її частину, наприклад,
на 40%, то команда виглядає таким чином: Для створення широкої смуги потрібно
задати її ширину (в пікселях) Для вирівнювання смуги ЛІВОРУЧ/ПРАВОРУЧ/ПО ЦЕНТРУ
задайте відповідний параметр ALIGN=LEFT/RIGHT/CENTER Чорна лінія задається наявністю
параметра NOSHADE. Ви можете розташувати текст по центру за допомогою наступної
команди: Іноді необхідно створити текстовий документ, розташування рядків
якого (табуляція, відступи, вирівнювання) визначається розробником домашньої
сторінки, а не програмою-редактором. Для створення такого тексту скористайтеся
командами: текст Отриманий в броузері образ тексту буде точно відповідати тексту
в початковому HTML файлі. Аналогічні функції виконує пара команд: текст Netscape
3.0 і вище підтримує виведення в декілька стовпців, в газетному форматі за
допомогою команд і . Нижче приводиться формат команд: текст . Тут N - кількість
стовпців, M - відстань між стовпцями. Броузери, які не підтримують виведення
в декілька стовпців, забезпечать виведення нормально, в 1 стовпець. 2.5. Форматування
символів Для виділення окремих частин тексту можна скористатися наступними
стилями: У - жирний (Bold); I - курсив (Italic); U - з підкресленням (Underline);
S - з перекресленням (STRIKE); Нижче наведена таблиця команд виділення тексту.
Текст, що відображається
Запис в форматі HTML
Виділення тексту жирним
шрифтом
Виділення тексту жирним шрифтом
Виділення тексту курсивом
Виділення
тексту курсивом
Виділення тексту підкресленням
Виділення тексту підкресленням
Виділення тексту перекресленням
Виділення тексту перекресленням
Для зміни розміру
текстових символів скористайтеся командами: , де i в межах від 1 до 7 відносно
початкового розміру букв. Крім того, можна збільшити або зменшити висоту
шрифту за допомогою команд і . Ці команди використовуються в парі з командами
і . Ще дві пари команд: і - підрядковий індекс, наприклад, H2SO4. і - надрядковий
індекс, наприклад, (a2 - b2) = (а - b)(а + b). Всі вищенаведені команди визначають
фізичне форматування символів. Ви задаєте конкретну зміну характеристик
символів. Крім того, є логічне форматування символів - Ви даєте опис, а броузер
вирішує як змінювати характеристики. Загалом, хто довіряє броузеру - користуйтеся
якщо Ви його конкретно не задали в описі сторінки. Якщо в сторінці заданий
шрифт, якого немає у користувача, то Ви можете задати список, що складається з
декількох шрифтів, і броузер вибере самий лівий, а якщо його в системі немає, то
наступний і т. д. Якщо жодного з шрифтів немає, броузер вибирає свій шрифт.
Шрифт задається за допомогою команди: FONT FACE 2.6. Управління кольором Кольори
і зображення фону задаються за допомогою команди . Ця команда може задаватися
тільки на початку HTML файла і не може бути змінена надалі. Її параметри: bgcolor
= «# код кольору» - колір фону документа, text = «# код кольору» - колір тексту
документа, link = «# код кольору» - колір тексту, що використовується як посилання,
vlink = «# код кольору» - колір посилання на переглянутий раніше документ,
alink = «# код кольору» - колір посилання в момент натиснення на неї правої
в будь-якому місці домашньої сторінки скористатися командами: Поточний текст
Визначено декілька іменованих кольорів. Їх значення ми бачимо в таблиці: Якщо
Ви хочете створити «шпалери», тобто кольоровий фон з використанням Image-файла
з ім'ям, наприклад, Ground.gif, то замість параметра BGCOLOR записуємо: BACKGROUND
= «Ground.gif» Якщо при цьому ви хочете, щоб фонове зображення не рухалося,
тобто щоб створився ефект «водяних знаків», то задайте додатковий параметр:
BACKGROUND = «Ground.gif» BGPROPERTIES=FIXED 2.7. Використання спеціальних символів
У мові HTML символ
&t
&&mp
«
quot
Мова HTML завжди зменшує кількість підряд
розташованих пропусків до одного, незалежно від того, скільки пропусків було
в початковому тексті. Для того, щоб задати необхідну кількість підряд розташованих
пропусків потрібно скористатися спеціальним символом пропуску: nbsp.
Наприклад,
в наступному записі початкового тексту: (А У) в тексті, що відображається
між символами А і В буде 3 пропуски. При необхідності зобразити на екрані
команду мови HTML виникає додаткова проблема - редактор може перетворити її у відповідну
команду прямо в початковому тексті. І замість відображення відповідної
команди на екрані Ви отримуєте розташований по центру текст в наступних рядках.
Щоб цього уникнути, можна, наприклад, вставити всередину команди дві парні команди.
Наприклад, вищенаведену команду потрібно записати таким чином:CENTER>
2.8. Створення таблиць Таблиця створюється за допомогою команд і . Команда може
мати наступні параметри: - UNITS - може приймати значення RELATIVE або PIXELS.
Визначає одиниці вимірювання в інших параметрах. По замовчанню, UNITS = PIXELS.
- BORDER - визначає лінії, що розмежовують клітки в таблиці. Ширина лінії задається
командою BORDER = N. - CELLPADDING - Визначає мінімальний проміжок навколо
вмісту таблиці. - BGCOLOR - Визначає колір фонового зображення в таблиці. Є ще
декілька команд, задаючих колір обрамлення: BORDERCOLOR, BORDERCOLORDARK, BORDERCOLORLIGHT,
але вони використовуються тільки в Microsoft Internet Explorer.
Для формування таблиці, що складається з декількох рядків, використовують команду
, що розділяє рядки. Команди і використовуються для позначення заголовка стовпця
кліток. Параметри ROWSPAN і COLSPAN команд і використовуються для формування
кліток даних, що об'єднують більше за один рядок або стовпець. 2.9. Вбудування
гіпертекстових посилань Перехід в інше місце того ж документа. Для організації
переходу всередині одного HTML - файла потрібно ввести необхідний текст в двох
місцях: - Записати мітку в тому місці HTML - файла, куди необхідно перейти.
- Записати перехід на цю мітку в тому місці, звідки буде виконаний перехід. Для
організації мітки записують: , де МІТКА - будь-яке ім'я, що складається з букв
англійського алфавіта і цифр. Для переходу на цю мітку запишіть:Перейти на мітку.
Перехід в інший документ тієї ж сторінки. Для переходу з будь-якого місця HTML-файла
h1.php в початок HTML-файла h2.php потрібно записати: Перехід до розділу
h2. Перехід в інший документ. У будь-якому місці HTML-файла можна ввести
гіпертекстові посилання на інший документ або файл. Гіпертекстові посилання вводяться
в HTML-файл за допомогою уніфікованого локатора ресурсів - URL. Цей локатор
визначає правила написання різних видів посилань. Нижче приводяться найважливіші
префікси для URL: Префікс URL
Функція
FTP://
Посилання на сервер FTP
HTTP://
Посилання
на об'єкт, який буде передаватися з використанням протоколу HTTP
FILE://localhost
Посилання
на локальний диск
GOPHER://
Посилання на сервер Gopher
MAILTO://
Посилання
на електронну поштову адресу
NEWS://
Посилання на електронну
конференцію
NNTP://
Посилання на сервер електронної конференції
TELNET://
Посилання
на сервер електронної конференції
Для запису гіпертекстового посилання
в HTML-файл використовують наступну команду: Перехід по гіпертекстовому посиланню.
При натисненні лівої кнопки миші на текст Перехід по гіпертекстовому посиланню
Ви перейдете на ресурс, заданий в URL. Для повернення скористайтеся клавішею
«Back» броузера. Виведення на екран. Зображення можуть бути виведені на екран
так само, як текст. Файли зображення можуть бути задані в декількох різних
форматах, найкращі з яких - GIF (файли *.gif) і JPEG (файли *.jpg). Нижче приводиться
формат команди: , де: - ІМ'Я ФАЙЛА - це ім'я даного файла у вашій сторінці
або повне ім'я шляху і файла, якщо файл не належить даній сторінці. - Текст
- це текст, що виводиться замість зображення, якщо файл зображення по якийсь причині
недоступний. - DIRECTION - місце розташування зображення. Приймає наступні
можливі значення: ALIGN=TOP - подальший текст розташовується у верхній частині
зображення. ALIGN=BOTTOM - подальший текст розташовується в нижній частині зображення.
ALIGN=LEFT - зображення розташовується в лівій частині листа. Текст обтікає
зображення праворуч. ALIGN=MIDDLE - зображення розташовується в центрі листа.
ALIGN=RIGHT - зображення розташовується в правій частині листа. Текст обтікає
зображення ліворуч. WIDTH = WIDTH - ширина необхідного зображення на екрані,
HEIGHT = HEIGHT - висота необхідного зображення на екрані. Гіпертекстові посилання
за допомогою зображення. Допустимо, що Ви виводите на екран зображення IMAGE-файл,
який називається, наприклад, image.gif. Якщо Ви хочете організувати
сторінку так, щоб при натисненні лівої кнопки миші на зображення, перейти на іншу
домашню сторінку, наприклад, на: HTTP://WWW.HOME.COM, потрібно записати наступну
команду: Створення посилання на поштову адресу. Наприклад моя поштова адреса
в GEOCITIES.COM: info@geocities.com Для організації посилання в моїй домашній
сторінці на мою поштову адресу необхідно записати в кінці головного розділу домашньої
сторінки: Перейти на мою поштову адресу У наступній строчці необхідно
задати таке ж посилання з допомогою аплікації MAIL12.GIF замість тексту: 2.10.
Кадри. Команди роботи з кадрами. Ви можете розділити екран на декілька незалежних
віконних кадрів, кожний з яких відображає окремий HTML документ. На екрані кадри
являють собою прямокутники. У HTML використовуються наступні команди роботи
з кадрами: , - визначають склад і розміри кадрів на екрані, , - визначають HTML-файл
для кожного кадру, , - для повідомлень броузеру, що не обробляє кадри.
Формат команди FRAMESET. Команда ділить ціле вікно (або частину вікна, визначену
попередньою командою FRAMESET) на декілька вертикальних (параметр COLS) або горизонтальних
(параметр ROWS) кадрів. Кожний з цих кадрів може визначати HTML-файл,
що відображається в ньому (за допомогою команди FRAME) або, відповідно, ділитися
далі за тими ж правилами з вкладеною командою FRAMESET. По кінцю визначення
кадрів, що задаються командою FRAMESET, необхідно записати команду /FRAMESET,
інакше вони можуть бути побудовані неправильно. Формат параметрів COLS і ROWS.
Ці параметри дозволяють визначити розміри і кількість побудованих вертикально
(параметр COLS) або горизонтально (параметр ROWS) кадрів. Атрибути параметрів
задаються в одній з 3 форм: - абсолютний розмір в пікселях, - заданий процент
в загальній довжині або ширині, - залишок після завдання попередніх кадрів. Символ
«*» означає виділення кадру площі, що залишилася. Наприклад, команда: створює
2 кадри: верхній становить 100 пікселів у висоту, нижній - простір, що залишився.
Формат команди FRAME. Дана команда існує тільки всередині блоку FRAMESET
- /FRAMESET. Її призначення - визначення функцій конкретного кадру. Команда /FRAME
практично не використовується так як її функції виконують команди /FRAMESET
і наступна FRAME. Параметр SRC задає ім'я HTML - файла, що відображається в даному
кадрі. Параметр NAME застосовується для створення імені кадру. Тоді інший
кадр може посилатися на даний для відображення в ньому свого гіпертекста. Це дуже
поширена команда її можна бачити в багатьох сторінках. Її перевага в тому, що
на екрані можна одночасно бачити і HTML-файл, що викликає, і HTML-файл, що викликається,
і для перегляду наступного файла гіпертекста досить натиснути на відповідну
кнопку файла, який викликає. Параметр TARGET команди BASE задає кадр,
що виділяється по замовчанню для відображення гіпертекста. Параметр NORESIZE застосовується
для того, щоб користувач не зміг змінити розміри даного кадру на екрані.
Лінійки прокрутки задаються за допомогою параметра SCROLLING. Тут діють
наступні правила: - Якщо параметр SCROLLING не заданий, то лінійки прокрутки створюються
автоматично тільки тоді, коли розмір тексту, що відображається перевищує
розмір кадру (це відноситься як до розміру по вертикалі, так і по горизонталі).
- Якщо задане SCROLLING = «YES», то лінійки прокрутки створюються завжди.
- Якщо задане SCROLLING = «NO», то лінійки прокрутки не створюються. - Якщо задане
SCROLLING = «AUTO», то система працює так само, як якщо параметр SCROLLING
не заданий. Товщина граничної лінії між кадрами може задаватися в пікселях за допомогою
параметрів MARGINHEIGHT і MARGINWIDTH, якщо розробника не влаштовують
значення, задані по замовчанню. Спеціальні значення параметра TARGET. У сучасних
броузерах зарезервовано 4 спеціальних значення параметра TARGET: а) _blank -
броузери завжди задає це значення для нового, неіменованого вікна. б) _self - задається
по замовчанню для всіх кадрів, в операторі FRAME яких немає параметра
TARGET. Всі документи, що викликаються по гіперпосиланню, завантажуються і відображаються
в тому ж кадрі, що і документ, який їх викликає. Значення _self в явному
вигляді не застосовується доти, поки ми не вводимо команду BASE з параметром
TARGET - тоді, можливо, знадобиться відмінити це загальне призначення для якого-небудь
конкретного кадру. в) _parent - файл, що викликається по гіперпосиланню,
завантажується в кадр або вікно, яке є батьківським по відношенню до того,
що викликає. Іншими словами, файл, що викликається буде розташований в тому ж
вікні, що і його «дідусь». г) _top - файл, що викликається по гіперпосиланню, завантажується
у вікно, що містить посилання, і перекриває всі кадри даного вікна.
Формат команди NOFRAME. Ця команда призначена для броузерів, що не обробляють
кадри. У броузері, що обробляє кадри, вся інформація, що міститься між командами
NOFRAME і /NOFRAME, ігнорується. У броузері, що не обробляє кадри, ця інформація
обробляється. Звичайно розробники сторінок, використовуючі кадри, вставляють
в тіло команди NOFRAME повідомлення про те, що даний броузер не обробляє кадри
і повідомляє рекомендації, наприклад, перейти на Netscape 2.0 і вище. 2.11.
Спеціальні ефекти Створення блимаючого тексту. Зауваження: працює в Netscape 3.0,
не працює в Explorer 3.0 Ви можете створити зображення тексту що блимає за
допомогою наступних команд: і Не зловживайте блимаючим зображенням. Його краще
усього застосовувати для залучення уваги до нової інформації в домашній сторінці.
Створення рядка, що біжить. Зауваження: працює в Explorer 3.0, не працює в Netscape
3.0 Рядок, що біжить створюється за допомогою команд: і . Нижче приводяться
приклади команд: Команда - цей текст буде рухатися з права на ліво повільно.
Команда - цей текст буде рухатися з права на ліво і назад. Команда - цей текст
буде рухатися і зупинятися. Команда - цей текст буде рухатися дуже швидко.
Карта образів. Зауваження: працює в Explorer 3.0, працює в Netscape 3.0 Карта образів
дозволяє створити декілька посилань до різних адрес, використовуючи тільки
одне зображення. Нехай у Вас є картинка imgmap.gif розміром 100 х 100 пікселів.
Припустимо, що картинка складається з 4 частин, де зображені Ваші друзі: - В
лівому верхньому кутку - Діма (у нього є домашня сторінка dima.php ) - В правому
верхньому кутку - Алік (Його домашня сторінка alik.php ) - В лівому нижньому
кутку - Вова (Його домашня сторінка vova.php ) - В правому нижньому кутку -
Ігор (Його домашня сторінка igor.php ) Якщо Ви хочете, щоб при натисненні лівої
кнопки миші на зображення кожного з Ваших друзів Ви попадали на його домашню
сторінку, запишіть наступні команди: Плаваючі вікна. Зауваження: працює в Explorer
3.0, не працює в Netscape 3.0. Це вікно створюється за допомогою наступної
команди: Це плаваюче вікно 2.12. Форми Форма - це засіб, що дозволяє організувати
в сторінці діалог з її користувачем. Розробник сторінки створює її за допомогою
спеціальних елементів: - кнопки, - списки, - текстові рядки, - текстові поля.
Форми передають інформацію програмі обробки у вигляді пар: Ім'я поля - Значення
поля. Форма починається командою і закінчується командою . Дана команда має
2 основних параметра: ACTION і METHOD. Параметр ACTION є обов'язковим. Він вказує
адресу обробника форми (наприклад, адреса програми обробки або поштова адреса
або просто адреса URL для переходу). Параметр METHOD не є обов'язковим. Він
приймає одне з двох значень: GET або POST, пов'язаних з методом протоколу передачі
інформації з анкети. По замовчанню, METHOD= GET. Приклад команди FORM: Для
завдання керуючої кнопки запуску передачі даних треба записати наступну команду:
де: INPUT - команда створення керуючого елемента. TYPE - параметр, що визначає
керуючий елемент. submit - значення цього параметра (в цьому випадку керуюча
кнопка). NAME - параметр, задаючий ім'я змінної. botton1 - ім'я змінної. VALUE
- параметр, задаючий текст, що відображається на керуючому елементі. Довільний
текст - значення тексту на керуючому елементі. Нижче приводяться основні типи
керуючих елементів INPUT. 1) Текстовий рядок: TYPE=text визначає вікно для введення
одного рядка тексту. Параметр SIZE задає розмір вікна в символах. Приклад:
У отримане вікно, в якому буде зображатися текст: Введіть текст. Ви можете ввести
будь-який текст або залишити записаний початковий текст «Введіть текст» без
змін. При натисненні кнопки submit в програму обробки буде передано: text1=Ввести
текст (або інший, змінений текст). Параметр SIZE задає розмір вікна в символах.
При необхідності обмежити довжину тексту N, застосовуйте додатковий параметр:
MAXLENGTH= N. 2) Вікно для введення пароля: TYPE=password Аналогічний типу
text, але при введенні кожний символ замінюється символом *. Приклад. Треба ввести
пароль довжиною не більше за 5 символів. 3) Текстове вікно: TEXTAREA Задається
в наступному вигляді: Спочатку заданий текст Параметр COLS задає кількість
символів в рядку, параметр ROWS задає кількість рядків у вікні, необов'язковий
параметр WRAP=VIRTUAL задає лінійку прокрутки. 4) Радіокнопка: TYPE=radio Може
бути задано декілька радіокнопок з однаковим ім'ям (тобто значенням параметра NAME),
але вони будуть взаємовиключаючими: може бути натиснена (CHECKED) тільки
одна з них. Приклад: Червона Синя Зелена Ми отримали 3 кнопки, з них відмічена
Червона. При натисненні на іншу кнопку попередня звільняється. Допустимо, ми натиснули
Синю кнопку, тоді при натисненні на кнопку submit в програму обробки буде
введено: color=Синій 5) Помічений квадрат: TYPE=checkbox На відміну від радіокнопок,
може бути декілька квадратів з однаковими іменами. Наприклад, в наступному
прикладі спочатку задана кнопка «Горілка»: Горілка Коньяк Лікер Якщо Ви натиснете
ще на кнопку «Коньяк», то при натисненні на кнопку submit в програму обробки
буде введено: box=Горілка box=Коньяк 1. Прихований текст: TYPE=hidden При
відображенні не видний користувачеві. Служить для прямої передачі службової інформації
від домашньої сторінки обробнику форми, прозоро для користувача. 7) Меню:
SELECT Нехай Вам представилася можливість вибрати одну з путівок у відповідності
з наступним списком: