Мова HTML

ВСТУП

В наш час з розвитком комп'ютерної техніки, комп’ютери стали не предметом розкоші, а скоріше елементом загальної культури, засобами зв’язку, джерелами інформації, інструментами для бізнесу, реклами та спілкування. Зараз набули популярності Інтернет-магазини, аукціони, чати, форуми, конференції, сайти організацій та багато інших веб- ресурсів. Інтернет став соціальним, тобто кожен користувач є учасником подій в Інтернеті, а не просто спостерігачем. Рейтинги, опитування, можливість висловити своє ставлення до отриманої інформації та ознайомитись з думкою інших людей, «живі» журнали – блоги, форуми – це нова Інтернет культура, без якої неможливий успіх у сфері інформаційних технологій.

Головне призначення сайту - це надання інформації. Здавалося б, у світі існує маса інших способів передачі інформації, чому слід застосувати саме цей? Просто він найбільш ефективний.

По-перше, у зв'язку з божевільною швидкістю розвитку мережі Інтернет, відбувається втягування все більшої кількості людей в сферу використання Інтернет-технологій та ресурсів. Якщо влаштувати опитування на тему "Чи потрібен вам Інтернет?", то 62% від усього населення дадуть ствердну відповідь, і багато з них скажуть, що вже не уявляють свого життя без його використання, як без телевізора або телефону. Тому не дивно, що за допомогою сайту про Вас дізнаються більша кількість потенційних клієнтів, ніж з газети.

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

Функції сайту

Визначення функцій сайту – складна робота. Функції сайту визначають замовники, аналітики, веб-дизайнер, веб-програміст. Разом.

Є три основні функції будь-якого сайту: маркетингова, інформаційна та іміджева.

· Інформаційна функція – надання свіжої інформації з певної теми, області, проблеми. Всі сайти цю функцію реалізують, так чи інакше. Вимоги при цьому високі: швидкість завантаження, повнота та ясність контенту, оновлюваність і функціональність та ін.

· Іміджева функція – формування образу фізичної або юридичної особи, громадського чи політичного органу в Інтернет. Вимоги по дизайну – підвищені: містить логотип, фірмовий знак, контактні дані та схему проїзду (графічну), є сторінка «Про компанії (установі)» та всі інші необхідні сторінки.

· Маркетингова функція – продажу або збільшення попиту на товар або послугу, проведення PR-акцій. Вимоги – ненав'язливість, оптимізація під ключові запити відвідувачів, анкетування, аналіз статистики, знижки і бонуси та ін.

Мета роботи – навчитися створювати сайт за допомогою блокноту мовою HTML.

Завдання –створити сайт з посиланням на уроки за допомогою блокноту мовою HTML.

1. ПРАВИЛА ПОБУДОВИ HTML-ДОКУМЕНТІВ

Мова HTML

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

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

Всі теги мови HTML виділяються символами-обмежувачами (< і >), між якими записується ідентифікатор (ім'я тега (у нашому прикладі це), і, можливо, його параметри. Єдиним винятком з цього правила є теги коментаря з більш складними обмежувачами (<!-- і -->). Назви тегів, а також їх параметрів можна записувати на будь-якому регістрі. Для однаковості в цій книзі більшість тегів записується великими літерами.

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

Теги, які потребують відповідних завершальних тегах, називаються тегаи-контейнери. Все, що записано між відповідним відкриваючим і закриваючим тегом, називається вмісту тега-контейнера. Іноді завершальний тег можна опускати. Наприклад, для тега, що описує дані для комірки таблиці <TD>, відповідний закриваючий тег </TD> завжди можна опускати. Закінчення даних для комірки таблиці буде розпізнано по появі чергового тега <TD> або тега закінчення рядка таблиці </TR>.

Є ряд тегів, для яких завершальні теги опускаються більшістю авторів документів. Прикладом може служити тег елемент списку <LI> тег абзацу <P>. Сучасні браузери в багатьох випадках правильно форматують документи, якщо опущені деякі завершальні теги, однак така практика не може бути рекомендована.

Ряд тегів в принципі не потребує завершальних тегах. Прикладами можуть служити тег вставки зображення <IMG>, примусового переведення рядка <BR>, вказівки базового шрифту < BASEFONT > і ін. Часто з самого призначення тега можна здогадатися, чи потребує він у завершальному.

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

Теги записуватися з параметрами або атрибутами (від англ., attribute). Набори допустимих параметрів індивідуальні для кожного тега. Загальні правила запису параметрів полягають у наступному. Після імені тега можуть слідувати параметри, які відокремлюються один від одного пробілами. Порядок проходження параметрів тега довільний. Багато параметри вимагають вказівки їх значень, проте деякі параметри не мають значення або можуть записуватися без них, приймаючи значення за замовчуванням. Якщо параметр вимагає значення, то воно вказується після назви параметра через знак рівності. Значення параметра може записуватися в лапках, так і без них. Єдиним випадком, в якому без лапок не обійтися, є випадок, коли в значенні параметра є прогалини. В значеннях параметрів (на відміну від назв тегів і самих параметрів) іноді важливий регістр запису. Наведемо приклад запису тега з параметрами:

<TABLE BORDER ALIGN="left">

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

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

Всі теги, які допустимо використовувати в розділі <BODY> документа HTML, можуть мати параметри CLASS, ID, LANG, LANGUAGE, STYLE і TITLE. Використання цих параметрів корисно, перш за все, при стильовому оформленні документів, мова про який піде в другій частині книги.

Параметри CLASS, ID STYLE підтримуються Internet Explorer, починаючи з версії 3.0, і Netscape, починаючи з версії 4.0. Ці параметри потрібні при використанні стилів.

Параметри LANG, LANGUAGE, TITLE — підтримуються тільки Internet Explorer, починаючи з версії 4.0. Ці параметри вказують, відповідно, використовуваний мову (наприклад, для Росії: LANG=ru), мова запису скриптів (наприклад, LANGUAGE=JavaScript), а також текст підказки, яка видається при наведенні покажчика миші на даний елемент (TITLE).

У сучасному HTML, крім тегів мови та їх вмісту, в початковому HTML-коді також записуються коди сценаріїв javascript або VBScript). У першій частині книги про це практично ніде не згадується, натомість частина друга цілком присвячена питанням використання сценаріїв.

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

