Введение в HTML |
|
А для чего вообще нужно знать HTML, ведь есть
специальные визуальные редакторы типа FrontPage?
Не будем скрывать и скажем сразу: если вы собираетесь сделать
домашнюю страничку с фотографией и рассказом о себе, то вам абсолютно, не
обязательно владеть HTML. Вы можете воспользоваться одним из визуальных
редакторов, работающих по принципу: "что вижу, то и получу". В этом
случае мы порекомендуем Вам "Microsoft FrontPage 2000", который входит в
"Расширенный Microsoft Office
2000". В то же время, мы не рекомендуем использовать для этой цели Microsoft Word 2000, так как он
создает html-странички большого размера из-за вставки многих "лишних"
тегов.
Ну, а те, кто собирается создать хороший профессиональный
сайт или просто хотел бы разобраться, что там его "FrontPage"
накодировал, мы советуем начать изучение HTML. Итак,
если вы пишете html-код странички сами, то:
- размер получившегося файла того же содержания зачастую в 1,5-2 раза
меньше, того, который получился бы вследствие работы визуального редактора.
Следовательно, ваша страничка будет быстрее загружаться из Интернета (а это
довольно важно для профессиональных сайтов). Мы
считаем, что никакая программа не напишет так виртуозно код, как человек.
Например, программа может описывать каждый символ предложения с обязательным
указанием всех атрибутов и т.д., а человек укажет необходимые атрибуты ко всему
предложению сразу.
- вы сможете использовать многие дополнительные
возможности, которые невозможно реализовать с помощью редакторов, например
DHTML.
- вы сможете контролировать совместимость вашей странички со старыми
версиями браузеров, создавая только такой код, который может быть правильно ими
воспринят.
Итак, если вы собрались делать в Интернете более или менее
серьезный сайт, то знание HTML (хотя бы поверхностное) просто необходимо.
Как изучать язык гипертекстовой разметки HTML?
Многие говорят, что лучшим учебником для изучения языка HTML
являются готовые HTML-файлы, анализируя код которых вы доберетесь до сути HTML,
но нам кажется это не совсем верно. Человек, не владеющий HTML, пытается
анализировать, как правило, сложный код и, как правило, ничего не понимает.
Если вам знакомо это чувство, то вы попали именно туда, куда нужно.
Для начала вам необходимо иметь первоначальные знания о языке и, достигнув определенного уровня, изучая специальные
учебные материалы, вы сможете дальше изучать HTML, анализируя код готовых
html-документов.
Что представляет из себя Web-страничка
(html-страничка)?
Web-страничка – это обычный текстовый файл в соответствующей
кодировке, с расширением *.htm, *.html,
*.dhtml, *.shtml и т.д. В
нем описывается вся страничка с помощью языка гипертекстовой разметки – HTML (HyperText Markup Language). Первую версию HTML разработал Тим Бернерс-Ли. Язык постоянно развивается и наиболее полную
информацию, в том числе и о спецификациях (версиях) на текущий момент, вы
можете найти на сервере основополагающей организации Всемирной Паутины - The World Wide
Web Consortium http://www.w3.org
(правда, вся информация там только на английском языке). Когда
вы в своем браузере (Internet Explorer
/ Nestcape Navigator)
загружаете web-страничку, то браузер выполняет команды, записанные на языке
HTML, и, подчиняясь им, выводит на экран страничку.
HTML – это язык тегов. Теги, окружающие некий текстовый (или
графический) раздел, определяют, какие параметры имеет данный текст (или
рисунок): большой или маленький размер, жирный текст или курсив, выравнивание
слева или справа, какого он цвета и т.д. Таким образом, теги также задают
расположение объектов на странице.
Большинство web-мастеров (люди, создающие странички)
используют для своей работы и визуальные редакторы, и написание текстов
непосредственно на HTML (чаще всего в “Блокноте” Windows).
Создание страниц с помощью редакторов удобнее, т.к. трудно создать сложную
страничку, имея перед глазами только html-код. Но редактор создает не такой
оптимальный html-код, как опытный web-мастер (о чем мы уже говорили выше), да и
встраивать многие элементы возможно, только непосредственно редактируя код
странички.
Что такое браузер?
Браузер (иногда некоторые говорят, броузер
или браоузер и т.д.) - это программа просмотра
web-страничек во всемирной компьютерной сети Интернет. На нашем
сайте будет использоваться термин браузер. Итак, от браузера зависит
в каком виде вы сможете увидеть содержимое web-странички, т.к. различные
браузеры могут поддерживать или нет различное форматирование. Существует
большое количество различных браузеров, но
безусловными лидерами являются Internet Explorer (компании Microsoft) и Netscape Navigotor (компании Netscape). На долю двух этих браузеров различных версий в
общей сложности приходится до 95% всех браузеров. Оба браузера являются
бесплатными программами и доступны для скачивания на официальных сайтах компаний Microsoft и Netscape. Последней версией
Internet Explorer'a
является 5.5 версия (в том числе русская 5.5 версия) и Netscape
6.01 версии (в том числе русская 4.7 версия). Как мы видим, компания Netscape отстает от Microsoft в
русификации своих версий, что и объясняет значительный отрыв браузеров Microsoft в Рунете (подробней о
соотношении браузеров различных фирм и версий в Рунете
вы можете прочитать в подразделе "Полезные статьи" нашего
сайта).
В чем различия между понятиями Web-сайт и Web-страничка?
Многие считают, что эти понятия идентичны, но это не совсем
так. Web-страничка (иногда еще говорят, html-страничка) это текстовый файл написанный на языке HTML в определенной кодировке и с
определенным расширением (см. выше). Когда говорят о
web-страничке подразумевают один, два или три файла, которые могут быть
связаны друг с другом или нет, иметь ссылки на другие ресурсы Интернета или
нет.
А web-сайт подразумевает много (больше трех) файлов в формате
HTML, обязательно связанных между собой гиперссылками. Как правило, все эти
файлы находятся в одном домене и составляют общее информационное пространство
(т.е. посвящены одной или нескольким связанным между собой темам).
Основы языка HTML (часть I) |
|
Рассмотрим HTML на уровне, который позволит
вам создать простейшую страничку и познакомиться с основами HTML.
Все теги записываются в угловых скобках <>. Большинство
тегов имеют открывающийся элемент <> и закрывающийся </>, между
которыми находится содержимое, к которому применяется этот эффект. Документ
должен начинаться тегом <HTML> и заканчиваться закрывающим тегом
</HTML>. Эти теги показывают, что это документ в формате HTML. Он должен
содержать две части: заголовок (HEAD) и собственно документ (BODY). То есть
между строчками <HTML> и </HTML> должны находится теги
<HEAD></HEAD> и <BODY></BODY>. В заголовке определяется
кодировка страницы (как правило KOI8-r или
Windows-1251), название странички (то, которое показывается в заголовке окна) и
некоторая другая информация. Для определения кодировки странички вставьте между
тегами <HEAD> и </HEAD> одну из следующих строчек:
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1251">
- для Windows-1251 кодировки (в этой кодировке вы можете писать
код странички в "Блокноте", используя, как русский, так и английский
язык; эта кодировка наиболее предпочтительна).
<meta http-equiv="Content-Type"
content="text/html; charset=koi8-r">
- для KOI8-r кодировки (как правило, эта кодировка используется
визуальными HTML-редакторами, открыв документ этой кодировки в
"Блокноте", вы увидите лишь какие-то какарули,
однако некоторые серверы работают лишь с этой кодировкой, например сервер Chat.ru, тогда вам придется использовать специальные перекодировщики).
Для задания названия странички используются теги <TITLE></TITLE>.
Между ними помещается текст названия странички.
Таким образом страничка имеет вид:
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<TITLE> Страничка Петра Петрова </TITLE>
</HEAD>
<BODY>
Содержимое странички (то, что вы должны заполнять своими тегами)
</BODY>
</HTML>
Кстати, теги можно писать и строчными, и прописными буквами. Для
браузера это безразлично. Это имеет значение лишь внутри Java-скриптов.
Рассмотрим основные теги, которые понадобятся вам для
создания любой странички.
Начнем с текста. Большинство документов имеют заголовок. Для
его создания используют теги <hx></hx>, где x – число от 1 до 6.
Заключив текст между этими тегами, вы получите заголовок соответствующего
уровня.
<h1>Заголовок</h1>
<h2>Заголовок</h2>
<h3>Заголовок</h3>
<h4>Заголовок</h4>
<h5>Заголовок</h5>
<h6>Заголовок</h6>
Для создания нового абзаца
- используется тег <p>, затем идет текст абзаца
и в конце </p>. Если вы хотите
просто перейти на новую строчку без создания абзаца используйте тег <br> (таким образом, тег <br>
не имеет закрывающегося тега).
Рассмотрим форматирование символов. Для придания тексту
жирного начертания поместите его между тегами <b></b>, курсивного - <i></i>, подчеркнутого - <u></u>.
пример тегов: |
отображаемый
текст: |
<b>жирный текст</b> |
жирный текст |
<i>курсив</i> |
курсив |
<u>подчеркнутый</u> |
подчеркнутый |
Некоторые теги могут применяться с атрибутами (параметрами),
которые указываются в открывающемся элементе тега (можно сразу указывать
несколько атрибутов в одном теге). Некоторые теги вообще не имеет смысла
применять без атрибутов. К таким тегам можно отнести тег
<FONT></FONT> - он может иметь несколько атрибутов (например, SIZE,
FACE, COLOR), которые мы рассмотрим ниже.
Для задания размера текста используется атрибут SIZE тега
<FONT>. Он позволяет задавать размер текста (по умолчанию размер текста
принят равным 3). Поместив текст между тегами <FONT SIZE="x"></FONT>, где x -
целое число, вы придадите ему нужный вам размер.
Пример:
<font size="1">Поместив
</font>
<font size="3">текст
</font>
<font size="5">между
</font>
<font size="6">тегами...</font>
Результат:
Поместив
текст между тегами...
Задание типа шрифта производится с помощью атрибута FACE тега
<FONT>, где FACE="Стандартный True Type шрифт". Очень аккуратно используйте этот атрибут,
так как заданный шрифт должен присутствовать на компьютере пользователя - в
противном случае браузер подставит шрифт, определенный по умолчанию (как
правило, это Times New Roman). Применяйте шрифты, в наличии которых вы уверены,
иначе пользователь увидит текст иначе, чем вы. К стандартным шрифтам, я думаю,
можно отнести шрифты, поставляемые с Windows 95/98, Ms Plus, Ms
Office.
Пример:
<font face="Times New
Roman">ABC</font>
<font face="System">DEF</font>
<font face="Arial">GHI</font>
<font face="Courier">XYZ</font>
Результат:
ABC DEF GHI XYZ
В заключении первой части следует также сказать о
возможности комментировать html-код. Комментарий помещается между <!-- и
-->. Ваш комментарий может записан как на русском,
так и на английском языке и находиться в любом месте html-кода. Не бойтесь
писать подробные комментарии, так как браузер пропускает их
(то есть не тратит время на их загрузку). Я рекомендую вам использовать
эту возможность, особенно на первых этапах изучения языка HTML.
Пример:
<!-- Это
комментарий -->
Основы языка HTML (часть II) |
|
Начнем вторую часть с добавления цветов на нашу web-страничку. Для задания цвета фона документа,
цвета текста, ссылок, просмотренных (посещенных) ссылок, активных ссылок (т.е.
в момент нажатия на них кнопкой мыши) используются атрибуты тега <BODY>
(того самого, с которого начинается описание самой странички): BGCOLOR, TEXT,
LINK, VLINK, ALINK соответственно. Для указания (определения) цвета используются
именованные цвета (вынесены отдельным пунктом в разделе "HTML") или
коды цветов (для этого ставится символ "#", а за ним без пробела
шесть шестнадцатеричных чисел, определяющих цвет в кодировке RGB).
Пример:
<BODY BGCOLOR="#FFFF88" TEXT="#0000FF"
LINK="#FF0000" VLINK="#CF2CD4"
ALINK="#C033FF">
Для определеня цвета конкретного фрагмента текста в документе
используется атрибут COLOR тега <FONT>. Для этого также используются
именованные цвета или в цвета, определяемые кодировкой RGB.
Пример:
<font color="#FF0000">Поместив
</font>
<font color="#CF2CD4">текст
</font>
<font color="#0000FF">между
</font>
<font color="orange">тегами </font>
<font color="green">...</font>
Результат:
Поместив текст между тегами...
Для создания графического фона используется текстура -
небольшая картинка (графический файл) в формате gif
или jpg (jpeg). Браузер
автоматически заполняет ими весь экран. Картинка должна формировать однородный
фон, а с помощью небольшой полоски с плавным переходом цвета можно создавать
интересные градиентные фоны. Желательно, чтобы размер файла текстуры был
небольшой. Для задания фона используется атрибут BACKGROUND тега <BODY>.
В этом атрибуте вы должны указать имя файла текстуры, а при необходимости и
путь, если файл текстуры не находится в той же директории, что и html-файл.
<BODY
BACKGROUND="textura.gif">
А теперь рассмотрим, как вставить картинку в
любое место web-странички. Для этого используются форматы gif
и jpg (jpeg). Первый
популярен из-за возможности использования анимации (нескольких последовательно
сменяющихся кадров) и прозрачного цвета, недостаток: максимальное количество
цветов 256, а формат jpg (jpeg)
позволяет использовоть 24 миллионов цветов, что
необходимо для фотографий, имеет хороший алгоритм сжатия, а вследствии
этого небольшой размер файла.
Для вставки картинки используется тег <IMG>. Его
синтаксис следующий:
<IMG
SRC="имя файла" ALT="текст" ALIGN="расположение"
WIDTH="ширина" HEIGHT="высота">
где имя файла - это имя файла картинки с расширением.
Если она находится в той же директории, что и ваша страничка, то это просто имя
файла. Если картинка находится в ином месте (например где-то в Интернете), то
указывайте имя с полным путем.
текст - это сообщение, которое выводится
вместо картинки, если она не показывается (не найдена или пользователь настроил
свой браузер так, что тот не показывает картинки). Кроме того, вы увидите этот
текст в виде подсказки, когда курсор мыши находится над картинкой.
расположение - место расположния
изображения. Может иметь следующие значения:
TOP - последующий текст располагается в верхней части изображения;
BOTTOM - последующий текст располагается в нижней части изображения;
LEFT - изображение находится в левой части листа, текст обтекает
изображение справа;
MIDDLE - изображение находится в центре листа,
RIGHT - изображение находится в правой части листа, текст обтекает
изображение слева.
ширина - ширина изображения в
пикселях.
высота- высота изображения в пикселях.
Примечание: атрибуты alt, align, width,
height являются необязательными.
Например:
<img src="strelka.gif"
alt="Стрелочка" width="40"
height="30">
А теперь рассмотрим последнюю и,
пожалуй, самую важную часть web-странички - гиперссылки. Гиперссылки - это
основа Internet'а, главный его принцип. И, соответственно,
важнейшая часть web-страниц.
Гиперссылки (иногда говорят, просто ссылки) могут вести на
другую страничку или сайт, на картинку (удобно не показывать большую картинку,
а показать её уменьшенную копию, щелкнув на которую можно увидеть большое
изображение в высоком качестве), на любой файл, на адрес электронной почты и
адреса других служб WWW.
Для перехода на другую страничку используется конструкция:
<a href="URL">Название
ссылки</a>
где URL (унифицированный локатор ресурсов) - адрес любого
файла в Интернете, может быть абсолютными, то есть указывается полный адрес
странички (например: http://webholm.ru/avtor.htm) или относительным, как видно
из названия указывается файл относительно текущего (например
avtor.htm).
Название ссылки - текст, которые будет отображаться в виде гиперссылки,
например "webholm.ru - Холм Web-мастера".
Для создание
ссылки на e-mail в качестве URL'a
вставте "mailto:адрес электронной почты".
Например, mailto:webmaster@webholm.ru Щелкнув на такую
ссылку вы откроете окно своей почтовой программы с уже записанным адресом.
Останется толко написать письмо и отправить.
Часто используют не текстовую ссылку, а картинку, щелкнув на
которую вы перейдете в другое место. Для этого используется следующая
конструкция:
<a href="URL"><IMG
SRC="картинка" width="ширина" height="высота" border="окантовка"
alt="Подсказка"></a>
Как вы могли заметить, поскольку это
гиперссылка в виде картинки, здесь появился еще один параметр: border. Он определяет толщину в пикселах
обводки (окантовки). Окантовка будет выполнена тем же цветом, который определен
для других гиперссылок на web-страничке. Но это не всегда смотрится красиво,
поэтому зачастую значение этого параметра устанавливают в "0".
Следует также сказать, что именно вышеприведенная конструкция используется при,
так называемом "дружеском" обмене кнопочками: баннеры размера 88x31 пиксела.
Пример:
<a href="http://webholm.ru">Холм
Web-мастера</a>
<a href="mailto:webmaster@webholm.ru">Напишите
письмо автору сайта</a>
<a href="http://webholm.ru"><img
src="strelka.gif"
alt="Стрелочка" border="0"
width="40" height="30"></a>
Результат:
Холм Web-мастера
Напишите письмо автору сайта