Основы языка HTML
Синтаксис HTML-тегов. Структура HTML-документа. Раздел HEAD и BODY. Коды HTML-символов. Форматирование текста: символов, абзацев. Размещения рисунков, таблиц. Связь между HTML-документами и фрагментами документов. Синтаксис атрибута и карта гиперссылок.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | реферат |
| Язык | русский |
| Дата добавления | 14.01.2014 |
| Размер файла | 36,5 K |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Размещено на http://www.allbest.ru/
Министерство образования и науки Российской Федерации
АНО ВПО «Дальневосточный институт международных отношений»
Кафедра экономики бухгалтерского учета и прикладной информатики
Специальность 080105. 65 «Мировая экономика»
Реферат
по дисциплине «Информатика и интернет-технологии»
на тему: «Основы языка HTML»
Выполнил: студент 3 курса
группы____________________
№ з/к______________________
Фамилия___________________
Имя_______________________
Отчество___________________
Проверил:
___________________________
Хабаровск 2013 г.
Введение
Интернет представляет собой всемирную сеть, объединяющую компьютерные сети по всему миру на базе единых стандартных соглашений (протоколов) о способах обмена информацией и единой системой адресации.
К настоящему времени сеть Интернет получила беспрецедентное распространение. По оценкам экспертов Интернет объединяет более 100 миллионов компьютеров. Услугами Интернет пользуется свыше 300 миллионов человек в 170 странах мира.
С функциональной точки зрения Интернет представляет собой:
?недорогое быстродействующее средство общения между абонентами по всему миру;
?не имеющее аналогов хранилище информации по любым областям знаний;
?новую перспективную среду для деятельности.
Влияние Интернет распространяется не только на технологическую область компьютерных коммуникаций, оно имеет также социальную направленность и пронизывает все общество по мере того, как все более широкое распространение получают оперативные средства получения знаний, электронной коммерции.
Самым распространенным и востребованным сегодня является такой сервис Интернет, как WWW (WorldWideWeb ? всемирная паутина). Информация в WWW представлена в виде так называемых гипертекстовых (или, более широко, гипермедийных) документов, которые могут содержать отформатированный текст, графику, аудио- и видеофрагменты. Основной особенностью гипертекстовых документов является наличие активных зон, чувствительных к щелчку мыши. Активными могут быть фрагменты текста, целые изображения и их части; щелчок по активной зоне вызывает загрузку связанного с этой зоной (целевого) документа.
Чтобы научиться размещать материалы в Интернет, прежде всего необходимо познакомиться с языком разметки гипертекста HTML (Hyper Text Markup Language)
1. Основы языка HTML
Язык разметки гипертекстовых документов HTML представляет собой совокупность команд, называемых тегами (от английского tag). Встречающиеся в тексте документа HTML-теги интерпретируются браузером при отображении документа.
Просмотр HTML-документов осуществляется с помощью программ-браузеров (от английского browser), которые отображают документ в соответствии с HTML-разметкой и обеспечивают навигацию по гиперссылкам. Наиболее распространенными являются браузеры Microsoft Internet Explorer фирмы Microsoft Corporation и Netscape Navigator фирмы Netscape Communications Corporation.
Поскольку HTML-документ представляет собой текстовый файл, его можно подготовить в простейшем текстовом редакторе, например, в блокноте (Notepad), но это очень трудоемко. Чаще используют специализированные редакторы, предназначенные именно для подготовки HTML-документов, которые позволяют вставлять теги с помощью кнопок панелей инструментов либо команд меню, и задавать атрибуты тегов в диалоговых окнах, например, Macromedia Dreamweaver, Microsoft Front Page, Home Site и др.
HTML-документ может быть получен преобразованием в HTML-формат, например, из формата документов пакета Microsoft Office. Надо отметить, что при таком преобразовании исходный текст HTML-документа получается крайне избыточным и нуждается в коррекции. Значительно эффективнее пользоваться специальными HTML - редакторами.
1.1 Синтаксис HTML-тегов
HTML-тег записывается в угловых скобках и состоит из имени, за которым может следовать список атрибутов (для большинства тегов необязательный). Имена и атрибуты представляют собой английские слова и аббревиатуры.
Теги условно можно разделить на две группы:
- парные теги (называемые также контейнерами) имеют два компонента: открывающий (начальный) и закрывающий (конечный) ; закрывающий компонент имеет то же название, но при записи перед названием ставится косая черта (символ /). Между открывающим и закрывающим компонентами может располагаться текст документа и другие теги. Фрагмент документа, расположенный между открывающим и закрывающим элементом тега-контейнера форматируется браузером согласно смыслу тега. Например, текст, расположенный между тегами и, будет выведен полужирным начертанием (название тега - от английского bold). Парные теги могут быть вложены друг в друга, но не должны пересекаться.
- непарные теги (называемые также автономными) не имеют конечного компонента. При их интерпретации в отображаемый документ вставляется тот или иной объект. Например, тег <IMG SRC=«pict. gif»>, встречающийся в тексте HTML-документа, вызывает вставку графического изображения из файла pict. gif.
Атрибуты в списке отделяются друг от друга одним или несколькими пробелами, либо символами табуляции, либо символами перевода строки; последовательность записи атрибутов несущественна. Подавляющее большинство атрибутов употребляются в виде пары название атрибута = значение атрибута. В случае, когда значение атрибута представляет собой более чем одно слово либо одно число, его следует заключить в одинарные или двойные кавычки. В закрывающих компонентах тегов атрибуты не указываются.
2. Структура HTML-документа
HTML-документ заключается в теги. Между этими тегами располагаются две секции: секция заголовка и секция тела документа. Секция заголовка содержит описание параметров, используемых при отображении документа, но не отражающихся непосредственно в окне браузера. Секция тела документа содержит основной текст, предназначенный для отображения браузером, теги форматирования, размещения рисунков, таблиц, гиперссылок и т. д.
HTML-код простейшего документа, пригодного для размещений в Интернет, выглядит так:
<TITLE> Наша первая страничка TITLE>
Данный код может быть набран в текстовом редакторе Блокнот и сохранен как файл с расширением. htm или. html? в этом случай документ откроется в браузере, установленном на вашем компьютере по умолчанию. Браузер отобразит этот документ, выведя в своем окне строку «Самый простой HTML-документ», расположенную в секции тела документа. Фраза «Наша первая страничка» будет отображаться в строке заголовка браузера.
2.1 Раздел HEAD
Секция заголовка обычно содержит теги, незаметные для пользователя, но тем не менее способные активно влиять не внешний вид документа.
|
Тег |
Назначение |
|
|
… |
Определяет имя всего документа. Имя, как правило, отображается в заголовке окна браузера. Данный элемент обязателен для любого HTML-документа и может быть указан не более одного раза. |
|
|
Указывает базовый адрес текущего документа (URL), который станет отправной точкой для расчета относительных адресов внутри документа. Элемент не имеет конечного тэга. Обязательно присутствие хотя бы одного из аргументов: HREF - определяет базовый адрес (URL) текущего документа. TARGET - определяет имя фрейма, которое будет использоваться в гиперссылках по умолчанию. Это может вам пригодиться, если вы хотите открывать все ссылки документа в другом фрейме. |
||
|
<STYLE TYPE=«text/css»> |
Используется для вставки в документ каскадных таблиц стилей (CSS ? Cascade Style Sheet). TYPE ? обязательный атрибут, значением которого, как правило, является «text/css». |
|
|
<МЕТА…> |
Элемент МЕТА используется для технического описания документа. С помощью этого элемента в заголовок документа внедряется дополнительная полезная информация, невидимая для пользователя, но порой просто незаменимая для правильной индексации вашей страницы роботами поисковых серверов. Элемент не имеет конечного тега. NAME - определяет имя мета-записи. Существует множество предопределенных имен, некоторые из которых вы можете увидеть в указанном ниже примере. CONTENT - присваивает значение мета-записи, определенной в параметре NAME. |
|
2.2 Раздел BODY
Этот раздел включает в себя основное содержание веб-страницы ? текст документа, изображения, таблицы и т. п. Элемент BODY должен встречаться в документе не более одного раза и может включать следующие атрибуты:
|
Синтаксис атрибута |
Назначение |
|
|
MARGINHEIGHT=число |
Определяет ширину (в пикселях) верхнего и нижнего полей документа. Работает только в браузерах Netscape |
|
|
TOPMARGIN= число |
Определяет ширину (в пикселях) верхнего и нижнего полей документа. Работает только в браузерах Internet Explorer |
|
|
MARGINWIDTH= число |
Определяет ширину (в пикселях) левого и правого полей документа. Работает только в браузерах Netscape |
|
|
LEFTMARGIN= число |
Определяет ширину (в пикселях) левого и правого полей документа. Работает только в браузерах Internet Explorer |
|
|
BACKGROUND= URL |
Определяет изображение для «заливки» фона (фонового рисунка). Значение задается в абсолютного или относительного адреса изображения (см. раздел Размещение рисунков) |
|
|
BGCOLOR=цвет |
Определяет цвет фона документа. MicrosoftInternetExplorerподдерживает 16 стандартных имен цветов (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow, white) Другим способом является использование кода цвета в виде шестиразрядного шестнадцатеричного числа, задающее интенсивность красной (первые две цифры), зеленой (следующие две цифры) и синей (последние две цифры) составляющей. Интенсивность каждой составляющей в шестнадцатеричной форме изменяется от 00 до FF. При задании цвета в качестве значения атрибута некоторого тега перед шестнадцатеричным числом ставится символ #. Например, запись COLOR=«#0000FF» означает синий цвет Несмотря на принципиальную возможность задать миллионы цветов, надо учитывать, что браузеры отображают лишь 256 цветов, причем у каждого браузера своя цветовая палитра. В этой палитре браузер подберет цвет, наиболее близкий к заданному |
|
|
TEXT=цвет |
Определяет цвет текста в документе |
|
|
LINK=цвет |
Определяет цвет гиперссылок в документе |
|
|
ALINK=цвет |
Определяет цвет подсветки гиперссылок в момент нажатия |
|
|
VLINK |
Определяет цвет гиперссылок на уже просмотренные документы |
|
2.3 Коды HTML символов
Для специальных символов в HTML-стандартах предусмотрен особый способ кодирования (с помощью escape-последовательностей или символьных объектов), который позволяет применять эти символы в необходимых позициях документа, не нарушая его структуры (это касается, например, символов <, >и &). Условное обозначение спецсимвола (escape-последовательность) начинается символом &, включает собственно имя спецсимвола и завершается точкой с запятой (например, « у условное обозначение для кавычки). Кроме того, вместо имени символа можно воспользоваться соответствующим ASCII-кодом (например, " у для кавычки).
Следует отметить, что разными броузерами коды и имена специальных символов (escape-последовательности) могут интерпретироваться несколько различным образом. На вид отображаемых символов также влияет выбранный для отображения шрифт и таблица символов (кодировка).
|
Название |
Символ |
ASCII |
Имя |
|
|
Табулятор |
	 |
|||
|
Перевод строки |

 |
|||
|
Возврат каретки |

 |
|||
|
Пробел |
  |
|||
|
Восклицательный знак |
! |
! |
||
|
Кавычка |
« |
" |
" |
|
|
Знак решетка |
# |
# |
||
|
Доллар |
$ |
$ |
||
|
Процент |
% |
% |
||
|
Амперсанд |
& |
& |
& |
|
|
Апостроф |
' |
' |
||
|
Скобка левая круглая |
( |
( |
||
|
Скобка правая круглая |
) |
) |
||
|
Звездочка |
* |
* |
||
|
Плюс |
+ |
+ |
||
|
Запятая |
, |
, |
||
|
Минус |
- |
- |
||
|
Точка |
. |
. |
||
|
Косой штрих |
/ |
/ |
||
|
Цифры |
0-9 |
0 -9 |
||
|
Двоеточие |
: |
: |
||
|
Точка с запятой |
; |
; |
||
|
Меньше |
< |
< |
||
|
Равно |
= |
= |
||
|
Больше |
> |
> |
||
|
Знак вопроса |
? |
? |
||
|
Знак обезьянка |
@ |
@ |
||
|
Прописные буквы |
A-Z |
A -Z |
||
|
Скобка квадратная левая |
[ |
[ |
||
|
Косой штрих с наклоном вправо |
\ |
\ |
||
|
Скобка квадратная правая |
] |
] |
||
|
Степень |
^ |
^ |
||
|
Знак подчеркивания |
_ |
_ |
||
|
Ударение |
` |
` |
||
|
Строчные буквы |
a-z |
a -z |
||
|
Фигурная скобка левая |
{ |
{ |
||
|
Вертикальный штрих |
| |
| |
||
|
Фигурная скобка правая |
} |
} |
||
|
Тильда |
~ |
~ |
||
|
Запятая |
‚ |
‚ |
||
|
Флорин |
ѓ |
ƒ |
||
|
Кавычка нижняя правая |
&; #132; |
„ |
||
|
Многоточие |
… |
… |
||
|
Крест |
† |
† |
||
|
Двойной крест |
‡ |
‡ |
||
|
Крышка |
€ |
ˆ |
||
|
Промилле |
‰ |
‰ |
||
|
Параграф |
Љ |
Š |
||
|
Символ меньше |
< |
‹ |
||
|
Большое ОЕ |
Њ |
Π|
||
|
Одинарная кавычка слева |
` |
‘ |
||
|
Одинарная кавычка справа |
' |
’ |
||
|
Кавычка слева |
“ |
“ |
||
|
Кавычка справа |
” |
” |
||
|
Крупная точка |
* |
• |
||
|
Короткий дефис |
- |
– |
||
|
Длинный дефис |
- |
— |
||
|
Тильда |
|
˜ |
||
|
Торговый знак |
™ |
™ |
® |
|
|
љ |
š |
|||
|
Символ больше |
> |
› |
||
|
Маленькое ое |
њ |
œ |
||
|
Большой Y-умлаут |
џ |
Ÿ |
||
|
Неразрывный пробел |
  |
|
||
|
Перевернутый восклицательный знак |
Ў |
¡ |
&ixcl; |
|
|
Цент |
ў |
¢ |
¢ |
|
|
Фунт |
Ј |
£ |
£ |
|
|
Валюта |
¤ |
¤ |
¤ |
|
|
Иена |
Ґ |
¥ |
¥ |
|
|
Прерванный штрих |
¦ |
¦ |
¦ |
|
|
Параграф/Раздел |
§ |
§ |
§ |
|
|
Точки умлаута |
Ё |
¨ |
¨ |
|
|
Копирайт |
© |
© |
© |
|
|
Порядковое числительное женского рода |
Є |
ª |
ª |
|
|
Французская кавычка слева |
« |
« |
« |
|
|
Не/Нет |
¬ |
¬ |
¬ |
|
|
Разрыв в месте переноса |
- |
­ |
­ |
|
|
Зарегистрированный торговый знак |
® |
® |
® |
|
|
Надчеркивание |
Ї |
¯ |
¯ |
|
|
Градус |
° |
° |
° |
|
|
Плюс-минус |
± |
± |
± |
|
|
Вторая степень |
І |
² |
² |
|
|
Третья степень |
і |
³ |
³ |
|
|
Маленькое а с ударением |
ґ |
´ |
&acuate; |
|
|
Мю |
µ |
µ |
µ |
|
|
Параграф |
¶ |
¶ |
¶ |
|
|
Средняя точка |
· |
· |
· |
|
|
Цедиль |
ё |
¸ |
¸ |
|
|
Первая степень |
№ |
¹ |
¹ |
|
|
Порядковое числительное мужского рода |
є |
º |
º |
|
|
Французская кавычка справа |
« |
» |
» |
|
|
Дробь ј |
ј |
¼ |
¼ |
|
|
Дробь Ѕ |
Ѕ |
½ |
½ |
|
|
Дробь ѕ |
ѕ |
¾ |
¾ |
|
|
Перевернутый вопросительный знак |
ї |
¿ |
¿ |
|
|
Большая А с ударением |
А |
À |
À |
|
|
Большая А с ударением |
Б |
Á |
Á |
|
|
Большая А с крышкой |
В |
 |
 |
|
|
Большая А с тильдой |
Г |
à |
à |
|
|
Большая А-умлаут |
Д |
Ä |
Ä |
|
|
Большая А с кружком |
Е |
Å |
Å |
|
|
Большое АЕ |
Ж |
Æ |
Æ |
|
|
Большая С цедил |
З |
Ç |
Ç |
|
|
Большая Е с ударением |
И |
È |
È |
|
|
Большая Е с ударением |
Й |
É |
É |
|
|
Большая Е с крышкой |
К |
Ê |
Ê |
|
|
Большая Е-умлаут |
Л |
Ë |
Ë |
|
|
Большая I с ударением |
М |
Ì |
Ì |
|
|
Большая I c крышкой |
О |
Î |
&Icirс; |
|
|
Большая I-умлаут |
П |
Ï |
Ï |
|
3. Форматирование текста
3.1 Форматирование символов
Все теги форматирования символов имеют как открывающий, так и закрывающий компонент и действуют на заключенные между ними текст.
Основным является тег... FONT>, обязательно использующийся с одним или несколькими атрибутами, изменяющими размер, цвет и гарнитуру шрифта:
|
Синтаксис атрибута |
Назначение |
|
|
SIZE = значение |
Размер задается либо в форме абсолютного значения (число от 1 до 7), либо относительно размера основного шрифта (в форме +n или -n). |
|
|
COLOR = цвет |
Цвет |
|
|
FACE = список шрифтов |
Гарнитуры для отображения текста; названия перечисляются в порядке предпочтения через запятую, например, FACE=«Verdana, Helvetica, Arial, Sans-Serif» Можно указывать и одну из гарнитур, но следует учитывать, что данный шрифт может быть не установлен на компьютере пользователя, и «экзотические» шрифты отображаться браузером не будут |
|
3.2 Форматирование абзацев
html тег форматирование символ
Текст выводится в окно браузера слово за словом, при достижении правой границы окна очередное слово автоматически переносится на новую строку. Даже если в коде страницы было введено несколько пробелов или текст записывался с новой строки, при просмотре в браузере эти действия отображены не будут. Поэтому чтобы вывести в тексте ряд последовательных пробелов или несколько пустых строк, приходится применять различные теги.
Тег (от английского break) разрывает текстовый поток и вставляет новую строку без образования нового абзаца. Несколько последовательных тегов интерпретируются как несколько пустых строк. Межстрочный интервал одинарный. Закрывающего компонента тег не имеет, как и атрибутов.
Тег (от английского paragraph) начинает абзац; новый абзац отделяется от предыдущего двойным межстрочным интервалом. Абзац пустым быть не может, то есть несколько последовательных тегов интерпретируются как один.
Закрывающий компонент не обязателен, так как предыдущий абзац заканчивается там, где начинается новый. Тег имеет необязательный атрибут ALIGN, указывающий на вид выравнивания абзаца, который может принимать значения LEFT, CENTER, RIGHT и JUSTIFY, задающие выравнивание соответственно по левому краю, центру, правому краю и по ширине.
Если закрывающий компонент опустить, то заданный тип выравнивания сохраняется до следующего тега, задающего выравнивание, или до конца документа.
HTML позволяет создавать форматировать абзацы как нумерованные или маркированные списки. Фрагмент текста, представляющий собой список, заключается в теги:
...
упорядоченный (нумерованный) список (от английского ordered list)
...
неупорядоченный (маркированный) список (от английского unordered list)
Каждый элемент упорядоченного или неупорядоченного списка заключается в теги... (от английского list item). При выводе текста каждый элемент списка будет располагаться с новой строки, обозначенной номером или маркером. Кроме того, у списка может быть заголовок, который задается тегом (от английского listheader). Закрывающие теги и не обязательны.
Многоуровневый список может быть организован посредством комбинации нумерованных и маркированных списков.
Абзацы можно оформить и в виде заголовков уровня (от n=1 до n=6), для этого используют теги вида <Hn>... n>. Заголовок первого уровня выводится наиболее крупным шрифтом.
4. Размещение рисунков
Изображения, которые демонстрируются браузером при просмотре веб-страницы, хранятся в отдельных файлах формата gif, jpg (jpeg) или png, а в коде страницы делается ссылка на нужный файл.
|
Обязательный атрибут: |
||
|
SRC = url |
Адрес графического файла (относительный или абсолютный) |
|
|
Основные необязательные атрибуты: |
||
|
ALT = текст |
Альтернативный текст, выводимый в режиме браузера без загрузки изображений (обязательно заключается в кавычки) |
|
|
BORDER = значение |
Толщина обрамляющей рамки в пикселях, 0 означает отсутствие рамки (по умолчанию) |
|
|
BORDERCOLOR = цвет |
Задает цвет обрамляющей рамки |
|
|
HEIGHT = значение |
Высота изображения в пикселях (по умолчанию оригинальная) либо в процентах от высоты окна браузера |
|
|
WIDTH = значение |
Ширина изображения в пикселях (по умолчанию оригинальная) либо в процентах от ширины окна браузера |
|
|
HSPACE = значение |
Свободное пространство слева и справа от изображения в пикселях |
|
|
VSPACE = значение |
Свободное пространство сверху и снизу от изображения в пикселях |
|
|
ALIGN = значение |
Выравнивание изображения по горизонтали. Если заданы значения LEFT либо RIGHT, изображение соответствующим образом будет выровнено по горизонтали, задание этих значений обеспечивает обтекание изображения текстом |
|
Рассмотрим подробнее абсолютный и относительный способы адресации файла.
Адресация в абсолютной форме используется при ссылках на ресурсы, находящиеся на других серверах. Универсальный адрес, определяющий местонахождение информационного ресурса, носит название URL (Uniform Resource Locator - унифицированный адрес ресурса). URL состоит из двух частей, разделенных двоеточием. Первая часть указывает на тип сетевого протокола, который зависит от типа ресурса. Например, если ресурс располагается на WWW-сервере, это протокол http. Вторая часть включает в себя имя компьютера (сервера) в доменной системе имен и (если требуется) путевое имя файла. При записи путевого имени названия каталогов разделяются прямой косой чертой (символ /), в именах файлов и каталоговразличаются прописные и строчные буквы, пробелы не допускаются. Вот примеры URL:
http: //www. vshu. kirov. ru/site/images/picture1. jpg
http: //195. 21. 123. 13: 8110
ftp: //everything. com/soft/prog. zip
mailto: Ivanov@hotmail. com
Последний URL, указывающий на протокол mailto и адрес электронной почты, не ссылается ни на какой информационный ресурс; это единственный тип URL, при записи которого не ставятся после двоеточия две косые черты.
Адресация рисунков в абсолютной форме при создании веб-сайта практически не используется.
Адресация в относительной форме используется при ссылках на ресурсы, находящиеся на том же сервере. При записи пути к файлу названия каталогов разделяются прямой косой чертой (символ /), переход по каталогам файловой системы на один уровень вверх обозначается двумя точками (символы..). Чтобы было понятнее, представим себе компьютер, например, с такой структурой каталогов, содержащих HTML-файлы:
SHAPE \* MERGEFORMAT
|
MySite |
|
|
Pages |
|
|
Images |
|
|
Page1. htm Page2. htm Pict1. jpg Pict2. jpg |
|
|
Index. htm Picture. jpg |
|
В этом случае возможны, например, такие варианты записи тега IMG:
?<IMGSRC=Picture. jpg> (изображение Picture. jpg располагается на страничкеIndex. htm)
?<IMGSRC=Images/Pict1. jpg> (изображение Pict1. jpg располагается на страничкеIndex. htm)
?<IMGSRC=.. /Picture. jpg> (изображение Picture. jpg располагается на страничкеPage1. htm)
?<IMGSRC=.. /Images/Pict1. jpg> (изображение Pict1. jpg располагается на страничкеPage1. htm)
Несмотря на то, что формально обязательным является только атрибут SRC, на практике необходимо указывать и альтернативный текст (атрибут ALT), так как многие работают с браузером в режиме без загрузки изображений.
Высоту и ширину области, в которой демонстрируется рисунок, задают при помощи атрибутов width и height в пикселях или в процентах к размеру экрана. В том случае, когда задается один из этих атрибутов, рисунок масштабируется таким образом, чтобы его высота или ширина соответствовали заданной. Второй размер устанавливается автоматически, в соответствующей пропорции. Применение только одного из атрибутов изменяет оба размера рисунка. Если задать явно оба атрибута, то рисунок будет масштабироваться по двум осям в соответствии с заданными размерами. Атрибуты height и width меняют не время загрузки изображения, а только его вид (размер) на экране.
5. Гиперссылки
Гиперссылкой называют объект (текст, изображение, фрагмент изображения), при щелчке мышью по которому происходит переход к новому документу или фрагменту документа. Именно гиперссылки позволяют организовать переходы между любыми размещенными в сети Интернет документами.
5.1 Текстовые гиперссылки
Связь между HTML-документами и фрагментами документов организуется с помощью тега... (от английского anchor - якорь).
Тег употребляется как для создания ссылки на другой документ, так и для ссылки на фрагмент документа.
|
Обязательный атрибут: |
||
|
HREF = url |
Адрес целевого документа (может быть представлен в абсолютной и относительной форме) |
|
|
Основные необязательные атрибуты: |
||
|
+ |
Помечает находящийся между <A> и A> фрагмент документа как возможный объект для ссылки. В качестве значения нужнолатиницей написать любое слово-указатель, уникальное для данного документа. Например, тег Раздел1 создает так называемую метку (закладку) для перехода к разделу 1. В этом случае можно ссылаться на помеченную область простым указанием ее имени после имени документа (перед именем метки ставится #). Так, <AHREF=«Index. html#part1»>К разделу 1A> отправит вас в раздел «part1» файла Index. html, а <AHREF=«#part2»> К разделу 2 A> ? в раздел «part2» текущего документа при условии, что в документе имеется соответствующая метка |
|
|
TARGET = «имя» |
Имя кадра (фрейма) или окна для вывода целевого документа. Этот атрибут используется только совместно с параметром HREF. В качестве значения необходимо задать либо имя одного из существующих фреймов, либо одно из следующих зарезервированных имен: _self - указывает, что определенный в параметре HREF документ должен отображаться в текущем фрейме; _parent - указывает, что документ должен отображаться во фрейме-родителе текущего фрейма (целиком занять окно браузера) ; _blank - указывает, что документ должен отображаться в новом окне |
|
|
TITLE=«текст» |
Выводит всплывающую подсказку при наведении указателя мыши на гиперссылку |
|
Текст и изображения, размещенные между тегами становятся активной зоной документа, чувствительной к щелчку мыши, который вызывает загрузку целевого документа. Текст гиперссылки выделяется подчеркиванием и цветами, указанными как значение атрибутов LINK, ALINK, VLINK тега (либо цветом по умолчанию).
5.2 Гиперссылки-картинки
Чтобы сделать гиперссылкой целое изображение, также применяется тег...., только вместо текста (или вместе с текстом) между <A> и A> располагается тег <IMG…> со всеми соответствующими атрибутами.
5.3 Карта гиперссылок
Тег позволяет сделать активной зоной текстовый фрагмент или изображение целиком; для того же, чтобы разные фрагменты одного изображения ссылались на разные целевые документы, придется использовать тег, реализующий изображение-карту.
У тега-контейнера единственным обязательным атрибутом является NAME, значением которого будет имя (например, NAME=«mymap», которое должно быть использовано при описании атрибута USEMAP тега IMG, описывающего изображение, призванного служить картой (при этом к имени карты приписывается слева # ? USEMAP =«#mymap»)
Внутри контейнера каждой чувствительной к перемещению мыши зоне изображения должен соответствовать тег с атрибутами:
|
Синтаксис атрибута |
Назначение |
|
|
COORDS = список |
Список через запятую координат активной зоны (зависит от типа заданной формы зоны) |
|
|
HREF = url |
Адрес целевого документа гиперссылки, связанного с указанной зоной |
|
|
SHAPE = форма |
Определяет форму активной зоны. Возможные значения этого атрибута: circle (окружность - задается координатами центра и радиусом в пикселях) ; rect (прямоугольник - задается координатами левого верхнего и правого нижнего угла) ; poly (многоугольник - задается координатами своих вершин) Координаты во всех случаях отсчитываются от верхнего левого угла изображения в пикселях, ось Х направлена вправо, ось Y? вниз. |
|
|
NOREF |
иногда бывает нужно указать, что данная зона (заданная атрибутом SHAPE и координатами COORDS) не является активной, реакции на щелчок мыши нет |
|
6. Таблицы
Таблицы в HTML-документах используются не столько для того, чтобы располагать данные в обрамленных ячейках, сколько с целью расположения фрагментов текста и изображений друг относительно друга.
Таблицы в HTML строятся построчно. Все табличные данные заключаются в теги
...
; описание каждого ряда ячеек (строк) заключается в теги... ; содержимое каждой ячейки заключается в теги... (обычные ячейки) или <TH>... H> (заголовки).
Ячейки таблицы могут содержать текст, изображения, вложенные таблицы и т. д. Не следует оставлять ячейки таблицы незаполненными; если какая-то ячейка должна выглядеть пустой, поместите в нее неразрывный пробел.
Помещаемый в ячейки таблицы текст по умолчанию автоматически размещается браузером; текст выводится слово за словом; при достижении правой границы ячейки очередное слово переносится на новую строку.
Ячейки таблицы могут охватывать несколько строк или столбцов; при описании таких ячеек используется атрибуты ROWSPAN (ячейка, тег которой содержит данный атрибут, «растягивается» на указанное количество строк) и COLSPAN (ячейка «растягивается» на несколько столбцов).
Теги, описывающие таблицы, имеют целый ряд необязательных атрибутов.
Атрибуты тега задают параметры таблицы в целом:
|
Синтаксис атрибута |
Назначение |
||
|
ALIGN = значение |
Выравнивание относительно текстового потока; возможны значения left, right и center |
||
|
BACKGROUND = url |
Фоновое изображение для всей таблицы |
||
|
BGCOLOR = цвет |
Фоновый цвет |
||
| <... |
Подобные документы
Понятие об html. Структура файла в формате html. Отличительный признак html-документа. Гипертекстовые ссылки. Создание документов в стандарте html. Заголовки. Форматирование текста и изменение стилей. Фреймы.
реферат [23,7 K], добавлен 17.08.2007История html. Гипертекст. Структура web-страницы. Переход внутри одного документа. Переход к другому документу. Правила синтаксиса. Кодирование символов. Использование символов. Управление цветом. Конструктор документов. Способы определения таблиц стилей.
дипломная работа [911,3 K], добавлен 25.02.2005Структура HTML–документа. Синтаксис записи тега. Обозначение цветов в шестнадцатеричной системе счисления. Формат задания и параметры таблицы в документе, параметры её заголовка, строк и ячеек, группирование столбцов. Наследование свойств выравнивания.
курсовая работа [318,8 K], добавлен 03.01.2014Характеристика принципов создания html-страниц и связывания их ссылками так, чтобы можно было произвольным образом переходить от одной страницы к другой. Применение тегов форматирования текста и заголовка окна. Этапы создания html-страницы с таблицей.
контрольная работа [16,0 K], добавлен 19.06.2014Разработки британского учёного Тима Бернерсом-Ли. HTML как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. Структура HTML-документов и основные теги на языке HTML.
курсовая работа [820,3 K], добавлен 03.03.2011Изучение тегов для создания списков и таблиц в HTML, основных атрибутов тегов. Практические навыки создания списков и таблиц в HTML-документах. Нумерованные, маркированные и вложенные списки, список определений. Выравнивание данных в ячейках таблицы.
контрольная работа [322,1 K], добавлен 09.08.2014Специальные разметочные указатели (теги) языка HTML. Основные правила написания тегов. Структура HTML-файлов. Внесение изменений и способы обновления Web-сайта. Необходимые атрибуты для создания на Web-странице бегущей строки и вставки рисунков.
презентация [439,3 K], добавлен 29.01.2014Значение атрибута TITLE тега HTML-документа. Возможности HTML для разработчиков Web-страниц. Параметры тега
, регулирующие отступы вокруг изображения. Оформление комментариев в CSS. Теги логического форматирования текста (phrase elements).
тест [19,9 K], добавлен 11.10.2012Понятие, сущность и особенности применения языка HTML, а также структура его документа. Рекомендации по созданию сайтов в интернете. Общая структура и порядок оформления гипертекстов, записанных в языке HTML, примеры отображения их в браузере компьютера.
контрольная работа [29,4 K], добавлен 12.09.2010Особенности программирования на языке HTML и JavaScript. Основные стили форматирования текста. Анализ основных приемов и методов создания страниц, рисунков, таблиц и гиперссылок. Основные цвета и их коды. Разработка собственного сайта и его презентация.
курсовая работа [61,3 K], добавлен 29.01.2016Цели, задачи и компоненты информационной технологии управления. Разработка структуры сайта и программный код работы в HTML–редакторе: создание титульной страницы, документа с фреймами, связь информационных документов с помощью гипертекстовых ссылок.
курсовая работа [34,3 K], добавлен 11.08.2011Общая характеристика языка разметки гипертекста Hypertext Markup Language. Структура HTML-документа. Обзор основных возможностей HTML. Элементы современного дизайна Web-страниц. Анализ практического применения HTML (на примере обучающих программ).
курсовая работа [47,9 K], добавлен 24.11.2012Создание Web-документов (от простейших статических до документов на основе динамического HTML): форматирование текста, создание списков, таблиц, встраивание различных объектов, использование средств интерактивного общения с пользователем.
методичка [45,5 K], добавлен 27.10.2010Термин HTML (HiperText Markup Language) и его реализация. Программы просмотра страниц написанных на зыке манипулирования гипертекстами. Характеристика специальных программ – браузеров: Google Chrome, Opera, Mozilla Firefox. Структура HTML-страницы.
контрольная работа [118,8 K], добавлен 05.04.2015Основные теги и атрибуты языка HTML. Создание web-сайта, который должен представлять собой несколько связанных между собой страниц. Рассмотрение различных значений атрибутов и тегов на страницах и в других документах. Экранные формы разработанных страниц.
лабораторная работа [1,2 M], добавлен 16.04.2014Общие принципы создания Web-узла. Особенности его оформления, структуры, сочетание графики и текста. Варианты размещения Web-узла в Internet, роль правильного выбора провайдера. История развития HTML. Принципы гипертекстовой разметки. Группы тегов НТМL.
лекция [35,9 K], добавлен 07.02.2010История развития Интернета и принципы его работы. Сквозные протоколы и шлюзы. Логическая и физическая структура сайта. Основы HTML и форматирование текста. Списки, таблицы, гиперссылки. Мультимедиа на web–странице. Формат задания фреймовой структуры.
курсовая работа [1,2 M], добавлен 27.03.2009Работа с HTML-редактором Adobe Dreamweaver. Этапы и правила построения заглавной страницы сайта, форматирования HTML-страниц, создания гипертекстовых ссылок, создания и форматирования таблиц. Использование графических материалов при разработке сайта.
методичка [1,9 M], добавлен 06.07.2011Применение многоязычного текста. Структура HTML документа. Элементы стиля шрифтов. Разделы, заголовки и горизонтальные линии. Термин и его определение. Изменение основного шрифта. Комментарии, оформление цитат, разрывы строк и цветовые спецификации.
презентация [672,5 K], добавлен 22.06.2014Hyper Text Markup Language (html) как стандартный язык для создания гипертекстовых документов в среде web. Тэги списков, гипертекстовые ссылки, графика внутри документа, специальные тэги html и таблицы. Планирование фреймов. Этапы создания сайтов.
контрольная работа [126,9 K], добавлен 18.11.2010