Что такое HTML? Из каких разделов состоит HTML документ? Что такое теги? Теги для создания HTML-документа
HTML - расшифровывается как «язык гипертекстовой разметки» (англ. HyperText Markup Language), который является наиболее широко используемым языком для написания веб-страниц.
- Гипертекст относится к способу связывания веб-страниц (HTML-документов). Таким образом, ссылка, доступная на веб-странице, называется гипертекстом.
- Как следует из названия, HTML - это язык разметки, что означает, что Вы используете HTML, чтобы просто «разметить» текстовый документ с тегами, которые сообщают веб-браузеру, как структурировать его для отображения.
Первоначально HTML был разработан с целью определения структуры документов, таких как заголовки, списки, абзацы и так далее, чтобы облегчить обмен научной информацией между исследователями.
Теперь HTML широко используется для форматирования веб-страниц с помощью различных тегов, доступных на языке HTML.
HTML-документВ следующем примере показан HTML-документ в простейшей форме:
Заголовок документа Заголовок
Здесь содержание документа...
Давайте сохраним код в HTML-файле document.html с помощью вашего любимого текстового редактора. И откройте файл с помощью веб-браузера, такого как Internet Explorer, Google Chrome или Firefox и др. Он должен показать следующий результат:
Теги для создания HTML-документаКак уже говорилось ранее, HTML является языком разметки и использует различные теги для форматирования содержимого. Эти теги заключены в угловые скобки . Большинство тегов имеют соответствующие закрывающие теги, за исключением нескольких тегов. Например, тег имеет закрывающий тег и тег имеет тег закрытия и другие.
В приведенном выше примере используются следующие теги для создания HTML-документа:
Тег | Описание |
Этот тег определяет тип документа и версию HTML. | |
Этот тег охватывает полный HTML-документ и в основном состоит из заголовка документа, который представлен тегами ... и телом документа, которое представлено тегами ... . | |
Этот тег представляет заголовок документа, который может содержать другие html-теги, такие как , и т.д. | |
Тег используется внутри тега , чтобы указать название документа. | |
Этот тег представляет тело документа, в котором хранятся другие html-теги, такие как , , И другие. |
|
Этот тег представляет заголовок. | |
| Этот тег представляет абзац. |
Знание этих тегов вполне хватит чтобы создать html-документ (html-страницу).
Чтобы изучить HTML, Вам нужно знать различные теги и понимать, как они ведут себя при форматировании текстового документа. Учить HTML легко, так как пользователям нужно только выучить использование разных тегов, чтобы отформатировать текст или изображения, тем самым сделать красивую веб-страницу.
Структура HTML-документаСтруктура типичного HTML-документа будет иметь следующий вид:
Тег декларации документа Теги, связанные с заголовком документа Теги, связанные с телом документа
Мы изучим все теги заголовка и тела в последующих уроках, теперь давайте посмотрим, что такое тег декларации документа.
ДекларацияТег декларация используется веб-браузером для понимания версии HTML, используемой в документе. Текущая версия HTML - 5, и она использует следующее объявление:
Существует много других типов объявлений, которые могут использоваться в документе HTML в зависимости от того, какая версия HTML используется. Мы увидим более подробную информацию об этом при обсуждении тега вместе с другими тегами HTML.
Всем доброго времени суток! Сегодня мы научимся создать каркас нашей первой HTML страницы. А точнее разберемся с базовой структуры html страницы, узнаем, из чего она состоит. Но прежде всего, поговорим немного о тегах.
Что такое тег в HTML?
Тег это базовый элемент языка HTML. То есть HTML состоит именно из тегов и для того чтобы учить HTML, достаточно изучить основные теги, которые чаще всего используются. Если сравнивать с примером из реальной жизни, то тег в HTML это как кирпич для дома. Кирпич это основной элемент, который используется для строительства дома. То же самое и в HTML, тег это базовый элемент для создания html страницы. С помощью тега мы указываем браузеру, как правильно отобразить содержание html страницы.
Существует два типа тегов это парные теги и одинарные теги :
- Парные теги это теги, которые состоит из открывающего тега и закрывающего тега. По короче это теги, которые имеют закрывающего тега. Примеры: и ; и ; и ; и ; ;
- Одинарные теги
это теги, которые не имею закрывающего тега.
Примеры одинарных тегов:
.
У html страницы есть базовая структура . Базовая структура на всех страницах сайта, выглядит одинаково. Единственное что может отличаться в базовой структуре страниц от сайта к сайту, это элемент DOCTYPE. Для того чтобы узнать что такое DOCTYPE и какие типы существуют, прочитайте эту статью . Если не укажем этот элемент то браузер отобразит страницу некорректно.
Вот как выглядит базовый каркас html страницы:
Главная страница
Сейчас если откроем данную страницу в браузере, то она будет пуста. Теперь добавим пару строк кода внутри тега body , и откроем еще раз эту страницу в браузере.
Моя первая html страница
Вот как выглядит страница в браузере после того как изменили ее код:
Анализируем данный пример
В начале страницы, перед тегом html всегда указываем DOCTYPE , то есть тип документа.
Каждая html страница начинается с тега < html> и заканчивается тегом и состоит из заголовка < head> и тела < body> .
Внутри заголовка пишется служебные элементы, которые не отображаются на странице в браузере. В основном это:
- Мета теги . Главные из них это мета-тег кодировки , через которого указываем кодировку страницы (), мета теги для поисковых систем, это мета-тег c описанием страницы (description) и ключевые слова для страницы (keywords) .
- Заголовок страницы, который указывается внутри тега < title> . Этот заголовок отображается во вкладке браузера.
- Блок с внутренними стилями. < style type=” text/ css”>Внутренние стили.
- Одинарный тег < link /> , через которого подключаем внешние файлы.
- А также блок < script src =" library.js " type =" text/javascript " > в котором пишутся различные скрипты JavaScript .
Внутри тега < body> пишется контент страницы. Контент может содержать текст, изображения, таблицы, списки, ссылки и другие элементы которые отображаются на странице в браузере.
Имена тегов можно писать в любом регистре, то есть если напишем < BODY>, < bOdY>,< Body> или < body> , то результат будет один и тот же, но рекомендуется всегда писать в нижнем регистре, то есть < body> .
Пожалуй, на этом все. Из этой маленькой, но очень важной статьи вы узнали, как выглядит базовая структура html страницы.
Документ HTML состоит из основного текста и тегов . По сути, документ HTML представляет собой текстовый файл и для его создания можно использовать обычный текстовый редактор, например, Блокнот .
Документы HTML имеют строго заданную структуру, должны начинаться с тега и заканчиваться закрывающим тегом . Эта пара тегов сообщает браузеру, что перед ним действительно документ HTML.
Документ HTML состоит из раздела заголовков и тела документа. Раздел заголовков заключён между тегами и и содержит информацию о документе в целом. В частности, этот раздел должен содержать теги и , между которыми размещают заголовок документа. Браузеры используют этот заголовок, чтобы заполнить строку заголовка окна браузера.
Основной текст располагается в теле документа, которое задаётся тегами и . Для изменения фона документа используется атрибут BGCOLOR, а для задания цвета шрифта применяется атрибут TEXT. В качестве значений этих атрибутов используется символьная константа цвета или шестнадцатеричное число, формирующее цвет по схеме «красный-зелёный-синий».
Четыре перечисленных парных тега определяют основную структуру документа HTML. Они встречаются или их наличие подразумевается во всех документах HTML.
Фактически определить расположение основных структурных тегов можно и при их отсутствии. Поэтому, если теги , , и соответствующие им закрывающие теги опущены, то программа-браузер сама определит то место, где они должны находиться. Тег считается обязательным, но и его пропуск не вызовет катастрофических последствий. Однако при создании Web-страниц опускать эти теги не рекомендуется, так как неизвестно, как поведёт себя браузер, установленный на компьютере пользователя.
Парные теги влияют на часть документа между открывающим и закрывающим тегами. Такую часть документа рассматривают как элемент языка HTML. Например, элемент BODY включает в себя открывающий тег , основное содержание элемента и закрывающий тег . Элементы языка HTML делятся на блочные и текстовые . Блочные элементы относятся к частям текста уровня абзаца. Текстовые элементы описывают свойства отдельных фраз и более мелких частей текста. При создании документа HTML желательно придерживаться следующих правил вложения элементов :
элементы не должны пересекаться. Если открывающий тег находится внутри элемента, то и закрывающий тег должен располагаться внутри этого же элемента;
блочные элементы могут содержать вложенные блочные и текстовые элементы;
текстовые элементы могут содержать вложенные текстовые элементы;
текстовые элементы не могут содержать вложенные блочные элементы.
Заголовок документа
Функциональные разделы документаЯзык HTML предназначен для описания функциональных разделов документа. Во многих обычных документах основными функциональными разделами являются заголовки и абзацы .
Язык HTML поддерживает шесть уровней внутренних заголовков документа. Они помечаются тегами от и до и . На экране компьютера эти заголовки изображаются шрифтами разных размеров. В соответствии с идеологией языка HTML текст, который по сути является заголовком, надо пометить с помощью одного из этих тегов. Пользоваться тегами форматирования, которые изменяют размер и начертание шрифта, в данном случае не следует.
Для обозначения обычных абзацев используют тег
И соответственно закрывающий тег
. Теги, описывающие обычные абзацы являются необязательными, но при их наличии браузеры чётко отслеживают границы между абзацами.Для улучшения читаемости текста между абзацами браузеры выводят пустую строку. Эффективным средством создания разделителей в тексте являются горизонтальные полоски (линейки), визуально разделяющие документ на части. Горизонтальная линейка создаётся тегом . Это одиночный тег, не имеющий парного.
При создании HTML документа следует учитывать, что кратные пробелы между словами и переходы на новую строку при воспроизведении документа браузером игнорируются.
Для перехода на новую строку
без создания абзаца используется тег
.
Функциональные разделы документа
Главный заголовок
Подзаголовок
Эти строки отображаются слитно,
несмотря на то, что в документе
они отделены
друг от друга.
Закрывающий тег абзаца не обязателен.
Тег начала абзаца более важен, чем реальный переход на новую строку.
Текст после горизонтальной
линейки
разбит на
две строки
Я постараюсь вести рассылку по принципу «от простого к сложному». Вести я ее буду именно в таком формате для того, чтобы человек, который захотел бы изучить основы сайтостроения, смог сразу же, после выпуска рассылки, на практике выполнять изложенный материал.
Но сразу же хочу оговориться, что, в частности, язык HTML – это очень обширный язык, который непрерывно развивается. И поэтому, для того, чтобы овладеть этим языком на высоком уровне, Вы должны тщательно изучить основы (т.е. выпуски моей рассылки). И параллельно с этим практиковаться .
Изучая основы языка HTML, мы будем обращаться к CSS стилям. А значит, мы будем изучать и CSS. Но это чуть позже. Также мы будем обращаться за помощью к javascript.
Сегодняшний вступительный урок, мы начнем с изучения структуры HTML документа и основных тегов HTML.
Поехали…
Каждый HTML документ начинается со строчки:
XHTML
|
В общем случае эта строчка говорит браузеру, который открывает нашу страницу, на какие стандарты ему опираться.
Тег весьма разнообразен, и от его модификации зависит то, как будет отображаться содержимое на Вашей странице.
Однако, если умело расположить все элементы и блоки на странице и применить стиль, то все будет одинаково хорошо работать во всех браузерах с нужным .
Но, пока мы не знаем, ни что такое блоки, ни что такое стили и как эту «абрукадабру» применять, считаю нужным вернуться к подробному рассмотрению , когда мы уже будем что-то уметь и сможем реально оценить его работу.
А пока движемся ниже по странице.
Кстати, а почему я начал рассматривать HTML документ с верхней части страницы?
Потому что браузер загружает страницу и «считывает код» сверху вниз, слева направо. (Впрочем, как мы и читаем книги).
Наверное, не совсем понятно слово тег?
Вообще говоря, тег – это инструкция, которая говорит браузеру, что в данном месте документа нужно сделать.
С помощью тегов мы создаем наши страницы. Все теги заключены в так называемые «уголки» ( ). И закрывающий (с косой чертой). Например, жирный текст . Указывает, что текст между открывающим и закрывающим тэгом strong будет выделен жирным.
Что такое тег, надеюсь, понятно.
Предлагаю набрать что-нибудь своими руками.
Итак, приступим.
Запусти блокнот или wordpad в OC WINOWS. Наберем следующие строчки:
XHTML
Заголовок окна браузера
Заголовок окна браузера
|
Сохраним файл под каким-либо именем, например start.html. Теперь разберемся что написали.
Между тегами и располагается информация, не отображаемая на странице.
Например, тег , кстати, он закрывающего тега не требует, может указывать кодировку (charset=windows-1251) или сведения об авторе (name="author" content="Ф.И.О.") , или слова для поисковой машины, тег заставит браузер автоматически через 30 секунд перейти на сайт mysite.ru (пример).
Тег определяет текст в заголовке окна браузера. (Тег закрывающийся).
Также в теге могут располагаться скрипты javascript или vbscript, заключенные в теги …. .
И стили, заключенные в теги …. .
На этом с тегом пожалуй мы закончим.
Это, собственно, тело документа, здесь размещается все то, что мы видим на странице. У тега есть набор параметров, которые мы рассмотрим, но использовать их не рекомендуется.
bgcolor — устанавливает цвет фона документа. ( )
background — указывает на url-адрес изображения — фона документа.
text — устанавливает цвет текста документа.
link — устанавливает цвет гиперссылок.
vlink= — устанавливает цвет гиперссылок на которых вы уже побывали, используя значение.
alink= — устанавливает цвет гиперссылок при нажатии.
bgproperties=fixed
— фоновое изображение прокручиваться не будет. Т.е. текст будет двигаться при нажатии PageDown, а фон — нет.
Данный параметр поддерживается только Internet Explorer.
Эти параметры можно объединять, например, на этой страничке используется:
XHTML
|
Давайте и наберем эту строку в нашем предыдущем примере.
XHTML