Содержание
· Введение
· Что такое HTML?
· Как создаются HTML документы?
· Основные положения
· Структура документа
· Ваш первый HTML-документ "Hello, world!"
· Тэги
· Тэги тела документа
· Список базовых тэгов HTML
· Специальные тэги HTML
· Тэги списков
· Гипертекстовые ссылки
· Графика внутри HTML-документа
· Добавление стилей в ваш HTML-документ
· Формы
· Синтаксис
· Тэги Формы
· Меню выбора в формах
· Отправление файлов при помощи форм
· Таблицы
· Основные тэги таблицы
· Основные атрибуты таблицы
· Фрэймы
· Синтаксис фрэймов
· Планирование фрэймов и взаимодействия между фрэймами
· Зарезервированные имена фрэймов
· Создание карты изображения
· Проблемы просмотра HTML документа в различных ОС и браузерах.
Введение
Желание создать свою Web-страничку присуще каждому подключенному к Internet индивидуму. Но некоторым ее создапвать лень, другим нечего сказать миру, а третьи считают, что это слишком сложно. Однако, это не так. Начну с того, что язык HTML черезвычайно прост (на первых порах забудем о вкраплениях Java, CGI, и прочих наворотах, без которых, в принципе, можно вполне обойтись). Здесь нет ни объектно-ориенитрованного программирования, ни потоков, ни обширных библиотек, которые Вам необходимо изучать для успешной работы, а есть всего пару десятков операторов, которые в процессе работы Вы без труда запомните, а если и нет, - не беда, загляните в справочник. В добавок язык HTML не компилируемый, а интерпретируемый, то есть на всех серверах HTML хранятся не в виде замысловатых кодов, а в виде текстовых файлов, что дает вам возможность скачать понравившийся сайт к себе на винчестер и поразбираться а как же он сделан. К тому же есть масса всяких оболочек для визуального проектирования страницы, которые значительно упрощают дело. Использование оболочек, - дело спорное. У меня есть вполне уважаемые знакомые, которые, по каким-то одним им известным причинам, пишут свои странички не прибегая к визуальным оболочкам. Но я считаю это впинципе не верным. Непродуктивно колотить по клавиатуре, если это можно сделать значительно проще и быстрее, - но при этом не надо забывать, что после того, как вы нарисовати все в оболочке, кое-что все таки придется поправить руками. Для того, что бы создать не притязательную страничку, в принципе, даже не обязательно разбираться в программировании, попробуйте - и оцените свои возможности.
Что такое HTML?
HyperText Markup Language (HTML) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WEB. HTML-документ представляет собой обычный текстовый файл, который вы можете просматривать и редактировать в любом неформатирующем текстовом редакторе. HTML-документы могут просматриваться различными типами WEB-броузеров, которые интерпретируют (выпольняют) HTML документ, в результате чего вы видете на экране то, что вы видете. Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей.
Большинство документов имеют стандартные элементы, такие, как заголовок, параграфы или списки. Используя тэги HTML вы можете давать браузеру информацию о том, как бы Вы хотели увидеть свой документ на экране.
HTML-тэги могут быть условно разделены на две категории:
· тэги, определяющие, как будет отображаться WEB-броузером тело документа вцелом
· тэги, описывающие общие свойства документа, такие как заголовок или автор документа
Преимущество HTML заключается в том, что ваш документ может быть просмотрен на WEB-броузерах различных типов различных операционных систем.
Вверх
Как создаются HTML документы?
HTML-документы могут быть созданы при помощи любого текстового редактора или специализированных HTML-редакторов и конвертеров. Я буду приводить примеры с использованием редактора FrontPage Express, входящего в комплект поставки Windows'98.
Вверх
Основные положения
Все тэги HTML начинаются с символа "<" и заканчиваются ">". Как правило, существует стартовый тэг и завершающий тэг. Для примера приведем тэги заголовка, определяющие текст, находящийся внутри стартового и завершающего тэга и описывающий заголовок документа:
<TITLE> Заголовок документа </TITLE> |
Завершающий тэг выглядит также, как стартовый, и отличается от него прямым слэшем перед текстом внутри угловых скобок. В данном примере тэг <TITLE> говорит WEB-броузеру об использовании формата заголовка, а тэг </TITLE> - о завершении текста заголовка.
Некоторые тэги, такие, как <P> (тэг, определяющий абзац), не требуют завершающего тэга, но его использование придает исходному тексту документа улучшенную читаемость и структурируемость.
HTML не реагирует на регистр символов, описывающих тэг, и приведенный ранее пример может выглядеть следующим образом:
<title> Заголовок документа </title> |
Внимание! Дополнительные пробелы, символы табуляции и возврата каретки, добавленные в исходный текст HTML-документа для его лучшей читаемости, будут проигнорированы WEB-броузером при интерпретации документа. HTML-документ может включать вышеописанные элементы только если они помещены внутрь тэгов <PRE> и </PRE>. Более подробно о тэгах <PRE> будет написано ниже. |
Вверх
Структура документа
Когда WEB-броузер получает документ, он определяет, как документ должен быть интерпретирован. Самый первый тэг, который встречается в документе, должен быть тэгом <HTML>. Данный тэг сообщает WEB-броузеру, что ваш документ написан с использованием HTML. Минимальный HTML-документ будет выглядеть так:
<HTML>...тело документа... </HTML> |
Заголовочная часть документа <HEAD>
Тэг заголовочной части документа должен быть использован сразу после тэга <HTML> и более нигде в теле документа. Данный тэг представляет из себя общее описание документа. Избегайте размещать какой-либо текст внутри тэга <HEAD>. Стартовый тэг <HEAD> помещается непосредственно перед тэгом <TITLE> и другими тэгами, описывающими документ, а завершающий тэг </HEAD> размещается сразу после окончания описания документа. Например:
<HTML> <HEAD> <TITLE> Список сотрудников </TITLE> </HEAD>... |
Внимание! Технически, стартовые и завершающие тэги типа <HTML>, <HEAD> и <BODY> необязательны. Но настоятельно рекомендуется их использовать, поскольку использование данных тэгов позволяет WEB-броузеру уверенно разделить заголовочную часть документа и непосредственно смысловую часть. |
Заголовок документа <TITLE>
Большинство WEB-броузеров отображают содержимое тэга <TITLE> в заголовке окна, содержащего документ и в файле закладок, если он поддерживается WEB-броузером. Заголовок, ограниченный тэгами <TITLE> и </TITLE>, размещается внутри <HEAD>-тэгов, как показано выше на примере. Заголовок документа не появляется при отображении самого документа в окне.
Комментарии
Как любой язык, HTML позволяет вставлять в тело документа комментарии, которые сохраняются при передаче документа по сети, но не отображаются броузером. Синтаксис комментария:
<!-- Это комментарий --> |
верх
Ваш первый HTML-документ "Hello, world!"
Откройте любой неформатирующий редактор текстовых документоы, например WordPad, входящий в комплект поставки Windows'98, и наберите следующий текст.
<html> <head> <title>Hello</title> </head> <body> Hello, World! </body> </html> |
Сохраните его в файле hello.htm, затем запустите. Поздравляю, ваш первый HTML-документ готов к публикации. А теперь давайте попробуем сделать все тоже самое с помощью программы FrontPage. Запустите Пуск / Программы / Internat Exploer / FrontPage Express. Далее нажмите Файл / Создать / Нормальная страница, или нажмите на пиктограмму чистого листка бумаги. Теперь наберите Wello, World! и сохраните файл (Файл /Сохранить как / Сохранить как файл/ а дальше открывается стандартный диалог сохранения файлов). А теперь давайте посмотрим что же создал нам редактор FrontPage? Откройте этот файл текстовым редактором или не выходя из оболочки выберете Вид / HTML - и вам откроется окно с текстовым представлением вашего файла, причем различные синтаксические группы будут выделены цветами.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <meta name="GENERATOR" content="Microsoft FrontPage Express 2.0"> <title>Нормальная страница без названия</title> </head> <body bgcolor="#FFFFFF"> <p>Hello, World!</p> </body> </html> |
Несколько отличается от того, что мы с вами написали в своем примере, не правда ли? Тэги meta - дают дополнительную информацию о вашей странице, которая браузеру абсолютно не предназначена (поговорим об этом позже). параметр bgcolor="#FFFFFF" задает цвет фона - белый, хотя он белый по умолчанию и этот параметр можно было бы опустить. Символ <p> - символ абзаца. Кака видите FrontPage добавил в наш с вами пример свои мысли, но результат в данном случае один и тот же.
Вверх
Тэги
Тэги тела документа
Тэги тела документа идентифицируют отображаемые в окне компоненты HTML-документа. Тело документа может содержать ссылки на другие документы, текст и другую форматированную информацию.
Тело документа <BODY>
Тело документа должно находиться между тэгами <BODY> и </BODY>. Это та часть документа, которая отображается как текстовая и графическая (смысловая) информация вашего документа.
Уровни заголовков <Hx>
Когда пишется HTML-документ, текст структурно делится на просто текст, заголовки частей текста, заголовки более высокого уровня и т.д. Первый уровень заголовков (самый большой) обозначается цифрой 1, следующий - 2, и т.д. Большинство броузеров поддерживает интерпретацию шести уровней заголовков, определяя каждому из них собственный стиль. Заголовки выше шестого уровня не являются стандартом и могут не поддерживаться броузером. Заголовок самого верхнего уровня имеет признак "1". Синтакс заголовка уровня 1 следующий:
<H1> Заголовок первого уровня </H1> |
Заголовки другого уровня могут быть представлены в общем случае так:
<Hx> Заголовок x-го уровня </Hx> |
где x - цифра от 1 до 6, определяющая уровень заголовка.
Тэг абзаца <P>
В отличии от большинства текстовых процессоров, в HTML-документе обычно игнорируются символы возврата каретки. Физический разрыв абзаца может находиться в любом месте исходного текста документа (для удобства его читаемости). Однако броузер разделяет абзацы только при наличии тэга <P>. Если вы не разделите абзацы тэгом <P>, ваш документ будет выглядеть как один большой абзац.
Дополнительные параметры тэга <P>:
<P ALIGN=left|center|right> |
позволяют выравнивать абзац по левому краю, центру и правому краю соответственно.
Вверх
Тэг преформатирования <PRE>
Тэг преформатирования, <PRE>, позволяет представлять текст со специфическим форматированием на экране. Предварительно сформатированный текст заканчивается завершающим тэгом </PRE>. Внутри предварительно сформатированного текста разрешается использовать:
· перевод строки
· символы табуляции (сдвиг на 8 символов вправо)
· непропорциональный шрифт, устанавливаемый броузером
Использование тэгов, определяющих формат абзаца, таких как <Hx> или <ADDRESS>, будет игнорироваться броузером при помещении их между тэгами <PRE> и </PRE>.
Далее идет несколько более подробный пример, собранный из предыдущих:
<HTML> <HEAD> <TITLE> Список сотрудников </TITLE> </HEAD> <BODY> <H2> Список сотрудников нашей фирмы </H2> <H3> Составлено: 30 июля 1996 года </H3> Данный список содержит фамилии, имена и отчества всех сотрудников нашей компании. <P> Список может быть использован только в служебных целях. <P> </BODY> </HTML> |
Вот, что вы увидите на экране броузера:
РЕЗУЛЬТАТ |
Список сотрудников нашей фирмы Составлено: 30 июля 1996 года Данный список содержит фамилии, имена и отчества всех сотрудников нашей компании. Список может быть использован только в служебных целях. |
Внимание! Заголовок "Список сотрудников" не отображен броузером как часть документа. Он появится в заголовке окна броузера. |
Разрыв строки <BR>
Тэг <BR> извещает броузер о разрыве строки. Наилучший пример использования данного тэга - форматированный адрес или любая другая последовательность строк, где броузер должен отображать их одну под другой. Например:
Наш адрес: <BR> Россия, г.Екатеринбург,<BR> пр. Ильича, 286-ю, офис 1271<BR><BR>Наш телефон: (7)-(3432)-77-77-77<BR> Мы будем рабы Вас обслужить... |
На экране жта надпись будет выглядеть так:
РЕЗУЛЬТАТ |
Наш адрес: Россия, г.Екатеринбург, пр. Ильича, 286-ю, офис 1271 Наш телефон: (7)-(3432)-77-77-77 Мы будем рабы Вас обслужить... |
Эквивалент команды <BR> в FrontPage - <Shift>-Enter, причем символ <BR> будет отображен на экране обратной стрелкой, но при просмотре в браузере - символ <BR> будет не виден. Клавиша Enter во FrontPage предназначена для определения нового обзаца, что отличается значительно большим отступом. |
Неразрывная строка <NOBR>
Если вы не хотите, чтобы броузер автоматически переносил строку, то вы можете обозначить ее тэгами <NOBR> и </NOBR>. В этом случае броузер не будет переносить строку даже если она выходит за нраницы экрана; вместо этого броузер позволит горизонтально прокручивать окно.
Цитата <BLOCKQUOTE>
Данный тэг предназначен для обозначения в документе цитаты из другого источника. Текст, обозначенный тэгом <BLOCKQUOTE>, отступает от левого края документа на 8 пробелов. Например:
На открытии данной конференции глава представительства произнес: <P> <BLOCKQUOTE> Сегодня один из величайших дней для нашей компании. <BR> Мы открыли новую технологию, позволяющую нашим клиентам повысить производительность их настольных систем в несколько раз. </BLOCKQUOTE> |
При отображении броузером данный текст будет выглядеть так:
РЕЗУЛЬТАТ |
На открытии данной конференции глава представительства произнес: Сегодня один из величайших дней для нашей компании. Мы открыли новую технологию, позволяющую нашим клиентам повысить производительность их настольных систем в несколько раз. |
Вверх
Список базовых тэгов HTML
Теперь подытожим наши знания:
Завершающий | Описание | |
<HTML> | </HTML> | Обозначение HTML-документа |
<HEAD> | </HEAD> | Заголовочная часть документа |
<TITLE> | </TITLE> | Заголовок документа |
<BODY> | </BODY> | Тело документа |
<H1> | </H1> | Заголовок абзаца первого уровня |
<H2> | </H2> | Заголовок абзаца второго уровня |
<H3> | </H3> | Заголовок абзаца третьего уровня |
<H4> | </H4> | Заголовок абзаца четвертого уровня |
<H5> | </H5> | Заголовок абзаца пятого уровня |
<H6> | </H6> | Заголовок абзаца шестого уровня |
<P> | </P> | Абзац |
<PRE> | </PRE> | Форматированный текст |
<BR> | Перевод строки без конца абзаца | |
<BLOCKQUOTE> | </BLOCKQUOTE> | Цитата |
Описанные ранее тэги - это все, что необходимо вам для того, чтобы начать работать с HTML. С использованием описанных тэгов вы можете создать простой HTML-документ. Однако, следующие разделы позволят вам существенно улучшить внешний вид ваших документов и опишут новые возможности HTML. |
Вверх
Специальные тэги HTML
Следующие тэги позволят вам сделать ваш HTML-документ более функциональным.
Тэг адреса <ADDRESS>
Тэг <ADDRESS> используется для выделения автора документа и его дреса (например, e-mail). Синтаксис:
<ADDRESS> Адрес-автора </ADDRESS> |