Файловый архив студентов. Файловый архив студентов.
1305 вузов, 5173 предметов.
/ Регистрация
FAQ Обратная связь Вопросы и предложения
Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Сибирский государственный технологический университет
Предмет:
[НЕСОРТИРОВАННОЕ]
Файл:
Основы HTML.doc
Скачиваний:
14
Добавлен:
11.11.2018
Размер:
524.29 Кб
Скачать
☆
►Содержание►

2.4 Лабораторная работа

  1. Запустите текстовый редактор Блокнот (Пуск/Программы/ Стандартные/Блокнот).

  2. Введите следующий документ:

<HTML>

<HEAD>

<TITLE>Оформление страницы </TITLE>

</HEAD>

<BODY>

Тема. Оформление страницы.

Первый лист

</BODY>

</HTML>

Сохранить документ в рабочем каталоге под именем index.htm. Не забудьте дать файлу расширение (.htm). Не закрывая редактор Блокнота выполните остальные пункты лабораторной работы.

  1. Запустите программу Internet Explorer. Дайте команду (ФайлОткрыть). Щелкните на кнопке Обзор и откройте файл index.htm. На экране отобразиться содержимое вашей первой страницы.

  2. Вернитесь к тексту в Блокноте. Добавьте после тега <BODY> заголовок первого уровня, заключив его между тегами <H1></H1>.

  3. Сохраните изменения в блокноте и для обновления страницы в Internet Explorer (ВидОбновить).

  4. Введите заголовок второго и третьего и четвертого уровня. Примените атрибут центрирования к первому заголовку, выравнивание вправо и влево к третьему четвертому заголовку соответственно.

  5. Введите текст стихотворения, начав его с тега <P>.

  6. Используя, теги изменения начертания текста (курсив, полужирный, подчеркнутый, зачеркнутый) преобразуйте информацию на вашей странице.

  7. Отобразите на вашей странице слово цветными буквами (каждая буква своим цветом).

  8. Отобразите на вашей странице слово с различной высотой букв (каждая последующая бука больше предыдущей).

  9. Замените тег <P> на <PRE>, затем на тег <NOBR>.

  10. Измените цвет фона страницы с белого на любой другой тон.

  11. Измените цвет фона на фоновый рисунок.

  12. Используя тег <HR> нарисуйте в нижней части вашей страницы линия светло голубого цвета, толщиной в 20 пунктов, длинной в половину окна браузера, расположенную но центру экрана (горизонтальное выравнивание).

2.5 Контрольные вопросы

  1. Где отображается содержимое тега <TITLE>?

  2. Как и где отображается содержимое тега<BODY>?

  3. Что происходит с содержимым окна при уменьшении ширины?

  4. Сколько строк на экране занял текст помещенный в тег <BODY>? Почему?

  5. Что отобразиться на экране при выполнении команды Internet Explorer (ВидВ виде HTML)?

  6. Как измениться отображаемый фрагмент текста при использовании тега <P> или тега <NOBR>?

  7. Что понимается под термином «Атрибут»?

  8. В каком теге и какой атрибут можно изменить цвет текста во всем документе, в абзаце?

3 Стилевое оформление

3.1 Основные сведения и примеры стилевого оформления

CSS - Cascading Style Sheets, что означает дословно "каскадные таблицы стилей". С помощью неё можно определить параметры любому тегу. Например у вас на страничке несколько заголовков и вам надо что бы они были определённого цвета наклонным шрифтом. Вам продёться для каждого заголовка прописать <H3> <I> <FONT COLOR="">...</FONT> </I> </H>...<H3> <I> <FONT COLOR="">...</FONT></I></H>....Это ведь не удобно, а можно определить эти параметры один раз для <H>.

Бывает три вида абстракции для таблиц стилей (первая - максимальная):

  • Внешние - таблица стилей находится в отдельном CSS-файле.

  • Внутренние - таблица стилей располагается в заголовке документа (тег STYLE).

  • Встроенные - стиль описывается внутри тега (атрибут STYLE).

Внешние файлы CSS подключаются при помощи тега LINK:

<LINK REL=STYLESHEET HREF="default.css" TYPE="text/css">

Внутренние определяются в части HEAD:

<STYLE TYPE="text/css">

BODY {background: red;}

</STYLE>

