- •Общие сведения о языке разметки гипертекста(html)
- •Общие сведения о языке разметки гипертекста (html)
- •Структура html-документа
- •Знакомство с графическими объектами
- •Создание gif-файлов
- •Цвета в html
- •Главное о форматировании текста
- •Заголовки
- •Начертание шрифта
- •Выравнивание и отступы
- •Выравнивание текста по левому или правому краю
- •Центрирование объектов
- •Поля вокруг изображения
- •Фоновые изображения и фоновый цвет
- •Локальные ссылки
- •Ссылка - строка
- •Ссылка - изображение
- •Якорь и ссылка на него
- •Глобальные ссылки
- •Дополнительные возможности форматирования текста
- •Текст, обтекающий границы объекта
- •Отображение текста в одной строке (без переноса на другую строку)
- •Выделение абзацев с помощью списков определений и полей
- •Рекомендации по проведению занятий
Выравнивание и отступы
Web-site станет элегантнее при использовании всех возможных тегов и атрибутов для выравнивания и отбивок элементов текста. Именно творческое использование этих возможностей отличает настоящих Web-гуру от новичков. Компоновка Web-страницы почти так же важна, как и ее содержимое.
Выравнивание текста по левому или правому краю
Атрибут ALIGN= позволяет выровнять текст, графический объект или таблицу по левому или правому краю, по центру или ширине. Этот эффект достигается заданием атрибута ALIGN= в обычных тегах, например в теге<Р>. При задании этого атрибута в теге <Р> нужно пользоваться закрывающим тегом </Р>. В файле align.htm записан соответствующий HTML-код:
<HTML>
<BODY>
По умолчанию объект HTML выравнивается по левому краю <BR> и не выра-
внивается по правому, то есть начало строк находится на одном уровне,
а концы - на разных. Поскольку выравнивание по левому краю задается
автоматически, атрибут ALIGN=LEFT записывать не следует. <BR> <BR>
<P ALIGN=RIGHT> Текст, выровненный по правому краю <BR> и не выровнен-
ный по левому - концы строк находятся на одном уровне, а начало на
разных, - часто применяется на практике, хотя бы с целью создать ори-
гинальный дизайн. <BR> Этот эффект достигается заданием атрибута
ALIGN=RIGHT.
<BR> <BR> </P>
</BODY>
</HTML>
Задание 2.4.1.1. Используя файл align.htm как исходный, записать в рабочую папку файл align1.htm, в котором выравнивание по правому краю заменено вы-равниванием по левому краю и наоборот. Задание 2.4.1.2. Используя файл align1.htm, проверьте, обязателен ли в данном примере закрывающий тег</Р>.
Центрирование объектов
Есть несколько способов отцентрировать текстовый, графический или табличный объект.Можно пользоваться тегом >>P ALIGN=CENTER>. Этот тег применим не для всех объектов HTML-страницы, поэтому фирма Netscape добавила тег <CENTER>, который центрирует любые объекты и поддерживается программами просмотра Netscape Navigator, MS Internet Explorer и некоторыми другими. Примеры применения тегов <ALIGN=CENTER> и <CENTER> приведены в файле center.htm, в котором записан следующий HTML-код:
<HTML>
<BODY>
К тегу <CENTER> нужно относиться с осторожностью. <BR>
<P ALIGN=RIGHT> Какая-нибудь программа просмотра может его вообще проиг-
норировать, и на странице окажется выровненный по левому краю текст. </P>
Но если вы хотите быть уверенным, что в будущем вам не придется возвра-
щаться к своим кодам и менять везде <CENTER> на <Р ALIGN=CENTER>, лучше
использовать оба тега, как это сделано здесь.Некоторые HTML-пуристы
считают, что Великий Творец Web не хотел центрированных текстов и что все
попытки центрирования текста или графики являются богохульством.
</P> </CENTER>
</BODY>
</HTML>
Задание 2.4.2.1. Используя файл center.htm как исходный, записать в рабочую папку файл center1.htm, в котором центрирование заменено выравниванием по левому краю.
Работа с изображением
Поля вокруг изображения
Фоновые изображения и фоновый цвет
Поля вокруг изображения
По умолчанию изображения располагаются у самого края страницы (левого или правого), а обтекающий текст подступает вплотную к границе картинки. Это не очень красиво. С помощью атрибута HSPACE= (Horizontal Space, горизонтальный отступ) можно задать поля слева и справа от изображения, немного отодвинув текст. Ширина полей определяется в пикселях. Единственное неудобство при использовании атрибута HSPACE= состоит в том, что он создает поля по обе стороны от картинки, которую нельзя теперь выровнять по левому или правому краю страницы. Текст отодвигается от изображения, но при этом его край невозможно выровнять по границе колонки текста. В настоящее время, чтобы избежать этого, приходится для выделения пространства по горизонтали между картинкой и текстом использовать таблицу или невидимое изображение. В файле SPACE.htm записан следующий HTML-код:
<HTML>
<BODY>
<IMG SRC="horse.gif" ALIGN=LEFT>
Если HSPACE= создает поля слева и справа от изображения,то атрибут VSPACE= (Vertical
Space, вертикальный отступ) отделяет изображение сверху и снизу. <BR>Этот атрибут
может размещать картинку не совсем посередине между строками текста, что видно в
данном окне. <BR>Современный HTML не позволяет задавать ширину межстрочного
интервала. <BR>Обходной путь - скрупулезно подгонять размер изображения, но такие
методы обычно нежизнеспособны. <BR><BR><BR>Чаще всего графическая вставка вполне
нормально отцентрирована по вертикали и без атрибута VSPACE=.<BR>
<IMG SRC=" horse.gif" ALIGN=LEFT VSPACE=20 HSPACE=20>
Опять-таки, если есть проблемы, их можно обойти с помощью таблиц, хоть это и не
самый элегантный способ. <BR>Влияние атрибутов VSPACE=20, HSPACE=20 и BORDER=4
видно на данном примере.
</BODY>
</HTML>
Задание 3.1.1.Просмотреть страницу, создаваемую файлом SPACE.htm. Используя файл SPACE.htm как исходный, записать в рабочую папку файл SPACE1.htm, в котором поэкспериментировать со значениями атрибутов VSPACE= и HSPACE=.