Главная

Популярная публикация

Научная публикация

Случайная публикация

Обратная связь

ТОР 5 статей:

Методические подходы к анализу финансового состояния предприятия

Проблема периодизации русской литературы ХХ века. Краткая характеристика второй половины ХХ века

Ценовые и неценовые факторы

Характеристика шлифовальных кругов и ее маркировка

Служебные части речи. Предлог. Союз. Частицы

КАТЕГОРИИ:






Форматирование фрагментов документа




Заголовки. Существует 6 уровней заголовков документа, которые помечаются парными тегами от <H1> ЗАГОЛОВОК </H1> до <H6> заголовок </H6>.

Заголовок, записанный между тегами <H1> </H1>, будет иметь самый крупный шрифт, а теги <H6> </H6> выведут заголовок самыми маленькими буквами.

В стартовом теге для заголовка можно использовать атрибут align, задающий выравнивание заголовка влево, по центру или вправо:

align ="left"

align ="center"

align ="right"

Например, <H1 align="center"> РАСПИСАНИЕ ЗАНЯТИЙ</H1>

Параграфы. В html-документах параграфы не имеют отступов в начале и разделяются пустыми строками. Для их обозначения используется тег <P>. Весьтекст, который следует за данным тегом, представляет собой параграф. Он может заканчиваться конечным тегом </P>, а может и не иметь </P> и тогда о новом параграфе скажет новый стартовый тег <P>. Для выравнивания параграфа по левому краю, по центру или по правому краю в теге <P> надо использовать описанный выше атрибут align. Иногда возникает желание поместить тег <P> вокруг произвольного блока текста, но на самом деле это неправильно. Более правильным будет использование тегов DIV или SPAN для создания оболочки вокруг несвязного текстового контента, который имеет другие семантические отношения, кроме охватываемых иными тегами. Об этих тегах более подробно узнаем ниже.

Принудительный переход на новую строку осуществляется тегом BR и при этом абзац не создаётся. Просто, текст, записанный после <BR>, будет выводиться с новой строки.

Теги для форматирования символов. Для того чтобы выделить в тексте наиболее важные места можно использовать форматирование символов известное из редактора Word (так называемые презентационные теги):

¨ <B> текст </B> - полужирный шрифт (лучше использовать тег <STRONG> вместо <B> для правильного отображения содержимого всеми браузерами. Несмотря на то, что STRONG длинее B на 5 символов, уменьшение трафика фактически пренебрежимо мало (если только не создается невероятное количество презентационных эффектов), особенно с учетом современного сжатия, применяемого веб-серверами к документам, перед отправкой их в браузер через Интернет. Это делает документы значительно короче, чем можно добиться любым сокращением);

¨ <I> текст </I> - курсив (лучше использовать тег <EM> вместо <I> для правильного отображения содержимого всеми браузерами);

¨ <U> текст </U> - подчеркнутый шрифт (учитывая, что многие браузеры по умолчанию подчеркивают гиперссылки, этим форматированием надо пользоваться осмотрительно);

¨ <SUB> цифра </SUB> - нижний индекс;

¨ <SUP> цифра </SUP> - верхний индекс;

¨ <TT> текст </TT> - машинописный шрифт (символы одинаковой ширины);

¨ <BLINK> текст </BLINK> - мерцание текста.

Эти теги описывают, как должен выглядеть контент, расположенный между ними, и их можно использовать совместно. Например

<STRONG><I> полужирный текст курсивом</I> </STRONG>.

Существенным недостатком презентационных тегов является то, что они не представляют базовых зацепок для стилевого оформления того, что в них находится.

Теги для форматирования содержимого, не включенного в отдельный тег. Если Вам надо форматировать содержимое, не включенное в отдельный тег, то можно использовать теги <DIV>…</DIV> и <SPAN>…</SPAN>для исскуственного включения. Эти теги используются там, где не подходит никакой другой тег, причем сами по себе они не определяют никакого форматирования, но удобны для привязки к ним стилей. При этом DIV является тегом блочного типа, а SPAN – строчного.Основное различие между этими типами заключается в следующем: теги строчного типа идут друг за другом в строке текста, а блочного типа – располагаются друг под другом, причем многие занимают всю возможную ширину строки и могут включать в себя теги строчного типа и другие теги блочного типа. Но теги строчного типа не могут содержать теги блочного типа!К строчным тегам относятся такие теги, как <A>, <IMG>, <INPUT>, <SELECT>, <SPAN>, <SUB>, <SUP> и др. К блочным: <DIV>, <FORM>, <H1>…<H6>, <OL>, <P>, <TABLE>, <UL> и некоторые другие. Различие рассмотрим на примере. Пусть для тега <SPAN> указано стилевое правило, задающее цвет фона: <SPAN style="background-color: #FFFFFF">Строчные элементы</SPAN> <SUP>располагаются</SUP> <IMG src="v_stroke.gif" alt="в одной строке"> <SUB>и идут друг за другом.</SUB>

 

