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

Основы программирования на языке HTML (Основы языка программирования)

Содержание:

ВВЕДЕНИЕ

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

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

На основе Интернета работает WWW (world wide web - всемирная паутина). В информация в ней представлена в виде гипертекстовых документов, которые, обычно, содержат отформатированный текст, изображения, аудио и видео.

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

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

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

Для достижения цели курсовой работы были поставлены следующие задачи:

  1. Изучение основных сведений о языке HTML
  2. Ознакомление с элементами языка HTML.

Курсовая работа состоит из введения, двух глав, заключения и списка использованной литературы.

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

Язык HTML

HTML (Hyper Text Markup Language) представляет собой стандартизированный язык, который предназначен для создания гипертекстовых документов во Всемирной паутине [9]. Практически любой ныне существующий браузер поддерживает просмотр HTML-документов. Браузер отображает документ соответствуя HTML-разметке и дает возможность навигации при помощи гиперссылок. HTML дает возможность форматировать документы для их представления используя шрифты, линии и другие графические элементы.

HTML документ является текстовым файлом, его можно сделать в любом текстовом редакторе, например, в стандартной программе от Microsoft – блокнот, но это довольно трудоемкий процесс. Как правило, используются специализированное программное обеспечение – редакторы, которые предназначены именно для работы с HTML документами [3]. Они дают возможность вставлять тэги при помощи горячих клавиш, кнопок с панелей инструментов, а также использую меню команд.

HTML-теги

HTML-тег пишут в виде угловых скобок, он состоит из имени, за которым, как правило, следует список различных атрибутов (атрибуты – необязательный элемент). Имена и атрибуты являются словами и аббревиатурами из английского алфавита [10].

Теги состоят из двух групп:

  1. Контейнеры (парные теги) состоят из двух компонентов: открывающий (начало) и закрывающий (конец). Название закрывающего и открывающего тега одинаковое. Отличие лишь в том, что перед закрывающим тегом ставят косую черту («/»). В промежутке данных тегов располагаются текст документа и прочие теги. Тот фрагмент документа, который расположен между начальным и конечным тегами форматируется браузером следуя смыслу тега. К примеру, любая информация, текст, который расположен между тегами, будет представлен полужирным начертанием при использовании тега с названием «bold», т.е. жирный. Парные теги также могут быть вложенными друг в друга, но при этом они не могут пересекаться.
  2. Автономные (непарные теги) не имеют конечного компонента. Во время их интерпретации в выводимый документ вставляются те или иные объекты. К примеру, тег <IMG SRC=«picture.png»>, отобразит изображение файла picture.png.

Атрибуты, обычно, разделяют друг от друга пробелами, либо используют символы табуляции, символы перевода строк [2]. Также не имеет значения в какой последовательности записаны атрибуты. Как правило, большинство атрибутов используются в виде пары «название атрибута» = «значение атрибута». Если значением атрибута является более чем одно слово, его необходимо заключить в одинарные или двойные кавычки. Нет необходимости указывать атрибуты в закрывающих компонентах тегов.

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

Как мы уже знаем, HTML-документ всегда заключается в теги. Две секции располагаются между этими тегами: секция заголовка и секция тела документа.

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

Секция тела документа представляет собой основной текст, который предназначен для отображения браузером [11]. Он также содержит в себе теги форматирования, размещения изображений, таблиц и прочих элементов.

Таким образом выглядит HTML-код простейшего документа:

<HTML><TITLE>Заголовок нашей страницы</TITLE></HTML>

Данный код можно набрать в любом текстовом редакторе и сохранен с расширением .htm или, как правило, .html – в таком случае появится возможность открыть документ в браузере. При открытии данного документа браузер выведет страницу, в строке заголовка которой будет написано «Заголовок нашей страницы».

Раздел HEAD

Теги, содержащиеся в секции заголовка, как правило, незаметны для пользователя, между тем, они способны оказывать воздействие на внешний вид документа [7].

Таблица 1.Теги и их назначение

Тег

Назначение

<TITLE>

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

<BASE>

Данный тег служит для указания базового адреса текущего документа (URL), что будет являться отправной точкой с целью расчета относительных адресов внутри документа. Элемент не содержит конечного тега. При его применении должен присутствовать как минимум один аргумент:

HREF – служит для определения базового адреса (URL) текущего документа.

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

<STYLETYPE=«text/css»>

Данный тег нужен для добавления в документ каскадных таблиц стилей (CSS − Cascade Style Sheet). TYPE – является обязательным атрибутом, значением которого, как правило, является «text/css».

<МЕТА>

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

