i

Как создать страницу HTML

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

Принципы блочного построения страницы

Каждый из элементов страницы удобно поместить в контейнер DIV с помощью соответствующего тега. Такому контейнеру присваивается свой ID, с помощью которого в файле CSS устанавливаются свойства для этого контейнера. Кроме того, все контейнеры на странице заключаются в один больной контейнер DIV для управления его положением на странице, шрифтом, цветом и проч.

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

Базовые элементы кода

Итак, в предыдущем уроке мы создали два файла и отправили их в корневой каталог нашего сайта — index.html и style.css. Начать следует с написания кода в файле index.html. Любой html-документ содержит такие обязательные элементы:

  • !DOCTYPE – строка, начинающаяся с этого кода, будет указывать браузеру тип отображаемой страницы. Стоит помнить, что для каждой версии html эта строка может отличаться.
  • Сразу после строки !DOCTYPE ставится открывающий тег <html> — всегда в самом начале документа. Закрывающий аналогичный тег ставится в самом конце документа.
  • Внутри тега <html> и </html> все содержимое подразделяется на два блока, один из которых заключается в теги <head>, а второй в теги <body>.
  • В тегах <head> указывается служебная информация о странице, например, ее тайтл – информация об имени страницы, или описание – description.
  • В тегах <body> помещается содержание вэб-документа, иными словами – контент.

Работа с тегом <head>

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

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

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

<meta name=»keywords» content=»верстка страницы, блочная верстка»>

Если вы хотите указать тайтл страницы, пишем:

<meta name=»title» content=»Желаемый заголовок страницы»>.

Важно! Указанный заголовок в этой строке не отображается в поле просмотра документа в браузере. Он будет отображен в самой верхней части браузера, которая включает кнопки «Свернуть», «На весь экран» и «Закрыть».

Если вы хотите дать название статье, которое бы отображалось в поле просмотра документа в браузере, заключите название в теги <h1> непосредственно перед началом текста, в рамках тегов <Body>.

Общая структура

Таким образом, имеем следующую общую структуру документа:

!DOCTYPE

<HTML>

 

<Head>

Служебная информация о странице

<Title>

Имя страницы

</Title>

</Head>

<Body>

Текст документа, контент страницы.

</Body>

</HTML>

Если у вас возникли трудности при самостоятельной блочной верстке страницы в HTML редакторе, воспользуйтесь услугами профессионалов, которые предоставят вам готовые шаблоны сайта, написанные с учетом наилучшей оптимизации и адаптивности: http://gotovii-sait.ru/moto-cms-html-templates-type/.