Информатика_1 / JazikHTML
.pdfЛекция: “Основные возможности языка HTML”
1. Представление информации в глобальной сети Интернет.
Информация в глобальной сети Интернет храниться в виде гипертекстовых документов.
Идея использования технологии гипертекста принадлежит Тиму Бернсу-Ли (Tim Berners –Lee). Данная технология обеспечивает наиболее удобную организацию и поиск информации,
относящиеся к определенной теме.
Квантование информации и организация адресных ссылок между частями данных позволяет знакомиться с публикацией в интерактивном режиме; предоставляет пользователю гибкое освоение материала.
Информационные фрагменты гипертекста могут хранить информацию разных форматов: текст; графику; звук; видеофрагменты; анимацию.
Информационные гипертекстовые фрагменты, поступающие по запросу к пользователю называются документами HTML или гипертекстовыми документами.
По способу формирования документа HTML подразделяется на два вида: -статические документы HTML и
-динамические документы HTML.
Гипертекстовый документ называется статическим, если информационный фрагмент, поступающих пользователю, совпадает с хранимым на сервере информационным фрагментом. Гипертекстовый документ называется динамическим, если информационный фрагмент,
поступающий пользователю, формируется из нескольких хранимых информационных фрагментов в процессе обработки запроса пользователя.
2. Простейшие средства создания гипертекстовых документов.
Для формирования информационных фрагментов публикации используются традиционные инструментальные программные средства.
Характер информации определяет программное средство. Например, -текстовый фрагмент создается текстовыми редакторами и процессорами. -графика – графическими редакторами.
-звук – программами работы со звуком: проигрывателями медиаплейерами и т.п. и т. д. Управляющие символы в текст вводятся средствами создания текста.
Разметка текста выполняется на языке HTML (Hyper Text Markup Language)- гипертекстовом языке меток.
Интерпретация гипертекста выполняется специальными программами просмотра: графическими WEB-броузерами.
Первый WEB-броузер Mosiac, утвердивший в технологии данный инструмент, был написан студентом университета штата Иллинойс Марком Андриссеном (Mark Andreessen), в 1993 году, подрабатывавшем в центре (NCSA) при университете и занимавшийся разработкой программных средств визуализации результатов исследований.
Сегодня наиболее распространенными средствами просмотра гипертекстовых документов являются:
-Netscape Navigator фирмы Netscape Communications Corporation и -Microsoft Internet Explorer фирмы Microsoft.
В своем развитии язык HTML прошел несколько версии 1.0; 1.2 а марте 1995 года 3.0 и 3.2.
последняя версия стандарта языка разрабатывалась не только не только ведущими производителями программ просмотра, но и другими крупнейшими производителями программного обеспечения: IBM; Novell; Soft Quad; Sun Microsystems и Spyglass.
Современные интерпретаторы, к сожалению, являются несовместимыми и неполно реализуют стандарт 3.2 HTML.
3. Гипертекстовый язык меток – HTML..
Гипертекстовый язык меток- это язык определяющий разметку текстового документа.
Символами разметки являются операторы языка HTML-теги или метки.
По форме каждый оператор представляет собой операторную скобку, заключающую внутри себя информационный фрагмент.
Различают открывающий <HTML> операторы и закрывающий </HTML> <TAG> Текст, на который воздействует метка </TAG>.
Каждый оператор (тег) языка имеет свое функциональное назначение. Операторы могут быть вложенными.
4. Структура документа HTML.
Документ HTML объявляется оператором типа документа. <! Doctype html public”-//w3c//dtd html 3.2//en”>
<html>
… Информация документа
</html>
здесь html public – тип документа;
w3c – название организации разработавшей стандарт;
dtd (Document Type Definition) – определение типа документа: html версии 2.3.
Информация документа состоит из 2-х частей: заголовка и тела документа. Заголовок документа определяется оператором:
<title> Текст заголовка документа </title>
Текст заголовка документа является строкой, отображаемой в заголовке главного окна навигатора.
Стандарт не накладывает ограничений на длину строки заголовка документа. Однако ее следует выбирать под стандартный видеорежим 640x480, учитывая заданный шрифт.
Тело документа определяется оператором
<body> Тело документа </body>
Тело документа отображается в окне навигатора. Текст по умолчанию выравнивается по левой границе окна.
Тело документа может быть разбито на параграфы оператором. <p [align=left]> информация параграфа </p>
Оператор </p> является необязательным.
Параметром Align определяется выравнивание текста внутри параграфа.
Align=Left |
по левой границе (по умолчанию) |
Align=Center |
центрирование |
Align=Right |
по правой границе |
Наиболее частым способом выравнивания текста является ЦЕНТРИРАВАНИЕ.
Для объявления ЦЕНТРИРОВАНИЯ используется оператор
<center> Центрируемый текст </center>
Универсальным оператором выравнивания является оператор
<div [align= ][justify]> Текст </div>
Параметр align со значениями left, center,right организует выравнивание но заданному значению параметра внутри окна навигатора.
Параметр justify выравнивает текст по достигнутым границам окна навигатора.
5. Выделение параграфа горизонтальной линией.
Для включения в документ HTML горизонтальной разделительной линии (для выделения параграфа) используется оператор горизонталь с параметрами.
<hr [align=<значение>][size=<значение>][width=значение %] [noshade] [color=значение]>
Оператор <hr> не имеет закрывающего оператора </hr>, т.к. является оператором местного значения: горизонталь строиться в месте ее объявления.
Параметр align определяет выравнивание горизонтали и имеет значения left, center, right. По умолчанию линия центрируется.
Параметр size определяет высоту разделительной линии в пикселях.
Параметр width определяет ширину линии в пикселях или в процентном отношении от ширины окна, что задается символом %.
Параметр noshade изображает линию плоской, без объемного выделения тенями.
Параметр color определяет цвет линии и работает только в навигаторе Microsoft Internet Explorer (и Natscape 3.0 и выше).
Линии с объявленным цветом являются плоскими. Таблица №1.
Значения параметра цвет (в 16 цветной палитре)
№ строки |
Численное значение |
Символическое имя |
Цвет |
1 |
#00FFFF |
Aqua |
Морская волна |
2 |
#000000 |
Black |
Черный |
3 |
#0000FF |
|
Голубой |
4 |
#FF00FF |
|
Малиновый |
5 |
#808080 |
|
Серый |
6 |
#008000 |
|
Зеленный |
7 |
#00FF00 |
|
Ярко-зеленный |
8 |
#800000 |
|
Темно-красный |
9 |
#000080 |
|
Темно-синий |
10 |
#808000 |
|
Оливковый |
11 |
#800080 |
|
Пурпурный |
12 |
#FF0000 |
|
Красный |
13 |
#C0C0C0 |
|
Серебряный |
14 |
#008080 |
|
Темная морская волна |
15 |
#FFFFFF |
|
Белый |
16 |
#FFFF00 |
|
Желтый |
Численное значение параметра color указывается числовым кодом: #RRGGBB, где RR- содержание красной компоненты GG-зеленой и BB-голубой.
Содержание компонент может меняться в диапазоне 016 ÷ FF16.
6. Организация бегущей строки.
Бегущая строка организуется оператором <marquee>Бегущая строка…</marquee> Бегущая строка оживляет экран. Она является мощным средством привлечения внимания
пользователя. Содержание бегущей строки не должно раздражать оператора.
7. Цветовое оформление документов HTML.
Цветовое оформление существенно влияет на внешний вид документа.
Однако интерпретация цвета ограничена типом адаптера ППЭВМ, поэтому возможностями
цветового оформления следует пользоваться разумно и ориентироваться на самую бедную палитру (среднюю ППЭВМ).
Цвет задается значениями соответствующих параметров различных операторов. Параметр COLOR= определяет цвет переднего плана (текст и другие элементы документа
HTML: ссылки, таблицы, разделительные линии и т.д.)
Параметр BGCOLOR= определяет цвет фона.
Для раскрашивания всего документа используется параметр BGCOLOR= в операторе <BODY>.
8.Выделение шрифтом.
Вдокументах HTML не указывается:
-название шрифта (на конкретной машине он может быть не установлен) и
-размер шрифта в пунктах (т.к. неизвестен видеорежим конкретной машины, а именно разрешение видеоадаптера ).
Все навигаторы позволяют выбрать для отображения текста два шрифта из числа установленных в системе.
Первый имеет фиксированную ширину символов и используется для отображения листингов программ.
Второй – пропорциональный шрифт используется для прочего текста. Относительно нормального шрифта оператор <BIG> Текст </BIG> увеличивает высоту текста, а оператор <SMALL> Текст </SMALL> уменьшает.
Обычно для документа объявляется базовый размер шрифта, его начертание и цвет оператором. <BASEFONT> [SIZE = значение] [COLOR = значение]>
оператор действует с момента применения до переопределения. Переопределяет базовый шрифт оператор шрифт.
<FONT [SIZE = +/- значение ] [COLOR = значение]>
Оператор действует с момента применения до переопределения. Значение параметра SIZE и размер символов.
Значения параметра SIZE |
Размер символов в пикселях |
1 |
9 |
2 |
10 |
3 |
12 |
4 |
14 |
5 |
18 |
6 |
24 |
7 |
36 |
Пример:
<html><! -- Программа Primer1. html -- >
<! Doctype html public”- //w3c//dtd html 3.2//en”> <html>
<head>
<title> Пример гипертекста </title> </head>
<body color = blue> <p align = center>
<big> Это первый документ HTML! </big> <p>
Данная строка набрана обычным текстом. <small>
Это строка набрана уменьшенным шрифтом. </small>
<p> <basefont size=3> Размер шрифта 3. <p> <font size=+3> Размер шрифта 3+3=6. <p> <font size= -1> Размер шрифта 3-1=2.
<marquee>Демонстрация возможностей</marquee> </body>
</html>
<html><! -- Программа Primer1. html -- >
<! Doctype html public”- //w3c//dtd html 3.2//en”> <html>
<head>
<title> Пример гипертекста </title> </head>
<body color = blue> <p align = center>
<big> Это первый документ HTML! </big>
<p>
Данная строка набрана обычным текстом. <small>
Это строка набрана уменьшенным шрифтом. </small>
<p> <basefont size=3> Размер шрифта 3. <p> <font size=+3> Размер шрифта 3+3=6. <p> <font size= -1> Размер шрифта 3-1=2.
<marquee>Демонстрация возможностей</marquee> </body>
</html>
<EM>…</EM>- наклонный шрифт. <STRONG>…</STRONG> - жирный шрифт.
<! -- Программа Primer1. html -- >
<! Doctype html public”- //w3c//dtd html 3.2//en”> <html>
<head>
<title> Пример гипертекста </title> </head>
<body color = blue> <p align = center>
<big> Это первый документ HTML! </big> <p>
Данная строка набрана обычным текстом. <small>
Это строка набрана уменьшенным шрифтом. </small>
<p> <basefont size=3> Размер шрифта 3. <p> <font size=+3> Размер шрифта 3+3=6. <p> <font size= -1> Размер шрифта 3-1=2.
<marquee>Демонстрация возможностей</marquee> </body>
</html>
<EM>…</EM>- наклонный шрифт. <STRONG>…</STRONG> - жирный шрифт.
<! -- Программа Primer1. html -- >
<! Doctype html public”- //w3c//dtd html 3.2//en”> <html>
<head>
<title> Пример гипертекста </title> </head>
<body color = blue> <p align = center>
<big> Это первый документ HTML! </big> <p>
Данная строка набрана обычным текстом. <small>
Это строка набрана уменьшенным шрифтом. </small>
<p> <basefont size=3> Размер шрифта 3. <p> <font size=+3> Размер шрифта 3+3=6. <p> <font size= -1> Размер шрифта 3-1=2.
<marquee>Демонстрация возможностей</marquee> </body>
</html>
<EM>…</EM>- наклонный шрифт. <STRONG>…</STRONG> - жирный шрифт.
<! -- Программа Primer1. html -- >
<! Doctype html public”- //w3c//dtd html 3.2//en”> <html>
<head>
<title> Пример гипертекста </title> </head>
<body color = blue> <p align = center>
<big> Это первый документ HTML! </big> <p>
Данная строка набрана обычным текстом. <small>
Это строка набрана уменьшенным шрифтом. </small>
<p> <basefont size=3> Размер шрифта 3. <p> <font size=+3> Размер шрифта 3+3=6. <p> <font size= -1> Размер шрифта 3-1=2.
<marquee>Демонстрация возможностей</marquee> </body>
</html>
<EM>…</EM>- наклонный шрифт. <STRONG>…</STRONG> - жирный шрифт.
<! -- Программа Primer1. html -- >
<! Doctype html public”- //w3c//dtd html 3.2//en”> <html>
<head>
<title> Пример гипертекста </title> </head>
<body color = blue> <p align = center>
<big> Это первый документ HTML! </big> <p>
Данная строка набрана обычным текстом. <small>
Это строка набрана уменьшенным шрифтом. </small>
<p> <basefont size=3> Размер шрифта 3. <p> <font size=+3> Размер шрифта 3+3=6. <p> <font size= -1> Размер шрифта 3-1=2.
<marquee>Демонстрация возможностей</marquee> </body>
</html>
<EM>…</EM>- наклонный шрифт. <STRONG>…</STRONG> - жирный шрифт.
<! -- Программа Primer1. html -- >
<! Doctype html public”- //w3c//dtd html 3.2//en”>
<html>
<head>
<title> Пример гипертекста </title> </head>
<body color = blue> <p align = center>
<big> Это первый документ HTML! </big> <p>
Данная строка набрана обычным текстом. <small>
Это строка набрана уменьшенным шрифтом. </small>
<p> <basefont size=3> Размер шрифта 3. <p> <font size=+3> Размер шрифта 3+3=6. <p> <font size= -1> Размер шрифта 3-1=2.
<marquee>Демонстрация возможностей</marquee> </body>
</html>
<EM>…</EM>- наклонный шрифт. <STRONG>…</STRONG> - жирный шрифт.
<! -- Программа Primer1. html -- >
<! Doctype html public”- //w3c//dtd html 3.2//en”> <html>
<head>
<title> Пример гипертекста </title> </head>
<body color = blue> <p align = center>
<big> Это первый документ HTML! </big> <p>
Данная строка набрана обычным текстом. <small>
Это строка набрана уменьшенным шрифтом. </small>
<p> <basefont size=3> Размер шрифта 3. <p> <font size=+3> Размер шрифта 3+3=6. <p> <font size= -1> Размер шрифта 3-1=2.
<marquee>Демонстрация возможностей</marquee> </body>
</html>
<EM>…</EM>- наклонный шрифт. <STRONG>…</STRONG> - жирный шрифт.
<! -- Программа Primer1. html -- >
<! Doctype html public”- //w3c//dtd html 3.2//en”> <html>
<head>
<title> Пример гипертекста </title> </head>
<body color = blue> <p align = center>
<big> Это первый документ HTML! </big> <p>
Данная строка набрана обычным текстом. <small>
Это строка набрана уменьшенным шрифтом. </small>
<p> <basefont size=3> Размер шрифта 3. <p> <font size=+3> Размер шрифта 3+3=6. <p> <font size= -1> Размер шрифта 3-1=2.
<marquee>Демонстрация возможностей</marquee> </body>
</html>
<EM>…</EM>- наклонный шрифт. <STRONG>…</STRONG> - жирный шрифт.
Лекция “Таблицы в документах HTML”
1. Способы построения таблиц.
Таблицы являются средством лаконичного представления организованных данных. Табличные данные на сервере WWW в документах HTML могут быть построены двумя
способами:
-без средств HTML;
-с применением операторов описания таблиц языка HTML.
По первому признаку: текст таблицы оформляется шрифтом с фиксированной шириной символов, а колонки выравниваются пробелами.
По второму признаку: таблица описывается специальными операторами HTML. Таблицы могут:
-иметь заголовки и подписи;
-заключать ячейки в рамки;
-размещать в ячейках: текст, графику, произвольные объекты, растровые фоновые объекты.
-быть вложенными (в ячейке может быть размещена вложенная таблица).
Второй способ является более гибким и предпочтительным, т.к. таблица строится в ходе интерпретации в окне навигатора и относительно его границ.
2. Основные средства описания таблиц.
Основными средствами описания таблиц являются операторы (метки, теги ) HTML с параметрами.
1. Оператор с параметрами таблица имеет вид: <TABLE [< список параметров >]>
Оператор заголовка таблицы. Список операторов описания строки.
</TABLE>
Все параметры оператора ТАБЛИЦА являются необязательными средствами оформления таблицы.
Параметр |
Назначение |
ALIGN |
Определяет выравнивание таблицы. Имеет |
|
значения: |
|
LEFT-выравнивание по левому краю окна |
|
просмотра навигатора; |
|
CENTER-центрирование таблицы; |
|
RIGHT-по правому краю окна просмотра |
|
навигатора; |
|
JUSTIFY-по достижению левой и правой |
|
границ окна просмотра навигатора. |
BACKGROUND |
Растровое графическое изображение, |
|
служащее фоном таблицы. |
BGCOLOR |
Цвет фона для таблицы. |
BORDER |
Установка толщины рамки в пикселях. |
BORDERCOLOR |
Установка цвета рамки. Является парным |
|
параметром для параметра BORDER. |
BORDERCOLORDARK |
Темный цвет трехмерного выделения |
|
рамки. |
BORDERCOLORLIGHT |
Светлый цвет трехмерного выделения |
|
рамки. |
CELLPADDING |
Расстояние между краями ячейки таблицы и |
|
данными ячейки. |
CELLSPASING |
Расстояние между рамкой и ячейками |
|
таблицы. |
CLEAR |
Форматирование текста после таблицы: |
|
NO-текст размещается сразу после |
|
таблицы; |
|
LEFT-текст размещается на первой, |
|
выровненной по левому краю строке, |
|
следующей за таблицей; |
|
RIGHT-текст размещается на первой |
|
выровненной по правому краю строке, |
|
следующей за таблицей. |
COLS |
Количество столбцов в таблице. |
FRAME |
Задает внешний вид рамки: |
|
BORDER (по умолчанию ) отображает |
|
рамку со всех сторон таблицы; |
|
VOID внешняя рамка вокруг таблицы не |
|
отображается; |
|
ABOVE отображается верхняя рамка; |
|
BELOW отображается нижняя рамка; |
|
HSIDES отображаются верхняя и нижняя |
|
рамки; |
|
LHS отображается левая рамка; |
|
RHS отображается правая рамка; |
|
VSIDES отображается левая и правая |
|
рамки; |
|
BOX рамка отображается с внешней |
|
стороны таблицы. |
NOWRAP |
Длинные строки не сворачиваются, |
|
переходя на другую строку, а уходят за |
|
правую границу окна навигатора. |
RULES |
Параметр определяет линии раздела ячеек |
|
таблицы. Его значения: |
|
NONE линий нет; |
|
GROUPS отображаются горизонтали |
|
таблиц в операторах THEAD; TBODY; |
|
TFOOT; COLGROUP; |
|
ROWS отображаются горизонтали между |
|
всеми строками таблицы; |
|
COLS отображаются вертикали между |
|
столбцами таблицы; |
|
ALL отображаются и горизонтали и |
|
вертикали; |
VALIGN |
Определяет выравнивание по вертикали в |
|
МАЙКРОСОФТ ИНТЕРНЕТ ЭКСПЛОЙЕР. |
|
Имеет значения: |
|
TOP – выравнивание по верхней границе. |
|
MIDDLE – выравнивание по середине окна. |
|
BOTTON – выравнивание по нижней |
|
границе окна. |
|
BASELINE – выравнивание по базовой |
|
линии текста. |
WIDHT |
Определяет ширину таблицы в пикселях |
|
или в %-ах от ширины окна просмотра |
|
навигатора. |
2. Оператор заголовка таблицы определяет значение и расположение названия таблицы: <CAPTION [VALIGN = [ TOP / BOTTON ] [ ALIGN = [ LEFT / RIGHT ]> Таблица 1. Название
таблицы. </CAPTION>
Стандарт HTML версии 3.2 определяет только параметр ALIGN = [ TOP / BOTTON ]. Формат приведен для Майкрософт Интернет Эксплойер.
3. Оператор описания текстовой строки таблицы служит для построения заголовочной части
таблицы или боковина таблицы
<TH [<список параметров >]>Текст заголовка (строки / столбца </TH>
Параметры данного оператора совпадают с параметрами описания ячеек таблицы в описании строки.
4. Оператор описания ячейки таблицы в описании строки имеет вид. <TD [<Список параметров >]> Значение ячейки</TD>
Параметр |
Назначение |
ALIGN |
Определяет выравнивание текста в |
|
ячейках таблицы. Имеет значения: |
|
LEFT-выравнивание по левому краю; |
|
CENTER-центрирование (по умолчанию); |
|
RIGHT-по правому краю; |
|
JUSTIFY-выравнивание по границам окна |
|
навигатора. |
BACKGROUND |
Растровое графическое изображение, |
|
служащее фоном ячейки. |
BGCOLOR |
Цвет фона ячейки. |
BORDERCOLOR |
Установка цвета рамки. Используется |
|
совместно с параметром BORDER |
|
оператора <TABLE>; |
BORDERCOLORDARK |
Темный цвет для выделения ячейки |
|
трехмерной рамкой. |
BORDERCOLORLIGHT |
Светлый цвет для выделения ячейки |
|
трехмерной рамкой. |
COLSPAN |
Количество столбцов в таблице. |
HEIGHT |
Высота ячейки в пикселях. |
NOWRAP |
Не сворачиваемость длинных строк. |
ROWSPAN |
Параметр объединяет троки таблицы. |
VALIGN |
Определяет выравнивание текста по |
|
вертикали. Имеет значения: |
|
TOP – по верхней границе ячейки. |
|
MIDDLE – центрирование. |