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

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

Содержание:

Введение

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

Цель курсовой работы — изучить теоретический материал по языку HTML.

Для достижения поставленной цели были выделены следующие задачи:

Проанализировать литературу по теме курсовой работы
Раскрыть основные сведения о языке HTML
Рассмотреть процесс создания сайта

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

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

1.1 О языке HTML

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<HTML>

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

</HTML>

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

<HTML>

<HEAD>

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

</HEAD>

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

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

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

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

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

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

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

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

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

У тэга есть дополнительные параметры:

, позволяют выравнивать абзац по левому краю, центру и правому краю соответственно.

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

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

Перевод строки
Символы табуляции (сдвиг на 8 символов вправо)
Напропорциональный шрифт, устанавливаемый браузером

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

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

<HTML>

<HEAD>

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

</HEAD>

<BODY>

<H1> Университет </H1>

<H2> Список группы ОБИн-1403БРНиб</H2>

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

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

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

</HTML>

Вот какой результат будет отображаться на экране WEB-браузера:

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

Роман Алексеенко улица Попова, д.95, кв.75

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

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

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

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

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

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

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

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

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

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

http://www.freenom.com/ru/index.html

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Например:

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

Вот как это будет выглядеть в браузере. В адресной строке видно, что был осуществлён переход по анкору к Разделу 1

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

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

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

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

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

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

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

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

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

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

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

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

Цвет задается шестизначным числом в шестнадцатеричном формате по схеме RGB (Red, Green, Blue). Цвет #000000 соответствует черному, а цвет #FFFFFF - белому. Например:

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

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

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

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

Пример основных стилей текста:

При помощи тэга можно менять размер шрифта

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

Например:

и зм ен ен и е

Цвет шрифта изменяется при помощи тэга:

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

Красный Зеленый Синий

Заключение

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

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

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

Список литературы

Баранов, Д.В. Современные информационные технологии. / Д.В. Баранов. – Томск: ИДО (ТУСУР), 2005. – 130 с.
Ваулина , Ч.Ю. Информатика: толковый словарь / Ч.Ю. Ваулина. – М.: Изд-во Эксмо, 2005. – 480 с.
Когаловский , М.Р. Перспективные технологии информационных систем / М.Р. Когаловский. – М.: Компания АйТи, 2003. – 288 с.
Когаловский, М.Р. Энциклопедия технологий баз данных / М.Р. Когаловский. – М.: Финансы и статистика, 2005. – 800 с.
Крис, Д. Креативный Web-дизайн. HTML, XHTML, CSS, JavaScript, PHP, ASP, ActiveX. Текст, графика, звук и анимация. Учебник Пер с англ. / Д. Крис, К. Кинг, Э. Андерсон. – М.: ООО «ДиаСофтЮП», 2005. 672 с.
Мишенин, А.И. Теория экономических информационных систем / А.И. Мишенин. – М.: Финансы и статистика, 2002. – 240 с.
Непейвода, Н.Н. Основания программирования / Н.Н. Непейвода, Скопин И.Н. – Москва-Ижевск: Институт компьютерных исследований, 2003. – 868 с.
Основы Web – технологий : учеб. пособие / П.Б. Храмцов [и др.]. – М. : Изд-во Интуит.ру “Интернет-Университет Информационных Технологий”, 2003. – 512 с.
Пауэл Томас, А. Справочник программиста / Томас А Пауэл, Д. Уитворт. – М.: АСТ, Мн.: Харвест, 2005. – 384 с.
Петров, В.Н. Информационные системы: учеб. пособие / В.Н. Петров. – СПб.: Питер, 2002. – 588 с.
SimpleSolutions – разработка и сопровождение Web-сайтов. PHP и XML. [Электронный ресурс] / Web-студия Ретюхина Александра <http://www.sasha.by/doc2.php?page=html&theme=1> (2000-2006).
SimpleSolutions – разработка и сопровождение Web-сайтов. Основные понятия [Электронный ресурс] / Web-студия Ретюхина Александра <http://www.sasha.by/doc2.php?page=html&theme=1> (2000-2006).