Файл: Основы программирования на языке HTML (Язык HTML и его назначение)..pdf
Добавлен: 31.03.2023
Просмотров: 467
Скачиваний: 3
Первый атрибут - target (от англ. "target" ‒ «цель, мишень») указывает место (фрейм или окно браузера) в которое должен быть загружен, указанный в гиперссылке документ.[31]
Значения атрибута TARGET следующие:
_blank — страница открывается в новом окне браузера;
_parent — страница загружается во фрейм-родитель;
_self — страница загружается в текущее окно;
_top — страница загружается в полное окно браузера.
Этот атрибут очень полезен, потому что иногда ссылку удобнее открыть в новом окне, например, когда она уводит на другой сайт, а вы не хотите, чтобы посетитель забыл о вашем сайте. Если страница откроется в новом окне, то это гарантирует, что посетитель снова взглянет на вашу страницу. Однако не стоит забывать, что многие браузеры блокируют такие окна, особенно если они открываются без ведома пользователя.
Вторым вспомогательным атрибутом является TITLE, который позволяет создать всплывающую подсказку для вашей ссылки. Это очень удобно, так как дает пользователю дополнительную информацию о том, что его ждет при щелчке кнопкой мыши на ссылке. Значением атрибута является текст всплывающей подсказки.
Листинг 1.30. Ссылки с дополнительными атрибутами
<html>
<head>
<title>Ссылки</title>
<body>
<a href="aboutme.html" target="_blank" title="Пройдя по ссылке, вы сможете
узнать обо мне">Обо мне</a>
</body>
</html> [4, c.79]
Форматирование текста
Форматирование текста — средства его изменения, такие как выбор начертания шрифта и использование эффектов, позволяющих менять вид текста.[18]
Как правило, вид и цвет текста, принятые по умолчанию, не отвечают стилю большинства сайтов. Поэтому текст приходится форматировать самостоятельно, для чего HTML предоставляет огромные возможности. Существует множество тегов для форматирования текста. Их можно разделить на две группы: логические и физические. Отличие этих групп друг от друга принципиальное.
Логические теги сообщают браузеру о том, какой тип информации в них содержится, например, важный текст или цитата. Браузер решает, как отобразить такой текст.
Физические теги просто говорят браузеру, как должен выглядеть тот или иной блок текста, не уточняя смысл и значимость его содержимого. Иначе говоря, такой тег указывает браузеру нарисовать букву красным цветом, полужирным шрифтом или курсивом, не уточняя, почему эта буква должна выглядеть именно так. В некотором роде воздействие на внешний вид текста у многих тегов одинаковое. Например, для выделения текста полужирным шрифтом можно использовать как
логические, так и физические теги.
Разберем подробнее теги форматирования текста. Начнем с рассмотрения логических тегов.
Теги логического форматирования
Теги логического форматирования определяют не внешний вид текста, а его тип,
в зависимости от которого браузер применяет тот или иной вид внешнего форматирования. Все рассматриваемые ниже теги являются контейнерами и требуют
закрывающий тег. Тег <ABBR> определяет текст как аббревиатуру с помощью атрибута TITLE [4,c.81]
Практически ко всем тегам применим атрибут title - всплывающая подсказка, так вот если Вы в тексте выделяете некую аббревиатуру, старайтесь давать к ней расшифровку, используя данный атрибут.[34]
Пример:
<abbr title="Научно-исследовательский институт">НИИ</abbr>
Тег <ACRONYM> указывает, что текст является акронимом.
Тег <CITE> отмечает небольшую цитату или сноску, взятую из другого источника.
Тег <CODE> указывает на программный код, который может содержать, например, переменные, функции или небольшие куски программы. Такой текст обычно выводится моноширинным шрифтом. [4,c.82]
Тег <DEL> используется для выделения текста, который был удален в новой версии документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны. Браузеры обычно помечают текст в контейнере <del> как перечеркнутый.[20]
TZD — это указатель часового пояса. Он может принимать два типа значений. Первый тип значений — это указатель Z, указывающий, что время задается относительно нулевого часового пояса (иначе говоря, он обозначает время UTC — Coordinated Universal Time, универсальное время). Второй тип значений имеет формат +чч.мм или –чч.мм, который задает сдвиг вперед (+) или назад (–) указанного времени относительно времени UTC. Браузеры отображают такой текст как зачеркнутый.
Тег <DFN> выделяет текст как определение. Этот тег можно использовать, если новый термин встречается в тексте впервые и тут же дается его определение. Браузер отображает такой текст курсивом.[10, c.62]
Тег <INS> Тег <ins> в HTML указывает фрагмент текста, который был добавлен в новой версии документа (ранее его не было). Причина добавления/изменения фрагмента может содержаться в документе указанном в атрибуте cite тега <ins>, а дата/время добавления - в атрибуте datetime.[32]
Браузеры такой текст отображают как подчеркнутый.
Тегом <KBD> помечается текст, вводимый пользователем с клавиатуры. Браузеры такой текст отображают моноширинным шрифтом.
Тег <Q> обозначает текст как цитату, используется для добавления коротких цитат в текст. Обычно такой текст отображается курсивом, некоторые браузеры заключают его в кавычки.
Тег <SAMP> определяет выделенный текст как пример, обычно используется для
выделения результатов работы программы. Браузер выделяет этот текст моноширинным шрифтом.
Тег <STRONG> предназначен для постановки акцента на тексте. Такой текст браузеры выделяют полужирным шрифтом.
Тег <VAR> используется для выделения переменных из программ. Браузер отмечает такой текст курсивом. [4,c.84]
2.2. Вставка изображения в документ
Для добавления изображения в документ применяется тег <img>, его атрибут src определяет путь к графическому файлу, который должен быть в формате GIF, PNG или JPEG. Также для тега <img> необходимо указать обязательный атрибут alt, он описывает альтернативный текст видимый в процессе загрузки изображения или при отключении картинок в браузере. [19]
Современные скорости соединений позволяют размещать большое количество графики на странице. Однако надо знать меру: не стоит злоупотреблять рисунками, в то же время сайт не должен выглядеть пустым. Грамотное и уместное применение изображений поможет сделать сайт красивым, интересным и удобным в использовании.
Для встраивания изображений в HTML-документ применяется тег <IMG>. Его
обязательный атрибут — атрибут SRC, значением которого является адрес встраиваемого изображения.
Простейший вариант записи для включения картинки выглядит следующим
образом: <IMG SRC="image.jpg">
При такой записи размер картинки на экране будет соответствовать ее реальному
размеру. [10,c.89]
Размер изображения
Если необходимо изменить размер изображения, то лучше воспользоваться специальными программами. В случае, когда размер изображения изменяется незначительно, допустимо применять атрибуты тега <IMG>. [4, c.114]
Если для элемента <img> не задать атрибуты width и height, то браузер самостоятельно определит ширину и высоту изображения после загрузки файла и покажет его в исходном размере. Рисунок в формате SVG браузеры, за исключением IE, выводят на всю доступную ширину.
Изменение масштаба и пропорций изображения делается как через атрибуты <img>, так и через стили.[35]
Их значения можно указать в пикселах или процентах от размера окна (в этом случае после размера ставится знак %). Вы можете указать только один атрибут, и тогда второй будет вычисляться автоматически таким образом, чтобы сохранить пропорции рисунка. Искажение пропорций тоже не приводит к улучшению качества изображения.
Листинг 1.46. Задание размеров изображения
<html>
<head
<title>Встраивание изображения</title>
</head>
<body>
Задана только ширина в пикселах <br />
<img src="image.jpg" width="60" />
Задана ширина в процентах<br />
<img src="image.jpg" width="50%" />
Ширина и высота заданы непропорционально (изображение искажается)<br />
<img src="image.jpg" width="50" height="150" />
</body>
</html>
В листинге 1.46 для первого изображения задается только ширина, а высота вычисляется автоматически, для второго изображения размер определяется в процентах, а для третьего изображения устанавливаются неверные размеры, которые искажают картинку. Если изменять размеры не нужно, то следует задать размеры картинки, соответствующие реальности, или вовсе их не указывать. Это позволит избежать искажений и ускорит обработку картинки браузером. [4,c.115]
Выравнивание изображения
Для изображений можно указывать их положение относительно текста или других изображений на веб-странице. Способ выравнивания изображений задается атрибутом align тега <img>. [21]
Он позволяет выравнивать изображения с правой, левой стороны окна или относительно элементов строки. Атрибут ALIGN может принимать много значений, которые позволяют установить картинку именно там, где надо. Возможные значения этого атрибута приводятся ниже.
Горизонтальное выравнивание:
left — по левому краю;
right — по правому краю.
Вертикальное выравнивание:
top — выравнивание верхней границы картинки по самому высокому элементу
строки;
texttop — выравнивание верхней границы картинки по самому высокому
элементу текста;
middle — середина изображения выравнивается по базовой линии строки;
absmiddle — середина изображения выравнивается по середине строки;
baseline и bottom — нижняя граница изображения выравнивается по базовой
линии строки;
absbottom — нижняя граница изображения выравнивается по нижней границе текущей строки. [10,c.91]
Листинг 1.47. Выравнивание картинки по вертикали
<html>
<head>
<title>Встраивание изображения</title>
</head>
<body>
<img src="image.jpg" width="70" align="top"/>Выравнивание по самому верхнему элементу в строке<br />
<img src="image.jpg" width="70" align="absbottom"/>Нижняя граница изображения выравнивается по нижней границе текущей строки<br />
<img src="image.jpg" width="70" align="bottom"/>Нижняя граница изображения
выранивается по базовой линии строки<br />
<img src="image.jpg" width="70" align="middle"/>Середина изображения выравнивается по базовой линии строки<br /> </body>
</html>
Листинг 1.48. Выравнивание картинки по горизонтали
<html>
<head>
<title>Встраивание изображения</title>
</head>
<body>
<img src="image.jpg" width="100" align="right" />. [4,c.118]
Рамка вокруг изображения
Изображение можно отделить от текста рамкой. Делается это с помощью атрибута BORDER, значение которого указывает ширину рамки в пикселах. [4,c.118]
По умолчанию рамки всегда отрисовываются поверх фона элемента, фон распространяется до внешнего края элемента. Стиль рамки определяет ее отображение, без этого свойства рамки не будут видны вообще. Для элемента можно задавать рамку для всех сторон одновременно с помощью свойства border-style или для каждой стороны отдельно с помощью уточняющих свойств border-top-style и т.д. Не наследуется. [22]
Листинг 1.49. Задание рамки вокруг изображения
<html>
<head>
<title>Встраивание изображения</title>
</head>
<body>
<img src="image.jpg" width="100" align="right" vspace="10" hspace="10"
border="20"/>текст
</body>
</html> [4,c.119]
Альтернативный текст
Атрибут alt устанавливает альтернативный текст для изображений. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений, а также поисковыми системами или экранными ридерами, читающими текст с экрана для слабовидящих людей.[36]
Листинг 1.50. Альтернативный текст
<html>
<head>
<title>Встраивание изображения</title>
</head>
<body>
<img src="image.jpg" width="100" align="right" vspace="50" hspace="50"
alt="Фотография кошки"/>
</body>
</html>
Альтернативный текст появляется при наведении указателя мыши на картинку.
Вместо картинки отображается поясняющий текст, а при наведении курсора на
изображение появляется всплывающая подсказка.[10.c.96]
2.3. Работа с таблицами
В HTML-документах можно задавать таблицы. Каждая таблица должна начинаться тегом <table>, а если для таблицы требуется внешняя рамка, то с параметром border (возможны варианты: border или border=ширина_рамки), и заканчиваться тегом </table>.
Таблицы задаются построчно. Каждая строка начинается тегом <tr> и заканчивается тегом </tr>. Каждая графа (т.е. ячейка, клетка) в строке с данными должна начинаться тегом <td> и заканчиваться тегом </td> (этот тег необязателен, но желателен). При этом ширина столбцов подбирается автоматически по максимальной ширине одной из клеток столбца. [5,c.424]
Ячейки таблицы
Теперь приступим к созданию ячеек таблицы. Для начала нужно задать необходимое число строк, а затем разделить строки столбцами на ячейки. Количество пар тегов <tr> и </tr> определяет количество горизонтальных строк в таблице. Количество пар тегов <td> и </td>, расположенных между тегами соответствующей строки, определяет количество ячеек (столбцов) в пределах строки: