русс | укр

Языки программирования

ПаскальСиАссемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог

Компьютерные сетиСистемное программное обеспечениеИнформационные технологииПрограммирование

Все о программировании


Linux Unix Алгоритмические языки Аналоговые и гибридные вычислительные устройства Архитектура микроконтроллеров Введение в разработку распределенных информационных систем Введение в численные методы Дискретная математика Информационное обслуживание пользователей Информация и моделирование в управлении производством Компьютерная графика Математическое и компьютерное моделирование Моделирование Нейрокомпьютеры Проектирование программ диагностики компьютерных систем и сетей Проектирование системных программ Системы счисления Теория статистики Теория оптимизации Уроки AutoCAD 3D Уроки базы данных Access Уроки Orcad Цифровые автоматы Шпаргалки по компьютеру Шпаргалки по программированию Экспертные системы Элементы теории информации

РАБОТА С ТЕКСТОМ


Дата добавления: 2015-07-09; просмотров: 1303; Нарушение авторских прав


Элемент <P>

Этот элемент задает один из способов разбиения текста на абзацы. Он может иметь вложенный атрибут align, который указывает отступ left, center или right. Каждый следующий абзац игнорирует, заданное для предыдущего абзаца значение align.

Синтаксис: <P align=отступ> Текст абзаца </P>

 

Элемент <BR>

Этот элемент задает разрыв текста с переходом на новую строку. Он может иметь вложенный атрибут clear, который может принимать значения left, all или right тем самым указывать обтекание текста вокруг плавающих изображений вставленных в текст нестандартным способом. Каждый следующий абзац игнорирует, заданное для предыдущего абзаца значение clear.

Синтаксис: <BR clear=обтекание> Текст

Может быть отменен тэгами <NOBR> и </NOBR>

 

Элемент <NOBR> </nobr>

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

Элемент <WBR>

Этот элемент задает разрыв текста в данном месте при необходимости с переходом на новую строку.

Синтаксис: <WBR >Текст

Элемент <PRE>

Весь текст, заключенный в тэги <PRE> и </PRE> будет визуализирован браузером точно так, как он визуализирован в исходном коде документа, кроме того текст выводится моноширинным шрифтом, что значительно упрощает задачу форматирования текста в колонки. Элемент поддерживается не всеми браузерами, он может иметь атрибут width, который задает ширину отводимого пространства под текст в символах. Элемент сменил собой устаревшие элементы <XMP>, <LISTING> и <PLAINTEXT>

Синтаксис: <PRE width=число символов >...текст.. .</PRE>



Элемент <DIV>

Элемент <DIV> позволяет выделить в структуре документа несколько разделов. Он является блочным элементом, функционирующим во многом подобно элементу <P>. Если закрывающий тэг </P> опущен, то <DIV> эффективно заменяет его и начинает новый абзац. Он может иметь атрибут align, который указывает отступ left, center или right. Каждый следующий раздел игнорирует, заданное для предыдущего раздела, значение align.

Синтаксис: <DIV align=отступ> Текст раздела </DIV>

 

Элемент <CENTER>

Элемент <CENTER> текст </CENTER> полностью идентичен конструкции

Синтаксис: <DIV align=center> Текст раздела </DIV>

 

Элемент <SPAN>

Элемент <SPAN> позволяет выделить некоторое количество текста для последующего его форматирования, но в отличие от <DIV> не начинает новый абзац.

Синтаксис: <SPAN> Текст </SPAN>

 

Элемент <BLOCKQUOTE>

Элемент <BLOCKQUOTE> позволяет выделить объемный текст-цитату из общего текста.

Синтаксис: <BLOCKQUOTE> Текст </BLOCKQUOTE>

 

Работа со шрифтами

Любой фрагмент текста страницы можно выделить жирным шрифтом, заключив его в пару скобок <B> - </B>

Для задания куpсива используются скобки <I> - </I>

Крупный шрифт задается с помощью <BIG> - </BIG>

Возможно одновременное применение нескольких элементов. Например, жирный курсив получается вложением <I><B> - </B></I>

