- •Красноярск
- •Введение
- •1 Введение в html
- •1.1 Основные понятия
- •1.2 Пример html-документа
- •2 Теги текста
- •2.1 Основные теги текста
- •2.2 Теги форматирования текста
- •2.3 Пример использования тегов текста
- •2.4 Лабораторная работа
- •2.5 Контрольные вопросы
- •3 Стилевое оформление
- •3.1 Основные сведения и примеры стилевого оформления
- •3.2 Лабораторная работа
- •3.3 Контрольные вопросы
- •4 Таблицы
- •4.1 Основные теги таблиц
- •4.2 Пример использования тегов таблиц
- •4.3 Лабораторная работа
- •4.4 Контрольные вопросы
- •5 Списки
- •5.1 Основные теги списков
- •5.2 Пример использования тегов списков
- •5.3 Лабораторная работа
- •5.4 Контрольные вопросы
- •6 Изображения
- •6.1 Основные теги изображений
- •Примечание:
- •6.2 Примеры использования тегов изображения
- •6.3 Лабораторная работа
- •6.4 Контрольные вопросы
- •7 Гиперссылки
- •7.1 Основные теги гиперссылок
- •7.2 Навигационные карты
- •7.3 Пример использования гиперссылок
- •7.3 Лабораторная работа
- •7.4 Контрольные вопросы
- •8 Фреймы
- •8.1 Основные теги фреймов
- •8.2 Пример использования фреймов
- •8.3 Лабораторная работа
- •8.4 Контрольные вопросы
- •9 Формы
- •9.1 Основные теги форм
- •9.2 Пример использования формы
- •9.3 Лабораторная работа
- •9.4 Контрольные вопросы
- •10.1 Назначение JavaScript
- •10.2 История создания языка
- •10.3 Возможности языка
- •11 Задание для самостоятельной работы
- •Библиографический список
- •Содержание
1 Введение в html
1.1 Основные понятия
Гипертекст - это текст в который встроены специальные коды, управляющие дополнительными элементами, такие как иллюстрации, мультимедийные вставки, гиперссылки на другие документы.
Тег - оформленная единица HTML-кода.
Элемент - понятие, введенное для удобства. Например, элемент HEAD состоит из двух тегов - открывающего <HEAD> и закрывающего </HEAD>. Следовательно, элемент - более емкое понятие, обозначающее пару тегов и участок документа между тегами, на который распространяется их влияние.
Разметка - это вставка в текст кодов, определяющих то, как итоговый гипертекстовый документ должен отображаться специальной программой-браузером.
HTML - компактный язык, используемый для создания сайтов и эффектов в них. HTML документ представляет собой обычный текстовый файл.
Существует два вида тегов: требующие закрытия (т. е. ограничения действия) и не требующие закрытия.
Закрывающим элементом всегда служит тот же самый тег, но со знаком «/» после первой угловой скобки. Для имен тегов можно использовать как прописные, так и строчные буквы латинского алфавита. Для облегчения понимания исходного текста Web-страницы часто начальные теги записывают прописными буквами, а конечные теги – строчными.
При закрытии тегов необходимо руководствоваться следующим правилом — если один закрывающий тег вложен внутрь второго, первым необходимо закрывать вложенный тег. Закрывающие теги должны идти в порядке, обратном открывающим.
В начальных тегах могут присутствовать установки уточняющие действия тега. Установки называются – атрибутами тегов. В одном теге могут быть одновременно заданы значения нескольких атрибутов. Действия атрибутов ограниченно областью действия тега. Для каждого тега имеются определенный набор тегов и допустимых значений для них.
Для того, чтобы текстовый файл превратился в HTML-файл, поменять его расширение с ".txt" на ".html" недостаточно. Надо соблюсти "правило первой строки":
Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML <!DOCTYPE>.
Самый короткий html-документ состоит буквально из одной строки. На самом деле одной строкой дело не обходится. После объявления версии и типа документа необходимо обозначить его начало и конец. Это делается с помощью тега-контейнера <HTML>. Необходимо отметить, что любой HTML-документ открывается тегом <HTML> и им же закрывается.
Затем, между тегами <HTML> и </HTML> следует разместить заголовок и тело документа. Вот как должен выглядеть ваш базовый HTML-файл перед началом работы:
1.2 Пример html-документа
Правильный пример самого короткого HTML-документа:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//RU">
<HTML>
<HEAD>
<TITLE>Заголовок документа</TITLE>
</HEAD>
<BODY>
Текст документа
</BODY>
</HTML>
2 Теги текста
2.1 Основные теги текста
В этом разделе описаны элементы, разбивающие текст документа на блоки тем или иным способом. Типичными примерами текстовых блоков являются параграфы, абзацы и главы. Для отделения одной части текста от другой также используются разделительные горизонтальные линии и символы возврата каретки.
H1,H2,...H6. Используются для создания заголовков текста. Существует шесть уровней заголовков, различающихся величиной шрифта. С их помощью можно разбивать текст на смысловые уровни - разделы и подразделы.
Атрибуты:
ALIGN - определяет способ выравнивания заголовка по горизонтали.
Возможные значения: left, right, center.
P. Используется для разметки параграфов.
Атрибуты:
ALIGN - определяет способ горизонтального выравнивания параграфа.
Возможные значения: left, center, right. По умолчанию имеет значение left.
DIV. Используется для отделения блока HTML-документа от остальной части документа. Находящиеся между начальным и конечным тегами текст или HTML-элементы оформляются как отдельный параграф.
Атрибуты:
ALIGN - определяет выравнивание содержимого элемента DIV. Параметр может принимать следующие значения: left, right, center.
BR. Осуществляет перевод строки, то есть практически аналогичен нажатию Enter в текстовом редакторе. После того, как в браузерах появилась возможность обтекания изображения текстом, понадобился дополнительный параметр CLEAR. Элемент не имеет конечного тега.
Атрибуты:
CLEAR - указывает на необходимость завершения обтекания изображения текстом. Может принимать следующие значения :
-
all - завершить обтекание изображения текстом.
-
left - завершить обтекание текстом изображения, выровненного по левому краю.
-
right - завершить обтекание текстом изображения, выровненного по правому краю.
HR. Вставляет в текст горизонтальную разделительную линию.
Атрибуты:
WIDTH - определяет длину линии в пикселях или процентах от ширины окна браузера.
SIZE - определяет толщину линии в пикселях.
ALIGN - определяет выравнивание горизонтальной линии. Параметр может принимать следующие значения:
-
left - выравнивание по левому краю документа.
-
right - выравнивание по правому краю документа.
-
center - выравнивание по центру документа (используется по умолчанию).
NOSHADE - определяет способ закраски линии как сплошной. Параметр является флагом и не требует указания значения. Без данного параметра линия отображается объемной.
COLOR - определяет цвет линии. Задается либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов. Работает только в Internet Explorer, поэтому лучше его не использовать.
PRE. Используется для включения в документ уже отформатированного текста. Браузеры воспроизводят содержимое этого элемента с помощью моноширного шрифта, сохраняя пробелы и символы конца строки.