"ИСТОРИЯ ЯЗЫКА HTML "
HTML (от англ. HyperText Markup Language)— «язык гипертекстовой разметки») – это язык разметки документов в среде WEB. То, что вы видите при просмотре страницы в Internet, это интерпретация вашим браузером HTML-текста. Чтобы браузер правильно отображал форматирование к примеру текста т.е. разделял его на абзацы, выделял цитаты, заголовки, списки и.т.д. Полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства. Этим как раз и занимается язык html.
HTML (от англ. HyperText Markup Language)— «язык гипертекстовой разметки») – это язык разметки документов в среде WEB. То, что вы видите при просмотре страницы в Internet, это интерпретация вашим браузером HTML-текста. Чтобы браузер правильно отображал форматирование к примеру текста т.е. разделял его на абзацы, выделял цитаты, заголовки, списки и.т.д. Полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства. Этим как раз и занимается язык html.
Большая часть современных интернет технологий основана на давно используемом, самом дискутируемом языке HTML. Он был разработан для выполнения разметки и оформления документов, размещаемых на веб-страницах. Свои первые черты язык начал обретать в 1986 году. Толчком стало принятие Международной организацией по стандартизации (ISO) ISO-8879-стандарта - Standard Generalized Markup Language или, в сокращенном варианте - SGML. К нему прилагалось описание, в котором говорилось о том, что SGML предназначен для структурной разметки текста. Примечательно, что описания внешнего вида документа не предполагалось.
Исходя из этого, можно сделать вывод о том, что SGML не являлся системой для разметки текста и не располагал какого-либо списка структурных элементов языка, используемых в определенных условиях. Язык подразумевал описание синтаксиса написания главных элементов разметки тексты. Спустя некоторое время они получили, хорошо известное сегодня название - «теги».
Вполне очевидной была потребность в создании языка, который:
- Описывал какой элемент в каких случаях разумно применить.
- Содержал перечень элементов, с помощью которых можно создать документ, читаемый разными программами.
Несмотря на то, что язык SGML, как и его схожие приложения, не получил особого развития, он и не был окончательно забыт. В 1991 году Европейский институт физики частиц объявил о необходимости разработки механизма, позволяющего передавать гипертекстовую информацию через Глобальную сеть. Именно SGML лег в основу будущего языка - Hyper Text Markup Language (HTML ).
Структура документа HTML
Любой html-документ включает в себя обычный текст и html-код. Ниже представлен пример кода:
Листинг № 1
<html>
<head>
<title>Структура документа html</title>
</head>
<body>
<h1 align="center">основные теги</h1>
<p>текст, отображаемый в окне браузера</p>
</body>
</html>
Давайте рассмотрим его особенности.
- Текст, который мы хотим видеть в окне браузера, помещается между тегами.
- Все теги помещаются заключены в фигурные скобки. Большинство тегов парные, например, <title>…</title>. Закрывающий тег начинается с символа / «слэш». Парные теги выделяют текстовый блок и придают ему на странице некоторый статус, например, теги <h1>…</h1> помечают текстовый блок как заголовок.
- Большинство тегов имеют многочисленные параметры, например, заголовок, помеченный тегами <h1 align="center">…</h1> в отличие от <h1>…</h1> располагается в центре окна браузера. Каждый параметр представлен в виде пары имя_параметра=«значение_параметра», например, width="80". Все параметры располагаются в открывающем теге. Если параметров несколько, то они отделяются пробелами и их порядок не имеет значения.
- Информация, располагаемая между тегами <head> … </head>, не отображается в окне браузера, там находятся тег заголовка страницы, теги для поисковых машин, программный код, написанный на скриптовом языке, например JavaScript, другая служебная информация.
- Вся информация, видимая в окне браузера, помещается между тегами <body>…</body>
2.2 Теги логической разметки, гиперссылки
Изначально язык html разрабатывался не для оформления страниц, а для их логической разметки. Очень важно понимать эту особенность языка. Если мы посмотрим на страницу с научной статьей, то мы увидим в ней следующие элементы: заголовки, подзаголовки, основной текст, в котором встречаются различные выделения, цитаты и т.п. К этому набору язык HTML добавляет еще гиперссылки. Давайте рассмотрим основные теги, придающие тексту, заключенному в них, определенный «вес».
<h1> - парный тег, служит для выделения текста в заголовок первого уровня. Заголовки могут быть, начиная от первого, самого значимого, до шестого уровня. Хотя на практике в одном документе столько типов подзаголовков практически не встречается.
<p> - парный тег для, выделения текста в абзацы, то есть в основной текст.
align="left | right | center" – с помощью данного параметра вы можете выравнивать свои заголовки и абзацы соответственно полевому, правому краю и по центру. Пример использования данного атрибута:
<p align="center"> основной текст, выровненный по центру </p>.
align="left | right | center" – с помощью данного параметра вы можете выравнивать свои заголовки и абзацы соответственно полевому, правому краю и по центру. Пример использования данного атрибута:
<p align="center"> основной текст, выровненный по центру </p>.
<br> - пример непарного тега, который выполняет перенос текста на новую строку, не создавая новый абзац.
<b> - парный тег, помещенный текст выделяется полужирным начертанием. Иногда полужирное начертание выделяется с помощью парного тега <strong>.
<i> - парный тег, помещенный текст выделяется курсивом.
<pre> - парный тег, очень активно применяемый для публикации больших фрагментов предварительно отформатированного текста. Рассмотрим в чем его особенность. Если мы хотим поместить на страницу стихотворение, то нам неудобно использовать для этого тег <p>, так как браузер проигнорирует все переносы в стихотворении и расположит весь текст одной строкой. А вот тег <pre> все разрывы строк, все пробелы сохранит без изменения.
Существует еще несколько тегов, выделяющих текст в различные блоки: цитаты, программный код, но самые распространенные мы рассмотрели. Во всех случаях совершенно неизвестно, какого размера будет текст на экране компьютера, за это в браузере отвечает команда Вид – Размер шрифта. Неизвестно, сколько строк на экране компьютера будет занимать каждый абзац, это зависит от разрешения вашего монитора и от того, какого размера окно браузера, открывшего ваш документ. Повторюсь еще раз, HTML не отвечает за оформление текста, а только за его «вес» в документе.
Вы можете возразить, а как же парный тег <font> и его многочисленные параметры, позволяющие задавать размер, цвет, шрифт текста? Вот пример использования этого тега:
<font size="5" color="blue">текст будет синего цвета, «пятого» размера</font>
Безусловно, мне известно об этом теге. А также известно, что применять его нужно только в крайних случаях. Если вы начнете разукрашивать свой документ с его помощью, то любые последующие изменения страницы будут очень трудоемкими. Представьте, что вы оформили с помощью этого тега все заголовки в документе. Если вы захотите сделать все заголовки поменьше, то потребуется вручную изменить все места, где вы использовали тег <font>. К оформлению текста мы вернемся в главе, посвященной CSS (каскадным таблицам стиля), а пока я советую удовлетвориться возможностями, которые нам предлагает классический HTML.
Впрочем, нет - некоторые украшательства мы научимся делать прямо сейчас. Для тега <body> используется ряд параметров, определяющих цветовое решение вашей страницы. Вот пример такого использования:
<BODY bgcolor="black" text="silver" link="yellow" vlink="orange">
В данном примере мы говорим браузеру, что страница должна быть черного цвета, текст – серебристого цвета, ссылки желтого цвета, а вот ссылки, на которые мы уже «нажимали», становятся оранжевыми (за это отвечает параметр vlink). Так как запомнить названия для цветов непросто, то для кодирования цвета используется шестнадцатеричная запись в формате #RRGGBB. То есть первые две цифры указывают красную составляющую, вторые две цифры – зеленую, а последние две – синюю составляющую. Пугаться шестнадцатеричного кода не нужно. В профессиональных редакторах, например, Adobe PhotoShop вы можете получать этот код автоматически .
Комментариев нет:
Отправить комментарий