HTML - Краткое руководство

HTML означает Hypertдоб Markup Language, и это наиболее широко используемый язык для написания веб-страниц.

Hypertextотносится к способу, которым веб-страницы (документы HTML) связаны друг с другом. Таким образом, ссылка, доступная на веб-странице, называется гипертекстом.
Как следует из названия, HTML - это Markup Language Это означает, что вы используете 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-документа используются следующие теги -

Старший Нет	Тег и описание
1	<!DOCTYPE...> Этот тег определяет тип документа и версию HTML.
2	<html> Этот тег включает в себя весь HTML-документ и в основном состоит из заголовка документа, который представлен <head> ... </head>, и тела документа, который представлен тегами <body> ... </body>.
3	<head> Этот тег представляет заголовок документа, который может содержать другие теги HTML, такие как <title>, <link> и т. Д.
4	<title> Тег <title> используется внутри тега <head> для упоминания заголовка документа.
5	<body> Этот тег представляет тело документа, в котором хранятся другие теги HTML, такие как <h1>, <div>, <p> и т. Д.
6	<h1> Этот тег представляет заголовок.
7	<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 также имеет шесть уровней заголовков, в которых используются элементы<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 />элемент, все, что следует за ним, начинается со следующей строки. Этот тег является примеромempty элемент, в котором открывающие и закрывающие теги не нужны, так как между ними нечего вставлять.

Тег <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 /> тег является примером empty элемент, в котором открывающие и закрывающие теги не нужны, так как между ними нечего вставлять.

В <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 разгневанных мужчин». Здесь вы не хотите, чтобы браузер разделял «12, Angry» и «Men» на две строки -

An example of this technique appears in the movie "12 Angry Men."

В случаях, когда вы не хотите, чтобы клиентский браузер прерывал текст, вам следует использовать неразрывный пробел.  вместо нормального пробела. Например, при кодировании «12 разгневанных мужчин» в абзаце вы должны использовать что-то похожее на следующий код -

пример

<!DOCTYPE html>
<html>

   <head>
      <title>Nonbreaking Spaces Example</title>
   </head>
	
   <body>
      <p>An example of this technique appears in the movie "12&nbsp;Angry&nbsp;Men."</p>
   </body>
	
</html>

Это даст следующий результат -

An HTML elementопределяется начальным тегом. Если элемент содержит другое содержимое, он заканчивается закрывающим тегом, где имени элемента предшествует косая черта, как показано ниже, с несколькими тегами:

Начальный тег	Содержание	Конечный тег
<p>	Это содержание абзаца.	</p>
<h1>	Это содержание заголовка.	</h1>
<div>	Это содержание разделения.	</div>
<br />

Так вот <p>....</p> это элемент HTML, <h1>...</h1>это еще один элемент HTML. Есть некоторые элементы HTML, которые не нужно закрывать, например<img.../>, <hr /> и <br />элементы. Они известны какvoid elements.

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

HTML-тег и элемент

Элемент HTML определяется начальным тегом . Если элемент содержит другое содержимое, он заканчивается закрывающим тегом .

Например, <p> является начальным тегом абзаца и </p> закрывающий тег того же абзаца, но <p>This is paragraph</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-тегов и их использование как теги заголовков. <h1>, <h2>, тег абзаца <p>и другие теги. До сих пор мы использовали их в простейшей форме, но большинство тегов HTML также могут иметь атрибуты, которые представляют собой дополнительные биты информации.

Атрибут используется для определения характеристик элемента HTML и помещается внутри открывающего тега элемента. Все атрибуты состоят из двух частей:name и value

В nameэто свойство, которое вы хотите установить. Например, абзац<p> элемент в примере имеет атрибут с именем align, который можно использовать для обозначения выравнивания абзаца на странице.
В valueэто то, что вы хотите, чтобы значение свойства было установлено и всегда помещалось в кавычки. В приведенном ниже примере показаны три возможных значения атрибута 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
Title
Class
Style

Атрибут Id

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

Если элемент содержит атрибут id в качестве уникального идентификатора, можно идентифицировать только этот элемент и его содержимое.
Если у вас есть два элемента с одинаковым именем на веб-странице (или в таблице стилей), вы можете использовать атрибут id, чтобы различать элементы с одинаковыми именами.

Мы обсудим таблицу стилей в отдельном уроке. А пока давайте воспользуемся атрибутом id, чтобы различать два элемента абзаца, как показано ниже.

Example

<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 атрибут -

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

Example

<!DOCTYPE html>
<html>

   <head>
      <title>The title Attribute Example</title>
   </head>
	
   <body>
      <h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
   </body>
	
</html>

Это даст следующий результат -

Теперь попробуйте навести курсор на «Пример заголовка с заголовком», и вы увидите, что любой заголовок, который вы использовали в своем коде, появляется как всплывающая подсказка курсора.

Атрибут класса

В classАтрибут используется для связывания элемента с таблицей стилей и определяет класс элемента. Вы узнаете больше об использовании атрибута 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.

dir
lang
xml:lang

Атрибут dir

В dirАтрибут позволяет указать браузеру, в каком направлении должен течь текст. Атрибут dir может принимать одно из двух значений, как вы можете видеть в следующей таблице:

Значение	Имея в виду
ltr	Слева направо (значение по умолчанию)
RTL	Справа налево (для таких языков, как иврит или арабский, которые читаются справа налево)

Example

<!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 Language Codes: ISO 639 для получения полного списка языковых кодов.

Example

<!DOCTYPE html>
<html lang = "en">

   <head>
      <title>English Language Page</title>
   </head>

   <body>
      This page is using English Language
   </body>

</html>

Это даст следующий результат -

Атрибут xml: lang

XML: Ланг атрибут является заменой XHTML для языки атрибута. Значение атрибута xml: lang должно быть кодом страны ISO-639, как упоминалось в предыдущем разделе.

