SNK Software
Web Studio Монополия Metaproducts Утилиты Игры
Монополию Web Studio Библиотека
Вебмастер Дельфи Работа на ПК Самоучитель
Для PHP Для Delphi
Веб-дизайн Программирование Компьютеры Девайсы Заметки
SNK Software Индустрия hardware Индустрия software
О студии Портфолио Сопровождение сайтов

Новые материалы

Девайсы:
Сравнительный обзор Nokia Lumia 920 и HTC 8X
Девайсы:
Обзор Nokia Lumia 820 – смартфона на WP8
Вебмастеру:
Настройка Apache, PHP и MySQL для Linux-VPS
Вебмастеру:
VPS на домашнем ПК: настройка сети в VM VirtualBox и Debian
Вебмастеру:
VPS на домашнем ПК: устанавливаем Linux Debian 6
Вебмастеру:
VPS на домашнем ПК: установка VM VirtualBox
Работа на компьютере:
Иные возможности текстового процессора Word
Работа на компьютере:
Вставка объектов
Работа на компьютере:
Таблицы в Word
Работа на компьютере:
Печать и сохранение документов
Работа на компьютере:
Сноски, колонтитулы, оглавление и указатели в Word

Первый документ HTML

Определившись с браузерами и редакторами, рассмотрим структуру документа более внимательно. Если у вас установлен LightPad, то щелкните по кнопке Новый и выберите пункт Файл HTML, а если нет, то наберите в любом другом текстовом редакторе, например, в блокноте (notepad) следующий текст:

Листинг 1.1. Простейший HTML-документ

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head>  <title> </title> </head> <body> </body> </html>

Это - заготовка (или шаблон) для любого HTML-документа. Если вы сохраните этот текст в файл с расширением htm или html, например, hello.html, а затем откроете в браузере, то увидите пустое окно, что не совсем интересно. Поэтому мы немного модифицируем этот файл. Между <title> и </title> введите фразу: "Мой первый документ HTML", а между <body> и </body> напишите "Всем привет!". Если вы сохраните этот файл и откроете его в браузере, то увидите примерно то, что изображено на рис. 1.3.

ПРИМЕЧАНИЕ
Если вы работаете с LightPad, то сохранять файл перед просмотром необязательно. Это делается автоматически, когда вы нажимаете кнопку просмотра. При этом оригинальное содержимое файла (после последнего сохранения) заносится в специальный буфер, что дает возможность, в случае необходимости, отказаться ото всех внесенных изменений.

Простейший HTML-документ в окне браузера MSIE 6

Рис. 1.3. Простейший HTML-документ в окне браузера MSIE 6

Мы видим, что текст, набранный нами между тегами <title> и </title> отобразился в заголовке окна, а то, что написано внутри <body> - в самом окне браузера. Отметим, что элемент TITLE помещен внутри контейнера HEAD, который является заголовком документа. Помимо TITLE, в заголовке могут располагаться и другие элементы, например, META, однако на текущем этапе мы не будем их рассматривать.

А пока что можно себя поздравить: своими руками мы только что создали свой первый документ HTML. Как видите, это оказалось совсем несложно!

Правила XHTML

Поскольку мы уже говорили об отличиях HTML и XHTML, давайте посмотрим на практике, чем они отличаются. Итак, документ XHTML имеет, во-первых, несколько иной заголовок (DOCTYPE), а во-вторых, требует указания пространства имен в теге HTML. В итоге мы получим документ, приведенный в листинге 1.2.

Листинг 1.2. Документ XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> </title> </head> <body> </body> </html>

Как видим, отличия, в общем-то минимальные: добавилась ссылка на DTD в заголовке (впрочем, она могла быть и в HTML-документе), а к тегу HTML добавился атрибут (параметр тега) XMLNS. Иногда к нему добавляют еще и информацию о языке:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">

СОВЕТ
Если вы работаете с редактором LightPad версии 4.2 SR1 или выше, то для того, чтобы программа при создании файла сразу добавляла все нужные для XHTML заголовки, зайдите в настройки программы (Сервис -> Настройки) и включите опцию "Синтаксис XHTML".

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

Еще одним отличием документа XHTML от HTML является требование хорошего форматирования. Заключается оно в том, что все элементы должны иметь как открывающий, так и закрывающий теги, а также недопустимо перекрещивание тегов, т.е. вложение одних элементов в другие должно быть произведено правильно. Иначе говоря, прежде чем закрыть какой-либо элемент HTML, содержащий вложенный элемент, убедитесь в том, что вложенный уже закрыт. Ниже приведен пример кода, где закрывающий тег HTML перекрывает закрывающий тег BODY:

<html> <body> тело документа... </html> </body>

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

Гиперссылки

Основа гипертекста - это ссылки, как на отдельные части документа, так и между различными документами. Подобные ссылки называются гиперссылками. В языке HTML предусмотрен элемент A, при помощи которого и создаются гиперссылки. Давайте создадим еще один документ и назовем его index.html. Его содержание приведено в листинге 1.3.

Листинг 1.3. Документ HTML с гиперссылкой

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Главная страница </title> </head> <body> Приветствую вас на своей страничке! Вот мое <a href="hello.html">приветствие</a>. </body> </html>

При просмотре его в браузере мы увидим введенный в части body текст, причем являющееся ссылкой слово будет выделено цветом и подчеркнуто (рис. 1.4). Обратите внимание и на то, что перенос строки не воспринят браузером. Дело в том, что весь текст HTML-файла воспринимается программой просмотра фактически как единая строка, при этом все лишние пробелы, символы конца строки и табуляции просто отбрасываются. Если же вам надо оборвать строку, то можно использовать специальный тег - BR. Он заставляет браузер сделать то, чего вы добиваетесь, нажимая на клавиатуре клавишу Enter при редактировании текста в обычном текстовом редакторе.