1.2 Історія розвитку HTML

Перша версія HTML була розроблена в 1989 році Тімом Бенерс-для популярного в минулому браузера Mosaic. Але в той час ні мови, ні для браузера не знайшлося гідного застосування. В 1993 році з'явився HTML+, і ця версія також залишилася практично непоміченою. Початок широкого використання гіпертексту дала версія 2.0, яка з'явилася в червні 1994 року. Це був рік зростання популярності WWW по всьому світу. Елементи, включені у версію 2, в більшості своїй використовуються донині.

У версії 3.0 HTML, яка з'явилася рік тому, була реалізована можливість промальовування математичних символів (знаків інтервалу, нескінченності, дробу, дужок тощо) за допомогою елементів мови. Під цю версію був розроблений браузер Arena. Але цей проект виявився тупиковим і не отримав подальшого поширення.

У 1996 році з'явився HTML 3.2. Це було новаторське рішення, в специфікацію мови були введені фрейми, які стали тепер дуже популярні у розробників WEB-сторінок. Навіть зараз на основі цієї специфікації можна реалізувати цікаві дизайнерські рішення. Практично всі сучасні браузери підтримують версію 3.2, тому автори WEB-сторінок впевнені в працездатності всіх елементів.

Поряд з офіційними специфікаціями мови, які розроблялися організацією W3C (W3 Консорціум),компанії-виробники браузерів створювали власні елементи (розширення). Згодом, деякі з цих елементів, після отримання загального визнання включилися в специфікацію наступних версій мови. Але новаторське рішення – фрейми, не були включені в специфікацію 3.2. Але браузери підтримували фрейми і багато книги, присвячені HTML, містили опис фреймів без згадки про те, що це нестандартні елементи. Надалі, фрейми стали стандартом де-факто. У версії 4 вони вже були включені на повну підставі.

І навпаки, елементи APPLET та SCRIPT, необхідні для розширення HTML іншими програмними кодами версії 3.2, не відіграють тієї ролі, яку були покликані зіграти. Це пояснюється тим, що браузери різних версій по-різному інтерпретували програми на різних мовах JAVA, JAVASCKRIPT, Visual Basic, VBScript). В результаті не вдалося отримати достатньо надійний працюючий код, і дані мови використовувалися любителями HTML в основному для експериментів.

Офіційна специфікація HTML 4 (Dynamic HTML) з'явилася в 1997 році. У цей час вже було очевидно, що подальший розвиток гіпертексту буде здійснюватися за рахунок скрипт - програмування. Це виявилося набагато більш ефективним, ніж вводити в мову нові елементи. З'явилися в той час браузери (Netscape Navigator 4, Microsoft Internet Explorer 4 і ін) вже досить надійно інтерпретували програмний код був встановлений певний рівень стандартизації). Однак проблеми у розробників ще залишилися. В якості прикладу можна зазначити, що багато скрипти починаються з визначення версії браузера, щоб потім використовувати той чи інший фрагмент коду. Очевидно, що на програміста лягає обов'язок тестування сторінок на всіх популярних у справжні час браузерах.

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

