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

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

Содержание:

Введение

Стремительное развитие информационных технологий неразрывно связано с развитием веб-программирования как базы для реализации доступа к Интернет-ресурсам и построения этих ресурсов как веб-объектов.

Основу веб-разработки документов составляет язык разметки гипертекста HTML, разработанный в 1990-х гг. ХХ века одним из сотрудников Европейского института физики частиц и к настоящему моменту прошедший ряд преобразований до стандарта HTML5, который с октября 2014 года является официально рекомендованным стандартом, предназначенным для создания гипертекстовых документов в среде Web. Таким образом, выбранная тематика курсовой работы актуальна и практически целесообразна.

Объектом исследования в работе являются подходы к разработке сайтов с применением HTML, предметом исследования – непосредственная разработка сайта с четко ориентированной ознакомительной тематикой, совпадающей с темой данной курсовой работы – «Основы программирования на языке HTML».

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

- выполнить обзор учебно-методической и научной литературы в соответствии с темой работы;

- провести анализ теоретических аспектов разработки веб-страниц;

- изучить практические подходы к разработке веб-страниц средствами HTML;

- реализовать разработку веб-сайта в соответствии с заявленной тематикой.

1. Язык разметки гипертекста. Основные принципы построения HTML-документов

1.1 История развития и стандарты

Специальный язык, содержащий управляющие конструкции построения и организации web-страниц, носит название HTML (Hyper Text Markup Language, язык разметки гипертекстовой информации).

Начало истории HTML относят к 1969 году, когда работник компании IBM Чарльз Гольдфарб создал прототип языка для разметки технической документации, в последствии названный GML, в 1986 году он получил статус международного стандарта SGML (Standard Generalized Markup Language). Этот обобщенный метаязык был предназначен для построения систем логической, структурной разметки любых разновидностей текста (устанавливает синтаксис записи элементов разметки, правила определения новых элементов и указания структурных отношений между ними).

Принципы, на которых был построен SGML, были изначально положены в основу при создании системы передачи гипертекстовой информации через Интернет. Таким образом, HTML был предложен сотрудником Европейского института физики частиц (CERN) Тимом Бернесом-Ли в 1989-1991 гг. и разделял все особенности идеологии SGML. При этом версии HTML1 официально никогда не существовало и первой официальной версией стала спецификация HTML 2.0, опубликованная в 1994 году IETF (Internet Engineering Task Force) как рекомендованный стандарт.

В марте 1995 года W3C (Консорциум Всемирной паутины) ввел стандарт HTML 3.0, позволивший обеспечить возможности создания и форматирования таблиц, изображений. Следующей в январе 1997 года стала версия 3.2 (при этом принятой версии 3.1 не существовало), позволившая поддерживать использование нестандартных элементов при оформлении web-страниц, например, таких, как gif-изображения.

В декабре 1997 года принят стандарт HTML 4.0, в котором многие элементы были приняты устаревшими и не рекомендованными к использованию (например, рекомендовано для оформления стилей текста использовать CSS – каскадные таблицы стилей, а не теги чистого HTML). В мае 2000 года был утвержден стандарт ISO/IEC 15445:2000 (ISO HTML), основанный на HTML 4.01.

В настоящее время W3C совместно с WHATWG (сообществом специалистов по HTML и API) разрабатывается стандарт HTML 5, официально введенный в 2014 году, но при этом используемый разработчиками ориентировочно с 2012-2013 гг. Версия HTML 5.1 рекомендована к применению с ноября 2016 года, 5.2 – с декабря 2017 года, 5.3 – представлена в декабре 2018 года. При этом стандарт продолжает активно развиваться. Целью разработки данного стандарта являлось улучшение уровня поддержки мультимедиа-технологий с одновременным сохранением совместимости с предыдущими стандартами.

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

1.2 Синтаксис HTML

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

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

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

- теги, определяющие, как будет отображаться web-браузером тело документа в целом;

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

Тег HTML состоит из следующих друг за другом в определенном порядке элементов:

- левой угловой скобки (<);

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

- идентификатора (имени) тега;

- необязательных атрибутов;

- правой угловой скобки (>).

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

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

Спецификация атрибута включает в себя:

- идентификатор (имя) атрибута;

- знак равенства (=);

- значение атрибута, которое задается строкой символов в кавычках (“80”).

При этом регистр букв в идентификаторах (именах) тегов и атрибутов (но не в значениях атрибутов) не учитывается.

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

1.3 Структура HTML-документа

Документы HTML могут быть созданы при помощи любого текстового редактора или специализированных редакторов HTML-документов. Наиболее простым способом является создание HTML-документа при помощи Блокнота (например, Notepad++), в котором код HTML записывается в виде обычного текста, а затем сохраняется с расширением *.html. Тогда при открытии этого документа будет открываться окно браузера, отображающее созданный HTML-документ.

Документы HTML имеют следующую структуру:

- объявление версии HTML;

- объявление HTML-документа;

- заголовок;

- тело документа;

- комментарии.

1.3.1 Объявление версии HTML

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

Используется следующий синтаксис для стандартов до HTML 4.01 включительно:

<!DOCTYPE [Элемент верхнего уровня] [Публичность] “[Регистрация] //[Организация]//[Тип] [Имя]//[Язык]“ “[URL]“>

Данный тег является непарным тегом с параметрами:

1) элемент верхнего уровня - указывает элемент верхнего уровня в документе, для HTML это тег <html>.

