Особенности языка создания сценариев HTML

⇐ ПредыдущаяСтр 6 из 8Следующая ⇒

Язык HTML основан на использовании тэгов. Тэги - это команды, которые указывают браузеру, где и как расположить на странице текст и картинки, а также позволяют организовывать ссылки на другие документы. Для того, чтобы браузер не путал тэги с текстом, их отмечают треугольными скобками < и >. Большинство тэгов, как правило, используются парами. Т.е. первым идет открывающий тэг, он объясняет браузеру, что делать с последующим текстом. Затем следует закрывающий тэг, который указывает область действия первого. Отличается закрывающий тэг от открывающего наличием в нем косой черты/

Документ HTML ограничивается тэгами < HTML> и < /HTML> - браузер должен знать, где страница начинается, и где заканчивается. Состоит из заголовка (теги < HEAD> и < /HEAD> ), содежащего различную информацию о документе, и, собственно, тела документа (теги < BODY> < /BODY> ), т.е. того, что вы видите в окне браузера. В заголовке находится заглавие (или название) страницы, рекомендуется не более 64 символов, теги < TITLE> и < TITLE>.

Выделение текста - физические и логические стили

В HTML существует два подхода к шрифтовому выделению текста: физический и логический стили.

Физические стили.

Под физическими стилями подразумевают прямое указание браузеру на модификацию текущего шрифта. Т.е. между тэгами < В> и < /В> будет жирный шрифт, а между < 1> и < /1> - курсив (наклонный).

< В> - жирный шрифт;

< 1> - курсив;

< ТТ> - шрифт фиксированной ширины (как на пишущей машинке);

- подчеркнутый текст;

< STRIKE> - перечеркнутый шрифт;

< S> - тоже перечеркнутый шрифт;

< ВЮ> - шрифт большего размера;

- шрифт меньшего размера.

Шрифты могут комбинироваться.

Логические стили

Используя логические стили, вы не можете точно знать, что увидит на экране читатель. Разные браузеры толкуют одни и те же метки логических стилей по разному.

Например, обычно выделяет текст жирным шрифтом, но кто-то из читателей захочет, возможно, чтобы в данном случае текст выделялся цветом. Таким образом, логические стили дают большую свободу в выборе шрифтов пользователю.

< DFN> - служит для описания определений (это определение);

< ЕМ> - служит для выделения текста (это выделенное слово);

< С1ТЕ> - служит для выделения цитат (это цитата);

< CODE> - служит для выделения программных кодов, текстов программ и т.п. Обычно выделяется шрифтом фиксированной ширины (это текст программы);

< KBD> - используется для ввода с клавиатуры пользователя (Введите password);

< SAMP> - используется для вывода машинных сообщений (Segmentation fault: core dumped);

- служит для особого выделения текста, обычно выделяется жирным текстом (это очень важный текст);

< VAR> - используется для символьных переменных (это переменная);

< ABBR> - используется для аббревиатур (СНГ, КПСС, WWW);

< ACRONYM> - используется для сокращений (стр., англ.).

Элементы < ABBR> и < ACRONYM> могут содержать атрибут < TITLE>, описывающий расшифровку аббревиатуры или сокращения:

< ABBR TITLE=" World Wide Web^M> WWW< /ABBR>

Элементы ABBR и ACRONYM используются для голосовых браузеров (для слепых, например), в остальных браузерах сокращения каким-либо шрифтом не выделяются.

Форматирование текста

HTML имеет 6 уровней заголовков разделов страницы, имеющих номера от 1 до 6. Заголовок высшего уровня имеет номер 1. Отличаются заголовки от текста и между собой толщиной и высотой букв, в заголовке < Н1> самые крупные символы. Тэги < Н1>..< /Н1>,

Абзацы в тексте выделяются тэгами < Р>..< /Р>. При просмотре браузером абзацы отделяются друг от друга пустой строкой.

И заголовки, и абзацы по умолчанию выключены влево (т.е. прижаты к левому краю окна). Атрибут ALIGN позволяет выключить текст по центру или вправо. Синтаксис: < Р ALIGN=RIGHT>, может принимать значения LEFT (влево), CENTER (по центру), RIGHT (вправо).

Аналогично форматируются и заголовки: < Н1 ALIGN=RIGHT>..< /H1> и т.д.

Еще один полезный способ выравнивания по центру, это использование тэгов < CENTER>..< CENTER>. Они позволяют отформатировать сразу несколько заголовков и абзацев.

Чтобы перейти на новую строку, не прерывая абзаца (т.е., чтобы не вставлять пустую строку между абзацами), применяется тэг . Закрывающего тэга у него нет.

Тэг < HR> описывает горизонтальную линию.

Метки < BLOCKQUOTE> < /BLOCKQUOTE> добавляют к выделенному ими тексту со всех четырех сторон поля (сверху и снизу - по пустой строке, слева и справа - шириной в 5 знаков).

