Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь
FAQ
Написать работу

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ Написать работу

Часть 1. Теоретические сведения.

↑

Стр 1 из 2Следующая ⇒

Порядок выполнения работы

Часть 1. Теоретические сведения. 2

Общие положения языка HTML.. 2

Структура HTML-документа. 3

Форматирование текста. 4

3.1. Цвета в HTML-документе. 4

3.2. Элементы форматирования на уровне блоков. 4

Таблица 1 - Операторы HTML для описания списка. 5

3.3. Теги, задающие шрифт. 6

Специальные теги HTML.. 6

Таблица 2 - Основные теги для оформления HTML-документа. 6

Часть 2. Практические задания 1-5 (использовать таблицы 1-2). 11

Часть 3. Выполнить контрольное задание 6. 13

Часть 1. Теоретические сведения.

Общие положения языка HTML

Язык HTML (HyperText Markup Language, язык разметки гипертекста) — это язык, на котором создаются Web-страницы.

Web-страницы (HTML-документы) могут просматриваться различными типами Web-браузеров. Когда документ создан с использованием HTML, Web-браузер может интерпретировать HTML для выделения различных элементов документа и первичной их обработки. Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей.

Web-страницы могут быть созданы с помощью

1) обычного текстового редактора;

2) редактора, способного сохранять в формате HTML;

3) специализированного редактора;

4) специализированной системы.

HTML-документы сохраняются на диске как обычные текстовые документы в формате ASCII. Для распознавания Web-страниц по их именам общепринято обозначать такие файлы использованием расширений.HTM (для Windows 3.1) или.HTML (для Windows 95/98/NT, Macintosh и Unix).

Кроме полезного текста в HTML-документах используются специальные управляющие последовательности символов — теги.

Структура тега имеет следующий вид:

Парный тег:

<ТЕГ атрибут1=значение1...>

Текст

Другие конструкции

</ТЕГ>

Одиночный тег:

<ТЕГ атрибут1=значение1...>

Текст

Другие конструкции

Чаще всего теги используются попарно, окружая размеченные фрагменты текста. Такие теги называются контейнерами. Закрывающий тег отличается от начального только присутствием символа "/", добавляемого перед именем тега.

При интерпретации тегов браузер не делает различия между строчными и прописными буквами. Поэтому сами теги можно набирать на любом регистре.

Атрибуты (параметры) для тегов часто является необязательной величиной и их можно пропускать.

Структура HTML-документа

Когда Web-браузер получает документ, он определяет, как документ должен быть интерпретирован. Самый первый тег, который встречается в документе, должен быть тегом <HTML>. Данный тег сообщает Web-браузеру, что документ написан с использованием HTML.

Минимальный HTML-документ имеет структуру:

<HTML>

...тело документа...

</HTML>

Теги <HTML> и </HTML> заключают внутри себя все элементы HTML-кода, указывая, что используется язык HTML.

Тем не менее, принято выделять заголовочную часть и тело Web-документа.

Теги <HEAD> и </HEAD> обозначают заголовочную часть Web-документа. Как правило, заголовочная часть содержит название документа, метатеги с информацией для индексирования и некоторые общие установки для данного документа.

Тег заголовочной части документа должен быть использован сразу после тега <HTML> и более нигде в теле документа.

Теги <BODY> и </BODY> обрамляют тело (основную часть) документа. Здесь размещается основная смысловая текстовая и графическая информация. Тело документа отображается в окне браузера.

Разделение документа на заголовочную часть и тело имеет лишь смысловую нагрузку. Текст, приведенный в любой из этих частей, на экране выглядит совершенно одинаково.

В общем виде Web-документ имеет следующую структуру:

<HTML>

<HEAD>

<TITLE>

… текст для строки заголовка браузера

</TITLE>

</HEAD>

<BODY>

… тело документа (в окне браузера)

</BODY>

</HTML>

Внутри контейнера <HEAD> может использоваться тег <TITLE>, как показано выше. Большинство Web-браузеров отображают содержимое этого тега в строке заголовка окна Web-браузера, содержащего документ, и в файле закладок, если он поддерживается Web-браузером.

Как любой язык, HTML позволяет вставлять в тело документа пояснительный текст (комментарии), который сохраняется при передаче документа по сети, но не отображается браузером.

Синтаксис комментария следующий:

Комментарии могут встречаться в любом месте документа.

Форматирование текста

При выводе на экран текста браузер игнорирует дополнительные пробелы, символы табуляции и возврата каретки, пустые строки. Их можно использовать для того, чтобы сделать текст HTML-документа легко читаемым.

Для правильного отображения Web-страницы в окне браузера следует использовать специальные теги для структурирования и форматирования текста.

Цвета в HTML-документе

Существует две формы задания цвета:

символьная - указывается название одного из предопределенных цветов, например, RED;

цифровая - комбинация RGB: #RRGGBB, например, для красного - #FF0000.

Символьные идентификаторы и RGB-комбинации основных цветов приведены ниже:

Цвет	Символьное обозначение	Цифровое обозначение
Черный	BLACK	#000000
Темно-синий	NAVY	#000080
Голубой	BLUE	#0000FF
Зеленый	GREEN	#008000
Сине-зеленый	TEAL	#008080
Ярко-зеленый	LIME	#00FF00
Ярко-голубой	AQUA	#00FFFF
Темно-красный	MAROON	#800000
Темно-сиреневый	PURPLE	#800080
Оливковый	OLIVE	#808000
Серый	GRAY	#808080
Серебряный	SILVER	#C0C0C0
Красный	RED	#FF0000
Сиреневый	FUCHSIA	#FF00FF
Желтый	YELLOW	#FFFF00
Белый	WHITE	#FFFFFF

Язык HTML определяет для тега BODY следующие атрибуты цветов:

BGCOLOR - цвет фона для тела документа,

TEXT - цвет, используемый при выводе на экран текста из данного документа,

LINK - цвет, который будет использоваться при выводе на экран текста из еще не выбранных вами гипертекстовых связей,

VLINK - цвет, который будет использоваться при выводе на экран текста из уже проверенных вами гипертекстовых связей,

ALINK - цвет, которым будут выделяться в тексте гипертекстовые связки в тот момент, когда пользователь щелкает по ним клавишей мыши.

Атрибут COLOR, указывающий на цвет, может также использоваться в тегах: , <HR>.

Таблица 1 - Операторы HTML для описания списка

Нумерованный список – Ordered List	Маркированный список – Unordered List	Вложенный список	Список терминов и определений
<ol> <li>пункт списка <li>пункт списка <li>пункт списка … </ol>	<ul> <li>пункт списка <li>пункт списка <li>пункт списка … </ul>	<ol> <li> пункт списка 1 … <ul> <li> пункт списка 2 … </ul> … <li> пункт списка 1 </ol>	<dl> <dt>Название термина <dd>определение термина <dt>Название термина <dd>определение термина … </dl>

Для маркированных, нумерованных и вложенных списков могут использоваться атрибуты:

TYPE - тип маркера

Для нумерованных		Для маркированных
A	Заглавные буквы		disс	Закрашенный кружок. По умолчанию
a	Строчные буквы		circle	Незакрашенный кружок
I	Заглавные римские цифры		square	Квадратик
i	Строчные римские цифры
	Арабские цифры (по умолчанию)

START - Начальное значение для нумерованного списка при использовании арабских цифр

TITLE - Всплывающая подсказка

<OL TYPE =A TITLE ="нумерованный список" >

…

</OL>

Теги, задающие шрифт

 текст 

SIZE — устанавливает размер шрифта, который будет использоваться текстом, содержащимся в пределах элемента FONT. Можно задать абсолютный размер шрифта, указав целое число от 1 до 7. Для шрифта можно также указывать относительный размер, присваивая атрибуту целое число со знаком (например, это может быть SIZE="+1" или SIZE="-2").

COLOR — указывает цвет, которым будет выделен данный фрагмент текста. Цвета задаются в виде RGB-значения с шестнадцатеричной нотацией, либо выбирается символьное значение одного из стандартных цветов.

