Язык гипертекстовой разметкиHtml2
Язык HTML(HyperText Markup Language- «язык гипертекстовой разметки») представляет собой набор управляющих команд (тегов, tags), соответствующих определенному стандарту и интерпретируемых браузером в ходе вывода Интернет-страницы на экран.
Гипертекстпредставляет собой «многомерный» текстовый документ или объединение нескольких текстовых документов, построенный до принципу «нелинейного» структурирования материала за счет применения гипертекстовых ссылок как в пределах данного документа, так и перекрестных, указывающих на другие документы, в том числе размещенные на других компьютерах сети, или на их фрагменты. Это позволяет одним щелчком мыши перемещаться из одной «смысловой точки» гипертекстового документа в другую.
Дальнейшим развитием гипертекста стала технология гипермедиа, позволяющая связывать гиперссылками не только текстовые фрагменты, но и данные иного типа (графику, звукозаписи, цифровое видео и пр.), когда щелчок мышью на выделенном слове или фразе приводит к демонстрации заданной разработчиком гипермедиа-документа иллюстрации, воспроизведению аудиозаписи, запуску исполняемой программы.
Первая попытка применения идеологии гипертекста в Интернет была сделана Тимом Бернерсом-Ли, сотрудником Лаборатории физики элементарных частиц европейского центра ядерных исследований (CERN) в 1989 году.
Язык HTML использует специальные команды (теги) для разметки Web-страницы, т.е. для размещения на нейтекста,таблиц,рисунков,спискови т.п. Браузер, читая такой файл, обрабатывает эти команды и выводит страницы на экран.
Тег HTML представляет собой заключенную в угловые скобки (символы «<» и «>») управляющую команду, часто с указанием одного или нескольких дополнительных параметров (атрибутов тега) с заданными значениями.
Каждый тег состоит из имени, за которым может следовать список атрибутов (параметров), например, <i> <img src=“dog.gif” width=6>.
Атрибуты отделяются от имени тега и друг от друга пробелами. Значение атрибута пишется после знака равенства. Если значение состоит из одного слова или цифры, то его можно писать без кавычек. Для значений из нескольких слов кавычки обязательны ( “ ).
Тег со всеми атрибутами желательно располагать на одной строке.
Действие тега в зависимости от его назначения либо выполняется однократно в данной позиции текста, либо распространяется на весь последующий текст до соответствующего закрывающего тега. Таким образом, теги разделяют на парные и одиночные.
Парный тег состоит из двух частей — открывающего и закрывающего тегов. Закрывающий тег имеет то же самое имя, что и открывающий, но перед именем ставится знак / (слэш). Действие парного тега распространяется на всё, что находится между ними. Например, парный тег <CENTER> ... </CENTER> выравнивает по центру страницы всю информацию, расположенную на месте многоточия.
Лабораторная работа 1. Основы структуры html-документа
Структура Web-страницы
Перед началом работы с документом необходимо обозначить его начало и конец. Это делается с помощью тега-контейнера <HTML>. Необходимо отметить, что любой HTML-документ открывается тегом <HTML> и им же закрывается.
Содержимое страницы находится между тегами <HTML> и </HTML>и делится на две части, которые заключаются в парные теги <HEAD> и <BODY>, в которыеследует разместить, соответственно, заголовок и тело документа:
Тег <HEAD> (от английского head — голова) заключает в себе теги заголовка:
<TITLE>…</TITLE> содержит слова, которые появляются в строке заголовка браузера. Данный элемент обязателен для любого HTML-документа и может быть указан не более одного раза.
<BASE> - Определяет базовый адрес, от которого отсчитываются относительные линки внутри документа.
<STYLE> - Используется для вставки в документ таблицы стилей CSS.
<LINK> - Описывает взаимосвязь документа с другими объектами.
<META> - Используется для вставки метаданных, используемых поисковыми серверами.
В рабочую область браузера (тело документа) выводится все, что находится внутри тега <BODY> (от английского body — тело). Именно внутри этого блока надо размещать текст, рисунки, таблицы и т.п.
Классический пример HTML-документа:
<HTML>
<HEAD> <TITLE>Моя
перваяWeb-страница</TITLE>
</HEAD>
<BODY>
Привет!
</BODY>
</HTML>
А вот как выглядит:
Вот некоторые атрибуты тега BODY(он должен встречаться в документе не более одного раза):
TOPMARGIN– определяет ширину (в пикселах) верхнего и нижнего полей документа. Работает только в браузерахInternetExplorer.
LEFTMARGIN– определяет ширину (в пикселах) левого и правого полей документа. Работает только в браузерахInternetExplorer.
BACKGROUND– определяет изображение для "заливки" фона. Значение задается в виде полногоURLили имени файла с картинкой в форматеGIFилиJPG:<BODY BACKGROUND = “dog.gif”>
BGCOLOR– определяет цвет фона документа.Цвет задается словом или кодом RGB: <BODY BGCOLOR = “red”> или <BODY BGCOLOR = “#FF0000”>,
TEXT– определяет цвет текста в документе:<BODY BGCOLOR = “red” TEXT=“blue”>. Например, в следующем примере задан черный цвет текста на желтом фоне для всей страницы:
BODY TEXT="#000000" BGCOLOR="yellow">...</BODY>
LINK– определяет цвет гиперссылок в документе, по которым пользователь еще «не ходил»
ALINK– определяет цвет подсветки гиперссылок в момент нажатия.
VLINK– определяет цвет гиперссылок на просмотренные пользователем документы. Например, следующий тег устанавливает желтый цвет для обычных ссылок, красный — для активных и синий — для посещенных:
<BODY LINK="yellow" ALINK="red" VLINK="blue">...</BODY>
BGPROPERTIES = “fixed” – фоновый рисунок не прокручивается вместе со страницей.
Значения атрибутов BGCOLOR,TEXT,LINK,ALINKиVLINKзадаются либоRGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.
Несмотря на то, что с помощью атрибутов тега BODYможно задать много полезных параметровHTMLдокумента, в настоящий момент целесообразнее использоватьCSS– каскадные таблицы стилей (см далее).
Пример1:
<HTML>
<BODY BACKGROUND="images/bricks.jpg" BGCOLOR="#202020"
TEXT="#FFFFFF" LINK="#FF0000" VLINK="#505050"
TOPMARGIN="30" LEFTMARGIN="40">
...
Текст документа.
...
</BODY>
</HTML>
Форматирование текста
В этом разделе описаны элементы для оформления и смыслового выделения текста – подчеркивания, изменения шрифта, выделения курсивом, цитирования и т.д. К таким элементам относятся:
● BASEFONT- Определяет основной шрифт, которым должен отображаться текст документа
● FONT- Позволяет изменять цвет, размер и тип шрифта текста,находящегося между начальным и конечным тегами. Вне тегов <FONT> и </FONT> используется шрифт, указанный в элементеBASEFONT. Атрибуты:
SIZE– определяет размер шрифта. Возможные значения: целое число от 1 до 7 или относительный размер с указанием знака + или -, тогда абсолютный размер вычисляется путем сложения с базовым размером, определенным с помощью атрибутаSIZEэлементаBASEFONT: size=4 – абсолютный размер, size= +1 – относительный (на 1 больше, чем базовый размер шрифта).
COLOR– определяет цвет текста. Задается либоRGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.
FACE– определяет используемый шрифт.
● I- Выделяет текст между начальным и конечным тегами курсивом, например, Текст с <I>курсивом</I>
● EM- Используется для смыслового выделения текста между начальным и конечным тегами (курсивом) – логическое ударение. Результат обычно отображается курсивом. То есть элементEMпо действию практически аналогичен элементуI. Например: Порой в России встречаются <EM>действительно талантливые</EM> веб-мастера. Но только не друг с другом.
● B- Выделяет текст жирным шрифтом текст, заключенный между начальным и конечным тегами, будет выделен жирным шрифтом. Например: Текст с <B>выделенным </B> словом.
● STRONG- Усиленное выделение текста (жирным)
● U- Выделяет текст подчеркнутым
● S,STRIKE- Выделяет текст перечеркнутым
● BIG- Отображает текст увеличенным шрифтом (относительно текущего)
● SMALL- Отображает текст уменьшенным шрифтом (относительно текущего)
● SUP- Отображает текст со сдвигом вверх (верхний индекс)
● SUB- Отображает текст со сдвигом вниз (нижний индекс)
● CODE,SAMP- Оформляют текст как формулу или программный код
● TT- Отображает текст моноширинным шрифтом
● KBD- Выделяет текст, который предлагается набрать на клавиатуре
● VAR- Используется для обозначения в тексте переменных
● CITE- Оформляет текст как цитату или ссылку на источник
Пример2:
<FONTSIZE="+2"COLOR="#AA0000">Увеличенный красный шрифт</FONT>
<FONT SIZE="3" FACE="Courier New" COLOR="Magenta">Моноширинный
фиолетовый текст 3 размера</FONT>
Пример3:
<FONTCOLOR="yellow"FACE="Courier"SIZE="2">Устанавливает для текста внутри области действия тега шрифт Courier желтого цвета размера 2</FONT>
Текстовые блоки
В этом разделе описаны элементы, разбивающие текст документа на блоки тем или иным способом. Типичными примерами текстовых блоков являются параграфы, абзацы и главы. Для отделения одной части текста от другой также используются разделительные горизонтальные линии и символы возврата каретки.
Элементы, которые относятся к разбиению текста на блоки:
H1,H2,...H6 - используются для создания заголовков текста. Существует шесть уровней заголовков, различающихся величиной шрифта. С их помощью можно разбивать текст на смысловые уровни – разделы и подразделы. Атрибуты:
ALIGN– определяет способ выравнивания заголовка по горизонтали. Возможные значения:left,right,center.
Пример4:
<H1ALIGN="center">Самый большой заголовок посередине</H1>
<H2>Заголовок поменьше</H2>
...
<H6>Малюююсенький такой заголовочек</H6>
Пример5:
<BODY BGCOLOR ="#CC3399" TEXT ="#CCCCCC">
<H1 ALIGN=“center”> Заголовок 1 </H1>
<H2 ALIGN=“RIGHT”> Заголовок 2 </H2>
<H3 ALIGN=“LEFT”> Заголовок 3 </H3>
<H4> Заголовок 4 </H4>
<H5> Заголовок 5 </H5>
<H6> Заголовок 6 </H6>
</Body>
P - используется для разметки параграфов, указывая на начало нового абзаца и вставляя пустую строку перед абзацем. Атрибуты:
ALIGN– определяет способ горизонтального выравнивания параграфа. Возможные значения:left,center,right. По умолчанию имеет значениеleft.
Пример6:
<PALIGN="center">Это центрированный параграф.<BR>
Текст располагается в центре окна браузера</P>
<PALIGN="right">А это параграф, выровненный по правому краю.</P>
DIV - используется для логического выделения блока HTML-документа. Элемент группировки, как и элемент SPAN. В современном сайтостроении используется как удобный контейнер для объектов страницы, которым легко динамически манипулировать – перемещать, включать/выключать, создавать слои, регулировать отступы и т.п. В браузеронезависимой вёрстке обычно используется для выравнивания блока html-кода в окне браузера. Находящиеся между начальным и конечным тегами текст илиHTML-элементы по умолчанию оформляются как отдельный параграф. Атрибуты:
ALIGN– определяет выравнивание содержимого элементаDIV. Атрибут может принимать значения:left,right,center.
Пример7:
...Текст документа...
<DIVALIGN="center">
...Текст, таблицы, изображения. Выравнивание по центру.
</DIV>
...Текст документа...
ADDRESS - находящийся между начальным и конечным тегами текст оформляется как почтовый адрес. Чаще всего оформление выражается в выделении строки адреса курсивом.
Пример8:
Пишите по следующему адресу:
<ADDRESS>
Калининград, Советский пр., 1<BR>
ФГБОУ ВПО «КГТУ»
</ADDRESS>
BLOCKQUOTE - оформляет находящийся между начальным и конечным тегами текст как цитату. Используется для длинных цитат (в отличие от элемента CITE). Цитируемый текст отображается отдельным абзацем с увеличенным отступом.
Пример9:
Деканат ФАПУ выражает благодарность студентам, принявшим участие в вечере специальности:
<BLOCKQUOTE>
Иванову Ивану, гр. 12-ИЭ,<BR>
Сидорову Петру, гр. 11-ВТ,<BR>
Архипову Александру, гр. 11-ТМ,<BR>
Локтеву Сергею, гр. 13-ПР<BR>
...
</BLOCKQUOTE>
BR - данный элемент осуществляет перевод строки, то есть практически аналогичен нажатию Enter в текстовом редакторе. После того, как в браузерах появилась возможность обтекания изображения текстом (cм. атрибут ALIGN элемента IMG), понадобился дополнительный атрибут CLEAR. Элемент не имеет конечного тега. Атрибуты:
CLEAR– указывает на необходимость завершения обтекания изображения текстом. Может принимать следующие значения:all– завершить обтекание изображения текстом,left– завершить обтекание текстом изображения, выровненного по левому краю,right– завершить обтекание текстом изображения, выровненного по правому краю.
Пример10:
Первое предложение<BR>Второе предложение на следующей строке
HR - вставляет в текст горизонтальную разделительную линию. Атрибуты:
WIDTH– определяет длину линии в пикселах или процентах от ширины окна браузера.
SIZE– определяет толщину линии в пикселах.
ALIGN– определяет выравнивание горизонтальной линии. Атрибут может принимать следующие значения:left– выравнивание по левому краю документа,right– выравнивание по правому краю документа,center– выравнивание по центру документа (используется по умолчанию).
NOSHADE – определяет способ закраски линии как сплошной. Атрибут является флагом и не требует указания значения. Без данного атрибута линия отображается объемной.
COLOR – определяет цвет линии. Задается либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов. Атрибут работает только в InternetExplorer.
Пример11:
Текст, разделенный <HRNOSHADEWIDTH="50%"> сплошной горизонтальной линией.
<NOBR>… </NOBR> создает область, в которой текст не разбивается на строки.
<WBR> используется в сочетании с <NOBR> и указывает браузеру место, где, в случае необходимости, можно разорвать строку.
<PRE>… </PRE> выделяет часть исходного текста, который должен отображаться «как есть» - с теми же отступами и разбиением на строки. Используется для записи текстов программ. Внутри этого тега могут располагаться гиперссылки, картинки и т.д.
<CENTER>… </CENTER> - содержимое выравнивается по центру – текст, рисунки, таблицы. Аналог атрибута ALIGN=center
Физическое и логическое форматирование текста
Физическая разметка документа – это явное указание браузеру, как должен выглядеть тот или иной фрагмент текста – размер шрифта, курсив и т.п. Логическая разметка учитывает смысл выделенного фрагмента – цитата, сведения об авторе и т.п.
Современные стандарты языка HTML советуют использовать по возможности логическую разметку, хотя физическое форматирование еще никто не отменял.
Таблица 1.1 - Теги физических стилей
|
<B>…</B> |
Полужирный шрифт |
<BIG>… </BIG> |
Увеличенный шрифт |
|
<I>…</I> |
Курсив |
<SMALL>…</SMALL> |
Уменьшенный шрифт |
|
<U>…</U> |
Подчеркивание |
<SUP>… </SUP> |
Верхний индекс |
|
<S>…</S> |
Зачеркнутый шрифт |
<SUB>… </SUB> |
Нижний индекс |
|
<TT>…</TT> |
Стиль печатной машинки |
<BLINK>…</BLINK> |
Мерцающий текст (в Internet Explorer) |
Таблица 1.2 - Теги логических стилей
|
<ABBR> </ABBR> |
Аббревиатура |
<ACRONYM> </ACRONYM> |
Сокращение, например, HTML |
|
<CITE>… </CITE> |
Библиографическая ссылка, исп. для записи названий книг и т.д. (курсив) |
<SAMP>… </SAMP> |
Текст с «буквальным» смыслом |
|
<CODE> </CODE> |
Для текстов программ |
<VAR>… </VAR> |
Для имен переменных |
|
<EM>… </EM> |
Визуальное выделение (курсив) |
<STRONG>… </STRONG> |
Логическое выделение (полужирный) |
|
<DFN>… </DFN> |
Для специальных терминов |
<KBD>… </KBD> |
Для технических терминов |
|
<Q> … </Q> |
Блок цитат (атрибут cite=“URL” -источник цитаты) |
<ADDRESS>… </ADDRESS> |
Адрес (курсив) |
Практическая часть. Порядок действий
Создание Web-страницы можно разбить на несколько этапов.
С помощью любого текстового редактора создаем текстовый файл, содержащий команды языка HTML. Здесь можно использовать Блокнот или WordPad из стандартных программ. Файл должен быть сохранен в виде простого текстового документа (без оформления) и иметь расширение htm или html. Русские буквы должны быть набраны в кодировке Windows.
Открыть файл в браузере. Для этого можно использовать два способа:
выбрать команду Просмотр источника (или Просмотр в виде HTML) из меню Вид или контекстного меню, которое появляется при нажатии на правую кнопку мыши. При этом исходный файл откроется в Блокноте или WordPad (для браузера Opera). После изменения файл необходимо сохранить, перейти в окно браузера (с помощью панели задач) и обновить документ, нажав на кнопку обновления,
можно использовать бесплатный HTML-редактор HEFS, в котором вы сможете редактировать текст Web-страницы и сразу посмотреть ее в «рабочем» виде.
Задание 1.1.
Проделать примеры 1 - 11, приведенные в тексте. В случае необходимости дополнить их нужными тегами. Каждый пример расположить на отдельной странице браузера.
Задание 1.2.
Создать файл Pr_1_1.html в текстовом редакторе Блокнот
В область заголовка окна напишите свою фамилию, имя и группу
В рабочей области разместите стихотворение из 4-6 строчек; название стихотворения и фамилию автора оформите перед началом стихотворения разными видами заголовка.
Просмотрите результата в браузере
Задание 1.3.
Создать файл Pr_1_3.html в текстовом редакторе Блокнот, чтобы при просмотре документа в браузере получилось содержимое рисунка (в область заголовка окна напишите свою фамилию, имя и группу):
Задание 1.4.
Создать файл Pr_1_4.html в текстовом редакторе Блокнот, чтобы при просмотре документа в браузере получилось содержимое рисунка (в область заголовка окна напишите свою фамилию, имя и группу):
Задание 1.5.
Создать файл Pr_1_5.html в текстовом редакторе Блокнот, чтобы при просмотре документа в браузере получилось содержимое рисунка (в область заголовка окна напишите свою фамилию, имя и группу):
