МегаПредмет

ПОЗНАВАТЕЛЬНОЕ

Сила воли ведет к действию, а позитивные действия формируют позитивное отношение


Как определить диапазон голоса - ваш вокал


Игровые автоматы с быстрым выводом


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


Целительная привычка


Как самому избавиться от обидчивости


Противоречивые взгляды на качества, присущие мужчинам


Тренинг уверенности в себе


Вкуснейший "Салат из свеклы с чесноком"


Натюрморт и его изобразительные возможности


Применение, как принимать мумие? Мумие для волос, лица, при переломах, при кровотечении и т.д.


Как научиться брать на себя ответственность


Зачем нужны границы в отношениях с детьми?


Световозвращающие элементы на детской одежде


Как победить свой возраст? Восемь уникальных способов, которые помогут достичь долголетия


Как слышать голос Бога


Классификация ожирения по ИМТ (ВОЗ)


Глава 3. Завет мужчины с женщиной


Оси и плоскости тела человека


Оси и плоскости тела человека - Тело человека состоит из определенных топографических частей и участков, в которых расположены органы, мышцы, сосуды, нервы и т.д.


Отёска стен и прирубка косяков Отёска стен и прирубка косяков - Когда на доме не достаёт окон и дверей, красивое высокое крыльцо ещё только в воображении, приходится подниматься с улицы в дом по трапу.


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

В большинстве документов основными функциональными элементами являются заголовки и абзацы.





Лабораторная работа № 12

Тема: Язык разметки гипертекста HTML

Теговая модель языка

Управляющие конструкции языка называются тегами. Все теги заключаются в угловые скобки <…>. Сразу после открывающей скобки помещается ключевое слово, определяющее тег, например <BODY>. Теги бывают парнымиинепарными. Непарные теги оказывают воздействие на весь документ. Парные теги бывают открывающими и закрывающими и воздействуют они на ту часть документа, которая заключена между ними.

Например:

 

<B> - открывающий тег,

</B> - закрывающий тег.

 

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

 

<B><I>На этот текст воздействуют два тега</I></B>.

 

Эффект применения тега может видоизменяться путем добавления атрибутов. В парных тегах атрибуты могут добавляться только к открывающему тегу.

Атрибуты – это дополнительные ключевые слова, отделяемые от слова, определяющего тег и от других атрибутов пробелами и размещаемые до символа >. Иногда требуется указание значения атрибута. Значение атрибута отделяется от ключевого слова атрибута знаком «=» и заключается в кавычки. Например:

<HR ALIGN=”LEFT” >

 

Тег <HR > позволяет создать на странице горизонтальную линейку, а атрибут ALIGN со значением LEFT размещает ее в левой части экрана.

 

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

 

Все документы HTML имеют одну и ту же структуру, определяемую фиксированным набором тегов.

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

Основное содержание размещается в теле документа, которое ограничивается парным тегом <BODY>.

Простейший правильный документ HTML, содержащий все теги, выглядит следующим образом:

<HTML>

<HEAD>

<TITLE>Заголовок документа</TITLE>

</HEAD>

<BODY>Содержание документа</BODY>

</HTML>

 

В браузере Internet Explorer страница отобразится так, как показано рисунке 1.

 
 


 

Рисунок 1 – Вид простейшей Web-страницы

Функциональные элементы HTML

 

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

1) элементы не должны пересекаться, т.е. если открывающий тег располагается внутри элемента, то и соответствующий закрывающий тег должен располагаться внутри этого же элемента,

2) блочные элементы могут содержать вложенные блочные и текстовые элементы,

3) текстовые элементы могут содержать вложенные текстовые элементы,

4) текстовые элементы не могут содержать вложенные блочные элементы.

В большинстве документов основными функциональными элементами являются заголовки и абзацы.



Язык HTML поддерживает шесть уровней заголовков. Они задаются при помощи парных тегов от <Н1> до <Н6>. При отображении Web-документов на экране компьютера эти элементы отличаются размером шрифта, и расположением относительно последующего текста. Параметры каждого уровня заголовков описаны в таблице 1.

 

Таблица 1 – Параметры уровней заголовков

