Html полный справочник – HTML 5 Академия Учебник Уроки Примеры онлайн курсы все бесплатно с нуля хтмл book

Содержание

HTML справочник | Теги HTML

HTML справочник - это список HTML тегов определенных в спецификации HTML 5. Список тегов редактируется по мере изменения спецификации (обновляется информация и о самих тегах и об их атрибутах).

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

Вставляемый контент

Интерактивные элементы

Комментарии

Корневой элемент

Метаданные документа

Метаданные - структурированная информация о веб-странице, размещаемая внутри HTML-документа в элементе head.

Разделы документа

Списки

Ссылки

Сценарии

Таблицы

Текст

Формы

Теги html

Если вы только собираетесь начать изучать HTML, то одна из первых вещей, которые следует запомнить – специальные термины. Два из них будут встречаться наиболее часто – это «тег» и «элемент».

Термины «HTML элемент» и «HTML тег» обычно используются как синонимы. Но в соответствии со спецификацией W3C элемент – это тег со всем его содержимым, включая открывающий и закрывающий теги. У некоторых элементов нет закрывающего тега, такие элементы называются одиночными или пустыми, но несмотря на то, что они не могут содержать в себе никакого контента, они все равно считаются полноценными элементами.

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

Если вы желаете узнать больше о создании веб страниц, тегах и их применении, то можете заглянуть в наш Самоучитель по HTML.

HTML Справочник тегов по алфавиту

= Новые теги в HTML5.

