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

Основы программирования на языке HTML (Изучение предметной области)

Содержание:

ВВЕДЕНИЕ

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

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

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

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

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

ГЛАВА 1. Язык гипертекстовой разметки HTML

1.1. Изучение предметной области

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

Web-сайт – это информация, представленная в определенном виде, которая располагается на Web-сервере и имеет свое имя (адрес). Для просмотра Web-сайтов на компьютере пользователя используются специальные программы, которые называются браузерами. В зависимости от того, какое имя (адрес) сайта мы зададим в строке "Адрес", браузер будет загружать в свое окно соответствующую информацию [1].

Web-сайт состоит из связанных между собой Web-страниц.

Каждая страница Web-сайта также имеет свой Internet адрес, который состоит из адреса сайта и имени файла, соответствующего данной странице. Таким образом, Web-сайт – это информационный ресурс, состоящий из связанных между собой гипертекстовых документов (Web-страниц), размещенный на Web-сервере и имеющий индивидуальный адрес. Посмотреть Web-сайт может любой человек, имеющий компьютер, подключенный к Internet [1].

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

Информационные сайты. К ним относятся сайты учебных заведений, сообществ по интересам, фирм и др [1].

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

Сайты электронной коммерции. В Internet встречаются виртуальные магазины, которые позволяют делать покупки, сидя за мониторами своих компьютеров [2].

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

1.2. Язык HTML

Web-страницы могут существовать в любом формате, но в качестве стандарта принят Hyper Text Markup Language - язык разметки гипертекстов, предназначенный для создания форматированного текста, насыщенного изображениями, звуком, анимацией, видеоклипами и гипертекстовыми ссылками на другие документы, разбросанные как по всему Web-пространству, так и находящиеся на этом же сервере или являющиеся составной частью этого же Web-проекта [2].

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

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

HTML был ратифицирован World Wide Web Consortium. Он поддерживается несколькими широко распространенными браузерами, и, возможно, станет основанием почти всего программного обеспечения, которое имеет отношение к Web.

Любой HTML документ должен содержать следующие теги <html></html>, <head></head>, <body></body>, <title></title>. Порядок расположения тегов в HTML документе представлен ниже:

<html>

<head>

<title>Название вашей страницы</title>

</head>

<body>

Тело вашего документа

</body>

</html>

Внутри тега <head></head> располагается название вашего HTML документа (чаще всего именно его вы видите в качестве ссылки в результатах поиска поисковыми машинами), помимо этого тега внутри конструкции <head></head> могут располагаться так называемые Мета Теги. Их назначение и описание смотри в справочнике по Мета Тегам.

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

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

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

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

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

Элемент — конструкция языка HTML. Это контейнер, содержащий данные и позволяющий отформатировать их определенным образом. Любая Web-страница представляет собой набор элементов. Одна из основных идей гипертекста возможность вложения элементов [1] .

Тег — начальный или конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-страницы теги заключаются в угловые скобки, а конечный тег всегда снабжается косой чертой. Например: элемент, содержащий некоторый текст, ограничен начальным тегом (маркером) <p> и конечным тегом (маркером) </p>. Т.е. текст помещен между тегами как в контейнер. Здесь же можно увидеть, как осуществляется возможность вложения элементов. Тег <font> вложен внутрь тега <p>, поэтому конечный тег </font> стоит перед </p>. В данном примере тег <p> указывает на то, что текст является отдельным абзацем, а тег <font> задает, например, формат шрифта [10].

<p> <font color="green"> Этот текст будет расположен в отдельном абзаце и выполнен зеленым цветом шрифта.</font> </p>

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

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

<p align="center"> Этот текст будет выровнен по центру экрана </p>. В данном примере атрибут align (выравнивание) расположен внутри тега <p>, следовательно он задает выравнивание этого абзаца. Значение атрибута равно "center", т.е. выравнивание абзаца будет по центру экрана [2].

Ниже на рисунке 1 приведена структура типичного Web-документа.

Рисунок 1 – Структура веб-сайта

Рассмотрим каждый элемент более подробно на примере сайта WebReference.ru.

Элемент <header> (от англ. header — верхний колонтитул, шапка) задаёт «шапку» сайта или раздела веб-страницы. Внутри «шапки» сайта обычно располагается логотип, название сайта, поисковая форма, навигационные ссылки и др. (Рисунок 2).

<header> нельзя вкладывать внутрь другого <header>, а также внутрь элементов <address> и <footer>.

Внутри <header> не должно быть элемента <main>.

