Язык HTML основан на использовании тэгов. Тэги - это команды, которые указывают браузеру, где и как расположить на странице текст и картинки, а также позволяют организовывать ссылки на другие документы. Для того, чтобы браузер не путал тэги с текстом, их отмечают треугольными скобками < и >. Большинство тэгов, как правило, используются парами. Т.е. первым идет открывающий тэг, он объясняет браузеру, что делать с последующим текстом. Затем следует закрывающий тэг, который указывает область действия первого. Отличается закрывающий тэг от открывающего наличием в нем косой черты - слэша.
<HTML> - Сообщает браузеру, что документ создан на HTML.
<HEAD> - Отмечает вводную и заголовочную части HTML-документа.
1. Тэг <Body> отмечает основной текст и информацию.
• BGColor - Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет, либо используя константы цвета, например для желтого цвета, используемой на данной странице <body bgcolor= "yellow">
• Background - Указывает на url-адрес изображения - фона документа
• Техт - Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB - пример: 000000 - черный цвет, либо используя константы цвета, например для зеленого цвета <body text= "green">
• link - Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB - пример: 00FF00 - зеленый цвет,либо используя константы цвета,например для красного цвета,используемой на данной странице <body link= "red">
• vlink - Устанавливает цвет гиперссылок на которых вы уже побывали, используя значение цвета в виде RRGGBB - пример: 333333 - серый цвет.
• alink - Устанавливает цвет гиперссылок при нажатии. Например, на этой странице ссылки становятся синими при нажатии мышкой.
• bgproperties=fixed - Фоновое изображение прокручиваться не будет. Т.е. текст будет двигаться при нажатии PageDown, а фон - нет. Данный параметр поддерживается только Internet Explorer
2. Тег <A> служит для создания гипертекста (ссылок). Гипертекст позволяет осуществлять мгновенный переход от одного фрагмента текста к другому. Сам гипертекст поддается форматированию. Закрывающий тег обязателен. Тег должен содержать либо атрибут name, либо href.
• name - Задает имя элемента. Имя используется, например, для создания ссылок между фреймами
• href - Задает URL ресурса, на который должен перейти пользователь, щелкнув по ссылке. Атрибут может указывать как на внешний документ, так и на элемент внутри данного документа.
• target - •_blank Загружает ссылку в новое окно •_parent Загружает ссылку в родительском окне •_self По умолчанию. Загружает ссылку в это же окно, где был произведен клик по ссылке
• title - Всплывающая подсказка
• Пример - <a href="http://www.rutusa.bestbb.ru" title="подсказка">Сылка на форум Русская Тусовка</a>
3. Тег <BUTTON> создает кнопку с рисунком или с другими встроенными элементами. Закрывающий тег </BUTTON> требуется
• disabled - Делает кнопку недоступной
• style - Задает стили для кнопки. Например, размеры кнопки
• title= - Всплывающая подсказка
• type= - Тип кнопки
4. Элемент DIV определяет контейнер для HTML. Данный элемент предназначен для использования в CSS. Закрывающий тег: требуется. Весьма схож с элементом SPAN, но при этом браузеры обычно помещают символ перевода строки перед и после этого элемента
• align - Выравнивает элемент к одной из сторон документа или таблицы (left, right, center, justify)
• title - Всплывающая подсказка
• UNSELECTABLE - Запрещает или разрешает выделять текст в данном элементе (on - запрещает, off - разрешает)
5. Тег <FIELDSET> рисует рамку вокруг текста и других объектов, содержащихся в контейнере. Закрывающий тег требуется
6. Тег <font> определяет выводимый шрифт, его цвет и размер. Закрывающий тег требуется
• color - Устанавливает цвет текста, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет, либо используя константы цвета,например для зеленого цвета<font color= "green">
• face - Определяет гарнитуру шрифта
• size - Размер текста в пределах от 1 до 7,где 1 - самый мелкий шрифт. По умолчанию равен 3
7. Тег IMG служит для внедрения графики на страницы. На данный момент поддерживаются форматы файлов GIF, JPG, JPEG, PNG. Возможно использование анимированных картинок (GIF). Чтобы картинка была одновременно и ссылкой, то поместите тег IMG между <a href=...><img src="картинка.gif"></a>
• src - Обязательный атрибут, указывающий URL рисунка
• align - •left-Выравнивание по левому краю •right-Выравнивание по правому краю •center-Выравнивание по центру •bottom-Выравнивание по нижнему краю •top-Выравнивание по верхнему краю •middle-Выравнивание по середине
• alt - Выводит текст к картинке. Полезно, если браузер не отображает графику на странице
• border - Устанавливает толщину рамки вокруг изображения в пикселах. По умолчанию рамка не используется. При использовании изображения в качестве гиперссылки рекомендуется установить BORDER=0, чтобы подавить цветовую окантовку, которая появится вокруг изображения
• GALLERYIMG = - Поддержка Панели управления изображениями. Данная панель появляется при нахождении указателя мыши на изображении и позволяет быстро сохранить картинку, распечатать, послать на e-mail, открыть папку Мои рисунки. По умолчанию данная панель появляется только при размерах более 130 пикселах. Но можно включить эту панель с помощью этого атрибута. Может принимать значениея yes (или true) и no (или false).
• ismap - Сообщает, что изображение является картой-изображением на сервере
• height - Высота картинки в пикселах или процентах. Всегда желательно явно устанавливать этот параметр для ускорения загрузки страницы браузером
• hspace - Определяет размер свободного места в пикселах слева и справа от изображения, улучшает внешний вид страницы, отделяя изображение от текста
• usemap - Сообщает, что изображение является картой-изображением на стороне клиента
• vspace - Определяет размер свободного места в пикселах сверху и снизу от изображения, улучшает внешний вид страницы, отделяя изображение от текста
• width - Ширина картинки в пикселах или процентах. Всегда желательно явно устанавливать этот параметр для ускорения загрузки страницы браузером
8. Тег <INPUT> предназначен для создания элементов управления и всегда используется совместно с атрибутом TYPE. Закрывающий тег не требуется
• title - Всплывающая подсказка
• value - Задает отображаемый текст для text, password, button, reset, submit
• size - Устанавливает число видимых символов в text
• maxlength - Устанавливает максимально допустимое число вводимых символов в text
• checked - False или True - Принимает начальное состояние для checkbox и radio (по умолчанию False)
• type
text - создает строку для ввода текста
password - создает строку для ввода текста, при этом отображает вводимые символы как звездочки (*)
checkbox - создает "включатель"
radio - создает "исключающий переключатель". Как правило, используют блоки из нескольких таких элементов
file - создает элемент для выбора локальных файлов. Например, строку для имени файла и кнопку "Обзор", при нажатии на которую открывается диалог "Выбор файла"
hidden - создает невидимый для пользователя элемент. Может использоваться для отправки дополнительной, служебной информации
image - создает элемент формы в виде кнопки-изображения
button - создает стандартную кнопку
submit - создает кнопку "Подача запроса"
reset - создает кнопку "Сброс"
• style - создает кнопку "Сброс"
9. Специальная группа инструкций <META>, предназначена в основном для описания и индексирования документа поисковыми машинами. Все тэги META не видны при просмотре документа. Команды <META> вносятся в "шапку" гипертекстового документа - внутри блока <HEAD>...</HEAD>. Закрывающий тег </META> запрещен
• <META HTTP-EQUIV="Expires" CONTENT="Mon, 25 Sep 2002 00:02:01 GMT">
- Используется для того, чтобы в нужное время браузер при просмотре документа брал не версию, хранящуюся в кэше, а свежую версию прямо с Вашего сайта.
• <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Windows-1251">
- Используется для того, чтобы браузер мог правильно отобразить содержимое страницы и для определения поисковой машиной языка, на котором написана страница
• <META HTTP-EQUIV="Refresh" CONTENT="x; URL=http://ru-tusa.russchat.ru/">
- Используется для того, чтобы браузер автоматически переключался на новый адрес через x секунд
• <META name="author" content="Имя автора">
- Используется для указания имени автора. Поисковые системы могут найти нужный сайт по имени автора (или найти самого автора).
• <META name="copyright" content="© 2009 тест страница">
- Полезно также указать и авторские права название фирмы почти наверняка будет проиндексировано поисковой машиной.
• <META http-equiv="PICS-Label" content=' (PICS-1.1 "http://www.gcf.org/v2.5" labels on "1994.11.05T08:15-0500" until "1995.12.31T23:59-0000" for "http://w3.org/PICS/Overview.html" ratings (suds 0.5 density 0 color/hue 1)) '>
- Еще одна интересная штучка отсечение нежелательных пользователей от указанной страницы (например, детей от секс-серверов), при помощи введения рейтинга - т.н. "красной лампочки". Некоторые браузеры позволяют "повесить замок" на содержимое определенных сайтов, запрещая их просмотр. Имеется несколько признанный рейтинговых систем, распознаваемых браузерами. Сам браузер, естественно, можно подстроить под использование рейтинга, а профиль пользователя браузера защитить паролем. Как правило, текст в этот тэг вставляется в строгом соответствии с текстом, имеющемся на рейтинговом сервере.
• <META name="keywords" content="META, HTML, WWW, Web, паутина, поиск, определение, рекомендации, примеры использования, учебник, руководство, информация, справка, Netscape, Microsoft Internet Explorer">
- Список терминов и ключевых слов это то, что является самым главным при индексировании Вашего сайта поисковой машиной! Длина содержимого тегов МЕТА "keywords" не должна превышать 1000 символов
• <META name="description" content="The best homepage">
- Краткое описание Вашего сайта, используемое поисковым сервером для индексирования, и, как правило, вставляемое в текст страницы найденных совпадений в качестве описания Вашего сайта. Длина содержимого тегов МЕТА "description" не должна превышать 200 символов
• <META HTTP-EQUIV="imagetoolbar" CONTENT="no">
- Отключает Панели управления изображениями. Обычно используют при выводе баннеров, фона картинки, карты изображения и др., когда вывод данной панели нежелателен
• <META HTTP-EQUIV="MSThemeCompatible" Content="No">
- Поддержка интефейса, используемого в Windows XP. Если вы пользуетесть Windows XP, то Internet Explorer 6 использует новый внешний вид некоторых элементов (кнопки, полосы прокрутки), как в Windows XP. Вы может отключить эту поддержку
• <META HTTP-EQUIV="Page-Enter" CONTENT="revealTrans(Duration=4.0,Transition=12)"> - эффект при заходе на страницу
• <META HTTP-EQUIV="Page-Exit" CONTENT="revealTrans(Duration=4.0,Transition=12)"> - эффект при уходе со страницы
• <META HTTP-EQUIV="Site-Enter" CONTENT="revealTrans(Duration=4.0,Transition=12)"> - эффект при заходе на сайт
• <META HTTP-EQUIV="Site-Exit" CONTENT="revealTrans(Duration=4.0,Transition=12)"> - эффект при уходе с сайта,
где Duration задает время в секундах, а Transition - номер эффекта
10. Тег <TABLE> создает таблицу. Все прочие элементы таблицы должны быть вложенными в него. Допускается также вложение таблиц одна в другую, т.е. содержимым ячейки может быть другая таблица. Закрывающий тег обязателен
• align - Выравнивание таблицы относительно документа. Возможные значения: center, left, right
• background - Строка, определяющая рисунок для заднего фона
• bgcolor - Определяет задний фон таблицы
• border - Толщина рамки в пикселах. Если атрибут не указан, то таблица выводится без видимой рамки
• bordercolor - Цвет рамки
• cellspacing - Задает расстояние между ячейками таблицы
• cellpadding - Задает расстояние между содержимым ячейки и ее рамкой
• rules - Описывает рамки вокруг таблицы. Может принимать следующие значения
all - Отображает все части рамки внутри таблицы
cols - Отображает все вертикальные рамки внутри таблицы
groups - Отображает горизонтальные части рамки между группами таблицы THEAD, TBODY, TFOOT
none - Удаляет все рамки вокруг таблицы
rows - Отображает все горизонтальные рамки внутри таблицы
• summary - Описание таблицы для удобства людей, использующих браузеры, поддерживающие азбуку Бройля или речевой вывод
• title - Всплывающая подсказка
• width - Ширина таблицы в процентах или пикселах
• title - Всплывающая подсказка
• <TD> - определяет отдельную ячейку в таблице
• <TR> - определяет строку в таблице