Пpи этом важно, чтобы внутренние скобки были закрыты раньше, чем внешние. Пpи пересечении последствия получаются непредсказуемыми. Поэтому приведенный выше вариант является правильным, а вот такой: <I><B> - </I></B> - непpавильным.

 

Элемент <U> - подчеpкивание

Для выделения части текста подчеркиванием используются скобки <U> - </U> Пользоваться подчеркиванием рекомендуется только тогда, когда это действительно необходимо, поскольку при чтении страницы подчеркнутый текст напоминает ссылку.

Если рассмотренных возможностей по управлению шрифтами недостаточно, можно применить элемент <FONT>, имеющий вид

<FONT COLOR=цвет SIZE=pазмеp>

выделяемый текст

</FONT>

Слово COLOR задает цвет букв, отменяя тем самым значение, указанное в BODY для выделенной части страницы. Способ задания цвета - как в BODY.

Слово SIZE указывает размер шрифта - абсолютный в виде числа без знака, либо приращение по отношению к базовому размеру (обычно выбираемому пользователем бpоузеpа) в виде числа со знаком. Естетсвенно, что + задает увеличение, а - уменьшение шpифта. Относительный размер предпочтительнее, поскольку заранее неизвестены ни возможности монитора у читающего страницу, ни его пpедпочтения.

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

Синтаксис: <FONT face=имя color="цвет"> Текст </FONT>

 

Элементы <SUB> и <SUP> - индексы

Задание в тексте нижних и веpхних индексов выполняется заключением нужного фpагмента текста соответственно в скобки

<SUB> - </SUB>

<SUP> - </SUP>

Результат: Основной текст нижний индекс Основной текст веpхний индекс

 

Создание списков

Элемент <OL>

Элемент <OL> используется с целью задания нумерованных списков, имеет атрибуты type=1, или A, или a, или I, или i для задания вида нумерации и start для указания, с какого индекса начинается нумерация списка. Элемент <OL> включает в себя дополнительный элемент <LI>, который задает элементы списка.

Синтаксис: <OL type=1 start=1 > <LI> элемент списка <LI> элемент списка </OL>

Пример:

1. элемент списка

2. элемент списка

 

Элемент <UL>

Элемент <UL>, по сути, является аналогом <OL> без дополнительных элементов <LI>, он используется с целью задания ненумерованых списков, имеет атрибут type=circle, square, или disc для задания вида маркера. Элемент <UL> включает в себя дополнительный элемент <LI>, который задает элементы списка.

Синтаксис: <UL type=circle > <LI> элемент списка <LI> элемент списка </UL>

Пример:

o элемент списка

o элемент списка

Элемент <DL>

Элемент <DL>используется с целью задания словарей, глоссариев и прочих перечней. Элемент <DL> включает в себя дополнительные элементы <DT> и <DD>, которые обозначают соответственно термин и определение.

Синтаксис: <DL > <DT> термин 1 <DD>определение 1 <DT> термин 2 <DD>определение 2 </DL>

Пример:

термин 1

определение 1

термин 2

определение 2

 

Рассмотрим пример использования некоторых из описанных элементов.

<HTML><HEAD><TITLE> Пример номер 2 </TITLE></HEAD><BODY BGCOLOR="Ivory" TEXT="Green" LEFTMARGIN=100 ><H1 align=center> Заголовок стиля 1 </H1><COMMENT> Это пример комментария - его нет на экране при просмотре страницы </COMMENT> <P> Это текст примера - абзац, после него используется разделительная линия </P><HR align="left" size=5 width=500 color="RED"> <H2 align=center> Заголовок стиля 2 </H2><P align=center> Дальше располагаются примеры различного оформления текста </P><P> <B> Пример жирного шрифта текста абзаца </B> </P>Пример <I> наклонного </I> шрифта текста абзаца и начало новой строки <BR> с помощью соответствующего тэга BR<U> Пример подчеркивания текста</U> <BR> - в примере выше пропущен конец абзаца или начало новой строки <H3 align=center> Заголовок стиля 3 Примеры списков </H3><OL type=1 start=1 > <LI> первый элемент списка <LI> второй элемент списка </OL><P align=center> <U> Пример простого списка (это просто абзац по центру а не заголовок) </U> </P><UL type=disc > <LI> элемент списка <LI> элемент списка </UL></BODY></HTML>

 

 

