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

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

В работе рассматривается язык разметки гипертекста HTML (Hypertext Markup Language). Первая спецификация этого универсального и общедоступного языка разметки - HTML была утверждена в 1991 году. HTML стал стандартом и одновременно «корнем» для всех разрабатываемых Web страничек.

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

Современные Web-страницы уже не обходятся одним только HTML. Его гармонично дополняют средства динамического HTML: скрипт языки JavaScript и/или VBScript, каскадные таблицы стилей (CSS), иногда присутствуют Java-апплеты. То есть на любой странице должна присутствовать HTML-верстка - расположение элементов дизайна текста и необходимые скрипты - как расширение HTML в области расположения и описания свойств различных объектов.

Объектом исследования является процесс создания сайта с помощью HTML.

Предмет – язык гипертекстовой разметки HTML как средство создания сайта.

Цель работы состоит в общей характеристике языка разметки гипертекста HTML.

В соответствии с поставленной целью задачи работы сформулированы следующие:

обзор основных сведений о HTML;
анализ основных элементов HTML-документа и разметки контента;
анализ создания документов в стандарте HTML.

1. Основные сведения о языке HTML

1.1 Понятие о языке гипертекстовой разметки HTML

Язык HTML (HyperText Markup Language, язык разметки гипертекста) относится к числу так называемых языков разметки текста (markup languages). Термин «разметка» относится к общей служебной информации, которая не отображается вместе с документом, но определяет, как должны выглядеть определенные части документа [5, 9]. Например, можно потребовать, чтобы слово выделялось полужирным шрифтом или курсивом, печатать отдельный абзац специальным шрифтом или делать заголовки более крупными.

HTML (Hypertext Markup Language, Язык разметки гипертекста) — это компьютерный язык, который лежит в основе World Wide Web. HTML основан на стандарте SGML гипертекстовый язык разметки документов для их представления в Web. Стандарты языка HTML, одного из ключевых стандартов Web, разрабатываются и поддерживаются консорциумом W3C. Основателем этого международного консорциума является Тим Бернес-Ли (Tim Berners-Lee). Консорциум помимо создания стандартов форматирования, является центром разработки Semantic Web (семантическая сеть). Средствами языка HTML обеспечивается форматная разметка документов, определяются гиперсвязи между документами и/или их фрагментами [1].

В качестве основы написания кода HTML был выбран обычный текстовый файл. Таким образом, гипертекстовая база данных в концепции WWW — это набор текстовых файлов, размеченных на языке HTML, который определяет форму представления информации (разметка) и структуру связей между этими файлами и другими информационными ресурсами (гипертекстовые ссылки).

Разработчики HTML смогли решить две задачи [11]:

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

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

Еще одним важным моментом, который оказал влияние на судьбу HTML, стало то, что за основу был выбран обычный текстовый файл. Среда редактирования HTML - это нейтральная полоса между простейшим текстовым файлом и приложением WYSIWYG (what you see is what you get – что вы видите, то и получаете) [12]. Выбор среды редактирования дает все преимущества текстового редактирования.

Гипертекстовые ссылки, которые устанавливают связи между текстовыми документами, понемногу стали соединять самые разные информационные ресурсы, в том числе звуковые и видеоматериалы. Система гиперссылок HTML дает возможность построить систему взаимосвязанных документов по различным критериям. Язык HTML включает в состав команды (теги), которые позволяют управлять формой и размером шрифтов, размером и расположением картинок, позволяет переходить от фрагмента текста или иллюстрации к другим html - документом – так называемую гипертекстовую ссылку.

Документ в формате html – это текстовый файл, содержащий всю необходимую информацию об отображаемой на экране информации. Для управления сценариями просмотра страниц Website (гипертекстовой базы данных, выполненной в технологии World Wide Web) можно использовать языки программирования этих сценариев, например, JavaScript, Java и VBScript. Формы для ввода пользователем данных, которые впоследствии обрабатываются и другой информации, могут быть обработаны с помощью специальных серверных программ (например, на PHP либо Perl). HTML дает возможность размещать гипертекстовые ссылки и интерактивные кнопки на страницах, которые соединяют веб-страницы с другими страницами того же веб-сайта, а также с другими веб-сайтами по всему миру.

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

1.2 Структура файла в формате HTML

Главными составляющими HTML можно назвать [14]:

Тег (tag). Тег HTML – это компонент, каковой передает команду Web- браузеру исполнить конкретную задачу типа формирования абзаца или вставки изображения.
Атрибут (либо аргумент). Атрибут HTML меняет тег. К примеру, можно выровнять абзац либо изображение изнутри тега.
Значение. Значения присваиваются атрибутам и определяют вносимые изменения. Например, если для тега используется атрибут выравнивания, то можно указать значение этого атрибута. Значения могут быть текстовыми, типа left или right, а также числовыми, как например ширина и высота изображения, где значения определяют размер изображения в пикселях.

Теги являют собой зарезервированные последовательности символов, начинающиеся с < (знака меньше) и заканчивающиеся > (знаком больше). Закрытие тега отличается от открытия только наличием символа '/'.

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

Изучаемый элемент обладает лишь открывающий тег <!doctype>, каковой начинается восклицательным знаком [17]. В указанном теге располагаются сведения о виде документа.

Следующий тэг, каковой можно встретить в документе, должен быть тэгом <HTML>. Данный тэг сообщает WEB-браузеру, что этот документ пишется с применением HTML. Минимальный HTML-документ может иметь следующий вид [2, 8]:

<HTML>

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

</HTML>

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

<HTML>

<HEAD>

<TITLE>Список сотрудников</TITLE>

</HEAD>

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

Пример 1. Структура элементарного WEB-документа

<!doctype html public"-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Title</title>

</head>

<body>

Hello, world!

</body>

</html>

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

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

Как можно заметить из примера 1, все сведения о форматировании документа сосредоточены в его фрагментах, которые заключены между знаками "<" и ">". Данный фрагмент (к примеру, <html>) именуется меткой (по-английски — tag, читается "тэг"). Большая часть HTML-меток — парные, другими словами на всякую открывающую метку вида <tag> существует своя закрывающая метка типа </tag> с таким же именем, однако с приставкой "/" [19]. Метки можно вводить как прописными, так и строчными буквами.

2. Основные элементы HTML- документа и разметка контента

2.1 Заголовки

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

Организация структуры контента предусматривает его разбивку на логические блоки. Первым среди указанных блоков, чаще всего, следует заголовок.

Элементы Н1-Н6 нужны для определения заголовков разных уровней в составе документа. H1 задает заголовок первого, либо верхнего, уровня, Н2 — заголовок второго уровня, Н3 - третьего уровня и т. Д [2, 9].

Зачастую, раздел BODY может начинаться с заголовка первого уровня, включающего в состав тот же текст, что и элемент TITLE, который находится в разделе HEAD. В другой части документа заголовки второго уровня (Н2) применяются для определения заголовков разделов, НЗ - для подразделов и т. д.

В большей части браузеров заголовки отображаются полужирным шрифтом: H1 - наибольшего размера, а Н6 - наименьшего. По умолчанию к заголовкам может примениться выравнивание по левому краю, но если потребуется они могут находиться по центру или выровнены по правому краю документа.

Тип выравнивания может задаваться при помощи атрибута ALIGN, допустимыми значениями какового являются LEFT, RIGHT, CENTER и JUSTIFY [3, 4]. Если задано значение JUSTIFY, то заголовки, длина каковых превышает ширину окна браузера, располагаются так, что их левая и правая границы совпадают с границами окна. Примеры заголовков разных уровней указаны в примере 2. Заголовок третьего уровня показывается с подчеркиванием.

Пример 2. Документ с заголовками разных уровней

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTМL>

<HEAD>

<TIТLE>Уровни заголовков</TITLE>

</HEAD>

<ВODY>

<Н1>Заголовок 1-го уровня (H1)</Н1>

<Н2 ALIGN="СЕNTER"> Заголовок 2-го уровня (H2)</H2>

<H3><U>Заголовок 3-го уровня (H3)</U></H3>

<Н4 ALIGN="RIGНТ"> Заголовок 4-го уровня (H4)</H4>

<H5> Заголовок 5-го уровня (H5)</Н5>

<Н6> Заголовок 6-го уровня (H6)</H6>

</BОDY>

</НТML>

2.2 Встроенные и блочные элементы

Все элементы, отвечающие за представление контента, принято разделять на две большие группы: элементы уровня блока, или блочные (block) и встроенные, или элементы уровня текста (inline) [15].

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

По умолчанию блоки могут начинаться с новой строки и отделяются от предыдущего и последующего блока строкой. Блоки могут быть вложены друг в друга. Блочные элементы могут включать в состав встроенные элементы.