Файл: Основы программирования на языке HTML (Язык HTML и его назначение)..pdf
Добавлен: 31.03.2023
Просмотров: 473
Скачиваний: 3
Текстовая информация, которая будет отображаться на сайте, вводится внутри тега <BODY>. Просто размещать текст внутри тега можно, но не нужно: как правило, его необходимо оформлять, например, разделять на абзацы или создавать заголовки.
Для оформления текста HTML предоставляет много возможностей: для любого абзаца или заголовка можно задать уникальный внешний вид, можно создать списки с маркерами любого типа, менять цвет, размер и шрифт текста. В общем, создатель сайта может оформить текст своего сайта очень красочно.
Рассмотрим общие принципы структурного форматирования текста, а затем перейдем непосредственно к управлению его внешним видом. Для начала разберем, как создать заголовок сайта. [10, c.40]
Заголовки
Заголовки – важный элемент сайта, они помогают систематизировать текст. В HTML доступно создание заголовков разных уровней, поэтому очень легко выделять смысловые темы и подтемы. Текст, присутствующий в заголовках, влияет на индексацию сайта поисковыми системами, так как многие работы при поиске обращают внимание на содержимое заголовков, имеющихся на сайте. [4, c.61]
Фактически в HTML существует шесть уровней заголовков, от h i до h6. Когда вы добавляете к контенту заголовки, браузер использует их для формирования структуры документа страницы. Вспомогательные устройства, такие как программы экранного доступа, используют структуру документа, чтобы помочь пользователям быстро просматривать страницу и перемещаться по ней. Кроме того, поисковые системы рассматривают уровни заголовка как часть написанных для них алгоритмов (информация в заголовках высших уровней имеет больший вес). В силу этих причин рекомендуется начать с заголовка l-ro уровня (h i) и двигаться вниз по порядку (см. примечание), создавая логическую иерархию или структуру документа.[8, c.90]
Для заголовка любого уровня можно задать выравнивание по горизонтали с помощью атрибута ALIGN. Значения атрибута ALIGN следующие:
left — по левому краю;
right — по правому краю;
center — по центру;
justify — по ширине (для заголовков длиннее строки).
Для заголовков можно задать атрибут TITLE, значение которого — «текст всплывающей подсказки» (той всплывающей подсказки, которая появляется при наведении курсора мыши на заголовок).
В листинге 1.17 представлен пример кода для создания разных типов заголовков и для различного вида выравнивания.
Листинг 1.17. Заголовки
<html>
<head>
<title>Создание заголовков</title>
</head>
<body>
<h1 align="center">Заголовок 1 уровня</h1>
<h2 align="justify">Заголовок 2 уровня</h2>
<h3 align="left">Заголовок 3 уровня</h3>
<h4 align="right">Заголовок 4 уровня</h4>
<h5>Заголовок 5 уровня</h5>
<h6 title="заголовок 6 уровня">Заголовок 6 уровня</h6>
</body>
</html>
При отображении заголовок всегда начинается с новой строки и после него всегда начинается новая строка (это отделяет заголовок от остального текста).
Для управления другими элементами отображения заголовков, например: цветом или шрифтом, используется язык CSS. Поэтому в тегах <H1…6> разрешается использовать атрибуты STYLE и CLASS, которые подключают стили.
После того как вы создадите заголовки, можно добавить к ним обычный текст, который надо логически разбить на абзацы. [10, c.40]
Абзацы
Основная функция абзацев состоит в том, чтобы без изменения выдерживать создаваемую автором уникальную структуру текста. Например, на части делятся журналы, книги, газеты и разделы в колонках. Таким же образом структурируются тексты и в HTML. Благодаря этому они приобретают более понятную логическую структуру, которая не только становится удобна для восприятия, но и корректно отображается в браузерах. Разделение фрагментов текста в HTML выполняется при помощи тегов, в результате чего по вертикали появляется небольшой отступ (отбивка) между абзацами. [28]
Чтобы выделить абзац в HTML, мы используем не «Enter», а тег <р>. Абзац начинается с открывающегося тега и заканчивается закрывающимся тегом </p>. [26]
Для управления внешним видом текста абзацев используются в основном таблицы стилей. Однако незначительно текст можно отредактировать с помощью HTML. Для тега <P> можно задать атрибут, определяющий выравнивание, — ALIGN. Этот атрибут может принимать несколько значений. Значения атрибута ALIGN следующие.
center — выравнивание по центру. При таком виде выравнивания текст располагается в центре экрана, образуя неровные края. Не стоит использовать это выравнивание для текстов больших объемов, поскольку читать такой текст неудобно;
left — выравнивание по левому краю.
right — выравнивание по правому краю.
justify — выравнивание по ширине.
Кроме выравнивания для абзаца, можно задать текст всплывающей подсказки,
которая появляется при наведении указателя мыши на текст. Подсказка создается
с помощью атрибута TITLE, значением которого является текст подсказки.
Листинг 1.18. Создание абзацев
<html>
<head>
<title>Абзацы</title>
</head>
<body>
<p align="center" title="Абзац, выровненный по центру">Это небольшой заголовочный абзац, выровненный по центру</p>
<p align="right" title="Абзац, выровненный по правому краю">Здесь эпиграф</p>
<p align="left" title="Абзац, выровненный по левому краю">Этот абзац с текстом выровнен по левому краю, поэтому края с правого края будут рваными</p>
<p align="justify" title="Абзац, выровненный по ширине">Этот абзац с основным текстом, выровненный по ширине. Края этого абзаца прилегают к краям окна
браузера.</p>
</body>
</html>
Для дальнейшего оформления текста абзацев применяются каскадные таблицы стилей. Тег <P> позволяет использовать атрибуты STYLE и CLASS.[10, c.40]
Обрывы строк
Тег <br> устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега абзаца <p>, использование тега <br> не добавляет пустой отступ перед строкой. Если текст, в котором используется перевод строки, обтекает плавающий элемент, то с помощью атрибута clear тега <br> можно сделать так, чтобы следующая строка начиналась ниже элемента.[17]
Он не требует закрывающего тега, однако рекомендуется записывать его как <BR />, чтобы все программы отображали его корректно.
Листинг 1.19. Обрыв строки
<html>
<head>
<title>Обрыв строки</title>
</head>
<body>
Наша Таня громко плачет,<br />
Уронила в речку мячик.<br />
</body>
</html>
Есть еще один вариант применения тега <BR>. Его используют, когда надо задать обтекание текстом таблицы, изображения или любого другого плавающего элемента страницы (то есть элемента, для которого задан атрибут ALIGN). Для этого применяется атрибут CLEAR. Значения атрибута CLEAR следующие:
all — запрещает обтекание элемента с двух сторон;
left — запрещает обтекание с левой стороны плавающего объекта, расположенного после тега;
right — запрещает обтекание с правой стороны плавающего объекта, расположенного после тега;
none — отменяет свойство.
Если обтекание запрещено, то текст, следующий за тегом <BR>, будет отображаться на строке после плавающего объекта.
Иногда нужно выполнить действие, обратное обязательному переносу строки,
то есть гарантировать, что текст ни в коем случае не будет переноситься на новую
строку. Для создания таких неразрывных строк используется тег <NOBR>, который
требует закрывающего тега. Текст, размещенный внутри этих тегов, будет размещаться на одной строке. При необходимости браузер создаст горизонтальную полосу прокрутки.
В некоторых случаях строка может оказаться очень длинной и неудобной для
чтения, поэтому внутри тегов <NOBR> можно использовать тег <WBR>, который
указывает на место возможного переноса строки.
Листинг 1.20. Запрет переноса строки
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Обрыв строки</title>
</head>
<body>
<nobr>Это очень важная строка, ее ни в коем случае нельзя переносить на
другую строчку, однако в этом месте <wbr> возможно сделать перенос.</nobr>
</body>
</html>[10, c.40]
Ссылки
Основная функция ссылок заключается в том, что они позволяют переходить с одного HTML документа на другой, либо содержать адрес файла, предназначенного для открытия в браузере пользователя, или для его дальнейшего скачивания.[13]
Обычные ссылки (<a href>) просто указывают на другую страницу. Отношения ссылок предоставляют способ объяснить, почему вы указываете на другую страницу. Эти слова дают один из следующих вариантов завершения предложения "я ссылаюсь на другую страницу, потому что ..."
- ...она представляет собой таблицу стилей, которая содержит правила CSS, которые ваш браузер должен применить к этому документу;
- ...это канал (feed), который содержит ту же информацию, что и данная страница, но в стандартном формате, на который возможна подписка;
- ...это перевод данной страницы на другой язык;
- ...она содержит ту же информацию, что и данная страница, но в формате PDF;
- ...это следующая глава онлайновой книги, частью которой является и данная страница. [7, c.31]
Между собой ссылки различаются на внешние и внутренние, а также на текстовые и графические. Внешние ссылки ведут за «пределы» html-страницы, внутренние на различные части этой же страницы. Текстовые ссылки представляют из себя текст (по-умолчанию, он выделен синим цветом и подчёркнут), а графические, в качестве объекта, по которому нужно щелкнуть для перехода, содержат какую-либо картинку. Все эти разновидности ссылок создаются в HTML с помощью тега < A>< /A> (сокращение от англ. anchor — якорь). Рассмотрим его поподробнее.[33]
Внешние ссылки
Основой внешних ссылок является URL-адрес объекта, на который вы хотите сослаться. Для создания ссылок в HTML служит тег <A>, который требует закрывающий тег. В блоке этих тегов располагается текст или другой объект, который будет выделяться как ссылка. На самом деле для того, чтобы сообщить человеку, что в каком-то месте сайта расположена ссылка, совершенно не обязательно писать адрес страницы. Язык HTML дает возможность «замаскировать» адрес под текст ссылки, который описывает, что увидит пользователь, перейдя по ней. Отдельно находится адрес страницы, на которую вы попадете при щелчке кнопкой мыши на ссылке.
Между тегами <A> и </A> располагается текст ссылки, а адрес документа для перехода записывается в теге <A> в качестве значения атрибута HREF. Таким образом, пользователь сможет быстро и легко перемещаться по сайту. Ему абсолютно все равно, где находится документ, на который указывает ссылка, он видит только текст описания.
Листинг 1.28. Создание ссылок
<html>
<head>
<title>Ссылки</title>
<body>
<a href="aboutme.html">Обо мне</a><br />
<a href="myfoto.jpg">Мое фото</a>
</body>
</html>
Текст ссылки, как правило, отображается подчеркнутым, а при наведении на ссылку курсор меняет вид. Когда посетитель сайта щелкнет кнопкой мыши на ссылке, он перейдет на страницу, которая указывается в качестве адреса ссылки. [10, c.56]
Внутренние ссылки
Внутренние ссылки организуют переходы внутри одного HTML-документа. Они применяются, когда на одной странице много текста. Для простоты навигации можно создать ссылки, при щелчке кнопкой мыши на которых пользователь автоматически перейдет к нужной части документа.
Чтобы создать такую ссылку, сначала нужно определить место, к которому ссылка приводит. Это делается с помощью атрибута name элемента A. Необходимый кусок текста заключается в элемент A. Хотя совершенно не обязательно помещать туда текст, можно просто установить теги этого элемента в месте, к которому браузер должен переходить при щелчке кнопкой мыши на ссылке.
В качестве значения атрибута name можно взять любое имя, желательно, чтобы оно характеризовало текущее место, так вам самим будет проще пользоваться метками.[4,c.77]
Затем надо создать ссылку на эту метку. Ссылка на внутреннюю метку создается
так же, как и ссылка на внешний документ, только вместо URL-адреса желаемой
страницы надо ввести адрес метки в таком виде: #met1, где met1 — имя метки. При щелчке кнопкой мыши на ссылке браузер автоматически перейдет к месту,
указанному меткой.
Листинг 1.29. Внутренние ссылки
<html>
<head>
<title>Ссылки</title>
<body>
<a name="met2">Это метка для перехода 2</a><br />
<a href="#met1">Кликните для перехода к метке 1</a><br />
<a href="#met2">Кликните для перехода к метке 2</a><br />
<a name="met1">Это метка для перехода 1</a>
</body>
</html> [4, c.78]
Общие моменты при создании внешних и внутренних ссылок.
Все немногочисленные атрибуты тега <A> можно применять при создании как внешних, так и внутренних ссылок. Тег <A> имеет два вспомогательных атрибута.