РАБОТА С ТАБЛИЦАМИ

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

При создании таблиц используется принцип вложения: внутри основного элемента таблицы (TABLE) создается ряд элементов, определяющих строки (TR), а внутри этих элементов размещаются элементы для описания каждой ячейки в строке (ТD,ТН). Чтобы разобраться в структуре существующей таблицы или создать новую таблицу, необходимо помнить, что последовательность элементов описывает таблицу сверху вниз и справа налево.

Например, если после элемента TABLE указан элемент TR, это означает, что начинается описание новой строки таблицы. Все, что расположено за этим элементом, будет размещено в одной строке (справа налево). Это может быть последовательность элементов TD (ячеек), другая таблица и т. д. После того как встретится новый элемент TR, начнется описание следующей строки, и т. д. до конца таблицы (тега </table>).

Таблица целиком заключается в паpу скобок

<TABLE> </TABLE>

Каждый горизонтальный ряд заключается в скобки

<TR> </TR>

а каждая ячейка внутри ряда в скобки

<TD> </TD>

Элемент <CAPTION> </CAPTION >

используется для задания заголовка таблицы. Несмотря на то что этот элемент располагается внутри элемента TABLE, заголовок выводится на экране вне рамки таблицы. Положением заголовка можно управлять:

• align="top" — заголовок над таблицей;• align="bottom" — заголовок под таблицей;• align="left" — заголовок вверху и выровнен влево;• align=" right " — заголовок вверху и выровнен вправо.

 

Для управления видом рамки используются два атрибута: шириной боковой грани управляет атрибут: border =ширина, при задании нулевого значения для этого атрибута рамка исчезает совсем.

Шириной фронтальной грани управляет атрибут: cellspacing =ширина.

 

Таблицу можно выровнять по горизонтали при помощи атрибута align:

• align="left" - влево;• align="center" - по центру;• align=" right" - вправо.

Ширину таблицы можно задать точно в пикселях или в процентном отношении к ширине страницы в окне броузера. Например:

width=400width=50%

Для <TD> можно указать свойства отдельной ячейки:

ALIGN=LEFTALIGN=RIGHTALIGN=CENTER

задает выравнивание по горизонтали текста внутри ячейки влево, вправо или по центру соответственно.

VALIGN=TOPVALIGN=BOTTOMVALIGN\MIDDLE

задает вертикальное выравнивание - по верхнему краю, по нижнему или посередине. Оба эти атрибута могут быть указаны и в <TR>. В этом случае они определяют выравнивание для всех ячеек строки, кроме тех, где они же заданы явно.

Желаемая высота и ширина ячейки указываются с помощью параметров, аналогичных параметрам для таблицы:

WIDTH=число WIDTH=пpоцент%HEIGTH=число HEIGTH=пpоцент%

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

BGCOLOR=цветBACKGROUND=каpтинка

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

cellpadding=-число пикселов

или

cellpadding="15%"

Задание этого атрибута делает ячейки больше.

Элемент <TR>

создает строку таблицы. Он не имеет конечного тега. Строка заканчивается там, где начинается следующая, то есть следующий элемент TR. Внутри элемента располагаются элементы ТН и TD, определяющие одиночные ячейки. Для выравнивания содержимого всех ячеек в строке можно использовать хорошо известный нам атрибут align и присваивать ему значения l e f t , center и right.

Кроме этого, содержимое ячеек можно выравнивать по вертикали:

• valign="top" - по верхнему краю;

• valign="center" - по центру;

• valign="bottom" — по нижнему краю.

Другие допустимые атрибуты: id, class, lang, style, d i r , title, char, c h a r o f f , атрибуты событий.

 

Элемент <TH>

