- •21. Теги включения ссылок, изображений, мультимедийных объектов.
- •22. Организация Web-страниц. Фреймы. Формы.
- •23. Каскадные таблицы стилей. Способы определения стилей. Элементы стилей. Синтаксис стилей.
- •Синтаксис стилей
- •24. Способы динамического управления страницей. Команды Dynamic html. Скрипты.
21. Теги включения ссылок, изображений, мультимедийных объектов.
Подключить изображение:<BODY>
<P>Here's a closeup of the Grand Canyon:
<OBJECT data="canyon.png" type="image/png">
This is a <EM>closeup</EM> of the Grand Canyon.
</OBJECT>
</BODY>
<BODY>
<P>I just returned from vacation! Here's a photo of my family at the lake:
<IMG src="http://www.somecompany.com/People/Ian/vacation/family.png"
alt="A photo of my family at the lake.">
</BODY>
22. Организация Web-страниц. Фреймы. Формы.
HTML-страница, создающая два фрейма, в общем случае может выглядеть следующим образом:
<html>
<frameset rows="50%,50%">
<frame src="page1.htm" name="frame1">
<frame src="page2.htm" name="frame2">
</frameset>
</html>
Формы.
<FORM>
<INPUT TYPE="TEXT" WIDTH="28">
<INPUT TYPE="SUBMIT">
<INPUT TYPE="RESET">
</P>
</FORM>
23. Каскадные таблицы стилей. Способы определения стилей. Элементы стилей. Синтаксис стилей.
Каскадные (многоуровневые) таблицы стилей - cascading style sheets (CSS) - это мощный стандарт на основе текстового формата, определяющий представление данных в броузере.
Если формат HTML предоставляет информацию о составе документа, то таблицы стилей сообщают как он должен выглядеть. Таким образом каскадные таблицы стилей дают возможность хранить содержимое отдельно от его представления.
Методы определения стилей
Каскадные таблицы стилей CSS>
Методы определения таблицы стилей
1. Связывание (linking). HTML-документ с помощью тега
<head>
<link rel="stylesheet" type="text/css" href=" style.css ">
<link rel="stylesheet" type="text/css" href="http://www.htmlbook.ru/main.css">
</head>
Связывается с внешним файлом, содержащим таблицу стилей и имеющим расширение .css (например style.css).
Можно создать в любом текстовом редакторе.
Style.css
.test1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: normal;
color: #F3F4BA;
text-align: justify;
text-indent: 10pt;
padding: 8px;
line-height: 20px;
padding-right: 10px;
padding-left: 10px;
}
.t_akv {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
color: #33CCCC;
text-indent: 15px;
line-height: 20px;
padding-right: 60px;
padding-left: 60px;
font-weight: bold;
text-align: justify;
}
2. Встраивание (Embeding). Таблица стилей определяется в разделе <style>, который располагается в разделе <head>.
<head>
<style>
H1 {font-size: 24px; border: 1px black solid}
H1.kr {color: red}
.d1 {text-decoration: none; font: bold 12px; color:blue}
</style>
</head>
3. Вложение (Inline). Определение стиля для конкретного элемента (в разделе <body>) с помощью параметра style, размещаемого внутри тега элемента.
<div style =”набор деклараций”>элемент</div>
4.Импорт(Import). Импорт внешнего файла CSS с помощью директивы @IMPORT.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<style type="text/css">
@import url("style.css");/*Стили отображения главной таблицы*/
</style>
НАЗВАНИЕ_ЭЛЕМЕНТА {свойство: значение;},
Где НАЗВАНИЕ_ЭЛЕМЕНТА – имя HTMLтега (H1, P, TD, A и т. д.), а параметры в фигурных скобках – список свойств элемента и присвоенных им значений. Более подробно команды языка CSS мы рассмотрим чуть позже.
ример: .b-с {font-weight: bold; text-align: center}
– описание стиля для класса b-с
Все элементы класса b-с будут отображаться жирным шрифтом с выравниванием по центру страницы (или ячейки таблицы). <P CLASS="b-с">Текст параграфа</P>
– параграфу присвоен стиль класса b-с.
<TD CLASS="b-c">текст</TD>
– ячейке таблицы присвоен стиль класса b-c.
Соответственно, оно применяется совместно с так называемыми «блоковыми элементами», то есть элементами, поддерживающими отображение текстовых массивов: P, H1-H6, TD, TR и некоторыми другими.