От переводчика

От Переводчика и составителя

« W3Schools Home Следующая Глава »

Среди многочисленных Online электронных учебников по Web-разработкам, размещенных в Интернете, особое место, по моему мнению, занимают учебники, опубликованные на сайте www.w3schools.com.

Эти учебники особенно хороши для начинающих Web-разработчиков ("чайников").

Основные достоинства этих Учебников:

  • Легко воспринимаемый, лаконичный контент
  • Каждый учебник содержит около 100 примеров, содержание которых обучаемый может редактировать и тотчас видеть результат
  • Обучение построено по принципу: учитесь на примерах
  • Учебники содержат тестирующие модули, позволяющие обучаемым производить самоконтроль знаний
  • Каждый учебник содержит Справочник, позволяющий получить полную информацию по изучаемой теме

Недостатки этих Учебников:

  • Весь их контент (содержание) на английском языке
  • Обучение возможно только в режиме Online
Переводчик и составитель этого учебника:
Джерихов Вадим Вадимович,
доцент кафедры Информационных систем и технологий
Санкт-Петербургского государственного лесотехнического университета им. С.М.Кирова (СПБГЛТУ).

Что сделано:

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

Любые замечания по переводу будут с благодарностью приняты!

E-mail: vadvadd@mail.ru


HTML Главная (HOME)

« W3Schools Home Следующая Глава »

HTML

Используя HTML, вы можете создать собственный Web-сайт.

Этот учебник научит вас всему о HTML.

HTML легко изучается - вы получите удовольствие.

Примеры в каждой главе

Этот учебник HTML содержит более 100 примеров.

Используя наш HTML редактор, вы можете редактировать HTML и, щелкнув по кнопке, увидеть результат.

Пример

<html>
<body>

<h1>Мой первый Заголовок</h1>

<p>Мой первый абзац.</p>

</body>
</html>

Попробуйте сами »

Щелкните по Попробуйте сами », чтобы увидеть как это работает

В конце учебника по HTML вы найдете более 100 примеров, которые вы можете редактировать и испытывать самостоятельно.

Начинаем изучение HTML!

Проверка знания HTML (HTML Quiz Test)

Проверьте ваши знания HTML в среде W3Schools!

Запуск проверки знания HTML (Start HTML Quiz)!

HTML Справочники (References)

В W3Schools вы найдете полные справочники по тегам, стандартным атрибутам, стандартным событиям, названиям цветов, сущностям, наборам символов, кодированию URL, кодам языка, HTTP сообщениям и т.д.

HTML 4.01 Справочник по тегам (Tag Reference)


HTML Введение (Introduction)

« Предыдущая Следующая Глава »

Пример

<html>
<body>

<h1>Мой Первый Заголовок</h1>

<p>Мой первый абзац.</p>

</body>
</html>

Попробуйте сами »

Что такое HTML?

HTML является языком для описания web-страниц.

  • Аббревиатура HTML образуется из начальных букв Hyper Text Markup Language (Язык разметки гипертекста)
  • HTML не является языком программирования, это язык разметки (markup language)
  • Язык разметки является набором тегов разметки (markup tags)
  • HTML использует теги разметки для описания web-страниц

HTML Теги (Tags)

Теги разметки HTML обычно называют HTML тегами

  • HTML тегами являются ключевые слова, окруженные угловыми скобками наподобие <html>
  • HTML теги обычно образуют пары подобно <b> и </b>
  • Певый тег в паре является начальным тегом (start tag), второй тег является конечным тегом (end tag)
  • Начальные и конечные теги также называют открывающими тегами (opening tags) и закрывающими тегами (closing tags)

HTML Документы (Documents)= Web Страницы (Pages)

  • HTML документы описывают web-страницы
  • HTML документы содержат HTML теги и обычный текст
  • HTML документы также называются web-страницами

Целью web-браузера (подобного Internet Explorer или Firefox) является: прочитать HTML документы и показать их как web-страницы. Браузер не показывает HTML теги, а использует теги для интерпретации содержимого (контента) страницы:

<html>
<body>

<h1>Мой Первый Заголовок</h1>

<p>Мой первый абзац.</p>

</body>
</html>

Объяснение Примера

  • Текст между <html> и </html> описывает web-страницу
  • Текст между <body> и </body> является видимым в браузере контентом страницы
  • Текст между <h1> и </h1> отображается в браузере как заголовок
  • Текст между <p> и </p> отображается в браузере как абзац


HTML Подготовка к работе (Geting Started)

В чем вы нуждаетесь

Вам не нужны какие-либо инструментальные средства для изучения HTML в W3Schools.

  • Вам не нужен никакой HTML редактор
  • Вам не нужен никакой web сервер
  • Вам не нужен никакой web сайт

Редактирование HTML

В этом учебнике мы используем простой текстовый редактор (подобный Блокноту) для редактирования HTML. Мы полагаем, что это лучший путь к изучению HTML.

Однако, профессиональные web разработчики часто предпочитают HTML редакторы, подобные FrontPage или Dreamweaver, вместо написания простого текста.

Создайте свой собственный Web-тест

Если вы хотите просто изучить HTML, пропустить остаток этой главы.

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

(Щелкните правой кнопкой мыши на каждой ссылке и выберите "Сохранить объект как ...")

mainpage.htm

page1.htm

page2.htm

После того как вы скопируете файлы, вы можете дважды щелкнуть на файле "mainpage.htm" и увидеть ваш первый веб-сайт в действии.

Использование вашего Web-теста для обучения

Мы рекомендуем вам поэкспериментировать со всем, что вы изучаете в W3Schools, путем редактирования ваших Web файлов в среде текстового редактора (подобного Блокноту).

Примечание: Если ваш Web тест содержит теги HTML разметки, которые вы не изучали, не паникуйте. Вы узнаете о них все в следующих главах.

Расширение имени файла .HTM или .HTML?

Когда вы сохраняете HTML файл, вы можете использовать любое из .htm или .html расширений. Мы используем расширение .htm в наших примерах. Это привычка из прошлого, когда программное обеспечение разрешало только три буквы в расширении имени файла.

С новым программным обеспечением вполне безопасно использование расширения .html.


HTML Основы (Basic) - 4 Примера

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

Вы изучите их в следующих главах.

HTML Заголовки (Headings)

Заголовки HTML определяются тегами от <h1> до <h6>.

Пример

<h1>Это Заголовок</h1>
<h2>Это Заголовок</h2>
<h3>Это Заголовок</h3>

Попробуйте сами »

HTML Абзацы (Paragraphs)

Абзацы HTML определяются <p> тегами.

Пример

<p>Это абзац</p>
<p>Это другой абзац</p>

Попробуйте сами »

HTML Ссылки (Links)

Ссылки HTML определяются <a> тегами.

Пример

<a href= "http://www.w3schools.com">Это ссылка</a>

Попробуйте сами »

Примечание: Адрес ссылки обеспечивается атрибутом href.

(Вы узнаете об атрибутах в одной из последующих глав этого учебника)

HTML Изображения (Images)

Изображения HTML определяются <img> тегами.

Пример

<img src="w3schools.jpg" width="104" height= "142" />

Попробуйте сами »

Примечание: Имя и размер изображения определяются атрибутами.

(Вы узнаете об атрибутах в одной из последующих глав этого учебника)


HTML Элементы (Elements)

HTML документы определяются HTML элементами.

HTML Элементы (Elements)

Элемент HTML это все, что есть от начального тега до конечного тега:

Начальный тег * | Контент элемента | Конечный тег *
<p> | Это абзац | </p>
<a href= "default.htm" > | Это ссылка | </a>
<br /> |  |

* Начальный тег часто называют открывающим тегом. Конечный тег часто называют закрывающим тегом.

Синтаксис элемента HTML

  • Элемент HTML начинается с начального тега / открывающего тега
  • Элемент HTML заканчивается конечным тегом / закрывающим тегом
  • Контент элемента это все, что находится между начальным и конечным тегами
  • Некоторые HTML элементы имеют пустой контент
  • Пустые элементы завершаются начальным тегом
  • Большая часть HTML элементов может иметь атрибуты

(Вы узнаете об атрибутах элемента в следующей главе этого учебника)

Вложенные (Nested) HTML элементы

Большая часть HTML элементов могут быть вложенными (могут содержать другие HTML элементы).

HTML документы состоят из вложенных HTML элементов.

Пример HTML документа

<html>

<body>
<p>Это мой первый абзац</p>
</body>

</html>

Этот пример содержит 3 HTML элемента.

Объяснение примера

Элемент p:

<p>Это мой первый абзац</p>

Элемент p определяет абзац в HTML документе
Элемент имеет начальный тег <p> и конечный тег </p>
Содержимое (контент) элемента: Это мой первый абзац

Элемент body:

<body>
<p>Это мой первый абзац</p>
</body>

Элемент body определяет тело HTML документа
Элемент имеет начальный тег <body> и конечный тег </body>
Контент элемента - другой HTML элемент (элемент p)

Элемент html:

<html>

<body>
<p>Это мой первый абзац</p>
</body>

</html>

Элемент html определяет весь HTML документ.
Элемент имеет начальный тег <html> и конечный тег </html>
Элемент содержит другой элемент HTML (body)

На забывайте про конечный тег

Большинство браузеров корректно покажут HTML, даже если вы пренебрегли конечным тегом:

<p>Это абзац
<p>Это абзац

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

Примечание: Будущие версии HTML не будут разрешать вам пропуск конечных тегов.

Пустые (Empty) элементы HTML

Элементы HTML без контента называют пустыми элементами. Пустые элементы могут завершаться в начальном теге.

<br> является пустым элементом без закрывающего тега (тег <br> определяет разрыв строки).

В XHTML, XML, и будущих версиях HTML, все элементы должны быть закрыты.

Добавление слэша в начальный тег, подобно <br />, является правильным способом закрытия пустых элементов, принятым в HTML, XHTML и XML.

Даже если <br> работает во всех браузерах, запись <br /> является более перспективной.

HTML Совет: Пишите теги строчными буквами (в нижнем регистре)

HTML теги не чувствительны к регистру: <P> означает то же, что и <p>. Множество веб-сайтов используют верхний регистр в HTML тегах на своих страницах.

W3Schools использует написание тегов в нижнем регистре, потому что World Wide Web Consortium (W3C) рекомендует нижний регистр в HTML 4, и требует строчные теги в будущих версиях (X)HTML.


HTML Атрибуты (Attributes)

Атрибуты предоставляют дополнительную информацию об HTML элементах.

HTML Атрибуты (Attributes)

  • HTML элементы могут иметь атрибуты
  • Атрибуты предоставляют дополнительную информацию об элементе
  • Атрибуты всегда указываются в начальном теге
  • Атрибуты представляются в парах имя/значение подобно: name="value"

Пример атрибута

Ссылки HTML определяются <a> тегом. Адрес ссылки обеспечивается href атрибутом:

Пример

<a href= "http://www.w3schools.com">Это ссылка</a>

Попробуйте сами »

(Вы узнаете о ссылках в одной из следующих глав этого учебника)

Всегда заключайте в кавычки значения атрибутов

Значения атрибутов всегда должны быть заключены в кавычки.

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

Совет: В некоторых редких случаях, например, когда само значение атрибута содержит кавычки, необходимо использовать одинарные кавычки: name='John "ShotGun" Nelson'

HTML Совет: Пишите атрибуты строчными буквами (в нижнем регистре)

Имена атрибутов и значения атрибутов не чувствительны к регистру.

Тем не менее, World Wide Web Consortium (W3C) рекомендует строчное написание атрибутов/значений атрибутов, согласно рекомендациям HTML 4.

Новые версии (X)HTML потребуют строчного написания атрибутов.

Справочник по HTML атрибутам

Полный перечень допустимых атрибутов для каждого элемента HTML указан в нашем:

Полный HTML Справочник (Complete HTML Reference)

Ниже приведен список некоторых атрибутов, которые являются стандартными для большинства элементов HTML:

Атрибут | Значение | Описание
class | имя класса | Определяет имя класса для элемента
id | id | Определяет уникальный идентификатор id для элемента
style | определение_стиля | Определяет встроенный стиль для элемента
title | текст_всплывающей подсказки | Определяет дополнительную информацию об элементе (отображается как всплывающая подсказка)

Для получения дополнительной информации о стандартных атрибутах:

Справочник по стандартным атрибутам HTML (HTML Standard Attributes Reference)


HTML Заголовки (Headings)

Заголовки играют важную роль в документах HTML.

HTML Заголовки (Headings)

Заголовки определяются тегами от <h1> до <h6>.

<h1> определяет наибольший заголовок. <h6> определяет наименьший заголовок.

Пример

<h1>Это заголовок</h1>
<h2>Это заголовок</h2>
<h3>Это заголовок</h3>

Попробуйте сами »

Примечание: Браузеры автоматически добавляют пустую строку до и после заголовка.

Заголовки это нечто особенное

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

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

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

Заголовки h1 используются в качестве главных заголовков, далее следуют заголовки h2, затем менее важные заголовки h3 и т.д.

HTML Линии (Lines)

Тег <hr /> создает горизонтальную линию (horizontal line) на HTML странице.

Элемент hr может быть использован для разделения содержания (контента):

Пример

<p>Это абзац</p>
<hr />
<p>Это абзац</p>
<hr />
<p>Это абзац</p>

Попробуйте сами »

HTML комментарии (comments)

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

Комментарии записываются так:

Пример

<!-- Это комментарий-->

Попробуйте сами »

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

HTML совет - Как просмотреть исходник HTML

Видя в браузере Web-страницу, вы когда-нибудь спрашивали "Эй! Как они это сделали?"

Чтобы выяснить это, щелкните правой кнопкой мыши на странице и выберите пункт "Просмотр HTML-кода". После этого откроется окно, в котором будет показан HTML код этой страницы.

Examples

Примеры с этой страницы

Заголовки (Headings)
Как показать заголовки в HTML документе.

Скрытые комментарии (Hidden comments)
Как вставить комментарий в исходный HTML код.

Горизонтальные линии (Horizontal lines)
Как вставить горизонтальную линию.

Справочник по HTML тегам

W3Schools справочник по тегам содержит дополнительную информацию об этих тегах и их атрибутах.

Вы узнаете больше о тегах HTML и их атрибутах в следующих главах этого учебника.

Тег | Описание
<html> | Определяет документ HTML
<body> | Определяет тело документа
от <h1> до <h6> | Определяют заголовки HTML
<hr /> | Определяет горизонтальную линию
<!-- --> | Определяет комментарий


HTML Абзацы (Paragraphs)

HTML документы разделены на абзацы (paragraphs).

HTML Абзацы (Paragraphs)

Абзацы определяются <p> тегами.

Пример

<p>Это абзац </p>
<p>Это другой абзац </p>

Попробуйте сами »

Примечание: Браузер автоматически добавляет пустую строку до и после абзаца.

Не забудьте про закрывающий тег

Большинство браузеров будут отображать абзацы правильно, даже если вы забыли записать его закрывающий тег:

Пример

<p>Это абзац
<p>Это другой абзац

Попробуйте сами »

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

Примечание: Будущая версия HTML не позволит вам пропустить закрывающие тэги.

HTML разрывы строк (Line Breaks)

Используйте <br /> тег, если вы хотите разорвать строку (продолжить с новой строки) не начиная нового абзаца:

Пример

<p>Это<br />аб<br />зац с разрывами строки</p>

Попробуйте сами »

<br /> является пустым элементом HTML. Он не имеет закрывающего тега.

<br> или <br />

В XHTML, XML, и в будущих версиях HTML, HTML элементы без конечного тега (закрывающего тега) не допускаются.

Даже если <br> работает во всех браузерах, написание <br /> является более устойчивым на будущее.

HTML Вывод - Полезные советы

Вы не можете быть уверены, как HTML будут отображаться. Большие или малые экраны и изменяемые размеры окон будет создавать различные результаты.

Используя HTML, вы не можете изменить вывод, добавив дополнительные пробелы или дополнительные строки в ваш HTML код.

Браузер удалит лишние пробелы и дополнительные строки при отображении страницы. Любое количество строк считаются одной строкой и любое количество пробелов считаются одним пробелом.

Попробуйте сами »

(Пример демонстрирует некоторые проблемы HTML форматирования)

Examples

Примеры из этой страницы

HTML абзацы (paragraphs)
Как HTML абзацы отображаются в браузере.

Разрывы строки (Line breaks)
Использование разрывов строки в документе HTML.

Проблемы переноса строк (Poem problems)
Некоторые проблемы с форматированием HTML.

Дополнительные примеры

Еще об абзацах (More paragraphs)
Поведения абзацев по умолчанию.

Справочник по HTML тегам

W3Schools справочник по тегам содержит дополнительную информацию об элементах HTML и их атрибутах.

Тег | Описание
<p> | Определяет абзац
<br /> | Вставка одного разрыва строки


HTML Форматирование текста (Text Formatting)

HTML форматирование текста

Этот текст полужирный

Этот текст крупный

Этот текст курсивный

Это фрагмент программного кода

Это нижний (подстрочный) индекс и верхний (надстрочный) индекс

Попробуйте сами »

HTML теги форматирования (Formatting Tags)

HTML использует теги, подобные <b> и <i> для форматирования вывода, подобно полужирному или курсивному тексту.

Эти тэги HTML называют тегами форматирования (обратитесь к нижней части этой страницы для полной справки).