Теги Описание
<!--...--> Определяет комментарий
<!DOCTYPE>  Определяет тип документа
<a> Определяет гиперссылку
<abbr> Определяет аббревиатуру или акроним
<acronym> Не поддерживается в HTML5. Использовать <abbr>.
Определяет акроним
<address> Определяет контактную информацию автора/владельца документа
<applet> Не поддерживается в HTML5. Использовать <embed> или <object>
Определяет встроенное приложение
<area> Определяет область внутри изображения-карты
<article> Определяет статью
<aside> Определяет содержимое в стороне помимо содержимого страницы
<audio> Определяет звуковое содержимое
<b> Определяет bold (полужирный) текст
<base> Задает базовый URL/цель для всех относительных URL-адресов в документе
<basefont> Не поддерживается в HTML5. Использовать в CSS.
Задает цвет, размер и шрифт по умолчанию для всего текста в документе
<bdi> Изолирует часть текста, которая может быть отформатирована в другом направлении от другого текста за ее пределами
<bdo> Переопределяет текущее направление текста
<big> Не поддерживается в HTML5. Использовать в CSS.
Определяет большой текст
<blockquote> Определяет раздел, который цитируется из другого источника
<body> Определяет тело документа
<br> Определяет разрыв одной строки
<button> Определяет кликабельную кнопку
<canvas> Используется для рисования графики, на лету, с помощью сценариев (обычно JavaScript)
<caption> Определяет подпись в таблице
<center> Не поддерживается в HTML5. Используйте в CSS.
Определяет центрированный текст
<cite> Определяет название работы
<code> Определяет часть компьютерного кода
<col> Задает свойства столбцов для каждого столбца в элементе <colgroup>
<colgroup> Задает группу из одного или нескольких столбцов в таблице для форматирования
<data> Задает данные содержимого с машиночитаемым переводом
<datalist> Задает список предопределенных параметров элементов управления вводом
<dd> Определяет описание/значение термина в списке описаний
<del> Определяет текст, который был удален из документа
<details> Определяет дополнительные сведения, которые пользователь может просмотреть или скрыть
<dfn> Представляет определяющий экземпляр термина
<dialog> Определение диалогового окна или окна
<dir> Не поддерживается в HTML5. Используйте <ul>.
Определяет список директории
<div> Определяет раздел в документе
<dl> Определяет список описаний
<doctype> Объявляет декларацию <!DOCTYPE>, документа HTML
<dt> Определяет термин/имя в списке описаний
<em>
Определяет выделенный текст
<embed> Определяет контейнер для внешнего приложения (non-HTML)
<fieldset> Группы связанных элементов в форме
<figcaption> Определяет подпись к фотографии для элемента <figure>
<figure> Задает автономное содержимое
<font> Не поддерживается в HTML5. Используйте в CSS.
Определяет шрифт, цвет и размер текста
<footer> Определяет нижний колонтитул для документа или раздела
<form> Определяет форму HTML для пользовательского ввода
<frame> Не поддерживается в HTML5.
Defines a window (a frame) in a frameset
<frameset> Не поддерживается в HTML5.
Defines a set of frames
<h2> и <h6> Определяет заголовки HTML
<head> Определяет сведения о документе
<header> Определяет верхний колонтитул для документа или раздела
<hr> Определяет тематическое изменение в содержании
<html> Определяет корень документа HTML
<i> Определяет часть текста альтернативным голосом или настроением
<iframe> Определяет встроенный фрейм
<img> Определяет изображения
<input> Определяет входной контроль
<ins> Определяет текст, вставленный в документ
<kbd> Определяет ввод с клавиатуры
<label> Определяет лэйбл для элемента <input>
<legend> Определяет подпись к фотографии для элемента <fieldset>
<li> Определяет элемент списка
<link> Определяет связь между документом и внешним ресурсом (чаще всего используется для ссылки на таблицы стилей)
<main> Задает основное содержимое документа
<map> Определяет изображение-карту на стороне клиента
<mark> Определяет отмеченный/выделенный текст
<menu> Определяет список/меню команд
<menuitem> Определяет команду/меню, которое пользователь может вызвать из всплывающего меню
<meta> Определяет метаданные о документе HTML
<meter> Определение скалярного измерения в известном диапазоне (измеритель)
<nav> Определяет ссылки навигации
<noframes> Не поддерживается в HTML5.
Определяет альтернативное содержимое для пользователей, которые не поддерживают фреймы
<noscript> Определяет альтернативное содержимое для пользователей, которые не поддерживают сценарии на стороне клиента
<object> Определяет внедренный объект
<ol> Определяет упорядоченный список
<optgroup> Определяет группу связанных параметров в раскрывающемся списке
<option> Определяет параметр в раскрывающемся списке
<output> Определяет результат расчета
<p> Определяет параграф
<param> Определяет параметр для объекта
<picture> Определяет контейнер для нескольких ресурсов образа
<pre> Определяет форматированный текст
<progress> Представляет ход выполнения задачи
<q> Определяет короткую цитату
<rp> Определяет, что показывать в браузерах, не поддерживающих аннотации ruby
<rt> Определение объяснения/произношения символов (для Восточно-азиатской типографии)
<ruby> Определение аннотации ruby (для Восточно-азиатской типографии)
<s> Определяет текст, который уже не исправить
<samp> Определяет пример вывода из компьютерной программы
<script> Определяет сценарий на стороне клиента
<section> Определяет раздел в документе
<select> Определяет раскрывающийся список
<small> Определяет маленький текст
<source> Определяет несколько ресурсов мультимедиа для элементов мультимедиа (<video> и <audio>)
<span> Определение раздела в документе
<strike> Не поддерживается в HTML5. Используйте <del> или <s>.
Определяет зачеркнутый текст
<strong> Определяет важный текст
<style> Определяет сведения о стиле для документа
<sub> Определяет подстрочный текст
<summary> Определяет видимый Заголовок для элемента <details>
<sup> Определяет надстрочный текст
<svg> Определяет контейнер для графики SVG
<table> Определяет таблицу
<tbody> Группирует содержимое тела в таблице
<td> Определяет ячейку в таблице
<template> Определение шаблона
<textarea> Определяет многострочный элемент управления вводом text area (область текста)
<tfoot> Группирует содержимое нижнего колонтитула в таблице
<th> Определяет ячейку заголовка в таблице
<thead> Группирует содержимое заголовка в таблице
<time> Определяет дату/время
<title> Определяет заголовок документа
<tr> Определяет строку в таблице
<track> Определяет текстовые дорожки для элементов мультимедиа (<video>и <audio>)
<tt> Не поддерживается в HTML5. Используйте в CSS.
Определяет текст типа teletype (телетайпа)
<u> Определяет текст, который должен стилистически отличаться от обычного текста
<ul> Определяет неупорядоченный список
<var> Определяет переменную
<video> Определение видео или фильм
<wbr> Определяет возможный разрыв линии