2) публичность - объект является публичным (значение PUBLIC) или системным ресурсом (значение SYSTEM), например, таким как локальный файл. Для HTML указывается значение PUBLIC.

3) регистрация - сообщает, что разработчик DTD (описания типа документа) зарегистрирован в международной организации по стандартизации ISO. Принимает одно из двух значений: плюс (+) - разработчик зарегистрирован в ISO и минус (-) - разработчик не зарегистрирован. Для W3C значение ставится «-».

4) организация - уникальное название организации, разработавшей DTD. Официально HTML публикует W3C, это название и пишется в <!DOCTYPE>.

5) тип - тип описываемого документа. Для HTML значение указывается DTD.

6) имя - уникальное имя документа для описания DTD.

7) язык - язык, на котором написан текст для описания объекта. Содержит две буквы, пишется в верхнем регистре. Для документа HTML указывается английский язык (EN).

8) URL - адрес документа с DTD.

Например:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”

В HTML5 используется более удобный вариант: <!DOCTYPE HTML> для всех типов документов.

1.3.2 Объявление HTML-документа. Заголовок

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

Теги <HEAD> и </HEAD> представляют собой заголовок, представляющий общее описание документа. Как правило, между ними рекомендуется указывать информацию о документе (название, ключевые слова для поиска, описание и т.д.). Метатеги, входящие в этот тег, определяют служебную информацию, они являются непарными и имеют вид <META атрибут>. Атрибуты тега следующие:

http-equtv=”…” (определяет тип свойства);

value=”…” (определяет свойство);

content=”…” (задает значение свойства);

url=”…” (задает адрес программы для свойства);

name=”…” (дополнительное описание свойства).

Чтобы дать название HTML-документу, текст помещается между тегами <TITLE> и </TITLE>.

Также внутри контейнера <HEAD> допускается использование элементов <BASE> (указание полного базового адреса текущего документа), <BASEFONT> (задание шрифта, размера и цвета текста по умолчанию), <BGSOUND> (определяет музыкальный файл, который будет проигрываться на web-странице при ее открытии), <LINK> (позволяет установить связь с внешним документом, например с файлом стилей), <SCRIPT> (предназначен для описания скриптов, может содержать ссылку на программу), <STYLE> (определение стилей элементов страницы).

1.3.3 Тело HTML-документа

Тело документа следует сразу за заголовком и находится между парой тегов <BODY> и </BODY>. Первый из них должен стоять сразу после тега <HEAD>, а второй – перед тегом </HTML>. Тело HTML-документа – это собственно информация документа, отформатированная средствами HTML. Тег <BODY> имеет атрибуты, которые перечислены ниже:

bgcolor=”…” (определяет цвет фона документа);

background=”…” (указывает браузеру местоположение рисунка, который необходимо использовать в качестве фонового рисунка);

text=”…” (устанавливает цвет текста);

alink=”…” (определяет цвет активной ссылки);

link=”…” (определяет цвет непросмотренной ссылки);

vlink=”…” (определяет цвет просмотренной ссылки);

bottommargin=”…” (устанавливает отступ от нижнего края окна до контента);

topmargin=”…” (устанавливает границу верхнего поля);

leftmargin=”…” (устанавливает границу левого поля);

rightmargin=”…” (устанавливает границу правого поля);

bgproperties=”fixed” (в случае установки данного параметра фоновое изображение не будет прокручиваться вместе с текстом);

SCROLL=”…” (устанавливает, отображать полосы прокрутки или нет);

onload=”…” (определяет те действия браузера, которые должны произойти после загрузки документа из сети).

В стандарте HTML5 введен контейнер <HEADER>…</HEADER>, позволяющий задать верхнюю область (т.н. шапку) страницы или раздела, в которой обычно размещается заголовок. Основное содержимое документа рекомендовано размещать в контейнере <MAIN>…</MAIN>, причем содержимое должно быть уникальным и не включать типовые блоки (заголовок, панели и пр.). Также в стандарте HTML5 введен контейнер <FOOTER>…</FOOTER>, позволяющий задать нижнюю область (т.н. подвал) страницы или раздела, в которой могут размещаться данные автора, контакты и т.п.

1.3.4 Комментарии

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

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

Также комментарии могут быть созданы с использованием нестандартного тега <COMMENT>…</COMMENT>.

1.4 Форматирование текста средствами HTML

Главной составной частью документа HTML является его содержимое, которое состоит, прежде всего, из текста. Оформление текста позволяет наиболее эффективно донести его до пользователя. Набор средств для форматирования максимально приближен к возможностям форматирования текстового процессора Microsoft Word.

1.4.1 Стили форматирования текста

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

<pre>…</pre> текст, содержащийся в этом теге, отображается без изменений, допускает использование внутри любых тегов, кроме <BIG>, <IMG>, <OBJECT>, <SMALL>, <SUB>, <SUP>;

<p>…</p> текстовый параграф, абзац;

<hr> горизонтальная линия (начинается всегда с новой строки);

<br> перенос на новую строку;

<nobr> запрет переноса строки;

<SPAN>…</SPAN> создание стиля строчных элементов;

<XMP>…</XMP> отображает содержимое в исходном виде и шрифтом фиксированной ширины;

<WBR>…</WBR> указывает браузеру место, где допускается делать перенос строки в тексте, если этого требует ширина элемента (введен в стандарте HTML5).

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

