Основы HTML. Создаем дизайн сайта
1.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> присвоено значение Con- tent-Type, а параметру content — значение text/html; charset=windows-
1251.
Теги могут вкладываться друг в друга. Например:
<p><i>Текст</i></p>
При вложении тегов необходимо соблюдать последовательность их закры-
тия. Например, такой код использовать нельзя:
<p><i>Текст</p></i>
П РИМ Е ЧАНИЕ
В HTML названия тегов и параметров можно записывать в любом регистре,
а в языке XHTML только в нижнем регистре.
Просматривать HTML-документы можно с помощью специальных программ, которые называют Web-браузерами. Web-браузеры отображают документы с форматированием, выполненным на основе исходного кода, описывающего структуру документа.
Результат интерпретации HTML-документа, отображаемый в окне Web- браузера, называется Web-страницей. В отличие от HTML-документа Web- страница может содержать не только текст, но и графику, видео, звуковое сопровождение, может реагировать на действия пользователя и т. д. Кроме того, Web-страница может быть результатом интерпретации сразу несколь- ких HTML-документов.
Документы в формате HTML имеют расширение html или htm.
Прежде чем изучать язык HTML, советую установить на компьютер один из редакторов — FCKeditor или tinyMCE. Эти редакторы написаны на языке программирования JavaScript и работают в Web-браузере.
Скачать FCKeditor можно со страницы http://ckeditor.com/download. После распаковки архива запустите файл sample07.html (расположен в папке fckeditor\_samples\html\). Если вы используете Web-браузер Firefox, то для работы редактора необходимо выполнить следующие действия:
1. В адресной строке вводим about:config и нажимаем клавишу <Enter>.
2. Находим директиву security.fileuri.strict_origin_policy и двойным щелчком на строке устанавливаем значение false.
На рис. 1.1 можно увидеть, как выглядит редактор FCKeditor, запущенный в Web-браузере Firefox. Если вы раньше работали с текстовым редактором Mi- crosoft Word, то большинство кнопок на панели инструментов будет вам зна- комо. Принцип работы в FCKeditor точно такой же, как и в Word. После вво- да текста и его форматирования редактор автоматически генерирует HTML- код. Посмотреть исходный HTML-код можно нажав кнопку Источник на панели инструментов (рис. 1.2). Следует заметить, что при изменении исход- ного HTML-кода автоматически изменяется и внешний вид документа.
Скачать tinyMCE можно со страницы http://tinymce.moxiecode.com/ download.php. После загрузки распаковываем архив в текущую папку. Для русификации редактора со страницы http://tinymce.moxiecode.com/ download_i18n.php необходимо скачать архив с файлами для русского язы- ка. Архив следует разместить в папке tinymce\jscripts\tiny_mce\, а затем рас- паковать в текущую папку. Все файлы будут автоматически распределены по каталогам. Чтобы подключить поддержку русского языка, необходимо в файле full.html (расположен в папке tinymce\examples\) добавить строку
language: "ru", сразу после строки tinyMCE.init({
Рис. 1.1. Редактор FCKeditor, запущенный в Web-браузере Firefox
Теперь файл full.html открываем с помощью Web-браузера. На рис. 1.3 мож- но увидеть, как выглядит редактор tinyMCE, запущенный в Web-браузере Firefox.
Рис. 1.2. Результат нажатия кнопки Источник в редакторе FCKeditor
Рис. 1.3. Редактор tinyMCE, запущенный в Web-браузере Firefox
Источник: Прохоренок Н. А. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера. — 3-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2010. — 912 с.: ил. + Видеокурс (на CD-ROM) — (Профессиональное программирование)
Похожие посты:
- Репутация на примере «рейтинга школ» (0)
- БУДУЩЕЕ ПОИСКОВОЙ СИСТЕМЫ GOOGLE (0)
- СЛОВАРЬ ПОИСКОВЫЕ СИСТЕМЫ (0)
- Избавление от переносов строки и потери места на странице (0)
- В каких броузерах следует протестировать свой сайт? (0)
- Что такое режим совместимости и как его избежать (0)
- Уход от наиболее распространенных ошибок в Internet Explorer 6 и 7 (0)
