Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
web / Лекція №3 (HTML).ppt
Скачиваний:
36
Добавлен:
22.03.2015
Размер:
1.49 Mб
Скачать

Приклади

<!-- Використання параметру 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>

Соседние файлы в папке web