Дорогие читатели! В этом сообщении мы разберём подробно структуру страницы, размещённой во Всемирной паутине, и изучим несколько основных тегов, с помощью которых вы сможете создать HTML-документ.
Структура веб-страницы
Вообще структура любой страницы, размещённой в сети Интернет, выглядит следующим образом.- Объявление формата документа.
- Корневой элемент HTML-страницы.
- Техническая информация о документе:
- кодировка;
- заголовок документа;
- таблица стилей;
- сценарии.
- Основная часть документа.
<!DOCTYPE html> <!-- Формат документа -->
<html>
<head> <!-- Техническая информация о документе -->
<meta charset="UTF-8"> <!-- Кодировка символов документа -->
<title>...</title> <!-- Заголовок документа -->
<link rel="stylesheet" type="text/css" href="style.css"> <!-- Таблица стилей -->
<script src="script.js"></script> <!-- Сценарии -->
</head>
<body> <!-- Основная часть документа -->
</body>
</html>
Основные теги
<!DOCTYPE html>Инструкция DOCTYPE определяет версию HTML и DTD-файл.
<html>
Тег
<head>
Внутри тегов
Текст, расположенный между тегами
<meta>
С помощью одинарного тега
Элемент
<style>
Внутри этого элемента задаются стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS. Таких элементов на странице может быть несколько.
Внутрь этого элемента можно записывать код форматирования как самих элементов веб-страницы, так и веб-страницы целиком.
Чтобы подключить к элементу заданный стиль, необходимо через атрибут
<link>
Одиночный тег
<script>
Элемент
<body>
Внутри этого элемента находится всё содержимое документа, которое нужно вывести на экран.
<html>
является основообразующим, корневым элементом, предком для всех остальных элементов. Весь код HTML располагается внутри открывающегося и закрывающегося тегов <html>...</html>
. Всё, что расположено за их пределами, не воспринимается браузером как код HTML и, следовательно, никак им не обрабатывается.<head>
Внутри тегов
<head>...</head>
располагается информация о документе: заголовок, кодировку, служебные описания, например сценарии; причём тег заголовка <title>
обязателен.Текст, расположенный между тегами
<title>
и </title>
, отображается в строке заголовка веб-браузера. Длина заголовка должна быть не более 60 символов.<meta>
С помощью одинарного тега
<meta>
можно задать описание содержимого веб-страницы, а также ключевые слова для поискового портала. Если текст между тегами <title>
и </title>
используется в качестве текста ссылки на эту страницу, то описание из тега <meta>
будет отображено под ссылкой на веб-страницу.Элемент
<head>
может содержать несколько элементов <meta>
, потому что в зависимости от используемых атрибутов они несут различную информацию.<style>
Внутри этого элемента задаются стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS. Таких элементов на странице может быть несколько.
Внутрь этого элемента можно записывать код форматирования как самих элементов веб-страницы, так и веб-страницы целиком.
Чтобы подключить к элементу заданный стиль, необходимо через атрибут
class
(или id
) присвоить элементу соответствующее название.<link>
Одиночный тег
<link>
устанавливает связь с внешним документом вроде файла со стилями или со шрифтами.<script>
Элемент
<script>
позволяет присоединять к документу различные сценарии. Закрывающий тег обязателен, при этом текст сценария может располагаться либо внутри этого элемента, либо во внешнем файле. Если текст сценария расположен во внешнем файле, то он подключается с помощью атрибутов элемента.<body>
Внутри этого элемента находится всё содержимое документа, которое нужно вывести на экран.
0 комментариев:
Отправить комментарий