Опубликован: 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?
Если не прав - поправьте.
Также прошу разъяснить, как именно выполнить занное условие - поместить в табличную ячейку таблицу цифр, а в другую ячейку - таблицу знаков? 

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

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

Nat Ves
Nat Ves
Израиль
Татьяна Орлова
Татьяна Орлова
Россия, Воронежская область