Простой код html: Структура HTML-кода

Содержание

Структура HTML-кода | htmlbook.ru

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

Пример 4.1. Исходный код веб-страницы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Пример веб-страницы</title>
 </head>
 <body>
  <h2>Заголовок</h2>
  <!-- Комментарий -->
  <p>Первый абзац.</p>
  <p>Второй абзац.</p>
 </body>
</html>

Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под именем example41.html. После этого запустите браузер и откройте файл через пункт меню Файл > Открыть файл (Ctrl+O).

В диалоговом окне выбора документа укажите файл example41.html. В браузере откроется веб-страница, показанная на рис. 4.1.

Рис. 4.1. Результат выполнения примера

Далее разберем отдельные строки нашего кода.

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

Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.

Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии HTML, на которую ориентированы. В табл. 4.1. приведены основные типы документов с их описанием.

Табл. 4.1. Допустимые DTD
DOCTYPE	Описание
HTML 4.01
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>	Строгий синтаксис HTML.
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>	Переходный синтаксис HTML.
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN» «http://www.w3.org/TR/html4/frameset.dtd»>	В HTML-документе применяются фреймы.
HTML 5
<!DOCTYPE html>	В этой версии HTML только один доктайп.
XHTML 1.0
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1. 0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>	Строгий синтаксис XHTML.
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>	Переходный синтаксис XHTML.
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Frameset//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd»>	Документ написан на XHTML и содержит фреймы.
XHTML 1.1
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.1//EN» «http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd»>	Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Как видите, никакого деления на виды это определение не имеет, поскольку синтаксис один и подчиняется четким правилам.

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

Например, в строгом HTML и XHTML непременно требуется наличие тега <title>, а в переходном HTML его можно опустить и не указывать. При этом помним, что браузер в любом случае покажет документ, независимо от того, соответствует он синтаксису или нет. Подобная проверка осуществляется при помощи валидатора и предназначена в первую очередь для разработчиков, чтобы отслеживать ошибки в документе.

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

Часто можно встретить код HTML вообще без использования <!DOCTYPE>, веб-страница в подобном случае все равно будет показана. Тем не менее, может получиться, что один и тот же документ отображается в браузере по-разному при использовании <!DOCTYPE> и без него. Кроме того, браузеры могут по-своему показывать такие документы, в итоге страница «рассыплется», т.е. будет отображаться совсем не так, как это требуется разработчику. Чтобы не произошло подобных ситуаций, всегда добавляйте <!DOCTYPE> в начало документа.

 <html>

Тег <html> определяет начало HTML-файла, внутри него хранится заголовок (<head>) и тело документа (<body>).

 <head>

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

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

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

Чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.

 <title>Пример веб-страницы</title>

Тег <title> определяет заголовок веб-страницы, это один из важных элементов предназначенный для решения множества задач. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера (рис. 4.2).

Рис. 4.2. Вид заголовка в браузере

Тег <title> является обязательным и должен непременно присутствовать в коде документа.

</head>

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

<body>

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

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

HTML предлагает шесть текстовых заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег <h2> представляет собой наиболее важный заголовок первого уровня, а тег <h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h2>…<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.

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

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

Комментарии нужны для внесения в код своих записей, не влияющих на вид страницы. Начинаются они тегом <!— и заканчиваются тегом —>. Все, что находится между этими тегами, отображаться на веб-странице не будет.

 <p>Первый абзац.</p>

Тег <p> определяет абзац (параграф) текста. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.

 <p>Второй абзац.</p>

Тег <p> является блочным элементом, поэтому текст всегда начинается с новой строки, абзацы идущие друг за другом разделяются между собой отбивкой (так называется пустое пространство между ними). Это хорошо видно на рис. 4.1.

</body>

Следует добавить закрывающий тег </body>, чтобы показать, что тело документа завершено.

</html>

Последним элементом в коде всегда идет закрывающий тег </html>.

Страница с html-текстом

Главная / Редактирование сайта / Хочу создать страницу / Дополнительные виды страниц / Страница с html-текстом

Модуль доступен в базовом пакете:

Cайт «Визитка» Минимальный	Сайт «Визитка» Стандартный	Сайт «Бизнес» Шаблонный дизайн Готовые решения	Сайт «Бизнес» Дизайн на выбор из каталога	Сайт «Бизнес» Индивидуальный дизайн


«Интернет магазин 1. 0″ Дизайн на выбор из каталога	«Интернет магазин 1.0» Индивидуальный дизайн	«Интернет магазин 2.0» Готовые каталоги товаров	«Интернет магазин 2.0« Готовые интернет-магазины	«Интернет магазин 2.0» Индивидуальный интернет-магазин

Для «продвинутых» пользователей имеется возможность работы с текстами в HTML коде. Основное отличие между модулями «страница html» и «страница с html-текстом« состоит в том, что «страница с html-текстом» сохраняет общий дизайн страницы.

Например, если вы вставите код в обычную «Страницу html» и перейдете к просмотру на сайте — это будет отдельная страница, без общего дизайна магазина, и выглядеть она будет, например, вот так:

Если же вы вставите код в редактор «Страницы с html-текстом» и перейдете к ее просмотру на сайте, то увидите, что страница будет вписана в общий дизайн.

Видеоинструкция

Шаг 2

Введите название в поле «Название страницы».
Введите адрес страницы в поле «Адрес страницы». Если вы не введете свой вариант адреса страницы, то система сгенерирует адрес самостоятельно, исходя из названия страницы.
И нажмите «Создать страницу».

