Файл: Основы программирования на языке HTML..pdf

строгий (Strict): не содержит тегов, помеченных как «устаревшие» или «не одобряемые» (deprecated);
переходный (transitional): содержит устаревшие теги в целях совместимости и упрощения перехода со старых версий HTML;
с фреймами (frameset): аналогичен переходному, но содержит также теги для создания наборов фреймов.

В отличие от предыдущих версий для HTML 5 всего один тег DOCTYPE: <!DOCTYPE html>^{^[20]}.

Теги и их параметры не обладают чувствительностью к регистру. То есть <A HREF="http://example.com"> и <a href="http://example.com"> означают одно и то же.

Обычно используются парные теги — открывающий, или начальный, и закрывающий, или конечный. Возможно также применение одиночного тега. Например, тег отступа абзаца может оформлять абзац между тегами <p> и </p>, а может в одиночной форме до следующего первого попавшегося тега <p>^{^[21]}.

Тег с пустым текстом: <HR></HR> вставляет разрыв текста без сохранения отступов, можно также использовать специальную форму записи тега — <HR/>.

Набор и рекомендуемые интерпретации тегов определены организацией World Wide Web Consortium^{^[22]}.

В последних версиях HTML практически у каждого тега существует большое число необязательных параметров, чаще всего их не менее 15.

Весь текст, заключенный между начальным и конечным тегами, и сами эти теги, называется элементом. Сам же текст между тегами называется содержанием элемента. Содержание элемента может включать в себя любой текст, в том числе и другие элементы^{^[23]}.

У тега могут быть свойства, называемые атрибутами, дающие дополнительные возможности форматирования текста. Они записываются в виде сочетания: имя атрибута-значения, причем текстовые значения заключаются в кавычки.

Например, можно выделить фрагмент текста определенным шрифтом, используя тег <font> и указав в этом теге желаемый размер и название шрифта: <font face="Times, Arial, Courier" size=4> оформляемый текст </font>^{^[24]}.

Имя тега определяет тип элемента. В HTML имя тега определяет лишь правило разметки, так, имя тега «i» (например, <i> Курсив </i>) определяет, что между тегами расположен текст, который следует отображать в браузере в курсивном начертании. XML является более гибким стандартом. Имена тегов в нем не регламентируются жестко: пользователи могут вводить и использовать для своих нужд новые теги^{^[25]}.

Например, самостоятельно можно определить, что элементом с именем тега «person» определяется тип этого XML элемента, как фамилия имя и отчество. И, например, год рождения, как часть информации по данному человеку:

В XML эта запись будет выглядеть как: <person>Петров Петр Петрович <year>1991</year></person> Также можно дополнительно задать в таблицах CSS, что все теги <person> будут определенного цвета^{^[26]}.

В HTML данная запись уже изменится и будет выглядеть как: <div name="person"> Петров Петр Петрович, 1991 </div> В данном случае уже нет возможности сформировать элемент документа для анализа текста, но оформить можно.

Таким образом, HTML представляет собой неструктурированный текст, а XML является документом с иерархической структурой, что дает возможность обработки документа, такой как поиск нужных элементов документа, трансформация данных, и другие подобные^{^[27]}.

В SGML и основанных на нем языках, в том числе HTML версий со 2 по 4.01, элементы должны быть строго вложенными друг в друга, «перехлест» элементов недопустим. То есть <a><b></a></b> будет неправильным написанием, а <person><i>Имя Фамилия</i></person> – правильным^{^[28]} [4, 6, 8, 10 ,12].

2.3. Примеры конкретных реализаций тегов

2.3.1. Гиперссылки

В качестве примера использования гиперссылки можно привести запись: <a href="имя файла" target="_self">название ссылки</a>

В данной записи атрибут href задает значение адреса документа, на который указывает ссылка. Атрибут filename задает имя файла или адрес Internet, на который необходимо сослаться. Название ссылки является названием гипертекстовой ссылки, которое будет отображаться в браузере, то есть показываться тем, кто зашел на страницу. Атрибут target задает значение окна или фрейма, в котором будет открыт документ, на который указывает ссылка^{^[29]}.

Атрибут target может принимать значения:

_blank — открытие документа в новом окне;
_top — открытие документа в текущем окне;
_parent — открытие документа в родительском фрейме;
_self — открытие документа в текущем фрейме.

По умолчанию атрибут имеет значение: _self^{^[30]}.

Тот же элемент используется для создания так называемых якорей, которые могут потом использоваться в гиперссылках, направленных на какой-то определенный элемент страницы. Например:

<!DOCTYPE html>

<html>

<head>

<title>Якорь внутри документа</title>

</head>

<body>

<p>текст</p>

<p><a href="#top">Наверх</a></p>

</body>

</html>^{^[31]}

Аналогичным образом якорь можно сделать на закладку, находящуюся на другой веб-странице или на другом сайте: там, куда направлена ссылка, должен стоять <a name="xxx"></a>, а там, откуда идет ссылка, к значению href добавляется знак решетки и название якоря^{^[32]} [1, 6, 12].

2.3.2. Текстовые блоки

В качестве примеров тегов для текстовых блоков можно привести:

<H1> … </H1>, <H2> … </H2>, … ,<H6> … </H6> — заголовки 1, 2, … 6 уровня. Используются для выделения частей текста, чем больше число, тем мельче заголовок;
<BR> — новая строка, тег не закрывается;
<P> — новый абзац, можно в конце абзаца поставить </P>, но это не обязательно;
<BLOCKQUOTE> … </BLOCKQUOTE> — цитата, обычно текст сдвигается вправо;
<HR> — горизонтальная линия;
<SPAN> … </SPAN> — строка;
<DIV> … </DIV> — блок;
<PRE> … </PRE> — режим preview, в котором текст заключается в рамку и никак не форматируется^{^[33]} [3].

2.3.3. Форматирование текста

В качестве примеров тегов для форматирования текста можно привести:

<U> … </U> — подчеркивание текста;
<B> … </B> — выделение текста жирным шрифтом;
<I> … </I> — выделение текста курсивом;
<S> … </S> (или <STRIKE> … </STRIKE> ) — зачеркивание текста;
<SMALL> … </SMALL> — уменьшение шрифта;
<BIG> … </BIG> — увеличение шрифта;
<EM> … </EM> — логическое ударение;
<STRONG> … </STRONG> — усиленное логическое ударение;
<MARQUEE> … </MARQUEE> — сдвигающийся по экрану текст;
<BLINK> … </BLINK> — мигающий текст;
<SUP> … </SUP> — надстрочный текст;
<SUB> … </SUB> — подстрочный текст;
<FONT параметры> … </FONT> — задание параметров шрифта, имеет параметры FACE, COLOR и SIZE^{^[34]} [4].

2.3.4. Списки

Списки в HTML записываются в виде:

<UL>

<LI> первый элемент </LI>

<LI> второй элемент </LI>

<LI> третий элемент </LI>

</UL>

Данная запись создает список вида:

первый элемент
второй элемент
третий элемент

Если вместо <UL>, обозначающего ненумерованный список, поставить <OL>, означающее нумерованный список, список получится нумерованным:

первый элемент
второй элемент
третий элемент^{^[35]}

С помощью параметров имеется возможность изменять форму символов списка, назначать вместо символов буквы, римские или арабские цифры, начинать нумерацию с любого необходимого значения, перескакивать цифры или даже использовать вместо символов специально назначенные слова^{^[36]} ]2, 10[.

2.3.5. Объекты

SCRIPT — вставка скриптов;
APPLET — вставка Java-апплетов;
EMBED — вставка различных объектов: не-HTML документов и media-файлов^{^[37]} [6].

2.3.6. Изображения

Тег IMG определяет вставку изображения. Он не закрывается и может иметь парметры:

TITLE — краткое описание изображения;
SRC — имя или URL;
WIDTH, HEIGHT — размеры;
ALT — альтернативное имя;
VSPACE, HSPACE —размеры горизонтального и вертикального пространства вокруг изображения;
ALIGN —параметры обтекания текстом^{^[38]}.

В качестве примера можно привести запись: <IMG SRC=url ALT="альтернативное имя" TITLE="краткое описание изображения" WIDTH="размеры" HEIGHT="размеры2">

Также изображение можно сделать ссылкой с помощью записи вида: <A HREF=url ><IMG SRC=url></A>^{^[39]} [1, 4].

По итогам данной главы можно сделать вывод, что язык гипертекстовой разметки HTML имеет сложную структуру, состоящую из множества различных элементов, каждый из которых может варьировать свое отображение с помощью параметром. Именно благодаря этому свойству можно придать странице практически любой вид в пределах простейших элементов

Заключение

В рамках данной работы были рассмотрены основы языка HTML и его разновидности HTML5. HTML расшифровывается как HyperText Markup Language и обозначает язык гипертекстовой разметки. HTML является стандартизированным языком разметки документов в Интернете. Большинство web-страниц содержат описание разметки на языке HTML или XHTML. HTML5 является языком HTML 5 версии, и представляет собой язык для представления и структурирования содержимого всемирной паутины. Стандарт был завершен в 2014 году.

Во второй части работы были рассмотрены основные элементы языка HTML, были выделены гиперссылки, текстовые блоки, форматирование текста, объекты и изображения. Для использования гиперссылки применяется тег <а>, для изображения <img>, для списка <UL>. Для текстовых блоков были рассмотрены теги <H1> … </H1>, <H2> … </H2>, … ,<H6> … </H6>, <BR>, <P>, <BLOCKQUOTE> … </BLOCKQUOTE>, <HR>, <SPAN> … </SPAN>, <DIV> … </DIV> и <PRE> … </PRE>. Для форматирования текста были рассмотрены теги <U>, <B>, <I>, <S>, <SMALL>, <BIG>, <EM>, <STRONG>, <MARQUEE>,<BLINK>, <SUP>, <SUB> и <FONT>. Для объектов были рассмотрены теги SCRIPT, APPLET и EMBED.

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

Веру Л. Секреты CSS. Идеальные решения ежедневных задач / Л. Веру. – СПб.: Питер, 2016. – 336 с.
Лабберс П. HTML5 для профессионалов: мощные инструменты для разработки современных веб-приложений / П. Лабберс, Б. Олберс, Ф. Салим. – М.: Вильямс, 2011. – 272 с.
Макфарланд Д. Новая большая книга CSS / Д. Макфарланд. – СПб.: Питер, 2016. – 720 с.
Мирный А. HTML5 против Flash-видео / А. Мирный // UP Special : журнал. – 2010. – № 5. – С. 42 – 45.
Никсон Р. Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5 / Р. Никсон. – СПб.: Питер, 2015. – 688 с.
Прохоренок П. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера / П. Прохоренок, В. Дронов. – СПб.: БХВ-Петербург, 2015. – 766 с.
Роббинс Д. HTML5. Карманный справочник / Д. Роббинс. – М.: Вильямс, 2015. – 192 с.
Титтел Э.,HTML, XHTML и CSS для чайников / Э. Титтел, Д. Ноубл. – М.: Диалектика, 2011. – 400 с.
Фримен Э. Изучаем HTML, XHTML и CSS / Э. Фримен. – СПб.: Питер, 2012. – 656 с.
Фримен Э. Изучаем HTML, XHTML и CSS / Э. Фримен, Э. Фримен. – СПб.: Питер, 2014. – 737 с.
Хольцнер С. HTML5 за 10 минут / С. Хольцнер. – М.: Вильямс, 2011. – 384 с.
Шафер С. HTML, XHTML и CSS. Библия пользователя / С. Шафер. – М.: Диалектика, 2010. – 656 с.

Макфарланд Д. Новая большая книга CSS / Д. Макфарланд. – СПб.: Питер, 2016. – С. 362. ↑
Никсон Р. Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5 / Р. Никсон. – СПб.: Питер, 2015. – С. 72. ↑
Роббинс Д. HTML5. Карманный справочник / Д. Роббинс. – М.: Виль-ямс, 2015. – С. 46. ↑
Роббинс Д. HTML5. Карманный справочник / Д. Роббинс. – М.: Виль-ямс, 2015. – С. 26. ↑
Никсон Р. Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5 / Р. Никсон. – СПб.: Питер, 2015. – С. 462. ↑
Никсон Р. Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5 / Р. Никсон. – СПб.: Питер, 2015. – С. 362. ↑
Макфарланд Д. Новая большая книга CSS / Д. Макфарланд. – СПб.: Питер, 2016. – С. 337. ↑
Хольцнер С. HTML5 за 10 минут / С. Хольцнер. – М.: Вильямс, 2011. – С. 274. ↑
Фримен Э. Изучаем HTML, XHTML и CSS / Э. Фримен. – СПб.: Питер, 2012. – С. 274. ↑
Хольцнер С. HTML5 за 10 минут / С. Хольцнер. – М.: Вильямс, 2011. – С. 16. ↑
Макфарланд Д. Новая большая книга CSS / Д. Макфарланд. – СПб.: Питер, 2016. – С. 537. ↑
Хольцнер С. HTML5 за 10 минут / С. Хольцнер. – М.: Вильямс, 2011. – С. 164. ↑
Лабберс П. HTML5 для профессионалов: мощные инструменты для разработки современных веб-приложений / П. Лабберс, Б. Олберс, Ф. Са-лим. – М.: Вильямс, 2011. – С. 174. ↑
Веру Л. Секреты CSS. Идеальные решения ежедневных задач / Л. Веру. – СПб.: Питер, 2016. – С. 227. ↑
Лабберс П. HTML5 для профессионалов: мощные инструменты для разработки современных веб-приложений / П. Лабберс, Б. Олберс, Ф. Са-лим. – М.: Вильямс, 2011. – С. 38. ↑
Мирный А. HTML5 против Flash-видео / А. Мирный // UP Special : жур-нал. – 2010. – № 5. – С. 42. ↑
Мирный А. HTML5 против Flash-видео / А. Мирный // UP Special : жур-нал. – 2010. – № 5. – С. 42. ↑
Прохоренок П. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера / П. Прохоренок, В. Дронов. – СПб.: БХВ-Петербург, 2015. – С. 268. ↑
Шафер С. HTML, XHTML и CSS. Библия пользователя / С. Шафер. – М.: Диалектика, 2010. – С. 383. ↑
Титтел Э.,HTML, XHTML и CSS для чайников / Э. Титтел, Д. Ноубл. – М.: Диалектика, 2011. – С. 280. ↑
Прохоренок П. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера / П. Прохоренок, В. Дронов. – СПб.: БХВ-Петербург, 2015. – С. 375. ↑
Мирный А. HTML5 против Flash-видео / А. Мирный // UP Special : жур-нал. – 2010. – № 5. – С. 43. ↑
Шафер С. HTML, XHTML и CSS. Библия пользователя / С. Шафер. – М.: Диалектика, 2010. – С. 372. ↑
Фримен Э. Изучаем HTML, XHTML и CSS / Э. Фримен, Э. Фримен. – СПб.: Питер, 2014. – С. 285. ↑
Мирный А. HTML5 против Flash-видео / А. Мирный // UP Special : жур-нал. – 2010. – № 5. – С. 43. ↑
Титтел Э.,HTML, XHTML и CSS для чайников / Э. Титтел, Д. Ноубл. – М.: Диалектика, 2011. – С. 286. ↑
Титтел Э.,HTML, XHTML и CSS для чайников / Э. Титтел, Д. Ноубл. – М.: Диалектика, 2011. – С. 88. ↑
Прохоренок П. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера / П. Прохоренок, В. Дронов. – СПб.: БХВ-Петербург, 2015. – С. 276. ↑
Веру Л. Секреты CSS. Идеальные решения ежедневных задач / Л. Веру. – СПб.: Питер, 2016. – С. 48. ↑
Прохоренок П. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера / П. Прохоренок, В. Дронов. – СПб.: БХВ-Петербург, 2015. – С. 274. ↑
Шафер С. HTML, XHTML и CSS. Библия пользователя / С. Шафер. – М.: Диалектика, 2010. – С. 268. ↑
Веру Л. Секреты CSS. Идеальные решения ежедневных задач / Л. Веру. – СПб.: Питер, 2016. – С. 372. ↑
Макфарланд Д. Новая большая книга CSS / Д. Макфарланд. – СПб.: Питер, 2016. – С. 488. ↑
Мирный А. HTML5 против Flash-видео / А. Мирный // UP Special : жур-нал. – 2010. – № 5. – С. 44. ↑
Лабберс П. HTML5 для профессионалов: мощные инструменты для разработки современных веб-приложений / П. Лабберс, Б. Олберс, Ф. Са-лим. – М.: Вильямс, 2011. – С. 185. ↑
Фримен Э. Изучаем HTML, XHTML и CSS / Э. Фримен, Э. Фримен. – СПб.: Питер, 2014. – С. 379. ↑
Прохоренок П. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера / П. Прохоренок, В. Дронов. – СПб.: БХВ-Петербург, 2015. – С. 388. ↑
Мирный А. HTML5 против Flash-видео / А. Мирный // UP Special : жур-нал. – 2010. – № 5. – С. 45. ↑
Веру Л. Секреты CSS. Идеальные решения ежедневных задач / Л. Веру. – СПб.: Питер, 2016. – С. 301. ↑