Основи HTML

Побудова HTML-документа, його структура, теги форматування та посилання на інші файли. Робота з маркованими та нумерованими списками. Створення найпростіших HTML-таблиць, їх представлення. Правила опису фрейму. Клієнтський варіант карти-зображення.

Рубрика Программирование, компьютеры и кибернетика
Вид книга
Язык украинский
Дата добавления 01.11.2012
Размер файла 59,6 K

Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже

Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.

Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

Основи HTML

Короткий курс

Гладченко М.Б.

Львів - 2002 р

Всі права застережено.

Передрук чи використання матеріалу дозволяється тільки з дозволу автора.

Зміст

Вступ

Глава 1. Правила побудови HTML-документів

Що таке HTML

Структура документа

Глава 2. Списки

Маркований список

Нумерований список

Глава 3. Графіка

Фонові зображення

Зображення в тексті

Глава 4. Таблиці в HTML

Створення найпростіших HTML-таблиць

Представлення таблиць

Глава 5. Фрейми

Правила опису фреймів

Глава 6. Карти-зображення

Клієнтський варіант карти-зображення

Додаток 1. Таблиця кольорів RGB

Додаток 2. Таблиця спецсимволів

Вступ

Дана книга присвячена питанням створення документів, для використання їх на web-сторінках. В ній представлений матеріал, який чудово підійде початківцям для створення статичний web-документів, використовуючи «чистий» HTML-код.

Незважаючи на всю „статичність” HTML, він використовується для відображення роботи скриптів та динамічних web-документів.

В даній роботі не розглядаються питання створення динамічних документів, документів взаємодії з базами даних, мультимедіа об`єкти та інтерактивна взаємодія із користувачем.

Дану книгу треба не читати, з нею треба працювати - тобто ввімкнути комп`ютер і проробляти кожен розділ практично, щоб бачити результат.

Велике спасибі Дорош Н.В. Завдяки якій і „народилася” ця книжка. А також всім тим хто підтримував мене в даній роботі.

Глава 1. Правила побудови HTML-документів

Що таке HTML

Всесвітня павутина World Wide Web (WWW) „сплетена” із Web-сторінок. Які створюються з допомогою мови розмітки документів HTML (Hypertext Markup Language). Хоча багато говорять про програмування на даній мові, HTML зовсім не є мовою програмування - це мова розмітки документа. При побудові HTML- документа виконується його розмітка певними службовими мітками, які служать для вказання форми представлення інформації, що знаходиться в документі.

Спеціальні програми для перегляду HTML-документів, які часто називаються браузерами, служать для інтерпретації файлів, що розміченні по правилах HTML, форматування їх у web-сторінки та відображання їх на екрані користувача. Існує дуже багато програм-браузерів розроблених багатьма компаніями, але на сьогоднішній день із всього різноманіття програм лідером є Microsoft Internet Explorer, потім йде Netscape Communicator і Opera. Вони мають між собою відмінності в оформленні HTML-документів. На цих нюансах буде робитися акцент.

Найкраще для вивчення HTML, та зрозуміння його суті підійде текстовий редактор Блокнот, а не спеціалізована програма.

Всі службові символи в HTML називаються тегами (tag - ярлик, признак) і виділяються символами-обмежувачами (< і >), між якими прописується ідентифікатор - ім`я тега, і, можливо, його параметри.

Більшість тегів HTML використовуються попарно, тобто для визначеного тега -відкриваючого, в документі є ще один - закриваючий тег. По правилах HTML закриваючий тег записується так як і відкриваючий. Але з символом / (прямий слеш) перед ім`ям тега. Єдиною принциповою різницею є те, що закриваючі теги не використовують параметрів.

Теги, які потребують відповідних закриваючих тегів, будемо називати тегами-контейнерами. Все, що записано між відповідними відкриваючим та закриваючим тегом, будемо називати вмістом тега-контейнера. Для деяких тегів можна опускати їх закриваючі варіанти. Броузери правильно ідентифікують цю ситуацію, але не завжди, тому така практика не може бути рекомендована.

Існують загальні правила інтерпретації тегів броузерами. На відміну від мов програмування, де помилкові оператора призводять до видачі помилки і потребують виправлення, в HTML не прийнято реагувати на неправильний запис тегів. Неправильний тег чи його параметр буде просто ігноруватися броузером. Це є загальне правило для всіх броузерів, під дію якого попадають не тільки помилково написані теги, а й теги не розпізнані даною версією броузера.

Теги можуть записуватися з параметрами чи атрибутами (тут буде використовуватися термін параметр). Набори допустимих параметрів індивідуальні для кожного тега. Загальні правила запису параметрів заключаються в наступному:

· після тега можуть йти параметри, які відділяються один від одного пробілами;

· порядок параметрів тега - довільний;

· багато параметрів потребують вводу значень, однак деякі значення записуються без них і приймають значення по замовчуванню;

· якщо параметр потребує значення, то воно вказується після назви параметра через знак рівності „=”;

· значення параметра може бути записане як у подвійних, так і одинарних лапках, так і без них. Винятком являється коли в значеннях параметра є пробіли, тоді без лапок не обійтися.

<table border align=”left”>

Тут для тега <table> задано 2 параметра. Перший border вказаний без значення. Другий параметр align має значення left.

Структура документа

Розділ документа head

Розділ документу head визначає його заголовок і не є обов`язковим тегом, однак добре створений заголовок може бути дуже корисним. Задачею заголовка є представлення необхідної інформації для програми, що інтерпретує документ. Теги, що знаходяться всередині розділу head (окрім назви документа, що описується тегом <title>), не відображаються на екрані.

Тег <head> зазвичай слідує за тегом <html>. Закриваючий тег </head> описує кінець даного розділу.

Назва документа

Тег-контейнер <title> є єдиним обов`язковим тегом і служить для того, щоб дати документу назву, яка зазвичай відображається в заголовку вікна броузера. Обов`язковість назви документа є швидше примусовою рекомендацією і правилом „хорошого тону в HTML”. Документ без даного тега також буде коректно відображатися.

По замовчуванню даний текст використовується для створення закладок (bookmark), тому бажано давати інформативні назви довжиною, приблизно в 60 символів.

При фреймовій структурі (про фрейми буде сказано далі) буде відображатися ише назва головного фрейма, а не дочірних.

Зв`язок з іншими документами