Встроенные определяются при помощи атрибута STYLE, который определен для большинства тегов:

<P STYLE="text-align: justify;">

Для каждого элемента можно дать свои стили. Любому: <H> <P> <A> и т.д.. Для встроенных таблиц стилей в <HEAD> добавляется метка <STYLE TYPE="text/css">...<.STYLE> а в ней пишется описание.

Color. Цвет текста.

Background-color. Цвет фона под текстом.

Пример:

<STYLE TYPE="text/css">

A {color:#00FF00;background-color:#FFFF00;}

</STYLE>

Все ссылки будут выводиться зелёного цвета на жёлтом фоне.

text-align: Выравнивание.

text-align: left; Выровнять по левому краю.

text-align: right. Выровнять по правому краю.

text-align: center. Выровнять по центру.

text-align: justify. Выровнять равномерно.

letter-spacing: 0px. Расстояние между символами. Может быт в пикселях(px) или в точках (pt).

word-spacing: 0pt. Расстояние между словами. Расстояние между символами. Может быт в пикселях(px) или в точках (pt).

font-family:. Шрифт.

Например:

<STYLE TYPE="text/css">

A {font-family: Arial; }

</STYLE>

Font-size. Размер шрифта. Может указываться в точках (pt), пикселях (px).

Font-style: italic . Курсив (наклонный шрифт).

Font-weight: bold. Жирный шрифт. Значение может быть также числовым, только различные браузеры реагируют на это по-разному.

Text-transform. Преобразование текста: допустимые значения: uppercase (все буквы будут заглавные), lowercase (все буквы будут строчные), capitalize (каждое слово будет начинаться с заглавной буквы) и none (т.е. никаких действий).

Text-decoration. Выделение текста, допустимые значения: underline (подчеркнутый), line-through (перечеркнутый), blink (мигающий) и none(ничего).

left: 1px. Отступ слева. Может быт в пикселях(px) или в точках (pt).

top: 1px. Отступ сверху. Может быт в пикселях(px) или в точках (pt).

width: 0px. Ширина. Может быт в пикселях(px) или в точках (pt).

height: 0px. Высота. Может быт в пикселях(px) или в точках (pt).

Рамки.

border-width. Ширина рамки. Значение числовое (в пикселях или точках) или одно из зарезервированных слов - thin (тонкая), medium (средняя), thick (толстая).

border-color. Цвет рамки. Числовое или текстовое значение цвета. Также может принимать значение transparent (прозрачная).

border-style. Стиль рамки. Может иметь следующие значения: dashed (пунктирная - в виде черточек), dotted (пунктирная - в виде точек), double (двойная линия), inset (с эффектом вдавленности), outset (с эффектом выпуклости), ridge (выпуклая рамка), groove (врезанная рамка), solid (непрерывная линия).

Можно определить каждую сторону рамки отдельно.

border-top-параметр. Параметр верхней стороны.

border-right-параметр. Параметр правой сторона.

border-bottom-параметр. Параметр нижней стороны.

border-left-параметр. Параметр левой стороны.

В место параметр можно поставить, например: color ,background-color ,width. Короче все параметры border .

Свойства границ

margin-left, margin-right, margin-top. Устанавливают значения отступов вокруг элемента. IMG { margin-right: 20pt} P { margin-left: 2cm}

Если есть несколько ссылок определенных каким-то стилем и необходимо чтобы две или несколько ссылок были определены другим стилем, то в <STYLE> надо добавить следующие

<STYLE TYPE="text/css">A {color: FFFFFF;} .css {color: #000000;} </STYLE>

Перед css стоит точка, она обязательна. В ссылку которую определяете прописывается следующее:

<A HREF="" CLASS="css"></A>

Вместо css можно написать любое имя.

Для создания внешней таблицы стилей, используется то же самое (кроме style). Все пишется в отдельном файле и меняется расширение на css. Потом в HEAD при помощи LINK прописывается загрузка файла css:

<LINK REL=STYLESHEET HREF="default.css" TYPE="text/css">

Для того чтобы видоизменить курсор используется cursor:

Пример:

A {cursor: auto}

Где auto может принимать следующие значения.

crosshair – Крест

default - Курсор по умолчанию в системе

hand – Рука

text - I-образный курсор

e-resize , ne-resiz , nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize – стрелки

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