FACE — задает гарнитуру шрифта, например FACE=ARIAL.

<TT> текст </TT> — телетайпный текст (моноширинный).

 текст  — стиль с наклонным шрифтом (курсив).

 текст  — стиль с жирным шрифтом.

 текст  — стиль с подчеркиванием текста.

<BIG> текст </ BIG> — печать текста шрифтом увеличенного размера (большего, чем окружающий текст).

 текст  — печать текста шрифтом уменьшенного размера (меньшего, чем окружающий текст).

 текст  — печать текста со сдвигом вниз (нижний индекс или подстрочный).

 текст  — печать текста со сдвигом вверх (верхний индекс или надстрочный).

<STRIKE> текст </ STRIKE> или <S> …</S> — стиль с перечеркиванием текста.

Специальные теги HTML

Тег <ADDRESS> используется для выделения автора документа и его адреса (например, e-mail).

<ADDRESS> Адрес-автора </ADDRESS>

Некоторые символы являются управляющими символами в HTML и добавляются в текст только при помощи ESC-последовательностей:

· левая угловая скобка "<" - <

· правая угловая скобка ">" - >

· амперсанд "&" - &

· двойные кавычки """ - "

Существует большое количество ESC-последовательностей для обозначения специальных символов, например "©" для обозначения знака Ó и "®" для значка Ò. Одной из особенностей является замена символов во 2-ой части символьной таблицы (после 127-ого символа) на escape-последовательности для передачи текстовых файлов с национальными языками по 7-битным каналам.

ESC-последовательности чувствительны к регистру: НЕЛЬЗЯ использовать &LT; вместо <.

Наиболее часто используемые теги приведены в таблице 2.

Таблица 2 - Основные теги для оформления HTML-документа

тег HTML – начальный и конечный теги всего HTML-документа

№	Атрибут	Функция
	version= строка	Указывается версия HTML, которая была использована для создания данного документа
	i	Заключенный в теги текст будет отображаться в курсивном начертании
тег HEAD – начальный и конечный теги заголовочной части HTML-документа
тег TITLE – начальный и конечный теги заголовка HTML-документа
тег A – начальный и конечный теги, которые позволяют создать гиперссылку (атрибут href) или идентификатор фрагмента (атрибут name) заголовка HTML-документа
№	Атрибут	Функция
	href= url	Указывается URL-адрес целевого документа гиперссылки (необходим, если это не якорь имени)
	methods= список	Задается список методов отображения, зависящих от браузера (через запятую)
	name= строка	Указывается имя идентификатора фрагмента (необходим, если это не якорь гипертекстовой ссылки)
	rel= связь	Определяется связь этого документа с целевым документом
	rev= связь	Определяется обратная связь целевого документа с данным
	target= имя	Задается имя кадра или окна отображения обозначенного ссылкой документа
	title= строка	Задается заголовок целевого документа
	urn= urn	Указывается не зависящее от места нахождения универсальное имя ресурса для данной гиперссылки
тег ADDRESS – заключенный в данные теги текст представляет собой адрес
тег B – заключенный в данные теги текст будет отображаться жирным шрифтом
тег BASE – указывается базовый URL для всех относительных URL в данном документе
№	Атрибут	Функция
	href= url	Указывается базовый URL-адрес
	target= имя	Задается использующееся по умолчанию целевое окно для всех ссылок <a> в документе. Предназначен в основном для переадресации ссылки в другие кадры. Существует четыре специальных значения: _blank, _parent, _self и _top
тег BASEFONT – указывается размер шрифта для последующего текста
№	Атрибут	Функция
	size= значение	Установка размера базового шрифта. Диапазон – от 1 до 7
тег BIG – заключенный в теги текст будет отображаться шрифтом большего размера
тег BODY – начальный и конечный теги тела документа
№	Атрибут	Функция
	alink= цвет	Установка цвета активных гипертекстовых ссылок в документе
	background= url	Указывается URL фонового изображения
	bgcolor= цвет	Установка цвета фона документа
	bgproperties= значение	Если значение равно fixed, запрещается прокрутка фонового изображения вместе с содержимым документа (IE2 и выше)
	leftmargin=значе н ие	Установка размера (в пикселах) левого поля документа (IE2 и выше)
	link= цвет	Установка цвета "непосещенных" гипертекстовых ссылок в документе
	text= цвет	Установка цвета обычного текста в документе
	topmargin= значение	Установка размера (в пикселах) верхнего поля документа (IE2 и выше)
	vlink= цвет	Установка цвета "посещенных" ссылок в документе
тег BR – разрыв текущего текстового потока и возобновление его с начала следующей строки
№	Атрибут	Функция
	clear=поле	Задается "обтекание" объекта, расположение которого указано значением данного атрибута (left, right или all). При переносе на новую строку текст будет размещаться так, чтобы объект оставался видимым
тег CENTER – размещение заключенного в теги текста по центру
тег CITE – заключенный в теги текст представляет собой цитату
тег COMMENT – Комментарий в тексте документа. Комментарии будут видимы в любом браузере. Для всех браузеров комментарий представляется в виде <!—текст комментария -->
тег DD – задается описательная часть для элемента списка определений
тег DFN – текст, заключенный в теги форматируется как определение
тег DL – создание списка определений, содержащих теги <dt> и <dd>
тег DT – задается описательно-условная часть для элемента списка определений
тег EMBED – начальный и конечный теги, которые позволяют описать встраиваемый в документ объект. В зависимости от вида встраиваемого объекта могут, помимо указанных ниже, включаться дополнительные параметры
№	Атрибут	Функция
	src= url	Указывается URL встраиваемого объекта. Этот атрибут является необходимым
	height= n	Указывается высота зоны, которую займет встроенный объект
	name= имя	Указывается имя встраиваемого объекта
	width= n	Указывается ширина зоны, которую займет встроенный объект
тег FONT – установка размера, цвета или гарнитуры заключенног в теги текста
№	Атрибут	Функция
	color=цвет	Установка цвета заключенного в теги текста
	face=список	Установка гарнитуры заключенного в теги текста (устанавливается первый из указанных в разделенном запятыми списке имен шрифтов)
	size= значение	Установка размера базового шрифта. Диапазон – от 1 до 7
тег Hn – заключенный в теги текст представляет собой заголовок уровня n. Возможные значения n – от 1 до 6
№	Атрибут	Функция
	align= тип	Указывается способ выравнивания заголовка: по левому краю (left, по умолчанию), по центру (center) или по правому краю (right)
тег HR – разрыв текущего текстового потока. В месте разрыва будет вставлена горизонтальная линейка
№	Атрибут	Функция
	align= тип	Указывается способ выравнивания линейки: по левому краю (left), по центру (center, по умолчанию) или по правому краю (right)
	noshade	Запрещается использование объемного затенения при отображении линейки
	size= n	Установка толщины линейки равной целому числу пиксел
	width= значение
тег I – заключенный в теги текст будет отображаться в курсивном начертании
тег IMG – в текущий текстовой поток вставляется изображение
№	Атрибут	Функция
	alt= текст	Задается альтернативный текст для браузеров, не поддерживающих работу с изображениями
	Border= n	Установка толщины (в пикселах) обрамления изображений, содержащихся в гиперссылках
	controls	Добавление функций управления воспроизведением встроенных виедоклипов (IE2 и выше)
	Dynsrc= url	Задается URL-адрес видеоклипа, подлежащего изображению (IE2 и выше)
	Height= n	Задается высота изображения в пикселах
	Hspace= n	Задается размещение слева и справа от изображения областей свободного пространства шириной по n пиксел
	Ismap	Указывается, что при использовании данного тега внутри тега <a> изображение выбирается с помощью мыши
	loop= значение	Установка числа повторов воспроизведения видео. Значение может быть целым или значением infinite (IE2 и выше)
	Lowsrc= url	Указывается изображением с низким разрешением, которое браузер должен загрузить первым. За ним следует изображением, заданное атрибутом <src> (IE2 и выше)
	src= url	Указывается исходный URL изображения, подлежащего воспроизведению. Этот атрибут является необходимым
	start= начало	Указывается, когда следует воспроизвести видеоклип (варианты: fileopen или mouseover)
	Usemap= url	Указывается чувствительная к перемещению мыши область изображения
	Vspace= n	Задается размщенеие над и под изображением областей свободного пространства по n пиксел
	width= n	Указывается ширина изображения в пикселах
тег KBD – заключенный в теги текст вводится посимвольно (как при наборе с клавиатуры)
тег LINK – в заголовке (<head>) документа определяется ссылка из данного документа на другой документ
№	Атрибут	Функция
	href= url	Указывается URL-адрес гипертекстововй ссылки целевого документа
	methods= список	Задается список методов отображения для данной ссылки, зависящих от браузера (через запятую)
	rel= связь	Определяется связь этого документа с целевым документом. Для Internet Explorer 3.0 rel=style означает существование внешней таблицы стилей
	rev= связь	Определяется обратная связь целевого документа с данным
	src= url	Указывается URL внешней таблицы стилей, которая будет использоваться для форматирования документа (IE2 и выше)
	title= строка	Задается заголовок целевого документа
	type= text/css	Задается тип внешней ссылки, которая будет использоваться как внешняя каскадная таблица стилей
	urn= urn	Для целевого документа указывается универсальное имя ресурса, не зависящее от его места нахождения
тег MAP – определяется чувствительная к перемещению мыши область изображения
№	Атрибут	Функция
	name= строка	Задается имя данной области. Этот атрибут является необходимым
тег NOBR – в заключенном в теги тексте разрывы не допускаются
тег P – начальный и конечный теги абзаца
	align= тип	Задается способ выравнивания текста в абзаце: по левому краю (left), центру (center) или по правому краю (right)
тег PLAINTEXT – указывается, что остальную часть документа следует отображать без обработки, как предварительно отформатированный текст
тег PRE – заключенный в теги текст будет отображаться так. как он был отформатирован предварительно, без обработки, с точным соблюдением переносов строк и интервалов
№	Атрибут	Функция
	width= n	Браузер будет размещать текст так, чтобы в строке умещалось (если возможно) n символов
тег S – заключенный в теги текст будет отображаться перечеркнутым горизонтальной линией
тег SAMP – заключенный в теги текст представляет собой шаблон
тег SMALL – заключенный в теги текст будет отображаться шрифтом меньшего размера
тег SPACER – вставить в документ разделитель (Только N3)
№	Атрибут	Функция
	type= тип	Указывается тип разделителя: vertical – между двумя строками текста помещается область пустого пространства указанного размера; horizontal – область пустого пространства указанного размера помещается между словами или символами; block – вставка прямоугольной области
	size= n	Указывается (в пикселах) ширина разделителя типа horizontal или высота разделителя типа vertical
	width= n	Указывается ширина разделителя типа block
	height= n	Указывается высота разделителя типа block
	align= значение	Указывается способ выравнивания разделителя block относительно окружающего текста.
тег SPAN – заключенный в теги текст будет форматироваться с использованием таблицы стилей (Только IE3 и выше)
№	Атрибут	Функция
	style= элементы	Для текста в заданном интервале задаются элементы таблицы стилей
тег STRIKE – заключенный в теги текст будет отображаться перечеркнутым горизонтальной линией
тег SUB – заключенный в теги текст будет отображаться как нижний индекс
тег SUP – заключенный в теги текст будет отображаться как верхний индекс
тег TT – заключенный в теги текст будет отображаться моноширинным шрифтом
тег VAR – заключенный в теги текст представляет собой имя переменной

Часть 2. Практические задания 1-5 (использовать таблицы 1-2).

Задание 1. Вызовите текстовый редактор БЛОКНОТ. Наберите следующий ниже текст и сохраните под именем web1.html.

<HTML>

<HEAD>

<TITLE>Моя персональная страничка (заголовок для браузера)</TITLE>

</HEAD>

<BODY>

ПРИВЕТ! Это моя личная домашняя страничка! Меня зовут (……………………).

</BODY>

</HTML>

1.1 Задайте цвет фона и цвет текста для Web-страницы, отличные от установленных по умолчанию.

Загрузите файл web1.html в Internet Explorer. Оцените результат.

Порядок выполнения работы

Часть 1. Теоретические сведения. 2

Общие положения языка HTML.. 2

Структура HTML-документа. 3

Форматирование текста. 4

3.1. Цвета в HTML-документе. 4

3.2. Элементы форматирования на уровне блоков. 4

Таблица 1 - Операторы HTML для описания списка. 5

3.3. Теги, задающие шрифт. 6

Специальные теги HTML.. 6

Таблица 2 - Основные теги для оформления HTML-документа. 6

Часть 2. Практические задания 1-5 (использовать таблицы 1-2). 11

Часть 3. Выполнить контрольное задание 6. 13

Часть 1. Теоретические сведения.

Общие положения языка HTML

Язык HTML (HyperText Markup Language, язык разметки гипертекста) — это язык, на котором создаются Web-страницы.

Web-страницы могут быть созданы с помощью

1) обычного текстового редактора;

2) редактора, способного сохранять в формате HTML;

3) специализированного редактора;

4) специализированной системы.

Структура тега имеет следующий вид:

Парный тег:

<ТЕГ атрибут1=значение1...>

Текст

Другие конструкции

</ТЕГ>

Одиночный тег:

<ТЕГ атрибут1=значение1...>

Текст

Другие конструкции

Атрибуты (параметры) для тегов часто является необязательной величиной и их можно пропускать.

Структура HTML-документа

Минимальный HTML-документ имеет структуру:

<HTML>

...тело документа...

</HTML>

Теги <HTML> и </HTML> заключают внутри себя все элементы HTML-кода, указывая, что используется язык HTML.

Тем не менее, принято выделять заголовочную часть и тело Web-документа.

В общем виде Web-документ имеет следующую структуру:

<HTML>

<HEAD>

<TITLE>

… текст для строки заголовка браузера

</TITLE>

</HEAD>

<BODY>

… тело документа (в окне браузера)

</BODY>

</HTML>

Синтаксис комментария следующий:

Комментарии могут встречаться в любом месте документа.

Форматирование текста

Цвета в HTML-документе

Существует две формы задания цвета:

символьная - указывается название одного из предопределенных цветов, например, RED;

цифровая - комбинация RGB: #RRGGBB, например, для красного - #FF0000.

Символьные идентификаторы и RGB-комбинации основных цветов приведены ниже:

Цвет	Символьное обозначение	Цифровое обозначение
Черный	BLACK	#000000
Темно-синий	NAVY	#000080
Голубой	BLUE	#0000FF
Зеленый	GREEN	#008000
Сине-зеленый	TEAL	#008080
Ярко-зеленый	LIME	#00FF00
Ярко-голубой	AQUA	#00FFFF
Темно-красный	MAROON	#800000
Темно-сиреневый	PURPLE	#800080
Оливковый	OLIVE	#808000
Серый	GRAY	#808080
Серебряный	SILVER	#C0C0C0
Красный	RED	#FF0000
Сиреневый	FUCHSIA	#FF00FF
Желтый	YELLOW	#FFFF00
Белый	WHITE	#FFFFFF

Язык HTML определяет для тега BODY следующие атрибуты цветов:

BGCOLOR - цвет фона для тела документа,

TEXT - цвет, используемый при выводе на экран текста из данного документа,

Атрибут COLOR, указывающий на цвет, может также использоваться в тегах: , <HR>.

12 Следующая ⇒

Познавательные статьи:

Техника прыжка в длину с разбега

Тактические действия в защите

История Олимпийских игр

История развития права интеллектуальной собственности

Последнее изменение этой страницы: 2016-08-01; просмотров: 370; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 216.73.216.146 (0.013 с.)