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

Введение

HTML (HyperText Markup Language), либо «язык гипертекстовой разметки» — стандартизированный язык разметки документов во Глобальной сети. Крупная часть интернет-страниц использует язык HTML для описания разметки, либо XHTML. Язык HTML интерпретируется браузерами; в итоге интерпретации получаем форматированный текст, который выводится на экран монитора компьютера либо дисплей мобильного устройства.

Язык HTML считается приложением SGML (стандартного обобщённого языка разметки) и соответствует интернациональному стандарту ISO 8879.

Во глобальной сети, при помощи браузерам, HTML-страницы передаются по протоколам HTTP либо HTTPS от сервера, в виде обычного текста либо с использованием шифрования.

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

HTML не задает определенные и точные атрибуты форматирования документа. Конкретный вид документа окончательно определяет лишь программа-браузер на компьютере пользователя Интернета.

HTML также не считается языком программирования, но интернет-страницы могут включать в себя интегрированные программы-скрипты на языках Javascript и Visual Basic Script и программы-апплеты на языке Java.

В том числе, если вы не намереваетесь в дальнейшем редактировать "вручную" текст HTML (предполагая применять графические редакторы), знание языка HTML даст вам возможность как лучше применять данные средства, так и увеличит ваши шансы сделать HTML-документ наиболее легкодоступным и "читаемым" при просмотре браузерами различных компаний.

Язык HTML был изобретен учёным из Британии, Тимом Бернерсом-Ли приблизительно в 1986—1991 годах в Швейцарии, в Женеве, в стенах европейской организация по ядерным исследованиям (ЦЕРН). HTML создавался как язык для обмена научной и тех. документацией, удобный для применения людьми, не владеющими особенными умениями в области вёрстки. HTML удачно справлялся с проблемой трудности SGML при помощи определения семантических элементов (дескрипторов) и маленького комплекта структурных и семантических элементов. Дескрипторы еще носят название «тегов». При помощи HTML условно не трудно сформировать простой, однако красиво оформленный документ. Кроме упрощения структуры документа, HTML поддерживает гипертекст. Возможности мультимедиа были добавлены позднее.

Вначале язык HTML задумывался и создавался как средство форматирования документов в отсутствии их привязки к средствам воспроизведения (отображения) и структурирования. В совершенстве, текст с разметкой HTML обязан был воспроизводиться на оборудовании с разной тех. оснащённостью (монохроматический экран органайзера, многоцветный экран современного компьютера, ограниченный по размерам экран мобильного телефона либо устройства и программы голосового воспроизведения слов) в отсутствии стилистических и структурных искажений. Но современное использование HTML очень сильно различается от начальной задачи. К примеру, тег <table> специализирован для создания в документах таблиц, однако совсем нередко употребляется и для оформления размещения элементов на странице. Через некоторое время главная идея платформонезависимости языка HTML была принесена в жертву передовым нуждам в мультимедийном и графическом оформлении.

1. Создание Интернет страницы

Документы могут быть сделаны при помощи любого текстового редактора либо специализированных HTML-редакторов и конвертеров. Выбор редактора, который станет использоваться для создания HTML-документов, зависит только от понятия удобства и собственных пристрастий каждого автора.

К примеру, HTML редакторы, такие, как "Netscape Navigator Gold" фирмы Netscape, позволяют создавать документы графически с внедрением технологии WYSIWYG (What You See Is What You Get). С другой стороны, большая часть обычных средств для создания документов имеют конвертеры, позволяющие изменять документы к формату HTML.

2. Основные положения

Все тэги HTML начинаются с "<" (левой угловой скобки) и заканчиваются символом ">" (правой угловой скобки). Как правило, есть стартовый тэг и завершающий тэг. Для образца приведем тэги заголовка, характеризующие текст, находящийся внутри стартового и завершающего тэга и описывающий заголовок документа, регистр при вводе текста не имеет значения:

<TITLE> Заголовок документа </TITLE> либо <title> Заголовок документа </title>.

Завершающий тэг смотрится также, как стартовый, и различается от него прямым слешем перед текстом внутри угловых скобок. В предоставленном образце тэг <TITLE> говорит Интернет-браузеру о применении формата заголовка, а тэг </TITLE> - о завершении текста заголовка.

Некоторые тэги, такие, как <P> (тэг, устанавливающий отступ), не требуют завершающего тэга, однако его внедрение дает начальному тексту документа улучшенную читаемость и структурируемость.

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

3. Структура документа

Когда Интернет-браузер получает документ, он описывает, как документ обязан быть интерпретирован. Самый 1-ый тэг, который встречается в документе, обязан быть тэгом <HTML>. Этот тэг сообщает Интернет-браузеру, что ваш документ написан с использованием HTML. Минимальный HTML-документ станет выглядеть так:

<HTML>

...тело документа...

</HTML>

Заголовочная часть документа <HEAD>. Тэг заголовочной части документа обязан быть применен сразу после тэга <HTML> и более нигде в теле документа. Этот тэг дает общее описание документа. Избегайте располагать какой-либо текст внутри тэга <HEAD>. Стартовый тэг <HEAD> помещается конкретно перед тэгом <TITLE> и иными тэгами, описывающими документ, а завершающий тэг </HEAD> располагается сразу после завершения описания документа. К примеру:

<HTML>

<HEAD>

<TITLE>Перечень служащих</TITLE>

</HEAD>

Заголовок документа <TITLE>. Большая часть Интернет-браузеров показывают содержание тэга <TITLE> в заголовке окна, содержащего документ и в файле закладок, ежели он поддерживается Интернет-браузером. Заголовок, ограниченный тэгами <TITLE> и </TITLE>, располагается внутри <HEAD>-тэгов, как показано выше на образце. Заголовок документа не возникает при отображении самого документа в окне.

4. Тэги тела документа

Тэги тела документа идентифицируют отображаемые в окне составляющие HTML-документа. Тело документа имеет возможность содержать гиперссылки на остальные документы, текст и иную форматированную информацию.

Тело документа <BODY>. Тело документа обязано находиться меж тэгами <BODY> и </BODY>. Это та часть документа, которая отражается как текстовая и графическая (смысловая) информация вашего документа.

Значения заголовков <Hx>. Когда пишется HTML-документ, текст структурно распределяется на просто текст, заголовки частей текста, заголовки наиболее высокого уровня и т.д. 1-ый уровень заголовков (самый большой) классифицируется цифрой 1, последующий - 2, и т.д. Большая часть браузеров поддерживает интерпретацию 6 уровней заголовков, характеризуя любому из них свой стиль. Заголовки выше шестого уровня никак не считаются стандартом и могут не поддерживаться браузером. Заголовок самого верхнего уровня имеет признак "1". Синтаксис заголовка уровня 1 последующий:

<H1> Заголовок первого уровня </H1>

Заголовки иного уровня могут быть представлены в едином случае так:

<Hx> Заголовок x-го уровня </Hx>, x - цифра от 1 до 6, характеризующая уровень заголовка.

Тэг абзаца <P>.

В отличии от основной массы текстовых процессоров, в HTML-документе традиционно игнорируются символы возврата каретки. Физический разрыв абзаца может пребывать в любом месте начального текста документа (для удобства его читаемости). Но браузер делит абзацы лишь при наличии тэга <P>. Ежели вы не поделите абзацы тэгом <P>, ваш документ станет выглядеть как один большой отступ.

Дополнительные характеристики тэга <P>:

<P ALIGN=left|center|right>, позволяют выравнивать отступ по левому краю, центру и правому краю соответственно.

Центрирование частей документа. Вы сможете центрировать все составляющие документа в окне браузера. Для этого можно применять тэг <CENTER>.

Все составляющие меж тэгами <CENTER> и </CENTER> будут пребывать в центре окна. Тэг переформатирования <PRE>. Тэг переформатирования, <PRE>, позволяет изображать текст со специфичным форматированием на экране. Предварительно сформатированный текст заканчивается завершающим тэгом </PRE>. Внутри предварительно сформатированного текста разрешается применять:

а) перевод строчки

б) знаки табуляции (сдвиг на 8 знаков на право)

в) непропорциональный шрифт, устанавливаемый браузером.

Внедрение тэгов, характеризующих формат абзаца, таких как <Hx> либо <ADDRESS>, станет игнорироваться браузером при помещении их меж тэгами <PRE> и </PRE>.

Дальше идет некоторое количество наиболее подробный пример, организованный из прошлых тегов:

<HTML>

<HEAD>

<TITLE> Перечень группы</TITLE>

</HEAD>

<BODY>

<H2> Перечень группы 6-М-11 </H2>

<H3> Составлено: 1 сентября 2013</H3>

Этот перечень охватывает имена, фамилии и отчества. <P>

Перечень имеет возможность быть применен лишь в служебных целях. <P>

</BODY>

</HTML>

Заголовок "Перечень группы" не отображен браузером как часть документа. Он покажется в заголовке окна браузера.

Разрыв строчки <BR>. Тэг <BR> оповещает браузер о разрыве строчки. Лучший пример применения предоставленного тэга - форматированный адрес либо любая иная очередность строчек, где браузер обязан отображать их одну перед другой. К примеру:

Алексей Ярцев<BR> Дмитровское шоссе,<BR> д.9Б, кабинет 326<BR>

Дополнительный параметр позволяет увеличить возможности тэга <BR>.

<BR CLEAR=left|right|all>

Этот параметр позволяет не просто выполнить перевод строчки, а расположить последующую строчку, начиная с чистой левой (left), правой (right) либо обоих (all) границ окна браузера. К примеру, ежели рядом с текстом слева встречается изображении, то можно применять тэг <BR> для смещения текста ниже изображения:

<p> Как вы можете видеть, предоставленная схема показывает связь<BR CLEAR=left> <img src="#"justify">Неразрывная строчка <NOBR>. Ежели вы не желаете, чтоб браузер автоматически переносил строчку, то вы сможете обозначить её тэгами <NOBR> и </NOBR>. В данном случае браузер не станет переносить строчку даже если она выходит из-за границы экрана; за место этого браузер позволит горизонтально прокручивать окно. К примеру: <NOBR> Данная строчка считается самой длинной строчкой документа, которая никак не допускает какого-либо разбиения, где бы то ни было </NOBR>

Если же вы желаете все же позволить разбиение данной строчки на 2, однако в строго запланированном месте, то вставьте тэг <WBR> в это место. К примеру: <NOBR> Данная строчка считается самой длинной строчкой документа, <WBR> которая не допускает какого-либо разбиения, где бы то ни было </NOBR>

«Данная строчка считается самой длинной строчкой документа, которая не допускает какого-либо разбиения, где бы то ни было.»

Цитата <BLOCKQUOTE>. Этот тэг предназначен для обозначения в документе цитаты из иного источника. Текст, обозначенный тэгом <BLOCKQUOTE>, отходит от левого края документа на 8 пробелов. К примеру: На открытии данной конференции глава консульства сказал: <P> <BLOCKQUOTE> Сегодня один из величайших дней для нашей фирмы. <BR> Мы открыли новейшую технологию, позволяющую нашим покупателям повысить продуктивность их настольных систем в несколько раз. </BLOCKQUOTE>

«При отображении браузером этот текст будет смотреться так:

На открытии данной конференции глава консульства сказал:

Сегодня один из величайших дней для нашей фирмы. Мы открыли новейшую технологию, позволяющую нашим покупателям повысить продуктивность их настольных систем в несколько раз.»

5. Описание создания сайта

Гиперссылки

Гиперссылки считаются главным компонентом, делающим WEB симпатичным для юзеров. Добавляя гиперссылки (дальше - гиперссылки), вы делаете комплект документов связанным и структурированием, что позволяет юзеру получать нужную ему информацию очень быстро и комфортно.