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

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

Содержание:

Введение

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

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

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

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

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

Раскрытие сведений о языке программирования HTML;
Рассмотрение процесса создания сайта;
Рассмотрение инструментов (CASE-средств) создания сайтов;
Получение навыков практического применения языка программирования HTML, в виде создания простого сайта.

1. Язык программирования HTML

1.1. Назначение HTML

Аббревиатура HTML расшифровывается, как Hyper Text Markup Language, что в переводе на русский язык обозначает – язык гипертекстовой разметки. Термин «гипертекст» обозначает систему текстовых страниц, имеющих перекрестные ссылки. В качестве примера из реального мира можно взять энциклопедию, книгу, не только позволяющую осуществлять поиск по определенным словам, информация о которых содержится на определенных страницах, к которым нужно перейти, но, также, ссылающуюся на материалы, послужившие основанием для ее подготовки, т.е. на другие книги.

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

1.2. Стандартизация HTML

За 30-ти летнюю историю HTML претерпел несколько редакций. Актуальной версией языка на сегодняшний день является HTML 5, стандарт которого вышел в 2014 году.

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

Стандартизация языка HTML осуществляется Консорциумом Всемирной паутины (англ. World Wide Web Consortium, W3C) — организацией, разрабатывающей и внедряющей технологические стандарты для Всемирной паутины. Основателем и главой консорциума является сэр Тимоти Джон Бернерс-Ли, автор множества разработок в области информационных технологий.

С рекомендациями W3C по HTML можно ознакомиться , перейдя по ссылке (только на английском языке): https://www.w3.org/2014/10/html5-rec.html.en

W3C разрабатывает для Интернета единые принципы и стандарты (называемые «рекомендациями»), которые затем внедряются производителями программ и оборудования. Таким образом достигается совместимость между программными продуктами и аппаратурой различных компаний, что делает Всемирную сеть более совершенной, универсальной и удобной.

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

1.3. Инструментарий для создания и просмотра HTML-документов

Как уже было сказано выше, чтобы иметь возможность размещения документа в сети интернет, они должны быть написаны на языке HTML. Электронный документ с расширением *.htm или *.html интерпретируется браузером, как HTML-документ, что позволяет браузеру отобразить документ пользователю в форматированном виде, с применением к нему определенных правил, норм и элементов стилистического оформления.

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

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

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

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

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

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

Автоматические отступы

Рисунок 1Пример подсвестки синатксиса языка и работы функции автоотступов.

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

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

Автодополнение

Рисунок 2Работа функции автодополнения.

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