используется для ячейки, которая является заголовком столбца или строки таблицы. Этот элемент должен располагаться внутри элемента TR. Ячейка-заголовок отличается от обычной тем, что броузер выводит текст внутри нее выделенным (как правило, полужирным) шрифтом. Для элемента ячейки предусмотрено несколько атрибутов. Если в ячейку введено большое количество текста, броузер разбивает его на строки так, чтобы сохранить требуемую конфигурацию таблицы. Конфигурацию может определять заданная фиксированная ширина таблицы, необходимость согласовать размер таблицы и области просмотра, заданная ширина ячейки. При помощи атрибута nowrap (он не имеет параметров) можно запретить форматирование текста. В этом случае в ячейке будет создана одна строка, а таблица может уйти за край окна.

Атрибуты rowspan и colspan позволяют создавать ячейки, которые в несколько раз больше других ячеек таблицы. Иными словами, ячейки в таблице можно объединять. При задании атрибута rowspan=n и условии, что п>1, соответствующая ячейка займет не одну, а п строк, и, соответственно, будет иметь размер в п раз больший, чем обычная ячейка данного столбца.

Аналогично, при помощи атрибута colspan можно создавать ячейки, расположенные сразу в нескольких столбцах.

 

Элемент <TD>

определяет обычную ячейку таблицы. Для него допустимы те же атрибуты, что и для элемента ТН. Оба элемента – ТН и ТD – могут не иметь конечных тегов. Функцию конечного тега выполняет следующий элемент, который определяет структуру таблицы.

Ниже приведен пример использования таблиц:

<HEAD><TITLE> Пример номер 3 </TITLE></HEAD><BODY LEFTMARGIN=50 ><H1 align=center> Примеры работы с таблицей </H1> <TABLE border=4 cellspacing=3><CAPTION> Общий заголовок таблицы </caption><TR><TH bgcolor="yellow"><TH bgcolor="yellow"> 3aгoловок 1<TH bgcolor="yellow"> 3aголовок 2 <TR><TH bgcolor="yellow"> 3aголовок 3<TD> Ячейка 1<TD> Ячейка 2<TR><TH bgcolor="yellow"> 3аголовок 4<TD> Ячейка 3<TD> Ячейка 4</table> <P>Ещё пример таблицы: </P> <TABLE border="4" cellspacing=3><CAPTION> Таблица с объединенными ячейками </caption><TR> <TH rowspan="2">&nbsp; <TH colspan="2"> 3аголовок 1<TR> <TH> Заголовок 1.1 <TH>Заголовок 1.2<TR> <TH> Заголовок 2 <TD> Ячейка 1.1 <TD> Ячейка 1.2<TR> <TH> Заголовок 3 <TD> Ячейка 2.1 <TD> Ячейка 2.2</table> </BODY></HTML>

 

3. Вставка объектов, создание ссылок

Вставка в документ объектов

Элемент <IMG>

используется для вставки в тело документа графического изображения. Под графическим изображением подразумевают: маленькие пиктограммы, рисунки, графические объекты и карты изображений, занимающие большую часть окна браузера. Кроме того, элемент <IMG> поддерживает различные атрибуты, определяющие расположение изображения относительно окружающего текста и содержания Web страницы в целом. Изображение может выравниваться по левой, правой, верхней или нижней границе строки или располагаться в центре окна.

Синтаксис: <IMG src= URL атрибуты >

src этот атрибут указывает на файл графики, задавая его URL.

· alt В некоторых случаях, когда браузер не в состоянии загрузить файл с изображением, либо когда пользователь намеренно, с целью сэкономить время и деньги, отключает загрузку картинок, на экране высвечивается альтернативный текст типа здесь нарисован логотип фирмы . Синтаксис: <IMG alt=" описание ">

· align Этот атрибут задает расположение рисунка в окне и его выравнивание.

· height Этот атрибут задает высоту области в пикселях, отводимой в окне под изображение. В этом случае рисунок автоматически масштабируется браузером под заданный размер.

· hspace Этот атрибут задает пустое пространство в пикселях справа и слева от рисунка. Синтаксис: <IMG hspace= число >

· border Этот атрибут задает в пикселях толщину рамки вокруг рисунка. Синтаксис: <IMG border= число >

· vspace Этот атрибут задает пустое пространство в пикселях сверху и снизу от рисунка. Синтаксис: <IMG vspace= число >

Элемент <BANNER>

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

Синтаксис: <BANNER>Текст или рисунок </BANNER>

 

Элемент <MARQUEE>

используется с целью создания в документе бегущей строки.

<MARQUEE атрибуты> Текст строки </MARQUEE>

Элемент <A>

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

Произвольный текст <А href="Адрес ссылки"> текст для щелчка </а>

ссылка на рисунок выглядит так:

<А href =" Адрес ссылки"> <IMG src=" Ссылка на рисунок"> </а>

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

Второй шаблон задается в том случае, когда видимая часть гиперссылки представляет собой рисунок. Если для последнего определена рамка, то она тоже меняет цвет после использования гиперссылки. Если ссылка указывает на рисунок, который находится на локальном диске, она обязательно должна начинаться со слова file , то есть содержать указание на протокол:

h ref=" file: //Диск :\Путь к файлу"

или

href=" file: ///Диск: /Путь к файлу"

По умолчанию используется ссылка на файлы текущей папки (той, где расположен файл Web-страницы). В этом случае просто указывается имя файла, например: page2.html, photo35.jpg.

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

href =" . /Папка/Файл.тип"

Здесь на структуру вложенных папок указывает точка перед наклонной чертой. Если необходимо указать папку, которая находится на том же уровне вложения, что и текущая, то добавляют еще одну точку:

href=" , . /Папка/Файл.тип"

Подобно многим другим элементам языка, элемент А требует использования атрибутов.

Атрибуты:

name

Для задания имени используется атрибут name, который задает привязку ссылки в тексте, на которую и будет производиться ссылка. Синтаксис: <A name=имя> необязательный текст </A >

href

Для организации ссылки используется атрибут href, который задает адрес ссылки. Он может указывать или на имя ссылки в тексте, или на URL и имя файла.

Синтаксис: <A href="URL"> текст, для щелчка </A >

 

или же в тексте: <A href="#имя"> текст для щелчка </a>

id

Для организации ссылки используется атрибут id, который задает адрес ссылки. Атрибут id идентичен атрибуту name с той разницей, что он может вставляться в тэги, отличные от тэга <A>

Например: <P id="имя абзаца"> далее в тексте.. .<A href="# имя абзаца"> Ссылка</A >

title

Для визуализации подсказки ссылки используется атрибут title, который задает название ссылки

Синтаксис: <A title=" имя ссылки"> Ссылка</A >

Пример: ссылка наверх

accesskey

Атрибут используется для указания горячей клавиши, при нажатии на которую осуществляется переход по ссылке Синтаксис: <A accesskey=" имя клавиши"> Ссылка</A >

Пример: ссылка наверх - нажмите ALT+u

 

Ниже приведен пример использования ссылок и изображений: Файл номер один содержит изображение; текстовую и графическую ссылки на файл номер два. Файл два содержит пример бегущей строки и текстовую ссылку на файл один.

Файл 1:

<HTML><HEAD><TITLE> Пример номер 4_1 </TITLE> </HEAD><BODY LEFTMARGIN=50 ><H1 align=center> Примеры картинки и ссылки </H1> <BR><A HREF="prim4_2.html"> Перейти к файлу 4_2 </A><BR><IMG SRC="t1.jpg" ALT="Просто Картинка"> <P>Дальше картинка - ссылка</P><P><A HREF="prim4_2.html"><IMG SRC="f_ref.GIF"></A></P> </BODY></HTML>

Файл 2:

<HTML><HEAD><TITLE> Пример номер 4_2 </TITLE></HEAD><BODY LEFTMARGIN=50 ><H1 align=center> Примеры бегущей строки и возврата на другую страницу</H1> <MARQUEE атрибуты> Это бегущая строка</MARQUEE> <A HREF="prim4_1.html"> Перейти к файлу 4_1</A> </BODY></HTML>

 

4. Таблицы стилей

Таблицы стилей (style sheets) являются одним из самых эффективных нововведений HTML 4. Они позволяют изменять свойства элементов в соответствии с желаниями разработчика страницы.

Каскадный список стилей {Cascading Style Sheet, CSS), на который иногда ссылаются как на вложенную таблицу стилей, представляет собой набор спецификаций (называемых правилами), которые позволяют получить полный контроль над расположением элементов на Web-странице и внешним видом ее содержимого.

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

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

