Додаткові можливості HTML

Додаткові можливості

Дейв Регетт , 29 серпня 2000 р

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

• використовувати примусові переноси рядків
• використовувати нерозривні прогалини
• використовувати коди для спеціальних символів
• створювати посилання на фрагменти тексту
• використовувати заздалегідь відформатований текст
• розміщувати текст навколо зображень
• визначати в зображеннях округу посилань
• створювати таблиці
• використовувати roll-overs також інші прийоми

ps Для підтримки розпорядку в розмітці рекомендую використовувати HTML Tidy .

Примусові розриви рядків

Іноді Вам можуть знадобитися примусові розриви рядків. Це робиться за допомогою елементи br. Наприклад, Ви хочете включити поштову адресу:

 <P> The Willows <br>
 21 Runnymede Avenue <br>
 Morton-in-the-marsh <br>
 Oxfordshire OX27 3BQ </ p>

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

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

Браузери автоматично розбивають текст, щоб він відповідав полях. Розриви рядків виробляються в місцях прогалин. Інколи виникає потреба обмежити розрив рядка між певними словами. Наприклад, між словами назви фірми - "Coke Cola". Для цього замість пробілу слід використовувати комбінацію символів & nbsp; , Наприклад:

 Підсолоджені газовані напої типу Coke & nbsp; Cola стали популярні у всьому всесвіті.

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

Коди спеціальних символів

Для позначень авторських прав або торгових марок зручно використовувати відповідні знаки:

Зверніть увагу, що в HTML 4.0 для позначення торгової марки визначається комбінація & trade ;, але вона ніяк не так широко підтримується, як & # 8482;

Інші корисні комбінації:

Крім того, існують комбінації для символів з діакритичними знаками також різних інших символів набору Latin-1:

Для грецьких також математичних символів, визначених в Unicode, дозволено використовувати числові посилання. Більш детально це обговорюється в специфікації HTML 4. Зверніть увагу, що імена комбінацій ніяк не розпізнає в Navigator 4, тому рекомендується використовувати числові посилання.

Посилання на фрагменти Web-сторінок

Уявіть собі, що Ви написали довгу Web-сторінку зі змістом на початку. Як зробити пункти змісту посиланнями на відповідні розділи?

Припустимо, що кожен розділ починається з заголовка, наприклад:

 <H2> Local Night Spots </ h2>

Зробити заголовок метою гіпертекстового посилання можна, використовуючи наступний код: lt; a name = ідентифікатор> .... </a>

 <H2> <a name="night-spots"> Local Night Spots </a> </ h2>

Атрибут name визначає ім'я, яке використовується для ідентифікації цілі посилання, в даному випадку: "night-spots". В сутність нині дозволено включити наступне посилання:

 <Ul>
  ...
  <Li> <a href="#night-spots"> Local Night Spots </a> </ li>
  ...
 </ Ul>

Символ # перед ім'ям мети обов'язковий. Якщо мішень посилання знаходиться в приятелем акті, помістіть web-адресу цього акта перед символом #. Наприклад, якщо акт розташований за адресою "http://www.bath.co.uk/", посилання повинне існувати такий:

 <a href="http://www.bath.co.uk/#night-spots"> Local Night Spots </a>

У майбутньому з'явиться можливість визначення цілей посилань без елемента <a>. Новоспечений метод значно простіше, оскільки потрібно стане всього лише тільки додати в заголовок властивість id, наприклад:

 <H2 id = "night-spots"> Local Night Spots </ h2>

Цей метод не працює для 4-го покоління браузерів або ще більш старих браузерів, тому його слід використовувати обережно!

форматований текст

Одним з переваг Web є автоматичне розбиття тексту на рядки відповідно до поточного розміром вікна. Але іноді починається необхідність уникнути цього. Наприклад, в разі укладення на дисплей коду програми. Це робиться за допомогою елемента pre. наприклад:

 <Pre>
  void Node :: Remove ()
  {
  if (prev)
  prev-> next = next;
  else if (parent)
  parent-> SetContent (null);

  if (next)
  next-> prev = prev;

  parent = null;
  }
 </ Pre>

який видається в наступному вигляді:

  void Node :: Remove ()
  {
  if (prev)
  prev-> next = next;
  else if (parent)
  parent-> SetContent (null);

  if (next)
  next-> prev = prev;

  parent = null;
  }