<H1>…</H1>, <H2>…</H2>, …, <H6>…</H6> заголовки, обозначающие начало разделов документа (наибольший Н1, наименьший Н6);

<b>…</b> полужирный шрифт;

<i>…</i> курсив (наклонный шрифт);

<u>…</u> подчеркнутое написание;

<s>…</s> зачеркнутый текст;

<tt>…</tt> моноширинный шрифт (шрифт фиксированной ширины);

<sup>…</sup> верхний индекс;

<sub>…</sub> нижний индекс;

<strike>…</strike> перечеркивание текста горизонтальной линией;

<big>…</big> шрифт большего размера, чем предыдущий;

<small>…</small> шрифт меньшего размера, чем предыдущий;

<blink>…</blink> моргающий текст;

<BDO>…</BDO> направление вывода текста (слева направо или наоборот);

<BDI>…</BDI> указывает фрагмент текста, который должен быть изолирован от изменения направления вывода текста (введен в стандарте HTML5);

<MARK>…</MARK> помечает текст как выделенный, например цветом (введен в стандарте HTML5).

Теги логического форматирования предназначены для указания смыслового содержания текста. К тегам логического форматирования относятся:

<ABBR>…</ABBR> последовательность символов является аббревиатурой;

<ACRONYM>…</ACRONYM> текст является акронимом (сокращением);

<ADDRESS>…</ADDRESS> хранение информации об авторе документа;

<APPLET>…</APPLET> вставка апплетов (кодов на Java);

<BLOCKQUOTE>…</BLOCKQUOTE> выделение длинных цитат в документе;

<cite>…</cite> цитата или сноска (отображается курсивом);

<Q>…</Q> выделение цитаты в кавычки;

<code>…</code> программный код;

<DEL>…</DEL> выделение текста, удаленного из новой версии документа;

<INS>…</INS> выделение текста, добавленного в новую версию документа;

<dfn>…</dfn> определение термина (отображается курсивом);

<em>…</em> акцентирование внимания;

<kbd>…</kbd> область ввода текста с клавиатуры;

<samp>…</samp> результат вывода программы, пример отображения;

<strong>…</strong> очень важный фрагмент текста (отображается полужирным текстом);

<var>…</var> выделение переменной;

<ARTICLE>…</ARTICLE> задает содержимое контейнера как новости, статьи, блога и т.п. (введен в стандарте HTML5);

<DETAILS>…</DETAILS> используется для хранения информации, которую можно скрыть или показать по требованию пользователя (введен в стандарте HTML5);

<METER>…</METER> используется для вывода значения в некотором диапазоне , используется для отображения числовых значений (введен в стандарте HTML5);

<RUBY>…</RUBY> используется для добавления аннотации сверху или снизу от заключенного в нем текста, где сама аннотация будет находится в тегах <RT>…</RT> (введен в стандарте HTML5);

<TIME>…</TIME> помечает текст внутри тега как дату, время или оба значения (введен в стандарте HTML5).

1.4.2 Установка атрибутов шрифта

Язык гипертекстовой разметки позволяет задавать размеры шрифта, которым будет отображаться текст документа. По умолчанию размер шрифта равен 3, однако, используя тег <font> с атрибутом size=”…”, его можно переопределить. Используются как относительные размеры шрифтов, так и абсолютные. Абсолютный размер шрифта задается приданием атрибуту size значения от 1 до 7, т.е. <font size=”7”>…</font>. Для использования относительного размера шрифта изначально нужно задать его базовый размер тегом <basefont> и установить его параметр size равным размеру шрифта (по умолчанию 0). Относительно этого базового размера можно указывать размер шрифта текста, который заключен в контейнере тегов <font>. Для этого достаточно присвоить атрибуту size одно из следующих значений: +1…+7 для увеличения шрифта на указанное количество единиц относительно базового размера; -1…-7 для уменьшения шрифта на указанное количество единиц относительно базового размера. Теги <basefont> и <font> предназначены для описания исходных параметров шрифта данной страницы. Их действие распространяется до следующего тега этого типа. Они имеют следующие атрибуты:

face=”…” задает имя шрифта или несколько возможных шрифтов для отображения шрифта;

size=”…” задает размер шрифта;

color=”…” задает цвет шрифта.

Установка цветов в документе производится с использованием атрибутов установки цвета в тегах. Выбор цвета можно проводить двумя способами: заданием имени или определением номера цвета по цветовой схеме RGB (Red, Green, Blue). Номер цвета RGB задается тремя двухзначными шест-надцатеричными числами, причем каждое число принадлежит интервалу от 00 до FF и определяет интенсивность соответствующего цвета. Язык HTML поддерживает много цветов, в табл.1 приведены коды и имена шестнадцати основных цветов.

Таблица 1

Цвет	Код RGB	Имя	Цвет	Код RGB	Имя
черный	#000000	black	серебряный	#C0C0C0	silver
темно-бордовый	#800000	maroon	красный	#FF0000	red
зеленый	#008000	green	лайм	#00FF00	lime
оливковый	#808000	olive	желтый	#FFFF00	yellow
темно-синий	#000080	navy	синий	#0000FF	blue
фиолетовый	#800080	purple	фуксия	#FF00FF	fuchsia
чирок	#008080	teal	аква	#00FFFF	aqua
серый	#808080	gray	белый	#FFFFFF	white

Часто при создании сайтов возникает необходимость во вставке различных символов. В таких случаях используется символ & (амперсанд) и соответствующий необходимому знаку код. Коды наиболее используемых символов приведены в табл.2.