Рисунок 2 – Тег header

Элемент <nav> (от англ. navigation — навигация) задаёт навигацию по сайту. Если на странице несколько блоков ссылок, то в <nav> обычно помещают приоритетные ссылки. Также допустимо использовать несколько <nav> в документе (Рисунок 3). Запрещается вкладывать <nav> внутрь <address>.

Рисунок 3 – Тег nav

Задаёт раздел документа, может применяться для блока новостей, контактной информации, глав текста, вкладок в диалоговом окне и др. Раздел обычно содержит заголовок. Допускается вкладывать один элемент <section> (от англ. section — раздел) внутрь другого (Рисунок 4).

Рисунок 4 – Тег section

Элемент <aside> (от англ. aside — в стороне, отступление) представляет собой раздел страницы, который имеет косвенное отношение к содержимому страницы и может быть рассмотрен отдельно от этого содержимого. <aside> применяется для боковых панелей, рекламных блоков, ссылок на архив, меток и другой информации, которая отделена от основного содержимого страницы (Рисунок 5).

Рисунок 5 – Тег aside

Элемент <footer> (от англ. footer — нижний колонтитул, подвал) задаёт «подвал» сайта или раздела веб-страницы, в нём может располагаться имя автора, дата документа, контактная и правовая информация.

<footer> нельзя вкладывать внутрь другого <footer>, а также внутрь элементов <address> и <header> (Рисунок 6).

Внутри <footer> не должно быть элемента <main>.

Рисунок 6 – Тег footer

Элемент <main> (от англ. main — основной, главный) предназначен для основного содержимого документа. На странице может быть только один <main> и он не должен располагаться внутри элементов <article>, <aside>, <footer>, <header>, <nav> или <section>.

Элемент <main> включает в себя содержимое, которое является уникальным для данного документа, и не должен включать повторяющиеся разделы сайта, такие как навигация, название сайта, логотип, поисковая форма, баннеры и др. (Рисунок 7).

Рисунок 7 – Тег main

Фреймы

Фреймы — это долгожданная многооконность, которая позволяет решить сразу множество проблем связанных с разработкой документов. В первую очередь возможность одновременной работы с текстом и меню, текстовым меню и графикой. Параллельно решаются проблема BANNER, для которой в HTML+ предлагался новый тег. Фрейм позволяет использовать часто встречающиеся фрагменты текста, например, постоянную заставку в качестве отдельного фрейма. Если раньше нужно было постоянно вставлять в текст либо готовые части страницы, которые появляются в начале и конце каждого документа или использовать server site includes, то теперь это можно делать при помощи фреймов. Вообще, на мой взгляд, фреймы очень органичное решение, т.к. документ с фреймами является просто суперпозицией простых HTML-документов [12].

Дополнительные окна

Дополнительные окна — это тесно связанный с фреймами механизм. Но если страница с фреймами делит рабочую область Navigator на несколько частей, не выходя за пределы окна программы, то в случае дополнительного окна разработчик страницы Web имеет возможность открыть новое окно Navigator и тем самым предать как бы новое измерение просмотру. Такое направление интерфейса лежит в русле разработки много оконных интерфейсов гипертекстовых систем, о которых в академических кругах говорят уже лет десять, но к единой модели такого интерфейса так до сих пор еще и не пришли. Очевидно одно, что это позволяет оставлять видимые закладки при проходе по гипертекстовой сети по инициативе разработчика страниц, что является в некоторых случаях достаточно полезным решением, которое расширяет привычную двухуровневую схему просмотра, когда в отдельное окно помещали либо графику, либо файл специального формата [13].

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

Динамическое обновление документов — это возможность построения самопросматривающихся страниц и, если позволяет скорость линии связи примитивной мультипликации. Если разработчики Arena только обещают использование заголовка HTML-документа для управления просмотром последнего, то в Netscape это уже делается. В данном случае используется тег META с атрибутом HTTP-EQUIV, в котором и указывается скважность обращения Navigator к серверу за обновленным документом, которым может быть либо новая копия просматриваемого документа, либо другой документ [15].

Таким образом, большинство людей в последнее время стали больше работать в сети интернет. И одним из способов самовыражения стало созданием личных страничек. Веб-страница (англ.Web page) — документ, содержание которого пригодно для обработки, манипулирования и просмотра посредством веб-браузера. Веб-страницы могут располагаться локально (на персональном компьютере) или на сетевых устройствах(серверах) в локальных и глобальных сетях. Изначально веб-сайты представляли из себя совокупности статических документов. В настоящее время большинству из них свойственна динамичность и интерактивность. Для таких случаев специалисты используют термин веб-приложение - готовый программный комплекс для решения задач веб-сайта. Веб-приложение входит в состав веб-сайта, но веб-приложение без данных сайтом является только техническим [15].

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