Таблица стилей представляет собой парный дескриптор <STYLE>, внутри которого последовательно описаны используемые стили – ОНИ ПРИМЕНЯЮТСЯ К СТАНДАРНЫМ ТЭГАМ !

<STYLE>

идентификатор_1 {атрибут_1: значение; атрибут_2: значение; ...}

идентификатор_2 {атрибут_1: значение; атрибут_2: значение; ...}

идентификатор_3 {атрибут_1: значение; атрибут_2: значение; ...}

</STYLE>

Чтобы Web-браузер смог применить правила каскадного списка стилей для форматирования и позиционирования элементов на Web-странице, правила списка стилей должны быть включены в HTML-код страницы. Для вставки стилей каскадного списка стилей на Web-страницу можно пользоваться четырьмя методами:

1. Внедрить список стилей на страницу.

2. Связать страницу с внешним списком стилей.

3. Импортировать список стилей.

4. Включить стили непосредственно в HTML-дескрипторы.

При внедрении списка стилей на Web-страницу браузер будет применять определенные в списке правила только к элементам данной страницы. Поэтому, если правила списка стилей уникальны для данной конкретной страницы, список можно внедрить в раздел заголовка Web-страницы. Если же правила одного и того же списка стилей применяются для двух и большего количества страниц, каскадный список стилей лучше сохранить во внешнем файле (предпочтительно с расширением .сss) и связывать или импортировать внешний список стилей.

 

Внедрение каскадного списка стилей

При внедрении каскадного списка стилей его правила вставляются между начальным и конечным дескрипторами стиля (<styiex/styie>) в разделе заголовка Web-страницы:

 

<HTML>

<HEAD>

<TITLE>Пример CSS № 1 </TITLE>

<style type="text/css">

<!--

h1 {color:blue; font-size:40px; font-family:verdana}

p {color:white; background:green; font-family:Aial; text-indent:2cm}

-->

</style>

 

</HEAD>

<BODY>

<h1>Это пример внедренный каскадный список стилей - переопределен заголовок</h1>

<P>Это пример номер 1 - внедренный каскадный список стилей</P>

</BODY>

</HTML>

 

Атрибут type дескриптора <styie> указывает Web-браузеру тип приведенного списка стилей. Как правило, все браузеры, не поддерживающие каскадные списки стилей, игнорируют код, содержащийся между начальным и конечным дескрипторами стиля, если значение атрибута type установлено равным "text/ess". К сожалению, некоторые устаревшие браузеры не распознают дескрипторы стиля. Несмотря на то что такие браузеры будут игнорировать HTML-дескрипторы, которых они не понимают, они будут выводить содержимое списков стилей на страницу в виде текста (вместо применения правил списка к элементам страниц). Чтобы предотвратить вывод на экран содержимого каскадных списков стилей в старых браузерах, необходимо заключить правила списков стилей в блок HTML-комментариев (< ! >). Web-браузеры, поддерживающие списки стилей, будут игнорировать дескрипторы комментариев и применять содержащиеся в списках правила.

 

Применение нескольких правил каскадных списков стилей

к одному селектору

Правила каскадных списков стилей позволяют легко форматировать текст Web-страниц сайта. С помощью списков стилей можно без труда изменить стиль любого HTML-дескриптора путем изменения одного правила списков стилей. Тем не менее, иногда требуется форматирование одного конкретного элемента Web-страницы (например, текста абзаца), которое отличается от форматирования такого же элемента в другой части страницы. Если для одного и того же селектора (в данном случае селектора р) создать несколько правил, Web-браузер будет форматировать элемент в соответствии с последним правилом списка стилей. Например, второе правило в приведенном ниже наборе правил заменяет действие первого правила:

<style type="text/css">

р {color:red; font-size:18pt}

p {color:black; font-size:12pt}

</style>

Как результат, текст всех абзацев будет выводиться шрифтом черного цвета размером 12 пунктов. Для применения к одному элементу Web-страницы нескольких правил списков стилей необходимо для каждого правила определить класс с уникальным именем. После определения класса его форматирование можно применить к элементу за счет указания в HTML-дескрипторе элемента атрибута class:

