Значения тэгов разметки документа
Тэги разметки - специальные команды для расположения на экране текста, графики, видео и аудио фрагментов, а также команды, служащие для связи с другими HTML-документами и ресурсами Интернет.
Основные тэги разметки
<HEAD> и </HEAD>. Между этими тэгами располагается информация о документе. <TITLE> и </TITLE>. В этих тэгах заключается название странички, которое будет выведено в рамке окна программы просмотра. <BODY> и </BODY>. "Тело" документа (текст, графика и т.д.) располагается между этими двумя тэгами, то что выводится на экран компьютера. Параметры тэга <BODY>: BGCOLOR - цвет фона (<BODY BGCOLOR ="#FFFFFF">) BACKGROUND - "обои" или бэкграунд TEXT - цвет текста LINK - цвет гипертекстовой связи (ссылки) VLINK - цвет уже посещенной ссылки ALINK - цвет активной ссылки
Тэги, служащие для форматирования текста
<P> и </P> Тэги, служащие для выделения абзацев. Новый абзац всегда отделяется от предыдущего пустой строкой. <BR> Тэг, служащий для переноса текста на другую строку. Может также служить для отделения графики от текста на интервал. <HR> Тэг, служащий для логического разделения текста горизонтальной линией. <PRE> и </PRE> Между этими тэгами располагается предварительно отформатированный текст. На экран он выводится шрифтом типа "курьер".
Параметры выравнивания
Используются в <P> и <H*> ALIGN=LEFT - выравнивание по левому полю ALIGN=RIGHT - выравнивание по правому полю ALIGN=CENTER - выравнивание по центру
Тэги выравнивания
<LEFT> и </LEFT> - выравнивание по левому полю <RIGHT> и </RIGHT> - выравнивание по правому полю <CENTER> и </CENTER> - выравнивание по центру
Заголовки, служащие для выделения логических частей текста
<H1> и </H1> Заголовок первого уровня. <H2> и </H2> Заголовок второго уровня. <H3> и </H3> Заголовок третьего уровня. <H4> и </H4> Заголовок четвертого уровня. <H5> и </H5> Заголовок пятого уровня. <H6> и </H6> Заголовок шестого уровня.
Тэги для выделения текста и шрифта
<B> и </B> Тэги для выделения текста (слов, букв) жирным шрифтом. <I> и </I> Тэги для выделения текста (слов, букв) курсивным шрифтом, типа Italic. <U> и </U> Текст, расположенный между двумя этими тэгами, будет подчеркнут. <FONT SIZE=+n> и </FONT> <FONT SIZE=-n> и </FONT> Тэги для изменения размера шрифта. <FONT COLOR="#0000FF> и </FONT> Тэги для изменения цвета шрифта.
Тэги для формирования списков
<OL> и </OL> Тэги, показывающие начало и конец нумерованного списка <UL> и </UL> Тэги, показывающие начало и конец маркированного списка. <LI> Элемент списка
<DL> и </DL> Тэги, показывающие начало и конец глоссария. <DT> Термин глоссария, располагается без отступа от левого поля страницы. <DD> Описание термина, располагается с отступом от левого поля страницы. Тэги-команды для вставки в текст объектов нетекстовой информации <IMG SRC ="file.gif"> или <IMG SRC =" file.jpg"> - команда для вставки графического изображения <IMG SRC =" file.wav"> - команда для вставки звукового фрагмента <IMG SRC =" file.avi"> - команда для вставки видео фрагмента
Параметры графического изображения
WIDHT - ширина картинки в пикселях. HEIGHT- высота картинки в пикселях. ALIGN - выравнивание (ALIGN=LEFT - выравнивание по левому полю, ALIGN=RIGHT - по правому полю, ALIGN=TOP - по верхней границе, ALIGN=BOTTOM - по нижней границе, ALIGN=MIDDLE или CENTER - по центру). HSPACE - горизонтальный отступ от графического изображения. VSPACE - вертикальный отступ. ALT - альтернативный текст, служит для обозначения изображения.
Команды, служащие для гиперсвязи с другими HTML-документами и ресурсами Интернет
<A HREF="fail.htm"> и </A> или <A HREF="http://www.ru"> и </A> - гиперсвязи <ADDRESS><A HREF="mailto:katerina@belti.ru"> mailto:katerina@belti.ru</ADDRESS> - гиперсвязь с адресом электронной почты
Таблицы
Таблица - сетка для показа данных в строках и столбцах, а также средство для форматирования текста <TABLE> и </TABLE> Тэги для вставки таблицы в HTML документ Параметры Тэга <TABLE> BGCOLOR - цвет фона BORDER - ширина бордюра или границы таблицы WIDHT - ширина таблицы Тэги разметки таблицы <CAPTION> и </CAPTION> - название таблицы, имеет параметр ALIGN=TOP - выравнивание над таблицей и ALIGN=BOTTOM - под таблицей. <TR> и </TR> Строчка таблицы. Может иметь параметры BGCOLOR - цвет фона внутри строки; ALIGN=LEFT, RIGHT, CENTER - выравнивание внутри строки; VALIGN=TOP, BOTTOM, MIDDLE - вертикальное выравнивание внутри строки таблицы. <TD> и </TD> Столбец таблицы. Может иметь параметры BGCOLOR - цвет фона под столбцом; ALIGN=LEFT, RIGHT, CENTER - выравнивание внутри столбца; VALIGN=TOP, BOTTOM, MIDDLE - вертикальное выравнивание; COLSPAN растягивание клетки на несколько столбцов, ROWSPAN - растягивание клетки на несколько строк. <TH> и </TH> Заголовок столбца. Может иметь параметры BGCOLOR - цвет фона под названием; ALIGN=LEFT, RIGHT, CENTER - выравнивание; VALIGN=TOP, BOTTOM, MIDDLE - вертикальное выравнивание; COLSPAN, ROWSPAN - растягивание клетки на несколько столбцов или строк; WIDHT - ширина названия.
Фреймы
Рамки-фреймы - средство для разделения экрана на несколько областей, в каждой из которых отображается содержимое отдельной Web-странички или даже целого Web-сайта. <FRAMESET> и </FRAMESET> Тэги для создания рамки Параметры Тэга <FRAMESET> COLS - подразделяют экран на определенное количество колонок (вертикальных) ROWS - подразделяют экран на определенное количество колонок (горизонтальных) BORDCOLOR - цвет рамки BORDER - ширина бордюра FRAMEBORDER - граница рамки (FRAMEBORDER=YES - есть граница, FRAMEBORDER=NO - нет границы, FRAMESPACING=n - ширина границы) <FRAME> Тэг для описания рамки (<FRAME SRC="file.htm">). Параметры тэга <FRAME> SCROLLING - параметр для регулировки полосы прокрутки: SCROLLING=YES - полоса прокрутки будет всегда SCROLLING=NO - полосы прокрутки не будет SCROLLING=AUTO - полоса прокрутки появляется только в случае необходимости MARGINWIDHT и MARGINHEIGHT - параметры, которые управляют отступом внутри рамок, служат для выравнивания графического изображения внутри рамки NORESIZE - параметр, указывающий на то, что размер фрейма никогда не будет меняться. A link to <A HREF="file.htm" TARGET="frame2"> file.htm</A> - Связь между фреймами TARGET - атрибут связи между фреймами. Имеет несколько значений: _BLANK загружает содержимое страницы, заданной ссылкой, в новое пустое окно. _SELF содержимое страницы, заданной ссылкой, в окно, которое содержит ссылку. _PARENT загружает содержимое страницы, заданной ссылкой, в окно, являющееся непосредственным владельцем набора фреймов. _TOP содержимое страницы, заданной ссылкой, в окно, игнорируя используемые фреймы. Обработка браузеров, не поддерживающих фреймы: <FRAMESET> ...Здесь располагаются фреймы </FRAMESET> <NOFRAMES> <BODY> ...Здесь располагается текст без фреймов <BODY> </NOFRAMES> В секции, предназначенной для тех пользователей, которые "не видят" фреймы, можно расположить какой-нибудь пояснительный текст.
Бегущая строка
<MARQUEE>ТЕКСТ</MARQUEE> - Тэг, создающий бегущую строку. <MARQUEE DIRECTION=left>TEKCT</MARQUEE> - бегущую строку нужно направить справа налево. <MARQUEE DIRECTION=right>TEKCT</MARQUEE> - движение слева направо. scroll - стандартное движение от правого края к левому slide - надпись один раз пробегает от правого края к левому, где и остается. alternate - движение от правого края страницы к левому и обратно. Бесконечный цикл. <MARQUEE LOOP=n BEHAVIOR=scroll>TEKCT</MARQUEE> - Ограничение числа циклов. Значение n оператора LOOP указывает число повторений цикла. <MARQUEE WIDHT=n>TEKCT</MARQUEE> - указать ширину участка, занимаемого бегущей строкой, где n - ширина той части страницы, на которой расположена бегущая строка. Значение n указывается как в пикселях, так и в процентах от общей ширины видимой части страницы. <MARQUEE scrollamount=n>TEKCT</MARQUEE> - Регулировка движения надписи по экрану. Здесь n - число пикселей. <MARQUEE scrolldelay=t>TEKCT</MARQUEE> В данном случае переменная величина - время t - измеряется в миллисекундах. Метод задания скорости состоит в указании времени, спустя которое текст будет перерисован на экране заново. <FONTSIZE=n><MARQUEE> ТЕКСТ</MARQUEE></FONT> - возможность указывать величину шрифта текста в строке. <MARQUEE BGCOLOR=n> ТЕКСТ </MARQUEE> - окрасить поверхность бегущей строки в какой-либо цвет, где n, как это бывало и раньше, можно указать в виде шестнадцатеричного числа, либо написав его название <MARQUEE HEIGHT=n>ТЕКСТ</MARQUEE> - указать высоту бегущей строки, задавая величину n в пикселях
Общее:
селектор—любой элемент, определяемый при помощи css: тег (body), класс (.class1), ID (#mainlogo).
декларация—совокупность свйоств и значений селектора; все, что находится внутри фигурных скобок ({})
свойство—отдельный параметр, определяющий какое-либо свойство селектора (извините за тавтологию =] ).
Единицы измерения:
in—Дюймы
pt—Пункты (типографические)
px—Пикселы
cm—Сантиметры
pc—Пика
em—Высота кегльной площадки шрифта (или длина тире «—»)
mm—Миллиметры
ex—Высота строчной буквы «x» в шрифте
%—Проценты
Если величина равна нулю, единицы измерения можно не задавать.
Свойства шрифта:
Позволяют использовать сокращенную запись.
font-family—название шрифта или семейства шрифтов. body{font-family: "Times New Roman", sans-serif;} Если имя шрифта содержит пробелы, его следует заключать в кавычки.
font-style—стиль начертания шрифта: normal—обычный шрифт, italic—курсив, oblique—наклонный. body {font-style: italic;}
font-variant—варианты начертания шрифта: normal—обычный, small-caps—«маленькие прописные» body {font-variant: small-caps;}
font-weight—«жирность шрифта»: normal—обычный, bold—полужирный, bolder—толще окружающего текст, lighter—тоньше окружающего текста. body {font-weight: bolder;}
font-size—размер шрифта, задаётся в любых единицах. body {font-size: 150px;}
Свойства текста:
text-decoration—эффекты оформления текста: none—нет эффектов, underline—подчеркивание, line-through—зачеркивание, overline—надчеркивание. a:visited {text-decoration: line-through;}
text-transform—трансформации текста: none—без изменений, capitalize—первая буква каждого слова становится заглавной, uppercase—все буквы заглавные, lowercase—все буквы прописные. a {text-transform: uppercase;}
text-align—выравнивание текста: left—по левому краю, center—по центру (аналогично тегу <center>), right—по правому краю, justify—по ширине колонки. h1 {text-align: center;}
text-indent—задает величину отступа красной строки текста, измеряется в любых единицах. p {text-indent: 0.5em;}
line-height—высота строки, задается в любых единицах. p {line-height: 150%;}
word-spacing—расстояние между словами в тексте, измеряется в любых единицах, можно использовать отрицательные значения. p {word-spacing: -1em;}
letter-spacing—интервалы между буквами, измеряется в любых единицах. a {letter-spacing: 30px;}
Цвет и фон:
Позволяют использовать сокращенную запись.
color—цвет элемента. p {color: #DDFFEE;}
background-color—цвет фона элемента. p {background-color: #F7F7F7;}
background-image—фоновое изображение: none—нет фонового изображения, url(http://adress.com/img.jpg)—абсолютный или относительный путь до изображения. p {background-image: url(http://adress.com/img.jpg);}
background-attachment—поведение фонового изображения: scroll—прокручивается вместе со страницей, fixed—не прокручивается. body {background-attachment: fixed;}
background-position—позиция фона относительно окна браузера, задаётся в любых величинах или при помощи ключевых слов: top, center, bottom, left, center, right. body {background-position: center left;}
background-repeat—повторение фонового рисунка: repeat—фон повторяетяс как обычно—мозаикой, repeat-x—повтор идет вдоль оси x, repeat-y—вдоль оси y, no-repeat—фон не повторяется. body {background-repeat: repeat-x;}