Remark Часто <strong> визуально воспроизводится как <b>, а <em> как <i>.

Однако, в смысле этих тегов есть различие:

<b> или <i> определяют только жирный или курсивный текст.

<strong> или <em> означает, что вы хотите представить текст способом, который пользователь понимает как "важный, существенный". Сейчас все главные браузеры воспроизводят strong как bold и em как italics. However, if a browser one day wants to make a text highlighted with the strong feature, it might be cursive for example and not bold!

Примеры

Попробуйте сами - Примеры

Форматирование текста (Text formatting)
Как форматировать текст в HTML документе.

Преформатированный текст (Preformatted text)
Как управлять разрывами строки и пробелами с помощью тега <pre>.

Теги "Компьютерного вывода" ("Computer output" tags)
Как будут показаны различные теги "компьютерного вывода".

Адрес (Address)
Как определить контактную информацию для автора/владельца документа HTML.

Аббревиатуры и акронимы (Abbreviations and acronyms)
Как обращаться с аббревиатурами и акронимами.

Направление текста (Text direction)
Как изменить направление текста.

Цитаты (Quotations)
Как обращаться с длинными и короткими цитатами.

Удаленный и вставленный текст (Deleted and inserted text)
Как помечать текст, который будет удален из документа или вставлен в документ.

HTML Теги форматирования текста

Тег | Описание
<b> | Определяет жирный текст
<big> | Определяет крупный текст
<em> | Определяет акцентированный текст
<i> | Определяет курсивный текст
<small> | Определяет уменьшенный текст
<strong> | Определяет строгий текст
<sub> | Определяет нижний (подстрочный) индекс
<sup> | Определяет верхний (надстрочный) индекс
<ins> | Определяет вставленный текст
<del> | Определяет удаленный текст

HTML Теги "компьютерного вывода"

Тег | Описание
<code> | Определяет текст программного кода
<kbd> | Определяет текст, набираемый на клавиатуре
<samp> | Определяет пример компьютерного кода
<tt> | Определяет телетайпый текст
<var> | Определяет переменную
<pre> | Определяет преформатированный текст

Теги цитирования, "закавычивания" и определения (Citations, Quotations, and Definition Tags)

Тег | Описание
<abbr> | Определяет аббревиатуру
<acronym> | Определяет акроним
<address> | Определяет контактную информацию для автора/владельца документа
<bdo> | Определяет направление текста
<blockquote> | Определяет длинную цитату
<q> | Определяет короткую цитату
<cite> | Определяет цитирование
<dfn> | Дает определение термину


HTML Стили (Styles)

Атрибут style используется для стилевого форматирования элементов HTML.

Смотри! Стили и цвета

Этот текст написан шрифтом (гарнитурой) Verdana и красный

Этот текст написан шрифтом (гарнитурой) Times и синий

Этот текст 30 пикселей в высоту

Попробуйте сами »

HTML Атрибут style (Style Attribute)

Назначение атрибута style:

Обеспечить общий способ стилевого форматирования всех элементов HTML.

Стили была введена в HTML 4, как новый и предпочтительный способ стилизации HTML элементов. Со стилями HTML, стили могут быть добавлены в HTML элементы, непосредственно с помощью атрибута style, или косвенно, в отдельные таблицы стилей (CSS файлы).

Вы можете узнать все о стилях и CSS в нашем CSS Tutorial.

В нашем учебнике HTML мы используем атрибут style, чтобы познакомить вас с HTML стилями.

Не рекомендуемые теги и атрибуты

В HTML 4 некоторые теги и атрибуты определены как не рекомендуемые. Это означает, что они не будут поддерживаться в будущих версиях HTML и XHTML.

Идея ясна: Избегайте использование не рекомендуемых тегов и атрибутов.

Следует избегать использование следующих тегов и атрибутов:

Теги | Описание
<center> | Определяет центрированный контент
<font> и <basefont> | Определяют шрифты HTML
<s> и <strikeout> | Определяют зачеркнутый текст
<u> | Определяет подчеркнутый текст
Атрибуты | Описание
align | Определяет выравнивание текста
bgcolor | Определяет цвет фона
color | Определяет цвет текста

Для всего, указанного выше: вместо них используйте стили!

Пример HTML стиля - Цвет фона (Background Color)

Свойство background-color определяет цвет фона элемента:

Пример

<html>

<body style="background-color:yellow">
<h2 style="background-color:red">Это заголовок</h2>
<p style="background-color:green">Это абзац.</p>
</body>

</html>

Попробуйте сами »

Атрибут style делает "старый" атрибут bgcolor устаревшим.

Попробуйте сами: Цвет фона по-старому

Пример HTML стиля - Шрифт, цвет и размер (Font, Color and Size)

Свойства font-family, color, и font-size определяют шрифт, цвет и размер текста эдемента:

Пример

<html>

<body>
<h1 style="font-family:verdana">Заголовок</h1>
<p style="font-family:arial;color:red;font-size:20px;">Абзац.</p>
</body>

</html>

Попробуйте сами »

Атрибут style делает "старый" тег <font> устаревшим.

Попробуйте сами: Шрифты по-старому

Пример HTML стиля - Выравнивание текста (Text Alignment)

Свойство text-align устанавливает горизонтальное выравнивание текста элемента

Пример

<html>

<body>
<h1 style="text-align:center">Это заголовок</h1>
<p>Вышеуказанный заголовок выровнен по центру этой страницы.</p>
</body>

</html>

Попробуйте сами »

Атрибут style делает "старый" атрибут align устаревшим.

Попробуйте сами: Центрирование заголовка по-старому


HTML Ссылки (Links)

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

Examples

Попробуйте сами - Примеры

HTML ссылки (links)
Как создать ссылки в HTML документе.

(Вы можете найти больше примеров в нижней части этой страницы)

HTML Гиперссылки (ссылки)

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

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

Для определения ссылок в HTML используется тег <a>.

Тег <a> может использоваться двумя способами:

  1. Для создания ссылки на другой документ, используется атрибут href
  2. Для создания закладки внутри документа, используется атрибут name

Синтаксис ссылки HTML

HTML-код для ссылки - прост. Он выглядит подобно следующему:

<a href="url">Текст ссылки</a>

Атрибут href определяет место назначения ссылки.

Пример

<a href= "http://www.w3schools.com/">Посетите W3Schools</a>

будет показана как: Посетите W3Schools

Щелчек по этой гиперссыке отправит пользователя на домашнюю страницу W3Schools.

Совет:"Текст ссылки" не должен быть именно текстом. Вы можете организовать ссылку из изображения или любого другого элемента HTML.

HTML Ссылки - атрибут target

Атрибут target определяет, где открыть связанный по ссылке документ.

Пример ниже откроет связанный документ в новом окне браузера:

Пример

<a href="http://www.w3schools.com/" target= "_blank">Visit W3Schools!</a>

Попробуйте сами »

HTML Ссылки - Атрибут name

Атрибут name определяет название якоря (anchor).

Атрибут name используется для создания закладки внутри документа HTML.

Закладки не показываются никаким специальным способом. Они невидимы для читателя.

Пример

Именованный якорь (anchor) внутри HTML документа:

<a name= "tips">Секция советов пользователю</a>

Создание ссылки к "Секция советов пользователю" в том же самом документе:

<a href= "#tips">Посетите Секцию советов пользователю</a>

Или, создание ссылки к "Секция советов пользователю" мз другой страницы:

<a href="http://www.w3schools.com/html_links.htm#tips">
Посетите Секцию советов пользователю</a>

Основные примечания - Полезные советы

Примечание: Всегда добавляйте хвостовую косую черту / к ссылкам на подпапки. Если вы ссылаетесь подобно следующему: href="http://www.w3schools.com/html", вы произведете два запроса к серверу: сервер сначала добавит слеш к адресу, а затем создаст новый запрос подобно следующему: href="http://www.w3schools.com/html/".

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

Совет: Если браузер не находит определенный именованный якорь, он обращается к началу документа. Никакая ошибка не происходит.

Examples

Дополнительные примеры

Изображение в виде ссылки (An image as a link )
Как использовать изображение в качестве ссылки.

Ссылка на местоположение на той же самой странице (Link to a location on the same page)
Как сделать ссылку на закладку.

Выход из фрейма (Break out of frame)
Как выйти из фрейма, if your site is locked in a frame.

Создание ссылки на mailto
Как связаться с почтовым сообщением (будет работать только, если у вас установлена почта).

Создание ссылки на mailto 2
Другая ссылка на mailto.

HTML тег ссылки

Тег | Описание
<a> | Определяет якорь


HTML Изображения (Images)

Пример

Путешествие по Норвежским горам

Попробуйте сами »
Examples

Попробуйте сами - Примеры

Вставка изображений (Insert images)
Как вставлять изображения в HTML документ.

Вставка изображений из разных мест (Insert images from different locations)
Как можно вставить изображение, расположенное в другой папке или на другом сервере.

(Вы можете найти дополнительные примеры в нижней части этой страницы)

HTML тег <img> и атрибут src

В HTML изображения определяются с помощью тега <img>.

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

Для отображения изображения на странице, необходимо использовать атрибут src. Src означает "source (источник) ". Значением атрибута src является URL изображения, которое вы хотите отобразить на вашей странице.

Синтаксис определения изображения:

<img src="url" alt="какой-нибудь тект"/>

URL указывает на место, где хранится изображение. Изображение с именем "boat.gif", расположенное в папке "images" на "www.w3schools.com" имеет URL:
http://www.w3schools.com/images/boat.gif.

Браузер помещает изображение на страницу, когда в документе встречается тег <img>. Если вы поместите тег <img> между двумя абзацами, браузер покажет первый абзац, потом изображение, а затем второй абзац.

HTML атрибут alt

Атрибут alt задает альтернативный текст для изображения, если изображение не может быть отображено.

Значением атрибута alt является текст, определяемый разработчиком страницы:

<img src="boat.gif" alt= "Большая лодка" />

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

Основные примечания - Полезные советы

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

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

Examples

Дополнительные примеры

Фоновое изображение (Background image)
Как добавить фоновое изображение на страницу HTML.

Выравнивание изображений (Aligning images)
Как можно выравнивать изображение внутри текста.

Пусть изображение плавает (Let the image float)
Как дать изображению возможность плавать слева или справа от абзаца.

Настройка изображений различных размеров (Adjust images to different sizes)
Как настроить изображения разных размеров.

Показ альтернативного текста для изображения (Display an alternate text for an image)
Как отображать альтернативный текст для изображения. Атрибут "alt" сообщает читателю чего недостает на странице, если браузер не может загрузить изображение. Браузер отобразит альтернативный текст вместо изображения. Хорошей практикой является включение атрибута "alt" для каждого изображения на странице.

Создание гиперссылки из изображения (Make a hyperlink of an image)
Как использовать изображение в качестве ссылки.

Создание карты изображения (Create an image map)
Как создать карту изображения с интерактивными регионами. Каждый из регионов является гиперссылкой.

HTML теги изображения

Тег | Описание
<img> | Определяет изображение
<map> | Определяет изображение-карту
<area> | Определяет активную область внутри изображения-карты


HTML Таблицы (Tables)

HTML Таблицы (Tables)

Яблоки | 44%
Бананы | 23%
Апельсины | 13%
Другое | 10%
Examples

Попробуйте сами - Примеры

Таблицы (Tables )
Как создать таблицы в документе HTML.

Границы таблицы (Table borders )
Как установить различные границы таблицы.

(Вы можете найти дополнительные примеры в нижней части страницы).

HTML Таблицы (Tables)

Таблицы определяются тегом <table>.

Таблица состоит из строк (с тегом <tr>), а каждая строка делится на ячейки данных (с тегом <td>). Буквы td означают "table data (табличные данные)", которыми является содержимое ячейки данных. Ячейка данных может содержать текст, изображения, списки, формы, горизонтальные линейки, таблицы и т.д.

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

<table border="1">
<tr>
<td>строка 1, ячейка 1</td>
<td>строка 1, ячейка 2</td>
</tr>
<tr>
<td>строка 2, ячейка 1</td>
<td>строка 2, ячейка 2</td>
</tr>
</table>

Как это выглядит в браузере:

строка 1, ячейка 1 | строка 1, ячейка 2
строка 2, ячейка 1 | строка 2, ячейка 2

HTML Таблицы и атрибут border

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

Чтобы отобразить таблицу с границами, вам придется использовать атрибут border:

<table border="1">
<tr>
<td>Строка 1, ячейка 1</td>
<td>Строка 1, ячейка 2</td>
</tr>
</table>

HTML Заголовки таблицы (Table Headers)

Информация заголовка в таблице, определяется тегом <th>.

Текст элемента th будет жирным и отцентрированным.

<table border="1">
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
</tr>
<tr>
<td>строка 1, ячейка 1</td>
<td>строка 1, ячейка 2</td>
</tr>
<tr>
<td>строка 2, ячейка 1</td>
<td>строка 2, ячейка 2</td>
</tr>
</table>

Как это выглядит в браузере:

Заголовок 1 | Заголовок 2
строка 1, ячейка 1 | строка 1, ячейка 2
строка 2, ячейка 1 | строка 2, ячейка 2

Пустые ячейки в таблице (Empty Cells in a Table)

Ячейки таблицы без содержания не очень хорошо отображаются в большинстве браузеров.

<table border="1">
<tr>
<td>строка 1, ячейка 1</td>
<td>строка 1, ячейка 2</td>
</tr>
<tr>
<td>строка 2, ячейка 1</td>
<td></td>
</tr>
</table>

Как это выглядит в браузере:

строка 1, ячейка 1 | строка 1, ячейка 2
строка 2, ячейка 1 |

Обратите внимание, что границы вокруг пустых ячеек таблицы отсутствуют (NB! Mozilla Firefox отображает границы).

Чтобы избежать этого, добавьте неразрывный пробел (&nbsp;) в пустые ячейки, чтобы сделать границы видимыми:

<table border="1">
<tr>
<td>строка 1, ячейка 1</td>
<td>строка 1, ячейка 2</td>
</tr>
<tr>
<td>строка 2, ячейка 1</td>
<td>&nbsp;</td>
</tr>
</table>

Как это выглядит в браузере:

строка 1, ячейка 1 | строка 1, ячейка 2
строка 2, ячейка 1 |

Основные примечания - Полезные советы

Элементы <thead>,<tbody> и <tfoot> используются редко, из-за плохой их поддержки браузерами. Ожидаем, что это изменится в будущих версиях XHTML. Если у вас установлен Internet Explorer 5.0 или выше, вы можете посмотреть работающий пример в нашем XML Учебнике.

Examples

Дополнительные примеры

Таблица без границ (Tables without border)
Как создать таблицы без границ.

Заголовки таблицы (Table headers)
Как создать заголовки таблицы.

Пустые ячейки (Empty cells)
Как использовать "&nbsp;" для обработки ячеек, которые не имеют содержания.

Таблица с названием (Table with a caption)
Как добавить название к таблице. (How to add a caption to a table)

Ячейки таблицы, которые охватывают более чем одну строку/столбец (Table cells that span more than one row/column)
Как определить ячейки таблицы, которые охватывают более чем одну строку или один столбец.

Теги внутри таблицы (Tags inside a table)
Как отображать элементы внутри других элементов.

Отступы ячейки (Cell padding)
Как использовать отступы ячейки, чтобы создать большее пустое пространство между содержимым ячейки и ее границами.

Отбивка ячейки (Cell spacing)
Как использовать отбивки ячейки для увеличичения расстояние между ячейками.

Добавление цвета фона или фонового изображения в таблицу (Add a background color or a background image to a table)
Как добавить фон в таблицу.

Добавление цвета фона или фонового изображения в ячейку таблицы (Add a background color or a background image to a table cell)
Как добавить фон к одной или более ячеек таблицы.

Выравнивание содержимого ячейки таблицы (Align the content in a table cell)
Как использовать атрибут "align" для выравнивания содержимого ячеек, чтобы создать "красивую" таблицу.

Атрибут frame (The frame attribute)
Как с помощью атрибута "frame" управлять границами вокруг таблицы.

Атрибуты frame и border (The frame and border attributes )
Как использовать атрибуты "frame" и "border" для управления границами вокруг таблицы.

HTML теги таблицы

Тег | Описание
<table> | Определяет таблицу
<th> | Определяет заголовок таблицы
<tr> | Определяет строку таблицы
<td> | Определяет ячейку таблицы
<caption> | Определяет название таблицы
<colgroup> | Определяет для форматирования группу столбцов в таблице
<col> | Определяет значения атрибутов для одного или нескольких столбцов в таблице
<thead> | Групперует содержание заголовка (шапки) таблицы
<tbody> | Групперует содержание тела таблицы
<tfoot> | Групперует содержание нижнего колонтитула таблицы


HTML Списки (Lists)

Наиболее распространенными HTML списками являются упорядоченные (ordered) и неупорядоченные (unordered) списки:

HTML Списки (Lists)

Упорядоченный список:

  1. Первый пункт списка
  2. Второй пункт списка
  3. Третий пункт списка

Неупорядоченный список:

  • Пункт списка
  • Пункт списка
  • Пункт списка
Examples

Примеры - Попробуйте сами

Неупорядоченный список (Unordered list)
Как создать неупорядоченный список в HTML документе.

