Простой код страницы html: Простейшая HTML-страница — Структура HTML-документа — HTML Academy

alexxlab

HTML5 | Простой документ

134

Веб-программирование — HTML5 — Простой документ HTML5

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

<!DOCTYPE HTML>
<meta charset="utf-8">
<title>Крошечный документ HTML5</title>
<p>Дадим встряску браузеру в стиле HTML5!</p>

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

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

<!DOCTYPE HTML>
<head>
   <meta charset="utf-8">
   <title>Крошечный документ HTML5</title>
</head>
<body>
   <p>Дадим встряску браузеру в стиле HTML5!</p>
</body>

Наконец, весь документ (за исключением строки doctype) можно облачить в традиционный элемент <html>, как показано в следующем листинге:

<!DOCTYPE HTML>
<html>
<head>
   <meta charset="utf-8">
   <title>Крошечный документ HTML5</title>
</head>
<body>
   <p>Дадим встряску браузеру в стиле HTML5!</p>
</body>
</html>

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

Использование элементов <html>, <head> и <body> является просто вопросом стиля. Страница без этих элементов будет работать отличнейшим образом даже на старых браузерах, которые и слыхом не слыхивали ни о каком HTML5. Фактически, браузер автоматически предполагает наличие этих элементов. Поэтому, если посмотреть на модель DOM (набор программных объектов, представляющих страницу) страницы с помощью сценария JavaScript, она будет содержать объекты для элементов <html>, <head> и <body>, даже если разработчик и не использовал их.

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

Описание типа документа HTML5

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

<!DOCTYPE HTML>

Первое, что бросается в глаза в описании типа документа HTML5 — это его поразительная простота. Сравните его, например, с неуклюжим описанием типа документа, который требуется использовать веб-разработчикам при работе со строгим XHTML 1.0:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
      Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

Описание типа документа HTML5 также примечательно тем, что оно не содержит номера официальной версии HTML (5 для HTML5). В нем просто указывается, что страница является HTML-страницей. Это соответствует новой концепции HTML5 как живого языка. Добавленные в HTML новые возможности автоматически доступны для размещения на странице, не требуя для этого изменений в описании типа документа.

Все это порождает непростой вопрос: если HTML5 — живой язык, то зачем тогда для страницы вообще нужно описание типа документа?

Ответ на этот вопрос таков: описание типа документа продолжает использоваться по историческим причинам. При обработке страницы с отсутствующим описанием типа документа большинство браузеров (включая Internet Explorer и Firefox) переходят в режим совместимости (quirks mode). В этом режиме они пытаются отобразить страницу с учетом ошибок в правилах, которые использовались в более ранних версиях. Проблема с этим состоит в том, что режим совместимости одного браузера может отличаться от режима совместимости другого браузера, вследствие чего страницы, разработанные для одного браузера, на другом браузере будут, скорее всего, отображаться с ошибками, такими как неправильный размер шрифта, нарушенная структура оформления и т.п.

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

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

Кодировка символов

Кодировка — это стандарт, указывающий компьютеру, каким образом преобразовывать текст в последовательность байтов при записи текста в файл (а также, как выполнять обратное преобразование при открытии файла). По историческим причинам в мире существует множество разных кодировок. В настоящее время практически на всех веб-сайтах используется компактная и быстрая кодировка UTF-8, поддерживающая все символы других алфавитов, которые вам когда-либо могут потребоваться.

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

HTML5 делает эту задачу легкой. Для этого нужно лишь вставить элемент <meta> в самом начале блока <head> (или, если элемент <head> не используется, сразу же после кода описания типа документа):

<!DOCTYPE HTML>
<head>
   <meta charset="utf-8">
   <title>Крошечный документ HTML5</title>
</head>

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

Язык

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

Чтобы указать язык для какого-либо содержимого, используется атрибут lang в любом элементе разметки с заданием кода требуемого языка. Код для русского языка — ru, а для английского — en. Коды для других языков можно узнать на странице people.w3.org/rishida/utils/subtags.

Вставить в веб-страницу информацию о языке легче всего через элемент <html>:

<html lang="ru">

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

Добавление таблицы стилей

Практически в каждой странице должным образом разработанного профессионального веб-сайта используются таблицы стилей. Для указания требуемой таблицы стилей используется элемент <link> в блоке <head> документа HTML5:

<head>
   <meta charset="utf-8">
   <title>Крошечный документ HTML5</title>
   <link href="style.css" rel="stylesheet">
</head>

Этот способ похож на указание таблиц стилей в традиционных HTML-документах, но немного проще. Так как существует единственный язык каскадных таблиц стилей — CSS, то в добавлении атрибута type=»text/css», который требовался ранее, больше нет надобности.

Добавление JavaScript-кода

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

Код JavaScript вставляется в документ HTML5 по большому счету таким же способом, как и в традиционную HTML-страницу. В следующем листинге приводится пример вставки в веб-документ кода JavaScript по ссылке на внешний файл:

<head>
   <meta charset="utf-8">
   <title>Крошечный документ HTML5</title>
   <script src="script.js"></script>
</head>

Атрибут language=»JavaScript» не является обязательным, т. к. если не указан какой-либо другой язык сценариев (а поскольку JavaScript — единственный широко-поддерживаемый язык сценариев для HTML, то вероятность такого развития ничтожно мала), браузеры автоматически предполагают, что используется JavaScript. Но даже ссылаясь на внешний файл с кодом JavaScript, все равно нужно помнить о закрывающем теге </script>. Если упустить этот тег по недосмотру или при попытке укоротить код, используя синтаксис пустых элементов, то страница не будет работать должным образом.

Если вы уделяете много времени тестированию своих страниц с JavaScript в Internet Explorer, может быть полезным добавление метки MOTW (Mark of the Web — метка особенности сети) в блок <head> сразу же после строки кодировки. Делается это таким образом:

<head>
   <meta charset="utf-8">
   <!-- saved from url=(0014)about:internet -->
   <title>Крошечный документ HTML5</title>
   <script src="script.js"></script>
</head>

Эта строка кода указывает Internet Explorer обрабатывать страницу таким образом, как будто бы она была загружена с удаленного веб-сайта. В противном случае IE переключается в особый режим блокировки, выводит предупреждение безопасности в строке сообщений и отказывается исполнять любой код JavaScript до тех пор, пока вы не нажмете кнопку «Разрешить заблокированное содержимое».

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

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

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

Да

Нет 

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

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

Комментарий

Базовый шаблон — Учебник по HTML

Базовый шаблон!

С чего начинается каждый HTML-документ.

Введение

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

Базовый шаблон

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

 

template.html
  3. <голова>
  4. Наша странная HTML-страница
  9. <тело>
  10. Контент помещается сюда.

Давайте разберем это:

  • Строка 1 — это специальный тег, который находится в самом верху документа и определяет, какой тип кода используется.
  • Строки 2 и 12 — Теги html открывают и закрывают документ HTML. Все, что содержится внутри, является частью документа.
  • Строки 3 и 7 — Теги head определяют заголовок документа. Элементы здесь — это дополнительные данные, которые идут вместе с документом.
  • Строка 4 — Тег title определяет заголовок документа. Вы заметите, что он отображается в верхней части окна браузера.
  • Строки 5 и 6 — Метатеги используются для описания документа.
  • Строки 9 и 11 — Теги body содержат фактическое содержимое документа.

Наша странная HTML-страница

Здесь размещается содержимое.

Тип документа

Первым тегом на каждой странице всегда должен быть этот тег. Он должен идти в самом верху, перед тегом html . Вы заметите, что, в отличие от других тегов, этот начинается с восклицательного знака ( ! ).

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

Заголовок

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

Заголовок

Тег title позволяет дать документу заголовок. Это используется в нескольких местах:

  • Браузер добавит его вверху окна.
  • Если вы сохраните страницу как избранную, здесь будет использован заголовок.
  • Поисковые системы используют заголовок, когда указывают вашу страницу в результатах поиска.
  • Другие сайты могут использовать заголовок, когда кто-то ссылается на вашу страницу.
  • И другие…

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

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

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

Метатеги


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

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

Поисковые системы обычно показывают только первые 155 символов описания (плюс-минус несколько символов). Вы должны стремиться сохранить свои описание меньше этой суммы.

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

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

The Body

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

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

Нарушение правил

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

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

Однако не принимайте это как предлог для лени и написания плохого кода.

  • Это может работать сейчас, но будущие версии браузеров могут быть не такими мягкими.
  • Это также может привести к проблемам позже при добавлении CSS и javascript.
  • Поисковые системы часто смотрят на качество вашего кода как на показатель качества вашего контента. Если они увидят ошибки HTML, это может повредить вашему рейтингу.

Сводка

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

Действия

Теперь давайте поиграем и создадим нашу первую страницу.

  • Скопируйте приведенный выше шаблон в свой файл и откройте его в браузере. Обратите внимание, где отображается заголовок.
  • Узнайте, как открыть инструмент проверки браузера, и немного изучите его. Пока вы не увидите многого, но он станет более полезным, когда мы добавим больше в наш документ.
  • Сделайте копию документа и откройте ее в браузере. Теперь разбейте его различными способами и посмотрите, что вам может сойти с рук, а что нет. Вот несколько вещей, которые можно попробовать:
    • размещать содержимое в разных местах за пределами тегов body .
    • пропустите или опечатайте разные теги.
    • попробуйте добавить дубликаты тегов, например. что произойдет, если у вас есть два или более тега body или title?

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

Создание базовой HTML-страницы с примерами кода

Создание базовой HTML-страницы с примерами кода

В этом уроке мы попытаемся использовать программирование, чтобы решить головоломку «Создать простую HTML-страницу». Это показано в приведенном ниже коде.

 

<голова>
    <мета-кодировка="UTF-8">
    Ваше название здесь 

<тело>
     
добро пожаловать на ваш сайт
 
    
 в html

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

 

Учебник по HTML
<тело>
 
Заголовок
 

Абзац

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

Какая самая простая HTML-страница?

Простые HTML-страницы

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

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