Автор Анна Евкова
Преподаватель который помогает студентам и школьникам в учёбе.

ОСНОВЫ ПРОГРАММИРОВАНИЯ НА ЯЗЫКЕ HTML (Основы языка программирования HTML)

Содержание:

Введение

Всемирная Глобальная Сеть на данный момент не только соединяет пользователей целого мира, но и упрочила свои позиции в виде новых технологий на персональных компьютерах. Сейчас, пользователь, который имеет компьютерное устройство, становится обладателем Internet-технологии в готовом виде, независимо от того, соединен его компьютер к Сети или нет.

Другими словами, возможности, необходимые для работы с Сетью, стали использоваться и в иных целях, с нею не связанных, а среди программного обеспечения, устанавливаемого на персональные компьютеры, приложения для Internet занимают свое почетное место.

Актуальность данный темы состоит в что, HTML давно является не просто языком программирования. Пользователь, осваивающий данный язык, имеет возможность создавать сложные вещи простыми способами и, что самое важное, быстро, что в компьютерном мире не так уж и мало. Гипертекст подходит для введения компонентов мультимедиа в традиционные документы. На практике, именно за счет развития гипертекста, большинство юзеров имеет возможность создавать собственные мультимедийные продукты и распространять их на различных носителях. Данные информационные системы, созданные в виде набора HTML-страниц, не нуждаются в разработки специализированных программных средств, так как все нужные инструменты для работы с данными (WEB-браузеры) теперь являются частью традиционного программного обеспечения большинства персональных компьютеров. От пользователя необходимо только выполнить только ту работу, которая относится к тематике разрабатываемого продукта: подготовить тексты, нарисовать рисунки, создать HTML-страницы и продумать связь между ними. HTML является основой моды в Интернете.
Объектом исследования: язык гипертекстовой разметки HTML.

Предметом исследования: изучение возможностей языка гипертекстовой разметки HTML Цель данной работы - изучение языка программирования HTML.

Задачи, поставленные в данной работе:

  1. Рассмотреть основы языка гипертекстовой разметки HTML.
  2. Выявить особенности работы с языком гипертекстовой разметки HTML.
  3. Изучить и проанализировать специальную литературу по теме исследования.

Методы исследования: изучение литературы, анализ, синтез, классификация и обобщение, моделирование.

При изучении данных аспектов были использованы следующие литературные источники:

Глава 1. Основы языка программирования HTML

    1. История появления языка HTML

Первоначальный вариант языка Паскаль[1] был выработан специалистом из Швейцарии Николаусом Виртом в одна тысяча девятьсот шестьдесят восьмом году. Изначально язык должен был служить для задач обучения, так как данный язык был довольно детерминированным, т.е. все повинуется установленным принципам, исключений из них не такое большое количество. Центральные правила: сравнительно незначительное число базовых представлений, обычный синтаксис, быстрый компилятор, предназначенный для перевода исходных текстов в машинный код.

Первоначальный вариант HTML был разработан в одна тысяча девятьсот восемьдесят девятом году Тимом Бенерс-ли для известного в минувшем браузере Mosaic. В то момент ни для языка, ни для браузера не было стоящего применения. В 1993 году возник HTML+, данная версия тоже осталась почти неотмеченной. Начало всеобщего применения гипертекста осуществила версия 2.0, которая возникла в июне 1994 года. Данный год показывал нарастание популярности WWW по всем мире. Основы, входящие в версию 2.0, в большей части используются в настоящее время.

В 1992 г. компания Borland International опубликовала 2 пакета, созданных на языке Паскаль: Borland Pascal 7.0 и Turbo Pascal 7.0. Первый может существовать в 3 разных режимах: обычном и защищенном режимах MS DOS и в системе Windows. Для него требуется около 30 Мбайт на жестком диске и порядка 2 Мбайт оперативной памяти. Турбо Паскаль 7.0 работает исключительно в обыкновенном режиме MS DOS и менее притязателен к характеристикам компьютера. Так как основные элементы, которые будут рассмотрены в данной работе, совпадают в обоих продуктах, в дальнейшем будет употребляться название Турбо Паскаль.

Пакет содержит в себе алгоритмический язык программирования высокого уровня, встроенный редактор и среду, посвященную для отладки и запуска программ. Также, пакет содержит достаточный объем справочной информации (англоязычной). Всем ясно что, языки программирования разделяются на два типа: интерпретаторы и компиляторы. Турбо Паскаль имеет отношение к компиляторам.

В версии 3.0 HTML, которая возникла на год позже, материализовалась вероятность прорисовки математических символов (знаков интервала, бесконечности, дроби, скобок и т.д.) с помощью компонентов языка. Для этой версии был изобретен браузер Arena. На тот момент данный проект являлся тупиковым и не смог получить распространения в дальнейшем.

В 1996 году возник HTML 3.2. Это являлось новаторским решением, в спецификацию языка были включены фреймы, которые стали довольно распространенными у разработчиков WEB-страниц. В настоящее время на основе этой спецификации воплощаются занимательные дизайнерские решения. На деле, почти все действующие браузеры поддерживают версию 3.2, поэтому авторы WEB-страниц не сомневаются в работоспособности всех компонентов.

Наравне с официально признанными спецификациями языка, которые разрабатывались компанией W3C[2] (W3 Консорциум), организации-производители браузеров формировали собственные элементы (расширения). В дальнейшем, некоторые из этих элементов, после принятия всеобщего признания были включены в спецификацию следующих версий языка. Но новаторское решение – фреймы, не были засчитаны в спецификацию 3.2. Но браузеры поддерживали фреймы и большинство книг, причастные к HTML, содержали описание фреймов без упоминания о том, что это своеобразные элементы. Далее фреймы были стандартом де-факто. В версии 4 они уже были включены на абсолютном основании.

