Добавил:

Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.

Вуз:

Государственный университет — учебно-научно-производственный комплекс (бывш. ОрелГТУ)

Предмет:

[НЕСОРТИРОВАННОЕ]

Файл:

Информационные технологии-Методичка(Практика).pdf

Скачиваний:

126

Добавлен:

28.03.2015

Размер:

964.93 Кб

Скачать

☆

<<< < Предыдущая 12 / 132 3 4 5 6 7 8 9 10 11 12 13 > Следующая >>>

2.Формулировка задания на практическую работу №1.

3.Гипертекстовая разметка web-страницы (HTML-код), выполненная в соответствии с пунктом 1.2.

4.Ответы на контрольные вопросы.

1.4 Методические указания

Документы на языке HTML имеют определенную структуру. Каждый HTML-документ содержит теги <HTML> и </HTML>, отмечающие начало и конец документа. Кроме того, документ должен включать заголовок, ограниченный тегами <HEAD> и </HEAD>. Основная информация страницы находится в теле документа, заключенном между тегами <BODY> и </BODY> и отображается во внутренней области окна. Тег <TITLE>…</TITLE> определяет название документа и является обязательным тегом в заголовке. Название документа не отображается на web-странице, а выводится в заголовке окна браузера. Заголовок имеет вид:

<TITLE>Имя заголовка</TITLE>.

Таким образом, простейший HTML документ будет иметь вид:

<HTML>

<HEAD>

<TITLE> Простейший HTML документ</TITLE>

</HEAD>

<BODY>

Добро пожаловать!

</BODY>

</HTML>

Для документа HTML можно задать цвет фона. Для этого необходимо использовать параметр BGCOLOR тега <BODY>. Цвет может быть задан в формате RGB или стандартным именем. В таблице 1 ниже представлено обозначение некоторых цветов.

					10
Таблица 1 – Представление цветов в HTML

Цвет	Стандартное	Код	Цвет	Стандартное	Код
Цвет	имя	Код	Цвет	имя	Код
	имя			имя
Черный	black	#000000	Серебряный	silver	#C0C0C0
Темно-	maroon	#800000	Красный	red	#FF0000
бордовый
Зеленый	green	#008000	Известь	lime	#00FF00
Оливковый	olive	#808000	Желтый	yellow	#FFFF00
Темно-синий	navy	#000080	Синий	blue	#0000FF
Фиолетовый	purple	#800080	Фуксия	fuchsia	#FF00FF
Чирок	teal	#008080	Аква	aqua	#00FFFF
Серый	gray	#808080	Белый	white	#FFFFFF

В языке HTML возможно использование заголовков шести уровней. Заголовок первого уровня считается самым главным и используется в качестве первого заголовка документа, например, он выделяет заглавие документа. Заголовки могут выделяться цветом и/или жирным шрифтом, чем используемый для остальной части документа. Пример:

<Hx>Текст заголовка</Hx>,

где х - число от 1 до 6, указывающее уровень заголовка.

Для разбиения документов на параграфы в HTML документах используются специальные тэги и . Без них текст становится одним большим параграфом. Заметим, что закрывающий тэг может быть опущен, так как браузер понимает, что когда открывается новый <Р>, то это означает конец предыдущего параграфа.

В стандарте HTML версии 3.2 определен параметр ALIGN, с помощью которого можно задать выравнивание параграфа по горизонтали. Данный параметр может принимать следующие значения: left, right, center, justify. Однако для выравнивания по центру можно воспользоваться также специальным тэгом <CENTER>. Пример использования данных тэгов:

Параграф выровнен по левому краю Параграф выровнен по правому краю Параграф выровнен по центру

Параграф выровнен по ширине <CENTER>Параграф также выровнен по центру</CENTER>

В языке HTML определены тэги так называемого физического форматирования символов текста. Эти тэги определяют внешний вид символов явным образом. Список этих тэгов представлен ниже:

−, – Выделение жирным шрифтом;

−, – Выделение наклонным шрифтом;

−, – Выделение подчеркиванием;

−<STRIKE>, </STRIKE> – Выделение перечеркиванием;

−<TT>, </TT> – Оформление шрифтом с фиксированной шириной букв;

−<BIG>, </BIG > – Текст с крупным размером букв;

−, – Текст с малым размером букв;

−<BLINK>, </BLINK> – Мигающий текст;

−, – Подстрочный индекс;

−, – Надстрочный индекс.

Тэги логического форматирования предназначены для указания семантического (смыслового) назначения оформляемого текста. Они определяют не конкретный способ оформления, а указывают навигатору тип информации, подлежащей выделению. Способ выделения выбирается навигатором.

Список тэгов логического форматирования приведен ниже:

−<CITE>, </CITE> – Цитата;

−, – Текст, имеющий особое значение;

−, – Сильное выделение текста;

−<KBD>, </KBD> – Текст, введенный пользователем;

−<CODE>, </CODE> – Листинг программы;

−<SAMP>, </SAMP> – Последовательность литералов;

−<VAR>, </VAR> – Имя переменной;

− – Комментарий.

Тэги логического и физического форматирования применяются одинаково. Кроме этого, в HTML используется вложенность тегов.

Пример:

Выделение символов жирным и курсивным текстом

В результате получим:

Выделение символов жирным и курсивным текстом

Еще одна возможность оформления символов, удобная, например, для размещения в документе листингов программ, связана с использованием тэгов <PRE>, </PRE>. Текст, заключенный между этими тэгами, будет отображаться так, как он выглядит в тексте документа, то есть с пробелами, новыми строками, табуляцией и т.д. Однако, в отформатированном тексте не рекомендуется использование остальных тэгов, так как символы <, >, &, ” предназначены для служебных целей. Вместо этого необходимо использовать замену (таблица 2).

Таблица 2 – Специальные символы

Символ	Замена	Символ	Замена

<	<	©	©

>	>	«	«

&	&	»	»

“	"	®	®

		±	±

Тег используется для задания типа, цвета и размера шрифта. Без параметров данный тег не оказывает никакого влияния на текст. Тег может содержать следующие параметры:

−FACE – позволяет указать тип шрифта. Значением служит название шрифта (FACE="Arial"). Если нужного шрифта нет, то программа просмотра будет использовать шрифт, заданный по умолчанию. В качестве значения можно использовать не один шрифт, а несколько (FACE="Verdana", "Arial", "Helvetica"). В этом случае список будет просмотрен слева направо и первый из имеющихся на машине пользователя шрифтов будет использован.

−SIZE – позволяет указать размер шрифта в относительных единицах от 1 до 7. Принято считать, что размер "нормального" шрифта равен 3. Размер мо-

<HR SIZE="8" WIDTH="50%" ALIGN="LEFT">.

жет быть задан как абсолютной величиной (SIZE=6), так и относительной

(SIZE =+1).

− COLOR – устанавливает цвет шрифта. Цвет может быть задан как в формате RGB (COLOR="#FF08AC"), так и стандартным именем

(COLOR="red").

Пример использования тега :

Вывод текста синим

шрифтом, размером на 2 единицы больше "нормально-

го".

Для того чтобы включить в документ HTML горизонтальную разделительную линию, вы должны использовать тэг <HR>. Этот тэг имеет ряд параметров, определяющих внешний вид линии:

−ALIGN – определяет выравнивание линии. Этот параметр может иметь одно из следующих значений: left (по левой границе), right (по правой границе), center (центрирование). По умолчанию линия центрируется.

−NOSHARE – если указан этот параметр, линия изображается плоской, без трехмерного выделения тенями.

−SIZE – высота разделительной линии в пикселях.

−WIDTH – ширина линии. Указывается либо в пикселях, либо в процентном отношении от ширины окна. Если используется второй способ, после числа, задающего значение параметра, должен находиться символ процента.

−COLOR – указывает цвет линии. Используется формат RGB или стандартное имя.

Например, чтобы разместить линию высотой 8 пикселей, шириной, равной половине ширины окна навигатора, выровненную по левому краю, необходимо

написать:

Для принудительного разбиения строк используется тэг . Строки, разделенные этим тэгом, следуют одна под другой. В случае же применения тэга между строками выводится пустая строка.

