 |
Главная Случайная страница Контакты | Мы поможем в написании вашей работы! | |
Оформление текста документа
|
|
Цель: Ознакомление с основными понятиями языка НТМL, принципами оформления и форматирования текста, а так же способами создания списков.
Основные понятия НТМL
При, просмотре в текстовом редакторе НТМL – документ имеет примерно такой вид:
| <HTML> <HEAD> <TITLE> Название Web- странички </TITLE> </HEAD> <BODY> … Содержание Web- странички </BODY> </HTML> |
Рис. 1.1 Общий вид HTML- документа
Разметка HTML – документов выполняется я помощью тегов (дескрипторов), которые записываются по определенным правилам.
Тег (tag – метка, указание) – это код, который идентифицирует определенный элемент документа HTML. Теги заключаются в угловые скобки < >. Большинство тегов являются парными, т.е. для каждого начального тега <имя>, имеется конечный тег - </имя>, в котором к имени тега добавляют косую черту «/».
Пара тегов, которая складывается из начального и конечного тегов, называются контейнером. Контейнеры обозначаются по имени начального тега.
Так в приведенном на рис. 1.1, используются контейнеры:
<HTML>…</HTML>
<HEAD>…</HEAD>
<TITLE>…</TITLE>
<BODY>…</BODY>
Три точки между начальными и конечным тегами контейнера означает, что между ними может находиться текст или другие теги.
Документ HTML включает в себя элементы, которые представляют собой образцы, заголовки, гиперссылки, рисунки и т.д. В общем, весь документ можно рассматривать как состоящий из отдельных элементов.
Все элементы, которые используются в HTML, можно условно разбить на несколько категорий:
- структурные – это элементы, обязательные для документа, который отвечает стандарту HTML (например, <HTML>, <HEAD>, <TITLE>, <BODY>)
- блоковые – элементы, предназначенные для форматирования целых текстовых блоков (например, <P>, <PRE>, <DIV>, <H1>)
- текстовые – элементы, которые задают разметку текста и шрифты (например, <I>, <B>, <TT>, <SMALL>)
- специальные – элементы пустой строки, таблицы, формы и др. (например, <BR>, <HR>, TABLE>, <TEXTAREA>)
Очень часто теги, кроме имени включают в себя дополнительные элементы, которые называются атрибутами.
Атрибуты – это компоненты тега, которые несут указания о том, как браузер должен воспринять и обработать данный тег.
Тег может иметь несколько атрибутов. Значения атрибутов записываются после имени атрибута через знак равенства.
Все значения атрибутов по умолчанию должны закрываться в двойные (") или одинарные (') кавычки.
Например:
COLOR= 'YELLOW'
Набор допустимых атрибутов для каждого тега и их имена четко определяются спецификациею HTML.
1.2 Создание HTML – документа.
1.2.1 На рабочем диске D: создайте свою папку.
1.2.2 Запустите текстовый редактор Блокнот и наберите текст вашей первой Web- странички на основе приведенного ниже кода.
<HTML>
<HEAD>
<TITLE> Пример Web- странички </TITLE>
</HEAD>
<BODY>
Первая Web- страничка студента МГОУ Ф.И.О.
</BODY>
</HTML>
1.2.3 Сохранение файла под именем mail.html (расширение html необязательно)
1.2.4 Откройте документ в 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 – Определяет цвет гиперссылки, которая уже
использовалась.
1.2.5 В текстовом редакторе Блокнот отредактируйте текс вашей Web- странички на основе приведенного ниже кода.
<HTML>
<HEAD>
<TITLE> Пример Web- странички </TITLE>
</HEAD>
<BODY BGCOLOR='YELLOW' TOPMARGIN=200 LEFTMARGIN=200 >
Первая Web- страничка студента МГОУ Ф.И.О.
</BODY>
<HTML>
1.2.6 Сохраните 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'>
Дата публикования: 2015-02-20; Прочитано: 226 | Нарушение авторского права страницы | Мы поможем в написании вашей работы!