Часто HTML-документи зв`язані між собою, тобто мають посилання один на одного. Посилання можуть бути як абсолютні, так і відносні. Абсолютні посилання можуть бути дуже громіздкими і переставати працювати, коли переміщений молодший по ієрархії документ. Відносні посилання легше вводити та обновляти, але вони перестають працювати, коли переміщений старший по ієрархії документ.

Тег <base>

Тег <base> служить для вказання повного базового URL-адреса документа. З його допомогою відносна спилка працює навіть при переносі на інший комп`ютер. Тег <base> має один обов`язковий параметр href, після якого вказується повний URL-адрес.

Приклад:

<html>

<head>

<title> Компанія &quot;Алекс&quot;</title>

<base href=”http://www.alex.lviv.net”>

</head>

<body>

<img src=”/images/splash.jpg”>

</body>

</html>

Тег <base> показує, що шукати файл splash.jpg треба за адресом http://www.alex.lviv.net/images/splash.jpg. Якщо машина не відключена від мережі, то буде завантажене і показане зображення splash.jpg.

Тег <link>

Даний тег дозволяє підтримувати логічний зв`язок між документами. Тег <link> вказує на зв`язок документа, що містить даний тег та іншого документа чи об`акта. Кількість тегів <link> може бути довільною.

Параметр

Призначення

href

rel

rev

type

Вказує на URL-адрес іншого документа

Визначає відношення між поточним та іншим документом

Визначає відношення між іншим документом та поточним (зворотно до rel)

Вказує тип і параметр приєднаної таблиці стилів.

Приклад:

<lin rel=”contents” href=”../toc.html”>

<link href=”mailto:maniac@mail.lviv.ua” rev=”made”>

Перший рядок вказує на зв`язок з файлом змісту документа (toc.html - table of contents) з прямим відношенням contents.

Другий рядок описує зв`язок з URL-адресом автора документа (із зворотнім відношенням made).

Між документами може існувати багато різних відношень. Для rel: bookmark, copyright, glossary, help, home, toc, index, next, previous. Для rev: author, editor, publisher, owner.

Тег <meta>

В документ може бути доданий ще один тег <meta>, що дозволяє авторам документу визначити інформацію, що не має відношення до HTML.

Наприклад:

<meta http-equiv=”refresh ”content = “60 url=someshing.html”>

Броузер зрозуміє це як: через 60 секунд завантажити новий документ something.html. Якщо не вказаний url, то броузер буде перезагружати поточну сторінку.

Наприклад:

<meta name=”keywords” content=”windows, os, dos, microsoft”>

<meta name=”description” contents=”Операційні системи”>

Перший рядок описує ключові слова, які використовуються пошуковими машинами типу google.com, yahoo.com, а другий описує опис документа.

Тег <meta> може мати параметри описані в таблиці:

Параметр

Призначення

http-equiv

name

url

content

Задає властивість тега

Забезпечує додатковий опис тега. Якщо цей параметр опущений, то він рахується еквівалентний http-equiv

Задає адрес документа для властивості

Задає значення для властивості

Основне призначення даного тега - вказання таблиці кодування тексту.

Приклад для українського тексту в Windows таблиці знаків.

<meta http-equiv=”content-type” content=”text/html; charset=Windows-1251”>

Інші документи заголовка

В розділі заголовку документа можуть бути присутні ще два тега: <style> i <script>. Вони зв`язані із використанням таблиці стилів та скриптів відповідно.

Розділ документа body

В цьому розділі розміщується весь вміст документу. Більшість тегів повинні розташовуватися тут.

Розділ документа body повинен починатися тегом <body> і закінчуватися </body>.

Даний тег має ряд необов`язкових параметрів:

Параметр

Призначення

alink

background

bottommargin

bgcolor

bgproperties

leftmargin

link

rightmargin

scroll

text

topmargin

vlink

Задає колір активного посилання

Вказує на адрес зображення, яке використовується як фон

Задає границю нижнього поля документа в пікселях

Задає колір фону

Якщо встановлення значення fixed, то фонове зображення не прокурчується (тільки Microsoft Internet Expplorer, далі MSIE)

Задає границю лівого поля документа в пікселях

Задає колір ще не переглянутого посилання

Задає границю правого поля документа в пікселях

Задає присутність чи відсутність полос прокрутки у вікні.

Задає колір тексту

Задає границю верхнього поля документа в пікселях

Задає колір вже переглянутого посилання

Колір задається триплетом шістнадцяткових пар #RRGGBB (від 00 до FF) через знак # в системі RGB. Наприклад #800080 - фіолетовий, #FF0000 - червоний.

Таблицю кольорів з їх іменами та цифровим еквівалентом ви знайдете в кінці даної книги, в додатку 1.

Форматування тексту

Теги рівня блока та послідовні теги

Деякі HTML-теги, які можуть з`являтися в розділі body, називають тегами рівня блоку (block level), в той час як інші послідовними (inline) тегами, чи тегами рівня тексту, хоча такий розподіл досить умовний.

Різниця полягає в наступному: теги рівня блока можуть містити послідовні теги та інші теги рівня блоку, тоді як послідовні теги містять тільки дані та інші послідовні теги. Блокові теги, на відміну від послідовних, описують більш громіздкі структури документів.

Теги логічного форматування тексту

Тег

Пояснення

<abbr>

<acronym>

<cite>

<code>

<del>

<dfn>

<ins>

<em>

<kbd>

<q>

<samp>

<strong>

<var>

Помічає текст як абревіатуру

Помічає текст як акронім. В поєднанні з параметром title при наведенні курсору на акронім випливає підказка - значення title (Тільки MSIE)

Використовується для відмічення цитат чи назв книжок та статей. Зазвичай броузерами виводиться курсивом

Помічає як „невеличкий фрагмент програмного коду”. Виводиться монотипним шрифтом. Його не варто плутати із тегом <pre> - який виділяє великі блоки коду

Помічає текст як стертий. Відображається перекресленим. (MSIE)

Помічає текст як визначення (DeFenitioN). Відображається курсивом. (MSIE)

Помічає текст як вставку (INSertion). Відображається підкресленим. (MSIE)

Використовується для виділення важливих частин тексту. Відображається курсивом

Помічає текст як введений користувачем з клавіатури. Відображається монотипним шрифтом

Помічає короткі цитати в строці тексту. На відміну від <bloskquote> при відображенні не виконується відділення тексту пустими лінійками. (MSIE)

Помічає текст як зразок. Використовується для виділення декількох символів монотипним шрифтом

Використовується для виділення важливих фрагментів тексту. Відображається напівжирним шрифтом

Відмічає імена змінних програм. Відображається курсивом.

Теги фізичного форматування тексту

Тег

Пояснення

<b>

<i>

<tt>

<u>

<strike> i <s>

<big>

<small>

<sub>

<sup>

<blink>

<span>

<font>

<basefont>

Відображає текс напівжирним шрифтом

Відображає текс курсивом

Відображає текст монотипним шрифтом

Відображає текст підрексленим шрифтом

Відображає текст перекреслений горизонтальною лінією

Відображає текст шрифтом більшого розміру

Відображає текст шрифтом меншого розміру

Зсуває текст нище рівня строки і, якщо можна, шрифтом меншого розміру

Зсуває текст вище рівня строки і, якщо можна, шрифтом меншого розміру

Відображає мигаючий текст (підтримується тільки Netscape)

Даний тег є аналогом тега рівня блоку <div>. Використовується тоді коли треба змінити властивості частини тексту.

Вказує параметри шрифта:

face - вказує тип шрифта, де значення це є ім`я шрифта, точно таке як і ім`я шрифта в системі. Можна вказати як один, так і декілька шрифтів, тоді наступний буде використовуватися за відсутності попереднього.

Наприклад: <font face=”Verdana”, “Arial”>

size - вказує розмір шрифту в умовних одиницях від 1 до 7. Нормальним розміром вважається 3. Можна використовувати і відносні величини +3, -2 і т.д.

color - встановлює колір шрифта, який задається в форматі #RRGGBB

Вказується для вказання параметрів шрифта для усього документа, однак їх можна змінити в будь-якому місці тегом <font>. Немає закриваючого тега. В Netscpape не допускається використання параметра face

Форматування HTML-документа

Розподіл на абзаци

Будь-який текст має певну структуру. Елементами такої структури є заголовки, підзаголовки, таблиці, абзаци та ін.

Одним із перших правил, створення документа є розбиття його на абзаци, які виражають завершену думку. При створенні документів в текстових редакторах формування розділу на абзаців виконується вводом символу нової стрічки. В більшості випадків це клавіша Enter. В HTML-документах символи переводу строки не призводять до формування нового абзацу.

Тому в HTML символом абзацу служить тег <p>, який треба помістити перед початком кожного абзацу. Закриваючий тег </p> є необов`язковим. Абзац додатково виділяється пустими стрічками знизу.