И напротив, элементы APPLET и SCRIPT, нужные для расширения HTML иными программными кодами версии 3.2, не имели того значения, которое было призвано сыграть. Это истолковывается тем, что браузеры разных версий по-разному трактовали программы на разных языках JAVA, JAVASCKRIPT, Visual Basic (VBScript). В итоге не удалось получить довольно надежный работающий код, и эти языки использовались любителями HTML в большей части для экспериментов.

Общепризнанная спецификация HTML 4 (Dynamic HTML) возникла в 1997 году. В тот момент уже было очевидно, что последующее развитие гипертекста будет воплощаться за счет скрипт программирования. Это оказалось незначительно более эффективно, чем вводить в язык все новые элементы. Возникшее в то время браузеры (Netscape[3] Navigator 4, Microsoft Internet Explorer 4 и др.) уже довольно надежно интерпретировали программный код (был установлен определенный уровень стандартизации). Однако вопросы у разработчиков еще остались. Для примера можно указать, что многие скрипты начинаются с определения версии браузера, чтобы потом воспользоваться тем или иным фрагментом кода. Бесспорно, что на программиста ложится обязательство тестирования страниц на всех известных в данный момент браузерах.

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

В декабре одна тысяча девятьсот девяносто девятого года выпускается последняя редакция четвертой версии языка разметки гипертекста – HTML 4.01.

В октябре 2014 года была представлена версия HTML5. HTML5 получила линию новейших тегов, но большая часть изменений коснулась поведения браузера в контексте работы DHTML: появилась встроенная поддержка функций перетаскивания элементов (drag-and-drop), возможность рисовать на виртуальном полотне (canvas), управлять просмотром истории, обмениваться сообщениями между страницами, сохранять контекст исполнения и многое другое.

Версия HTML5.1 начала разрабатываться с 17 декабря 2012 года, и была рекомендована к применению с первого ноября 2016 года. Версия HTML 5.2 была представлен общественности четырнадцатого декабря 2017 года. Версия HTML 5.3 была представлена двадцать четвертого декабря 2018 года.

    1. Основные понятия языка HTML

 HTML[4] – это язык гипертекстовой разметки файлов (HyperText Markup Language). С использованием HTML основываются Web-страницы, которые располагаются в глобальной компьютерной сети Интернет. HTML – это не язык программирования в традиционном смысле, он является языком разметки. С использованием HTML текстовый файл разграничивают на блоки смысловой информации (заголовки, параграфы, таблицы, рисунки и т.п.).

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

Особенности HTML[5]-файлов:

1. HTML-файл может включать текст, графику, видео и звук.

2. В общем случае HTML-файл – это один или несколько текстовых файлов, которые содержат расширение .htm или .html.

3. Создавать HTML-файл возможно, как с использованием специализированных программ – редакторо22222в HTML (как пример, FrontPage), так и с использованием всякого текстового редактора (например, блокнота Windows).

4. Просмотреть HTML-документ возможно с поддержкой программ-браузеров (от английского browser), которые показывают файл в соотношении с HTML-разметкой и гарантируют навигацию по гиперссылке. Наиболее часто встречающиеся браузеры это Microsoft Internet Explorer компании Microsoft Corporation и Netscape Navigator компании Netscape Communications Corporation.

5. Если при интерпретации HTML - файла браузер что-либо не понимает, то окно с ошибкой не появляется, а это место в HTML-файле игнорируется и не воспроизводится браузером.

HTML-файл содержит элементы HTML.

Элемент HTML – это скорее всего всего 2 тега (открывающий и закрывающий) и часть файла между ними. Также, есть элементы HTML, содержащие только из один тег (от английского tag).

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

Тег (Tag)[6] — в переводе с английского – ярлык, этикетка. Это стартовый и конечный маркеры элемента. Теги устанавливают границы действия элементов и отгораживают элементы друг от друга. Теги заключаются в угловые скобки, как пример: <HTML>. Конечный тег, если он предусмотрен синтаксисом языка, снабжает­ся косой чертой: </HTML>. Тег определяет тип выводимого элемента HTML (например, заголовок, таблица, рисунок и т.п.). Сам тег не отображается браузером. Тег представляет собой последовательность элементов:

HTML[7]-тег обозначается в угловых скобках и складывается из имени. В последствии за ним может последовать список атрибутов (который для больней части тегов не является обязательным). Теги условно возможно поделить на 2 группы:

- парные теги (которые носят дополнительное название контейнеры) обладают 2 составляющие: открывающий (начальный) и закрывающий (конечный); закрывающий элемент носит такое же наименование, но при написании перед наименованием употребляется косая черта (символ /). Между открывающим и закрывающим элементами может находиться текст файла и другие теги. Часть файла, находящийся между открывающим и закрывающим компонентом тега-контейнера, образуется браузером в соответствии со смыслом тега. Для примера, текст, находящийся между тегами и, сможет быть выведен полужирным начертанием (наименование тега - от английского bold). Сдвоенные теги можно вложить друг в друга, но они не могут пересекаться.

- непарные теги (которые носят дополнительное название автономные) не располагают окончательно элемента. Для их обозначения в отображаемый файл помещается тот или иной компонент. Для примера, тег <IMG SRC=«pict. gif»>, может встретиться в тексте HTML-файла, и вызовет вставку графического изображения из файла pict. Gif.

  • символ левой угловой скобки (<) – начало тега;
  • необязательный символ слеша (/) – символ используется, чтобы обозначить закрывающий тег;
  • имя тега;
  • необязательные атрибуты в открывающем теге;
  • символ правой угловой скобки (>)