Для формирования списков в HTML определены специальные теги. Списки бывают нумерованными и ненумерованными (неупорядоченными). В последнем случае каждый элемент списка выделяется каким-либо маркером.

Для создания неупорядоченного списка предназначен тэг <UL>, который используется в паре с </UL>, закрывающим список. Каждая строка списка отмечается тэгом <LI>. Для данного тэга можно добавить параметр TYPE, который определяет внешний вид символа, который используется для выделения строки в списке, и может иметь следующие значения:

−DISK – круглая жирная точка;

−CIRCLE – окружность;

−SQUARE – маленький черный квадрат.

Ниже рассмотрим пример неупорядоченного списка, используя все значения параметра TYPE.

<UL>

<LI TYPE="DISK">Первая строка <LI TYPE="CIRCLE">Вторая строка <LI TYPE="SQUARE">Третья строка

</UL>

Внешний вид документа приведен ниже:

• Первая строка ° Вторая строкаТретья строка

Для создания нумерованных списков предназначен тэг <OL>, который необходимо использовать вместе с тэгом </OL>. Нумерованный список создается аналогично только что рассмотренному неупорядоченному списку. Каждая строка в списке должна быть отмечена тэгом <LI>.

В тэге <OL> можно указывать перечисленные ниже параметры:

−START – начальный номер для списка;

−TYPE – тип нумерации:

−A – прописными буквами;

−a – строчными буквами;

−I – прописными римскими цифрами;

−i – строчными римскими цифрами;

−1 – арабскими цифрами;

−COMPACT – список должен отображаться компактно с уменьшением расстояния между строками.

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

−<DL>, </DL> – отмечают соответственно начало и конец списка опреде-

лений;

−<DT> – отмечается строка, содержащая определяемый термин;

−<DD> – определение термина.

Следующий фрагмент программы иллюстрирует список определений:

<DL>

<DT>HTTP

<DD> Протокол передачи гипертекста (HyperText Transfer Protocol)

<DT>HTML

<DD>Язык разметки гипертекста (HyperText Mark-up Language)

</DL>

В данном фрагменте определяемые термины для наглядности дополнительно выделены жирным шрифтом. Внешний вид получившегося списка представлен ниже:

HTTP

Протокол передачи гипертекста (HyperText Transfer Protocol)

HTML

Язык разметки гипертекста (HyperText Mark-up Language).

Для создания таблиц существуют специальные тэги. В тексте документа HTML таблица определяется между тэгами <TABLE> и </TABLE>. Таблицы в HTML формируются нетрадиционным способом – построчно. Сначала с помощью элемента <TR> необходимо создать ряд таблицы, в который затем элементом <TD> помещаются ячейки, например:

<TABLE>

<TR>

<TD>1 ячейка</TD><TD>2 ячейка</TD><TD>3 ячейка</TD> </TR>

<TR>

<TD>4 ячейка</TD><TD>5 ячейка</TD><TD>6 ячейка</TD>

</TR>

</TABLE>

Внешний вид таблицы представлен на рисунке 2.

1 ячейка	2 ячейка	3 ячейка
4 ячейка	5 ячейка	6 ячейка

Рисунок 2

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

Параметры тэга <TABLE>:

−ALIGN – определяет способ горизонтального выравнивания таблицы. Возможные значения: left, center, right. Значение по умолчанию – left.

−VALIGN – должен определять способ вертикального выравнивания для содержимого таблицы. Возможные значения: top, bottom, middle.

−BORDER – определяет ширину внешней рамки таблицы (в пикселях). При BORDER=“0” или при отсутствии этого параметра рамка отображаться не будет.

−CELLPADDING – определяет расстояние (в пикселях) между рамкой каждой ячейки таблицы и содержащимся в ней материалом.

−CELLSPACING – определяет расстояние (в пикселях) между границами соседних ячеек.

−WIDTH – определяет ширину таблицы. Ширина задается либо в пикселях, либо в процентном отношении к ширине окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала.

−HEIGHT – определяет высоту таблицы. Высота задается либо в пикселях,

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