<HTML><HEAD><TITLE>Блочные элементы</TITLE><STYLE>H3, DIV, TABLE {border: black dotted 1px; margin: 5px; padding: 5px}</STYLE></HEAD><BODY><H3>Заголовок</H3><DIV>Содержимое &lt;div&gt; <DIV>Вложенный &lt;div&gt; №1</DIV> <DIV>Вложенный &lt;div&gt; №2</DIV></DIV><TABLE> <TR><TD>Таблица из одной ячейки</TD></TR></TABLE></BODY></HTML>Еще одним отличием является то, что для тегов строчного типа не работают такие атрибуты, как margin-top, margin-bottom, padding-top и padding-bottom. Исключением являются теги <IMG>, <INPUT>, <TEXTAREA> и <SELECT> – для них можно задавать отступы padding-top и padding-bottom.

Можно использовать теги DIV и SPAN вместе с атрибутами id и class для предоставления меток, с помощью которых можно применять стилевое оформление CSS и позиционирование для определенных частей контента. Такие же вещи можно сделать также для применения к документу скриптов. Если данный элемент необходимо найти и обработать с помощью скрипта, то обычно к нему применяют id, а затем используют функцию document.getElementById() для ее поиска. Для классов такой функции нет. Использование скриптов будет рассмотрено в разделе Web-программирование, а подробнее в курсе Web-программирования.

Замечание. Очень легко добавлять стилевое оформление с помощью множества вложенных тегов div или span, но этого соблазна надо стараться насколько возможно избегать. В большинстве случаев можно соединить стилевое оформление или функции скрипта с существующими в документе элементами. Базовый контейнер должен быть последней попыткой - лучше пытаться писать веб-страницы, начиная с использования только семантических элементов, и добавлять контейнеры только в случае крайней необходимости.

Стиль шрифта. Для изменения параметров шрифта используется пара тегов

<FONT> текст </FONT>

В стартовом теге указываются атрибуты для внесения нужных изменений:

¨ size =число - размер текста; задаётся числом из диапазона от 1 до 7, причем 1 соответствует наименьшему размеру; по умолчанию используется число 3; можно указать на какое число нужно изменить текущий размер текста;

¨ color ="цвет" - цвет текста, заданный одним из раннее описанных способов;

¨ face ="шрифт текста" - название одного из шрифтов, установленных на компьютере (данный атрибут лучше не использовать, так как неизвестно какой шрифт имеется на компьютере пользователя).

Например, надо фрагмент текста записать красным цветом, размером шрифта, увеличенным на два пункта по сравнению с текущим размером шрифта:

<FONT color="red" size=+2> фрагмент текста </FONT>

Горизонтальная линия. Тег < HR > позволяет расположить горизонтальную линию в нужном месте документа, разделяя страницу на несколько частей. Для линии можно указать ряд атрибутов:

¨ align =«выравнивание»

¨ size =толщина в пикселях

¨ width =длина в пикселях (или в процентах)

¨ color =«цвет»

При использовании атрибута size рекомендуем задавать и атрибут noshade, тогда линия отобразится сплошной. Без использования атрибутов линия занимает по длине весь экран и выровнена по центру экрана. Толщина линии по умолчанию равна 2 пикселям, а максимально она может быть равна 175 пикселям. Например, следующие семь разных линий:

<HR>

<HR noshade>

<HR width=50%>

<HR width=50% align="left">

<HR width=50% align="right">

<HR width=50% size=60 noshade>

<HR align="center" color="green" width=100>

будут представлены на экране в виде


Бегущая строка задается тегом MARQUEE:

<MARQUEE>текст </MARQUEE>

Строка может «бежать» двумя способами:

1. При задании атрибута direction ="направление" строка будет перемещаться вправо (right), влево (left), вверх (up) или вниз (down), если соответствующее английское слово указать в качестве направления.

2. При задании атрибута behavior ="alternate" строка будет «бежать» вправо или влево, а затем в обратном направлении не уходя с экрана.

Существует еще ряд атрибутов влияющих на бегущую строку:

¨ align="выравнивание" -используется для выравнивания текста по верхнему краю (top), по середине (middle), по нижнему краю (bottom);

¨ height=число – высота строки заданная в пикселях или в процентах;

¨ bgcolor ="цвет" - цвет строки;

¨ hspace=число - смещение в пикселях по горизонтали вправо.

Например, в полосе зеленого цвета будет «бежать» текст «компьютерные сети»:

<MARQUEEbgcolor="green" align="middle"> КОМПЬЮТЕРНЫЕ СЕТИ </MARQUEE>.

Для того чтобы изменить цвет текста в бегущей строке надо окружить теги MARQUEEтегами FONT c атрибутом color ="цвет", а именно:

<FONT color="цвет"><MARQUEE> текст </MARQUEE>< /FONT>






Не нашли, что искали? Воспользуйтесь поиском:

vikidalka.ru - 2015-2024 год. Все права принадлежат их авторам! Нарушение авторских прав | Нарушение персональных данных