- •«Мурманский государственный технический университет»
- •Методические указания к лабораторным работам Основы создания Web-документа Мурманск
- •Введение
- •Лабораторная работа №1 Основы html
- •Раздел 1. Структура документа
- •Раздел 2. Обязательные метки
- •Раздел 3. Непарные метки
- •Раздел 4. Форматирование шрифта
- •Раздел 5. Списки
- •5.4. Вложенные списки
- •Лабораторная работа №2 Создание гиперссылок, работа с изображениями
- •Раздел 1. Гиперссылки
- •1.1. Локальные ссылки
- •1.2. Ссылки на ресурсы
- •Раздел 2. Цветовая гамма html-документа
- •Раздел 3. Бегущая строка Задание. Бегущая строка
- •Раздел 4. Изображения в html-документе
- •4.1. Обтекание графики текстом в документе html
- •4.2. Выравнивание текста html-страницы
- •4.3. Пустая область вокруг изображения html-страницы
- •4.4. Списки с графическими маркерами html-страницы
- •4.5. Задание размеров изображения html-документа
- •Лабораторная работа №3 Работа с таблицами.
- •Раздел 1. Создание таблиц
- •1.1. Фон таблицы
- •1.2. Задание высоты и ширины ячеек
- •1.3. Задание выравнивния в ячейке. Объединение ячеек
- •Раздел 2. Вложенные таблицы
- •Раздел 3. Границы таблицы.
- •Лабораторная работа №4 Работа с формами
- •Раздел 1. Форма.
- •Тип элемента radio
- •Тип элемента checkbox
- •Тип элемента text
- •Тип элемента password
- •Тип элемента reset
- •Тип элемента submit
- •Тип элемента image
- •Элемент select
- •Элемент textarea
- •Лабораторная работа №5
- •Раздел 1. Работа с фреймами
- •Задания для самостоятельного выполнения:
- •Раздел 3. Зарезервированные имена фреймов
- •Лабораторная работа №6 Работа с картой изображений
- •Раздел 1. Карта-изображение
- •1.1. Основные теги для создания карты
- •Лабораторная работа №7 Заголовок html-документа
- •Раздел 1. Заголовок html-документа
- •Лабораторная работа№8 Cascading Style Sheets/Каскадные таблицы стилей. Цвет и фон
- •Раздел 1. Способы применения правила css к Html-документу
- •Метод 1: Инлайн/In-line (атрибут style)
- •Метод 2: Внутренний (тэг style)
- •Метод 3: Внешний (ссылка на таблицу стилей)
- •Раздел 2. Цвет и фон
- •2.1. Свойство color
- •Свойство background-color
- •Свойство background-image
- •Свойство background-repeat
- •Свойство background-attachment
- •Свойство background-position
- •Лабораторная работа №9 Шрифты. Ссылки
- •Раздел 1. Свойства шрифтов
- •Свойство font-family
- •Свойство font-style
- •Свойство font-variant
- •Свойство font-weight
- •Свойство font-size
- •Сокращенная запись font
- •Раздел 2. Текст
- •Свойство text-indent
- •Раздел 3. Ссылки
- •Лабораторная работа№10 Идентификация и группирование элементов (class и id) Группирование элементов (span и div)
- •Раздел 1. Группирование элементов с помощью class
- •Раздел 2. Идентификация элемента с помощью id
- •Лабораторная работа№11 Боксовая модель
- •Раздел 1. Боксовая модель
- •Заполнение элемента
- •Установка ширины блока[width]
- •Установка высоты блока[height]
- •Размещение элементов на странице
- •Всплывающие элементы (поплавки)
- •Свойство float
- •Свойство clear
- •Позиционирование элементов
- •Принципы css-позиционирования
- •Абсолютное позиционирование
- •Раздел 3. Работа со слоями
- •Рекомендуемая литература
Раздел 2. Текст
Форматирование и установка стиля текста - ключевая проблема для любого web-дизайнера. В этом уроке вы увидите впечатляющие возможности CSS при отображении текста. Будут рассмотрены следующие свойства:
text-indent
text-align
text-decoration
letter-spacing
text-transform
Свойство text-indent
Свойство text-indent позволяет выделить параграф с помощью установки отступа для его первой строки. В примере 30px применяется ко всем параграфам <p>:
Задание 9.11
Измените содержание выше созданных файлов, сохраните их под новыми именами и просмотрите результат в браузере
Default9_11.htm:
<html>
<head>
<title>Работа с текстом</title>
<style type="text/css">
……….p {
text-indent: 30px;
}
</style>
</head>
<body>
<h1>Заголовок1</h1>
<p>CSS это язык стилей, определяющий отображение HTML-документов. Например,CSS работает с шрифтами, цветом, полями, строками, высотой, шириной, фоновыми изображениями, позиционированием элементов и многими другими вещами. HTML используется для структурирования содержимого страницы. CSS используется для форматирования этого структурированного содержимого.
</p>
<h2> Заголовок2- имеет совсем другой вид!!!</h2>
<p>
Заголовки второго уровня отображаются шрифтом "Times New Roman" . Если он не установлен на пользовательской машине, будет использоваться шрифт семейства serif, шрифт с засечками.
</p>
</body>
</html>
Свойство text-align
CSS-свойство text-align соответствует атрибуту, используемому в старых версиях HTML. Текст может быть выровнен left, right, centred или justify.
В примере текст заголовочных ячеек таблицы <th> выравнивается вправо, а в ячейках данных <td> - по центру. Кроме того, нормальные параграфы - justify:
Задание 9.12
Default9_12.htm:
<html>
<head>
<title> Работа с текстом </title>
<style type="text/css">
th {
text-align: right;
}
td {
text-align: center;
}
p {
text-align: justify;
}
</style>
</head>
<body>
<table width=100% border=4>
<tr >
<th> первый столбец</th><th>второй столбец </th><th>третий столбец </th>
</tr>
<tr>
<td>первая ячейка</td><td>вторая ячейка</td><td>третьячейка</td>
</tr>
</table>
<p>
Каскадные таблицы стилей или CSS (от английского Cascading Style Sheets) являются следствием дальнейшего развития HTML и дают нам возможность перейти на следующий уровень представления информации. Таблицы стилей позволяют разделить смысловое содержимое странички и его оформление.
</p>
</body>
</html>
Свойство text-decoration
Свойство text-decoration позволяет добавлять различные "декоративные эффекты". Например, можно подчеркнуть текст, провести линию по или над текстом и т. д. В примере <h1> подчёркнуты, <h2> - имеют черту над текстом, а <h3> - перечёркнуты.
Задание 9.13
Default9_13.htm:
<html>
<html>
<head>
<title> Работа с текстом </title>
<style type="text/css">
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
</style>
</head>
<body>
<h1>Примеры использования Сss</h1>
<p>CSS это язык стилей, определяющий отображение HTML-документов.
Например,CSS работает с шрифтами, цветом, полями, строками, высотой, шириной,
фоновыми изображениями, позиционированием элементов и многими другими вещами.
HTML используется для структурирования содержимого страницы. CSS используется для форматирования этого структурированного содержимого.
</p>
<h2> Примеры использования Сss</h2>
<p>
Нормальная форма отображения
</p>
<h3>заголовок 3</h3>
<p>
Каскадные таблицы стилей или CSS (от английского Cascading Style Sheets) являются следствием дальнейшего развития HTML и дают нам возможность перейти на следующий уровень представления информации. Таблицы стилей позволяют разделить смысловое содержимое странички и его оформление.
</p>
</body>
</html>
Свойство letter-spacing
Интервал между буквами текста можно специфицировать свойством letter-spacing. Значение - нужная величина. Например, если вам необходимо 3px между буквами в параграфах <p> и 6px - в заголовках <h1>, то используется такой код:
Задание 9.14
Default9_14.htm:
<html>
<html>
<head>
<title> Работа с текстом </title>
<style type="text/css">
h1 {
letter-spacing: 6px;
}
p {
letter-spacing: 3px;
}
</style>
</head>
<body>
<h1>Примеры использования Сss</h1>
<p>CSS это язык стилей, определяющий отображение HTML-документов.
Например,CSS работает с шрифтами, цветом, полями, строками, высотой, шириной,
фоновыми изображениями, позиционированием элементов и многими другими вещами.
HTML используется для структурирования содержимого страницы. CSS используется для форматирования этого структурированного содержимого.
</p>
<h2> Примеры использования Сss</h2>
<p>
Нормальная форма отображения
</p>
<h3>заголовок 3</h3>
<p>
Каскадные таблицы стилей или CSS (от английского Cascading Style Sheets) являются следствием дальнейшего развития HTML и дают нам возможность перейти на следующий уровень представления информации. Таблицы стилей позволяют разделить смысловое содержимое странички и его оформление.
</p>
</body>
</html>
Свойство text-transform
Свойство text-transform управляет регистром символов. Можно выбрать capitalize, uppercase или lowercase, в зависимости от того, как выглядит текст в оригинальном HTML-коде.
Например, слово "headline" можно показать "HEADLINE" или "Headline". Имеются четыре возможных значения text-transform:
capitalize-Капитализирует каждое слово. Например: "john doe" станет "John Doe".
uppercase-Конвертирует все символы в верхний регистр. Например: "john doe" станет "JOHN DOE".
lowercase-Конвертирует все символы в нижний регистр. Например: "JOHN DOE" станет "john doe".
none-Трансформации нет - текст отображается так же, как в HTML-коде.
В использован список имён. Все имена выделены с помощью <li> (list-item). Капитализируем все имена и отобразим все заголовки верхним регистром.
Видите, HTML-код в этом примере в действительности записан в нижнем регистре.
Задание 9.15
Измените содержание выше созданных файлов сохраните их под новыми именами и просмотрите результат в браузере
Default9_15.htm:
<html>
<html>
<head>
<title> Работа с текстом </title>
<style type="text/css">
h1 {
text-transform: uppercase;
}
li {
text-transform: capitalize;
}
</style>
</head>
<body>
<h1>Список имен</h1>
<li>вера</li>
<li>надежда</li>
<li>любовь</li>
</body>
</html>