Что такое HTML? Из каких разделов состоит HTML документ? Из чего состоит структура HTML-документа.
Всем доброго времени суток! Сегодня мы научимся создать каркас нашей первой HTML страницы. А точнее разберемся с базовой структуры html страницы, узнаем, из чего она состоит. Но прежде всего, поговорим немного о тегах.
Что такое тег в HTML?
Тег это базовый элемент языка HTML. То есть HTML состоит именно из тегов и для того чтобы учить HTML, достаточно изучить основные теги, которые чаще всего используются. Если сравнивать с примером из реальной жизни, то тег в HTML это как кирпич для дома. Кирпич это основной элемент, который используется для строительства дома. То же самое и в HTML, тег это базовый элемент для создания html страницы. С помощью тега мы указываем браузеру, как правильно отобразить содержание html страницы.
Существует два типа тегов это парные теги и одинарные теги :
- Парные теги
это теги, которые состоит из открывающего тега и закрывающего тега. По короче это теги, которые имеют закрывающего тега.
Примеры: и ;
и ; и ; и ; ; - Одинарные теги
это теги, которые не имею закрывающего тега.
Примеры одинарных тегов:
.
У html страницы есть базовая структура . Базовая структура на всех страницах сайта, выглядит одинаково. Единственное что может отличаться в базовой структуре страниц от сайта к сайту, это элемент DOCTYPE. Для того чтобы узнать что такое DOCTYPE и какие типы существуют, прочитайте эту статью . Если не укажем этот элемент то браузер отобразит страницу некорректно.
Вот как выглядит базовый каркас html страницы:
Сейчас если откроем данную страницу в браузере, то она будет пуста. Теперь добавим пару строк кода внутри тега body , и откроем еще раз эту страницу в браузере.
Моя первая html страница
Вот как выглядит страница в браузере после того как изменили ее код:
Анализируем данный пример
В начале страницы, перед тегом html всегда указываем DOCTYPE , то есть тип документа.
Каждая html страница начинается с тега < html> и заканчивается тегом html> и состоит из заголовка < head> head> и тела < body> body> .
Внутри заголовка пишется служебные элементы, которые не отображаются на странице в браузере. В основном это:
- Мета теги . Главные из них это мета-тег кодировки , через которого указываем кодировку страницы (), мета теги для поисковых систем, это мета-тег c описанием страницы (description) и ключевые слова для страницы (keywords) .
- Заголовок страницы, который указывается внутри тега < title> title> . Этот заголовок отображается во вкладке браузера.
- Блок с внутренними стилями. < style type=” text/ css”>Внутренние стили.
- Одинарный тег < link /> , через которого подключаем внешние файлы.
- А также блок < script src =" library.js " type =" text/javascript " > script> в котором пишутся различные скрипты JavaScript .
Внутри тега < body> body> пишется контент страницы. Контент может содержать текст, изображения, таблицы, списки, ссылки и другие элементы которые отображаются на странице в браузере.
Имена тегов можно писать в любом регистре, то есть если напишем < BODY>, < bOdY>,< Body> или < body> , то результат будет один и тот же, но рекомендуется всегда писать в нижнем регистре, то есть < body> .
Пожалуй, на этом все. Из этой маленькой, но очень важной статьи вы узнали, как выглядит базовая структура html страницы.
Документ HTML состоит из основного текста и тегов . По сути, документ HTML представляет собой текстовый файл и для его создания можно использовать обычный текстовый редактор, например, Блокнот .
Документы HTML имеют строго заданную структуру, должны начинаться с тега и заканчиваться закрывающим тегом . Эта пара тегов сообщает браузеру, что перед ним действительно документ HTML.
Документ HTML состоит из раздела заголовков и тела документа. Раздел заголовков заключён между тегами
и и содержит информацию о документе в целом. В частности, этот раздел должен содержать тегиОсновной текст располагается в теле документа, которое задаётся тегами
и . Для изменения фона документа используется атрибут BGCOLOR, а для задания цвета шрифта применяется атрибут TEXT. В качестве значений этих атрибутов используется символьная константа цвета или шестнадцатеричное число, формирующее цвет по схеме «красный-зелёный-синий».Четыре перечисленных парных тега определяют основную структуру документа HTML. Они встречаются или их наличие подразумевается во всех документах HTML.
Фактически определить расположение основных структурных тегов можно и при их отсутствии. Поэтому, если теги ,
, и соответствующие им закрывающие теги опущены, то программа-браузер сама определит то место, где они должны находиться. ТегПарные теги влияют на часть документа между открывающим и закрывающим тегами. Такую часть документа рассматривают как элемент языка HTML. Например, элемент BODY включает в себя открывающий тег
элементы не должны пересекаться. Если открывающий тег находится внутри элемента, то и закрывающий тег должен располагаться внутри этого же элемента;
блочные элементы могут содержать вложенные блочные и текстовые элементы;
текстовые элементы могут содержать вложенные текстовые элементы;
текстовые элементы не могут содержать вложенные блочные элементы.
Функциональные разделы документа
Язык HTML предназначен для описания функциональных разделов документа. Во многих обычных документах основными функциональными разделами являются заголовки и абзацы .
Язык HTML поддерживает шесть уровней внутренних заголовков документа. Они помечаются тегами от
и
дои
. На экране компьютера эти заголовки изображаются шрифтами разных размеров. В соответствии с идеологией языка HTML текст, который по сути является заголовком, надо пометить с помощью одного из этих тегов. Пользоваться тегами форматирования, которые изменяют размер и начертание шрифта, в данном случае не следует.Для обозначения обычных абзацев используют тег
И соответственно закрывающий тег
. Теги, описывающие обычные абзацы являются необязательными, но при их наличии браузеры чётко отслеживают границы между абзацами.Для улучшения читаемости текста между абзацами браузеры выводят пустую строку. Эффективным средством создания разделителей в тексте являются горизонтальные полоски (линейки), визуально разделяющие документ на части. Горизонтальная линейка создаётся тегом
. Это одиночный тег, не имеющий парного.
При создании HTML документа следует учитывать, что кратные пробелы между словами и переходы на новую строку при воспроизведении документа браузером игнорируются.
Для перехода на новую строку
без создания абзаца используется тег
.
Главный заголовок
Подзаголовок
Эти строки отображаются слитно,
несмотря на то, что в документе
они отделены
друг от друга.
Закрывающий тег абзаца не обязателен.
Тег начала абзаца более важен, чем реальный переход на новую строку.
Текст после горизонтальной
линейки
разбит на
две строки
Общая структура HTML документа.
Основы HTML (Hypertext Markup Language)
Как и любой другой язык программирования, HTML подразумевает некую стандартизированную структуру построения программы - в данном случае, html-документа. Такая структура описывает очередность следования ряда обязательных блоков, которые содержат непосредственно программный код.
Директивы HTML называются «теги» (от англ, tag - отметка). Теги HTML заключаются в угловые скобки, синтаксис их записи в общем виде выглядит как <тег> . Все объекты, не заключенные в угловые скобки , интерпретатор воспринимает как текстовые элементы , отображая их на экране компьютера «как есть».
Структура документа HTML выглядит следующим образом:
Документ HTML
Заголовок
У HTML имеется еще одна значительная особенность, отличающая его от других языков программирования: практически все теги данного языка, за исключением некоторых отдельно оговоренных случаев, - парные. Такая пара состоит из «открывающего» и «закрывающего» тега, которые отличаются лишь наличием в последнем символа «/» Все, что расположено между открывающими закрывающим тегом, обрабатывается интерпретатором согласно алгоритму, присвоенному данному конкретному тегу. В общем виде программная строка HTML с открывающим и закрывающим тегами выглядит так:
<тег> обрабатываемое значение тег>
Данное свойство HTML позволяет использовать принцип вложения одного тега в другой, когда обрабатываемым значением одной команды может служить другая команда. Вот простой пример вложения двух тегов друг в друга:
<тег1> <тег2> обрабатываемое значение тег2>тег1>
При роботе с кодом HTML необходимо запомнить одно простое правило:
если где-то в тексте программы встречается открывающий тег, обязательно должен присутствовать и закрывающий. Несоблюдение этого правила вызовет ошибку при обработке такого документа интерпретатором броузера.
Основной, глобальной конструкцией внутреннего кода Web-страницы является «Документ HTML», для определения которой существует специальная команда, призванная «объяснить» броузеру, что он имеет дело именно с документом HTML, а не с текстовым или, например, графическим файлом. Такая команда называется «тег верхнего уровня» и записывается как:
<НТМL> Содержимое НТМL>
Тег верхнего уровня парный, причем его содержимое как раз и есть весь код HTML, составляющий документ. Открывающий тег записывается самой первой строкой html-документа, а закрывающий - самой последней.
Следующим элементом является «Заголовок документа» . Заголовок Web-страницы содержит исчерпывающую информацию о самом документе, а иногда также специальные директивы транслятора, подсказывающие встроенному в броузер интерпретатору HTML правила, по которым следует обрабатывать составляющий страницу код. Cодержимое заголовка не отображается в броузере и не влияет на внешний вид документа. Это служебная информация, которая необходима для корректной работы броузера. Синтаксис тега заголовка в общем виде выглядит так:
Содержимое
Раздел HEAD следует в html-документе непосредственно за тегом и является второй обязательной командой, которую необходимо включать в код Web-страницы.
«Внешний заголовок» является вложенной командой тега . Мнемоника внешнего заголовка записывается следующим образом:
<ТITLE> Внешний заголовок
Внешний заголовок отображается в верхнем поле броузера в качестве названия страницы при ее открытии
. Значение тега
Последняя структурна составляющая кода web-страницы - «Тело документа» . Тело документа, описываемое тегами , включает в себя весь основной код разметки страницы, который и определяет отображение html-документа на экране монитора. Основной текст, иллюстрации, элементы навигации и все, что вы хотите продемонстрировать посетителям вашего сайта, размещается внутри данного тега.
Таким образом, обязательные элементы кода документа HTML выглядят так:
<ТITLE> Название страницы
Теги и атрибуты.
Как отмечалось выше, тег - это некая команда HTML, указывающая интерпретатору броузера, каким образом он должен обрабатывать соответствующее каждой конкретной директиве значение.
Тег может иметь атрибут
(или не иметь его). Например, тег верхнего уровня не имеет атрибутов, а в строке создания новой таблицы В общем виде синтаксис записи тега HTML в совокупности с его атрибутами выглядит следующим образом: <ТЕГ ИМЯ _ АТРИБУТА-1 = "ЗНАЧЕНИЕ" ИМЯ _ АТРИБУТА-2 = "ЗНАЧЕНИЕ" ...ИМЯ _ АТРИБУТА-n = "ЗНАЧЕНИЕ">
В данном примере первый атрибут тега <ТЕГ ИМЯ_АТРИБУТА-1="ЗНАЧЕНИЕ-1; "ЗНАЧЕНИЕ-2"; ЗНАЧЕНИЕ-3">
Спецификация языка HTML позволяет опускать кавычки
для следующих видов атрибутов: Атрибуты, записываемые только строчными или заглавными символами латинского алфавита и не включающие иных символов, например, цифр. Атрибуты, состоящие только из цифр от 0 до 9. Атрибуты, обозначающие промежутки времени. Например, запись атрибутов BORDER="1" или ALIGN="CENTER" допустимо представить как BORDER=1 и ALIGN=CENTER. Http://www.webuchebnik.ru/samouchitel_html/fone_images.php
http://stafox.ru/category/html-2/lekcii/
Из чего состоит структура HTML-документа
СТРУКТУРА HTML-ДОКУМЕНТА: Вот как выглядит код самой простой html-страницы: Для того, чтобы создать свою html страницу, нужно вставить вышеуказанный код в блокнот, нажать Файл → Сохранить как…
В поле «имя файла» указать ваше_название страницы.html
, а в поле «тип файла» указать Все файлы
. Нажать Сохранить
.
Тег
сообщает о том, что начинается структура html-документа,
- что заканчивается. Между тегами
хранится в большей части информация для браузера и поисковых систем. В тегах Теперь немного поясню. Все теги (тэг - элемент языка разметки гипертекста
) делятся на два типа «одиночные» и «закрывающиеся». Кроме того теги заключаются в следующие символы <
и >
, именно они отличают тег
от обычного текстаhtml
. Рассмотрим несколько самых простых «одиночных» тегов: Код с использованием тега Ещё один «одиночный» тег - это
. Данный тег спользуются для хранения информации предназначенной для браузеров и поисковых систем. Поисковые системы обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешено использовать неограниченное число метатегов, все они должны находится между
и
. Параметры любого метатега имеют вид «имя=значение», который определяется ключевыми словами content
, name
или http-equiv
. Т.к. метатеги предназначены для машин, никакого визуального изменения они не вносят, поэтому я приведу лишь исходный код: Эта строка говорит о том, что создатель страницы считает, что на странице используется кодировка UTF-8. В HTML5 всё стало проще, для того, чтобы указать кодировку, достаточно лишь следующей строки: Cуществуют и другие одиночные теги (,
выражение «BORDER="1" WIDTH="100"»
является атрибутом тега
.
- это параметр "BORDER"
, второй атрибут - параметр "WIDTH"
, а их значения составляют соответственно "1" и "100". Значения атрибутов заключаются в прямые кавычки, записываемые символом «"»
. Если внутри атрибута какого-либо тега встречается другое значение, заключенное в кавычки, то есть имеет место вложение одних кавычек в другие, в качестве «внутренних» кавычек рекомендуется использовать одинарные, записываемые символом «"»
. В общем случае такое выражение выглядит следующим образом:
- тег, который отвечает за перенос на новую строку, в том месте, где установлен данный тег. Рассмотрим код с использованием этого тега.
А это мой первый сайт.
- тег, который рисует горизонатльную линию. Этот тег относится к блочным элементам, линия всегда начинается с новой строки. Имеет 5 атрибутов:
:
А это мой первый сайт.
,