Тег <p> може задаватися із параметром вирівнювання align, який може приймати одне із наступних значень:

· Left - вирівнювання по лівій границі броузера (приймається по замовчуванню).

· Center - вирівнювання по центру вікна броузера.

· Right - вирівнювання по правій границі броузера.

· Justify - вирівнювання по ширині (по двох сторонах).

Перевід строки

Зазвичай стрічка переноситься в наступний рядок по символу „пробіл” в залежності від розмірів вікна броузера. Для того, щоб примусово перевести стрічку, тобто почати її з нової лінійки потрібно вставить тег <br>, який немає відповідного закриваючого тега. Без нього не обійтися, наприклад. При відображенні віршів. Тут перевід стрічки не виділяється пустими стрічками.

Теги <nobr> i <wbr>

Бувають випадки коли непотрібно, щоб строку переносилася. Для того існує тег-контейнер <nobr>. Якщо треба вказати де треба переводити строку в тегу-контейнері <nobr> вставляється тег <wbr>. Броузер Netscape взагалі не підтримує тег <wbr>.

Заголовки всередині документа

Наряду із заголовком сторінки можна використовувати заголовки в середині документа. Задаються вони тегами <h1>, <h2>, <h3>, <h4>, <h5> i <h6>. Теги потребують відповідного закриваючого тега. Тег із номером 1 є самим найбільшим, а із номером 6 - найменшим. Заголовок виводиться із пустими стрічками зверху і знизу. Заголовки підтримують вирівнювання як і тег <p>.

Горизонтальні лінії

Іншим методом розділення документа є проведення горизонтальних ліній. Тег <hr> дозволяє провести рельєфну горизонтальну лінію у вікні більшості броузерів. Його параметри подані в таблиці.

Параметр

Призначення

align

widht

size

noshade

color

Вирівнювання по центру чи краях; має значення left, center, right

Встановлює довжину лінії в пікселях чи відсотках від довжини вікна броузера

Задає товщину лінії в пікселях

Відміняє рельєфність лінії

Вказує колір лінії в форматі #RRGGBB (тільки MSIE)

Використання попередньо відформатованого тексту

Бувають випадки, коли необхідно в документ включити текс, який містить форматування виконане традиційним способом з допомогою символів переводу стрічки, табуляції, пробілів і т.д. Для вирішення таких питань існує тег-контейнер <pre>. Текст відмічений таким тегом буде відображатися монотипним шрифтом так як і в текстовому редакторі. Це, насамперед, потрібно при вставці в документ великих блоків програмного коду написаного на PHP, Perl, Cobol, C++, Java чи якихось інших.

Даний тег-контейнер може вміщувати елементи форматування рівня тексту, окрім наступних:

· <img>

· <object>

· <applet>

· <big>

· <small>

· <sub>

· <sup>

· <font>

· <basefont>

Недопустимо всередині даного тега-контейнера задавати елементи форматування рівня блока, наприклад теги заголовків.

Тег абзацу там не повинен бути, але якщо зустрівся то відбудеться просто перевід строки без розділюючих ліній.

Тег <div>

Тег-контейнер <div> є елементом рівня блоку і служить для виділення фрагменту документа. Метою цього виділення є управління параметрами даного фрагмента, яке зазвичай виконується з допомогою назначених стилів.

Наприклад:

<html>

<head>Використання тега div</head>

<body>

<h2 align=”center”>Цей заголовок 2-го рівня буде виділений кольором по замовчуванню</h2>

<div style=”color: #00FF00”>

Цей текст буде виділений зеленим кольором

</div>

</body>

</html>

Аналогом тега-контейнера <div> є тег рівня тексту <span>.

html документ тег фрейм

Тег <center>

Тег-контейнер <center> призначений для горизонтального вирівнювання усіх документів блоку по середині вікна перегляду. Він підходить для центрування таблиць, які не центруються призначенням <table align=”center”>.

Коментарі в документі

В HTML-документі можна писати коментарі, які будуть видимі тільки при перегляді коду документа і не будуть виводитися на екран броузером. Коментарі можуть складатися із декількох рядків які починаються тегом <!-- і закінчуються тегом -->.

Тег <blocquote>

Даний тег є контейнером і може вміщувати будь-які теги форматування. Призначений для виділення цитат.

Текст, виділений даним тегом як правило відділяється від основного парою пустих лінійок і, зазвичай, відступом вліво.

Тег <address>

Даний тег використовується для ідентифікації автора документа вказання його адреси.

Сюди ж, зазвичай, поміщуються відомості про авторські права, дату створення та останньої модифікації документа.

Текст, заключний в цьому тегу-контейнері виводиться курсивом

Спеціальні символи

Деякі спеціальні символи не входять в базову специфікацію таблиці кодів ASCII. До них відносяться літери європейського алфавіту, математичні та деякі інші символи. Деякі символи (наприклад “<” і“>”) будуть інтерпретуватися не так як задумав автор.

Такі символи вводяться за допомогою спеціального коду. Який складається із знаку “амперсанд” (&), імені символу чи його десятковим чи шістнадцятковим еквівалентом і замикається знаком „крапка з комою”. (Наприклад “©” = &copy;)

Знайти символи які підтримуються броузерами можете в таблиці, яку я склав колись для себе. Вона розміщена в додатку 2 в кінці даної книжки.

Посилання на інші документи та файли

