Файловый архив студентов. Файловый архив студентов.
1295 вузов, 5022 предметов.
/ Регистрация
FAQ Обратная связь Вопросы и предложения
Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Белорусский государственный университет
Предмет:
[НЕСОРТИРОВАННОЕ]
Файл:
Веб программирование.Начало пути.doc
Скачиваний:
0
Добавлен:
04.01.2020
Размер:
7.81 Mб
Скачать
☆
►Содержание►

Валидация документов

Валидацией называется проверка документа на соответствие стандартам (www.w3c.org). Валидация широко применяется для проверки XML – документов, и для XHTML - документов.

Способы проверки веб-страниц на наличие ошибок делятся на он­лайновые и локальные. Онлайновые предназначены для проверки стра­ниц через Интернет, а локальные для проверки документов на текущем компьютере. По адресу http://validator.w3.org располагается распростра­ненный инструмент для проверки отдельных страниц на валидность. Этот сайт предлагает три способа проверки: по адресу, проверку локаль­ного файла, проверку введенного в форму кода. Если сайт уже опублико­ван в Интернете, то любую страницу можно проверить, вводя в текстовое поле ее адрес. Так, вводя http://htmlbook.ru в форме «Validate by URI» и нажав кнопку Check, получим сообщение о том, валидный документ или нет. Хотя в текстовом поле вводится адрес сайта, проверяется не сайт це­ликом, а только главная страница.

