
- •Введение
- •1. Оформление текста документа
- •1.1 Основные понятия нтмl
- •Создание html – документа.
- •Элементы форматирования
- •1.4 Атрибут выравнивания align
- •Предварительное форматирование текста
- •Заголовки
- •Горизонтальные линии в документе
- •Элементы отображения шрифтов
- •Создание списков
- •Контрольные вопросы:
- •2. Использование графики, гиперссылок и таблиц
- •Использование графики
- •Создание гиперссылок
- •2.3 Создание таблиц.
- •Контрольные вопросы
- •Список литературы
Создание html – документа.
На рабочем диске D: создайте свою папку.
Запустите текстовый редактор Блокнот и наберите текст вашей первой Web- странички на основе приведенного ниже кода.
<HTML>
<HEAD>
<TITLE> Пример Web- странички </TITLE>
</HEAD>
<BODY>
Первая Web- страничка студента МГОУ Ф.И.О.
</BODY>
</HTML>
Сохранение файла под именем mail.html (расширение html необязательно)
Откройте документ в Internet Explorer. В окне браузера Вы должны получить следующий результат рис. 1.2
Рис. 1.2 Пример HTML – документа
В этом примере были использованы основные элементы структуры HTML – документа – контейнеры HTML, HEAD, TITLE, BODY.
Назначение этих элементов:
HTML – используется для обозначения границ HTML – документа. Начальный тег <HTML> находится в самом начале документа, а конечный тег </HTML> является последним тегом кода и означает окончание всего документа
HEAD – заголовок HTML – документа. Элемент <HEAD> размещается сразу за тегом <HTML> и предшествует основной части Web- странички. Он содержит общую информацию про HTML – файл. В середине контейнера <HEAD> могут быть размещены любые другие элементы (например, TITLE).
TITLE – обязательный элемент в области заголовка. Все то, что находится в контейнере <TITLE> интерпретируется браузером как название Web- странички и отображается в заголовке окна браузера.
BODY – тело документа. В нем размещена вся содержательная часть документа. Содержание элемента <BODY> отображается на экране согласно заданной пользователем HTML – разметке.
В приведенном выше примере основной текст документа, размещенный в контейнере <BODY>, представляет собой одну строчку.
Элемент <BODY> может иметь большое количество атрибутов, которые являются важными для определения общего вида документа.
Ниже приводится атрибуты элемента <BODY> и их назначения:
ALINK – Устанавливает цвета выделенной гиперссылки;
BACKGROUND – Указывает на url-адрес изображения-фона документа;
BGCOLOR – Устанавливает цвет фона документа;
LEFTMARGIN – Определяет ширину левого поля в пикселях;
LINK – Определяет цвет гиперссылки;
TEXT – Устанавливает цвет текста документа;
TOPMARGIN – Определяет ширину верхнего поля в пикселях;
VLINK – Определяет цвет гиперссылки, которая уже
использовалась.
В текстовом редакторе Блокнот отредактируйте текс вашей Web- странички на основе приведенного ниже кода.
<HTML>
<HEAD>
<TITLE> Пример Web- странички </TITLE>
</HEAD>
<BODY BGCOLOR='YELLOW' TOPMARGIN=200 LEFTMARGIN=200 >
Первая Web- страничка студента МГОУ Ф.И.О.
</BODY>
<HTML>
Сохраните html-файл на диске и откройте его в Internet Explorer.
При просмотре результата видно, что отображение текста значительно изменилось, благодаря заданий атрибутов отступа TOPMARGIN и LEFTMARGIN в 200 пикселей.
Использование атрибута BGCOLOR='YELLOW' задает желтый цвет фона документа.
В общем случае при просмотре Web-странички по умолчанию используются цвета, которые указаны в настраиваемых параметрах браузера. Разработчик может задать любым элементам документа свой цвет. Для упрощения процедуры задания цвета в HTML используется символический код, согласно которому каждому из 16 основных цветов присваивается имена:
ЦВЕТ Имя код
Черный - black - 000000
Бордовый - maroon - 800000
Зеленый - green - 008000
Оливковый - olive - 808000
Темно-синий - navy - 000080
Фиолетовый - purple - 800080
Электрик - teal - 008080
Серый - gray - 808080
Серебряный - silver - C0C0C0
Красный - red - FF0000
Лимонный - lime - 00FF00
Желтый - yellow - FFF00
Фуксия - fuchsia - FF0FF
Морская волна- aqua - 00FFF
Белый - white - FFFFFF
Так же цвета в HTML можно задавать с помощью 16-ричной системы кодирования. Например, следующие две строки идентичны (задают зеленый цвета фона):
<BODY BGCOLOR='GREEN'>
<BODY BGCOLOR='#008000'>