Кольори тексту також фону встановлюються за допомогою таблиці стилів. Зверніть увагу, що всі розриви рядків також прогалини генеруються точно так же, як вони представлені в коді HTML. Винятком є переклад рядка безпосередньо пізніше початкового тега <pre> також безпосередньо перед кінцевим тегом </ pre>, які ніяк не враховуються. Це означає, що такі пари зразка будуть генеруватися ідентично:

 <Pre> форматований текст </ pre>

 <Pre>
 форматований текст
 </ Pre>

Зазвичай форматований текст генерується з використанням моноширинного шрифту, в якому всі символи мають однакову ширину. Якщо визначити положення стилю для елемента pre, деякі браузери ніяк не використовують моноширинний шрифт, тому слід обов'язково визначити властивість font-family. Наприклад, якщо Ви хочете, щоб всі елементи pre представлялися зеленим кольором, дозволено визначити наступне положення стилю:

 <Style type = "text / css">
  pre {color: green;  background: white;  font-family: monospace;  }
 </ Style>

При установці кольору тексту рекомендується схоже встановити також колір фону. Це гарантує відсутність ситуацій, в який час фарба фону важко відрізнити від кольору тексту. Замість установки кольору фону для елементу pre дозволено встановлювати його для елемента body, наприклад:

 <Style type = "text / css">
  body {color: black;  background: white;  }
  pre {color: green;  font-family: monospace;  }
 </ Style>

Розміщення тексту навколо зображень

В HTML дозволено вибрати, чи стане дане зображення вважатися частиною поточного рядка тексту або стане прикріплено до правого або лівого полю. Це визначається атрибутом align. Якщо для атрибута align встановлено значення left, зображення прикріплюється до лівого полю. Якщо встановлено значення right, - до правого. наприклад:

 <P> <img src = "sun.jpg" alt = "sunburst graphic"
 width = "32" height = "21" align = "left"> Цей текст обтікає зображення праворуч. </ p>

Це стане представлятися так:

Цей текст обтікає зображення праворуч.

Ось як використовується align = "right"

 <P> <img src = "sun.jpg" alt = "sunburst graphic"
 width = "32" height = "21" align = "right"> Цей текст обтікає зображення зліва. </ p>

Це стане представлятися так:

Цей текст обтікає зображення зліва.

Щоб генерація тексту тривала під прикріпленим зображенням, дозволено використовувати елемент <br clear=all>, наприклад:

  <P> <img src = "/ img / site / sun.jpg" alt = "sunburst graphic"
 width = "32" height = "21" align = "right"> Цей текст починається зліва від зображення. 
 <br clear="all">
 Тут починається новий рядок, розташована під прикріпленим зображенням. </ P>

Це стане представлятися так:

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

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

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

Така карта розмічається наступним чином:

 <P align = "center"> <img src = "pages.gif" width = "384" height = "245" alt = "карта сайту" usemap = "# sitemap" border = "0"> <map name = " sitemap "> <area shape =" circle "coords =" 186,44,45 "href =" Overview.html "alt =" Початок роботи "> <area shape =" circle "coords =" 42,171,45 "href =" Style.html "alt =" Трохи стилю "> <area shape =" circle "coords =" 186,171,45 "alt =" Дизайн Web-сторінок "> <area shape =" circle "coords =" 318,173,45 "href = "Advanced.html" alt = "Поглиблений курс HTML"> </ map> </ p> 

Атрибут src елемента img визначає зображення "pages.gif". Атрибут usemap задає посилання на елемент карти. Для цього використовується Web-адреса, тому також використовується символ #. Для атрибута border встановлюється значення "0", щоб навколо зображення ніяк не видавалася синя грань.

Елемент map визначає, які округу зображення будуть прислуговувати посиланнями. Атрибут name відповідає атрибуту usemap елемента img також діє приблизно так само, як властивість name елемента <a>. На практиці елемент map змушений перебувати в тому бла бла файлі, що також елемент img.

Елемент area використовується для визначення округу зображення також зв'язування його з Web-адресою. Атрибут shape визначає форму округу: "rect" (прямокутник), "circle" (коло) або "poly" (багатокутник). Атрибут coords визначає координати округу в залежності від форми.

• rect: координата x лівого ребра, координата y верхнього ребра, координата x правого ребра, координата y лівого ребра
• circle: координата x центру, координата y центру, дляус
• poly: x _1, y _1, x _2, y _2, ... _x n, _y n

Ліва верхня точка вважається витоком зображення, координати x також y її дорівнюють нулю, координата x збільшується за курсом вправо, координата y - вниз. Велика частина коштів для праці з зображеннями дозволяють знаходити координати всякий заданої точки зображення.