Таблица 2

Символ	Код	Отображение
Знак авторских прав	©	©
Меньше чем	<	<
Больше чем	>	>
Амперсанд	&	&
Тире	—	
Кавычка	"	“
Параграф	§	§
Пробел	&nbsr;

Одним из способов оживления страницы является задание бегущей строки в тексте документа. На самом деле возможно перемещение любых элементов страницы – изображений, текста, таблицы, элементов форм и т.п. Для этого используется контейнер <marquee>…</marquee> со следующими атрибутами:

width=”…” задает ширину бегущей строки в пикселях или процентах от ширины экрана;

height=”…” устанавливает высоту бегущей строки (в пикселях или процентах);

bgcolor=”…” определяет цвет фона бегущей строки;

behavior=”…” задает тип движения бегущей строки и имеет следующие значения: scroll – циклическая прокрутка строки из одного конца в другой, slide – текст появляется с одного края и останавливается у другого, alternate – текст перемещается от одного края к другому;

direction =”…” определяет направление движения бегущей строки. Имеет следующие значения: left – изображение движется влево по строке, right – изображение движется вправо по строке, up – вся строка перемещается сверху вниз, down – строка движется сверху вниз;

scrollamount=”…” определяет число пикселей, которые отделяют один текст от следующего;

scrolldelay=”…” указывает задержку в миллисекундах перед появлением следующего текстового блока;

loop=”…” задает число повторов анимации (любое положительное число). По умолчанию или при указании значения -1 браузер будет прокручивать текст бесконечное число раз;

HCPACE=”…” определяет горизонтальные поля вокруг контента;

VCPACE=”…” определяет вертикальные поля вокруг контента.

1.4.3 Выравнивание текста

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

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

<p align=”left”>…</p>.

Текст, выровненный по правому краю и не выровненный по левому: концы строк находятся на одном уровне, а начало на разных. Этот эффект достигается использованием выражения <p align=”right”>…</p>.

Существует несколько способов центрирования. Первым является использование выражения <p align=”center”>…</p>. Вторым является использование тега <center>…</center>, который центрирует любые объекты.

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

1.4.4 Работа со списками средствами языка HTML

В языке разметки гипертекста HTML предусмотрена возможность создания различных списков и перечислений. К ним относятся: нумерованный список, маркированный список, список определений, многоуровневый список.

Структура нумерованного списка следующая:

<ol> начало нумерованного списка;

<li>…</li> первый элемент списка;

<li>…</li> второй элемент списка;

<li>…</li> n-ый элемент списка;

</ol> конец нумерованного списка.

По умолчанию нумерация выполняется арабскими цифрами, начиная с единицы. Используя атрибуты тега <ol>, можно изменить стиль оформления списка. Атрибут type=”…” определяет стиль нумерации, при этом допускаются следующие его значения:

type=”A” использовать большие латинские буквы;

type=”a” использовать маленькие латинские буквы;

type=”I” использовать большие римские цифры;

type=”i” использовать маленькие римские цифры;

type=”1” использовать арабские цифры.

Также используются следующие атрибуты:

start=”…” определение начального значения списка;

reversed устанавливает обратный (убывающий) порядок нумерации элементов

Структура маркированного списка следующая:

<ul> начало маркированного списка

<li>…</li> первый элемент списка

<li>…</li> второй элемент списка

<li>…</li> n-ый элемент списка

</ul> конец маркированного списка

По умолчанию маркирование производится маркером •, для изменения стиля оформления списка можно использовать атрибут type=”…” тега <ul>. Допускается использовать следующие значения этого атрибута:

type=”disk” устанавливает маркер вида •

type=”circle” устанавливает маркер вида ◦

type=”square” устанавливает маркер вида ▪

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

<dl> начало списка определений;

<dt>…</dt> первый пункт списка;

<dd>…</dd> описание первого пункта списка;

<dt>…</dt> последний пункт списка;

<dd>…</dd> описание последнего пункта списка;

</dl> конец списка определений.

Для создания списка директорий также применялся тег <DIR>…</DIR>, но его использование считается устаревшим.

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

1.4.5 Работа со ссылками средствами языка HTML

Очень важным понятием в HTML является гиперссылка, которая позволяет связать текст или какой-либо объект с другими гипертекстовыми документами. Текст, который является гиперссылкой, как правило, выделяется цветом и подчеркивается. Для определения ссылки используется тег <a>, структура которого следующая:

<a href=”filename”> текст ссылки </a>

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

Очень удобно при создании больших страниц в начало документа вставить оглавление, а его заголовки оформить в виде гиперссылок на соответствующий раздел текста. Для этого необходимо присвоить заголовку раздела уникальный идентификатор, т.е. имя. Это можно сделать, используя тег <a> и атрибут name=”…”. Пункт оглавления необходимо оформить в виде ссылки на соответствующий раздел (такое оформление носит название закладки или якоря) при помощи следующей конструкции:

<a href=”#Раздел1”> Раздел 1. </a>

<a name=”Раздел1”> Раздел 1. </a>

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

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

В стандарте HTML5 введен контейнер <NAV>…</NAV>, внутри которого задаются ссылки, что позволяет задать навигацию по сайту, причем допустимо использовать несколько таких контейнеров в документе.

1.4.6 Работа с графическими изображениями средствами HTML

