русс | укр

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

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

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

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


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

Анатомия WEB страницы


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


 

<HTML></html>

Тег <HTML> обозначает начало HTML документа, соответственно тег </html> - обозначает конец этого документа.

<HEAD></head>

Теги обозначают область заголовка Web-страницы. В области заголовка размещаются теги: <BASE>, <META>, <TITLE>, <LINK>, <OBJECT>, <SCRIPT>, <STULE>.

<TITLE></title>

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

<META>

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

 

<META HTTP-EQUIV=”Content-Type” CONTENT=”text/html”; CHARSET=Windows-1251”>

 

Атрибут CONTENT указывает броузеру, что содержанием документа является HTML документ. Атрибут CHARSET, указывает броузеру, кодировку CP-1251(Windows).

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

 

<META HTTP-EQUIV=”refresh” CONTENT=”20; URL=http://www.demo.ru/index.htm”>

 

Значение атрибута HTTP-EQUIV=”refresh” – указывает программе просмотра, что нужно загрузить страницу, указанную в параметре URL, по прошествии промежутка времени указанного в параметре CONTENT.

Общая структура тега <META> такова:

 

<META NAME=”Имя определяемого параметра” CONTENT=”значение параметра”>

 

Атрибут NAME содержит имя определяемого параметра, а CONTENT — значение параметра, определенного атрибутом NAME. Например, если вы хотите дать сведения об авторе документа, это можно сделать следующим образом:



 

<META NAME=”Author” CONTENT=”имя создателя странички”>

 

Ключевые слова необходимы для индексации вашей странички в поисковых системах. Можно разместить ключевые слова в теге <META>.

 

<META NAME=”Keywords” CONTENT=”ключевые слова, перечисляемые через запятую”>

 

<META NAME="Content-Type" CONTENT="Описание страницы">

 

Описание типа и характеристик документа


<META NAME="Generator" CONTENT="Название HTML-редактора">

Указание приложения, в котором был создан документ

 

<BASE>

Элемент для задания базового адреса (URL) для ссылок. Иными словами, путь к файлам может быть разбит на две части: абсолютную и относительную. В данном теге указывается общий начальный фрагмент пути. Это позволяет опускать начальную часть адреса в ссылках документа.

<BASE href=”http://адрес/путь1”> Фрагмент «путь1» не является обязательным и при формировании полного адреса будет отброшен. Если в документе есть ссылка вида:

<A href=”путь2/документ.htm”>текст ссылки<a> то полный адрес будет соответствовать адресу:

http://адрес/путь2/документ.htm

При задании базового адреса для локального диска, используется конструкция:

<BASE href=”file://C:\путь\”>

 

Атрибут target=”значение”, указывает в каком окне будет отображен объект на который указывает ссылка <a>. Атрибут предназначен для переадресации ссылки в другие кадры. Существует четыре специальных значения: _blank, _self, _parent, _top:

target=_blank - Обозначенный ссылкой документ всегда загружается во вновь открытое окно

target=_self - Документ загружается в этот же кадр или окно как исходный

target=_parent - Загрузка документа в родительское окно или набор кадров, содержащий кадр с гипертекстовой ссылкой. Если ссылка находится в окне или кадре верхнего уровня, это эквивалентно значению _self

target=_top - Загрузка документа в окно, содержащее гипертекстовую ссылку, с заменой всех кадров, отображенных в окне в данный момент

 

<LINK>

Указывает ссылку на что либо.

<LINK rel=”next” href=”glava2.htm”> В данном примере описана метка next отсылающая к файлу glava.htm Метку next можно использовать с тегом ссылки <A href=”#next”>текст ссылки</a> в теле документа.

<link rel=stylesheet type="text/css" href="/css/forum.css"> Используя данную конструкцию можно указать на файл с таблицами стилей. В атрибуте href указывается собственный URL к вашему файлу CSS. Таблица стилей – это, по существу, описание правил, задающих параметры представления отдельных элементов на экране на языке HTML. Эти правила легко описать, используя комбинации тегов, названий и свойств переменных.

Пример содержимого файла format.css:

H1 {color: maroon; font-style: italic; text-align: center; font-size: 14pt}

P {font-family: Arial, Verdana; font-weight: bold; text-indent: 25}

<STYLE></style>

Предназначен для задания стилей оформления. Простейшим способом определения стиля является задание его непосредственно для выбранного элемента:

<P style=”font-size: 10pt; font-style: italic; color: blue”> Здесь для абзаца выбран размер шрифта, курсив и синий цвет букв. В отличие от атрибутов имя свойства и значение разделяется двоеточием, а свойства отделяются друг от друга точкой с запятой. Атрибут style можно использовать со многими командами.

Для изменения свойств одного или нескольких тегов требуется в разделе HEAD указать их новые свойства. Например:

<STYLE type=”text/css”>

H1 {color: maroon; font-style: italic; text-align: center; font-size: 14pt}

P {font-family: Arial, Verdana; font-weight: bold; text-indent: 25}

</style>

В данном примере заданы стиль для тега заголовка первого уровня: цвет текста, начертание шрифта, выравнивание текста, размер шрифта. Для абзаца: наименование шрифта, полужирный шрифт, отступ для абзаца. При использовании тегов H1 и P по умолчанию будут приняты свойства указанные в теге STYLE.

Можно создать стиль для класса объектов. Класс создается для использования указанных в нем свойств к нескольким тегам одновременно.

<STYLE type=”text/css”>

.Base <!—Название класса задается Вами-->

{ color: red;

weight: medium;

margin-top: 10 px;

font-size: 250 px;

line-height: 250 px;

font-family: Times } </style>

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

Для того чтобы применить данный класс к тексту используем атрибут CLASS тега <DIV>:

<DIV class=base>Пример использования класса</div>

Аналогичное использование данного класса и в других тегах.

Можно создавать подкласс, который будет наследовать свойства родительского класса. Например: <STYLE type=”text/css”>

H3 {font-size: 14pt, font-family: Monaco, color: #0000ff}

H3.second {color: #ff00000}</style>

<H3 class=second>Шрифт Монако красного цвета</h3>

<H3>Шрифт Монако синего цвета</h3>

Пример наложения строк на экране:

<HTML>

<HEAD>

<STYLE type="text/css">

<!--

.base {color: red;

weight: medium; ширина изображения элемента

margin-top: 10 px; верхний отступ

font-size: 250 px; размер шрифта

line-height: 250 px} настояние между соседними строками

 

.layer1 {color: blue;

weight: medium;

margin-top: -130 px;

font-size: 65 px;

line-height: 45 px}

-->

</style>

</head>

<BODY>

<DIV class=base>My</div>

<DIV class=layer1>Style</div>

</body>

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

Подробней о стилях смотри главу «Создание и применение стилей».



<== предыдущая лекция | следующая лекция ==>
От автора | Форматирование текста


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


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

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

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


 


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

 
 

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

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