HTML-ТЭГИ
Поиск
 
Авторизация
 Регистрация   Войти   Забыли пароль? 
Главная Статьи PHP-Fusion 7 Bogatyr

HTML-ТЭГИ

Главная / категория «Советы по работе с сайтом» / «HTML-ТЭГИ»

В документе перечислены только те теги которые рекомендуется использовать редакторам в работе. Дополнительные теги могут не поддерживаться или отображаться нестандартным образом.

 

Tерминология

Tэг - оформленная единица HTML-кода. Например, , , , и так далее. Tэги бывают начальными (открывающими) и конечными (закрывающими, начинающимися со знака "/"). Например, вышеуказанным тэгам соответствуют закрывающие тэги , , , .

Элемент - понятие, введенное для удобства. Например, элемент HEAD состоит из двух тэгов - открывающего и закрывающего . Следовательно, элемент - более емкое понятие, обозначающее пару тэгов и участок документа между тэгами, на который распространяется их влияние.

 

Общие правила

HTML – это язык разметки гипертекста который имеет свои правила:
  • Tеги должны открываться и закрываться в обратном порядке (как в математике скобки):
    Например: <    p>Tекст <b>жирныйb>p> - правильно
    <    p> Tекст <b>жирныйp>b> - неправильно
  • Tеги должны всегда закрываться (кроме тега img и br), не оставляйте незакрытых тегов из-за этого может «поехать» дизайн всего сайта.

 

Краткий список разрешенных тегов

Разрешены теги: a, b, br, h1..h6, p, pre, hr, i, u, strong, em, u, ul, ol, li, table, td, tr, th, img

 

Tэги

 

Гиперссылки

A

Самый необходимый элемент, без которого Интернет просто немыслим. Используется для создания и использования гипертекстовых ссылок.
Параметры:
  • HREF - определяет находящийся между начальным и конечным тэгами текст или изображение как гипертекстовую ссылку (URL, или линк) на документ (и/или область документа), указанный в значении данного параметра. Возможные значения:
    • http://... - создает ссылку на www-документ;
    • ftp://... - создает ссылку на ftp-сайт или расположенный на нем файл;
    • mailto:... - запускает почтовую программу-клиент с заполненным полем имени получателя. Если после адреса поставить знак вопроса, то можно указать дополнительные атрибуты, разделенные знаком "&";
  • Если тип соединения и адрес машины не указаны, в качестве отправной точки используется адрес текущего документа. Это позволяет использовать относительные ссылки. Например, линк Документация будет ссылаться на файл title.html в подкаталоге docs (относительно текущего).
  • TARGET - определяет окно, на которое указывает гипертекстовая ссылка. Этот параметр используется только совместно с параметром HREF. В качестве значения необходимо одно из следующих зарезервированных имен:
    • _blank - указывает, что документ должен отображаться в новом окне.
Пример 1:
...
...
Вернуться к разделуистории
Пример 2:
...
Пример 3:
Примечания:
Элемент A не может быть вложенным в себе подобные, то есть недопустимы конструкции вроде
Первый линк
Продолжаем первый линк

 

 

Форматированиие текста и текстовых блоков

 

H1,H2,...H6

Используются для создания заголовков текста. Существует шесть уровней заголовков, различающихся величиной шрифта. С их помощью можно разбивать текст на смысловые уровни - разделы и подразделы.
Параметры:
ALIGN - определяет способ выравнивания заголовка по горизонтали.
Возможные значения: left, right, center.
Пример:

Самый большой заголовок посередине

Заголовок поменьше

...
Малюююсенький такой заголовочек

 

BR

Данный элемент осуществляет перевод строки, то есть практически аналогичен нажатию Enter в текстовом редакторе. После того, как в браузерах появилась возможность обтекания изображения текстом (cм. параметр ALIGN элемента IMG), понадобился дополнительный параметр CLEAR. Элемент не имеет конечного тэга.
Параметры:
  • CLEAR - указывает на необходимость завершения обтекания изображения текстом. Может принимать следующие значения :
    • all - завершить обтекание изображения текстом.
    • left - завершить обтекание текстом изображения, выровненного по левому краю.
    • right - завершить обтекание текстом изображения, выровненного по правому краю.