Пример CASE-средства для разработки WEB-страниц и приложений: Coda2 (Panic inc., https://panic.com/coda/).

Рисунок 3Рабочее окно среды разработки WEB-страниц Coda2 (для ОС MacOS)

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

2.1. Разметка документа

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

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

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

<открывающий тег> Форматируемый текст </закрывающей тег>

Или, на примере тега <title>:

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

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

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

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

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

<p>Это мой первый <b>документ</b> на языке HTML</p>

Рисунок 4Интерпретация браузером разметки <p>Это мой первый <b>документ</b> на языке HTML</p>

Стоит отметить, что в языке HTML некоторые парные тэги, такие, например, как <p> (тэг, определяющий абзац), не требуют обязательного указания закрывающего тэга. Браузер самостоятельно поймет, где абзац заканчивается и закроет его. Вместе с тем, использование закрывающего тега желательно, т.к. его использование делает текст документа более читаемым.

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

Прежде, чем приступить к рассмотрению типовой структуры HTML-документа, в качестве отступления, стоит сказать, что она сформировалась не сама по себе, а определяется объектной моделью страницы – Document Object Model (DOM), которая позволяет браузеру корректно отображать на странице отдельные элементы, их последовательности, корректно работать с зависимостями элементов. Фактически, прежде, чем отобразить страницу, браузер при открытии HTML-документа сначала выполняет построение его структуры. Браузером определяется, какой тег является корневым, родительским, дочерним, вложенным. При построении дерева каждый тег выступает в роли узла, из которых и строится дерево страницы.

/var/folders/2w/c5rb3bvx4s745mtm6yf7dt4c0000gn/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/slide-12.jpg

Рисунок 5Пример DOM, построенного на основании HTML документа.

Итак, типовая структура HTML-документа состоит из следующих разделов:

<!DOCTYPE>

<html>

</html>

Давайте разберем каждый из них.

Раздел, помечаемый тегом <!DOCTYPE>

При разработке HTML-документа, первое, что нужно сделать, указать, в какой версии языка HTML размечается документ. По состоянию на сегодняшний день язык претерпел около десятка редакций и актуальная версия языка – это HTML 5 (разрабатываются версии 5.1 и 5.2). Правила HTML содержатся в файле объявления типа документа (Document Type Definition, или DTD). DTD представляет собой документ, определяющий, какие теги, атрибуты и их значения действительны для конкретной версии языка HTML. Для каждой версии HTML есть свой DTD.

Разметка в версии языка HTML5 описывается так:

<!DOCTYPE html>

Когда браузер получит HTML- документ, он интерпретирует данную строку, как необходимость применить при обработке документа нотации HTML5, что им и будет сделано.

Раздел, помечаемый тегом <html> … </html>

Тег <html> является контейнером, который заключает в себе все содержимое веб-страницы. Открывающий и закрывающий теги <html> в документе необязательны, но хороший стиль диктует непременное их использование. Как правило, тег <html> идет в документе вторым, после определения типа документа (Document Type Definition, DTD)/ Закрывающий тег </html> должен всегда стоять в документе последним.

Раздел, помечаемый тегом <head> … </head>

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

Содержимое тега <head> не отображается напрямую на веб-странице, за исключением тега <title> устанавливающего заголовок окна веб-страницы. При этом, содержимое, размеченное тегом <title> … </title> не отображает на странице документа, его видно только на плашке страницы в окне браузера.

Раздел, помечаемый тегом <body> … </body>

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

Давайте, посмотрим на пример простой HTML-страницы, сформированной по указанным выше правилам формирования структуры документа и результат ее интерпретации в браузере:

Рисунок 6Код HTML-документа.

Рисунок 7Интерпретация кода HTML-страницы браузером.

2.3. Форматирование содержимого HTML-страницы

В предыдущем примере (Рисунок 6Код HTML-документа.) мы показали, как просто создаются HTML-документы. Стоит отметить, что результат интерпретации данного кода браузером будет довольно скучным. Если мы представим, что в качестве тела документа нам нужно вывести текст какой-либо статьи, ее текст будет выведен строка за строкой, без какого-либо форматирования:

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

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

Строчные элементы

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

Блочные элементы

Блочные элементы публикуются на странице один под одним.

Добавим дополнительную разметку в пример, описанный нами выше и посмотрим на результат (Рисунок 9). Мы добавили строчные теги <a>, используемые для публикации на странице ссылок на какие-либо объекты, и разделили текст на абзацы, используя тег <p>. Как можно видеть, браузер интерпретировал код образом, описанным нами выше, и соответствующим образом выполнил форматирование элементов.

Рисунок 8Добавление в код страницы блочных и строчных тегов.

Рисунок 9Интерпретация кода браузером.

2.4. Теги разметки текста в HTML-документе

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

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

Рисунок 10Синтаксис тегов заголовков.

Рисунок 11Теги заголовков в HTML-документе.

Тэг абзаца. Для обозначения абзаца в HTML используется блочный тег <p> … </p>. Браузер разделяет абзацы только при наличии тэга <p>. Если вы не разделите абзацы тэгом <p>, ваш документ будет выглядеть как один большой абзац.

Дополнительные параметры тэга <p>:

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

Тэг добавления изображений <img>

Одиночный тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src (source, в переводе с английского - источник). Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border="0" в тег <img>.

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

Стандартные средства языка позволяют, через задание дополнительных атрибутов, установить размеры изображения, для этого используются атрибуты width="х" и height="у", где x, y – значения в пикселах для рисунка. Атрибут alt=”текст” позволяет задать текст, описывающей, что отображается на картинке. Текст будет виден только тогда, когда браузеру не удалось загрузить изображение из атрибута src, что позволит пользователю понять, что же должно было быть изображено в данном месте страницы. Атрибут align определяет, как рисунок будет выравниваться по краю и способ обтекания текстом:

Значение	Описание	Пример
bottom	Выравнивание нижней границы изображения по окружающему тексту..	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
left	Выравнивает изображение по левому краю окна.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
middle	Выравнивание середины изображения по базовой линии текущей строки.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
right	Выравнивает изображение по правому краю окна.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
top	Верхняя граница изображения выравнивается по самому высокому элементу текущей строки.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

В общем виде синтаксис тега <img> выглядим следующим образом:

<img src="URL" width="x" height="y" alt="Text" align=top|middle|bottom|texttop>

Давайте посмотрим на пример использования тега <img> при верстке страницы. Добавим в наш пример HTML-документа, приводимый выше, логотоип учебной организации:

Рисунок 12Использование тега <img> при верстке страницы.

Рисунок 13Результат отображения страницы в браузере.

Центрирование элементов документа. Вы можете центрировать все элементы документа в окне браузера. Для этого можно использовать тэг <center>. Все элементы между тэгами <center> … </center> будут находиться в центре окна.

Дополнительные теги, часто применяющиеся при разметке страниц:

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

По умолчанию текст внутри контейнера <address> отображается курсивным начертанием. Если эта особенность не требуется, используйте стили для изменения начертания шрифта.

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

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

Тег <nobr> … </nobr> позволяет исключить автоматический перенос строки браузером. В этом случае браузер не будет переносить строку даже если она выходит за границы экрана; вместо этого браузер позволит горизонтально прокручивать окно.

Тег <blockquote> … </blockquote> предназначен для обозначения в документе цитаты из другого источника. Текст, обозначенный этим тэгом, отступает от левого края документа на 8 пробелов.

Тег <b> … </b> выделяет помеченный им текст жирным шрифтом.

Тег <i> … </i> выделяет помеченный им текст наклонным шрифтом.

Рисунок 14Разметка с применением различных тегов

Рисунок 15Результат верстки, отображаемый браузером.

Тег ссылок <a> … </a>

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

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

Синтаксис для указания ссылки:

<a href=”URL” [name = “anchor”]> Текст наименования ссылки </a>

Можно использовать ссылки как для перемещения по документу, так и для перемещения от одного документа к другому. В первом случае в качестве URL указывается атрибут #anchor (см. описание ниже), во втором указывается ссылка на другую страницу сайта.

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

Для создания якоря следует вначале сделать закладку в соответствующем месте и дать ей имя при помощи атрибута name тега <a>. В качестве значения href для перехода к этому якорю используется имя закладки с символом решетки (#) впереди.

Указание маркера в теге ссылки:

<a name="named_anchor"> Текст ссылки </a>

Ссылка на маркер в тексте документа:

<a href="#named_anchor"> Текст </a>

В примере выше “#named_anchor” сообщает браузеру, что необходимо найти в документе маркер с именем “named_anchor”.

Рисунок 16Добавление якорной ссылки в верстку документа.

Рисунок 17Результат просмотра в браузере. При клике по ссылке "Это место, к которому нужно вернуться", будет осуществлен возврат к начало страницы.

Фоновые рисунки. Атрибут background тега <body>.

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

<body background="ссылка на изображение"> … </body>

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

<body background="https://synergy.ru/lp/vpo/img/header/logo-fd06320174.svg">

Рисунок 18Логотип учебной организации в качества фонового рисунка.

Задание цветов для фона и элементов HTML-страницы

Многие HTML-авторы любят использовать заранее предопределенные цвета фона документа, обычного текста и ссылок. Чтобы задать эти цвета, необходимо включить в тэг <body> дополнительные атрибуты:

<body bgcolor ="#XXXXXX" text="#XXXXXX" link="#XXXXXX"> каждый из параметров определяет цвет того или иного элемента, соответственно: фона, текста, текста ссылки.

Цвет задается шестизначным числом в шестнадцатеричном формате по схеме RGB (Red, Green, Blue). Цвет #000000 соответствует черному, а цвет #FFFFFF - белому. Либо, может быть указан в виде наименования стандартных цветов: red, green, blue, black (красный, зеленый, голубой, черный) и т.д.

Давайте внесем изменения в наш пример и посмотрим на результат:

Рисунок 19Добавляем в верстку атрибуты для изменения цвевтов элементов документа.

Рисунок 20Результат исполнения кода браузером.

Тег параметров шрифта <font> … </font>

Применение в тексте данного тега с различными атрибутам, позволит изменять такие параметры шрифта, как цвет и размер:

<font size = n color = “#XXXXXX”> … </font>

Шрифт может иметь размер от 1 до 7. Вы можете прямо указать размер шрифта цифрой, или указать смещение относительно базового значения (по умолчанию - 3) в положительную или отрицательную сторону. Базовое значение можно изменить при помощи тэга: <BASEFONT SIZE=n>

Рисунок 21Экспериментируем с параметрами шрифта.

Рисунок 22Оторажение результатов в браузере.

2.5. Оптимизация графики для WEB

На данный момент в Web используется два типа растровых файлов: в форматах JPEG и GIF. GIF хорошо передает цветовые и тоновые раскаты, размытые границы (например, фото). JPEG-файл хорошо масштабируется в браузере. Плохо передает ровные плоскости цвета, в компрессии уступает GIF-формату.

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

Используйте GIF-формат, если изображение без значительных потерь переводится в 128-цветовую гамму с включенной опцией "dithering". В противном случае лучше сохранять изображение в JPEG-формате.

Подбирайте минимальное количество цветов вручную (для качественной передачи антиалиасного одноцветного изображения на одноцветном фоне достаточно 5-8 цветов, двух-трехцветного изображения - 15-25 цветов). Если исходное изображение черно-белое (grayscale), перед индексацией переведите его в цветную гамму (RGB).

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

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

3. Практическая работа

В качестве практической работы мной выполнено создание web-станицы о празднике Хеллоуин. При создании страницы использована среда разработки Coda2.

Реализация красивого графического создания сайта выполнена с применением средств CSS (Cascading Style Sheets — каскадные таблицы стилей) – это расширение HTML, язык, предназначенный для описания внешнего вида HTML-документа.

Рисунок 23Сайт о празднике хеллоуин, созданом в рамках курсовой работы.

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

Интеграция стилей оформления CSS выполнена через включение дочернего тега <style type="text/css"> … </style> в родительский тег <head>. В рамках тега <style> мной выполнено описание стилистического оформления для различных объектов страницы.

В CSS применение стилистики оформления к объекту осуществляется либо через разработку для правил оформления, либо, через создание отдельного оформительского класса, который впоследствии можно применить к тегу, указав ссылку на класс в качестве атрибута. На рисунке ниже приведены примеры описания стилистики CSS для тегов с идентификтором #header и для тега <a>:

Правила нотаций стилистики оформления взяты мной с сайта «Самоучитель CSS» http://htmlbook.ru/samcss.

Код HTML-страницы приведен в приложении к настоящей курсовой работе. Также, посмотреть сайт можно по ссылке https://drive.google.com/drive/folders/0B-w8MHtddwmURFJHeG8tMGxldE0?usp=sharing. На сервисе GoogleDrive мной размещен архив сайта. Для открытия сайта необходимо перейти в папку «Сайт о празднике» и открыть файл celebrate.html.

Заключение

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

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

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

Дэвид Макфарланд "Большая книга CSS3" (Издательсвтво «Питер», 2016);

Дакетт Джон. ”HTML и CSS. Разработка и дизайн веб-сайтов” (Издательсвтво «ЭКСМО», 2019);

Web-сайт Консорцирума всемирной путины – www.w3c.com;

Web-сайт о разработке на HTML http://htmlbook.ru;

Страница об HTML на сайте Wikipedia https://ru.wikipedia.org/wiki/HTML.

Приложение. Код сайта о празднике Хеллоуин.

<!DOCTYPE html>

<html>

<head>

<title>О празднике Хэллоуин</title>

#header {

font-family: "Arial Rounded MT Bold";

font-size: small;

text-shadow: 1px 1px 1px black;

color: white;

padding: 10px;

background-color: #ff9933;

background-image: url(pump.png);

background-repeat: no-repeat;

background-position: right top;

background-size: 300px;

border-radius: 10px;

}

#menu, #content {

font-family: Helvetica;

font-size: small;

text-align: center;

}

