Основы HTMLРефераты >> Информатика >> Основы 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-умлаут |
Ï |
Ï |
Ï |
Скачать реферат