Упорядоченный список (Ordered list)
Как создать упорядоченный список в HTML документе.

(Вы можете найти дополнительные примеры в нижней части этой страницы)

HTML Неупорядоченные списки (Unordered Lists)

Неупорядоченный (ненумерованный, маркированный) список начинается с тега <ul>. Каждый пункт списка начинается с тега <li>.

Неупорядоченный список представляет собой перечень пунктов. Список пунктов помечены маркерами (обычно небольшими черными кружками).

<ul>
<li>Кофе</li>
<li>Молоко</li>
</ul>

Вот как это выглядит в браузере:

  • Кофе
  • Молоко

Упорядоченные списки (Ordered Lists)

Упорядоченный (нумерованный) список начинается с тега <ol>. Каждый пункт списка начинается с тега <li>.

Упорядоченный список также представляет собой перечень пунктов. Пункты списка помечены номерами.

<ol>
<li>Кофе</li>
<li>Молоко</li>
</ol>

Вот как это выглядит в браузере:

  1. Кофе
  2. Молоко

HTML Списки определений (Definition Lists)

Список определений является списком пунктов, с описанием каждого пункта (термина).

Тег <dl> определяет список определений (definition list).

Тег <dl> используется в сочетании с тегом <dt> (definition term, который определяет пункт в списке) и тегом <dd> (definition description, который описывает этот пункт в списке).

<dl>
<dt>Кофе</dt>
<dd>- черный горячий напиток </dd>
<dt>Молоко</dt>
<dd>- белый холодный напиток k</dd>
</dl>

Вот как это выглядит в браузере:

Кофе
- черный горячий напиток
Молоко
- белый холодный напиток

Основные примечания - Советы пользователю

Совет: Внутри тега <dd> можно поместить абзац, разрывы строки, изображения, ссылки, другие списки и т.д.

Examples

Дополнительные примеры

Различные типы упорядоченных списков (Different types of ordered lists)
Демонстрация различных типов упорядоченных списков.

Различные типы неупорядоченных списков (Different types of unordered lists)
Демонстрация различных типов неупорядоченных списков.

Вложенный список (Nested list)
Демонстрирует, как вы можете вкладывать списки.

Вложенный список 2 (Nested list 2)
Демонстрация более сложного вложенного списка.

Список определений (Definition list)
Демонстрация списка определений.

HTML Список тегов

Тег | Описание
<ol> | Определяет упорядоченный список
<ul> | Определяет неупорядоченный список
<li> | Определяет пункт списка
<dl> | Определяет список определений
<dt> | Определяет термин (пункт) в списке определений
<dd> | Определяет описание термина в списке определений


HTML Формы и ввод (Forms and Input)

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

Examples

Попробуйте сами - Примеры

Создание текстовых полей (Create text fields)
Как создать текстовые поля. Пользователь может вводить текст в текстовое поле.

Создание поля пароля (Create password field)
Как создать поле ввода пароля.

(Вы можете найти дополнительные примеры в нижней части этой страницы)

HTML Формы (Forms)

HTML-Форма используются для передачи данных на сервер.

Форма может содержать элементы ввода такие, как текстовые поля (text fields), флажки (checkboxes), переключатели (radio-buttons), кнопки для отправки формы (submit buttons) и многое другое. Форма также может содержать списки выбора (select lists), многострочные текстовые поля (textarea), наборы полей (fieldset), заголовки группы элементов (legend) и элементы label.

Для создания HTML формы используется тег <form>.

<form>
.
элементы ввода
.
</form>

HTML формы - Элемент input

Наиболее важным элементом формы является элемент input.

Элемент input используется для отбора пользовательской информации.

Элеиент input может использоваться различными способами, в зависимости от значения атрибута type.

Наиболее часто используемые типы элемента input приведены ниже.

Текстовые поля (Text Fields)

<input type= "text" /> определяет однострочное поле ввода, в которое пользователь может вводить текст:

<form>
Имя: <input type="text" name="firstname" /><br />
Фамилия: <input type="text" name="lastname" />
</form>

Вот как это выглядит в браузере:

Имя:
Фамилия:

Примечание: Форма сама по себе не видима. Также отметим, что в большинстве браузеров, ширина текстового поля составляет 20 символов по умолчанию.

Поле пароля (Password Field)

<input type= "password" /> определяет поле пароля:

<form>
Пароль: <input type="password" name= "pwd" /> </form>

Вот как это выглядит в браузере:

Пароль:

Примечание: Символы, вводимые в поле пароля, маскируются (отображаются в виде звездочек или кружков).

Переключатели (Radio Buttons)

<input type= "radio" /> определяет переключатель. Переключатель позволяет пользователю выбрать ТОЛЬКО ОДИН вариант чего-либо из ограниченного числа предложенных вариантов.

<form>
<input type="radio" name="sex" value="male" />Мужчина<br />
<input type="radio" name="sex" value="female" />Женщина
</form>

Вот как это выглядит в браузере:

Мужчина
Женщина

Помните, что только один из вариантов может быть выбран.

Флажки (Checkboxes)

<input type= "checkbox" /> определяет флажек. Флажки позволяют пользователю выбрал ОДИН или БОЛЕЕ предметов выбора из ограниченного числа предложенных вариантов.

<form>
<input type="checkbox" name="vehicle" value="Bike" /> У меня есть велосипед<br />
<input type="checkbox" name="vehicle" value="Car" /> У меня есть автомобиль
</form>

Вот как это выглядит в браузере:

У меня есть велосипед
У меня есть автомобиль

Кнопка submit (Submit Button)

<input type= "submit" /> определяет кнопку submit.

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

<form name="input" action="html_form_submit.asp" method="get">
Логин: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

Вот как это выглядит в браузере:

Логин:

Если вы введете несколько символов в текстовое поле, показанное выше, и щелкните кнопку "Submit" , браузер отправит введенные вами символы в страницу с именем "html_form_submit.asp". Страница покажет вам полученный ввод.

Try it Дополнительные примеры

Флажки (Checkboxes)
Как создать флажки. Пользователь может выбрать или отменить флажок.

Переключатели (Radio buttons)
Как создать переключатели.

Простой раскрывающийся список (Simple drop-down box)
Как создать простой раскрывающийся список.

Раскрывающийся список с заранее выбранным значением ( Drop-down list with a pre-selected value)
Как создать простой раскрывающийся список с заранее выбранным значением.

Текстовая область (Textarea)
Как создать текстовую область (многострочный текст). В текстовой области можно писать неограниченное количество символов.

Создание кнопки (Create a button)
Как создать кнопку.

Try it Примеры форм

Группировка данных (Fieldset around form-data)
Как создать рамку вокруг элементов формы.

Форма с текстовыми полями и кнопкой submit (Form with input fields and a submit button)
Как создать форму с двумя текстовыми полями и кнопкой submit.

Форма с флажками (Form with checkboxes)
Как создать форму с тремя флажками и кнопкой submit.

Форма с переключателями (Form with radio buttons)
Как создать форму с двумя переключателями и кнопкой submit.

Отправка сообщения электронной почты из формы (Send e-mail from a form)
Как отправить электронную почту из формы.

HTML теги формы

Тег | Описание
<form> | Определяет HTML форму для пользовательского ввода (Defines an HTML form for user input)
<input /> | Определяет управляющий элемент input (Defines an input control)
<textarea> | Определяет элемент управления для многострочного текстового ввода (Defines a multi-line text input control)
<label> | Определяет текст метки элемента ввода (Defines a label for an input element)
<fieldset> | Определяет границу вокруг элементов формы (Defines a border around elements in a form)
<legend> | Определяет заголовок для элемента fieldset (Defines a caption for a fieldset element)
<select> | Определяет список выбора (выпадающий список) (Defines a select list (drop-down list))
<optgroup> | Определяет группу связанных вариантов в списке выбора (Defines a group of related options in a select list)
<option> | Определяет вариант в списке выбора (Defines an option in a select list)
<button> | Определяет кнопку (Defines a push button)
<isindex> | Не рекомендуется. Вместо него используйте <input>


HTML Фреймы (Frames)

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

Examples

Попробуйте сами - Примеры

Вертикальный набор фреймов (Vertical frameset)
Как сделать вертикальный набор фреймов с тремя различными документами.

Горизонтальный набор фреймов (Horizontal frameset)
Как сделать горизонтальный набор фреймов с тремя различными документами.

(Вы можете найти дополнительные примеры в нижней части этой страницы)

HTML фреймы (Frames)

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

Недостатки использования фреймов:

  • Веб-разработчик должна отслеживать несколько документов HTML
  • Возникают трудности для печати всей страницы

HTML элемент frameset (The HTML frameset Element)

Элемент frameset содержит один или несколько элементов frame. Каждый элемент frame может содержать в себе отдельный документ.

Элемент frameset определяет СКОЛЬКО будет в наборе фреймов и СКОЛЬКО процентов/пикселей будет занимать каждый из них.

HTML элемент frame (The HTML frame Element)

Тег <frame> определяет одно конкретное окно (фрейм) внутри набора фреймов (frameset).

В приведенном ниже примере мы получаем набор фреймов в двух колонках.

Первая колонка установлена в 25% ширины окна браузера. Вторая колонка установлена в 75% ширины окна браузера. HTML документ "frame_a.htm" помещается в первую колонку, HTML документ "frame_b.htm" помещается во вторую колонку:

<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>

Примечание: Значения размеров колонок набора фреймов также можно установить в пикселях (cols="200,500"), и одна из колонок может быть установлена с использованием оставшегося пространства (cols="25%,*").

Основные примечания - Полезные советы (Basic Notes - Useful Tips)

Совет:Если кадр имеет видимые границы, то пользователь может изменить его размер, перетащив границу. Чтобы запретить пользователю делать это, вы можете добавить атрибут noresize="noresize" к тегу <frame>.

Примечание:Добавляйте тег <noframes> для браузеров, не поддерживающих фреймы.

Важно: Вы не можете использовать теги <body></body> вместе с тегами <frameset></frameset>! Однако, если вы добавите тег <noframes>, содержащий некоторый текст для браузеров, которые не поддерживают фреймы, вы должны будете заключить текст в теги <body></body>! Посмотрите, как это сделано в первом примере, приведенном ниже.

Examples

Дополнительные примеры

Как использовать тег <noframes> (How to use the <noframes> tag)
Как использовать тег <noframes> (для браузеров, которые не поддерживают фреймы).

Вложенные наборы фреймов (Nested framesets)
Как создать набор фреймов с тремя документами и как смешивать их по строкам и столбцам.

Набор фреймов с noresize="noresize" (Frameset with noresize="noresize")
Как использовать атрибут noresize. Наведите указатель мыши на границу между фреймами и обратите внимание, что вы не можете передвинуть границы.

Навигационный фрейм (Navigation frame)
Как сделать навигационный фрейм. Навигационный фрейм содержит список ссылок, со вторым фреймом в качестве целевого. Файл с именем "tryhtml_contents.htm" содержит три ссылки. Исходный код ссылок:
<a href ="frame_a.htm" target ="showframe">Фрейм a</a><br>
<a href ="frame_b.htm" target ="showframe">Фрейм b</a><br>
<a href ="frame_c.htm" target ="showframe">Фрейм c</a>
Второй фрейм покажет связанный документ.

Встроенный фрейм (Inline frame)
Как создать встроенный фрейм (фрейм внутри HTML страницы).

Переход к нужному разделу внутри фрейма (Jump to a specified section within a frame)
Два фрейма. Один из фреймов имеет исток в указанный раздел файла. Указание раздела производится по <a name="C10"> в файл "link.htm".

Переход к указанному разделу по фреймовой навигации (Jump to a specified section with frame navigation)
Два фрейма. Навигационный фрейм (content.htm), расположенный слева, содержит список ссылок на второй фрейм (link.htm), как целевой. Второй фрейм показывает связанный документ. Одна из ссылок в навигационном фрейме связана с указанным разделом в целевом файле. HTML код в файле "content.htm" выглядит следующим образом: <a href ="link.htm" target ="showframe">Ссылка без якоря</a><br><a href ="link.htm#C10" target ="showframe">Ссылка с якорем</a>.

HTML теги фрейма (HTML Frame Tags)

Тег | Описание
<frameset> | Определяет набор фреймов (Defines a set of frames)
<frame /> | Определяет подокно (фрейм) (Defines a sub window (a frame))
<noframes> | Определяет раздел noframe для браузеров, которые не поддерживают фреймы (Defines a noframe section for browsers that do not handle frames)
<iframe> | Определяет встроенное подокно (фрейм) (Defines an inline sub window (frame))


HTML Цвета (Colors)

Цвета образуются смешиванием красного (RED), зеленого (GREEN) и синего (BLUE) цветов.

Значения цветов (Color Values)

HTML цвета определяются с помощью шестнадцатеричного (HEX) представления комбинации красного (Red), зеленого (Green) и синего (Blue) значений цветов (RGB).

Наименьшее значение, которое может быть установлено для одного из источников цвета есть 0 (в HEX: 00). Наибольшее значение есть 255 (в HEX: FF).

Шестнадцатиричные (HEX) значения записываются в виде 3-х двухразрядных чисел, начиная с символа #.

Значения цветов

Цвет | Цвет HEX | Цвет RGB
 | #000000 | rgb(0,0,0)
 | #FF0000 | rgb(255,0,0)
 | #00FF00 | rgb(0,255,0)
 | #0000FF | rgb(0,0,255)
 | #FFFF00 | rgb(255,255,0)
 | #00FFFF | rgb(0,255,255)
 | #FF00FF | rgb(255,0,255)
 | #C0C0C0 | rgb(192,192,192)
 | #FFFFFF | rgb(255,255,255)

Попробуйте сами »

16 миллионов различных цветов (16 Million Different Colors)

Сочетание красного (Red), зеленого (Green) и синего (Blue) значений от 0 до 255 дает в итого более чем 16 миллионов различных цветов для воспроизводства (256 x 256 x 256).

Самые современные мониторы способны отображать по меньшей мере 16384 различных цветов.

Если вы посмотрите на таблицу цветов ниже, вы увидите результат варьирования значением красного цвета от 0 до 255, при сохранении значений зеленого и синего цветов в нуле.

Чтобы посмотреть полный список цветов смесей, когда красный свет варьируется от 0 до 255, щелкните на одном из HEX или RGB значений, показанных ниже.

Красный цвет | Цвет HEX | Цвет RGB
 | #000000 | rgb(0,0,0)
 | #080000 | rgb(8,0,0)
 | #100000 | rgb(16,0,0)
 | #180000 | rgb(24,0,0)
 | #200000 | rgb(32,0,0)
 | #280000 | rgb(40,0,0)
 | #300000 | rgb(48,0,0)
 | #380000 | rgb(56,0,0)
 | #400000 | rgb(64,0,0)
 | #480000 | rgb(72,0,0)
 | #500000 | rgb(80,0,0)
 | #580000 | rgb(88,0,0)
 | #600000 | rgb(96,0,0)
 | #680000 | rgb(104,0,0)
 | #700000 | rgb(112,0,0)
 | #780000 | rgb(120,0,0)
 | #800000 | rgb(128,0,0)
 | #880000 | rgb(136,0,0)
 | #900000 | rgb(144,0,0)
 | #980000 | rgb(152,0,0)
 | #A00000 | rgb(160,0,0)
 | #A80000 | rgb(168,0,0)
 | #B00000 | rgb(176,0,0)
 | #B80000 | rgb(184,0,0)
 | #C00000 | rgb(192,0,0)
 | #C80000 | rgb(200,0,0)
 | #D00000 | rgb(208,0,0)
 | #D80000 | rgb(216,0,0)
 | #E00000 | rgb(224,0,0)
 | #E80000 | rgb(232,0,0)
 | #F00000 | rgb(240,0,0)
 | #F80000 | rgb(248,0,0)
 | #FF0000 | rgb(255,0,0)

Оттенки серого (Shades of Gray)

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

Оттенки серого | Цвет HEX | Цвет RGB
 | #000000 | rgb(0,0,0)
 | #080808 | rgb(8,8,8)
 | #101010 | rgb(16,16,16)
 | #181818 | rgb(24,24,24)
 | #202020 | rgb(32,32,32)
 | #282828 | rgb(40,40,40)
 | #303030 | rgb(48,48,48)
 | #383838 | rgb(56,56,56)
 | #404040 | rgb(64,64,64)
 | #484848 | rgb(72,72,72)
 | #505050 | rgb(80,80,80)
 | #585858 | rgb(88,88,88)
 | #606060 | rgb(96,96,96)
 | #686868 | rgb(104,104,104)
 | #707070 | rgb(112,112,112)
 | #787878 | rgb(120,120,120)
 | #808080 | rgb(128,128,128)
 | #888888 | rgb(136,136,136)
 | #909090 | rgb(144,144,144)
 | #989898 | rgb(152,152,152)
 | #A0A0A0 | rgb(160,160,160)
 | #A8A8A8 | rgb(168,168,168)
 | #B0B0B0 | rgb(176,176,176)
 | #B8B8B8 | rgb(184,184,184)
 | #C0C0C0 | rgb(192,192,192)
 | #C8C8C8 | rgb(200,200,200)
 | #D0D0D0 | rgb(208,208,208)
 | #D8D8D8 | rgb(216,216,216)
 | #E0E0E0 | rgb(224,224,224)
 | #E8E8E8 | rgb(232,232,232)
 | #F0F0F0 | rgb(240,240,240)
 | #F8F8F8 | rgb(248,248,248)
 | #FFFFFF | rgb(255,255,255)

