Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

Содержание

• Введение
• 1. Основные сведения о языке программирования
• 1.1 О языке html
• 1.2 Создание Web сайта
• 1.3 Основные положения
• 1.4 Структура документа
• 1.5 Тэги тела документа
• 2. Описание создания сайта
• 2.1 Гипертекстовые ссылки
• 2.2 Графика внутри документа
• 2.3 Добавление стилей в документ
• 2.4 Оптимизация графики для web
• 3. Алгоритм практической работы
• 3.1 Подготовка
• 3.2 Создание сайта «Мастер по обработке цифровой информации»
• Заключение
• Список использованной литературы
• Приложение


Введение

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

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

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

Задачи:

- Раскрыть основные сведения о языке;

- Рассмотреть процесс создания сайта;

- Создать веб-сайт на основе разработанного алгоритма.

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



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

1.1 О языке html

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

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

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

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

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

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

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

1.2 Создание Web сайта

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

Например, HTML редакторы, такие, как "Netscape Navigator Gold" компании Netscape, позволяют создавать документы графически с использованием технологии WYSIWYG (What You See Is What You Get). С другой стороны, большинство традиционных средств для создания документов имеют конвертеры, позволяющие преобразовывать документы к формату HTML.

1.3 Основные положения

Все тэги HTML начинаются с "<" (левой угловой скобки) и заканчиваются символом ">" (правой угловой скобки). Как правило, существует стартовый тэг и завершающий тэг. Для примера приведем тэги заголовка, определяющие текст, находящийся внутри стартового и завершающего тэга и описывающий заголовок документа, регистр при вводе текста не важен:

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

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

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

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

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

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

<HTML>

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

</HTML>

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

<HTML>

<HEAD>

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

</HEAD>

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

1.5 Тэги тела документа

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

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

Уровни заголовков <Hx>. Когда пишется HTML-документ, текст структурно делится на просто текст, заголовки частей текста, заголовки более высокого уровня и т.д. Первый уровень заголовков (самый большой) обозначается цифрой 1, следующий - 2, и т.д. Большинство браузеров поддерживает интерпретацию шести уровней заголовков, определяя каждому из них собственный стиль. Заголовки выше шестого уровня не являются стандартом и могут не поддерживаться браузером. Заголовок самого верхнего уровня имеет признак "1". Синтаксис заголовка уровня 1 следующий:

<H1> Заголовок первого уровня </H1>

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

<Hx> Заголовок x-го уровня </Hx>, x - цифра от 1 до 6, определяющая уровень заголовка.

Тэг абзаца <P>.

В отличии от большинства текстовых процессоров, в HTML-документе обычно игнорируются символы возврата каретки. Физический разрыв абзаца может находиться в любом месте исходного текста документа (для удобства его читаемости). Однако браузер разделяет абзацы только при наличии тэга <P>. Если вы не разделите абзацы тэгом <P>, ваш документ будет выглядеть как один большой абзац.

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

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

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

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

а) перевод строки

б) символы табуляции (сдвиг на 8 символов вправо)

в) непропорциональный шрифт, устанавливаемый браузером.

Использование тэгов, определяющих формат абзаца, таких как <Hx> или <ADDRESS>, будет игнорироваться браузером при помещении их между тэгами <PRE> и </PRE>.

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

<HTML>

<HEAD>

<TITLE> Список группы</TITLE>

</HEAD>

<BODY>

<H2> Список группы 6-М-11 </H2>

<H3> Составлено: 1 сентября 2013</H3>

Данный список содержит фамилии, имена и отчества. <P>

Список может быть использован только в служебных целях. <P>

</BODY>

</HTML>

Вот, что вы увидите на экране браузера:



Внимание! Заголовок "Список группы" не отображен браузером как часть документа. Он появится в заголовке окна браузера.

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

Алексей Ярцев<BR> Дмитровское шоссе,<BR> д.9Б, офис 326<BR>

Дополнительный параметр позволяет расширить возможности тэга <BR>.

<BR CLEAR=left|right|all>

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

<p> Как вы можете видеть, данная схема демонстрирует связь<BR CLEAR=left> <img src="http://www.softexpress.com/images/schema1.gif" align=baseline> Мастер/Деталь </p>.

Неразрывная строка <NOBR>. Если вы не хотите, чтобы броузер автоматически переносил строку, то вы можете обозначить ее тэгами <NOBR> и </NOBR>. В этом случае браузер не будет переносить строку даже если она выходит за границы экрана; вместо этого браузер позволит горизонтально прокручивать окно. Например: <NOBR> Данная строка является самой длинной строкой документа, которая не допускает какого-либо разбиения, где бы то ни было </NOBR>

Если же вы хотите все же позволить разбиение данной строки на две, но в строго запланированном месте, то вставьте тэг <WBR> в это место. Например: <NOBR> Данная строка является самой длинной строкой документа,<WBR> которая не допускает какого-либо разбиения, где бы то ни было </NOBR>

«Данная строка является самой длинной строкой документа, которая не допускает какого-либо разбиения, где бы то ни было.»

Цитата <BLOCKQUOTE>. Данный тэг предназначен для обозначения в документе цитаты из другого источника. Текст, обозначенный тэгом <BLOCKQUOTE>, отступает от левого края документа на 8 пробелов. Например: На открытии данной конференции глава представительства произнес: <P> <BLOCKQUOTE> Сегодня один из величайших дней для нашей компании.<BR> Мы открыли новую технологию, позволяющую нашим клиентам повысить производительность их настольных систем в несколько раз. </BLOCKQUOTE>

«При отображении браузером данный текст будет выглядеть так:

На открытии данной конференции глава представительства произнес:

Сегодня один из величайших дней для нашей компании. Мы открыли новую технологию, позволяющую нашим клиентам повысить производительность их настольных систем в несколько раз.»



2. Описание создания сайта

2.1 Гипертекстовые ссылки

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

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

Внимание! Вы можете использовать ссылки как для перемещения по документу, так и для перемещения от одного документа к другому. Однако HTML не поддерживает возврат на предыдущую ссылку, если перемещение происходило внутри документа. Если вы используете ссылки внутри документа, а затем нажимаете на клавишу Back, то вы не перейдете на предыдущую ссылку, а вернетесь на ту часть документа, которую вы просматривали до этого. URL. HTML использует URL (Uniform Resource Locator) для представления гипертекстовых ссылок и ссылок на сетевые сервисы внутри HTML-документа. Первая часть URL (до двоеточия) описывает метод доступа или сетевой сервис. Другая часть URL (после двоеточия) интерпретируется в зависимости от метода доступа. Обычно, два прямых слеша после двоеточия обозначают имя машины:

method://machine-name/path/foo.html

Следующий пример представляет собой вызов HTML-документа index.html с сервера www.softexpress.com с использованием HTTP протокола: http://www.softexpress.com/index.html

Uniform Resource Locator имеет следующий формат: method://servername:port/pathname#anchor

Опишем каждый из компонентов URL:

METHOD. Имя операции, которая будет выполняться при интерпретации данного URL. Наиболее часто используемые методы:

file: чтение файла с локального диска. Имя файла интерпретируется для локальной машины пользователя. Данный метод используется для отображения какого-либо файла, находящегося на машине пользователя. Например: file:/home/alex/index.html - отображает файл index.html из каталога /home/alex на пользовательской машине

http: доступ к WEB-странице в сети с использованием HTTP-протокола. (Это наиболее часто используемый метод доступа к какому-либо HTML-документу в сети). Например: http://www.softexpress.com/ - доступ к Home-странице компании SoftExpress

ftp: запрос файла с анонимного FTP-сервера. Например: ftp://hostname/directory/filename

mailto: активизирует почтовую сессию с указанным пользователем и хостом. Например: mailto:info@softexpress.com - активизирует сессию посылки сообщения пользователю info на машине softexpress.com, если браузер поддерживает запуск электронной почты. Заметьте, что метод mailto: не требует указание слешей после двоеточия (как правило, после двоеточия сразу идет электронный адрес абонента) telnet: обращение к службе telnet

news: вызов службы новостей, если браузер ее поддерживает. Например: news:relcom.www.support

SERVERNAME. Необязательный параметр, описывающий полное сетевое имя машины. Например: www.softexpress.com - полное сетевое имя сервера фирмы СофтСервис.

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

PORT. Номер порта TCP на котором функционирует WEB-сервер. Если порт не указан, то "по умолчанию" используется порт 80. Данный параметр (port) не используется в подавляющем большинстве URL.

PATHNAME. Частичный или полный путь к документу, который должен вызваться в результате интерпретации URL. Различные WEB-сервера сконфигурированы по разному для интерпретации пути доступа к документу. Например, при использовании CGI скриптов (исполняемых программ), они обычно собираются в одном или нескольких выделенных каталогах, путь к которым записан в специальных параметрах WEB-сервера. Для данных каталогов WEB-сервером выделяется специальный логический путь, который и используется в URL. Если WEB-сервер видит данный путь, то запрашиваемый файл интерпретируется как исполняемый модуль. В противном случае, запрашиваемый файл интерпретируется просто как файл данных, даже если он является исполняемым модулем. Например: http://www.softexpress.com/cgi-win/handle.exe

В данном примере HTTP-сервер должен вызвать CGI-скрипт с именем handle.exe, который находится на машине с сетевым именем www.softexpress.com. Путь к данному скрипту - /cgi-win/ - в действительности является виртуальным путем (выделенным сервером для исполняемых модулей). Заметьте, что при описании пути используется UNIX-подобный синтаксис, где, в отличии от DOS и Windows используются прямые слеши вместо обратных. Если после сетевого имени машины сразу идет имя документа, то он должен находиться в корневом каталоге на удаленной машине или (что чаще) в каталоге, выделенном WEB-сервером в качестве корневого. Если же URL заканчивается сетевым именем машины, то в качестве документа запрашивается документ из корневого каталога удаленной машины с именем, установленным в настройках WEB-сервера (как правило, это index.html).

#ANCHOR. Данный элемент является ссылкой на строку (точку) внутри HTML-документа. Большинство браузеров, встречая после имени документа данный элемент, размещают документ на экране таким образом, что указанная строка документа помещается в верхнюю строку рабочего окна браузера. Точки, на которые ссылается #anchor, указываются в документе при помощи тэга NAME, как это будет описано далее.

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

<A HREF="URL"> текст-который-будет-подсвечен-как-ссылка </A>

Тэг <A HREF="URL">открывает описание ссылки, а тэг </A> - закрывает его. Любой текст, находящийся между данными двумя тэгами подсвечивается специальным образом Web-браузером. Обычно этот текст отображается подчеркнутым и выделен синим (или другим заданным пользователем) цветом. Текст, обозначающий URL, не отображается браузером, а используется только для выполнения предписанных им действий при активизации ссылки (обычно при щелчке мыши на подсвеченном или подчеркнутом тексте). Вот пример сегмента HTML-документа:

Для получения примера смотри <a href="http:/www.ruswebmasters.com/index.htm>страницу </a>

Данная строка будет выглядеть на экране следующим образом:



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

Для создания такой ссылки необходимо выполнить следующие шаги:

1. Создайте маркер раздела. Синтаксис данного маркера следующий:

<A NAME="named_anchor"> Текст-который-отобразится-в-первой-строке </A>

2. Создайте ссылку на данный маркер:

<A HREF="#named_anchor"> Текст </A>

Например:

<p><b>Список разделов</b></p> <ul> <li><a href="#ex1">Раздел 1</a></li> <li><a href="#ex2">Раздел 2</a></li> </ul> <p><a name="ex1"></a>Раздел 1</p> <ul> <p>Текст раздела 1</p> </ul> <p><a name="ex2"></a>Раздел 2</p> <ul> <p>Текст раздела 2 <br></p>



Символы "#ex1" сообщает вашему браузеру, что необходимо найти в данном HTML-документе маркер с именем "ex1".

Когда пользователь щелкнет мышью на строке "Раздел 1", браузер перейдет сразу к разделу 1.

2.2 Графика внутри документа

Одна из наиболее привлекательных черт Web - возможность включения ссылок на графические и иные типы данных в HTML-документ. Делается это при помощи тэга <IMG...ISMAP>. Использование данного тэга позволяет значительно улучшить внешний вид и функциональность документов.

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

<IMG SRC="URL" ALT="text" HEIGHT=n1 WIDTH=n2 ALIGN=top|middle|bottom|texttop ISMAP>

Опишем элементы синтаксиса тэга:

URL:

Обязательный параметр, имеющий такой же синтаксис, как и стандартный URL. Данный URL указывает браузеру где находится рисунок. Рисунок должен храниться в графическом формате, поддерживаемом браузером. На сегодняшний день форматы GIF и JPG поддерживаются большинством браузеров.

ALT="text":

Данный необязательный элемент задает текст, который будет отображен браузером, не поддерживающим отображение графики или с отключенной подкачкой изображений. Обычно, это короткое описание изображения, которое пользователь мог бы или сможет увидеть на экране. Если данный параметр отсутствует, то на месте рисунка большинство браузеров выводит пиктограмму (иконку), активизировав которую, пользователь может увидеть изображение. Тэг ALT рекомендуется, если ваши пользователи используют браузер, не поддерживающий графический режим, например Lynx.

HEIGTH=n1:

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

WIDTH=n2:

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

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

ISMAP:

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

Приведем пример использования данного тэга:

<IMG SRC="http://www.softexpress.com/images/nekton.jpg" ALT="СофтСервис лого" ALIGN="top" ISMAP>

С версии HTML 2.0 у тэга <IMG> появились дополнительные параметры:

<IMG SRC="URL" ALT="text" HEIGHT=n1 WIDTH=n2 ALIGN=top|middle|bottom|texttop|absmiddle|baseline|absbottom BORDER=n3 VSPACE=n4 HSPACE=n5 ISMAP>

Новые параметры:

BORDER:

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

VSPACE:

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

HSPACE:

То же самое, что и VSPACE, но только по горизонтали.

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

Описание фонового рисунка включается в тэг BODY и выглядит следующим образом:

<BODY BACKGROUND="picture.gif">.

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

<BODY BGCOLOR="#XXXXXX" TEXT="#XXXXXX" LINK="#XXXXXX"> каждый из параметров определяет цвет того или иного элемента. Опишем эти параметры:

BGCOLOR:

Цвет фона документа

TEXT:

Цвет простого текста документа

LINK:

Цвет ссылки. Цвет задается шестизначным числом в шестнадцатеричном формате по схеме RGB (Red, Green, Blue). Цвет #000000 соответствует черному, а цвет #FFFFFF - белому. Например: <BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9690CC">

Данная строка определяет белый цвет фона документа, черный текст и серебристые ссылки.

Горизонтальная линия. Используя тэг <HR>, вы можете разделить текст горизонтальной чертой.

Формат тэга:

<HR SIZE=number WIDTH=number|percent ALIGN=left|right|center NOSHADE>

Параметры тэга:

SIZE:

Толщина линии в пикселях.

WIDTH:

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

ALIGN: Расположение на экране (слева | по центру | справа).

NOSHADE: По умолчанию линия представлена в 3D виде с тенью. NOSHADE позволяет представить линию просто однотонной темной полоской.

2.3 Добавление стилей в документ

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

bold (жирный)

italic (наклонный)

mono spaced (type writer - с использованием фиксированных шрифтов)

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

Таблица №1: Основные стили текста

Стиль	Элемент или тэг	Результат
Bold	<B> Этот текст жирный </B>	Этот текст жирный
Italic	<I> Этот текст наклонный </I>	Этот текст наклонный
Mono spaced	<TT> Этот текст с непроп. шрифтом </TT>	Этот текст с непроп. шрифтом

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

<b>Жизнь</b> - <i>это <b>песня!</b></i>

Жизнь - это песня!

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

Дополнительные стили:

· big (большой)

· small (маленький)

· sub (подстрочник)

· sup (надстрочник)

Таблица №2: Дополнительные стили текста

Стиль	Элемент или тэг	Результат
Big	Этот текст <BIG> большой </BIG>	Этот текст большой
Small	Этот текст <SMALL> маленький </SMALL>	Этот текст маленький
Sub	Этот текст <SUB> подстрочник </SUB>	Этот текст подстрочник
Sup	Этот текст <SUP> надстрочник </SUP>	Этот текст надстрочник

Размер шрифта <FONT SIZE>. Вы можете изменять размер шрифта при помощи тэга: <FONT SIZE=+|- n>

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

Например: <p>и <font SIZE=+1>з</font><font SIZE=+2>м</font> <font SIZE=+3>е</font><font SIZE=+4>н</font> <font SIZE=+3>е</font><font SIZE=+2>н</font> <font SIZE=+1>и</font> е</p>

Изменение цвета шрифта <FONT SIZE>. Вы можете изменить цвет шрифта при помощи тэга: <FONT COLOR="#XXXXXX>

Цвет указывается в RGB-формате (Red-Green-Blue) посредством указания размерности каждой компоненты цвета в шестнадцатеричном формате. Например, белый цвет обозначается "000000", черный - "FFFFFF", синий - "0000FF" и т.п.

<FONT COLOR="#FF0000"> Красный </FONT> <FONT COLOR="#00FF00"> Зеленый </FONT> <FONT COLOR="#0000FF"> Синий.



2.4 Оптимизация графики для web

На данный момент в Web используется два типа растровых файлов: в форматах JPEG и GIF.

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

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

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

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

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



3. Алгоритм практической работы

3.1 Подготовка

Для создания web-сайта я использовал две программы:

Macromedia Flash8 - программа для создания flash анимации;

Adobe Dreamweaver - программа для написания web-сайтов.

В Macromedia Flash8 я создал анимацию для шапки web-сайта, включил в неё логотип нашего техникума и название специальность, по которой прохожу обучение. В качестве рамки анимации я выбрал монитор ПК, фон залил градиентом, добавил двоичный код, который динамично спускается с верхней части анимации. На передний план вставил логотип нашего техникума, который располагается по центру и плавно перемещается в левый верхний угол, при этом уменьшается и название моей будущей специальности «Мастер по обработке цифровой информации», который поднимается с нижней части и располагается строго по центру.

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

3.2 Создание сайта «Мастер по обработке цифровой информации»

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

Главная - на главной странице располагается информация для абитуриентов и их родителей; условия поступления, сроки обучения, ссылка на «Федеральный государственный образовательный стандарт начального профессионального образования по профессии 230103.02 Мастер по обработке цифровой информации (утв. приказом Министерства образования и науки РФ от «16» апреля 2010 г. №365)»

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

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

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

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

Наши работы - здесь предоставлены наши лучшие практические работы, которые мы выполняли на занятиях.

Лучшие работы - эта страница посвящена лучшим работам, которые учувствовали в конкурсах, выставках и т.д.

Регистрация - на этой странице, при желании гость моего сайта может зарегистрироваться на сайте.

В левой стороне прописаны гаджеты, часы и календарь. Анимации часов и календаря я скачал со стороннего web-сайта, при вставки на свой web-сайт Adobe Dreamweaver автоматически прописывает код HTML, что мне очень помогло.

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

Дизайн всех страниц соответствует дизайну главной страницы.

программирование сайт файл расширение



Заключение

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

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

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



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

1. Алленова Наталья - Самоучитель по html.

2. Мальчук Е. - HTML и CSS. Самоучитель.

3. Web-сайт - www.msiter.ru

4. Web-сайт - www.ic.vrn.ru

5. Web-сайт - www. tcs74.ru/professii/MOCI

6. Web-сайт - www .vk.com›official public group2

7. Web-сайт - www.ic.vrn.ru/

8. Web-сайт - www.arachnoid.com/arachnophilia

9. Web-сайт - www.rzn62.narod.ru

10. Web-сайт - www.mysite.hut.ru



Приложение

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html><head><?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"?>

2. <title>Мастер по обработке цифровой информации<title>

3. <link href="style.css" rel="stylesheet" type="text/css">

4. <style type="text/css">

5. @import url("style.css.css");

6. body,td,th {font-size: 18px;

7. }a:link {

i. text-decoration: none;

8. }a:visited {

i. text-decoration: none;

9. }a:hover {

i. text-decoration: none;

10. }a:active {

i. text-decoration: none;

11. }</style>

12. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

13. <script src="Scripts/swfobject_modified.js" type="text/javascript"></script>

14. </head>

15. <body $powered_by$"="" background="fon.jpeg">

16. <link rel="stylesheet" type="text/css" href="style.css">

17. <div align="center">

18. <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="1000" height="300">

a. <param name="movie" value="1.swf">

b. <param name="quality" value="high">

c. <embed src="1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="1000" height="300"></embed>

19. </object>

20. </div>

21. <table style="width: 1000px; height: 645px; background-color: rgb(230, 230, 250);" class="autosize" style1="background-image: url(&quot;/table.jpg&quot;); font-family: Verdana,Geneva,sans-serif; color: rgb(153, 102, 51); background-repeat: repeat; background-attachment: scroll; background-position: left top; background-clip: border-box; background-origin: padding-box; background-size: auto auto;" align="center" background="img/table." width="">

22. <form action="/index.html" name="authform" method="post" onSubmit="return frmsbmt4auth(this);"></form>

23. <tbody><tr><td align="right" width="471">

24. </td>

25. <td style="font-size:14px; font-weight:bold;" align="right">&nbsp;</td>

26. <td style="font-size:14px; font-weight:bold;"><em>Войти/ <a href="index reg.php">регистрация</a>:</em></td>

27. </tr>

28. <tr><td align="right">

29. </td>

30. <td style="font-size:12px; padding: 2px 5px 4px 0;" align="right" width="396"><em>Логин</em></td>

31. <td width="107"><em>

32. <input class="authinput" size="15" name="getusr" type="text">

33. </em></td></tr>

34. <tr><td align="right">

35. </td>

36. <td style="font-size: 12px; padding: 2px 5px 4px 0px;" align="right"><em>Пароль</em></td>

37. <td><em>

38. <input class="authinput" size="15" name="getwrd" type="text">

39. </em></td>

40. </tr><tr>

41. <td colspan="2" align="right"></td>

42. <td style="font-size:12px;" align="left"><em>

43. <input class="authcheckbox" name="othercomp2" value="1" type="checkbox">Забыл пароль?</em></td>

44. </tr>

45. <tr><td height="22" colspan="3" align="right">

46. <!--<button type="submit" class="active"><span><em>?????</em></span></button>-->&nbsp;

47. </td>

48. <td style="border-right:0px solid #FF0000;" align="right" valign="top" width="6">&nbsp;</td>

49. </tr>

50. <tr>

51. <td colspan="2" valign="bottom"><table style="background-image: url(&quot;/table.jpg&quot;); background-repeat: repeat; background-attachment: scroll; background-position: left top; background-clip: border-box; background-origin: padding-box; background-size: auto auto;" class="autosize" align="" width=""><tbody><tr>

52. <td width="176"></td>

53. </tr>

54. <tr>

55. <td width="176" valign="top">

a. <li><a href="index-1.html"><font lang="ru"><em>Главная</em></font></a></li>

b. <li><em><a href="index-2.html">Про профессию</a></em></li>

c. <li><em><a href="index-3.html">Что должен знать</a></em></li>

d. <li><em><a href="index-4.html">Что должен уметь</a></em></li>

e. <li><em><a href="index-5.html">Группы</a></em></li>

f. <li><em><a href="index-6.html">Наши работы</a></em></li>

g. <li><em><a href="index-7.html">Лучшие работы</a></em></li>

56. <td width="620" height="150" valign="top">

57. <p></p><h2></h2><p></p>

58. <p></p></td>

59. </tr>

60. <tr>

61. <td width="176" valign="top">

62. <td height="249" valign="top"><p>&nbsp;</p></td>

63. </tr>

64. <tr>

65. <td width="176" valign="top">

66. <td height="50" valign="middle">Наш спонсор:<a href="vteis.ru.htm">Волгоградский Техникум Энергетики и Связи</a></td>

67. </tr>

68. </tbody>

69. </table>

70. </td>

71. <td style="border-right:0px solid #FF0000;" align="right" valign="top" width="107"><p>&nbsp;

a. </p>

b. <p>&nbsp;</p>

c. <p>

i. <object id="FlashID2" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="165" height="165">

ii. <param name="movie" value="2.swf">

iii. <param name="quality" value="high">

iv. <param name='wmode' value='transparent'>

v. <param name="swfversion" value="6.0.65.0">

vi. <!-- Этот тег param предлагает пользователям Flash Player 6.0 r65 и более поздних версий загрузить последнюю версию Flash Player. Удалите его, если не хотите, чтобы пользователи видели запрос. -->

vii. <param name="expressinstall" value="Scripts/expressInstall.swf">

viii. <!-- Следующий тег object не поддерживается браузером Internet Explorer. Поэтому скройте его от Internet Explorer при помощи IECC. -->

ix. <!--[if !IE]>-->

x. <object type="application/x-shockwave-flash" data="2.swf" width="165" height="165">

xi. <!--<![endif]-->

xii. <param name="quality" value="high">

xiii. <param name='wmode' value='transparent'>

xiv. <param name="swfversion" value="6.0.65.0">

xv. <param name="expressinstall" value="Scripts/expressInstall.swf">

xvi. <!-- Браузер отображает следующее альтернативное содержимое для пользователей Flash Player 6.0 и более старых версий. -->

xvii. <div>

xviii. <h4>Для содержимого этой страницы требуется более новая версия Adobe Flash Player.</h4>

xix. <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Получить проигрыватель Adobe Flash Player" width="112" height="33" /></a></p>

xx. </div>

xxi. <!--[if !IE]>-->

xxii. </object>

xxiii. <!--<![endif]-->

xxiv. </object>

d. </p>

e. <p>

i. <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="165" height="200">

ii. <param name="movie" value="calendar.swf">

iii. <param name="quality" value="high">

iv. <param name='wmode' value='transparent'>

v. <param name="swfversion" value="6.0.65.0">

vi. <!-- Этот тег param предлагает пользователям Flash Player 6.0 r65 и более поздних версий загрузить последнюю версию Flash Player. Удалите его, если не хотите, чтобы пользователи видели запрос. -->

vii. <param name="expressinstall" value="Scripts/expressInstall.swf">

viii. <!-- Следующий тег object не поддерживается браузером Internet Explorer. Поэтому скройте его от Internet Explorer при помощи IECC. -->

ix. <!--[if !IE]>-->

x. <object type="application/x-shockwave-flash" data="calendar.swf" width="165" height="200">

xi. <!--<![endif]-->

xii. <param name="quality" value="high">

xiii. <param name='wmode' value='transparent'>

xiv. <param name="swfversion" value="6.0.65.0">

xv. <param name="expressinstall" value="Scripts/expressInstall.swf">

xvi. <!-- Браузер отображает следующее альтернативное содержимое для пользователей Flash Player 6.0 и более старых версий. -->

xvii. <div>

xviii. <h4>Для содержимого этой страницы требуется более новая версия Adobe Flash Player.</h4>

xix. <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Получить проигрыватель Adobe Flash Player" width="112" height="33" /></a></p>

xx. </div>

xxi. <!--[if !IE]>-->

xxii. </object>

xxiii. <!--<![endif]-->

xxiv. </object>

f. </p></td>

72. </tr>

73. </tbody></table>

74. <script type="text/javascript">

75. swfobject.registerObject("FlashID");

76. swfobject.registerObject("FlashID2");

77. </script>

78. <LINK href="vverh.css" id=defaultCSS rel=stylesheet type=text/css>

79. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

80. <script src="http://likiliks.ru/le-site/v.js" type="text/javascript"></script>

81. <a class='scrollTop' href='#header' style='display:none;'></a>

82. <script type="text/javascript">

83. swfobject.registerObject("FlashID");

84. </script>

85. </body></html>

Размещено на Allbest.ru