Для разработки гипертекстовой разметки необходимо существенно влияет два фактора: желание научиться гипертекстовой разметки и знание интерфейса в области гипертекстовых систем [16].

HTML разработанимом Бернерсом Ли, сотрудником Лаборатории физики элементарных частиц европейского центра ядерных исследований (CERN) в 1989 г. [6]. Со временем появился HTML+ в 1993 году. Буквально через год вышла версия HTML версия 2.0, и она стала постоянно использоваться и используется по сей день. В 1995 год вышла версия HTML 3.0, она в себя включила математические символы, они вставлялись при помощи элементов языка. Через год вышла версия HTML3.2 в которую включили фреймы, которые используются в приложении курсовой. И HTML 4.0 вышла в 1997 году, далее создания страниц использовались скрипты- программирования.

ГЛАВА 2. Создание Web-страниц с помощью языка HTML

2.1. Анализ современных сайтов

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

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

Сайт-визитка – как правило, содержит несколько веб-страниц, имеет не сложный и функциональный дизайн; востребован в компаниях, которые хотят представить информацию о себе и своих услугах в сети интернет; основные разделы сайта: «О компании», «Продукция или услуги», «Прайс-листы», «Контактная информация»; сайт-визитка чаще всего используется в качестве рекламного, предприятиями малого бизнеса и частными лицами.

Корпоративный информационный web-сайт – реализуют с целью создания автоматизации внутреннего документооборота, учёта показателей компании, управления персоналом, функционал сайта поддерживает обмен информацией между удалёнными филиалами; корпоративный сайт способствует росту репутацию и имиджа компании; соответственно дизайн сайта должен быть выполнен в фирменном стиле компании; чаще всего, сайт содержит «администраторскую часть» для создания, а также внесения изменений в контент , позволяющий менеджеру или секретарю компании добавлять или менять новости, информационные статьи, справочную и прочую информацию на сайте; в дизайне используется минимум графики, основной упор делается на тестовую информацию. Сайт предназначен для предоставления подробной информации о компании, истории торговой марки, сведений об оказываемых услугах или поставляемых товарах; может содержать новостную ленту компании, информации о рекламных и торговых акциях, информационный блок для прессы; каталог продукции компании; всё это необходимо для создания оригинального дизайна, выгодно представляющего компанию.

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

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

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

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

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

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

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

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

2.2. Создание простых страниц на HTML

Разбивка на абзацы

Чтобы разместить определенный текст на странице, текст может быть заготовлен заранее, тогда добавляются требуемые теги, или же Интернет-страница должна быть в виде шаблона, текст можно ввести в него с клавиатуры или скопировать через буфер обмена. Когда мы в тексте прописываем абзац, в браузере это игнорируются, поэтому каждый абзац обрамляется парой тегов: <P> (в начале) и </P> (в конце), так как этот тег закрывающийся, тогда между абзацами автоматически оставляется небольшой отступ [1].

Для начала новой строки используются тег <BR>.Приводит к отображению браузером и переносит текст на новую строку. Этот тег не закрывающийся. Тег этот удобен тем, что, если требуется писать с новой строки без начала нового абзаца, например, стихотворение. Повторное использование этого тега позволяет вставить одну или несколько пустых строк [4].

Выравнивается с помощью атрибута ALIGN, если по умолчанию то будет слева, ALIGN записывается внутри тега <P>: < P ALIGN =… >, где можно записать одно из следующих значений:

CENTER - центрировать

RIGHT – выровнять по правому краю

LEFT – выровнять по левому краю

JUSTIFY – выравнивание по формату (по левому и правому краям одновременно).

При использовании данного атрибута в конце абзаца нужно обязательно записать закрывающий тег </P>.

Текстовый блок

В случае необходимости указания специальных свойств отдельному фрагменту текста используется тег <DIV> [8].

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

Для этого тега возможно использование атрибута типа выравнивания ALIGN.

Заголовки и подзаголовки

