Создание web-контента информационных систем

Основы HTML

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

Интернет – это совокупность мировых компьютерных сетей и сетевых служб. В настоящее время Интернет охватывает десятки миллионов пользователей и несколько десятков сетевых служб, включая электронную почту, WWW (World Wide Web), FTP и др.

World Wide Web (Всемирная паутина) – гипертекстовая среда Интернета, объединяющая мультимедийные документы средствами гипертекста.

Гипертекст – это способ представления документов, позволяющий перемещаться как между разделами одного документа, так и между различными документами. Выглядит гипертекст как обычный текст, возможно, с графикой, звуковым и видео-сопровождением. Внутри гипертекст содержит сведения для программы просмотра (браузера), указывающие, в каком виде представлять собственно информацию для пользователя. Кроме того (и это самое важное), гипертекст содержит неотображаемую в браузере специальную информацию – ссылки (гиперссылки) на другие документы. В качестве ссылок могут использоваться практически любые элементы документа, например, текст или картинки. Переход по ссылке выполняется только тогда, когда пользователь производит некоторое действие, например производит щелчок мыши в соответствующем месте страницы. Идея World Wide Web возникла примерно в 1983 году, а ее реализация началась только в 1992 году. В настоящее время развитием стандартов и технологий Интернета занимается в основном Интернет-консорциум (http://www.w3.org).

Гипертекстовые документы просматриваются пользователем с помощью специальной программы – браузера. Наиболее популярны в настоящее время Internet Explorer компании Microsoft, поставляемый в составе операционной системы MS Windows, а также браузеры Mozilla Firefox и Opera. Документы, содержащие текст, графику, звуковые и видео-файлы, находятся на компьютере-сервере, а просматриваются с помощью компьютера-клиента. Компьютер клиента подключен к Сети посредством различных сетевых технологий и устройств (модем, сетевая карта, беспроводные сети и т. д). Пользователь Интернета обычно является его клиентом и получает доступ к ресурсам Сети с помощью браузера. Когда клиенту нужна информация, он посылает запрос на сервер. Сервер обрабатывает этот запрос и отправляет клиенту запрошенную информацию.

Совокупность правил приема/передачи сообщений между сервером и клиентом называется протоколом. Интернет работает на основе стека протоколов TCP/IP, состоящего из двух базовых протоколов. Протокол TCP (Transmission Control Protocol) отвечает за надежный и подтверждаемый обмен данными между двумя узлами Сети. TCP разбивает данные на пакеты, снабженные специальным блоком служебной информации, который и позволяет протоколу IP (Internet Protocol) гарантированно доставить их к месту назначения и затем правильно собрать всю переданную информацию.

Для доступа к информации в Интернете используется универсальная система адресации документов URL (Uniform Resource Locator) – стандартная форма представления имен файлов в Интернете. URL содержит тип сетевой службы, абонентское имя компьютера и полное имя файла на нем.

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

Сайт (интернет-ресурс). Сайт – это набор отдельных веб-страниц, которые связаны между собой ссылками и единым оформлением.

HTML (HyperText Markup Language, язык разметки гипертекста). HTML – это система верстки веб-страниц, которая определяет, какие элементы и как должны располагаться в документе. Чтобы показать, что мы имеем дело не с обычным текстовым документом, используется термин HTML-документ. Подобные документы открываются под управлением браузера.

HTML-документ. HTML-документ – это текстовый файл, который может содержать в себе текст, теги и стили. Изображения и другие объекты ( видео, Flash, файлы архивов и т.д.) хранятся отдельно. Содержимое такого файла обычно называется HTML-код.

Браузер. Браузером называется специальная программа для просмотра веб-страниц. Браузер анализирует код HTML, находит специальные символы, называемые тегами, и использует их для отображения изображений, изменения вида текста, создания ссылок на другие веб-страницы и т.д. Наиболее популярны следующие браузеры: MS Internet Explorer (по умолчанию присутствует в операционной системе Microsoft Windows), Mozilla Firefox, Opera. Каждая из программ имеет номер версии. Рекомендуется устанавливать самые последние версии указанных программ. В настоящее время все указанные программы распространяются бесплатно.

Тег. Тег – это специальный символ разметки языка HTML, который применяется для вставки на веб-страницу различных элементов, таких как рисунки, таблицы, ссылки и др. и для изменения их вида. Для обозначения тегов используется символ <тег>. Теги нечувствительны к регистру, поэтому запись <B> и <b> эквивалентна.

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

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

CSS (Cascading Style Sheets, каскадные таблицы стилей). CSS или стили – это набор параметров форматирования, который применяется к элементам документа, чтобы изменить их внешний вид. Возможность работы со стилями включают в развитые издательские системы и текстовые редакторы, тем самым, позволяя одним нажатием кнопки придать тексту заданный, заранее установленный вид. Теперь это доступно и создателям сайта, когда цвет, размеры текста и другие параметры хранятся в определенном месте и легко подключаются к любому тегу.

Редактор веб-страниц. Хотя HTML-документ представляет собой текстовый файл, и его можно править в любом текстовом редакторе, для этой цели лучше использовать специализированные программы, которые называются редакторами веб-страниц. Такие программы по своему подходу делятся на WYSIWYG-редакторы и HTML-редакторы. WYSIWYG (What You See Is What You Get – «Что видишь, то и получишь») – визуальный редактор, в котором элементы отображаются так, как они впоследствии будут показаны в браузере.

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

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

Веб-сервер. Веб-сервером называется компьютер, на котором хранятся документы сайта. Одновременно так же называется программа, которая обеспечивает выдачу документов при их запросе браузером, а также работу с различными сервисами. Наиболее популярными веб-серверами являются Apache и MS Internet Information Server (IIS).

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

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

JavaScript – это язык сценариев самостоятельный язык программирования (теоретически он не связан с разработкой веб-приложений), код которых в виде простого текста может быть внедрен прямо в страницы на языке HTML. Любая страница HTML, запрашиваемая клиентом, может содержать сценарии JavaScript. Все современные браузеры поддерживают JavaScript и не требуют от пользователя установки дополнительных компонентов в систему. Он поддерживается большинством веб-клиентов на любой платформе и обладает объектно-ориентированными возможностями. Язык JavaScript относится к интерпретирующим языкам, и потому не годится для разработки приложений с интенсивными вычислениями или драйверов – устройств. Код JavaScript должен быть целиком доставлен браузеру клиента для последующей интерпретации. Кроме того, могут возникнуть определенные проблемы с безопасностью. Благодаря JavaScript, у разработчиков есть возможность создавать веб-страницы с визуальными эффектами и способностью проверять правильность заполнения форм, избавляя тем самым пользователей от необходимости повторно загружать всю страницу (с потерей всех введенных ранее данных), если они забыли указать какую-либо информацию (например, пароль или номер кредитной карточки) или в случае ошибки.

Среди других клиентских технологий, наделенных функциональными возможностями, можно назвать Java-апплеты и Flash технологию. Java-апплеты пишутся на весьма популярном и мощном языке программирования Java и исполняются виртуальной Java-машиной (Virtual Java Machine – JVM), которую необходимо отдельно устанавливать в систему. Без сомнения, Java-апплеты позволяют создавать более сложные проекты, но применительно к веб-приложениям они уже потеряли свою былую популярность, поскольку потребляют значительное количество системных ресурсов. Технология Flash обладает весьма широкими возможностями по созданию графических и анимационных эффектов и фактически стала стандартом для разработки подобных веб-приложений. Flash требует установки дополнительных компонентов браузера – Flash проигрывателя.

AJAX – это акроним (Asynchronous JavaScript and XML), означающий асинхронный JavaScript и XML. Оно появилось в 2005 году в статье Джесси Джеймса Гаррета (Jesse James Garret) из Adaptive Path. По сути, эта технология представляет собой сценарии на языке JavaScript, которые по мере необходимости в фоновом режиме выполняют запросы к серверу и получают дополнительные данные, обновляя отдельные части страницы, и тем самым исключается необходимость ее повторной загрузки целиком. Технология AJAX базируется на следующих компонентах:

– JavaScript – основной компонент AJAX, позволяющий реализовать функциональность на стороне клиента. Для манипулирования отдельными частями страницы HTML используется объектная модель документа (Document Object Model – DOM). Объект XMLHttpRequest позволяет из JavaScript организовать асинхронный доступ к серверу, благодаря чему пользователь имеет возможность продолжать работу со страницей, в то время как она выполняет некоторые действия. Под доступом подразумеваются запросы на получение файлов или сценариев, размещенных на сервере.

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

Сценарий на стороне клиента, обладающий доступом к серверу ( посредством объекта XMLHttpRequest (XMLHTTP (XMLHttpRequest, XHR) – API, предоставляемый веб-клиентом, для обмена информацией между клиентом и сервером посредством протоколов HTTP и HTTPS.)), может передавать серверу пары имя-значение с помощью методов GET или POST. Эти данные могут быть прочитаны с помощью любого сценария на стороне сервера.

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

Во-первых, он получил широкое распространение;

Во-вторых, существует большое количество библиотек, облегчающих работу с XML документами.

Однако, при желании можно выбрать любой другой формат (данные могут передаваться даже в виде простого текста).

Структура HTML-документа (HTML действующей версии 4.01):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta content="text/html; charset=Windows-1251" http-equiv="content-type">

<title></title>

</head>

<body>

</body>

</html>

Согласно спецификациям HTML и XHTML тег DOCTYPE ("объявление типа документа") сообщает валидатору, какую именно версию (X)HTML вы используете в своей странице. Этот тег должен всегда находиться в первой строке каждой страницы. Тег DOCTYPE – ключевой компонент web-страниц, претендующих на соответствие стандартам.

XHTML ( Extensible Hypertext Markup Language – расширяемый язык разметки гипертекста) – семейство языков разметки веб-страниц на основе XML, повторяющих и расширяющих возможности HTML 4.01. Спецификации XHTML 1.0 и XHTML 1.1 являются рекомендациями организации w3.org.

Поскольку XHTML-документы являются XML-приложениями, на их синтаксис накладывается ряд дополнительных ограничений, которые выражаются в том, что XHTML-документы должны быть правильно оформлены в понимании стандарта XML:

– каждый элемент должен иметь конечный тег, даже если стандарт HTML говорит, что он не обязателен. Если элемент не имеет конечного тега и содержимого, то его начальный тег должен оканчиваться на />, например <br />, <hr />, <img src="picture.jpg" alt="рисунок" />. Пробел перед дробной чертой не обязателен, но рекомендуется для совместимости с сегодняшними браузерами;

– элементы должны либо следовать друг за другом, либо быть вложены один в другой;

– названия элементов и атрибутов HTML должны писаться строчными буквами, т. к. язык XML различает регистры, и в нем <body> и <BODY> – это различные теги;

– значения атрибутов всегда должны заключаться в кавычки. Значения атрибутов нормализуются согласно стандарту XML. Это означает, что из них удаляются начальные и конечные пробелы, а каждая последовательность пробелов внутри значения атрибутов (включая разрывы строк) заменяется на один символ пробела.

Исходный код web-документа

Исходный код разрабатываемого документа:

<STRONG>Водяная система охлаждения</STRONG> (СВО) - система охлаждения&nbsp; компьютера, которая охлаждает компоненты (элементы) компьютера с помощью воды.<BR>Данная система охлаждения является одной из самых сложных систем охлаждения и занимает третье место по своей сложности реализации и опасности в списке систем охлаждения, после таких экстремальных система охлаждения, как система охлаждения азотом (первое место) и система охлаждения фреоном (второе место соответственно).<BR>Это связано с тем, что в основе данной системы охлаждения используется дистиллированная вода (теплоноситель), которая подается из резервуара с помощью&nbsp;помпы по трубкам на водоблок(и) (ватерблок(и)) поставленный(ые) на особо нагревающиеся компонент(ы) компьютера (например на центральный процессор или видеокарту(ы) (точнее видеопроцессор и видеопамять)) после чего поступает на теплообменник (радиатор), где происходит процесс ее охлаждения, после чего она заново поступает в резервуар и тем самым обеспечивается надежное охлаждения компонентов(ы) компьютера.<BR>Так как вода является одним из самых лучших теплопроводящих жидкостей, отвод тепла практически не занимает много времени, что позволяет качественно охладить любые элементы компьютера.<BR>Данная система хоть более проста в своем создании и обращении по сравнении с другими системами охлаждения, такими как система охлаждения азотом и система охлаждения фреоном. <BR>Данную систему нельзя назвать достаточно простой. Дистиллированная вода не проводит электрический ток, но обладает способностью окислять медь, которая ионизируются. При любой утечке жидкости существует вероятность короткого замыкания. Поэтому, все с истемы водяного охлаждения, произведенные в заводских условиях хромируют, чтобы не было ионизации и коррозии. <BR>Системы водяного охлаждения занимают второе место по надежности и простоте использования после систем воздушного охлаждения, но требуют большой осторожности при монтаже и эксплуатации.

<P></P>

<P><STRONG>Плюсы использование систем водяного охлаждения:<BR></STRONG>- Быстрый отвод тепла от элементов компьютера;<BR>- Более высокая эффективность охлаждения по сравнению с воздушными системами охлаждения;<BR>- Бесшумность по сравнению с воздушными системами охлаждения. </P>

<P>Многие производители систем охлаждения в списке продуктов имеют несколько систем водяного охлаждения. К сожалению, многие эти системы рассчитаны на охлаждение только одного центрального процессора, а такая политика является не самой правильной.<BR>Современные скорости и частоты внутри персональных компьютеров дошли до пределов, которые нагревают все элементы конструкции&nbsp; компьютера. Это ставит задачи разработки систем охлаждения не только одного элемента компьютера, а всей системы в целом. Например, вентилятор, который стоит на радиаторе процесса охлаждает не только сам этот радиатор, но также радиаторы, которые установлены на системе управления электропитанием (мосфет) и чипсета (северный и южный мост). <BR>Тем самым, если убрать с процессора стандартную систему воздушного охлаждения и заменить ее на водяную систему охлаждения, то данные компоненты остаются без охлаждения, что потребует от пользователя детальной проработки системы охлаждения этих компонентов.<BR>Иными словами система водяного охлаждения - это система по охлаждению компьютера в целом, а не только его отдельных компонентов.</P>

<P><STRONG>Сфера применения водяной системой охлаждения:<BR></STRONG>- Компьютеры для профессиональных музыкальных студий;<BR>- В домашних компьютерах у людей, которые испытывают дискомфорт от шума обычного компьютера;<BR>- В игровых компьютерах;<BR>- В компьютерах пользователей, занимающихся оверклокингом.</P>

<P><STRONG>Элементы системы водяного охлаждения:<BR></STRONG>1. Водоблок(и)&nbsp; - приспособление передающее тепло от нагретого элемента компьютера к теплоносителю. <BR>2. Теплоноситель - жидкость, забирающая выделяющееся тепло от "горячих" элементов компьютера. <BR>3. Помпа(ы) - устройство, обеспечивающее непрерывную циркуляцию теплоносителя в системе. <BR>4. Резервуар - приспособление для теплоносителя, его наличие в системе позволяет контролировать количество теплоносителя и избежать негативных последствий от воздуха, находящегося в системе (весь воздух скапливается в резервуаре). <BR>5. Теплообменник(и) (в просторечье - радиатор) - устройство с развитой поверхностью теплообмена, позволяющее забирать тепло у нагретого в системе теплоносителя, обеспечивающее эффективность отвода тепла от "горячих" компонентов компьютера.<BR>6. Шланги - обеспечивают соединение всех компонентов системы водяного охлаждения в единую систему.<BR>7. Фитинги (штуцера) - приспособления обеспечивающие возможность подключения шлангов к водоблокам и другим компонентам системы водяного охлаждения.<BR>8. Вентиляторы (малошумные и тихоходные) - для отвода тепла от теплообменника.</P>

<OBJECT width=425 height=344><PARAM NAME="movie" VALUE="http://www.youtube.com/v/O2EfhtQChsM?hl=ru&amp;fs=1"><PARAM NAME="allowFullScreen" VALUE="true"><PARAM NAME="allowscriptaccess" VALUE="always">

<embed src="http://www.youtube.com/v/O2EfhtQChsM?hl=ru&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="453"></embed></OBJECT>

<P><STRONG>Используемые источники:<BR></STRONG>1. meijin.ru. Инструкция по сборке компьютера<BR>2. overclockers.ru. Создание самодельной СВО<BR>3. overclockers.ru. Водяное охлаждение - немного теории<BR>4. hwp.ru. Компактный корпус с водяным охлаждением своими руками.</P>

Внешний вид страницы

	На рис. 1 представлен внешний вид страницы в режиме просмотра через вэб браузер Internet Explorer (IE). Для реализации просмотра увеличенной копии иллюстрации без перехода на новую страницу и без перезагрузки текущей были использованы свойства DHTML, а именно JavaScript, CSS и DOM. На рис. 2 можно просмотреть эту реализацию.
Рис. 2
Рис. 1