Economics-Mag.ru

Теги — это слова языка Php. С помощью их можно преобразовать простой поток текста в украшенный документ с ясной текстурой. Общий перечень HTML-тегов имеет около тысячи пунктов, но, на деле регулярно применяется намного меньше. Они осуществляют различные функции — от возведения зрительного каркаса страницы и форматирования текста до включения посторонних документов и соответствия декорирования формальным требованиям сети-интернет.

Конструкция документа

Чтобы интернет-страница правильно отражалась интернет-браузером и прекрасно оценивалась роботами, она обязана иметь установленную конструкцию.

Первым тегом документа должен быть <!DOCTYPE&ДжиТи;, декларирующий, к какому виду он относится. Как раз в соответствии с доктайпом интернет-браузер будет визуализировать верстку. Самым распространенным видом считается эталон Php5, который оглашается так:

<!DOCTYPE php&ДжиТи;

Страничка обязана иметь крупнокорневой элемент, обвертывающий все ее содержание. Данную функцию осуществляет тег php.

Вся казенная информация располагается внутри секции head, но фактически текст, который будет заметен клиенту вполне может быть заключен в тег body.

<!DOCTYPE php&ДжиТи;
<php&ДжиТи;
<head&ДжиТи;
<!-- казенная информация --&ДжиТи;
</head&ДжиТи;
<body&ДжиТи;
<!-- содержание страницы --&ДжиТи;
</body&ДжиТи;
</php&ДжиТи;

Применение тега body не обязательно, но, является сильной практикой. Это дает возможность хорошо установить конструкцию интернет-страницы, отметить начало и конец контентной части.

Любой тег считается полновесной секцией с охватываемым, потому имеет открывающую и закрывающую части.

Казенная информация

Внутри тега head прописываются данные, которые не заметны клиенту, однако актуальны для веб-документа.

Заголовок страницы, который будет отражаться во вкладке интернет-браузера, указывается в теге title.

<head&ДжиТи;
<title&ДжиТи;FB.ru</title&ДжиТи;
</head&ДжиТи;

Различная необходимая казенная информация вполне может быть показана в качестве мета-тегов, которые не имеют закрывающей части. Метаинформация описывается признаками тега meta:

• name — имя представляемого качества;
• content — его значение;
• http-equiv — распоряжение на то, что этот метатег должен быть переделан в HTTP-заголовок;
• charset — шифровка, в которой документ был сохранен.

Ниже представлен перечень html-тегов с признаками, которые способны понадобиться для передачи значительных данных:

Включение документов

Для полновесной работы интернет-странице обычно необходимы особые источники, к примеру, образы и скрипты. Они могут быть включены из посторонних документов либо установлены в самом документе.

Образы должны быть обозначены внутри тега head, чтобы снабдить верное отражение страницы. Для включения документа стилей применяется незакрывающийся тег link с признаками href="адрес документа" и rel="stylesheet", который показывает интернет-браузеру, что нагруженный документ считается таблицей CSS. Определение стилевых требований внутри самой страницы может быть выполнено в теге style.

Включение скриптов в казенной секции может задерживать загрузку, потому их довольно часто провозглашают в самом верху документа перед закрывающим тегом body. Для установки адреса документа применяется признак src. Также, script вполне может быть опубликован внутри самого тега, однако чтобы интернет-браузер увидел его, адрес показывать не стоит.

Образец включения документов:

<php&ДжиТи;
<head&ДжиТи;
<link href="style.css" rel="stylesheet"&ДжиТи;
</head&ДжиТи;
<body&ДжиТи;


<script src="script.js"&ДжиТи;</script&ДжиТи;
</body&ДжиТи;
</php&ДжиТи;

Образец определения скриптов и стилей внутри страницы:

<php&ДжиТи;
<head&ДжиТи;
<style&ДжиТи;
h1 { color: green; }
h2 { color: blue; }
</style&ДжиТи;
</head&ДжиТи;
<body&ДжиТи;

<script&ДжиТи;
var header = document.getElementById('header');
header.style.border = "2px solid red";
</script&ДжиТи;
</body&ДжиТи;
</php&ДжиТи;

Метка страницы

Чтобы зрительно разделить непрерывный поток неформатированного текста на смысловые компании, сделать колонки и некоторые секции, применяются скелетные HTML-теги. Они создают блоковые баки, для которых можно установить любое декорирование при помощи CSS.

Самый распространенный тег гипертекстовой разметки — это, вне сомнения, div. Он не несет никакой смысловой перегрузки и может применяться для группы любых частей текста.

Помимо этого, есть несколько смысловых структурных тегов, внедренных эталоном Php5. Они помогают дать их охватываемому установленную смысловую нагрузку, наметив его, к примеру, как блок навигации либо погреб веб-сайта.

Перечень HTML-тегов, которые имеют смысловое значение на уровне целой страницы:

Также, свежий эталон дает возможность семантически соединять медиа-контент с подписью при помощи тегов figure и figcaption.

<figure&ДжиТи;
<img src="elefant.jpg" alt="" /&ДжиТи;
<figcaption&ДжиТи;Африканский слон</figcaption&ДжиТи;
</figure&ДжиТи;

Теги заголовков

Для выделения заголовков различных значений есть целая команда тегов от <h1&ДжиТи; до <h6&ДжиТи;. Литера h — первая литера слова header, но индекс рядом с ней — уровень заголовка.