1.3 ОСНОВНІ ЕЛЕМЕНТИ МОВИ HTMl

<HTML></html>

Означає документ на мові HTML. Даний елемент є самим зовнішнім, так як між його початковим і ліжковим тегами повинна знаходиться вся WEB – сторінка. В принципі цей елемент. Він має атрибути version, long і dir, якими в даному випадку рідко хто користується, і допускає вкладення елементів HEAD, BODY і інших, що визначає загальну структуру WEB-сторінки. Кінцевим тегом </html> закінчуються всі документи у форматі HTML.

<HEAD></head>

Область заголовка Web – сторінки, її перша частина. HEAD служить тільки для формування загальної структури документа. Цей елемент може мати атрибути IANG, DIR, повинен включати елемент TITLE і допускає вкладення елементів BASE, META, LINK, OBJECT, SCARIPT, STULE.

<TITLE></title>

Елемент для розміщення заголовка Web – сторінки. Рядок тексту, розташованого всередині цього елемента, відображається не в документі, а в заголовку вікна браузера. Цей рядок часто використовується при організації пошуку в WWW. Цей рядок повинен досить точно відображати призначення документа.

<STYLE></style>

Елемент для опису стилю деяких елементів Web – сторінки. У файлі Strukt. Htm шрифти призначені для елементів h2, code. Для кожного елемента існує стильове оформлення за замовчуванням, тому вживання елемента style не обов'язково, але бажано. Цей елемент введений порівняно недавно, без нього немислима робота в додатках World, Excel.

<META>

Елемент містить службову інформацію, яка не відображається при перегляді Web - сторінки. Всередині нього немає тексту у звичайному розумінні, тому немає і кінцевого тега. Кожен елемент Meta містить два основних атрибута, перший з яких визначає тип даних, а другий – зміст. Ось кілька прикладів meta – даних:

Дата, що позначає термін придатності документа:
Name – "Expires" content = "Дата"
Адреса електронної пошти:
Name = "Reply – to" content = " Ім'я @ Адресу "
Ім'я автора Web-сторінки:
Name = "Author" content = "Ім'я автора"
Набір ключових слів для пошуку:
Name = "Keywords" content = "1 слово, слово 2, 3 слово..."
Короткий опис змісту Web - сторінки:
Name = "Description" content = "Вміст сторінки
Опис типу і характеристик Web – сторінки:
Name = "Content – Type" content = "Опис сторінки"
Вказівка додатка, в якому була створена Web – сторінка:
Name = "Generator" content = "Назва HTML – редактора"

Атрибут Name використовується додатком – клієнтом для отримання додаткової інформації про Web – сторінках і їх впорядкування. Його часто замінюють атрибутом http – equiv. Він використовується сервером для створення додаткових полів при виконанні запиту.

Елемент META може містити URL. Шаблон атрибута такий:

URL = "http: // адреса"

<BODY></body>

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

Атрибут, що визначає фон сторінки, є одним з найбільш важливих для дизайну.

background = "Шлях до файлу"

Більш просте оформлення фону зводиться до завдання його кольори:

bgcolor = "#RRGGBB"

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

Оскільки фон станиці може змінюватися, необхідно мати можливість підбирати відповідний колір тексту. Для цього є наступною атрибут:
text = "#RRGGBB"

Для завдання кольору тексту, гіперпосилань використовуються наступні атрибути:
link = "#RRGGBB"

Точно так само можна задати колір для відвіданих гіперпосилань:
vlink = "#RRGGBB"

Можна також вказати зміна кольору для останньої вибраний користувачем гіперпосилання:

Alink = "#RRGGBB"
<!-- Коментар --!>

У будь-якій мові програмування є конструкції, що дозволяють створювати довільні ремарки. HTML у цьому сенсі – не виняток. Текст, введений всередині цього елемента, ігнорується браузером. Ці елементи можуть розташовуватися в будь-якому місці WEB-сторінки. Ознакою коментаря служить знак оклику, а текст коментаря повинен обрамляться подвійним дефісом. Наприклад: <!-- Коментар --!>

<H1><h1>

Елемент заголовка. Існує шість рівнів заголовків, які позначаються H1...H6. Заголовок 1-го рівня самий великий, а рівень 6 забезпечує найменший заголовок. Для заголовків можуть використовувати атрибути, що задають вирівнювання вліво, по центру або праворуч:

align = "left"

align = "center"

align = "right"
<HR>

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

По-друге, тому що вибір подібних елементів оформлення у автора сторінки дуже невеликий. Цей елемент не має кінцевого тега, але допускає ряд атрибутів для вирівнювання вліво, по центру, вправо, по ширині:

