Доброго времени, уважаемые посетители!

В этом уроке хотелось познакомиться с тегами и создать рабочую среду - HTML-документ,- в котором будем кодировать. Итак, приступим.

1) Создаём полигон для испытаний.

В операционной системе нет функции создания документа с html-расширением, поэтому приходится или использовать редакторы, или изменять расширение вручную.

Рассмотрим несколько способов:

1) Без использования дополнительного ПО.

Для этого первоначально создаём пустой текстовый документ. Теперь необходимо включить функцию отображения расширения файла. Для этого следуем в Мой компьютер -->Сервис --> Свойства папки --> Вкладка "Вид". Снимаем галочку с опции "Скрывать расширения для зарегистрированных типов файлов" и жмём "ОК".

Теперь меняем имя файла с name.txt на index.html (где name - произвольное имя файла). Готово.

2) С использованием ПО.

На данный момент существует множество редакторов, которые сразу создают документ с html-расширением. Например, популярный и многофункциональный продукт от компании Adobe - Adobe Dreamweaver.

Так же можно использовать файловые менеджеры, например, Total Commander, который позволяет изменять имя файла вместе с расширением. С рабочей средой мы с Вами определились. Теперь предлагаю приступить к изучению тегов.

2) Изучаем теги. Первая часть.

Преамбулу миновали, теперь переходим, непосредственно, к знакомству с тегами.

!DOCTYPE

Описание: Простым языком говоря, !DOCTYPE даёт понять браузерам с каким языком мы работаем.

Так как HTML существует в нескольких версиях (HTML и XHTML), то стоит использовать данный тег, чтобы браузер правильно интерпретировал написанный нами код.

Примечание: !DOCTYPE необходимо прописывать в самой первой строчке документа!

Стандарты HTML 4.01:

Strict (строгий) - строгий HTML-документ, в котором присутствует лишь HTML-синтаксис.

Пример HTML 4.01 Strict:

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"/>

Transitional (переходный) - пожалуй, самый актуальный стандарт, обеспечивающий лучшую совместимость с браузерами. Так как мы с вами изучаем HTML, то будем использовать именно этот стандарт.

Пример HTML 4.01 Transitional:

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>

Frameset (с фреймами) - HTML-документ, в котором присутствуют фреймы.

Пример HTML 4.01 Frameset:

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"/>

Хотя в наши планы не входит изучение XHTML, но считаю нужным дать вам стандарты XHTML.

Стандарты XHTML 1.0:

Strict (строгий) - строгий XHTML-документ, в котором присутствует лишь XHTML-синтаксис.

Пример XHTML 1.0 Strict:

<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"/>

Transitional (переходный) - пожалуй, самый актуальный стандарт, обеспечивающий лучшую совместимость с браузерами.

Пример XHTML 1.0 Transitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>

Frameset (с фреймами) - XHTML-документ, в котором присутствуют фреймы.

Пример XHTML 1.0 Frameset:

<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"/>

Стандарт XHTML 1.1:

В XHTML 1.1 деления не существует, существует один единый синтаксис.

Пример XHTML 1.1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"/>

Тег !DOCTYPE изучили, теперь наш список продолжает тег для создания ссылок.

A

Описание: Тег создания ссылок. Ссылкой может быть веб-страница или URL.

Атрибуты:

href - страница/URL, на которую(ый) ссылаемся
name - имя якоря
title - текст всплывающей подсказки
target - способ открытия ссылки в браузере(в новом окне и т.д.)

Пример №1:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег А</title>
</head>
<body>
<a href="index.html">Ссылка</a>
</body>
</html>

В данном случае получаем ссылку без всплывающей подсказки, которая ссылается на index.html и будет открываться в том же окне. Если нужно открывать ссылку в новом окне, то используем атрибут target с аргументом _blank. Если атрибут target не указывать, то по умолчанию ссылка будет открываться в текущем окне. Существует 4 параметра атрибута target:

_blank - в новом окне
_self - в текущем окне
_parent - в родительском фрейме. Если фреймы отсутствуют, то загружается в текущем окне.
_top - в полном окне браузера. Если фреймы отсутствуют, то загружается в текущем окне.

Пример №2:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег А</title>
</head>
<body>
<a href="http://selkinvitaly.ru" target="_blank" title="Нажмите для перехода">Личный блог Селькина Виталия</a>
</body>
</html>

В данном случае при переходе по ссылке в новом окне загружается мой сайт, а при наведении и удержании курсора на ссылке появляется всплывающая подсказка.
Теперь я Вам предлагаю рассмотреть атрибут name, который используется при создании якорей.
Преимущественно данный атрибут используют на страницах с обилием контента, а именно когда стоит перенаправить читателя в самое начало страницы.

Смысл состоит в том, что в любой части страницы мы прописываем якорь с определённым именем и потом ссылаемся на него.

Пример №3:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег А</title>
</head>
<body>
<a name="top_page"></a>
здесь множество текста и тд.
<a href="#top_page">К началу</a>
</body>
</html>

Таким образом, читатель после прочтения не будет листать, передвигая scroll, а просто нажмёт на ссылку и вернётся к началу.

ABBR

Описание: Думаю, не трудно догадаться, что данный тег предназначен для аббревиатур и их расшифрований.

Атрибуты:

title - как мы уже знаем, текст всплывающей подсказки, в которой даётся расшифровка.

Пример №1:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег АBBR</title>
</head>
<body>
<abbr title="HyperText Markup Language">HTML</abbr> - гипертекстовый язык разметки.
</body>
</html>

Видим, что сама аббревиатура подчеркивается пунктирной линией.

ACRONYM

Описание: Акроним - это разновидность аббревиатуры, поэтому синтаксис и атрибуты идентичны. Разница лишь в том, что ABBR не поддерживается браузером Internet Explorer до 7 версии включительно, а ACRONYM поддерживается.

Атрибуты:

title - текст всплывающей подсказки, в которой даётся расшифровка.

Пример №1:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег ACRONYM</title>
</head>
<body>
<acronym title="HyperText Markup Language">HTML</acronym> - гипертекстовый язык разметки.
</body>
</html>

Как и в ABBR, аббревиатура подчеркивается пунктирной линией.

ADDRESS

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

Атрибуты: Отсутствуют

Пример №1:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег ADDRESS</title>
</head>
<body>
<address>При создании данного сайта автор не использовал систему управления контентом.</address>.
</body>
</html>

На этом пока остановимся, дорогой читатель, урок и так получился обильным, а в следующем продолжим. Удачного изучения!