Тег NAME – служит для определения имени мета-записи. Существует множество вариантов заранее определенных имен, одну из которых, можно увидеть в примере ниже.

CONTENT – необходим для присваивания значения мета-записи, которая определена в параметре NAME.

Раздел BODY

В разделе BODY содержится основное содержание web-страницы – это текст, изображения, видео и аудио, и прочие элементы [12]. Данный тег может использоваться в документе лишь единожды, и включает в себя следующие атрибуты:

Таблица 2. Атрибуты раздела.

Синтаксис атрибута

Назначение

MARGINHEIGHT=число

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

TOPMARGIN= число

Атрибут служит для определения отступа от верхнего края окна браузера до контента веб-страницы. По умолчанию 10 писелей.

MARGINWIDTH= число

Данный атрибут нужен для выставления отступа между содержимым и правой (левой) границей встроенного фрейма.

LEFTMARGIN= число

Служит для определения величины левого поля (отступа) страницы.

BACKGROUND= URL

Необходим для определения изображения с целью «заливки» фонового рисунка. Значение задается в абсолютные или относительные адреса изображения.

BGCOLOR=цвет

Нужен для определения цвета фона документа.

Большинство браузеров поддерживают 16 стандартных имен цветов (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow, white).

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

К примеру, запись COLOR=«#0000FF» означает синий цвет

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

TEXT=цвет

Служит для определения цвета текста в документе.

LINK=цвет

Необходим для определения цвета гиперссылок в документе.

ALINK=цвет

Атрибут определяет цвет подсветки гиперссылок в момент нажатия.

VLINK

Служит для определения цвета посещённых ссылок, т. е., таких ссылок, на которые пользователь уже «нажимал».

Специальные символы HTML

HTML-стандарты предусматривают особый способ кодирования специальных символов, используя escape-последовательности или символьные объекты, позволяющие использовать данные символы в нужных местах документа, не нарушая при этом его структуру [4]. Условно спецсимвол обозначается и начинается символом «&», что содержит в себе непосредственно имя спецсимвола и оканчивается точкой с запятой. Также, вместо имени символа можно использовать соответствующий ASCII-код.

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

Таблица 3. Существующие спецсимволы HTML.

Название

Символ

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;

Использование стилей шрифтов

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

  • Bold – жирный шрифт.
  • Italic – шрифт-курсив (наклонный).
  • Mono spaces (type writer) – с применением фиксированных шрифтов.

На практике можно комбинировать различные виды стилей, например жирный и наклонный одновременно.

Таблица 4. Стили шрифтов.

Стиль

Элемент или тэг

Результат

Bold

<B> Этот текст жирный </B>

Этот текст жирный

Italic

<I> Этот текст наклонный </I>

Этот текст наклонный

Mono spaced

<TT> Этот текст с непроп. шрифтом</TT>

Этот текст с непроп. шрифтом

Комбинирование стилей даст вам возможность отображать в одной строке сразу несколько элементов с различными стилями.

Глава 2. Основные возможности языка HTML

Форматирование символов

Каждый тег, предназначенный для форматирования символов, имеет открывающий и закрывающий элемент и воздействует на размещенный между ними текст [2].

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

Таблица 5. Атрибуты тега FONT.

Синтаксис атрибута

Назначение

SIZE = значение

Необходим для определения размера. Задается либо в форме абсолютного значения (число от 1 до 7), либо относительно размера основного шрифта (в форме +n или -n).

COLOR = цвет

Служит для определения цвета.

FACE=список шрифтов

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

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

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

Тег <BR> - break, используется с целью разрыва текстового потока и вставки новой строки без образования нового абзаца. Использование нескольких последовательных тегов будет обозначать определенное количество пустых строк. Тег имеет одинарный межстрочный интервал. Также у него отсутствуют закрывающий тег и атрибуты.

Тег <P> - paragraph, используется для начала нового абзаца. Двойной межстрочный интервал отделяет новый абзац от предыдущего. Абзац не может быть пустым, т.е. несколько последовательных тегов будут определяться как один. Как и у тега <BR>, данный тег не обязывает присутствие закрывающего тега, в следствие того, что предыдущий абзац всегда заканчивается на месте начала нового. Также тег <P> содержит в себе необязательный атрибут ALIGN, который является указателем на вид выравнивания абзаца, принимающий такие значения: LEFT, RIGHT, CENTER и JUSTIFY, которые задают выравнивание по левому и правому краям, по центру, и по ширине соответственно.

При условии, когда не выставлен закрывающий элемент, существующий вариант выравнивания будет использоваться до следующего тега, который задает новое выравнивание, или до конца документа [3].

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

  • <OL> - ordered list, нумерованный список
  • <UL> unordered list, маркированный список.

