1 / 2 1 2 следующая > >>

У таблицы может быть заголовок

Дата: 2025-05-01; Просмотры: 4

Оценка:

0.00 из 5.00 — оценок

Скачиваний: 0

1. Основные понятия

Язык HTML (Hyper Text Markup Language) — это язык разметки гипертекста. Разметка заключается в том, что в обычный текст добавляются специальные команды HTML, описывающие, как должен выглядеть данный текст. В документе HTML обычный текст сочетается с элементами разметки, заключенными в угловые скобки < и >, например <html>, <head>, <title>, </title>. Такие элементы разметки называются тегами.

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

§ левой угловой скобки<;

§ необязательного символа слэш /, который означает, что тег является конечным тегом, закрывающим некоторую структуру, например </title>;

§ имени тега, например, html;

§ необязательных атрибутов. Тег может быть без атрибутов или сопровождаться одним или несколькими атрибутами, например, align="center";

§ правой угловой скобки >.

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

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

Язык HTML не различает большие и малые буквы, так, что теги <HEAD>, <head> и <Head> эквивалентны. Далее мы будем использовать написание тегов в нижнем регистре.

В любом документе HTML существуют элементы, определяющие его структуру, — это структурные теги.

Структурные теги

<html>...</html> - теги, являющиеся признаком начала и конца документа. Тег <html> должен открывать HTML-документ. Аналогично, тег </html> должен завершать HTML-документ.

<head>...</head> - эта пара тегов указывает на начало и конец заголовка документа (Web-страницы). Помимо наименования документа (см. описание тега <title> ниже), в этот раздел может включаться множество служебной информации.

<title>...</title> - все, что находится между тегами <title> и </title>, толкуется браузером как название документа. Текст, размещенный за тегом <title>, отображается в заголовке окна браузера.

<body>...</body> - эта пара меток указывает на начало и конец тела HTML-документа и определяет содержание документа (Web-страницы).

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

При формировании Web-страниц часто требуется определить уровни заголовков. Существует шесть уровней, которые задаются тегами вида:

Заголовок первого уровня — самый крупный, шестого уровня, естественно, самый мелкий.

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

Поскольку НТМL документы это текстовые файлы, для их создания можно воспользоваться любым текстовым редактором, например Notepad (Блокнот). Все НТМL – файлы следует сохранять с расширением .htm или .html. Это укажет компьютеру, что файл не просто текстовый, а содержит коды НТМL.

Теги < h > и  могут содержать дополнительный атрибут align , обычно указывается одно из трех значений этого атрибута:

align= center – выравнивание по центру;

align= left – выравнивание по левому краю;

align= right – выравнивание по правому краю.

Например: < h 1 align = center >

2. Работа с текстом

В этом разделе мы поговорим о том, как можно улучшить наш простой HTML-документ.

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

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

<html>

<head>

<title> Пример 3</title>

</head>

<body>

< h 1> "Вредные советы"</ h 1>

< h 2> Григорий Остер </ h 2>

 Главным делом жизни вашей 

Может стать любой пустяк. 

Надо только твердо верить, 

Что важнее дела нет.

 И тогда не помешает 

Вам ни холод, ни жара, 

Задыхаясь от восторга, 

Заниматься чепухой.

</body> </html>

<hr> - тег, который описывает вот такую горизонтальную линию:

Тег <hr> может дополнительно включать разные атрибуты, например:

<hr align=right> (center или left)

< hr width =50%> - ширина линии в процентах/пикселях

< hr size =8> - толщина линии

< hr Noshade > - отмена объемности

Вышеприведенные атрибуты могут употребляться одновременно.

Форматирование шрифта

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

Физические стили

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

... полужирный текст;

 ... наклонный текст (курсив);

< tt > ...</ tt > телетайпный текст (пишущая машинка);

 ... подчеркивание;

Логические стили

При использовании логических стилей автор документа не может знать заранее, что увидит на экране читатель. Разные браузеры толкуют одни и те же теги логических стилей по-разному. Некоторые браузеры игнорируют отдельные теги вообще и показывают нормальный текст вместо выделенного логическим стилем. Вот самые распространенные логические стили.

... - курсивное начертание (от английского emphasis — акцент);

... - полужирное начертание (от английского strong emphasis — сильный акцент)