В документах HTML кроме текста могут присутствовать графические изображения, для вставки которых используется тег <img>. Допускается использование файлов в формате GIF или JPG/JPEG/PNG, поскольку большинство браузеров имеют встроенные модули декодирования для воспроизведения данных форматов, а для систем, работающих под управлением операционных систем семейства Windows, допускается также использование файлов формата BMP. Следующий пример демонстрирует вставку в документ JPG файла:

Здесь атрибут scr=”…” определяет адрес графического файла. В приведенном примере файл будет размещен в области шириной 600 и высотой 300 пикселей соответственно. Если размеры, указанные атрибутами height=”…” (высота) и width=”…” (ширина), не совпадают с размерами графического файла, то последний масштабируется. Масштабирование может привести к резкому ухудшению качества графического файла, поэтому рекомендуется задавать размеры, соответствующие размерам графического файла, или не указывать их вообще. Если размеры не заданы, то, встретив рисунок, браузер прекращает вывод текста и ждет загрузки всего рисунка для того, чтобы определить его размеры, а это задерживает загрузку страницы.

Атрибут alt=”…” указывает браузеру на то, какой именно текст следует подставить на место рисунка, если пользователь отключил загрузку графических файлов или вследствие медленной скорости соединения файл не был получен.

При вставке рисунка в документ, браузер размещает следующий за ним текст внизу. Используя атрибут align=”…”, можно разместить последующий текст вверху (top), внизу (bottom) или по центру (middle) относительно картинки.

Картинка может быть средством задания и управления выбором гиперссылок в документе, для чего на тег <img> должна указывать гиперссылка, определяемая командой <a>. Например:

По умолчанию браузер рисует рамку вокруг рисунка, которая отмечена как гиперссылка. Для того, чтобы убрать прорисовку рамки, используют атрибут border=”…” в теге <img> с нулевым значением. Помимо этого имеется возможность создания активного рисунка с гиперссылками, в которой разные части картинки имеют разные ссылки – такое средство принято называть активными картами. Это можно сделать путем включения информации об изображении в документ.

Для задания информации о гиперссылках в рисунке, которая включается в документ, используется атрибут usemap=”…” в теге <img>. Сама информация о гиперссылках определяется тегами <map> и <area>, как показано ниже:

</map>

В данном примере на рисунке map1.gif был выделен прямоугольник, при этом одна область не используется, а выделенная является гиперссылкой к документу h1.htm. Тег <area> позволяет также помечать области кругами, если используется параметр shape=”…” со значением circle, или ломанными – тогда применяют параметр poly. Каждый из этих параметров имеет дополнительный параметр coords=”…”, который указывает координаты ключевых точек и для каждой из фигур имеет следующий формат:

shape=”rect” coords=”x1,y1,x2,y2”

shape=”circle” coords=”x,y,R”

shape=”poly” coords=”x1,y1,x2,y2,…,xn,yn”

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

1.4.7 Работа с таблицами средствами HTML

В web-дизайне таблицы часто используются для позиционирования графических и текстовых объектов на страницах. Для создаания таблиц используются следующие теги:

<TABLE>...</TABLE> создание таблицы;

<CAPTION>…</CAPTION> создание заголовка таблицы;

<TR> … </TR> формирование строки;

<TH>…</TH> формирование ячейки с заголовком строки или столбца;

<TD>…</TD> формирование содержимого ячейки;

<COL>…</COL> задается ширина и другие характеристики столбцов;

<COLGROUP>…</COLGROUP> задается ширина и стиль столбцов;

<TBODY>…</TBODY> структурный блок для хранения нескольких строк;

<TFOOT>…</TFOOT> структурный блок для хранения нескольких нижних строк;

<THEAD>…</THEAD> структурный блок для хранения нескольких нижних строк.

Атрибуты тега <TABLE>:

ALIGN=”…” определяет выравнивание таблицы;

BACKGROUND=”…” задает фоновый рисунок в таблице;

BGCOLOR=”…” задает цвет фона в таблице;

BORDER=”…” толщина рамки в пикселях;

BORDERCOLOR=”…” задает цвет рамки;

CELLPADDING=”…” отступ от рамки до содержимого ячейки;

COLS=”…” число колонок в таблице;

FRAME=”…” сообщает браузеру, как отображать границы вокруг рамки;

HEIGHT=”…” высота таблицы;

RULES=”…” сообщает браузеру, как отображать границы между ячейками;

SUMMARY=”…” краткое описание таблицы;

WIDTH=”…” ширина таблицы.

Для объединения в строке нескольких последовательных ячеек, например двух в одну, в соответствующем первом теге <TH> или <TD> записывается параметр ROWSPAN=2. А для объединения в столбце двух ячеек в одну используется параметр COLSPAN=2.

1.4.8 Блоки и фреймы

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

Фреймы позволяют разделить страницу на несколько кадров, каждый из которых по факту является также страницей (каждому из них соответствует свой HTML-файл, основной файл содержит описание размещения фреймов в окне браузера, остальные файлы содержат описание содержимого фреймов). При создании фреймов используют теги <frameset>...</frameset> используется для определения разделения окна на фреймы с параметрами COLS (вертикальные области) и ROWS (горизонтальные области), SRC адресом стартового html-файла, NAME – именем фрейма и др. Согласно стандарту HTML5 использование фреймов считается устаревшим.

Контейнер <ASIDE>…</ASIDE>, введенный в стандарте HTML5, позволяет выделить блок сбоку от контента для размещения рубрикатора, ссылок или меток (по принципу боковой панели).

