Опубликован: 01.09.2010 | Уровень: для всех | Доступ: платный | ВУЗ: Сибирский федеральный университет
Лекция 2:

Текстовые элементы HTML

Якорь. Специальные символы

Якорь (a - anchor)

Служит для определения гиперссылки либо точки назначения ("якоря") гиперссылки. В документе HTML гиперссылкой может являться фрагмент текста или изображение, помещённые в элемент a. Браузер, отображая элемент a, по умолчанию (т.е. если не задать других правил) обычно выделяет текст синим цветом и подчёркиванием, а также отображает курсор в виде указателя, когда он проходит над ссылкой - будь то текст или изображение. При нажатии на гиперссылку она активизируется, и браузер выполняет переход по URL (универсальному локатору ресурса), указанному в атрибуте href элемента a.

Вот типичный пример текстовой гиперссылки:

<a href="http://intuit.ru">Интернет Университет Информационных Технологий</a>

URL может указывать как на веб-страницу (документ HTML), так и на содержимое какого-либо другого типа. Браузеры умеют отображать, кроме HTML-документов, текстовые файлы и файлы изображений некоторых типов (jpg, png, gif). Другое содержимое (аудио, видео, документы Word и Acrobat, архивы) будет загружено браузером как файл и сохранено на компьютере пользователя. Впрочем, к браузеру могут быть подключены дополнительные программы (плагины - plugins ), открывающие различное медиа-содержимое непосредственно в окне браузера. К популярным плагинам такого рода можно отнести Adobe Flash Player, Apple QuickTime, Microsoft Silverlight и плагин Adobe Reader.

Составные части URL имеют следующий смысл (здесь показаны только наиболее простые, необходимые элементы):

протокол://сервер/файл#якорь

Элемент сервер определяет, к какому компьютеру отправляется запрос: любой компьютер имеет свой уникальный числовой адрес в рамках сети ( IP-адрес ), а многие компьютеры-сервера (компьютеры, предназначенные для обработки запросов) имеют также доменное имя, такое как ya.ru. В URL указывается либо доменное имя, либо IP-адрес.

Элемент протокол определяет, какая программа на сервере будет обрабатывать запрос - веб-сервер (такой как Apache, IIS, Tomcat и др.), служба FTP или другая. Также от этого зависит, по какому протоколу будут передаваться данные от сервера клиенту (браузеру). Если указан протокол file, то браузер прочитает файл с локального компьютера. Псевдопротокол javascript при активизации ссылки вызовет указанную функцию, например: <a href="javascript:history.back();">Назад</a>. При активизации ссылки с псевдопротоколом mailto откроется почтовый клиент и создастся письмо с указанным адресом, например: <a href="mailto:admin@site.com">Написать письмо</a>.

Элемент файл определяет путь к файлу на сервере - к документу HTML, изображению, архиву или, может быть, к серверной странице (php, aspx, jsp и т.п.), которая по запросу генерирует HTML-документ. Разумеется, разновидностей серверных программ и типов документов довольно много, и полное их описание не является задачей данной лекции.

И, наконец, якорь означает идентификатор элемента внутри документа, на который направлена ссылка. Если якорь в URL не указан, то документ открывается сначала, иначе - в верхней строке окна оказывается начало некоторого HTML-элемента, имеющего указанный идентификатор (т.е. атрибут id или name). Впрочем, если высота содержимого от якоря до конца документа меньше высоты окна браузера, то, естественно, якорь окажется не вверху окна, а ниже.

<style type="text/css">
    a:link {
      color: #33ccff;
    }
    a:visited {
      color: #cecece;
    }
    a:hover {
      color: #336666;
    }
    a:active {
      color: #339999;
    }
  </style>
    …

  <a id="start"></a>
  <a href="#div2">К секции div2</a>
  <a href="#end">В конец документа</a>
  <a href="http://ya.ru">На Яндекс</a>
 
  <div id="div1">
    <strong>Это текст в секции div1 </strong> - Lorem ipsum dolor sit amet...
    <a id="anchor1"></a>
    Lorem ipsum dolor sit amet…
  </div>
 
  <div id="div2">
    <strong>Это текст в секции div2 </strong> - Lorem ipsum dolor sit amet...</div>
 
  <a id="end"></a>
  <a href="#start">В начало документа</a>
  <a href="#div1">К секции div1</a>
  <a href="http://ya.ru">На Яндекс</a>
