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

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

Основной задачей данной курсовой работы являет

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

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

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

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

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

1.1 О языке html

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

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

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

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

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

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

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

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

Все тэги HTML начинаются с символа "<" и заканчиваются символом ">". Существует стартовый тэг и завершающий тэг. Например: <TITLE>Заголовок</TITLE> или <title>Заголовок</title>.

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

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

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

1.4 Структура веб-страницы

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

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

<HTML>

<HEAD>

<TITLE>Заголовок</TITLE>

</HEAD>

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

1.5 Тэги тела веб-страницы

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

Уровни заголовков <H1>...<H6>. Текст структурно делится на просто текст, заголовки различных уровней. Первый уровень заголовков самый большой, обозначается цифрой 1, а следующий - 2, и т.д. Синтаксис заголовка уровня 1 следующий:

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

Тэг абзаца <P> может находиться в любом месте исходного текста документа. Если не разделить абзацы тэгом <P>, содержимое будет выглядеть как один большой абзац.

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

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

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

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

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

Разрыв строки <BR> указывает браузеру о разрыве строки. <BR CLEAR=left|right|all>

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

Тэг неразрывная строка <NOBR>..</NOBR> нужен для того, чтобы браузер не переносил автоматически строку, даже если она выходит за границы экрана. Браузер позволит горизонтально прокручивать окно, однако тэг <WBR> позволит разбить строку на две, но в строго запланированном месте

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

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

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

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

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

mailto: активизирует почтовую сессию;

telnet: обращение к службе telnet;

news: вызов службы новостей.

#ANCHOR ссылка на точку внутри HTML-документа. Точка, на которые ссылается #anchor, указываются с помощи тэга NAME. Ссылки на точки внутри документа можно создать на различных участках. Они позволяют быстро переходить от раздела к разделу внутри документа, не используя прокрутку экрана. Тэг <A HREF="URL">открывает описание ссылки, а тэг </A> - закрывает его.

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

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

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

Обязательный параметр URL указывает на расположение рисунка, который должен храниться в графическом формате, поддерживаемом браузером(GIF и JPG)

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

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

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

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

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

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

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

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

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

То же самое, что и 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>, вы можете разделить текст горизонтальной чертой.

Формат тэга:

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

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

Ширина линии в пикселях или процентах от ширины окна броузера.: Расположение на экране (слева | по центру | справа).: По умолчанию линия представлена в 3D виде с тенью. NOSHADE позволяет представить линию просто однотонной темной полоской.