Одним із найважливіших понять для HTML-документів є посилання. Це щось нагадує посилання в даній книзі - посилання до тої чи іншої глави, додатку. Без цих посилань Вам довелось би довго листати книгу в пошуках тої чи іншої інформації.

Значимість посилань в Internet важко переоцінити. Читаючи книгу Ви маєте її весь час під рукою, чого не скажеш про Internet - де Ви і поняття не маєте де знаходиться та чи інша сторінка.

Гіпертекстовий документ, що містить посилання на інші документи, які дозволяють з допомогою натискання кнопки миші переміщуватися від одного документа до іншого.

Посилання складається з двох частин: вказівника посилання та адресної частини посилання. Коли ви натискаєте на вказівник посилання то броузер завантажує документ, адрес якого вказаний в адресній частині.

Вказівником посилання може бути слово, група слів чи зображення. Зовнішній вигляд посилання залежить від настройки програми перегляду (броузера) користувача.

Приклад для текстового посилання:

<a href=”www.alex-lviv.com.ua”>Компанія &quot;Алекс&quot;</a>

Зазвичай на екрані броузера слова Компанія “Алекс” будуть підкресленими.

Приклад для графічного посилання:

<a href=”www.alex-lviv.com.ua”><img src=”button_1.gif”></a>

Навколо такого посилання броузер намалює кольорову рамку, яку можна забрати парметром border=0.

Детальніше про графічні вказівники розказується в главі 3.

Правила запису посилань

Посилання записується з допомогою тега-контейнера <a>: <a href=”адресна частина”>вказіник</a>.

Вказівник посилання може бути як абсолютним так і відносним. Для полегшення роботи із відносними вказівниками введений тег <base>. Він розміщується в розділі документа <head> і містить URL-адрес івдносно якого в документі побудована вся адресація. Дія тега <base> поширюється на всі тег документа, які використовують відносну адресацію. Якщо тег <base> вілсутній, то дресація будуєтьясвідносно даного документа.

Внутрішні посилання

При великих документах ватро поробити посилання на окремі його частини, так званими внутрішніми посиланнями. Для початку потрібно створити вказівник (інша назва - якір) в тому місці, куди буди ссилатися посилання, з допомогою параметра name тега <a>

Приклад:

<a name=”top”> </a>

Зверніть увагу, що не потрібно задавати вказівник посилання.

Внутрішнє посилання записується так як і звичайне, лише перед ім`ям якоря ставиться символ #.

Приклад:

<a href=”#top”>вгору</a>

<a href=”news/some.html#top”>

В першому випадку перехід буде здійснений на місце якоря top даного документа, а в другому - на місця якоря top документу some.html

Посилання на документи різних типів

Коли користувач натискає на посилання програма перегляду приймає документ і зважаючи на його тип вирішує що з ним робити.. оскільки можна робити посилання не тільки на інші сторінки, а й на графіку, мультимедіа-файли, архіви і т.д. Кщо броузер розпізнає тип файла (наприклад - графічний файл в форматі jpg), то він показує його в собі, в противному випадку (наприклад архів rar)- витягує його з мережі, викликає зовнішню програму. Що співставлень даному типу файлу і передає його їй.

Посилання на інші ресурси Internet

Web-простір лише частина Internet. Інші ресурси з`явиись там задовго до народження WWW. А оскільки їх є велика кількість (UseNet, Telnet, FTP, e-mail, ...) і вони мають величезну аудиторію, то можна зробити посилання і на них.

Формат посилання і далі складається із вказівника та адресної частини. Вказівник ніяких змін не потребує на відміну від адресної частини:

Ресурс

Формат адресної частини

Приклад

Web-сторінка

e-mail

Newsgroup

FTP

Gopher

WAIS

Telnet

http://

mailto:adress

news:newsgroupname

ftp://sitename

gopher://sitename

wais://sitename

telnet://sitename

http://www.lviv.uar.net/~maniac

mailto:admin@alex.lviv.net

news:news.newuser.questions

ftp://ftp.uar.net/pub/

gopher://gopher.mite.com

wais://wais.mite.com

telnet://bbs.mite.com

Глава 2. Списки

Із списками ми зустрічаємось практично кожен день, - це може бути список покупок, учнів в класі, чи просто справ на завтра. Списки дають змогу привести дані в структуру яку зручніше сприймати, і в якій легше шукати потрібну інформацію.

Маркований список

Такий тип списку також називають ненумерованим чи невпорядкованим. В ньому для виділення елементів списку використовуються спеціальні елементи - маркери списку. Вигляд маркера залежить від броузера і від степені вкладеності списку.

Теги <ul> i <li>

Для створення маркованого списку потрібно використовувати тег-контейнер <ul> </ul>, всередині котрого поміщуються всі елементи списку. Відкриваючі та закриваючі теги списку забезпечують перевід стрічки, тому відпадає потреба використовувати тег <p> чи <br>.

Кожен елемент списку повинен починатися із тегу <li>, який не потребує заключного тегу </li>.

Наприклад:

<html>

<head>

<title>Напрямок діяьностей</title>

</head>

<body>

<ul>

<b>Ми займаємось</b>

<li>Автомобілями Volkswagen, та їх сервісним обслуговуванням.

<li>Автохімією та автозапчастинами.

<li>Комп`ютерами та комплектуючими.

<li>Акваріумами.

<li>Транспортними перевезеннями.

<li>Ітаійськими панчохами.

<ul>

</body>

</html>

Тег <ul> може приймати наступні параметри:

Параметр

Призначення

compact

type

Виводить список в компактному вигляді, наприклад з меншим інтервалом між лініями

Вказує на тип маркерів списку (по замовчуванню type=disc):

type=disc - замальовані круги

type=circle - не замальовані круги

type=square - замальовані квадрати

Графічні маркери списку

Замість стандартних квадратиків та кружечків замість маркерів списку можна використовувати графічні об`єкти. Для цього потрібно замість тегу <li> поставити бажане графічне зображення, а в кінці рядку - тег переносу рядка <p> чи <br>.

Приклад:

<html>

<head>

<title>Напрямок діяьностей</title>

</head>

<body>

<ul>

<b>Ми займаємось</b>

<img src=”image/bullet1.gif”>Автомобілями Volkswagen, та їх сервісним обслуговуванням.<br>

<img src=”image/bullet1.gif”>Автохімією та автозапчастинами.<br>

<img src=”image/bullet1.gif”>Комп`ютерами та комплектуючими.<br>

<img src=”image/bullet1.gif”>Акваріумами.<br>

<img src=”image/bullet1.gif”>Транспортними перевезеннями.<br>

<img src=”image/bullet1.gif”>Ітаійськими панчохами.<br>

<ul>

</body>

</html>

Нумерований список

Це такий тип списку де замість маркерів використовуються числа. Тому такий список називається впорядкованим чи нумерованим.

Теги <ol> i <li>

Для створення нумерованого списку потрібно використовувати тег-контейнер <ol> </ol>, всередині котрого розташовуються всі елементи списку. Як і в маркованому списку, його елементи повинні починатися тегом <li>.

Приклад:

<html>

<head>

<title>Напрямок діяьностей</title>

</head>

<body>

<ol>

<b>Ми займаємось</b>

<li>Автомобілями Volkswagen, та їх сервісним обслуговуванням.

<li>Автохімією та автозапчастинами.

<li>Комп`ютерами та комплектуючими.

