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

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

Всем доброго времени суток. На связи Алексей Гулынин. В этой первой статье по HTML я бы хотел рассказать о структуре HTML документа. Знание HTML — это та база, без знания которой невозможно создать ни один сайт. HTML используется везде, поэтому HTML — это кирпичики для вашего сайта. CSS, JavaScript и PHP изучаются уже после того, как изучены основы. Встаёт вопрос, в чем же можно создать HTML документ? Для этих целей подойдёт даже обычный блокнот, но использовать его я вам не советую, так как там отсутствует множество функций, которые облегчают труд разработчика. Мы с вами будем работать в редакторе Notepad++. Скачать Notepad++ можно по ссылке.
После того, как вы скачали и установили данный редактор, запускаем его и сразу сохраняем наш документ под именем "index.html".
Давайте напишем в окне редактора следующий код:

<html>
<head>
</head>
<body>
</body>
</html>

После того, как вы наберете данный код и сохраните его, откройте данный файл в браузере. Это можно сделать так: щелкнуть правой кнопкой по файлу и нажать "Открыть с помощью" и выберете тот браузер, в котором вы хотите увидеть, как выглядит данная html — страница. Уверен, что, когда вы её откроете, то ничего не увидите. Не пугайтесь, ничего здесь удивительного нет, это самая простейшая html — страница, и в ней нет никакого текста. В ней есть только теги. Давайте разберемся с тем, что здесь написано.
Здесь у нас есть 3 открывающихся тега и 3 закрывающихся тега:
<html> — это начало html документа, все страницы в интернете начинаются с этого тега и заканчиваются им.
<head> — это заголовок страницы. Между тегами <head> и </head> обычно вставляют заголовок страницы, мета-теги, подключают различные файлы стилей, файлы скриптов.
<body> — это тело документа. Между тегами <body> и </body> пишется вся информация, которую пользователь увидит на сайте.
Также существуют одиночные теги.
Добавим нашей странице заголовок:

<html>
<head>
<title>Наша первая html - страница</title>
</head>
<body>
</body>
</html>

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

<html>
<head>
<title>Наша первая html - страница</title>
</head>
<body>
  <h1>Заголовок 1-го уровня</h1>
  <h2>Заголовок 2-го уровня</h2>
  <h3>Заголовок 3-го уровня</h3>
  <h4>Заголовок 4-го уровня</h4>
  <h5>Заголовок 5-го уровня</h5>
  <h6>Заголовок 6-го уровня</h6>
</body>
</html>

После того, как вы откроете данную страницу, вы увидите 6 заголовков. Причем заголовок <h1> самый крупный. Обычно он используется для выделения основной информации в тексте. На него также большее внимание, чем на другие заголовки, обращают поисковики (полезно для оптимизации сайта).
У каждого тега есть атрибуты. Атрибут, другими словами, это свойство тега. Давайте добавим несколько атрибутов для тега <body>. Пусть фон нашей страницы будет зеленым, а шрифт будет красного цвета.

<html>
<head>
<title>Наша первая html - страница</title>
</head>
<body bgcolor="green" text="red">
  <h1>Заголовок 1-го уровня</h1>
  <h2>Заголовок 2-го уровня</h2>
  <h3>Заголовок 3-го уровня</h3>
  <h4>Заголовок 4-го уровня</h4>
  <h5>Заголовок 5-го уровня</h5>
  <h6>Заголовок 6-го уровня</h6>
</body>
</html>

Атрибут bgcolor отвечает за фон страницы, атрибут text за цвет текста для страницы.
Если же после того, как вы всё это проделали, у вас открывается страница, а на ней иероглифы, то у вас проблемы с кодировкой. Как исправить данную проблему — можно будет прочитать в одной из следующих статей.

В данной статье вы узнали о структуре html-документа.

Вот вам домашнее задание: попробуйте поиграться с цветом текста и фоном страницы. Также попробуйте набрать свой текст.

На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.


Комментарии:

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

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