- •«Технологии World Wide Web: основы html и css»
- •Введение
- •Тема №1. Основы технологии html Работа №1 «Создание простого html-документа. Разметка текста»
- •Теоретико-методическая часть
- •Задание к теме
- •Работа №2. «Разделы языка html. Гиперссылки и таблицы»
- •Теоретико-методическая часть
- •Задание к теме
- •Работа №3 «Добавление в Web–узел страницы, содержащей форму»
- •Задание
- •Тема №2 «Основы табличной верстки страниц. Использование таблиц для разметки содержимого страницы»
- •Теоретико-методическая часть
- •Задание
- •Тема №3. Основы технологии css
- •Параметры описания стилей
- •Задание
- •Варианты заданий.
- •Розничные цены реализации овощей
- •Примерные цены на некоторые виды работ
- •Примерные цены на издание литературы (до 1000 экз.)
- •Литература
Задание
-
Создать папку Тема2.
-
Скопировать в нее четыре файла из папки Тема1.
-
Переименовать документы соответственно в rabota2_1.htm, rabota2_2.htm, rabota2_3.htm, rabota2_4.htm.
-
Найти рисунок-логотип предприятия. Сохранить его в папку Тема2.
-
Отредактировать каждую страницу, добавляя табличную верстку. Гиперссылки оформить в виде ненумерованного списка.
Тема №3. Основы технологии css
Цель работы: изучить методику создания и использования каскадных таблиц стилей.
Теоретико-методическая часть
HTML и CSS - совершенно разные технологии, но в них имеются механизмы интеграции, т. е. HTML располагает тегами, которые позволяют подключать CSS, а в CSS есть специальные способы привязки стилей к определенным тегам HTML.
Понятие стиля есть практически в любом текстовом редакторе. К свойствам стиля относят цвет, шрифт, отступы, фон и т. п. - вспомните Microsoft Word. Вы можете задать вариант оформления текста и применить его к нужным блокам текста. Стилем называется набор характеристик форматирования, которому назначено уникальное имя. С помощью стилей можно быстро отформатировать всю группу элементов страницы одним простым действием.
Cascading Style Sheets – одно из первых «дополнений» к языку HTML, способ задания в HTML–документе параметров оформления путем определения характеристик стилей.
С помощью CSS стало возможным переопределять параметры уже существующих HTML-стилей, например: задать конкретную гарнитуру для заголовка, размер шрифта, отступ абзаца, определить рамку и т. п., а также создавать собственные стили оформления, задавая в них необходимые значения параметров.
Существует три основных способа интеграции стилей к HTML-документу.
1. Внедренная таблица каскадных стилей. Внедренная таблица каскадных стилей является кодом, находящимся на странице в секции служебной информации <head> и расположенным между HTML-тегами <style> и </style>.
2. Внешние таблицы каскадных стилей. Внешние таблицы каскадных стилей наиболее полезны, потому что их можно связать со многими веб-страницами. Можно применять одни и те же стили оформления элементов ко всему веб-узлу.
Для форматирования стиля требуется внести изменения во внешнюю таблицу стилей, и они будут отражены на страницах веб-узла. Обычно для внешних таблиц стилей используется расширение имени файлов CSS, например all.css и он подключается к страницам HTML с помощью тега <link>, который также должен находиться в области заголовка документа, например:
<html>
<head>
<title>первая страница</title>
<link rel=”stylesheet” type=”text/css” href=”All.css”>
</head>
</html>
<link rel=”stylesheet” type=”text/css” href=”all.css”> - эта ссылка говорит браузеру, что для правильной интерпретации документа необходимо импортировать файл по указанному пути и что этот файл является описанием стилей.
3. Внутренние таблицы каскадных стилей. Во внутренних таблицах содержатся определенные пользователями стили, применяемые к одиночному элементу страницы. Этот способ используется редко.
Файл стилей состоит из правил. Простейшее правило задается следующим образом:
Селектор { параметрCSS: значение; параметрCSS: значение }.
Приведем пример файла таблицы стилей из трех строк:
BODY {background: #FFFFF00}
H1 {font: 22px Arial; color: #0000FF}
A {color: orange; font-weight: bold}
Сначала идет селектор (название стиля), затем – в фигурных скобках – перечисляются параметры. Каждый параметр заканчивается двоеточием, после которого через пробел указывается значение параметра. Каждый параметр отделяется точкой с запятой. В этом примере BODY и H1 – это селекторы; background, font, color - параметры.
Для удобства применения можно в одном правиле задать одинаковые свойства нескольких селекторов, перечислив их через запятую, например;
H1, H2 {font-style: bold; color: #0000FF} такое правило задает стиль заголовкам двух уровней документа.