HTML — Обзор
HTML расшифровывается как «язык программирования» и является наиболее широко используемым языком для написания веб-страниц.
-
Гипертекст относится к тому, как веб-страницы (документы HTML) связаны друг с другом. Таким образом, ссылка, доступная на веб-странице, называется гипертекстовой.
-
Как следует из его названия, HTML — это язык разметки, который означает, что вы используете HTML, чтобы просто «разметить» текстовый документ с помощью тегов, которые сообщают веб-браузеру, как структурировать его для отображения.
Гипертекст относится к тому, как веб-страницы (документы HTML) связаны друг с другом. Таким образом, ссылка, доступная на веб-странице, называется гипертекстовой.
Как следует из его названия, HTML — это язык разметки, который означает, что вы используете HTML, чтобы просто «разметить» текстовый документ с помощью тегов, которые сообщают веб-браузеру, как структурировать его для отображения.
Первоначально HTML разрабатывался с целью определения структуры документов, таких как заголовки, абзацы, списки и т. Д., Для облегчения обмена научной информацией между исследователями.
Теперь HTML широко используется для форматирования веб-страниц с помощью различных тегов, доступных на языке HTML.
Основной HTML-документ
В простейшем виде ниже приведен пример документа HTML:
<!DOCTYPE html> <html> <head> <title>This is document title</title> </head> <body> <h1>This is a heading</h1> <p>Document content goes here.....</p> </body> </html>
HTML-теги
Как говорилось ранее, HTML является языком разметки и использует различные теги для форматирования содержимого. Эти теги заключены в угловые скобки <Tag Name> . За исключением нескольких тегов, большинство тегов имеют соответствующие закрывающие теги. Например, <html> имеет закрывающий тег </ html>, а тег <body> имеет закрывающий тег </ body> и т. Д.
Приведенный выше пример HTML-документа использует следующие теги —
| Sr.No | Тег и описание |
|---|---|
| 1 | <! DOCTYPE …>
Этот тег определяет тип документа и версию HTML. |
| 2 | <HTML>
Этот тег содержит полный HTML-документ и в основном содержит заголовок документа, который представлен тегами <head> … </ head>, и текст документа, представленный тегами <body> … </ body>. |
| 3 | <голова>
Этот тег представляет заголовок документа, который может содержать другие теги HTML, такие как <title>, <link> и т. Д. |
| 4 | <название>
Тег <title> используется внутри тега <head> для упоминания заголовка документа. |
| 5 | <тело>
Этот тег представляет тело документа, в котором хранятся другие теги HTML, такие как <h1>, <div>, <p> и т. Д. |
| 6 | <h1>
Этот тег представляет заголовок. |
| 7 | <р>
Этот тег представляет собой абзац. |
Этот тег определяет тип документа и версию HTML.
Этот тег содержит полный HTML-документ и в основном содержит заголовок документа, который представлен тегами <head> … </ head>, и текст документа, представленный тегами <body> … </ body>.
Этот тег представляет заголовок документа, который может содержать другие теги HTML, такие как <title>, <link> и т. Д.
Тег <title> используется внутри тега <head> для упоминания заголовка документа.
Этот тег представляет тело документа, в котором хранятся другие теги HTML, такие как <h1>, <div>, <p> и т. Д.
Этот тег представляет заголовок.
Этот тег представляет собой абзац.
Чтобы изучить HTML, вам нужно изучить различные теги и понять, как они ведут себя при форматировании текстового документа. Изучение HTML простое, так как пользователи должны изучить использование различных тегов, чтобы отформатировать текст или изображения для создания красивой веб-страницы.
Консорциум World Wide Web (W3C) рекомендует использовать строчные теги, начиная с HTML 4.
Структура документа HTML
Типичный документ HTML будет иметь следующую структуру —
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>
Мы будем изучать все теги заголовка и тела в последующих главах, но сейчас давайте посмотрим, что такое тег объявления документа.
Декларация <! DOCTYPE>
Тег объявления <! DOCTYPE> используется веб-браузером для понимания версии HTML, используемой в документе. Текущая версия HTML 5 и использует следующую декларацию —
<!DOCTYPE html>
Существует много других типов объявлений, которые могут использоваться в документе HTML, в зависимости от используемой версии HTML. Подробнее об этом мы увидим при обсуждении тега <! DOCTYPE …> вместе с другими тегами HTML.
HTML — основные теги
Заголовки теги
Любой документ начинается с заголовка. Вы можете использовать разные размеры для ваших заголовков. HTML также имеет шесть уровней заголовков, в которых используются элементы <h1>, <h2>, <h3>, <h4>, <h5> и <h6> . При отображении любого заголовка браузер добавляет одну строку до и одну строку после этого заголовка.
пример
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
Это даст следующий результат —
Тэг абзаца
Тег <p> предлагает способ структурировать ваш текст в разные абзацы. Каждый абзац текста должен находиться между открывающим тегом <p> и закрывающим </ p>, как показано ниже в примере —
пример
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
Это даст следующий результат —
Тег разрыва строки
Всякий раз, когда вы используете элемент <br /> , все, что следует за ним, начинается со следующей строки. Этот тег является примером пустого элемента, где вам не нужно открывать и закрывать теги, так как между ними нет ничего промежуточного.
Тег <br /> имеет пробел между символами br и косой чертой. Если вы пропустите это место, у старых браузеров возникнут проблемы с отображением разрыва строки, а если вы пропустите символ косой черты и просто используете <br>, это недопустимо в XHTML.
пример
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment ontime.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>
Это даст следующий результат —
Центрирование контента
Вы можете использовать тег <center>, чтобы поместить любой контент в центр страницы или в любую ячейку таблицы.
пример
<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>
Это даст следующий результат —
Горизонтальные линии
Горизонтальные линии используются для визуального разделения разделов документа. Тег <hr> создает строку от текущей позиции в документе до правого поля и соответственно разбивает строку.
Например, вы можете задать строку между двумя абзацами, как в приведенном ниже примере:
пример
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>
Это даст следующий результат —
Снова тег <hr /> является примером пустого элемента, где вам не нужны открывающие и закрывающие теги, так как между ними нечего делать.
Элемент <hr /> имеет пробел между символами hr и косой чертой. Если вы пропустите это место, старые браузеры будут иметь проблемы с рендерингом горизонтальной линии, а если вы пропустите символ косой черты и просто используете <hr>, это недопустимо в XHTML
Сохранить форматирование
Иногда вы хотите, чтобы ваш текст соответствовал точному формату написанного в HTML-документе. В этих случаях вы можете использовать предварительно отформатированный тег <pre> .
Любой текст между открывающим тегом <pre> и закрывающим тегом </ pre> сохранит форматирование исходного документа.
пример
<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>
</html>
Это даст следующий результат —
Попробуйте использовать тот же код, не сохраняя его внутри тегов <pre> … </ pre>
Неразрывные пробелы
Предположим, вы хотите использовать фразу «12 Angry Men». Здесь вы не хотели бы, чтобы браузер разделял «12, Angry» и «Men» на две строки —
An example of this technique appears in the movie "12 Angry Men."
В тех случаях, когда вы не хотите, чтобы клиентский браузер разбивал текст, вы должны использовать неразрывный пробел & nbsp; вместо нормального пространства. Например, при кодировании «12 Angry Men» в абзаце, вы должны использовать что-то похожее на следующий код —
пример
<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>An example of this technique appears in the movie "12 Angry Men."</p>
</body>
</html>
Это даст следующий результат —
HTML — элементы
HTML-элемент определяется начальным тегом. Если элемент содержит другое содержимое, он заканчивается закрывающим тегом, где имени элемента предшествует косая черта, как показано ниже с несколькими тегами —
| Начать тег | содержание | Конечный тег |
|---|---|---|
| <Р> | Это содержание абзаца. | </ Р> |
| <H1> | Это заголовок контента. | </ H1> |
| <DIV> | Это разделение контента. | </ DIV> |
| <br /> |
Итак, здесь <p> …. </ p> — это элемент HTML, <h1> … </ h1> — это другой элемент HTML. Есть некоторые элементы HTML, которые не нужно закрывать, такие как элементы <img … /> , <hr /> и <br /> . Они известны как пустые элементы .
HTML-документы состоят из дерева этих элементов, и они определяют, как должны быть построены HTML-документы, и какой контент должен быть размещен в какой части HTML-документа.
HTML-тег против элемента
HTML-элемент определяется начальным тегом . Если элемент содержит другое содержимое, он заканчивается закрывающим тегом .
Например, <p> является начальным тегом абзаца, а </ p> является закрывающим тегом того же абзаца, но <p> Это абзац </ p> является элементом абзаца.
Вложенные элементы HTML
Разрешено хранить один элемент HTML внутри другого элемента HTML —
пример
<!DOCTYPE html>
<html>
<head>
<title>Nested Elements Example</title>
</head>
<body>
<h1>This is <i>italic</i> heading</h1>
<p>This is <u>underlined</u> paragraph</p>
</body>
</html>
Это покажет следующий результат —
HTML — атрибуты
Мы видели несколько тегов HTML и их использование, таких как теги заголовков <h1>, <h2>, тег абзаца <p> и другие теги. Мы использовали их до сих пор в их простейшей форме, но большинство тегов HTML также могут иметь атрибуты, которые являются дополнительными битами информации.
Атрибут используется для определения характеристик элемента HTML и помещается внутри открывающего тега элемента. Все атрибуты состоят из двух частей — имени и значения
-
Имя — это свойство, которое вы хотите установить. Например, элемент абзаца <p> в этом примере содержит атрибут с именем align , который можно использовать для указания выравнивания абзаца на странице.
-
Значение — это то, что вы хотите, чтобы значение свойства было установлено и всегда помещалось в кавычки. В приведенном ниже примере показаны три возможных значения атрибута align: left, center и right .
Имя — это свойство, которое вы хотите установить. Например, элемент абзаца <p> в этом примере содержит атрибут с именем align , который можно использовать для указания выравнивания абзаца на странице.
Значение — это то, что вы хотите, чтобы значение свойства было установлено и всегда помещалось в кавычки. В приведенном ниже примере показаны три возможных значения атрибута align: left, center и right .
Имена и значения атрибутов нечувствительны к регистру. Однако Консорциум World Wide Web (W3C) рекомендует использовать строчные атрибуты / значения атрибутов в своих рекомендациях по HTML 4.
пример
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align = "left">This is left aligned</p>
<p align = "center">This is center aligned</p>
<p align = "right">This is right aligned</p>
</body>
</html>
Это покажет следующий результат —
Основные атрибуты
Четыре основных атрибута, которые можно использовать в большинстве элементов HTML (хотя и не во всех):
- Я бы
- заглавие
- Учебный класс
- Стиль
Атрибут Id
Атрибут id тега HTML можно использовать для уникальной идентификации любого элемента на странице HTML. Существует две основные причины, по которым вы можете захотеть использовать атрибут id для элемента:
-
Если элемент содержит атрибут id в качестве уникального идентификатора, можно идентифицировать только этот элемент и его содержимое.
-
Если у вас есть два элемента с одинаковыми именами на веб-странице (или в таблице стилей), вы можете использовать атрибут id, чтобы различать элементы с одинаковыми именами.
Если элемент содержит атрибут id в качестве уникального идентификатора, можно идентифицировать только этот элемент и его содержимое.
Если у вас есть два элемента с одинаковыми именами на веб-странице (или в таблице стилей), вы можете использовать атрибут id, чтобы различать элементы с одинаковыми именами.
Мы обсудим таблицу стилей в отдельном уроке. А пока давайте используем атрибут id, чтобы различать два элемента абзаца, как показано ниже.
пример
<p id = "html">This para explains what is HTML</p> <p id = "css">This para explains what is Cascading Style Sheet</p>
Атрибут заголовка
Атрибут title дает рекомендуемый заголовок для элемента. Их синтаксис для атрибута title аналогичен объяснению для атрибута id —
Поведение этого атрибута будет зависеть от элемента, который его несет, хотя он часто отображается как всплывающая подсказка, когда курсор находится над элементом или во время загрузки элемента.
пример
<!DOCTYPE html>
<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html>
Это даст следующий результат —
Теперь попробуйте навести курсор на «Пример заголовка с заголовком», и вы увидите, что любой заголовок, который вы использовали в своем коде, появляется как подсказка курсора.
Атрибут класса
Атрибут class используется для связывания элемента с таблицей стилей и определяет класс элемента. Вы узнаете больше об использовании атрибута класса, когда вы изучите каскадную таблицу стилей (CSS). Так что сейчас вы можете избежать этого.
Значением атрибута также может быть разделенный пробелами список имен классов. Например —
class = "className1 className2 className3"
Атрибут стиля
Атрибут style позволяет указать правила каскадной таблицы стилей (CSS) внутри элемента.
<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<p style = "font-family:arial; color:#FF0000;">Some text...</p>
</body>
</html>
Это даст следующий результат —
На данный момент мы не изучаем CSS, поэтому давайте продолжим, не беспокоясь о CSS. Здесь вам необходимо понять, что такое атрибуты HTML и как их можно использовать при форматировании контента.
Атрибуты интернационализации
Существует три атрибута интернационализации, которые доступны для большинства (хотя и не для всех) элементов XHTML.
- реж
- языки
- XML: языки
Атрибут dir
Атрибут dir позволяет вам указать браузеру направление, в котором должен передаваться текст. Атрибут dir может принимать одно из двух значений, как вы можете видеть в следующей таблице:
| Значение | Имея в виду |
|---|---|
| л | Слева направо (значение по умолчанию) |
| РТЛ | Справа налево (для языков, таких как иврит или арабский, которые читаются справа налево) |
пример
<!DOCTYPE html>
<html dir = "rtl">
<head>
<title>Display Directions</title>
</head>
<body>
This is how IE 5 renders right-to-left directed text.
</body>
</html>
Это даст следующий результат —
Когда атрибут dir используется в теге <html>, он определяет, как текст будет представлен во всем документе. При использовании внутри другого тега он контролирует направление текста только для содержимого этого тега.
Атрибут lang
Атрибут lang позволяет указать основной язык, используемый в документе, но этот атрибут был сохранен в HTML только для обратной совместимости с более ранними версиями HTML. Этот атрибут был заменен атрибутом xml: lang в новых документах XHTML.
Значения атрибута lang представляют собой стандартные двухсимвольные коды языка ISO-639. Проверьте языковые коды HTML: ISO 639 для полного списка языковых кодов.
пример
<!DOCTYPE html>
<html lang = "en">
<head>
<title>English Language Page</title>
</head>
<body>
This page is using English Language
</body>
</html>
Это даст следующий результат —
Атрибут xml: lang
Атрибут xml: lang является заменой XHTML для атрибута lang . Значение атрибута xml: lang должно быть кодом страны ISO-639, как упоминалось в предыдущем разделе.
Общие атрибуты
Вот таблица некоторых других атрибутов, которые легко использовать со многими тегами HTML.
| атрибут | Опции | функция |
|---|---|---|
| выравнивать | правый, левый, центр | Горизонтально выравнивает теги |
| VALIGN | верх, середина, низ | Вертикально выравнивает теги в элементе HTML. |
| BGCOLOR | числовые, шестнадцатеричные, значения RGB | Размещает цвет фона позади элемента |
| фон | URL | Размещает фоновое изображение за элементом |
| Я бы | Определяемые пользователем | Называет элемент для использования с каскадными таблицами стилей. |
| учебный класс | Определяемые пользователем | Классифицирует элемент для использования с каскадными таблицами стилей. |
| ширина | Числовое значение | Определяет ширину таблиц, изображений или ячеек таблицы. |
| рост | Числовое значение | Определяет высоту таблиц, изображений или ячеек таблицы. |
| заглавие | Определяемые пользователем | «Всплывающее» название элементов. |
Мы увидим похожие примеры и продолжим изучение других HTML-тегов. Полный список тегов HTML и связанных с ними атрибутов см. В разделе «Список тегов HTML» .
HTML — форматирование
Если вы используете текстовый процессор, вы должны быть знакомы со способностью делать текст жирным, курсивом или подчеркиванием; Это всего лишь три из десяти доступных вариантов, чтобы указать, как текст может отображаться в HTML и XHTML.
Жирный текст
Все, что появляется внутри элемента <b> … </ b> , отображается жирным шрифтом, как показано ниже —
пример
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>
Это даст следующий результат —
Курсивный текст
Все, что появляется внутри элемента <i> … </ i>, выделено курсивом, как показано ниже —
пример
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses an <i>italicized</i> typeface.</p>
</body>
</html>
Это даст следующий результат —
Подчеркнутый текст
Все, что появляется внутри элемента <u> … </ u> , отображается с подчеркиванием, как показано ниже —
пример
<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses an <u>underlined</u> typeface.</p>
</body>
</html>
Это даст следующий результат —
Текст удара
Все, что появляется внутри элемента <strike> … </ strike>, отображается зачеркиванием, которое представляет собой тонкую линию в тексте, как показано ниже.
пример
<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>
Это даст следующий результат —
Моноширинный шрифт
Содержимое элемента <tt> … </ tt> написано моноширинным шрифтом. Большинство шрифтов известны как шрифты переменной ширины, потому что разные буквы имеют разную ширину (например, буква «м» шире, чем буква «я»). Однако в моноширинном шрифте каждая буква имеет одинаковую ширину.
пример
<!DOCTYPE html>
<html>
<head>
<title>Monospaced Font Example</title>
</head>
<body>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>
</html>
Это даст следующий результат —
Верхний текст
Содержимое элемента <sup> … </ sup> написано в верхнем индексе; размер используемого шрифта равен размеру символов, окружающих его, но отображается на половину высоты над другими символами.
пример
<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
</body>
</html>
Это даст следующий результат —
Подстрочный текст
Содержимое элемента <sub> … </ sub> записывается в нижнем индексе; используемый размер шрифта совпадает с символами, окружающими его, но отображается на половину высоты символа ниже других символов.
пример
<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>
</html>
Это даст следующий результат —
Вставленный текст
Все, что появляется внутри элемента <ins> … </ ins>, отображается как вставленный текст.
пример
<!DOCTYPE html>
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>
Это даст следующий результат —
Удаленный текст
Все, что появляется внутри элемента <del> … </ del> , отображается как удаленный текст.
пример
<!DOCTYPE html>
<html>
<head>
<title>Deleted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>
Это даст следующий результат —
Большой текст
Содержимое элемента <big> … </ big> отображается на один размер шрифта больше, чем остальная часть текста, его окружающего, как показано ниже —
пример
<!DOCTYPE html>
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
<p>The following word uses a <big>big</big> typeface.</p>
</body>
</html>
Это даст следующий результат —
Меньший текст
Содержимое элемента <small> … </ small> отображается на один размер шрифта меньше, чем остальная часть текста, его окружающего, как показано ниже —
пример
<!DOCTYPE html>
<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>The following word uses a <small>small</small> typeface.</p>
</body>
</html>
Это даст следующий результат —
Группировка контента
Элементы <div> и <span> позволяют группировать несколько элементов для создания разделов или подразделов страницы.
Например, вы можете разместить все сноски на странице в элементе <div>, чтобы указать, что все элементы в этом элементе <div> относятся к сноскам. Затем вы можете прикрепить стиль к этому элементу <div>, чтобы они отображались с использованием специального набора правил стиля.
пример
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div id = "menu" align = "middle" >
<a href = "/index.htm">HOME</a> |
<a href = "/about/contact_us.htm">CONTACT</a> |
<a href = "/about/index.htm">ABOUT</a>
</div>
<div id = "content" align = "left" bgcolor = "white">
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>
</html>
Это даст следующий результат —
Элемент <span>, с другой стороны, может использоваться только для группировки встроенных элементов. Итак, если у вас есть часть предложения или абзаца, которую вы хотите сгруппировать, вы можете использовать элемент <span> следующим образом.
пример
<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example</title>
</head>
<body>
<p>This is the example of <span style = "color:green">span tag</span>
and the <span style = "color:red">div tag</span> alongwith CSS</p>
</body>
</html>
Это даст следующий результат —
Эти теги обычно используются с CSS, чтобы позволить вам прикрепить стиль к разделу страницы.
HTML — Фраза Теги
Теги фразы были десикментированы для определенных целей, хотя они отображаются аналогично другим базовым тегам, таким как <b>, <i>, <pre> и <tt> , которые вы видели в предыдущей главе. Эта глава проведет вас через все важные теги фраз, поэтому давайте начнем видеть их один за другим.
Подчеркнутый текст
Все, что появляется внутри элемента <em> … </ em>, отображается как выделенный текст.
пример
<!DOCTYPE html>
<html>
<head>
<title>Emphasized Text Example</title>
</head>
<body>
<p>The following word uses an <em>emphasized</em> typeface.</p>
</body>
</html>
Это даст следующий результат —
Помеченный текст
Все, что появляется с -в элементе <mark> … </ mark> , отображается как отмеченное желтыми чернилами.
пример
<!DOCTYPE html>
<html>
<head>
<title>Marked Text Example</title>
</head>
<body>
<p>The following word has been <mark>marked</mark> with yellow</p>
</body>
</html>
Это даст следующий результат —
Сильный текст
Все, что появляется внутри элемента <strong> … </ strong>, отображается как важный текст.
пример
<!DOCTYPE html>
<html>
<head>
<title>Strong Text Example</title>
</head>
<body>
<p>The following word uses a <strong>strong</strong> typeface.</p>
</body>
</html>
Это даст следующий результат —
Сокращение текста
Вы можете сокращать текст, помещая его внутрь, открывая теги <abbr> и закрывая </ abbr>. Если присутствует, атрибут title должен содержать это полное описание и ничего больше.
пример
<!DOCTYPE html>
<html>
<head>
<title>Text Abbreviation</title>
</head>
<body>
<p>My best friend's name is <abbr title = "Abhishek">Abhy</abbr>.</p>
</body>
</html>
Это даст следующий результат —
Акроним Элемент
Элемент <acronym> позволяет указать, что текст между тегами <acronym> и </ acronym> является аббревиатурой.
В настоящее время основные браузеры не изменяют внешний вид содержимого элемента <acronym>.
пример
<!DOCTYPE html>
<html>
<head>
<title>Acronym Example</title>
</head>
<body>
<p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p>
</body>
</html>
Это даст следующий результат —
Направление текста
Элемент <bdo> … </ bdo> обозначает двунаправленное переопределение и используется для переопределения текущего направления текста.
пример
<!DOCTYPE html>
<html>
<head>
<title>Text Direction Example</title>
</head>
<body>
<p>This text will go left to right.</p>
<p><bdo dir = "rtl">This text will go right to left.</bdo></p>
</body>
</html>
Это даст следующий результат —
Особые условия
Элемент <dfn> … </ dfn> (или элемент определения HTML) позволяет указать, что вы вводите специальный термин. Его использование похоже на курсивные слова в середине абзаца.
Как правило, вы будете использовать элемент <dfn> при первом введении ключевого термина. Самые последние браузеры отображают содержимое элемента <dfn> курсивом.
пример
<!DOCTYPE html>
<html>
<head>
<title>Special Terms Example</title>
</head>
<body>
<p>The following word is a <dfn>special</dfn> term.</p>
</body>
</html>
Это даст следующий результат —
Цитирование текста
Если вы хотите процитировать отрывок из другого источника, вы должны поместить его между тегами <blockquote> … </ blockquote> .
Текст внутри элемента <blockquote> обычно имеет отступ от левого и правого краев окружающего текста и иногда использует курсивный шрифт.
пример
<!DOCTYPE html>
<html>
<head>
<title>Blockquote Example</title>
</head>
<body>
<p>The following description of XHTML is taken from the W3C Web site:</p>
<blockquote>XHTML 1.0 is the W3C's first Recommendation for XHTML,following on
from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote>
</body>
</html>
Это даст следующий результат —
Короткие цитаты
Элемент <q> … </ q> используется, когда вы хотите добавить двойную кавычку в предложение.
пример
<!DOCTYPE html>
<html>
<head>
<title>Double Quote Example</title>
</head>
<body>
<p>Amit is in Spain, <q>I think I am wrong</q>.</p>
</body>
</html>
Это даст следующий результат —
Текст Цитаты
Если вы цитируете текст, вы можете указать источник, поместив его между открывающим тегом <cite> и закрывающим </ cite>
Как и следовало ожидать в печатной публикации, по умолчанию содержимое элемента <cite> отображается курсивом.
пример
<!DOCTYPE html>
<html>
<head>
<title>Citations Example</title>
</head>
<body>
<p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.</p>
</body>
</html>
Это даст следующий результат —
Компьютерный код
Любой программный код, отображаемый на веб-странице, должен быть помещен в теги <code> … </ code> . Обычно содержимое элемента <code> представлено моноширинным шрифтом, как и код в большинстве книг по программированию.
пример
<!DOCTYPE html>
<html>
<head>
<title>Computer Code Example</title>
</head>
<body>
<p>Regular text. <code>This is code.</code> Regular text.</p>
</body>
</html>
Это даст следующий результат —
Текст клавиатуры
Когда вы говорите о компьютерах, если вы хотите сказать читателю ввести какой-либо текст, вы можете использовать элемент <kbd> … </ kbd>, чтобы указать, что нужно вводить, как в этом примере.
пример
<!DOCTYPE html>
<html>
<head>
<title>Keyboard Text Example</title>
</head>
<body>
<p>Regular text. <kbd>This is inside kbd element</kbd> Regular text.</p>
</body>
</html>
Это даст следующий результат —
Переменные программирования
Этот элемент обычно используется вместе с элементами <pre> и <code>, чтобы указать, что содержимое этого элемента является переменной.
пример
<!DOCTYPE html>
<html>
<head>
<title>Variable Text Example</title>
</head>
<body>
<p><code>document.write("<var>user-name</var>")</code></p>
</body>
</html>
Это даст следующий результат —
Выход программы
Элемент <samp> … </ samp> указывает пример выходных данных программы, сценария и т. Д. Опять же, он в основном используется при документировании концепций программирования или кодирования.
пример
<!DOCTYPE html>
<html>
<head>
<title>Program Output Example</title>
</head>
<body>
<p>Result produced by the program is <samp>Hello World!</samp></p>
</body>
</html>
Это даст следующий результат —
Текст адреса
Элемент <address> … </ address> используется для хранения любого адреса.
пример
<!DOCTYPE html>
<html>
<head>
<title>Address Example</title>
</head>
<body>
<address>388A, Road No 22, Jubilee Hills - Hyderabad</address>
</body>
</html>
Это даст следующий результат —
HTML — метатеги
HTML позволяет указывать метаданные — дополнительную важную информацию о документе различными способами. Элементы META могут использоваться для включения пар имя / значение, описывающих свойства документа HTML, такие как автор, срок действия, список ключевых слов, автор документа и т. Д.
Тег <meta> используется для предоставления такой дополнительной информации. Этот тег является пустым элементом и поэтому не имеет закрывающего тега, но содержит информацию в своих атрибутах.
Вы можете включить в документ один или несколько метатегов в зависимости от того, какую информацию вы хотите сохранить в документе, но в целом метатеги не влияют на физический внешний вид документа, поэтому с точки зрения внешнего вида не имеет значения, включаете ли вы их или нет.
Добавление мета-тегов в ваши документы
Вы можете добавить метаданные на свои веб-страницы, поместив теги <meta> в заголовок документа, который представлен тегами <head> и </ head> . Мета-тег может иметь следующие атрибуты в дополнение к основным атрибутам —
| Sr.No | Атрибут и описание |
|---|---|
| 1 |
название Название для собственности. Может быть что угодно. Примеры включают: ключевые слова, описание, автор, исправленный, генератор и т. Д. |
| 2 |
содержание Определяет значение свойства. |
| 3 |
схема Определяет схему для интерпретации значения свойства (как объявлено в атрибуте содержимого). |
| 4 |
HTTP-эквив Используется для заголовков ответных сообщений http. Например, http-эквивалент можно использовать для обновления страницы или для установки файла cookie. Значения включают тип содержимого, срок действия, обновление и набор cookie. |
название
Название для собственности. Может быть что угодно. Примеры включают: ключевые слова, описание, автор, исправленный, генератор и т. Д.
содержание
Определяет значение свойства.
схема
Определяет схему для интерпретации значения свойства (как объявлено в атрибуте содержимого).
HTTP-эквив
Используется для заголовков ответных сообщений http. Например, http-эквивалент можно использовать для обновления страницы или для установки файла cookie. Значения включают тип содержимого, срок действия, обновление и набор cookie.
Указание ключевых слов
Вы можете использовать тег <meta> для указания важных ключевых слов, связанных с документом, а затем эти ключевые слова используются поисковыми системами при индексации вашей веб-страницы для целей поиска.
пример
Ниже приведен пример, где мы добавляем HTML, метатеги, метаданные в качестве важных ключевых слов о документе.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
Это даст следующий результат —
Описание документа
Вы можете использовать тег <meta>, чтобы дать краткое описание документа. Это снова может быть использовано различными поисковыми системами при индексации вашей веб-страницы для целей поиска.
пример
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
Дата редакции документа
Вы можете использовать тег <meta>, чтобы предоставить информацию о том, когда в последний раз документ обновлялся. Эта информация может использоваться различными веб-браузерами при обновлении вашей веб-страницы.
пример
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
Обновление документа
Тег <meta> может использоваться для указания продолжительности, после которой ваша веб-страница будет автоматически обновляться.
пример
Если вы хотите, чтобы ваша страница обновлялась каждые 5 секунд, используйте следующий синтаксис.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
<meta http-equiv = "refresh" content = "5" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
Перенаправление страницы
Вы можете использовать тег <meta> для перенаправления вашей страницы на любую другую веб-страницу. Вы также можете указать продолжительность, если вы хотите перенаправить страницу через определенное количество секунд.
пример
Ниже приведен пример перенаправления текущей страницы на другую страницу через 5 секунд. Если вы хотите перенаправить страницу сразу, не указывайте атрибут содержимого .
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
<meta http-equiv = "refresh" content = "5; url = http://www.tutorialspoint.com" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
Настройка Cookies
Файлы cookie — это данные, которые хранятся в небольших текстовых файлах на вашем компьютере и передаются между веб-браузером и веб-сервером для отслеживания различной информации в зависимости от потребностей вашего веб-приложения.
Вы можете использовать тег <meta> для хранения файлов cookie на стороне клиента, а затем эта информация может использоваться веб-сервером для отслеживания посетителя сайта.
пример
Ниже приведен пример перенаправления текущей страницы на другую страницу через 5 секунд. Если вы хотите перенаправить страницу сразу, не указывайте атрибут содержимого .
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
<meta http-equiv = "cookie" content = "userid = xyz;
expires = Wednesday, 08-Aug-15 23:59:59 GMT;" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
Если вы не указали дату и время истечения срока действия, файл cookie считается файлом cookie сеанса и будет удален при выходе пользователя из браузера.
Примечание. Вы можете ознакомиться с руководством по PHP и Cookies для получения полной информации о Cookies.
Установка имени автора
Вы можете установить имя автора на веб-странице, используя метатег. Смотрите пример ниже —
пример
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "author" content = "Mahnaz Mohtashim" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
Укажите набор символов
Вы можете использовать тег <meta> для указания набора символов, используемого на веб-странице.
пример
По умолчанию веб-серверы и веб-браузеры используют кодировку ISO-8859-1 (Latin1) для обработки веб-страниц. Ниже приведен пример установки кодировки UTF-8:
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "author" content = "Mahnaz Mohtashim" />
<meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
Чтобы обслуживать статическую страницу традиционными китайскими иероглифами, веб-страница должна содержать тег <meta> для установки кодировки Big5 —
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "author" content = "Mahnaz Mohtashim" />
<meta http-equiv = "Content-Type" content = "text/html; charset = Big5" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
HTML — Комментарии
Комментарий — это фрагмент кода, который игнорируется любым веб-браузером. Хорошей практикой является добавление комментариев в ваш HTML-код, особенно в сложные документы, для обозначения разделов документа и любых других заметок для всех, кто смотрит на код. Комментарии помогают вам и другим понять ваш код и повышают читабельность кода.
HTML-комментарии размещаются между тегами <! — … -> . Таким образом, любой контент, размещенный с тегами <! — … ->, будет рассматриваться как комментарий и будет полностью игнорироваться браузером.
пример
<!DOCTYPE html>
<html>
<head> <!-- Document Header Starts -->
<title>This is document title</title>
</head> <!-- Document Header Ends -->
<body>
<p>Document content goes here.....</p>
</body>
</html>
Это приведет к следующему результату без отображения содержимого, указанного в комментариях:
Действительный против Неверных комментариев
Комментарии не являются вложенными, что означает, что комментарий не может быть помещен в другой комментарий. Во-вторых, последовательность двойных черточек «-» может не появляться внутри комментария, кроме как как часть закрывающего тега ->. Вы также должны убедиться, что в начале комментария нет пробелов.
пример
Здесь данный комментарий является действительным комментарием и будет удален браузером.
<!DOCTYPE html>
<html>
<head>
<title>Valid Comment Example</title>
</head>
<body>
<!-- This is valid comment -->
<p>Document content goes here.....</p>
</body>
</html>
Это даст следующий результат —
Но следующая строка не является допустимым комментарием и будет отображаться браузером. Это связано с тем, что между левой угловой скобкой и восклицательным знаком есть пробел.
<!DOCTYPE html>
<html>
<head>
<title>Invalid Comment Example</title>
</head>
<body>
< !-- This is not a valid comment -->
<p>Document content goes here.....</p>
</body>
</html>
Это даст следующий результат —
Многострочные комментарии
До сих пор мы видели однострочные комментарии, но HTML также поддерживает многострочные комментарии.
Вы можете прокомментировать несколько строк специальным начальным тегом <! — и конечным тегом ->, расположенным перед первой строкой и концом последней строки, как показано в приведенном ниже примере.
пример
<!DOCTYPE html>
<html>
<head>
<title>Multiline Comments</title>
</head>
<body>
<!--
This is a multiline comment and it can
span through as many as lines you like.
-->
<p>Document content goes here.....</p>
</body>
</html>
Это даст следующий результат —
Условные комментарии
Условные комментарии работают только в Internet Explorer (IE) в Windows, но они игнорируются другими браузерами. Они поддерживаются начиная с Explorer 5 и далее, и вы можете использовать их, чтобы давать условные инструкции различным версиям IE.
пример
<!DOCTYPE html>
<html>
<head>
<title>Conditional Comments</title>
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
</head>
<body>
<p>Document content goes here.....</p>
</body>
</html>
Вы столкнетесь с ситуацией, когда вам нужно будет применить другую таблицу стилей, основанную на разных версиях Internet Explorer, в таких ситуациях полезны условные комментарии.
Использование комментария
Есть несколько браузеров, которые поддерживают тег <comment> для комментирования части HTML-кода.
Примечание. Тег <comment> устарел в HTML5. Не используйте этот элемент.
Примечание. Тег <comment> устарел в HTML5. Не используйте этот элемент.
пример
<!DOCTYPE html>
<html>
<head>
<title>Using Comment Tag</title>
</head>
<body>
<p>This is <comment>not</comment> Internet Explorer.</p>
</body>
</html>
Если вы используете IE, то он даст следующий результат —
Но если вы не используете IE, то он даст следующий результат —
Код сценария комментирования
Хотя вы изучите JavaScript с HTML в отдельном руководстве, но здесь вы должны отметить, что если вы используете Java Script или VB Script в своем HTML-коде, то рекомендуется поместить этот код сценария в надлежащие комментарии HTML, чтобы старые браузеры могут работать правильно.
пример
<!DOCTYPE html>
<html>
<head>
<title>Commenting Script Code</title>
<script>
<!--
document.write("Hello World!")
//-->
</script>
</head>
<body>
<p>Hello , World!</p>
</body>
</html>
Это даст следующий результат —
Комментируя таблицы стилей
Хотя вы научитесь использовать таблицы стилей с HTML в отдельном учебнике, но здесь вы должны отметить, что если вы используете Каскадную таблицу стилей (CSS) в своем HTML-коде, то рекомендуется поместить этот код таблицы стилей в надлежащие комментарии HTML. так что старые браузеры могут работать правильно.
пример
<!DOCTYPE html>
<html>
<head>
<title>Commenting Style Sheets</title>
<style>
<!--
.example {
border:1px solid #4a7d49;
}
//-->
</style>
</head>
<body>
<div class = "example">Hello , World!</div>
</body>
</html>
Это даст следующий результат —
HTML — изображения
Изображения очень важны для украшения, а также для простого изображения многих сложных концепций на вашей веб-странице. Этот учебник проведет вас через простые шаги, чтобы использовать изображения на ваших веб-страницах.
Вставить изображение
Вы можете вставить любое изображение на свою веб-страницу, используя тег <img> . Ниже приведен простой синтаксис для использования этого тега.
<img src = "Image URL" ... attributes-list/>
Тег <img> является пустым тегом, что означает, что он может содержать только список атрибутов и не имеет закрывающего тега.
пример
Чтобы попробовать следующий пример, давайте сохраним наш HTML-файл test.htm и файл изображения test.png в одном каталоге —
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>
</html>
Это даст следующий результат —
Вы можете использовать PNG, JPEG или GIF файл изображения, исходя из вашего удобства, но убедитесь, что вы указали правильное имя файла изображения в атрибуте src . Имя изображения всегда чувствительно к регистру.
Атрибут alt является обязательным атрибутом, который указывает альтернативный текст для изображения, если изображение не может быть отображено.
Установить местоположение изображения
Обычно мы храним все изображения в отдельном каталоге. Итак, давайте сохраним HTML-файл test.htm в нашем домашнем каталоге и создадим подкаталог изображений внутри домашнего каталога, где мы будем хранить наш образ test.png.
пример
Предполагая, что наше расположение изображения — «image / test.png», попробуйте следующий пример —
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>
</html>
Это даст следующий результат —
Установить ширину / высоту изображения
Вы можете установить ширину и высоту изображения в зависимости от ваших требований, используя атрибуты ширины и высоты . Вы можете указать ширину и высоту изображения в пикселях или в процентах от его фактического размера.
пример
<!DOCTYPE html>
<html>
<head>
<title>Set Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
<img src = "/html/images/test.png" alt = "Test Image" width = "150" height = "100"/>
</body>
</html>
Это даст следующий результат —
Установить границу изображения
По умолчанию изображение будет иметь рамку вокруг него, вы можете указать толщину границы в пикселях, используя атрибут border. Толщина 0 означает отсутствие рамки вокруг изображения.
пример
<!DOCTYPE html>
<html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3"/>
</body>
</html>
Это даст следующий результат —
Установить выравнивание изображения
По умолчанию изображение будет выравниваться с левой стороны страницы, но вы можете использовать атрибут выравнивания, чтобы установить его по центру или справа.
пример
<!DOCTYPE html>
<html>
<head>
<title>Set Image Alignment</title>
</head>
<body>
<p>Setting image Alignment</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3" align = "right"/>
</body>
</html>
Это даст следующий результат —
Бесплатная веб-графика
Для Free Web Graphics, включая шаблоны, вы можете посмотреть в Free Web Graphics
HTML — таблицы
Таблицы HTML позволяют веб-авторам размещать такие данные, как текст, изображения, ссылки, другие таблицы и т. Д., В строки и столбцы ячеек.
Таблицы HTML создаются с использованием тега <table>, в котором тег <tr> используется для создания строк таблицы, а тег <td> используется для создания ячеек данных. Элементы в <td> являются обычными и выровнены по левому краю по умолчанию
пример
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
Это даст следующий результат —
Здесь граница является атрибутом тега <table> и используется для размещения границы между всеми ячейками. Если вам не нужна граница, вы можете использовать border = «0».
Заголовок таблицы
Заголовок таблицы можно определить с помощью тега <th> . Этот тег будет заменен тегом <td>, который используется для представления фактической ячейки данных. Обычно вы помещаете верхнюю строку в качестве заголовка таблицы, как показано ниже, в противном случае вы можете использовать элемент <th> в любой строке. Заголовки, которые определены в теге <th>, по умолчанию центрированы и выделены жирным шрифтом.
пример
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
Это даст следующий результат —
Атрибуты Cellpadding и Cellspacing
Существует два атрибута, называемых cellpadding и cellspacing, которые вы будете использовать для настройки пустого пространства в ячейках таблицы. Атрибут cellspacing определяет пространство между ячейками таблицы, в то время как cellpadding представляет расстояние между границами ячейки и содержимым внутри ячейки.
пример
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
Это даст следующий результат —
Атрибуты Colspan и Rowspan
Вы будете использовать атрибут colspan, если хотите объединить два или более столбцов в один столбец. Аналогичным образом вы будете использовать rowspan, если вы хотите объединить две или более строки.
пример
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
Это даст следующий результат —
Таблицы Фоны
Вы можете установить фон таблицы одним из следующих двух способов —
-
Атрибут bgcolor — Вы можете установить цвет фона для всей таблицы или только для одной ячейки.
-
Атрибут background — Вы можете установить фоновое изображение для всей таблицы или только для одной ячейки.
Атрибут bgcolor — Вы можете установить цвет фона для всей таблицы или только для одной ячейки.
Атрибут background — Вы можете установить фоновое изображение для всей таблицы или только для одной ячейки.
Вы также можете установить цвет границы, используя атрибут bordercolor .
Примечание. Атрибуты bgcolor , background и bordercolor устарели в HTML5. Не используйте эти атрибуты.
Примечание. Атрибуты bgcolor , background и bordercolor устарели в HTML5. Не используйте эти атрибуты.
пример
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
Это даст следующий результат —
Вот пример использования фонового атрибута. Здесь мы будем использовать изображение, доступное в каталоге / images.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" background = "/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
Это даст следующий результат. Здесь фоновое изображение не относится к заголовку таблицы.
Высота и ширина стола
Вы можете установить ширину и высоту таблицы, используя атрибуты width и height . Вы можете указать ширину или высоту таблицы в виде пикселей или в процентах от доступной площади экрана.
пример
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border = "1" width = "400" height = "150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
Это даст следующий результат —
Заголовок таблицы
Тег заголовка будет служить заголовком или пояснением для таблицы, и он будет отображаться в верхней части таблицы. Этот тег устарел в более новой версии HTML / XHTML.
пример
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border = "1" width = "100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
</body>
</html>
Это даст следующий результат —
Верхний и нижний колонтитулы таблицы
Таблицы можно разделить на три части — заголовок, тело и ножка. Верхний и нижний колонтитулы довольно похожи на верхние и нижние колонтитулы в текстовом документе, которые остаются одинаковыми для каждой страницы, а тело является основным держателем содержимого таблицы.
Три элемента для отделения головы, тела и ноги стола:
-
<thead> — создать отдельный заголовок таблицы.
-
<tbody> — для обозначения основной части таблицы.
-
<tfoot> — создать отдельный нижний колонтитул таблицы.
<thead> — создать отдельный заголовок таблицы.
<tbody> — для обозначения основной части таблицы.
<tfoot> — создать отдельный нижний колонтитул таблицы.
Таблица может содержать несколько элементов <tbody> для обозначения разных страниц или групп данных. Но примечательно, что теги <thead> и <tfoot> должны появляться перед <tbody>
пример
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<thead>
<tr>
<td colspan = "4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>
Это даст следующий результат —
Вложенные таблицы
Вы можете использовать одну таблицу внутри другой таблицы. Не только таблицы, вы можете использовать почти все теги внутри таблицы данных тега <td>.
пример
Ниже приведен пример использования другой таблицы и других тегов внутри ячейки таблицы.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<tr>
<td>
<table border = "1" width = "100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Это даст следующий результат —
HTML — списки
HTML предлагает веб-авторам три способа указания списков информации. Все списки должны содержать один или несколько элементов списка. Списки могут содержать —
-
<ul> — неупорядоченный список. Это будет список элементов с использованием простых пуль.
-
<ol> — упорядоченный список. Это будет использовать разные схемы чисел для перечисления ваших предметов.
-
<dl> — список определений. Это упорядочивает ваши элементы так же, как они расположены в словаре.
<ul> — неупорядоченный список. Это будет список элементов с использованием простых пуль.
<ol> — упорядоченный список. Это будет использовать разные схемы чисел для перечисления ваших предметов.
<dl> — список определений. Это упорядочивает ваши элементы так же, как они расположены в словаре.
Неупорядоченные списки HTML
Неупорядоченный список — это набор связанных элементов, которые не имеют специального порядка или последовательности. Этот список создается с использованием тега HTML <ul> . Каждый элемент в списке отмечен маркером.
пример
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
Это даст следующий результат —
Атрибут типа
Вы можете использовать атрибут type для тега <ul>, чтобы указать тип маркера, который вам нравится. По умолчанию это диск. Ниже приведены возможные варианты —
<ul type = "square"> <ul type = "disc"> <ul type = "circle">
пример
Ниже приведен пример, в котором мы использовали <ul type = «square»>
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
Это даст следующий результат —
пример
Ниже приведен пример, в котором мы использовали <ul type = «disc»> —
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "disc">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
Это даст следующий результат —
пример
Ниже приведен пример, в котором мы использовали <ul type = «circle»> —
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "circle">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
Это даст следующий результат —
Упорядоченные списки HTML
Если вам нужно поместить свои элементы в нумерованный список вместо маркированных, то будет использоваться упорядоченный список HTML. Этот список создается с помощью тега <ol> . Нумерация начинается с единицы и увеличивается на единицу для каждого последующего упорядоченного элемента списка, помеченного тегом <li>.
пример
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
Это даст следующий результат —
Атрибут типа
Вы можете использовать атрибут type для тега <ol>, чтобы указать тип нумерации, который вам нравится. По умолчанию это номер. Ниже приведены возможные варианты —
<ol type = "1"> - Default-Case Numerals. <ol type = "I"> - Upper-Case Numerals. <ol type = "i"> - Lower-Case Numerals. <ol type = "A"> - Upper-Case Letters. <ol type = "a"> - Lower-Case Letters.
пример
Ниже приведен пример, в котором мы использовали <ol type = «1»>
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "1">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
Это даст следующий результат —
пример
Ниже приведен пример, в котором мы использовали <ol type = «I»>
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "I">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
Это даст следующий результат —
пример
Ниже приведен пример, в котором мы использовали <ol type = «i»>
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "i">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
Это даст следующий результат —
пример
Ниже приведен пример, в котором мы использовали <ol type = «A»>
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "A">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
Это даст следующий результат —
пример
Ниже приведен пример, в котором мы использовали <ol type = «a»>
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "a">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
Это даст следующий результат —
Начальный атрибут
Вы можете использовать начальный атрибут для тега <ol>, чтобы указать начальную точку нумерации, которая вам нужна. Ниже приведены возможные варианты —
<ol type = "1" start = "4"> - Numerals starts with 4. <ol type = "I" start = "4"> - Numerals starts with IV. <ol type = "i" start = "4"> - Numerals starts with iv. <ol type = "a" start = "4"> - Letters starts with d. <ol type = "A" start = "4"> - Letters starts with D.
пример
Ниже приведен пример, в котором мы использовали <ol type = «i» start = «4»>
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "i" start = "4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
Это даст следующий результат —
Списки определений HTML
HTML и XHTML поддерживают стиль списка, который называется списком определений, где записи перечислены, как в словаре или энциклопедии. Список определений является идеальным способом представления глоссария, списка терминов или другого списка имен / значений.
Список определений использует следующие три тега.
- <dl> — определяет начало списка
- <dt> — термин
- <dd> — определение термина
- </ dl> — определяет конец списка
пример
<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>
Это даст следующий результат —
HTML — текстовые ссылки
Веб-страница может содержать различные ссылки, которые ведут вас непосредственно на другие страницы и даже определенные части данной страницы. Эти ссылки известны как гиперссылки.
Гиперссылки позволяют посетителям перемещаться между веб-сайтами, нажимая на слова, фразы и изображения. Таким образом, вы можете создавать гиперссылки, используя текст или изображения, доступные на веб-странице.
Примечание — я рекомендую вам пройти краткое руководство по пониманию URL
Связывание документов
Ссылка указывается с использованием HTML-тега <a>. Этот тег называется тегом привязки, и все, что находится между открывающим тегом <a> и закрывающим тегом </a>, становится частью ссылки, и пользователь может щелкнуть эту часть, чтобы перейти к связанному документу. Ниже приведен простой синтаксис для использования тега <a>.
<a href = "Document URL" ... attributes-list>Link Text</a>
пример
Давайте попробуем следующий пример, который ссылается http://www.tutorialspoint.com на вашей странице —
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "https://www.tutorialspoint.com" target = "_self">Tutorials Point</a>
</body>
</html>
Это приведет к следующему результату, где вы можете нажать на сгенерированную ссылку, чтобы перейти на домашнюю страницу Tutorials Point (в этом примере).
Атрибут цели
Мы использовали целевой атрибут в нашем предыдущем примере. Этот атрибут используется для указания места, где открывается связанный документ. Ниже приведены возможные варианты —
| Sr.No | Вариант и описание |
|---|---|
| 1 |
_blank Открывает связанный документ в новом окне или вкладке. |
| 2 |
_self Открывает связанный документ в том же фрейме. |
| 3 |
_parent Открывает связанный документ в родительском фрейме. |
| 4 |
_Топ Открывает связанный документ в полном теле окна. |
| 5 |
targetframe Открывает связанный документ в именованном целевом кадре . |
_blank
Открывает связанный документ в новом окне или вкладке.
_self
Открывает связанный документ в том же фрейме.
_parent
Открывает связанный документ в родительском фрейме.
_Топ
Открывает связанный документ в полном теле окна.
targetframe
Открывает связанный документ в именованном целевом кадре .
пример
Попробуйте следующий пример, чтобы понять принципиальную разницу в нескольких опциях, заданных для целевого атрибута.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href = "https://www.tutorialspoint.com/">
</head>
<body>
<p>Click any of the following links</p>
<a href = "/html/index.htm" target = "_blank">Opens in New</a> |
<a href = "/html/index.htm" target = "_self">Opens in Self</a> |
<a href = "/html/index.htm" target = "_parent">Opens in Parent</a> |
<a href = "/html/index.htm" target = "_top">Opens in Body</a>
</body>
</html>
Это приведет к следующему результату, где вы можете нажать на разные ссылки, чтобы понять разницу между различными опциями, заданными для целевого атрибута.
Использование базового пути
Когда вы размещаете ссылки на документы HTML, относящиеся к одному и тому же веб-сайту, необязательно указывать полный URL-адрес для каждой ссылки. Вы можете избавиться от него, если используете тег <base> в заголовке HTML-документа. Этот тег используется для определения базового пути для всех ссылок. Таким образом, ваш браузер объединит заданный относительный путь с этим базовым путем и создаст полный URL.
пример
В следующем примере используется тег <base> для указания базового URL, и позже мы можем использовать относительный путь ко всем ссылкам вместо предоставления полного URL для каждой ссылки.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href = "https://www.tutorialspoint.com/">
</head>
<body>
<p>Click following link</p>
<a href = "/html/index.htm" target = "_blank">HTML Tutorial</a>
</body>
</html>
Это приведет к следующему результату, где вы можете нажать на сгенерированную ссылку HTML Tutorial для доступа к HTML Tutorial.
Теперь данный URL <a href = «/html/index.htm» рассматривается как <ahref = «http://www.tutorialspoint.com/html/index.htm»
Ссылка на раздел страницы
Вы можете создать ссылку на определенный раздел данной веб-страницы, используя атрибут name . Это двухступенчатый процесс.
Примечание . Атрибут name устарел в HTML5. Не используйте этот атрибут. Вместо этого используйте атрибут id и title .
Примечание . Атрибут name устарел в HTML5. Не используйте этот атрибут. Вместо этого используйте атрибут id и title .
Сначала создайте ссылку на место, куда вы хотите попасть с веб-страницы, и назовите ее с помощью тега <a …> следующим образом:
<h1>HTML Text Links <a name = "top"></a></h1>
Второй шаг — создать гиперссылку, связывающую документ и место, куда вы хотите попасть —
<a href = "/html/html_text_links.htm#top">Go to the Top</a>
Это приведет к следующей ссылке, где вы можете нажать на сгенерированную ссылку. Перейти к началу, чтобы добраться до верхней части учебника HTML Text Link.
Go to the Top
Установка цветов ссылок
Вы можете установить цвета ваших ссылок, активных ссылок и посещенных ссылок, используя атрибуты link , alink и vlink тега <body>.
пример
Сохраните следующее в test.htm и откройте его в любом веб-браузере, чтобы увидеть, как работают атрибуты link , alink и vlink .
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href = "https://www.tutorialspoint.com/">
</head>
<body alink = "#54A250" link = "#040404" vlink = "#F40633">
<p>Click following link</p>
<a href = "/html/index.htm" target = "_blank" >HTML Tutorial</a>
</body>
</html>
Это даст следующий результат. Просто проверьте цвет ссылки перед тем, как щелкнуть по ней, затем проверьте ее цвет при активации и при посещении ссылки.
Ссылки для скачивания
Вы можете создать текстовую ссылку, чтобы сделать ваши PDF, DOC или ZIP файлы загружаемыми. Это очень просто; вам просто нужно дать полный URL-адрес загружаемого файла следующим образом —
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<a href = "https://www.tutorialspoint.com/page.pdf">Download PDF File</a>
</body>
</html>
Это даст следующую ссылку и будет использовано для загрузки файла.
Диалоговое окно загрузки файла
Иногда желательно, чтобы вы указали опцию, при которой пользователь щелкает ссылку, и вместо всплывающего окна отображается всплывающее окно «Загрузка файла». Это очень просто и может быть достигнуто с помощью HTTP-заголовка в вашем HTTP-ответе.
Например, если вы хотите, чтобы файл имени файла загружался по заданной ссылке, его синтаксис будет следующим.
#!/usr/bin/perl
# Additional HTTP Header
print "Content-Type:application/octet-stream; name = \"FileName\"\r\n";
print "Content-Disposition:attachment; filename = \"FileName\"\r\n\n";
# Open the target file and list down its content as follows
open( FILE, "<FileName" );
while(read(FILE, $buffer, 100)){
print("$buffer");
}
Примечание. Для получения более подробной информации о программах PERL CGI обратитесь к учебным пособиям PERL и CGI .
HTML — Ссылки на изображения
Мы увидели, как создавать гипертекстовые ссылки, используя текст, а также научились использовать изображения на наших веб-страницах. Теперь мы узнаем, как использовать изображения для создания гиперссылок.
пример
Просто использовать изображение в качестве гиперссылки. Нам просто нужно использовать изображение внутри гиперссылки в месте текста, как показано ниже —
<!DOCTYPE html>
<html>
<head>
<title>Image Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "https://www.tutorialspoint.com" target = "_self">
<img src = "/images/logo.png" alt = "Tutorials Point" border = "0"/>
</a>
</body>
</html>
Это приведет к следующему результату, где вы можете нажать на изображения, чтобы перейти на домашнюю страницу Tutorials Point.
Это был самый простой способ создания гиперссылок с использованием изображений. Далее мы увидим, как мы можем создавать чувствительные к мышке ссылки на изображения.
Чувствительные к мышке изображения
Стандарты HTML и XHTML предоставляют функцию, которая позволяет встраивать множество различных ссылок в одно изображение. Вы можете создавать разные ссылки на одно изображение на основе различных координат, доступных на изображении. Как только разные ссылки прикреплены к разным координатам, мы можем щелкнуть по разным частям изображения, чтобы открыть целевые документы. Такие чувствительные к мыши изображения известны как карты изображений.
Есть два способа создания карт изображений —
-
Карты изображений на стороне сервера — это включено атрибутом ismap тега <img> и требует доступа к серверу и связанным приложениям обработки карт изображений.
-
Карты изображений на стороне клиента — создаются с помощью атрибута usemap тега <img> вместе с соответствующими тегами <map> и <area>.
Карты изображений на стороне сервера — это включено атрибутом ismap тега <img> и требует доступа к серверу и связанным приложениям обработки карт изображений.
Карты изображений на стороне клиента — создаются с помощью атрибута usemap тега <img> вместе с соответствующими тегами <map> и <area>.
Серверные карты изображений
Здесь вы просто помещаете свое изображение в гиперссылку и используете атрибут ismap, который делает его специальным изображением, а когда пользователь щелкает какое-то место на изображении, браузер передает координаты указателя мыши вместе с URL-адресом, указанным в теге <a>. на веб-сервер. Сервер использует координаты указателя мыши, чтобы определить, какой документ следует доставить обратно в браузер.
Когда используется ismap , атрибут href содержащего тега <a> должен содержать URL-адрес серверного приложения, такого как сценарий cgi или PHP и т. Д., Для обработки входящего запроса на основе переданных координат.
Координаты положения мыши — это пиксели экрана, отсчитываемые от верхнего левого угла изображения, начиная с (0,0). Координаты, перед которыми стоит знак вопроса, добавляются в конец URL.
Например, если пользователь щелкает 20 пикселей вверх и 30 пикселей вниз от верхнего левого угла следующего изображения —
Который был сгенерирован следующим фрагментом кода —
<!DOCTYPE html>
<html>
<head>
<title>ISMAP Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "/cgi-bin/ismap.cgi" target = "_self">
<img ismap src = "/images/logo.png" alt = "Tutorials Point" border = "0"/>
</a>
</body>
</html>
Затем браузер отправляет следующие параметры поиска на веб-сервер, которые могут быть обработаны сценарием ismap.cgi или файлом карты, и вы можете связать любые документы, которые вам нравятся, с этими координатами —
/cgi-bin/ismap.cgi?20,30
Таким образом, вы можете назначать разные ссылки на разные координаты изображения, и когда вы щелкаете по этим координатам, вы можете открыть соответствующий связанный документ. Чтобы узнать больше об атрибуте ismap , вы можете проверить, как использовать изображение ismap?
Примечание. Вы изучите программирование на CGI, когда будете изучать программирование на Perl. Вы можете написать свой скрипт для обработки этих переданных координат, используя PHP или любой другой скрипт. А сейчас давайте сосредоточимся на изучении HTML, а позже вы можете вернуться к этому разделу.
Примечание. Вы изучите программирование на CGI, когда будете изучать программирование на Perl. Вы можете написать свой скрипт для обработки этих переданных координат, используя PHP или любой другой скрипт. А сейчас давайте сосредоточимся на изучении HTML, а позже вы можете вернуться к этому разделу.
Клиентские карты изображений
Карты изображений на стороне клиента активируются атрибутом usemap тега <img /> и определяются специальными тегами расширения <map> и <area>.
Изображение, которое будет формировать карту, вставляется на страницу с использованием тега <img /> в качестве обычного изображения, за исключением того, что оно содержит дополнительный атрибут, называемый usemap . Значением атрибута usemap является значение, которое будет использоваться в теге <map> для связывания тегов карты и изображения. <Map> вместе с тегами <area> определяют все координаты изображения и соответствующие ссылки.
Тег <area> внутри тега карты определяет форму и координаты для определения границ каждой активной точки, доступной на изображении, доступной на изображении. Вот пример из карты изображений —
<!DOCTYPE html>
<html>
<head>
<title>USEMAP Hyperlink Example</title>
</head>
<body>
<p>Search and click the hotspot</p>
<img src = /images/html.gif alt = "HTML Map" border = "0" usemap = "#html"/>
<!-- Create Mappings -->
<map name = "html">
<area shape = "circle" coords = "80,80,20"
href = "/css/index.htm" alt = "CSS Link" target = "_self" />
<area shape = "rect" coords = "5,5,40,40" alt = "jQuery Link"
href = "/jquery/index.htm" target = "_self" />
</map>
</body>
</html>
Это даст следующий результат —
Система координат
Фактическое значение координат полностью зависит от рассматриваемой формы. Вот краткое изложение, за которым следуют подробные примеры —
-
rect = x 1 , y 1 , x 2 , y 2
x 1 и y 1 — координаты верхнего левого угла прямоугольника; x 2 и y 2 — координаты нижнего правого угла.
-
окружность = х с , у с , радиус
x c и y c — координаты центра круга, а радиус — радиус круга. Круг с центром в 200,50 с радиусом 25 будет иметь атрибут ords = «200,50,25»
-
поли = х 1 , у 1 , х 2 , у 2 , х 3 , у 3 , … х н , у н
Различные пары xy определяют вершины (точки) многоугольника с «линией», проведенной из одной точки в следующую точку. Ромбовидный многоугольник с верхней точкой в 20,20 и шириной 40 пикселей в самых широких точках будет иметь атрибут координирование = «20,20,40,40,20,60,0,40» .
rect = x 1 , y 1 , x 2 , y 2
x 1 и y 1 — координаты верхнего левого угла прямоугольника; x 2 и y 2 — координаты нижнего правого угла.
окружность = х с , у с , радиус
x c и y c — координаты центра круга, а радиус — радиус круга. Круг с центром в 200,50 с радиусом 25 будет иметь атрибут ords = «200,50,25»
поли = х 1 , у 1 , х 2 , у 2 , х 3 , у 3 , … х н , у н
Различные пары xy определяют вершины (точки) многоугольника с «линией», проведенной из одной точки в следующую точку. Ромбовидный многоугольник с верхней точкой в 20,20 и шириной 40 пикселей в самых широких точках будет иметь атрибут координирование = «20,20,40,40,20,60,0,40» .
Все координаты указаны относительно верхнего левого угла изображения (0,0). Каждая фигура имеет связанный URL. Вы можете использовать любое программное обеспечение для изображения, чтобы узнать координаты различных позиций.
HTML — ссылки по электронной почте
Нетрудно разместить ссылку на электронную почту в формате HTML на вашей веб-странице, но это может вызвать ненужную проблему со спамом для вашей учетной записи электронной почты. Есть люди, которые могут запускать программы для сбора этих типов электронных писем, а затем использовать их для рассылки спама различными способами.
У вас может быть другой вариант, чтобы люди могли отправлять вам электронные письма. Одним из вариантов может быть использование форм HTML для сбора пользовательских данных, а затем использование сценария PHP или CGI для отправки электронного письма.
Простой пример, проверьте нашу форму обратной связи. Мы принимаем отзывы пользователей, используя эту форму, а затем используем одну программу CGI, которая собирает эту информацию и отправляет нам электронное письмо на один указанный идентификатор электронной почты.
Примечание. Вы узнаете о формах HTML в формах HTML и узнаете о CGI в нашем другом учебнике по программированию Perl CGI .
HTML Email Tag
HTML-тег <a> предоставляет вам возможность указать адрес электронной почты для отправки электронного письма. Используя тег <a> в качестве тега электронной почты, вы будете использовать адрес электронной почты mailto: вместе с атрибутом href . Ниже приводится синтаксис использования mailto вместо использования http.
<a href = "mailto: [email protected]">Send Email</a>
Этот код создаст следующую ссылку, которую вы можете использовать для отправки электронной почты.
Send Email
Теперь, если пользователь щелкает эту ссылку, он запускает один почтовый клиент (например, Lotus Notes, Outlook Express и т. Д.), Установленный на компьютере вашего пользователя. Существует другой риск использования этой опции для отправки электронной почты, потому что если у пользователя не установлен почтовый клиент на его компьютере, отправка электронной почты будет невозможна.
Настройки по умолчанию
Вы можете указать тему электронной почты по умолчанию и тело письма вместе с вашим адресом электронной почты. Ниже приведен пример использования темы и тела по умолчанию.
<a href = "mailto:[email protected]?subject = Feedback&body = Message"> Send Feedback </a>
Этот код создаст следующую ссылку, которую вы можете использовать для отправки электронной почты.
Send Feedback
HTML — фреймы
Фреймы HTML используются для разделения окна вашего браузера на несколько разделов, где каждый раздел может загружать отдельный документ HTML. Коллекция фреймов в окне браузера называется frameset. Окно разделено на фреймы аналогичным образом, таблицы организованы: на строки и столбцы.
Недостатки фреймов
Есть несколько недостатков в использовании фреймов, поэтому никогда не рекомендуется использовать фреймы на ваших веб-страницах —
-
Некоторые меньшие устройства не могут часто справляться с кадрами, потому что их экран недостаточно велик, чтобы его можно было разделить.
-
Иногда ваша страница будет отображаться по-разному на разных компьютерах из-за разного разрешения экрана.
-
Кнопка возврата браузера может не работать, как надеется пользователь.
-
Есть еще несколько браузеров, которые не поддерживают фреймовую технологию.
Некоторые меньшие устройства не могут часто справляться с кадрами, потому что их экран недостаточно велик, чтобы его можно было разделить.
Иногда ваша страница будет отображаться по-разному на разных компьютерах из-за разного разрешения экрана.
Кнопка возврата браузера может не работать, как надеется пользователь.
Есть еще несколько браузеров, которые не поддерживают фреймовую технологию.
Создание рамок
Чтобы использовать фреймы на странице, мы используем тег <frameset> вместо тега <body>. Тег <frameset> определяет, как разделить окно на фреймы. Атрибут row тега <frameset> определяет горизонтальные рамки, а атрибут cols — вертикальные рамки. Каждый фрейм обозначен тегом <frame>, и он определяет, какой документ HTML должен открываться во фрейме.
Примечание. Тег <frame> устарел в HTML5. Не используйте этот элемент.
Примечание. Тег <frame> устарел в HTML5. Не используйте этот элемент.
пример
Ниже приведен пример создания трех горизонтальных рамок.
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows = "10%,80%,10%">
<frame name = "top" src = "/html/top_frame.htm" />
<frame name = "main" src = "/html/main_frame.htm" />
<frame name = "bottom" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>
Это даст следующий результат —
пример
Давайте поместим приведенный выше пример следующим образом: здесь мы заменили атрибут row на cols и изменили их ширину. Это создаст все три кадра по вертикали —
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset cols = "25%,50%,25%">
<frame name = "left" src = "/html/top_frame.htm" />
<frame name = "center" src = "/html/main_frame.htm" />
<frame name = "right" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>
Это даст следующий результат —
Атрибуты тега <frameset>
Ниже приведены важные атрибуты тега <frameset> —
| Sr.No | Атрибут и описание |
|---|---|
| 1 |
смещ_по_столбцам Указывает, сколько столбцов содержится в наборе кадров и размер каждого столбца. Вы можете указать ширину каждого столбца одним из четырех способов — Абсолютные значения в пикселях. Например, чтобы создать три вертикальные рамки, используйте cols = «100, 500, 100» . Процент окна браузера. Например, чтобы создать три вертикальные рамки, используйте cols = «10%, 80%, 10%» . Использование подстановочного символа. Например, чтобы создать три вертикальные рамки, используйте cols = «10%, *, 10%» . В этом случае подстановочный знак занимает оставшуюся часть окна. В качестве относительной ширины окна браузера. Например, чтобы создать три вертикальные рамки, используйте cols = «3 *, 2 *, 1 *» . Это альтернатива процентам. Вы можете использовать относительную ширину окна браузера. Здесь окно делится на шестые: первый столбец занимает половину окна, второй занимает одну треть, а третий занимает одну шестую. |
| 2 |
строки Этот атрибут работает так же, как атрибут cols и принимает те же значения, но он используется для указания строк в наборе кадров. Например, чтобы создать две горизонтальные рамки, используйте row = «10%, 90%» . Вы можете указать высоту каждой строки таким же образом, как описано выше для столбцов. |
| 3 |
граница Этот атрибут определяет ширину границы каждого кадра в пикселях. Например, border = «5». Нулевое значение означает отсутствие границы. |
| 4 |
рамка Этот атрибут указывает, должна ли трехмерная граница отображаться между кадрами. Этот атрибут принимает значение либо 1 (да), либо 0 (нет). Например, frameborder = «0» не указывает границы. |
| 5 |
framespacing Этот атрибут указывает количество пространства между кадрами в наборе кадров. Это может принимать любое целочисленное значение. Например, framespacing = «10» означает, что между кадрами должен быть интервал 10 пикселей. |
смещ_по_столбцам
Указывает, сколько столбцов содержится в наборе кадров и размер каждого столбца. Вы можете указать ширину каждого столбца одним из четырех способов —
Абсолютные значения в пикселях. Например, чтобы создать три вертикальные рамки, используйте cols = «100, 500, 100» .
Процент окна браузера. Например, чтобы создать три вертикальные рамки, используйте cols = «10%, 80%, 10%» .
Использование подстановочного символа. Например, чтобы создать три вертикальные рамки, используйте cols = «10%, *, 10%» . В этом случае подстановочный знак занимает оставшуюся часть окна.
В качестве относительной ширины окна браузера. Например, чтобы создать три вертикальные рамки, используйте cols = «3 *, 2 *, 1 *» . Это альтернатива процентам. Вы можете использовать относительную ширину окна браузера. Здесь окно делится на шестые: первый столбец занимает половину окна, второй занимает одну треть, а третий занимает одну шестую.
строки
Этот атрибут работает так же, как атрибут cols и принимает те же значения, но он используется для указания строк в наборе кадров. Например, чтобы создать две горизонтальные рамки, используйте row = «10%, 90%» . Вы можете указать высоту каждой строки таким же образом, как описано выше для столбцов.
граница
Этот атрибут определяет ширину границы каждого кадра в пикселях. Например, border = «5». Нулевое значение означает отсутствие границы.
рамка
Этот атрибут указывает, должна ли трехмерная граница отображаться между кадрами. Этот атрибут принимает значение либо 1 (да), либо 0 (нет). Например, frameborder = «0» не указывает границы.
framespacing
Этот атрибут указывает количество пространства между кадрами в наборе кадров. Это может принимать любое целочисленное значение. Например, framespacing = «10» означает, что между кадрами должен быть интервал 10 пикселей.
Атрибуты тега <frame>
Ниже приведены важные атрибуты тега <frame> —
| Sr.No | Атрибут и описание |
|---|---|
| 1 |
ЦСИ Этот атрибут используется для указания имени файла, который должен быть загружен во фрейм. Его значением может быть любой URL. Например, src = «/html/top_frame.htm» загрузит файл HTML, доступный в каталоге html. |
| 2 |
название Этот атрибут позволяет вам дать имя фрейму. Он используется для указания того, в какой кадр должен быть загружен документ. Это особенно важно, когда вы хотите создать ссылки в одном фрейме, которые загружают страницы в другой фрейм, и в этом случае второму фрейму нужно имя, чтобы идентифицировать себя как цель ссылки. |
| 3 |
рамка Этот атрибут указывает, будут ли показаны границы этого кадра; он переопределяет значение, указанное в атрибуте frameborder тега <frameset>, если он указан, и может принимать значения либо 1 (да), либо 0 (нет). |
| 4 |
MARGINWIDTH Этот атрибут позволяет вам указать ширину промежутка между левой и правой границами фрейма и его содержимым. Значение указывается в пикселях. Например, marginwidth = «10». |
| 5 |
MARGINHEIGHT Этот атрибут позволяет указать высоту пространства между верхом и низом границ рамки и ее содержимым. Значение указывается в пикселях. Например marginheight = «10». |
| 6 |
NORESIZE По умолчанию вы можете изменить размер любого фрейма, щелкая и перетаскивая границы фрейма. Атрибут noresize не позволяет пользователю изменять размер фрейма. Например, noresize = «noresize». |
| 7 |
прокрутки Этот атрибут управляет видом полос прокрутки, которые появляются на рамке. Это принимает значения либо «да», «нет» или «авто». Например, scrolling = «no» означает, что у него не должно быть полос прокрутки. |
| 8 |
longdesc Этот атрибут позволяет вам предоставить ссылку на другую страницу, содержащую подробное описание содержимого фрейма. Например longdesc = «framedescription.htm» |
ЦСИ
Этот атрибут используется для указания имени файла, который должен быть загружен во фрейм. Его значением может быть любой URL. Например, src = «/html/top_frame.htm» загрузит файл HTML, доступный в каталоге html.
название
Этот атрибут позволяет вам дать имя фрейму. Он используется для указания того, в какой кадр должен быть загружен документ. Это особенно важно, когда вы хотите создать ссылки в одном фрейме, которые загружают страницы в другой фрейм, и в этом случае второму фрейму нужно имя, чтобы идентифицировать себя как цель ссылки.
рамка
Этот атрибут указывает, будут ли показаны границы этого кадра; он переопределяет значение, указанное в атрибуте frameborder тега <frameset>, если он указан, и может принимать значения либо 1 (да), либо 0 (нет).
MARGINWIDTH
Этот атрибут позволяет вам указать ширину промежутка между левой и правой границами фрейма и его содержимым. Значение указывается в пикселях. Например, marginwidth = «10».
MARGINHEIGHT
Этот атрибут позволяет указать высоту пространства между верхом и низом границ рамки и ее содержимым. Значение указывается в пикселях. Например marginheight = «10».
NORESIZE
По умолчанию вы можете изменить размер любого фрейма, щелкая и перетаскивая границы фрейма. Атрибут noresize не позволяет пользователю изменять размер фрейма. Например, noresize = «noresize».
прокрутки
Этот атрибут управляет видом полос прокрутки, которые появляются на рамке. Это принимает значения либо «да», «нет» или «авто». Например, scrolling = «no» означает, что у него не должно быть полос прокрутки.
longdesc
Этот атрибут позволяет вам предоставить ссылку на другую страницу, содержащую подробное описание содержимого фрейма. Например longdesc = «framedescription.htm»
Поддержка браузера для фреймов
Если пользователь использует какой-либо старый браузер или любой другой браузер, который не поддерживает фреймы, то элемент <noframes> должен отображаться для пользователя.
Поэтому вы должны поместить элемент <body> внутри элемента <noframes>, поскольку элемент <frameset> должен заменить элемент <body>, но если браузер не понимает элемент <frameset>, он должен понимать, что находится внутри Элемент <body>, который содержится в элементе <noframes>.
Вы можете поместить приятное сообщение для вашего пользователя, имеющего старые браузеры. Например, Извините! Ваш браузер не поддерживает фреймы. как показано в приведенном выше примере.
Имя фрейма и целевые атрибуты
Одним из наиболее популярных применений фреймов является размещение панелей навигации в одном фрейме, а затем загрузка основных страниц в отдельный фрейм.
Давайте посмотрим на следующий пример, где файл test.htm имеет следующий код —
<!DOCTYPE html>
<html>
<head>
<title>HTML Target Frames</title>
</head>
<frameset cols = "200, *">
<frame src = "/html/menu.htm" name = "menu_page" />
<frame src = "/html/main.htm" name = "main_page" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>
Здесь мы создали два столбца для заполнения двумя кадрами. Первый кадр имеет ширину 200 пикселей и будет содержать панель меню навигации, реализованную в файле menu.htm . Второй столбец заполняет оставшееся пространство и будет содержать основную часть страницы, и это реализуется файлом main.htm . Для всех трех ссылок, доступных в строке меню, мы упомянули целевой фрейм как main_page , поэтому всякий раз, когда вы нажимаете на любую из ссылок в строке меню, доступная ссылка будет открываться на главной странице.
Ниже приводится содержание файла menu.htm
<!DOCTYPE html>
<html>
<body bgcolor = "#4a7d49">
<a href = "http://www.google.com" target = "main_page">Google</a>
<br />
<br />
<a href = "http://www.microsoft.com" target = "main_page">Microsoft</a>
<br />
<br />
<a href = "http://news.bbc.co.uk" target = "main_page">BBC News</a>
</body>
</html>
Ниже приводится содержание файла main.htm —
<!DOCTYPE html>
<html>
<body bgcolor = "#b5dcb3">
<h3>This is main page and content from any link will be displayed here.</h3>
<p>So now click any link and see the result.</p>
</body>
</html>
Когда мы загружаем файл test.htm , он выдает следующий результат —
Теперь вы можете попробовать перейти по ссылкам, доступным на левой панели, и увидеть результат. Атрибут target также может принимать одно из следующих значений:
| Sr.No | Вариант и описание |
|---|---|
| 1 |
_self Загружает страницу в текущий фрейм. |
| 2 |
_blank Загружает страницу в новое окно браузера. Открытие нового окна. |
| 3 |
_parent Загружает страницу в родительское окно, которое в случае одного набора фреймов является основным окном браузера. |
| 4 |
_Топ Загружает страницу в окно браузера, заменяя любые текущие кадры. |
| 5 |
targetframe Загружает страницу в именованный целевой кадр. |
_self
Загружает страницу в текущий фрейм.
_blank
Загружает страницу в новое окно браузера. Открытие нового окна.
_parent
Загружает страницу в родительское окно, которое в случае одного набора фреймов является основным окном браузера.
_Топ
Загружает страницу в окно браузера, заменяя любые текущие кадры.
targetframe
Загружает страницу в именованный целевой кадр.
HTML — Iframes
Вы можете определить встроенный фрейм с помощью HTML-тега <iframe> . Тег <iframe> никак не связан с тегом <frameset>, вместо этого он может появиться в любом месте вашего документа. Тег <iframe> определяет прямоугольную область внутри документа, в которой браузер может отображать отдельный документ, включая полосы прокрутки и границы. Встроенный фрейм используется для встраивания другого документа в текущий документ HTML.
Атрибут src используется для указания URL-адреса документа, который занимает встроенный фрейм.
пример
Ниже приведен пример, демонстрирующий использование <iframe> —
<!DOCTYPE html>
<html>
<head>
<title>HTML Iframes</title>
</head>
<body>
<p>Document content goes here...</p>
<iframe src = "/html/menu.htm" width = "555" height = "200">
Sorry your browser does not support inline frames.
</iframe>
<p>Document content also go here...</p>
</body>
</html>
Это даст следующий результат —
Атрибуты тега <Iframe>
Большинство атрибутов тега <iframe>, включая имя, класс, рамку кадра, id, longdesc, marginheight, ширина полосы, имя, прокрутку, стиль и заголовок, ведут себя точно так же, как соответствующие атрибуты тега <frame>.
Примечание . Атрибуты frameborder , marginwidth , longdesc , scrolling , marginheight в HTML5 устарели. Не используйте эти атрибуты.
Примечание . Атрибуты frameborder , marginwidth , longdesc , scrolling , marginheight в HTML5 устарели. Не используйте эти атрибуты.
| Sr.No | Атрибут и описание |
|---|---|
| 1 |
ЦСИ Этот атрибут используется для указания имени файла, который должен быть загружен во фрейм. Его значением может быть любой URL. Например, src = «/html/top_frame.htm» загрузит файл HTML, доступный в каталоге html. |
| 2 |
название Этот атрибут позволяет вам дать имя фрейму. Он используется для указания того, в какой кадр должен быть загружен документ. Это особенно важно, когда вы хотите создать ссылки в одном фрейме, которые загружают страницы в другой фрейм, и в этом случае второму фрейму нужно имя, чтобы идентифицировать себя как цель ссылки. |
| 3 |
рамка Этот атрибут указывает, будут ли показаны границы этого кадра; он переопределяет значение, указанное в атрибуте frameborder тега <frameset>, если он указан, и может принимать значения либо 1 (да), либо 0 (нет). |
| 4 |
MARGINWIDTH Этот атрибут позволяет вам указать ширину промежутка между левой и правой границами фрейма и его содержимым. Значение указывается в пикселях. Например, marginwidth = «10». |
| 5 |
MARGINHEIGHT Этот атрибут позволяет указать высоту пространства между верхом и низом границ рамки и ее содержимым. Значение указывается в пикселях. Например marginheight = «10». |
| 6 |
рост Этот атрибут указывает высоту <iframe>. |
| 7 |
прокрутки Этот атрибут управляет видом полос прокрутки, которые появляются на рамке. Это принимает значения либо «да», «нет» или «авто». Например, scrolling = «no» означает, что у него не должно быть полос прокрутки. |
| 8 |
longdesc Этот атрибут позволяет вам предоставить ссылку на другую страницу, содержащую подробное описание содержимого фрейма. Например longdesc = «framedescription.htm» |
| 9 |
ширина Этот атрибут определяет ширину <iframe>. |
ЦСИ
Этот атрибут используется для указания имени файла, который должен быть загружен во фрейм. Его значением может быть любой URL. Например, src = «/html/top_frame.htm» загрузит файл HTML, доступный в каталоге html.
название
Этот атрибут позволяет вам дать имя фрейму. Он используется для указания того, в какой кадр должен быть загружен документ. Это особенно важно, когда вы хотите создать ссылки в одном фрейме, которые загружают страницы в другой фрейм, и в этом случае второму фрейму нужно имя, чтобы идентифицировать себя как цель ссылки.
рамка
Этот атрибут указывает, будут ли показаны границы этого кадра; он переопределяет значение, указанное в атрибуте frameborder тега <frameset>, если он указан, и может принимать значения либо 1 (да), либо 0 (нет).
MARGINWIDTH
Этот атрибут позволяет вам указать ширину промежутка между левой и правой границами фрейма и его содержимым. Значение указывается в пикселях. Например, marginwidth = «10».
MARGINHEIGHT
Этот атрибут позволяет указать высоту пространства между верхом и низом границ рамки и ее содержимым. Значение указывается в пикселях. Например marginheight = «10».
рост
Этот атрибут указывает высоту <iframe>.
прокрутки
Этот атрибут управляет видом полос прокрутки, которые появляются на рамке. Это принимает значения либо «да», «нет» или «авто». Например, scrolling = «no» означает, что у него не должно быть полос прокрутки.
longdesc
Этот атрибут позволяет вам предоставить ссылку на другую страницу, содержащую подробное описание содержимого фрейма. Например longdesc = «framedescription.htm»
ширина
Этот атрибут определяет ширину <iframe>.
HTML — блоки
Все элементы HTML можно разделить на две категории (а) элементы блочного уровня (б) встроенные элементы.
Блочные элементы
Элементы блока появляются на экране так, как будто они имеют разрыв строки до и после них. Например, <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr Элементы />, <blockquote> и <address> являются элементами уровня блока. Все они начинают свою собственную новую линию, и все, что следует за ними, появляется в своей новой новой строке.
Встроенные элементы
С другой стороны, встроенные элементы могут появляться в предложениях и не должны появляться в новой строке. <B>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, < Элементы code>, <cite>, <dfn>, <kbd> и <var> являются встроенными элементами.
Группировка элементов HTML
Есть два важных тега, которые мы очень часто используем для группировки различных других тегов HTML (i) тег <div> и (ii) тег <span>
Тег <div>
Это очень важный тег уровня блока, который играет большую роль в группировании различных других тегов HTML и применении CSS к группе элементов. Даже сейчас тег <div> можно использовать для создания макета веб-страницы, где мы определяем различные части (слева, справа, сверху и т. Д.) Страницы с помощью тега <div>. Этот тег не предоставляет никаких визуальных изменений в блоке, но он имеет большее значение, когда он используется с CSS.
пример
Ниже приведен простой пример тега <div>. Мы изучим Cascading Style Sheet (CSS) в отдельной главе, но мы использовали ее здесь, чтобы показать использование тега <div> —
<!DOCTYPE html>
<html>
<head>
<title>HTML div Tag</title>
</head>
<body>
<!-- First group of tags -->
<div style = "color:red">
<h4>This is first group</h4>
<p>Following is a list of vegetables</p>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</div>
<!-- Second group of tags -->
<div style = "color:green">
<h4>This is second group</h4>
<p>Following is a list of fruits</p>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Strawberry</li>
</ul>
</div>
</body>
</html>
Это даст следующий результат —
Тег <span>
HTML <span> является встроенным элементом, и его можно использовать для группировки встроенных элементов в документе HTML. Этот тег также не предоставляет никаких визуальных изменений в блоке, но имеет большее значение, когда он используется с CSS.
Разница между тегом <span> и тегом <div> заключается в том, что тег <span> используется со встроенными элементами, тогда как тег <div> используется с элементами уровня блока.
пример
Ниже приведен простой пример тега <span>. Мы изучим Cascading Style Sheet (CSS) в отдельной главе, но мы использовали ее здесь, чтобы показать использование тега <span> —
<!DOCTYPE html>
<html>
<head>
<title>HTML span Tag</title>
</head>
<body>
<p>This is <span style = "color:red">red</span> and this is
<span style = "color:green">green</span></p>
</body>
</html>
Это даст следующий результат —
HTML — Фоны
По умолчанию фон вашей веб-страницы имеет белый цвет. Вам может это не нравиться, но не стоит беспокоиться. HTML предоставляет вам следующие два хороших способа украсить фон вашей веб-страницы.
- HTML фон с цветами
- HTML фон с изображениями
Теперь давайте рассмотрим оба подхода по очереди на соответствующих примерах.
HTML фон с цветами
Атрибут bgcolor используется для управления фоном элемента HTML, в частности, фоном тела страницы и таблицы.
Примечание . Атрибут bgcolor устарел в HTML5. Не используйте этот атрибут.
Примечание . Атрибут bgcolor устарел в HTML5. Не используйте этот атрибут.
Ниже приведен синтаксис использования атрибута bgcolor с любым тегом HTML.
<tagname bgcolor = "color_value"...>
Это color_value может быть дано в любом из следующих форматов —
<!-- Format 1 - Use color name --> <table bgcolor = "lime" > <!-- Format 2 - Use hex value --> <table bgcolor = "#f1f1f1" > <!-- Format 3 - Use color value in RGB terms --> <table bgcolor = "rgb(0,0,120)" >
пример
Вот примеры для установки фона тега HTML —
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Colors</title>
</head>
<body>
<!-- Format 1 - Use color name -->
<table bgcolor = "yellow" width = "100%">
<tr>
<td>
This background is yellow
</td>
</tr>
</table>
<!-- Format 2 - Use hex value -->
<table bgcolor = "#6666FF" width = "100%">
<tr>
<td>
This background is sky blue
</td>
</tr>
</table>
<!-- Format 3 - Use color value in RGB terms -->
<table bgcolor = "rgb(255,0,255)" width = "100%">
<tr>
<td>
This background is green
</td>
</tr>
</table>
</body>
</html>
Это даст следующий результат —
HTML фон с изображениями
Атрибут background также можно использовать для управления фоном HTML-элемента, в частности, тела страницы и фона таблицы. Вы можете указать изображение, чтобы установить фон вашей HTML-страницы или таблицы.
Примечание . Атрибут фона в HTML5 устарел. Не используйте этот атрибут.
Примечание . Атрибут фона в HTML5 устарел. Не используйте этот атрибут.
Ниже приведен синтаксис использования атрибута фона с любым тегом HTML.
Примечание . Атрибут фона устарел, поэтому рекомендуется использовать таблицу стилей для настройки фона.
Примечание . Атрибут фона устарел, поэтому рекомендуется использовать таблицу стилей для настройки фона.
<tagname background = "Image URL"...>
Наиболее часто используемые форматы изображений — изображения JPEG, GIF и PNG.
пример
Вот примеры, чтобы установить фоновые изображения таблицы.
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Images</title>
</head>
<body>
<!-- Set table background -->
<table background = "/images/html.gif" width = "100%" height = "100">
<tr><td>
This background is filled up with HTML image.
</td></tr>
</table>
</body>
</html>
Это даст следующий результат —
Узорные и прозрачные фоны
Возможно, вы видели много узоров или прозрачных фонов на разных сайтах. Этого просто можно добиться, используя узорчатое изображение или прозрачное изображение на заднем плане.
Предполагается, что при создании шаблонов или прозрачных изображений GIF или PNG используйте наименьшие возможные размеры, даже такие как 1×1, чтобы избежать медленной загрузки.
пример
Вот примеры, чтобы установить фоновый узор таблицы —
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Images</title>
</head>
<body>
<!-- Set a table background using pattern -->
<table background = "/images/pattern1.gif" width = "100%" height = "100">
<tr>
<td>
This background is filled up with a pattern image.
</td>
</tr>
</table>
<!-- Another example on table background using pattern -->
<table background = "/images/pattern2.gif" width = "100%" height = "100">
<tr>
<td>
This background is filled up with a pattern image.
</td>
</tr>
</table>
</body>
</html>
Это даст следующий результат —
HTML — Цвета
Цвета очень важны, чтобы придать вашему сайту хороший внешний вид. Вы можете указать цвета на уровне страницы, используя тег <body>, или вы можете установить цвета для отдельных тегов, используя атрибут bgcolor .
Тег <body> имеет следующие атрибуты, которые можно использовать для установки разных цветов:
-
bgcolor — устанавливает цвет фона страницы.
-
текст — устанавливает цвет для основного текста.
-
alink — устанавливает цвет для активных или выбранных ссылок.
-
ссылка — устанавливает цвет для связанного текста.
-
vlink — устанавливает цвет для посещенных ссылок, то есть для связанного текста, по которому вы уже щелкнули.
bgcolor — устанавливает цвет фона страницы.
текст — устанавливает цвет для основного текста.
alink — устанавливает цвет для активных или выбранных ссылок.
ссылка — устанавливает цвет для связанного текста.
vlink — устанавливает цвет для посещенных ссылок, то есть для связанного текста, по которому вы уже щелкнули.
Методы цветового кодирования HTML
Существует три способа настройки цвета на вашей веб-странице:
-
Названия цветов — Вы можете указать названия цветов, например, зеленый, синий или красный.
-
Шестнадцатеричные коды — шестизначный код, обозначающий количество красного, зеленого и синего цветов, составляющих цвет.
-
Цветные десятичные или процентные значения — это значение указывается с помощью свойства rgb ().
Названия цветов — Вы можете указать названия цветов, например, зеленый, синий или красный.
Шестнадцатеричные коды — шестизначный код, обозначающий количество красного, зеленого и синего цветов, составляющих цвет.
Цветные десятичные или процентные значения — это значение указывается с помощью свойства rgb ().
Теперь мы увидим эти раскраски одну за другой.
HTML Colors — Названия цветов
Вы можете указать прямое имя цвета, чтобы установить цвет текста или фона. W3C перечислил 16 основных имен цветов, которые будут проверяться с помощью валидатора HTML, но есть более 200 различных имен цветов, поддерживаемых основными браузерами.
Примечание. Проверьте полный список имен цветов HTML.
Стандарт W3C 16 цветов
Вот список имен W3C Standard 16 Colours, и их рекомендуется использовать.
| черный | Серый | Серебряный | белый | ||||
| желтый | Лайм | вода | фуксия | ||||
| красный | зеленый | синий | Пурпурный | ||||
| каштановый | оливковый | флот | чирок |
пример
Вот примеры для установки фона тега HTML по имени цвета —
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by Name</title>
</head>
<body text = "blue" bgcolor = "green">
<p>Use different color names for for body and table and see the result.</p>
<table bgcolor = "black">
<tr>
<td>
<font color = "white">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>
</html>
HTML-цвета — шестнадцатеричные коды
Шестнадцатеричное — это 6-значное представление цвета. Первые две цифры (RR) представляют значение красного цвета, следующие две — значение зеленого цвета (GG), а последние — значение синего (BB).
Шестнадцатеричное значение может быть взято из любого графического программного обеспечения, такого как Adobe Photoshop, Paintshop Pro или MS Paint.
Каждому шестнадцатеричному коду будет предшествовать знак фунта или хеша #. Ниже приведен список нескольких цветов с использованием шестнадцатеричной записи.
| цвет | Цвет HEX |
|---|---|
| # 000000 | |
| # FF0000 | |
| # 00FF00 | |
| # 0000FF | |
| # FFFF00 | |
| # 00FFFF | |
| # FF00FF | |
| # C0C0C0 | |
| #FFFFFF |
пример
Вот примеры для установки фона тега HTML по цветному коду в шестнадцатеричном формате —
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by Hex</title>
</head>
<body text = "#0000FF" bgcolor = "#00FF00">
<p>Use different color hexa for for body and table and see the result.</p>
<table bgcolor = "#000000">
<tr>
<td>
<font color = "#FFFFFF">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>
</html>
HTML-цвета — значения RGB
Это значение цвета указывается с помощью свойства rgb () . Это свойство принимает три значения, по одному для красного, зеленого и синего. Значение может быть целым числом от 0 до 255 или в процентах.
Примечание. Все браузеры не поддерживают свойство цвета rgb (), поэтому рекомендуется его не использовать.
Примечание. Все браузеры не поддерживают свойство цвета rgb (), поэтому рекомендуется его не использовать.
Ниже приведен список, показывающий несколько цветов с использованием значений RGB.
| цвет | Цвет RGB |
|---|---|
| RGB (0,0,0) | |
| RGB (255,0,0) | |
| RGB (0,255,0) | |
| RGB (0,0,255) | |
| RGB (255,255,0) | |
| RGB (0255255) | |
| RGB (255,0,255) | |
| RGB (192192192) | |
| RGB (255,255,255) |
пример
Вот примеры для установки фона тега HTML с помощью цветового кода с использованием значений rgb () —
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by RGB code</title>
</head>
<body text = "rgb(0,0,255)" bgcolor = "rgb(0,255,0)">
<p>Use different color code for for body and table and see the result.</p>
<table bgcolor = "rgb(0,0,0)">
<tr>
<td>
<font color = "rgb(255,255,255)">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>
</html>
Браузер Безопасные Цвета
Вот список из 216 цветов, которые должны быть самыми безопасными и независимыми от компьютера. Эти цвета очень от гекса кода 000000 до FFFFFF, и они будут поддерживаться всеми компьютерами, имеющими 256 цветовую палитру.
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 336600 | 336633 | 336666 | 336699 | 3366cc | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| 993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
| 996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99ccff |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| cc0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | cc33ff |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| FF9900 | ff9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
HTML — шрифты
Шрифты играют очень важную роль в том, чтобы сделать веб-сайт более удобным для пользователя и повысить читаемость контента. Лицо и цвет шрифта полностью зависят от компьютера и браузера, который используется для просмотра вашей страницы, но вы можете использовать тег <font> HTML, чтобы добавить стиль, размер и цвет к тексту на вашем веб-сайте. Вы можете использовать тег <basefont>, чтобы установить для всего текста одинаковый размер, лицо и цвет.
Тег шрифта имеет три атрибута: размер, цвет и лицо для настройки ваших шрифтов. Чтобы изменить любой атрибут шрифта в любое время на вашей веб-странице, просто используйте тег <font>. Текст, который следует, будет изменяться до тех пор, пока вы не закроете тег </ font>. Вы можете изменить один или все атрибуты шрифта в пределах одного тега <font>.
Примечание. Теги font и basefont устарели, и предполагается, что они будут удалены в будущей версии HTML. Поэтому их не следует использовать, рекомендуется использовать стили CSS для управления шрифтами. Но все же в целях обучения в этой главе будут подробно описаны теги font и basefont.
Примечание. Теги font и basefont устарели, и предполагается, что они будут удалены в будущей версии HTML. Поэтому их не следует использовать, рекомендуется использовать стили CSS для управления шрифтами. Но все же в целях обучения в этой главе будут подробно описаны теги font и basefont.
Установить размер шрифта
Вы можете установить размер шрифта содержимого, используя атрибут size . Диапазон принимаемых значений — от 1 (наименьший) до 7 (наибольший). Размер шрифта по умолчанию — 3.
пример
<!DOCTYPE html>
<html>
<head>
<title>Setting Font Size</title>
</head>
<body>
<font size = "1">Font size = "1"</font><br />
<font size = "2">Font size = "2"</font><br />
<font size = "3">Font size = "3"</font><br />
<font size = "4">Font size = "4"</font><br />
<font size = "5">Font size = "5"</font><br />
<font size = "6">Font size = "6"</font><br />
<font size = "7">Font size = "7"</font>
</body>
</html>
Это даст следующий результат —
Относительный размер шрифта
Вы можете указать, на сколько размеров больше или на сколько размеров меньше заданного размера шрифта. Вы можете указать его как <font size = «+ n»> или <font size = «−n»>
пример
<!DOCTYPE html>
<html>
<head>
<title>Relative Font Size</title>
</head>
<body>
<font size = "-1">Font size = "-1"</font><br />
<font size = "+1">Font size = "+1"</font><br />
<font size = "+2">Font size = "+2"</font><br />
<font size = "+3">Font size = "+3"</font><br />
<font size = "+4">Font size = "+4"</font>
</body>
</html>
Это даст следующий результат —
Настройка шрифта лица
Вы можете установить шрифт face, используя атрибут face, но имейте в виду, что если у пользователя, просматривающего страницу, шрифт не установлен, он не сможет его увидеть. Вместо этого пользователь увидит шрифт по умолчанию, применимый к компьютеру пользователя.
пример
<!DOCTYPE html>
<html>
<head>
<title>Font Face</title>
</head>
<body>
<font face = "Times New Roman" size = "5">Times New Roman</font><br />
<font face = "Verdana" size = "5">Verdana</font><br />
<font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br />
<font face = "WildWest" size = "5">WildWest</font><br />
<font face = "Bedrock" size = "5">Bedrock</font><br />
</body>
</html>
Это даст следующий результат —
Укажите альтернативные грани шрифта
Посетитель сможет увидеть ваш шрифт только в том случае, если на его компьютере установлен этот шрифт. Таким образом, можно указать две или более альтернатив шрифта, перечислив имена шрифтов, разделенные запятой.
<font face = "arial,helvetica"> <font face = "Lucida Calligraphy,Comic Sans MS,Lucida Console">
Когда ваша страница загружена, их браузер отобразит первый доступный шрифт. Если ни один из указанных шрифтов не установлен, он будет отображать шрифт по умолчанию Times New Roman .
Примечание. Проверьте полный список стандартных шрифтов HTML .
Настройка цвета шрифта
Вы можете установить любой цвет шрифта, который вам нравится, используя атрибут цвета . Вы можете указать нужный цвет либо по имени цвета, либо по шестнадцатеричному коду для этого цвета.
Примечание. Вы можете проверить полный список имен цветов HTML с помощью кодов .
пример
<!DOCTYPE html>
<html>
<head>
<title>Setting Font Color</title>
</head>
<body>
<font color = "#FF00FF">This text is in pink</font><br />
<font color = "red">This text is red</font>
</body>
</html>
Это даст следующий результат —
Элемент <basefont>
Элемент <basefont> должен устанавливать размер шрифта по умолчанию, цвет и шрифт для любых частей документа, которые иначе не содержатся в теге <font>. Вы можете использовать элементы <font> для переопределения настроек <basefont>.
Тег <basefont> также принимает атрибуты color, size и face, и он будет поддерживать относительную настройку шрифта, давая size значение +1 для размера больше или -2 для двух размеров меньше.
пример
<!DOCTYPE html>
<html>
<head>
<title>Setting Basefont Color</title>
</head>
<body>
<basefont face = "arial, verdana, sans-serif" size = "2" color = "#ff0000">
<p>This is the page's default font.</p>
<h2>Example of the <basefont> Element</h2>
<p><font size = "+2" color = "darkgray">
This is darkgray text with two sizes larger
</font>
</p>
<p><font face = "courier" size = "-1" color = "#000000">
It is a courier font, a size smaller and black in color.
</font>
</p>
</body>
</html>
Это даст следующий результат —
HTML — формы
HTML-формы необходимы, когда вы хотите собрать некоторые данные от посетителя сайта. Например, при регистрации пользователя вы хотели бы собрать такую информацию, как имя, адрес электронной почты, кредитная карта и т. Д.
Форма будет получать данные от посетителя сайта, а затем отправлять ее в фоновое приложение, такое как CGI, ASP Script или PHP-скрипт и т. Д. Внутреннее приложение будет выполнять необходимую обработку переданных данных на основе определенной бизнес-логики внутри. приложение.
Доступны различные элементы формы, такие как текстовые поля, поля текстовой области, раскрывающиеся меню, переключатели, флажки и т. Д.
HTML- тег <form> используется для создания HTML-формы и имеет следующий синтаксис:
<form action = "Script URL" method = "GET|POST"> form elements like input, textarea etc. </form>
Атрибуты формы
Помимо общих атрибутов, ниже приведен список наиболее часто используемых атрибутов формы —
| Sr.No | Атрибут и описание |
|---|---|
| 1 |
действие Скрипт готов к обработке переданных данных. |
| 2 |
метод Метод, который будет использоваться для загрузки данных. Чаще всего используются методы GET и POST. |
| 3 |
цель Укажите целевое окно или фрейм, где будет отображаться результат скрипта. Он принимает значения, такие как _blank, _self, _parent и т. Д. |
| 4 |
ENCTYPE Вы можете использовать атрибут enctype, чтобы указать, как браузер кодирует данные перед их отправкой на сервер. Возможные значения — application / x-www-form-urlencoded — это стандартный метод, который большинство форм используют в простых сценариях. mutlipart / form-data — используется, если вы хотите загрузить двоичные данные в виде файлов, таких как изображения, файлы слов и т. д. |
действие
Скрипт готов к обработке переданных данных.
метод
Метод, который будет использоваться для загрузки данных. Чаще всего используются методы GET и POST.
цель
Укажите целевое окно или фрейм, где будет отображаться результат скрипта. Он принимает значения, такие как _blank, _self, _parent и т. Д.
ENCTYPE
Вы можете использовать атрибут enctype, чтобы указать, как браузер кодирует данные перед их отправкой на сервер. Возможные значения —
application / x-www-form-urlencoded — это стандартный метод, который большинство форм используют в простых сценариях.
mutlipart / form-data — используется, если вы хотите загрузить двоичные данные в виде файлов, таких как изображения, файлы слов и т. д.
Примечание. Вы можете обратиться к Perl & CGI для получения подробной информации о том, как работает загрузка данных формы.
Элементы управления HTML-формы
Существуют различные типы элементов управления формы, которые вы можете использовать для сбора данных с помощью формы HTML —
- Элементы управления вводом текста
- Флажки управления
- Управление радиоприемником
- Выберите Box Controls
- Коробки выбора файлов
- Скрытые элементы управления
- Кликабельные кнопки
- Кнопка отправки и сброса
Элементы управления вводом текста
В формах используются три типа ввода текста:
-
Элементы управления однострочным вводом текста — этот элемент управления используется для элементов, для которых требуется только одна строка ввода пользователя, таких как поля поиска или имена. Они создаются с использованием HTML- тега <input> .
-
Элементы управления вводом пароля — это также однострочный ввод текста, но он маскирует символ, как только пользователь вводит его. Они также создаются с использованием HTMl тега <input>.
-
Многострочные элементы управления вводом текста — это используется, когда пользователь должен предоставить детали, которые могут быть длиннее, чем одно предложение. Многострочные элементы управления вводом создаются с использованием тега HTML <textarea> .
Элементы управления однострочным вводом текста — этот элемент управления используется для элементов, для которых требуется только одна строка ввода пользователя, таких как поля поиска или имена. Они создаются с использованием HTML- тега <input> .
Элементы управления вводом пароля — это также однострочный ввод текста, но он маскирует символ, как только пользователь вводит его. Они также создаются с использованием HTMl тега <input>.
Многострочные элементы управления вводом текста — это используется, когда пользователь должен предоставить детали, которые могут быть длиннее, чем одно предложение. Многострочные элементы управления вводом создаются с использованием тега HTML <textarea> .
Элементы управления однострочным вводом текста
Этот элемент управления используется для элементов, для которых требуется только одна строка ввода пользователя, например, поля поиска или имена. Они создаются с использованием HTML-тега <input>.
пример
Вот базовый пример однострочного ввода текста, используемого для ввода имени и фамилии —
<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type = "text" name = "first_name" />
<br>
Last name: <input type = "text" name = "last_name" />
</form>
</body>
</html>
Это даст следующий результат —
Атрибуты
Ниже приведен список атрибутов для тега <input> для создания текстового поля.
| Sr.No | Атрибут и описание |
|---|---|
| 1 |
тип Указывает тип элемента управления вводом, и для элемента управления вводом текста он будет установлен на текст . |
| 2 |
название Используется для присвоения имени элементу управления, который отправляется на сервер для распознавания и получения значения. |
| 3 |
значение Это может быть использовано для предоставления начального значения внутри элемента управления. |
| 4 |
размер Позволяет указать ширину элемента управления вводом текста в терминах символов. |
| 5 |
максимальная длина Позволяет указать максимальное количество символов, которое пользователь может ввести в текстовое поле. |
тип
Указывает тип элемента управления вводом, и для элемента управления вводом текста он будет установлен на текст .
название
Используется для присвоения имени элементу управления, который отправляется на сервер для распознавания и получения значения.
значение
Это может быть использовано для предоставления начального значения внутри элемента управления.
размер
Позволяет указать ширину элемента управления вводом текста в терминах символов.
максимальная длина
Позволяет указать максимальное количество символов, которое пользователь может ввести в текстовое поле.
Контроль ввода пароля
Это также однострочный ввод текста, но он маскирует символ, как только пользователь вводит его. Они также создаются с использованием тега HTML <input>, но для атрибута type установлено значение password .
пример
Вот основной пример однострочного ввода пароля, используемого для получения пароля пользователя:
<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
User ID : <input type = "text" name = "user_id" />
<br>
Password: <input type = "password" name = "password" />
</form>
</body>
</html>
Это даст следующий результат —
Атрибуты
Ниже приведен список атрибутов для тега <input> для создания поля пароля.
| Sr.No | Атрибут и описание |
|---|---|
| 1 |
тип Указывает тип управления вводом и для управления вводом пароля будет установлен пароль . |
| 2 |
название Используется для присвоения имени элементу управления, который отправляется на сервер для распознавания и получения значения. |
| 3 |
значение Это может быть использовано для предоставления начального значения внутри элемента управления. |
| 4 |
размер Позволяет указать ширину элемента управления вводом текста в терминах символов. |
| 5 |
максимальная длина Позволяет указать максимальное количество символов, которое пользователь может ввести в текстовое поле. |
тип
Указывает тип управления вводом и для управления вводом пароля будет установлен пароль .
название
Используется для присвоения имени элементу управления, который отправляется на сервер для распознавания и получения значения.
значение
Это может быть использовано для предоставления начального значения внутри элемента управления.
размер
Позволяет указать ширину элемента управления вводом текста в терминах символов.
максимальная длина
Позволяет указать максимальное количество символов, которое пользователь может ввести в текстовое поле.
Многострочные элементы управления вводом текста
Это используется, когда пользователь должен предоставить детали, которые могут быть длиннее, чем одно предложение. Многострочные элементы управления вводом создаются с использованием тега HTML <textarea>.
пример
Вот базовый пример многострочного ввода текста, используемого для описания элемента —
<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
Description : <br />
<textarea rows = "5" cols = "50" name = "description">
Enter description here...
</textarea>
</form>
</body>
</html>
Это даст следующий результат —
Атрибуты
Ниже приведен список атрибутов для тега <textarea>.
| Sr.No | Атрибут и описание |
|---|---|
| 1 |
название Используется для присвоения имени элементу управления, который отправляется на сервер для распознавания и получения значения. |
| 2 |
строки Указывает количество строк текстового поля. |
| 3 |
смещ_по_столбцам Указывает количество столбцов текстового поля |
название
Используется для присвоения имени элементу управления, который отправляется на сервер для распознавания и получения значения.
строки
Указывает количество строк текстового поля.
смещ_по_столбцам
Указывает количество столбцов текстового поля
Флажок управления
Флажки используются, когда требуется выбрать более одной опции. Они также создаются с использованием тега HTML <input>, но для атрибута type установлено значение checkbox. ,
пример
Вот пример HTML-кода для формы с двумя флажками —
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type = "checkbox" name = "maths" value = "on"> Maths
<input type = "checkbox" name = "physics" value = "on"> Physics
</form>
</body>
</html>
Это даст следующий результат —
Атрибуты
Ниже приведен список атрибутов для тега <checkbox>.
| Sr.No | Атрибут и описание |
|---|---|
| 1 |
тип Указывает тип управления вводом и для флажка управления вводом будет установлен флажок. , |
| 2 |
название Используется для присвоения имени элементу управления, который отправляется на сервер для распознавания и получения значения. |
| 3 |
значение Значение, которое будет использоваться, если флажок установлен. |
| 4 |
проверено Установите флажок, если вы хотите выбрать его по умолчанию. |
тип
Указывает тип управления вводом и для флажка управления вводом будет установлен флажок. ,
название
Используется для присвоения имени элементу управления, который отправляется на сервер для распознавания и получения значения.
значение
Значение, которое будет использоваться, если флажок установлен.
проверено
Установите флажок, если вы хотите выбрать его по умолчанию.
Радио кнопка управления
Радиокнопки используются, когда из множества параметров требуется выбрать только один параметр. Они также создаются с использованием тега HTML <input>, но для атрибута type установлено значение radio .
пример
Вот пример HTML-кода для формы с двумя переключателями —
<!DOCTYPE html>
<html>
<head>
<title>Radio Box Control</title>
</head>
<body>
<form>
<input type = "radio" name = "subject" value = "maths"> Maths
<input type = "radio" name = "subject" value = "physics"> Physics
</form>
</body>
</html>
Это даст следующий результат —
Атрибуты
Ниже приведен список атрибутов для радио кнопки.
| Sr.No | Атрибут и описание |
|---|---|
| 1 |
тип Указывает тип управления входом и для флажка управления входом он будет установлен на радио. |
| 2 |
название Используется для присвоения имени элементу управления, который отправляется на сервер для распознавания и получения значения. |
| 3 |
значение Значение, которое будет использоваться, если выбран переключатель. |
| 4 |
проверено Установите флажок, если вы хотите выбрать его по умолчанию. |
тип
Указывает тип управления входом и для флажка управления входом он будет установлен на радио.
название
Используется для присвоения имени элементу управления, который отправляется на сервер для распознавания и получения значения.
значение
Значение, которое будет использоваться, если выбран переключатель.
проверено
Установите флажок, если вы хотите выбрать его по умолчанию.
Выберите Box Control
Поле выбора, также называемое раскрывающимся списком, которое предоставляет возможность перечисления различных параметров в форме раскрывающегося списка, из которого пользователь может выбрать один или несколько параметров.
пример
Вот пример HTML-кода для формы с одним выпадающим списком
<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
</select>
</form>
</body>
</html>
Это даст следующий результат —
Атрибуты
Ниже приведен список важных атрибутов тега <select> —
| Sr.No | Атрибут и описание |
|---|---|
| 1 |
название Используется для присвоения имени элементу управления, который отправляется на сервер для распознавания и получения значения. |
| 2 |
размер Это может быть использовано для отображения списка прокрутки. |
| 3 |
множественный Если установлено значение «несколько», то позволяет пользователю выбирать несколько пунктов из меню. |
название
Используется для присвоения имени элементу управления, который отправляется на сервер для распознавания и получения значения.
размер
Это может быть использовано для отображения списка прокрутки.
множественный
Если установлено значение «несколько», то позволяет пользователю выбирать несколько пунктов из меню.
Ниже приведен список важных атрибутов тега <option> —
| Sr.No | Атрибут и описание |
|---|---|
| 1 |
значение Значение, которое будет использоваться, если выбрана опция в поле выбора. |
| 2 |
выбранный Указывает, что этот параметр должен быть изначально выбранным значением при загрузке страницы. |
| 3 |
этикетка Альтернативный способ маркировки опций |
значение
Значение, которое будет использоваться, если выбрана опция в поле выбора.
выбранный
Указывает, что этот параметр должен быть изначально выбранным значением при загрузке страницы.
этикетка
Альтернативный способ маркировки опций
Поле загрузки файла
Если вы хотите разрешить пользователю загружать файл на ваш веб-сайт, вам нужно будет использовать окно загрузки файла, также известное как поле выбора файла. Это также создается с использованием элемента <input>, но для атрибута type установлено значение file .
пример
Вот пример HTML-кода для формы с одним полем загрузки файла —
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "file" name = "fileupload" accept = "image/*" />
</form>
</body>
</html>
Это даст следующий результат —
Атрибуты
Ниже приведен список важных атрибутов окна загрузки файла —
| Sr.No | Атрибут и описание |
|---|---|
| 1 |
название Используется для присвоения имени элементу управления, который отправляется на сервер для распознавания и получения значения. |
| 2 |
принимать Указывает типы файлов, которые принимает сервер. |
название
Используется для присвоения имени элементу управления, который отправляется на сервер для распознавания и получения значения.
принимать
Указывает типы файлов, которые принимает сервер.
Кнопки управления
В HTML есть разные способы создания кнопок, которые можно нажимать. Вы также можете создать интерактивную кнопку, используя тег <input>, установив для ее атрибута типа кнопку . Атрибут type может принимать следующие значения:
| Sr.No | Тип и описание |
|---|---|
| 1 |
Отправить Это создает кнопку, которая автоматически отправляет форму. |
| 2 |
сброс Это создает кнопку, которая автоматически сбрасывает элементы управления формы до их начальных значений. |
| 3 |
кнопка Это создает кнопку, которая используется для запуска сценария на стороне клиента, когда пользователь нажимает эту кнопку. |
| 4 |
образ Это создает активируемую кнопку, но мы можем использовать изображение в качестве фона кнопки. |
Отправить
Это создает кнопку, которая автоматически отправляет форму.
сброс
Это создает кнопку, которая автоматически сбрасывает элементы управления формы до их начальных значений.
кнопка
Это создает кнопку, которая используется для запуска сценария на стороне клиента, когда пользователь нажимает эту кнопку.
образ
Это создает активируемую кнопку, но мы можем использовать изображение в качестве фона кнопки.
пример
Вот пример HTML-кода для формы с тремя типами кнопок:
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
<input type = "image" name = "imagebutton" src = "/html/images/logo.png" />
</form>
</body>
</html>
Это даст следующий результат —
Элементы управления скрытой формой
Элементы управления скрытой формой используются для сокрытия данных внутри страницы, которые впоследствии могут быть переданы на сервер. Этот элемент управления скрывается внутри кода и не отображается на реальной странице. Например, следующая скрытая форма используется для сохранения номера текущей страницы. Когда пользователь нажимает следующую страницу, тогда значение скрытого элемента управления будет отправлено на веб-сервер, и там он решит, какая страница будет отображаться следующей, на основе переданной текущей страницы.
пример
Вот пример кода HTML, чтобы показать использование скрытого элемента управления —
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<p>This is page 10</p>
<input type = "hidden" name = "pagename" value = "10" />
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
</form>
</body>
</html>
Это даст следующий результат —
HTML — Вставить мультимедиа
Иногда вам нужно добавить музыку или видео на вашу веб-страницу. Самый простой способ добавить видео или звук на ваш веб-сайт — это включить специальный HTML-тег <embed> . Этот тег заставляет сам браузер включать элементы управления для мультимедиа, при условии, что браузер автоматически поддерживает тег <embed> и данный тип мультимедиа.
Вы также можете включить тег <noembed> для браузеров, которые не распознают тег <embed>. Например, вы можете использовать <embed> для отображения фильма по вашему выбору и <noembed> для отображения одного изображения JPG, если браузер не поддерживает тег <embed>.
пример
Вот простой пример воспроизведения встроенного миди-файла:
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<embed src = "/html/yourfile.mid" width = "100%" height = "60" >
<noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
</embed>
</body>
</html>
Атрибуты тега <embed>
Ниже приведен список важных атрибутов, которые можно использовать с тегом <embed>.
Примечание. Атрибуты align и autostart устарели в HTML5. Не используйте эти атрибуты.
Примечание. Атрибуты align и autostart устарели в HTML5. Не используйте эти атрибуты.
| Sr.No | Атрибут и описание |
|---|---|
| 1 |
выравнивать Определяет, как выровнять объект. Он может быть установлен в центр, влево или вправо . |
| 2 |
автоматический старт Этот логический атрибут указывает, должен ли носитель запускаться автоматически. Вы можете установить его как true или false. |
| 3 |
петля Определяет, должен ли звук воспроизводиться непрерывно (установите петлю в значение true), определенное количество раз (положительное значение) или нет вообще (false) |
| 4 |
прослушиваний Определяет количество раз для воспроизведения звука. Это альтернативный вариант цикла, если вы используете IE. |
| 5 |
скрытый Указывает, должен ли мультимедийный объект отображаться на странице. Ложное значение означает нет, а истинное значение означает да. |
| 6 |
ширина Ширина объекта в пикселях |
| 7 |
рост Высота объекта в пикселях |
| 8 |
название Имя, используемое для ссылки на объект. |
| 9 |
ЦСИ URL объекта для встраивания. |
| 10 |
объем Регулирует громкость звука. Может быть от 0 (выкл.) До 100 (полный объем). |
выравнивать
Определяет, как выровнять объект. Он может быть установлен в центр, влево или вправо .
автоматический старт
Этот логический атрибут указывает, должен ли носитель запускаться автоматически. Вы можете установить его как true или false.
петля
Определяет, должен ли звук воспроизводиться непрерывно (установите петлю в значение true), определенное количество раз (положительное значение) или нет вообще (false)
прослушиваний
Определяет количество раз для воспроизведения звука. Это альтернативный вариант цикла, если вы используете IE.
скрытый
Указывает, должен ли мультимедийный объект отображаться на странице. Ложное значение означает нет, а истинное значение означает да.
ширина
Ширина объекта в пикселях
рост
Высота объекта в пикселях
название
Имя, используемое для ссылки на объект.
ЦСИ
URL объекта для встраивания.
объем
Регулирует громкость звука. Может быть от 0 (выкл.) До 100 (полный объем).
Поддерживаемые типы видео
Внутри тега embed вы можете использовать различные типы мультимедиа, такие как Flash-фильмы (.swf), AVI (.avi) и MOV (.mov).
-
Файлы .swf — это типы файлов, созданные программой Macromedia Flash.
-
Файлы .wmv — типы файлов Windows Media для Windows Media.
-
Файлы .mov — это формат Apple Quick Time Movie.
-
Файлы .mpeg — это файлы фильмов, созданные группой экспертов Moving Pictures.
Файлы .swf — это типы файлов, созданные программой Macromedia Flash.
Файлы .wmv — типы файлов Windows Media для Windows Media.
Файлы .mov — это формат Apple Quick Time Movie.
Файлы .mpeg — это файлы фильмов, созданные группой экспертов Moving Pictures.
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<embed src = "/html/yourfile.swf" width = "200" height = "200" >
<noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
</embed>
</body>
</html>
Это даст следующий результат —
Фоновое аудио
Вы можете использовать тег HTML <bgsound>, чтобы воспроизводить саундтрек на заднем плане вашей веб-страницы. Этот тег поддерживается только Internet Explorer, и большинство других браузеров игнорируют этот тег. Он загружает и воспроизводит аудиофайл, когда основной документ сначала загружается пользователем и отображается. Фоновый звуковой файл также будет воспроизводиться всякий раз, когда пользователь обновляет браузер.
Примечание . Тег bgsound устарел и должен быть удален в будущей версии HTML. Поэтому их не стоит использовать, для добавления звука предлагается использовать тег HTML5 audio. Но в целях обучения в этой главе будет подробно объяснен тег bgsound.
Этот тег имеет только два атрибута loop и src . Оба эти атрибута имеют такое же значение, как описано выше.
Вот простой пример воспроизведения небольшого миди-файла:
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<bgsound src = "/html/yourfile.mid">
<noembed><img src = "yourimage.gif" ></noembed>
</bgsound>
</body>
</html>
Это создаст пустой экран. Этот тег не отображает никаких компонентов и остается скрытым.
Internet Explorer также может обрабатывать только три разных файла звукового формата — wav, собственный формат для ПК; au, родной формат для большинства рабочих станций Unix; и MIDI, универсальная схема кодирования музыки.
Тег HTML-объекта
HTML 4 представляет элемент <object> , который предлагает универсальное решение для включения общего объекта. Элемент <object> позволяет авторам HTML указывать все, что требуется объекту для его представления пользовательским агентом.
Вот несколько примеров —
Пример — 1
Вы можете встроить HTML-документ в сам HTML-документ следующим образом:
<object data = "data/test.htm" type = "text/html" width = "300" height = "200"> alt : <a href = "data/test.htm">test.htm</a> </object>
Здесь атрибут alt появится, если браузер не поддерживает тег объекта .
Пример — 2
Вы можете встроить PDF-документ в HTML-документ следующим образом:
<object data = "data/test.pdf" type = "application/pdf" width = "300" height = "200"> alt : <a href = "data/test.pdf">test.htm</a> </object>
Пример — 3
Вы можете указать некоторые параметры, относящиеся к документу, с помощью тега <param> . Вот пример для встраивания файла WAV —
<object data = "data/test.wav" type = "audio/x-wav" width = "200" height = "20"> <param name = "src" value = "data/test.wav"> <param name = "autoplay" value = "false"> <param name = "autoStart" value = "0"> alt : <a href = "data/test.wav">test.wav</a> </object>
Пример — 4
Вы можете добавить флэш-документ следующим образом —
<object classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id = "penguin" codebase = "someplace/swflash.cab" width = "200" height = "300"> <param name = "movie" value = "flash/penguin.swf" /> <param name = "quality" value = "high" /> <img src = "penguin.jpg" width = "200" height = "300" alt = "Penguin" /> </object>
Пример — 5
Вы можете добавить Java-апплет в HTML-документ следующим образом:
<object classid = "clsid:8ad9c840-044e-11d1-b3e9-00805f499d93" width = "200" height = "200"> <param name = "code" value = "applet.class"> </object>
Атрибут classid определяет, какую версию Java Plug-in использовать. Вы можете использовать необязательный атрибут codebase, чтобы указать, нужно ли и как загружать JRE.
HTML — Marquees
HTML-выделение — это прокручиваемый фрагмент текста, который отображается горизонтально или вертикально на вашей веб-странице в зависимости от настроек. Это создается с помощью тега HTML <marquees>.
Примечание. Тег <marquee> устарел в HTML5. Не используйте этот элемент, вместо этого вы можете использовать JavaScript и CSS для создания таких эффектов.
Примечание. Тег <marquee> устарел в HTML5. Не используйте этот элемент, вместо этого вы можете использовать JavaScript и CSS для создания таких эффектов.
Синтаксис
Простой синтаксис для использования тега HTML <marquee> следующий:
<marquee attribute_name = "attribute_value"....more attributes> One or more lines or text message or image </marquee>
Атрибуты тегов <marquee>
Ниже приведен список важных атрибутов, которые можно использовать с тегом <marquee>.
| Sr.No | Атрибут и описание |
|---|---|
| 1 |
ширина Это определяет ширину выделения. Это может быть значение, например, 10 или 20% и т. Д. |
| 2 |
рост Это определяет высоту выделения. Это может быть значение, например, 10 или 20% и т. Д. |
| 3 |
направление Это указывает направление, в котором область должна прокручиваться. Это может быть значение, например, вверх, вниз, влево или вправо . |
| 4 |
поведение Здесь указывается тип прокрутки области. Это может иметь значение как прокрутка, слайд и альтернатива . |
| 5 |
scrolldelay Это указывает, как долго задерживать между каждым прыжком. Это будет иметь значение как 10 и т. Д. |
| 6 |
scrollamount Это определяет скорость выделенного текста. Это может иметь значение как 10 и т. Д. |
| 7 |
петля Это указывает, сколько раз зациклить. Значением по умолчанию является INFINITE, что означает, что выделение выполняется бесконечно. |
| 8 |
BGCOLOR Это определяет цвет фона в терминах имени цвета или шестнадцатеричного значения цвета. |
| 9 |
HSPACE Это указывает горизонтальное пространство вокруг выделенной области. Это может быть значение, например, 10 или 20% и т. Д. |
| 10 |
VSPACE Это определяет вертикальное пространство вокруг выделенной области. Это может быть значение, например, 10 или 20% и т. Д. |
ширина
Это определяет ширину выделения. Это может быть значение, например, 10 или 20% и т. Д.
рост
Это определяет высоту выделения. Это может быть значение, например, 10 или 20% и т. Д.
направление
Это указывает направление, в котором область должна прокручиваться. Это может быть значение, например, вверх, вниз, влево или вправо .
поведение
Здесь указывается тип прокрутки области. Это может иметь значение как прокрутка, слайд и альтернатива .
scrolldelay
Это указывает, как долго задерживать между каждым прыжком. Это будет иметь значение как 10 и т. Д.
scrollamount
Это определяет скорость выделенного текста. Это может иметь значение как 10 и т. Д.
петля
Это указывает, сколько раз зациклить. Значением по умолчанию является INFINITE, что означает, что выделение выполняется бесконечно.
BGCOLOR
Это определяет цвет фона в терминах имени цвета или шестнадцатеричного значения цвета.
HSPACE
Это указывает горизонтальное пространство вокруг выделенной области. Это может быть значение, например, 10 или 20% и т. Д.
VSPACE
Это определяет вертикальное пространство вокруг выделенной области. Это может быть значение, например, 10 или 20% и т. Д.
Ниже приведено несколько примеров, демонстрирующих использование тега marquee.
Примеры — 1
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee>This is basic example of marquee</marquee>
</body>
</html>
Это даст следующий результат —
Примеров — 2
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee width = "50%">This example will take only 50% width</marquee>
</body>
</html>
Это даст следующий результат —
Примеров — 3
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee direction = "right">This text will scroll from left to right</marquee>
</body>
</html>
Это даст следующий результат —
Примеры — 4
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee direction = "up">This text will scroll from bottom to up</marquee>
</body>
</html>
Это даст следующий результат —
HTML — заголовок
Мы узнали, что типичный HTML-документ будет иметь следующую структуру:
Document declaration tag
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>
Эта глава даст немного больше информации о части заголовка, представленной тегом HTML <head>. Тег <head> является контейнером различных важных тегов, таких как теги <title>, <meta>, <link>, <base>, <style>, <script> и <noscript>.
HTML-тег <title>
HTML-тег <title> используется для указания заголовка HTML-документа. Ниже приведен пример присвоения заголовка HTML-документу.
<!DOCTYPE html>
<html>
<head>
<title>HTML Title Tag Example</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
Это даст следующий результат —
HTML-тег <meta>
HTML-тег <meta> используется для предоставления метаданных о документе HTML, который включает информацию об истечении срока действия страницы, авторе страницы, списке ключевых слов, описании страницы и т. Д.
Ниже приведено несколько важных примеров использования тега <meta> внутри документа HTML.
<!DOCTYPE html>
<html>
<head>
<title>HTML Meta Tag Example</title>
<!-- Provide list of keywords -->
<meta name = "keywords" content = "C, C++, Java, PHP, Perl, Python">
<!-- Provide description of the page -->
<meta name = "description" content = "Simply Easy Learning by Tutorials Point">
<!-- Author information -->
<meta name = "author" content = "Tutorials Point">
<!-- Page content type -->
<meta http-equiv = "content-type" content = "text/html; charset = UTF-8">
<!-- Page refreshing delay -->
<meta http-equiv = "refresh" content = "30">
<!-- Page expiry -->
<meta http-equiv = "expires" content = "Wed, 21 June 2006 14:25:27 GMT">
<!-- Tag to tell robots not to index the content of a page -->
<meta name = "robots" content = "noindex, nofollow">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
Это даст следующий результат —
HTML тег <base>
HTML-тег <base> используется для указания базового URL-адреса для всех относительных URL-адресов на странице, что означает, что все остальные URL-адреса будут объединены в базовый URL-адрес при определении местоположения для данного элемента.
Например, все указанные страницы и изображения будут искать после добавления префикса к заданным URL-адресам с базовым URL-адресом http://www.tutorialspoint.com/ directory —
<!DOCTYPE html>
<html>
<head>
<title>HTML Base Tag Example</title>
<base href = "https://www.tutorialspoint.com/" />
</head>
<body>
<img src = "/images/logo.png" alt = "Logo Image"/>
<a href = "/html/index.htm" title = "HTML Tutorial"/>HTML Tutorial</a>
</body>
</html>
Это даст следующий результат —
Но если вы измените базовый URL-адрес на что-то другое, например, если базовый URL-адрес будет http://www.tutorialspoint.com/home, тогда изображение и другие ссылки станут похожими на http://www.tutorialspoint.com/home/images. /logo.png и http://www.tutorialspoint.com/html/index.htm
HTML тег <link>
HTML-тег <link> используется для определения отношений между текущим документом и внешним ресурсом. Ниже приведен пример для ссылки на файл внешней таблицы стилей, доступный в подкаталоге css в корневом веб-каталоге:
<!DOCTYPE html>
<html>
<head>
<title>HTML link Tag Example</title>
<base href = "https://www.tutorialspoint.com/" />
<link rel = "stylesheet" type = "text/css" href = "/css/style.css">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
Это даст следующий результат —
HTML тег <style>
HTML-тег <style> используется для указания таблицы стилей для текущего HTML-документа. Ниже приведен пример определения нескольких правил таблицы стилей внутри тега <style>.
<!DOCTYPE html>
<html>
<head>
<title>HTML style Tag Example</title>
<base href = "https://www.tutorialspoint.com/" />
<style type = "text/css">
.myclass {
background-color: #aaa;
padding: 10px;
}
</style>
</head>
<body>
<p class = "myclass">Hello, World!</p>
</body>
</html>
Это даст следующий результат —
Примечание. Чтобы узнать, как работает каскадная таблица стилей, просмотрите отдельный учебник, доступный по адресу css
HTML-тег <script>
HTML-тег <script> используется для включения внешнего файла сценария или определения внутреннего сценария для документа HTML. Ниже приведен пример, в котором мы используем JavaScript для определения простой функции JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>HTML script Tag Example</title>
<base href = "http://www.tutorialspoint.com/" />
<script type = "text/JavaScript">
function Hello() {
alert("Hello, World");
}
</script>
</head>
<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "OK" />
</body>
</html>
Это даст следующий результат, где вы можете попытаться нажать на данную кнопку —
Примечание. Чтобы узнать о том, как работает JavaScript, просим ознакомиться с отдельным учебником, доступным в javascript.
HTML — таблица стилей
Каскадные таблицы стилей (CSS) описывают, как документы представляются на экранах, в печати или, возможно, как они произносятся. W3C активно продвигал использование таблиц стилей в Интернете с момента создания консорциума в 1994 году.
Каскадные таблицы стилей (CSS) предоставляют простые и эффективные альтернативы для указания различных атрибутов для тегов HTML. Используя CSS, вы можете указать несколько свойств стиля для данного элемента HTML. Каждое свойство имеет имя и значение, разделенные двоеточием (:). Каждое объявление свойства отделяется точкой с запятой (;).
пример
Сначала давайте рассмотрим пример документа HTML, который использует тег <font> и связанные атрибуты для указания цвета текста и размера шрифта —
Примечание . Тег шрифта устарел и должен быть удален в будущей версии HTML. Поэтому их не следует использовать, рекомендуется использовать стили CSS для управления шрифтами. Но все же для целей обучения, эта глава будет работать с примером, использующим тег font.
Примечание . Тег шрифта устарел и должен быть удален в будущей версии HTML. Поэтому их не следует использовать, рекомендуется использовать стили CSS для управления шрифтами. Но все же для целей обучения, эта глава будет работать с примером, использующим тег font.
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p><font color = "green" size = "5">Hello, World!</font></p>
</body>
</html>
Мы можем переписать приведенный выше пример с помощью таблицы стилей следующим образом:
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p style = "color:green; font-size:24px;" >Hello, World!</p>
</body>
</html>
Это даст следующий результат —
Вы можете использовать CSS тремя способами в своем HTML-документе —
-
Внешняя таблица стилей. Определите правила таблицы стилей в отдельном файле .css, а затем включите этот файл в документ HTML с помощью тега HTML <link>.
-
Внутренняя таблица стилей. Определите правила таблицы стилей в разделе заголовка документа HTML с помощью тега <style>.
-
Встроенная таблица стилей — определяйте правила таблицы стилей непосредственно вместе с элементами HTML, используя атрибут style .
Внешняя таблица стилей. Определите правила таблицы стилей в отдельном файле .css, а затем включите этот файл в документ HTML с помощью тега HTML <link>.
Внутренняя таблица стилей. Определите правила таблицы стилей в разделе заголовка документа HTML с помощью тега <style>.
Встроенная таблица стилей — определяйте правила таблицы стилей непосредственно вместе с элементами HTML, используя атрибут style .
Давайте рассмотрим все три случая один за другим с помощью подходящих примеров.
Внешняя таблица стилей
Если вам нужно использовать таблицу стилей для разных страниц, всегда рекомендуется определять общую таблицу стилей в отдельном файле. Файл каскадной таблицы стилей будет иметь расширение .css и будет включен в файлы HTML с помощью тега <link>.
пример
Предположим, мы определили файл таблицы стилей style.css, который имеет следующие правила:
.red {
color: red;
}
.thick {
font-size:20px;
}
.green {
color:green;
}
Здесь мы определили три правила CSS, которые будут применяться к трем различным классам, определенным для тегов HTML. Я предлагаю вам не беспокоиться о том, как определяются эти правила, потому что вы изучите их во время изучения CSS. Теперь давайте воспользуемся вышеуказанным внешним CSS-файлом в нашем следующем HTML-документе —
<!DOCTYPE html>
<html>
<head>
<title>HTML External CSS</title>
<link rel = "stylesheet" type = "text/css" href = "/html/style.css">
</head>
<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>
</html>
Это даст следующий результат —
Внутренняя таблица стилей
Если вы хотите применить правила таблицы стилей только к одному документу, вы можете включить эти правила в раздел заголовка документа HTML с помощью тега <style>.
Правила, определенные во внутренней таблице стилей, переопределяют правила, определенные во внешнем файле CSS.
пример
Давайте еще раз напишем приведенный выше пример, но здесь мы напишем правила таблицы стилей в том же HTML-документе, используя тег <style> —
<!DOCTYPE html>
<html>
<head>
<title>HTML Internal CSS</title>
<style type = "text/css">
.red {
color: red;
}
.thick{
font-size:20px;
}
.green {
color:green;
}
</style>
</head>
<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>
</html>
Это даст следующий результат —
Встроенная таблица стилей
Вы можете применять правила таблицы стилей непосредственно к любому элементу HTML, используя атрибут стиля соответствующего тега. Это следует делать только тогда, когда вы заинтересованы в том, чтобы внести определенные изменения только в любой элемент HTML.
Правила, определенные внутри элемента, переопределяют правила, определенные во внешнем файле CSS, а также правила, определенные в элементе <style>.
пример
Давайте еще раз напишем приведенный выше пример, но здесь мы напишем правила таблицы стилей вместе с элементами HTML, используя атрибут style этих элементов.
<!DOCTYPE html>
<html>
<head>
<title>HTML Inline CSS</title>
</head>
<body>
<p style = "color:red;">This is red</p>
<p style = "font-size:20px;">This is thick</p>
<p style = "color:green;">This is green</p>
<p style = "color:green;font-size:20px;">This is thick and green</p>
</body>
</html>
Это даст следующий результат —
HTML — JavaScript
Сценарий — это небольшая часть программы, которая может добавить интерактивности вашему веб-сайту. Например, сценарий может генерировать всплывающее окно с предупреждением или предоставлять раскрывающееся меню. Этот скрипт может быть написан с использованием JavaScript или VBScript.
Вы можете написать различные небольшие функции, называемые обработчиками событий, используя любой язык сценариев, а затем вы можете запускать эти функции, используя атрибуты HTML.
В настоящее время большинством веб-разработчиков используется только JavaScript и связанные с ним фреймворки, VBScript даже не поддерживается различными основными браузерами.
Вы можете хранить код JavaScript в отдельном файле, а затем включать его везде, где это необходимо, или вы можете определить функциональность внутри самого HTML-документа. Давайте рассмотрим оба случая один за другим с подходящими примерами.
Внешний JavaScript
Если вы собираетесь определить функциональность, которая будет использоваться в различных документах HTML, лучше сохранить эту функцию в отдельном файле JavaScript, а затем включить этот файл в документы HTML. Файл JavaScript будет иметь расширение .js и будет включен в файлы HTML с помощью тега <script>.
пример
Предположим, мы определили небольшую функцию с использованием JavaScript в script.js, который имеет следующий код —
function Hello() {
alert("Hello, World");
}
Теперь давайте воспользуемся вышеуказанным внешним файлом JavaScript в нашем следующем HTML-документе —
<!DOCTYPE html>
<html>
<head>
<title>Javascript External Script</title>
<script src = "/html/script.js" type = "text/javascript"/></script>
</head>
<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
</body>
</html>
Это даст следующий результат, где вы можете попытаться нажать на данную кнопку —
Внутренний скрипт
Вы можете написать свой код скрипта прямо в ваш HTML-документ. Обычно мы сохраняем код скрипта в заголовке документа с помощью тега <script>, в противном случае нет никаких ограничений, и вы можете поместить свой исходный код в любом месте документа, но внутри тега <script>.
пример
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Internal Script</title>
<base href = "https://www.tutorialspoint.com/" />
<script type = "text/JavaScript">
function Hello() {
alert("Hello, World");
}
</script>
</head>
<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
</body>
</html>
Это даст следующий результат, где вы можете попытаться нажать на данную кнопку —
Обработчики событий
Обработчики событий — это не что иное, как просто определенные функции, которые можно вызывать для любого события мыши или клавиатуры. Вы можете определить свою бизнес-логику в своем обработчике событий, который может варьироваться от одного до 1000 строк кода.
Следующий пример объясняет, как написать обработчик события. Давайте напишем одну простую функцию EventHandler () в заголовке документа. Мы будем вызывать эту функцию, когда любой пользователь наводит указатель мыши на абзац.
<!DOCTYPE html>
<html>
<head>
<title>Event Handlers Example</title>
<base href = "https://www.tutorialspoint.com/" />
<script type = "text/JavaScript">
function EventHandler() {
alert("I'm event handler!!");
}
</script>
</head>
<body>
<p onmouseover = "EventHandler();">Bring your mouse here to see an alert</p>
</body>
</html>
Теперь это даст следующий результат. Наведите указатель мыши на эту строку и посмотрите результат —
Скрыть скрипты от старых браузеров
Хотя большинство (если не все) браузеры в наши дни поддерживают JavaScript, но все же некоторые старые браузеры этого не делают. Если браузер не поддерживает JavaScript, вместо запуска вашего скрипта он отобразит код для пользователя. Чтобы предотвратить это, вы можете просто разместить HTML-комментарии вокруг скрипта, как показано ниже.
JavaScript Example:
<script type = "text/JavaScript">
<!--
document.write("Hello JavaScript!");
//-->
</script>
VBScript Example:
<script type = "text/vbscript">
<!--
document.write("Hello VBScript!")
'-->
</script>
Элемент <noscript>
Вы также можете предоставить альтернативную информацию пользователям, чьи браузеры не поддерживают сценарии, и тем пользователям, которые отключили использование сценариев в своих браузерах. Вы можете сделать это, используя тег <noscript> .
JavaScript Example:
<script type = "text/JavaScript">
<!--
document.write("Hello JavaScript!");
//-->
</script>
<noscript>Your browser does not support JavaScript!</noscript>
VBScript Example:
<script type = "text/vbscript">
<!--
document.write("Hello VBScript!")
'-->
</script>
<noscript>Your browser does not support VBScript!</noscript>
Язык сценариев по умолчанию
Может возникнуть ситуация, когда вы включите несколько файлов сценариев и в конечном итоге будете использовать несколько тегов <script>. Вы можете указать язык сценариев по умолчанию для всех ваших тегов сценария . Это избавляет вас от необходимости указывать язык каждый раз, когда вы используете тег скрипта на странице. Ниже приведен пример —
<meta http-equiv = "Content-Script-Type" content = "text/JavaScript" />
Обратите внимание, что вы все равно можете переопределить значение по умолчанию, указав язык в теге script.
HTML — макеты
Макет веб-страницы очень важен, чтобы лучше выглядеть на вашем сайте. Требуется значительное время, чтобы разработать макет сайта с отличным дизайном.
В настоящее время все современные веб-сайты используют платформу на основе CSS и JavaScript для создания адаптивных и динамичных веб-сайтов, но вы можете создать хороший макет, используя простые таблицы HTML или теги деления в сочетании с другими тегами форматирования. Эта глава даст вам несколько примеров того, как создать простой, но рабочий макет для вашей веб-страницы, используя чистый HTML и его атрибуты.
HTML-макет — Использование таблиц
Самым простым и популярным способом создания макетов является использование тега HTML <table>. Эти таблицы расположены в виде столбцов и строк, поэтому вы можете использовать эти строки и столбцы любым удобным для вас способом.
пример
Например, следующий пример макета HTML достигается с использованием таблицы с 3 строками и 2 столбцами, но столбец верхнего и нижнего колонтитула охватывает оба столбца с использованием атрибута colspan —
<!DOCTYPE html>
<html>
<head>
<title>HTML Layout using Tables</title>
</head>
<body>
<table width = "100%" border = "0">
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<h1>This is Web Page Main title</h1>
</td>
</tr>
<tr valign = "top">
<td bgcolor = "#aaa" width = "50">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
<td bgcolor = "#eee" width = "100" height = "200">
Technical and Managerial Tutorials
</td>
</tr>
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<center>
Copyright © 2007 Tutorialspoint.com
</center>
</td>
</tr>
</table>
</body>
</html>
Это даст следующий результат —
Расположение нескольких столбцов — Использование таблиц
Вы можете создать свою веб-страницу так, чтобы она размещалась на нескольких страницах. Вы можете держать свой контент в среднем столбце, и вы можете использовать левый столбец, чтобы использовать меню, а правый столбец можно использовать для размещения рекламы или других вещей. Этот макет будет очень похож на то, что мы имеем на нашем сайте tutorialspoint.com.
пример
Вот пример для создания трехколоночной разметки —
<!DOCTYPE html>
<html>
<head>
<title>Three Column HTML Layout</title>
</head>
<body>
<table width = "100%" border = "0">
<tr valign = "top">
<td bgcolor = "#aaa" width = "20%">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
<td bgcolor = "#b5dcb3" height = "200" width = "60%">
Technical and Managerial Tutorials
</td>
<td bgcolor = "#aaa" width = "20%">
<b>Right Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
</tr>
<table>
</body>
</html>
Это даст следующий результат —
HTML-макеты — Использование DIV, SPAN
Элемент <div> — это элемент блочного уровня, используемый для группировки элементов HTML. Хотя тег <div> является элементом уровня блока, элемент HTML <span> используется для группировки элементов на встроенном уровне.
Хотя мы можем добиться довольно хороших макетов с помощью HTML-таблиц, но таблицы на самом деле не были разработаны как инструмент макета. Таблицы больше подходят для представления табличных данных.
Примечание. В этом примере используется каскадная таблица стилей (CSS), поэтому, прежде чем разбираться в этом примере, необходимо лучше понять, как работает CSS.
пример
Здесь мы попытаемся достичь того же результата, используя тег <div> вместе с CSS, чего бы вы ни добились, используя тег <table> в предыдущем примере.
<!DOCTYPE html>
<html>
<head>
<title>HTML Layouts using DIV, SPAN</title>
</head>
<body>
<div style = "width:100%">
<div style = "background-color:#b5dcb3; width:100%">
<h1>This is Web Page Main title</h1>
</div>
<div style = "background-color:#aaa; height:200px; width:100px; float:left;">
<div><b>Main Menu</b></div>
HTML<br />
PHP<br />
PERL...
</div>
<div style = "background-color:#eee; height:200px; width:350px; float:left;" >
<p>Technical and Managerial Tutorials</p>
</div>
<div style = "background-color:#aaa; height:200px; width:100px; float:right;">
<div><b>Right Menu</b></div>
HTML<br />
PHP<br />
PERL...
</div>
<div style = "background-color:#b5dcb3; clear:both">
<center>
Copyright © 2007 Tutorialspoint.com
</center>
</div>
</div>
</body>
</html>
Это даст следующий результат —
Вы можете создать лучший макет, используя DIV, SPAN и CSS. Для получения дополнительной информации о CSS, пожалуйста, обратитесь к CSS Tutorial.