<li>Акваріумами.

<li>Транспортними перевезеннями.

<li>Ітаійськими панчохами.

<ol>

</body>

</html>

Тег <ol>, може містити наступні параметри:

Параметр

Призначення

compact

type

start

Виводить список в компактному вигляді, наприклад з меншим інтервалом між лініями

Вказує на тип нумерації списку (по замовчуванню type=1):

type= A - великі латинські літери

type= a - малі латинські літери

type= I - великі римські цифри

type= i - малі римські цифри

type= 1 - арабські цифри

дозволяє почати нумерацію не з одиниці, а із заданого значення

Тег <li> також може використовувати параметр type. Значення параметра value дозволяє змінювати параметр нумерації прямо в списку із використання значень параметрів type.

Список визначень

Це є особливий вид списків, які також називаються словарним визначенням. На відміну від інших типів списку цей завжди складається із двох частин. В першій - визначений термін, а у другій - текст у формі словарної статті, що розкриває значення терміну. Список може бути вкладений, але він не повинен містити елементи рівня блоку.

Приклад:

<dl>

<dt>Термін.

<dd>Визначення.

</dl>

Глава 3. Графіка

Важливість графіки тяжко переоцінити в будь-якому виду публікації, в тому числі і у Web-документі.

Уявіть собі, що ви придумали якісь пристрій і детально його описали. В результаті опис вийшов якийсь сухий та сірий. А якщо вставити декілька ілюстрацій чи креслень? Зовсім інша справа. Але потрібно мати почуття міри. Бо кожен зайвий малюнок збільшує час завантаження документа, а користувачі, за статистикою, чекають не більше 30 секунд. Робіть висновки.

Тут не буде розказано як малювати і чим малювати. Ці питання дуже добре висвітлені у відповідній літературі. Та й, якщо людина зайнялася web-дизайном, то вже розуміється, що вона має деякі навички у створенні простих графічних об`єктів.

Для збереження і використання графіки у web-документах краще використовувати компактні формати, такі як: gif, jpg, png і невеликої роздільчої здатності - порядку 72-96 dpi.

Фонові зображення

При створенні web-документів можна використовувати фонові зображення в ролі яких зазвичай виступають невеличкі графічні файли. При перегляді у броузері фонове зображення розмножується по всьому екрану, тобто заповнює його.

Для вставки фонового зображення в документ потрібно використати параметр background тега body, де в якості значення - шлях до зображення.

Приклад:

<body background=”texture1.gif” bgcolor=”#336699”>

Тут в якості фону буде використаний файл texture1.gif, а якщо користувач відключить перегляд картинок, то фон буде кольору #336699.

Зображення в тексті

Для вставлення зображень в текст потрібно використати тег <img>, що має єдиний обов`язковий параметр src, який визначає шлях до файла із зображенням <img src=”picture1.jpg”>.

Даний тег може мати ряд параметрів, які описані нище.

Вирівнювання зображення

При включенні зображення в документ його можна вирівняти відносно тексту чи вікна броузера.

Параметр

Призначення

top

texttop

middle

absmiddle

baseline або bottom

absbottom

left

right

Верхня границя зображення вирівнюється по самому високому елементу поточного рядка

Верхня границя зображення вирівнюється по самому високому текстовому елементу поточного рядка

Вирівнювання середини зображення по базовій лінії поточного рядка

Вирівнювання середини зображення по середині поточного рядка

Вирівнювання нижньої границі зображення по базовій лінії поточного рядка

Вирівнювання нижньої границі зображення по нижній границі поточного рядка

Зображення притискається до лівого краю вікна. Текст обтікає його справа.

Зображення притискається до правого краю вікна. Текст обтікає його зліва.

Приклад:

<img src=”pic1.gif” align=”left”>

Для заборони обтікання тексту навколо зображення, в потрібному місці вставляється тег <br> із параметром clear, який може приймати значення left, right, all.

Задання розмірів зображення

Тег <img> має 2 необов`язкових параметра width i height. Тобто ширина і висота зображення відповідно. Значення можуть задаватися як в пікселях, так і у відсотках від розмірів вікна. Хоча вони і необов`язкові їх рекомендується вказувати, оскільки користувач, який відключив графіку зможе побачити реальні розміри зображення.

При заданні розмірів, що відрізняються від реальних зображення буде масштабуватися.

Відділення зображення від тексту

При заданні значень параметрів hspace i vspace тега <img> можна відсунути текст від зображення на задану кількість пікселів. Тобто зображення буде обрамлене пусти місцем.

Рамки навколо зображення

Зображення можна помістити в рамку заданої ширини. Для цього служить параметр border тега <img>, в якості параметра використовується число - товщина рамки в пікселях. По замовчуванню рамки немає. Вона малюється тільки коли зображення виступає посиланням.

Альтернативний текст

Одним із параметрів тега <img> є alt, в якості значення якого виступає альтернативний текст. Тобто текст який показується при наведенні курсору на малюнок і при відключеній графіці.

Використання зображення в якості посилання

Для того щоб зображення стало посиланням достатньо включити тег <img> в тег-контейнер <a>.

Приклад:

<a href=”http://www.alex-lviv.com.ua” alt=”Компанія &quot; Алекс&quot;”><img src=”http://www.alex-lviv.com.ua/images/logos/logo1.gif” width=”50” heigth=”20” border=”0” alt=”Компанія &quot; Алекс&quot;”><></a>

Глава 4. Таблиці в HTML

Одним із найбільш потужних і широко використовуваних в HTML засобів є таблиці. Поняття табличного представлення даних не потребує допоміжних пояснень. В HTML таблиці використовується не тільки як метод представлення даних, а й як засіб форматування web-сторінок. Саме з допомогою таблиць можна поділити текст на колонки, чи забезпечити інше його розміщення, що недоступно стандартними засобами.

Створення найпростіших HTML-таблиць

Опис таблиці повинен розміщуватися всередині тега <body>. Документ може містити довільну кількість таблиць, причому допускаються вкладені таблиці одна в одну.

Кожна таблиця розміщується в тегу-контейнері <table> </table>.