В HTML чтобы объявить текст заголовком или подзаголовком (задав для него крупный и жирный шрифт, чем для остального текста), достаточно заключить абзац в тег <H*>...</H*>, где записаны звездочки записывается цифры от 1 до 6 (если тег открыт к примеру с цифрой 3 , то и закрывается он с той же цифрой). При 1 — это задает шрифт наибольшего размера, 2 – чуть меньше и т. д. до 6. Так же можно указать выравнивание, по умолчанию будет стоять по левому краю. Чтобы выровнять, можно воспользоваться атрибутом ALIGN и записать в составе открывающего тега <H*> [14].

Управление начертанием текста

Управление параметрами текста используется простой способ. В фрагментах текста произвольной длины или отдельных слов, можно использовать специальные теги для делаемого начертания - полужирное, курсивное, подчеркнутое или ''зачеркнутое'' используя соответственные теги <B>...</B>, <I>...</I>, <U>...</U> и <S>...</S> [17].

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

А для получения нижних индексов или верхних используются теги <SUB>…</SUB> и <SUP>…</SUP>. Эти теги могут быть, как вложены в текст абзаца, так и, наоборот, содержать в себе один или несколько абзацев. Также их можно комбинироваться друг с другом для получения ''смешанных'' начертаний [11].

Ниже на рисунке 8 представлен пример созданной странице на HTML.

Рисунок 8 – Web-страница

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

Для вставки изображения в документ HTML используется тег <IMG>, как вставляется показано ниже [1]:

Элемент IMG

Под графическим изображением подразумевают: схемы, рисунки, графические объекты и карты изображений в форматах JPEG, GIF (включая прозрачные и анимированные), PNG.

Элемент IMG не имеет конечного тэга.

Тег <IMG> имеет следующие атрибуты:

Атрибут: Src

Атрибут этот является важным параметром. Указывает адрес (URL-адрес) до графического файла, или же название самого графического файла (если HTML документ находится в той же папке с графическим файлом) с расширением (поддерживаются *.jpg, *.gif, *.png).

Атрибут: Width

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

Атрибут: Height

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

Обязательно задаются значения параметров "width" и "heght", резервируя тем самым место в окне браузера еще до загрузки изображения. В противном случае документ при загрузке каждой картинки будет заново перерисовываться. А на медленных машинах или при подключении к сети посредством модема это просто плохо смотрится [3].

Атрибут: Hspace

Он определяет отступ картинки (в пикселах) по горизонтали от других объектов документа. При помощи указанного числа пикселей отдаляет изображение от текста.

Атрибут: Vspace

Определяет отступ картинки (в пикселах) по вертикали от других объектов документа. Так же необходим при отдалении изображения от текста.

Здесь можно посмотреть примеры применения этих атрибутов.[2]

Важно указывать значения параметров Hspace и Vspace, если вы хотите оставитьизображение от текста. Бывает, что некоторые браузеры по умолчанию присваивают им какое-то небольшое значение, не равное нулю.

Атрибут: Align

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

Left

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

Right

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

top и texttop

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

Middle

Выравнивает базовую линию текущей текстовой строки с центром изображения.

Absmiddle

Выравнивает центр текущей текстовой строки с центром изображения.

Absbottom

Выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки.

Здесь можно посмотреть действие всех значений атрибута "Align" элемента <Img>

bottom и baseline

Выравнивает нижнюю кромку изображения с базовой линией текущей текстовой строки.

Атрибут: Name

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

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

Атрибут: Alt

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

Атрибут: Border

Он позволяет создать рамку в ширину вокруг изображения в пикселах. Рамка не появляется при условии, если этот атрибут не указан в теге <Img>, только если изображение является гипертекстовой ссылкой. В таких случаях значение Border обычно указывают равным нулю.

Записывается так:

Атрибут: Lowsrc

Указывает адрес (URL) графического файла с расширением с альтернативным изображением более низкого качества, чем изображение, указанное в параметре SRC. Обозреватели, поддерживающие данный параметр, сначала загрузят картинку из LOWSRC, а затем заменят ее картинкой из SRC. Не обязательный параметр.

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

Рисунок 9 – Web-страница

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

2.3. Создание таблиц с помощью HTML

В Web-странице находится один из самых главных инструментов, является таблица.

Без использования CSS, только с помощью таблиц можно создавать страницы со сложным дизайном. Любая таблица представляет собой набор строк и столбцов, на пересечении которых находятся ячейки

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

Основные тэги таблицы

Таблица:<TABLE> ...</TABLE>

Далее идут основные теги основные тэги, описывающие таблицу. Все элементы таблицы должны находиться внутри этих двух тэгов. Когда создается таблица, по умолчанию таблица не имеет обрамления и разделителей. Обрамление добавляется атрибутом BORDER.