Общие атрибуты

Вот таблица некоторых других атрибутов, которые легко использовать со многими тегами HTML.

Атрибут	Параметры	Функция
выровнять	вправо, влево, по центру	Горизонтально выравнивает теги
доблестный	верх, середина, низ	Вертикально выравнивает теги внутри элемента HTML.
bgcolor	числовые, шестнадцатеричные, значения RGB	Помещает цвет фона за элементом
задний план	URL	Помещает фоновое изображение за элементом
Я бы	Определяемые пользователем	Называет элемент для использования с каскадными таблицами стилей.
класс	Определяемые пользователем	Классифицирует элемент для использования с каскадными таблицами стилей.
ширина	Числовое значение	Задает ширину таблиц, изображений или ячеек таблицы.
высота	Числовое значение	Задает высоту таблиц, изображений или ячеек таблицы.
заглавие	Определяемые пользователем	«Всплывающее» название элементов.

<!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" >
         <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>

Это даст следующий результат -

<!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> element означает двунаправленное переопределение и используется для переопределения текущего направления текста.

пример

<!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>element (или HTML Definition Element) позволяет указать, что вы вводите специальный термин. Его использование похоже на курсив в середине абзаца.

Обычно вы используете элемент <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 позволяет указывать метаданные - дополнительную важную информацию о документе различными способами. Элементы META могут использоваться для включения пар имя / значение, описывающих свойства документа HTML, такие как автор, срок действия, список ключевых слов, автор документа и т. Д.

В <meta>тег используется для предоставления такой дополнительной информации. Этот тег является пустым элементом и поэтому не имеет закрывающего тега, но несет информацию в своих атрибутах.

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

Добавление мета-тегов в ваши документы

Вы можете добавить метаданные на свои веб-страницы, разместив теги <meta> внутри заголовка документа, который представлен <head> и </head>теги. Мета-тег может иметь следующие атрибуты в дополнение к основным атрибутам:

Старший Нет	Атрибут и описание
1	Name Название собственности. Может быть что угодно. Примеры включают ключевые слова, описание, автора, исправление, генератор и т. Д.
2	content Задает значение свойства.
3	scheme Задает схему интерпретации значения свойства (как объявлено в атрибуте содержимого).
4	http-equiv Используется для заголовков сообщений HTTP-ответа. Например, http-Equiv может использоваться для обновления страницы или для установки файла 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>

Настройка файлов cookie

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

Вы можете использовать тег <meta> для хранения файлов cookie на стороне клиента, а позже эту информацию может использовать веб-сервер для отслеживания посетителя сайта.

пример

<!DOCTYPE html>
<html>
   <head>
      <title>Meta Tags Example</title>
      <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 сеанса и будет удален при выходе пользователя из браузера.

Note- Вы можете проверить руководство по PHP и файлам cookie для получения полной информации о файлах cookie.

Установка имени автора

Вы можете установить имя автора на веб-странице с помощью метатега. См. Пример ниже -

пример

<!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 помещаются между теги. Таким образом, любой контент, помещенный в теги <! - ... ->, будет рассматриваться как комментарий и полностью игнорироваться браузером.

пример

<!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-кода.

Note- Тег <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>

Это даст следующий результат -

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

Вставить изображение

Вы можете вставить любое изображение на свою веб-страницу, используя <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 attribute - обязательный атрибут, который определяет альтернативный текст для изображения, если изображение не может быть отображено.

Установить местоположение изображения

Обычно мы храним все изображения в отдельном каталоге. Итак, давайте сохраним HTML-файл test.htm в нашем домашнем каталоге и создадим подкаталогimages внутри домашнего каталога, где мы будем хранить наше изображение 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>

Это даст следующий результат -

Установить ширину / высоту изображения

Вы можете установить ширину и высоту изображения в зависимости от ваших требований, используя width и heightатрибуты. Вы можете указать ширину и высоту изображения в пикселях или в процентах от его фактического размера.

пример

<!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>

Это даст следующий результат -

Установить границу изображения

По умолчанию изображение будет иметь границу вокруг него, вы можете указать толщину границы в пикселях, используя атрибут границы. Толщина 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>

Это даст следующий результат -

Установить выравнивание изображения

По умолчанию изображение будет выровнено по левой стороне страницы, но вы можете использовать align атрибут, чтобы установить его по центру или справа.

пример

<!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>

Это даст следующий результат -

Бесплатная веб-графика

Для бесплатной веб-графики, включая шаблоны, вы можете посмотреть бесплатную веб-графику

Таблицы 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>

<!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 атрибут - вы можете установить фоновое изображение для всей таблицы или только для одной ячейки.

Вы также можете установить цвет границы, используя bordercolor атрибут.

Note- Атрибуты 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>

Это даст следующий результат -

Вот пример использования backgroundатрибут. Здесь мы будем использовать изображение, доступное в каталоге / 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>

Это даст следующий результат -

Заголовок таблицы

В captionтег будет служить заголовком или объяснением для таблицы, и он отображается вверху таблицы. Этот тег устарел в новой версии 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>

This will produce the following result −

Table Header, Body, and Footer

Tables can be divided into three portions − a header, a body, and a foot. The head and foot are rather similar to headers and footers in a word-processed document that remain the same for every page, while the body is the main content holder of the table.

The three elements for separating the head, body, and foot of a table are −

<thead> − to create a separate table header.
<tbody> − to indicate the main body of the table.
<tfoot> − to create a separate table footer.

A table may contain several <tbody> elements to indicate different pages or groups of data. But it is notable that <thead> and <tfoot> tags should appear before <tbody>

Example

<!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>

This will produce the following result −

Nested Tables

You can use one table inside another table. Not only tables you can use almost all the tags inside table data tag <td>.