Документ с гиперссылкой

Рис. 1.4. Документ с гиперссылкой

Если вы сохранили файл в той же директории (папке), что и предыдущий, то при щелчке по ссылке на слове "приветствие" откроется предыдущий документ. Так работают гиперссылки между документами. Для того чтобы создать ссылку на текст внутри документа, применяется конструкция, приведенная в листинге 1.4.

Листинг 1.4. Ссылка на текст внутри документа

... <a href="#ANCHOR1"> Ссылка-1 </a> <br> ... часть документа<br> ... <a name="ANCHOR1"></a> Текст, на который ссылается ссылка-1. ...

Как видите, тоже ничего сложного. Значок # указывает браузеру, что объект ссылки расположен внутри текущего файла. Параметр NAME задает имя метки. Подобные метки называются якорями (Anchors), и могут состоять из произвольной комбинации латинских букв и (или) цифр. Вместо атрибута NAME можно использовать атрибут ID, что дает возможность ссылаться не только через элементы A, но и "помечать" любые другие элементы, например, заголовки и т.д.

Ссылки внутри файла и на внешний файл можно комбинировать, например:

<a href="secondfile.html#ANCHOR1"> Ссылка-2 </a>

создает ссылку на якорь ANCOR1 в файле secondfile.html. Примеры файлов и работу ссылок вы можете посмотреть в файлах из каталога Part_1/simple. Главное правило в использовании якорей - "не злоупотребляй", поскольку увлечение ими может существенно затруднить навигацию по сайту.

Как уже отмечалось ранее, ссылки можно создавать не только на HTML-документы, но и на любые другие файлы. Делается это точно также:

<a href="my_file1.zip">Мой любимый файл</a>.

Во всех предыдущих примерах подразумевалось, что файл, на который указывает ссылка, и файл с самой ссылкой, расположены в одной и той же директории. Если это не так, то создается относительная ссылка, в которой прописывается часть пути между директорией с исходным документом и файлом-назначением. Для создания такой ссылки сделайте следующее: создайте папку hello внутри папки с документом index.html и переместите в нее файл hello.html. Затем модифицируйте index.html следующим образом: поменяйте строку

Вот мое <a href="hello.html">приветствие</a> на Вот мое <a href="hello/hello.html">приветствие</a>.

В данном случае мы создали ссылку на файл во вложенном каталоге. Чтобы создать ссылку на файл во внешнем каталоге, т.е. расположенном уровнем выше, используется двоеточие. Чтобы проверить все это на практике, откройте файл hello.html и добавьте следующий текст:

<a href="../index.html">вернуться к главной странице</a>

Сохраните оба файла и проверьте работоспособность ссылок. Если все сделано правильно, то обе ссылки будут работать. Когда требуется создать ссылку на файл на два уровня выше, то двоеточие используется дважды, например:

<a href="../../index.html">Вернуться на два каталога вверх</a>.

Все рассмотренные выше варианты верны для случая, когда создаются ссылки внутри одного сайта. Если же надо сделать ссылку на внешний сервер, или на какой-либо другой ресурс, то используется строка вида:

[протокол][адрес][порт][путь][имя файла]

Такой адрес называется URI - Universal Resource Identifier. В качестве протокола, как правило, используется HTTP. И типичный URI выглядит примерно так: "http://www.snkey.net/books/index.html". Если используется другой протокол, например FTP (для передачи файлов), то и URI должен быть соответствующим. Например, файл firefox-5.0a2.en-US.win32.installer.exe, находящийся в каталоге pub/mozilla.org/firefox/nightly/latest-mozilla-aurora/ на FTP-сервере Mozilla, будет иметь следующий URI: ftp://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla-aurora/firefox-5.0a2.en-US.win32.installer.exe. Сама ссылка будет выглядеть так:

<a href="ftp://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla-aurora/firefox-5.0a2.en-US.win32.installer.exe">Скачать Firefox 5 alhpa 2</a>

Параметр "порт", как правило, явно не указывается, т.к. используются значения по умолчанию - 80 для HTTP и 21 - для FTP. Если же порты используются, то адрес будет выглядеть так:

http://www.anyhost.ru:8080/hiddendir/foo.html

Если вы хотите создать ссылку на адрес электронной почты, то она будет выглядеть примерно следующим образом:

<a href="mailto:i.am@myhost.ru">пишите письма!</a>

Здесь "mailto:" указывает браузеру, что далее следует адрес электронной почты, и при щелчке по ссылке необходимо вызвать почтовую программу. Если вы хотите передать еще и тему сообщения, то после адреса электронной почты укажите "subject". Например, чтобы создать сообщение со строкой "Привет" в качестве темы (subject), надо написать так:

<a href="mailto:i.am@myhost.ru?subject=Привет!">пишите!</a>

Подобным образом создаются и ссылки на news-конференции, только вместо "mailto:" пишется "news:", а вместо адреса электронной почты - имя группы новостей. Иные параметры элемента A, в частности, TARGET, который определяет то, где должна "сработать" ссылка, рассматриваются во второй части книги.

2011-04-30

Избранное

SNK GSCP
SNK GSCP - новая библиотека для PHP 5!
Web Studio
Web Studio и Visual Workshop
Библиотека:
Стандарты на web-технологии
Монополия
Монополия Android
Загрузки:
скачать программы
Продукция:
программы и книги
Техподдержка / Связаться с нами
Copyright © 1999-2020 SNK. Все права защищены.
При использовании материалов с сайта ссылка на источник обязательна.
Рейтинг@Mail.ru