Строка таблицы:<TR>...</TR>

Сколько присутствует пар <TR>..</TR>, такое количество строк таблицы определяется в таблице. Строки могут иметь атрибут VALIGN и ALIGN, которые описывают визуальное положение содержимого строк в таблице.

Ячейка таблицы:<TD>...</TD>

Описывает стандартную ячейку таблицы. Ячейка таблицы может быть описана только внутри строки таблицы. Каждая ячейка должна быть пронумерована номером колонки, для которой она описывается. Если в строке отсутствует одна или несколько ячеек для некоторых колонок, то браузер отображает пустую ячейку. Расположение данных в ячейке по умолчанию определяется атрибутами ALIGN=left и VALIGN=middle. Данное расположение может быть исправлено как на уровне описания строки, так и на уровне описания ячейки [10].

Заголовок таблицы: <TH>...</TH>

Ячейка заголовка таблицы имеет ширину всей таблицы; текст в данной ячейке имеет атрибут BOLD и ALIGN=center.

Подпись:<CAPTION>...</CAPTION>

Данный тэг описывает название таблицы (подпись). Тэг <CAPTION>должен присутствовать внутри <TABLE>...</TABLE>, но снаружи описания какой-либо строки или ячейки. По умолчанию <CAPTION>имеет атрибут ALIGN=top, но может быть явно установлен в ALIGN=bottom. ALIGN определяет, где - сверху или снизу таблицы - будет поставлена подпись. Подпись всегда центрирована в рамках ширины таблицы [11].

Основные атрибуты таблицы

WIDTH

Определяет размер в процентах от ширины экрана. Используется в тегах <TABLE>, <TR>, <TH>.

Например WIDTH="60%"

BGCOLOR

Задаёт фоновый цвет. Используется в тегах <TABLE>, <TR>, <TH>.

BORDERCOLOR

Задаёт цвет рамки. Используется в тегах <TABLE>, <TR>, <TH>.

CELLPADDING

Задает расстояние между содержимым ячейки и ее рамкой в пикселях. Используется в теге <TABLE>.

CELLSPACING

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

BORDER

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

ALIGN

Если атрибут ALIGN присутствует внутри тэгов <CAPTION>и </CAPTION>, то он определяет положение подписи для таблицы (сверху или снизу). По умолчанию ALIGN=top.

Если атрибут ALIGN встречается внутри ;<TR>, <TH>или <TD>, он управляет положением данных в ячейках по горизонтали. Может принимать значения left (слева), right (справа) или center (по центру).

VALIGN

Данный атрибут встречается внутри тэгов <TR>, <TH>и <TD>. Он определяет вертикальное размещение данных в ячейках. Может принимать значения top(вверху), bottom(внизу), middle(по середине) и baseline(все ячейки строки прижаты кверху).

NOWRAP

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

COLSPAN

Указывает, какое количество ячеек будет объединено по горизонтали для указанной ячейки. По умолчанию 1.

ROWSPAN

Указывает, какое количество ячеек будет объединено по вертикали для указанной ячейки. По умолчанию 1.

Ниже на рисунке 10 показана таблица, созданная с помощью HTML.

Рисунок 10 – Таблица, созданная с помощью HTML

В Приложении B будет представлен код страницы.

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

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

Используя возможности языка HTML можно вставить в тело документа графические изображения: схемы, рисунки, графические объекты и карты, фотографии в форматах JPEG, GIF, PNG.

ЗАКЛЮЧЕНИЕ

Сейчас Интернет занимает очень важную часть нашей жизни. Работа с языком HTML даёт нам возможность создавать собственные веб-сайты и приложения. Для разработки, как правило, использую обычное ПО, так и специальные программы.

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

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

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

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

БИБЛИОГРАФИЯ

