Здравствуйте, уважаемые подписчики!
Сегодня мы продолжим нашу рассылку по теме HTML.
Заголовки
Если некоторый текст служит заголовком, его можно выделить соответствующим
образом для лучшей визуальной структуризации страницы. Для выделения заголовков в HTML
используются дескрипторы <Н*></H*>, где * — цифра от 1 до 6. Заголовок 1 уровня
выводится самым крупным шрифтом, заголовок 6 уровня — самым мелким.
Пример:
Заголовок <H1></H1>
Заголовок <H2></H2>
Заголовок <H3></H3>
Заголовок <H4></H4>
Заголовок <H5></H5>
Заголовок <H6></H6>
Заголовки почти во всем похожи на абзацы, размечаемые с помощью дескриптора <Р>:
сами они и следующий за ними текст всегда начинается с новой строки, а для более точного форматирования используется тот же
параметр, что и у дескриптора <Р> — align. Однако, в отличие от дескриптора <Р>,
в заголовках предусмотрены только три значения этого параметра — left, right и
center. Остальные параметры текста, как и в обычном абзаце, определяются
другими средствами, в частности с помощью дескриптора
<FONT>.
Дескрипторы заголовков обязательно нужно закрывать, иначе весь текст до конца
страницы по умолчанию будет считаться заголовком соответствующего уровня. И еще
одно - заголовки любят поисковые машины, составляющие на их основе мнение о
тематике страницы.
Служебные и "непечатные" символы
Некоторые знаки, такие как < и >, являются служебными символами HTML. Другие,
такие как неразрывный пробел и длинное тире, просто нельзя набрать в программе
Блокнот. А на HTML-странице они должны быть — по правилам орфографии или просто
для красоты.
Чтобы обойти это ограничение, такие символы заменяются в HTML-коде на
соответствующие Esc-последовательности.
Esc-последовательностью называется ASCII-код символа, перед которым стоят
символы &#. Например, открывающей и закрывающей
угловым скобкам соответствуют Esc-последовательности <
и >. Для того чтобы не обращаться то и дело к таблице ASCII-кодов, некоторым
наиболее часто используемым символам присвоены специальные мнемонические коды,
состоящие из знака & и английского сокращенного названия этого символа. Их проще запомнить, чем цифры. Например, тем же угловым скобкам
соответствуют обозначения
< (от less than — "меньше") и > (от greater than — "больше"), неразрывному пробелу —
(от non-breaking
space), амперсанду (&) — &,
а левой и правой двойным кавычкам ("елочкам") — « и »,
соответственно. Спецсимволы отделяются от последующего текста (кода) точкой с
запятой ( ; ).
Краткая таблица:
| Название |
Символ |
Числовой код |
Мнемонический код |
| Прямая кавычка |
“ |
" |
" |
| Амперсанд |
& |
& |
& |
| знак «меньше» |
< |
< |
< |
| Знак «больше» |
> |
> |
> |
| Торговая марка |
™ |
™ |
&trade |
| Неразрывный пробел |
|
  |
  |