Example

Following is the example of using another table and other tags inside a table cell.

<!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>

This will produce the following result −

HTML offers web authors three ways for specifying lists of information. All lists must contain one or more list elements. Lists may contain −

<ul> − An unordered list. This will list items using plain bullets.
<ol> − An ordered list. This will use different schemes of numbers to list your items.
<dl> − A definition list. This arranges your items in the same way as they are arranged in a dictionary.

HTML Unordered Lists

An unordered list is a collection of related items that have no special order or sequence. This list is created by using HTML <ul> tag. Each item in the list is marked with a bullet.

Example

<!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>

This will produce the following result −

The type Attribute

You can use type attribute for <ul> tag to specify the type of bullet you like. By default, it is a disc. Following are the possible options −

<ul type = "square">
<ul type = "disc">
<ul type = "circle">

Example

Following is an example where we used <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>

This will produce the following result −

Example

Following is an example where we used <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>

This will produce the following result −

Example

Following is an example where we used <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>

This will produce the following result −

HTML Ordered Lists

If you are required to put your items in a numbered list instead of bulleted, then HTML ordered list will be used. This list is created by using <ol> tag. The numbering starts at one and is incremented by one for each successive ordered list element tagged with <li>.

Example

<!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>

This will produce the following result −

The type Attribute

You can use type attribute for <ol> tag to specify the type of numbering you like. By default, it is a number. Following are the possible options −

<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.

Example

Following is an example where we used <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>

This will produce the following result −

Example

Following is an example where we used <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>

This will produce the following result −

Example

Following is an example where we used <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>

This will produce the following result −

Example

Following is an example where we used <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>

This will produce the following result −

Example

Following is an example where we used <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>

This will produce the following result −

The start Attribute

You can use start attribute for <ol> tag to specify the starting point of numbering you need. Following are the possible options −

<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.

Example

Following is an example where we used <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>

This will produce the following result −

HTML Definition Lists

HTML and XHTML supports a list style which is called definition lists where entries are listed like in a dictionary or encyclopedia. The definition list is the ideal way to present a glossary, list of terms, or other name/value list.

Definition List makes use of following three tags.

<dl> − Defines the start of the list
<dt> − A term
<dd> − Term definition
</dl> − Defines the end of the list

Example

<!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>

This will produce the following result −

A webpage can contain various links that take you directly to other pages and even specific parts of a given page. These links are known as hyperlinks.

Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases, and images. Thus you can create hyperlinks using text or images available on a webpage.

Note − I recommend you to go through a short tutorial on Understanding URL

Linking Documents

A link is specified using HTML tag <a>. This tag is called anchor tag and anything between the opening <a> tag and the closing </a> tag becomes part of the link and a user can click that part to reach to the linked document. Following is the simple syntax to use <a> tag.

<a href = "Document URL" ... attributes-list>Link Text</a>

Example

Let's try following example which links http://www.tutorialspoint.com at your page −

<!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>

This will produce the following result, where you can click on the link generated to reach to the home page of Tutorials Point (in this example).

The target Attribute

We have used target attribute in our previous example. This attribute is used to specify the location where linked document is opened. Following are the possible options −

Sr.No	Option & Description
1	_blank Opens the linked document in a new window or tab.
2	_self Opens the linked document in the same frame.
3	_parent Opens the linked document in the parent frame.
4	_top Opens the linked document in the full body of the window.
5	targetframe Opens the linked document in a named targetframe.

Example

Try following example to understand basic difference in few options given for target attribute.

<!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>

This will produce the following result, where you can click on different links to understand the difference between various options given for target attribute.

Use of Base Path

When you link HTML documents related to the same website, it is not required to give a complete URL for every link. You can get rid of it if you use <base> tag in your HTML document header. This tag is used to give a base path for all the links. So your browser will concatenate given relative path to this base path and will make a complete URL.

Example

Following example makes use of <base> tag to specify base URL and later we can use relative path to all the links instead of giving complete URL for every link.

<!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>

This will produce the following result, where you can click on the link generated HTML Tutorial to reach to the HTML tutorial.

Now given URL <a href = "/html/index.htm" is being considered as <ahref = "http://www.tutorialspoint.com/html/index.htm"

Linking to a Page Section

You can create a link to a particular section of a given webpage by using name attribute. This is a two-step process.

Note − The name attribute deprecated in HTML5. Do not use this attribute. Use id and title attribute instead.

First create a link to the place where you want to reach with-in a webpage and name it using <a...> tag as follows −

<h1>HTML Text Links <a name = "top"></a></h1>

Second step is to create a hyperlink to link the document and place where you want to reach −

<a href = "/html/html_text_links.htm#top">Go to the Top</a>

This will produce following link, where you can click on the link generated Go to the Top to reach to the top of the HTML Text Link tutorial.

Go to the Top

Setting Link Colors

You can set colors of your links, active links and visited links using link, alink and vlink attributes of <body> tag.

Example

Save the following in test.htm and open it in any web browser to see how link, alink and vlink attributes work.

<!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>

This will produce the following result. Just check color of the link before clicking on it, next check its color when you activate it and when the link has been visited.

Download Links

You can create text link to make your PDF, or DOC or ZIP files downloadable. This is very simple; you just need to give complete URL of the downloadable file as follows −

<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
   </head>
	
   <body>
      <a href = "https://www.tutorialspoint.com/page.pdf">Download PDF File</a>
   </body>
	
</html>

This will produce following link and will be used to download a file.

File Download Dialog Box

Sometimes it is desired that you want to give an option where a user will click a link and it will pop up a "File Download" box to the user instead of displaying actual content. This is very easy and can be achieved using an HTTP header in your HTTP response.

For example, if you want make a Filename file downloadable from a given link then its syntax will be as follows.

#!/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");
}