Краткий справочник по тегам HTML

Кратко о документе

<html> … </html>

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

<head> … </head>

Содержит специфическую информацию о странице, включая кодировку, мета-информацию, подключение скриптов и подключение стилей.

<title> … </title>

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

<body> … </body>

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

Пример

<html> <head> <title>Пример</title> </head> <body> </body> </html>

<html>

<head>

<title>Пример</title>

</head>

<body>

</body>

</html>

Информация о документе

<base>

Базовый URL, используется для создания относительных ссылок на сайте. Не обязательный тег.

<meta>

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

<link>

Тег используется для подключения внешних страниц, например таблиц стилей

<style> … </style>

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

<script> … </script>

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

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> </body> </html>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

</body>

</html>

Структура документа

<h2>…</h2>
<h3>…</h3>
<h4>…</h4>
<h6>…</h6>

Шесть уровней заголовков для создания структурных блоков. Самый важный — h2. Элементы содержат описания блоков текста, разделов, страниц. Аналогия — заголовки в книгах

<div></div>

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

<span> … </span>

Используется для выделения элементов внутри строки, с последующих их оформлением с помощью CSS.

<p> … </p>

Служит для создания параграфов в тексте.

<br>

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

<hr>

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

Примеры

<h3>Заголовок</h3> <p>Это пример простого <span>параграфа текста</span>. В нем используется выделение отдельных слов.</p> <hr> <h4>Еще немного заголовков</h4> <p>Обязательно используйте параграфы для раздения <span>логических</span> блоков текста.</p>

<h3>Заголовок</h3>

<p>Это пример простого <span>параграфа текста</span>. В нем используется выделение отдельных слов.</p>

<hr>

<h4>Еще немного заголовков</h4>

<p>Обязательно используйте параграфы для раздения <span>логических</span> блоков текста.</p>

Заголовок

Это пример простого параграфа текста. В нем используется выделение отдельных слов.


Еще немного заголовков

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

Текст (и форматирование)

<strong> … </strong>

Выделение важных, ключевых слов в тексте. Слов, на которые делается логическое ударение. Браузеры выделяют данный тег жирным начертанием. Не используйте strong для простого, визуального выделения. В HTML5 тег strong используется в семантическом контексте.

<b> … </b>

Визуальное выделение жирным шрифтов. Служит для оформления. Не несет смысловой нагрузки.

<em> … </em>

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

<i> … </i>

Выделение курсивом. Не несет смысловой нагрузки. Служит для оформления текста.

<cite> … </cite>

Цитата, цитируемая информация.

<pre> … </pre>

Преформатированный текст. Моноширинный текст. Форматирование выводится так, как задал пользователь внутри блока окруженного тегами pre, в частности отступы, пробелы — сохраняются.

<blockquote> … </blockquote>

Чаще всего цитаты из текста, текст, выделенный для цитирования.

<q> … </q>

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

<abbr title="полное название" > … </abbr>

Выделение аббревиатур. При наведении мыши всплывает полное написание аббревиатуры.

<address> … </address>

Тег использовался для обертки адреса. Сейчас, ипользуется для указания адреса в сети Интернет (URL) материала, ссылки, цитаты. Для форматирования почтового адреса используйте микроформаты и микроданные.

<dfn> … </dfn>

Используется для обозначения определений.

<code> … </code>

Используется для выделения текста моноширинным шрифтом. Часто используется для форматирования кода языков программирования.