Агулар Р. Html и Css. Основа Любого Сайта:книга / Р. Агулар.-М.: Эксмо, 2010. - 43с.
Алленова Н.В. Учебник по HTML [Электронный ресурс]. – 2015. – Режим доступа: http://books.laborant.org.ua/html/158777/index.shtml.- Дата обращения: 12.01.2020.
Бунаков А.Д. Оформление текства с помощью языка HTML [Электронный ресурс]. – 2014. – Режим доступа: http://www.metabo.com.ru/design/tuts.htm Дата обращения: 12.01.2020.
Глушаков С.В., Жакин И.А., Хачиров Т.С. Программирование Web-Страниц:книга / С.В. Глушаков,И.А. Жакин,Т.С. Хачиров.: М-2015. - 37с.
Гончаров А. Самоучитель Html:книга / А.Гончаров .-Спб.: Питер, 2015. - 40с.
Кастро Э. Html И Css Для Создания Web-Страниц:книга / Э. Кастро Издательство: Нт Пресс, 2012 Г. - 34с.
Кожемякин А.А. Html И Css В Примерах. Создание Web-Страниц:книга / А.А. Кожемякин Инфрам, 2011. - 43с.
Кузницов М.А. Основы языка HTML [Электронный ресурс]. – 2015. – Режим доступа: http://www.rzn62.narod.ru Дата обращения: 11.01.2020
Мишанов. А.Е. Создание документов в стандарте HTML [Электронный ресурс]. – 2014. – Режим доступа: http://www.arachnoid.com/arachnophilia"www.arachnoid.com/arachnophilia Дата обращения: 11.01.2020
Муссиано Ч. И. Кеннеди Б. Html И Xhtml:книга / Ч. И Муссиано Б. Кеннеди. – Спб.: Символ-Плюс, 2010. - 35с.
Петюшкин А. Html. Экспресс-Курс:книга /А. Петюшкин.-Спб.: Бхв-Петербург, 2010. - 25с.
Полонская Е.Л. Язык Html:книга / Е.Л. Полонская.-М.: Диалектика, 2009.-35с.
Программирование, компьютеры и кибернетика [Электронный ресурс]: http://www.allbest.ru. - Дата обращения: 11.01.2020
Рева О.Н. Html. Просто Как Дважды Два:книга /О.Н. Рева - М.:Эксмо, 2011. - 44с.
Словари и энциклопедии на Академике [Электронный ресурс]: http://dic.academic.ru/.-Дата обращения: 11.01.2020
Ссылки-гиперссылки в HTML [Электронный ресурс]: http:// hyperlink .- Дата обращения: 11.01.2020.
Храпоничева Ю.А. Создание Web-страниц с помощью языка HTML. Учебно-методическое пособие. Ю.А.Храпоничева. - Орёл: ГОУ ВПО «Орловский государственный университет» ,2010. - 30 с.
Эрик А. Мейер CSS Каскадные таблицы стилей:книга / А. Эрик . - Спб.: Символ-Плюс, 2009. - 41с.

ПРИЛОЖЕНИЕ А

<!DOCTYPE html>

<head>

<title>Азитромицин - показания к применению</title>

</head>

<body>

<h1>Азитромицин (Azithromycin) - показания к применению</h1>

<small>Структурная формула антибиотика, C

<sub>38</sub>H

<sub>72</sub>N

<sub>2</sub>O

</small>

</figcaption>

</figure>

</header>

<h2>Основные показания (по МКБ-10)</h2>

<ul>

<li>H66 Гнойный и неуточненный средний отит</li>

<li>J01 Острый синусит</li>

<li>J02.0 Стрептококковый фарингит</li>

<li>J03.0 Стрептококковый тонзиллит</li>

<li>J04.0 Острый ларингит</li>

<li>J18 Пневмония без уточнения возбудителя</li>

<li>J20 Острый бронхит</li>

<li>

<s>J32 Хронический синусит</s>(с 2012 года не рекомендуется)

</li>

<li>K25 Язва желудка</li>

<li>K26 Язва двенадцатиперстной кишки</li>

</ul>

</section>

<h2>Фармакология</h2>

<i>

<u>Фармакологическое действие</u> - антибактериальное широкого спектра.

</i>

<p>Связывается с 50S субъединицей рибосом, угнетает пептидтранслоказу на стадии трансляции и подавляет биосинтез белка,замедляя рост и размножение бактерий, при высоких концентрациях возможен бактерицидный эффект.</p>

</section>

<h2>Применение вещества Азитромицин</h2>

<u>

<b>Для приема внутрь:</b>

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

<i>Helicobacter pylori</i>.

<p>

<u>

<b>Для инфузий:</b>

</u> тяжелые инфекции, вызванные чувствительными штаммами микроорганизмов: внебольничная пневмония, инфекционно-воспалительные заболевания органов малого таза.

</p>

</section>

</article>

</body>

</html>

ПРИЛОЖЕНИЕ B

<!DOCTYPE html>

<head>

<title>Таблицы и табличная вёрстка</title>

</head>

<body>

<h2>Статистика компании за неделю</h2>

<tr>

<th colspan="2">Доход</th>

<th colspan="2">Расход</th>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<th>Итого:</th>

</tr>

</table>

</body>

</html>