С чего начать создание сайта? HTML

admin · 12.02.2024

Вы решили создать сайт?

Итак, с чего начать создание сайта?

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

Если вы создаёте свою компанию или имеете хороший запас полезной информации, без создания сайта не обойтись. Поэтому рано или поздно мы начинаем приходить к выводу, что сайт нам необходим. Вот только с чего начать?

Первым делом, не помешает изучить основы HTML. На этом этапе Вы получите базовые представления о языке гипертекстовой разметки — о тегах, о том как форматировать текст и размещать картинки на сайте, как работать с гиперссылками и т.д.

Что такое HTML

Всемирная паутина соткана из web-страниц (Web-pages), а эти страницы создаются при помощи языка разметки гипертекста (HyperТext Markup Language, HTML). Хотя многие, особенно новички, говорят сегодня о «Программировании (именно с большой буквы) на HTML», HTML вовсе не является языком программирования. HTML – это язык разметки. Вы используете HTML для разметки текстового документа, точно так же, как это делает редактор при помощи жирного красного карандаша. Эти пометки служат для определения формата (или стиля), который будет использован при выводе текста на экран монитора.

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

M в аббревиатуре HTML означает «mark up» – размечать.

Текст размечается тегами, которые являют собой ключевые слова языка, заключенные в угловые скобки «<» и «>».

Чаще их употребляют парами, чтобы отметить начало и конец некоторого куска текста.

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

Закрывающий тег отличается от открывающего наличием косой черты «/».

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

Естественно, нельзя обойтись без комментариев. Они служат для удобства разработчика, для пояснений. Комментарии не обрабатываются браузером и не отображаются, но они загружаются вместе со всем документом и влияют на время загрузки. Поэтому, добавляя комментарии, надо придерживаться «золотой середины».

Комментарии заключаются между фрагментами <!— и —> и могут занимать несколько строк.

Общий вид HTML-документа:

<!DOCTYPE html>
<html>
<head>
    Заголовок HTML-документа (не отображается на экране)
</head>
<body>
    Тело HTML-документа (отображается на экране)
    <!-- Это комментарий
         для внесения пояснений в HTML-документ -->
</body>
</html>

<!DOCTYPE html>;

Первый тег <!DOCTYPE html>; – это идентификатор применяемого стандарта HTML. В приведенном примере задано соответствие последнему стандарту HTML5.

Описание и использование

Указание doctype должно быть в самом верху любого HTML документа, перед тегом <html>.

doctype — это не HTML тег. Это инструкция браузеру про версию языка разметки страницы.

Возможные doctype:

HTML 5

пример:

<!DOCTYPE html">

HTML 4.01 Strict — включает все HTML элементы и атрибуты, кроме устаревших презентационных. Фреймсеты также не разрешены.

пример:

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

HTML 4.01 Transitional — включает все HTML элементы и атрибуты, вместе с устаревшими презентационными. Фреймсеты не разрешены.

пример:

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

HTML 4.01 Frameset — тоже что и HTML 4.01 Transitional, но разрешает фреймсеты.

пример:

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

XHTML 1.0 Strict — включает все HTML элементы и атрибуты, кроме устаревших презентационных. Фреймсеты также не разрешены. Разметка должна быть правильно XML оформлена.

пример:

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

XHTML 1.0 Transitional — включает все HTML элементы и атрибуты, вместе с устаревшими презентационными. Фреймсеты не разрешены. Разметка должна быть правильно XML оформлена.

пример:

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

XHTML 1.0 Frameset — тоже что и XHTML 1.0 Transitional, но разрешает фреймсеты. Разметка должна быть правильно XML оформлена.

пример:

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

XHTML 1.1 — тоже что и XHTML 1.0 Strict , но разрешает добавление модулей.

пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Теперь ясно, какой !DOCTYPE оказывается максимально подходящим:

Строгий синтаксис формата HTML 4.01

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

Информация в заголовке <head>

Контейнер <head> содержит информацию для браузеров и поисковых систем.

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

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

Внутри контейнера <head> допускается размещать следующие элементы: <base>,<basefont>, <bgsound>, <link>, <meta>, <script>, <style>, <title>.

Синтаксис

<head>
  ... 
</head>

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
   <!-- Этот раздел предназначен для заголовка страницы и технической информации. -->
  </head>

  <body>
   <!-- А здесь надо размещать все, что хочется увидеть на странице. -->
  </body>
 </html>

Содержание контейнера <body>

Между парой тегов <body>…</body> хранится всё содержание web-страницы, которое отображается на экране монитора в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера <body>. К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д.

Тег <body> также применяется для определения цветов ссылок и текста на веб-странице. Подобная практика в HTML 4 осуждается и взамен для указания цветовой схемы рекомендуется использовать стили, применяя их к селектору BODY. Тем не менее, большинство атрибутов до сих пор поддерживается разными браузерами.

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