Базовые понятия HTML
Изучение базовых сведений об HTML-документе и его структуре. Рассмотрение элементов веб-страниц, которые позволяют задавать абзацы, гипертекстовые ссылки, списки, таблицы, изображения. Приведение примера создания простейшего сайта с помощью фреймов.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | реферат |
| Язык | русский |
| Дата добавления | 08.01.2014 |
| Размер файла | 640,0 K |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Размещено на http://www.allbest.ru/
Базовые понятия HTML
html документ сайт фрейм
HTML-документ - это обычный текстовый документ, созданный в любом текстовом редакторе, например в Блокноте, и оформленный в соответствии с правилами языка HTML.
Для файлов, содержащих HTML-документы, используется расширение HTML или HTM (например, MyWebPage.html или MyWebPage.htm).
HTML-документы могут называться просто документами, а также страницами и веб-страницами.
Элементы
Элемент - это конструкция языка HTML, или контейнер, содержащий данные.
HTML включает в себя различные типы элементов, которые позволяют задавать абзацы, гипертекстовые ссылки, списки, таблицы, изображения и т. д.
Конструкция <P> Привет! </P> представляет собой элемент. Обычно элемент можно разделить на три части. Первая часть, <P>, называется открывающим тегом. Далее идет содержание элемента, которое в данном случае состоит из слова Привет!. И, наконец, </P> является закрывающим тегом. Как видно, название элемента (P) присутствует и в открывающем, и в закрывающем теге. Оно нечувствительно к регистру.
Открывающий и закрывающий теги нужны для указания начала и конца элемента. Теги всегда начинаются символом < и заканчиваются символом >. В закрывающем теге перед его именем помещается символ /. Для некоторых типов элементов допускается отсутствие закрывающего тега (например, элемент P, указывающий начало абзаца). Бывают также элементы, не имеющие закрывающего тега, то есть его не просто можно опустить, а он вообще не существует в языке
Атрибуты
Элементы могут содержать параметры, называемые атрибутами, которые могут иметь определенные значения (по умолчанию или устанавливаемые авторами). Пара атрибут/значение указывается в начальном теге элемента перед символом >, например:
<BODY bgcolor=”#FF0000”>
Каждому атрибуту может быть присвоено значение определенного типа. В приведенном примере указание атрибута bgcolor (имеющего тип %Color) в элементе BODY приведет к тому, что цвет фона страницы станет красным. Значения атрибутов заключаются в кавычки, хотя в определенных случаях кавычки не обязательны.
В начальном теге элемента может быть указано любое количество допустимых пар атрибут/значение, разделенных пробелами, например:
<BODY bgcolor=”#FF0000” text=”#0000FF”>
В приведенном примере устанавливается красный цвет фона страницы и синий цвет основного текста.
При установке значений нескольких атрибутов порядок их записи не имеет значения.
Важно отметить, что регистр, в котором записываются названия атрибутов, также не имеет значения.
Однако для повышения читаемости HTML-кода названия атрибутов обычно записываются в нижнем регистре.
Вложенные элементы
Важным моментом HTML является возможность использования вложенных элементов. Элемент, находящийся внутри другого элемента, называется вложенным. Пример использования вложенных элементов для задания начертания шрифта:
<I>Курсив<B>-Полужирный курсив-</B>Курсив</I>
При обработке приведенного HTML-кода получится страница, показанная на рисунке. На приведенном рисунке хорошо видно, как действие внешнего (или родительского) элемента I (задание курсива) дополняет действие внутреннего элемента B (задание полужирного начертания шрифта).
При использовании вложенности следует помнить, что вложенные элементы должны закрываться до того, как будут закрыты внешние элементы. Так, следующий пример является неверным:
<I>Неправильное закрытие<B>внутреннего элемента</I>до закрытия внешнего</B>
Блочные и встроенные элементы
Различают также блочные и встроенные элементы (иногда их называют элементами уровня блока и элементами уровня текста).
Основным отличием блочных элементов является форматирование их браузерами как обособленной части документа.
Блочные элементы задаются парными тегами и могут содержать вложенные блочные или встроенные элементы и, естественно, текст.
Встроенные элементы обычно находятся прямо в тексте и могут иметь содержимое или не иметь его. Примерами встроенных элементов могут служить приведенные ранее элементы B и I, а также элементы перевода строки, изображения и т. д.
В отличие от блочных элементов, встроенные элементы могут содержать только текст или вложенные встроенные элементы.
Правила вложения элементов:
1. элементы не должны пересекаться;
2. блочные элементы могут содержать вложенные блочные и текстовые элементы;
3. текстовые элементы могут содержать вложенные текстовые элементы;
4. текстовые элементы не могут содержать вложенные блочные элементы.
Просмотр HTML-документа
Сам по себе HTML-документ практически нечитабелен для обычного пользователя. Для просмотра HTML-документов используются специальные программы - браузеры. При открытии HTML-документа браузер распознает теги и учитывает их при отображении текста.
Если по каким-то причинам (например, при ошибке в записи тега) тег не распознается браузером, то он игнорируется.
Существует большое количество программ, позволяющих просматривать HTML-документы. Это такие распространенные приложения, как Internet Explorer, Netscape Navigator, Opera, Mozilla.
Ниже приведен пример простого HTML-документа.
<HTML>
<TITLE> Простой HTML-документ </TITLE>
<BODY>
<H1> Заголовок </H1>
Текст страницы
</BODY>
</HTML>
Структура HTML документа
|
<HTML> |
|||
|
Раздел заголовков |
<HEAD> |
||
|
<TITLE> заголовок документа</TITLE> |
|||
|
</HEAD> |
|||
|
Тело документа |
<BODY> |
||
|
текст документа |
|||
|
</BODY> |
|||
|
</HTML> |
Элемент HTML
Корневым элементом структуры HTML-документа является одноименный элемент HTML. Его использование позволяет явно указать браузеру, что им обрабатывается HTML-код. Элемент HTML содержит в себе все остальные структурные части HTML-документа, такие как HEAD и BODY, и задается при помощи парных тегов <HTML> и </HTML>. Все, что находится между этими тегами, есть HTML-документ.
Теги <HTML> и </HTML> являются необязательными, но все-таки их наличие желательно. В открывающемся теге можно задать используемую версию HTML при помощи атрибута version. Например, при использовании HTML 4.01 можно написать так:
<HTML version=”4.01”>
Не стоит особо волноваться о том, правильно ли указана версия HTML, ведь HTML-документы нормально отображаются большинством современных браузеров без всякого указания версии HTML, так же как и без указания остальных атрибутов.
В элементе HTML можно также задать основной язык документа (атрибут lang) и направления текста (атрибут dir). Атрибут dir может принимать одно из двух значений: RTL или LTR (задают направление текста справа налево или слева направо соответственно). Для указания языка в атрибуте lang используется сокращенное стандартное обозначение языка, например “ru”, “en”, “de” и т. д. Ниже приведены примеры задания языка и направления текста:
<HTML lang=”ru” dir=LTR>
<HTML lang=”en”>
Задавать атрибуты lang и dir совершенно не обязательно. Они доступны для большинства HTML-элементов.
Заголовок
В заголовке (его еще называют «шапкой») HTML-документа содержатся сведения о документе: название (тема документа), ключевые слова (используются поисковыми машинами), а также ряд других данных, которые не являются содержимым документа.
Элемент HEAD
Заголовок HTML-документа содержится в элементе HEAD. Для задания этого элемента используются парные теги <HEAD> и </HEAD>. Все, что находится между двумя указанными тегами, относится к заголовку HTML-документа. Теги <HEAD> и </HEAD> не являются обязательными, но все же лучше их указывать, чтобы можно было легко определить, что именно относится к заголовку HTML-документа (браузер определит это автоматически, независимо от наличия тегов <HEAD> и </HEAD>).
Элемент TITLE
В самом простом случае в заголовке документа содержится только один элемент - TITLE. Элемент TITLE используется для задания названия HTML-документа. Этот элемент задается при помощи парных тегов <TITLE> и </TITLE>, причем только один раз. Текст, находящийся между приведенными тегами, воспринимается и отображается браузерами (и поисковыми машинами) как название документа. К тексту названия форматирование не применяется.
Название документа должно быть кратким, но информативным и должно адекватно отражать содержание документа, например:
<TITLE> Программирование на Java. Введение </TITLE>
<TITLE> Операторы языка C++ </TITLE>
Использование тегов <TITLE> и </TITLE> является обязательным.
Тело HTML-документа
Вся содержательная часть HTML-документа находится в его теле (элемент BODY). Для определения этого элемента используются парные теги <BODY> и </BODY>. Теги <BODY> и </BODY> не являются обязательными, но их наличие, как и в случае с тегами <HEAD> и </HEAD>, значительно улучшает наглядность структурной организации HTML-документа, позволяет четко отделить его содержимое от заголовка.
Все, что помещено между тегами <BODY> и </BODY>, является содержимым документа, показываемым браузером пользователю. В простейшем случае это может быть просто текст без всякого дополнительного оформления. Ниже приведен список наиболее часто используемых атрибутов элемента BODY:
Background - URI, указывающий расположение изображения для фона (обычно берется небольшое изображение, которое размножается для заполнения фона всего документа)
Bgcolor - цвет фона HTML-документа
Text - цвет шрифта документа
Link - цвет непосещенных гиперссылок
Vlink - цвет посещенных гиперссылок
Alink - цвет гиперссылок при выборе их пользователем (при нажатии Enter произойдет переход по такой гиперссылке)
Contenteditable - позволяет разрешить или запретить пользователю редактирование содержимого HTML-документа при просмотре его браузером:
· true - пользователь сможет изменить отображаемый текст HTML-документа прямо в окне браузера, как в обычном текстовом редакторе
· false - запрещает изменение текста (для элемента BODY используется по умолчанию)
· inherit - HTML-элемент унаследует значение свойства contenteditable от родительского элемента (используется по умолчанию для всех прочих элементов, для BODY не применяется)
Все атрибуты, позволяющие задавать цвет, имеют тип %Color. Значения таких атрибутов могут задаваться шестнадцатиричными числами с символом # в начале каждого числа, например:
bgcolor=#FF0005
При задании цвета данным способом следует помнить, что числом задается цвет в RGB-фомате. Это значит, что первые два символа задают интенсивность красного цвета от 0 до FF (255 в десятичной системе счисления), третий и четвертый символы - интенсивность зеленого цвета, а два последних - интенсивность синего цвета. В данном примере интенсивности красного, зеленого и синего цветов равны FF, 0 и 5 соответственно.
Также атрибутам задания цвета можно присваивать предопределенные идентификаторы некоторых наиболее часто употребляемых цветов.
Пример задания названия документа и параметров цвета
<HTML>
<TITLE>Пример задания цветов в элементе BODY</TITLE>
<BODY
background=”2.2.html-files/back.jpg”
text=black
link=#0080FF
vlink=blue
alink=navy>
Обычный неформатированный текст должен отображаться черным цветом
<P><A HREF=”ref1”>Непосещенная гиперссылка (голубой цвет)</A>
<P><A HREF=”ref2”>Посещенная гиперссылка (синий цвет)</A>
<P><A HREF=”ref3”>Выделенная гиперссылка (темно-синий цвет)</A>
</BODY>
</HTML>
Текст
Чтобы поместить простой текст на страницу, достаточно ввести его в теле документа. При этом браузер отобразит текст со шрифтом по умолчанию и цветом, заданным для текста тела страницы.
Чтобы чтение информации, содержащейся в HTML-документе, стало более удобным, применяется форматирование текста и разбиение его на логически цельные части (структурирование) с визуальным отделением этих частей друг от друга.
Форматирование текста
Задание начертания текста
Задание начертания текста является, возможно, самым простым средством форматирования содержимого документа, которое доступно в HTML. Для изменения начертания текста в HTML-код вводятся элементы, обозначающие текст, написанный с соответствующим начертанием.
<B> </B> - полужирное начертание текста
<I> </I> - курсивное начертание текста
<U> </U> - подчеркнутый текст
<STRIKE> </STRIKE> или <S> </S> - перечеркнутый текст
<BIG> </BIG> - текст с увеличенным размером шрифта
<SMALL> </SMALL> - текст с уменьшенным размером шрифта
<SUP> </SUP> - верхний индекс
<SUB> </SUB> - нижний индекс
<TT> </TT> - текст, записанный моноширинным шрифтом (все символы имеют одинаковую ширину)
<BLINK> </BLINK> - мерцающий текст (редко поддерживается браузерами)
Рассматриваемые HTML-элементы могут быть вложены друг в друга. При этом на начертание текста влияют все элементы, внутри которых текст находится.
<TITLE></TITLE>
<BODY>
<B>Полужирный текст</B><BR>
<I>Курсив</I><BR>
<U>Подчеркнутый текст</U><BR>
<S>Зачеркнутый текст</S><BR>
<BIG>Текст увеличенного размера</BIG><BR>
<SMALL>Тест уменьшенного размера</SMALL><BR>
<SUP>Верхний индекс</SUP> Текст <SUB> Нижний индекс</SUB><BR>
<TT>Текст, записанный моноширинным шрифтом</TT><BR>
<I><B><U><S>Текст непонятного начертания</S></U></B></I>
</BODY>
<BR> - переход на новую строку
<NOBR> </NOBR> - текст в теге будет выведен в одну строку
<PRE> </PRE> - элемент для обозначения текста, отформатированного ранее
<BLOCKQUOTE> </BLOCKQUOTE> - цитата
<CENTER> </CENTER> - центрирование текста
<DIV> </DIV> - выравнивание текста. Атрибут Align.
<PLAINTEXT> </PLAINTEXT> - все теги, заключенные внутри этого тега воспринимаются как текст
<BASEFONT> </BASEFONT> - элемент, определяющий базовый размер шрифта. Атрибут size (1-7)
<FONT> </FONT> - определение типа, размера и цвета шрифта (size, color, face))
Блочные элементы - заголовки и абзацы.
Шесть уровней заголовков - парные теги от <H1> </H1> до <H6> </H6>
Абзацы - парный тег <P> </P>. Закрывающий тег необязателен. Параметр - выравнивание текста, атрибут align (left (по левому краю), right (по правому краю), center (по центру), justify (по ширине).
Пример:
<H1> Заголовок первого уровня </H1>
<P align=justify> Первый абзац </P>
<P> Второй абзац </P>
<H1> Заголовок второго уровня </H1>
Особенности ввода текста
При вводе текста в документ часто возникает вопрос: как заставить браузер отобразить зарезервированные символы языка HTML (например, > или &) или символы, которые невозможно ввести с клавиатуры. Для ввода в документ таких символов в HTML предусмотрен механизм ссылок на символы. Таким образом, когда необходимо ввести в документ, например, символ «&», то в текст на его место подставляется специальная последовательность - ссылка на данный символ.
Ссылки на символы могут быть представлены любым из указанных ниже способов:
&#D; - позволяет задать символ, код которого имеет значение D (в десятичной системе счисления)
&#xH; - позволяет задать символ, код которого имеет значение H (в шестнадцатеричной системе счисления);
&имя_символа; - позволяет использовать именованную ссылку на символ.
Ссылка на символ в тексте HTML-документа начинается символом «&» и заканчивается точкой с запятой.
Имена символов
quot - кавычка (“)
amp - амперсанд (&)
lt - меньше (<)
gt - больше (>)
nbsp - неразрывный пробел
reg - знак зарегистрированной торговой марки ®
copy - знак авторского права ©
alpha - малая греческая буква альфа (б)
pi - малая греческая буква пи (р)
Например:
"
<TITLE>Именованные ссылки на символы</TITLE>
<BODY text=yellow bgcolor=blue>
<TITLE> Именованные ссылки на символы </TITLE><BR>
<BODY color=" yellow "
bgcolor=" blue " > <BR>
Текст HTML-документа <BR>
</BODY>
</BODY>
Линейки
<TITLE>Линейки </TITLE>
<BODY>
Линейка с настройками по умолчанию
<HR>
Линейки различной толщины
<HR size=4>
<HR size=10>
Плоская линейка
<HR noshade size=10>
Линейки с различным выравниванием
<HR width=50% align=left>
<HR width=50%>
<HR width=50% align=right>
</BODY>
В качестве ограничителей абзацев может использоваться горизонтальная линейка - непарный тег <HR> с атрибутами:
Size - толщина линии
Width - длина линии
Color - цвет линии
Noshade - плоская линейка (атрибут задается без значений)
Списки
Маркированные списки
<TITLE>Маркированные списки </TITLE>
<BODY>
Список с закрашенными круглыми маркерами
<UL>
<LI> Первый элемент
<LI> Второй элемент
</UL>
Список с круглыми незакрашенными маркерами
<UL type=circle>
<LI> Первый элемент
<LI> Второй элемент
</UL>
Список с квадратными незакрашенными маркерами
<UL type=square>
<LI> Первый элемент
<LI> Второй элемент
</UL>
Список с разными маркерами элементов
<UL>
<LI> Закрашенный круг
<LI type=circle > Окружность
<LI type=square > Квадрат
</UL>
</BODY>
Нумерованные списки
<TITLE>Нумерованные списки</TITLE>
<BODY>
Нумерация арабскими цифрами
<OL>
<LI> Первый элемент
<LI> Второй элемент
</OL>
Продолжение нумерации, но большими римскими цифрами
<OL type=I start=3>
<LI> Третий элемент
<LI> Четвертый элемент
</OL>
Новый список, нумерация большими латинскими буквами
<OL type=A>
<LI> Первый элемент
<LI> Второй элемент
</OL>
</BODY>
Изменение нумерации
<TITLE>Изменение нумерации</TITLE>
<BODY>
<OL>
<LI> Первый элемент
<LI value=10> Второй элемент
<LI> Третий элемент
<LI value=20 type=A> Четвертый элемент
<LI type=A> Пятый элемент
</OL>
</BODY>
Списки определений (многоуровневые списки)
<TITLE>Списки определений (многоуровневые списки) </TITLE>
<BODY>
<DL>
<DT> Пункт 1
<DD> Определение пункта 1
<DD> Другое определение пункта 1
<DT> Пункт 2
<DD> Определение пункта 2
<DT> Пункт 3
<DD> Определение пункта 3
</DL>
</BODY>
Создание вложенных списков
<TITLE>Использование вложенных списков </TITLE>
<BODY>
<OL>
<LI> Первый элемент списка. Имеет две составляющих:
<UL>
<LI> Первая составляющая
<LI> Вторая составляющая
</UL>
<LI> Второй элемент списка. Имеет три составляющих:
<UL>
<LI> Первая составляющая. Также разделяются на две части:
<UL>
<LI> Первая часть
<LI> Вторая часть
</UL>
<LI> Вторая составляющая
</UL>
<LI>Третий элемент списка
</OL>
</BODY>
Гиперссылки
Парный тег <A> обеспечивает создание гиперссылок.
<A href=”Адрес ссылки”> Текст для щелчка </A>
Адресом ссылки может являться любой из адресов Интернета, а также путь к папке или файлу на локальном носителе.
В том случае, когда используются переходы внутри текущей страницы, на ней должны быть расставлены метки:
<A name=”Метка”> </A>
<A href=”#Метка”> Текст для щелчка </A>
Изображения
Для вставки изображения в текст используется одиночный тег <IMG> с атрибутами:
Alt - альтернативный текст, который отображается на месте изображения, если по каким либо причинам само изображение не может быть показано;
Border - задает толщину границы вокруг рисунка в пикселях;
Align - задает выравнивание изображения:
· Left - по левому краю окна браузера
· Right - по правому краю окна браузера
· Top - вертикальное выравнивание изображения по верху строки
· Bottom - вертикальное выравнивание изображения по низу строки
· Middle - центр изображения выравнивается по центру строки
· Absmiddle -точное выравнивание изображения по центру строки
· Absbottom - выравнивание изображения по низу самого низко посаженного символа строки
· Baseline - выравнивание изображения по базовой линии строки
Height - задает высоту изображения в пикселях;
Width - задает ширину изображения в пикселях;
Vspace - задает величину свободного пространства между изображением и текстовым сверху и снизу;
Hspace - задает величину свободного пространства между изображением и текстом справа и слева;
Например:
<TITLE>Вставка изображений</TITLE>
<BODY>
<IMG src="study.gif" border=1> - небольшое изображение с рамкой.
<IMG src="image.gif" height=100 width=150 alt=здесь должно быть изображение>
</BODY>
Указание полного пути к графическому файлу
<IMG src=”file:\\\C:\information\pictures\image1.gif”>
Изображения-гиперссылки
<A href=”info.htm”> <IMG src=”info.gif”></A>
Изображения-карты
Карта, используемая для изображения, может быть создана в любом документе.
Для создания карты применяется парный тег <MAP>. Обычно для элемента MAP задается значение атрибута name - имя, которое используется для ссылок на созданную карту.
Внутри элемента MAP при помощи одиночных тегов <AREA> задаются активные области карты. Для каждого элемента AREA могут задаваться следующие атрибуты:
Href - адрес, на который указывает гиперссылка, ассоциированная с областью;
Coords - координаты активной области
Shape - задает тип области
Для круга необходимо задать координаты центра и радиус, выраженные в пикселях. Координаты центра отсчитываются от левого и верхнего краёв рисунка. Шаблон для задания круговой области таков:
Shape=”circle” coords=X, Y, R
Для определения многоугольной области задают координаты каждого из углов:
Shape=”poly” coords=X1,Y1, X2,Y2, X3,Y3,…XN, YN
Для определения прямоугольной области задают координаты верхнего левого и правого нижнего углов:
Shape=”rect” coords=X1,Y1,X2,Y2
Для определения всей области карты
Shape=”default”
Alt - альтернативный текст
Title - текст подсказки
<IMG src="graph\map1.gif" usemap="#karta1">
<map name="karta1">
<area href="страница1.htm" shape="circle" coords="115,120,85">
<area href="страница1.htm" shape="poly" coords="75,225, 200,250, 250,225, 230,275, 40,270">
</map>
<IMG src="graph\map2.gif" usemap="#karta2">
<map name="karta2">
<area href="страница2.htm" shape="rect" coords="25,25,200,100">
</map>
Таблицы
|
<TABLE border=4 cellspacing=3> |
Заголовок таблицы Заголовок 1 Заголовок 2 Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 |
<TH> - ячейки в заголовках столбцов и строк
<TR> - задаются строки таблицы (закрывающий тег необязателен)
<TD> - обычные ячейки
Для элемента CAPTION можно задать атрибут, определяющий положение заголовка относительно таблицы - align:
· Top - заголовок показывается сверху таблицы (по умолчанию);
· Bottom - под таблицей;
· Left - слева от таблицы;
· Right - справа от таблицы.
Для элемента TABLE:
Align - задает положение таблицы в окне браузера;
Bgcolor - задает цвет фона таблицы;
Border - задает толщину внешней границы таблицы (по умолчанию имеет значение 1);
Bordercolor - цвет границ таблицы (цвет внешней границы и цвет границ ячеек);
Cellpadding - размер пустого пространства между границами и содержимым ячеек таблицы;
Cellspaсing - размер пустого пространства между ячейками таблицы;
Frame - задает отображаемые части внешней рамки таблицы, может принимать значения:
· Void - рамка не отображается (по умолчанию);
· Above - отображается только верхняя граница;
· Below - отображается только нижняя граница;
· Hsides - отображаются верхняя и нижняя граница;
· Vsides - отображаются правая и левая границы;
· Lhs - отображается только левая граница;
· Rhs - отображается только правая граница;
· Box, border - рамка отображается полностью;
Rules - задает, какие именно границы между ячейками должны отображаться:
· None - границы между ячейками не отображаются (по умолчанию);
· Group - отображается границы только между группами строк и столбцов;
· Rows - отображаются границы только между строками таблицы;
· Cols - отображаются границы только между столбцами таблицы;
· All - отображаются все границы между ячейками;
Height - задает высоту таблицу;
Width - задает ширину таблицы.
Параметры отображения таблицы
Для настройки особого отображения отдельных строк таблицы используются атрибуты элемента TR:
Align - задает горизонтальное выравнивание текста ячеек строки (left, right, center, justify);
Valign - задает вертикальное выравнивание текста ячеек строки (top, bottom, middle, baseline);
Bgcolor - задает цвет фона ячеек строки;
Bordercolor - определяет цвет рамки ячеек строки (если рамка отображается);
Height - определяет высоту ячеек строки;
Width - определяет ширину ячеек строки.
Параметры отображения ячеек. Слияние ячеек
Для задания внешнего вида содержимого ячейки используются следующие атрибуты элемента TD:
Align - задает горизонтальное выравнивание текста ячейки (left, right, center, justify);
Valign - задает вертикальное выравнивание текста ячейки (top, bottom, middle, baseline);
Bgcolor - задает цвет фона ячейки;
Bordercolor - определяет цвет рамки ячейки (если рамка отображается);
Height - задает высоту ячейки;
Width - задает ширину ячейки;
Colspan - задает количество столбцов для слияния;
Rowspan - задает количество строк для слияния.
Создание фона HTML документа
Атрибуты элемента BODY
bgcolor - цвет фона HTML-документа;
background - URI, указывающий расположение изображения для фона,
например <body background="C:\picture\fon\ris.jpg">
Формы
Для вставки формы в HTML-документ используется элемент FORM. Он задается парными тегами <FORM> и </FORM>. Между этими тегами помещаются описания элементов управления формы. Также здесь может быть помещен и другой текст с использованием разметки средствами HTML. Этот текст обычно используется для пояснения, какие данные и в какой элемент управления нужно вводить.
При создании формы используются следующие атрибуты элемента FORM:
action - обязательный для каждой формы параметр, URI программы-обработчика данных формы;
method - задает способ отправки данных, введенных в форму, может принимать значения get (используется по умолчанию) или post;
enctype - задает тип данных формы, если используется метод отправки post;
accept-charset - применяется при передаче файлов, позволяет указать, какие кодировки используются для каждого из файлов (список строковых значений - названий кодировок), по умолчанию устанавливается значение UNKNOWN (приложение на сервере должно само определять кодировки);
accept - описывает типы файлов (MIME-типы), передаваемые серверу, если этот параметр не использовать, то серверное приложение должно уметь само определять типы передаваемых ему файлов.
Элементы управления формы
Для обозначения элементов управления используется HTML-элемент - INPUT. Этот элемент задается одиночным тегом <INPUT> и имеет следующие атрибуты:
type - принимает строку, задающую тип элемента управления (по умолчанию используется строка text и создается соответственно поле для ввода текста):
· text - создается однострочное текстовое поле. Значение атрибута value отображается в качестве текста по умолчанию. Атрибут size воспринимается как количество символов, которое может отображаться в поле без необходимости горизонтальной прокрутки текста. Атрибут maxlength задает максимальное количество символов, которые могут быть введены в поле;
- <INPUT type=text>
· password - действие этого значения аналогично действию значения text, но дополнительно скрывается вводимый пользователем текст (заменяется символами «*» или другими). Используется для ввода конфиденциальной информации типа паролей;
- <INPUT type=password>
· checkbox - создает элемент управления флажок. Задавать значение атрибута value нужно обязательно, так как именно это значение отправляется серверу, если флажок установлен. Можно использовать несколько элементов управления checkbox с одинаковыми значениями атрибута name для обеспечения возможности задания нескольких значений одного свойства;
- <INPUT type=checkbox checked> <INPUT type=checkbox>
· radio - создает переключатель. Имеет смысл использовать как минимум два этих элемента управления вместе, объединенных в группу, с заданием одного и того же значения атрибута name. Тогда у пользователя появляется возможность выбора одного из нескольких вариантов (одновременно можно установить только один переключатель в группе). Значение атрибута value задавать также обязательно, оно используется аналогично элементу управления checkbox;
- <INPUT type=radio name="1" value="Первый">
<INPUT type=radio name="1" value="Второй">
<INPUT type=radio name="1" value="Третий" checked>
· file - создает поле для ввода имени файла с возможностью выбора файла с помощью диалогового окна открытия файла или без него, что зависит от браузера. Содержимое выбранного файла или файлов пересылается вместе с формой. Значение атрибута value используется как имя файла по умолчанию. Значение атрибута size задается и работает аналогично элементу управления text;
<INPUT type=file>
· submit - создает кнопку, при нажатии которой браузер отправит форму. Значение атрибута value задает надпись на кнопке;
<INPUT type=submit value=Подтверждение>
· image - создает изображение, при щелчке на котором произойдет отправка формы браузером. При этом на сервер передаются также координаты указателя мыши относительно левого верхнего угла изображения. Атрибут src задает расположение используемого изображения;
<INPUT type=image src="graph\treug1.gif">
· reset - создает кнопку, при нажатии которой значения всех элементов управления будут заменены значениями по умолчанию. Значение value задает надпись на кнопке;
<INPUT type=reset value=Очистка>
· button - создает пользовательскую кнопку. При нажатии или другом действии с кнопкой может выполняться ассоциированный сценарий. Значение атрибута value используется как надпись на кнопке;
· hidden - создает скрытый элемент управления. Для него задаются атрибуты name и value. Пользователь не видит и не может изменить содержимое этого элемента управления. Однако данные скрытого элемента управления отправляются серверу вместе с остальными данными формы.
name - используется для задания имени элементу управления (строка, которая помимо идентификации элемента управления добавляется в данные, отсылаемые серверу);
value - начальное значение для полей ввода текста и полей для указания имен файлов, также используется как надпись таких элементов управления, как кнопки; необязательно для всех элементов управления, кроме флажков и переключателей;
checked - булев атрибут, если он установлен, то флажок или переключатель считается (и отображается браузером) установленным;
disabled - булев атрибут, установка которого не позволяет пользователю работать с элементом управления;
readonly - булев атрибут, позволяет запретить изменение состояния элемента управления (работает только для текстовых полей и поля выбора файла, так что для остальных элементов управления лучше использовать атрибут disabled, однако при этом данные деактивированных элементов управления не отправляются серверу);
size - задает размер элемента управления (единицы измерения и действие специфичны для разных элементов управления);
maxlength - задает максимальную длину текста, который может быть введен в текстовые поля (положительное численное значение);
src - для элемента управления image задает расположение используемого изображения;
title - описание элемента управления (может отображаться браузерами как всплывающая подсказка);
align - задает горизонтальное выравнивание элемента управления, работает так же, как и для любого другого HTML-элемента, поддерживающего этот атрибут;
tabindex - номер элемента управления при навигации при помощи табуляции;
accesskey - «горячая» клавиша для элемента управления (для перехода к элементу управления нужно нажать Alt и заданную клавишу).
Многострочное текстовое поле задается парными тегами <TEXTAREA> и </TEXTAREA>. Размер элемента управления задается с помощью следующих атрибутов:
rows - задает количество строк, которые отображаются без необходимости вертикальной прокрутки;
cols - задает максимальное количество символов в строке текстового поля, отображаемое без переноса.
- <TEXTAREA rows=5 cols=25> Область для ввода текста </TEXTAREA>
Меню добавляется в форму использованием трех HTML-элементов: SELECT, OPTGROUP и OPTION. Хотя обязательно использовать только первый и последний из них. Элемент SELECT является контейнером пунктов меню, задается при помощи парных тегов <SELECT> и </SELECT> и поддерживает следующие атрибуты:
name - имя меню, которое также используется как название параметра при отправке формы;
size - задает количество строк, одновременно видимых пользователю;
multiple - булев атрибут, позволяет разрешить выделение нескольких пунктов меню одновременно;
disabled - булев атрибут, деактивирует меню;
title - текст подсказки для меню;
tabindex - номер при перемещении между элементами управления при помощи табуляции.
Элемент OPTION используется для задания отдельных пунктов меню. Задается парными тегами <OPTION> и </OPTION> (закрывающий тег необязателен), между которыми помещается текст пункта меню. Имеет следующие атрибуты:
value - текст, который будет отправлен с формой при выборе пункта меню;
selected - булев атрибут, позволяет выделить пункт меню по умолчанию (не следует устанавливать для нескольких пунктов одного меню, если не установлен атрибут multiple);
disabled - булев атрибут, запрещает выбор пункта меню.
Элемент OPTGROUP используется для группировки пунктов меню. Создаются группы заключением HTML-элементов OPTION, определяющих пункты меню одной группы, в парные теги <OPTGROUP> и </OPTGROUP>. Настроить параметры группы можно с использованием следующих атрибутов HTML-элемента OPTGROUP:
label - строка с подписью для группы;
disabled - запретить выбор пунктов меню, принадлежащих этой группе.
- <SELECT>
<OPTION value=a>Первый
<OPTION value=b>Второй
<OPTION value=c>Третий
</SELECT>
Группировка элементов управления
При создании форм есть возможность сделать более выразительнее общее предназначение некоторых элементов управления, дополнительно заключив их в рамку. Рамку можно подписать, а можно оставить без надписи.
Создается рамка при помощи HTML-элемента FIELDSET. Между парными тегами <FIELDSET> и </FIELDSET> помещаются определения элементов управления, принадлежащих группе. Вокруг этих элементов управления и будет нарисована рамка.
Для создания подписи к рамке нужно внутри элемента FIELDSET определить элемент LEGEND. Задается этот HTML-элемент при помощи парных тегов <LEGEND> и </LEGEND>, между которыми помещается текст подписи.
Фреймы
Язык HTML позволяет в рамках одной страницы отобразить несколько документов. Для этого таблица должна быть разбита на несколько областей - фреймов. Использование фреймов позволяет:
· разбить окно браузера на несколько окон, в которых могут отображаться разные HTML-документы;
· прокручивать содержимое одних фреймов независимо от содержимого других;
· осуществлять переход между страницами сайта, загружая содержимое только в правый фрейм.
При этом содержимое каждого документа выравнивается относительно своего собственного окна - фрейма.
Даже самый простой сайт (см. рис.) состоит из четырех HTML-документов.
Содержимое трех из них показывается в окне браузера. Четвертый документ, который и нужно открывать браузером, содержит описания фреймов, на которые разбивается окно, а также содержит указания браузеру, откуда загружать страницы в созданные фреймы.
|
Содержимое первой страницы |
||
|
Содержимое второй страницы Гиперссылка 1 Гиперссылка 2 Гиперссылка 3 |
Содержимое третьей страницы |
Тело документа заменяется описанием фреймов, задаваемым парными тегами <FRAMESET> и </FRAMESET>. Элемент BODY в таком документе должен отсутствовать. FRAMESET используется для разбиения окна браузера или окна родительского фрейма на отдельные фреймы. При разбиении окна на фреймы используются следующие атрибуты элемента FRAMESET:
· cols - список значений ширины создаваемых фреймов;
· rows - список значений высоты создаваемых фреймов.
Могут использоваться как абсолютные значения в пикселях, так и процентные, а также пропорциональные.
Последняя область может быть определена с помощью символа «*», что означает, что ей выделяется всё оставшееся пространство.
Между тегами <FRAMESET> и </FRAMESET> должны содержаться либо описания каждого фрейма с использованием HTML-элемента FRAME, либо определения вложенных фреймов. Элемент FRAME задается одиночным тегом <FRAME>. Атрибуты:
· name - задает имя фрейма, позволяя использовать его в качестве целевого фрейма в гиперссылках. Для этого в тег <A>, определяющий гиперссылку, необходимо добавить атрибут TARGET, значение которого совпадает с ранее определённым именем области.
· src - URI документа, содержимое которого отображается в окне фрейма;
· noresize - булев атрибут, блокирует возможность изменения размеров окна фрейма;
· scrolling - позволяет показать или убрать полосы прокрутки в окне фрейма, может принимать значения yes (показать полосы прокрутки), no (не отображать полосы прокрутки) или auto (используется по умолчанию: показать полосы прокрутки только в том случае, если содержимое не умещается в окне фрейма);
· frameborder - задает должен ли браузер показывать рамку окна фрейма, может принимать значения 1 (используется по умолчанию) или 0 (рамка не показывается);
· marginwidth - задает расстояние между границами фрейма и его содержимым по горизонтали (в пикселях);
· marginheight - задает расстояние между границами фрейма и его содержимым по вертикали.
Пример создания простейшего сайта с помощью фреймов
Первый HTML-документ (Содержит заголовок сайта)
<HTML>
<HEAD><TITLE>Заголовок</TITLE></HEAD>
<BODY>
<H1> Содержимое первой страницы </H1>
</BODY>
</HTML>
|
Содержимое первой страницы |
Второй HTML-документ (Содержит гиперссылки на ранее созданные страницы)
<HTML>
<HEAD><TITLE>Ссылки</TITLE></HEAD>
<BODY>
<A target="2" href="str1.htm">Гиперссылка 1</A><BR>
<A target="2" href="str2.htm">Гиперссылка 2</A><BR>
<A target="2" href="str3.htm">Гиперссылка 3</A><BR>
</BODY>
</HTML>
|
Содержимое второй страницы Гиперссылка 1 Гиперссылка 2 Гиперссылка 3 |
Третий HTML-документ (Объединяет второй документ и страницу, соответствующую первой гиперссылке)
<FRAMESET cols=20%,*>
<FRAME src="Cсылки.htm" name="1">
<FRAME src="str1.htm" name="2">
</FRAMESET>
|
Содержимое второй страницы Гиперссылка 1 Гиперссылка 2 Гиперссылка 3 |
Содержимое третьей страницы |
Четвертый HTML-документ (Объединяет третий документ и первый документ)
<FRAMESET rows=15%,*>
<FRAME src="Заголовок.htm">
<FRAME src="Фрейм.htm">
</FRAMESET>
|
Содержимое первой страницы |
||
|
Содержимое второй страницы Гиперссылка 1 Гиперссылка 2 Гиперссылка 3 |
Содержимое третьей страницы |
Размещено на Allbest.ru
Подобные документы
Hyper Text Markup Language (html) как стандартный язык для создания гипертекстовых документов в среде web. Тэги списков, гипертекстовые ссылки, графика внутри документа, специальные тэги html и таблицы. Планирование фреймов. Этапы создания сайтов.
контрольная работа [126,9 K], добавлен 18.11.2010Изучение тегов для создания списков и таблиц в HTML, основных атрибутов тегов. Практические навыки создания списков и таблиц в HTML-документах. Нумерованные, маркированные и вложенные списки, список определений. Выравнивание данных в ячейках таблицы.
контрольная работа [322,1 K], добавлен 09.08.2014Понятие об html. Структура файла в формате html. Отличительный признак html-документа. Гипертекстовые ссылки. Создание документов в стандарте html. Заголовки. Форматирование текста и изменение стилей. Фреймы.
реферат [23,7 K], добавлен 17.08.2007Работа с HTML-редактором Adobe Dreamweaver. Этапы и правила построения заглавной страницы сайта, форматирования HTML-страниц, создания гипертекстовых ссылок, создания и форматирования таблиц. Использование графических материалов при разработке сайта.
методичка [1,9 M], добавлен 06.07.2011Основы языка программирования Web-страниц – HTML. Виды информации, которую может содержать Web-страница: текст, графика, звук, анимация и видео. Инструментарий для создания Web-страниц. Основные HTML-редакторы, которые используются для Web-дизайна.
реферат [374,0 K], добавлен 19.01.2011Характеристика принципов создания html-страниц и связывания их ссылками так, чтобы можно было произвольным образом переходить от одной страницы к другой. Применение тегов форматирования текста и заголовка окна. Этапы создания html-страницы с таблицей.
контрольная работа [16,0 K], добавлен 19.06.2014Создание сайта при помощи HTML и CSS. Язык гипертекстовой разметки HTML и таблица стилей CSS. Основные понятия об этих языках, этапы и алгоритмы программного обеспечения. Добавление стилей в документ. Свойства элементов, принцип построения Web-страницы.
курсовая работа [2,9 M], добавлен 12.01.2016Основные теги и атрибуты языка HTML. Создание web-сайта, который должен представлять собой несколько связанных между собой страниц. Рассмотрение различных значений атрибутов и тегов на страницах и в других документах. Экранные формы разработанных страниц.
лабораторная работа [1,2 M], добавлен 16.04.2014Структура HTML–документа. Синтаксис записи тега. Обозначение цветов в шестнадцатеричной системе счисления. Формат задания и параметры таблицы в документе, параметры её заголовка, строк и ячеек, группирование столбцов. Наследование свойств выравнивания.
курсовая работа [318,8 K], добавлен 03.01.2014Язык маркировки гипертекстов HTML, основа создания web-страниц. История спецификаций, каскадные таблицы стилей CSS. Способы определения таблиц стилей (стилевого шаблона). Язык подготовки сценариев JavaScript, его использование. Программный код web сайта.
курсовая работа [26,9 K], добавлен 05.07.2009
