КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Впорядковані списки
|
|
|
|
Створення списків в HTML
Списки є важливим засобом структуризації тексту і застосовуються в усіх мовах розмітки. У НТМL є наступні види списків: ненумерований список(неврегульований) (Unordered Lists <UL>), нумерований список(впорядкований) (Ordered Lists <OL>) і список визначень. Теги для ненумерованих і нумерованих списків — це основа HTML. HTML 3.2 додає декілька атрибутів до тегів списків для вибору різних типів маркерів в ненумерованих списках і різних схем нумерації в нумерованих. Можна включати такі атрибути і в самі теги елементів списку(List Item <LI>), щоб змінити тип маркера в середині списку. Після появи нового атрибуту усі подальші маркери в списку матимуть такий же вигляд.
Ненумеровані списки
Неврегульований список є списком елементів. Елементи списку маркіруються за допомогою спеціальних знаків(зазвичай невеликий чорний круг).
Неврегульований список розпочинається з тега <ul>. Кожен елемент списку розпочинається з тега <li>.
<html>
<body>
<h4>Ненумерований список:</h4>
<ul>
<li>елемент 1</li>
<li>елемент 2</li>
<li>елемент 3</li>
</ul>
</body>
</html>
Приклад виконання цього HTML- коду
Усередині елементу списку можна поміщати параграфи, перенесення рядків, зображення, посилання, інші списки, і так далі
Впорядкований список також є списком елементів. Елементи списку маркіруються за допомогою чисел або букв.
Впорядкований список розпочинається з тега <ol>. Кожен елемент списку розпочинається з тега <li>. У тега <ol> може бути три атрибути: start(визначає перше число, з якого розпочинається нумерація пунктів), reversed — Нумерація в списку стає в зворотному порядку(3,2,1),і type(визначає стиль нумерації пунктів). Може мати значення:
|
|
|
· "A" - заголовні букви A, B, C...
· "a" - рядкові букви a, b, c...
· "I" - великі римські числа I, II, III...
· "i" - маленькі римські числа i, ii, iii...
· "1" - арабські числа 1, 2, 3...
◦
<html>
<body>
<h4>Впорядкований список:</h4>
<ol>
<li>елемент 1</li>
<li>елемент 2</li>
<li>елемент 3</li>
</ol>
</body>
</html>
Приклад виконання цього HTML- коду
Усередині елементу списку можна поміщати параграфи, перенесення рядків, зображення, посилання, інші списки, і так далі
Списки визначень
Список визначень не є списком елементів. Це список термінів і визначень термінів.
Список визначень розпочинається з тега <dl>. Кожен термін списку визначень розпочинається з тега <dt>. Кожне визначення списку розпочинається з тега <dd>.
<html>
<body>
<dl>
<dt>елемент 1</dt>
<dd>опис елементу 1</dd>
<dt>елемент 2</dt>
<dd>опис елементу 2</dd>
</dl>
</body>
</html>
Приклад виконання цього HTML- коду
Усередині визначення списку визначень(тег <dd>) можна поміщати параграфи, перенесення рядків, зображення, посилання, інші списки, і так далі
Додаткові приклади
Різні типи впорядкованих списків
<html>
<body>
<h4>Список проектів з цифрами:</h4>
<ol>
<li>intuit.ru</li>
<li>osp.ru</li>
<li>file.ru</li>
</ol>
<h4>Список з буквами:</h4>
<ol type="A">
<li>intuit.ru</li>
<li>osp.ru</li>
<li>file.ru</li>
</ol>
<h4>Список з буквами нижнього регістра:</h4>
<ol type="a">
<li>intuit.ru</li>
<li>osp.ru</li>
<li>file.ru</li>
</ol>
<h4>Список з римськими цифрами:</h4>
<ol type="I">
<li>intuit.ru</li>
<li>osp.ru</li>
<li>file.ru</li>
</ol>
<h4>Список з римськими цифрами в нижньому регістрі:</h4>
<ol type="i">
<li>intuit.ru</li>
<li>osp.ru</li>
<li>file.ru</li>
</ol>
|
|
|
</body>
</html>
Приклад виконання цього HTML- коду
Різні типи неврегульованих списків
<html>
<body>
<h4>Список зі значком кругом:</h4>
<ul type="disc">
<li>intuit.ru</li>
<li>osp.ru</li>
<li>file.ru</li>
</ul>
<h4>Список зі значком колом:</h4>
<ul type="circle">
<li>intuit.ru</li>
<li>osp.ru</li>
<li>file.ru</li>
</ul>
<h4>Список зі значком квадратом:</h4>
<ul type="square">
<li>intuit.ru</li>
<li>osp.ru</li>
<li>file.ru</li>
</ul>
</body>
</html>
Приклад виконання цього HTML- коду
Вкладений список
<html>
<body>
<h4>Вкладений список:</h4>
<ul>
<li>елемент 1</li>
<li>елемент 2</li>
<ul>
<li>елемент 2.1</li>
<li>елемент 2.2</li>
</ul>
<li>елемент 3</li>
</ul>
</body>
</html>
<html>
<body>
<h4>Вкладений список:</h4>
<ul>
<li>елемент 1</li>
<li>елемент 2</li>
<ul>
<li>елемент 2.1</li>
<li>елемент 2.2</li>
<ul>
<li>елемент 2.2.1</li>
<li>елемент 2.2.2</li>
</ul>
</li>
</ul>
</li>
<li>елемент 3</li>
</ul>
</body>
</html>
Приклад виконання цього HTML- коду
Список визначень
<html>
<body>
<h4>Список визначень:</h4>
<dl>
<dt>елемент 1</dt>
<dd>опис елементу 1</dd>
<dt>елемент 2</dt>
<dd>опис елементу 2</dd>
</dl>
</body>
</html>
Приклад виконання цього HTML- коду
Теги списків
| Тег | Опис |
| <ol> | Визначає впорядкований список |
| <ul> | Визначає неврегульований список |
| <li> | Визначає елемент списку |
| <dl> | Визначає список визначень |
| <dt> | Визначає термін визначення |
| <dd> | Визначає опис визначення |
| <dir> | Не рекомендується. Використайте замість цього <ul> |
| <menu> | Не рекомендується. Використайте замість цього <ul> |
Гіперпосилання
Посилання встановлюється за допомогою тега, що «закривається» <a>, у якого є 12 атрибутів:
o accesskey — активує посилання за допомогою комбінації клавіш.
o charset - вказує кодування тексту, на який веде посилання. *
o coords — встановлює координати активної області. *
o href - задає адресу документу, на який слід перейти.
o hreflang — ідентифікує мову тексту по посиланню.
o name — встановлює ім'я якоря усередині документу(у HTML5 слід використати id). *
|
|
|
o rel — стосунки між засиланим і поточним документами.
o rev — стосунки між поточним і засиланим документами. *
o shape — задає форму активної області посилання для зображень. *
o tabindex — визначає послідовність переходу між посиланнями при натисненні на кнопку <Tab>.
o target - тип вікна, в якому браузер завантажуватиме документ. Може набувати значень
_blank — завантажує сторінку в новому вікні браузеру.
_self — завантажує сторінку в поточному вікні(значення за умовчанням).
_parent — завантажує сторінку у фреймі-батьку, якщо фреймів немає, то цей параметр працює як _ self.
_top — відміняє усі фрейми і завантажує сторінку в повному вікні браузеру, якщо фреймів немає, то цей параметр працює як _ self.
o title — додає спливаючу підказку до тексту посилання.
o _____________________________________________________________
o
Атрибут accesskey дозволяє активувати посилання за допомогою деякого поєднання клавіш із заданою в коді посилання буквою або цифрою. Браузери при цьому використовують різні комбінації клавіш. Наприклад, для accesskey="s" працюють наступні поєднання.
Internet Explorer: Alt + S
Chrome: Alt + S
Opera: Shift + Esc, S
Safari: Alt + S
Firefox: Shift + Alt + S
<p><a href="images/pic.jpg" accesskey="x">
Атрибут coords застосовується до посилань, які розташовуються усередині контейнера <object>. Спільно з атрибутом shape створює «гарячу область», яка служить посиланням.
За наявності атрибуту download браузер не переходить по посиланню, а запропонує викачати документ, вказаний в адресі посилання.
Синтаксис
<a download>Посилання</a>
<p><a href="images/Pic.jpg" download>Викачати файл</a>
Атрибут href задає адресу документу, на який слід перейти. Оскільки як адреса посилання може використовуватися документ будь-якого типу, то результат переходу по посиланню залежить від кінцевого файлу. Так, архіви(файли з розширенням zip або rar) зберігатимуться на локальний диск. За умовчанням новий документ завантажується в поточне вікно браузеру, проте цю властивість можна змінити за допомогою атрибуту target.
<p><a href="././example/knob.html">Относительная посилання</a></p>
|
|
|
<p><a href="http://htmlbook.ru/example/knob.html">Абсолютная посилання</a></p>
Атрибут name використовується для визначення якоря усередині сторінки. Спочатку слід задати у відповідному місці закладку і встановити її ім'я за допомогою атрибуту name тега <a>. Ім'я посилання на закладку починається символом #, після чого йде назва закладки. Назва вибирається будь-хто, що відповідає тематиці. Можна також робити посилання на закладку, що знаходиться в іншій веб-сторінці і навіть іншому сайті. Для цього в адресі посилання належить вказати її адресу і у кінці додати символ грат # і ім'я закладки.
Між тегами <a name=...> і </a> текст писати не обов'язково, оскільки вимагається лише вказати місце розташування переходу по посиланню.
Синтаксис
<a name="закладка">...</a>
Атрибут tabindex визначає послідовність переходу між посиланнями при натисненні на кнопку Tab.
<p><a href="1.html" tabindex="1">Посилання 1</a></p>
<p><a href="3.html" tabindex="3">Посилання 3</a></p>
Атрибут target. За умовчанням, при переході по посиланню документ відкривається в поточному вікні або фреймі. При необхідності, ця умова може бути змінена атрибутом target тега <a>.
_blank - Завантажує сторінку в нове вікно браузеру.
_self - Завантажує сторінку в поточне вікно.
_parent - Завантажує сторінку у фрейм-батько, якщо фреймів немає, то це значення працює як _ self.
_top -Відміняє усі фрейми і завантажує сторінку в повному вікні браузеру, якщо фреймів немає, то це значення працює як _ self.
Атрибут title. Додає пояснюючий текст до посилання у вигляді спливаючої підказки. Така підказка відображається, коли курсор миші затримується на посиланні.
<p><a href="zoo.html" title="Рисунки різних тварин і не лише.".>
Рисунки </a></p>
Атрибут type. Встановлює MIME- тип документу, на який вказує посилання. Цей атрибут носить рекомендаційний характер і може використовуватися для стилізації посилань із заданим типом документу. Атрибут type повинен додаватися тільки за наявності атрибуту href.
Для того, щоб вставити зображення використовується тег <img>. Цей тег має єдиний обов'язковий атрибут src, який визначає адресу файлу з картинкою. Якщо необхідно, то рисунок можна зробити посиланням на інший файл, помістивши тег <img> у контейнер <a>. При цьому навколо зображення в деяких браузерах відображається рамка, яку можна прибрати, додавши атрибут border=″0″ в тег <img>. Також зображення можна маштабировать, вказавши в атрибутах width і height, бажаний розмір. Атрибут alt містить опис зображення, яке виводиться до завантаження зображення. Для того, щоб задати позицію зображення(ліворуч, справа, по центру) використовується атрибут align, який може набувати п'ять значень: bottom, left, middle, right, top.
◦bottom — Вирівнювання нижньої межі зображення за навколишнім текстом.
◦left — Вирівнює зображення по лівому краю вікна.
◦middle — Вирівнювання середини зображення по базовій лінії поточного рядка.
◦right — Вирівнює зображення по правому краю вікна.
◦top — Верхня межа зображення вирівнюється по найвищому елементу поточного рядка.
Ось повний список атрибутів тега <img>:
◦align — Визначає як рисунок вирівнюватиметься по краю і спосіб обтікання текстом.
◦alt — Альтернативний текст для зображення.
◦border — Товщина рамки навколо зображення.
◦height — Висота зображення.
◦hspace — Горизонтальний відступ від зображення до навколишнього контенту.
◦ismap — Говорить браузеру, що картинка є серверною картою-зображенням.
◦longdesc — Вказує адреса документу, де міститься анотація до картинки.
◦src — Шлях до графічного файлу.
◦vspace — Вертикальний відступ від зображення до навколишнього контенту.
◦width — Ширина зображення.
◦usemap — Посилання на тег <map>, що містить координати для клієнтської карти-зображення.
А тепер взяглянем на код прикладу розміщення зображення-посилання і маштабированного зображення:
01.<html>
02.<head>
03.<title>Мій перший сайт</title>
04.</head>
05.<body link="#ff9900" vlink="#336699" alink="#ff6699">
06.Привіт всім! А це мій перший сайт. З картинкою посиланням:
07.<a href="#"><img src="emblem - symbolic - link.png" width="16" height="16" border="0" alt="картинка-посилання"></a>
08.<br>
09.А ось це ж зображення без маштабирования: <img src="emblem - symbolic - link.png" border="0" alt="картинка">
10.</body>
11.</html>
А ось безпосередньо сам приклад. Самостійно спробуйте здійснити вирівнювання зображення.
Тег <video>
Додає, відтворює і управляє налаштуваннями відеоролика на веб-сторінку. Шлях до файлу задається через атрибут src або вкладений тег <source>. Список підтримуваних браузерами аудіо і відеокодеків обмежений і приведений в таблицю. 1.
Атрибути
autoplay - Відео починає відтворюватися автоматично після завантаження сторінки.
controls - Додає панель управління до відеоролика.
height - Задає висоту області для відтворення відеоролика.
loop - Повторює відтворення відео з початку після його завершення.
poster - Вказує адреса картинки, яка відображатиметься, поки відео не доступно або не відтворюється.
preload - Використовується для завантаження відео разом із завантаженням веб-сторінки.
src - Вказує шлях до відтворного відеоролика.
width - Задає ширину області для відтворення відеоролика.
|
|
|
|
|
Дата добавления: 2013-12-12; Просмотров: 1669; Нарушение авторских прав?; Мы поможем в написании вашей работы!