Размещено на 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	"	"	"
ampersand	&	&	&
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

Страница:

•  1 
•  2 

книга "Основи HTML" скачать

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

• Створення простої web-сторінки

  Вступ в мову HTML. Структура HTML-документа. Встановлення кольору фону та тексту, створення заголовка. Графіка і посилання на WEB-сторінці, вставка малюнків. Оформлення таблиць та форматування комірок. Комплексна лабораторна робота "Створення HTML-файла".
  
  методичка [147,3 K], добавлен 15.06.2009
  

• Створення Web-документів. Використання мови HTML

  Основи Web-програмування. Використання мови HTML. Базові елементи HTML. Форматування тексту. Вирівнювання тексту та горизонтальна лінія. Значення RGB- коду. Таблиці та списки, посилання та робота з ними. Створення посилань на документи і файли.
  
  курсовая работа [40,9 K], добавлен 12.02.2009
  

• Розробка електронного підручника на мові HTML

  Історія розвитку та теорія Web-дизайну. Ефективність програмно-апаратних засобів. Створення Web-сторінки за допомогою мови HTML. Розробка концептуальної моделі підручника. Структура HTML документу, його інформаційних потоків. Форматування тексту, фрейми.
  
  курсовая работа [1,3 M], добавлен 29.05.2012
  

• Язык HTML в программировании

  Разработки британского учёного Тима Бернерсом-Ли. HTML как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. Структура HTML-документов и основные теги на языке HTML.
  
  курсовая работа [820,3 K], добавлен 03.03.2011
  

• Язык разметки гипертекста - HTML

  Понятие об html. Структура файла в формате html. Отличительный признак html-документа. Гипертекстовые ссылки. Создание документов в стандарте html. Заголовки. Форматирование текста и изменение стилей. Фреймы.
  
  реферат [23,7 K], добавлен 17.08.2007
  

• Hyper Text Markup Language (HTML)

  Значение атрибута TITLE тега HTML-документа. Возможности HTML для разработчиков Web-страниц. Параметры тега , регулирующие отступы вокруг изображения. Оформление комментариев в CSS. Теги логического форматирования текста (phrase elements).
  
  тест [19,9 K], добавлен 11.10.2012
  

• Язык разметки гипертекста HTML

  Специальные разметочные указатели (теги) языка HTML. Основные правила написания тегов. Структура HTML-файлов. Внесение изменений и способы обновления Web-сайта. Необходимые атрибуты для создания на Web-странице бегущей строки и вставки рисунков.
  
  презентация [439,3 K], добавлен 29.01.2014
  

• Гипертекст и язык гипертекстовой разметки HTML

  Понятие, сущность и особенности применения языка HTML, а также структура его документа. Рекомендации по созданию сайтов в интернете. Общая структура и порядок оформления гипертекстов, записанных в языке HTML, примеры отображения их в браузере компьютера.
  
  контрольная работа [29,4 K], добавлен 12.09.2010
  

• Принципи роботи із засобами Web-сервісу

  Особливості експлуатації протоколу HTML (гіпертексту). Засоби обміну інформацією у ньому і підготовка даних у форматі HTML з використанням розширених засобів форматування даних. Основи використання таблиць каскадних стилів і активних елементів JavaScript.
  
  реферат [32,4 K], добавлен 26.04.2011
  

• Електронні публікації

  Принципи створення WEB-сторінок. Правила і програми для створення електронних публікацій. Гіперпосилання. Використання JAVA-скриптів при створенні HTML документу. Графіка у HTML-документах. Утворення та відправлення повідомлень електронної пошти.
  
  реферат [177,1 K], добавлен 19.10.2007
  

Другие документы, подобные "Основи HTML"

• главная
• рубрики
• по алфавиту
• вернуться в начало страницы
• вернуться к началу текста
• вернуться к подобным работам