Подбор ресурсов Internet
Личная подборка Internet-ресурсов учебного назначения. Язык гипертекстовой разметки страниц HTML. Текстовое оформление страниц. Вставка изображений. Нумерованные, маркированные списки. Оформление таблиц. Создание фреймов. Границы и рамки. Стили CSS.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | лабораторная работа |
| Язык | русский |
| Дата добавления | 23.06.2013 |
| Размер файла | 177,3 K |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Размещено на http://www.allbest.ru/
1. Подбор ресурсов Internet на заданную тематику
Цель работы: создать личную подборку Internet-ресурсов учебного назначения, материалы которых могут быть использованы при преподавании различных дисциплин в школе.
Задание
Ознакомиться с содержанием и разделами порталов и ресурсов учебного назначения согласно области исследования.
Варианты указаны в таблице 1.
Оценить содержательное наполнение каждого из ресурсов, выявить достоинства и недостатки.
Оценить ресурсы по другим параметрам: дизайн, скорость доступа, удобство навигации и т.д., выявить достоинства и недостатки.
Составить аннотацию к ресурсам.
Сделать заключение о целесообразности использования ресурса и имеющихся на нём ссылок в работе учителя-предметника, классного руководителя, завуча, директора школы, отделами образования.
Сохранить ссылку на ресурс и отчёт по нему.
Таблица 1. Варианты лабораторной работы 1
|
№ |
Область исследования |
|
|
1 |
Изучение математики в средней школе |
|
|
2 |
Изучение информатики в начальном звене |
|
|
3 |
Физика в средней школе |
|
|
4 |
Изучения языка программирования Delphi |
|
|
5 |
Изучение географии |
|
|
6 |
Химия для классов 5-7 |
|
|
7 |
Биология в средней школе |
|
|
8 |
Изучение астрономии в средней школе |
|
|
9 |
Физика для классов 9-11 |
|
|
10 |
Изучение экономики в средней школе |
|
|
11 |
Химия для классов 9-11 |
|
|
12 |
Изучения языка программирования Pascal |
|
|
13 |
Изучение информатики в средней школе |
|
|
14 |
Изучение векторной графики |
|
|
15 |
Изучение растительного мира |
|
|
16 |
Изучение параллельных прямых в средней школе |
|
|
17 |
Основы анализа в курсе школьной математики |
|
|
18 |
Изучение языка программирования PHP |
|
|
19 |
Изучение животного мира |
|
|
20 |
Изучение механики в курсе школьной физики |
2. Язык гипертекстовой разметки страниц HTML. Текстовое оформление страниц. Вставка изображений
Цель работы: научиться создавать HTML-документы, оформлять текст и определять размеры рисунков, находящихся на HTML-странице.
Теоретический материал
Стандартным языком, предназначенным для создания гипертекстовых документов в среде Web является HTML (HyperText Markup Language) [1].
HTML-документы могут быть созданы при помощи любого текстового редактора или специализированных HTML-редакторов и конвертеров.
Выбор редактора, который будет использоваться для создания HTML-документов, зависит исключительно от понятия удобства и личных пристрастий каждого автора. Основу языка разметки составляют теги.
Тэги HTML могут быть условно разделены на две категории:
- тэги, определяющие, как будет отображаться Web - браузером тело документа в целом;
- тэги, описывающие общие свойства документа, такие как заголовок или автор документа.
Все тэги HTML начинаются с «<» (левой угловой скобки) и заканчиваются символом «>» (правой угловой скобки). Как правило, существует стартовый тэг и завершающий тэг. HTML не реагирует на регистр символов, описывающих тэг.
Многие теги, помимо имени, могут содержать атрибуты - элементы, дающие дополнительную информацию о том, как браузер должен обработать текущий тег.
В простейшем документе нет ни одного атрибута.
Для того, чтобы текстовый файл превратился в HTML-файл, поменять его расширение с «.txt» на «html» недостаточно. Надо соблюсти «правило первой строки»:
каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML! DOCTYPE, которая обычно выглядит так:
<! DOCTYPE HTML PUBLIC «- //W3C //DTD HTML 3.2 Final //EN»>.
Эта строка поможет браузеру определить, как правильно интерпретировать данный документ. В данном случае говорим браузеру, что HTML соответствует международной спецификации версии 3.2, которая хоть и не отличается новизной, но, в отличие от более поздних версий, является полноценным, широко распространенным стандартом без каких-либо неопределенностей. Как видно из примера, самый короткий html-документ состоит буквально из одной строки.
Как устроен HTML-документ
HTML-документ - это просто текстовый файл с расширением *.html (Unix-системы могут содержать файлы с расширением *.htmll). Вот самый простой HTML-документ:
<html>
<head>
<title>
Пример 1
</title>
</head>
<body>
<h1>
Это простейший пример HTML-документа.
</h1>
</body>
</html>
В таблицах 2 и 3 представлены основные теги для создания HTML-документа и работы текстом.
Таблица 2. Обязательные теги HTML-документа
|
Теги |
Описание |
|
|
<html>… </html> |
Эти теги открывают и завершают HTML-документ. |
|
|
<head>… </head> |
Эта пара тегов указывает на начало и конец заголовка документа. |
|
|
<title>… </title> |
Все, что находится между тегами <title> и </title>, толкуется браузером как название документа. |
|
|
<body>… </body> |
Эта пара тегов указывает на начало и конец тела HTML-документа, каковое тело, собственно, и определяет содержание документа. |
Таблица 3. Теги для форматирования текста
|
Теги |
Описание |
|
|
<h1>… </h1> - <h6>… </h6> |
Теги вида <hi> (где i - цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня - самый крупный, шестого уровня, естественно - самый мелкий. |
|
|
<p>… </p> |
Такая пара тегов описывает абзац. Все, что заключено между <p> и </p>, воспринимается как один абзац. |
|
|
<font>…</font> |
Теги для определения параметра шрифта с атрибутами fase, size, color. |
|
|
<b>…</b> |
Пара тегов, определяющих полужирное начертание текста. |
|
|
<i>…</i> |
Пара тегов, определяющих курсивное начертание текста. |
|
|
<u>…</u> |
Пара тегов, определяющих подчеркнутое начертание текста. |
|
|
<sub>…</sub> |
Пара тегов, задающих нижний индекс текста. |
|
|
<suo>…</sup> |
Пара тегов, задающих верхний индекс текста. |
|
|
<strike>…</strike> |
Пара тегов, для формирования зачеркнутого текста. |
|
|
<small>…</small> |
Пара тегов, которая выводит текст шрифтом меньшего размера. |
|
|
<big>…</big> |
Пара тегов, которая выводит текст шрифтом большего размера. |
Метки <hi> и <p> могут содержать дополнительный атрибут align, например:
<h1 align=center> Выравнивание заголовка по центру</h1>;
<p align=right> Образец абзаца с выравниванием по правому краю</p>;
<p align=left> Образец абзаца с выравниванием по левому краю</p>;
<p align=justify> Образец абзаца с выравниванием по ширине</p>.
Для вставки изображения используется тег <img>, имеющий единственный параметр src, который определяет адрес файла с рисунком.
Например: <img src= «/images/imag.jpg»>
По умолчанию, когда изображение вставляется в строку текста, строка выравнивается по низу изображения. Изменить эту установку можно при помощи атрибута align тэга <img>.
В таблице 4 описаны значения атрибута align.
Таблица 4. Значения атрибута align
|
Значение |
Описание |
|
|
top |
Выравнивает текст по верху изображения. |
|
|
middle |
Выравнивает текст по середине изображения. |
|
|
botton |
Выравнивает текст по низу изображения. |
По умолчанию программа просмотра выводит изображение в текущей строке. Текст не «обтекает» его. Однако при помощи атрибута aling тэга <img> изображение можно сделать «плавающим», т.е. заставить текст расположиться вокруг изображения. В таблице 5 приведены значения атрибута align, позиционирующие обтекаемое текстом изображение относительно краев окна браузера.
Таблица 5. Значения атрибута align
|
Значение |
Описание |
|
|
left |
Обтекаемое текстом изображение прижато к левой стороне окна браузера. |
|
|
right |
Обтекаемое текстом изображение прижато к правой стороне окна браузера. |
Для указания размеров изображения (в пикселях) служат атрибуты height и width тэга <img>.
Помещение изображения в рамку предполагает применение атрибута border тэга <img>. По умолчанию программа просмотра использует рамку, которая указана в соответствующей ссылке.
Для отделения изображения от текста используются атрибуты vspace и hspace для указания расстояния (по вертикали и горизонтали) между кромкой текста и краями иллюстрации.
Например: <img src= «work.gif» vspace=20 hspace=20 align=left>
Наряду с использованием изображений в качестве иллюстраций к тексту или элементов оформления Web-страницы, в HTML предусмотрена возможность создания карт изображений (imagemap), отдельные области которого могут являться гиперссылками на другие разделы или страницы Web-сайта. В общем виде это соответствует использованию изображения в качестве гиперссылки с тем отличием, что на одной карте изображений можно создать несколько несовпадающих областей, и соответственно, гиперссылок.
Цвета водятся с помощью смешения источников RED (красного), GREEN (зеленого), и BLUE (синего) цвета. Цвета определяют с помощью шестнадцатеричной записи комбинации значений красного, зеленого и синего цветов (RGB). Наименьшее значение, которое можно задать одному из источников равно 0 (hex #00). Максимальное значение равно 255 (hex #FF).
В таблице 6 приведены некоторые оттенки цветов и соотвествующие шестнадцатеричные значения.
Цветовое оформление теста указывается в теге <font>. Например, <font color= "#CC0000»>Добро пожаловать!:)</font>.
Таблица 6. Отдельные оттенки цвета и соответствующие шестнадцатеричные значения
|
Цвет |
Шестнадцатеричные значения |
|
|
Черный |
#000000 |
|
|
Ярко-желтый |
#FFFF00 |
|
|
Ярко-малиновый |
#FF00FF |
|
|
Темно-синий |
#0000АА |
|
|
Темно-серый |
#808080 |
|
|
Синий |
#0000CC |
|
|
Фиолетовый |
#880088 |
|
|
Серый |
#999999 |
|
|
Белый |
#FFFFFF |
Задание
Необходимо создать HMTL-документ. Такой HTML-документ состоит из трех частей, содержащих законченный текст и представляющих отдельный абзац. Шрифт, начертание, размер, расположение и цвет текста, а также рисунка определены вариантом задания, представленного в таблице 7. Все размеры указаны в пикселях.
Таблица 7. Варианты заданий лабораторной работы 2
|
№ |
Задание |
|||
|
1 часть |
2 часть |
3 часть |
||
|
1 |
Шрифт: Calibri Размер: заголовок 4 Цвет: красный Расположение: по центру Начертание: курсив Рисунок: нет |
Шрифт: Times New Roman Размер: 14 Цвет: синий Расположение: по ширине Начертание: нет Рисунок: нет |
Шрифт: Arial Размер: 12 Цвет: красный Расположение: по левому краю Начертание: нет Рисунок: изображение, размером 50х50 прижато к левой стороне окна браузера |
|
|
2 |
Шрифт: Courier Размер: заголовок 5 Цвет: черный Расположение: по правому краю Начертание: нет Рисунок: изображение, размером 30х30 прижато к левой стороне окна браузера |
Шрифт: Tahoma Размер: 13 Цвет: черный Расположение: по правому краю Начертание: курсив Рисунок: нет |
Шрифт: Verdana Размер: 18 Цвет: синий Расположение: по центру Начертание: полужирный Рисунок: нет |
|
|
3 |
Шрифт: Bodoni MT Размер: 12 Цвет: желтый Расположение: по центру Начертание: подчеркнутый Рисунок: нет |
Шрифт: Broadway Размер: заголовок 3 Цвет: желтый Расположение: по ширине Начертание: зачеркнутый Рисунок: нет |
Шрифт: Lucida Bright Размер: 14 Цвет: бирюзовый Расположение: по правому краю Начертание: нет Рисунок: изображение, размером 50х50 прижато к правой стороне окна браузера |
|
|
4 |
Шрифт: Cambria Math Размер: 16 Цвет: черный Расположение: по левому краю Начертание: полужирный Рисунок: нет |
Шрифт: Times New Roman Размер: 17 Цвет: зеленый Расположение: по ширине Начертание: нет Рисунок: изображение, размером 25х50 прижато к левой стороне окна браузера |
Шрифт: Tahoma Размер: заголовок 2 Цвет: черный Расположение: по центру Начертание: курсив Рисунок: нет |
|
|
5 |
Шрифт: Forte Размер: 11 Цвет: красный Расположение: по правому краю Начертание: нет Рисунок: нет |
Шрифт: Verdana Размер: 14 Цвет: серый Расположение: по правому краю Начертание: нет Рисунок: изображение, размером 30х50 прижато к правой стороне окна браузера |
Шрифт: Courier Размер: 16 Цвет: оранжевый Расположение: по левому краю Начертание: подчеркнутый Рисунок: нет |
|
|
6 |
Шрифт: Cambria Math Размер: 20 Цвет: фиолетовый Расположение: по ширине Начертание: курсив Рисунок: изображение, размером 50х50 в середине окна браузера |
Шрифт: Bodoni MT Размер: 12 Цвет: оранжевый Расположение: по левому краю Начертание: нет Рисунок: нет |
Шрифт: Vivaldi Размер: заголовок 5 Цвет: бирюзовый Расположение: по правому краю Начертание: нет Рисунок: нет |
|
|
7 |
Шрифт: Broadway Размер: 14 Цвет: желтый Расположение: по ширине Начертание: нет Рисунок: нет |
Шрифт: Verdana Размер: 16 Цвет: черный Расположение: по левому краю Начертание: подчеркнутый Рисунок: нет |
Шрифт: Lucida Bright Размер: 12 Цвет: желтый Расположение: по правому краю Начертание: нет Рисунок: изображение, размером 10х10 прижато к правой стороне окна браузера |
|
|
8 |
Шрифт: Calibri Размер: 14 Цвет: фиолетовый Расположение: по центру Начертание: подчеркнутый Рисунок: нет |
Шрифт: Tahoma Размер: 13 Цвет: зеленый Расположение: по правому краю Начертание: полужирный Рисунок: изображение, размером 50х50 прижато к правой стороне окна браузера |
Шрифт: Bodoni MT Размер: 13 Цвет: серый Расположение: по центру Начертание: нет Рисунок: нет |
|
|
9 |
Шрифт: Tahoma Размер: заголовок 5 Цвет: синий Расположение: по левому краю Начертание: курсив Рисунок: изображение, размером 40х40 прижато к правой стороне окна браузера |
Шрифт: Broadway Размер: 22 Цвет: синий Расположение: по левому краю Начертание: полужирный Рисунок: нет |
Шрифт: Arial Размер: 9 Цвет: серый Расположение: по центру Начертание: нет Рисунок: нет |
|
|
10 |
Шрифт: Times New Roman Размер: 8 Цвет: фиолетовый Расположение: по ширине Начертание: полужирный Рисунок: изображение, размером 40х40 прижато к левой стороне окна браузера |
Шрифт: Arial Размер: 12 Цвет: черный Расположение: по левому краю Начертание: курсив Рисунок: нет |
Шрифт: Verdana Размер: 31 Цвет: бирюзовый Расположение: по ширине Начертание: подчеркнутый Рисунок: нет |
|
|
11 |
Шрифт: Vivaldi Размер: 23 Цвет: желтый Расположение: по левому краю Начертание: нет Рисунок: нет |
Шрифт: Lucida Bright Размер: 12 Цвет: оранжевый Расположение: по правому краю Начертание: курсив Рисунок: нет |
Шрифт: Verdana Размер: 11 Цвет: черный Расположение: по ширине Начертание: нет Рисунок: изображение, размером 40х40 прижато к правой стороне окна браузера |
|
|
12 |
Шрифт: Bodoni MT Размер: красный заголовок 3 Цвет: синий Расположение: по центру Начертание: курсив Рисунок: нет |
Шрифт: Cambria Math Размер: заголовок 5 Цвет: синий Расположение: по центру Начертание: курсив Рисунок: нет |
Шрифт: Tahoma Размер: 10 Цвет: желтый Расположение: по правому краю Начертание: полужирный Рисунок: изображение, размером 40х40 прижато к левой стороне окна браузера |
|
|
13 |
Шрифт: Broadway Размер: 10 Цвет: черный Расположение: по ширине Начертание: нет Рисунок: нет |
Шрифт: Times New Roman Размер: 12 Цвет: красный Расположение: по левому краю Начертание: нет Рисунок: нет |
Шрифт: Calibri Размер: 8 Цвет: желтый Расположение: по правому краю Начертание: курсив Рисунок: изображение, размером 45х45 прижато к правой стороне окна браузера |
|
|
14 |
Шрифт: Verdana Размер: 13 Цвет: зеленый Расположение: по правому краю Начертание: нет Рисунок: нет |
Шрифт: Arial Размер: 16 Цвет: черный Расположение: по правому краю Начертание: полужирный Рисунок: изображение, размером 35х35 прижато к левой стороне окна браузера |
Шрифт: Tahoma Размер: 6 Цвет: синий Расположение: по правому краю Начертание: нет Рисунок: нет |
|
|
15 |
Шрифт: Bodoni MT Размер: 13 Цвет: зеленый Расположение: по левому краю Начертание: нет Рисунок: нет |
Шрифт: Forte Размер: заголовок 3 Цвет: синий Расположение: по левому краю Начертание: нет Рисунок: изображение, размером 35х35 в середине окна браузера |
Шрифт: Broadway Размер: 13 Цвет: серый Расположение: по ширине Начертание: полужирный Рисунок: нет |
|
|
16 |
Шрифт: Vivaldi Размер: 12 Цвет: черный Расположение: по центру Начертание: подчеркнутый Рисунок: нет |
Шрифт: Lucida Bright Размер: заголовок 2 Цвет: фиолетовый Расположение: по ширине Начертание: полужирный Рисунок: нет |
Шрифт: Forte Размер: заголовок 3 Цвет: оранжевый Расположение: по центру Начертание: нет Рисунок: изображение, размером 20х20 прижато к левой стороне окна браузера |
|
|
17 |
Шрифт: Verdana Размер: 12 Цвет: зеленый Расположение: по правому краю Начертание: зачеркнутый Рисунок: нет |
Шрифт: Bodoni MT Размер: 13 Цвет: бирюзовый Расположение: по правому краю Начертание: курсив Рисунок: нет |
Шрифт: Times New Roman Размер: 14 Цвет: оранжевый Расположение: по правому краю синий Начертание: нет Рисунок: изображение, размером 32х50 прижато к левой стороне окна браузера |
|
|
18 |
Шрифт: Calibri Размер: 17 Цвет: бирюзовый Расположение: по центру Начертание: полужирный Рисунок: нет |
Шрифт: Arial Размер: 16 Цвет: красный Расположение: по центру Начертание: зачеркнутый Рисунок: изображение, размером 53х67 прижато к правой стороне окна браузера |
Шрифт: Bodoni MT Размер: 15 Цвет: черный Расположение: по ширине Начертание: полужирный Рисунок: нет |
|
|
19 |
Шрифт: Calibri Размер: 11 Цвет: желтый Расположение: по центру Начертание: нет Рисунок: нет |
Шрифт: Arial Размер: заголовок 6 Цвет: красный Расположение: по правому краю Начертание: курсив Рисунок: нет |
Шрифт: Forte Размер: 10 Цвет: зеленый Расположение: по ширине Начертание: нет Рисунок: изображение, размером 23х38 в середине окна браузера |
|
|
20 |
Шрифт: Tahoma Размер: заголовок 2 Цвет: фиолетовый Расположение: по центру Начертание: полужирный Рисунок: изображение, размером 50х50 в середине окна браузера |
Шрифт: Broadway Размер: 12 Цвет: черный Расположение: по центру Начертание: курсив Рисунок: нет |
Шрифт: Forte Размер: 12 Цвет: серый Расположение: по ширине Начертание: нет Рисунок: нет |
3. Язык гипертекстовой разметки страниц HTML. Создание гиперссылок
Цель работы: научиться создавать гиперссылки для осуществления перехода на другие документы или его части.
Теоретический материал [2]
Гипертекстовый документ - это документ, содержащий ссылки на другие документы, позволяющие при помощи нажатия кнопки мыши быстро перемещаться от одного документа к другому.
В HTML переход от одного фрагмента текста к другому задается с помощью тега вида:
<a href=» [адрес перехода]"> выделенный фрагмент текста</a>
В качестве параметра [адрес перехода] может использоваться несколько типов аргументов. Самое простое - это задать имя другого HTML-документа, к которому нужно перейти. Например:
<a href= «index.html»>Перейти к оглавлению</a>
Такой фрагмент HTML-текста приведет к появлению в документе выделенного фрагмента Перейти к оглавлению, при нажатии на который в текущее окно будет загружен документ index.html.
При необходимости можно задать переход не просто к некоторому документу, но и к определенному месту внутри этого документа. Для этого необходимо создать в документе, к которому будет задан переход, некоторую опорную точку, или анкер. Разберем это на примере.
Допустим, что необходимо осуществить переход из файла 1.html к словам «Переход закончен» в файле 2.html (файлы находятся в одном каталоге). Прежде всего, необходимо создать вот такой анкер в файле 2.html:
<a name= «AAA»>Переход закончен</a>
Слова «Переход закончен» при этом никак не будут выделены в тексте документа.
Затем в файле 1.html (или в любом другом) можно определить переход на этот анкер:
<a href= «2.html#AAA»>Переход к анкеру AAA</a>
Кстати говоря, переход к этому анкеру можно определить и внутри самого документа 2.html - достаточно только включить в него вот такой фрагмент:
<a href= "#AAA»>Переход к анкеру AAA</a>
Если ссылка на изображение находится между метками <a href=»…"> и </a>, изображение фактически становится кнопкой, при нажатии на которую происходит переход по ссылке
Цветовая гамма HTML-документа
Цветовая гамма HTML-документа определяется атрибутами, размещенными внутри метки <body>. Вот список этих атрибутов:
bgcolor - определяет цвет фона документа;
text - определяет цвет текста документа;
link - определяет цвет выделенного элемента текста, при нажатии на который происходит переход по гипертекстовой ссылке;
vlink - определяет цвет ссылки на документ, который уже был просмотрен ранее;
alink - определяет цвет ссылки в момент, когда на нее указывает курсор мыши и нажата ее правая кнопка, то есть непосредственно перед переходом по ссылке.
Цвет кодируется последовательностью из трех пар символов. Каждая пара представляет собой шестнадцатиричное значение насыщенности заданного цвета одним из трех основных цветов (красным, зеленым и синим) в диапазоне от нуля (00) до 255 (FF). Например:
bgcolor=#FFFFFF цвет фона - белый цвет.
text=#000000 цвет текста - черный цвет.
link=#FF0000 цвет гипертекстовой ссылки - красный цвет.
Кроме того, метка <body> может включать атрибут background=» [имя файла]», который задает изображение, служащее фоном для текста и других изображений. Как и любое другое изображение, фон должен быть представлен в формате GIF (файл с расширением *.gif) или JPEG (файл с расширением *.jpg или *.jpeg).
Задание
Используя результаты первой лабораторной работы, а именно подборку ресурсов, преждевременно сформировав их каталог, создайте HTML-документ с ссылками на эти ресурсы. Кроме того представьте в этом документе алфавитный словарь, используя внутренние метки. Цветовую гамму гиперссылок и их размер согласно вариантам таблицы 6 столбца «Часть 1».
4. Язык гипертекстовой разметки страниц HTML. Создание списков. Нумерованные, маркированные списки
Цель работы: научиться создавать в HTML-документах списки различных форматов.
Теоретический материал
HTML позволяет определять внешний вид целых абзацев текста. Абзацы можно организовывать в списки, выводить их на экран в отформатированном виде, или увеличивать левое поле [3].
Ненумерованные списки: <ul>…</ul>
Текст, расположенный между тегами <ul> и </ul>, воспринимается как ненумерованный список. Каждый новый элемент списка следует начинать с тега <li>, у которой нет парной закрывающей метки. Например, чтобы создать вот такой список:
необходим вот такой HTML-текст:
<ul>
<li>Первый;
<li>Второй;
<li>Третий;
</ul>
Нумерованные списки: <ol>…</ol>
Нумерованные списки устроены точно так же, как ненумерованные, только вместо символов, выделяющих новый элемент, используются цифры. Если слегка модифицировать наш предыдущий пример:
<ol>
<li>Первый;
<li>Второй;
<li>Третий;
</ol>
получится вот такой список:
Списки определений: <dl>…</dl>
Список определений несколько отличается от других видов списков. Вместо тегов <li> в списках определений используются теги <dt> (от английского definition term - определяемый термин) и <dd> (от английского definition definition - определение определения). Разберем это на примере. Допустим, у нас имеется следующий фрагмент HTML-текста:
<dl>
<dt>HTML
<dd>Термин HTML (HyperText Markup Language) означает
'язык маркировки гипертекстов'.
<dt>HTML-документ
<dd>Это текстовый файл с расширением *.html
</dl>
Этот фрагмент будет выведен на экран следующим образом:
Обратите внимание: точно так же, как теги <li>, теги <dt> и <dd> не имеют парных закрывающих меток.
Если определяемые термины достаточно коротки, можно использовать модифицированную открывающий тег <dl compact>. Например, вот такой фрагмент HTML-текста:
<dl compact>
<dt>А
<dd>Первая буква алфавита
<dt>Б
<dd>Вторая буква алфавита
<dt>В
<dd>Третья буква алфавита
</dl>
будет выведен на экран примерно так:
Вложенные списки
Элемент любого списка может содержать в себе целый список любого вида. Число уровней вложенности в принципе не ограничено, однако злоупотреблять вложенными списками все же не следует. Вложенные списки очень удобны при подготовке разного рода планов и оглавлений.
Задание
Согласно вариантам таблицы 8 создать список. Кроме того, разместить его на странице, созданной в лабораторной работе 2, во второй части. Стиль текста такой же как и основной текст этой части.
Таблица 8. Варианты лабораторной работы 4
|
№ |
Задание |
|
|
1 |
С маркером |
|
|
2 |
С маркером |
|
|
3 |
Тип нумерации: 1. |
|
|
4 |
Тип нумерации: А. |
|
|
5 |
С маркером |
|
|
6 |
Без нумерации и маркера |
|
|
7 |
С маркером |
|
|
8 |
Тип нумерации: а. |
|
|
9 |
Тип нумерации (вложенный список): 1.а. |
|
|
10 |
Тип нумерации (вложенный список): 1.1. |
|
|
11 |
С маркером |
|
|
12 |
Тип нумерации: 1) |
|
|
13 |
С маркером |
|
|
14 |
Тип нумерации: А) |
|
|
15 |
С маркером |
|
|
16 |
Тип нумерации (вложенный список): 1) а) |
|
|
17 |
С маркером |
|
|
18 |
Тип нумерации (вложенный список): 1. А) |
|
|
19 |
С маркером |
|
|
20 |
С маркером ? |
5. Язык гипертекстовой разметки страниц HTML. Создание таблиц. Оформление таблиц
Цель работы: научиться создавать в HTML-документах таблицы и их оформлять.
Теоретический материал
Основным тегом для создания таблиц является <table>, в котором размещается содержимое таблицы. Таблица строится по строкам: для обозначения строки используется контейнер <tr>, для обозначения заголовков столбцов (строк) - контейнер <th>, а для данных в ячейках - контейнер <td>. Заголовки выделяются полужирным шрифтом и центрируются в своих ячейках [4].
В таблице 9 приведен список основных тэгов таблиц.
Таблица 9. Основные теги таблиц
|
Теги |
Описание |
|
|
<table>…</table> |
Контейнер таблицы. |
|
|
<tr>…</tr> |
Контейнер строки таблицы. Допускается отсутствие закрывающего тэга. |
|
|
<td>…</td> |
Контейнер ячейки таблицы. В ячейку можно включить другую таблицу. Закрывающий тэг может быть опущен. |
|
|
<th>…</th> |
Контейнер заголовка, располагающегося обычно в первой строке, либо в первом столбце таблицы. Закрывающий тэг также необязателен. |
В дополнение к этим тэгам используются следующие атрибуты:
border - для определения рамки таблицы (ширина рамки устанавливается в пикселях, например, border=1. значение, равное нулю, означает отсутствие рамки);
align - для выравнивания таблицы в окне браузера.
Заголовки столбцов и строк выводятся полужирным шрифтом и располагаются по центру своей ячейки. Данные имеют обычный шрифт и выравниваются по левой стороне ячейки.
Наличие в ячейках данных необязательно. Создать пустую ячейку можно двумя способами: ничем не заполнять ее контейнер (<td></td>), либо заполнить ее специальным символом пустого пространства (<td> </td>).
Нет надобности отдельно создавать пустые ячейки, если планируется, что все оставшиеся в строке ячейки не будут заполнены. Так как тэг <tr> сигнализирует о начале новой строки, пустые ячейки будут добавлены браузером автоматически.
При помощи атрибутов align и valign можно по-разному размещать данные относительно границ ячейки. Эти атрибуты используются совместно с элементами <caption>, <tr>, <th> и <td> в самых различных комбинациях. В таблице 10 приведены значения атрибутов для перечисленных элементов.
Таблица 10. Значения атрибутов <caption>, <tr>, <th> и <td>
|
Теги |
Описание |
|
|
<caption> |
Атрибут align может иметь значения top и bottom (по умолчанию - top); размещает заголовок таблицы сверху или снизу. |
|
|
<tr> |
Атрибут align может принимать значения left, center и right (по умолчанию - left для данных и center для заголовков). Он определяет горизонтальное выравнивание данных в ячейках и действует на всю строку, если не отменяется тем же атрибутом в отдельной ячейке. Атрибут valign может иметь значения top, bottom, middle и baseline (по умолчанию - middle). Он регулирует положение данных относительно верхней и нижней границ ячейки и влияет на всю строку, если не отменяется таким же атрибутом в отдельной ячейке. baseline применяется ко всем элементам строки и выравнивает их по базовой линии. |
|
|
<th> |
Атрибут align может принимать значения left, center и right (по умолчанию - center). Атрибут valign может иметь значения top, bottom и middle (по умолчанию - middle). |
|
|
<td> |
Атрибут align может принимать значения left, center и right (по умолчанию - left). Атрибуту valign может иметь значения top, bottom и middle (по умолчанию - middle). |
В HTML таблицы применяются не только для представления табулированных данных. Они дают возможность гибкого группирования и форматирования информации. Смежные ячейки таблицы могут объединяться с целью размещения большего количества данных. Например, в таблице из пяти строк и пяти столбцов все ячейки первой строки можно объединить и поместить в этой строке красивый заголовок таблицы. Возможно также объединение нескольких строк или создание пустой прямоугольной области.
Для соединения двух смежных ячеек в одном столбце нужно использовать атрибут rowspan тэга <th> или <td>, например:
<td rowspan =2>
Для объединения двух смежных ячеек в одной строке нужно использовать атрибут colspan тех же тэгов, например:
<td colspan =2>
Еще некоторые атрибуты, используемые при создании таблиц (см. таблицу 11).
Таблица 11. Атрибуты тега <table>, <td>, <th> и <tr>
|
Атрибут |
Описание |
|
|
width |
Определяет ширину всей таблицы в пикселах, либо в процентах от ширины окна браузера. Может также использоваться для отдельной ячейки. |
|
|
height |
Определяет высоту всей таблицы в пикселах, либо в процентах от высоты окна браузера. Может также использоваться дня отдельной ячейки. |
|
|
cellpadding и cellspasing |
Добавляют свободное пространство между данными внутри ячейки и ее границами и, соответственно, между ячейками внутри всей таблицы. Если рамка отсутствует, то результат их действия одинаков. |
|
|
bgcolor, bordercolor |
Для изменения цвета фона ячейки и цвета рамки соотвественно |
Задание
В третью часть HTML-документа, созданного в лабораторной работе 2 вставить таблицу согласно вариантам (см. таблицу 12).
Таблица 12. Варианты заданий лабораторной работы 5
|
№ |
Задание |
|||
|
Количество строк |
Количество столбцов |
Объединение |
||
|
1 |
6 |
4 |
2 и 3 столбцы имеют объединение в 3 строке |
|
|
2 |
10 |
3 |
4 и 5 строки имеют объединение в 2 столбце |
|
|
3 |
3 |
7 |
1 и 2 столбцы имеют объединение в 6 строке |
|
|
4 |
6 |
6 |
4 и 5 строки имеют объединение в 3 столбце |
|
|
5 |
5 |
8 |
6,7 и 8 столбцы имеют объединение в 5 строке |
|
|
6 |
12 |
3 |
2,3,4 и 5 строки имеют объединение в 1 столбце |
|
|
7 |
8 |
4 |
3 и 4 столбцы имеют объединение в 5 строке |
|
|
8 |
9 |
5 |
4,5 и 6 строки имеют объединение в 5 столбце |
|
|
9 |
10 |
6 |
2 и 3 столбцы имеют объединение в 7 строке |
|
|
10 |
12 |
2 |
10 и 11 строки имеют объединение в 1 столбце |
|
|
11 |
4 |
8 |
3 и 4 столбцы имеют объединение в 3 строке |
|
|
12 |
5 |
9 |
2 и 3 строки имеют объединение в 8 столбце |
|
|
13 |
6 |
10 |
6 и 7 столбцы имеют объединение в 3 строке |
|
|
14 |
8 |
4 |
4, 5 и 6 строки имеют объединение в 2 столбце |
|
|
15 |
4 |
5 |
2 и 3 столбцы имеют объединение в 4 строке |
|
|
16 |
7 |
2 |
1 и 2 строки имеют объединение в 2 столбце |
|
|
17 |
9 |
3 |
2 и 3 столбцы имеют объединение в 6 строке |
|
|
18 |
4 |
7 |
3 и 4 строки имеют объединение в 4 столбце |
|
|
19 |
5 |
8 |
5,6 и 7 столбцы имеют объединение в 3 строке |
|
|
20 |
10 |
4 |
7,8,9 и 10 строки имеют объединение в 3 столбце |
6. Язык гипертекстовой разметки страниц HTML. Создание фреймов
Цель работы: научиться создавать в HTML-документах фреймы.
Теоретический материал
Бродя по Интернету, наверняка не раз видели странички разбитые на несколько частей. Эти части и называются фреймами. Программно разбиение окна браузера на фреймы реализуется так:
1. Создается html файл (обычно это первая страничка сервера по имени index.htm) в котором задаются размеры и количество фреймов, а также имена файлов соответствующих фреймам и некоторые атрибуты для каждого фрейма.
2. Создаются отдельные html странички для каждого фрейма.
Создадим html файл реализующий разбиение экрана на две части. Для этого нам понадобится два обычных html файла с именами homepage.htm и menu.htm. Главный файл обзовем к примеру index.htm, вот как он должен выглядеть:
<html>
<title>Название вашей странички</title>
<frameset cols= "*, 140»>
<frame src= «homepage.htm» name= «frame1»>
<frame src= «menu.htm» name= «frame2»>
</frameset>
</html>
Рассмотрим каждый тэг по отдельности:
<html></html> и <title><title> - стандартные тэги для всех html файлов
<frameset> в этом тэге задается количество рядов или столбцов rows и cols соответственно, а также их размеры и расположение. Существует три способа задания их размера:
по пикселям - просто напишите высоту или ширину в пикселях.
процентами - пишите сколько процентов от окна браузера вы хотите отдать фрейму и после цифр ставите знак% Также позаботьтесь чтобы все ваши %`ы в суме составляли 100%.
звездочка - все оставшееся место в окне равняется значку *. Например вы можете написать 20%, 20%, 60% или 20%, 20%,* и никакой разницы не будет.
В этом же тэге можно задать толщину разграничительной линии и окаймляющей рамки командами frameborder= «X» и border= «Y» где x и y толщина в пикселях.
В нашем случае (<frameset cols= "*, 140»>) разделяем окно на два столбца, правое шириной в 140 пикселов, а левое шириной во весь оставшийся экран <frame> - здесь задаются атрибуты для каждого фрейма персонально.
Команда src задает имя файла который загрузится в этом фрейме, в нашем случае имя файла homepage.htm (<frame src= «homepage.htm»…).
Команда name задает имя данного фрейма, в нашем случае имя «frame1». Имя необходимо для того чтобы в последствии указать к какому фрейму использовать ссылку. К примеру хотим чтобы нажимая на ссылку в фрейме содержащем файл menu.htm содержимое файла ссылки показывалось в фрейме содержащем файл homepage.htm. Для этого нам необходимо откорректировать html код ссылки:
<a href= «file.htm»>file</a> - что было
<a href= «file.htm» target= «frame1»>file</A> - что должно быть
А если хотите чтобы файл загрузился в главном окне браузера то напишите в ссылке target= "_top»
Также в этом тэге можно задать величину границ и фрейма. Это делается командами marginwigth= «x» и marginheight= «y», где x и y величина в пикселях.
</frameset> закрывающий тэг.
Рассмотрим несколько пример использования фреймов.
Расположим документы в окне следующим образом:
В первом ряду будет располагаться logo.html, а второй ряд поделим на две колонки, в которых будут располагаться документы menu.html и content.html.
<html>
<head>
<title>Хождение по фреймам</title>
<frameset rows= «100,*»>
<frame src= «logo.html»>
<???>
</frameset>
</head>
</html>
Принцип построения ясен, только вот как обозначить ряд, разбитый на две колонки? Тут нам поможет господин Frameset.
<html>
<head>
<title>Хождение по фреймам</title>
<frameset rows= «100,*»>
<frame src= «logo.html»>
<frameset cols= «150,*»>
<frame src= «menu.html»>
<frame src= «content.html»>
</frameset>
</frameset>
</head>
</html>
С помощью параметра cols тэга <frameset></frameset> делим второй ряд на две колонки (первая шириной 150 пикселов, вторая по ширине занимает все оставшееся пространство). А тэги <frame>, которые содержит <frameset></frameset> определяют какие документы будут показаны в колонках (menu.html и content.html).
Теперь разберем другой вариант:
Здесь будем делить окно на колонки. Вторая колонка будет содержать в себе документ content.html (содержание), а первую колонку мы разобьем на два ряда, и поместим в них документы logo.html и menu.html.
<html>
<head>
<title>Хождение по фреймам</title>
<frameset cols= «100,*»>
<frameset rows= «100,*»>
<frame src= «logo.html»>
<frame src= «menu.html»>
</frameset>
<frame src= «content.html»>
</frameset>
</head>
</html>
Далее избавимся от полосы прокрутки (скрулинга) во фрейме с logo.html.
<html>
<head>
<title>Хождение по фреймам</title>
<frameset cols= «100,*»>
<frameset rows= «100,*»>
<frame src= «logo.html» scrolling= «no»>
<frame src= «menu.html»>
</frameset>
<frame src= «content.html»>
</frameset>
</head>
</html>
Scrolling - параметр тэга <frame>. Он может принимать несколько значений: no - это значит совсем не будет полосы прокрутки, ни при каких обстоятельствах; yes - это значит полоса прокрутки будет всегда; auto - полоса прокрутки появиться только тогда, когда она нужна.
Собственно, параметр scrolling= «auto», можно не прописывать, т. к. если параметр scrolling не задан, то полоса прокрутки появиться, если она нужна, а если нет - ее не будет.
Теперь давайте избавимся от рамок между фреймами. Для этого мы используем параметр border, с которым раньше уже встречались. Итак, border= «0».
<html>
<head>
<title>Хождение по фреймам</title>
<frameset cols= «100,*» border= «0»>
<frameset rows= «100,*»>
<frame src= «logo.html» scrolling= «no»>
<frame src= «menu.html»>
</frameset>
<frame src= «content.html»>
</frameset>
</head>
</html>
Прижмем картинку в левый верхний угол:
<html>
<head>
<title>Хождение по фреймам</title>
<frameset cols= «100,*» border= «0»>
<frameset rows= «100,*»>
<frame src= «logo.html» scrolling= «no» marginwidth= «0» marginheight= «0»>
<frame src= «menu.html»>
</frameset>
<frame src= «content.html»>
</frameset>
</head>
</html>
Marginheight определяет ширину (в пикселах) верхнего и нижнего полей фрэйма, а marginwidth определяет ширину левого и правого полей фрэйма. В нашем примере избавились от полей во фрейме, содержащим logo.html, задав значение marginheight и marginwidth равное нулю.
Задание
Согласно вариантам в таблице 11 лабораторной работе 5 создать HTML-документ, в которой строки - горизонтальные фреймы, столбцы - вертикальные. Размеры строк и столбцов, ссылки, а также обрамление произвольное.
7. Создание стилей. CSS. Границы и рамки
Цель работы: научиться создавать стили CSS, используя таблицы стилей и использовать в HTML-документах.
Теоретический материал
Cascading Style Sheets (Таблицы Каскадных Стилей) - это язык, содержащий набор свойств для описания внешнего вида любых HTML документов. С его помощью дизайнер имеет полный контроль над стилем и расположением каждого элемента Web страницы, что проще и гораздо функциональнее использования обычного набора HTML тегов.
Существует три вида таблиц стилей,
Внутренние таблицы стилей (Inline Style Sheets) при помощи специального атрибута помещаются прямо в HTML теги.
Глобальные (Global Style Sheets) определяют стиль элементов во всем документе.
Связанные (Linked Style Sheets) могут быть использованы для нескольких документов сразу и хранятся во внешнем файле.
Селекторы (Selectors):
селектор {свойства}
Любой элемент HTML - это возможный CSS селектор. Свойства селектора определяют стиль элемента, для которого он определен.
Например:
h1 {color:red; size:20pt;}
Все элементы h1 в документе будут красного цвета, размером в 20 точек (pt, point).
Классовые селекторы (Class Selectors):
селектор. класс {cвойства}
class - атрибут элемента в HTML, определяющий его класс. В CSS можно описать собственные стили для различных классов одних и тех же элементов.
Например:
h1.blue {color:blue; size:20pt;}
Все элементы h1 с атрибутом class= «blue» станут синими.
ID селекторы (ID Selectors):
#id {свойства}
ID - индивидуально именованный стиль. C его помощью можно создавать стилистические исключения среди элементов одного класса.
Например:
<html>
<head>
<title> Пример CSS </title>
</head>
<style>
blue {color:blue; font-style:italic}
#boldunderline {text-decoration:underline; font-weight:bold}
</style>
<body>
<p class= «blue»> Здравствуйте, это моя домашняя страница. </p>
<p class= «blue» id= «boldunderline»> Пока еще в стадии разработки… </p>
<p id= «boldunderline»>… Но скоро откроется </p>
</body>
</html>
Как видно из примера, атрибут ID может быть использован без указания класса (последний параграф примера. Тогда параграф будет обладать только свойствами ID «boldunderline» (в примере - жирный, подчеркнутый текст).
Контекстуальные селекторы (Contextual Selectors):
Контекстные селекторы - это сочетания нескольких обыкновенных селекторов. Стиль задается только элеметнам в заданной последовательности в зависимости от каскадного порядка.
Например:
p EM {color:silver;}
В данном примере все элементы EM внутри элементов p будут иметь заданный стиль.
Внутренние таблицы стилей
Как уже говорилось, использование Внутренних стилей мало чем отличается от использования обычных HTML тегов. Они задают стиль только одному элементу документа при помощи атрибута style в HTML теге.
Например: <font color= «blue» size= «3» face= «Arial»> Вперед в будущее </font>.
Например Inline Style Sheet:
<font style= «color:blue; font-size:12pt; font-family: Arial»> Вперед в будущее </font>.
Как можно заметить, код Inline Style Sheet получился больше чем HTML. Поэтому ISS следует использовать только если необходимо задать определенному элементу свой индивидуальный стиль, существующий в классификации CSS и нереализованный в HTML. Или же при необходимости абсолютно позиционировть данный элемент.
Глобальные таблицы стилей
Глобальные стили задают вид элементов всего документа. Для этого используется тег <style type= «text/css»>. Он размещается в заголовке документа.
Например:
<html>
<head> <title> Пример Глобальных Таблиц Стилей </title>
</head>
<style type= «text/css»>
h1 {color:red; font-style:italic; font-size:32px}
blue {color:blue}
#bold {font-weight:bold}
</style>
<body>
<h1> Этот заголовок написан крупным красным курсивом </h1>
Вот <font class= «blue»> это </font> слово - синие, a <font id= «bold»> это</font> - жирное.
</body>
</html>
В данном примере все элементы h1 будут написаны крупным красным курсивым, все элементы с указанным классом blue будут синими, а все элементы с идентификатором id= «bold» станут жирными. Для простоты вместо <style type= «text/css»> можно использовать просто тег <style>, что менее грамотно.
Связанные таблицы стилей
Связанные таблицы стилей используются для придания нескольким документам одного стиля и хранятся в отдельном файле. Это очень привлекательно, когда нужно выдержать сайт в одном стиле, не утруждая себя составлением таблиц для каждого документа.
Например:
Файл styles.css
<style type= «text/css»>
body {background:black; font-size:9pt; color:red; font-family: Arial Black}
base {color:blue; font-style:italic}
h1 {color:white}
#bold {font-weight:bold}
</style>
В самих же HTML документах делается ссылка на этот файл при помощи тега <link>. Выглядит это так: <link rel= «stylesheet» type= «text/css» href= «путь до файла»>
Например:
Файл Index.html
<html>
<head>
<title> Просто еще один пример </title>
</head>
<link rel= «stylesheet» type= «text/css» href= «styles.css»>
<body>
Содержание Документа
</body>
</html>
Свойства CSS
В CSS используется модель представления визуально отображаемых элементов документа в виде прямоугольных блоков, возможно, вложенных друг в друга.
Каждый такой блок имеет информационное содержимое (текст, изображения и т.д.), а также может иметь отступы (padding), границы (border) и поля (margin). Соответствующие свойства CSS позволяют оформить блок желаемым образом.
В таблице 13, приведенной ниже, содержатся полный список атрибутов [4].
Таблица 13. Список атрибутов CSS
|
Название |
Описание |
|
|
Свойства цвета и фона |
||
|
color |
Css-свойство color определяет базовый цвет элемента |
|
|
background |
Css-свойство background применяется для сокращенного задания свойств фона |
|
|
background-attachment |
Css-свойство background-attachment определяет, должно ли изображение фона быть зафиксированным |
|
|
background-color |
Css-свойство background-color устанавливает цвет фона или делает цвет фона прозрачным |
|
|
background-image |
Css-свойство background-image определяет графический ресурс, используемый в качестве фона |
|
|
background-position |
При помощи css-свойства background-position дизайнер может указать расположение фона |
|
|
background-position-x |
При помощи css-свойства background-position-x дизайнер может указать расположение фона по горизонтали. |
|
|
background-position-y |
При помощи css-свойства background-position-y дизайнер может указать расположение фона по вертикали |
|
|
background-repeat |
Css-свойство background-repeat определяет метод размещения фонового изображения |
|
|
layer-background-color |
Css-свойство layer-background-color используется только браузерами Netscape Navigator версий 4.x. |
|
|
layer-background-image |
Css-свойство layer-background-image используется только браузерами Netscape Navigator версий 4.x. |
|
|
-moz-opacity |
Css-свойство - moz-opacity позволяет указать прозрачность в браузерах Netscape Navigator версий 6.x и выше. |
|
|
Свойства шрифтов |
||
|
font |
Css-свойство font применяется для сокращенного задания свойств шрифта: font-style, font-variant, font-weight, font-size, line-height и font-family |
|
|
font-family |
Значением css-свойства font-family является список имен семейств шрифтов и групп шрифтов |
|
|
font-size |
Css-свойство font-size позволяет задать размер шрифта |
|
|
font-size-adjust |
Css-свойство font-size-adjust задает отношение высоты строчной буквы x к высоте шрифта |
|
|
font-stretch |
Css-свойство font-stretch позволяет задать расстояние между символами |
|
|
font-style |
Значением css-свойства font-style является список имен семейств шрифтов и групп шрифтов |
|
|
font-variant |
Css-свойство font-variant позволяет выводить текст малыми заглавными |
|
|
font-weight |
Css-свойство font-weight позволяет задать жирность шрифта |
|
|
Свойства текста |
||
|
letter-spacing |
Css-свойство letter-spacing указывает дополнительное расстояние между буквами |
|
|
line-height |
Css-свойство line-height задает высоту строки символов |
|
|
text-align |
Css-свойство text-align используется для указания, как будет выравниваться текст внутри элемента |
|
|
text-align-last |
Css-свойство text-align-last используется для указания выравниваться последней или единственной строка в блоке |
|
|
text-decoration |
Css-свойство text-decoration описывает эффекты, которые будут применены к текстовому содержимому элемента |
|
|
text-indent |
Css-свойство text-indent используется для формирования отступа красной строки |
|
|
text-overflow |
Css-свойство text-overflow используется для задания режима усечения текстовых строк |
|
|
text-transform |
Css-свойство text-transform позволяет взаимно преобразовывать строчные и заглавные буквы |
|
|
vertical-align |
Css-свойство vertical-align позволяет настроить выравнивание относительно высоты родительского элемента |
|
|
white-space |
Css-свойство white-space определяет алгоритм преобразования последовательностей пробельных символов |
|
|
word-spacing |
Css-свойство word-spacing указывает на дополнительное расстояние между словами |
|
|
word-wrap |
Css-свойство word-wrap определяет, будут ли разрываться слова для переноса или нет |
|
|
writing-mode |
Css-свойство writing-mode используется для указания алгоритма разметки |
|
|
Свойства списков |
||
|
list-style |
Css-свойство list-style применяется для сокращенного задания свойств list-style-type, list-style-image и list-style-position |
|
|
list-style-image |
Css-свойство list-style-image определяет графический элемент, который будет выступать в качестве маркера списка |
|
|
list-style-position |
Css-свойство list-style-position определяет расположение маркера по отношению к содержимому элемента |
|
|
list-style-type |
Css-свойство list-style-type определяет тип маркера списка |
|
|
Свойства таблиц |
||
|
border-collapse |
Css-свойство border-collapse позволяет выбрать используемую модель построения таблицы |
|
|
border-spacing |
Css-свойство border-spacing определяет расстояние между ячейками таблицы. |
|
|
caption-side |
Css-свойство caption-side определяет положение поля заголовка относительно поля таблицы. |
|
|
empty-cells |
Css-свойство empty-cell определяет метод отображения пустых ячеек таблицы в модели с раздельными границами ячеек. |
|
|
table-layout |
Css-свойство table-layout позволяет выбрать алгоритм отображения таблицы. |
|
|
Свойства отступов |
||
|
margin |
Css-свойство margin применяется для сокращенного задания свойств отступов |
|
|
margin-bottom |
Css-свойство margin-bottom определяет размер нижнего отступа элемента |
|
|
margin-left |
Css-свойство margin-left определяет размер левого отступа элемента |
|
|
margin-right |
Css-свойство margin-right определяет размер правого отступа элемента |
|
|
margin-top |
Css-свойство margin-top определяет размер верхнего отступа элемента |
|
|
Свойства набивок |
||
|
padding |
Css-свойство padding применяется для сокращенного задания свойств набивок |
|
|
padding-bottom |
Css-свойство padding-bottom определяет размер нижней набивки элемента |
|
|
padding-left |
Css-свойство padding-left определяет размер левой набивки элемента |
|
|
padding-right |
Css-свойство padding-right определяет размер правой набивки элемента |
|
|
padding-top |
Css-свойство padding-top определяет размер верхней набивки элемента |
|
|
Свойства границ |
||
|
border |
Css-свойство border используется, что бы установить одинаковые ширину, стиль и цвет бордюра для всех четырех сторон |
|
|
border-bottom |
Css-свойство border-bottom используется для задания в одном месте стиля, цвета и толщины нижней части бордюра |
|
|
border-bottom-color |
Css-свойство border-bottom-color используется для задания цвета нижней части бордюра |
|
|
border-bottom-style |
Css-свойство border-bottom-style используется для задания стиля нижней части бордюра |
|
|
border-bottom-width |
Css-свойство border-bottom-width определяет размер нижней части бордюра элемента |
|
|
border-left |
Css-свойство border-left используется для задания стиля, цвета и толщины левой части бордюра |
|
|
border-left-color |
Css-свойство border-left-color используется для задания цвета левой части бордюра |
|
|
border-left-style |
Css-свойство border-left-style используется для задания стиля левой части бордюра |
Подобные документы
Основные теги и атрибуты языка HTML. Создание web-сайта, который должен представлять собой несколько связанных между собой страниц. Рассмотрение различных значений атрибутов и тегов на страницах и в других документах. Экранные формы разработанных страниц.
лабораторная работа [1,2 M], добавлен 16.04.2014Internet - основные функции. Поиск нужной информации. Быстрое открытие любимых страниц (папка Избранное). Добавление к списку избранного. Поиск посещенных Web-узлов. Электронная почта. Сохранение Web-страниц.
реферат [25,7 K], добавлен 12.06.2007Основы языка программирования Web-страниц – HTML. Виды информации, которую может содержать Web-страница: текст, графика, звук, анимация и видео. Инструментарий для создания Web-страниц. Основные HTML-редакторы, которые используются для Web-дизайна.
реферат [374,0 K], добавлен 19.01.2011Средства работы с ресурсами Internet. Программы-интерфейсы – www, Lynx, SlipKnot и I-com. Системы Arena, Netscape и Internet Explorer. Отечественная программа Ariadna. JavaScript - средство создания "оживших" страниц Web. Печать документов Internet.
контрольная работа [22,7 K], добавлен 18.11.2009Изучение тегов для создания списков и таблиц в HTML, основных атрибутов тегов. Практические навыки создания списков и таблиц в HTML-документах. Нумерованные, маркированные и вложенные списки, список определений. Выравнивание данных в ячейках таблицы.
контрольная работа [322,1 K], добавлен 09.08.2014HTML - это язык, принятый в World Wide Web для создания и публикации веб-страниц. Общие сведения о создании веб-страниц, особенности их оформления. PHP как язык программирования с динамической типизацией, история его создания и возможности использования.
доклад [18,9 K], добавлен 27.12.2010Концептуальное проектирование сайта по онлайн-продаже кофе, его древовидная логическая структура страниц. Описание языка гипертекстовой разметки сайта HTML, особенности отображения HTML-тегов в браузерах. Создание формы заказа для онлайн-торговли.
курсовая работа [2,2 M], добавлен 16.04.2017История развития сети Internet. Общая характеристика сети Internet. Протоколы. Услуги предоставляемые сетью. Internet - мировая сеть. Компьютерная зависимость. Internet-2. Нехватка мощностей Internet. Создание Internet-2. Структура Internet-2.
контрольная работа [19,5 K], добавлен 06.10.2006Общая характеристика языка разметки гипертекста Hypertext Markup Language. Структура HTML-документа. Обзор основных возможностей HTML. Элементы современного дизайна Web-страниц. Анализ практического применения HTML (на примере обучающих программ).
курсовая работа [47,9 K], добавлен 24.11.2012Влияние глобальной компьютерной сети Internet на современный мир. Создание чёткой и логичной схемы навигации, информативного и привлекательного представления web-страниц на устройствах с разным разрешением экрана. Процедура выкладывания на хостинг.
курсовая работа [534,6 K], добавлен 14.12.2014
