Самоучитель HTML
Термин HTML (HyperText Markup Language) означает «язык разметки гипертекста». Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.
Со времени создания первой версии HTML претерпел некоторые изменения. Как и многое другое в компьютерном мире, версии, или спецификации, HTML оказались пронумерованными. Известны спецификации 2.0, 3.2, 4.0 и 4.01. Текущую спецификацию HTML всегда можно найти на сервере W3C [1].
Всё, о чём написано в Самоучителе HTML, будет гарантированно работать с программным обеспечением, поддерживающим любую известную на сегодня спецификацию HTML. Естественно, для этого пришлось опустить некоторые детали, которые описаны не во всех спецификациях или описаны в разных спецификациях по-разному. Однако могу Вас уверить, что Ваши документы будут полностью работоспособными и вполне приличными по внешнему виду.
Что Вам понадобится для освоения HTML? [ править ]
Для освоения HTML по этому Самоучителю Вам понадобятся две вещи:
- Любой браузер, то есть, программа, пригодная для просмотра HTML-файлов.
- Любой редактор текстовых файлов, поддерживающий русский язык в выбранной Вами кодировке. Если на Вашем компьютере установлен Windows, вполне подойдет Notepad.
Мы будем использовать текстовый редактор для подготовки HTML-файлов, а браузер — как инструмент контроля за сделанным.
Свои первые HTML-файлы Вы будете разрабатывать у себя на локальном диске. Другими словами, компьютер, на котором Вы будете заниматься, может и не иметь подключения к Интернет. При этом один и тот же *.html-файл может быть одновременно открыт и в Notepad, и в Netscape Navigator. Сохранив изменения в Notepad, просто нажмите кнопку Reload («перезагрузить») в браузере, чтобы увидеть эти изменения реализованными в HTML-документе.
Необходимое отступление о редакторах HTML [ править ]
В настоящее время широко используются два типа редакторов HTML:
- Редакторы типа «что видишь, то и получишь» (Namo WebEditor 2006, Microsoft Front Page). Пользователь не видит «внутренностей» документа, с которым он работает, точно так же, как при работе с текстовым процессором типа Microsoft Word или Word Perfect. Кстати говоря, существует довольно много конвертеров, способных преобразовывать документы, созданные в Microsoft Word или Word Perfect, в HTML-документы.
- Редакторы собственно HTML-текстов (HotDog, Ken Nesbitt Web Editor и многие другие). В процессе работы пользователь видит внутреннее содержание HTML-файла и может изменять его либо вручную, либо вызывая команды меню для вставки определенных элементов HTML. Работа с таким редактором очень похожа на работу с интерактивной средой программирования типа Microsoft Visual Basic или Borland Delphi.
Теги HTML-документа [ править ]
Как устроен HTML-документ [ править ]
HTML-документ — это просто текстовый файл с расширением *.html (Unix-системы могут содержать файлы с расширением *.htmll). Вот самый простой HTML-документ:
Привет!
Это простейший пример HTML-документа.
Этот *.html-файл может быть одновременно открыт и в Notepad, и в браузере. Сохранив изменения в Notepad, просто нажмите кнопку Reload ('перезагрузить') в браузере, чтобы увидеть эти изменения реализованными в HTML-документе.
Попробуйте написать этот документ в программе Блокнот и просмотреть в браузере.
Для удобства чтения я ввел дополнительные отступы, однако в HTML это совсем не обязательно. Более того, браузеры просто игнорируют символы конца строки и множественные пробелы в HTML-файлах. Поэтому наш пример вполне мог бы выглядеть и вот так:
Привет!
Это простейший пример HTML-документа.
Этот *.html-файл может быть одновременно открыт и в Notepad, и в браузере. Сохранив изменения в Notepad, просто нажмите кнопку Reload ('перезагрузить') в браузере, чтобы увидеть эти изменения реализованными в HTML-документе.
Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками «». Такой фрагмент (например, ) называется тегом (по-английски — tag, читается «тэг»).
Большинство HTML-тегов — парные, то есть на каждый открывающий тег вида
Теги можно вводить как большими, так и маленькими буквами. Например, теги , и будут восприняты браузером одинаково.
Многие теги, помимо имени, могут содержать атрибуты — элементы, дающие дополнительную информацию о том, как браузер должен обработать текущий тег. В нашем простейшем документе, однако, нет ни одного атрибута. Но мы обязательно встретимся с атрибутами уже в следующем разделе.
Обязательные теги [ править ]
Тег должен открывать HTML-документ. Аналогично, тег должен завершать HTML-документ.
Эта пара тегов указывает на начало и конец заголовка документа. Помимо наименования документа (см. описание тега ниже), в этот раздел может включаться множество служебной информации, о которой мы обязательно поговорим чуть позже.
Тег meta определяет кодировку сайта, хранит служебную информацию для поисковых роботов и браузеров.
Всё, что находится между тегами , толкуется браузером как название документа. Netscape Navigator, например, показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов.
Эта пара тегов указывает на начало и конец тела HTML-документа, которое и определяет содержание документа.
Теги вида (где i — цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня — самый крупный, шестого уровня, естественно — самый мелкий.
Такая пара тегов описывает абзац. Всё, что заключено между
— — Заголовки различного уровная, используются для организации содержимого. Важно уметь правильно их использовать. используется на странице один раз и является заголовком всей страницы. Остальные являются подзаголовками. Также важно использовать в правильном порядке. должен быть подзаголовком , но никак не наоборот. Не используйте более низкие уровни заголовков для того чтобы снизить размер шрифта: для этого используется CSS.
Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта.
Тег
Этот блочный элемент используется для группировки элементов и назначения стилей. Является самым часто используемым тегом.
Тег
Данный тег расставляет акценты в тексте путём выделения его фрагментов полужирным начертанием.
Как это выглядит в браузере:
Тег
Может показаться, что этот тег идентичен тегу , ведь на странице он отображается также:
Но различие все же есть: тег имеет семантическое значение (браузер придаст большее значение словам, которые выделены этим тегом), а тег просто придает жирность без придания важности
Тег
Этот тег выделят текст курсивом, придавая акцент:
Тег
Этот тег похож на предыдущий, но не придает акцента тексту.
Теги и
Тег придает подстрочное начертание символов:
А тег придает надстрочное начертание символов:
Тег
Прошу заметить, что когда мы используем обычные теги, то все переносы текста игнорируются, можете проверить это сами. А вот чтобы произвести вывод неформатированного текста с сохранением пробелов и особенностей переносов, используется тег .
Добавление аудиозаписей и видео на сайт
Для этого используется тег c атрибутом src , где указывается ссылка на аудиозапись.
Видео может вставить аналогичным способом, используя тег с атрибутом src. Также можно задать высоту и ширину, используя атрибуты height и width соответственно.
Это только некоторые из основных тегов HTML, существует множество других тегов для различных целей, таких как таблицы, формы, списки. Их мы изучим в отдельных главах. Важно понимать как эти теги используются и как они взаимодействуют друг с другом, чтобы можно было создавать и модифицировать веб-страницы качественно.
Задание
Создайте свой первый HTML-документ, и попробуйте задействовать все HTML-элементы описанные в главе.