Основы HTML. Как создать HTML страницу

Основы HTML. Как создать HTML страницу

Здравствуйте уважаемые читатели блога DmitriyDenisov.com. В этой статье мы будем знакомиться с языком гипертекстовой разметки HTML. Из данного материала вы узнаете базовые понятия HTML, из чего состоит HTML документ и как создавать HTML страницу. Поскольку язык гипертекстовой разметки является основой любого сайта, то его нужно знать в обязательном порядке всем тем, кто занимается созданием сайтов. Знание основ HTML избавит вас от множества вопросов и проблем, а также поможет сэкономить время при разработке сайтов.

Базовые понятия HTML. Что такое теги HTML. Как создавать каркас документа HTML

Итак, первым делом давайте ознакомимся с тем, как создать новый HTML документ. Для этого нужно знать из чего состоит каркас HTML документа, но прежде чем приступить к рассмотрению каркаса, давайте ознакомимся со значением такого слова, как тег.

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

<p>Текст HTML документа, который должен быть выделен абзацем</p>

Как видите HTML тег <p> парный, т.е. абзац начинается открывающим тегом <p> и заканчивается закрывающим тегом </p>. Это сообщает браузеру, что данный «контейнер» завершен. Также существуют непарные теги, которые закрывать не нужно, но об этом мы поговорим чуть позже.

Теперь давайте перейдем к самому процессу создания нового HTML документа. Для этого можно воспользоваться любой удобной для вас программой. Я бы рекомендовал как для работы, так и для обучения использовать программу Dreamweaver или Notpade++. Первая программа специально предназначена для работы с HTML, PHP, CSS и т.д., но ее я бы не советовал использовать, если вы только начинаете изучать язык гипертекстовой разметки HTML. Она прекрасно подойдет для разработки сайтов, если вы уже обладаете нужными знаниями в данной области.

Вторая программа под названием Notpade++ является простым текстовым редактором, который тоже отлично подойдет для наших целей, а именно для изучения HTML. Лично я при подготовке статьи пользовался именно программой Notpade++, так как она очень проста в использовании и не будет отвлекать внимание разнообразными доступными функциями. Плюс ко всему этому она очень легкая и не сильно нагружает компьютер (моему ноутбуку порядка 3-х лет и он с трудом дышит, когда на нем запущено несколько программ, таких как, например, Adobe PhotoShop CS5 + Dreamweaver + FireFox и т.д).

Итак, первым делом создаем новый документ, например, index.html. Для этого можно создать простой текстовый документ и изменить его расширение с txt на html. Для того чтобы изменить расширение через проводник (если вы используете операционную систему Windows), нужно первым делом зайти в Панель управления – Свойства папок – Вид и снять галочку с пункта «Скрывать расширение для зарегистрированных типов файлов». После этого в проводнике вы сможете просматривать и изменять расширения для файлов.

После создания HTML файла отрываем его на редактирование в программе Notpade++ и добавляем в него следующий код.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Название страницы</title>
<meta http-equiv="Content-type" content="text/html" charset="windows-1251">
<meta name="keywords" content="ключевые слова через запятую">
<meta name="description" content="краткое описание">
</head>
<body>
<p>Содержимое страницы</p>
</body>
</html>

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

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

  • <!DOCTYPE html PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»> — данная строчка является обязательной. С ее помощью мы указываем, к какой версии стандарта принадлежит данный документ. В данном случае мы используем HTML версии 4.01.
  • Корневой тег <html> — указываем браузеру, что все содержимое будет написано на языке HTML. Данный тег парный и его нужно закрывать в самом конце страницы. Все содержимое страницы будет находиться между тегами <html>.
  • Тег <head> — данный тег тоже парный. С его помощью мы создаем так называемый контейнер для служебных тегов. В нем мы можем подключать к HTML документу таблицы стилей, скрипты, указывать ключевые слова, краткое описание для страницы и многое другое. Информация, которая находится между тегами <head>, не выводится пользователям, за исключением названия страницы.
  • Теги <body> — являются «телом» страницы. Между этими тегами будет находиться вся та информация, которая будет видна пользователям, которые будут просматривать эту HTML страницу.
  • Теги <title> — заголовок страницы. Он играет очень важную роль в поисковой оптимизации, так как именно его будут видеть пользователям при просмотре результатов поиска.
  • <meta http-equiv="Content-type" content="text/html" charset="windows-1251"> — указываем тип документа и его кодировку.  В данном случае это текстовый или HTML документ с кодировкой windows-1251. Для русского сегмента интернета стоит использовать именно эту кодировку.
  • <meta content="ключевые слова через запятую"> — указываем ключевые слова для данной HTML страницы. Данное поле, как и следующее, предназначено для поисковых систем и не будет видно посетителям вашего сайта. Более подробно о ключевых словах, вы можете прочитать в статье «Как подобрать ключевые слова и определить конкурентность запроса».
  • <meta name="description" content="краткое описание"> — краткое описание HTML страницы. В кавычках вводим краткое описание для данной страницы, например, в моем случае это будет выглядеть примерно так: «Базовые понятия HTML. Как создать HTML страницу».

Кроме приведенных выше конструкций вы также можете поместить между тегами <head> следующие:

  • <link rel="shortcut icon" type="image/ico" href="/favicon.ico"> — указываем путь к фавикону. Данная картинка отображается в браузере в адресной строке рядом с адресом страницы. Ее также использует поисковая система Yandex при отображении результатов поиска.
  • <link rel="stylesheet" href="/style.css" type="text/css" media="screen"> — прописываем путь к таблице стилей CSS. Более подробно о CSS вы можете прочитать в статьях «Знакомство с CSS» и «Каскадные таблицы стилей. Свойства текста, полей, отступов, границ и шрифтов».
  • <script language="JavaScript" src="agent.js"></script> — подключение к документу скриптов.

На этом мы заканчиваем знакомиться с языком гипертекстовой разметки HTML. Как видите данный язык очень простой в изучении и для того, чтобы создать HTML страницу не нужно прикладывать особых усилий. В следующих статьях рубрики «HTML, CSS, PHP и MySQL» мы продолжим изучение HTML, поэтому, если вы не хотите пропустить обновлений блога, вы можете подписаться на новости сайта любым удобным для вас способом в пункте «Подписка».

На этом все. Удачи вам и до скорых встреч на страницах блога DmitriyDenisov.com

Получать обновления сайта на E-mail
Еще записи по теме:
Рубрика: Основы HTML
4 комментария к “Основы HTML. Как создать HTML страницу”
  • Михаил
    16 ноября, 2012, 1:40
    Отличная статья. Не пойму почему комментариев нету.
  • Дмитрий
    7 января, 2013, 15:35
    Спасибо, Михаил! Наверное основами сейчас мало кто интересуется. Обычно люди хотят получить все и сразу, не утруждая себя изучением базовых основ. Такова наша природа, к сожалению...
  • Акбар
    13 февраля, 2013, 18:46
    Здравствуйте Дмитрий. У меня вопрос таков. Я создаю сайт на html, внутри сайта очень много страниц и я хочу сортировать их по имени по папкам. Например "A"B"V"G"D" папки. Для дизайна сайта существует папка image и файл style.css. Ведь не надо же чтоб сайт работал нормально на каждую папку добавлять папку image и файл style.css. Если добавить то размер сайта увеличивается в 10 раз. Как сделать чтоб сайт работал нормально.
  • Дмитрий
    19 февраля, 2013, 10:31
    Здравствуйте. Нет, не нужно. Просто используйте прямые ссылки к нужным файлам и папкам или же ссылайтесь на них относительно корня сайта. Например, "/image/...", "/style.css" и т.д.
Оставить комментарий или два

Внимание! Все комментарии проходят тщательную модерацию!
В связи с загруженностью могу не отвечать на комментарии несколько недель. Чтобы ускорить процесс получения ответа, напишите на admin@dmitriydenisov.com

Это не спам