<sup> … </sup>

Выделение верхнего индекса. Например для создания обозначения m2.

<sub> … </sub>

Создание нижнего индекса.

<small> … </small>

Изначально использовался для создания текста, с размерами меньше основного. Сейчас — для выведения информации менее важной, чем основной текст. Пример — оформление сносок в документе.

Примеры

<p><strong>Бульба</strong> был <em>упрям страшно</em>. Это был один из <i>тех характеров</i>, которые могли возникнуть только в <b>тяжелый ХV век</b> на полукочующем углу Европы, когда вся южная первобытная Россия, оставленная своими князьями, была опустошена, выжжена дотла неукротимыми набегами монгольских хищников.</p> <blockquote>Когда, лишившись дома и кровли, стал здесь отважен человек; когда на пожарищах, в виду грозных соседей и вечной опасности, селился он и привыкал глядеть им прямо в очи, разучившись знать, существует ли какая боязнь на свете.</blockquote>

<p><strong>Бульба</strong> был <em>упрям страшно</em>. Это был один из <i>тех характеров</i>, которые могли возникнуть только в <b>тяжелый ХV век</b> на полукочующем углу Европы, когда вся южная первобытная Россия, оставленная своими князьями, была опустошена, выжжена дотла неукротимыми набегами монгольских хищников.</p>

<blockquote>Когда, лишившись дома и кровли, стал здесь отважен человек; когда на пожарищах, в виду грозных соседей и вечной опасности, селился он и привыкал глядеть им прямо в очи, разучившись знать, существует ли какая боязнь на свете.</blockquote>

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

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

HTML5 Учебник



Бесплатный учебник HTML - самостоятельное обучение.

Выучить HTML - создать свой собственный веб сайт.

Онлайн обучение HTML - все теги HTML.


HTML Примеры

HTML учебник, содержит много примеров HTML в каждой главе.

С помощью онлайн редактора кода, можно редактировать код HTML, при нажатии на кнопку, можно увидеть результат.

Пример




Название Страницы

<h2>Это Заголовок</h2>
<p>Это Параграф.</p>

</body>
</html>

Редактор кода »

Нажмите на кнопку "Редактор кода", чтобы посмотреть, как это работает.

Начать изучать HTML сейчас!


Примеры кода HTML

В HTML учебнике, более 200 примеров.

С помощью редактора, можно редактировать и тестировать каждый пример.

Перейти к примерам HTML кода!


HTML Упражнения

Проверте себя с помощью упражнений

Упражнение:

Добавить "всплывающую подсказку" к нижеприведенному параграфу с текстом "О SchoolsW3".

<p ="О SchoolsW3"> О SchoolsW3 сайт веб-разработчика.</p>


Отправить ответ »

Начните упражнения

HTML Викторина

Старт HTML Викторины!


HTML Справочники

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

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


HTML экзамен - получить диплом!

SchoolsW3 Сертификат

SchoolsW3 Сертификат

Идеальное решение для профессионалов, которым необходимо совмещать работу, семью, дом и карьеру.

Более 10 000 сертификатов уже выдано!

Получите Сертификат »

HTML Сертификат - документ знаний HTML.

CSS Сертификат - документ знаний CSS.

JavaScript Сертификат - документ знаний JavaScript и HTML DOM.

jQuery Сертификат - документ знаний jQuery.

PHP Сертификат - документ знаний PHP и SQL (MySQL).

Bootstrap Сертификат - документ знаний Bootstrap.

XML Сертификат - документ знаний XML, XML DOM и XSLT.



HTML элементы. Полный справочник тегов