align = "left"

align = "center"

align = "right"

align = "justify"

Можна задати товщину лінії:

Size = товщина в пікселях

Можна керувати довжиною лінії:

width = довжина в пікселях

width = довжина у відсотках
Можна вибрати колір:

color = "колір"

<A></a>

HTML-документ може бути дуже великим, і в цьому випадку потрібно мати можливість швидкого переходу до потрібного розділу документа. Для цього можна використати механізм гіперпосилань. Необхідно також в потрібних місцях тексту розставити відповідні мітки. Шаблон для створення міток такий: <A name = “>Довільний текст</a>

В даному випадку даної рядку документа присвоюється ім'я, і, отже, в іншій частині документа або навіть на іншому документі може бути створена гіперпосилання, що приводить в цю точку. Для переходу всередині документа можна використовувати наступну конструкцію:

<P>перейти до <A href = "#мітка">мітці</a></p>

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

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

Ви зрозуміли, що:

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

мишачий курсор на посилання змінює свою форму і перетворюється на перст;

для переходу за посиланням необхідно клацнути по ній мишкою;
для повернення із заслання необхідно використовувати навігаційну кнопку браузера "Назад" ("Back").

Якщо посилання утворюють вкладену ланцюжок, то кнопки Назад (Back) і Вперед("Forward") можна використовувати для руху по пройденому посилального шляху в обидва боки. Вони працюють як традиційні операції "відкочування" і "накатка" в більшості прикладних програм.

У наведеному нижче прикладі використовується ланцюжок вкладених посилань. Здійсніть невелику подорож. Спочатку, клацнувши посилання, дістаньтеся до тексту, в якому вже немає посилань. Потім, користуючись навігаційними кнопками браузера, "пройдіться" по пройденому шляху вперед і назад.

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

1.4 ГРУПИ ТЕГІВ HTML

Права кутова закриваючі теги НТМL за їх призначенням і області дії можна разділити на наступні основні групи:

· визначають структуру документа;

· оформлення блоків гіпертексту (параграфи, списки, таблиці,
картинки);

· гіпертекстові посилання та закладки;

· форми для організації діалогу;

· виклик програм.

Структура гіпертекстової мережі задається гіпертекстовими посиланнями. Гіпертекстова посилання — це адреса іншого HTML-документа або інформаційного ресурсу Internet, який тематично, логічно або яким-небудь іншим способом пов'язаний із документом, у якому посилання визначена. Природно, при таких умовах дуже важлива схема адресації усіх наявних інформаційних ресурсів. Реальний механізм інтерпретації ідентифікатора ресурсу, спирається на URI (Uniform Resource Identifier, універсальний ідентифікатор ресурсу), називається URL, і користувачі WWW мають справу саме з ним. Типовим прикладом використання такого запису можна вважати наступний приклад: Цей текст містить:

<A HREF="http://www.intuit.ru/help/index.html"> гіпертекстову посилання</A>

Це буде виглядати наступним чином:(відкрити) У наведеному вище прикладі тег "A", який в HTML називають якір (anchor), використовує атрибут HREF, що позначає гіпертекстову посилання (Hypertext Reference), для запису посилання в формі URL. Дана посилання вказує на документ з ім'ям "index.html" в каталозі "help" сервері "www.intuit.ru", доступ до якого здійснюється за протоколуНТТР. Гіпертекстові посилання в HTML діляться на два класу: контекстні гіпертекстові посилання і загальні. Контекстні посилання вмонтовані в тіло документа, як це було показано в попередньому прикладі, то час як загальні посилання пов'язані з усім документом у цілому і можуть використовуватися при перегляді будь-якого фрагмента документа. Обидва классу посилань спочатку присутні в стандарті мови, проте перший час найбільшою популярністю користувалися контекстні посилання. Ця популярність призвела до того, що механізм використання загальних посилань практично повністю "атрофувався". У даному прикладі ми уклали URL в подвійні лапки. Насправді, це необов'язково. Лапки (подвійні або одинарні) застосовуються тільки тоді, коли всередині значення URL з'являються символи-роздільники (пробіл, табуляція, невидимі символи). Але такого сорту URL слід всіляко уникати. Структура HTML-документа дозволяє задіяти вкладені один в одного контейнери. Власне, сам документ — це один великий контейнер, який починається з тега <HTML> і закінчується тегом </HTML>.

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

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

Розділ заголовка відкривається тегом <HEAD>. Зазвичай цей тег слід відразу ж за тегом <HTML>. Закриваючий тег </HEAD> показує кінець цього розділу. Між цими тегами розташовуються інші теги розділу заголовка.

Дата добавления: 2015-07-11