<р class="Имя_CSS_класса" >

Пример с несколькими стилями:

<HTML>

<HEAD>

<TITLE>Пример CSS № 2 </TITLE>

<style type="text/css">

<!--

p.redT {color:red; font-size:16pt}

p.grnT {color:green; font-size:12pt}

-->

</style>

 

</HEAD>

<BODY>

<p class="redT">Teкст, выводимый шрифтом красного цвета, размером 16 пунктов</p>

<p class="grnT">Текст, выводимый шрифтом зеленого цвета, размером 12 пунктов</p>

</BODY>

</HTML>

 

Связывание с внешним списком стилей

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

Как предполагает само имя метода, для связывания HTML-документа с внешним списком стилей используется дескриптор <link>. Вместо ввода правил списка стилей, в заголовок каждой Web-страницы вводится ссылка на файл списка стилей. После этого при изменении в файле списка стилей такого свойства, как, например, типа шрифта, его размера или цвета, все изменения будут сразу же отражаться на всех Web-страницах.

Для связывания Web-страницы с внешним каскадным списком стилей необходимо поместить в заголовок страницы дескриптор <link> следующего вида:

<HEAD>

<TITLE>Пример CSS № 3 </TITLE>

<LINK href="prim7_4css3.css" rel="stylesheet" type="text/css">

</HEAD>

Обратите внимание, что дескриптор <link> не нужно помещать между начальным и конечным дескрипторами (<style/style>). В приведенном примере дескриптор <link> указывает Web-браузеру на необходимость использования правил каскадного списка стилей, которые содержатся в файле styles.css. Атрибут type говорит о том, что в тестовом файле содержатся данные списка стилей, а атрибут href указывает имя файла и, при необходимости, путь к файлу, содержащему объявления каскадного списка стилей. Если Web-браузер не сможет найти файл внешнего списка стилей (указанный в атрибуте href дескриптора <link>), для вывода элементов страницы на экран будет использоваться правила, установленные в Web-браузере по умолчанию.

Во внешнем файле списка стилей (например, prim7_4css3.css) правила должны определяться следующим образом:

h1 {color:blue; font-size:20px; font-family:verdana}

p {color:white; background:green; font-family:Aial; text-indent:2cm}

Обратите внимание на отсутствие во внешнем каскадном списке стилей каких бы то ни было HTML-дескрипторов. Во внешнем, файле списка стилей должны содержаться только правила. Таким образом, внешний каскадный список стилей содержит те же правила, что и внутренний (т.е. внедренный) список. Тем не менее, в файле правила списка стилей не заключаются между начальным и конечным дескрипторами стиля и не содержат HTML-дескрипторов.

Пример со внешним стилем:

<HTML>

<HEAD>

<TITLE>Пример CSS № 3 </TITLE>

<LINK href="prim7_4css3.css" rel="stylesheet" type="text/css">

</HEAD>

<BODY>

<h1>Это пример внешнего каскадного списка стилей - форматирование взято с примера 1</h1>

<P>Это пример номер 3 - внешний каскадный список стилей</P>

</BODY>

</HTML>

 

 

Приложение 0. «Якорь»

 

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

должны быть расставлены метки:

<A name="Метка">Текст</a>

В больших сайтах часто используются метки для перехода к определенной части некоторой страницы:

<A name="http: //Адрес/Файл.htmltwerra > </a>

Для перехода к метке используется ссылка по такому шаблону:

<P>Переход к<А href="#Метка">метке</а> </p>

 

Приложение 1. Некоторые используемые термины

• Элемент(element) — конструкция языка HTML. Это контейнер, содержащий данные и позволяющий отформатировать их определенным образом. Любая Web-страница представляет собой набор элементов. Одна из основных идей гипертекста — возможность вложения элементов.

• Тег (tag) — начальный или конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-страницы теги заключаются в угловые скобки, а конечный тег всегда снабжается косой чертой.