Тег Описание
<!--...--> Определяет комментарий
<!DOCTYPE>  Определяет тип документа
<a> Определяет гиперссылку
<abbr> Определяет абревиатуру или акроним
<acronym> Не поддерживается в HTML5. Используйте <abbr> вместо этого.
Определяет акроним
<address> Определяет контактную информацию автора / владельца документа
<applet> Не поддерживается в HTML5. Используйте <embed> или <object> вместо этого.
Определяет встроенный аплет
<area> Определяет область внутри карты изображения
<article> Определяет статью
<aside> Определяет содержание, кроме содержания страницы (в стороне)
<audio> Определяет звуковой контент
<b> Определяет жирный текст
<base> Указывает базовый URL-адрес / цель для всех относительных URL-адресов документа
<basefont> Не поддерживается в HTML5. Используйте CSS вместо этого.
Отпределяет цвет, размер и шрифт по умолчанию для всего текста документа
<bdi> Изолирует часть текста, который может быть отформатирован в другом направлении от иного текста за его пределами
<bdo> Переопределяет текущее направление текста
<big> Не поддерживается в HTML5. Используйте CSS вместо этого.
Определяет увеличенный текст
<blockquote> Определяет раздел, который цитируется с другого источника
<body> Определяет тело документа
<br> Определяет разрыв строки
<button> Определяет кнопку, которую можно нажимать
<canvas> Используется для рисования на лету, с помощью сценариев (обычно на JavaScript)
<caption> Определяет подпись к таблице
<center> Не поддерживается в HTML5. Используйте CSS вместо этого.
Определяет центрирование текста
<cite> Определяет название произведения при цитировании из него
<code> Определяет фрагмент компьютерного кода
<col> Указывает свойства столбцов для каждого столбца в элементе <colgroup>
<colgroup> Определяет группу с одного или нескольких столбцов в таблице для форматирования
<data> Связывает заданный контент с машиночитаемым переводом
<datalist> Определяет список предварительно определённых параметров управления вводом
<dd> Определяет описание / значение термина в списке описания
<del> Определяет удалённый с документа текст
<details> Определяет дополнительные детали, которые пользователь может просматривать или прятать
<dfn> Задаёт термин, для которого будет дано определение (definition)
<dialog> Определяет диалоговый бокс или окно
<dir> Не поддерживается в HTML5. Используйте <ul> вместо этого.
Определяет список каталогов
<div> Определяет раздел (блочный) в документе
<dl> Определяет список описаний
<dt> Определяет термин / имя в списке описания
<em> Определяет семантически подчёркнутый текст (empharized)
<embed> Определяет контейнер для внешнего (не HTML) приложения
<fieldset> Группы связанных элементов в форме
<figcaption> Определяет заголовок для элемента <figure>
<figure> Определяет автономное содержание
<font> Не поддерживается в HTML5. Используйте CSS вместо этого.
Определяет шрифт, цвет и размер текста
<footer> Определяет нижний колонтитул (футер) для документа или раздела
<form> Определяет HTML форму для ввода пользователем
<frame> Не поддерживается в HTML5.
Определяет окно (фрейм) в наборе фреймов
<frameset> Не поддерживается в HTML5.
Определяет набор фреймов
<h2> to <h6> Определяет HTML заголовки
<head> Определяет информацию о документе
<header> Определяет заголовок для документа или раздела
<hr> Определяет тематическую смену контента
<html> Определяет корень HTML-документа
<i> Определяет часть текста альтернативным голосом или настроением
<iframe> Определяет встроенный фрейм
<img> Определяет изображение
<input> Определяет элемент управления вводом
<ins> Определяет текст, который был вставлен в документ
<kbd> Определяет ввод с клавиатуры
<label> Определяет метку для элемента <input>
<legend> Определяет заголовок для элемента <fieldset>
<li> Определяет элемент списка
<link> Определяет взаимосвязь между документом и внешним ресурсом (обычно используется для ссылки на внешние таблицы стилей)
<main> Определяет основное содержание документа
<map> Определяет карту изображения на стороне клиента
<mark> Определяет помеченный (маркированный) / выделенный текст
<meta> Определяет метаданные HTML документа
<meter> Определяет скалярное измерение в пределах известного диапазона (датчик)
<nav> Определяет навигационные ссылки (навигация по сайту)
<noframes> Не поддерживается в HTML5.
Определяет альтернативное содержание для пользователей, которые не поддерживают фреймы
<noscript> Определяет альтернативное содержание для пользователей, которые не поддерживают скрипты на стороне клиента
<object> Определяет встроенный объект
<ol> Определяет упорядоченный (нумерованный) список
<optgroup> Определяет группу соответствующих параметров в выпадающем списке (выпадающем меню)
<option> Определяет параметр в выпадающем списке
<output> Определяет результат расчёт (калькуляции)
<p> Определяет параграф (абзац)
<param> Определяет параметр для объекта
<picture> Определяет контейнер для нескольких ресурсов изображения
<pre> Определяет предварительно отформатированный текст
<progress> Представляет ход выполнения задания
<q> Определяет короткую цитату
<rp> Определяет, что показывать в браузерах, которые не поддерживают ruby аннотации
<rt> Определяет пояснения / произношение символов (для восточноазиатской типографики)
<ruby> Определяет аннотацию ruby (для восточноазиатской типографики)
<s> Определяет текст, который больше не является правильным
<samp> Определяет исходные данные с компьютерной программы
<script> Определяет скрипт на стороне клиента
<section> Определяет раздел (секцию) в документе
<select> Определяет выпадающий список
<small> Определяет меньший текст
<source> Определяет несколько медиа-ресурсов для медиа-элементов (<video> и <audio>)
<span> Определяет раздел (строчный) в документе
<strike> Не поддерживается в HTML5. Используйте <del> или <s> вместо этого.
Определяет перечеркнутый текст
<strong> Определяет семантически важный текст
<style> Определяет информацию о стиле в документе
<sub> Определяет подстрчный текст (нижний индекс)
<summary> Определяет видимый заголовок для элемента <details>
<sup> Определяет надстрочный текст (верхний индекс)
<svg> Определяет контейнер для графики SVG
<table> Определяет таблицу
<tbody> Группирует содержание тела в таблице
<td> Определяет клетку (ячейку) в таблице
<template> Определяет шаблон
<textarea> Определяет многострочный элемент управления вводом (текстовая область)
<tfoot> Группирует содержание нижнего колонтитула в таблице
<th> Определяет ячейку заголовка в таблице
<thead> Группирует содержание заголовка в таблице
<time> Определяет дату / время
<title> Определяет заголовок документа
<tr> Определяет строку в таблице
<track> Определяет текстовые дорожки для медиа-элементов (<video> и <audio>)
<tt> Не поддерживается в HTML5. Используйте CSS вместо этого.
Определяет текст телетайпа
<u> Определяет текст, который должен быть стилистически отличным от обычного текста
<ul> Определяет неупорядоченный (ненумерованный) список
<var> Определяет переменную
<video> Определяет видео или фильм
<wbr> Определяет возможный разрыв строки

