Разбираем HTML документ
Разбираем код HTML-документа
Разбираем HTML код
Давайте разберём, что означает каждая часть нашего кода HTML-документа, введённого в Блокнот на прошлом уроке:
<html> <head> <title>Название страницы</title> </head> <body> <h1>Заголовок статьи</h1> <p> Абзац статьи.</p> </body> </html>
Но для начала узнаем, что такое HTML-тег или просто «тег»?
Тег — основа языка HTML
Основной частью языка HTML является — тег. HTML документ (как и весь html-код) и состоит и тегов. Тег содержит в себе имя и угловые скобки, которые расположены по бокам — <имяТега>:
<p> — это один из множества, различных HTML-тегов, означает абзац.
Теги бывают открывающими и закрывающими. У закрывающих тегов перед именем стоит косая черта (слэш) /
<p> — открывающий тег.
</p> — закрывающий тег.
Между открывающим и закрывающим тегами, обычно располагается текст или другие теги.
У тегов разные имена и каждое имя означает какой либо элемент HTML-страницы: заголовок статьи, абзац (параграф) статьи, фотографию, ссылку, кнопку и т.п.
Рассмотрим другие теги используемые в нашем HTML коде.
Теги <html> </html> — начало и конец HTML-документа
Возвращаемся к нашему HTML документу:
<html> <head> <title>Название страницы</title> </head> <body> <h1>Заголовок статьи</h1> <p> Абзац статьи.</p> </body> </html>
Каждый HTML-документ начинается с открывающегося тега <html> и заканчивается закрывающимся тегом </html>
Теги <head> </head> и <body> </body> — голова и тело HTML-документа
Между тегами <html> </html> располагаются два блока.
1. Первый блок начинается и заканчивается тегами <head> </head> — их называют головой HTML-документа.
2. Второй блок начинается и заканчивается тегами <body> </body> — их называют телом HTML-документа.
<html> <head> <title>Название страницы</title> </head> <body> <h1>Заголовок статьи</h1> <p> Абзац статьи.</p> </body> </html>
1. <head> </head> — голова HTML-документа.
2. <body> </body> — тело HTML-документа, между этими тегами располагается основная информация страницы: заголовки, абзацы, фотографии, ссылки, кнопки и т.д.
Теги <title> </title> — название HTML-страницы
<html>
<head>
<title>Название страницы</title>
</head>
<body>
<h1>Заголовок статьи</h1>
<p>
Абзац статьи.</p>
</body>
</html>
В голове между тегами <head> </head>, располагаются теги
<title> </title>. Между тегами <title> </title> помещают текст, который выступает в качестве названия страницы.
В нашем примере, между тегами <title> </title>, находится текст:
Название страницы
Текст помещённый между тегами <title> </title> появляется в двух местах, в виде названия окна браузера и в виде названия вкладки браузера:
Название страницы, которую вы сейчас читаете, содержит следующий текст:
Разбираем код HTML-документа. Выясняем что такое тег.
Теги <h1> </h1> и <p> </p> — заголовок и абзац статьи
<html> <head> <title>Название страницы</title> </head> <body> <h1>Заголовок статьи</h1> <p> Абзац статьи.</p> </body> </html>
В теле нашего HTML-документа, между тегами <body> </body>, располагаются два вида тегов:
<h1> </h1> — теги заголовока статьи,
<p> </p> — теги абзаца статьи.
<h1> </h1> — между этими тегами располагается текст, который является заголовком статьи.
Например, текст заголовока статьи, которую вы сейчас читаете содержит следующее:
Разбираем HTML код
<p> </p> — между этими тегами располагается текст, который является абзацем статьи.
Например, второй абзац статьи, которую вы сейчас читаете, содержит следующее:
Но для начала узнаем, что такое HTML-тег или просто «тег»?
Обобщаем материал по структуре HTML-документа:
Каждый HTML-документ начинается и заканчивается тегами <html> </html> Каждый HTML-документ состоит из двух блоков, головы и тела:
1. <head> </head> — голова HTML-документа,
2. <body> </body> — тело HTML-документа.
В голове HTML-документа между тегами <head> </head>, располагаются теги <title> </title> и некоторая служебная информация о странице (мета-теги), которую мы изучим чуть позже.
В теле HTML-документа между тегами <body> </body>, располагается основной контент: тексты, изображения, формы, которые обрамлены тегами заголовков h1, абзацев p, изображений img, ссылок a, кнопок input и т.д.
Читать далее: Добавляем статью в HTML-документ