Note − For more detail on PERL CGI programs, go through tutorial PERL and CGI.

We have seen how to create hypertext link using text and we also learnt how to use images in our webpages. Now, we will learn how to use images to create hyperlinks.

Example

It's simple to use an image as hyperlink. We just need to use an image inside hyperlink at the place of text as shown below −

<!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>

This will produce the following result, where you can click on the images to reach to the home page of Tutorials Point.

This was the simplest way of creating hyperlinks using images. Next we will see how we can create Mouse-Sensitive Image Links.

Mouse-Sensitive Images

The HTML and XHTML standards provides a feature that lets you embed many different links inside a single image. You can create different links on the single image based on different coordinates available on the image. Once different links are attached to different coordinates, we can click different parts of the image to open target documents. Such mouse-sensitive images are known as image maps.

There are two ways to create image maps −

Server-side image maps − This is enabled by the ismap attribute of the <img> tag and requires access to a server and related image-map processing applications.
Client-side image maps − This is created with the usemap attribute of the <img> tag, along with corresponding <map> and <area> tags.

Server-Side Image Maps

Here you simply put your image inside a hyper link and use ismap attribute which makes it special image and when the user clicks some place within the image, the browser passes the coordinates of the mouse pointer along with the URL specified in the <a> tag to the web server. The server uses the mouse-pointer coordinates to determine which document to deliver back to the browser.

When ismap is used, the href attribute of the containing <a> tag must contain the URL of a server application like a cgi or PHP script etc. to process the incoming request based on the passed coordinates.

The coordinates of the mouse position are screen pixels counted from the upper-left corner of the image, beginning with (0,0). The coordinates, preceded by a question mark, are added to the end of the URL.

For example, if a user clicks 20 pixels over and 30 pixels down from the upper-left corner of the following image −

Which has been generated by the following code snippet −

<!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 сценарий или map file и вы можете связать любые документы с этими координатами -

/cgi-bin/ismap.cgi?20,30

Таким образом, вы можете назначать разные ссылки для разных координат изображения, и при нажатии на эти координаты вы можете открыть соответствующий связанный документ. Чтобы узнать больше оismapатрибут, вы можете проверить Как использовать Image ismap?

Note- Вы изучите программирование 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₁ , y₁ , x₂ , y₂

x ₁ и y ₁ - координаты левого верхнего угла прямоугольника; x ₂ и y ₂ - координаты правого нижнего угла.
circle = x_c , y_c , radius

x _c и y _c - координаты центра круга, а радиус - радиус круга. Круг с центром в 200,50 и радиусом 25 будет иметь атрибут coords = "200,50,25".
poly = x₁ , y₁ , x₂ , y₂ , x₃ , y₃ , ... x_n , y_n

Различные пары xy определяют вершины (точки) многоугольника, при этом от одной точки к следующей проводится «линия». Многоугольник в форме ромба с верхней точкой в 20,20 и 40 пикселей в ширину в самых широких точках будет иметь атрибут coords = "20,20,40,40,20,60,0,40" .

Все координаты указаны относительно левого верхнего угла изображения (0,0). У каждой фигуры есть связанный URL. Вы можете использовать любое графическое программное обеспечение, чтобы узнать координаты различных позиций.

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

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

Простой пример, проверьте нашу Обратную связь формы. Мы принимаем отзывы пользователей с помощью этой формы, а затем используем одну программу CGI, которая собирает эту информацию и отправляет нам электронное письмо на один указанный адрес электронной почты.

Note- Вы узнаете о HTML-формах в HTML-формах и узнаете о CGI в нашем другом руководстве.Perl CGI Programming.

HTML-тег электронной почты

HTML <a>Тег предоставляет вам возможность указать адрес электронной почты для отправки электронного письма. При использовании тега <a> в качестве тега электронной почты вы будете использоватьmailto: email addressвместе с атрибутом 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-документ. Набор фреймов в окне браузера называется набором фреймов. Окно разделено на фреймы аналогично тому, как организованы таблицы: на строки и столбцы.

Недостатки фреймов

У использования фреймов есть несколько недостатков, поэтому никогда не рекомендуется использовать фреймы на ваших веб-страницах -

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

Создание рамок

Чтобы использовать фреймы на странице, мы используем тег <frameset> вместо тега <body>. Тег <frameset> определяет, как разделить окно на фреймы. Вrows атрибут тега <frameset> определяет горизонтальные рамки и colsатрибут определяет вертикальные рамки. Каждый фрейм обозначается тегом <frame> и определяет, какой HTML-документ должен открываться во фрейме.

Note- Тег <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>

Это даст следующий результат -

пример

Давайте представим приведенный выше пример следующим образом, здесь мы заменили атрибут rows на 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>:

Старший Нет	Атрибут и описание
1	cols Задает количество столбцов в наборе фреймов и размер каждого столбца. Вы можете указать ширину каждого столбца одним из четырех способов: Абсолютные значения в пикселях. Например, чтобы создать три вертикальных фрейма, используйте cols = "100, 500, 100" . Процент окна браузера. Например, чтобы создать три вертикальных кадра, используйте cols = "10%, 80%, 10%" . Использование подстановочного знака. Например, чтобы создать три вертикальные рамки, используйте cols = "10%, , 10%"* . В этом случае подстановочный знак занимает оставшуюся часть окна. Как относительная ширина окна браузера. Например, чтобы создать три вертикальных фрейма, используйте cols = "3 , 2 , 1 "* . Это альтернатива процентам. Вы можете использовать относительную ширину окна браузера. Здесь окно разделено на шестые: первый столбец занимает половину окна, второй - одну треть, а третий - одну шестую.
2	rows Этот атрибут работает так же, как атрибут cols, и принимает те же значения, но используется для указания строк в наборе фреймов. Например, чтобы создать две горизонтальные рамки, используйте rows = "10%, 90%" . Вы можете указать высоту каждой строки так же, как описано выше для столбцов.
3	border Этот атрибут определяет ширину границы каждого кадра в пикселях. Например, border = «5». Нулевое значение означает отсутствие границы.
4	frameborder Этот атрибут указывает, должна ли отображаться трехмерная граница между кадрами. Этот атрибут принимает значение 1 (да) или 0 (нет). Например, frameborder = "0" не указывает границы.
5	framespacing Этот атрибут определяет количество пространства между кадрами в наборе кадров. Может принимать любое целочисленное значение. Например, framepacing = "10" означает, что между кадрами должно быть 10 пикселей.