Атрибуты[8] в списке отделяются друг от друга одним или несколькими пробелами, либо символами табуляции, либо символами перевода строки; последовательность записи атрибутов несущественна. Существенное множество атрибутов может быть использовано в виде пары наименования атрибута = значение атрибута. Тогда, когда значение атрибута выражает больше чем единичное слово либо единичное число, его необходимо вывести в одинарные или двойные кавычки. В закрывающих компонентах тегов атрибуты не обозначаются. Атрибуты – необязательный набор параметров, определяющих дополнительные свойства элемента HTML (например, цвет или размер). Атрибут состоит: из имени атрибута; знака равенства (=); значения атрибута – строки символов, заключенной в кавычки

Фрейм (Frame) — область гипертекстового файла со своими полосами прокрутки. Фреймы дают разбивать страницы на прямоугольные зоны, в каждой из которых отражается своя собственная страница. Можно разместить 1 или несколько фреймов на странице (такая страница называется страницей фрей­мов или фреймсет (frameset)).

Форма (Form) — область гипертекстового файла, кото­рая нужна для организации обратной связи с пользователями сайта.

Апплет (Applet) — небольшая прикладная программа, передавае­мая на компьютер пользователя в виде отдельного документа и запускаемая при просмотре Web-страницы.

Скрипт (Script) — программа, включенная в состав Web-страни­цы для расширения ее возможностей.

Загрузка (DownLoad)— копирование файла с Web-сервера на компьютер пользователя. Размещение (UpLoad) — копирование файла с компьютера пользователя на Web-сервер — используется при создании собственной Web-страницы (т.е. при ее опубликовании).

Пиксель (Pixel)[9] – самая маленькая цветная точка экрана монитора.

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

Просмотреть HTML-документ возможно с поддержкой программ-браузеров (от английского browser), которые показывают файл в соотношении с HTML-разметкой и гарантируют навигацию по гиперссылке. Наиболее часто встречающиеся браузеры это Microsoft Internet Explorer компании Microsoft Corporation и Netscape Navigator компании Netscape Communications Corporation.

Так как HTML-файл является текстовый файл, его возможно сделать в обычном текстовом редакторе, для примера, в блокноте (Notepad), но это является довольно трудно. Наиболее часто предпочитают выбирать специальные редакторы, созданные как раз для создания HTML-файлов, которые могут позволить вставить теги с использованием клавиш на панели инструментов либо использовав различные команды меню, и задавать атрибуты тегов в диалоговых окнах, в частности используя, Macromedia Dreamweaver, Microsoft Front Page, Home Site и др.

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

Глава 2. Структура HTML-документа

 2.1 Базовые теги и коды символов HTML

Общая структура простейшего документа HTML[10] такова:

<Comment> - комментарий к документу. Не является обязательным.

<Html> - идентификатор всего блока HTML – команд.

<Head> - идентификатор заголовка документа HTML.

<Title> - идентификатор заголовка окна просмотра.

<Body> - идентификатор HTML – команд документа для просмотра.

Далее рассмотрим их более подробно.

HTML-файл формируется в теги. Между данными тегами расположены 2 сегмента: сегмент заголовка и сегмент тела файла. Сегмент заголовка охватывает представление форматов, употребляемых при описании файла, но не отображающихся прямо в окне браузера. Сегмент тела файла включает коренной текст, определённый для изображения браузером, теги форматирования, расположение рисунков, таблиц, гиперссылки и т. д.

HTML-код [11]простейшего файла, подходящего для экспозиции в Интернет, изображается так:

<TITLE> Наша первая страничка TITLE>

Этот код вполне может быть использован в текстовом редакторе Блокнот и сохранен как документ с расширением. Htm или. Html в данном примере файл будет открыт браузером, и установлен на вашем компьютере по умолчанию. Браузер откроет данный файл, показывая в своем окне строку «Самый простой HTML-файл», располагающуюся в сегменте тела файла. Выражение «Наша первая страничка» будет изображаться в строке заголовка браузера.

Раздел HEAD

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

Ниже рассмотрим, возможные теги[12], встречающиеся в документах.

<SRC> - Обусловливает имя файла целиком. Имя, как следует, отражается в заголовке окна браузера. Этот сегмент неизбежен для всякого HTML-файла и может быть употреблен не чаще 1 раза.

<HEAD> - Показывает изначальный адрес текущего файла (URL), который будет изначальной пунктом для расчета относительных адресов внутри файла. Сегмент не содержит конечного тэга. Непременно присутствие хотя бы 1 из аргументов:

<HREF> - показывает базовый адрес (URL) текущего файла.

<TARGET> - показывает имя фрейма, которое должно употребляться в гиперссылках по умолчанию. Это сможет сгодиться, если открыть все ссылки файла в ином фрейме.

<STYLE TYPE= «text/css»> - Применяется для вставки в файл каскадных таблиц стилей (CSS Cascade Style Sheet). TYPE неизбежный атрибут, смыслом которого, как правило, есть «text/css».

<МЕТA> - Сегмент МЕТА употребляется для технического отображения файла. С помощью данного сегмента в заголовок файла вводится добавочная нужная информация, скрытая для пользователя, но иногда просто необходимая для корректной индексации страницы роботами поисковых серверов. Сегмент не располагает конечного тега.

<NAME> - устанавливает имя мета-записи. Имеется масса предопределенных имен, некоторые из которых можно заметить в показанном ниже примере.

<CONTENT> - приписывает значение мета-записи, обусловленной в параметре <NAME>.

Раздел BODY

Данный раздел содержит в себе центральное содержание веб-страницы текста файла, изображения, таблицы и т. п. Сегмент BODY[13] обязан наблюдаться в файле не чаще 1 раза и может содержать данные атрибуты:

MARGINHEIGHT=число - Назначает ширину (в пикселях) верхнего и нижнего полей файла. Используется исключительно в браузерах Netscape

TOPMARGIN= число - Назначает ширину (в пикселях) верхнего и нижнего полей файла. Используется исключительно в браузерах Internet Explorer

MARGINWIDTH= число - Назначает ширину (в пикселях) левого и правого полей файла. Используется исключительно в браузерах Netscape

LEFTMARGIN= число - Назначает ширину (в пикселях) левого и правого полей файла. Используется исключительно в браузерах Internet Explorer

BACKGROUND= URL - Назначает изображение для «заливки» фона (фонового рисунка). Значение задается в абсолютные или относительные адреса изображения

BGCOLOR=цвет - Назначает цвет фона файла.

Microsoft Internet Explorer поддерживает шестнадцать стандартных имен цветов (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow, white)

Иным методом служит употребление кода цвета в виде шестиразрядного шестнадцатеричного числа, задающее насыщенность красной (первые две цифры), зеленой (следующие две цифры) и синей (последние две цифры) составляющей. Насыщенность любой составляющей в шестнадцатеричной форме изменяется от нуля до FF. При задании цвета в качестве значения атрибута некоторого тега перед шестнадцатеричным числом ставится символ #. Например, запись COLOR= «#0000FF» означает синий цвет.

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

TEXT= цвет - Назначает цвет текста в файле

LINK= цвет - Назначает цвет гиперссылок в файле

ALINK= цвет - Назначает цвет подсветки гиперссылок в момент нажатия

VLINK= цвет - Назначает цвет гиперссылок на уже просмотренные файлы.

Коды HTML символов