Обратите внимание!

Вы также можете задать параметры доступа и отображения, SEO-параметры для данной страницы и пр. С более подробной информацией по созданию и настройкам страницы вы можете ознакомиться в соответствующей инструкции.
О том, как формируются адреса и ЧПУ, вы можете прочитать по ссылке.

Шаг 3

В открывшемся окне на вкладке «Содержимое» нажмите на кнопку редактирования наполнения страницы.

Шаг 4

Для страниц с html-текстом вы можете указать следующие параметры:

Название — указывается название страницы.
Текст — вписывается код HTML.

Обратите внимание!

Для страниц данного вида необходимо указывать именно код HTML, а не простой текст, содержащий HTML-теги. Ниже вы можете ознакомиться с наглядным примером подобного кода.
Также для удобства работы с текстами-HTML в разделе «Данные сайта» предлагается сразу разбивать эти тексты по категориям — в данном окне вы можете указать категорию, созданный вами текст будет храниться именно в этой категории раздела «Данных сайта» — «Html-тексты».

Пример размещения HTML кода:

<div>Меню:</div> <ul> <li><a href=»/menu» mce_href=»/menu»>Обычное меню</a></li> <li><a href=»/menu2″ mce_href=»/menu2″>Меню с «веткой»</a></li> <li><a href=»/menu3″ mce_href=»/menu3″>Выпадающее</a></li> <li><a href=»/menu4″ mce_href=»/menu4″>Раскрывающееся меню</a></li> <li><a href=»/menu5″ mce_href=»/menu5″>Сложное разноуровневое</a></li> <li><a href=»/menu6″ mce_href=»/menu6″>Категории магазина в меню</a></li> </ul> <table cellspacing=»0″ cellpadding=»0″ mce_style=»border-collapse: collapse; border: 1px solid #333″> <tr> <th>#</th> <th>Название продукции</th> <th>Цена за 1 единицу товара</th> </tr> <tr> <td align=»center»>#1</td> <td align=»center»> </td> <td align=»center»> </td> </tr> </table>

Шаг 5

После размещения кода нажмите «Сохранить изменения».

Была ли статья вам полезна?

Да

Нет

Укажите, пожалуйста, почему?

Рекомендации не помогли
Нет ответа на мой вопрос
Содержание статьи не соответствует заголовку
Другая причина

Комментарий

Создание веб-сервера с помощью Node.js для обслуживания простого HTML | Эми Ли

Mastodon

Узнайте, как работает веб-сервер, создав его с нуля.

Node.js — это среда веб-сервера с открытым исходным кодом
. Она может запускать JavaScript вне браузера.

В этом посте давайте напишем веб-сервер, используя Node.js для обслуживания простых файлов HTML.

Требование: установите Node.js

Рекомендуется версия LTS.

Шаг 1: Создайте index.html для обслуживания

Шаг 2: напишите код сервера, используя модуль http

Шаг 3: запустите сервер

 $ node server.js

Затем ваш index.html страница будет доступна по URL-адресу: http://localhost:8080

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

И вот результаты:

Автор Эми Ли

876 Последователи

Разработчик программного обеспечения | Кандидат наук. в медицине. Я пишу о программировании, продуктивности, личном развитии и предпринимательстве. https://www.youtube.com/@amyjuanli

Еще от Эми Ли и Level Up Coding

Эми Ли

Пошаговое руководство по настройке LSP в Neovim для кодирования в Next.

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

Вот как ее создать.

Джейкоб Беннетт

Используйте Git как старший инженер это.

Эми Ли

Правильное использование основной части YAML в Obsidian

Добавление/использование тегов и псевдонимов в YAML.

Просмотреть все от Эми Ли

Внедрение промежуточного ПО в Node.js: сравнительное исследование Express.js и Koa.js

Изучение промежуточного программного обеспечения в Node.js с помощью этого руководства по реализациям Express.js и Koa.js, а также практического примера фармацевтического микросервиса…

Мелих Юмак

JavaScript на простом английском языке

Дорожная карта разработчика Nodejs 2023

Изучите дорожную карту разработчика Nodejs на 2023 год.

Кодирование и разработка

11 историй·56 сохранений

Общие знания в области кодирования

20 историй·92 сохранения

Истории, которые помогут вам расти как разработчику программного обеспечения

19 историй·187 сохранений

Технология и инструменты

15 историй·9 сохранений

Томас Смит

Генератор

Новая визуальная функция Google Bard меняет правила игры

Чат-боты могут официально увидеть мир

Лав Шарма

ByteByteGo System Design Alliance

Чертеж системного дизайна: Полное руководство

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

inVerita

Dev Genius

Django vs Laravel: что выбрать в 2023 году

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

Натиг Бабаев

Quick Code

5 библиотек Python для облегчения разработки бэкенда

В этой статье мы рассмотрим 5 библиотек Python, которые вы можете начать использовать для своих серверных проектов.

См. дополнительные рекомендации

Статус

Писатели

Карьера

Конфиденциальность

Преобразование текста в речь

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

Годовой Месячный

- «> 1 пользователь
- 10+ бесплатных модулей
- редактировать контент без кодирования
- сохранить и загрузить свои проекты
- кредитная карта не нужна
- «> все бесплатно +
- интеграция с почтовым чипом
- интеграция узловых точек
- предварительный просмотр прямой электронной почты
- 20 экспортов в месяц
- выставляется ежегодно

Штирлиц — Сеть печатных салонов в Перми

Простой код html: Структура HTML-кода | htmlbook.ru