- HTML Главная
- Простое обучение с помощью HTML «Попробуйте сами»
- Пример
- Это заголовок
- HTML Примеры
- HTML Упражнения
- HTML Тест-викторина
- HTML Справочник
- Сообщить об ошибке
- Ваше предложение:
- Спасибо Вам за то, что помогаете!
- HTML начало
- Создание HTML документов
- Базовый документ HTML
- Пример HTML:
- HTML теги
- Структура HTML-страницы
- Расшифровка и перевод тегов
- Как это работает?
- Элемент DOCTYPE
- Заголовок страницы в браузере
HTML Главная
HTML — это стандартный язык разметки для веб-страниц.
С помощью HTML вы можете создать свой собственный веб-сайт.
HTML прост в освоении — Вам понравится!
Простое обучение с помощью HTML «Попробуйте сами»
С помощью редактора «Попробуйте сами» вы можете отредактировать HTML-код и просмотреть результат:
Пример
Это заголовок
Это параграф.
Нажмите на кнопку «Попробуйте сами», чтобы увидеть, как это работает.
HTML Примеры
В этом руководстве по HTML вы найдете более 200 примеров. С помощью нашего онлайн -редактора «Попробуйте сами» вы можете редактировать и тестировать каждый пример самостоятельно!
HTML Упражнения
Это руководство по HTML также содержит почти 100 упражнений по HTML.
HTML Тест-викторина
Проверьте свои навыки работы с HTML с помощью нашей HTML-викторины!
HTML Справочник
В SchoolsW3 вы найдете все ссылки на HTML-элементы, атрибуты, события, названия цветов, сущности, наборы символов, кодировку URL, языковые коды, HTTP-сообщения, поддержку браузера и многое другое:
Мы только что запустили
SchoolsW3 видео
Сообщить об ошибке
Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:
Ваше предложение:
Спасибо Вам за то, что помогаете!
Ваше сообщение было отправлено в SchoolsW3.
ТОП Учебники
ТОП Справочники
ТОП Примеры
SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.
HTML начало
Как следует из предыдущей главы, HTML является языком разметки задача которого — просто «размечать» текстовый документ используя теги, которые, в свою очередь, говорят веб — браузеру, как именно нужно отобразить данный документ.
Создание HTML документов
Для того, чтобы создать HTML документ необходимо:
- Открыть любой текстовый редактор (например блокнот, Notepad++ и т.д.);
- Набрать произвольный текст и разметить его HTML тегами;
- Cохранить файл с расширением .htm или .html.
Базовый документ HTML
Ниже приведен в своей простейшей форме пример HTML-документа:
Пример HTML:
Это заголовок
Это параграф.
Теперь вы можете воспользоваться кнопкой Попробуй сам, которая расположена в правом верхнем углу окна кода, для того, чтобы проверить результат этого HTML — кода, или сохраните код в HTML — файл test.html с помощью любого текстового редактора. И, наконец, откройте его с помощью веб — браузера, например Internet Explorer, Google Chrome или Firefox и т.д. Браузер должен показать следующий результат:
HTML теги
Как говорилось ранее, HTML это язык разметки, который использует различные теги для форматирования содержимого документа. Эти теги заключены в угловые скобки . За исключением нескольких тегов, большинство тегов имеют соответствующие им закрывающие теги. Например имеет свой закрывающий тег , а тег в свою очередь, имеет свой закрывающий тег тег и т.д.
| Всегда закрывайте теги, так как отсуствие закрывающего тега может приводить к непредсказуемым ошибкам при отображении документа. |
Рассмотренный пример HTML-документа использует следующие теги:
| Название тега | Описание |
|---|---|
| Это инструкция для веб-браузера о том, на какой версии HTML написана страница. | |
| Этот тег является корневым элементом HTML страницы и заключает в себе весь HTML — документ | |
| Этот тег содержит мета-информацию о документе и может содержать другие теги, такие как , и т.д. | |
| Этот тег определяет заголовок веб-страницы, в браузере вы его видите вверху на текущей вкладке. | |
| Этот тег предназначен для предоставления структурированных метаданных о веб-странице. В нашем примере определяет кодировку документа. | |
| Элемент содержит видимое содержимое страницы, который включает в себя другие HTML-теги, например , , и т.д. | |
| Этот тег представляет собой заголовок. | |
| Этот тег представляет собой абзац. |
Теги могут быть написаны как в верхнем регистре так и в нижнем, но World Wide Web Consortium (W3C) — глобальный консорциум, который занимается поддержкой HTML-стандарта, рекомендует использовать нижний регистр (а в XHTML это требование является обязательным).
Структура HTML-страницы
Ниже приведена визуализация структуры HTML-страницы:
- Предок. Предком называют элемент который содержит в себе другие. То есть, исходя из рисунка можно сказать что это предок для всех тегов, а является предком для , и . Аналогично это предок по отношению к и
.
- Потомок. Потомком называют элемент вложенный в другой. То есть — потомок , а потомок .
- Родительский элемент. Родительским элементом называют тег который связан с другими тегами более низкого уровня, и находится на дереве выше их. является родителем только для тегов и .
- Дочерний элемент. Дочерним называют тег который который вложен в тег более высокого уровня, то есть противоположность родительскому элементу. На рисунке тег является дочерним элементом тега .
- Сестринский элемент. Сестринским элементом называют тег имеющий один и тот же родительский тег. То есть, теги и на рисунке — сестринские элементы, так же как и теги с
.
Тут все довольно просто. Это нужно запомнить и знать. Теперь вы знаете основы HTML.
Расшифровка и перевод тегов
Когда я начинал изучать HTML, я задавался вопросом: как запомнить теги? Самым простым вариантом для меня стал перевод тегов. То есть, каждый HTML-тег это означает что-то на английском языке или это сокращение какого-то английского слова. Давайте разберемся с тегами которые уже нам известны.
| Тег | Значение | Перевод |
| Hyper Text Markup Language | Язык гипертекстовой разметки | |
| Head | Голова (документа) | |
| Body | Тело (документа) | |
| Title | Название, заголовок | |
| Heading 1…6 | Заголовок с 1 по 6 уровень | |
| Paragraph | Параграф | |
| Link | Ссылка | |
| Style | Стиль |
Как это работает?
Теперь у вас есть общее понимание о том, что такое HTML. Возникает вопрос, а как это вообще работает?
Работает это так. Мы пишем HTML-код и сохраняем его с расширением HTML. Наша операционная система (Windows или Linux) понимает что файл с таким расширением нужно открывать при помощи браузера.
Браузер открывает файл и читает (интерпретирует) наш код в виде дерева (DOM) в соответствии с определенными правилами.
После того как браузер «прочитал» и интерпретировал наш код он отображает его нам в привычном виде — в виде текста, таблиц, изображений, ссылок, списков и других элементов.
Элемент DOCTYPE
В конце об элементе DOCTYPE. Почему в конце, а не в начале? В самоучителе для начинающих я не придаю этому тегу особое значение, не не могу не упомянуть о нем.
DOCTYPE задает тип документа. Обычно это html. Указывать тип документа нужно в самом его начале.
Заголовок страницы в браузере
Любой тест, обычно это Hello World!
При помощи этого тега мы даем понять браузеру что мы используем именно HTML код. Возникает вопрос, а что, в HTML-документе может быть другой код? Вообще да, документ может быть XML, но пока об этом думать рано. Нужно знать следующее.
Тип документа зависит от того, какие теги в нем используются и есть три типа синтаксиса. Если вы используете все новые теги, то есть теги HTML5 (на момент написания статьи) то достаточно указать .
Для строгого типа указываем:
Более старые версии HTML сейчас практически не используются.
На этом все, теперь вы знаете основы HTML.
Обучаю HTML, CSS, PHP. Создаю и продвигаю сайты, скрипты и программы. Занимаюсь информационной безопасностью. Рассмотрю различные виды сотрудничества.