Для специализированных символов в HTML-стандартах рассчитан специальный метод кодирования (с использованием escape[14]-последовательностей или символьных объектов), который поможет применять данные символы в нужных позициях файла, не разрушая его структуры (это относится, например, к символам <,> и &). Условное определение специального символа (escape-последовательность) возникает символом &, содержит собственно имя специального символа и оканчивается точкой с запятой (как пример, «у условного обозначения для кавычки»). К тому же, взамен имени символа возможно использовать соответствующий ASCII-код (как пример, &#034; у для кавычки).

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

2.2 Создание таблиц в HTML

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

Таблицы в HTML[15] создаются построчно. Все табличные значения задает и определяет ее общие свойства тег: <table>.

По горизонтали, как пример по центру, таблицу возможно выровнять с использованием тега <p align = “centre”>, размещаемого перед <table>.

Тег <table> может иметь атрибуты:

<table border=”5”width=”100”cellpadding=”10”cellspacing=”10”>, где

Border=”5” – ширина боковой грани в пикселях. При нулевом значении рамка исчезает;

Width = “100” – ширина таблицы в пикселях или width=”50%” – ширина таблицы в % по отношению к ширине страницы в окне;

Cellspacing=”10” – ширина фронтальной грани в пикселях:

Cellpadding=”10” – задает размер пустого пространства в пикселях, окружающего данные в ячейке.

Тег <caption></caption> задает заголовок таблицы.

Отображение определенного ряда ячеек (строк) заключается в теги <tr>; содержимое каждой ячейки заключается в теги <th> (обычные ячейки) или <TH>…H> (заголовки). Тег <tr> задает строку таблицы. Следующий тещ <tr> задает следующую строку таблицы. Конечный тег необязателен.

Тег <td> задает ячейку таблицы. Следующий тег <td> определяет следующую ячейку таблицы. Конечный тег необязателен.

Цвет фона ячейки определяется в теге <td>: <td bgcolor= «yellow»>

Непарный тег <th> — задает элемент ячейки, которая является заголовком таблицы. Данный тег обязан быть внутри тега <tr>.

Ячейка-заголовок различается от обычной тем, что текст внутри нее отличается полужирным шрифтом. Цвет фона заголовка определяется: <tr> <th bgcolor= «yellow»> Зaroлoвoк 1.

Ячейки таблицы[16] могут включать текст, изображения, вложенные таблицы и т. д. Не нужно сохранять ячейки таблицы незаполненными; так как если хотя бы какая-то ячейка будет отображаться пустой, необходимо поместить в нее неразрывный пробел.

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

Ячейки таблицы также охватывают несколько строк или столбцов; при изображении данных ячеек можно использовать атрибуты ROWSPAN (ячейка, тег которой заключает этот атрибут, «растягивается» на заданное число строк) и COLSPAN (ячейка «растягивается» на несколько столбцов).

Теги, изображающие таблицы, имеют полный ряд необязательных атрибутов.

Атрибуты тега[17] задают параметры таблицы в целом:

ALIGN = значение - Выравнивание относительно текстового потока; возможны значения left, right и center

BACKGROUND = url - Фоновое изображение для всей таблицы

BGCOLOR = цвет - Фоновый цвет

Глава 3. Форматирование теста, символов, таблицы

3.1 Размещение абзацев, рисунков, гиперссылок в HTML документе

Все теги форматирования символов могут быть как открывающимися, так и закрывающимися элементами и воздействуют на заложенный между ними текст.

Существенным служит тег <FONT>, неизбежно употребляющийся с 1 или несколькими атрибутами, определяющими размер, цвет и гарнитуру шрифта, рассмотрим их ниже:

SIZE = значение - Размер задается как в конфигурации абсолютного значения (число от одного до семи), как и сравнительно величины главного шрифта (в форме +n или -n).

COLOR = цвет – Цвет

FACE = список шрифтов - Гарнитуры для изображения текста; наименования перечисляются в последовательности выбора через запятую, как пример, FACE= «Verdana, Helvetica, Arial, Sans-Serif»

Возможно указать и 1 из гарнитур, но следует понимать, что этот шрифт будет не найден на компьютере пользователя, и таким образом «экзотические» шрифты также отображаться браузером не будут.

Форматирование абзацев[18]

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

Тег (от английского break) разрывает текстовый поток и помещает свежую строку без создания новейшего абзаца. Более одного последовательного тега толкуются как несколько пустых строк. Межстрочный интервал одинарный. Закрывающего элемента тег не имеет, как и атрибутов.

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

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

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

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

<ol>

упорядоченный (нумерованный) список (от английского ordered list)

<ul>

неупорядоченный (маркированный) список (от английского unordered list)

Всякий компонент упорядоченного или неупорядоченного списка содержится в теги <li> (от английского list item). При отображении текста каждый компонент списка будет размещаться с новой строки, отмеченным номером или маркером. Безусловно, списк может иметь заголовок, который задается тегом (от английского listheader). Закрывающие теги и не необходимы.

Многоуровневый список может быть основан с помощью комбинации нумерованных и маркированных списков.

Абзацы возможно сформировать и в виде заголовков уровня (от n=1 до n=6), для него используют теги вида <Hn>... n>. Заголовок 1 уровня отображается самым крупным шрифтом.

Размещение рисунков

Изображения, что отображаются браузером при осмотре веб-страницы, содержаться в отдельных файлах формата gif[19], jpg (jpeg) или png, а в коде страницы помещается ссылка на необходимый документ.

  • Обязательный атрибут:
  • SRC = url - Адрес графического файла (относительный или абсолютный)
  • Основные необязательные атрибуты:
  • ALT = текст - Альтернативный текст, отображаемый в режиме браузера без загрузки изображений (непременно заключается в кавычки)
  • BORDER = значение - Толщина обрамляющей рамки в пикселях, ноль обозначает отсутствие рамки (по умолчанию)
  • BORDERCOLOR = цвет - определяет цвет обрамляющей рамки
  • HEIGHT = значение - Высота изображения в пикселях (по умолчанию оригинальная) либо в % от высоты окна браузера
  • WIDTH = значение - Ширина изображения в пикселях (по умолчанию оригинальная) либо в % от ширины окна браузера
  • HSPACE = значение - Свободное пространство слева и справа от изображения в пикселях
  • VSPACE = значение - Свободное пространство сверху и снизу от изображения в пикселях
  • ALIGN = значение - Выравнивание изображения по горизонтали. Если присутствуют значения LEFT либо RIGHT, изображение подобающим образом будет выровнено по горизонтали, задание данных значений обеспечивает обтекание изображения текстом.

Рассмотрим подробнее абсолютный и относительный способ адресации документа.

Адресация в абсолютной форме применяется при ссылках на ресурсы, расположенных на иных серверах. Универсальный адрес, указывающий местонахождение информационного ресурса, имеет наименование URL (Uniform Resource Locator[20] - унифицированный адрес ресурса). URL содержит две части, поделенных двоеточием. 1 часть свидетельствует о типе сетевого протокола, который зависит от типа ресурса. Для примера, даже если ресурс расположен на WWW-сервере, это протокол http. 2 часть содержит в себе наименование компьютера (сервера) в доменной системе имен и (если требуется) путевое наименование документа. При записи путевого наименовании названия каталогов разбиваются прямой косой чертой (символ /), в наименованиях документов и каталогов разнятся прописные и строчные буквы, пробелы не допускаются.

Гиперссылки

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

Текстовые гиперссылки

Взаимосвязь между HTML-файлами и элементами файлов образуются с помощью тега <a> (от английского anchor[21] - якорь).

Тег используется как для формирования ссылки на иной файл, так и для ссылки на элемент файла.

  • Обязательный атрибут:
  • HREF = url - Адрес целевого файла (также возможно показан в абсолютной и относительной форме)
  • Основные необязательные атрибуты:
  • + - Обозначает находящийся между <A> и A> элемент файла как допустимый элемент для ссылки. В виде значения необходимо латиницей прописать всякое словоуказатель, особенное для этого файла. Как пример, тег РазделI образовывает так нарекаемую метку (закладку) для перевода в разделI. В данном моменте возможно ссылаться на отмеченную зону простым указанием ее наименовании после наименования файла (перед наименованием метки устанавливается #). Таким образом, <AHREF= «Index. html#part1»> К разделуI A> пошлет в раздел «partI» документа Index. html, а <AHREF= «#part2»> К разделуII A> в раздел «partII» данного файла при соблюдении соглашения, что в файле есть соответствующая метка
  • TARGET = «имя» - Имя кадра (фрейма) или окна для обозначения целевого файла. Данный элемент употребляется лишь вместе с параметром HREF. В качестве значения нужно указать либо наименование 1 из имеющихся фреймов, либо 1 из последующих зарезервированных наименований: _self - обозначает, что обусловленный в параметре HREF файл обязан указываться в данном фрейме; _parent - обозначает, что файл обязан указываться во фрейме-родителе данного фрейма (полностью овладеть окном браузера); _blank - обозначает, что файл обязан отражаться в новом окне
  • TITLE= «текст» - Отображает всплывающую подсказку при нацеливании курсора мыши на гиперссылку

Текст и изображения, помещенные посреди тегов, начинает быть активной областью файла, восприимчивой к нажатию мыши, который пробуждает загрузку целевого файла. Текст гиперссылки отличается подчеркиванием и цветами, указанными как значение атрибутов LINK, ALINK, VLINK тега (либо цветом по умолчанию).

Гиперссылки-картинки

Для того чтобы указать гиперссылкой единое изображение, возможно применить тег <A>, только вместо текста (или совместно с текстом) между <A> и A> расположен тег <IMG…>[22] со всеми вытекающими атрибутами.

Карта гиперссылок

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

У тега-контейнера одним-единственным нужным атрибутом это NAME, смыслом которого является имя (как пример, NAME[23]= «mymap», которое необходимо использовать при изображении атрибута USEMAP тега IMG, обрисовывающего изображение, который должен служить картой (кроме того к наименовании карты приписывается слева # ? USEMAP = «#mymap»)

Внутри контейнера любой восприимчивой к передвижению мыши области изображения обязан отвечать тег с атрибутами:

  • COORDS = список - Список через запятую координат активной области (зависит от типа заданной формы области)
  • HREF = url - Адрес целевого файла гиперссылки, связанного с заданной областью
  • SHAPE = форма - Назначает форму активной области. Вероятные значения данного атрибута: circle (окружность - назначается координатами центра и радиусом в пикселях); rect (прямоугольник - назначается координатами левого верхнего и правого нижнего угла); poly (многоугольник - назначается координатами своих вершин). Координаты во всех вариантах начинаются от верхнего левого угла изображения в пикселях, ось Х направлена вправо, ось Y вниз.
  • NOREF - временами бывает необходимо обозначить, что эта область (заданная атрибутом SHAPE и координатами COORDS) не есть активна, реакции на действия мыши нет.

3.2 HTML редакторы

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

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

Редакторы HTML выглядят специализированным программным обеспечением, а это означает, что они дают ряд удобств для написания HTML-разметки. Как пример, подстановку или целые шаблоны страниц, подсветка синтаксиса. WYSIWYG[24] – ответвления работают как конструктор сайтов. Любой редактор эксклюзивен и имеет ряд своих особенностей, достоинств и недостатков.

В том или ином виде HTML можно повстречать на любом сайте Сети, вне зависимости от тематики и специфики работы.

Редактор HTML – это тот обязательный инструмент, программное обеспечение, которое обеспечит программисту:

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

Как пример самого простого редактора HTML можно привети классический «Блокнот» (Notepad) в операционной системе MS Windows, а также его более расширенные аналоги.

Также, можно привести как пример высокопрофессиональных и взаимозависимых сред разработки, в которых специалист может не только ввести нужный код, но и мгновенно увидеть его работу.

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

  • 1 к 3 (для простейшего и для профессионального редактора);
  • 1 к 10;
  • 1 к 30.

Иначе говоря, те же задачи в качественном и хорошем редакторе HTML выполняются в 3 или даже 30 раз быстрее!

Смотря это соотношение, очевидно, почему выбор нужной среды обработки кода имеет такое огромное значение для специалиста и вебмастера. Зачем необходимо тратить время в «Блокноте», если эти задачи можно сделать гораздо быстрее?

К самым популярный редакторам HTML можно отнести:

  • Dreamweaver[25] - хороший визуализированный редактор, в нем присутсвует масса различных функций. Функционал данной программы не ограничивается 1 HTML, программа позволяет составлять стили CSS, работать со скриптами Java, прочими веб-наработками. Самый основной недостаток «Dreamweaver» — это высокая стоимость лицензионной версии. Ввиду завышенной цены эта программа вряд ли нужна новичку, который без сомнения лучше купит малознакомый софт.
  • «Nvu» — еще один хороший редактор HTML, который отличается простотой и функциональностью. В Интернете можно найти много разных советов и инструкций по работе с данной программой, что значительно упрощает процесс обучения новичков.
  • Блокнот - наиболее популярный редактор кода HTML, которым, чаще всего, и пользуется большинство неспециалистов. Notepad прекрасен своей простотой и понятностью. Для незначительных и несущественных правок, малой корректировки, эта программа может считаться самой лучшей! Расширенная версия «Блокнота» — Notepad++[26] может разделять код на строки, выделять элементы кода разным цветом, объединять объекты кода в спрайты, которые для удобства можно свернуть или развернуть.

Заключение

Двадцать первый век - век технологий, именно в нашем веке Интернет надежно вошёл в жизнь общества. Интернет совершенствуется довольно стремительно. Вся информация в Web-браузере отражается в виде Web-страниц, которые являются основной частью internet. WWW или же World Wide Web-глобальная сеть, которая содержит миллионы различных сайтов, на которых располагается различная информация. Для создания страницы необходимо уметь пользоваться языками для написания серверных скриптов, такими как PHP,XML,ASP, Perl, для того чтобы странице придать динамичность используются скрипты VBScript и JavaScript, они помогают производить вычисления, как например работа с датой и временем.

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

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

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

Таким образом, материалы курсовой работы показывают, что поставленные в ней задачи, сформулированные выше во введении, полностью решены.

Библиография

  1. Агулар Р. «HTML и CSS. Основа любого сайта» Издательство: Эксмо, 2010 г.
  2. 2.Ваулина, Ч.Ю. Информатика: толковый словарь / Ч.Ю. Ваулина. – М.: Изд-во Эксмо, 2005.
  3. Дакетт, Д. HTML и CSS. Разработка и дизайн веб-сайтов (+ CD-ROM) / Джон Дакетт. - М.: Эксмо, 2013.
  4. Даккетт Д. «Основы веб-программирования с использованием HTML, XHTML и CSS» 2-е издание. Издательство: Эксмо, 2010г.
  5. Дронов, В. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов / В. Дронов. - М.: БХВ-Петербург, 2014
  6. Иванова Г.С. Технология программирования. – М.: КноРус, 2017г.
  7. Комолова Н.Е., Яковлева Е.С. «HTML. Самоучитель» 2-е издание. Издательство: Питер, 2011г.
  8. Лазаро, И. К. Полный справочник по HTML, CSS и JavaScript / Лазаро Исси Коэн, Джозеф Исси Коэн. - М.: ЭКОМ Паблишерз, 2016
  9. Майерс Г. Искусство тестирование программ. М.: Финансы и статистика, 1982. Гласс Р., Нуазо Р. Сопровождение программного обеспечения, М.: Мир, 2003.
  10. Муссиано Ч. Кеннеди Б. «HTML и XTML. Подробное руководство». 6-е издание. Издательство: Символ-Плюс, 2008г.
  11. Пауэл, Т. HTML: справочник программиста / Т.А. Пауэл, Д. Уитворт. – М.: АСТ, 2015.
  12. Пауэрс, Д. Adobe Dreamweaver, CSS, Ajax и PHP / Дэвид Пауэрс. - М.: БХВ-Петербург, 2014
  13. Петюшкин А.В., HTML. Экспресс-курс. – СПб.: БХВ - Петербург, 2017г.
  14. Пфаффенбергер HTML, XHTML и CSS. Библия пользователя / Пфаффенбергер и др. - М.: Вильямс; Издание 3-е, 2014.
  15. Роганов Е.А, Роганова Н.А. Практическая информатика. Ч.2 - М.: МГИУ, 2012.
  16. Титтел, Э. HTML, XHTML и CSS для чайников / Эд Титтел, Джефф Ноубл. - М.: Диалектика, 2016
  17. Хоумер А. Dynamic HTML Справочник Питер 2016г.
  18. Фримен Э. Изучаем HTML, XHTML и CSS / Фримен Эрик. - М.: Питер, 2013.

Приложение 1

Название

Символ

ASCII

Имя

Табулятор

&#009;

Перевод строки

&#010;

Возврат каретки

&#013;

Пробел

&#032;

Восклицательный знак

!

&#033;

Кавычка

«

&#034;

&quot;

Знак решетка

#

&#035;

Доллар

$

&#036;

Процент

%

&#037;

Амперсанд

&

&#038;

&amp;

Апостроф

'

&#039;

Скобка левая круглая

(

&#040;

Скобка правая круглая

)

&#041;

Звездочка

*

&#042;

Плюс

+

&#043;

Запятая

,

&#044;

Минус

-

&#045;

Точка

.

&#046;

Косой штрих

/

&#047;

Цифры

0-9

&#048; -&#057;

Двоеточие

:

&#058;

Точка с запятой

;

&#059;

Меньше

<

&#060;

Равно

=

&#061;

Больше

>

&#062;

Знак вопроса

?

&#063;

Знак обезьянка

@

&#064;

Прописные буквы

A-Z

&#065; -&#090;

Скобка квадратная левая

[

&#091;

Косой штрих с наклоном вправо

\

&#092;

Скобка квадратная правая

]

&#093;

Степень

^

&#094;

Знак подчеркивания

_

&#095;

Ударение

`

&#096;

Строчные буквы

a-z

&#097; -&#122;

Фигурная скобка левая

{

&#123;

Вертикальный штрих

|

&#124;

Фигурная скобка правая

}

&#125;

Тильда

~

&#126;

Запятая

&#130;

Флорин

ѓ

&#131;

Кавычка нижняя правая

&; #132;

&#132;

Многоточие

&#133;

Крест

&#134;

Двойной крест

&#135;

Крышка

&#136;

Промилле

&#137;

Параграф

Љ

&#138;

Символ меньше

<

&#139;

Большое ОЕ

Њ

&#140;

Одинарная кавычка слева

`

&#145;

Одинарная кавычка справа

'

&#146;

Кавычка слева

&#147;

Кавычка справа

&#148;

Крупная точка

*

&#149;

Короткий дефис

-

&#150;

Длинный дефис

-

&#151;

Тильда

˜

&#152;

Торговый знак

&#153;

&reg;

љ

&#154;

Символ больше

>

&#155;

Маленькое ое

њ

&#156;

Большой Y-умлаут

џ

&#159;

Неразрывный пробел

&#160;

&nbsp;

Перевернутый восклицательный знак

Ў

&#161;

&ixcl;

Цент

ў

&#162;

&cent;

Фунт

Ј

&#163;

&pound;

Валюта

¤

&#164;

&curren;

Иена

Ґ

&#165;

&yen;

Прерванный штрих

¦

&#166;

&brvbar;

Параграф/Раздел

§

&#167;

&sect;

Точки умлаута

Ё

&#168;

&uml;

Копирайт

©

&#169;

&copy;

Порядковое числительное женского рода

Є

&#170;

&ordf;

Французская кавычка слева

«

&#171;

&laquo;

Не/Нет

¬

&#172;

&not;

Разрыв в месте переноса

-

&#173;

&shy;

Зарегистрированный торговый знак

®

&#174;

&reg;

Надчеркивание

Ї

&#175;

&macr;

Градус

°

&#176;

&deg;

Плюс-минус

±

&#177;

&plusmn;

Вторая степень

І

&#178;

&sup2;

Третья степень

і

&#179;

&sup3;

Маленькое а с ударением

ґ

&#180;

&acuate;

Мю

µ

&#181;

&micro;

Параграф

&#182;

&para;

Средняя точка

·

&#183;

&middot;

Цедиль

ё

&#184;

&cedil;

Первая степень

&#185;

&sup1;

Порядковое числительное мужского рода

є

&#186;

&ordm;

Французская кавычка справа

«

&#187;

&raquo;

Дробь ј

ј

&#188;

&frac14;

Дробь Ѕ

Ѕ

&#189;

&frac12;

Дробь ѕ

ѕ

&#190;

&frac34;

Перевернутый вопросительный знак

ї

&#191;

&iquest;

Большая А с ударением

А

&#192;

&Agrave;

Большая А с ударением

Б

&#193;

&Aacute;

Большая А с крышкой

В

&#194;

&Acirc;

Большая А с тильдой

Г

&#195;

&Atilde;

Большая А-умлаут

Д

&#196;

&Auml;

Большая А с кружком

Е

&#197;

&Aring;

Большое АЕ

Ж

&#198;

&AElig;

Большая С цедил

З

&#199;

&Ccedil;

Большая Е с ударением

И

&#200;

&Egrave;

Большая Е с ударением

Й

&#201;

&Eacute;

Большая Е с крышкой

К

&#202;

&Ecirc;

Большая Е-умлаут

Л

&#203;

&Euml;

Большая I с ударением

М

&#204;

&Igrave;

Большая I c крышкой

О

&#206;

&Icirс;

Большая I-умлаут

П

&#207;

&Iuml;

Таблица 1. Коды HTML символов

  1. Пауэл, Т. HTML: справочник программиста / Т.А. Пауэл, Д. Уитворт. – М.: АСТ, 2015.

  2. Иванова Г.С. Технология программирования. – М.: КноРус, 2017г

  3. Дронов, В. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов / В. Дронов. - М.: БХВ-Петербург, 2014

  4. Ваулина, Ч.Ю. Информатика: толковый словарь / Ч.Ю. Ваулина. – М.: Изд-во Эксмо, 2005.

  5. Пауэл, Т. HTML: справочник программиста / Т.А. Пауэл, Д. Уитворт. – М.: АСТ, 2015.

  6. Петюшкин А.В., HTML. Экспресс-курс. – СПб.: БХВ - Петербург, 2017г.

  7. Петюшкин А.В., HTML. Экспресс-курс. – СПб.: БХВ - Петербург, 2017г.

  8. Фримен Э. Изучаем HTML, XHTML и CSS / Фримен Эрик. - М.: Питер, 2013.

  9. Хоумер А. Dynamic HTML Справочник Питер 2016г

  10. Комолова Н.Е, Яковлева Е.С. "HTML. Самоучитель "2-е издание. Издательство: Питер, 2011 г.

  11. Дакетт Д. "Основы веб-программирования с использованием HTML, XHTML и CSS " 2-е издание. Издательство: Эксмо, 2010 г.

  12. Титтел, Э. HTML, XHTML и CSS для чайников / Эд Титтел , Джефф Ноубл. - М.: Диалектика, 2016

  13. Муссиано Ч. Кеннеди Б. "HTML и XHTML. Подробное руководство" 6-е издание. Издательство: Символ-Плюс, 2008 г

  14. Комолова Н.Е, Яковлева Е.С. "HTML. Самоучитель "2-е издание. Издательство: Питер, 2011 г.

  15. Титтел, Э. HTML, XHTML и CSS для чайников / Эд Титтел , Джефф Ноубл. - М.: Диалектика, 2016

  16. Муссиано Ч. Кеннеди Б. "HTML и XHTML. Подробное руководство" 6-е издание. Издательство: Символ-Плюс, 2008 г. 

  17. Хоумер А. Dynamic HTML Справочник Питер 2016г.

  18. Дакетт Д. "Основы веб-программирования с использованием HTML, XHTML и CSS " 2-е издание. Издательство: Эксмо, 2010 г.

  19. Дронов, В. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов / В. Дронов. - М.: БХВ-Петербург, 2014

  20. Агулар Р. "HTML и CSS. Основа любого сайта " Издательство: Эксмо, 2010 г.

  21. Дакетт, Д. HTML и CSS. Разработка и дизайн веб-сайтов (+ CD-ROM) / Джон Дакетт. - М.: Эксмо, 2013

  22. Лазаро, И. К. Полный справочник по HTML, CSS и JavaScript / Лазаро Исси Коэн, Джозеф Исси Коэн. - М.: ЭКОМ Паблишерз, 2016

  23. Дакетт, Д. HTML и CSS. Разработка и дизайн веб-сайтов (+ CD-ROM) / Джон Дакетт. - М.: Эксмо, 2013

  24. Майерс Г. Искусство тестирование программ. М.: Финансы и статистика, 1982. Гласс Р., Нуазо Р. Сопровождение программного обеспечения, М.: Мир, 2003

  25. Роганов Е.А, Роганова Н.А. Практическая информатика. Ч.2 - М.: МГИУ, 2012.

  26. Пфаффенбергер HTML, XHTML и CSS. Библия пользователя / Пфаффенбергер и др. - М.: Вильямс; Издание 3-е, 2014.