Структура веб-страницы и начала HTML

by ноября 24, 2019 0 комментариев
Дорогие читатели! В этом сообщении мы разберём подробно структуру страницы, размещённой во Всемирной паутине, и изучим несколько основных тегов, с помощью которых вы сможете создать HTML-документ.

Структура веб-страницы

Вообще структура любой страницы, размещённой в сети Интернет, выглядит следующим образом.
  1. Объявление формата документа.
  2. Корневой элемент HTML-страницы.
    1. Техническая информация о документе:
      • кодировка;
      • заголовок документа;
      • таблица стилей;
      • сценарии.
    2. Основная часть документа.
В виде кода эту структуру можно представить так.

<!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>
Тег <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 комментариев:

Отправить комментарий