Документы, еще не выставленные в Интернете, можно проверить с помощью формы, озаглавленной «Validate by File Upload» (валидация за­груженных файлов. Вначале следует указать путь к HTML-файлу, после чего нажать кнопку Check . Файл будет загружен на сервер и проверен на ошибки.

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

Для браузера Firefox может использоваться расширение HTML Validator. Эта программа построена по той же технологии, что и валида­тор W3C, но не требует подключения к Интернету и работает прямо «на лету». Cкачать можно по адресу http://users.skynet.be/mgueury/mozilla/

Каскадные таблицы стилей css

CSS (Cascading Style Sheets - Каскадные таблицы стилей) – это тех­нология описания внешнего вида документа, написанного языком раз­метки. Основная идея CSS состоит в том, чтобы отделить описание логи­ческой структуры документа (HTML) от его внешнего вида(CSS).

Таблицы стилей CSS позволяют уменьшить размер HTML кода, улучшить его читаемость, сократить объем работы разработчиков, менять внешний вид документа без изменения HTML кода. Одна таблица стилей может применяться к нескольким документам. CSS используется как средство оформления веб-страниц в формате HTML, XHTML и XML.

Использование CSS позволяет ускорить работу web-приложений за счет сокращения загружаемого кода и за счет кэширования файлов (однократная загрузка файла с последующим его сохранением.

Способы включения каскадных таблиц стилей

Существует несколько способов включения CSS в HTML-документ:

Встраивание стиля (inline styles) с помощью атрибута style в один из тегов HTML – документа. Например:

<p style="font-size: 21px; color: green;">текст</p>

<span style="color:red; background-color:yellow; font-variant: small-caps">

Красный текст на желтом фоне, маленькими заглавными буквами.</span>

Стили часто встраиваются в теги p, h, body, div, span. Cпособ встраивания стиля нарушает идеологию CSS, и не рекомендуется.

Внедрение таблицы стилей в заголовок HTML документа между тегами <head> и </head> с помощью тега style. При этом CSS-стили располагаются между открывающим и закрывающим тегами style и содержат определения для всего HTML-документа:

<head>

<style type="text/css">

<!—описание стиля-->

</style>

</head>

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

Связывание с внешней таблицей стилей. Если предполагается ис­пользовать один стиль для нескольких страниц документа или несколь­ких документов, следует описать стиль в отдельном файле с расширением .CSS, например style.css. Для подключения затем стилевого файла используется тег <link>, расположенный внутри тега <head>.

<head>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

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

Импортирование - добавление внешней таблицы стилей при по­мощи правила @import. В отличие от HTML-тега <link> правило @import является языковой конструкцией CSS и добавляется в элемент style:

<head>

<style type=”text/css”>

@import "style.css";

</style>

</head>

Свойство @import таблицы стилей следует задавать в начале стиле­вого блока или связываемой таблицы стилей перед заданием остальных правил. Значением свойства @import является URL файла, содержащего таблицы стилей. Импортирование позволяет встраивать в документ таблицу стилей, расположенную на сервере.

Таблицы стилей не чувствительны к регистру. Текстовые коммента­рии в таблицах стилей оформляются так же, как и в языке Си:

h1{ color: red } /* color is red */

Стили

Стиль – это правило, описывающее форматирование фрагмента до­кумента. Каждое правило состоит из селектора и определения. Селектор определяет, на какую часть документа распространяется правило, а оп­ределение задает значения его свойств в фигурных скобках.

Selector{

Property1: value1 value2;

Property2: value3 value4;

Property3: value5 value6;

}

Селекторы правил CSS могут быть селекторами элементов (тегов HTML), селекторами классов, селекторами псевдоклассов, селекторами идентификаторов, селекторами потомков и др.

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

Селектором может быть любой элемент HTML, например

html {color: black;}

p {color: red;}

h2 {font-size: 110 %;}

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

Ниже приводится пример кода CSS, встраиваемого в теги HTML.

<DOCTYPE html>

<html>

<head>

<title>pr1css-Пример css, встраиваемого в HTML страницу</title>

<style type="text/css">

<!-- body { color: gold; background: blue; font: bold 14px comic sans ms; text-align: justify; margin: 10px; } -->

html {color: black; }

p {color: red;}

h1{font-family: arial; font-weight: bold; font-size: 14pt; color:green;}

h2{font-family: arial; font-size: 110 %; color:black;}

h3 {font-weight:bold; color: red;}

</style>

Текст из раздела Head

</head>

<body>

<h1>Примеры CSS - это заголовок H1</h1>

<p>

пример кода CSS, встраиваемого в HTML страницу. <br>

Селектором является тег body

</p>

<h2>Примеры CSS - это заголовок H2</h2>

<h3>h3-Жирный заголовок красного цвета </h3>

Этот текст имеет вид, определенный таблицей стилей: золотые буквы на голубом фоне, <br>жирный шрифт Comic Sans MS размером 14 пикселей, выровненный по обоим краям с <br> отступами со всех сторон 10 пикселей.

</body>

</html>

Здесь приведен устаревший способ включения стиля CSS в тег body. Для совместимости со старыми браузерами, не понимающими CSS, содержимое элемента <style> ранее заключали в HTML комментарий. Новые браузеры поймут, что в комментариях заключена таблица стилей и подключат ее.

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

h1, h2 {

font-family: arial

}

Если селектор имеет несколько определений:

h1{font-weight:bold} h1 {font-size: 14pt}

то они записываются через точку с запятой:

h1 {font-weight: bold; font-size: 14pt;}

Наследование. При определении стиля элемента, вложенные эле­менты наследуют свойства головного элемента. Например, если в пара­графе <p> задается красный цвет шрифта, то выделенный с помощью <b> текст также будет красным:

<p style=”color: red;”>Внутри параграфа с красным цветом текста, <b>выделенный текст</b> наследует цвет головного тега.</p>

Наследование удобно использовать для описания свойств элементов по умолчанию. Для этого достаточно описать стиль тега <body>, порож­дающего остальные элементы документа.

При сложении стилей приоритет имеют атрибуты, определенные в более конкретном стиле. Стили в порядке убывания конкретности: <body>, остальные теги html, CSS – классы, встроенные стили.

CSS - классы

Чтобы иметь возможность отображать одни и те же элементы HTML в разных местах по-разному, необходимо использовать CSS-классы. Это позволяет для одного тега использовать несколько классов и, соответственно, стилей. Свойства класса присваиваются определенному тегу с помощью атрибута class: class="classname". Имя класса и его свойства перед этим должны быть определены в виде селектора класса: .classname{свойства}

Это можно продемонстрировать на следующем примере:

<html>

<head>

<title>Использование классов</title>

<style type="text/css">

html{color:green;}

.font1 {

color: yellow;

background: red;

}

.font2 {

color: blue;

background: yellow;

}

</style>

</head>

<body>

<span class="font1">Желтый текст на красном фоне</span>

<span class="font2">Синий текст на желтом фоне</span>

<table class="font2" border="2">

<tr>

<td>Это ячейка1 таблицы</td>

<td>это ячейка2 таблицы</td>

</tr>

</table>

</body>

</html>

Два класса «font1» и «font2» задают цвет фона и изображения. Эти классы были применены к тегу <span> и таблице.

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

имя_тега.имя_класса {свойства}

Теговый класс сработает только в том теге, для которого он предназначен, а для всех остальных тегов будет проигнорирован. Рассмотрим, например, класс select для тега <span>:

<html>

<head>

<title>pr2css-Использование классов</title>

<style type="text/css">

.clasname{ font-size: 9pt; color:green }

span.select {color: red;}

</style>

</head>

<body>

<p class=clasname>Стиль работает</p>

<p class=select>Стиль не работает</p>

Здесь мы выделили <span class="select">часть текста красным.</span>

</body>

</html>

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

<p class=”urgent warning”>Опасность! Предупреждение!</p>

.warning.urgent {font-style: italic;}

Объединяя 2 селектора класса, можно выбрать только те элементы, которые имеют оба имени класса, стоящие в любом порядке.

В каких тегах лучше определять стили посредством класса? Чаще всего для этого используется одна из следующих конструкций:

<p class="big">Что-то</p>

<td class="big">Что-то</td>

<div class="big">Что-то</div>

<span class="big">Что-то</span>

ID-селекторы

ID-селекторы используются для определения уникальных частей веб-страницы типа <header>, <footer>. Идентификаторы используются, когда необходимо определить разделы страницы, которые встречаются один раз. Для стиля, используемого неоднократно, применяются классы.

При объявлении стиля перед ID-селектором ставится #:

#green {color: green;}

Затем HTML элементу, подлежащему форматированию, присваива­ется соответствующее значение атрибута id:

<footer id=”green”>Text</p>.

Символы “#” и ”.” используются только при описании стилей. При вставке имени идентификатора или класса в теги их указывать не нужно!

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]
Помощь Обратная связь Вопросы и предложения Пользовательское соглашение Политика конфиденциальности