Листинг 2.10. Гиперссылки и их оформление стилями
Стили ссылок

Рис. 2.10. Стили ссылок
Упражнения.

Добавьте ссылку на какой-либо локальный файл (текстовый документ, html-документ или изображение). Пример URL: file://C:\Documents and Settings\Admin\Мои документы\Мои рисунки\Image.png. Убедитесь, что ссылка работает (файл должен существовать!).

Добавьте дополнительный якорь в середину секции div1 и создайте ссылку на него в начале документа.

Сделайте разными стили для ссылок в секциях div1 и div2 (например, пусть у них будут разные цвета - во всех состояниях, включая visited, hover и active). Для этого дополните соответствующие CSS-правила селекторами элементов: #div1 a:link и т.д.

Как видно из примера, элемент a - строчный. Что будет, если элементам a задать свойство display:block?
Специальные символы

Содержащиеся в документе символы, не являющиеся при этом частью тегов, обычно отображаются браузером "как есть". Некоторые символы, однако, имеют специальное значение и прямо не выводятся, другие же невозможно набрать со стандартной клавиатуры. Для включения специальных символов в документ требуется их кодирование: либо с помощью специальных названий, либо с помощью числовой кодировки Latin-1. В таблице 2.3 приведены названия некоторых специальных символов, а также их номера в кодировке Latin-1

Таблица 2.3. Имена и номера специальных символов
Результат Описание Стандартное название Номер символа
Неразрывный пробел &nbsp; #160;
< меньше чем &lt; #60;
> больше чем &gt; #62;
& амперсанд &amp; #38;
\text{\textcent} цент &cent; #162;
\pounds фунт &pound; #163;
\yen иена &yen; #165;
\text{\texteuro} евро &euro; #8364;
\S раздел &sect; #167;
\copyright авторское право &copy; #169;
\text{\textregistered} зарегистрированная торговая марка &reg; #174;
" левая угловая кавычка &laquo; #171;
" правая угловая кавычка &raquo; #187;

Примеры:

&copy;
&#174;

Вопросы

  1. Для чего нужны заголовки в документе, при помощи каких элементов они создаются и как выглядят?
  2. Какой элемент формирует абзац?
  3. Чем отличаются логическое и физическое форматирование? Назовите несколько элементов соответствующих и поясните их значения.
  4. Какие средства используются для указания разрывов строк в тексте, кроме блочных элементов?
  5. Для чего обычно используется элемент div?
  6. Какие способы маркировки и нумерации списков заложены в HTML?
  7. Каких эффектов (касающихся маркировки) можно достичь, применяя правила CSS к элементам списка?
  8. Каким образом включается гиперссылка в HTML-документ?
  9. Перечислите и определите основные составные части URL.
  10. Почему для специальных символов необходимы особые обозначения? Какие это обозначения?
Юрий Шах
Юрий Шах

Профессиональный веб-дизайн: Введение в современные веб-технологии
Самостоятельная работа 4

"3. Создание внешней таблицы.

Теперь создайте таблицу с двумя строками. Во второй строке создайте две ячейки - в первую переместите таблицу цифр, а во вторую - таблицу знаков."

Как в ячейку <td> поместить таблицу? Таблица же сама состоит из ячеек. Исходя из задания следует, что <td> может быть родителем для <td>, но это противоречит правилам HTML?
Если не прав - поправьте.
Также прошу разъяснить, как именно выполнить занное условие - поместить в табличную ячейку таблицу цифр, а в другую ячейку - таблицу знаков? 

Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?