Самоучитель, справочник html, css, javascript и php

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

Но как это работает, что нужно сделать, чтобы построить свой собственный сайт?

Если вас интересуют именно эти вопросы - вы зашли по адресу. Сайт www.puzzleweb.ru – это универсальный самоучитель и справочник по HTML 5, CSS, JavaScript и PHP, на страницах которого вы сможете не только узнать, как работают интернет сайты, но и научитесь создавать их самостоятельно.

Как пользоваться сайтом?

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

html

HTML

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


css

CSS

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


javascript

JavaScript

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


php

PHP

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


Для кого создан сайт www.puzzleweb.ru?

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

Учебник HTML 5. Статья "Введение"

Язык гипертекстовой разметки HTML (англ. HyperText Markup Language) - является языком разметки документов во Всемирной паутине.

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

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

Цель любого веб-браузера прочитать HTML документ и правильно его отобразить. Браузер не отображает HTML теги, но использует их, чтобы определить, как отображать конкретный документ.

Теги бывают двух видов: парные и одиночные (пустые). У парных HTML-тегов первый тег в паре является начальным (открывающим) тегом, а второй тег является конечным (закрывающим) тегом. Основная функция начального тега заключается в том, чтобы сообщить браузеру где команда начинается, а конечным тегом определить где она заканчивается.