Все элементы нумерованного или маркированного списка заключаются в тег <LI> - list item. Оно необходимо для отображения элементов с новой строки, обозначая их, при этом, маркером или номером. Также, список может содержать в себе заголовок, который определяется тегом <LH> - list header [8]. Присутствие закрывающих тегов не обязательно.

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

Также существует возможность оформления абзацев в виде заголовков с уровнями (от n=1,..6). Для этой цели необходимо использовать теги <h1>,..,<h6>. Самый большой размер шрифта получается при первом уровне заголовка. Закрывающий тег обязателен.

Использование изображений

Каждое изображение, которое выводится браузером при просмотре страниц, хранится в отдельных файлах с форматом gif, jpeg, png. Непосредственно в коде документа делается ссылка на нужное изображение [1].

Таблица 6. Атрибуты тега изображений.

Обязательный атрибут:

SRC = url

Ссылка на графический файл.

Атрибуты не являющиеся обязательными:

ALT = текст

Альтернативный текст, который выводится в окне браузера без загрузки изображений (необходимо заключить в кавычки)

BORDER = значение

Данный атрибут обозначает толщину обрамляющей рамки в пикселях.

BORDERCOLOR = цвет

Используется для определения цвета обрамляющей рамки

HEIGHT = значение

Необходим для определения высоты изображения в пикселях либо в процентах от высоты окна браузера.

WIDTH = значение

Нужен для определения ширины изображения в пикселях либо в процентах от ширины окна браузера

HSPACE = значение

Определяет свободное пространство слева и справа от изображения в пикселях.

VSPACE = значение

Определяет свободное пространство сверху и снизу от изображения в пикселях.

ALIGN = значение

Атрибут используется при выравнивании изображения.

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

Существуют два способа адресации файлов – это абсолютный и относительный. Рассмотрим их по отдельности.

Адресацию в абсолютной форме применяют при использовании ссылок на ресурсы, которые находятся на другом сервере [4]. Универсальный адрес, который определяет местоположение информационного ресурса, имеет название URL – uniform resource locator. Данный адрес состоит из двух частей, которые разделены двоеточием. Первая часть обозначает тип сетевого протокола, зависящий от типа ресурса. Допустим, что ресурс расположен на www-сервере, это означает, что протоколом в данной ситуации является http. Вторая же часть представляет собой имя компьютера в доменной системе и имен и путевое имя файла. Во время записи путевого имени названия каталогов всегда разделены косой чертой. Важно учитывать регистр при определении имён файлов и каталогов, также в названиях нельзя использовать пробелы. Примеры URL адресов:

  • Http://www.google.com/images/google.jpg
  • http://192.168.1.1:3030
  • ftp://cloud.com/soft/gimp.zip
  • Maito: Ivan_Ivanov@mail.com

Последняя ссылка, которая указывает на протокол «mailto» и адрес электронной почты, не является ссылкой на какой-либо ресурс – это единственный тип ссылок, во время записи которого не ставятся две косые черты после двоеточия [12].

При разработке web-сайта адресация рисунков в абсолютной форме, как правило, не применяется.

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

При работе с изображениями, формально обязательным является лишь один атрибут SRC, но, как правило, приходится указывать и альтернативный текст – атрибут ALT. Все этом потому, что большинство работает с браузером в режиме без загрузки изображений.

Размеры области, в которой располагается изображение, определяют с помощью атрибутов WIDTH и HEIGHT (ширина и высота соответственно) в пикселях или же в процентах к размеру экрана [7]. Если задан хотя бы один из этих атрибутов, изображение будет масштабироваться так, чтобы его высота или ширина соответствовали заданной величине. Второй размер будет установлен автоматически, в соответствии с пропорцией. Использование только одного из атрибутов будет изменять оба величины изображения. Применение обоих атрибутов одновременно даст масштабирование по двум осям в соответствии с определенными размерами.

Гиперссылки

Гиперссылка представляет из себя какой-нибудь объект, будь то текст или изображение, при щелчке по которому выполняется переход в новую страницу или фрагменту страницы. Благодаря гиперссылкам существует возможность перехода между любыми расположенными в глобальной сети web-страницами [9]. Они позволяют делать набор документов связанными и структурированными, что дает пользователю возможность получать необходимую ему информацию быстро и удобно.

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

Для определения гиперссылки используется тег <A> - anchor. Он связывает страницы и их фрагменты.

Таблица 7. Атрибуты тега ссылок.

Обязательный атрибут:

HREF = url

Ссылка на документ (возможна как абсолютная, так и относительная форма).

Атрибуты не являющиеся обязательными:

#

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

TARGET = «имя»

Имя кадра (фрейма) или окна для вывода целевого документа.

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

_self – указывает, что определенный в параметре HREF документ должен отображаться в текущем фрейме;

_parent – указывает, что документ должен отображаться во фрейме-родителе текущего фрейма (целиком занять окно браузера);

_blank – указывает, что документ должен отображаться в новом окне.

TITLE=«текст»

Служит для вывода подсказок при наведении мыши на гиперссылки.

Любой текст и изображение, которое размещено между тегами будут являться активной зоной документа, чувствительной к щелчку указателя мыши, вызывающий переход на целевой документ. Сам текст гиперссылки будет выделен подчеркиванием и цветом, который указан как значение атрибутов LINK, ALINK, VLINK тега [4].

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

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

Таблица 8. Атрибуты тегов-контейнеров.

Синтаксис атрибута

Назначение

COORDS = список

Список координат активной зоны. Записывается через запятую (зависит от типа заданной формы зоны).

HREF = url

Адрес целевого документа гиперссылки, которая связяна с указанной зоной.

SHAPE = форма

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

circle (окружность – задается при помощи координат центра и радиуса в пикселях).

rect (прямоугольник – задается при помощи координат левого верхнего и правого нижнего угла).

poly (многоугольник – задается при помощи координат своих вершин).

Во всех перечисленных случаях координаты отсчитываются от верхнего левого угла изображения в пикселях, ось Х направлена вправо, ось Y− вниз.

NOREF

Бывают случаи, когда необходимо указать, что данная зона (заданная атрибутом SHAPE и координатами COORDS) не является активной, то есть отсутствует реакции на щелчок мыши.

Таблицы

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

Построение таблиц в HTML происходит построчно. Вся информация заключается в теги <TABLE>. Закрывающий элемент обязателен. Строки и ячейки задаются при помощи тегов <TR> и <TD> соответственно [10].

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

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

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

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

Параметры таблицы в целом задаются при помощи атрибутов тега.

Таблица 9. Атрибуты тега таблиц.

Синтаксис атрибута

Назначение

ALIGN = значение

Служит для выравнивания относительно текстового потока. Существуют следующие значения: left, right и center.

BACKGROUND = url

Служит фоновым изображением для всей таблицы.

BGCOLOR = цвет

Определяет фоновый цвет таблицы.

BORDERCOLOR = цвет

Определяет цвет границы таблицы.

BORDERCOLORDARK= цвет

Служит для окрашивания в заданный цвет правый и нижний край основной рамки и левый, и верхний край каждой ячейки.

BORDERCOLORLIGHT=цвет

Служит для окрашивания в заданный цвет левый и верхний край основной рамки и соответственно правый и нижний край каждой ячейки.

CELLPADDING = значение

Определяет расстояние от границ ячейки до ее содержимого в пикселях.

CELLSPACING = значение

Определяет расстояние между ячейками в пикселях.

HSPACE = значение

Определяет свободное пространство слева и справа от таблицы в пикселях.

VSPACE = значение

Определяет свободное пространство сверху и снизу от таблицы в пикселях.

WIDTH = значение

Определяет ширину таблицы (задается в пикселях или в процентах от текущей ширины окна браузера).

Атрибуты тега определяют параметры данного ряда (в случае возникновения противоречий атрибуты, которые заданы в теге, отменяются).

Таблица 10. Атрибуты тега определенного ряда в таблице.

Синтаксис атрибута

Назначение

ALIGN = значение

Обеспечивает выравнивание содержимого ячеек. Существуют следующие значения: left, right и center.

BACKGROUND = url

Определяет фоновое изображение для ячеек данного ряда таблицы.

BGCOLOR = цвет

Определяет фоновый цвет для ячеек данного ряда.

BORDER = значение

Определяет толщину рамки, обрамляющей ячейки данного ряда; BORDER=0 значит, что рамка невидимая.

VALIGN = значение

Обеспечивает вертикальное выравнивание содержимого ячеек. Существуют следующие: значения top, center и bottom.

Атрибуты тега определяют параметры данной ячейки (в случае возникновения противоречий атрибуты, которые заданы в тегах, отменяются).

Таблица 11. Атрибуты тега определенной ячейки таблицы.

Синтаксис атрибута

Назначение

ALIGN = значение

Обеспечивает выравнивание содержимого ячейки. Существуют следующие значения: left, right и center.

BACKGROUND = url

Определяет фоновое изображение для ячейки таблицы.

BGCOLOR = цвет

Определяет фоновый цвет для ячейки.

BORDER = значение

Определяет толщину рамки, обрамляющей ячейку.

VALIGN = значение

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

WIDTH = значение

Определяет ширину ячейки в пикселях или в процентах от ширины таблицы.

ROWSPAN= значение

Указывает количество строк, охватываемых ячейкой.

COLSPAN = значение

Указывает количество столбцов, охватываемых ячейкой.

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

Бегущая строка

Применение бегущей строки на web-странице позволит сделать её более динамичной, даст эффект движения объектов. Для создания данной строки необходимо использовать тег <MARQUEE>. Закрывающий элемент обязателен [5].

Между данными тегами могут располагаться как текст, так и изображения.

Таблица 12. Атрибуты тега бегущей строки.

Синтаксис атрибута

Назначение

BGCOLOR=цвет

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

HEIGHT= значение

Определяет высоту фоновой полосы. Значение указывается в пикселях или в процентах от высоты окна браузера.

WIDTH = значение

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

DIRECTION= значение

Задает направление движения строки: left− налево, right− направо, up− вверх, down – вниз.

BEHAVIOR = значение

Данный атрибут управляет поведением бегущей строки:

scroll − дойдя до края окна, строка уходит из поля зрения, а затем появляется с противоположной стороны;

slide− строка появляется из-за края окна, достигает противоположного и останавливается;

alternate− строка движется вправо или влево, «отражаясь» от краев окна и меняя направление движения

HSPACE = смещение в пикселях

Определяет сдвиг полосы бегущей строки по горизонтали вправо.

VSPACE = выcoтa в пикселях

Служит для создания пустого пространства выше и ниже полосы.

LOOP = значение

Определяет количество переходов строки по экрану.

SCROOLAMOUNT =значение

Число пикселей, которые проходит строка за каждый шаг. Данный атрибут дает возможность регулировать скорость движения строки.

SCROLLDELAY = значение

Определяет временной интервал между шагами, при помощи этого атрибута можно добиться движения строки рывками.

TRUESPEED

При установке этого флага (атрибута без значения) будет использовано заданное значение SCROLLDELAY. Если флаг не установлен значение SCROLLDELAY <= 59 будет округлено до 60.

Горизонтальная линия

Горизонтальную линию можно задать тегом <HR>. Она не требует закрывающего элемента [6]. Данная линия проходит по всей ширине страницы.

Тег имеет несколько необязательных атрибутов:

Таблица 13. Атрибуты тега горизонтальной линии.

Синтаксис атрибута

Назначение

WIDTH = значение

Служит для определения длины линии в пикселях или процентах от ширины окна браузера.

SIZE = значение

Необходим для определения толщины линии в пикселях.

ALIGN = значение

Обеспечивает выравнивание горизонтальной линии. Параметр может принимать следующие значения: left – по левому краю, right – по правому краю, center – по центру.

NOSHADE

Определяет способ закраски линии как сплошной. Параметр является флагом и не требует указания значения. Без этого параметра линия будет изображена объемной.

COLOR = цвет

Служит для определения цвета линии.

Заключение

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

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

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

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

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

  1. «Изучаем HTML5», Брюс Лоусон, Реми Шарп, 272 стр., 2011 год.
  2. «HTML5 для профессионалов: мощные инструменты для разработки современных веб-приложений», Питер Лабберс, Брайан Олберс, Фрэнк Салим, 272 стр., 2011 год.
  3. «HTML и XHTML. Подробное руководство», Муссиано Ч., Кеннеди Б., 747 стр., 2008 год.
  4. «HTML и CSS: путь к совершенству» Хеник Б., СПб.: Питер, 2011 год., 336 стр.
  5. «HTML5, CSS3 и JavaScript. Исчерпывающее руководство». Дженнифер Нидерст Роббинс 4-ое издание, 2014 год, 516 стр.
  6. «HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств», Бен Фрейн, 2017 год, 272 стр.
  7. «HTML5 для веб-дизайнеров», Джереми Кит, 2015 год, 112 стр.
  8. «HTML5. Карманный справочник», Дженнифер Роббинс, 2015 год, 192 стр.
  9. «Изучаем HTML, XHTML и CSS», Фримен Эрик, Фримен Элизабет, 2012 год, Издательство: Питер, 656 стр.
  10. «HTML5 - путеводитель по технологии», К.Сухов, Издательство: ДМК Пресс, 2013 год, 352 стр.
  11. «Веб-мастеринг. HTML, CSS, JavaScript, PHP, CMS, AJAX, раскрутка», Ташков П. А., Издательство: Питер, 2010 год, 512 стр.
  12. «Создание веб-сайта для чайников», Дэвид Кроудер, Издательство: Вильямс, 2009 год. 352 стр.