< cite >...</ cite > - цитированный текст

... - ^{верхний индекс}

... - _{нижний индекс}

<big>...</big> - увеличить размер шрифта

... - уменьшить размер шрифта

Кроме вышеперечисленных, форматирование текста Web-страницы выполняет еще целая группа тегов. Приведем некоторые из них:

<pre>...</pre> предварительно форматированный текст выводится браузером на экран как есть — со всеми пробелами, символами табуляции и конца строки. Это очень удобно при создании простых таблиц.

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

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

size – абсолютный размер шрифта (значение от 1 до 7). Размер может задаваться и в относительном виде по отношению к базовому размеру, например, size=+число или , size=-число;

color- атрибут цвета шрифта, задается в виде color=цвет.

< bdo >...</ bdo > изменение направления текста. Используется с атрибутом dir. Шаблон записи выглядит так:<bdo dir="rtl"> Текст, направление которого меняется </bdo>.

< marguee >...</ marguee > текст представляется в виде бегущей строки. Для определения движения текста слева направо или справа налево используется атрибут direction.

Например : <marguee direction=left, right>текст</marquee>

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

Использование ключевого слова color тега дает возможность задавать цвет текста (шрифта). Атрибут color может использовать либо название цвета, либо его шестнадцатеричную форму. Цвет кодируется последовательностью из трех пар символов. Каждая пара представляет собой шестнадцатеричное значение насыщенности заданного цвета одним из трех основных цветов (красным, зеленым и синим) в диапазоне от нуля (00) до 255 (FF). В HTML шестнадцатеричные цвета обозначаются знаком "решетка"(#)

Например:<font color="red">, либо

Цвета, их название и шестнадцатеричный код приведены в таблице:

Код	Цвет	Значение
#000000	ЧЕРНЫЙ	black
#FFFFFF	БЕЛЫЙ	white
#FF0000	КРАСНЫЙ	red
#008000	ЗЕЛЕНЫЙ	green
#0000FF	СИНИЙ	blue
#808000	ОЛИВКОВЫЙ	olive
#FFFF00	ЖЕЛТЫЙ	Yellow
#C0C0C0	СЕРЕБРИСТЫЙ	Silver
#808080	СЕРЫЙ	Gray
#FF00FF	ФУКСИНОВЫЙ	Fuchsia
#000080	УЛЬТРАМАРИН	Navy
#008080	СИЗЫЙ	Teal
#00FF00	СВЕТЛО-ЗЕЛЕНЫЙ	Lime
#800080	ПУРПУРНЫЙ	Purple
#800000	КАШТАНОВЫЙ	maroon

Цвет фона задается атрибутом bgcolor в теге <body>.

Например: <body bgcolor="green" >

Цветовая гамма HTML-документа определяется также атрибутами, размещенными внутри тега <body>. Вот список этих атрибутов:

text определяет цвет текста документа;

link определяет цвет выделенного элемента текста, при нажатии на который происходит переход по гипертекстовой ссылке;

vlink определяет цвет ссылки на документ, который уже был просмотрен ранее;

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

Например:<body text=lime> меняет цвет всего текста на светло-зеленый.

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

bgcolor =# FFFFFF цвет фона. Насыщенность красным, зеленым и синим одинакова- FF (это шестнадцатеричное представление числа 255). Результат - белый цвет.

text=#000000 цвет текста. Насыщенность красным, зеленым и синим одинакова - 00 (ноль). Результат - черный цвет.

link=#FF0000 цвет гипертекстовой ссылки. Насыщенность красным — FF (255), зеленым и синим - 00 (ноль). Результат - красный цвет.

Кроме того, тег <body> может включать атрибут background="[имя файла]", который задает изображение, служащее фоном для текста и других изображений. Как и любое другое изображение, фон должен быть представлен в формате GIF (файл с расширением *.gif) или JPEG (файл с расширением *.jpg или *.jpeg).

Браузеры заполняют множественными копиями изображения-фона все пространство окна, в котором открыт документ, подобно тому, как при строительстве большие пространства стен покрывают маленькими (и одинаковыми) плитками.

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

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

< html >

< head >

< title >Использование цветовой гаммы Пример 7</ title >

</ head >

<body bgcolor=silver text=blue>

 Ф 

 ормат ирование 

 т 

 е 

 к 

 с 

 т

 а 

< body >

</ html >

3. Списки

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

Ненумерованные списки: <ul> ... </ul>

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

· Текст один;

· Текст другой;

· Текст такой;

· Текст эдакий

необходим вот такой HTML-текст:

<ul>

<li> Текст один;

<li> Текст другой;

<li> Текст такой;

<li> Текст эдакий

</ul>

þ Обратите внимание: у тега <li> нет парного закрывающего тега.

Вид маркера можно изменить с помощью параметра TYPE в теге <li>.

Например: <li type="circle">- полный кружок

<li type="square">- квадрат

Нумерованные списки: <ol>... </ol>

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

<ol>

<li> Текст один;

<li> Текст другой;

<liLI> Текст такой;

<li> Текст эдакий

</ol>

получится вот такой список:

1. Текст один;

2. Текст другой;

3. Текст такой;

4. Текст эдакий

5. Таблицы

В устройстве таблицы легче всего разобраться на простом примере.

<html>

<head>

<title>Пример 11</title>

</ head>

< body>

< h1>Простейшая таблица </ h1>

< table border=1> 

< caption> 

У таблицы может быть заголовок

</ caption>

< tr> 

< td> 

Первая строка, первая колонка

</ td> 

< td> 

Первая строка, вторая колонка

</ td> 

</ tr> 

< tr> 

< td> 

Вторая строка, первая колонка

</ td> 

< td> 

Вторая строка, вторая колонка

</ td> 

</ tr> 

</ table> 

</ body>

</ html>

Этот фрагмент на экране будет выглядеть так:

Простейшая таблица

У таблицы может быть заголовок

Первая строка, первая колонка	Первая строка, вторая колонка
Вторая строка, первая колонка	Вторая строка, вторая колонка

Таблица начинается с тега < table > и заканчивается тегом </ table > . Тег < table > может включать несколько атрибутов:

align - устанавливает расположение таблицы по отношению к полям документа. Допустимые значения: align=left (выравнивание влево), align=center (выравнивание по центру), align=right (выравнивание вправо).

width - ширина таблицы. Ее можно задать в пикселях (например, или в процентах от ширины страницы (например,

border - устанавливает ширину внешней рамки таблицы и ячеек в пикселях (например, BORDER=4). Если атрибут не установлен, таблица показывается без рамки.

cellspacing - устанавливает расстояние между рамками ячеек таблицы в пикселях (например, CELLSPACING=2).

cellpadding - устанавливает расстояние между рамкой ячейки и текстом в пикселях (например, CELLPADDING=10).

Таблица может иметь заголовок ( < caption > ... </ caption >), хотя заголовок не является обязательным. Тег < caption > может включать атрибут align.

Допустимые значения:

<caption align= top> - заголовок помещается над таблицей

<caption align= bottom> - заголовок помещается под таблицей

Каждая строка таблицы начинается с тега < tr > и заканчивается тегом </ tr >. Тег <tr> может включать следующие атрибуты:

align – устанавливает выравнивание текста в ячейках строки. Допустимые значения: align=left (выравнивание влево), ALIGN=CENTER (выравнивание по центру), align=right (выравнивание вправо).

valing - устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: valing=top (выравнивание по верхнему краю), (выравнивание по центру), valing=bottom (выравнивание по нижнему краю).

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

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

colspan устанавливает "размах" ячейки по горизонтали. Например, COLSPAN=3 означает, что ячейка простирается на три колонки.

rowspan устанавливает "размах" ячейки по вертикали. Например, ROWSPAN=2 означает, что ячейка занимает две строки.

align устанавливает выравнивание текста в ячейке. Допустимые значения: align=left (выравнивание влево), ALIGN=CENTER (выравнивание по центру), align=right(выравнивание вправо).

valign устанавливает вертикальное выравнивание текста в ячейке. Допустимые значения: (выравнивание по верхнему краю), (выравнивание по центру), (выравнивание по нижнему краю).

width устанавливает ширину ячейки в пикселях (например,

height устанавливает высоту ячейки в пикселях (например, height=40).

Если ячейка таблицы пуста, вокруг нее не рисуется рамка. Если ячейка пуста, а рамка нужна, в ячейку можно ввести символьный объект   (non-breaking space - не разрывающий пробел). Ячейка по-прежнему будет пустой, а рамка вокруг нее будет.

Приложение2
Краткая справка тегов

Тег	Назначение
<html> и </html>	начало/конец документа
<head> и </head>	пара тегов указывает на начало и конец служебной области документа
<title> и </title>	все, что находится между тегами <title> и </title>, толкуется браузером как название документа (появляется в строке заголовка окна браузера)
<body> и </body>	пара меток указывает на начало и конец тела (основной области) HTML-документа
< H 1> и </ H 1> — < H 6> и </ H 6>	заголовки от первого до шестого уровня
<P> и </P>	начало/конец абзаца
<BR>	конец строки
<HR>	горизонтальная линия
<B> и </B>	полужирный шрифт
<I> и </I>	наклонный текст (курсив)
<TT> и </TT>	шрифт пишущей машинки
<U> и </U>	подчеркнутый шрифт
<SUP> и </SUP>	верхний индекс
<SUB> и </SUB>	нижний индекс
< BIG > и </ BIG >	увеличить размер шрифта
<SMALL> и </SMALL>	уменьшить размер шрифта
<PRE> и </PRE>	предварительно отформатированный текст, выводится браузером на экран как есть
<BLOCKQUOTE> и </BLOCKQUOTE>	текст, заключенный между тегами, выводится браузером на экран с увеличенным левым полем.
<FONT> и </FONT>	тег для определения типа, размера и цвета шрифта
Атрибут COLOR тега <FONT>	цвет шрифта для фрагмента текста
<BDO> и </BDO>	изменение направления текста.
<MARGUEE> и </ MARGUEE>	текст представляется в виде бегущей строки
<UL> и </UL>	маркированный список
<OL> и </OL>	нумерованный список
<DL> и </DL>	список определений
<A HREF="[адрес перехода]"> выделенный фрагмент текста </A>	переход от одного фрагмента текста к другому
<IMG SRC="[имя файла]">	вставка графического изображения
<TABLE> и </TABLE>	создание таблицы
Атрибут BORDER тега <TABLE>	Выделение каждой ячейки и таблицы в целом рамкой; задание ширины рамки в пикселях
<CAPTION> и </CAPTION>	задает имя (заголовок) таблицы
<CAPTION ALIGN=TOP>	заголовок помещается над таблицей
<CAPTION ALIGN=BOTTOM>	заголовок помещается под таблицей
<TR> и </TR>	строка таблицы
<TD> и </TD>	ячейка таблицы
Атрибут ALIGN тега <TR>, может принимать значение LEFT, RIGHT, CENTER	горизонтальное выравнивание соответственно в строках или ячейках по левому краю, по правому краю, посередине
Атрибут WIDTH тега <TABLE> или <TD>	ширина таблицы или ячейки в процентах от ширины экрана (таблицы) или в пикселях
Атрибут CELLSPACING тега <TABLE>	ширина рамки вокруг каждой ячейки в пикселях
Атрибут CELLPADDING тега <TABLE>	устанавливает величину пустых полей между содержимым ячейки и ее рамкой в пикселях
Атрибут VALIGN тега <TD>	вертикальное выравнивание текста в ячейках строки
Атрибут COLSPAN тега <TD>	объединение нескольких соседних ячеек по горизонтали
Атрибут ROWSPAN тега <TD>	объединение нескольких соседних ячеек по вертикали
<FORM> и /FORM>	создание формы
<INPUT TYPE=submit>	создание кнопки отправки
<INPUT TYPE= text>	создание текстового поля
<INPUT TYPE= password>	создание поля ввода пароля
<INPUT TYPE= radio>	создание переключателей
<INPUT TYPE= checkbox>	создание флажков
<INPUT TYPE= hidden>	создает скрытый элемент данных, который не виден пользователю при заполнении формы и передается обработчику без изменений.
<INPUT TYPE= reset>	определяет кнопку, при нажатии на которую форма возвращается в исходное состояние
<Frameset> и </Frameset>	задание фреймов
Атрибуты ROWS и COLS тега <Frameset>	Определение раскладки фреймов в окне браузера и размера каждого фрейма в пикселах или процентах от размера окна

БАЗЫ ДАННЫХ

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

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

1 / 2 1 2 следующая > >>