#menu {

padding: 10px;

text-decoration: none;

}

ul {

text-align: center;

}

#menu a {

width: 150px;

display: inline-block;

text-align: center;

padding: 10px;

list-style: none;

border: 1px solid black;

background-color: orange;

border-radius: 10px;

box-shadow: 1px 1px 1px 1px gray;

}

#menu a:hover {

list-style: none;

border: 1px solid black;

background-color: #FFCC33;

border-radius: 10px;

box-shadow: 1px 1px 1px 1px gray;

}

a {

text-decoration: none;

color: black;

}

img.vrt {

border: 2px solid orange;

border-radius: 10px;

width: 200px;

box-shadow: 1px 1px 1px 2px gray;

margin: 10px;

}

img.hrz {

border: 2px solid orange;

border-radius: 10px;

width: 300px;

box-shadow: 1px 1px 1px 2px gray;

margin: 10px;

}

h2, h3 {

padding-left: .5em;

line-height: .5em;

}

td {

padding: 0;

margin: 0;

text-align: justify;

vertical-align: top;

line-height: 1em;

}

td p {

padding: 5px;

margin: 5px;

}

tr.cellhead {

background-color: #333333;

color: orange;

}

tr.cellnothead {

background-color: #FFCC66;

color: black;

border: 1px solid black;

}