Атрибуты тега <frame>

Ниже приведены важные атрибуты тега <frame>:

Старший Нет	Атрибут и описание
1	src Этот атрибут используется для указания имени файла, который должен быть загружен во фрейм. Его значением может быть любой URL. Например, src = "/html/top_frame.htm" загрузит файл HTML, доступный в каталоге html.
2	name Этот атрибут позволяет дать фрейму имя. Он используется, чтобы указать, в какой фрейм следует загрузить документ. Это особенно важно, когда вы хотите создать ссылки в одном фрейме, которые загружают страницы в другой фрейм, и в этом случае второму фрейму требуется имя, чтобы идентифицировать себя как цель ссылки.
3	frameborder Этот атрибут указывает, отображаются ли границы этого фрейма; он переопределяет значение, указанное в атрибуте frameborder в теге <frameset>, если он задан, и может принимать значения либо 1 (да), либо 0 (нет).
4	marginwidth Этот атрибут позволяет вам указать ширину пространства между левой и правой границами фрейма и содержимым фрейма. Значение указано в пикселях. Например, marginwidth = "10".
5	marginheight Этот атрибут позволяет указать высоту пространства между верхней и нижней границами фрейма и его содержимым. Значение указано в пикселях. Например, marginheight = "10".
6	noresize По умолчанию вы можете изменить размер любого кадра, щелкнув и перетащив границы кадра. Атрибут noresize не позволяет пользователю изменять размер кадра. Например, noresize = "noresize".
7	scrolling Этот атрибут управляет внешним видом полос прокрутки, которые появляются во фрейме. Принимает значения «да», «нет» или «авто». Например, scrolling = "no" означает, что на нем не должно быть полос прокрутки.
8	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 файл, он дает следующий результат -

Теперь вы можете попробовать щелкнуть ссылки, доступные на левой панели, и увидеть результат. Targetattribute также может принимать одно из следующих значений -

Старший Нет	Вариант и описание
1	_self Загружает страницу в текущий фрейм.
2	_blank Загружает страницу в новое окно браузера. Открытие нового окна.
3	_parent Загружает страницу в родительское окно, которое в случае одного набора фреймов является главным окном браузера.
4	_top Загружает страницу в окно браузера, заменяя все текущие фреймы.
5	targetframe Загружает страницу в указанный целевой фрейм.

Вы можете определить встроенный фрейм с помощью тега 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>, включая name, class, frameborder, id, longdesc, marginheight, marginwidth, name, scrolling, style и title, ведут себя точно так же, как соответствующие атрибуты тега <frame>.

Note- Атрибуты frameborder , marginwidth , longdesc , scrolling , marginheight устарели в HTML5. Не используйте эти атрибуты.

Старший Нет	Атрибут и описание
1	src Этот атрибут используется для указания имени файла, который должен быть загружен во фрейм. Его значением может быть любой URL. Например, src = "/html/top_frame.htm" загрузит файл HTML, доступный в каталоге html.
2	name Этот атрибут позволяет дать фрейму имя. Он используется, чтобы указать, в какой фрейм следует загрузить документ. Это особенно важно, когда вы хотите создать ссылки в одном фрейме, которые загружают страницы в другой фрейм, и в этом случае второму фрейму требуется имя, чтобы идентифицировать себя как цель ссылки.
3	frameborder Этот атрибут указывает, отображаются ли границы этого фрейма; он переопределяет значение, указанное в атрибуте frameborder в теге <frameset>, если он задан, и может принимать значения либо 1 (да), либо 0 (нет).
4	marginwidth Этот атрибут позволяет вам указать ширину пространства между левой и правой границами фрейма и содержимым фрейма. Значение указано в пикселях. Например, marginwidth = "10".
5	marginheight Этот атрибут позволяет указать высоту пространства между верхней и нижней границами фрейма и его содержимым. Значение указано в пикселях. Например, marginheight = "10".
6	height Этот атрибут определяет высоту <iframe>.
7	scrolling Этот атрибут управляет внешним видом полос прокрутки, которые появляются во фрейме. Принимает значения «да», «нет» или «авто». Например, scrolling = "no" означает, что на нем не должно быть полос прокрутки.
8	longdesc Этот атрибут позволяет вам предоставить ссылку на другую страницу, содержащую подробное описание содержимого фрейма. Например longdesc = "framedescription.htm"
9	width Этот атрибут определяет ширину <iframe>.

Все элементы HTML можно разделить на две категории. (a) Элементы уровня блока (b)Встроенные элементы.

Блочные элементы

