Лабораторный практикум по HTML

ЛАБОРАТОРНЫЙ ПРАКТИКУМ ПО HTML

Главная

ЛР №1: Структура HTML документа. Дескрипторы.

ЛР №2: Форматирование текста. Графика в HTML.

ЛР №3: Списки и таблицы.

ЛР №4: Гиперсвязи и фреймы.

ЛР №5: Вставка аудио, видео и flash на сайт.

ЛР №6: Технология CSS.

ЛР №7: Создание форм.

ЛР №8: Разработка сайта с нуля.

Зачетная лабораторная работа.


СПРАВОЧНАЯ ИНФОРМАЦИЯ

Копирование текста

Таблица цветов

Словарь HTML

Свойства CSS


РЕКОМЕНДУЕМЫЕ РЕСУРСЫ

Справочник по HTML и CSS. Для тех, кто делает сайты

PHP: Простой учебник - Manual

Профессиональные бесплат-ные шаблоны HTML и CSS

Яндекс.Вебмастер - проверка орфографии сайта

Адвего - проверка орфографии сайта

Поиск для сайта Яндекс

Поиск для сайта Google

Яндекс: «Поделиться» в соцсетях

Плагины JavaScript jQuery UI

Слайд-плагин Highslide JS/jQuery

Слайд-плагин Fancybox JS/jQuery

Слайд-плагин Lightbox JS/jQuery

"Кремлёвская" JS-утилита Masha

JS/jQuery утилита Flot для построения графиков

Лр №6 Технология CSS

CSS (Cascading Style Sheets - каскадные таблицы стилей) это технология, расширяющая возможности стилевого оформления Web-страниц, по сравнению со стандартными средствами HTML. Атрибуты дескрипторов HTML заменяются свойствами CSS, которые позволяют установить цвет фона и текста, границы, шрифт и другие параметры практически для любого дескриптора CSS. Существуют так же специфические свойства CSS, применимые, например к таблицам и спискам. Применение CSS настоятельно рекомендуется в стандарте HTML, начиная с версии 4.0. Ряд атрибутов дескрипторов HTML, таких как ALIGN, не рекомендуются к использованию, и соответствующие им оформительские задачи средствами предлагается решать средствами CSS (см. краткий перечень свойств CSS).

Inline-стиль (атрибут STYLE)

Для любого дескриптора HTML может быть указан атрибут STYLE, которому присваивается перечень свойств CSS, заключенный в кавычки. Для каждого свойства после двоеточия указывается одно или несколько значений, которые разделяются пробелами. Пары свойство: значение разделяются точкой с запятой. Inline-стиль рекомендуется использовать, если данное стилевое оформление используется только один раз и в одном единственном документе, правда следует учитывать, что не все браузеры корректно отображают применение inline-стиля.

Внедренная таблица стилей (дескриптор STYLE)

Внедренная таблица стилей применяется если заданный в ней стиль встречается только в одном HTML документе, но несколько раз. Для создания внедренной таблицы стилей используется дескриптор <STYLE>...</STYLE>, помещенный в заголовочном разделе HTML страницы <HEAD>...</HEAD>. Внутри контейнера <STYLE>...</STYLE> перечисляются ключевые слова стилизуемых дескрипторов. После каждого ключевого слова в фигурных скобках, через точку с запятой указываются пары свойство: значение. Стилизованный таким образом дескриптор называется селектором. Селекторы используются для форматирования документа в разделе <BODY>...</BODY>

Связывание и импортирование стилевой таблицы

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

Связывание

Импортирование

Селекторы класса

Предположим нам нужно два типа абзацев, каждый из которых имеет свое собственное стилевое оформление. В этом случае мы создаем два вида селекторов: P.first и P.second. Мы создаем два класса для одного дескриптора <P>: first и second (имена классов любые).

Задание

Для сайта, созданного в ЛР №5 создайте стилевое оформление по технологии CSS.

Исходный текст


Loading...
Free Web Hosting