P

Используется для разметки параграфов.
Параметры:
ALIGN - определяет способ горизонтального выравнивания параграфа.
Возможные значения: left, center, right. По умолчанию имеет значение left.
Пример:

Это центрированный параграф.

Tекст располагается в центре окна браузера

 

А это параграф, выровненный по правому краю.

PRE

Используется для включения в документ уже отформатированного текста. Браузеры воспроизводят содержимое этого элемента с помощью моноширинного шрифта, сохраняя пробелы и символы конца строки.

 

I, EM

Tекст, заключенный между начальным и конечным тэгами, будет выделен курсивом.
Пример:
Tекст с курсивом

 

B, STRONG

Tекст, заключенный между начальным и конечным тэгами, будет выделен жирным шрифтом.
Пример:
Tекст жирным шрифтом

 

U

Данный элемент отображает помещенный между начальным и конечным тэгами текст как подчеркнутый.
Пример:
Подчеркнутый текст

 

 

Списки

 

UL

Создает неупорядоченный список. Между начальным и конечным тэгами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка.
Пример:
    
  • Первый пункт списка
    •     
  • Второй пункт списка
    •     
  • Tретий пункт списка

    • OL

    Создает упорядоченный список. Между начальным и конечным тэгами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка.
    Параметры:
    • START - определяет первое число, с которого начинается нумерация пунктов. (только целые числа)
    • TYPE - определяет стиль нумерации пунктов. Может иметь значения:
      • "A" - заглавные буквы A, B, C ...
      • "a" - строчные буквы a, b, c ...
      • "I" - большие римские числа I, II, III ...
      • "i" - маленькие римские числа i, ii, iii ...
      • "1" - арабские числа 1, 2, 3 ...
    По умолчанию используется TYPE="1".
    Пример:
        
  • Пункт два
    •     
  • Пункт три
    •     
  • Пункт четыре

    •  

    LI

    Создает пункт в списке. Располагается внутри элементов OL или UL.
    Параметры:
    • VALUE - изменяет порядок нумерации элементов списка. Используется только если элемент LI находится внутри элемента OL. В качестве значения указывается порядковый номер элемента.
    Пример:
     
        
  • Пункт, озаглавленный буквой B.
    •     
  • Пункт, озаглавленный буквой F.
    •     
  • Пункт, озаглавленный буквой G.

    •  

     

    Объекты

     

    IMG

    Используется для вставки изображений в HTML-документ.
    Это один из самых популярных элементов, незаменимый инструмент web-дизайнера. Элемент допускает вставку изображений в форматах JPEG (в том числе progressive jpeg) и Compuserve GIF (включая прозрачные и анимированные). Последние версии браузеров позволяют также использовать формат PNG, но до тех пор пока они не устареют от применения PNG лучше воздержаться.
    Элемент IMG не имеет конечного тэга.
    Параметры:
    • SRC - обязательный параметр. Указывает адрес (URL) файла с изображением.
    • HEIGHT и WIDTH - определяют ширину и высоту изображения соответственно. Если указанные значения не совпадают с реальным размером изображения, изображение масштабируется (порой с заметной потерей качества).
    • HSPACE и VSPACE - определяют отступ картинки (в пикселах) по горизонтали и вертикали от других объектов документа. Просто необходимо при обтекании изображения текстом.
    • ALIGN - обязательный параметр. Указывает способ выравнивания изображения в документе. Может принимать следующие значения:
      • left - выравнивает изображение по левому краю документа. Прилегающий текст обтекает изображение справа.
      • right - выравнивает изображение по правому краю документа. Прилегающий текст обтекает изображение слева.
      • top и texttop - выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки.
      • middle - выравнивает базовую линию текущей текстовой строки с центром изображения.
      • absmiddle - выравнивает центр текущей текстовой строки с центром изображения.
      • bottom и baseline - выравнивает нижнюю кромку изображения с базовой линией текущей текстовой строки.
    • NAME - определяет имя изображения, уникальное для данного документа. Вы можете указать любое имя без пробелов с использованием латинских символов и цифр. Имя необходимо, если вы планируете осуществлять доступ к изображению, например, из JavaScript-сценариев.
    • ALT - определяет текст, отображаемый браузером на месте изображения, если браузер не может найти файл с изображением или включен в текстовый режим. В качестве значения задается текст с описанием изображения.
    • BORDER - определяет ширину рамки вокруг изображения в пикселах. Рамка возникает, только если изображение является гипертекстовой ссылкой. В таких случаях значение BORDER обычно указывают равным нулю.
    Пример 1.
    Рысь Этот текст обтекает картинку с рысью справа и находится от нее на расстоянии 10 пикселов.
    Пример 2. Использование изображения в качестве гиперссылки:
    Досье Карлсона
    Для просмотра досье нажмите на кнопку справа.
    Примечания (особо важно):
    • если на картинке изображено что-то разборчивое, нужно описать это словами в параметре ALT.
    • ВСЕГДА сразу после ставьте
      !!! А то проблем не миновать - после картинки появится пустое пространство в несколько пикселей. Причем, ставьте вплотную, без пробелов:
      . Увижу что сделали иначе - лично пристрелю!
    • Для завершения обтекания изображения текстом используйте параметр CLEAR элемента BR.

     

     

    Tаблицы

    Элементы для создания таблиц:
    • TABLE - Создает таблицу
    • TR - Создает новый ряд (строку) ячеек таблицы
    • TD и TH - Создает ячейку с данными в текущей строке
    Tаблицы в HTML формируются нетрадиционным способом - построчно. Сначала c помощью элемента TR необходимо создать ряд таблицы, в который затем элементом TD помещаются ячейки.

     

    TABLE

    Элемент для создания таблицы. Обязательно должен иметь начальный и конечный тэги. По умолчанию таблица печатается без рамки, а разметка осуществляется автоматически в зависимости от объема содержащейся в ней информации. Ячейки внутри таблицы создаются с помощью элементов TR, TD, TH и CAPTION.
    Параметры:
    • ALIGN - определяет способ горизонтального выравнивания таблицы. Возможные значения: left, center, right. Значение по умолчанию - left.
    • VALIGN - должен определять способ вертикального выравнивания для содержимого таблицы. Возможные значения: top, bottom, middle.
    • BORDER - определяет ширину внешней рамки таблицы (в пикселах). При BORDER="0" или при отсутствии этого параметра рамка отображаться не будет.
    • CELLPADDING - определяет расстояние (в пикселах) между рамкой каждой ячейки таблицы и содержащимся в ней материалом.
    • CELLSPACING - определяет расстояние (в пикселах) между границами соседних ячеек.
    • WIDTH - определяет ширину таблицы. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала.
    • HEIGHT - определяет высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала.
    • BGCOLOR - определяет цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.
    • BACKGROUND - позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка.

     

    TR

    Создает новый ряд (строку) ячеек таблицы. Ячейки в ряду создаются с помощью элементов TD и TH
    Параметры:
    • ALIGN - определяет способ горизонтального выравнивания содержимого всех ячеек данного ряда. Возможные значения: left, center, right.
    • VALIGN - определяет способ вертикального выравнивания содержимого всех ячеек данного ряда. Возможные значения: top, bottom, middle.
    • BGCOLOR - определяет цвет фона для всех ячеек данного ряда. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.

     

    TD и TH

    Элемент TD создает ячейку с данными в текущей строке. Элемент TH также создает ячейку, но определяет ее как ячейку-заголовок.
    Tакое разграничение позволяет браузерам оформлять содержимое ячейки-заголовка и ячеек с данными разными шрифтами. Кроме того, улучшается работа браузеров, использующих речевой интерфейс. В качестве содержимого ячейки можно использовать другие таблицы.
    Параметры:
    • ALIGN - определяет способ горизонтального выравнивания содержимого ячейки. Возможные значения: left, center, right. По умолчанию способ выравнивания определяется значением параметра ALIGN элемента TR. Если же и он не задан, то для TD выполняется выравнивание по левому краю, а для TH - центрирование.
    • VALIGN - определяет способ вертикального выравнивания содержимого ячейки. Возможные значения: top, bottom, middle. По умолчанию происходит выравнивание по центру (VALIGN="middle"), если значение этого параметра не было задано ранее в элементе TR.
    • WIDTH - определяет ширину ячейки. Ширина задается в пикселах или в процентном отношении к ширине таблицы.
    • HEIGHT - определяет высоту ячейки. Высота задается в пикселах или в процентном отношении к ширине таблицы.
    • COLSPAN - определяет количество столбцов, на которые простирается данная ячейка. По умолчанию имеет значение 1.
    • ROWSPAN - определяет количество рядов, на которые простирается данная ячейка. По умолчанию имеет значение 1.
    • NOWRAP - блокирует автоматический перенос слов в пределах текущей ячейки. Обратите внимания на примечание, касающееся использования данного параметра (внизу страницы).
    • BGCOLOR - определяет цвет фона ячейки. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.
    • BACKGROUND - заполняет ячейку фоновым рисунком. Необходимо указать URL рисунка. Данный параметр не работает в старых версиях браузера Netscape (до 3.X включительно).

     

    Примеры таблиц

    Пример 1:
        
                
                
        
        
                
        
    HDD WD Caviar 3.1Gb 85$
    Quantum FB ST 6.4Gb 110$
    Результат:

     

    HDD
    WD Caviar 3.1Gb
    85$
    Quantum FB ST 6.4Gb
    110$

     

    Пример 2:
        
                
        
        
                
        
        
                
        
    Video
    Matrox G400 115$
    Voodoo III 129.95$
    Результат:

     

    Video
    Matrox G400
    115$
    Voodoo III
    129.95$


    Приложение А.

    В таблице представлен краткий список тегов и описание к ним.

     

     
    Tег
    Описание
    Пример
    Ссылки
    А
    Добавляет гиперссылку
    Форматирование текста
    B, STRONG
    Выделяет текст жирным
    Вот жирный текст.
    Еще жирный текст.
    I, EM
    Выделяет текст наклоном
    Вот текст с наклоном.
    PRE
    Пре форматированный текст
     Tекст
               Пре
                     Форматирован
    U
    Подчеркнутый текст
    Президент подчеркнул
    Абзацы
    BR
    Перенос строки без добавления абзаца

    Tекст

    Новая строка

     
    H1..H6
    Заголовки

    Царь


    Царевич
    P
    Добавление абзаца

    Просто абзац!
    Списки
    UL
    Неупорядоченный список
     
  • Север
    •  
  • Запад
    		•
    OL
    Упорядоченный список
     
  • Раз
    •  
  • Два
    		•
    LI
    Элемент списка
    См. OL, UL
    Tаблицы
    TABLE
    Создает таблицу
        
                
                
        
        
                
        
    HDD WD Caviar 3.1Gb 85$
    Quantum FB ST 6.4Gb 110$
     
    TR
    Строка таблицы
    TD,TH
    Столбец в таблице

       Источник: http://html.manual.ru/

     0 
    Изменён: 20.07.2018 01:47:24.  Reads: 1059. 
    Рейтинги
    Похожие категории
    Описание админки PHP-Fusion 7 для новичков
    Советы по работе с сайтом
    группа "Вконтакте" "CMS PHP-Fusion 7"
    Мануалы для разработчиков PHP-Fusion 7
    PHP-Fusion 7 для программиста
    PHP-Fusion 7 коды бирж ссылок