Межбраузерные названия цветов (Cross-Browser Color Names)

Коллекция из почти 150 названий цветов поддерживается всеми основными браузерами.

Просмотр межбраузерных названий цветов

Web стандарт названий цветов ()Web Standard Color Names

World Wide Web Consortium (W3C) перечислил 16 допустимых названий цветов для HTML и CSS:

aqua (морской волны), black (черный), blue (синий), fuchsia (фуксия), gray (серый), green (зеленый), lime (лайм), maroon (коричнево-малиновый), navy (темно-синий), olive (оливковый), purple (пурпурный), red (красный), silver (серебряный), teal (сине-зеленый), white (белый ) и yellow (желтый).

Если вы хотите использовать другие цвета, вы должны указать их шестнадцатеричные (HEX) значения.

Web безопасные цвета? (Web Safe Colors?)

Несколько лет назад, когда компьютеры поддерживали максимально 256 различных цветов, список из 216 "Web Safe Colors" был предложен в качестве Web стандарта, reserving 40 fixed system colors.

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

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

000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF
003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF
006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF
009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF
00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF
00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF
330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF
333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF
336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF
339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF
33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF
33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF
660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF
663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF
666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF
669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF
66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF
66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF
990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF
993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF
996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF
999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF
99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF
99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF
CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF
CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF
CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF
CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF
CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF
CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF
FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF
FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF
FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF
FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF
FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF
FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF


HTML Названия цветов (Color Names)

Названия цветов, поддерживаемые всеми браузерами

Ниже представлен полный список названий цветов, которые поддерживаются всеми основными браузерами.

Вы можете щелкнуть по названию цвета (или HEX значению), чтобы увидеть этот цвет в качестве фона вместе с текстом разных цветов.

Отсортированные по названиям (Sorted by Names)

Ссылка: Тот же список, отсортированный по значениям

Название цвета | HEX | Цвет | Оттенки | Смесь
AliceBlue | #F0F8FF |  | Shades | Mix
AntiqueWhite | #FAEBD7 |  | Shades | Mix
Aqua | #00FFFF |  | Shades | Mix
Aquamarine | #7FFFD4 |  | Shades | Mix
Azure | #F0FFFF |  | Shades | Mix
Beige | #F5F5DC |  | Shades | Mix
Bisque | #FFE4C4 |  | Shades | Mix
Black | #000000 |  | Shades | Mix
BlanchedAlmond | #FFEBCD |  | Shades | Mix
Blue | #0000FF |  | Shades | Mix
BlueViolet | #8A2BE2 |  | Shades | Mix
Brown | #A52A2A |  | Shades | Mix
BurlyWood | #DEB887 |  | Shades | Mix
CadetBlue | #5F9EA0 |  | Shades | Mix
Chartreuse | #7FFF00 |  | Shades | Mix
Chocolate | #D2691E |  | Shades | Mix
Coral | #FF7F50 |  | Shades | Mix
CornflowerBlue | #6495ED |  | Shades | Mix
Cornsilk | #FFF8DC |  | Shades | Mix
Crimson | #DC143C |  | Shades | Mix
Cyan | #00FFFF |  | Shades | Mix
DarkBlue | #00008B |  | Shades | Mix
DarkCyan | #008B8B |  | Shades | Mix
DarkGoldenRod | #B8860B |  | Shades | Mix
DarkGray | #A9A9A9 |  | Shades | Mix
DarkGreen | #006400 |  | Shades | Mix
DarkKhaki | #BDB76B |  | Shades | Mix
DarkMagenta | #8B008B |  | Shades | Mix
DarkOliveGreen | #556B2F |  | Shades | Mix
Darkorange | #FF8C00 |  | Shades | Mix
DarkOrchid | #9932CC |  | Shades | Mix
DarkRed | #8B0000 |  | Shades | Mix
DarkSalmon | #E9967A |  | Shades | Mix
DarkSeaGreen | #8FBC8F |  | Shades | Mix
DarkSlateBlue | #483D8B |  | Shades | Mix
DarkSlateGray | #2F4F4F |  | Shades | Mix
DarkTurquoise | #00CED1 |  | Shades | Mix
DarkViolet | #9400D3 |  | Shades | Mix
DeepPink | #FF1493 |  | Shades | Mix
DeepSkyBlue | #00BFFF |  | Shades | Mix
DimGray | #696969 |  | Shades | Mix
DodgerBlue | #1E90FF |  | Shades | Mix
FireBrick | #B22222 |  | Shades | Mix
FloralWhite | #FFFAF0 |  | Shades | Mix
ForestGreen | #228B22 |  | Shades | Mix
Fuchsia | #FF00FF |  | Shades | Mix
Gainsboro | #DCDCDC |  | Shades | Mix
GhostWhite | #F8F8FF |  | Shades | Mix
Gold | #FFD700 |  | Shades | Mix
GoldenRod | #DAA520 |  | Shades | Mix
Gray | #808080 |  | Shades | Mix
Green | #008000 |  | Shades | Mix
GreenYellow | #ADFF2F |  | Shades | Mix
HoneyDew | #F0FFF0 |  | Shades | Mix
HotPink | #FF69B4 |  | Shades | Mix
IndianRed | #CD5C5C |  | Shades | Mix
Indigo | #4B0082 |  | Shades | Mix
Ivory | #FFFFF0 |  | Shades | Mix
Khaki | #F0E68C |  | Shades | Mix
Lavender | #E6E6FA |  | Shades | Mix
LavenderBlush | #FFF0F5 |  | Shades | Mix
LawnGreen | #7CFC00 |  | Shades | Mix
LemonChiffon | #FFFACD |  | Shades | Mix
LightBlue | #ADD8E6 |  | Shades | Mix
LightCoral | #F08080 |  | Shades | Mix
LightCyan | #E0FFFF |  | Shades | Mix
LightGoldenRodYellow | #FAFAD2 |  | Shades | Mix
LightGrey | #D3D3D3 |  | Shades | Mix
LightGreen | #90EE90 |  | Shades | Mix
LightPink | #FFB6C1 |  | Shades | Mix
LightSalmon | #FFA07A |  | Shades | Mix
LightSeaGreen | #20B2AA |  | Shades | Mix
LightSkyBlue | #87CEFA |  | Shades | Mix
LightSlateGray | #778899 |  | Shades | Mix
LightSteelBlue | #B0C4DE |  | Shades | Mix
LightYellow | #FFFFE0 |  | Shades | Mix
Lime | #00FF00 |  | Shades | Mix
LimeGreen | #32CD32 |  | Shades | Mix
Linen | #FAF0E6 |  | Shades | Mix
Magenta | #FF00FF |  | Shades | Mix
Maroon | #800000 |  | Shades | Mix
MediumAquaMarine | #66CDAA |  | Shades | Mix
MediumBlue | #0000CD |  | Shades | Mix
MediumOrchid | #BA55D3 |  | Shades | Mix
MediumPurple | #9370D8 |  | Shades | Mix
MediumSeaGreen | #3CB371 |  | Shades | Mix
MediumSlateBlue | #7B68EE |  | Shades | Mix
MediumSpringGreen | #00FA9A |  | Shades | Mix
MediumTurquoise | #48D1CC |  | Shades | Mix
MediumVioletRed | #C71585 |  | Shades | Mix
MidnightBlue | #191970 |  | Shades | Mix
MintCream | #F5FFFA |  | Shades | Mix
MistyRose | #FFE4E1 |  | Shades | Mix
Moccasin | #FFE4B5 |  | Shades | Mix
NavajoWhite | #FFDEAD |  | Shades | Mix
Navy | #000080 |  | Shades | Mix
OldLace | #FDF5E6 |  | Shades | Mix
Olive | #808000 |  | Shades | Mix
OliveDrab | #6B8E23 |  | Shades | Mix
Orange | #FFA500 |  | Shades | Mix
OrangeRed | #FF4500 |  | Shades | Mix
Orchid | #DA70D6 |  | Shades | Mix
PaleGoldenRod | #EEE8AA |  | Shades | Mix
PaleGreen | #98FB98 |  | Shades | Mix
PaleTurquoise | #AFEEEE |  | Shades | Mix
PaleVioletRed | #D87093 |  | Shades | Mix
PapayaWhip | #FFEFD5 |  | Shades | Mix
PeachPuff | #FFDAB9 |  | Shades | Mix
Peru | #CD853F |  | Shades | Mix
Pink | #FFC0CB |  | Shades | Mix
Plum | #DDA0DD |  | Shades | Mix
PowderBlue | #B0E0E6 |  | Shades | Mix
Purple | #800080 |  | Shades | Mix
Red | #FF0000 |  | Shades | Mix
RosyBrown | #BC8F8F |  | Shades | Mix
RoyalBlue | #4169E1 |  | Shades | Mix
SaddleBrown | #8B4513 |  | Shades | Mix
Salmon | #FA8072 |  | Shades | Mix
SandyBrown | #F4A460 |  | Shades | Mix
SeaGreen | #2E8B57 |  | Shades | Mix
SeaShell | #FFF5EE |  | Shades | Mix
Sienna | #A0522D |  | Shades | Mix
Silver | #C0C0C0 |  | Shades | Mix
SkyBlue | #87CEEB |  | Shades | Mix
SlateBlue | #6A5ACD |  | Shades | Mix
SlateGray | #708090 |  | Shades | Mix
Snow | #FFFAFA |  | Shades | Mix
SpringGreen | #00FF7F |  | Shades | Mix
SteelBlue | #4682B4 |  | Shades | Mix
Tan | #D2B48C |  | Shades | Mix
Teal | #008080 |  | Shades | Mix
Thistle | #D8BFD8 |  | Shades | Mix
Tomato | #FF6347 |  | Shades | Mix
Turquoise | #40E0D0 |  | Shades | Mix
Violet | #EE82EE |  | Shades | Mix
Wheat | #F5DEB3 |  | Shades | Mix
White | #FFFFFF |  | Shades | Mix
WhiteSmoke | #F5F5F5 |  | Shades | Mix
Yellow | #FFFF00 |  | Shades | Mix
YellowGreen | #9ACD32 |  | Shades | Mix

Примечание: приведенные выше названия, не являются частью W3C веб стандарта.

W3C HTML и CSS стандартами перечислены лишь 16 допустимых названий цветов:
aqua (морской волны), black (черный), blue (синий), fuchsia (фуксия), gray (серый), green (зеленый), lime (лайм), maroon (коричнево-малиновый), navy (темно-синий), olive (оливковый), purple (пурпурный), red (красный), silver (серебряный), teal (сине-зеленый), white (белый ) и yellow (желтый).

If you want valid HTML or CSS use the HEX values instead.


HTML Значения цветов (Color Values)

Названия цветов, поддерживаемые всеми браузерами

Ниже представлен полный список названий цветов, которые поддерживаются всеми основными браузерами.

Вы можете щелкнуть по названию цвета (или HEX значению), чтобы увидеть этот цвет в качестве фона вместе с текстом разных цветов.

Отсортированные по HEX значениям (Sorted by HEX Value)

Ссылка: Тот же список, отсортированный по названиям

Название цвета | HEX | Цвет | Оттенки | Смесь
Black | #000000 |  | Shades | Mix
Navy | #000080 |  | Shades | Mix
DarkBlue | #00008B |  | Shades | Mix
MediumBlue | #0000CD |  | Shades | Mix
Blue | #0000FF |  | Shades | Mix
DarkGreen | #006400 |  | Shades | Mix
Green | #008000 |  | Shades | Mix
Teal | #008080 |  | Shades | Mix
DarkCyan | #008B8B |  | Shades | Mix
DeepSkyBlue | #00BFFF |  | Shades | Mix
DarkTurquoise | #00CED1 |  | Shades | Mix
MediumSpringGreen | #00FA9A |  | Shades | Mix
Lime | #00FF00 |  | Shades | Mix
SpringGreen | #00FF7F |  | Shades | Mix
Aqua | #00FFFF |  | Shades | Mix
Cyan | #00FFFF |  | Shades | Mix
MidnightBlue | #191970 |  | Shades | Mix
DodgerBlue | #1E90FF |  | Shades | Mix
LightSeaGreen | #20B2AA |  | Shades | Mix
ForestGreen | #228B22 |  | Shades | Mix
SeaGreen | #2E8B57 |  | Shades | Mix
DarkSlateGray | #2F4F4F |  | Shades | Mix
LimeGreen | #32CD32 |  | Shades | Mix
MediumSeaGreen | #3CB371 |  | Shades | Mix
Turquoise | #40E0D0 |  | Shades | Mix
RoyalBlue | #4169E1 |  | Shades | Mix
SteelBlue | #4682B4 |  | Shades | Mix
DarkSlateBlue | #483D8B |  | Shades | Mix
MediumTurquoise | #48D1CC |  | Shades | Mix
Indigo | #4B0082 |  | Shades | Mix
DarkOliveGreen | #556B2F |  | Shades | Mix
CadetBlue | #5F9EA0 |  | Shades | Mix
CornflowerBlue | #6495ED |  | Shades | Mix
MediumAquaMarine | #66CDAA |  | Shades | Mix
DimGray | #696969 |  | Shades | Mix
SlateBlue | #6A5ACD |  | Shades | Mix
OliveDrab | #6B8E23 |  | Shades | Mix
SlateGray | #708090 |  | Shades | Mix
LightSlateGray | #778899 |  | Shades | Mix
MediumSlateBlue | #7B68EE |  | Shades | Mix
LawnGreen | #7CFC00 |  | Shades | Mix
Chartreuse | #7FFF00 |  | Shades | Mix
Aquamarine | #7FFFD4 |  | Shades | Mix
Maroon | #800000 |  | Shades | Mix
Purple | #800080 |  | Shades | Mix
Olive | #808000 |  | Shades | Mix
Gray | #808080 |  | Shades | Mix
SkyBlue | #87CEEB |  | Shades | Mix
LightSkyBlue | #87CEFA |  | Shades | Mix
BlueViolet | #8A2BE2 |  | Shades | Mix
DarkRed | #8B0000 |  | Shades | Mix
DarkMagenta | #8B008B |  | Shades | Mix
SaddleBrown | #8B4513 |  | Shades | Mix
DarkSeaGreen | #8FBC8F |  | Shades | Mix
LightGreen | #90EE90 |  | Shades | Mix
MediumPurple | #9370D8 |  | Shades | Mix
DarkViolet | #9400D3 |  | Shades | Mix
PaleGreen | #98FB98 |  | Shades | Mix
DarkOrchid | #9932CC |  | Shades | Mix
YellowGreen | #9ACD32 |  | Shades | Mix
Sienna | #A0522D |  | Shades | Mix
Brown | #A52A2A |  | Shades | Mix
DarkGray | #A9A9A9 |  | Shades | Mix
LightBlue | #ADD8E6 |  | Shades | Mix
GreenYellow | #ADFF2F |  | Shades | Mix
PaleTurquoise | #AFEEEE |  | Shades | Mix
LightSteelBlue | #B0C4DE |  | Shades | Mix
PowderBlue | #B0E0E6 |  | Shades | Mix
FireBrick | #B22222 |  | Shades | Mix
DarkGoldenRod | #B8860B |  | Shades | Mix
MediumOrchid | #BA55D3 |  | Shades | Mix
RosyBrown | #BC8F8F |  | Shades | Mix
DarkKhaki | #BDB76B |  | Shades | Mix
Silver | #C0C0C0 |  | Shades | Mix
MediumVioletRed | #C71585 |  | Shades | Mix
IndianRed | #CD5C5C |  | Shades | Mix
Peru | #CD853F |  | Shades | Mix
Chocolate | #D2691E |  | Shades | Mix
Tan | #D2B48C |  | Shades | Mix
LightGrey | #D3D3D3 |  | Shades | Mix
PaleVioletRed | #D87093 |  | Shades | Mix
Thistle | #D8BFD8 |  | Shades | Mix
Orchid | #DA70D6 |  | Shades | Mix
GoldenRod | #DAA520 |  | Shades | Mix
Crimson | #DC143C |  | Shades | Mix
Gainsboro | #DCDCDC |  | Shades | Mix
Plum | #DDA0DD |  | Shades | Mix
BurlyWood | #DEB887 |  | Shades | Mix
LightCyan | #E0FFFF |  | Shades | Mix
Lavender | #E6E6FA |  | Shades | Mix
DarkSalmon | #E9967A |  | Shades | Mix
Violet | #EE82EE |  | Shades | Mix
PaleGoldenRod | #EEE8AA |  | Shades | Mix
LightCoral | #F08080 |  | Shades | Mix
Khaki | #F0E68C |  | Shades | Mix
AliceBlue | #F0F8FF |  | Shades | Mix
HoneyDew | #F0FFF0 |  | Shades | Mix
Azure | #F0FFFF |  | Shades | Mix
SandyBrown | #F4A460 |  | Shades | Mix
Wheat | #F5DEB3 |  | Shades | Mix
Beige | #F5F5DC |  | Shades | Mix
WhiteSmoke | #F5F5F5 |  | Shades | Mix
MintCream | #F5FFFA |  | Shades | Mix
GhostWhite | #F8F8FF |  | Shades | Mix
Salmon | #FA8072 |  | Shades | Mix
AntiqueWhite | #FAEBD7 |  | Shades | Mix
Linen | #FAF0E6 |  | Shades | Mix
LightGoldenRodYellow | #FAFAD2 |  | Shades | Mix
OldLace | #FDF5E6 |  | Shades | Mix
Red | #FF0000 |  | Shades | Mix
Fuchsia | #FF00FF |  | Shades | Mix
Magenta | #FF00FF |  | Shades | Mix
DeepPink | #FF1493 |  | Shades | Mix
OrangeRed | #FF4500 |  | Shades | Mix
Tomato | #FF6347 |  | Shades | Mix
HotPink | #FF69B4 |  | Shades | Mix
Coral | #FF7F50 |  | Shades | Mix
Darkorange | #FF8C00 |  | Shades | Mix
LightSalmon | #FFA07A |  | Shades | Mix
Orange | #FFA500 |  | Shades | Mix
LightPink | #FFB6C1 |  | Shades | Mix
Pink | #FFC0CB |  | Shades | Mix
Gold | #FFD700 |  | Shades | Mix
PeachPuff | #FFDAB9 |  | Shades | Mix
NavajoWhite | #FFDEAD |  | Shades | Mix
Moccasin | #FFE4B5 |  | Shades | Mix
Bisque | #FFE4C4 |  | Shades | Mix
MistyRose | #FFE4E1 |  | Shades | Mix
BlanchedAlmond | #FFEBCD |  | Shades | Mix
PapayaWhip | #FFEFD5 |  | Shades | Mix
LavenderBlush | #FFF0F5 |  | Shades | Mix
SeaShell | #FFF5EE |  | Shades | Mix
Cornsilk | #FFF8DC |  | Shades | Mix
LemonChiffon | #FFFACD |  | Shades | Mix
FloralWhite | #FFFAF0 |  | Shades | Mix
Snow | #FFFAFA |  | Shades | Mix
Yellow | #FFFF00 |  | Shades | Mix
LightYellow | #FFFFE0 |  | Shades | Mix
Ivory | #FFFFF0 |  | Shades | Mix
White | #FFFFFF |  | Shades | Mix