Якщо кілька областей перетинаються, пріоритет володіє область, обумовлена ​​першою з пересічних (тобто саме відповідне їй діяння стане виникати при натисканні миші). Для отримання більш складних фігур частка округу дозволено зробити неактивною, перекривши її іншої округом з використанням атрибута nohref, наприклад:

  <Area shape = "circle" coords = "186,44,50" nohref>
  <Area shape = "circle" coords = "186,44,100" 
  href = "Overview.html" alt = "Початок роботи">

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

Чому потрібно використовувати властивість alt

Атрибут alt елемента area використовується для вказівки текстового позначення посилання. Без цього атрибута карта стане недоступна людям, які з якої-небудь приводу ніяк не побачать зображення.

таблиці

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

Таблиці складаються з однієї або декількох рядків осередків. Ось нехитрий приклад:

Ось розмітка для цієї таблиці:

 <Table border = "1">
 <Tr> <th> Рік </ th> <th> Продажі </ th> </ tr>
 <Tr> <td> 2000 </ td> <td> $ 18M </ td> </ tr>
 <Tr> <td> 2001 </ td> <td> $ 25M </ td> </ tr>
 <Tr> <td> 2002 </ td> <td> $ 36M </ td> </ tr>
 </ Table>

Елемент table служить контейнером таблиці. Атрибут border визначає товщину межі в пікселах. Елемент tr служить контейнером рядка таблиці. Елементи th також td служать контейнерами для заголовків також осередків даних відповідно.

Поля в комірці

Збільшити поля у всіх осередках відразу дозволено за допомогою атрибута cellpadding для елемента table. Наприклад, встановимо поля, рівні 10 пикселам:

 <Table border = "1" cellpadding = "10">

це стане виглядати так:

Відстань між осередками

Атрибут cellspacing визначає проміжок між осередками. Встановимо проміжок між осередками рівним 10:

 <Table border = "1" cellpadding = "10" cellspacing = "10">

Таблиця стане виглядати так:

Ширина таблиці

Ширину таблиці дозволено встановити за допомогою атрибута width. Значним його може існувати або ширина в пікселях, або відсоток, що представляє відсоток простору між лівим також правим полями. Наприклад, стає ширину таблиці рівної 80% проміжку між полями:

 <Table border = "1" cellpadding = "10" width = "80%">

Таблиця стане виглядати так:

Вирівнювання тексту в осередках

За замовчуванням браузери згладжують текст в осередках заголовків (th) по центру, проте в осередках даних (td) вліво. Змінити вирівнювання дозволено за допомогою атрибута align, який може застосовуватися до осередку або до рядка (елемент tr). Він може володіти значення "left" (ліворуч), "center" (по центру) або "right" (вправо):

 <Table border = "1" cellpadding = "10" width = "80%">
 <Tr align = "center"> <th> Рік </ th> <th> Продажі </ th> </ tr>
 <Tr align = "center"> <td> 2000 </ td> <td> $ 18M </ td> </ tr>
 <Tr align = "center"> <td> 2001 </ td> <td> $ 25M </ td> </ tr>
 <Tr align = "center"> <td> 2002 </ td> <td> $ 36M </ td> </ tr>
 </ Table>

Таблиця стане виглядати так:

Атрибут valign точно так бла бла визначає вертикальне вирівнювання вмісту осередку. Він використовується зі значеннями "top" (вгору), "middle" (посередині) або "bottom" (вниз) також може використовуватися з будь-осередком або рядком. За умовчанням вміст комірок заголовків (th) центрується, проте вміст комірок даних вирівнюється по лівому полю також по верху осередку.

порожні осередки

Браузери по-різному обробляють порожні клітинки. Порівняйте:

плюс

Останнє виникає, якщо осередок порожня:

 <Td> </ td>

Щоб цього уникнути, помістіть в неї нерозривний пробіл:

 <Td> & nbsp; </ td>

Осередки, що займають кілька рядків або стовпців

Давайте доповнимо попередній зразок, розділивши продажу в північному також південному регіоні:

Тема "Рік" нині займає два рядки, проте заголовок "Продажі" - три стовпці. Це досягається шляхом установки атрибутів rowspan також colspan відповідно. Ось розмітка для цього прикладу:

 <Table border = "1" cellpadding = "10" width = "80%">
 <Tr align = "center"> <th rowspan = "2"> Рік </ th> <th colspan = "3"> Продажі </ th> </ tr>
 <Tr align = "center"> <th> Північ </ th> <th> Південь </ th> <th> Всього </ th> </ tr>
 <Tr align = "center"> <td> 2000 </ td> <td> $ 10M </ td> <td> $ 8M </ td> <td> $ 18M </ td> </ tr>
 <Tr align = "center"> <td> 2001 </ td> <td> $ 14M </ td> <td> $ 11M </ td> <td> $ 25M </ td> </ tr>
 </ Table>

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

 <Table border = "1" cellpadding = "10" width = "80%">
 <Tr align = "center"> <th rowspan = "2"> Рік <th colspan = "3"> Продажі
 <Tr align = "center"> <th> Північ <th> Південь <th> Всього
 <Tr align = "center"> <td> 2000 <td> $ 10M <td> $ 8M <td> $ 18M
 <Tr align = "center"> <td> 2001 <td> $ 14M <td> $ 11M <td> $ 25M
 </ Table>

Зверніть увагу, що, оскільки заголовок "Рік" займає два рядки, головний елемент th у іншому рядку розташовується під одним стовпці, однак ніяк не в першому.

Таблиці без обрамлення

Такі таблиці широко використовуються для форматування сторінок також створення на них сітки. Для цього потрібно тільки додати властивість border = "0" і cellspacing = "0" в елемент table:

Це досягається за допомогою наступної розмітки:

 <Table border = "0" cellspacing = "0" cellpadding = "10">
 <Tr> <th> Рік </ th> <th> Продажі </ th> </ tr>
 <Tr> <td> 2000 </ td> <td> $ 18M </ td> </ tr>
 <Tr> <td> 2001 </ td> <td> $ 25M </ td> </ tr>
 <Tr> <td> 2002 </ td> <td> $ 36M </ td> </ tr>
 </ Table>

Якщо ви ніяк не вкажете властивість cellspacing, між осередками стане пробіл, як показано нижче:

Використання в таблицях квітів

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

 table {
  margin-left: -4%
  font-family: sans-serif;
  background: white;
  border-width: 2;
  border-color: white;
 }
 th {font-family: sans-serif;  background: rgb (204, 204, 153)}
 td {font-family: sans-serif;  background: rgb (255, 255, 153)}

Дві останні рядки встановлюють фарба фону для осередків th також td відповідно до заданих значеннями червоного / зеленого / синього кольорів. Числа повинні лежати в діапазон від 0 до 255 (повністю насичений колір).

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

 <Table border = "0" cellspacing = "0" cellpadding = "10">
  <Tr>
  <Th bgcolor = "# CCCC99"> Рік </ th>
  <Th bgcolor = "# CCCC99"> Продажі </ th>
  </ Tr>
  <Tr>
  <Td bgcolor = "# FFFF66"> 2000 </ td>
  <Td bgcolor = "# FFFF66"> $ 18M </ td>
  </ Tr>
  <Tr>
  <Td bgcolor = "# FFFF66"> 2001 </ td>
  <Td bgcolor = "# FFFF66"> $ 25M </ td>
  </ Tr>
  <Tr>
  <Td bgcolor = "# FFFF66"> 2002 </ td>
  <Td bgcolor = "# FFFF66"> $ 36M </ td>
  </ Tr>
 </ Table>

Доступ до таблиць

Якщо Ви не бачить таблиці, важко усвідомити, про що в ній рухається слово. Має сенс вказати інформацію про призначення також структурі таблиці. Елемент caption дозволяє вказати заголовок також розмістити його над або під таблицею. Елемент caption змушений розташовуватися пізніше елемента tr першого рядка.

Ця таблиця задається наступною розміткою:

 <Table border = "1" cellpadding = "10" width = "80%">
 <Caption> Передбачуваний прихід від продажів за роками </ caption>
 <Tr align = "center">
  <Th> Рік </ th> <th> Продажі </ th>
 </ Tr>
 <Tr align = "center"> <td> 2000 </ td> <td> $ 18M </ td> </ tr>
 <Tr align = "center"> <td> 2001 </ td> <td> $ 25M </ td> </ tr>
 </ Table>

Ось та бла бла сама таблиця, але в елемент caption доданий властивість align = "bottom":

Атрибут summary елемента table слід використовувати для опису структури таблиці для тих, хто ніяк не зможе дану таблицю переглянути. Наприклад: "в головному стовпці дані роки, однак у іншому - прихід за цей рік".

 <Table summary = "в головному стовпці дані роки, однак у іншому - прихід за цей рік">

Визначення відносин між осередками заголовків також даних

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

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

