Базовая структура HTML страницы

Всем доброго времени суток! Сегодня мы научимся создать каркас нашей первой HTML страницы. А точнее разберемся с базовой структуры html страницы, узнаем, из чего она состоит. Но прежде всего, поговорим немного о тегах.
Что такое тег в HTML?
Тег это базовый элемент языка HTML. То есть HTML состоит именно из тегов и для того чтобы учить HTML, достаточно изучить основные теги, которые чаще всего используются. Если сравнивать с примером из реальной жизни, то тег в HTML это как кирпич для дома. Кирпич это основной элемент, который используется для строительства дома. То же самое и в HTML, тег это базовый элемент для создания html страницы. С помощью тега мы указываем браузеру, как правильно отобразить содержание html страницы.
Существует два типа тегов это парные теги и одинарные теги:
- Парные теги это теги, которые состоит из открывающего тега и закрывающего тега. По короче это теги, которые имеют закрывающего тега. Примеры: <html> и </html>; <title> и </title>; <head> и <head>; <body> и </body>; <p> и </p>;
- Одинарные теги это теги, которые не имею закрывающего тега. Примеры одинарных тегов: <br />. <hr />
У html страницы есть базовая структура. Базовая структура на всех страницах сайта, выглядит одинаково. Единственное что может отличаться в базовой структуре страниц от сайта к сайту, это элемент DOCTYPE. Для того чтобы узнать что такое DOCTYPE и какие типы существуют, прочитайте эту статью Что такое DOCTYPE и зачем он нужен . Если не укажем этот элемент то браузер отобразит страницу некорректно.
Вот как выглядит базовый каркас html страницы:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <meta name="description" content="Описание страницы. Не менее 160 символов. " /> <meta name="keywords" content="Здесь указываем список ключевых слов, разделенные запятой." /> <title>Главная страница</title> </head> <body> </body> </html>
Сейчас если откроем данную страницу в браузере, то она будет пуста. Теперь добавим пару строк кода внутри тега body, и откроем еще раз эту страницу в браузере.
<div> <p>Моя первая html страница</p> <!-- Это комментарий. Он не отображается на странице в браузере. --> </div>
Вот как выглядит страница в браузере после того как изменили ее код:

Анализируем данный пример
В начале страницы, перед тегом html всегда указываем DOCTYPE, то есть тип документа.
Каждая html страница начинается с тега <html> и заканчивается тегом </html> и состоит из заголовка <head></head> и тела <body></body>.
Внутри заголовка пишется служебные элементы, которые не отображаются на странице в браузере. В основном это:
- Мета теги. Главные из них это мета-тег кодировки, через которого указываем кодировку страницы (<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>), мета теги для поисковых систем, это мета-тег c описанием страницы (description) и ключевые слова для страницы (keywords).
- Заголовок страницы, который указывается внутри тега <title></title>. Этот заголовок отображается во вкладке браузера.
- Блок с внутренними стилями. <style type=”text/css”>Внутренние стили. </style>
- Одинарный тег <link />, через которого подключаем внешние файлы.
- А также блок <scriptsrc="library.js" type="text/javascript"> </script> в котором пишутся различные скрипты JavaScript.
Внутри тега <body></body> пишется контент страницы. Контент может содержать текст, изображения, таблицы, списки, ссылки и другие элементы которые отображаются на странице в браузере.
Имена тегов можно писать в любом регистре, то есть если напишем <BODY>, <bOdY>,<Body> или <body>, то результат будет один и тот же, но рекомендуется всегда писать в нижнем регистре, то есть <body>.
Пожалуй, на этом все. Из этой маленькой, но очень важной статьи вы узнали, как выглядит базовая структура html страницы.
Похожие статьи:
Видео:
Понравилась статья?
Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.
Поделиться с друзьями:
Подписаться на новые статьи:
Поддержите пожалуйста мой проект!
Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту sergiu1607@gmail.com. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.
Добавляйтесь ко мне в друзья в:
Добавляйтесь в мои группы:
Подпишитесь на мои каналы:
Автор статьи: Мунтян Сергей
Копирование материалов с сайта sozdatisite.ru ЗАПРЕЩЕНО!!!
Дата добавления: %date%