Одразу ж після нього може йти необов`язковий тег-контйнер заголовку таблиці <captiion>заголовок таблиці</caption>.

Кожна стрічка складається із тега-контейнера <tr> </tr> імусить містити хоча б одну комірку.

Кожна комірка таблиці описується тегом-контейнером <td> </td> (для комірок даних) або <th> </th> (для комірок заголовків). Ці теги не можуть бути поза тегом-контейнером <tr> </tr>.

Теги </th> </tr> </td> можуть бути опущеними, але це не рекомендується. Тег </table> не може бути опущений.

Якщо комірка пуста її прийнято описувати конструкцією <td>&nbsp;</td>.

Побудова таблиць де в різних рядках може бути різна кількість комірок на допускається (броузер сам домалює комірки).

Приклад:

<html>

<body>

<table>

<caption>Заголовок таблиці</caption>

<tr>

<td>Комірка 1 рядка 1</td>

<td>Комірка 2 рядка 1</td>

</tr>

<tr>

<td>Комірка 1 рядка 2</td>

<td>Комірка 2 рядка 2</td>

</tr>

</table>

</body>

</html>

Представлення таблиць

Заголовок таблиці <caption>

Заголовок табиці описується всередині тега-контейнера <caption>, який має єдиний параметр align. Даний параметр може приймати лише два значення: top i bottom, тобто розміщення заголовка зверху чи знизу таблиці відповідно. По замовчуванню - top. Таблиця може і не мати заголовка.

Параметри тега <table>

Даний тег має кілька неособливих параметрів, такі як: border, cellspacing, cellpadding, width, align, rowspan, colspan також height і bgcolor які підтримуються тільки MSIE i Netscape.

Параметр

Призначення

border

cellspacing

cellpadding

width

height

align

bgcolor

rowspan

colspan

Задає величину рамки навколо всієї таблиці і окремої комірки в пікселях

Значення цього параметра не може бути опущене і воно задає відстань в пікселях між рамками комірок в таблиці

Задає розмір вільного простору в пікселях між рамкою комірки та даними в ній

Задає ширину таблиці чи комірки в пікселях чи відсотках

Задає висоту таблиці чи комірки в пікселях чи відсотках

Задає горизонтальне вирівнювання таблиці (тільки left i right)

Задає колір фону таблиці

Об`єднує кілька комірок, що лежать в різних рядках, в одну

Об`єднує кілька комірок, що лежать в різних стовпцях, в одну

Глава 5. Фрейми

Фрейми дозволяють розбити вікно броузера на декілька окремих прямокутних областей, в які можна завантажити окремі документи і переглядати їх незалежно один від одного. Між ними при необхідності можна організувати взаємодію, яка заключається в тому, що вибір посилання в одному х них приведе до завантаження документа в іншому.

Правила опису фреймів

Документ, який описує Фрейми містить тільки їх розмітку а не їх інформацію. Інформація, яка буде використовуватися у фреймах організовується як звичайний HTML-документ

Приклад HTML-документу із фреймами:

<html>

<head>frames</head>

<frameset rows=”25%, 50%, 25%”>

<frame src=”header.html”>

<frameset cols=”200, *”>

<frame src=”menu.html” name=”menu”>

<frame src=”main.html” name=”main”>

</frameset>

<fram src=”footer.html”>

</frameset>

<noframes>Ваш броузер не підтримує фрейми</noframes>

</html>

header.html

menu.html

main.html

footer.html

Ось такий вигляд буде мати вікно броузера. Назви файлів вказують куди який буде завантажений. Розглянемо кожен із незнайомих тегів окремо.

Тег <frameset>

Визначає структуру майбутнього документа. Записується замість тега <body>. Web-сторінки, що складені із фреймів не можуть містити тег <body>, так як в свою чергу, сторінки із тегом <body> не можуть містити фрейми.

Тег <frameset> може мати довільну кількість вкладень тегу <frameset>.

Значення параметрів cols i rows задають кількість стовпців та рядків відповідно. Їх значення можут бути як цілі числа в пікселях (100, 20, 350), відсотки (20%б 80%) чи відносні одиниці (2*, 3*, *). Також можуть біти і комбіновані значення.

Тег <frame>

Цей тег задає одиночні фрейми і повинен розміщуватися всередині тега-контейнера <frameset>. Сам же він не є контейнером і всі визначення записуються в одну лінійку.

Потрібно стільки разів записати тег <frame> скільки окремих файлів задано при записі тега <frameset>.

Параметри тега <frame>:

Параметр

Призначення

src

name

marginwidth

marginheight

scrolling

noresize

Задає URL-адрес документа, який буде завантажений в даний фрейм

Задає ім`я фрейма, яке використовується при посилання на нього

Приклад:

<a href=”other.htm” target=”main”> - завантаження в фрейм main

Задає ширину полів з правої та лівої сторони фрейма

Задає ширину полів зверху та знизу фрейма

Може мати 3 значення yes, no, auto тобто полоски скролінгу є завжди, нема ніколи і автоматично відповідно

Забороняє змінювати розмір фрейма у вікні броузера

Тег <noframes>

Достатньо старі версії броузерів не підтримують фрейми. І тому для користувачів, що їх використовують, замість фреймової структури, з`явиться текст записаний між тегами <noframes> i </noframes>

Взаємодія між фреймами

По замовчуванню фай завжди завантажується у поточний фрейм. Для вказання того фрейма куди потрібно завантажити файл використовують параметр target тега <a> в якості значення якого вказано ім`я фрейма, яке задається в тегу <frame>.

При потребі завантаження всіх файлів у вибраний фрейм варто використовувати тег <base target=”ім`я фрейма”> в розділі документа <head>.

Окрім імені фрейма параметр target може приймати ще 4 значення (їх потрібно записувати лише маленькими літерами):

Значення

Призначення

_blank

_self

_top

_parent

Документ завантажиться в нове вікно

Документ завантажиться в поточне вікно

Документ завантажиться в повне вікно

Документ завантажиться в область фрейма-батька, а при його відсутності в повне вікно

Глава 6. Карти-зображення

Це методика яка дозволяє прив`язати гіпертекстові посилання до певних частин (областей, зон) зображення. Тобто відпадає потреба розрізати зображення на шматочки і для кожного задавати посилання.

Їх варто використовувати коли треба задати, наприклад, географічні координати, які важко реалізувати окремими зображеннями. Наприклад мапа України розділена на області, де кожна область веде на певну сторінку.

Але: карти зображень займають досить багато часу завантаження (все залежить від розмірів зображення); при відключені графіці їх не видно, хоча посилання працюють.

Клієнтський варіант карти-зображення

Оскільки серверний варіант карти зображення не набув великої популярності і не такий зручний, я його тут опускаю.

Тобто в даному випадку опис карти зображення буде знаходитися прямо в HTML-документі а не на сервері.

Для вказання того, що дане зображення є опорним для карти-зображення використовується параметр usemap тега <img>, значенням якого є посилання на описання конфігурації карти.

Приклад:

<img src=”logo.gif” usemap=”#logo”>

Тег <map>

