Введение в HTML
HTML (HyperText Markup Language, язык разметки гипертекста) представляет собой систему верстки веб-страниц и определяет, где и как в документе отображать отдельные элементы (текст, рисунки, ссылки и др.) Пример по созданию своей первой страницы Вы можете посмотреть здесь.
Исходный код самой веб-страницы является обычным текстовым документом и состоит всего из двух основных компонентов, которые перемежаются между собой:
- текст, который и надо показать в окне браузера;
- теги, они добавляют рисунки, устанавливают ссылки, меняют вид текста и делают
еще множество других полезных вещей.
Таким образом, освоение HTML сводится к изучению основных тегов (их около двух десятков) и правил их использования.
Разметка документа
Представьте, что вы диктуете секретарше текст, который изобилует выделением цвета, жирным начертанием и рисунками. При этом фраза «Вставить рисунок» может быть понята двояко, ведь это воспринимается как обычный текст или как команда добавить изображение. Чтобы исключить лишнего переспрашивания и уточнения что же именно делать, вначале следует обговорить ключевое слово и терминологию. Например, «абракадабра: новый абзац» будет обозначать, что дальнейший текст следует набирать со следующего абзаца.
В случае с HTML в качестве подобных ключевых слов выступают теги, они как раз и определяют действия, которые необходимо совершить с текстом. Поэтому теги еще называются элементами разметки. Например, <b>текст</b> означает, что текст, находящийся между ключевыми словами <b> и </b> должен отображаться жирным начертанием. Аналогично с помощью тегов создаются списки, таблицы, добавляются изображения и другие элементы веб-страницы.
Для элементов разметки существуют правила их использования, которые установлены спецификацией HTML. Этот документ регламентирует порядок применения тегов, их вложенность и принцип работы. Знание спецификации и ее соблюдение помогает избежать типичных ошибок и позволяет создать универсальный код, одинаково хорошо работающий на различных устройствах и в разных браузерах. Чтобы ознакомится с тегами и правилалми их применения Вы можете скачать самоучитель от Влада Мержевича здесь.
Данный самоучитель предназначен в первую очередь для начинающих, только постигающих азы создания сайтов. Множество примеров, иллюстраций, вопросов для проверки и заданий для самостоятельной работы помогут быстрее изучить HTML. Для опытных пользователей самоучитель также окажется полезен разделом «Валидация», где рассматриваются принципы проверки документов и исправления ошибок.
Самоучитель состоит из трех разделов: HTML, Валидация и XHTML. Каждый раздел является независимым и изучать его можно отдельно от других разделов.
Необходимые нструменты
Для эффективной работы не обойтись без необходимых и привычных инструментов, в том числе и при написании кода HTML. Поэтому для начальной разработки веб-страниц или даже небольшого сайта — так называется набор страниц, связанных между собой ссылками и единым оформлением, нам понадобятся следующие программы.
- Текстовый редактор.
- Браузер для просмотра результатов.
- Валидатор — программа для проверки синтаксиса HTML и выявления ошибок в коде.
- Графический редактор.
- Справочник по тегам HTML.
Далее рассмотрим эти инструменты подробнее.
Текстовый редактор
HTML-документ можно создавать в любом текстовом редакторе, хоть Блокноте, тем не менее, для этой цели подойдет не всякая программа. Нужна такая, чтобы поддерживала следующие возможности:
- подсветка синтаксиса — выделение тегов, текста, ключевых слов и параметров разными цветами. Это облегчает поиск нужного элемента, ускоряет работу разработчика и снижает возникновение ошибок;
- работа с вкладками. Сайт представляет собой набор файлов, которые приходится править по отдельности, для чего нужен редактор, умеющий одновременно работать сразу с несколькими документами. При этом файлы удобно открывать в отдельных вкладках, чтобы быстро переходить к нужному документу;
- проверка текущего документа на ошибки.
Ссылки на некоторые подобные редакторы приведены ниже.
Браузер
Браузер это программа, предназначенная для просмотра веб-страниц. На первых порах подойдет любой браузер, но с повышением опыта и знаний потребуется завести целый «зверинец», чтобы проверять правильность отображения сайта в разных браузерах. Дело в том, что каждый браузер имеет свои уникальные особенности, поэтому для проверки универсальности кода требуется просматривать и корректировать код с их учетом. На сегодняшний день наибольшей популярностью пользуются три браузера: Firefox, Internet Explorer и Opera.
Mozilla Firefox
Перспективный и развивающийся браузер, получивший признание во всем мире. Его особенность — простота и расширяемость, которая получается за счет специальных расширений, как они называются. Изначально Firefox имеет набор только самых необходимых функций, но, устанавливая желаемые расширения, в итоге можно нарастить браузер до системы, выполняющей все необходимые для вашей работы действия. Браузер Firefox является открытой системой, разрабатываемый группой Mozilla.
Где скачать
http://www.mozilla.ru/products/firefox/
Microsoft Internet Explorer (IE)
Один из старейших браузеров, который бесплатно поставляется вместе с операционной системой Windows. Это и определило его популярность. Версия IE 7 по удобству приблизилась к своим давним конкурентам, в частности, появились вкладки. К сожалению, этот браузер хуже всех поддерживает спецификацию HTML, поэтому для корректного отображения в IE приходится порой отдельно отлаживать код специально под него.
Где скачать
http://www.microsoft.com/rus/windows/ie/default.mspx
Opera
Быстрый и удобный браузер, поддерживающий множество дополнительных возможностей, повышающих комфортность работы с сайтами.
Где скачать
http://ru.opera.com/download/
Safari
Разработаный компанией Apple этот браузер встроен в в iPhone и операционную систему MacOS на компьютерах Apple. Также имеется версия под Windows.
Где скачать
http://isafari.ru/downloadsafari
Google Chrome
Самый свежий браузер, появившийся на рынке в конце 2008 году. Разработан компанией Google.
Где скачать
http://www.google.com/chrome?hl=ru
Валидатор
Валидация HTML-документа предназначена для выявления ошибок в синтаксисе веб-страницы и расхождений со спецификацией HTML. Соответственно, программа или система для такой проверки называется валидатором.
Как проверить HTML-файл на валидность
Если есть доступ в Интернет, то следует зайти по адресу http://validator.w3.org и ввести путь к проверяемому документу или сайту в специальной форме. После проверки будут показаны возможные ошибки или появится надпись, что документ прошел валидацию успешно.
Tidy
Для проверки локального HTML-файла или при отсутствии подключения к Интернету, предназначена программа Tidy. Некоторые редакторы, например, PSPad, уже содержат встроенный Tidy и валидацию документа можно провести без дополнительных средств.
Где скачать
http://tidy.sourceforge.net
Графический редактор
Графический редактор необходим для обработки изображений и их подготовки для публикации на веб-странице. Самой популярной программой такого рода является Photoshop, ставший стандартом для обработки фотографий и создания графических изображений для сайтов. Но в большинстве случаев мощь Photoshop-а избыточна, и лучше воспользоваться чем-нибудь более простым и проворным. В частности, программа Paint.Net позволяет сделать все необходимые манипуляции с изображениями, вдобавок бесплатна для использования.
Скачать Paint.Net
http://www.getpaint.net/download.html
Справочник по тегам HTML
Запоминать все теги и их параметры наизусть на первых порах сложно, поэтому требуется периодически заглядывать в руководство, чтобы уточнить тот или иной вопрос. Вообще, хороший справочник нужен всем, независимо от уровня подготовки.
Справочники в Интернете
Описание тегов HTML (на английском языке)
http://www.w3.org/TR/html4/index/elements.html
Список атрибутов тегов (на английском языке)
http://www.w3.org/TR/html4/index/attributes.html
Справочник по HTML Брайана Уильямса (на английском языке)
http://www.blooberry.com/indexdot/
Онлайн справочник по HTML (Влад Мержевич)
Здесь.
Локальный справочник
Удобный справочник в формате CHM выпуск 2009 г.(стандартный файл справки Windows) содержит список всех основных тегов с их описанием и примерами использования.
Cкачать на жесткий диск
