Файл: «Основы программирования HTML».pdf

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

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

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

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

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

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

World Wide Web

Концепция WWW

Для начала давайте разберём что такое World Wide Web или сокращённо WWW. Официальное определение World Wide Web звучит как мировая виртуальная файловая система - "широкомасштабная гипермедиа-среда, ориентированная на предоставление универсального доступа к документам"

Информационный WWW сервер использует гипертекстовую технологию. Для записи документов в гипертексте используется специальный, но очень простой язык HTML (Hypertext Markup Language), который позволяет управлять шрифтами, отступами, вставлять цветные иллюстрации, поддерживает вывод звука и анимации. В стандарт языка также входит поддержка математических формул.

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

Веб – страница может содержать как стандартный так и форматированный текст, картинки и гиперссылки со всеми ресурсами интернет.

Итак, Web-страница может содержать стилизованный и форматований текст, графику и гиперсвязи с разными ресурсами Internet. Для реализации всех этих возможностей был создан язык HyperText Markup Language «HTML» если перевести то это будет звучать так- Язык Разметки Гипертекста.

HTML сам из себя представляет обычный текстовый документ написанный в стандартном блокноте нашей ОС или офисной программе Word, и не чем не будет отличаться если мы будем использовать специальное ПО для программирования. В этом текстовом документе используются так называемые «Теги», благодаря которым при открытие документа в браузере набор текста превращается в таблицы, списки, столбцы и т.д.

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

Создание Web-страницы с помощью языка HTML

Язык HTML

За стандарт формата веб – страниц принято использовать Hyper Text Markup Language(.HTML). Этот язык разметки гипертекста, предназначен для создания форматированного текста, наполненного изображениями, анимацией, звуком, видеороликами и гипертекстовыми ссылками на другие ресурсы, размещённые как по всему глобальному интернету, так и находящиеся на этом же сервере или являющиеся составной частью этого же Веб-ресурса.

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

За время существования и развития языка HTML сменилось около 7 его версий, но больших отличий между ними нет.

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

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

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

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

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

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

Кратко функции тегов можно описать так: открывающий тег включает форматирование, а закрывающий — выключает его.

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

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

В стандартном HTML-документе должны присутствовать три главных части:

A) Объявление HTML;
B) Заголовачная часть;
C) Тело документа.

A) Объявление HTML

Главным структурным тегом страницы является тег <HTML>, все содержимое страницы записывается внутри его контейнера. Все, что находится за пределами тегов <HTML> и </HTML>, не воспринимается браузером как код HTML и никак им не обрабатывается.

Тег <HTML> должен использоваться с закрывающим тегом, который указывает на окончание документа.

B) Заголовочная часть.

<HEAD> и </HEAD>. Между этими тегами располагается информация о документе (название, ключевые слова для поиска, описание и т.д.). Однако наиболее важным является название документа, которое мы видим в верхней строке окна браузера и в списках "Избранное (BookMark)". Специальные программы-спайдеры поисковых систем используют название документа для построения своих баз данных. Для того чтобы дать название своему HTML-документу текст помещается между тегами <TITLE> и </TITLE>.

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

<HTML>
<HEAD>
<TITLE>Моя первая страница</TITLE>
</HEAD>
</HTML>

C) Тело документа.

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

Атрибуты тега <BODY> применяются для того, чтобы установить общие для всего документа свойства, и в этом отношении возможности данного тега достаточно велики: можно задать цвет ссылок, параметры фона и т. д.

Теперь между тегами <BODY> мы можем написать код нашей страницы:

<HTML>
<HEAD>
<TITLE>Пример Страницы</TITLE>
</HEAD>

<BODY>
Тут требуется разместить код нашей страницы!!!
</BODY>

</HTML>

Форматирование текста

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

Существует множество тегов для форматирования текста. Их можно разделить на две группы: логические и физические. Отличие этих групп друг от друга принципиальное.

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

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

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

Рассмотрим несколько тегов на примере.

Логические теги

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

Тег <ABBR>

Тег <ABBR> определяет текст как аббревиатуру с помощью атрибута TITLE. Мы можем задать всплывающую подсказку с расшифровкой аббревиатуры. При этом поисковые роботы индексируют именно полный вариант расшифровки, определенный атрибутом TITLE.

Пример:

Тег <CITE>

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

Пример:

<cite>Здесь указывается источник информации </cite>

Тег <CODE>

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

Пример:

Зададим функцию:

<code>

func(int x, char y);

</code>

Тег 

Тег выделяет важные фрагменты текста. Браузер отображает такой текст курсивом.

Пример:

Текст выделен курсовом

Тег <Q>

Тег <Q> обозначает текст как цитату, используется для добавления коротких цитат в текст. Обычно такой текст отображается курсивом, некоторые браузеры заключают его в кавычки.

Пример:

Цитата: <q>Цитаты великих людей </q>

Физические теги

Теги физического форматирования сообщают браузеру, как должен выглядеть текст внутри тега.

Тег 

Тег Делает текст полужирным.

Пример:

Полужирный текст

Тег 

Тег Выделяет текст курсовом.

Пример:

Курсив