−BGCOLOR – определяет цвет фона ячеек таблицы. Задается либо RGBзначением в шестнадцатеричной системе, либо одним из 16 базовых цветов.

−BACKGROUND – позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка.

Параметры тэга <TR>:

−ALIGN – определяет способ горизонтального выравнивания содержимого всех ячеек данного ряда. Возможные значения: left, center, right.

−VALIGN – определяет способ вертикального выравнивания содержимого всех ячеек данного ряда. Возможные значения: top, bottom, middle.

−BGCOLOR – определяет цвет фона для всех ячеек данного ряда. Задается либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.

Элемент <TD> создает ячейку с данными в текущей строке. Элемент <TH> также создает ячейку, но определяет ее как ячейку-заголовок. Такое разграничение позволяет браузерам оформлять содержимое ячейки-заголовка и ячеек с данными разными шрифтами. В качестве содержимого ячейки можно использовать другие таблицы.

Параметры тэга <TD> и <TH>:

−ALIGN – определяет способ горизонтального выравнивания содержимого ячейки. Возможные значения: left, center, right. По умолчанию способ выравнивания определяется значением параметра ALIGN элемента <TR>. Если же и он не задан, то для <TD> выполняется выравнивание по левому краю, а для <TH> – центрирование.

−VALIGN – определяет способ вертикального выравнивания содержимого ячейки. Возможные значения: top, bottom, middle. По умолчанию происходит выравнивание по центру (VALIGN="middle"), если значение этого параметра не было задано ранее в элементе <TR>.

−WIDTH – определяет ширину ячейки. Ширина задается в пикселях или в процентном отношении к ширине таблицы.

−HEIGHT – определяет высоту ячейки. Высота задается в пикселях или в процентном отношении к ширине таблицы.

−COLSPAN – определяет количество столбцов, на которые простирается данная ячейка (объединение ячеек в одной строке, начиная с текущей). По умолчанию имеет значение 1.

−ROWSPAN – определяет количество рядов, на которые простирается данная ячейка (объединение ячеек в одном столбце, начиная с текущей). По умолчанию имеет значение 1.

−NOWRAP – блокирует автоматический перенос слов в пределах текущей ячейки.

−BGCOLOR – определяет цвет фона ячейки. Задается либо RGBзначением в шестнадцатеричной системе, либо одним из 16 базовых цветов.

−BACKGROUND – заполняет ячейку фоновым рисунком. Необходимо указать URL рисунка.

С помощью тэга <CAPTION> можно снабдить таблицу подписью, расположенной над или под таблицей. Содержание заголовка должно состоять только из текста. Использование блочных элементов в этом случае недопустимо.

Параметры тега <CAPTION>:

−ALIGN – определяет способ вертикального выравнивания заголовка таблицы. Возможные значения:

−top – помещает заголовок над таблицей (значение по умолчанию);

−bottom – помещает заголовок под таблицей.

Для объединения ячеек используют параметры тега <TD> COLSPAN – для объединения столбцов, ROWSPAN – для объединения строк. Например:

<TD COLSPAN="2">Объединенные столбцы</TD> <TD>Второй столбец</TD>

</TR>

<TR>

<<< < Предыдущая 12 / 132 3 4 5 6 7 8 9 10 11 12 13 > Следующая >>>

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]

#
12.09.2019343.04 Кб9Информатика-Лекции 2.doc
#
02.09.2019522.75 Кб8Информатика-Методичка(Лабы).doc
#
28.03.2015190.46 Кб16Информационные технологии - Задание на КР.doc
#
28.03.2015130.56 Кб49Информационные технологии Курсовая работа.doc
#
28.03.2015517.63 Кб40Информационные технологии-Методичка(080801).doc
#
28.03.2015964.93 Кб126Информационные технологии-Методичка(Практика).pdf
#
27.09.201980.38 Кб2Информация с предприятия.doc
#
28.03.20152.85 Mб29Иродов И.Е. - Основные законы механики.pdf
#
09.11.2019113.66 Кб6Исключительные ситуации.doc
#
27.04.201993.5 Кб2история зачет.docx
#
24.04.201929.32 Кб2История искусств.docx