
- •Модуль 2: „проектування, розробка та підтримка власних web-ресурсів” Лекція №8.
- •Питання:
- •Правила побудови html-документів.
- •Специфікації html.
- •Структура html-документа.
- •3. Форматування тексту.
- •3.1. Теги рівня блоку і послідовні теги
- •3.2. Теги логічного і фізичного форматування
- •3.3. Використання спеціальних символів.
- •3.4. Посилання на інші документи і файли.
- •3.5.1. Внутрішні посилання.
- •4. Створення списків в html
- •Контрольні питання
- •Рекомендована література
Рекомендована література
Матросов А.В., Сергеев А. О., Чаунин М. П. HTML 4.0. - СПб.: БХВ-Петербург, 2003. - 672 с.: ил.
Джеймса Крис. Эффективный самоучитель по креативному Web-дизайну. HTML, XHTML, CSS, Javascript, PHP, ASP, ActiveX. Текст, графика, звук и анимация. Пер. с англ./Крис Джеймса, Конрад Кинг, Анди Андерсен. – М.: ООО „ДиаСофтЮП”, 2005. – 672 с.
Котеров Д.В. Самоучитель PHP 4. – СПб.: БХВ-Петербург, 2003. – 576 с.: ил.
Додаток 1. Значення параметрів мета-визначників.
<МЕТА NAME="description" CONTENT="стислий опис вмісту вашого сайта">
Ця директива застосовується для полегшення і прискорення процесу індексації вашого ресурсу пошуковими машинами. Наявність цього мета-визначника багато разів збільшує шанси вашого ресурсу потрапити в першу десятку сайтів, які «знайде» пошуковий сервер на вимогу користувача. Зрозуміло, включення в код вашої web-сторінки подібної директиви не гарантує автоматичної індексації сторінки пошуковим сервером.
<МЕТА NAME="keywords" СОNTENT="перелік необхідних ключових слів через кому">
Даний тег містить перелік ключових слів, на які, на вашу думку, повинні «реагувати» пошукові машини, включаючи ваш сайт у файл звіту. Не рекомендується указувати більше тридцяти ключових слів підряд, оскільки багато пошукових серверів мають обмеження на кількість індексованих слів.
Порада. Оскільки ряд пошукових машин не враховує регістр, в якому записані ключові слова, рекомендується указувати в полі CONTENT обидва варіанти їх запису: як у рядковому, так і в заголовному регістрі. Не слід також надмірно розраховувати на абсолютну письменність користувачів Інтернету, і якщо яке-небудь з використовуваних вами ключових слів має декілька можливих варіантів написання, краще використовувати їх всі (наприклад, web-дизайн, webдизайн, вэб-дизайн, веб-дизайн, вэбдизайн, вебдизайн). Гарним тоном вважається указувати в атрибуті CONTENT опис сайту на російській і англійській мовах.
<МЕТА NAME="subject" CONTENT="головна тема сайту, виражена декількома словами">
Даний МЕТА визначник указує на тему, якій присвячена сторінка, що знову-таки важливо для реєстрації сайту деякими пошуковими серверами.
<МЕТА NAME="distribution" CONTENT="Global">
<МЕТА NAME="rating" CONTENT="General">
Ці теги визначають область дії інформації, представленої на вашому сайті.
<МЕТА NAME="title" CONTENT="3aголовок web-сторінки">
<МЕТА NAME="page-topic" CONTENT="3aголовок web-сторінки">
Ці мета-визначники призначені для пошукових машин, що не уміють працювати з тегом <TITLE>. У полі CONTENT даних директив можна скопіювати текстовий вміст, записаний вами в заголовку сторінки.
<МЕТА NAME="site-created" CONTENT="Дата">
Вказаний МЕТА-визначник декларує дату створення web-сайту, яка іноді відображається у файлі звіту деяких пошукових серверів як додаткова інформація про ресурс. Дата записується у форматі МЕСЯЦ-ДЕНЬ-РІК з провідним нулем, наприклад, 04-08-2000.
<МЕТА NAME="expires" CONTENT="Дата">
Передбачувана дата закриття сайту, після якої згадка про нього буде видалена з бази даних пошукового сервера. Дата записується в тому ж форматі, що і дата створення сторінки.
<МЕТА NAME="revisit" CONTENT="N days">
<МЕТА NAME="revisit-after" CONTENT="N days">
Ці теги несуть абсолютно ідентичне функціональне навантаження і указують пошуковому серверу, через скільки днів слід знов звернутися до вашого ресурсу для його переіндексування. Як правило, дані Мета-визначники застосовують, якщо сторінка регулярно оновлюється, причому ці оновлення зачіпають її тематичний зміст, вказаний в інших МЕТА-ТЕГАХ. У такому випадку включенням даної команди в код HTML ви можете уникнути нудної процедури повторної реєстрації свого сайту в пошукових машинах - сервер зробить це автоматично. Замість ключа N в полі CONTENT даної команди підставляється будь-яке ціле число від 1 до 30.
<МЕТА NAME-"robots" CONTENT-"NOINDEX">
Ця директива забороняє пошуковим машинам індексувати дану web-сторінку.
<МЕТА NAME="robots" CONTENT-"NOFOLLOW">
Тег забороняє пошуковому серверу слідувати по гіперпосиланнях, встановлених на даній сторінці.
<МЕТА NAME-"content-language" CONTENT-"мова">
Ця директива декларує мову, на якій представлена опублікована на сайті інформація. У полі CONTENT вноситься назва мови, написана в англійській транскрипції, наприклад «russian» або «english». Слід пам'ятати, що при внесенні посилання на сторінку в бази даних деяких англомовних пошукових серверів згадка про російську мову в даному мета-визначнику може спричинити за собою відмова від реєстрації сайту.
<МЕТА NAME-"audience" CONTENT-"all"> МЕТА-ТЕГ, що визначає аудиторію вашого сайту.
<МЕТА NAME="robots" CONTENT-"Index,all>
Вказівки на правила реєстрації вашого ресурсу пошуковими серверами. Наприклад, при вказівці в полі CONTENT параметра «all» будуть проіндексовані всі документи сайту, при вказівці параметра, «index» - тільки індексні сторінки.
<МЕТА NAME="Copyright" CONTENT=''Ім’я веб-майстра. Copyright 2006">
<МЕТА NAME="Autor" CONTENT='' Ім’я веб-майстра. Copyright 2006">
Декларують посилання на авторські права, що належать розробнику проекту. Ця інформація відображається у файлі звіту деяких пошукових машин.
<МЕТА NAME="reply-to" CONTENT="адреса електронної пошти">
Вказівка на адресу електронної пошти автора проекту. Іноді показується у файлах звіту пошукових серверів.
<МЕТА NAME="Owner" CONTENT ="Назва компанії або ім'я власника">
<МЕТА NAME="Address" CONTENT="Адреса офису">
<МЕТА NAME="Owner-type" CONTENT="corporation, company/small або personal">
Інформація про власника ресурсу. У полі CONTENT першого Мета-визначника заноситься повна назва фірми-власника ресурсу або ім'я власника, якщо він — приватна особа, другий тег містить адресу офісу, по якому можна звернутися за додатковою інформацією, третій указує на тип фірми: corporation — для великих корпорацій, company/small — для малих компаній і, нарешті, personal — для приватних підприємців і фізичних осіб.
<МЕТА NAME="Publisher-name" CONTENT="Назва компанії або ім'я особи, що опублікувала сайт">
<МЕТА NAME="Publisher-type" CONTENT="corporation, company/small або personal">
<МЕТА NAME="Publisher-location" CONTENT="RU">
Для перших двох тегів справедливо все те ж саме, що і для попередніх мета-визначників, за винятком того, що вони містять інформацію не про власника ресурсу, а про те, хто його опублікував. У загальному випадку видавець web-сторінки не обов'язково повинен бути її власником, наприклад, коли яка-небудь фірма замовляє собі сайт у стороннього web-майстра або агентства дизайну. Якраз на таку ситуацію і розраховані дані директиви. У полі CONTENT мета-визначника з ім'ям «Publisher-location» заноситься звичайно позначення домена першого рівня країни видавця сайту або абревіатура US, якщо він знаходиться в США.
<МЕТА NAME="home-url" CONTENT="URL">
Тут вказується адреса ресурсу в мережі Інтернет, який видавець сайту вважає своєю домашньою сторінкою. Звичайно цей тег використовується для представлення URL розробника web-сайту, якщо сам сайт був створений для сторонньої фірми або приватної особи. За вказаним в мета-визначником посиланню потенційні замовники зможуть знайти розробника даного ресурсу.
<МЕТА NAME="Generator" CONTENT="Название программы">
Рідкісний і, мабуть, єдиний у своєму роді приклад абсолютно непотрібний тег, що не несе анінайменшого смислового навантаження. Даний мета-визначник був придуманий розробниками html-редакторів для реклами власних програмних продуктів. Практично всі програми, призначені для верстки web-сторінок, вставляють цей тег в код HTML автоматично, не питаючи дозволу у користувача.
<МЕТА HTTP-EQUIV="Refresh" CONTENT="N; URL=http://www.имя_сайта.ru/сторінка.html">
Включення такого тега в заголовок web-сторінки забезпечить автоматичний перехід браузера за вказаною в полі CONTENT адресою через N секунд. Дана функція, звана «редиректом», або «перенаправленням» призначеного для користувача браузера на який-небудь ресурс, застосовується в основному тоді, коли ваш сайт змінив адресу, перемістився на інший хост. В цьому випадку на сервері із старою адресою розміщується файл index.html, що містить описану вище директиву і що відповідну пояснює напис, наприклад: «Вибачте, наш сайт переїхав за адресою <адреса>. Через декілька секунд дана сторінка буде завантажена автоматично». Іноді така команда застосовується також для автоматичного перемикання користувача із заголовною («splash») на стартову сторінку сервера. Якщо цей мета-визначник записати у вигляді <МЕТА HTTP-EQUIV="Refresh" CONTENT="N">, поточна web-сторінка автоматично перезавантажуватиметься в браузер кожні N секунд.
<МЕТА HTTP-EQUIV="Expires" CONTENT="Tue. 02 Jan 1996 01:00:00 GMT">
Визначає дату «застарівання» сторінки для протоколу HTTP. Часто в даній директиві указують свідомо застарілу дату: такий підхід дозволяє уникнути кешування документа на диск.
ПРИМІТКА Більшість браузерів зберігають завантажувані з Інтернету html-документи в спеціальну папку на жорсткому диску призначеного для користувача комп'ютера і при повторному зверненні до сайту відкривають цю web-сторінку вже з вінчестера, що дозволяє значно скоротити час її читання. Дана процедура називається «кешуванням». Уникнути небажаного кешування можна вказаним вище способом.
<МЕТА HTTP-EQUIV="Content-type" CONTENT="text/html; charset=KOI8-R">
За допомогою цього тега здійснюється жорстка установка призначеного для користувача кодування сторінки. Зустрівши в заголовку документа таку команду, призначений для користувача браузер автоматично перемикається на задану в теге кодування.
<META HTTP-EQUIV="set-cookie" Content="name=value; expires=дата; DOMAIN=имя_хоста; PATH=путь; secure">
Команда установки Cookies, де
name – ім'я, закріплене . Cookie;
expires - задає час життя нашого Cookie. Точніше, Cookie самознищуватиметься, як тільки наступить вказана дата. Наприклад, якщо задати expires=Friday,3i-Dec-99 23:59:59 GMT, то "печиво" "житиме" тільки до 31 грудня 1999 року.
domain – задає ім'я хоста, з якого встановили Cookie;
path – задається каталог (точніше за URI), в якому розташований сценарій, що встановив Cookie;
secure – зв'язаний з використанням захищеного протоколу HTTPS.
Cookies - це невелика іменована порція інформації, яка зберігається в каталозі браузера користувача (а не на сервері!), але яку сервер (а точніше, сценарій) вільний у будь-який момент змінити. До речі, сценарій також одержує усі Cookies, які збережені на видаленому комп'ютері, при кожному своєму запуску, так що він може у будь-який момент часу дізнатися, що ж там у користувача встановлено.
Найзручнішим в Cookies є те, що вони можуть зберігатися тижні і роки до тих пір, поки їх не відновить сервер чи ж поки не закінчиться термін їх життя (який теж призначається сценарієм при створенні Cookie). Таким чином, ми можемо мати Cookies, які "живуть" всього декілька хвилин (або до того моменту, поки не закриють браузер), а можемо - "довгожителів".
Додаток 2. Параметри тега <BODY>
Параметр |
Призначення |
ALINK |
Визначає колір активного посилання |
BACKGROUND |
Указує на URL-адресу зображення, яке використовується як фонове |
BOTTOMMARGIN |
Встановлює межу нижнього поля документа в пікселах (тільки IE починаючи з версії 4.0) |
BGCOLOR |
Визначає колір фону документа |
BGPROPERTIES |
Якщо встановлено значення FIXED, фонове зображення не прокручується (тільки IE) |
LEFTMARGIN |
Встановлює межу лівого поля документа в пікселах (тільки IE починаючи з версії 4.0) |
LINK |
Визначає колір ще не переглянутого посилання |
RIGHTMARGIN |
Встановлює межу правого поля документа в пікселах (тільки IE починаючи з версії 4.0) |
SCROLL |
Встановлює наявність або відсутність смуг прокрутки вікна браузера (тільки IE починаючи з версії 4.0) |
TEXT |
Визначає колір тексту |
TOPMARGIN |
Встановлює межу верхнього поля документа в пікселах (тільки IE починаючи з версії 4.0) |
VLINK |
Визначає колір вже переглянутого посилання |
Додаток 3. Теги логічного форматування тексту.
<ABBR> |
Тег <ABBR> відзначає свій текст як абревіатуру (ABBReviation). |
<ACRONYM> |
Використовується для відмітки абревіатур. Цим тегом рекомендується відзначати так звані акроніми, тобто вимовні слова, що складаються з абревіатур. Тег <ACRONYM> можливо в майбутньому стане використовуватися для невізуального відображення елементів, наприклад при мовному синтезі. |
<CITE> |
Тег <CITE> використовується для відмітки цитат або назв книг і статей, посилань на інші джерела і т.д. Браузерами такий текст звичайно виводиться курсивом. |
<CODE> |
Відзначає свій текст як невеликий фрагмент програмного коду. Як правило, відображається моноширинним шрифтом. Якщо усередині тега розташовано декілька підряд пропусків, що йдуть, – вони відображатимуться як один. |
<DEL> |
Тег <DEL> відзначає свій текст як видалений. Цей елемент корисно використовувати для відмітки змін, що вносяться в документ від версії до версії. |
<DFN> |
Відзначає свій текстовий фрагмент як визначення (DeFinitioN) |
<INS> |
Відзначає свій текст як вставку (INSertion) |
<EM> |
(EMphasis - виділення, підкреслення) використовується для виділення важливих фрагментів тексту |
<KBD> |
Відзначає текст як що вводиться користувачем з клавіатури |
<Q> |
Відзначає короткі цитати в рядку тексту |
<SAMP> |
Відзначає текст як зразок (SAMPLE) |
<STRONG> |
Використовується для виділення важливих фрагментів тексту. |
<VAR> |
Відзначає імена змінних програм. |
Додаток 4. Теги фізичного форматування тексту.
Тег |
Значення |
<I>..</I> |
Курсив (Italic) |
<B>...</B> |
Посилення (Вold) |
<ТТ>...</TТ> |
Телетайп |
<U>...</U> |
Підкреслення |
<S>...</S> |
Перекреслений текст |
<BIG>...</BIG> |
Збільшений розмір шрифту |
<SMALL>...</SMALL> |
Зменшений розмір шрифту |
<SUB>...</SUB> |
Підрядкові символи |
<SUP>...</SUР> |
Надрядкові символи |
<BLINK> |
Мерехтіння тексту (тільки NN) |
<SPAN> |
Використовується коли потрібно відзначити фрагмент тексту для завдання йому властивостей. |
<FONT> |
Указує параметри шрифту |
<BASEFONT> |
Задає колір і тип шрифту, використовуваного за умовчанням |
Інші теги форматування HTML документа.
<P> |
Тег розділення на абзаци. Браузери відокремлюють абзаци один від одного порожнім рядком |
<BR> |
Новий рядок |
<NOBR> |
Заборонити перенесення слів (потрібно укласти текст в контейнер <NOBR>..</NOBR>) |
<H1>-<H6> |
Заголовки окремих частин документа (з першого до шостого рівня) |
<HR> |
Горизонтальні лінії. |
<PRE> |
Преформатований текст |
<DIV> |
Виділення блоку (фрагмента) документа. Використовується спільно із стилями. |
<CENTER> |
Горизонтальне вирівнювання елементів (але краще використовувати стиль) |
<!-- --> |
HTML-коментар |
<BLOCKQUOTE> |
Включення довгої цитати. |
<ADDRESS> |
Застосовується для ідентифікації автора документа і для вказівки адреси автора. |