Название реферата: Основы HTML
Раздел: Информатика
Скачано с сайта: www.newreferat.com
Дата размещения: 03.11.2011
Основы HTML
HTML (Hypertext Markup Language) был впервые разработан Тимом Бернерс-Ли (Tim Berners-Lee) в то время когда он работал в ЦЕРНе и приобрел популярность благодаря броузеру "Мозаика" разработанному в NCSA. Первая спецификация этого универсального и общедоступного языка разметки - HTML 0 была утверждена в 1991 году. Уже через два года W3C объявил о выходе HTML 3. Затем, почти сразу, последовала спецификация версии 3.2, с которой мы имеем дело сейчас на подавляющем большинстве Web-страниц. В HTML 4 произошла лишь переработка концепций, и не было добавлено ничего принципиально нового. На сегодняшний день HTML остается самым универсальным, даже незаменимым средством разметки гипертекста, а, следовательно, и публикации в Интернет. Язык разметки гипертекста по определению должен интерпретироваться броузером. Это, безусловно, накладывает некоторые ограничения на возможности языка и на совместимость новых конструкций со старыми версиями броузеров. Однако, именно эта особенность языков разметки оставляет прекрасную возможность генерировать HTML-код другими программами (CGI-скриптами). Современные Web-страницы уже не обходятся одним только HTML. Его гармонично дополняют средства динамического HTML: скрипт языки JavaScript и/или VBScript, каскадные таблицы стилей(CSS), иногда присутствуют Java-апплеты. Web-страничка – это обычный текстовый файл в соответствующей кодировке. В нем описывается вся страничка с помощью языка гипертекстовой разметки – HTML (HyperText Markup Language). Когда вы в своем браузере (Internet Explorer / Nestcape Navigator) загружаете web-страничку, то браузер выполняет команды, записанные на языке HTML, и, подчиняясь им, выводит на экран страничку. Создавать HTML-файлы нужно в текстовых редакторах, которые умеют сохранять файлы в формате "Только текст" (расширение .txt). Если вы создадите такой файл в Word'e и сохраните в формате "Документ", а потом поменяете расширение .doc на .html, то у вас получится полная абракадабра, т.к. Word и сам не лыком шит и добавляет в свои "фирменные файлы" массу специальных команд форматирования, очень сильно отличающихся от тэгов HTML. Поэтому на первое время, чтобы не запутаться, идеальным редактором является "Блокнот" (Notepad) из стандартной поставки Windows. Для того, чтобы текстовый файл превратился в HTML-файл, поменять его расширение с ".txt" на ".html" недостаточно. Надо соблюсти "правило первой строки". Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML <!DOCTYPE>, которая обычно выглядит так: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Эта строка поможет браузеру определить, как правильно интерпретировать данный документ. В данном случае мы говорим браузеру, что HTML соответствует международной спецификации версии 4.1, которая хоть и не отличается новизной, но, в отличие от более поздних версий, является полноценным, широко распространенным стандартом без каких-либо неопределенностей. После объявления версии и типа документа необходимо обозначить его начало и конец. Это делается с помощью тэга-контейнера <HTML>. Необходимо отметить, что любой HTML-документ открывется тэгом <HTML> и им же закрывается. Эти тэги сообщают браузеру, что текст между ними следует интерпритировать как HTML-текст. Поскольку документы HTML чисто текстовые, тэг говорит о том, что файл написан на языке HTML (HyperTextMarkupLanguage - Язык гипертекстовой разметки). Итак, давайте попробуем создать страничку, на которой будет ваш портрет, заголовок и немного текста - один-два абзаца (параграфа). Чтобы не запутаться во вложенности тэгов и одновременно не пропустить какую-нибудь важную часть документа, нужно записывать тэги-контейнеры сразу парами, начиная с внешнего контейнера, а затем вкладывать внутренние. Начнем с пары тэгов <html></html>. Внутрь этого контейнера рядышком положим два "ящика" поменьше: <head></head> и <body></body> (именно в такой последовательности! не может же "голова" быть ниже "тела"!). Затем внутрь "ящика-головы" вложим "ящичек-название" - <title></title>, а внутрь "ящика-тела" - "ящички-блоки", рядышком, друг за другом: <h1></h1><p></p> и <img>. Ну а теперь можно наполнить наши коробки содержимым - обычным текстом. Если приведенный выше пример пояснить схематически, получится следующее:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>
<head> <!-- Заголовок документа -->
<title> <!-- Название документа --> </title>
<!-- прочая служебная информация -->
</head>
<body> <!-- Тело документа -->
<div> <!-- Блок -->
<p> <!-- Параграф --> </p>
<table> <!-- Таблица --> </table>
</div>
<div> <!-- Блок --> </div>
</body>
</html> Из схемы видно, что документ состоит из двух основных блоков - "заголовка" и "тела документа". Заголовок определяется с помощью элемента HEAD, а тело - элементом BODY. Тэги-контейнеры можно (и нужно!) вкладывать друг в друга. При этом важно соблюдать правильную вложенность тэгов. Если вы представите себе тэги-контейнеры в виде настоящих ящичков, вы быстро разберетесь во вложенности. В самом деле, ведь нельзя вложить маленький ящик в большой, закрыв при этом большой ящик крышечкой от маленького! Нужно закрыть маленький ящичек маленькой крышечкой, поместить его вместе с крышечкой в большой ящик, а тот уже накрыть большой крышкой. Так же и с тэгами - один в другой нужно вкладывать целиком, нельзя оставлять закрывающий тэг или часть содержимого вместе с закрывающим тэгом снаружи!
| Правильно: | Неправильно: | Неправильно: |
|
<div> <p>Здесь все сверстано верно.</p> </div> |
<div> <p>А здесь допущена ошибка.</div> </p> |
<div> <p>А здесь тоже допущена </div> ошибка.</p> |
Коды HTML символов Для специальных символов в HTML-стандартах предусмотрен особый способ кодирования (с помощью escape-последовательностей или символьных объектов), который позволяет применять эти символы в необходимых позициях документа, не нарушая его структуры (это касается, например, символов <, >и &). Условное обозначение спецсимвола (escape-последовательность) начинается символом & , включает собственно имя спецсимвола и завершается точкой с запятой (например, " у условное обозначение для кавычки). Кроме того, вместо имени символа можно воспользоваться соответствующим ASCII-кодом (например, " у для кавычки). Следует отметить, что разными броузерами коды и имена специальных символов (escape-последовательности) могут интерпретироваться несколько различным образом. На вид отображаемых символов также влияет выбранный для отображения шрифт и таблица символов (кодировка).
| Название | Символ | ASCII | Имя |
|
Табулятор |
	 | ||
|
Перевод строки |

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

 | ||
|
Пробел |
  | ||
|
Восклицательный знак |
! |
! | |
|
Кавычка |
" |
" |
" |
|
Знак решетка |
# |
# | |
|
Доллар |
$ |
$ | |
|
Процент |
% |
% | |
|
Амперсанд |
& |
& |
& |
|
Апостроф |
' |
' | |
|
Скобка левая круглая |
( |
( | |
|
Скобка правая круглая |
) |
) | |
|
Звездочка |
* |
* | |
|
Плюс |
+ |
+ | |
|
Запятая |
, |
, | |
|
Минус |
- |
- | |
|
Точка |
. |
. | |
|
Косой штрих |
/ |
/ | |
|
Цифры |
0-9 |
0-9 | |
|
Двоеточие |
: |
: | |
|
Точка с запятой |
; |
; | |
|
Меньше |
< |
< | |
|
Равно |
= |
= | |
|
Больше |
> |
> | |
|
Знак вопроса |
? |
? | |
|
Знак обезьянка |
@ |
@ | |
|
Прописные буквы |
A-Z |
A-Z | |
|
Скобка квадратная левая |
[ |
[ | |
|
Косой штрих с наклоном вправо |
\ |
\ | |
|
Скобка квадратная правая |
] |
] | |
|
Степень |
^ |
^ | |
|
Знак подчеркивания |
_ |
_ | |
|
Ударение |
` |
` | |
|
Строчные буквы |
a-z |
a-z | |
|
Фигурная скобка левая |
{ |
{ | |
|
Вертикальный штрих |
| |
| | |
|
Фигурная скобка правая |
} |
} | |
|
Тильда |
~ |
~ | |
|
Запятая |
‚ |
‚ | |
|
Флорин |
ƒ |
ƒ | |
|
Кавычка нижняя правая |
&;#132; |
„ | |
|
Многоточие |
… |
… | |
|
Крест |
† |
† | |
|
Двойной крест |
‡ |
‡ | |
|
Крышка |
ˆ |
ˆ | |
|
Промилле |
‰ |
‰ | |
|
параграф |
Š |
Š | |
|
Символ меньше |
< |
‹ | |
|
Большое ОЕ |
Π|
Π| |
|
Одинарная кавычка слева |
‘ |
‘ | |
|
Одинарная кавычка справа |
’ |
’ | |
|
Кавычка слева |
“ |
“ | |
|
Кавычка справа |
” |
” | |
|
Крупная точка |
• |
• | |
|
Короткий дефис |
– |
– | |
|
Длинный дефис |
— |
— | |
|
Тильда |
˜ |
˜ | |
|
Торговый знак |
™ |
™ |
® |
|
š |
š | ||
|
Символ больше |
> |
› | |
|
Маленькое ое |
œ |
œ | |
|
Большой Y-умлаут |
Ÿ |
Ÿ | |
|
Неразрывный пробел |
  |
| |
|
Перевернутый восклицательный знак |
¡ |
¡ |
&ixcl; |
|
Цент |
¢ |
¢ |
¢ |
|
Фунт |
£ |
£ |
£ |
|
Валюта |
¤ |
¤ |
¤ |
|
Иена |
¥ |
¥ |
¥ |
|
Прерванный штрих |
¦ |
¦ |
¦ |
|
Параграф/Раздел |
§ |
§ |
§ |
|
Точки умлаута |
¨ |
¨ |
¨ |
|
Копирайт |
© |
© |
© |
|
Порядковое числительное женского рода |
ª |
ª |
ª |
|
Французская кавычка слева |
« |
« |
« |
|
Не/Нет |
¬ |
¬ |
¬ |
|
Разрыв в месте переноса |
- |
­ |
­ |
|
Зарегистрированный торговый знак |
® |
® |
® |
|
Надчеркивание |
¯ |
¯ |
¯ |
|
Градус |
° |
° |
° |
|
Плюс-минус |
± |
± |
± |
|
Вторая степень |
² |
² |
² |
|
Третья степень |
³ |
³ |
³ |
|
Маленькое а с ударением |
´ |
´ |
&acuate; |
|
Мю |
µ |
µ |
µ |
|
Параграф |
¶ |
¶ |
¶ |
|
Средняя точка |
· |
· |
· |
|
Цедиль |
¸ |
¸ |
¸ |
|
Первая степень |
¹ |
¹ |
¹ |
|
Порядковое числительное мужского рода |
º |
º |
º |
|
Французская кавычка справа |
» |
» |
» |
|
Дробь 1/4 |
¼ |
¼ |
¼ |
|
Дробь 1/2 |
½ |
½ |
½ |
|
Дробь 3/4 |
¾ |
¾ |
¾ |
|
Перевернутый вопросительный знак |
¿ |
¿ |
¿ |
|
Большая А с ударением |
À |
À |
À |
|
Большая А с ударением |
Á |
Á |
Á |
|
Большая А с крышкой |
 |
 |
 |