Контейнер <CANVAS>…</CANVAS>, введенный в стандарте HTML5, позволяет создать область, в которой можно создавать и трансформировать рисунки, анимацию, игры и т.п.

Контейнер <SECTION>…</SECTION>, введенный в стандарте HTML5, позволяет задать раздел страницы и может применяться для создания новостных блоков, контактных данных, разделов текста и пр.

1.4.9 Формы

Формы предназначены для обмена данными между пользователями и сервером в Интернет. Область применения форм не ограничена отправкой данных на сервер, с помощью клиентских скриптов можно получить доступ к любому элементу формы, изменять его и применять по своему усмотрению. При этом документ может содержать любое количество форм, но одновременно на сервер может быть отправлена только одна форма. Формы создаются с применением тега <FORM ACTION=”URL”>…</FORM>, где его атрибут ACTION указывает программу, которой передается управление при отправке формы на сервер. Внутрь контейнера <FORM> можно помещать другие теги, при этом сама форма никак не отображается на web-странице, видны только ее элементы.

Используемые теги:

<BUTTON>…</BUTTON> создание кнопки;

<textarea>…</textarea> создание области ввода текста;

<SELECT>…</SELECT> позволяет создать элемент интерфейса в виде выпадающего списка, элементы которого определяются тегом <OPTION>…</OPTION>;

<PARAM>…</PARAM> передача значения параметров другим объектам страницы (например, апплетам);

<OBJECT>…</OBJECT> определяет принципы загрузки и отображения объектов страницы;

<INPUT>…</INPUT> создание различных элементов интерфейса формы и обеспечение их взаимодействия с пользователем;

<FIELDSET>…</FIELDSET> группировка элементов формы;

<LEGEND>…</LEGEND> создание заголовка группы элементов формы;

<LABEL>…</LABEL> создание метки и связывание ее с элементом формы;

<MENU>…</MENU> создает команду в виде переключателя, флажка или обычной кнопки (введен в стандарте HTML5);

<DATALIST>…</DATALIST> создает список вариантов, которые можно выбирать при наборе в текстовом поле, его элементы определяются тегом <OPTION>…</OPTION> (введен в стандарте HTML5);

<AUDIO>…</AUDIO> добавляет, воспроизводит и управляет настройками аудиозаписи на странице либо форме (введен в стандарте HTML5);

<VIDEO>…</VIDEO> добавляет, воспроизводит и управляет настройками видеоролика на странице либо форме (введен в стандарте HTML5);

<SOURCE>…</SOURCE> вставляет звуковой или видеофайл для тегов <AUDIO> и <VIDEO> (введен в стандарте HTML5);

<FIGURE>…</FIGURE> позволяет сгруппировать любые элементы формы либо страницы (введен в стандарте HTML5);

<KEYGEN>…</KEYGEN> позволяет сгенерировать пару ключей для шифрования данных формы при отправке на сервер (введен в стандарте HTML5);

<OUTPUT>…</OUTPUT> определяет область, в которую выводится информация (введен в стандарте HTML5);

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

2. Реализация сайта на языке HTML

2.1 Постановка задачи

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

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

- данные о истории развития HTML и существующих стандартах;

- информацию о структуре html-документов;

- описание синтаксиса языка;

- принципы форматирования текстовых элементов;

- принципы работы с блоками, фреймами, формами и их компонентами;

- информацию для ознакомления с литературными и интернет-источниками по теме.

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

2.2 Проектирование макета

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

Рисунок 1 – Макет сайта

2.3 Разработка шаблона сайта

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

- объявление документа;

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

- тело документа (для разделения на блоки целесообразно использовать контейнеры <DIV>, тело разделяется на несколько блоков).

Программная реализация:

<!DOCTYPE html>

<html>

<head>

<title>Курсовая работа</title>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

2.4 Проектирование дизайна

Проектирование дизайна сайта подразумевает размещение визуального контента на подготовленной структуре. Таким образом создается шаблон, основное назначение которого – визуализировать структуру страницы, ее содержимое, а также отобразить основной функционал. На рис.2 представлен разработанный шаблон основной страницы сайта.

Рисунок 2 – Шаблон основной страницы

2.5 Создание контента и окончательная верстка

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

На рис.3 представлен окончательный вид основной страницы сайта.

Рисунок 3 – Основная страница сайта

На рис.4 представлена страница, на которую осуществляется переход при нажатии ссылки «Читать далее» в разделе «История развития и стандарты HTML». На рис.5 и рис.6 представлены соответственно страницы, на которые осуществляется переход по ссылкам «Синтаксис языка» и «Структура документа». На рис.7 представлен результат перехода по ссылке «Авторское форматирование».

Рисунок 4 – Страница 2

Рисунок 5 – Страница 3

Рисунок 6 – Страница 4

Рисунок 7 – Страница 5

Листинг программ приведен в приложении (прил.1).

Заключение

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

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

- выполнен обзор учебно-методической и научной литературы в соответствии с темой работы;

- проведен анализ теоретических аспектов разработки веб-страниц;

- изучены практические подходы к разработке веб-страниц средствами HTML;

- реализована разработка веб-сайта в соответствии с заявленной тематикой.

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

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

1. Дакетт, Дж. HTML и CSS. Разработка и дизайн веб-сайтов. – М.: Эксмо, 2013. – 480 с.

2. Дунаев, В.В. Основы Web-дизайна. Самоучитель. – 2-е изд. – СПб.: БХВ-Петербург, 2012. – 480 с.

3. Дунаев, В.В. HTML, скрипты и стили. – 4-е изд. – СПб.: БХВ-Петербург, 2015. – 816 с.

4. Квинт, И. Создаем сайты с помощью HTML, XHTML и CSS на 100%. – 4-е изд. – СПб.: Питер, 2017. – 464 с.

5. Кит, Дж. HTML5 для веб-дизайнеров. – М.: URSS, 2013. – 112 с.

6. Кирсанов, Д. Веб-дизайн. – СПб.: Символ-Плюс, 2001. – 376 с.

7. Комолова, Н.В., Яковлева, Е.С. HTML. Самоучитель. – 2-е изд. – СПб.: Питер, 2011. – 288 с.

8. Суздалев, Д. Справочник HTML // Интернет-издание, 2012. – 40 с.

9. Сырых, Ю.А. Современный веб-дизайн. Эпоха Веб 3.0. – 2-е изд. – М.: ООО «И.Д. Вильямс», 2013. – 368 с.

10. Хоган, Б. HTML5 и CSS3. Веб-разработка по стандартам нового поколения. – 2-е изд. – СПб.: Питер, 2014. – 320 с.

11. Чебыкин, Р.И. Разработка и оформление текстового содержания сайтов. – СПб.: БХВ-Петербург, 2004. – 528 с.

12. Шапошников, И.В. Самоучитель HTML 4. – СПб.: БХВ-Петербург, 2001. – 288 с.

13. www.htmlbook.ru

Приложение 1. Листинг программ

Файл index.html

<!DOCTYPE html>

<html>

<head>

<title>Курсовая работа</title>

</head>

<body>

<a href="https://ru.wikibooks.org/wiki/HTML" class="but" title="">Викиучебник HTML</a>

<a href="http://htmlbook.ru/samhtml" class="but" title="">Самоучитель HTML4</a>

<a href="http://htmlbook.ru/html" class="but" title="">Справочник HTML</a>

<a href="http://htmlbook.ru/html5" class="but" title="">Самоучитель HTML5</a>

</div>

<h2>Основы программирования на языке HTML</h2>

</div>

<h1 class="tit_right1">Форматирование текста</h1>

<div class="munth"><a href="#" >Авторское форматирование</a></div>

<div class="munth"><a href="#" >Физическое форматирование</a></div>

<div class="munth"><a href="#" >Логическое форматирование</a></div>

<div class="munth"><a href="#" >Установка атрибутов шрифта</a></div>

<div class="munth"><a href="#" >Работа со списками</a></div>

<div class="munth"><a href="#" >Работа со ссылками</a></div>

<div class="munth"><a href="#" >Работа с таблицами</a></div>

</div>

<h1 class="tit_right2">Структура и объекты</h1>

<div class="munth"><a href="#" >Блоки</a></div>

<div class="munth"><a href="#" >Фреймы</a></div>

<div class="munth"><a href="#" >Формы</a></div>

</div>

<h1>Литература</h1>

<div class="left_b"><span class="w">Самоучитель HTML4</span><br />

Шапошников И.В.

<div class="read"><a href="https://books.google.co.uk/books?id=P51OHlU0aLkC&printsec=frontcover&dq=inauthor:%22%D0%A8%D0%B0%D0%BF%D0%BE%D1%88%D0%BD%D0%B8%D0%BA%D0%BE%D0%B2+%D0%98%D0%B3%D0%BE%D1%80%D1%8C%22&hl=ru&sa=X&ved=0ahUKEwjNw_znlsXlAhXColwKHSXYC0IQ6AEINzAC#v=onepage&q&f=false"> Ознакомиться</a></div>

</div>

<div class="left_b"><span class="w">HTML. Самоучитель</span><br />

Комолова Н.В., Яковлева Е.С.

<div class="read"><a href="https://books.google.co.uk/books?id=fhmJgnncii4C&printsec=frontcover&hl=ru#v=onepage&q&f=false"> Ознакомится</a></div>

</div>

<div class="left_b"><span class="w">Основы web-дизайна. Самоучитель</span><br />

Дунаев В.В.

<div class="read"><a href="https://books.google.co.uk/books?id=Tfsu3MI89VIC&printsec=frontcover&hl=ru#v=onepage&q&f=false"> Ознакомиться</a></div>

</div>

<div class="left_b"><span class="w">HTML и CSS. Разработка и дизайн веб-сайтов</span><br />

Дакетт Дж.

<div class="read"><a href="https://books.google.co.uk/books?id=zcZwDwAAQBAJ&printsec=frontcover&hl=ru#v=onepage&q&f=false"> Ознакомиться</a></div>

</div>

<h1>История развития и стандарты HTML</h1>

<span>Специальный язык, содержащий управляющие конструкции построения и организации web-страниц, носит название HTML (Hyper Text Markup Language, язык разметки гипертекстовой информации). </span>

</div>

<div class="read"><a href="kr_hist.html"> Читать далее</a></div><br />

</div>

<h1>Основы HTML</h1>

<ol>

<li><a href="kr_sint.html">Синтаксис языка</a></li>

<li><a href="kr_struct.html">Структура документа</a></li>

</ol>

</div>

<div class="read"><a href="kr_sint.html"> Читать далее</a></div><br />

</div>

<div class="read"><a href="kr_struct.html"> Читать далее</a></div><br />

</div>

</div>

</div>

</div>

</body>

</html>

Файл styles.css

{

border: 0;

margin: 0;

}

img

{

border: 0px;

}

body{

font: 12px Arial, Helvetica, sans-serif;

color: #000000;

background: url(images/bg1.jpg) top repeat-x #ffffff;

line-height: 18px;

}

#bg2 {

width: 100%;

height: 100%;

background:url(images/bg2.jpg) bottom repeat-x;}

#bg3 {

background: url(images/bg3.jpg) center top no-repeat;

width: 1014px;

margin: 0px auto;

padding-top: 41px;

}

#header {

width:100%;

background: url(images/header.jpg) left top no-repeat;

height: 330px;

}

#logo {

font-family: Arial, Helvetica, sans-serif;

color:#FFFFFF;

font-size:17px;

font-style:italic;

text-decoration: none;

text-transform: none;

padding: 117px 5px 5px 400px;

background: url(images/big_img.jpg) left top no-repeat;

height: 100px;

width: 600px;

font-weight:100;

}

#buttons{

background: url(images/bg_but.jpg) left top no-repeat;

text-align:center;

height: 116px;

margin-left: 444px;

padding-top: 4px;

}

#buttons a {

font-family: Arial, Helvetica, sans-serif;

font-size: 14px;

display: block;

float: left;

height: 66px;

text-decoration: none;

color: #FFFFFF;

padding-top: 50px;

padding-left: 0px;

text-align: center;

}

.but {

width: 110px;

}

.but:hover {

background: url(images/but_hover.png) center center no-repeat;

text-decoration: none;

}

#main {

background:url(images/main.gif) left repeat-y;

width: 1014px;

}

#main_top {

width: 1014px;

background: url(images/main_top.gif) left top no-repeat ;

padding-bottom: 20px;

}

#main_bot {

width: 1014px;

background: url(images/main_bot.gif) left bottom no-repeat ;

}

#content{

width: 1014px;

padding: 0px 0px 0px 0px;

background: url(images/cont.gif) right repeat-y #FFFFFF;

margin: 0px 0px 0px 0px;

}

#left{

width: 244px;

margin: 0px 0px 0px 10px;

float: left;

color:#000000;

}

.left_b {

padding-right: 5px;

padding-top: 3px;

padding-left: 30px;

font-size: 11px;

background:url(images/fish_left.png) 8px 12px no-repeat;

height: 117px;

}

.box1 { background: url(images/box1.gif) 0px 0px no-repeat;}

.box2 { background: url(images/box2.gif) 0px 0px no-repeat;}

.box3 { background: url(images/box3.gif) 0px 0px no-repeat;}

.box4 { background: url(images/box4.gif) 0px 0px no-repeat;}

.text{

padding: 6px 4px 0px 7px;

}

.img {float:left;

margin: 4px 15px 3px 0px;

}

.img_r {

float: right;

margin: 4px 0px 3px 16px;

}

#left span {

color:#014377;

text-decoration: underline;

font-size:12px;

}

#center span {

color:#014377;

text-decoration: underline;

font-size:12px;

}

.w {

color:#ffffff;

line-height: 25px;

}

.g {

color:#328816;

}

#left H1{

font-family: Arial, Helvetica, sans-serif;

font-size:18px;

font-weight: 100;

color: #FFFFFF;

text-align:left;

padding: 17px 0px 6px 5px;

}

#right H1{

font-family: Arial, Helvetica, sans-serif;

font-size:12px;

font-weight: 100;

color: #ffffff;

text-align:left;

padding: 14px 0px 0px 70px;

height:30px;

}

.tit_right1 {

background:url(images/tit_right1.gif) left 10px no-repeat;

}

.tit_right2 {

background:url(images/tit_right2.gif) left 10px no-repeat #DCEEFC;

}

.read{

text-align:right;

padding-right:5px;

padding-top: 3px;

font-weight:bold;

font-size:12px;

}

.read a{

color: #014377;

text-decoration: underline;

}

.read a:hover {

text-decoration:none;

}

#right{

float: right;

width: 245px;

margin-right: 10px;

padding: 0px 0px 0px 0px;

}

.right_b { background: #DCEEFC;}

.right_w { background: #ffffff;}

.munth {

font-weight:bold;

background: url(images/fish_left.png) 14px 11px no-repeat;

padding: 5px 0px 5px 50px;

text-decoration:none;}

.munth a{color:#014377;

text-decoration: underline;

font-weight:100;

font-size: 11px;}

.munth a:hover {

text-decoration: none;

}

#center {

width: 485px;

float:left;

margin-left: 10px;}

#center H1 {

background:url(images/tit_c.gif) bottom repeat-x;

font-family: Arial, Helvetica, sans-serif;

font-size:18px;

font-weight: 100;

color: #014377;

text-align:left;

padding: 17px 0px 6px 7px;}

#all_col {

width: 100%;}

.col_left {

float: left;

width:228px;

margin-left: 7px}

.col_right {

float: right;

width: 235px;}

.left_a{

text-decoration: underline;

color: #1A8421;}

.left_a:hover { text-decoration: none;}

.right_a{

text-decoration: underline;

color: #1FB59C;}

.right_a:hover { text-decoration: none;}

#footer{

height: 50px;

width: 100%;

font-size: 12px;

color: #ffffff;

text-align: center;

clear:both;

padding: 13px 0px 0px 0px;

background: url(images/footer.jpg) 0px 0px no-repeat;

}