Уровень абзаца Параметры
H1 Толстый, очень крупный шрифт, текст центрирован. Между заголовком и последующим текстом вставляется одна или две пустых строки. При выводе на принтер заголовок печатается на новой странице.
H2 Толстый крупный шрифт. Без отступа. До и после заголовка помещаются одна или две пустых строки.
H3 Крупный шрифт. До и после заголовка помещаются одна или две пустые строки. С небольшим отступом.
H4 Толстый нормальный шрифт. До и после заголовка помещается пустая строка.
H5 Нормальный шрифт. Пустая строка ставится перед заголовком, но не после.
H6 Толстый шрифт. Перед заголовком ставится пустая строка.

 

На Web-странице абзацы разных уровней выглядят так, как показано на рисунке 2.

 

 

Рисунок 2 – Шесть уровней абзацев, отображенных на странице

 

HTML-код такой страницы выглядит следующим образом:

 

<HTML>

<HEAD>

<TITLE>Уровни абзацев</TITLE></HEAD>

<BODY>

<H1>Первый уровень абзацев</H1>

<H2>Второй уровень абзацев</H2>

<H3>Третий уровень абзацев</H3>

<H4>Четвертый уровень абзацев</H4>

<H5>Пятый уровень абзацев</H5>

<H6>Шестой уровень абзацев</H6>

</BODY>

</HTML>

 

Каждый абзац страницы задается парным тегом <Р>. Язык HTML не содержит средств для создания «красной строки», поэтому при отображении на экране абзацы разделяются пустой строкой. Закрывающийся тег </Р> является необязательным. Например, если часть HTML-кода записана так:

<Н1>Заголовок</Н1>

<Р>Первый абзац<Р>Второй абзац

<Н2>Заголовок второго уровня</Н2>,

 

то на Web-странице она отобразится так, как показано на рисунке 3.

 

 

Рисунок 3 – Страница с заголовками двух уровней и двумя абзацами, расположенными между ними

 

В отличие от текстового редактора ввод символа Enter не является признаком конца абзаца. Язык HTML рассматривает символы конца строки и пробелы особым образом. Любая последовательность, состоящая только из пробелов и символов конца строки, при отображении рассматривается как одиночный пробел. Enter не осуществляет также и переход на новую строку. Для того, чтобы перейти на новую строку, используют тег <BR>.

В качестве разделителя абзацев используется также текстовая линейка. Она задается непарным тегом <HR>. К этому тегу можно применять атрибуты:

ALIGN – для выравнивания линейки по центру (значение center), по правому краю страницы (значение right) и по левому краю страницы (значение left),

SIZE – высота линейки в пикселах,

WIDTH – ширина в процентах относительно ширины экрана,

COLOR – цвет линии

Например,

 

<HR ALIGN=”RIGHT” SIZE=”10” WIDTH=”50%”>

 

Этот тег создает горизонтальную линейку шириной в 10 пикселов, занимающую половину экрана и расположенную справа.

 

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

 

Основным тегом, управляющим форматированием текста является тег <FONT>. <FONT> - парный тег, управляющий параметрами шрифта.

Тег FONT должен обязательно содержать хотя бы один из атрибутов: COLOR, FACE или SIZE.

Атрибут SIZE задает размер шрифта в относительных единицах от -7 до 7 (от мелкого шрифта к крупному), например,

 

< FONT SIZE=”6”> - шрифт шестого размера.

 

Атрибут COLOR задает цвет текста, выраженный текстовым значением, например,

 

< FONT COLOR =”GREEN”> - шрифт зеленого цвета.

 

Атрибут FACE задает гарнитуру шрифта. Значение этого атрибута есть название шрифта, например,

 

< FONT FACE=”Times New Roman”> шрифт Times New Roman.

 

Кроме тега FONT существуют и другие теги, предназначенные для форматирования текста.

 

<CITE> - парный тег для вывода цитат (отображаются курсивом),

<EM> - парный тег выделения,

<STRONG> - парный тег сильного выделения,

<U> - парный тег подчеркнутого шрифта,

<S> - парный тег зачеркнутого шрифта,

<B> - парный тег полужирного шрифта,

<I> - парный тег курсива,

<SUB> - парный тег нижнего индекса,

<SUP> - парный тег верхнего индекса,

<MARQUEE> - парный тег бегущей строки,

<BASEFONT> - парный тег задания параметров вывода текста по умолчанию. Также должен обязательно содержать хотя бы один из атрибутов: COLOR, FACE или SIZE.

 





©2015 www.megapredmet.ru Все права принадлежат авторам размещенных материалов.