td.radial {

border-radius: 10px;

}

div.cite p{

font-style: italic;

font-family: georgia, sans-serif;

color: gray;

text-shadow: 1px 1px 2px silver;

}

td.radial.backbtn {

background-color: none;

}

td.backbtn a {

display: block;

font-size: x-small;

font-weight: bold;

border: 1px solid orange;

border-radius: 10px;

background-color: white;

padding: 10px;

margin: 0;

text-align: center;

vertical-align: middle;

box-shadow: 1px 1px 1px 1px gray;

}

td.backbtn:hover a {

background-color: #FFCC33;

border: 1px solid black;

}

</style>

</head>

<body>

<h1>Halloween</h1>

</div>

<a href="#1">Что такое Хэллоуин?</a>

<a href="#2">История Хэллоуина</a>

<a href="#3">Символы праздника</a>

</div>

<p align="center"><a href="http://ru.wikipedia.org/wiki/%D5%FD%EB%EB%EE%F3%E8%ED" target="_blank">При подготовке страницы использованы материалы о Хэллоуине с сайта "Википедия"</a>

<h2 id="1">1. Что такое Хэллоуин?</h2>

<tr>

<p>Хэллоуин - это праздник нового года, отмечаемый древними кельтами в ночь на 1 ноября.

<p>История праздника берет свое начало на территории современных Англии, Ирландии и Северной Франции, где ранее проживали древние кельтские племена. Древние кельты делили год на две части – зиму и лето. 31-го октября считался последним летним днем и последним днем уходящего года. Этот день также означал окончание сбора урожая и переход на новый – зимний сезон. С этого дня, согласно приданию племени кельтов, начиналась зима.

