Специализированные языки разметки документов (HTML)
История развития Интернета и принципы его работы. Сквозные протоколы и шлюзы. Логическая и физическая структура сайта. Основы HTML и форматирование текста. Списки, таблицы, гиперссылки. Мультимедиа на web–странице. Формат задания фреймовой структуры.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | курсовая работа |
| Язык | русский |
| Дата добавления | 27.03.2009 |
| Размер файла | 1,2 M |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Для выравнивания текста по центру можно использовать тег:
<CENTER> Текст
</CENTER>
Разрывы строк. Для того, чтобы внутри тестового блока броузер отобразил перевод строки, например, для отделения одного абзаца от другого, в конце строки следует поместить тег <BR>. Следующее слово, встречающееся за данным тегом, будет перенесено на новую строку. Возможно использование нескольких тегов <BR> подряд для задания последовательности из нескольких пустых строк. Команда <BR> не имеет закрывающего тега.
Иногда тег <BR> содержит атрибут clear, который может принимать одно из трех значений: left, right, all. Указанные параметры позволяют переносить текст со смещением новой строки соответственно к левой, правой или обеим границам экрана одновременно. Синтаксис записи этого тега с атрибутом clear:
<BR clear=”значение”>
Некоторые браузеры переносят строки самостоятельно, причем разрывают строку в том месте, где она выходит за границы экрана. Если программисту необходимо отобразить текстовую строку фиксированной длины без переносов, используется тег <NOBR>:
<NOBR> строка без переносов </NOBR>
При использовании данного тега в случае, если длина строки превышает ширину экрана, в нижней части окна браузера появляется горизонтальная полоса прокрутки.
Шрифты. Элемент <FONT> определяет свойства шрифта.
Синтаксис записи тега <FONT>:
<FONT face=”значение1”
size=”значение2”
color=”значение3”>
текст
</FONT>
Значением атрибута face является название шрифта, который используется для отображения текста, заключенного в теги <FONT> </FONT>. Если, например, вместо параметра "значение1" в приведенном примере вы подставите "Arial", помеченный тегом <FONT>, текст будет отображаться именно этим шрифтом. В атрибуте face в качестве значений допустимо указывать несколько гарнитур шрифтов, разделяя их запятой. Для отображения текста браузер применит одну из перечисленных гарнитур, имя которой первой совпадает с имеющимся в его распоряжении набором гарнитур.
<FONT face=”Helvetica, Arial”>
Атрибут size указывает на размер шрифта. Параметр этого атрибута может быть описан либо абсолютной, либо относительной величиной. Абсолютная величина подразумевает использование в качестве параметра целого числа, указывающего на высоту шрифта в пунктах. Относительная же величина, обозначаемая целым числом со знаком плюс или минус (например, +2 или - 1), - это количество пунктов, которые следует прибавить или отнять от размера шрифта, используемого браузером по умолчанию (12pt). Так, запись <FONT size="+1"> говорит о том, что размер помеченного таким тегом текста будет на один пункт больше, чем обычный текст документа. Кроме того, размер шрифта можно записывать целыми числами от 1до 7. В этих единицах основному шрифту, используемому по умолчанию, присваивается размер 3. Самый мелкий шрифт имеет размер 1, самый крупный - 7. Каждый шрифт в шкале "1-7" на 20% больше или меньше размера основного шрифта.
Атрибут color определяет цвет шрифта и подставляется либо цифровым кодом, либо символьной меткой.
Очевидно, что при использовании тега <FONT> любой из его атрибутов может быть опущен.
<FONT face=”Arial"
size="+2"
color="#OOOOFF">
отрывок текста
</FONT>
<FONT face=”Arial"
size=5
color="olive">
отрывок текста
</FONT>
<Font size=6> текст </Font>
<Font size=+2> текст </Font>
<Font size=-1> текст </Font>
Изменение основного шрифта. По умолчанию текстовое содержимое документа отображается основным шрифтом, заданным в начальных установках браузера. Обычно основной шрифт имеет размер 3 и гарнитуру Times New Roman. Для изменения свойств основного шрифта предназначен одиночный тег <BASEFONT>, который имеет атрибуты size, color и face.
<BASEFONT size=5>
Задание цвета фона. Цвет фона всего документа определяется атрибутом bgcolor тега <BODY>.
<BODY bgcolor=”blue”>
Цвет текста. Для определения цвета шрифта можно пользоваться одним из 3 способов:
назначить цвет символов всего документа с помощью атрибута text тега <BODY>
<BODY text=”green”>
если в документе определен основной шрифт с помощью тега <BASEFONT>, можно дополнить этот элемент атрибутом color
<BASEFONT size=5 color=”red”>
для текстовых фрагментов цвет задается с помощью атрибута color в тегах <FONT>, при этом такое задание цвета отменяет действие атрибута text тега <BODY>
<FONT color=”red”>
Элементы стиля шрифтов.
<B> Выделение текста полужирным шрифтом</B>
<I> Выделение курсивным шрифтом</I>
<U> Выделение текста подчеркиванием </U>
<TT> Моноширинный текст </TT>
<SMALL> Уменьшение размера шрифта на 10-20% относительно текущего размера шрифта </SMALL>
<BIG> Увеличение размера шрифта на 10-20% относительно текущего размера шрифта </BIG>
<STRIKE> Зачеркнутый текст </STRIKE>
<S> Зачеркнутый текст </S>
<SUB> Нижний индекс </SUB>
<SUP> Верхний индекс </SUP>
Данные пары тегов можно вкладывать одна в другую. Например, выделить текст жирным курсивным шрифтом можно так:
<В><I>Текст, выделенный жирным курсивным шрифтом</I></В>
Фразеологические элементы. Фразеологический элемент не указывает точного способа отображения текста, а лишь определяет, что содержимое элемента несет определенную смысловую нагрузку и должно быть каким-то образом выделено относительно обычного текста.
<EM> Элемент акцентирования. Большинство броузеров воспринимают его как выделение текста курсивом. </EM>
<STRONG> Элемент акцентирования. Этот элемент обычно интерпретируется браузерами как выделение полужирным шрифтом. </STRONG>
<DFN> Термин и его определение. Отображается курсивом. </DFN>
<KBD> “Текст, набранный с клавиатуры”. Отображается шрифтом Courier. </KBD>
<VAR> Задание переменной или ее значения. Содержимое выводится курсивом. </VAR>
<CODE> Воспроизведение специальных символов. Применяется в случаях, когда необходимо показать, что текст является исходным кодом какой-либо программы. </CODE>
<SAMP> Воспроизведение буквенных символов. Указывает, что текст является образцом. </SAMP>
<ACRONYM title=”значение”>
Элемент аббревиатуры. В содержимом располагается сокращенное название аббревиатуры. Расшифровка термина появляется в виде всплывающей подсказки, текст которой задается значением атрибута title. Содержимое ACRONUM появляется обычным текстом. Назначение ACRONUM состоит в подготовке информации для поисковых серверов по расшифровке аббревиатур.
</ACRONYM>
Оформление цитат.
<BLOCKQUOTE cite=”URL”>
Текст длинной цитаты
</BLOCKQUOTE>
Задает отображение длинных цитат отдельным текстовым блоком. Содержимое элемента выводится с небольшим отступом от левого и правого краев страницы (по умолчанию отступ равен 40px). Перед цитатой и после нее браузер оставляет по одной пустой строке. Атрибут cite предназначен для указания URL-адреса цитируемого документа. Этот атрибут не влияет на отображение цитаты и носит справочный характер.
<Q> Текст короткой цитаты </Q>
Тег применяется для форматирования коротких цитат. Содержимое элемента отображается без разрыва строки.
<CITE> Текст цитаты </CITE>
Цитаты, оформленные с помощью этого элемента, выделяются курсивным шрифтом.
Элемент <ADDRESS>. Используется для размещения в документе контактной информации. Элемент представляет собой блок, содержимое которого отображается курсивом и внутрь которого можно помещать другие элементы, например, разрывы строк, рисунки, гиперссылки и т.д., но нельзя вставлять блоки (разделы, списки, абзацы).
Формат элемента:
<ADDRESS>
Содержимое
</ADDRESS>
Пример:
<ADDRESS>
Екатерина Семенова <BR>
Ведущий менеджер
Телефон 123-123-123
<A href=”URL”>realiz@kdk. com</A>
</ADDRESS>
Атрибуты тега <BODY>. Общий формат записи тега <BODY> со всеми допустимыми атрибутами имеет вид:
<BODY background=”URL”
bgcolor=”значение1”
text=”значение2”
link=”значение3”
vlink=”значение4”
alink=”значение5”>
тело документа HTML
</BODY>
Атрибут background позволяет поместить на web-страницу фоновый рисунок, записав в качестве параметра атрибута URL этого рисунка. URL можно задавать либо в виде полного адреса Интернета (например, "http: // www. server. ru/images/имя_файла. gif"), либо в виде сокращенного адреса с указанием пути к директории на текущем сервере, в которой хранится данное изображение (например, ". . /images/имя_файла. gif”). Допускается просто указывать имя графического файла, если он хранится в той же директории, что и использующий его файл HTML. Данное изображение может иметь любой размер, поскольку при интерпретации кода оно многократно повторяется, заполняя все доступное пространство в окне броузера.
Атрибут text позволяет задать цвет текста для всего документа в целом. Однако он может быть изменен в определенном участке текста путем использования команды <FONT> с атрибутом color.
Атрибут bgcolor используется для задания фонового цвета всему документу. Атрибуты bgcolor и background не исключают друг друга, однако у последнего имеется приоритет. Это означает, что в случае, когда заданы оба эти атрибута, сначала выполняется заливка web-страницы цветом, назначенным в атрибуте bgcolor, поверх которой размещается изображение, заданное атрибутом background.
Атрибут link задает цвет, которым отображается непосещенная гиперссылка, то есть ссылка, к которой посетитель данного web-сайта еще не обращался. По умолчанию ей присваивается значение "blue" (#0000FF). В свою очередь, атрибут vlink указывает на цвет посещенной ссылки, значение которой по умолчанию - "purple" (#800080).
Атрибут alink определяет цвет гиперссылки в момент нажатия. По умолчанию данный атрибут также имеет значение "purple".
Пример использования тега <BODY> со всеми допустимыми атрибутами:
<BODY
background=http: // www. myserver. com/1mages/back. jpg
bgcolor="#000000"
text="#FFFFFF"
link="#008000"
vlink="#800080"
alink="#FF0000">
Тело документа HTML
</BODY>
Применение многоязычного текста. Указание языка, на котором составлен документ или его фрагмент выполняется атрибутом lang. В качестве значения этого атрибута представляется код языка (en - английский, en-US - английский США, de - немецкий, ru - русский, uk - украинский). Например,
<HTML lang=”de”> - документ составлен на немецком языке,
<Q lang=”uk”> - цитата на украинском.
Направление чтения текста. Задается атрибутом dir, принимающим значения: ltr - слева направо, rtl - справа налево. Атрибут задается для текстов на арабском языке или иврите.
3.4 Разделы, заголовки и горизонтальные линии
Разделы. Формат задания раздела:
<DIV>
HTML-код или текст
</DIV>
или
<SPAN>
HTML-код или текст
</SPAN>
Разделы используются для задания параметров текста и его расположения. К разделу можно применять любые атрибуты стиля. Теги <DIV> и <SPAN> отличаются тем, что при использовании тега <DIV> браузер производит перенос раздела на новую строку и перед ним автоматически устанавливается пустая строка. При использовании тега <SPAN> переноса не возникает.
Заголовки. Заголовки позволяют разделить web-страницу на логически законченные блоки и помогают ориентироваться в содержимом документа.
Спецификация HTML позволяет программисту использовать шесть различных стилей, или, как их еще принято называть, логических уровней заголовков.
Для того чтобы отобразить заголовок на web-странице, необходимо использовать тег <Нn>, где n - целое число от 1 до 6, обозначающее номер уровня заголовка, причем самым верхним уровнем принято считать 1. Синтаксис записи этой команды:
<Нn аlign="параметр">
Текст заголовка
</Нn>
Атрибут align дает возможность web-мастеру определить расположение заголовка в окне браузера. Параметр этого атрибута может принимать одно из трех возможных значений:
right - позиционирование заголовка по правой границе документа;
left - позиционирование заголовка по левой границе документа;
center - позиционирование заголовка по центру документа.
По умолчанию заголовки выравниваются по левому краю страницы. Высоты заголовков относятся как 2: 1,5: 1,17: 1,33: 0,83: 0,67. Заголовки как блоковые элементы отделяются от текста пустыми строками.
Пример:
<Н1 align=”center”>
ДОБPO ПОЖАЛОВАТЬ НА МОЮ СТРАНИЧКУ!
</Н1>
Горизонтальные линии. Чтобы визуально отделить часть объектов документа от других, применяются горизонтальные линии. Горизонтальная линия - это графический элемент, имеющий длину, толщину и цвет.д.ля создания таких линий в HTML используется непарный тег <HR> (сокращение от Horizontal Ruler). В спецификации HTML для отображения вертикальных линий не предусмотрено специальных тегов.
Формат создание стандартной линии (по умолчанию стандартная линия занимает всю ширину окна браузера, а её толщина составляет 2px, верхняя часть линии несколько темнее нижней):
<HR>
Формат сплошной темной линии без тени:
<HR noshade>
Формат горизонтальной линии с указанием свойств:
<HR align=”значение”
width=”значение”
size=”значение”
color=”значение”>
Атрибут align задает выравнивание линии и может принимать значения center, left или right. По умолчанию линии выравниваются по центру страницы.
Атрибут width задает длину линии в пикселях или процентах. Например, тег <HR width=25> определяет горизонтальную линию шириной 25 пикселов. Если значение атрибута задается в процентах (ставится символ %), то ширина линии вычисляется относительно ширины окна, например <HR width=”25%”>. Задание длины линии в относительных единицах предпочтительнее.
Толщина линии задается атрибутом size. Значение этого атрибута задается в пикселах в диапазоне от 1 до 175. Присвоение больших значений игнорируется. По умолчание size=2px.
Цвет линии определяется атрибутом color.
4.Списки
Существуют 3 вида списков: маркированный (неупорядоченный), нумерованный (упорядоченный), список определений.
4.1 Маркированный список
Формат задания списка:
<UL tуре="параметр">
<LH>Заголовок списка</LH>
<LI>Содержимое 1 строки списка</LI>
<LI>Содержимое 2 строки списка </LI>
…
<LI> Содержимое n строки списка</LI>
</UL>
Атрибут type позволяет программисту управлять так называемым "буллет-стилем", то есть внешним видом и формой обозначающих каждое вхождение меток. Параметр этого атрибута может принимать одно из трех значений:
disc - метки отображаются в виде заполненных черным цветом окружностей;
circle - метки отображаются в виде полых окружностей;
square - метки отображаются в виде заполненных черным цветом квадратов.
По умолчанию, то есть в случае, когда в маркированном списке тег <UL> записывается без атрибутов, type="disc".
4.2 Нумерованный список
Нумерованный список позволяет отображать упорядоченную информацию, которая выводится на экран в виде обозначенного цифрами перечисления.
Формат задания списка:
<OL tуре=”параметр”
start=”значение”>
<LI>Содержимое 1 строки списка</LI>
<LI>Содержимое 2 строки списка </LI>
…
<LI> Содержимое n строки списка</LI>
</OL>
Атрибут type позволяет изменять буллет-стиль, то есть определять вид маркеров, которыми будут обозначаться составляющие список значения. В составе атрибута type можно использовать один из следующих параметров:
"1" - обычные арабские числа 1, 2, 3 и т.д.
"I" - римские цифры в заглавном регистре I, II, III, IV и т.д.
"i" - римские цифры в строчном регистре i, ii, iii и т.д.
"А" - символьная маркировка в заглавном регистре А, В, С и т.д.
"а" - символьная маркировка в строчном регистре а, b, с и т.д.
В НТМL возможно изменить порядок нумерации строк списка и порядок нумерации внутри списка.
Атрибут start позволяет задавать позицию, с которой следует начать маркировку. Например, если атрибут type задан как "I", а атрибут start - как "5", то нумерация начнется с цифры 5. Если же type имеет значение "А", а start - "D", то маркировка начнется с символа D.
Можно изменить нумерацию внутри списка, указав в теге <LI> атрибут value.
<LI value=значение> Содержимое 1 строки списка </LI>
По умолчанию значение атрибута type принимается как "I", нумерация начинается с первого элемента в каждом из типов маркировки.
4.3 Вложенные списки
Возможно создание так называемых вложенных списков, реализуемых посредством размещения одной пары тегов в другой, например, команд создания маркированного списка внутри нумерованного. Простая реализация вложенного списка имеет вид:
1. Вхождение 1
Вхождение 1-а
Вхождение 1-б
2. Вхождение 2
Вхождение 2-а
Вхождение 2-б
Такой список можно представить следующим набором команд:
<OL>
<LI> Вхождение 1
<UL>
<LI>Вхождение l-a</LI>
<LI>Вхождение 1-б</LI>
</UL>
</LI>
<LI> Вхождение 2
<UL>
<LI>Вхождение 2-a</LI>
<LI>Вхождение 2-б</LI>
</UL>
</LI>
</OL>
Тег <LI> может включать те же атрибуты, что и теги самих списков <UL> и <OL>. Если, например, вхождения маркированного списка отображаются принятым по умолчанию маркером disc, но одно из наиболее значимых по контексту вхождений программисту необходимо пометить маркером square, можно записать тег данного элемента следующим образом: <LI type=”square”>Вхождение</LI>. Аналогично, один из пунктов нумерованного арабскими цифрами списка можно пометить символьным маркером, записав соответствующий тег следующим образом: <LI type=”А”>Вхождение</LI>.
4.4 Списки определений
Эти списки представляют собой списки терминов вместе с их определениями, то есть они напоминают толковый словарь.
Формат записи списка:
<DL>
<DT> Тег, задающий определяемый термин </DT>
<DD>Тег, задающий определение термина</DD>
<DD> Тег, задающий определение термина </DD>
<DТ> Тег задающий определяемый термин </DT>
<DD> Тег, задающий определение термина </DD>
<DD> Тег, задающий определение термина </DD>
</DL>
Закрывающие теги для команд <DТ> и <DD> списка определений можно опустить. Данные теги могут использоваться и самостоятельно: <DT> для отображения терминов, выделяемых в тексте шрифтом, a <DD> - для их расшифровки, помеченной отступом. В этом случае наличие соответствующих закрывающих тегов обязательно.
5. Таблицы
5.1 Формат задания и общие параметры таблицы
Для создания таблиц применяется тег <TABLE>. Состав таблицы по строкам и ячейкам задается с помощью следующих элементов:
TR - элемент, формирующий отдельную строку;
TD - элемент, определяющий содержимое ячейки данных;
TH - элемент, задающий ячейку заголовка;
CAPTION - элемент названия таблицы.
Структура записи тега <TABLE> в общем виде следующая:
<TABLE аlign=”значение”
width=”значение”
height=”значение”
background=”URL”
bgcolor=”значение”
border=”целое число”
borderсolor=”значение”
borderсolordark=”значение”
borderсolorlight=”значение”
cellpadding=”целое число”
cellspacing=”целое число”
cols=”значение”
frame=”значение”
rules=”значение”>
<CAPTIONalign=”значение”
valign=”значение”>
Название таблицы
</CAPTION>
<TR align=”значение”
valign=”знaчeниe”
width=”значение”
height=”целое число”
bgcolor=”значение”
borderсolor=”значение”
borderсolordark=”значение”
borderсolorlight=”значение”>
<TH align=”значение”
valign=”знaчeниe”
width=”значение”
height=”целое число”
background=”URL”
bgcolor=”значение”
borderсolor=”значение”
borderсolordark=”значение”
borderсolorlight=”значение”
colspan=”целоe число”
rowspan=”целое число”
nowrap>
Ячейка заголовка таблицы
</TH>
</TR>
<TR>
<TDalign=”значение”
valign=”значение”
width=”значение”
height=”целое число”
background=”URL”
bgcolor=”значение”
borderсolor=”значение”
borderсolordark=”значение”
borderсolorlight=”значение”
colspan=”целоe число”
rowspan=”целое число”
nowrap>
Содержимое ячеек
</ТD>
</TR>
</TABLE>
Общие параметры таблицы определяются значениями атрибутов тега <TABLE>:
align - задает горизонтальное позиционирование всей таблицы в целом, может принимать значения left, right или center.
width определяет ширину всей таблицы и может принимать значение целого числа, если ширина таблицы указывается в пикселах, либо в процентах от ширины экрана пользователя. Если этот атрибут не задан, то он определяется на основе содержимого таблицы.
height устанавливает высоту таблицы.
background определяет изображение, которое будет использоваться в качестве фонового рисунка таблицы.
bgcolor устанавливает цвет фона таблицы.
border указывает на толщину рамки и пикселах. Если border=0, таблица становится "невидимой".
bordercolor устанавливает цвет рамки таблицы.
bordercolordark, bordercolorlight - используются для задания объемной границы таблицы. Такой эффект достигается за счет разных цветов верхней и нижней линий, образующих рамку. Атрибут bordercolordark определяет цвет затененной части рамки, bordercolorlight задает цвет освещенной рамки.
cellpadding определяет расстояние в пикселах между границей ячейки и её содержимым.
cellspacing задает расстояние между внешними границами ячеек в пикселах.
cols указывает количество столбцов в таблице.
frame определяют параметры внешних границ таблицы. Чтобы этот атрибут влиял на отображение рамок, должен быть установлен атрибут border с ненулевым значением. Атрибут frame может принимать следующие значения:
border (или box) - устанавливает все линии внешней рамки;
void - внешняя рамка не отображается;
above (или below) - выводит только верхнюю (или нижнюю) границу таблицы;
hsides - выводит только верхнюю и нижнюю линии рамки;
vsides - выводит только левую и правую линию рамки;
lhs - устанавливает только левую линию рамки;
rhs - устанавливает только правую линию рамки.
rules определяют параметры внутренних границ таблицы. Чтобы этот атрибут влияли на отображение рамок, должен быть установлен атрибут border с ненулевым значением. Атрибут rules может принимать следующие значения:
none - все внутренние линии не отображаются;
groups - отображает горизонтальные границы между группами строк и столбцов;
rows - определяет отображение только горизонтальных линий между строками;
cols - устанавливает отображение только вертикальных линий между столбцами;
all - все внутренние рамки отображаются.
5.2 Параметры заголовка, строк и ячеек таблицы. Параметры заголовка определяются следующими значениями атрибутов тега <CAPTION>:
align - определяет выравнивание названия относительно границ таблицы и может принимать значения: left (выравнивание по левой границе, название располагается над таблицей), right (выравнивание по правой границе, название располагается над таблицей), center или top (выравнивание по центру, название располагается над таблицей), bottom (выравнивание по центру, название располагается под таблицей).
valign - используется для выравнивания названия при размещении его над или под таблицей. Атрибут align не выполняет выравнивания названия вправо или влево при значениях top и bottom. Для такого выравнивания нужно применять оба атрибута valign и align: атрибут valign будет задавать расположение названия над или под таблицей, а атрибут align - определять его выравнивание по левой или правой границе таблицы.
Параметры строк таблицы задаются значениями атрибутов тега <TR>, а параметры ячеек - значениями атрибутов тегов <TD>, <TH>:
align - задает выравнивание содержимого ячейки по горизонтали и определяется значениями left, right, center.
valign - задает выравнивание содержимого ячейки по вертикали и определяется значениями top (по верхнему краю), bottom (по нижнему краю), middle (посредине), baseline (по базовой линии).
width задает ширину ячейки.
height устанавливает высоту ячеек таблицы. Если значение height меньше содержимого ячейки, этот параметр игнорируется.
background определяет изображение, которое будет использоваться в качестве фонового рисунка ячейки таблицы.
bgcolor устанавливает цвет фона ячейки таблицы.
bordercolor устанавливает цвет рамки ячеек таблицы.
bordercolordark, bordercolorlight - используются для задания объемной границы ячеек таблицы. Атрибут bordercolordark определяет цвет затененной части рамки, bordercolorlight задает цвет освещенной рамки.
colspan - устанавливает число ячеек, которые должны быть объединены в одну по горизонтали.
rowspan - устанавливает число ячеек, которые должны быть объединены в одну по вертикали.
nowrap - запрет переноса слов внутри ячейки. Текст отображается одной сплошной строкой.
5.3 Группирование строк и столбцов таблицы
Для удобства форматирования содержимого таблицы её удобно разбить на заголовочную, основную и нижнюю части. Группирование позволяет присваивать каждой группе элементов общие свойства (выравнивание, гарнитуру, размер шрифта и т.д.).
Группирование строк задается с помощью трёх тегов:
<THEAD>
Заголовочная часть таблицы
</THEAD>
<TBODY>
Основная часть таблицы
</TBODY>
<TFOOT>
Нижняя часть таблицы
</TFOOT>
В таблице может быть только один элемент TBODY и FOOT, но несколько элементов TBODY. Допустимыми атрибутами этих тегов являются:
align и valign - для горизонтального и вертикального выравнивания;
title - для формирования всплывающей подсказки;
lang и dir - для задания языка и направления чтения документа.
Для группирования элементов столбцов используется тег COLGROUP. Формат записи тега:
<COLGROUP span=значение
width=”значение”
align=”значение”
valign=”значение”>
Строки, для которых сгруппированы столбцы
</COLGROUP>
Значения атрибутов:
span -задает количество столбцов в группе;
width - задает ширину каждого столбца группы, её значение может задаваться в пикселах;
align и valign - для горизонтального и вертикального выравнивания.
5.4 Наследование свойств выравнивания
По отношению к элементу TABLE дочерними являются: TH, TD, THEAD, TFOOD, COL, COLGROUP. В каждом из них можно задать параметры выравнивания. Наследование свойств горизонтального выравнивания align наследуется с учетом приоритета (от высшего к низшему):
наиболее высоким приоритетом обладают атрибуты, установленные внутри символьных данных ячейки;
атрибуты тегов <TH> и <TD>;
атрибуты тегов группирования столбцов (COL, COLGROUP);
атрибуты элементов строки или групп строк (элементы TR, THEAD, TFOOT);
атрибуты тега <TABLE>;
атрибуты, установленные по умолчанию.
Свойства вертикального выравнивания (значения атрибута valign) для содержимого ячеек наследуется в том же порядке, что и свойства горизонтального выравнивания. Отличие состоит лишь в том, что значения этого атрибута в элементах стрик или групп строк (элементы TR, THEAD, TFOOT) имеют более высокий приоритет, чем значения в элементах группирования столбцов (элементы COL, COLGROUP).
Примеры задания таблиц
1. Простые таблицы
<TABLE align=center border=3>
<CAPTION align=center>
Самые знаменитые алмазы
</CAPTION>
<TR align=center>
<TH>Название</TH>
<TH>Страна</TH>
<TH>Год</TH>
<TH>Масса в каратах</TH>
</TR>
<TR>
<TD>Куллинан</TD>
<TD>Южная Африка</TD>
<TD>1905</TD>
<TD>3106</TD>
</TR>
<TR>
<TD>Эксцельсиор</TD>
<TD>Южная Африка</TD>
<TD>1893</TD>
<TD>971.5</TD>
</TR>
<TR>
<TD>Звезда Сьерра-Леоне</TD>
<TD>Западная Африка</TD>
<TD>1972</TD>
<TD>968.9</TD>
</TR>
</TABLE>
2. Объединение строк и столбцов таблицы.
<TABLE align=center border=3>
<CAPTION align=center>
Магазин предлагает учебники
</CAPTION>
<TR align=center>
<TH>Предмет</TH>
<TH>Раздел</TH>
<TH>Классы</TH>
</TR>
<TR>
<TD rowspan=4>Математика</TD>
<TD>Арифметика</TD>
<TD>1 - 4</TD>
</TR>
<TR>
<TD>Алгебра</TD>
<TD>5 - 11</TD>
</TR>
<TR>
<TD>Геометрия</TD>
<TD>7 - 11</TD>
</TR>
<TR>
<TD colspan=2>Количество наименований: 1090</TD>
</TR>
<TR>
<TD rowspan=3>Физика</TD>
<TD>Механика</TD>
<TD>5 - 7</TD>
</TR>
<TR>
<TD>Оптика</TD>
<TD>10 - 11</TD>
</TR>
<TR>
<TD colspan=2>Количество наименований: 457</TD>
</TR>
</TABLE>
3. Вложенные таблицы. Команды, управляющие созданием и отображением таблиц, допускают вложение одного тега <TABLE> внутрь другого. Эта особенность языка используется для представления "вложенных" таблиц.
<TABLE align=center border=3>
<CAPTION align=center>
Магазин предлагает учебники
</CAPTION>
<TR align=center>
<TH>Предмет</TH>
<TH>Раздел</TH>
<TH>Классы</TH>
</TR>
<TR>
<TD> Математика</TD>
<TD colspan=2>
<TABLE border=4>
<TR>
<TD>Арифметика</TD>
<TD>1 - 4</TD>
</TR>
<TR>
<TD>Алгебра</TD>
<TD>5 - 11</TD>
</TR>
<TR>
<TD>Геометрия</TD>
<TD>7 - 11</TD>
</TR>
<TR>
<TD colspan=2>
Количество наименований: 1090
</TD>
</TR>
</TABLE>
<TR>
<TD>Физика</TD>
<TD colspan=2>
<TABLE border=4>
<TR>
<TD>Механика</TD>
<TD>5 - 7</TD>
</TR>
<TR>
<TD>Оптика</TD>
<TD>10 - 11</TD>
</TR>
<TR>
<TD colspan=2>
Количество наименований: 457
</TD>
</TR>
</TABLE>
</TR>
</TABLE>
6. Гиперссылки
Ссылка представляет собой логическую связь одного фрагмента (элемента) документа с другим фрагментом в том же самом или в другом документе. Ссылка характеризуется двумя точками, называемыми закладками. Различают начальную и конечную закладки.
Начальная закладка устанавливается на конкретном HMTL-элементе и определяет точку, из которой задается ссылка. Начальные закладки можно размещать в тексте, таблицах, списках изображениях, фреймах. Начальная закладка выделяется на странице подчеркиванием и цветом.
Конечная закладка определяет точку назначения ссылки и может относиться не только к конкретному HTML-элементу, но и к программе или документу в целом.
В HTML различают внутренние и внешние гиперссылки. Внутренние ссылки осуществляют переход в пределах одного и того же документа. Внешние ссылки обеспечивают переходы к другим документам. Внешние ссылки и называют гиперссылками.
Текстовые гиперссылки можно разделить на четыре условных категории: ссылки на документы, ссылки на разделы, ссылки на адрес электронной почты, ссылки на файловые объекты.
6.1 Ссылки на документы
Для реализации простой гиперссылки на другую web-страницу можно использовать в html-документе тег <А>. Формат записи тега:
<А href="URL"
target=”параметр”
title=”альтернативный текст">
Текст гиперссылки
</А>
Атрибут href указывает на адрес страницы, с которой нужно установить гиперсвязь. Этот адрес может быть представлен как в виде полного URL (например, "http: // www. server. ru/page. htin1"), так и в виде сокращенного URL с указанием пути к искомой странице в пределах локального сервера (например, "/folder/page. html"). Если искомый документ расположен в одной директории с текущим, в качестве параметра атрибута href достаточно записать его название.
Атрибут target содержит директивы, описывающие правила открытия целевого документа в броузере, эти директивы выделяются в коде символом подчеркивания.
Значения атрибута target:
_self отображает открываемый по ссылке документ HTML в текущем окне броузера;
_blank отображает открываемый документ в новом окне;
_parent загружает страницу во фрейм-родитель, если фреймов нет - в текущее окно;
_top отменяет все фреймы и загружает страницу в полном окне, если фреймов нет - в текущем окне.
Атрибут title предназначен для создания так называемого альтернативного текста - всплывающей подсказки, появляющейся в небольшом прямоугольнике, если пользователь задержит курсор мыши над гиперссылкой на несколько секунд.
6.2 Ссылки на разделы
Иногда возникает необходимость разместить на web-странице гиперссылку не на другой документ, а на расположенный в пределах этой же страницы раздел или участок текста. При активизации подобной гиперссылки браузер "отматывает" экран таким образом, что искомый раздел или фраза оказываются в верхней его части. Процесс создания ссылки на раздел можно условно разделить на два этапа.
Первый заключается в подготовке так называемой "закладки" - специальной метки с уникальным в пределах данного документа именем, присваиваемым "закладке" посредством атрибута name. Для этого в том участке текста, где необходимо разместить метку, применяется следующая команда:
<А nаme="имя_закладки">
Ключевое слово или заголовок раздела
</А>
Второй этап - создание самой ссылки при помощи команды:
<А hrеf="#имя_закладки">Текст ссылки</А>
Для задания имени "закладки" лучше использовать латинские символы. При вызове раздела посредством гиперссылки имя "закладки" предваряется символом "#".
Если нужно разместить ссылку на раздел какого-либо другого документа, описанный выше алгоритм в целом сохраняется, за исключением того, что в вызывающем теге перед именем "закладки" указывается URL документа. В этом случае рекомендуется также использовать атрибут target с параметром _blank. Подобная команда в обобщенном виде будет выглядеть следующим образом:
<А href=document. htm#имя_закладки
target="_blank">
Текст ссылки
</А>
6.3 Ссылки на адрес электронной почты
При активизации такой ссылки автоматически запускается почтовая программа и на экране формируется уже готовый к отправке бланк электронного письма с заполненным адресным полем и иногда полем Subject. Ссылка на адрес электронной почты имеет формат:
<А href=”mailto: user-l@server. ru? cc=user-2@server. ru,user-3@server. ru&subject=Тема_письма”>
Текст ссылки
</А>
Директива mailto: указывает на основной адрес электронной почты, куда следует отправлять письмо. В минимальной записи атрибута href при реализации гиперссылки на адрес электронной почты можно указать только эту директиву и какой-либо адрес e-mail.
Функция позволяет определить адреса пользователей, которым будет отправлена копия сообщения. Если таких адресов больше одного, они записываются подряд через запятую без пробелов.
C помощью функции &subject можно задать тему отсылаемого сообщения. Пример:
<А href=”mailto: ivanov@gsu. unibel. by&subject=Привет”>
Жду писем!
</А>
6.4 Ссылки на файловые объекты
Гиперссылка на файловый объект подразумевает организацию гиперсвязи документа HTML с каким-либо файлом, хранящимся на сервере, например архивом. При нажатии мышью на такой гиперссылке автоматически открывается сессия загрузки данного файла с удаленного сайта на локальный пользовательский компьютер. Формат ссылки:
<А href="http: // www. myserver. com/files/archive. zip">
Teкст гиперссылки
</А>
Иногда для реализации гиперсвязи с файловым объектом в записи URL этого объекта используется префикс "file: // ", однако такой подход применяется в основном для организации ссылок на файловый объект, расположенный на локальном компьютере. Если загрузку файла планируется осуществлять по протоколу FTP, используйте префикс "ftp: // ". Если искомый файл расположен в той же директории, что и вызывающий его документ, в качестве значения атрибута href можно просто указать его имя.
7. Графика в web-дизайне
Графические компоненты web-страниц по назначению можно условно разделить на три категории: иллюстративная графика, включая дополняющие текст фотографии, пояснительные рисунки, чертежи и схемы, функциональная графика, представляющая собой элементы управления сайтом (кнопки навигации, счетчики и элементы интерактивных форм) и, декоративная графика - элементы дизайна страницы, включенные в нее "для красоты" и не несущие информационной нагрузки (фоновые рисунки, линии-разделители, выполненные в виде графических файлов заголовки и т.д.).
7.1 Сетевые графические форматы
Наиболее популярными форматами графических изображений являются GIF и JPEG. В этих форматах хранится 90% всей графики, представленной Интернете. В них заложены различные алгоритмы сжатия изображения с потерей качества, благодаря использованию которых удается значительно уменьшить размер целевого файла.
Стандарт GIF (Graphic Interchange Format, формат обмена графическими данными) создан в 1987 году. Он позволяет значительно сокращать объем итогового графического файла по сравнению с исходным изображением за счет смешения сходных оттенков в один. Если, например, в составе рисунка имеется участок, состоящий из нескольких сходных полутонов, к примеру, голубого, светло-голубого и темно-голубого цвета, они будут кодированы одним оттенком - голубым. Информация об изображении в файле стандарта GIF записывается построчно, то есть представляет собой массив описаний строк высотой в один пиксел. Данный формат оперирует фиксированной, так называемой индексированной палитрой, число цветов в которой не превышает 256. Поэтому стандарт GIF используется в документах HTML только для отображения так называемой бизнес-графики: диаграмм, логотипов, кнопок, разделительных линий, других элементов оформления страницы (т.е. для рисованных изображений). Для размещения на web-сайте фотографий, репродукций картин и изображений с большим количеством цветов и цветовых переходов используется стандарт JPEG.
Одном из свойств стандарта GIF является его особенность, названная разработчиками "interlace", или, "черезстрочность". Она позволяет загружать картинку с сервера в клиентский браузер не целиком, а частями следующим образом: сначала на экране отображаются первая, пятая и десятая строки, составляющие изображение, затем - вторая, шестая и одиннадцатая и т.д. Таким образом, для пользователя создается иллюзия постепенной загрузки графического элемента: картинка как бы медленно "проявляется" на странице.
В 1989 году компания CompuServe выпустила новую версию этого графического формата, получившую название GIF89a. Данная модификация включает в себя еще две особенности. Первая называется "transparancy" и подразумевает создание для изображения прозрачного фона методом сохранения вместе с файлом так называемого альфа-канала, представляющего собой маску прозрачности рисунка. Цвета, помеченные в альфа-канале как прозрачные, станут невидимы в браузерах и большинстве других программ, предназначенных для просмотра изображений. Эта функция необходима, например, при размещении картинок неправильной геометрической формы на странице со сложным фоновым рисунком, когда корректно "подогнать" части изображений друг к другу не представляется возможным. Убрать ненужный фон из файла GIF можно встроенной процедурой графического редактора Adobe Photoshop.
Другая особенность стандарта GIF89a заключается в том, что этот формат позволяет сохранять в файле с одним физическим заголовком несколько разных изображений, демонстрируя их на экране последовательно одно за другим, причем с возможностью специфицировать порядок их чередования и временной интервал между сменами кадра. Именно на этом принципе построена GIF-анимация.
JPEG (Joint Photographic Experts Group, объединенная группа экспертов в области фотографии) - графический стандарт, созданный на основе одноименного алгоритма сжатия, изображений с потерей качества, кодирующего не идентичные элементы, а межпиксельные интервалы.
Механизм сжатия изображения в файл формата JPEG. Первой ступенью компрессии является преобразование изображения в цветовой образ LAB, раскладывающий картинку на три независимых канала, один из которых (Lightness) выделен для сохранения значений интенсивности цветов, а два других (А и В) - для запоминания непосредственно цветовой информации. Причем данные о цветах сохраняются в виде шкалы, организованной но принципу непрерывного спектра. Вторя ступень - собственно компрессия; из получившейся цветовой модели удаляются приблизительно три четверти информации о цвете, затем образ дробится на участки размером 8х8 точек, и преобразуется в числовой массив данных. Заголовок каждого блока описывает доминирующий цвет участка, остальная информация - менее заметные оттенки. На третьей ступени сжатия из массива данных удаляется определенная часть информации, описывающей второстепенные оттенки, причем количество изымаемых данных зависит от выбранного пользователем качества результирующего изображения. И наконец, готовый файл сжимается согласно алгоритму Хаффмана, который предусматривает замену наиболее часто встречающихся в массиве данных знаков более компактной двухбитной кодировкой. Декомпрессия файла JPEG происходит в обратном порядке.
JPEG оптимален для передачи фотографических изображений, а также картинок с большим количеством полутонов и цветовых переходов. Максимальное число цветов, которое может содержать изображение в формате JPEG, достигает 16 миллионов.
Существует несколько разновидностей стандарта JPEG. Формат JPEG Baseline Optimized основан на более совершенном алгоритме компрессии изображений. Недостатком данной реализации JPEG является то, что она не распознается целым рядом часто используемых приложений. Progressive JPEG был оптимизирован специально для представления графики во Всемирной сети, изображения в этом формате сжимаются чуть лучше, чем в стандартном JPEG, но хуже, чем в JPEG Baseline Optimized. Отличительная особенность Progressive JPEG - возможность сохранять графику в чересстрочном режиме, как это реализовано в стандарте GIF.
PNG (Portable Network Graphics, портативная сетевая графика), пользователи придумали этой аббревиатуре иную расшифровку: Picture is Not GIF. PNG поддерживает interlacing (черезстрочность) не только по горизонтали, но и по вертикали. Палитра PNG позволяет создавать изображения с глубиной цвета до 48 бит, а также поддерживает альфа-канал, но состоит он не из одного уровня, а из 254 уровней для каждого элемента изображения, с диапазоном прозрачности от 0 до 99%. Благодаря этому дизайнер получил возможность создавать картинки с переменной прозрачностью, например, логотипы, фон которых плавно сливается с фоновым цветом html-документа, каким бы тот ни был. Изображения PNG содержат так называемый блок описания гамма-коррекции. Под переменной "гамма" в данном случае подразумевается некая величина, выражающая зависимость яркости свечения каждой точки экрана пользователя от напряжения на электродах кинескопа, которое берется из файлов управления видеоподсистемой компьютера. Таким образом, при открытии изображения, созданного с помощью IBM-совместимой машины, на компьютере другого производителя, например на Apple Macintosh, в яркость цветопередачи вводится соответствующая поправка, и картинка отображается совершенно идентично на разных типах оборудования. Этот формат поддерживают броузеры Microsoft Internet Explorer, начиная с версии 4.0, и Netscape Communicator версий 4.04 и выше.
Оптимизация графических изображений. При сохранении изображений GIF и JPEG на диск в файлы записывается определенное количество "лишних" данных, таких, например, как невидимые текстовые комментарии, ссылки на разработчиков стандарта и соответствующего программного обеспечения и т.д. Все эти дополнения увеличивают физический размер файла и не несут никакой полезной нагрузки. Чтобы сократить время загрузки иллюстраций в клиентский броузер, используют специальные методы оптимизации изображений с использованием специальных программ - оптимизаторов графики.
7.2 Включение графики в web-страницу
Включение графики в html-документ осуществляется с использованием команды <IMG>, синтаксис которой в общем виде записывается следующим образом:
<IMG src=”URL”
аlign=”значение”
border=”значение”
width=”значение”
height=”значение”
alt=”текст”
hspace=”значение”
vspace=”значение”
ismap>
В качестве параметра атрибута src указывается путь к изображению в виде либо полного URL (например, http: // www. mys1te. ru/images/picture. jpg), либо сокращенного URL с указанием пути к изображению на локальном сервере (например,. . /Images/picture. jpg).
С помощью атрибута align картинка позиционируется в документе HTML. Этот атрибут может принимать значения:
right - изображение выравнивается по правому краю,
left - изображение выравнивается по левому краю,
center - изображение выравнивается по центру,
texttop или top - изображение совмещается верхним краем с верхней границей ячейки таблицы или с верхней границей текстовой строки, в которой размещена картинка,
absbottom или bottom - изображение совмещается нижним краем с нижней границей ячейки таблицы или текстовой строки,
absmiddle или middle - центр изображения выравнивается по основной строке, либо оно размещается в середине табличной ячейки,
baseline - изображение выравнивается по условной "базовой линии". Применение этого параметра рекомендуется в случае, когда web-мастер размещает несколько рисунков или несколько фрагментов одного рисунка в разных ячейках строки таблицы.
Атрибут border управляет толщиной синей рамки, в которую заключается изображение, включенное в тег <А>, при превращении его в гиперссылку. В большинстве случаев эта рамка портит дизайн web-страницы, и чтобы избавиться от нее, достаточно установить значение border равным нулю.
В качестве параметров атрибутов width и height указывают ширину и высоту интегрируемого в документ HTML графического изображения в пикселах.
Атрибут alt содержит альтернативный текст, который отображается вместо картинки в браузерах, не поддерживающих графику, а также в случае, если поддержка графики отключена пользователем. Этот же текст выводится в виде всплывающей "подсказки", если пользователь задержит на изображении курсор мыши.
Атрибуты hspace и vspace задают горизонтальные и вертикальные отступы от изображения в пикселах, которые необходимы, например, в случае, когда картинка помещается на web-странице рядом с текстом. hspace определяет величину незаполненного пространства справа и слева от картинки, vspace соответственно сверху и снизу.
Атрибут ismap говорит о том, что рисунок является серверной картой-изображением. Карты-изображения позволяют привязывать ссылки к разным областям одного изображения.
Пример применения тега <IMG>:
<IMG src=”/images/sunset. ipg”
align=”CENTER”
width=”325”
height=”215”
аlt=”Красивый закат на берегу Карибского моря”>
7.3 Изображения ссылки
Для того чтобы превратить интегрированное в html-документ изображение в гиперссылку, необходимо воспользоваться комбинацией тегов <А> и <IMG>, записав ее следующим образом:
<А href=”URL документа, на который организуется ссылка”>
<IMG src=”URL изображения”
align=”значение”
width=”значение”
hеight=”значение”
alt=”альтернативный текст”
bоrder=”значение”>
</А>
Пример кода HTML, позволяющего использовать изображение в качестве гиперссылки:
<А href=”/hobbie/index. htm1”>
<IMG src=”/mages/hobbie. jpg”
align=”BASELINE”
width=”315”
height=”226”
alt=”Тематический раздел 'Мои увлечения'”
border=”0”>
</A>
7.4 Карты ссылок
Карта ссылок (image map) представляет собой графическое изображение, разбитое на фрагменты, причем каждый фрагмент является одновременно гиперссылкой. Для задания карты ссылок необходимо:
1. Задать изображение карты с указанием того, что это изображение представляет собой карту, а не простой рисунок.
2. Разбить изображение на отдельные фрагменты и составить их описание.
3. Описать каждый фрагмент.
Графические карты создаются с помощью тега <МАР>. Элементы <МАР> динамически связаны с изображениями, вызываемыми директивой <IMG>, и в общем виде описываются следующим образом:
<МАР name=”имя карты”>
<AREA href=”URL”
shаре=”параметр”
coords=”x1, y1, x2, y2”
аlt=”альтернативный текст”
target=”параметр”
nohref>
</МАР>
Атрибут name тега <МАР> определяет уникальное имя карты, записываемое латинскими символами. При задании имени карты необходимо соблюдать регистр.
Тег <AREA> определяет непосредственно активную область изображения. Атрибут href указывает на адрес документа, вызываемого при нажатии кнопки мыши над данным участком изображения.
Атрибут alt определяет всплывающую подсказку при наведении курсора мыши на данный элемент.
Атрибут shape управляет формой активной области и может принимать одно из трех значений: rect - прямоугольник, circle - круг или poly - многоугольник.
Атрибут coords позволяет определить относительные координаты вершин активной области. Возможные значения данного атрибута:
|
Значение shape |
Синтаксис записи coords |
Значения параметров coords |
|
|
shape=rect |
coords=”xl,yl,x2,y2” |
x1 и yl - координаты левого верхнего угла фигуры, x2 и y2 - правого нижнего |
|
|
shape=circle |
coords="x,y,r" |
х и y - координаты центра окружности, r - ее радиус в пикселах |
|
|
shape=poly |
coords="x1,y1,x2,y2, x3,y3,... xn,yn,x1,y1" |
x1, y1... xn, yn - координаты вершин многоугольника |
Значения координат активной области отсчитываются в пикселах по длине и ширине картинки от левого верхнего угла изображения, принимаемого за точку с координатами 0,0. То есть, значение х возрастает справа налево, а значение у - сверху вниз. Координаты х и у могут быть также заданы в процентах от реального размера изображения, например: shape="rect" coords= "0,0,50%,50%". Если несколько активных областей одного изображения перекрывают друг друга, область, описанная тегом <AREA> первой, имеет приоритет.
Значения атрибута target такие же, как и у тега <A>.
Необязательный атрибут nohref определяет неактивные участки карты и исключает переходы при щелчке мышью по данному фрагменту.
Подобные документы
Понятие об html. Структура файла в формате html. Отличительный признак html-документа. Гипертекстовые ссылки. Создание документов в стандарте html. Заголовки. Форматирование текста и изменение стилей. Фреймы.
реферат [23,7 K], добавлен 17.08.2007Структура HTML–документа. Синтаксис записи тега. Обозначение цветов в шестнадцатеричной системе счисления. Формат задания и параметры таблицы в документе, параметры её заголовка, строк и ячеек, группирование столбцов. Наследование свойств выравнивания.
курсовая работа [318,8 K], добавлен 03.01.2014Специальные разметочные указатели (теги) языка HTML. Основные правила написания тегов. Структура HTML-файлов. Внесение изменений и способы обновления Web-сайта. Необходимые атрибуты для создания на Web-странице бегущей строки и вставки рисунков.
презентация [439,3 K], добавлен 29.01.2014Язык разметки гипертекстовых страниц HTML. Обеспечение доступности Web-страницы, представление текста и графики. Основные правила и этапы создания сайта, выбор структуры страницы. Оценка экономической целесообразности использования HTML-редакторов.
дипломная работа [86,7 K], добавлен 25.03.2013Общие принципы создания Web-узла. Особенности его оформления, структуры, сочетание графики и текста. Варианты размещения Web-узла в Internet, роль правильного выбора провайдера. История развития HTML. Принципы гипертекстовой разметки. Группы тегов НТМL.
лекция [35,9 K], добавлен 07.02.2010Определение понятия гипертекста. Основные части документа SGML. История создания стандартного языка разметки документов HTML. Отличия синтаксиса XHTML от HTML. RSS - семейство XML-форматов для описания лент новостей. Применение языка разметки KML.
презентация [4,3 M], добавлен 15.02.2014Концептуальное проектирование сайта по онлайн-продаже кофе, его древовидная логическая структура страниц. Описание языка гипертекстовой разметки сайта HTML, особенности отображения HTML-тегов в браузерах. Создание формы заказа для онлайн-торговли.
курсовая работа [2,2 M], добавлен 16.04.2017Изучение тегов для создания списков и таблиц в HTML, основных атрибутов тегов. Практические навыки создания списков и таблиц в HTML-документах. Нумерованные, маркированные и вложенные списки, список определений. Выравнивание данных в ячейках таблицы.
контрольная работа [322,1 K], добавлен 09.08.2014Форматирование текста с помощью HTML. Задание цвета на веб-странице. Задание размера шрифта. Физическое и логическое форматирование символов. Вставка специальных символов. Удобочитаемость, содержание и форма шрифта. Подбор шрифта и верстка текста.
курсовая работа [1,3 M], добавлен 01.10.2014Работа с HTML-редактором Adobe Dreamweaver. Этапы и правила построения заглавной страницы сайта, форматирования HTML-страниц, создания гипертекстовых ссылок, создания и форматирования таблиц. Использование графических материалов при разработке сайта.
методичка [1,9 M], добавлен 06.07.2011