<h1&ДжиТи;Заголовок первого значения</h1&ДжиТи;
<h2&ДжиТи;Заголовок 2-го значения</h2&ДжиТи;
<h3&ДжиТи;Заголовок 3-го значения</h3&ДжиТи;
<h4&ДжиТи;Заголовок 4-го значения</h4&ДжиТи;
<h5&ДжиТи;Заголовок 5-го значения</h5&ДжиТи;
<h6&ДжиТи;Заголовок шестого значения</h6&ДжиТи;

На деле в первую очередь применяются первые 3 вида.

Декорирование гиперссылок

Гиперссылки, связывающие различные страницы, — это база Глобальной сети, потому их декорированию в Php уделяется внимание. Сноски должны отличаться на фоне прочего текста, изначально они имеют голубой оттенок и выделение. Такое декорирование гарантирует тег <a&ДжиТи;.

Общий перечень атрибутов HTML-тега гиперссылки:

• все многогранные свойства, такие как class, id, style;
• href — адрес страницы, на которую будет сделан переход;
• target — показывает, где необходимо раскрыть свежую страничку. Изначально целевой считается нынешняя закладка, значение blank устанавливает изобретение новой вкладки.
• download — вместо прохода случится закачка обозначенного документа на персональный компьютер клиента;
• rel — назначен для поисковых машин, со свойством nofollow запрещает переход бота по сноске;
• type — показывает MIME-тип целевого документа.

Медиаконтент

Интернет был бы весьма неинтересным без иллюстраций, видео и остального медиаконтента. В стереотипе Php есть несколько тегов для его врезки на страничку.

Для расположения фотографий назначен тег img со следующими особыми признаками:

• src — адрес иллюстрации;
• alt — другой документ, который будет отображен, если в ходе закачки картинки появится ошибка;
• width, height — габариты.

Вделываемые субъекты могут быть помещены внутри тегов object либо embed, также, эталон Php5 ввел особые теги video и audio. Они владеют импозантным списком атрибутов, контролирующих отражение и воссоздание медиаконтента.

Тег iframe выполняет автономный непостоянный каркас, в который вполне может быть загружен другой веб-документ.

Canvas дает возможность формировать разные картинки и динамически жонглировать ими с повышенной отдачей при помощи JavaScript.

Исправление текста

Перечень HTML-тегов, созданных для форматирования текстового текста, весьма высок.

• b, strong — толстое указание;
• i, em, dfn — шрифт;
• q, blockquote — выделение цитат;
• code, kbd — моноширинный шрифт;
• del, с — вымарывание;
• ins, u — выделение;
• mark — выделение золотым;
• sub — точный индекс;
• sup — надстрочный индекс;
• small — документ большего объема сравнивая с нынешним.

Насильственные переносы можно поставить при помощи тега <br&ДжиТи;. <wbr&ДжиТи; скажет интернет-браузеру вероятные места разрыва строки. Также, есть тег <pre&ДжиТи;, к тексту которого не используется исправление, сохраняются все пробелы и переносы.

Оформить документ в качестве абзацев сможет помочь тег <p&ДжиТи;, но поделить их узкой серой чертой — <hr&ДжиТи;.

Диалоговые детали

Весьма актуальны для работы сайтов формы и разные диалоговые детали. Они дают возможность приобретать и транслировать нужные данные, вести взаимодействие с клиентом, формировать спортивный текст.

Один из наиболее значительных частей фигур — поле ввода, показанное тегом <input&ДжиТи;. У него есть возможность принимать большое количество различных фигур исходя из значения атрибута type.

Иные детали фигур:

• button — клавиша;
• select — выпадающий перечень;
• textarea — многострочное поле ввода;
• label — роспись для поля.

Тег form укрупняет диалоговые детали и гарантирует отправку данных на компьютер, но fieldset — соединяет сопряженные по резону поля в компании.

Декорирование списков

В Php есть 3 вида списков: клейменный, пронумерованный и перечень определений.

Перечень определений состоит из:

• бака — <dl&ДжиТи;;
• наименования термина — <dt&ДжиТи;;
• изображения термина — <dd&ДжиТи;.

<dl&ДжиТи;
<dt&ДжиТи;Термин 1</dt&ДжиТи;
<dd&ДжиТи;Описание первого термина</dd&ДжиТи;
<dt&ДжиТи;Термин 2</dt&ДжиТи;
<dd&ДжиТи;Описание 2-го термина</dd&ДжиТи;
</dl&ДжиТи;

HTML-тег нумерованного перечня — <ol&ДжиТи; (ordered list), маркированного — <ul&ДжиТи; (unordered list). Их пункты поворачиваются в тег <li&ДжиТи; (list item).

<ul&ДжиТи;
<li&ДжиТи;любой</li&ДжиТи;
<li&ДжиТи;рыбак</li&ДжиТи;
<li&ДжиТи;хочет</li&ДжиТи;
<li&ДжиТи;понимать</li&ДжиТи;
<li&ДжиТи;где</li&ДжиТи;
<li&ДжиТи;сидит</li&ДжиТи;
<li&ДжиТи;фазан</li&ДжиТи;
</ul&ДжиТи;

Исправление таблиц

Вторым значительным объектом интернета считаются таблицы, которые позволяют классифицировать и комфортно донести огромные размеры информации.

Перечень HTML-тегов таблиц:

• table — бак таблицы;
• thead — шапка, как правило имеющая заголовки;
• tbody — тело таблицы с главными данными;
• tfoot — футер, в котором подводятся результаты;
• tr — ряд ячей;
• td — обычная клетка;
• th — клетка заголовка, имеет свое декорирование изначально;
• col — дает возможность отметить колонку таблицы и использовать к ней образы;
• colgroup — команда колонок;
• caption — роспись к таблице.

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