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

Введение

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

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

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

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

Задачи:

• Раскрыть основные сведения о языке;
• Рассмотреть процесс создания сайта;
• Создать веб-сайт на основе разработанного алгоритма.

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

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

1.1 О языке html

HTML был изобретён Тимом Бернерсом-Ли, физиком из исследовательского института ЦЕРН в Швейцарии. Он придумал идею интернет-гипертекстовой системы.

Hypertext означает текст, содержащий ссылки на другие тексты, которые зрители могут получить немедленно. Он опубликовал первую версию HTML в 1991 году, состоящую из 18 тегов HTML. С тех пор каждая новая версия языка HTML появилась с разметкой новых тегов и атрибутов (модификаторов тегов).

Согласно Справочнику HTML Element Reference от Mozilla Developer Network, в настоящее время существует 140 тегов HTML, хотя некоторые из них уже устарели (не поддерживаются современными браузерами).

Из-за быстрого роста популярности HTML теперь считается официальным веб-стандартом. Спецификации HTML поддерживаются и разрабатываются консорциумом World Wide Web (W3C). Вы можете проверить последнее состояние языка в любое время на веб-сайте W3C (англ).

Самым большим обновлением языка стало внедрение HTML5 в 2014 году. Было добавлено несколько новых семантических тегов к разметке, которые показывают смысл их собственного контента, например <article>, <header> и <footer>.

Для освоения HTML Вам понадобятся две вещи:

• Любой браузер, т.е., программа, пригодная для просмотра HTML-файлов.
• Любой редактор текстовых файлов, поддерживающий русский язык в выбранной Вами кодировке. Если на Вашем компьютере установлен Windows, вполне подойдет Notepad.

В настоящее время широко используются два типа редакторов HTML:

Редакторы типа «что видишь, то и получишь» (Netscape Navigator Gold, Microsoft Front Page). Пользователь не видит «внутренностей» документа, с которым он работает, точно так же, как при работе с текстовым процессором типа Microsoft Word или Word Perfect. Кстати говоря, существует довольно много конвертеров, способных преобразовывать документы, созданные в Microsoft Word или Word Perfect, в HTML-документы.

Редакторы собственно HTML-текстов (HotDog, Ken Nesbitt Web Editor и многие другие). В процессе работы пользователь видит внутреннее содержание HTML-файла и может изменять его либо вручную, либо вызывая команды меню для вставки определенных элементов HTML. Работа с таким редактором очень похожа на работу с интерактивной средой программирования типа Microsoft Visual Basic или Borland Delphi.

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

Для обозначения различных элементов в HTML служат тэги (tag). Тэг HTML состоит из:

• левой открывающей скобки <,
• имени тэга с параметрами или без них
• правой закрывающей скобки >.

Тэги часто используются парами (например, <H2> и </H2>), в которых первый тэг задает начало элемента, второй — его окончание. Завершающий тэг имеет то же имя, что и стартовый, но перед именем ставится косая черта /. Завершающие тэги не имеют параметров. Некоторые элементы могут включать атрибуты, включаемые в качестве параметров в стартовые тэги.

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

Элементы HTML можно классифицировать на три основные категории:

• заголовочные элементы, т.е. элементы, используемые в элементе HEAD («шапка», заголовок) и содержащие информацию о документе в целом: TITLE, ISINDEX, BASE, META, LINK, SCRIPT, STYLE
• блоковые элементы, включающие элементы, которые специфицируют структуру документа, например, разделение на части и параграфы (абзацы): H2, H3, H4, H5, H6, H6, ADDRESS, и элементы P, UL, OL, DL, PRE, DIV, CENTER, BLOCKQUOTE, FORM, ISINDEX, HR, TABLE
• текстовые элементы. Текстовыми элементами могут быть:
  • простой текст, возможно содержащий escape последовательности (например, &amp;)
  • выражения разметки: EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE
  • разметка шрифта: TT, I, B, U, STRIKE, BIG, SMALL, SUB, SUP
  • специальные элементы: A, IMG, APPLET, FONT, BASEFONT, BR, SCRIPT, MAP
  • элементы формы: INPUT, SELECT, TEXTAREA

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

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

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

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

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

Достойный уважения Web-дизайн включает разработку страниц, доступных для пользователей с ограниченными возможностями, в частности по зрению и слуху. Консорциум World Wide Web объявил об инициативе Web Accessibility Initiative (WAI), которая ставит целью сделать Web более доступным для всех пользователей. Однако успех данной инициативы зависит от участия в ней рядовых разработчиков, которые могут (или не могут) создать Web-сайты в соответствии с поставленными задачами.

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

Многие люди с проблемами зрения используют текстовые браузеры (такие как Lynx) вместе с программным обеспечением, которое громко читает содержимое страницы. В любом случае основное внимание уделяется структуре документа и его тексту. Графическое содержимое может быть просто утеряно.

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

На первом этапе проектирования web-сайта необходимо выполнить анализ предметной области, т.е. определить объекты предметной области и связи между объектами.

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

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

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

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

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

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

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

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

Информационная структура web-сайта

Как же выглядит информационная иерархия на web-странице? Один из вариантов может быть таким:

· Логотип

· Название сайта

· Слоган

· Название страницы

· Заголовки

· Навигация

· Выделенный текст

· Простой текст

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

Логотип - "опознавательный знак" сайта. В деловом интернете это элемент связи между реальным и виртуальным представлением той или иной организации.

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

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

Название страницы предназначено для определения текущего местоположения посетителя на сайте.

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

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

Выделенный текст предназначен для акцентирования внимания посетителей на нем.

Простой текст служит в качестве носителя информации.

На web-странице может находиться большое количество информационных элементов, поэтому для упрощения восприятия и различимости 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>-тэгов, как показано выше на примере. Заголовок документа не появляется при отображении самого документа в окне.