| Цент |
ў |
¢ |
¢ |
| Фунт |
Ј |
£ |
£ |
| Знак валюты |
¤ |
¤ |
¤ |
| Йена |
Ґ |
¥ |
¥ |
| Вертикальная строка |
¦ |
¦ |
¦ |
| Знак параграфа |
§ |
§ |
§ |
| Знак копирайта |
© |
© |
© |
| Левая типографская кавычка |
« |
« |
« |
| Знак отрицания |
¬ |
¬ |
¬ |
| Знак “зарегестрировано” |
® |
® |
® |
| Знак градуса |
° |
° |
° |
| Знак “плюс минус» |
± |
± |
± |
| Знак «микро» |
µ |
µ |
&mikro |
| Знак абзаца |
¶ |
¶ |
¶ |
| Точка-маркер |
· |
· |
· |
| Степень 1 (номер) |
№ |
¹ |
¹ |
| Правая типографская кавычка |
» |
» |
» |
| Знак умножения / кавычки/ |
* |
× |
× |
| Знак деления |
/ |
÷ |
÷ |
Рисунки на WEB-страницах
Существует несколько способов использования графики в HTML-документах -
использование фоновых рисунков (этого способа мы кратко коснулись в нашей
первой рассылке при рассмотрении дескриптора <BODY>
и вернемся к нему еще), рисунки-ссылки
(рассмотрим позже) и внедрение графических образов в документ, что позволяет
пользователю видеть изображения непосредственно в контексте других элементов
документа. Это наиболее используемая техника при создании
HTML-документов.
Синтаксис тэга:
<IMG SRC="URL-рисунка" ALT="альтернативный
текст" HEIGHT="высота" WIDTH="ширина" ALIGN="расположение"
BORDER="толщина рамки" VSPACE="отступ
по вертикали" HSPACE="отступ по
горизонтали"> - данный тег не парный.
Параметры тэга <IMG>:
SRC - Обязательный параметр, имеющий такой же синтаксис, как и стандартный URL. Данный
параметр указывает броузеру где находится рисунок. Рисунок должен храниться в
графическом формате, поддерживаемом броузером. На сегодняшний день форматы GIF,
и PNG поддерживаются большинством броузеров.
ALT -
Данный необязательный элемент задает текст, который будет отображен броузером,
не поддерживающим отображение графики или с отключенной подкачкой изображений.
Обычно, это короткое описание изображения, которое пользователь мог бы или
сможет увидеть на экране. Если данный параметр отсутствует, то на месте рисунка
большинство броузеров выводит пиктограмму (иконку), активизировав которую,
пользователь может увидеть изображение. ALT рекомендуется, если ваши
пользователи используют броузер, не поддерживающий графический режим.
HEIGTH -
Данный необязательный параметр используется для указания высоты рисунка в пикселах
или в процентах (редко используется). Если данный параметр не указан, то используется оригинальная высота
рисунка. Это параметр позволяет сжимать или растягивать изображения по вертикали,
что позволяет более четко определять внешний вид документа. Однако, некоторые
броузеры не поддерживают данный параметр. С другой стороны, экранное разрешение
у вашего клиента может отличаться от вашего, поэтому будьте внимательны при
задании абсолютной величины графического объекта, хотя все же
лучше его использовать. В броузере клиента может быть запрещено отображение
картинок и на их месте будут отображены маленькие квадратики, а это позволит
сохранить структуру документа (расположение текста и т.д.)
WIDTH -
Параметр также необязателен, как и предыдущий. Позволяет задать абсолютную
ширину рисунка в пикселах.
ALIGN -
Данный параметр используется, чтобы сообщить броузеру, куда поместить следующий
блок текста по отношению к рисунку. Это позволяет более строго задать расположение элементов на экране.
Если данный параметр не используется, то большинство броузеров располагает
изображение в левой части экрана, а текст справа от него.
Значения - left, right,
absbottom, absmiddle, baseline, bottom, middle, texttop и top.
BORDER - заключает изображение в рамку. Толщина рамки
задается в пикселах. ("0" - без рамки).
VSPACE и HSPACE - определяют
в пикселях расстояние между изображением и текстом по вертикали и горизонтали,
соответственно.
Примеры:
<img
border="0" src="forum.jpg" alt="Наш форум" hspace="15" vspace="15" width="119"
height="48" align="middle">
<img border="1" src="forum.jpg" alt="Наш форум" hspace="15" vspace="15"
width="119" height="72" align="left">
<img border="1" src="forum.jpg" alt="Наш форум" hspace="15" vspace="15" width="236" height="48" align="right">
Выравнивать изображения на страничке можно с помощью тега
<P align=" "> так же, как и
текст.
Гипертекстовые ссылки
(начало)
Гиперссылка (hyperlink). Указатель внутри гипертекстового документа,
указывающий на другой документ (связывает с другим документом), который также
может быть гипертекстовым. Гиперссылка определяется дескриптором
<A> и имеет дополнительные параметры.
Дескриптор <А> — парный. Все, что находится между <А> и </А>,
является гиперссылкой. В параметре href задается имя конечного файла (WEB-страницы,
исполняемого файла (*.exe) или любого другого). URL-адреса
бывают абсолютными и относительными. Абсолютный адрес - полный путь к файлу
(например: http://www.yandex.ru/index.html, где
index.html - стартовая страница). Относительный
адрес - это адрес файла, находящегося на том же сервере (в зависимости от
положения страниццы с ссылкой в директориях может иметь вид: second.htm,
./second.htm - в той же директории, ../second.htm
- в материнской директории,
../../second.htm и так далее, но об
этом позже).
Примеры:
Ваша вторая WEB-страничка здесь - <a href="second.htm">здесь
</a>
Что бы попасть к нам на ФОРУМ нажмите
сюда. - <a href="http://forum.sitehelp.ru/">сюда</a>
Можно задать еще несколько дополнительных параметров, но об этом и еще о
многом другом в следующих выпусках.
Подготовил Пятаков Владимир.
Не забывайте заходить на наш сайт
SiteHelp.Ru
и форум