• row: Осередок містить заголовок для залишилася елементи поточної рядків.
• col: Осередок містить заголовок для залишилася елементи поточного стовпця.

Застосуємо це до нашої таблиці:

 <Table border = "1" cellpadding = "10" width = "80%">
 <Caption> Передбачуваний прихід від продажів за роками </ caption>
 <Tr align = "center">
  <Th scope = "col"> Рік </ th>
  <Th scope = "col"> Продажі </ th>
 </ Tr>
 <Tr align = "center"> <td> 2000 </ td> <td> $ 18M </ td> </ tr>
 <Tr align = "center"> <td> 2001 </ td> <td> $ 25M </ td> </ tr>
 </ Table>

Для більш складних таблиць дозволено використовувати властивість headers для окремих осередків даних також вказувати розділений пробілами перелік ідентифікаторів осередків заголовків. Кожна осередок заголовка повинна володіти властивість id з відповідним ідентифікатором.

І врешті-решт, подумайте про використання атрибута abbr для визначення скорочень для довгих заголовків. Це спростить відтворення власних списків заголовків для осередків, наприклад:

 <Th abbr = "W3C"> World Wide Web Consortium </ th>

Roll-Overs також інші прийоми

Невеликий JavaScript може істотно пожвавити сторінки. Нижче показано, як створити "rollovers", в який час зовнішній вигляд посилання змінюється при місці на неї покажчика миші. Крім того, ви дізнаєтеся, як дозволено створити циклічні банери, які допоможуть переадресувати відвідувачів на сайти Ваших спонсорів

Roll-Overs

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

 <Script type = "text / javascript">
 if (document.images)
 {
  image1 = new Image;
  image2 = new Image;
  image1.src = "enter1.gif";
  image2.src = "enter2.gif";
 }

 function chgImg (name, image)
 {
  if (document.images)
  {
  document [name] .src = eval (image + ". src");
  }
 }
 </ Script>

 ...

 <A href = "/" onMouseOver = 'chgImg ( "enter", "image2")'
 onMouseOut = 'chgImg ( "enter", "image1")'> <img name = "enter"
 src = "enter1.gif" border = "0" alt = "Заходьте, якщо ризикнете!"> </a>

і ось як це виглядає ...

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

банери

Якщо Ваш сайт володіє кілька спонсорів, дозволено використовувати циклічну зміну банерів всіх спонсорів по черзі. Попередньо за все слід створити банер для кожного спонсора. Всі зображення повинні існувати одного розміру. Відповідні URL зображень також сайтів потім поміщаються в масиви з іменами adImages також adURLs, певні на початку скрипта. Елемент img для кожного посилання змушений инициализироваться головним зображенням з масиву. Цикл починається з допомогою події onload в елементі body.

 <Html>
 <Head>
 <Title> циклічні банери </ title>
 <Script type = "text / javascript">
 if (document.images)
 {
  adImages = new Array ( "/ img / site / mit.gif",
  "/img/site/inria.gif", "/site/img/keio.gif");
  adURLs = new Array ( "www.lcs.mit.edu",
  "Www.inria.fr", "www.keio.ac.jp");
  thisAd = 0;
 }

 function cycleAds ()
 {
  if (document.images)
  {
  if (document.adBanner.complete)
  {
  if (++ thisAd == adImages.length)
  thisAd = 0;

  document.adBanner.src = adImages [thisAd];
  }
  }

  // Зміна банера кожні 3 секунди
  setTimeout ( "cycleAds ()", 3000);
 }

 function gotoAd ()
 {
  document.location.href = "http: //" + adURLs [thisAd];
 }
 </ Script>
 </ Head>
 <Body onload = "cycleAds ()">
 ...

 <a href="javascript:gotoAd()"> <img name = "adBanner"
 src = "/ img / site / mit.gif" border = "0" alt = "Our sponsors"> </a>

Наші спонсори:

Примітка: рекомендую перевірити, чи істинне все зображення мають однакову висоту також ширину. Можна схоже встановити атрибути width також height для елемента img, щоб забезпечити однаковий розмір всіх зображень.

А що, якщо браузери ніяк не підтримують скрипти?

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

 <Noscript>
 Our sponsors: <a href="/click?http://www.lcs.mit.edu/"> MIT <,
 <a href="/click?http://www.inria.fr/"> INRIA </a>, and
 <a href="/click?http://www.keio.ac.jp/"> Keio University </a>.
 </ Noscript>

Безліч безоплатної інформації про скрипти дозволено знайти в підмогою пошукових машин.