Всередині даного тега-контейнера описуються активні області карти-зображення, для чого використовується тег <area>. Тег <map> має один обов`язковий параметр name, значення якого має співпадати із значенням параметра usemap тої карти-зображення, до якої він відноситься.

Тег <area>

Кожен окремий тег <area> описує одну активну область. Закриваючого тега не потребує. Активні області можуть перекриватися, але посилання буде працювати першої за описом. Мая ряд параметрів: shape, coords, href, nohref, target i alt.

Параметр <shape>

Задає форму активної області. По замовчуванню rect.

Параметр

Призначення

defaul

rect

circle

poly

Задає всі точки зображення

Прямокутна область

Кругла область

Багатокутна область

Параметр coords

Задає координати окремої активної області. Його значенням є пари координати вузлових точок розділених комою. Координати записуються цілими, невід`ємними числами. Верхній лівий кут зображення має координати 0,0. Першим числом з пари є координата по горизонталі, другим - по вертикалі. Список координат залежить від типу області.

Для області типу rect задаються координати верхнього лівого та правого нижнього кута.

Для області типу circle задаються 3 числа - координати центру круга та радіус.

Для області типу poly задаються координати вершин многокутнику в потрібному порядку. Многокутник може бути не випуклим. Перша і кінцева координати можуть і не співпадати (хоча це і не рекомендується) броузер сам їх з`єднає

Для області default координати не потрібні.

Параметри href i nohref

Ці два параметри є взаємовиключаючими. По замовчуванню - nohref, який вказує на те, що область немає посилання.

Правила запису для href такі ж як і для запису посилань в тегу <a>.

Параметр terget

Використовується при роботі із фреймами. Вказує на фрейм куди має завантажуватися заданий документ.

Параметр alt

Задає альтернативний текст для кожної з областей. Але при відключеній графіці на екран не виводиться як в ситуації з тегом <img>.

Додаток 1. Таблиця кольорів RGB

Назва кольору

Червоний (dec/hex)

Зелений (dec/hex)

Синій (dec/hex)

ALICEBLUE

240/F0

248/F8

255/FF

ANTIGUEWHITE

250/FA

235/EB

215/D7

AQUA

0/00

255/FF

255/FF

AQUAMARINE

127/7F

255/FF

212/D4

AZURE

240/F0

255/FF

255/FF

BEIGE

245/F5

245/F5

220/DC

BISQUE

255/FF

228/E4

196/C4

BLACK

0/00

0/00

0/00

BLANCHEDALMOND

255/FF

235/EB

205/CD

BLUE

0/00

0/00

255/FF

BLUEVIOLET

138/8A

43/2B

226/E2

BROWN

165/A5

42/2A

42/2A

BURLYWOOD

222/DE

184/B8

135/87

CADETBLUE

95/5F

158/9E

160/A0

CHARTREUSE

127/7F

255/FF

0/00

CHOCOLATE

210/D2

105/69

30/1E

CORAL

255/FF

127/7F

80/50

CORNFLOWERBLUE

100/64

149/95

237/ED

CORNSILK

255/FF

248/F8

220/DC

CRIMSON

220/DC

20/14

60/3C

CYAN

0/00

255/FF

255/FF

DARKBLUE

0/00

0/00

139/8B

DARKCYAN

0/00

139/8B

139/8B

DARKGOLDENROD

184/B8

134/86

11/0B

DARKGRAY

169/A9

169/A9

169/A9

DARKGREEN

0/00

100/64

0/00

DARKHAKI

189/BD

183/B7

107/6B

DARKMAGENTA

139/8B

0/00

139/8B

DARKLIVEGREEN

85/55

107/6B

47/2F

DARKORANGE

255/FF

140/8C

0/00

DARKORCHID

153/99

50/32

20/14

DARKRED

139/8B

0/00

0/00

DARKSALMON

233/E9

150/96

122/7A

DARKSEAGREEN

143/2B

188/BC

143/2B

DARKSLATEBLUE

72/48

61/3D

139/8B

DARKSLATEGRAY

47/2F

79/4F

79/4F

DARKTURQUOISE

0/00

20/14

20/14

DARKVIOLET

148/94

0/00

211/D3

DEEPPINK

255/FF

20/14

147/93

DEEPSKYBLUE

0/00

191/BF

255/FF

DIMGRAY

105/69

105/69

105/69

DODGERBLUE

30/1E

144/90

255/FF

FIREBRICK

178/B2

34/22

34/22

FLORALWHITE

255/FF

250/FA

240/F0

FORESTGREEN

34/22

139/8B

34/22

FUCHSIA

255/FF

0/00

255/FF

GAINSBORO

220/DC

220/DC

220/DC

GHOSTWHITE

248/F8

248/F8

255/FF

GOLD

255/FF

215/D7

0/00

GOLDENROD

218/DA

165/A5

32/20

GRAY

128/80

128/80

128/80

GREEN

0/00

128/80

0/00

GREENYELLOW

173/AD

255/FF

47/00

HONEYDEW

240/F0

255/FF

240/F0

HOTPINK

255/FF

105/69

180/50

INDIARED

20/14

92/5C

92/5C

INDIGO

75/4B

0/00

130/1E

IVORY

255/FF

255/FF

240/F0

KNAKI

240/F0

230/1E

140/8C

LAVENDER

230/1E

230/1E

250/FA

LAVENDERBLUSH

255/FF

240/F0

245/F5

LAWNGREEN

124/7C

252/FC

0/00

LEMONCHIFFON

255/FF

250/FA

20/14

LIGTHBLUE

173/AD

216/D8

230/1E

LIGTHCORAL

240/F0

128/80

128/80

LIGTHCYAN

224/E0

255/FF

255/FF

LIGTHGOLDENRODYELLOW

250/FA

250/FA

210/D2

LIGTHGREEN

144/90

238/EE

144/90

LIGTHGRAY

211/D3

211/D3

211/D3

LIGTHOINK

255/FF

182/B6

193/C1

LIGTHSALMON

255/FF

160/A0

122/7A

LIGTHSEAGREEN

32/20

178/B2

170/AA

LIGTHSKYBLUE

135/87

20/14

250/FA

LIGTHSLATEGRAY

119/77

136/88

153/99

LIGTHSTEELBLUE

176/B0

196/C4

222/DE

LIGTHYELLOW

255/FF

255/FF

224/E0

LIME

0/00

255/FF

0/00

LIMEGREEN

50/32

20/14

50/32

LINEN

250/FA

240/F0

230/1E

MAGENTA

255/FF

0/00

255/FF

MAROON

128/80

0/00

0/00

MEDIUMAQUAMARINE

102/66

20/14

170/AA

MEDIUMBLUE

0/00

0/00

20/14

MEDIUMORCHID

186/BA

85/55

211/D3

MEDIUMPURPLE

147/93

112/70

219/DB

MEDIUMSEAGREEN

60/3C

179/B3

113/71

MEDIUMSLATEBLUE

123/7B

104/68

238/EE

MEDIUMSPRINGGREEN

0/00

250/FA

154/9A

MEDIUMTURQUOISE

72/48

20/14

20/14

MEDIUMVIOLETRED

199/C7

21/15

133/85

MIDNIGHBLUE

25/19

25/19

112/70

MINTCREAM

245/F5

255/FF

250/FA

MISTYROSE

255/FF

228/E4

225/E1

MOCCASIN

255/FF

228/E4

181/B5

NAVAJOWHITE

255/FF

222/DE

173/AD

NAVY

0/00

0/00

128/80

OLDLACE

253/FD

245/F5

230/1E

OLIVE

128/80

128/80

0/00

OLIVEDRAB

107/6B

142/2A

35/23

ORANGE

255/FF

165/A5

0/00

ORANGERED

25/FF

69/45

0/00

ORCHID

218/DA

112/70

214/D6

PALEGOLDENROD

238/EE

232/E8

170/AA

PALEGREEN

152/98

251/FB

152/98

PALETURQUOISE

175/AF

238/EE

238/EE

PALEVIOLETRED

219/DB

112/70

147/93

PAPAYAWHIP

255/FF

239/EF

213/D5

PEACHPUFF

255/FF

218/DA

185/B9

PERU

20/14

133/85

63/3F

PINK

255/FF

192/C0

20/14

PLUM

221/DD

160/A0

21/DD

POWDERBLUE

176/B0

224/E0

230/1E

PURPLE

128/80

0/00

138/80

RED

255/FF

0/00

0/00

ROSYBROWN

188/BC

143/2B

143/2B

ROYALBLUE

65/41

105/69

225/E1

SADDLEBROWN

139/8B

69/45

19/13

SALMON

250/FA

128/80

114/72

SANDYBROWN

244/F4

164/A4

96/60

SEAGREEN

46/2E

139/8B

87/57

EASHELL

255/FF

245/F5

238/EE

SIENNA

160/A0

82/52

45/2D

SILVER (default)

192/C0

192/C0

192/C0

SKYBLUE

135/87

20/14

235/EB

STATEBLUE

106/6A

90/5A

20/14

STATEGRAY

112/70

128/80

144/90

SNOW

255/FF

250/FA

250/FA

SPRINGGREEN

0/00

255/FF

127/7F

STEELBLUE

70/46

130/1E

180/50

TAN

210/D2

180/50

140/8C

TEAL

0/00

128/80

128/80

THISTLE

216/D8

191/BF

216/D8

TOMATO

255/FF

99/63

71/47

TURQUOISE

64/40

224/E0

20/14

VIOLET

238/EE

130/1E

238/EE

WHEAT

245/F5

222/DE

179/B3

WHITE

255/FF

255/FF

255/FF

WHITESMOKE

245/F5

245/F5

245/F5

YELLOW

255/FF

255/FF

0/00

YELLOWGREEN

154/9A

20/14

50/32

Назва кольору

Червоний (dec/hex)

Зелений (dec/hex)

Синій (dec/hex)

Додаток 2. Таблиця спец символів

Description

Char

Code

Entity name

quotation mark

"

&#34;

&quot;

ampersand

&

&#38;

&amp;

less-than sign

<

&#60;

&lt;

greater-than sign

>

&#62;

&gt;

non-breaking space

&#160;

&nbsp;

inverted exclamation

Ў

&#161;

&iexcl;

cent sign

ў

&#162;

&cent;

pound sterling

Ј

&#163;

&pound;

general currency sign

¤

&#164;

&curren;

yen sign

Ґ

&#165;

&yen;

broken vertical bar

¦

&#166;

&brvbar;

section sign

§

&#167;

&sect;

umlaut (dieresis)

Ё

&#168;

&uml;

copyright

©

&#169;

&copy;

feminine ordinal

Є

&#170;

&ordf;

left angle quote, guillemot left

«

&#171;

&laquo;

not sign

¬

&#172;

&not;

soft hyphen

&#173;

&shy;

registered trademark

®

&#174;

&reg;

macron accent

Ї

&#175;

&macr;

degree sign

°

&#176;

&deg;

plus or minus

±

&#177;

&plusmn;

superscript two

І

&#178;

&sup2;

superscript three

і

&#179;

&sup3;

acute accent

ґ

&#180;

&acute;

micro sign

µ

&#181;

&micro;

paragraph sign

&#182;

&para;

middle dot

·

&#183;

&middot;

cedilla

ё

&#184;

&cedil;

superscript one

&#185;

&sup1;

masculine ordinal

є

&#186;

&ordm;

right angle quote, guillemot right

»

&#187;

&raquo;

fraction one-fourth

ј

&#188;

&frac14;

fraction one-half

Ѕ

&#189;

&frac12;

fraction three-fourths

ѕ

&#190;

&frac34;

inverted question mark

ї

&#191;

&iquest;

capital A, grave accent

А

&#192;

&Agrave;

capital A, acute accent

Б

&#193;

&Aacute;

capital A, circumflex accent

В

&#194;

&Acirc;

capital A, tilde

Г

&#195;

&Atilde;

capital A, dieresis or umlaut mark

Д

&#196;

&Auml;

capital A, ring

Е

&#197;

&Aring;

capital AE diphthong (ligature)

Ж

&#198;

&AElig;

capital C, cedilla

З

&#199;

&Ccedil;

capital E, grave accent

И

&#200;

&Egrave;

capital E, acute accent

Й

&#201;

&Eacute;

capital E, circumflex accent

К

&#202;

&Ecirc;

capital E, dieresis or umlaut mark

Л

&#203;

&Euml;

capital I, grave accent

М

&#204;

&Igrave;

capital I, acute accent

Н

&#205;

&Iacute;

capital I, circumflex accent

О

&#206;

&Icirc;

capital I, dieresis or umlaut mark

П

&#207;

&Iuml;

capital Eth, Icelandic

Р

&#208;

&ETH;

capital N, tilde

С

&#209;

&Ntilde;

capital O, grave accent

Т

&#210;

&Ograve;

capital O, acute accent

У

&#211;

&Oacute;

capital O, circumflex accent

Ф

&#212;

&Ocirc;

capital O, tilde

Х

&#213;

&Otilde;

capital O, dieresis or umlaut mark

Ц

&#214;

&Ouml;

multiply sign

Ч

&#215;

&times;

capital O, slash

Ш

&#216;

&Oslash;

capital U, grave accent

Щ

&#217;

&Ugrave;

capital U, acute accent

Ъ

&#218;

&Uacute;

capital U, circumflex accent

Ы

&#219;

&Ucirc;

capital U, dieresis or umlaut mark


Подобные документы

Работы в архивах красиво оформлены согласно требованиям ВУЗов и содержат рисунки, диаграммы, формулы и т.д.
PPT, PPTX и PDF-файлы представлены только в архивах.
Рекомендуем скачать работу.