Блочные элементы появляются на экране так, как будто перед ними и после них есть разрыв строки. Например, <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>. Мы изучим каскадную таблицу стилей (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>. Мы изучим каскадную таблицу стилей (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 с цветами

В bgcolor Атрибут используется для управления фоном HTML-элемента, в частности, фоном страницы и таблицы.

Note- Атрибут 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-страницы или таблицы.

Note- Атрибут background не рекомендуется в HTML5. Не используйте этот атрибут.

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

Note- Атрибут фона устарел, и для настройки фона рекомендуется использовать таблицу стилей.

<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 использовать наименьшие возможные размеры, даже такие маленькие, как 1x1, чтобы избежать медленной загрузки.

пример

Вот примеры для установки фонового рисунка таблицы -

<!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>

Это даст следующий результат -

Цвета очень важны для хорошего внешнего вида вашего сайта. Вы можете указать цвета на уровне страницы, используя тег <body>, или вы можете установить цвета для отдельных тегов, используяbgcolor атрибут.

Тег <body> имеет следующие атрибуты, которые можно использовать для установки разных цветов:

bgcolor - устанавливает цвет фона страницы.
text - устанавливает цвет для основного текста.
alink - устанавливает цвет активных ссылок или выбранных ссылок.
link - устанавливает цвет связанного текста.
vlink- устанавливает цвет для посещенных ссылок, то есть для связанного текста, по которому вы уже нажимали.

Методы цветового кодирования HTML

Существует три разных метода установки цветов на вашей веб-странице:

Color names - Вы можете напрямую указать названия цветов, например зеленый, синий или красный.
Hex codes - Шестизначный код, представляющий количество красного, зеленого и синего цветов, составляющих цвет.
Color decimal or percentage values - Это значение указывается с помощью свойства rgb ().

Теперь мы посмотрим эти схемы раскраски одну за другой.

Цвета HTML - названия цветов

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

Note- Проверьте полный список HTML Color Name.

Стандарт W3C 16 цветов

Вот список названий стандартных 16 цветов W3C, и рекомендуется их использовать.

Черный	Серый	Серебряный	Белый
Желтый	Лайм	Аква	Фуксия
Красный	Зеленый	Синий	Пурпурный
Бордовый	Оливковое	Флот	Бирюзовый

пример

Вот примеры для установки фона тега 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 или процентом.

Note - Все браузеры не поддерживают свойство цвета rgb (), поэтому не рекомендуется его использовать.

Ниже приведен список для отображения нескольких цветов с использованием значений RGB.

цвет	Цвет RGB
	rgb (0,0,0)
	RGB (255,0,0)
	rgb (0,255,0)
	RGB (0,0,255)
	RGB (255,255,0)
	RGB (0,255,255)
	RGB (255,0,255)
	RGB (192,192,192)
	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	CCC66	CCCC99	ССС	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>тег, чтобы добавить стиль, размер и цвет к тексту на вашем веб-сайте. Вы можете использовать<basefont> , чтобы задать для всего текста одинаковый размер, начертание и цвет.

Тег шрифта имеет три атрибута, называемых size, color, и faceдля настройки ваших шрифтов. Чтобы изменить любой из атрибутов шрифта в любое время на вашей веб-странице, просто используйте тег <font>. Текст, который следует за ним, останется измененным, пока вы не закроете его тегом </font>. Вы можете изменить один или все атрибуты шрифта в одном теге <font>.

Note- Теги 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, но имейте в виду, что если у пользователя, просматривающего страницу, не установлен шрифт, он не сможет его увидеть. Вместо этого пользователь увидит шрифт по умолчанию, применимый к компьютеру пользователя.

пример

<!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 .

Note - Проверьте полный список HTML Standard Fonts.

Настройка цвета шрифта

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

Note - Вы можете проверить полный список HTML Color Name with Codes.

пример

<!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> также принимает атрибуты цвета, размера и лица и поддерживает настройку относительного шрифта, задавая значение +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 &lt;basefont&gt; 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-формы необходимы, когда вы хотите собрать некоторые данные о посетителе сайта. Например, во время регистрации пользователя вы хотите получить такую информацию, как имя, адрес электронной почты, кредитную карту и т. Д.

Форма будет принимать входные данные от посетителя сайта и затем отправлять их в серверное приложение, такое как CGI, ASP Script или PHP-скрипт и т. Д. Внутреннее приложение будет выполнять необходимую обработку переданных данных на основе определенной бизнес-логики внутри приложение.

Доступны различные элементы формы, такие как текстовые поля, поля текстового поля, раскрывающиеся меню, переключатели, флажки и т. Д.

HTML <form> тег используется для создания HTML-формы и имеет следующий синтаксис:

<form action = "Script URL" method = "GET|POST">
   form elements like input, textarea etc.
</form>

Атрибуты формы

Помимо общих атрибутов, ниже приведен список наиболее часто используемых атрибутов формы:

Старший Нет	Атрибут и описание
1	action Бэкэнд-скрипт готов к обработке ваших переданных данных.
2	method Метод, который будет использоваться для загрузки данных. Наиболее часто используются методы GET и POST.
3	target Укажите целевое окно или фрейм, в котором будет отображаться результат сценария. Принимает такие значения, как _blank, _self, _parent и т. Д.
4	enctype Вы можете использовать атрибут enctype, чтобы указать, как браузер кодирует данные перед их отправкой на сервер. Возможные значения - application/x-www-form-urlencoded - Это стандартный метод, который большинство форм используют в простых сценариях. mutlipart/form-data - Это используется, когда вы хотите загрузить двоичные данные в виде файлов, таких как изображение, текстовый файл и т. Д.

Note- Вы можете обратиться к Perl и CGI для получения подробной информации о том, как работает загрузка данных формы.

Элементы управления HTML-формы

Существуют различные типы элементов управления формами, которые вы можете использовать для сбора данных с помощью HTML-формы:

Элементы управления вводом текста
Флажки Элементы управления
Управление радиоблоком
Выберите элементы управления в поле
Поля выбора файла
Скрытые элементы управления
Кнопки с возможностью нажатия
Кнопка отправки и сброса

Элементы управления вводом текста

В формах используются три типа ввода текста:

Single-line text input controls- Этот элемент управления используется для элементов, для которых требуется только одна строка ввода пользователя, например для полей поиска или имен. Они созданы с использованием HTML<input> тег.
Password input controls- Это также однострочный ввод текста, но он маскирует символ, как только пользователь вводит его. Они также создаются с помощью тега HTMl <input>.
Multi-line text input controls- Это используется, когда от пользователя требуется предоставить детали, которые могут быть длиннее одного предложения. Элементы управления многострочным вводом создаются с использованием 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> для создания текстового поля.

Старший Нет	Атрибут и описание
1	type Указывает тип элемента управления вводом, и для элемента управления вводом текста он будет установлен на text.
2	name Используется для присвоения имени элементу управления, которое отправляется на сервер для распознавания и получения значения.
3	value Это можно использовать для предоставления начального значения внутри элемента управления.
4	size Позволяет указать ширину элемента управления вводом текста в знаках.
5	maxlength Позволяет указать максимальное количество символов, которое пользователь может ввести в текстовое поле.

Элементы управления вводом пароля

Это также однострочный ввод текста, но он маскирует символ, как только пользователь вводит его. Они также создаются с использованием тега 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> для создания поля пароля.

Старший Нет	Атрибут и описание
1	type Указывает тип управления вводом; для контроля ввода пароля он будет установлен на password.
2	name Используется для присвоения имени элементу управления, которое отправляется на сервер для распознавания и получения значения.
3	value Это можно использовать для предоставления начального значения внутри элемента управления.
4	size Позволяет указать ширину элемента управления вводом текста в знаках.
5	maxlength Позволяет указать максимальное количество символов, которое пользователь может ввести в текстовое поле.

Элементы управления вводом многострочного текста

Это используется, когда от пользователя требуется указать детали, которые могут быть длиннее одного предложения. Элементы управления многострочным вводом создаются с помощью тега 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>.

Старший Нет	Атрибут и описание
1	name Используется для присвоения имени элементу управления, которое отправляется на сервер для распознавания и получения значения.
2	rows Указывает количество строк поля текстовой области.
3	cols Указывает количество столбцов поля текстовой области

Флажок управления

Флажки используются, когда требуется выбрать более одного параметра. Они также создаются с использованием тега 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>.

Старший Нет	Атрибут и описание
1	type Указывает тип элемента управления вводом, и для элемента управления вводом флажка он будет установлен на checkbox..
2	name Используется для присвоения имени элементу управления, которое отправляется на сервер для распознавания и получения значения.
3	value Значение, которое будет использоваться, если флажок установлен.
4	checked Установите флажок, если вы хотите выбрать его по умолчанию.

Радио-кнопка управления

Радиокнопки используются, когда из многих вариантов требуется выбрать только один вариант. Они также создаются с использованием тега 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>

Это даст следующий результат -

Атрибуты

Ниже приводится список атрибутов радиокнопки.

Старший Нет	Атрибут и описание
1	type Указывает тип управления вводом, и для флажка управления вводом он будет установлен на радио.
2	name Используется для присвоения имени элементу управления, которое отправляется на сервер для распознавания и получения значения.
3	value Значение, которое будет использоваться, если установлен переключатель.
4	checked Установите флажок, если вы хотите выбрать его по умолчанию.

Выбрать поле управления

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

пример

Вот пример 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> -

Старший Нет	Атрибут и описание
1	name Используется для присвоения имени элементу управления, которое отправляется на сервер для распознавания и получения значения.
2	size Это можно использовать для отображения окна списка с прокруткой.
3	multiple Если установлено значение «несколько», пользователь может выбрать несколько пунктов меню.

Ниже приводится список важных атрибутов тега <option> -

Старший Нет	Атрибут и описание
1	value Значение, которое будет использоваться, если выбран параметр в поле выбора.
2	selected Указывает, что этот параметр должен быть изначально выбранным значением при загрузке страницы.
3	label Альтернативный способ маркировки вариантов

Окно загрузки файла

Если вы хотите разрешить пользователю загружать файл на ваш веб-сайт, вам нужно будет использовать окно загрузки файла, также известное как поле выбора файла. Он также создается с помощью элемента <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>

Это даст следующий результат -

Атрибуты

Ниже приведен список важных атрибутов окна загрузки файлов -

Старший Нет	Атрибут и описание
1	name Используется для присвоения имени элементу управления, которое отправляется на сервер для распознавания и получения значения.
2	accept Задает типы файлов, которые принимает сервер.

Кнопки управления

В HTML есть различные способы создания интерактивных кнопок. Вы также можете создать интерактивную кнопку с помощью тега <input>, установив для его атрибута type значениеbutton. Атрибут type может принимать следующие значения -

Старший Нет	Тип и описание
1	submit Это создает кнопку, которая автоматически отправляет форму.
2	reset Это создает кнопку, которая автоматически сбрасывает элементы управления формы до их начальных значений.
3	button Это создает кнопку, которая используется для запуска клиентского сценария, когда пользователь нажимает эту кнопку.
4	image Это создает кнопку, которую можно нажимать, но мы можем использовать изображение в качестве фона для кнопки.

пример

Вот пример 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-тег, называемый<embed>. Этот тег заставляет сам браузер включать элементы управления для мультимедиа, автоматически при условии, что браузер поддерживает тег <embed> и данный тип мультимедиа.

Вы также можете включить <noembed>для браузеров, которые не распознают тег <embed>. Вы можете, например, использовать <embed> для отображения фильма по вашему выбору, и<noembed> для отображения одного изображения JPG, если браузер не поддерживает тег <embed>.

пример

Вот простой пример воспроизведения встроенного файла midi:

<!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>.

Note-Атрибуты align и autostart устарели в HTML5. Не используйте эти атрибуты.

Старший Нет	Атрибут и описание
1	align Определяет, как выровнять объект. Его можно установить по центру, влево или вправо .
2	autostart Этот логический атрибут указывает, должен ли носитель запускаться автоматически. Вы можете установить значение true или false.
3	loop Определяет, должен ли звук воспроизводиться непрерывно (установите для цикла значение true), определенное количество раз (положительное значение) или не воспроизводить вообще (false)
4	playcount Задает количество воспроизведений звука. Это альтернативный вариант для цикла, если вы используете IE.
5	hidden Указывает, должен ли мультимедийный объект отображаться на странице. Ложное значение означает «нет», а истинное значение означает «да».
6	width Ширина объекта в пикселях
7	height Высота объекта в пикселях
8	name Имя, используемое для ссылки на объект.
9	src URL-адрес внедряемого объекта.
10	volume Регулирует громкость звука. Может быть от 0 (выключено) до 100 (полная громкость).

Поддерживаемые типы видео

Вы можете использовать различные типы файлов мультимедиа, такие как Flash-ролики (.swf), AVI (.avi) и MOV (.mov), внутри тега embed.

.swf files - типы файлов, создаваемые программой Macromedia Flash.
.wmv files - типы файлов мультимедийного видео в Microsoft Windows.
.mov files - это формат Apple Quick Time Movie.
.mpeg files - файлы фильмов, созданные экспертной группой 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, и большинство других браузеров игнорируют этот тег. Он загружает и воспроизводит аудиофайл, когда основной документ впервые загружается и отображается пользователем. Фоновый звуковой файл также будет воспроизводиться всякий раз, когда пользователь обновляет браузер.

Note- Тег bgsound устарел и предполагается, что он будет удален в будущей версии HTML. Поэтому их лучше не использовать, рекомендуется использовать аудио тега HTML5 для добавления звука. Но, тем не менее, в целях обучения в этой главе будут подробно описаны теги bgsound.

Этот тег имеет только два атрибута: loop и src . Оба эти атрибута имеют такое же значение, как объяснено выше.

Вот простой пример воспроизведения небольшого файла midi:

<!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>element, который предлагает универсальное решение для включения общих объектов. В<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 использовать. Вы можете использовать необязательный атрибут codebase, чтобы указать, нужно ли и как загружать JRE.

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

Note- Тег <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>.

Старший Нет	Атрибут и описание
1	width Это определяет ширину выделения. Это может быть значение, например 10 или 20% и т. Д.
2	height Это определяет высоту выделения. Это может быть значение, например 10 или 20% и т. Д.
3	direction Это определяет направление, в котором должна прокручиваться область. Это может быть значение, например, вверх, вниз, влево или вправо .
4	behavior Определяет тип прокрутки выделения. Это может быть значение прокрутки, слайда и чередования .
5	scrolldelay Это определяет, как долго задерживаться между каждым прыжком. Это будет значение вроде 10 и т. Д.
6	scrollamount Это определяет скорость выделения текста. Может иметь значение 10 и т. Д.
7	loop Это указывает, сколько раз повторять цикл. Значение по умолчанию - INFINITE, что означает бесконечный цикл выделения.
8	bgcolor Это определяет цвет фона в терминах имени цвета или шестнадцатеричного значения цвета.
9	hspace Это определяет горизонтальное пространство вокруг выделения. Это может быть значение, например 10 или 20% и т. Д.
10	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-документ будет иметь следующую структуру -

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/ каталога -

<!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>

Это даст следующий результат -

Note- Чтобы узнать о том, как работает каскадная таблица стилей, ознакомьтесь с отдельным руководством, доступным на 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>

Это приведет к следующему результату, где вы можете попытаться нажать на данную кнопку -

Note- Чтобы узнать о том, как работает JavaScript, просмотрите отдельный учебник, доступный на javascript.

Каскадные таблицы стилей (CSS) описывают, как документы представлены на экранах, в печати или, возможно, как они произносятся. W3C активно продвигает использование таблиц стилей в Интернете с момента основания консорциума в 1994 году.

Каскадные таблицы стилей (CSS) предоставляют простые и эффективные альтернативы для указания различных атрибутов тегов HTML. Используя CSS, вы можете указать ряд свойств стиля для данного элемента HTML. У каждого свойства есть имя и значение, разделенные двоеточием (:). Каждое объявление свойства разделяется точкой с запятой (;).

пример

Сначала давайте рассмотрим пример HTML-документа, который использует тег <font> и связанные атрибуты для указания цвета текста и размера шрифта -

Note- Тег шрифта устарел, и предполагается, что он будет удален в будущей версии 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-документе тремя способами:

External Style Sheet - Определите правила таблицы стилей в отдельном файле .css, а затем включите этот файл в свой HTML-документ с помощью тега HTML <link>.
Internal Style Sheet - Определите правила таблицы стилей в разделе заголовка документа HTML с помощью тега <style>.
Inline Style Sheet - Определяйте правила таблицы стилей непосредственно вместе с элементами 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, используя styleатрибут соответствующего тега. Это следует делать только тогда, когда вы хотите внести конкретное изменение только в любой элемент 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>

Это даст следующий результат -

А scriptэто небольшая программа, которая может добавить интерактивности вашему сайту. Например, сценарий может генерировать всплывающее окно с предупреждением или предоставлять раскрывающееся меню. Этот сценарий может быть написан с использованием 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>

Это приведет к следующему результату, где вы можете попытаться нажать на данную кнопку -

Обработчики событий

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

В следующем примере объясняется, как написать обработчик событий. Напишем одну простую функцию 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" />

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

Макет веб-страницы очень важен для лучшего внешнего вида вашего сайта. На разработку макета веб-сайта с отличным внешним видом уходит много времени.

В настоящее время все современные веб-сайты используют фреймворк на основе 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-таблиц мы можем добиться довольно хороших макетов, на самом деле таблицы не были разработаны как инструмент макета. Таблицы больше подходят для представления табличных данных.

Note - В этом примере используется каскадная таблица стилей (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.