- •Лекція №3
- •Тіло документу складається з:
- •Формати графічних файлів
- •Таблиці
- •Теги для створення таблиць
- •Параметри тегів TR, TH, TD
- •Злиття ячєєк
- •Злиття ячєєк
- •Параметр TARGET
- •Приклади
- •Відносна і абсолютна адресація
- •Атрибути
- •Нові теги структури
- •HTML 5 приклад
- •HTML 5 приклад
- •header
- •Обхід браузерів, що не підтримують HTML 5
- •основного на архів,
- •Відеокодеки
- •Множинні елементи SOURCE
- •API геолокації
- •Література
Приклади
<!-- Використання параметру HREF: -->
<A HREF="ftp://ftp.cdrom.com" TARGET="_blank">FTP-site</A>
<A HREF="http://opengl.rdc.ru"> OpenGL</A>
<!-- Використання параметру NAME: -->
<A NAME="history">Історія</A>
...
<A NAME="now">Новини</A>
...
Повернутися до розділу<A HREF="#history">історії</A>
<!-- Створимо посилання для листа з параметрами -->
<A HREF="mailto:green@igf.ru?subject=Запрошення &cc=bg@microsoft.com&body=Давай к нам на вечірку."> Відправити запрошення </A>.
<!-- або просто лист : -->
<A HREF="mailto:green@igf.ru?subject=Привіт">авторам</A>.
Відносна і абсолютна адресація
•<A HREF=“doc1.htm”>В поточному каталозі</A>
•<A HREF=“subdir/doc1.htm”>В підкаталозі</A>
•<A HREF=“./subdir/doc1.htm”>В підкаталозі</A>
•<A HREF=“../doc1.htm”>В надкаталозі</A>
•<A HREF=“../otherdir/doc1.htm”>
Впаралельному каталозі</A>
•<A HREF=“../../anotherdir/doc1.htm”>
Віншій гілці каталога</A>
•<A HREF=“/dir/doc1.htm”>Від корневого каталогу</A>
•<A HREF=“C:/dir/doc1.htm”>На диску</A>
Атрибути
•style = "опис_стілів" - локальні стилі
•src = "адреса" - адреса (URI) джерела даних (наприклад малюнка або скрипта)
•align = "left | center | right | justify" - вирівнювання, за замовчуванням left (по лівому краю)
•width = "число" - ширина елемента (в пікселях, піках, поинтах та ін)
•height = "число" - висота елемента (в пікселях, піках, поинтах та ін)
•href = "адреса" - гіперпосилання, адресу (URI) на який буде виконаний перехід
•name = "ім'я" - ім'я елемента
•id = "ідентифікатор" - унікальний (в межах веб-сторінки) ідентифікатор елемента
•size = "число" - розмір елемента
•class = "імя_класса" - ім'я класу у вбудованій або пов'язаної таблиці стилів
•title = "рядок" - назва елемента
•alt = "рядок" - альтернативний текст
Нові теги структури
HTML 5 приклад
<!doctype html> <html>
<head>
<title>(Это title) Приклад сторінки на HTML5</title>
<meta charset=utf-8> </head>
<body>
<header>
<hgroup>
<h1>Заголовок "h1" из hgroup</h1>
<h2>Заголовок "h2" из hgroup</h2>
</hgroup>
</header>
<nav>
<a href=link1.html>Перше посилання з блоку "nav"</a><br>
<a href=link2.html>Друге посилання з блоку "nav"</a>
</nav>
HTML 5 приклад
<section>
<article>
<h1>Заголовок статті з блоку "article"</h1> <p>Текст абзаца статті з блоку "article"</p>
<details>
<summary>Блок "details", текст тегу "summary"
</summary>
<p>Абзац з блога "details"</p>
</details>
</article>
<footer>
<time>Зміст тега "time" блоку "footer"
</time>
<p>Зміст абзацу з блока "footer"</p> </footer>
</body>
</html>
<HEADER>, <FOOTER>
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8"> <title>footer</title> </head>
<body>
<header>
<h1>Персональний сайт </h1>
</header>
<article>
<h2>Заходьте, будь ласка!</h2> <p>Вітаємо вас на сайті</p>
</article>
<footer>
Copyright студент
</footer>
</body>
</html>
header
•Визначає елементи, які відносяться до заголовка веб-сторінки в цілому або конкретного розділу на ній. Зазвичай містить елементи заголовків, <h1> <h6>. Але це не обов'язково. <header> може в собі містити практично будь-які інші теги:<div>, <table>, <section> і так далі
Тег <header>
<style>
header { display: block;
background: #00B0D8 url(images/header-gradient.png) repeat-x; } </style>
<header>
<hgroup>
<h1>Заголовок "h1" из hgroup</h1> <h2>Заголовок "h2" из hgroup</h2>
</hgroup>
</header>
Обхід браузерів, що не підтримують HTML 5
Даний приклад працюватиме у всіх браузерах, окрім IE7 і IE8. Internet Explorer не додає стиль до елементів, які не розуміє. Це непорозуміння можна виправити, якщо створити фіктивний елемент за допомогою JavaScript. Для цього включимо в <head> такий код.
<script>
document.createElement("header");
</script>
<article>
Задає вміст сайту на зразок новини, статті, запису блогу, форуму або ін.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <title>article</title> </head>
<body>
<header><h1>Слід</h1></header>
<article> Історія про те, як біля їдальні з'явилися загадкові рожеві сліди з шістьма пальцями і чому це сталося.
</article>
</body>
</html>