• Атрибут(attribute) — параметр или свойство элемента. Это, по сути, переменная, которая имеет стандартное имя и которой может присваиваться определенный набор значений: стандартных или произвольных. Предполагается, что символьные значения атрибутов заключаются в прямые кавычки, но некоторые броузеры позволяют не использовать кавычки. Это объясняется тем, что тип атрибута всегда известен заранее. Атрибуты располагаются внутри начального тега и отделяются друг от друга пробелами.

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

• Фрейм(frame) — этот термин имеет два значения. Первое — область документа со своими полосами прокрутки. Второе значение — одиночное изображение в сложном (анимационном) графическом файле (по аналогии с кадром кинофильма).

• HTML-файл или HTML-страница— документ, созданный в виде гипертекста на основе языка HTML. Такие файлы имеют, как правило, расширения htm или html. В гипертекстовых редакторах и броузерах эти файлы имеют общее название документ

• Апплет(applet) — программа, передаваемая на компьютер клиента в виде отдельного файла и запускаемая при просмотре Web-страницы.

• Скрипт или сценарий(script) — программа, включенная в состав Web-страницы для расширения ее возможностей. Броузер Internet Explorer в определенных ситуациях выводит сообщение: Разрешить выполнение сценариев на странице? В этом случае имеются в виду скрипты.

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

CGI (Common Gateway Interface) — общее название для программ, которые, работая на сервере, позволяют расширить возможности Web-страниц. Например, без таких программ невозможно создание интерактивных страниц.

• Программный кодили просто код — аналог понятия текст программы.

• Код HTML— гипертекстовый документ в своем первоначальном виде, когда видны все элементы и атрибуты.

• World Wide Web, WWWили просто Web — Всемирная паутина, распределенная система доступа к гипертекстовым документам, существующая в Интернете. HTML является основным языком для создания документов в WWW. Изучая его, мы, фактически, изучаем часть этой системы, хотя область применения языка намного шире.

• Web-страница— документ (файл), подготовленный в формате гипертекста и размещенный в WWW.

• Сайт(site) — набор Web-страниц, принадлежащих одному владельцу.

• Броузер(browser) — программа для просмотра Web-страниц.

• Пользовательский агент(user agent) — броузер или другая программа, работающая на компьютере-клиенте.

• Загрузка(downloading) — копирование файлов с сервера на компьютер-клиент.

• URL (Uniform Resource Locator) или универсальный указатель ресурса -адрес некоторого объекта в Интернете. Типичный URL для WWW имеет вид:

http://www.название.домен/имя файла

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

• Базовый URL— часть адреса, которая является общей для всех ссылок текущей Web-страницы.

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

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

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

Приложение 2. Управление цветом

Для удобства работы с цветами используются следующие константы:

BLACK BLUE NAVY LIME GREEN SILVER AQUA Черный Синий Темно-синий Светло-зеленый Зеленый Серый Голубой OLIVE RED MAROON GRAY PURPLE YELLOW WHITE Оливковый Красный Коричневый Серый Фиолетовый Желтый Белый

 

Вопросы для самоконтроля

1. Что позволяет сделать язык HTML?

2. Как проверяются созданные страницы?

3. Какова основная структура HTML- документа?

4. Каковы правила использования тэгов?

5.Перечислить основные тэги для работы с текстом.



<== предыдущая лекция | следующая лекция ==>
НЕКОТОРЫЕ ЭЛЕМЕНТЫ ОФОРМЛЕНИЯ | Характеристика СУБД HyTech


Карта сайта Карта сайта укр


Уроки php mysql Программирование

Онлайн система счисления Калькулятор онлайн обычный Инженерный калькулятор онлайн Замена русских букв на английские для вебмастеров Замена русских букв на английские

Аппаратное и программное обеспечение Графика и компьютерная сфера Интегрированная геоинформационная система Интернет Компьютер Комплектующие компьютера Лекции Методы и средства измерений неэлектрических величин Обслуживание компьютерных и периферийных устройств Операционные системы Параллельное программирование Проектирование электронных средств Периферийные устройства Полезные ресурсы для программистов Программы для программистов Статьи для программистов Cтруктура и организация данных


 


Не нашли то, что искали? Google вам в помощь!

 
 

© life-prog.ru При использовании материалов прямая ссылка на сайт обязательна.

Генерация страницы за: 0.29 сек.