Давайте рассмотрим чем отличаются парные теги от одиночных.

Вид (синтаксис) парного тега:

<тег>Содержание тега</тег>

Обратите внимание, что все теги заключены в угловые скобки < и >, а закрывающий тег всегда должен содержать прямой слеш перед названием тега - </тег>, этим мы сообщаем браузеру, что на этом месте наша "команда" закончена.


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


Вид (синтаксис) одиночного тега:

<тег>Содержание

В современном стандарте HTML 5 одиночные теги записываются как и начальные теги у парных тегов (наименование тега помещено в угловые скобки < и >).

Обращаю Ваше внимание, что до выхода современного стандарта одиночные теги требовали наличие прямого слеша перед наименованием тега (записывались по аналогии с закрывающими тегами). Использование прямого слеша в одиночных тегах не будет считаться ошибкой, но в этом и нет необходимости - короче код, быстрей загрузка.

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


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


Пример простого HTML документа:

И так, мы с Вами поняли, что HTML — это краеугольный камень, благодаря которому любой браузер пользователя отобразит страницу. Но как выглядит HTML? Давайте рассмотрим простой код, из которого состоит практически любая информационная страница:

<!DOCTYPE html>
<html>
	<head>
		<title>Название для документа (страницы)<title>
	</head>
	<body>
		<h3>Это заголовок</h3>
		<p>Это параграф (абзац).</p>
	</body>
</html>

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

А теперь детально разберем из чего состоит любая HTML страница:

DOCTYPE это декларация, которая определяет тип документа. Декларация не является тегом HTML это только инструкция для веб-браузера о том, какая версия HTML используется в документе. Декларация !DOCTYPE помогает браузеру отобразить веб-страницу правильно, для этого браузер должен знать, как тип, так и версию документа.

Декларация <!DOCTYPE html> сообщает, что в этом документе используется пятая версия языка гипертекстовой разметки - HTML 5.

Обращаю Ваше внимание на то, что декларация должна указываться самой первой в вашем HTML документе, перед тегом <html>. Декларация <!DOCTYPE> не чувствительна к регистру, но записывать её принято в верхнем регистре.

Хронология версий HTML:

Версия HTML HTML 2.0 HTML 3.2 HTML 4.01 XHTML HTML 5
Год 1991 1995 1997 1999 2000 2014

Текст между тегами <html> и </html> сообщает браузеру, что необходимо прочитать документ как программный код, написанный на языке гипертекстовой разметки. Является корневым элементом HTML документа и все остальные элементы должны быть его потомками (вложены в него).

Текст между <head> и </head> содержит информацию о документе (сведения о документе, которые не отображаются пользователю). Внутри этого элемента обязательно должен быть вложен HTML тег <title>.

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

Текст между <body> и </body> описывает видимое содержимое страницы!

Текст между <h3> и </h3> (англ. heading level 2) описывает заголовок второго уровня. Поисковые системы используют ваши заголовки для индексации структуры и содержания веб-страниц. Поэтому важно использовать заголовки, чтобы показать структуру документа. Как правильно использовать заголовки от первого до шестого уровня на ваших страницах мы рассмотрим далее в учебнике в статье "Базовый HTML".

Текст между <p> и </p> (англ. HTML Paragraph Element) определяет параграф (абзац). Содержание элемента всегда начинается с новой строки.

Ниже показано как отображается вышерассмотренный пример в браузере:

Рис. 1 Пример отображения HTML документа браузером.

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


Вопросы и задачи по теме

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

  • Какая основная задача языка гипертекстовой разметки?
  • Какая версия языка HTML сейчас используется?
  • Что такое декларация? Какая декларация используется в современном стандарте?
  • В какой HTML элемент помещается видимое содержимое документа (страницы)?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *