
- •1. Знакомство с языком разметки гипертекста html
- •2. Структура html-документа
- •3. Комментарий в html-коде
- •4. Атрибуты тега
- •5. Форматирование текста
- •5.1 Отступы от края
- •5.2 Фон странички
- •5.3 Цвет текста
- •5.4 Курсив, жирный шрифт и подчеркивание
- •5.6 Абзацы
- •5.7 Абзац с атрибутами
- •5.8 Разрыв строки
- •5.9 Специальные символы
- •5.10 Заголовки
- •5.11 Шрифты
- •5.12 Списки
- •6. Гиперссылка
- •6.1 Атрибут гиперссылки href
- •6.2 Атрибут гиперссылки target
- •6.3 Цвет гиперссылок
- •6.4 Ссылки, которые не являются ссылками
- •7 Графические объекты на web-странице
- •7.1 Вставка графики
- •7.2 Размер изображения
- •7.3 Подсказка
- •7.4 Выравнивание картинки по горизонтали. Обтекание текстом
- •7.5 Выравнивание картинки по вертикали относительно текущей строки
- •7.6 Рамки и отступы
- •7.7 Ссылки-картинки
- •7.7.1 Карта изображений
- •7.7.2 Атрибуты зон
- •8. Связь с поисковыми системами
5.3 Цвет текста
8
Для задания одного цвета основной части текста документа используется специальный
атрибут text тега <body>, например:
<body bgcolor=black text=white>
это будет означать, что фоновое изображение будет черного цвета, а цвет текста будет
белым.
5.4 Курсив, жирный шрифт и подчеркивание
В HTML курсив, жирный шрифт и подчеркивание обозначаются тегами, знакомыми
при работе в MSWord:
<B> вводимый текст </B> - такой текст будет отображаться жирным шрифтом;
<I> вводимый текст </I> - такой текст будет отображаться курсивом;
<U> вводимый текст </U> - такой текст будет подчеркнутым.
В HTML можно использовать вложенные теги:
<B> Учиться! <U> Учиться! <I> Учиться! </I></U></B>
В браузере это будет выглядеть так (рис.4):
Рис. 4. Отображение вложенных тегов в браузере
Можно использовать любую комбинацию вложенных тегов.
5.6 Абзацы
Для того чтобы заставить браузер перейти на новую строку в HTML есть тег <P> - от
английского paragraph, что в переводе означает вовсе не «параграф» (как было бы логично с
точки зрения русского языка), а именно «абзац». Для того чтобы увеличить отступ между
строками, к сожалению, нельзя использовать тег <P>, например:
<P> Я помню чудное мгновенье, </P>
<P> Передо мной явилась ты. </P>
<P> </P>
<P> (C) А. С. Пушкин </P>
на экране будет выглядеть таким образом (рис.5):
9
Рис. 5. Отображение параграфа в браузере
Как видно между первой и второй строкой расстояние такое же, как между третьей и
второй. Хотя оно должно быть разное исходя из кода, поскольку между второй и третьей
строкой должна стоять ещё одна пустая строка, но браузер просто её не видит и не увидит,
даже если между тегами <P> и </P> поставить пробел (пробелы) или табуляцию.
Для того чтобы исправить существующий недостаток в HTML используется символ
неразрывного пробела, который обозначается как - от английского non-breaking
space.
Неразрывной пробел можно использовать не только как пустую строку, но также как
некоторый отступ, также для создания эффекта «красной строки».
5.7 Абзац с атрибутами
Неразрывный пробел, конечно полезен для выше перечисленных эффектов, но что
делать, если необходимо разместить или выровнять подпись или текст подобно тому, как это
делается в MSWord. Например, по центру или по правому краю. Для этого у тега <P>
имеется специальный атрибут, который называется «выравнивание» и обозначается
следующим образом:
<P align=right> фрагмент текста </P>
left – выравнивание по левому краю;
right - выравнивание по правому краю;
center - выравнивание по центру;
justify - выравнивание по ширине.
5.8 Разрыв строки
А нельзя ли как-нибудь уменьшить расстояние между строками в нашем примере со
стихом Пушкина? Великовато оно, но в теге <P> подходящего атрибута нет. Воспользуемся
другим тегом <BR>. Он означает переход на новую строку, но не на новый абзац (тег <P>) –
то, что в MSWord называется «разрыв строки». При этом:
- по умолчанию в новой строке сохраняется тип выравнивания, присвоенный всему
абзацу;
- расстояние между новой строкой и предыдущими строками абзаца равно
расстоянию между остальными строками абзаца.
Обратите внимание: тег <BR> - одиночный.