|
Большая А с тильдой |
à |
à |
à |
|
Большая А-умлаут |
Ä |
Ä |
Ä |
|
Большая А с кружком |
Å |
Å |
Å |
|
Большое АЕ |
Æ |
Æ |
Æ |
|
Большая С цедил |
Ç |
Ç |
Ç |
|
Большая Е с ударением |
È |
È |
È |
|
Большая Е с ударением |
É |
É |
É |
|
Большая Е с крышкой |
Ê |
Ê |
Ê |
|
Большая Е-умлаут |
Ë |
Ë |
Ë |
|
Большая I с ударением |
Ì |
Ì |
Ì |
|
Большая I c крышкой |
Î |
Î |
&Icirс; |
|
Большая I-умлаут |
Ï |
Ï |
Ï |
META-тэги META-таги имеют два возможных атрибута - <META HTTP-EQUIV="имя" CONTENT="содержимое"> - <META NAME="имя" CONTENT="содержимое"> META-таги должны находиться в заголовке HTML-документа между <HEAD> и </HEAD> (особенно это важно для документов, использующих фреймы). Атрибут HTTP-EQUIV META-таги с атрибутом HTTP-EQUIV эквивалентны HTTP-заголовкам. Обычно они управляют действиями броузеров и могут быть использованы для совершенствования информации, выдаваемой обычными заголовками. Таги такой формы могут дать такой же эффект, что и HTTP-заголовки, и на некоторых серверах автоматически могут быть переведены в настоящие HTTP-заголовки. HTTP-заголовки описываются в RFC1945 (HTTP/1.0) и RFC2068 (HTTP/1.1). HTTP-заголовки могут быть сгенерированы с помощью CGI-скриптов. Это позволяют сделать серверы Apache и CERN. В других серверах могут использоваться другие механизмы генерирования заголовков. Некоторые генерируемые сервером поля заголовков не могут быть подменены значениями из META-тагов (в частности Date), другие подменяются только при ненормальном статус-коде (<>200). Когда заголовок не понятен, то значение HTTP-заголовка превалирует над значением META-тагов. Expires Источники: HTTP/1.1 (RFC2068) Дата устаревания. Управление кэшированием в HTTP/1.0. В Netscape Navigator это выглядит следующим образом: если указанная дата прошла, то очередной запрос этого документа вызывает повторный сетевой запрос, а не подгрузку документа из кэша. Дата со значением "0" интерпретируется как "сейчас". Такое значение заставляет броузер каждый раз при запросе проверять - изменялся ли этот документ. Это, кстати относится и к прокси-агентам. Поисковые роботы могут либо совсем не индексировать такой документ, либо постоянно "обнюхивать" его. Дата должна быть задана в формате, описываемом в RFC850, <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT"> что эквивалентно HTTP-заголовку Expires: Wed, 26 Feb 1997 08:21:57 GMT Pragma Контроль кэширования для HTTP/1.0. Значением должно быть "no-cache". Очень полезный контейнер, я всегда использую его при выдаче результатов работы любого скрипта. Content-Type Источники: HTTP/1.0 (RFC1045) Указание типа документа. Может быть расширено указанием кодировки страницы (charset). Если же указывать charset в содержании META-тага, то Netscape Navigator выводит такую страницу уже в заданном charset. Однако будьте аккуратны, если текст страницы в кодировке Windows, а значение charset=KOI8-r, то никакими силами пользователь не сможет поменять encoding, чтобы увидеть нормальные слова! <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=ISO-2022-JP"> Content-language Источники: HTTP/1.0 Указание языка документа. Может использоваться поисковыми машинами при индексировании страниц. Комбинация поля Accept-Language (посылаемого броузером) с содержимым Content-language может быть условием выбора сервером того или иного языка. <META HTTP-EQUIV="Content-language" CONTENT="en-GB"> что эквивалентно HTTP-заголовку Content-language: en-GB Язык описывается парой значений (язык-диалект). В примере: Английский-Великобритания В недавно вышедшей спецификации HTML 4.0 появилась другая возможность явного указания языка - <html lang="en"> Refresh Источники: Netscape Определение задержки в секундах, после которой броузер автоматически обновляет документ. Дополнительная возможность - автоматическая загрузка другого документа. <META HTTP-EQUIV="Refresh" Content="3; URL=http://www.name.com/page.html"> что эквивалентно HTTP-заголовку Refresh: 3; URL=http://www.name.com/page.html В Netscape Navigator это дает такой же эффект, что и нажатие на кнопку Reload. Window-target Источники: Jahn Rentmeister Определяет окно текущей страницы; может быть использован для прекращения появления новых окон броузера при применении фреймовых структур. Действует для многих (но не для всех) броузеров. <META HTTP-EQUIV="Window-target" CONTENT="_top"> что эквивалентно HTTP-заголовку Window-target: _top Ext-cache Источники: Netscape Определяет имя альтернативного кэша для Netscape Navigator <META HTTP-EQUIV="Ext-cache" CONTENT="name=/some/path/index.db; istructions=User Instructions"> Set-Cookie Устанавливает cookie броузера. <META HTTP-EQUIV="Set-Cookie" CONTENT="NAME=value; EXPIRES=date; DOMAIN=domain_name; PATH=path; SECURE"> PICS-Label Platform-Independant Content rating Scheme. Обычно используется для определения рейтинга "взрослости" (adult) содержания (sex,violence, .):-)) однако это довольно гибкая схема и может использоваться для других целей. Cache-Control Источники: HTTP/1.1 Определяет действия кэша по отношению к данному документу. Возможные значения:
Таг LINK Таг LINK предоставляет документу независимый от среды метод определения отношения данного документа к другим документам и ресурсам Сети. Используется с аргументами REL и REV. С помощью тага LINK можно:
rel=top
Данная связь указывает на вершину в некой иерархической структуре, например на первую, либо титульную страницу в неком наборе документов.
rel=contents
Данная связь указывает на некий файл, где приводится оглавление к данному документу.
rel=index
Данная связь указывает на другой документ, который можно использовать в целях индексного поиска по текущему документу.
rel=glossary
Данная связь указывает на некий документ, где содержится глоссарий терминов, относящихся к текущему документу.
rel=copyright
Данная связь ссылается на текст, где указаны авторские права на данный документ.
rel=next
Данная связь указывает на следующий документ в неком заранее предопределенном маршруте просмотра. Например, она может использоваться для упреждающей автоматической загрузки браузером следующей страницы.
rel=previous
Данная связь ссылается на предыдущий документ в неком предопределенном маршруте просмотра.
rel=help
Данная связь указывает на документ, предлагающий некую помощь, например это может быть текст, дающий более развернутое описание и предлагающий ссылки на другие документы по этой теме. Назначение этой связи - оказание помощи тем читателям, кто потерял свой путь в Web.
rel=search
Данная ссылка ведет к поисковой странице, контролирующей некий набор страниц, связанных общей темой.
|
Форматирование текста в HTML Рассмотрим форматирование символов. Для того, чтобы выделить какую либо часть текста, можно использовать теги: