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

Опубликовано: 06.09.2018

Здравствуйте уважаемые читатели блога dmitriydenisov.com . В этой статье мы будем знакомиться с языком гипертекстовой разметки 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

Обнаружили ошибку? Выделите ее и нажмите Ctrl+Enter