<p>В эту ночь по древнему поверью кельтов миры живых и мертвых пересекались и обитатели потустороннего мира пробирались на землю. Кельты называли эту ночь Самайном или Самхэйном. Для того чтобы не стать жертвами духов и приведений, кельты гасили в своих домах огонь, надевали на себя звериные шкуры, чтобы отпугивать незваных пришельцев. На улице возле домов оставлялись угощения для духов, а сам народ собирался у костров, разводимых жрецами друидами, и приносил в жертву животных. После жертвоприношения люди брали священный огонь, чтобы внести его к себе в дом. Символом праздника была тыква. Она не только означала окончание лета и сбора урожая, но и отпугивала злых духов священным огнем, который зажигался внутри нее.

</table>

<h2 id="2">2. История Хэллоуина</h2>

<tr>

<td>

<p>Историк Николас Роджерс, изучавший истоки Хэллоуина, отмечал, что, несмотря на попытки связать его происхождение с древнеримским праздником Паренталий, прообраз Хэллоуина, вероятнее всего, зародился только с появлением кельтского языческого празднества Самайн, описание которого появляется в старо-ирландской литературе начиная с X века. Название этого праздника произошло от староирландского слова Samhain, которое означало «конец лета» и впоследствии превратилось в ирландское название месяца ноября.

<p>Согласно Оксфордскому словарю фольклора, Самайн был праздником одновременно для всех народов Британских островов и прочно ассоциировался со смертью и сверхъестественным. В то же время нет никаких доказательств того, что в языческие времена праздник имел какое-либо особое значение, кроме сельскохозяйственного и сезонного. Традиционно считается, что восприятие Самайна как тёмного языческого праздника, связанного с мёртвыми, обязано своим появлением христианским монахам X—XI веков, писавших о нём спустя примерно два столетия после утверждения Дня всех святых и примерно через четыреста лет после принятия Ирландией христианства. В то же время уже в VIII веке День всех святых начинает постепенно замещать Самайн; благодаря взаимопроникновению гэльских традиций и католических обрядов начинают формироваться первые зачатки будущего Хэллоуина.

<p>С этого момента начинается преемственное развитие двух праздников. Как и Самайн, Хэллоуин традиционно отмечается в ночь с 31 октября на 1 ноября. В Шотландии и Ирландии Самайн носил название Oidhche Samhna и Oíche Samhna (на шотландском и ирландском соответственно), и современные носители гэльских языков по-прежнему обозначают Хэллоуин словами Oíche/Oidhche Samhna, в том числе такое название сохранено в википедии на ирландском языке. До сих пор на севере Шотландии и Ирландии принято проводить ритуалы для успокоения мёртвых и рассказывать ночью 31 октября легенды о предках.

<p>Примерно в XVI веке сложилась традиция выпрашивания сладостей ночью 31 октября. Дети и взрослые надевали тканевые маски и ходили от одной двери к другой, требуя от хозяев угощение и мелко шаля. Обычай надевать ролевые костюмы и носить с собой «светильник Джека» появился только на рубеже XIX и XX веков, причём в обмен на деньги или еду изначально нужно было предлагать разные развлечения. Впоследствии, по причине массовой эмиграции шотландцев и ирландцев в США, Хэллоуин популяризируется и там.

</table>

<h2 id="3">3. Символы праздника</h2>

<tr>

<p>Большинство символов праздника имеют долгую историю. Например, традиция изготовления тыкв-светильников пошла от кельтского обычая создавать фонари, помогающие душам найти путь в чистилище. В Шотландии в качестве символа Хэллоуина выступала репа, но в Северной Америке её быстро заменила тыква, как более дешёвый и доступный овощ. Впервые создание тыкв-светильников в Америке было зафиксировано в 1837 году; этот ритуал, проводившийся во время сбора урожая, не имел никакого отношения к Хэллоуину вплоть до второй половины XIX столетия.

<p>Популярны костюмы персонажей классических фильмов ужасов, например, Мумии и чудовища Франкентштейна. В праздничном убранстве домов большую роль играют символы осени, например, деревенские пугала. Основными темами Хэллоуина являются смерть, зло, оккультизм и монстры. Традиционными цветами являются чёрный и оранжевый.

</table>

<h3>Светильник джека</h3>

<tr>

<p>Главным символом праздника является Светильник Джека (англ. Jack-o'-lantern — Джек-Фонарь). Он представляет собой тыкву, на которой вырезано зловеще усмехающееся лицо; внутрь тыквы помещается зажжённая свеча. Впервые «светильники Джека» появились в Великобритании, но первоначально для их изготовления использовали брюкву или репу. Считалось, что подобный плод, оставленный в День всех святых около дома, будет отгонять от него злых духов. Когда традиция празднования Хэллоуина распространилась в США, светильники стали делаться из тыкв, более доступных и дешёвых.

<p>Истоки этого обычая можно найти в древних ирландских и британских традициях вырезания на овощах лиц во время проведения различных ритуалов. Современный вид «светильник Джека» приобрёл примерно в 1837 году, тогда же он и получил это название. К 1866 году он уже прочно ассоциировался с Хэллоуином. Впрочем, в США резная тыква ещё задолго до популяризации Хэллоуина использовалась как один из символов сбора урожая. К 1900 году её использование во время этого праздника постепенно вошло в обиход.

<p>В народе же, о происхождении фонаря Джека есть множество легенд, вот одна из них:

<p>Много веков назад на земле ирландской жил кузнец по имени Джек. О хитрости и скупости его знала вся деревня. Как-то раз жадный до денег кузнец - выпивоха предложил властителю преисподней пропустить с ним пару стаканчиков в трактире.

<p>Когда пришло время расплачиваться, предприимчивый ирландец попросил Дьявола обратиться монеткой. После чего Джек, не мудрствуя лукаво, быстро положил ее к себе в карман, где как раз лежал серебряный крестик. Дьявол оказался в ловушке «у Христа за пазухой». И как ни старался, он не мог принять первоначальное обличье.

<p>В конце концов, Дьявол добился своего освобождения, пообещав взамен год не строить Джеку козни, а также после его смерти не претендовать на его душу. На следующий Хеллоуин хитрый кузнец снова обдурил доверчивого Сатану. Он попросил его залезть на дерево за фруктами. Как только Нечистый взгромоздился на раскидистую крону, Джек нацарапал на стволе крест.

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

<p>После смерти грешника не пустили ни в рай ни в ад. С тех пор неприкаянный ирландец бродит по Земле в ожидании Судного дня. Не нужный ни Богу ни Дьяволу, освещая себе путь лишь кусочком угля, который бросил ему Сатона напоследок.

</div>

</table>

<h3>Музыка</h3>

<tr>

<p>Как и у других праздников, у Хэллоуина есть свои известные песни и тематическая музыка. Широко известная песня «Monster Mash» поп-музыканта Бобби Пикэтта стала, по мнению ряда музыкальных критиков, своеобразным гимном Хэллоуина. Другой очень популярной песней является композиция «This Is Halloween», написанная Дэнни Эльфманом и вошедшая в саундтрек к анимационному фильму Кошмар перед Рождеством. Она неоднократно была перепета разными не только американскими, но и японскими исполнителями.

<p>Также часто с праздником ассоциируется группа Midnight Syndicate, творчество которой, по словам некоторых авторов, стало синонимом этого праздника. Творчество коллектива фактически определило основные черты «музыки Хэллоуина», определило её стандарты и оказало влияние на другие подобные проекты. 11 сентября 2009 года AOL Radio опубликовало рейтинг «10 лучших альбомов в жанре „Хэллоуин“»; Midnight Syndicate заняли в нём сразу три места — третье, четвёртое и восьмое. В 2010 году группа выпустила отдельный сборник Halloween Music Collection.

<p>Часто для пугающих аттракционов во время празднования Хэллоуина используют атмосферные композиции в жанре эмбиент, состоящие из пугающих элементов вроде скрипов, воя волков и того подобного. Наиболее популярна в этом плане музыка той же группы Midnight Syndicate, которая задаёт стандарты для этой индустрии. Известна группа Nox Arcana, чей альбом Grimm Tales стал источником вдохновения для создания парка Scary Tales: Once Upon A Nightmare на студии Universal Studios Halloween Horror Nights. На вечеринках используется танцевальная музыка, написанная в шуточно-пугающем стиле, или композиции из саундтреков к фильмам ужасов. Известной композицией стала песня Let’s Get Tricky которая была исполнена Беллой Торн и Рошоном Феганом. Она звучала в известном тв-сериале на канале Дисней — «Танцевальной лихорадке».

</table>

<h3>Костюмы</h3>

<tr>

<p>Облачение в карнавальные костюмы — сравнительно недавно возникший элемент праздника. Впервые как полноценный обычай оно было зафиксировано в начале XX века и восходит к американским традициям костюмированных вечеринок. Впервые ношение маскарадных костюмов на Хэллоуин зарегистрировано в 1895 году в Шотландии, когда дети в масках ходили по домам и получали конфеты, пирожные, фрукты и деньги. Нет ни одного упоминания о подобных традициях в США, Ирландии или Англии до 1900 года. В Шотландии детей, которые, одевшись в карнавальные костюмы, изображающие разных монстров или других персонажей, ходят от дома к дому и выпрашивают сладости, называют guisers, а сам обычай — Guising («га́йзинг», от англ. guise — ношение маски, наряда, шуточное переодевание). Костюмы для Хэллоуина, как правило, начинают продавать ещё в августе.

<p>Сами костюмы на Хэллоуин значительно эволюционировали за прошедший век. Изначально костюмы были образами уродливых исхудалых лиц людей. Это выглядело далеко не празднично и достаточно пугающе. Но уже к началу 2000 костюмы все более приобретали яркие образы и сам праздник превращался в шоу.

<p>Основная тема костюмов на Хэллоуин — это разная нечисть или сверхъестественные персонажи, однако популярны и костюмы на совершенно произвольную тематику, хотя основной мотив продолжает оставаться самым распространённым[54]. Так, в 2000-х среди костюмов на Хэллоуин можно было встретить не только костюмы вампиров, оборотней или ведьм, но и фей, королев, деятелей поп-культуры и даже ролевые костюмы сексуальной тематики.

</table>

<h3>Выпрашивание сладостей (Trick-or-treat)</h3>

<tr>

<p>Традиция наряжаться в костюмы и ходить от дома к дому, выпрашивая сладости, появилась ещё в Средневековье и первоначально была связана с Рождеством. В Англии и Ирландии бедняки издревле ходили по домам и выпрашивали так называемые «духовные пирожные» в День всех святых (1 ноября), обещая в обмен молиться за души умерших родственников хозяев. Хотя этот обычай считается исконно британским, исследователи также находили упоминания о нём на юге Италии. Один из персонажей комедии Уильяма Шекспира «Два веронца» произносит фразу «Ты скулишь, как нищий на День всех святых», что свидетельствует о широком распространении данного обычая уже в конце XVI столетия.

<p>Термин Trick-or-treat впервые стал использоваться в США, первый раз его использование зафиксировано в 1934 году, а сам он начал активно распространятся только с 1939 года. Литературно его можно перевести как шутка или угощение (распространённые варианты — проделка или угощение, сладость или гадость и др.) что указывает на шуточную угрозу нанести вред, если хозяин не принесёт детям угощение. Но устоявшегося перевода термина на русский язык нет и обычно он даётся в оригинале, либо с заменой на фразу кошелёк или жизнь. Хотя термин вначале упоминался лишь на западе Северной Америки, к 1940-годам отмечено уже широкое распространение по всей стране. В нынешние времена фраза носит отчётливо шутливый оттенок и её часто используют за пределами США, например, в Ирландии и Японии, не боясь получить обвинение в вымогательстве.

</table>

<h3>Игры и другие традиции</h3>

<tr>

<td>

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

<p>Другой обычай основывался на известном поверье о Кровавой Мэри, которое в наши дни превратилось в популярную городскую легенду. Это гадание заключалось в том, что молодые девушки должны были в тёмном доме подняться по лестнице спиной вперёд и провести свечой перед зеркалом. После этого в зеркале якобы должно было показаться лицо будущего мужа, но девушка могла увидеть в зеркале и череп — это означало, что она умрёт, так и не выйдя замуж.

</table>

</div>

</body>

</html>