Примечание: приведенные выше названия, не являются частью W3C веб стандарта.

W3C HTML и CSS стандартами перечислены лишь 16 допустимых названий цветов:
aqua (морской волны), black (черный), blue (синий), fuchsia (фуксия), gray (серый), green (зеленый), lime (лайм), maroon (коричнево-малиновый), navy (темно-синий), olive (оливковый), purple (пурпурный), red (красный), silver (серебряный), teal (сине-зеленый), white (белый ) и yellow (желтый).

If you want valid HTML or CSS use the HEX values instead.


HTML 4.01 Памятка (Quick List)

Краткий Список HTML от W3Schools. Распечатайте это, согните и положите в карман.

Основа HTML документа (HTML Basic Document)

<html>
<head>
<title>Эдесь должно быть имя документа</title>
</head>

<body>
Здесь размещается видимый текст
</body>

</html>

Элементы Заголовков (Heading Elements)

<h1>Наибольший Заголовок</h1>

<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>

<h6>Наименьший Заголовок</h6>

Текстовые элементы (Text Elements)

<p>Это абзац </p>
<br> (разрыв строки)
<hr> (горизонтальная линейка)
<pre>Преформатированный текст </pre>

Логические стили (Logical Styles)

<em>Это слабо логически выделенный текст</em>
<strong>Это сильно логически выделенный текст</strong>
<code>Это фрагмент компьютерного кода</code>

Физические стили (Physical Styles)

<b>Это полужирный текст </b>
<i>Это курсивный текст </i>

Элементы Ссылок, Якорей и Изображений (Links, Anchors, and Image Elements)

<a href="http://www.example.com/">Это ссылка </a>
<a href="http://www.example.com/"><img src="URL" alt="Альтернативный текст "></a>
<a href="mailto:webmaster@example.com">Отправить электронную почту</a>

Именованный якорь :
<a name="tips">Полезные советы раздела</a>
<a href="#tips">Перейти в раздел Полезные советы</a>

Неупорядоченный список (Unordered list)

<ul>
<li>Первый элемент (пункт) </li>
<li>Следующий элемент (пункт)</li>
</ul>

Упорядоченный список (Ordered list)

<ol>
<li>Первый элемент (пункт)</li>
<li>Следующий элемент (пункт)</li>
</ol>

Список определений (Definition list)

<dl>
<dt>Первый термин </dt>
<dd>Определение</dd>
<dt>Следующий термин </dt>
<dd>Определение</dd>
</dl>

Таблицы (Tables)

<table border="1">
<tr>
<th>некоторый заголовок</th>
<th>некоторый заголовок</th>
</tr>
<tr>
<td>некоторый текст</td>
<td>некоторый текст</td>
</tr>
</table>

Фреймы (Frames)

<frameset cols="25%,75%">
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>

Формы (Forms)

<form action="http://www.example.com/test.asp" method="post/get">

<input type="text" name="lastname" value="Nixon" size="30" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit">
<input type="reset">
<input type="hidden">

<select>
<option>Яблоки
<option selected>Бананы
<option>Вишни
</select>

<textarea name="Comment" rows="60" cols="20"></textarea>

</form>

Сущности (Entities)

&lt; то же, что и <
&gt; то же, что и >
&#169; то же, что и ©

Другие элементы (Other Elements)

<!-- Это комментарий-->

<blockquote>
Текст, цитируемый из некоторого источника.
</blockquote>

<address>
Адрес 1<br>
Адрес 2<br>
Город<br>
</address>

Источник : http://www.w3schools.com/html/html_quick.asp


HTML 4.0 Почему (Why)

Почему используем HTML 4.0?

« Предыдущая Следующая Глава »

HTML 3.2 был крайне неудовлетворительный!

Изначальный HTML никогда не предназначался, чтобы содержать теги для форматирования документа. HTML теги были предназначены для определения содержания документа, подобно:

<p>Это абзац </p>

<h1>Это заголовок </h1>

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

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

Что такого замечательного в HTML 4.0?

В HTML 4.0 все форматирование может быть удалено из HTML документа и храниться в отдельной таблице стилей.

Поскольку HTML 4.0 отделяет представление документа от его структуры, мы имеем то, что всегда необходимо: Total control of layout, without messing up the document content.

Что вы должны делать для этого?

  • НЕ используйте представление атрибутов внутри HTML элементов
  • Используйте стили! Пожалуйста, ознакомтесь с нашим CSS tutorial, чтобы изучить таблицы стилей
  • НЕ используйте устаревшие (не рекомендуемые) теги. Посетите наш HTML 4.01 Справочник, чтобы увидеть, какие теги и атрибуты являются устаревшими (не рекомендуемыми)
  • Проверяйте (Validate) ваши HTML страницы

Проверяйте ваши HTML файлы (Validate Your HTML Files)

Для проверки HTML документа, в него должна быть добавлена декларация doctype.

Декларация doctype не является HTML тегом; это инструкция для веб браузера о версии языка разметки, на которой написана страница.

Декларация doctype ссылается на Document Type Definition (DTD). DTD задает правила для языка разметки таким образом, чтобы браузер мог правильно представить контент.

Декларация doctype должна быть первой в HTML документе, перед <html> тегом.

HTML 4.01 Strict

Это DTD содержит все HTML элементы и атрибуты, но НЕ ВКЛЮЧАЕТ презентационные и устаревшие элементы (подобные font). Наборы фреймов (frameset) не поддерживаются:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

Это DTD содержит все HTML элементы и атрибуты, ВКЛЮЧАЯ презентационные и устаревшие элементы (подобные font). Наборы фреймов (frameset) не поддерживаются:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

Это DTD равно HTML 4.01 Transitional, но позволяет использовать контент frameset:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

Проверка вашего HTML документа с помощью W3C's Validator

