- •№1 Знать расшифровку и основной смысл понятий: dns, html, xhtml, xml, sgml, ip, http, w3c, ietf, css, ecmaScript, dom, php
- •№2 Основные понятия Интернет
- •№3 Предназначение языков разметки html и xhtml.
- •№4 Структура xhtml документа.
- •№5 Логическое и физическое форматирование в html и xhtml.
- •№6 Гипертекстовые ссылки, абсолютные и относительные url.
- •№7 Отличия между html и xhtml.
- •№8 Способы присоединения стиля к тегу.
- •№9 Синтаксис стилей.
- •№10 Теги div и span.
- •№11 Стилевые классы.
- •№12 Создание css макетов с фиксированной шириной.
- •№13 Центрирование css макетов с фиксированной шириной
- •№14 Создание текучих макетов при помощи css
- •№15 Способы позиционирования элементов документа (свойства position и float).
- •№16 Отличительные особенности синтаксиса JavaScript
- •№17 Область видимости переменных в JavaScript.
- •№18 Простые объекты в JavaScript, свойства универсального класса Object.
- •№19 Массивы в JavaScript.
- •№20 Использование регулярных выражений в JavaScript.
- •№21 Функции в JavaScript.
- •№22 Конструкторы в JavaScript
- •№23 Прототипы в JavaScript.
- •№24 Динамическое формирование содержимого документа при помощи JavaScript.
- •№25 Объект Document и его свойства.
- •№26 Объектная модель w3c dom, представление документов в виде дерева.
- •№27 Способы обработки событий в JavaScript (api Level 0 и api Level 2).
- •№28 Объекты, описывающие свойства событий.
- •№29 Таймеры в JavaScript.
- •№30 Програмное обеспечение Web-сервера (lamp), основные возможности и предназначение.
- •№31 Структура каталогов сервера Apache
- •№32 Настройка виртуальных хостов в Apache 2
- •№33 Базовый синтаксис php
- •№34. Логические управляющие структуры в php
- •№35 Управляющие структуры повторения в php
- •№36 Функции, определяемые пользователем
- •№37 Динамические переменные и функции в php
- •№38 Использование ссылок в php.
- •№39 Строки в php
- •№40 Массивы
№7 Отличия между html и xhtml.
Главное отличие между HTML и XHTML в том, что XHTML основан на синтаксисе XML. А, следовательно, он более строгий, и в нём нельзя допускать тех вольностей, которые можно допустить в HTML.
особенности синтаксиса XHTML по пунктам:
1) Каждый тег должен закрываться
Парные теги должны закрываться и в HTML тоже, но в HTML существует множество одиночных тегов (например, <img>), и мы могли написать таким образом:
<img src = "foto.jpg" >
Однако, в XHTML все теги должны закрываться, даже одиночные, причём закрываются они следующим образом:
<img src = "foto.jpg" />
Разница только в слеше перед второй угловой скобкой.
2) Все спецсимволы должны быть заменены на сущности
То есть нельзя писать вот так: "&", нужно писать этот символ только сущностью, то есть "&". В HTML подобного правила не существует.
3) Все значения атрибутов должны быть в кавычках.
Все мы с Вами знаем, что в HTML можно написать вот так:
<img src = "foto.jpg" width = 15 >
То есть у нас значение атрибута "width" находится без кавычек. В XHTML это недопустимо, и там надо писать вот так:
<img src = "foto.jpg" width = "15" />
4) Все теги и атрибуты должны писаться в нижнем регистре.
№8 Способы присоединения стиля к тегу.
Существует три способа присоединения стиля к тегу:
Таблица глобальных стилей
При использовании таблицы глобальных стилей свойства CSS описываются в самом документе и обычно располагаются в заголовке веб-страницы. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа, с помощью контейнера <STYLE>, как показано в примере 2.3.
/*Примеры можно не переписывать*/
Пример 2.3. Использование таблицы глобальных стилей
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Глобальные стили</title>
<style type="text/css">
H1 {
font-size: 120%;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #336;
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
В данном примере определен стиль тега <H1>, который затем можно повсеместно использовать на данной веб-странице.
Таблица глобальных стилей может размещаться не только внутри контейнера <HEAD>, но также в любом месте кода HTML-документа.
Внутренние стили
Внутренний стиль является по существу расширением для одиночного тега используемого на веб-странице. Для определения стиля используется параметр тега style, а его атрибуты указываются с помощью языка таблицы стилей (пример 2.4).
Пример 2.4. Использование внутренних стилей
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Внутренние стили</title>
</head>
<body>
<h1 style="font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif;
color: #336">Заголовок</h1>
</body>
</html>
В данном примере стиль тега <H1> задается с помощью параметра style, в котором через точку с запятой перечисляются стилевые атрибуты.
Внутренние стили рекомендуется применять на сайте ограниченно или вообще отказаться от их использования. Дело в том, что добавление таких стилей увеличивает общий объем файлов, что ведет к повышению времени их загрузки в браузере, и усложняет редактирование документов для разработчиков.
Все описанные методы использования CSS могут применяться как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Первым всегда применяется внутренний стиль, затем таблица глобальных стилей и в последнюю очередь таблица связанных стилей. В примере 2.5 применяется сразу два метода добавления таблиц стилей в документ.
Пример 2.5. Сочетание разных методов подключения стилей
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Подключение стиля</title>
<style type="text/css">
H1 { font-size: 120%; font-family: Arial, Helvetica, sans-serif; color: green; }
</style>
</head>
<body>
<h1 style="font-size: 36px; font-family: Times, serif; color: red">Заголовок
1</h1>
<h1>Заголовок 2</h1>
</body>
</html>
Импорт CSS
В текущую стилевую таблицу можно импортировать содержимое CSS-файла с помощью команды @import. Этот метод допускается использовать совместно с таблицей связанных или глобальных стилей, но никак не со встроенными стилями. Общий синтаксис следующий.
@import url("имя файла") типы носителей;
@import "имя файла" типы носителей;
После ключевого слова @import указывается путь к стилевому файлу одним из двух приведенных способов — с помощью директивы url или без нее. В примере 2.6 показано, как можно импортировать стиль из внешнего файла в таблицу глобальных стилей.
Пример 2.6. Импорт CSS в глобальную таблицу стилей
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Импорт</title>
<style type="text/css">
@import url("/style/header.css");
H1 { font-size: 120%; font-family: Arial, Helvetica, sans-serif; color: green;
}
</style>
</head>
<body>
<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
</body>
</html>
В данном примере показано подключение файла header.css, который расположен в папке style.
Аналогично происходит импорт и в файле со стилем, который затем подключается к документу
Стиль, определенный «ближе» к тегу, имеет приоритет над установленными с «большего расстояния». Так, встроенные в тег стили обладают большим приоритетом, чем определенные на уровне документа, которые, в свою очередь, приоритетнее действия внешних таблиц.
Если можно применить несколько стилей, ранжируем их по классу Свойства, заданные в классе тегов, имеют приоритет над свойствами, определенными для тега вообще.Если все еще осталось несколько стилей, ранжируем их по специфичности Свойства, определенные для более специфического окружения, имеют приоритет перед свойствами, введенными для менее специфического контекста.
Если стилей все еще несколько, ранжируем их по порядку вхождения Последнее описание преобладает над всеми предыдущими.