Еще один способ форматирования текста - использование меток < PRE>..< /PRE> (prefomatted text - предварительно форматированный текст). Обычно браузеры игнорируют множественные пробелы и символы конца строки. Однако с использованием тега < PRE> текст выводится в окне браузера точно в том виде, как он есть в исходном HTML-документе.

Ссылки

Ссылки - инструмент, позволяющий связывать между собой различные документы. Браузер обычно выделяет ссылку цветом и/или подчеркиванием. Описывается ссылка следующим образом:

< А HREF^'nyTb/имя файла" > Ссылка на документ< /А>

< А HREF=" mailto: your_mail@your_sait.ru> «TeKCT ссылки»< /А>

Рисунки

В свою страничку можно вставить рисунок. Для этого нужен сам рисунок - обычно используют изображения в формате GIF (файлы с расширениями .gif) и JPEG (файлы с расширениями .jpg и jpeg) и строчка HTML-тексте, указывающая браузеру, где этот рисунок находится:

< IMG SRC=" picture.gif '> - рисунок " picture.gif находится в том же каталоге, что и текущий документ;

< IMG SRC=" http: //www.ugatu.ac.ru/ / picture.gif > - указание полного пути к файлу. Обычно применяется, если рисунок находится на другом сервере, или используется картинка с другого сайта.

Цвет фона и текста, шрифты

Цвет фона определяется значением атрибута BGCOLOR - шестнадцатиричным числом вида #hhhhhh, где первая пара символов является значением насыщенности для красного цвета, вторая - для зеленого, и третья пара - для синего цвета. #00 -минимальная насыщенность, #FF - максимальная насыщенность цвета. Можно использовать текстовое определение цвета: BLUE, RED, FUCHSIA и т.п. - одно из шестнадцати допустимых значений.

Фоном может служить и какое-то изображение. При этом заданная область заполняется множественными копиями этого изображения (как кафельной плиткой). Для этого используется атрибут BACKGROUND с указанием пути к рисунку < BODY BACKGROUND=graph/picture.gif>

Атрибуты BGCOLOR и BACKGROUND могут находиться внутри метки < BODY>, тогда цвет фона устанавливается для всей страницы, либо в метках < TABLE>, < TR> и < TD> - устанавливается цвет фона во всей таблице, ее строке и ее ячейке соответственно.

Для изменения цвета и размера шрифта используется метка . Ее атрибуты:

COLOR=" #hhhhhh^M - цвет текста;

SIZE=" n" - размер шрифта;

РАСЕ=" имя_шрифта" - смена шрифта, где имя_шрифта может быть arial, verdana, helvetica, sans-serif и другие.

????????

Для размещения текста в верхнем или нижнем регистре используются соответственно метки .. (superscript) и .. (subscript).

Тэг BODY может содержать атрибут TEXT, который определяет цвет шрифта для всей страницы. Значение атрибута - шестнадцатиричное значение цвета или текстовое. < BODY ТЕХТ=" некий цвет" > устанавливает цвет шрифта на всей странице.

Также в тэге BODY можно определить каким цветом на вашей странице будут выделяться ссылки. Это атрибуты:

LINK=" #hhhhhh" - определяет цвет ссылки, по умолчанию голубой;

ALINK=" #hhhhhh^M - определяет цвет ссылки на документ, просмотренный ранее, по умолчанию фиолетовый;

VLINK=" #hhhhhh" - опрделяет цвет активизированной ссылки, т.е. когда на нее наведен курсор и нажата кнопка мыши, по умолчанию красный.

Графика для web-страницы

Анимация собирается из готовых кадров в любой предназначенной для этого специализированной программе, например, с помощью наиболее популярного и удобного инструмента — условно-бесплатной программы Ulead Gif Animator, которую можно загрузить с сайта фирмы-разработчика (http: //www.ulead.com)/.Gif Animator позволяет не только создавать новое анимированное изображение, но и генерировать его из импортированных видео файлов формата AVI, множество дополнительных фильтров

позволяют добиться огромного количества различных визуальных эффектов, а встроенный оптимизатор графики — сократить размер целевого файла до возможного минимума. Имеется возможность задавать различные временные интервалы между сменой кадров, записывать в файл комментарии и добавлять произвольный текст.

Существует множество программ для сжатия анимированной графики, их можно найти на серверах, предлагающих бесплатное программное обеспечение. Однако опыт показывает, что гибко настраиваемый оптимизатор, интегрированный в Ulead Gif Animator, позволяет добиться в этом наилучшего результата.

Ulead Gif Animator позволяет создавать как сложные клипы, так и простейшую анимацию, состоящую буквально из двух кадров, с использованием широкого ассортимента входящих в комплект поставки программы визуальных эффектов.

⇐ Предыдущая 1 2 3 4 567 8 Следующая ⇒