- •Учебник html
- •Основы html
- •Что такое Internet
- •Что такое www
- •Что такое url
- •Что такое Web-браузер
- •Что такое гиперссылка
- •Что такое html
- •С помощью чего создаются Web-страницы
- •Обязательные тэги
- •Создание абзаца, символов пробела, заголовка
- •Создание заголовков
- •Добавление комментариев в html-код
- •Вставка спецсимволов
- •Предварительное форматирование текста
- •Выделение фрагментов текста
- •Выбор шрифта
- •Изменение размера шрифта
- •Выбор цвета шрифта
- •Изменение цвета фона
- •Поля страницы
- •Моноширинные шрифты
- •Блоки цитат
- •Нумерованный список
- •Маркированный список
- •Многоуровненвый список
- •Списки определений
- •Вставка изображения
- •Добавление фона
- •Обтекание графики текстом
- •Выравнивание текста
- •Пустая область вокруг изображения
- •Горизотнальная линейка
- •Списки с графическими маркерами
- •Преобразование формата изображения
- •Задание размеров изображения
- •Увеличение размеров изображения
- •Уменьшение изображения
- •Обрезка изображения
- •Уменьшение разрешения изображения
- •Уменьшение глубины цвета изображения
- •Прозрачность фона изображения
- •Чередующиеся изображения gif
- •Создание таблицы
- •Обрамление таблицы
- •Заголовок таблицы
- •Группирование столбцов
- •Группирование строк
- •Задание цвета элементов таблицы
- •Графический фон таблицы
- •Выравнивание данных в таблице
- •Изменение размеров таблицы
- •Слияние ячеек таблицы
- •Улучшение внешнего вида таблицы
- •Отображение границ таблицы
- •Перенос слов в ячейках таблицы
- •Вложенные таблицы
- •Обтекание таблицы текстом
- •Гиперссылка на другую страницу
- •Гиперссылка в пределах страницы
- •Почтовая гиперссылка
- •Открытие страниц в новом окне
- •Цвет текста гиперссылок
- •Порядок перехода по гиперссылкам
- •Создание фреймов
- •Достоинства и недостатки фреймов
- •Полосы прокрутки фреймов
- •Изменение границ фреймов
- •Плавающие фреймы
- •Что такое формы.
- •Создание бегущей строки
- •Размещение текста поверх изображения
- •Создание всплывающих подсказок
- •Создание водяного знака
- •Внешний лист стилей
- •Частное определение стилей
- •Атрибут id
- •Класс стилей
- •Форматирование произвольного фрагмента Вэб-страницы
- •Пустые области вокруг элементов Вэб-страницы
- •Обтекание текстом
- •Задание размеров
- •Способ воспроизведения элементов
- •Разрыв страницы
- •Относительное позиционирование
- •Абсолютное позиционирование
Изменение цвета фона
Атрибут BGCOLOR дает возможность явного указания цвета фона вэб-страницы. Цвет фона задается аналогично цвету текста (именем или кодом).
Пример:
HTML-код: <BODY BGCOLOR="#00FF00"> </BODY> |
Отображение в браузере:
|
Форматирование текста ч.3
Поля страницы
Моноширинные шрифты
Блоки цитат
Поля страницы
Поле - это полоса чистого пространства между воображаемой рамкой, в которую заключено содержимое страницы, и границами окна браузера. Поля позволяют придать странице аккуратный внешний вид.
В IE 5.0 используются следующие атрибуты для задания полей страницы:
LEFTMARGIN - левой поле
RIGHTMARGIN - правое поле
TOPMARGIN - верхнее поле
BOTTOMMARGIN - нижнее поле
По умолчанию размер полей равен, примерно, 10 пикселям.
Моноширинные шрифты
Для отображения моноширинных шрифтов используются тэги <TT> <CODE> <KBD> <SAMP>. При этом каждому символу строки отводится одинаковое пространство.
Дескриптор <TT> наиболее часто используется и служит для выделения отдельных слов или фраз текста.
Дескриптор <CODE> применяют для выделения программных инструкций.
Дескриптор <KBD> полезен для выделения фрагментов текста, который должен быть введен пользователем.
Дескриптор <SAMP> часто используют для обозначения текстов примеров.
Пример:
HTML-код:
<p>Основной текст основной текст основной текст </p> <p><tt>Этот текст заключен в тэг TT</tt></p> |
Отображение в браузере:
Основной текст основной текст основной текст Этот текст заключен в тэг TT |
Блоки цитат
Для создания блоков цитат применяют тэг <BLOCKQUOTE>. При этом цитата отображается с дополнительными отступами.
Если надо сформировать короткую цитату внутри абзаца, можно использовать тэг <Q>. Фрагмент текста в этом случае будет заключен в двойные кавычки.
Пример:
HTML-код:
<p>Основной текст основной текст основной текст основной текст</p> <p><blockquote>Блок цитат блок цитат Блок цитат блок цитат Блок цитат блок цитат</blockquote></p> |
Отображение в браузере:
Основной текст основной текст основной текст основной текст Блок цитат блок цитат Блок цитат блок цитат Блок цитат блок цитат |
Создание списков
Нумерованный список
Маркированный список
Многоуровненвый список
Списки определений
Основное применение списков:
Нумерованные - для перечисления элементов, следующих в строго определенном порядке.
Маркированные - для перечисления элементов, следующих в произвольном порядке.
Многоуровневые - для конкретизации информации определенных элементов.
Список определений - используется для форматирования словарей.
Нумерованный список
Для создания нумерованных списков используются тэги <OL> <LI>
Тэгом <OL> отмечается начало/окончание всего списка.
Тэгом <LI> обозначают начало/конец отдельного элемента списка.
По умолчанию элементы списка нумеруются по порядку 1, 2, 3… При помощи атрибута TYPE можно изменить стиль нумерации.
Значение Нумерация
TYPE
A A, B, C..
a a, b, c..
I I, II, III..
i i, ii, iii..
1 1. 2. 3..
Если дополнить уже существующий список новыми значениями, то браузер автоматически пересчитает его.
При помощи атрибутов START VALUE можно изменить порядок нумерации списка.
START - служит для задания начального номера списка, отличного от 1.
VALUE - дает возможность назначить произвольный номер любому элементу списка.
Пример:
HTML-код:
<ol> <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> </ol> <ol type="A"> <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> </ol> <ol start="5"> <li>элемент 1</li> <li value="9">элемент 2</li> <li>элемент 3</li> </ol> |
Отображение в браузере:
|