Наберите URL в показанном ниже поле ввода (подобно http://www.w3schools.com/):

HTML DOCTYPE Элемент

Tag | Description
<!DOCTYPE> | Определяет тип документа. Эта декларация располагается открываюшим тегом <html>


HTML Голова (Head)

HTML элементы секции Head

Examples

Примеры - Попробуйте сами

Заголовок документа (The title of a document)
Тег <title> определяет заголовок документа.

Одна цель для всех ссылок (One target for all links)
Как использовать тег <base>, чтобы все ссылки на странице открывались в новом окне.

HTML элемент head

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

В секцию head могут быть добавлены следующие теги: <title>, <base>, <link>, <meta>, <script> и <style>.

HTML элемент title

Тег <title> определяет гаголовок документа.

Элемент title требуется во всех HTML/XHTML документах.

Элемент title:

  • определяет название в заголовке окна браузера
  • обеспечивает название для страницы, когда она добавляется в избранное
  • отображает название страницы в результатах работы поисковых систем

Простой HTML документ с минимумом необходимых тегов:

<html>
<head>
<title>Заголовок документа</title>
</head>

<body>
Контент документа......
</body>

</html>

HTML элемент base

Тег <base> указывает адрес или цель по умолчанию для всех ссылок на странице:

<head>
<base href="http://www.w3schools.com/images/" />
<base target="_blank" />
</head>

HTML элемент link

Тег <link> определяет связь между документом и внешним ресурсом.

Тег <link> главным образом используется для ссылки на таблицы стилей:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

HTML элемент style

Тег <style> используется для определения стилевой информации HTML документа.

Внутри элемента style можно указать, как HTML элемент будет представляться в браузере:

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

HTML элемент meta

Тег <meta> предоставляет мета-данные о HTML документе.

Элемент meta будет объяснен в следующей главе.

HTML элемент script

Тег <script> используется для определения сценария (скрипта) на стороне клиента, такого как JavaScript.

Элемент script будет объяснен в следующей главе.

HTML элементы секции head

Тег | Описание
<head> | Определяет информацию о документе
<title> | Определяет заголовок документа
<base /> | Определяет адрес или цель по умолчанию для всех ссылок на странице
<link /> | Определяет связь между документом и внешним ресурсом
<meta /> | Определяет мета-данные о HTML документе
<script> | Определяет сценарий на стороне клиента
<style> | Определяет стилевую информацию для документа


HTML Meta

HTML Элемент Meta

Examples

Попробуйте сами - Примеры

Описание документа (Document description)
Используйте элемент meta для описания документа.

Ключевые слова документа (Document keywords)
Используйте элемент meta для определения ключевых слов документа.

Перенаправление пользователей (Redirect a user)
Как перенаправить пользователя на новый веб-адрес.

HTML элемент meta

Мета-данные это информация о данных.

Тег <meta> предоставляет мета-данные о HTML документе. Мета-данные не будут отображаться на странице, но будут подвергаться машинной обработке.

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

Тег <meta> всегда помещается внутри элемента head.

Мета-данные могут быть использованы браузерами (как показать контент или перезагрузить страницу), поисковыми машинами (ключевые слова) или другими веб-службами.

Ключевые слова для поисковых машин

Некоторые поисковые машины будут использовать название и содержание атрибутов элемента meta для индексирования ваших страниц.

Следующий элемент meta определяет описание страницы:

<meta name="description" content= "Свободные Веб-учебники по HTML, CSS, XML" />

Следующий элемент meta element определяет ключевые слова для страницы:

<meta name="keywords" content= "HTML, CSS, XML" />

Цель названия и содержание атрибутов - описывать содержание страницы.

Remark Примечание: Многие веб-мастера использовали теги <meta> для рассылки спама, подобно повторяемым ключевым словам (или используя неправильные ключевые слова) для более высокого рейтинга. Поэтому, большенство поисковых машин прекратили использование тегов <meta> для индексирования/ранжирования страниц.


HTML Scripts

HTML Сценарии (Scripts)

« Предыдущая Следующая Глава »

Сценарии JavaScripts делают HTML страницы более динамичными и интерактивными.

Examples

Попробуйте сами - Примеры

Вставьте сценарий (Insert a script)
Как вставить сценарий в HTML документ.

Использование тега <noscript>
Как обращаться с браузерами, которые не поддерживают сценарии, или сценарии отключены.

HTML элемент script

Тег <script> используется для определения сценариев на стороне клиента, таких как JavaScript.

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

The required type attribute specifies the MIME type of the script.

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

Показанный ниже скрипт напишет Привет, Мир! на HTML странице:

Пример

<script type="text/javascript">
document.write("Привет, Мир!")
</script>

Попробуйте сами »

Remark Совет: Чтобы узнать больше о JavaScript, посетите наш JavaScript учебник!

HTML элемент noscript

Тег <noscript> используется для предоставления альтернативного содержания пользователям, которые отключили обработку сценариев в своем браузере, или имеют браузер, который не поддерживает сценарии на стороне клиента.

Элемент noscript может содержать все элементы, которые вы можете найти внутри элемента body обычной HTML страницы.

Контент, расположенный внутри элемента noscript, будет отображаться только если сценарии не поддерживаются, или отключены в браузере пользователя:

Пример

<script type="text/javascript">
document.write("Привет, Мир!")
</script>
<noscript>Извините, ваш браузер не поддерживает JavaScript!</noscript>

Попробуйте сами »

HTML теги сценария

Тег | Описание
<script> | Определяет сценарий на стороне клиента
<noscript> | Определяет альтернативный контент для пользователей, которые не поддерживают сценарии на стороне клиента


HTML Сущности (Entities)

Символы, зарезервированные в HTML, должны быть заменены на символьные сущности.

HTML Сущности (Entities)

Некоторые символы зарезервированы в HTML.

В вашем тексте невозможно использовать знаки символ меньше (<) или символ больше (>), потому что браузер будет смешивать их с тегами.

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

Символьная сущность выглядит следующим образом:

&название_сущности;

ИЛИ

&#числовое_значение_сущности;

Для отображения знака меньше мы должны написать: &lt; или &#60;

Remark Совет: Предпочтительно использование названия сущности, а не числаового значения, потому что название легче запомнить. Однако недостатком является то, что браузеры могут не поддерживать все названия сущностей (поддержка числовых значений сущностей - очень хорошая).

Неразрывный пробел (Non-breaking Space)

Широкораспространённой символьной сущностью, используемой в HTML, является неразрывный пробел (&nbsp;).

Браузеры всегда обрезают пробелы в HTML страницах. Если вы напишете 10 пробелов в вашем тексте, браузер удалит 9 из них, перед отображением страницы. Для добавления пробелов в вашем тексте, вы можете использовать символьную сущность &nbsp;.

HTML Примеры сущностей (Entities Example)

Поэксперементируйте с символьными сущностями HTML: Попробуйте сами

HTML Полезные символьные сущности

Примечание: Названия сущностей чувствительны к регистру!

Результат | Описание | Название сущности | Числовое значение сущности
 | неразрывный пробел (non-breaking space) | &nbsp; | &#160;
< | меньше (less than) | &lt; | &#60;
> | больше (greater than) | &gt; | &#62;
& | амперсант (ampersand) | &amp; | &#38;
¢ | цент (cent) | &cent; | &#162;
£ | фунт (pound) | &pound; | &#163;
¥ | иена (yen) | &yen; | &#165;
€ | евро (euro) | &euro; | &#8364;
§ | параграф (section) | &sect; | &#167;
© | copyright | &copy; | &#169;
® | зарегистрированная торговая марка (registered trademark) | &reg; | &#174;
™ | торговая марка (trademark) | &trade; | &#8482;

Для получения полной справки о всех символьных сущностях посетите наш HTML Справочник сущностей (Entities Reference).


HTML URLs

HTML Универсальные локаторы ресурсов (Uniform Resource Locators)

« Предыдущая Следующая Глава »

URL является другой формулировкой веб-адреса.

URL может быть скомпанован из слов, таких как "w3schools.com", или адреса Интернет протокола (IP): 192.68.20.50. Большенство людей при серфинге вводят имя сайта, так как имена легче запомнить, чем числа.

URL - Uniform Resource Locator (Универсальный локатор ресурсов)

Когда вы щелкаете ссылку на HTML странице, лежащий в ее основе тег <a> указывает на адрес всемирной паутины (world wide web).

Uniform Resource Locator (URL) используется для адресации документа (или других данных) во всемирной паутине.

Веб-адрес, например: http://www.w3schools.com/html/default.asp, подчиняется таким синтаксическим правилам:

scheme://host.domain:port/path/filename

Объяснение:

  • scheme (схема) - определяет тип сервиса интернета. Наиболее распространенным типом является http
  • host (хост) - определяет хост домена (хостом по умолчанию для http является www)
  • domain (домен) - определяет Интернет имя домена, напрмер w3schools.com
  • :port (порт) - определяет номер порта хоста (номером порта по умолчанию для http является 80)
  • path (путь) - определяет path (путь) к серверу (если он опущен, документ должен храниться в корневом каталоге веб-сайта)
  • filename (имя файла) - определяет имя документа/ресурса

Обыденные веб-сайты начинаются с http://. Страницы, начинающиеся с http://, не зашифрованы, так что информацию, которой обменивается ваш компьютер и Интернет, могут "увидеть" хакеры.

Безопасные сайты начинаются с https://. Буква "s" означает "secure (безопасный)". При этом, обмениваемая информация будет зашифрована, что делает ее бесполезной для хакеров.

Типовые схемы URL (Common URL Schemes)

В таблице ниже приведены некоторые типовые схемы:

Схема | Сокращенно от .... | Какие страницы будут использовать схему ...
http | HyperText Transfer Protocol | Обычные веб-страницы начинаются с http://. Не зашифрованные. Неразумно вводить личную информацию в http:// страницы
https | Secure HyperText Transfer Protocol | Безопасные веб-страницы. Вся обмениваемая информация зашифрована и не может быть прочитана хакерами
ftp | File Transfer Protocol | Для скачивания или закачивания файлов на сайт. Полезна для обслуживания доменов
file (файл) |  | Файл на вашем компьютере
gopher |  | Gopher документ или меню
news |  | Группа новостей
WAIS | Wide Area Information Search | A database or document on a WAIS database


HTML Url Encoding

HTML URL кодировка (URL Encoding)

« Предыдущая Следующая Глава »

URL кодирование преобразует символы в формат, который может безопасно передаваться через Интернет.

URL - Uniform Resource Locator (Универсальный локатор ресурсов)

Используя URL, веб-браузеры запрашивают страницы из серверов.

URL является адресом веб-страницы, например: http://www.w3schools.com.

URL Кодирование (Encoding)

URLs can only be sent over the Internet using the ASCII character-set.

Since URLs often contains characters outside the ASCII set, the URL has to be converted into a valid ASCII format.

URL encoding replaces unsafe ASCII characters with "%" followed by two hexadecimal digits corresponding to the character values in the ISO-8859-1 character-set.

URLs cannot contain spaces. URL encoding normally replaces a space with a + sign.

Try It Yourself

If you click the "Submit" button below, the browser will URL encode the input before it is sent to the server. A page at the server will display the received input.

Try some other input and click Submit again.

URL Encoding Examples

Character | URL-encoding
Ђ | %80
Ј | %A3
© | %A9
® | %AE
А | %C0
Б | %C1
В | %C2
Г | %C3
Д | %C4
Е | %C5

For a complete reference of all URL encodings, visit our URL Encoding Reference.


HTML Webserver

Превратите ваш компьютер в Веб-сервер (Web Server)

« Предыдущая Следующая Глава »

Ваш Windows ПК в качестве веб-сервера

  • Если вы хотите, чтобы другие люди могли просмотреть ваши страницы, вы должны их опубликовать.
  • Чтобы опубликовать вашу работу, вы должны сохранить страницы на веб-сервере.
  • Ваш собственный компьютер может выступать в качестве веб-сервера, если вы установите IIS или PWS.
  • IIS или PWS превращает ваш компьютер в веб-сервер.
  • Microsoft IIS и PWS являются бесплатными веб-серверными компонентами.

IIS - Internet Information Server

IIS представляет собой набор ориентированных на Интернет услуг для серверов, созданных Microsoft для использования с Microsoft Windows.

IIS поставляется с Windows 2000, XP и Vista. Она также доступна для Windows NT.

IIS проста в установке и идеально подходит для разработки и тестирования веб-приложений.

IIS включает в себя Active Server Pages (ASP)- язык написания сценариев на стороне сервера, что может быть использовано для создания динамических и интерактивных веб-приложений.

Если вы хотите узнать больше об ASP, вы должны изучить наш ASP Tutorial (Учебник).

PWS - Personal Web Server

PWS предназначен для "старых" Windows систем, подобных Windows 95, 98 и NT.

PWS проста в установке и может быть использована для разработки и тестирования веб-приложений, включая ASP.

Версии Windows веб-сервера (Windows Web Server Versions)

  • Windows Vista Business, Enterprise и Ultimate поставляются с IIS 7
  • Windows Vista Home Premium поставляется с IIS 7
  • Windows Vista Home Edition не поддерживает PWS или IIS
  • Windows XP Professional поставляется с IIS 5.1
  • Windows XP Home Edition не поддерживает IIS или PWS
  • Windows 2000 Professional поставляется с IIS 5.0
  • Windows NT Professional поставляется с IIS 3 и также поддерживает IIS 4
  • Windows NT Workstation поддерживает PWS и IIS 3
  • Windows ME не поддерживает PWS или IIS
  • Windows 98 поставляется с PWS
  • Windows 95 поддерживает PWS

Как установить IIS на Windows Vista

Выполните следующие шаги для установки IIS на Windows Vista:

  1. Откройте Панель упраления из меню Пуск
  2. Дважды щелкните Programs and Features
  3. Щелкните "Turn Windows features on or off" (a link to the left)
  4. Установите флажок для Internet Information Services (IIS) и щелкните OK

После установки IIS, убедитесь, что вы you установили все патчи для устранения проблем, связанных ошибками и безопасностью. (Перезагрузите Windows).

Как установить IIS на Windows XP и Windows 2000

Выполните следующие шаги для установки IIS на Windows XP и Windows 2000:

  1. В меню Пуск щелкните Панель управления
  2. Дважды щелкните Установка и удаление программ
  3. Click Add/Remove Windows Components
  4. Click Internet Information Services (IIS)
  5. Click Details
  6. Select the check box for World Wide Web Service, and click OK
  7. In Windows Component selection, click Next to install IIS

После установки IIS, убедитесь, что вы you установили все патчи для устранения проблем, связанных ошибками и безопасностью. (Перезагрузите Windows).

Test Your Web

После установки IIS или PWS выполните следующие шаги:

  1. Найдите на жестком диске новую папку с именем Inetpub
  2. Откройте папку Inetpub folder и найдите в ней папку с именем wwwroot
  3. В папке wwwroot создайте новую папку, например "MyWeb"
  4. Напишите какой-нибудь ASP-код и сохраните его в файле с именем "test1.asp" в новой папке
  5. Убедитесь, что Веб-сервер запущен (см. ниже)
  6. Откройте браузер и введите "http://localhost/MyWeb/test1.asp" для просмотре вашей первой веб-страницы

Примечание: Look for the IIS (or PWS) symbol in your start menu or task bar. The program has functions for starting and stopping the web server, disable and enable ASP, and much more.

How to install PWS on Windows 95, 98, and Windows NT

For Windows 98: Open the Add-ons folder on your Windows CD, find the PWS folder and run setup.exe to install PWS.

For Windows 95 or Windows NT: Download "Windows NT 4.0 Option Pack" from Microsoft, and install PWS.

Test your web as described above.

Your Next Step: A Professional Web Server

  • If you do not want to use PWS or IIS, you must upload your files to a public server.
  • Most Internet Service Providers (ISP's) will offer to host your web pages.
  • If your employer has an Internet Server, you can ask him to host your Web site.
  • If you are really serious about this, you should install your own Internet Server.

Before you select an ISP, make sure you read W3Schools Web Hosting Tutorial !!


Вы изучили HTML, Что теперь?

HTML Выводы (Summary)

Этот учебник научил вас, как использовать HTML, чтобы создать собственный веб-сайт.

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

Ключем к HTML являются теги, которые указывают какой контент появится.

Для получения дополнительной информации о HTML, посмотрите, пожалуйста, наши HTML примеры (examples) и наш HTML справочник (reference).

Теперь вы знаете HTML, что дальше?

Следующим шагом является изучение XHTML и CSS.

XHTML

XHTML переформулирует HTML 4.01 в XML.

Если вы хотите узнать больше о XHTML, посетите, пожалуйста, нашXHTML учебник (tutorial).

CSS

CSS используется для управления стилем и компановкой сразу нескольких Web страниц.

Используя CSS, все форматирование можно удалить из HTML документа и хранить в отдельном файле.

CSS дает вам польный контроль над форматированием страницы, без порчи ее контента.

Чтобы узнать, как создавать CSS, посетите, пожалуйста, наш CSS учебник (tutorial).


HTML Примеры (Examples)

HTML Основы (Basic)

Очень простой HTML документ (A very simple HTML document)
HTML Заголовки (headings)
HTML Абзацы (paragraphs)
HTML Ссылки (links)
HTML Изображения (images)

Примеры с пояснениями

HTML Заголовки (Headings)

HTML Заголовки (Headings)
Вставка комментарий в исходный HTML код (Insert comments in the HTML source code)
Вставка горизонтальных линий (Insert horizontal lines)

Примеры с пояснениями

HTML Абзацы (Paragraphs)

HTML Абзацы (paragraphs)
Еще об абзацах (More paragraphs)
Использование разрывов строк (The use of line breaks)
Некоторые проблемы с HTML форматированием (some problems with HTML formatting)

Примеры с пояснениями

HTML Text Formatting

Форматирование текста (Text formatting)
Преформатирование текста (как управлять разрывами строк и пробелами) (Preformatted text (how to control line breaks and spaces))
Различные теги компьютерного вывода (Different computer-output tags)
Вставка контактной информации (Insert contact information)
Аббревиатуры и акронимы (Abbreviations and acronyms)
Направление текста (Text direction)
Длинные и короткие цитаты (Long and short quotations)
Как пометить удаленный и вставленный текст (How to mark deleted and inserted text)

Примеры с пояснениями

HTML Styles

Стилевое форматирование HTML элементов (Style HTML elements)
Стилевое форматирование цвета фона (Style background color)
Стилевое форматирование шрифта, цвета и размера (Style font, color, and size)
Стилевое форматирование выравнивания текста (Style alignment of text)

Примеры с пояснениями

HTML Ссылки (Links)

Как создать гиперссылки (How to create hyperlinks)
Использование изображения в качестве ссылки (Use an image as a link)
Открытие ссылки в новом окне браузера (Open a link in a new browser window)
Переход в другую часть документа (на той же странице) (Jump to another part of a document (on the same page))
Выход из фрейма (Break out of a frame)
Как сделать ссылку на почтовое сообщение (будет работать только если у вас есть установлена почта ) (How to link to a mail message (will only work if you have mail installed))
Другая почтовая ссылка (Another mailto link)

Примеры с пояснениями

HTML Изображения (Images)

Вставка изображений (Insert images)
Вставка изображения из другой папки или другого сервера (Insert images from another folder or another server)
Выравнивание изображений (Aligning images)
Пусть изображение плавает слева/справа от абзаца (Let the image float to the left/right of a paragraph)
Создание гиперссылки из изображения (Make a hyperlink of an image)
Создание карты изображения, с интерактивными регионами (Create an image-map, with clickable regions)

Примеры с пояснениями

HTML Таблицы (Tables)

Простые таблицы (Simple tables)
Различные границы таблиц (Different table borders)
Таблица без границ (Tables without borders)
Табличные заголовки (Table headers)
Таблица сназванием (Table with a caption)
Ячейки таблицы, охватывающие более чем одну строку/столбец (Table cells that span more than one row/column)
Теги внутри таблицы (Tags inside a table)
Поля внутри ячеек (управление пустым пространством между содержимым ячейки и ее границами) (Cell padding (control the white space between cell content and the borders)
Поля между ячейками (управление расстоянием между ячейками) (Cell spacing (control the distance between cells))
Атрибут frame (The frame attribute)

Примеры с пояснениями

HTML Списки (Lists)

Неупорядоченный (маркированный) список (An unordered list)
Упорядоченный (нумерованный) список (An ordered list)
Различные типы упорядоченных списков (Different types of ordered lists)
Различные типы неупорядоченных списков (Different types of unordered Lists)
Вложенный список (Nested list)
Вложенный список 2 (Nested list 2)
Список определений (Definition list)

Примеры с пояснениями

HTML Формы и ввод (Forms and Input)

Создание текстовых полей (Create text fields)
Создание поля пароля (Create password field)
Переключатели (Checkboxes)
Флажки (Radio buttons)
Простой раскрывающийся список (Simple drop-down list)
Раскрывающийся список с заранее выбранным значением (Drop-down list with a pre-selected value)
Текстовая область (поле многострочного ввода текста) (Textarea (a multi-line text input field))
Создание кнопки (Create a button)
Нарисуйте рамку вокруг фориы с данными (Draw a border around form-data)
Форма с текстовыми полями и кнопкой submit (Form with text fields and a submit button)
Форма с флажками и кнопкой submit (Form with checkboxes and a submit button)
Форма с переключателями и кнопкой submit (Form with radiobuttons and a submit button)
Отправка e-mail из формы (Send e-mail from a form)

Примеры с пояснениями

HTML Фреймы (Frames)

Вертикальный набор фреймов (A vertical frameset)
Горизонтальный набор фреймов (A horizontal frameset)
Как использовать тег <noframes> (How to use the <noframes> tag)
Как смешать набор фреймов по строкам и столбцам (How to mix a frameset in rows and columns)
Набор фреймов с noresize="noresize" (Frameset with noresize="noresize")
Как создать навигационный фрейм (How to create a navigation frame)
Встроенный фрейм (фрейм внутри HTML страницы) (Inline frame (a frame inside an HTML page))
Переход к нужному разделу внутри фрейма (Jump to a specified section within a frame)
Переход к определенному разделу при использовании фреймовой навигации (Jump to a specified section with frame navigation)

Примеры с пояснениями

HTML и Стили (Styles)

Использование стилей в HTML (Using styles in HTML)
Неподчеркнутая ссылка (Link that is not underlined)
Ссылка на внешнюю таблицу стилей (Link to an external style sheet)

Примеры с пояснениями

HTML Элементы секции head (HTML head Elements)

Укажите заголовок документа (Specify a title for a document)
Один атрибут target для всех ссылок на странице (One target for all links on a page)

Примеры с пояснениями

HTML Теги <meta>

Описание документа (Document description)
Ключевые слова документа (Document keywords)
Переадресация пользователя (Redirect a user)

Примеры с пояснениями

HTML Скрипты (Scripts)

Вставка скрипта (Insert a script)
Использование тега <noscript> (Use of the <noscript> tag)

Примеры с пояснениями


HTML Проверка знаний (Quiz)

« Предыдущая Справочник »

Вы можете проверить свои знания HTML с помощью контрольного опросника W3Schools.

Тест (The Test)

Тест содержит 20 вопросов и не ограничен по времени.

Это не официальный тест, а просто хороший способ увидеть на сколько вы познали HTML.

Вам будет сосчитана оценка

Вы получите 1 балл за каждый правильный ответ. По окончанию тестирования будет отображена ваша оценка. Максимальная оценка 20 балов.

Удачи! Начнем тестирование по HTML


HTML Справочник по алфавиту

HTML 4.01 / XHTML 1.0 Справочник (Reference)

« W3Schools Home Следующий Справочник »

В алфавитном порядке

DTD: указывает, в каком HTML 4.01 / XHTML 1.0 DTD тэг разрешен. S=Strict, T=Transitional и F=Frameset

Тег | Описание | DTD
<!--...--> | Определяет комментарии (Defines a comment) | STF
<!DOCTYPE> | Определяет тип документа (Defines the document type) | STF
<a> | Определяет якорь (Defines an anchor) | STF
<abbr> | Определяет аббревиатуру (Defines an abbreviation) | STF
<acronym> | Определяет акроним (Defines an acronym) | STF
<address> | Определяет контактную информацию для автора / владельца документа ( Defines contact information for the author/owner of a document) | STF
<applet> | Не рекомендуется. Определяет встроенный апплет (Defines an embedded applet) | TF
<area /> | Определяет область внутри карты изображения ( Defines an area inside an image-map) | STF
<b> | Определяет полужирный текст (Defines bold text) | STF
<base /> | Определяет адрес по умолчанию или default target для всех ссылок на странице (Defines a default address or a default target for all links on a page) | STF
<basefont /> | Не рекомендуется. Определяет шрифт по умолчанию, цвет или размер текста на странице (Defines a default font, color, or size for the text in a page) | TF
<bdo> | Определяет направление текста (Defines the text direction) | STF
<big> | Определяет крупный текст ( Defines big text) | STF
<blockquote> | Определяет длинную цитату (Defines a long quotation) | STF
<body> | Определяет тело документа ( Defines the document's body) | STF
<br /> | Определяет единичный разрыв строки (Defines a single line break) | STF
<button> | Определяет кнопку (Defines a push button) | STF
<caption> | Определяет заголовок таблицы ( Defines a table caption) | STF
<center> | Не рекомендуется. Определяет центрированный текст (Defines centered text) | TF
<cite> | Определяет цитату ( Defines a citation) | STF
<code> | Определяет текст компьютерного кода ( Defines computer code text) | STF
<col /> | Определяет значения атрибутов для одного или нескольких столбцов в таблице ( Defines attribute values for one or more columns in a table) | STF
<colgroup> | Определяет группу столбцов таблицы для форматирования ( Defines a group of columns in a table for formatting) | STF
<dd> | Определяет описании термина в списке определений ( Defines a description of a term in a definition list) | STF
<del> | Определяет удаленный текст ( Defines deleted text) | STF
<dfn> | Определяет определение термина ( Defines a definition term) | STF
<dir> | Не рекомендуется. Определяет список каталогов (Defines a directory list) | TF
<div> | Определяет блоковый контейнер в документе ( Defines a section in a document) | STF
<dl> | Определяет список определений (Defines a definition list) | STF
<dt> | Определяет термин (пункт) в списке определений ( Defines a term (an item) in a definition list) | STF
<em> | Определяет выделенный текст ( Defines emphasized text) | STF
<fieldset> | Определяет границы вокруг элементов в форме ( Defines a border around elements in a form) | STF
<font> | Не рекомендуется. Определяет шрифт, цвет и размер текста (Defines font, color, and size for text) | TF
<form> | Определяет форму HTML для пользовательского ввода ( Defines an HTML form for user input) | STF
<frame /> | Определяет окно (фрейм) в frameset (Defines a window (a frame) in a frameset) | F
<frameset> | Определяет установку фреймов (Defines a set of frames) | F
от <h1> до <h6> | Определяют HTML заголовки (Defines HTML headings) | STF
<head> | Определяет информацию о документе ( Defines information about the document) | STF
<hr /> | Определяет горизонтальную линейку ( Defines a horizontal line) | STF
<html> | Определяет документ HTML ( Defines an HTML document) | STF
<i> | Определяет курсивный текст ( Defines italic text) | STF
<iframe> | Определяет фрейм внутри блока текста (Defines an inline frame) | TF
<img /> | Определяет изображение ( Defines an image) | STF
<input /> | Определяет управляющий элемент формы (Defines an input control) | STF
<ins> | Определяет вставленный текст ( Defines inserted text) | STF
<isindex> | Не рекомендуется. Defines a searchable index related to a document | TF
<kbd> | Определяет текст, введенный пользователем (Defines keyboard text) | STF
<label> | Определяет метку для элемента input ( Defines a label for an input element) | STF
<legend> | Определяет заголовок элемента fieldset (Defines a caption for a fieldset element) | STF
<li> | Определяет элемент (пункт) списка ( Defines a list item) | STF
<link /> | Определяет отношение между документом и внешним ресурсом (Defines the relationship between a document and an external resource) | STF
<map> | Определяет карту изображения ( Defines an image-map ) | STF
<menu> | Не рекомендуется. Определяет список меню (Defines a menu list) | TF
<meta /> | Определяет метаданные о документе HTML ( Defines metadata about an HTML document) | STF
<noframes> | Определяет альтернативный контент для пользователей, которые не поддерживают фреймы ( Defines an alternate content for users that do not support frames) | TF
<noscript> | Определяет альтернативный контент для пользователей, которые не поддерживают сценарии на стороне клиента ( Defines an alternate content for users that do not support client-side scripts) | STF
<object> | Определяет внедренный объект ( Defines an embedded object) | STF
<ol> | Определяет упорядоченный список ( Defines an ordered list) | STF
<optgroup> | Определяет группу связанных параметры в списке выбора ( Defines a group of related options in a select list) | STF
<option> | Определяет вариант в списке выбора ( Defines an option in a select list) | STF
<p> | Определяет абзац ( Defines a paragraph) | STF
<param /> | Определяет параметр для объекта ( Defines a parameter for an object) | STF
<pre> | Определяет преформатированный текст (Defines preformatted text) | STF
<q> | Определяет короткую цитату ( Defines a short quotation) | STF
<s> | Не рекомендуется. Определяет зачеркнутый текст (Defines strikethrough text) | TF
<samp> | Определяет пример компьютерного кода ( Defines sample computer code) | STF
<script> | Определяет сценарий на стороне клиента ( Defines a client-side script) | STF
<select> | Определяет список выборки (выпадающий список) ( Defines a select list (drop-down list)) | STF
<small> | Определяет уменьшенный текст ( Defines small text) | STF
<span> | Определяет строковый контейнер в документе ( Defines a section in a document) | STF
<strike> | Не рекомендуется. Определяет зачеркнутый текст (Defines strikethrough text) | TF
<strong> | Определяет полужирный текст ( Defines strong text) | STF
<style> | Определяет стиль информации для документа (Defines style information for a document) | STF
<sub> | Определяет нижний индекс в тексте (Defines subscripted text) | STF
<sup> | Определяет верхний индекс в тексте ( Defines superscripted text) | STF
<table> | Определяет таблицу ( Defines a table) | STF
<tbody> | Объединяет контент тела таблицы (Groups the body content in a table) | STF
<td> | Определяет ячейку в таблице ( Defines a cell in a table) | STF
<textarea> | Определяет поле многострочного ввода текста (Defines a multi-line text input control) | STF
<tfoot> | Объединяет контент колонтитула таблицы ( Groups the footer content in a table) | STF
<th> | Определяет заголовочные ячейки таблицы ( Defines a header cell in a table) | STF
<thead> | Объединяет контент заголовка таблицы ( Groups the header content in a table) | STF
<title> | Определяет заголовок документа ( Defines the title of a document) | STF
<tr> | Определяет строку в таблице ( Defines a row in a table) | STF
<tt> | Определяет телетайпный текст ( Defines teletype text) | STF
<u> | Не рекомендуется. Определяет подчеркнутый текст (Defines underlined text) | TF
<ul> | Определяет неупорядоченный (маркированный) список ( Defines an unordered list) | STF
<var> | Определяет переменную, как часть текста ( Defines a variable part of a text) | STF


HTML Справочник по функциям

HTML 4.01 / XHTML 1.0 Справочник (Reference)

« Предыдущий Следующий Справочник »

В функциональном порядке

DTD: указывает, в каком HTML 4.01 / XHTML 1.0 DTD тэг разрешен. S=Strict, T=Transitional, and F=Frameset

Тег | Описание | DTD
Основные |  |
<!DOCTYPE> | Определяет тип документа (Defines the document type) | STF
<html> | Определяет документ HTML (Defines an HTML document) | STF
<body> | Определяет тело документа (Defines the document's body) | STF
от <h1> до <h6> | Определяют HTML заголовки (Defines HTML headings) | STF
<p> | Определяет абзац (Defines a paragraph) | STF
<br /> | Определяет единичный разрыв строки (Inserts a single line break) | STF
<hr /> | Определяет горизонтальную линейку (Defines a horizontal line) | STF
<!--...--> | Определяет комментарии (Defines a comment) | STF
Форматирование |  |
<acronym> | Определяет акроним (Defines an acronym) | STF
<abbr> | Определяет аббревиатуру (Defines an abbreviation) | STF
<address> | Определяет контактную информацию для автора / владельца документа (Defines contact information for the author/owner of a document) | STF
<b> | Определяет полужирный текст (Defines bold text) | STF
<bdo> | Определяет направление текста (Defines the text direction) | STF
<big> | Определяет крупный текст (Defines big text) | STF
<blockquote> | Определяет длинную цитату (Defines a long quotation) | STF
<center> | Не рекомендуется. Определяет центрированный текст (Defines centered text) | TF
<cite> | Определяет цитату (Defines a citation) | STF
<code> | Определяет текст компьютерного кода (Defines computer code text) | STF
<del> | Определяет удаленный текст (Defines deleted text) | STF
<dfn> | Определяет определение термина (Defines a definition term) | STF
<em> | Определяет выделенный текст (Defines emphasized text) | STF
<font> | Не рекомендуется. Определяет шрифт, цвет и размер текста (Defines font, color, and size for text) | TF
<i> | Определяет курсивный текст (Defines italic text) | STF
<ins> | Определяет вставленный текст (Defines inserted text) | STF
<kbd> | Определяет текст, введенный пользователем (Defines keyboard text) | STF
<pre> | Определяет преформатированный текст (Defines preformatted text) | STF
<q> | Определяет короткую цитату (Defines a short quotation) | STF
<s> | Не рекомендуется. Определяет зачеркнутый текст (Defines strikethrough text) | TF
<samp> | Определяет пример компьютерного кода (Defines sample computer code) | STF
<small> | Определяет уменьшенный текст (Defines small text) | STF
<strike> | Не рекомендуется. Определяет зачеркнутый текст (Defines strikethrough text) | TF
<strong> | Определяет полужирный текст (Defines strong text) | STF
<sub> | Определяет нижний индекс в тексте (Defines subscripted text) | STF
<sup> | Определяет верхний индекс в тексте (Defines superscripted text) | STF
<tt> | Определяет телетайпный текст (Defines teletype text) | STF
<u> | Не рекомендуется. Определяет подчеркнутый текст (Defines underlined text) | TF
<var> | Определяет переменную, как часть текста (Defines a variable part of a text) | STF
<xmp> | Не рекомендуется. Определяет преформатированный текст (Defines preformatted text) |
Формы |  |
<form> | Определяет форму HTML для пользовательского ввода (Defines an HTML form for user input) | STF
<input /> | Определяет управляющий элемент формы (Defines an input control) | STF
<textarea> | Определяет поле многострочного ввода текста (Defines a multi-line text input control) | STF
<button> | Определяет кнопку (Defines a push button) | STF
<select> | Определяет список выборки (выпадающий список) (Defines a select list (drop-down list)) | STF
<optgroup> | Определяет группу связанных параметры в списке выбора (Defines a group of related options in a select list) | STF
<option> | Определяет вариант в списке выбора (Defines an option in a select list) | STF
<label> | Определяет метку для элемента input (Defines a label for an input element) | STF
<fieldset> | Определяет границы вокруг элементов в форме (Defines a border around elements in a form) | STF
<legend> | Определяет заголовок элемента fieldset (Defines a caption for a fieldset element) | STF
<isindex> | Не рекомендуется. (Defines a searchable index related to a document) | TF
Фреймы |  |
<frame /> | Определяет окно (фрейм) в frameset (Defines a window (a frame) in a frameset) | F
<frameset> | Определяет установку фреймов (Defines a set of frames) | F
<noframes> | Определяет альтернативный контент для пользователей, которые не поддерживают фреймы (Defines an alternate content for users that do not support frames) | TF
<iframe> | Определяет фрейм внутри блока текста (Defines an inline frame) | TF
Изображения |  |
<img /> | Определяет изображение (Defines an image) | STF
<map> | Определяет карту изображения (Defines an image-map ) | STF
<area /> | Определяет область внутри изображения-карты (Defines an area inside an image-map) | STF
Ссылки |  |
<a> | Определяет якорь (Defines an anchor) | STF
<link /> | Определяет отношение между документом и внешним ресурсом (Defines the relationship between a document and an external resource) | STF
Списки |  |
<ul> | Определяет неупорядоченный (маркированный) список (Defines an unordered list) | STF
<ol> | Определяет упорядоченный список (Defines an ordered list) | STF
<li> | Определяет элемент (пункт) списка (Defines a list item) | STF
<dir> | Не рекомендуется. Определяет список каталогов (Defines a directory list) | TF
<dl> | Определяет список определений (Defines a definition list) | STF
<dt> | Определяет термин (пункт) в списке определений (Defines a term (an item) in a definition list) | STF
<dd> | Определяет описании термина в списке определений (Defines a description of a term in a definition list) | STF
<menu> | Не рекомендуется. Определяет список меню (Defines a menu list) | TF
Таблицы |  |
<table> | Определяет таблицу (Defines a table) | STF
<caption> | Определяет заголовок таблицы (Defines a table caption) | STF
<th> | Определяет заголовочные ячейки таблицы (Defines a header cell in a table) | STF
<tr> | Определяет строку в таблице (Defines a row in a table) | STF
<td> | Определяет ячейку в таблице (Defines a cell in a table) | STF
<thead> | Объединяет контент заголовка таблицы (Groups the header content in a table) | STF
<tbody> | Объединяет контент тела таблицы (Groups the body content in a table) | STF
<tfoot> | Объединяет контент колонтитула таблицы (Groups the footer content in a table) | STF
<col /> | Определяет значения атрибутов для одного или нескольких столбцов в таблице (Defines attribute values for one or more columns in a table) | STF
<colgroup> | Определяет группу столбцов таблицы для форматирования (Defines a group of columns in a table for formatting) | STF
Стили |  |
<style> | Определяет стиль информации для документа (Defines style information for a document) | STF
<div> | Определяет блоковый контейнер в документе (Defines a section in a document) | STF
<span> | Определяет строковый контейнер в документе (Defines a section in a document) | STF
Метаинформации |  |
<head> | Определяет информацию о документе (Defines information about the document) | STF
<title> | Определяет заголовок документа (Defines the document title) | STF
<meta> | Определяет метаданные о документе HTML (Defines metadata about an HTML document) | STF
<base /> | Определяет адрес по умолчанию или default target для всех ссылок на странице (Defines a default address or a default target for all links on a page) | STF
<basefont /> | Не рекомендуется. Определяет шрифт по умолчанию, цвет или размер текста на странице (Defines a default font, color, or size for the text in a page) | TF
Программирование |  |
<script> | Определяет сценарий на стороне клиента (Defines a client-side script) | STF
<noscript> | Определяет альтернативный контент для пользователей, которые не поддерживают сценарии на стороне клиента (Defines an alternate content for users that do not support client-side scripts) | STF
<applet> | Не рекомендуется. Определяет встроенный апплет (Defines an embedded applet) | TF
<object> | Определяет внедренный объект (Defines an embedded object) | STF
<param /> | Определяет параметр для объекта (Defines a parameter for an object) | STF


HTML Стандартные атрибуты

HTML / XHTML Стандартные атрибуты (Standard Attributes)

« Предыдущий Следующий Справочник »

Перечисленные ниже атрибуты являются стандартными и поддерживаются, с некоторыми исключениями, всеми HTML и XHTML тегами.

Базовые Атрибуты (Core Attributes)

Не действуют в base, head, html, meta, param, script, style, и title элементах.

Атрибут | Значение | Описание
class | имя_класса | Устанавливает имя_класса для элемента
id | имя_id | Устанавливает уникальный идентификатор для элемента
style | style_определение | Устанавливает встроенный стиль для элемента
title | текст | Устанавливает дополнительные сведения об элементе

Атрибуты языка (Language Attributes)

Не действуют в base, br, frame, frameset, hr, iframe, param и script элементах.

Атрибут | Значение | Описание
dir | ltr rtl | Определяет направление текста для контента элемента
lang | language_code | Указывает код языка для контента элемента. Language code reference
xml:lang | language_code | Указывает код языка для контента элемента в XHTML документах. Language code reference

Атрибуты клавиатуры (Keyboard Attributes)

Атрибут | Значение | Описание
accesskey | символ | Определяет клавишу для доступа к элементу
tabindex | число | Определяет позицию элемента в порядке табуляции


HTML Атрибуты событий

HTML / XHTML Атрибуты событий (Event Attributes)

« Предыдущий Следующий справочник »

Стандартные атрибуты событий

HTML 4 added the ability to let events trigger actions in a browser, like starting a JavaScript when a user clicks on an element.

Чтобы узнать больше о программировании событий, пожалуйста, посетите наш JavaScript tutorial и наш DHTML tutorial.

Ниже приведены атрибуты стандартных событий, that can be inserted into HTML / XHTML elements to define event actions.

События <body> и <frameset>

Два атрибута, показанные ниже, могут быть использованы только в <body> или <frameset>:

Атрибут | Значение | Описание
onload | script | Script to be run when a document load
onunload | script | Script to be run when a document unload

События формы

Атрибуты, показанные ниже, могут быть использованы в элементах формы:

Атрибут | Значение | Описание
onblur | script | Скрипт выполняется, когда элемент теряет фокус
onchange | script | Скрипт выполняется, когда an element change
onfocus | script | Скрипт выполняется, когда an element gets focus
onreset | script | Скрипт выполняется, когда a form is reset
onselect | script | Скрипт выполняется, когда an element is selected
onsubmit | script | Скрипт выполняется, когда a form is submitted

События изображения

Атрибуты, показанные ниже, могут быть использованы в элементе img:

Атрибут | Значение | Описание
onabort | script | Скрипт выполняется, когда прерывается загрузка изображения

События клавиатуры

Действуют во всех элементах, кроме base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style и title.

Атрибут | Значение | Описание
onkeydown | script | Скрипт выполняется при нажатии клавиши
onkeypress | script | Script to be run when a key is pressed and released
onkeyup | script | Script to be run when a key is released

События мыши

Действуют во всех элементах, кроме base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style и title.

Атрибут | Значение | Описание
onclick | script | Script to be run on a mouse click
ondblclick | script | Script to be run on a mouse double-click
onmousedown | script | Script to be run when mouse button is pressed
onmousemove | script | Script to be run when mouse pointer moves
onmouseout | script | Script to be run when mouse pointer moves out of an element
onmouseover | script | Script to be run when mouse pointer moves over an element
onmouseup | script | Script to be run when mouse button is released


HTML Названия цветов (Color Names)

« Предыдущий Следующий Справочник »

Названия цветов, поддерживаемые всеми браузерами

Ниже представлен полный список названий цветов, которые поддерживаются всеми основными браузерами.

Вы можете щелкнуть по названию цвета (или HEX значению), чтобы увидеть этот цвет в качестве фона вместе с текстом разных цветов.

Отсортированные по названиям (Sorted by Names)

Ссылка: Тот же список, отсортированный по значениям

Название цвета | HEX | Цвет | Оттенки | Смесь
AliceBlue | #F0F8FF |  | Shades | Mix
AntiqueWhite | #FAEBD7 |  | Shades | Mix
Aqua | #00FFFF |  | Shades | Mix
Aquamarine | #7FFFD4 |  | Shades | Mix
Azure | #F0FFFF |  | Shades | Mix
Beige | #F5F5DC |  | Shades | Mix
Bisque | #FFE4C4 |  | Shades | Mix
Black | #000000 |  | Shades | Mix
BlanchedAlmond | #FFEBCD |  | Shades | Mix
Blue | #0000FF |  | Shades | Mix
BlueViolet | #8A2BE2 |  | Shades | Mix
Brown | #A52A2A |  | Shades | Mix
BurlyWood | #DEB887 |  | Shades | Mix
CadetBlue | #5F9EA0 |  | Shades | Mix
Chartreuse | #7FFF00 |  | Shades | Mix
Chocolate | #D2691E |  | Shades | Mix
Coral | #FF7F50 |  | Shades | Mix
CornflowerBlue | #6495ED |  | Shades | Mix
Cornsilk | #FFF8DC |  | Shades | Mix
Crimson | #DC143C |  | Shades | Mix
Cyan | #00FFFF |  | Shades | Mix
DarkBlue | #00008B |  | Shades | Mix
DarkCyan | #008B8B |  | Shades | Mix
DarkGoldenRod | #B8860B |  | Shades | Mix
DarkGray | #A9A9A9 |  | Shades | Mix
DarkGreen | #006400 |  | Shades | Mix
DarkKhaki | #BDB76B |  | Shades | Mix
DarkMagenta | #8B008B |  | Shades | Mix
DarkOliveGreen | #556B2F |  | Shades | Mix
Darkorange | #FF8C00 |  | Shades | Mix
DarkOrchid | #9932CC |  | Shades | Mix
DarkRed | #8B0000 |  | Shades | Mix
DarkSalmon | #E9967A |  | Shades | Mix
DarkSeaGreen | #8FBC8F |  | Shades | Mix
DarkSlateBlue | #483D8B |  | Shades | Mix
DarkSlateGray | #2F4F4F |  | Shades | Mix
DarkTurquoise | #00CED1 |  | Shades | Mix
DarkViolet | #9400D3 |  | Shades | Mix
DeepPink | #FF1493 |  | Shades | Mix
DeepSkyBlue | #00BFFF |  | Shades | Mix
DimGray | #696969 |  | Shades | Mix
DodgerBlue | #1E90FF |  | Shades | Mix
FireBrick | #B22222 |  | Shades | Mix
FloralWhite | #FFFAF0 |  | Shades | Mix
ForestGreen | #228B22 |  | Shades | Mix
Fuchsia | #FF00FF |  | Shades | Mix
Gainsboro | #DCDCDC |  | Shades | Mix
GhostWhite | #F8F8FF |  | Shades | Mix
Gold | #FFD700 |  | Shades | Mix
GoldenRod | #DAA520 |  | Shades | Mix
Gray | #808080 |  | Shades | Mix
Green | #008000 |  | Shades | Mix
GreenYellow | #ADFF2F |  | Shades | Mix
HoneyDew | #F0FFF0 |  | Shades | Mix
HotPink | #FF69B4 |  | Shades | Mix
IndianRed | #CD5C5C |  | Shades | Mix
Indigo | #4B0082 |  | Shades | Mix
Ivory | #FFFFF0 |  | Shades | Mix
Khaki | #F0E68C |  | Shades | Mix
Lavender | #E6E6FA |  | Shades | Mix
LavenderBlush | #FFF0F5 |  | Shades | Mix
LawnGreen | #7CFC00 |  | Shades | Mix
LemonChiffon | #FFFACD |  | Shades | Mix
LightBlue | #ADD8E6 |  | Shades | Mix
LightCoral | #F08080 |  | Shades | Mix
LightCyan | #E0FFFF |  | Shades | Mix
LightGoldenRodYellow | #FAFAD2 |  | Shades | Mix
LightGrey | #D3D3D3 |  | Shades | Mix
LightGreen | #90EE90 |  | Shades | Mix
LightPink | #FFB6C1 |  | Shades | Mix
LightSalmon | #FFA07A |  | Shades | Mix
LightSeaGreen | #20B2AA |  | Shades | Mix
LightSkyBlue | #87CEFA |  | Shades | Mix
LightSlateGray | #778899 |  | Shades | Mix
LightSteelBlue | #B0C4DE |  | Shades | Mix
LightYellow | #FFFFE0 |  | Shades | Mix
Lime | #00FF00 |  | Shades | Mix
LimeGreen | #32CD32 |  | Shades | Mix
Linen | #FAF0E6 |  | Shades | Mix
Magenta | #FF00FF |  | Shades | Mix
Maroon | #800000 |  | Shades | Mix
MediumAquaMarine | #66CDAA |  | Shades | Mix
MediumBlue | #0000CD |  | Shades | Mix
MediumOrchid | #BA55D3 |  | Shades | Mix
MediumPurple | #9370D8 |  | Shades | Mix
MediumSeaGreen | #3CB371 |  | Shades | Mix
MediumSlateBlue | #7B68EE |  | Shades | Mix
MediumSpringGreen | #00FA9A |  | Shades | Mix
MediumTurquoise | #48D1CC |  | Shades | Mix
MediumVioletRed | #C71585 |  | Shades | Mix
MidnightBlue | #191970 |  | Shades | Mix
MintCream | #F5FFFA |  | Shades | Mix
MistyRose | #FFE4E1 |  | Shades | Mix
Moccasin | #FFE4B5 |  | Shades | Mix
NavajoWhite | #FFDEAD |  | Shades | Mix
Navy | #000080 |  | Shades | Mix
OldLace | #FDF5E6 |  | Shades | Mix
Olive | #808000 |  | Shades | Mix
OliveDrab | #6B8E23 |  | Shades | Mix
Orange | #FFA500 |  | Shades | Mix
OrangeRed | #FF4500 |  | Shades | Mix
Orchid | #DA70D6 |  | Shades | Mix
PaleGoldenRod | #EEE8AA |  | Shades | Mix
PaleGreen | #98FB98 |  | Shades | Mix
PaleTurquoise | #AFEEEE |  | Shades | Mix
PaleVioletRed | #D87093 |  | Shades | Mix
PapayaWhip | #FFEFD5 |  | Shades | Mix
PeachPuff | #FFDAB9 |  | Shades | Mix
Peru | #CD853F |  | Shades | Mix
Pink | #FFC0CB |  | Shades | Mix
Plum | #DDA0DD |  | Shades | Mix
PowderBlue | #B0E0E6 |  | Shades | Mix
Purple | #800080 |  | Shades | Mix
Red | #FF0000 |  | Shades | Mix
RosyBrown | #BC8F8F |  | Shades | Mix
RoyalBlue | #4169E1 |  | Shades | Mix
SaddleBrown | #8B4513 |  | Shades | Mix
Salmon | #FA8072 |  | Shades | Mix
SandyBrown | #F4A460 |  | Shades | Mix
SeaGreen | #2E8B57 |  | Shades | Mix
SeaShell | #FFF5EE |  | Shades | Mix
Sienna | #A0522D |  | Shades | Mix
Silver | #C0C0C0 |  | Shades | Mix
SkyBlue | #87CEEB |  | Shades | Mix
SlateBlue | #6A5ACD |  | Shades | Mix
SlateGray | #708090 |  | Shades | Mix
Snow | #FFFAFA |  | Shades | Mix
SpringGreen | #00FF7F |  | Shades | Mix
SteelBlue | #4682B4 |  | Shades | Mix
Tan | #D2B48C |  | Shades | Mix
Teal | #008080 |  | Shades | Mix
Thistle | #D8BFD8 |  | Shades | Mix
Tomato | #FF6347 |  | Shades | Mix
Turquoise | #40E0D0 |  | Shades | Mix
Violet | #EE82EE |  | Shades | Mix
Wheat | #F5DEB3 |  | Shades | Mix
White | #FFFFFF |  | Shades | Mix
WhiteSmoke | #F5F5F5 |  | Shades | Mix
Yellow | #FFFF00 |  | Shades | Mix
YellowGreen | #9ACD32 |  | Shades | Mix

Примечание: приведенные выше названия, не являются частью W3C веб стандарта.

W3C HTML и CSS стандартами перечислены лишь 16 допустимых названий цветов:
aqua (морской волны), black (черный), blue (синий), fuchsia (фуксия), gray (серый), green (зеленый), lime (лайм), maroon (коричнево-малиновый), navy (темно-синий), olive (оливковый), purple (пурпурный), red (красный), silver (серебряный), teal (сине-зеленый), white (белый ) и yellow (желтый).

If you want valid HTML or CSS use the HEX values instead.


 Ссылка без якоря
Ссылка c якорем


Фрейм A


Фрейм B


Фрейм C


HTML CSS

В HTML 4.0 все форматирование может быть перемещено из документа HTML в отдельную таблицу стилей.

Examples

Попробуйте сами - Примеры

Использование стилей в HTML
Как добавлять стилевую информацию в секцию <head>.

Не подчеркнутая ссылка
Как сделать не подчеркнутую ссылку, используя атрибут style.

Ссылка на внешнюю таблицу стилей
Как использовать тег <link> для ссылки на внешнюю таблицу стилей.

Как использовать стили

Когда браузер читает таблицу стилей, он будет форматировать документ в соответствии с ней.

Есть три способа добавления таблиц стилей:

  • Внешняя таблица стилей (External style sheet)
  • Внутренняя таблица стилей (Internal style sheet)
  • Встроенные стили (Inline styles)

Внешняя таблица стилей (External Style Sheet)

Внешняя таблица стилей является идеальной, когда стиль применяется ко многим страницам. Используя внешнюю таблицу стилей, вы можете изменить внешний вид всего веб-сайта путем изменения одного файла. Каждая страница должна ссылаться на таблицу стилей помощью тега <link>. Тег <link> должен находиться в секции head.

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Внутренняя таблица стилей (Internal Style Sheet)

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

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

Встроенные стили

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

Для применения встроенных стилей, вы используете атрибут style в соответствующем теге. Атрибут style может содержать несколько свойств CSS. Приведенный ниже пример показывает, как изменить цвет текста и левое поле абзаца:

<p style="color: blue; margin-left:20px">
Это абзац
</p>

Чтобы узнать больше о стилях, посетите наш CSS tutorial (Учебник CSS).

Style Tags

Tag | Description
<style> | Defines a style definition
<link> | Defines a resource reference
<div> | Defines a section in a document
<span> | Defines a section in a document
<font> | Deprecated. Use styles instead
<basefont> | Deprecated. Use styles instead
<center> | Deprecated. Use styles instead


HTML События (Events)

HTML 4.0 Event Attributes

« Previous Next Chapter »

New to HTML 4.0 is the ability to let HTML events trigger actions in the browser, like starting a JavaScript when a user clicks on an HTML element. Below is a list of attributes that can be inserted into HTML tags to define event actions.

If you want to learn more about programming with these events, you should study our JavaScript tutorial and our DHTML tutorial.

Window Events

Only valid in body and frameset elements.

Attribute | Value | Description
onload | script | Script to be run when a document loads
onunload | script | Script to be run when a document unloads

Form Element Events

Only valid in form elements.

Attribute | Value | Description
onchange | script | Script to be run when the element changes
onsubmit | script | Script to be run when the form is submitted
onreset | script | Script to be run when the form is reset
onselect | script | Script to be run when the element is selected
onblur | script | Script to be run when the element loses focus
onfocus | script | Script to be run when the element gets focus

Keyboard Events

Not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title elements.

Attribute | Value | Description
onkeydown | script | What to do when key is pressed
onkeypress | script | What to do when key is pressed and released
onkeyup | script | What to do when key is released

Mouse Events

Not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, title elements.

Attribute | Value | Description
onclick | script | What to do on a mouse click
ondblclick | script | What to do on a mouse double-click
onmousedown | script | What to do when mouse button is pressed
onmousemove | script | What to do when mouse pointer moves
onmouseout | script | What to do when mouse pointer moves out of an element
onmouseover | script | What to do when mouse pointer moves over an element
onmouseup | script | What to do when mouse button is released


HTML Шрифты (Fonts)

Тег <font> не рекомендуется использовать в HTML. Он должен быть удален в будущих версиях HTML.

Даже если многие люди используют этот тег, вы должны попытаться избежать этого и вместо него использовать стили.

HTML тег <font>

Используя HTML код, подобный этому, вы можете указать размеры и названия шрифтов браузерного вывода:

Пример

<p>
<font size="2" face="Verdana">
Это абзац.
</font>
</p>

<p>
<font size="3" face="Times">
Это другой абзац.
</font>
</p>

Попробуйте сами »

Атрибуты элемента Font (Font Attributes)

Атрибут | Пример | Результат
size="число" | size="2" | Определяет размер шрифта
size="+число" | size="+1" | Увеличивает размер шрифта
size="-число" | size="-1" | Уменьшает размер шрифта
face="название-шрифта" | face="Times" | Определяет название шрифта
color="значение-цвета" | color="#eeff00" | Определяет цвет шрифта
color="название-цвета" | color="red" | Определяет цвет шрифта

Тег <font> НЕ должен использоваться

Тег <font> исключен в последних версиях HTML (HTML 4 и XHTML).

World Wide Web Consortium (W3C) удалил тег <font> из своих рекомендаций. В будущих версиях HTML, каскадных таблицах стилей (CSS) для компоновки и показа контента будут использоваться свойства элементов HTML.

Правильный способ сделать это - использование стилей (The Right Way to Do It - With Styles)

Установка шрифта текста (Set the font of text)
Этот пример показывает, как установить шрифт текста.

Установка размера шрифта текста (Set the font size of text )
Этот пример показывает, как установить размер шрифта текста.

Установка цвета шрифта текста (Set the font color of text)
Этот пример демонстрирует, как можно установить цвет текста.

Установка шрифт, размер шрифта и цвет шрифта текста (Set the font, font size, and font color of text)
Этот пример показывает, как установить шрифт, размер шрифта и цвет шрифта текста.

Где узнать больше о стилях? (Where to Learn More About Style Sheets?)

Во-первых: Изучите последние главы в нашем HTML учебнике !!! В следующих главах мы будем объяснять, почему некоторые теги, подобные <font>, удалены из HTML рекомендаций, и как вставить таблицу стилей в HTML документ.

Чтобы узнать больше о стилях: Изучите наш CSS Учебник.


HTML Расположение (Layout)

HTML Компоновка (Layout)

« Предыдущая Следующая Глава »

Повсюду в Интернете вы найдете страницы, отформатированные как газетные страницы, с помощью HTML столбцов.

HTML компоновка - с использованием таблиц (HTML Layout - Using Tables)

Одна из общепринятых практик в HTML, заключается в использовании HTML таблиц для форматирования компоновки HTML страницы.

Часть этой страницы отформатирована с двумя колоннами, как газетный лист.

Вы видете, что на этой странице есть левая и правая колонки.

Этот текст отображается в левой колонке.

 HTML элемент <table>используется для разделения части этой веб-страницы на две колонки.

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

Неважно, сколько текста вы добавите к этой странице, он будет оставаться внутри границ своих столбцов.

Та же самая компоновка - Добавление цвета (Same Layout - Color Added)

Одна из общепринятых практик в HTML, заключается в использовании HTML
таблиц для форматирования компоновки HTML страницы.

Часть этой страницы отформатирована с двумя колоннами, как газетный лист.

Вы видете, что на этой странице есть левая и правая колонки.

 HTML элемент <table>используется для разделения части этой веб-страницы на две колонки.

Этот текст отображается в правой колонке.

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

Неважно, сколько текста вы добавите к этой странице, он будет оставаться внутри границ своих столбцов.

Примеры

Разделение части HTML страницы по колонкам (столбцам) страницы делается очень легко. Чтобы позволить вам поэкспериментировать с этим, мы предлагаем вам этот простой пример.

HTML Шутка (Joke)

Студент: "How do you spell HTML?"


HTML Атрибуты (Attributes)

HTML 4.0 Standard Attributes

« Previous Next Chapter »

HTML tags can have attributes. The special attributes for each tag are listed under each tag description. The attributes listed here are the core and language attributes that are standard for all tags (with a few exceptions):

Core Attributes

Not valid in base, head, html, meta, param, script, style, and title elements.

Attribute | Value | Description
class | class_rule or style_rule | The class of the element
id | id_name | A unique id for the element
style | style_definition | An inline style definition
title | tooltip_text | A text to display in a tool tip

Language Attributes

Not valid in base, br, frame, frameset, hr, iframe, param, and script elements.

Attribute | Value | Description
dir | ltr | rtl | Sets the text direction
lang | language_code | Sets the language code

Keyboard Attributes

Attribute | Value | Description
accesskey | character | Sets a keyboard shortcut to access an element
tabindex | number | Sets the tab order of an element


Глава 1

В этой главе объясняется ...

Глава 2

В этой главе объясняется ...

Глава 3

В этой главе объясняется ...

Глава 4

В этой главе объясняется ...

Глава 5

В этой главе объясняется ...

Глава 6

В этой главе объясняется ...

Глава 7

В этой главе объясняется ...

Глава 8

В этой главе объясняется ...

Глава 9

В этой главе объясняется ...

Глава 10

В этой главе объясняется ...

Глава 11

В этой главе объясняется ...

Глава 12

В этой главе объясняется ...

Глава 13

В этой главе объясняется ...

Глава 14

В этой главе объясняется ...

Глава 15

В этой главе объясняется ...

Глава 16

В этой главе объясняется ...

Глава 17

В этой главе объясняется ...


Главная страница

Это моя Главная страница

Это некоторый текст.

Это ссылка на Страницу 1

Это ссылка на Страницу 2


Страница 1

Это Страница 1

Это некоторый текст.


Страница 2

Это Страница 2

Это некоторый текст.


Tryit Editor v1.4

Результат после редактирования:

Отредактируйте код и щелкните кнопку, чтобы увидеть результат W3Schools.com - Попробуйте сами


HTML Tutorial

 Frame a
Frame b
Frame c