Оглавление

1. Основные понятия

HTML (HyperText Markup Language) — это язык разметки документа, описывающий форму отображения информации на экране компьютера.


При создании документа часто приходится выделять какую-либо часть текста полужирным шрифтом, изменять размер или цвет шрифта, выравнивать текст по центру страницы и т. д. В текстовом редакторе для этого достаточно выделить нужный фрагмент и применить к нему форматирование. Например, чтобы пометить текст курсивом, нужно выделить его и нажать кнопку Курсив. На языке HTML тот же эффект достигается следующей строкой кода:
<i>Текст</i>
Символ <i> указывает, что текст надо выделить, начиная с этого места, а </i> отмечает конец выделенного фрагмента.

 

Символы <i> и </i> принято называть тегами. С помощью тегов описывается вся структура документа. Теги выделяются угловыми скобками "<" и ">", между которыми указывается имя тега. Большинство тегов являются парными, так как есть открывающий тег (<i>) и соответствующий ему закрывающий (</i>). Закрывающий тег отличается наличием косой черты ("/") перед его именем. Есть также теги, вообще не имеющие закрывающего тега, например, тег переноса строки <br>.
Некоторые теги могут иметь параметры (иногда их называют атрибутами). Параметры указываются после имени тега через пробел в формате параметр="значение". Если параметров несколько, то они перечисляются через пробел. Например:
<meta http-equiv="Content-Type"   content="text/html;   charset=windows-1251">
В этом примере параметру http-equiv тега <meta> присвоено значение сопtent-Type, а параметру content— значение text/html;    charset=windows-1251.
Теги могут вкладываться друг в друга. Например:
<p><i>Текст</i></p>
При вложении тегов необходимо соблюдать последовательность их закрытия. Например, такой код использовать нельзя:
<p><i>Текст</p></i>

 

Просматривать HTML-документы можно с помощью специальных программ, которые называют Web-браузерами. Web-браузеры отображают документы с форматированием, выполненным на основе исходного кода, описывающего структуру документа.
Результат интерпретации HTML-документа, отображаемый в окне Web-браузера, называется Web-страницей. В отличие от HTML-документа Web-страница может содержать не только текст, но и графику, видео, звуковое сопровождение, может реагировать на действия пользователя и т. д. Кроме того, Web-страница может быть результатом интерпретации сразу нескольких HTML-документов.


Документы в формате HTML имеют расширение html или htm.
Прежде чем изучать язык HTML, советую установить на компьютер один из редакторов — CKeditor или tinyMCE. Эти редакторы написаны на языке программирования JavaScript и работают в Web-браузере.

 

Скачать CKeditor можно со страницы http://ckeditor.com/download. После распаковки архива запустите файл fullpage.html (расположен в папке ckeditor\_samples\).

 

Редактор CKeditor, запущенный в Web-браузере Firefox

Рис. 1.1. Редактор CKeditor, запущенный в Web-браузере Firefox

 

На рис. 1.1 можно увидеть, как выглядит редактор CKeditor. запущенный в Web-браузере Firefox. Если вы раньше работали с текстовым редактором Microsoft Word, то большинство кнопок на панели инструментов будет вам знакомо. Принцип работы в CKeditor точно такой же. как и в Word. После ввода текста и его форматирования редактор автоматически генерирует HTML-код. Посмотреть исходный HTML-код можно нажав кнопку Источник на панели инструментов (рис. 1.2).

Следует заметить, что при изменении исходного HTML-кода автоматически изменяется и внешний вид документа.

 

Результат нажатия кнопки Источник в редакторе CKeditor

Рис. 1.2. Результат нажатия кнопки Источник в редакторе CKeditor

 

 

Скачать    tinyMCE    можно    со    страницы    http://www.tinymce.com/download/download.php
 После загрузки распаковываем архив в текущую папку. Для русификации редактора со страницы http://www.tinymce.com/i18n/index.php ... amp;act=index&pr_id=1 необходимо скачать архив с файлами для русского языка. Архив следует разместить в папке tinymce\jscripts\tiny_mce\, а затем распаковать в текущую папку. Все файлы будут автоматически распределены по каталогам. Чтобы подключить поддержку русского языка, необходимо в файле full.html (расположен в папке tinymce\examples\) добавить строку

 

language:   "ru",


сразу после строки


tinyMCE.init ({

 

Теперь файл full.html открываем с помощью Web-браузера. На рис. 1.3 можно увидеть, как выглядит редактор tinyMCE. запущенный в Web-браузере Firefox.

 

Редактор tinyMCE, запущенный в Web-браузере Firefox

Рис. 1.3. Редактор tinyMCE, запущенный в Web-браузере Firefox

Примечания:
  • В HTML названия тегов и параметров можно записывать в любом регистре, а в языке XHTML только в нижнем регистре.
Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити