Список базовых тэгов HTML




Содержание

· Введение

· Что такое 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>


Поделиться:




Поиск по сайту

©2015-2024 poisk-ru.ru
Все права принадлежать их авторам. Данный сайт не претендует на авторства, а предоставляет бесплатное использование.
Дата создания страницы: 2019-03-27 Нарушение авторских прав и Нарушение персональных данных


Поиск по сайту: