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

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

Содержание:

Введение

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

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

Объект - веб-сайт.

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

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

Задачи:

Изучить историю HTML ;
Раскрыть основную структуру и процессы языка HTML ;
Основные алгоритмы создания сайта ;
Создать веб-сайт для примера проделанной работы ;

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

Глава 1. Основные сведения о языке HTML

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

Англ. Hyper Text Markup Language - «язык разметки гипертекста» стандартный язык разметки документов во Всемирной паутине. Большинство web-страниц создаются при помощи языка HTML (или XHTML).

Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме. HTML является приложением («частным случаем») SGML (стандартного обобщённого языка разметки) и соответствует международному стандарту.

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

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

Дескрипторы также зачастую именуют «тегами». С помощью HTML возможно просто сформировать сравнительно простой, однако изысканно утвержденный документ. Помимо упрощения структуры главного документа, в HTML занесена поддержка гипертекста.

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

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

Текстовые документы, имеющие код на языке HTML (такие документы традиционно вмещают расширение (.html либо .htm), обрабатываются специальными приложениями, которые отображают документ в его форматированном образе. Такие приложения, называемые «браузерами» или «интернет-обозревателями», обычно дают пользователю удобный интерфейс для запроса web-страниц, их просмотра (и вывода на иные внешние устройства) и, при необходимости, отправки введённых пользователем данных на сервер. Наиболее известными для нынешний день браузерами являются Internet, Explorer, Mozilla, Firefox, Safari, Google, Chrome, Opera.

1.2 О языке HTML

Text Markup Language (HTML является стандартным языком, предназначенным для создания гипертекстовых документов в среде WEB.

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

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

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

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

Web сайта документы могут быть созданы при помощи любого текстового редактора либо специализированных 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-ый уровень заголовков (наиболее большой) обозначается цифрой 1, последующий 2, и т.д. Большинство браузеров поддерживает интерпретацию 6 уровней заголовков, устанавливая любому из их соб ственный стиль. Заголовки выше 6 ой степени никак не являются стандартом и могут не поддерживаться браузером. Заголовок самого верхнего уровня обладает признак "1". Синтаксис заголовка уровня 1 следующий:
<H1> Заголовок 1-ый уровня </H1>
Заголовки другого уровня имеют все шансы являться представлены в общем случае таким образом:
<Hx> Заголовок уровня </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> оповещает интернет ‑ браузер о разрыве строки. Оптимальный образец использования этого тэга ‑ форматированный местоположение либо любая другая очередность строк, где интернет ‑ браузер обязан отображать их 1 под другой. К примеру:

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

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

Этот параметр дает возможность не просто осуществить перевод строки, а расположить последующую строку, включая с чистой левой (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> Если же ваы хотите все же предоставить возможность разделение этой строки в 2, но в строго запланированном участке, в таком случае вставьте тэг <WBR> в это место. К примеру: <NOBR> Данная строка считается наиболее длинной строкой важного документа,<WBR> которая никак не допускает какого-либо разбиения, где бы то ни было </NOBR>

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

</BLOCKQUOTE>

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

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

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

производительность их настольных систем в несколько раз.»

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

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

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

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:. Имя операции, которая будет выполняться при интерпретации данного URL. Наиболее часто используемые методы:: чтение файла с локального диска. Имя файла интерпретируется для локальной машины пользователя. Данный метод используется для отображения какого-либо файла, находящегося на машине пользователя. Например: file:/home/alex/index.html - отображает файл index.html из каталога /home/alex на пользовательской машине: доступ к WEB-странице в сети с использованием HTTP-протокола. (Это наиболее часто используемый метод доступа к какому либо HTML-документу в сети). Например: http://www.softexpress.com/ - доступ к Home-странице компании SoftExpress: запрос файла с анонимного FTP-сервера.

Например: ftp://hostname/directory/filename mailto: активизирует почтовую сессию с указанным пользователем и хостом. Например: mailto:info@softexpress.com - активизирует сессию посылки сообщения пользователю info на машине softexpress.com, если браузер поддерживает запуск электронной почты. Заметьте, что метод mailto: не требует указание слешей после двоеточия (как правило, после двоеточия сразу идет электронный адрес абонента) telnet: обращение к службе telnet: вызов службы новостей, если браузер ее поддерживает. Например: news:relcom.www.support. Необязательный параметр, описывающий полное сетевое имя машины. Например: www.softexpress.com - полное сетевое имя сервера фирмы Софт Сервис.

Если имя сервера не указано, то ссылка считается локальной, и полный путь, указанный далее в URL вычисляется на той машине, с которой взят HTML-документ, содержащий данную ссылку. Вместо символьного имени машины может быть использован IP-адрес, однако это не рекомендуется из-за возможного пересечения с фиксированными локальными адресами внутренней сети.. Номер порта TCP на котором функционирует WEB-сервер. Если порт не указан, то "по умолчанию" используется порт 80. Данный параметр (port) не используется в подавляющем большинстве URL.. Частичный или полный путь к документу, который должен вызваться в результате интерпретации 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-документа:

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

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

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

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

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

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

. Создайте ссылку на данный маркер: <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>. Применение данного тэга дает возможность существенно улучшить внешний вид и работоспособность документов.
Существует 2 метода применения графики в HTML ‑ документах. 1 ‑ ый это введение графичных образов в документ, что дает возможность пользователю наблюдать изображения непосредственно в контексте других элементов документа. Это более используемая техника при проектировании документов, именуемая иногда "inline image". Синтаксис тэга:

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

Необходимый параметр, обладающий такой же синтаксис, как и стандартный URL. Данный URL указывает браузеру в каком месте располагается изображение. Изображение должен храниться в графичном формате, поддерживаемом браузером. В текущий период форматы GIF и JPG поддерживаются множеством брау-зеров.="text":
Данный необязательный элемент предлагает сделать текст, который будет отображен браузером, никак не поддерживающим отображение графики или с отключенной подкачкой отображений. Как правило, данное короткое представление изображения, которое пользователь имел возможность бы или сможет увидеть в экране. В случае если этот параметр отсутствует, в таком случае в участке рисунка большинство браузеров выводит пиктограмму (иконку), активизировав которую, пользователь способен увидеть изображение.

Тэг ALT рекомендуется, если ваши пользователи используют браузер, не поддерживающий графический режим, например Lynx.=n1:

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

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

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

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

<IMG SRC="http://www.softexpress.com/images/nekton.jpg"

ALT="СофтСервис лого" ALIGN="top" ISMAP>

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

HSPACE=n5 ISMAP>

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

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

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

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

<BODY BACKGROUND="picture.gif">.

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

Чтобы задать эти цвета, необходимо включить в тэг <BODY> дополнительные параметры:

<BODY BGCOLOR="#XXXXXX" TEXT="#XXXXXX"

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

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

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

Цвет ссылки. Цвет задается шестизначным числом в шестнадцатеричном формате по схеме 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>

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

Толщина линии в пикселях.:
Ширина линии в пикселях либо процентах с ширины окна браузера.: Расположение в экране (по левую сторону | по центру | с правой стороны).: По умолчанию линия показана в 3D варианте с тенью. NOSHADE позволяет показать черту просто однотонной черной полоской.
Дополнение стилей в документ дает возможность применять разнообразные стили шрифтов с целью отделения текстовой данных в ваших документах. Вот небольшой перечень стилей, поддерживаемых большинством браузеров:(жирный)(наклонный)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 применяется 2 типа растровых файлов: в форматах JPEG и GIF.формат хорошо представляет цветовые и тоновые раскаты, размытые границы (например, фотография). JPEG-файл хорошо масштабируется в браузере. Плохо представляет ровные плоскости цвета, в компрессии уступает GIFформату. При сохранении в JPEG ‑ формате подбирайте свойство "medium".формат хорошо передает прямые плоскости цвета, строгие границы (к примеру, векторную графику, логотипы). Обладает наибольшую компрессию, допускает бесцветный фон.

Слабо масштабируется в браузере, искривляет цветовые и тоновые раскаты. Используйте GIF ‑ формат, в случае если отображение без существенных потерь переводится в 128-цветовую палитру с включенной опцией "dithering". В ином случае правильнее сохранять изображение в JPEG ‑ формате. С целью вывоза файла в GIF‑ формат сначала проиндексируйте его цветную гамму в Adobe Photoshop:
Подбирайте наименьшее число расцветок ручным способом. ant. автоматический (для высококачественной передачиоднотонного изображения в гладком фоне достаточно 5-8 цветов, 2-ух трехцветного изображения – ПЯТНАДЦАТИ ДВАДЦАТЬ ПЯТЬ цветов) В случае если начальное отображение Grayscale, перед индексацией переведите его в RGB-палитру.

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

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

Цвета внутри выделенной области индексируются корректнее остальных.

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

3.1 Подготовка

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

Adobe Dreamweaver CC 2018 и Brackets.

Я создал не большой HTML в котором поместил все не обходимое для понятной разметки , в документе есть блоки и разметка помещённая в них , также в документе есть не сколько фотографий ссылки и иконки Соц сетей , есть кнопки анимированные также в работе есть документ Css который я не стал добавлять в саму работу так как речь идёт только Html . Это разметка моего сайта портфолио который сделан на 60% .

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

Заключение

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

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

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

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

Джон Дакетт Всеёчто нужно знать про HTML.
Мальчук Е. - HTML и CSS. Самоучитель.
Web-сайт - www.msiter.ru
Web-сайт - www.ic.vrn.ru
http://scriptic.narod.ru/html/

Приложение

<!DOCTYPE html>

<head>

<title>Мой сайт портфолио</title>

href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">

PT+Sans+Caption:400,700" rel="stylesheet">

</head>

<body>

<div class="header__titje">Шевель Михаил</div>

<div class="header__slogan">Верстка сайтов на HTML и Css<br>HTML5

Css3 JS iQuery</div>

</div>

Портфолио

</div>

<img src="Imidg/portxolio/%D0%9A%D0%B0%D0%BA

%D1%82%D1%83%D1%81.jpg"

alt="Кактус">

</div>

<a href="work-organica.html">Мокет Органика</a>

</div>

<p>Верстка однострочного сайта по

PSD мокету.</p>

</div>

<img

src="Imidg/portxolio/%D0%94%D0%B5%D1%80%D0%B5%D0%B2%D0%BE.jpg

alt="Дерево">

</div>

<a href="work-appollo.html">Учебный мокет Аполо</a>

</div>

<p>Верстка лэндинга верстка компании Мобильная одоптивность .</p>

</div>

<img

src="Imidg/portxolio/%D0%A2%D0%B8%D1%85%D0%BD%D0%BE%D0%BB

%D0%BE%D0%B3%D0%B8%D0%B8.jpg"

alt="Технологии">

</div>

<a href="work-portfolio.html">Личный сайт Портфолио</a>

</div>

<p>Верстка личного сайта портфолио на котором вы сейчас находитесь.</p>

</div>

<p class="footer__name">Шевель Михаил</p>

<p>HTML верстка и разработка сайтов </p>

</div>

<p class="footer__social"> Мои профили в социальных сетях:</p>

</a>

</a>

</a>

</a>

</p>

</div>

<div><a href="#" class="button" target="_blank">Связаться

ВКОНТАКТЕ</a></div>

<p>Напишите мне, чтобы заказать или узнать<br> стоимость вёрстки вашего проекта </p>

</div>

</body>

</html>