Веб-программирование. Основы языка WEB программирования HTML

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

Язык веб-программирования – это совокупность операторов, с помощью которых создаются коды веб-программ, или их еще называют скриптами, сценариями . Язык программирования передает понятные компьютеру инструкции для выполнения определенных операций. Так, с помощью языков программирования человек «разговаривает» с машиной. Обычно коды, написанные на веб-языках, читаются браузерами. Среди самых распространенных языков веб-программирования можно отметить: HTML, CSS, PHP, JavaScript, Perl, jQuery:

• Язык разметки HTML

  HTML (HyperText Markup Language — “язык разметки гипертекста”) – самый известный для веб-разработчиков язык программирования, хотя по своей функциональности он скорее всего относится к языкам разметки. HTML был создан в 1991-1992 изобретателем Тимом Бернерсом-Ли, британцем по происхождению. Язык применяется для распределения объектов и текста на веб-страницах. Для лучшего понимания сущности языка HTML можно косвенно сравнить с программой Office Word. Язык оснащен тегами, которые и являются, по сути, инструкциями компьютеру.

• Язык программирования PHP.

  PHP (Hypertext Preprocessor – “ процессор гипертекста” ) – является СИ-подобным скриптовым языком. Самая первая версия PHP была разработана еще в 1994, но к 1998 году появилась основная версия PHP – 5.4. Язык PHP широко используется программистами для написания сценариев, которые выполняются на серверах при каждом обновлении страницы сайта. PHP действительно похож на язык СИ, и многое он позаимствовал из языка JAVA и технологии JSP. Сегодня PHP используется многими программистами, потому ядром огромного количества сайтов является php-код.

• Ориентированный язык программирования JavaScript

  JavaScript – язык программирования, созданный для «оживления и придания динамичности» веб-сайтам. Развитие языка началось с 1996 года. Программы, написанные на языке JavaScript,называются скриптами, которые выполняются совместно с HTML-документами. С помощью JavaScript программисты создают некоторые функции, как например открытие нового окошка с выводом в нем сообщения об ошибке после некоторого действия пользователя. Язык JavaScript способен выполнять свои скрипты спустя заданные интервалы времени. В общем, JavaScript это и самостоятельный язык, но также его можно назвать вспомогательным для остальных, так как с помощью него легко сделать сайт более функциональным и интересным для пользователя.

• jQuery

  jQuery – это библиотека многократно используемых объектов и функции JavaScript, созданная Джоном Резигом и представленная в 2006 году. Обычно jQuery является отдельным JavaScript-файлом. jQuery можно назвать фреймворком (framework), т.е. набором операции и инструкции для решения однотипных задач. Библиотека позволяет вам работать и управлять различными объектами на веб-страницах.

• Динамический язык программирования Perl

  Perl (Practical Extraction and Report Language – “практический язык извлечений и отчетов”) – язык программирования, чьим самым важным преимуществом является расширенные возможности работы с текстом. Был создан лингвистом Ларри Уоллом в 1989 году. К функциям Perl также относятся веб-разработка, системное администрирование, разработка графического интерфейса, игр.Perl известен также своим огромным набором модулей . Обычно программисты обращаются к языку Perl тогда, когда сценарий слишком сложен для написания на остальных языках веб-программирования.

• Cascading Style Sheets

  CSS (Cascading Style Sheets- “ каскадные таблицы стилей” ) – язык программирования, который скорее также относится к языкам разметки и форматирования. CSS стал разрабатываться в 1994 году Хокон Виум Ли и Бертом Босом. Основной задачей было создания языка, который бы форматировал HTML-объекты и текст: работал с шрифтами, цветами, стилями. В общих чертах, CSS работает с внешним видом сайтов. Язык CSS используется с целью «украсить» веб-страницы.

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

Что такое веб-программирование

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

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

Клиент заказывает, сервер выполняет - все просто, но зачем это нужно, если любые вычисления можно организовать в рамках одного приложения и на одном компьютере? Дело в том, что запрашиваемые вычисления могут требовать серьезных аппаратных ресурсов (мощность процессора, объем памяти и т.д.), а предоставлять такие ресурсы каждому клиенту весьма и весьма дорого. Часто вычисления связаны с анализом информации в базе данных, размеры которой могут превосходить все разумные пределы объемов информационных носителей, устанавливаемых на обычных персональных компьютерах – пользовательских (клиентских) рабочих станциях. Более того, данные должны быть едиными для всех пользователей, поэтому они просто обязаны находиться на общем для всех сервере, иначе о совместном ведении этих данных не может быть и речи. Самыми известными клиент-серверными информационными системами как раз и являются , такие как Oracle и Microsoft SQL Server. Серверная их часть обслуживает файлы самой базы данных и обрабатывает от десятков, сотен а то и тысяч клиентов. Клиентская часть СУБД – это в первую очередь провайдер базы данных – программный компонент, который позволяет открыть удаленное соединение с базой данных, принять и передать на сервер запрос, вернуть результат запроса назад клиенту и закрыть соединение. Все это выполняется по сетевому протоколу, такому как TCP/IP.

Теперь вернемся к веб-программированию. В данном случае мы также имеем дело с сервером, клиентом и сетевым протоколом, по которому сервер и клиент общаются. В случае с веб-программированием сетевой протокол – это , веб-клиент – это чаще всего интернет браузер, а веб-сервер – приложение, которое умеет . Наиболее популярными веб-серверами являются сервер Apache, который работает под управлением серверной операционной системы UNIX и Internet Information Server (IIS), функционирующий под управлением серверной версии Microsoft Windows. Ну а HTTP (HyperText Transfer Prоtocоl) – это прикладной сетевой протокол на базе TCP/IP, который и предназначен для передачи гипертекста. Итак, с тем, что такое веб-программирование, думаю теперь более или менее понятно.

Чем веб-программирование отличается от обычного программирования

Контекст исполнения. Если в случае с обычным “настольным” приложением контекст его исполнения представлен структурами данных, размещенными в оперативной памяти в рамках одного на клиентской машине, то в случае веб-программирования все несколько сложнее. Попытаюсь сформулировать, чем отличается веб-программирование от обычного приложения в плане организации контекста его исполнения. Во-первых, контекст исполнения поделен на всех участников распределенной системы, и они обязаны его как-то делить и синхронизировать между собой. Во-вторых, в случае с веб-программированием контекст исполнения теоретически существует только в ходе формирования и обработки одного клиент-серверного запроса. Имеется в виду, что жизненный цикл всех структур данных в оперативной памяти ограничен не всем периодом работы клиента с веб-приложением, а временем подготовки, отправки и обработки одного HTTP запроса. После перезагрузки интернет страницы все структуры контекста необходимо восстанавливать. Безусловно, существуют различные способы сохранять состояние сеанса между запросами, но эти способы не вписываются в канву программирования по принципу “запрос-ответ” и являются искусственными надстройками над инфраструктурой веб-программирования. Ведь так называемая stateless (без состояния) модель использования сервера, когда система не хранит своего состояния между запросами, а “просыпается” только тогда, когда запрос необходимо обработать, является более надежной в сравнении со stateful (с поддержкой состояния) моделью. Это так, поскольку выход из строя аппаратной или системной программной части сервера может привести к непредсказуемому поведению веб-приложения только в том случае, если этот сбой произойдет в момент обработки запроса. Также, элементарно может не хватить оперативной памяти для обслуживания большого количества клиентских запросов, при условии, что каждому сеансу необходимо обеспечить возможность сохранять и восстанавливать свое состояние. Тем не менее, совсем без контекста исполнения, разделяемого между запросами в некоторых задачах обойтись довольно сложно, поскольку в ходе вычислений часто приходится работать к ресурсам, обращение к которым может занимать много времени. Для того чтобы минимизировать подобные издержки наиболее критичные ресурсы разработчики предпочитают хранить “под рукой” - в оперативной памяти веб-сервера. Рассмотрим, какие существуют способы управлять состоянием веб-приложения. Поскольку мы имеем дело с общением клиента и сервера, то и контекст делится на клиентский и серверный. Далее перечислены способы сохранения и восстановления контекста исполнения или по-другому состояния сеанса работы веб-приложения на стороне клиента и на стороне сервера.

Контекст исполнения на стороне клиента можно сохранять:

В оперативной памяти приложения клиента (интернет браузера). С выходом HTML5 для этих целей в браузерах должна появиться . Это весьма разумно, поскольку используется оперативная память клиента, а не сервера, который “один на всех”. С другой стороны, не все данные есть возможность хранить на стороне клиента, поскольку не все данные можно преобразовать в текстовый формат и передать на сервер.

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

Контекст исполнения на стороне сервера можно сохранять:

В области оперативной памяти, выделяемой веб-сервером (Apache, IIS) и называемой состояние приложения . Эти данные доступны со всех страниц веб-приложения всем его пользователям.

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

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

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

Взаимодействие различных компонентов. Проблема стандартизации и унификации взаимодействия различных программных компонентов сложных программных продуктов свойственна не только веб-приложениям. Современные настольные приложения также состоят из различных библиотек, которые могут быть написаны различными разработчиками и с использованием различных программных платформ и . Для универсального способа общения таких компонентов между собой ведущими компаниями-разработчиками создаются соответствующие стандарты и технологии, например Component Object Model (COM) и от компании Microsoft или архитектура Common Object Request Broker Architecture (CORBA), продвигаемая консорциумом OMG.

Элементам веб-приложения также приходится общаться между собой, просто в их случае проблема стоит не так остро, поскольку их общение происходит на расстоянии (не в рамках одного процесса). С целью организации обмена информацией между клиентом и сервером довольно часто используют XML, который великолепно подходит для описания чего угодно, если это “что угодно” имеет ярко выраженную структуру. XML помещают в тело HTTP запроса и отправляют на сервер. Язык XML – это универсальный строительный материал, пригодный для решения абсолютно разных задач, поэтому на его базе создаются специализированные языки – протоколы сетевого взаимодействия, которые в последствии становятся общепринятыми стандартами. К таким протоколам следует отнести Web Services Description Language (WSDL) – язык описания интерфейсов веб-сервисов и Simple Object Access Protocol (SOAP) – протокол обмена структурированными сообщениями между компонентами распределенной информационной системы. Чаще всего сообщения SOAP представляют собой сигнатуру удаленных вызовов процедур и функций (методов) веб-сервиса с параметрами и без. Безусловно, для написания простейших веб-приложений, построением клиента и сервера которых занимается один программист или одна группа программистов необязательно использовать все эти надстройки, но если вы создаете интернет ресурс, клиентами которого должны стать не только рядовые пользователи, но и веб-приложения, создаваемые другими компаниями, то в процессе его разработки лучше придерживаться общепринятых стандартов.

Составляющие веб-программирования Веб-дизайн

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

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

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

Программирование на стороне клиента

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

Самый популярный и поддерживаемый всеми современными интернет браузерами язык программирования. Здесь вы найдете описание того, как на HTML страницу добавить JavaScript код и как использовать объектно-ориентированных подход при написании на нем пользовательских сценариев. Здесь есть и примеры JavaScript приложений.

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

Технология создания динамических интернет страниц на основе асинхронной загрузки гипертекста (результат асинхронного выполнения HTTP запросов) в отдельные области текущей страницы. Приведено описание того, как использовать технологии AJAX с примерами на JavaScript, в том числе с использованием библиотеки jQuery.

Программирование на стороне сервера

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

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

Очень крутая технология веб-программирования от компании Microsoft. К сожалению, пока я не могу размещать здесь примеры веб-приложений, создаваемых с помощью ASP.NET, поскольку мой хостинг-провайдер не поддерживает эту технологию. Хочу сказать, что окружение ASP.NET позволяет создавать веб-приложения так же легко, как и обычные приложения. Вы имеете дело с привычными пользовательскими элементами управления, которые размещаете на странице с помощью привычных мастеров интегрированной среды разработки . Также, привычным образом вы добавляете к ним обработчики событий. Преобразование элементов управления в код HTML и JavaScript, генерацию proxy-классов по описанию WSDL, установку соединения и упаковку удаленных вызовов к другим веб-сервисам в сообщения SOAP берет на себя инфраструктура ASP.NET. Доступ к сервисам сохранения и восстановления контекста исполнения приложения, асинхронное обновление страницы средствами AJAX и многое другое также находится в зоне ее ответственности.

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

264

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

Ниже представлены разделы, которые входят в данную тему:

HTML5

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

CSS3

Почти бессмысленно пытаться создать современный веб-сайт, не используя возможностей CSS (Cascading Style Sheet). Этот стандарт воткан в ткань Всемирной сети почти так же плотно, как и HTML. Каскадные таблицы стилей являются основным средством для любого типа деятельности в области веб-дизайна, будь то компоновка страниц, создание интерактивных кнопок и меню или простое декорирование. По сути, в то время как фокус HTML все больше смещается на содержимое и семантику, спецификация CSS стала центральной технологией веб-дизайна.

JavaScript , jQuery

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

ASP.NET

ASP.NET является основной технологией для построения серверных элементов веб-приложений от Microsoft. Заинтересовать разработчиков в ASP.NET совсем нетрудно. Без преувеличения, ASP.NET является наиболее полной платформой для веб-разработки из всех, которые когда-либо создавались.

PHP и MySQL

Сочетание PHP и MySQL является одним из самых удобных подходов к динамическому веб-конструированию, основанному на использовании базы данных. Благодаря открытости исходных кодов (в отличие от конкурирующей технологии ASP.NET) это технологическое сочетание можно использовать совершенно бесплатно, и поэтому оно приобрело очень большую популярность у веб-разработчиков. Любой претендующий на результативность разработчик, использующий платформу Unix/Linux или даже Windows/Apache, нуждается в серьезном освоении этих технологий.

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

Hyper Text Markup Language - «HTML» (язык разметки гипертекста ) многие уже давно перестали его считать просто языком программирования. Так как само понятие HTML включает в себя различные методы оформления гипертекстовых документов, дизайн, гипертекстовые редакторы, браузеры и много всего другого. Пользователь, освоивший этот язык, приобретает возможность делать серьезные вещи простыми методами и, главное, быстро, что в современном мире считается очень хорошо!

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

• Элемент (element ) - конструкция языка HTML. Это объект, содержащий данные и позволяющий отформатировать их определенным образом. Любая Web-страница представляет собой набор элементов. Одна из основных идей гипертекста - возможность вложения элементов.
• Тег (tag ) - начальный или конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-страницы теги заключаются в угловые скобки, а конечный тег всегда снабжается косой чертой.
• Атрибут (attribute) - параметр или свойство элемента. Другими словами это переменная, которая имеет стандартное имя и которой может присваиваться определенный набор значений: стандартных или произвольных. Предполагается, что символьные значения атрибутов заключаются в прямые кавычки, но некоторые браузеры позволяют не использовать кавычки. Это объясняется тем, что тип атрибута всегда известен заранее. Атрибуты располагаются внутри начального тега и отделяются друг от друга пробелами.
• Гиперссылка - часть текста, которая является указателем на другой файл или объект. Гиперссылки необходимы для того, чтобы обеспечить возможность перехода от одного документа к другому.
• Фрейм (frame ) - этот термин имеет два значения. Первое - область документа со своими полосами прокрутки. Второе значение - одно изображение в сложном (анимационном ) графическом файле (похожее на кадр из кинофильма). Также возможно вместо термина «фрейм» в специальной литературе и локализованных программных продуктах можно встретить термин «кадр» или «рамка».
• HTML-файл или HTML-страница - документ, созданный в виде гипертекста на основе языка HTML. Такие файлы имеют расширения htm или html.
• Апплет (applet ) - программа, передаваемая на компьютер клиента в виде отдельного файла и запускаемая при просмотре Web-страницы.
• Скрипт или сценарий (script ) - программа, включенная в состав Web-страницы для расширения ее возможностей.
• Расширение (extension ) - элемент, не входящий в спецификацию языка, но использующийся, обеспечивая возможность создания нового интересного эффекта форматирования.
• CGI (Common Gateway Interface ) - общее название для программ, которые, работая на сервере, позволяют расширить возможности Web-страниц. Например, без таких программ невозможно создание интерактивных страниц.
• Код HTML - гипертекстовый документ в своем первоначальном виде, когда видны все элементы и атрибуты.
• Web-страница - документ (файл), подготовленный в формате гипертекста и размещенный в World Wide Web.
• Сайт (site ) - набор Web-страниц, расположенных в одном месте и связанных между собой.
• Браузер (browser ) - программа для просмотра Web-страниц.
() - копирование файлов с сервера на компьютер-клиент.
• URL (Uniform Resource Locator ) или универсальный указатель ресурса, адрес некоторого объекта в Интернете, т.е. типичный URL для WWW, имеет вид: http://www.название.домен/имя файла.

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

Несмотря на то, что спецификация HTML является стандартом, этот язык дополняется новыми элементами (расширениями ). Поэтому некоторые Web-страницы удобнее просматривать при помощи определенных браузеров. Расширения создаются только известными фирмами, которые разрабатывают программное обеспечение для WWW, а рядовые пользователи могут совершенствовать свои Web-страницы при помощи программирования. Аплеты позволяют снять ограничения HTML и дают простор фантазии разработчика.

Версии HTML

Первая версия языка HTML была разработана в начале 90-х годов Тимом БенерсЛи для одного из распространенных в прошлом браузера Mosaic. Но тогда ни для браузера, ни для самого HTML еще не нашлось хорошего применения. В 1993 году появился HTML+, и эта версия также осталась практически незамеченной. Но распространение язык HTML получил благодаря версии 2.0, которая появилась в июне 1994 года. И с того момента происходят возрастание популярности WWW по всему миру. Стандарты, включенные в версию 2, настолько прижились что используются и по сей день.

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

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

Официальная спецификация HTML 4 (Dynamic HTML ) разрабатывалась в 1997 год. В это время уже было очевидно, что дальнейшее развитие гипертекста будет осуществляться за счет web-программирования. Это оказалось намного более эффективным, чем вводить в язык все новые элементы.

Структура Web-страницы

Ниже представлен код Web-страницы, который выполнен на языке HTML, и на примере этой страницы мы разберем ее структуру, но для начала скопируйте весь код в обычный текстовый блокнот и нажмите «Сохранить как» и сохраняйте уже файл с расширением html, т.е. после названия напишите.html

Структура web документа Переход в Конец документа Заголовок 1 Заголовок 2 Заголовок 3 Заголовок 4 Заголовок 5 Заголовок 6 Здесь расположена первая ссылка Здесь должен располагаться
основной текст web страницы.
А я, например, вставлю сюда
несколько переносов,
для того чтобы Вы могли
наглядно наблюдать,
как у Вас работает
ссылки внутри документа,
а то если у Вас будет большое разрешение,
Вы просто не заметите переход по ссылкам

Обозначение документа на языке HTML. Одно из принципов языка является многоуровневое вложение элементов. Данный элемент является самым внешним, так как между его начальным и конечным тегам должна находиться вся Web-страница. По идеи, этот элемент можно рассматривать как формальность. Он имеет атрибуты version, lang и dir, которыми в данном случае редко кто пользуется, и допускает вложение элементов HEAD, BODY FRAMESET и других, определяющих общую структуру Web-страницы. Естественно, что конечным тегом заканчиваются все подобные документы.

< head >

Область заголовка Web-страницы. Другими словами, ее первая часть. Так же, как и предыдущий элемент, HEAD служит только для формирования общей структуры документа. Этот элемент может иметь атрибуты lang и dir.

< title >

Элемент для размещения заголовка Web-страницы. Строка текста, расположенная внутри этого элемента, отображается не в документе, а в заголовке окна браузера. Данный элемент очень сильно влияет на продвижение в поисковой системе т.к. поисковые системы уделяют особое внимание на тег TITLE. Мой совет: никогда не делаете очень длинный текст в этом теге (65 символов достаточно ).

Этот элемент содержит служебную информацию, которая не отражается при просмотре Web-страницы. Внутри него нет текста в обычном понимании, поэтому нет и конечного тега. Каждый элемент МЕТА содержит два основных атрибута, первый из которых определяет тип данных, а второй - содержание.

< body >

Этот элемент объединяет в себе гипертекст, который определяет собственно Web-страницу. Это та видимая часть документа, которую разрабатывает авто страницы и которая отображается браузером. Соответственно, конечный тег этого элемента надо искать в конце Web-страницы. Внутри элемента BODY можно использовать все элементы, предназначенные для дизайна Web-страницы. Внутри начального тега элемента BODY можно расположить много атрибутов, которые служат для установки всей страницы целиком. Рассмотрим их по порядку.

Один из самых полезных атрибутов данного тега, который оказывает свое влияние на дизайн страницы это

background="путь к файлу фона"

Более простое оформление фона сводится к заданию его цвета

bgcolor="#FFFFFF"

Цвет фона задается тремя двухразрядными шестнадцатеричными числами, которые определяют интенсивность красного, зеленого и синего цветов (rbg).

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

text=" #RRGGBB"

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

link="#RRGGBB"

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

Элемент заголовка. Различают шесть уровней заголовков, которые обозначаются следующим образом.
Заголовок
Заголовок
Заголовок
Заголовок
Заголовок
Заголовок

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

align="left" align="center" align="right"

Для создания нового абзаца используется тэг

А для перехода на новую строчку без создания абзаца - тэг
т.е происходит перенос. Эти тэги закрывать не обязательно. Конечно, если Вы не используете в тэге

Элемент ALIGN, которым может задавать выравнивание абзаца:

По левому краю

По центру

По правому краю

Текст, находящийся между этими элементами выравнивается по ширине

Горизонтальная линия (horizontal rule ) - очень распространенный элемент. Во-первых, потому что с его помощью очень легко и удобно делить страницу на части. Во-вторых, потому что выбор подобных элементов оформления у автора страницы очень небольшой. Элемент не имеет конечного тега, но имеет ряд атрибутов для выравнивания влево, по центру, вправо, по ширине:

• align="left"
• align="center"
• align="right"
• align="justify"

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

Произвольный текст

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

Для вставки изображений (картинки ) в HTML документ используется следующий тег (представлено полное описание атрибутов данного тега ):

Списки

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

Самым распространенным является ненумерованный список (unordered list ). Он представлен ниже:

• Пункт 1 списка
• Пункт 2 списка
• Пункт 3 списка

Элемент ul является своеобразным выделением списка. Он позволяет разделять один список от другого. Элемент liобозначает каждый из пунктов.

Таблицы

Являются одним из самых необходимых средством форматирования данных на Web-странице. Основное удобство заключается в том, что браузер прорисовку всей таблицы берет на себя. Размер рамки может быть автоматически согласован с размером окна просмотра в браузере и, разумеется, с размером находящихся в ячейках таблицы строк текста и рисунков. По мимо всего прочего, таблицы позволяют решать многие дизайнерские задачи: выравнивать части страницы друг относительно друга, размещать рядом рисунки и текст, управлять цветовым оформлением и так далее. При создании таблиц применяется принцип вложения: внутри основного элемента таблицы (TABLE) создается ряд элементов, определяющих строки (TR), а внутри этих элементов располагаются элементы для описания каждой ячейки в строке (ТD,ТН).

Для того чтобы разобраться в структуре существующей таблицы или разработать новую таблицу, существует одно правило, что последовательность элементов описывает таблицу сверху вниз и справа налево. Например, если после элемента TABLE указан элемент TR, это указывает на то, что начинается описание новой строки таблицы. Все, что расположено за этим элементом, будет размещено в одной строке (справа налево). Это может быть последовательность элементов TD (ячеек ), другая таблица и так далее. После того как появится новый элемент TR, начнется описание следующей строки, и т. д. до конца таблицы (тега ).
Таблицу можно выровнять по горизонтали при помощи атрибута align:

• align="left" - влево;
• align="center" - по центру;
• align=" right" - вправо.

Ширину таблицы можно задать точно в пикселях или в процентном отношении к ширине страницы в окне браузера. Например: width=400 или width=50%

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

Сценарии

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

Сценарий - это программный код, который включается в текст страницы в виде исходного текста и выполняется браузером при просмотре страницы. Сценарий может быть написан на языке JavaScript, разработанном фирмой Netscape, или на Visual Basic Script (VBScript ), разработанном фирмой Microsoft.

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

• javascript - код на языке JavaScript;
• vbscript - код на языке VBScript.

Атрибут type тоже может указывать на тип языка, хотя его применение не является обязательным. Чтобы не нарушать все правила, внутри элемента можно поместить такое определение:

type="text/javascript"

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

Из стандартных атрибутов можно использовать атрибут charset.

Тег SCRIPT (или ряд таких элементов ) может располагаться как внутри элемента HEAD, так и внутри элемента BODY. Если сценарий находится внутри элемента BODY, возможна и такая ситуация, когда какой-нибудь браузер, не поддерживающий элемент SCRIPT, воспримет программный код как обычный текст и выведет его на экран. Чтобы этого не случилось, код сценария вводят как комментарий:

-
-
-

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

-
-
-
- Просто сценарий
-
- alert("Вы написали свой первый сценарий!")
-
-
-
-

Это простая страница, но она включает сценарий из одной строки. С помощью метода alert перед загрузкой выводится сообщение. И оно будет висеть до тех пор, пока пользователь не нажмет на кнопку ОК, загрузка не будет продолжена.
Возможен случай, например страница, будет просматриваться в браузере, не поддерживающем сценариев, для этого предусмотрен элемент NOSCRIPT. Современные программы просмотра игнорируют его содержимое. Этот элемент можно использовать несколькими методами. Для начала, внутри него можно показать объявление наподобие следующего: «Ваш браузер не может выполнить сценарий, необходимый для просмотра этой web-страницы! » Во-вторых, внутри элемента можно разработать упрощенную версию страницы, без скриптов. В-третьих, можно создать ссылку на другой HTML-документ. Элемент NOSCRIPT должен обязательно снабжаться конечным тегом.

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

Тема реферата

Основы веб-программирования

Введение

Веб-программирование - раздел программирования 1. История появления

С середины годов, 1990-х веб-разработка была одной из наиболее динамично развивающихся отраслей в мире. В 1995 году меньше, было чем 1000 веб-разработки компании в Соединенных Штатах, но к 2005 году насчитывалось более 30000 таких компаний, только США. в Сети развития промышленности ожидается рост на 20% к 2010 году. Рост этой отрасли толкают крупных желающих компаний, продавать товары и услуги для своих клиентов и автоматизировать. Вместо стоимости в десятки тысяч долларов, как это в было случае раннего создания веб-сайтов, теперь можно разработать простой веб-сайт для менее тысячи долларов, в зависимости от сложности и содержания. объема веб-компании. Малые разработки сайта . Язык HTML

Язык HTML был разработан британским Данный язык прост в освоении и является классическим языком. С помощью него написаны многие сайты можно даже сказать что 90% сайтов написано с его использованием. С годами данный язык совершенствовался и совершенствуется по сей день.2.0 - Стандарт был утвержден в ноябре 1944 г. организацией IETF (Internet Engineering Task Force). В нем были расширены возможности предыдущей версии языка и он получил широкое распространение как у профессионалов, так и любителей.3.0 - Проект версии языка был опубликован в марте 1995 г. В нем были произведены радикальные изменения предыдущих версий включены дополнительные возможности, включая таблицы, математические выражения и т.д. Это стало причиной того, что он не стал официальной спецификацией и был заменен спецификациейHTML 3.2.3.2 (кодовое наименование проекта: Wilbur) - Был опубликован и начал широко использоватья с мая 1996 г., получил официальное утвержден в 1997 г. Получил популярность из-за совместимости с HTML 2.0.4.0 (кодовое наименование проекта: Cougar ) - последняя версия языка. В нем реализованы многие распространенные концепции Web -дизайна и приняты некоторые средства HTML 3.2. Самым значительным отличием HTML 4.0 от предыдущих версий является кодировка Unicode , тег Object, позволяющий работать с мультимедиа (в т.ч. с видеоклипами и звуком) и др.

HTML5 вводит несколько новых элементов На данный момент последней версией является HTML 5.

Язык PHP

Язык PHP был создан для решения конкретной практической задачи в среде интернет (какой именно можно узнать, прочитав первую лекцию курса). Мы тоже постараемся не отвлекаться слишком сильно на теоретические рассуждения, и будем стремиться к решению какой-нибудь конкретной задачи в каждой из лекций. Большинство примеров взяты из реально существующей системы: виртуального музея истории информатики. Первая часть курса посвящена изучению основ синтаксиса и управляющим конструкциям. После этого рассматривается технология клиент-сервер, как основная сфера приложения языка PHP. Затем переходим к изучению наиболее полезных на наш взгляд встроенных функций и решению с их помощью практических задач. Хотя объектная модель в языке PHP не самая богатая, ее принципиальное наличие позволяет естественным образом описывать объектные модели данных. В качестве базовой модели будет рассмотрена модель документа виртуального музея информатики. После этого будет рассмотрен ряд прикладных аспектов: работа с файловой системой, с БД, строками, сессиями, DOM XML - все это позволит рассмотреть ключевые задачи практического использования языка.

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

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

Первая область, как уже говорилось, - это создание приложений (скриптов), которые исполняются на стороне сервера. PHP наиболее широко используется именно для создания такого рода скриптов. Для того чтобы работать таким образом, понадобится PHP-парсер (т.е. обработчик php-скриптов) и web-сервер для обработки скрипта, браузер для просмотра результатов работы скрипта, ну, и, конечно, какой-либо текстовый редактор для написания самого php-кода. Парсер PHP распространяется в виде CGI-программы или серверного модуля. Как установить его и web-сервер на свой компьютер, мы рассмотрим немного позднее. В этом курсе мы будем обсуждать, как правило, создание именно серверных приложений, как пример использования языка PHP.

Вторая область - это создание скриптов, выполняющихся в командной строке. То есть с помощью PHP можно создавать такие скрипты, которые будут исполняться, вне зависимости от web-сервера и браузера, на конкретной машине. Для такой работы потребуется лишь парсер PHP (в этом случае его называют интерпретатором командной строки (cli, command line interpreter)). Этот способ работы подходит, например, для скриптов, которые должны выполняться регулярно с помощью различных планировщиков задач или для решения задач простой обработки текста.

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

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

Во-вторых, PHP поддерживается почти на всех известных платформах, почти во всех операционных системах и на самых разных серверах. Это тоже очень важно. Вряд ли кому-т

Язык JavaScript

является языком сценариев (скриптов), который применяют в основном для создания на Web-страницах интерактивных элементов. Его можно использовать для построения меню, проверки правильности заполнения форм, смены изображений или для чего-то еще, что можно сделать на Web-странице. Если взглянуть на Google Maps или службу GMail компании Google, то можно понять, на что способен сегодня язык JavaScript.

Так как JavaScript является в настоящее время единственным языком сценариев, который поддерживают все основные браузеры Web (Internet Explorer, Firefox, Netscape, Safari,Opera, Camino и т.д.), то он используется очень широко.

Код JavaScript обычно выполняется Web-браузером клиента, и в этом случае он называется сценарием на стороне клиента. Но код JavaScript можно выполнять также на Web-сервере для формирования документов HTML, воплощая тем самым сценарий на стороне сервера. Хотя использование JavaScript обычно ограничивается сценариями на стороне клиента, он является также очень мощным серверным языком.

Прежде всего, необходимо узнать, как добавить сценарий JavaScript на страницу HTML. Это можно сделать одним из двух способов: поместить теги Script на Web-странице и расположить код JavaScript внутри этих тегов, или поместить весь код JavaScript в отдельный файл и связаться с ним с помощью тега Script. Любой из этих методов вполне допустим, но они имеют разное назначение. Если имеется небольшой код, который будет использоваться только на одной странице, то размещение его между тегами Script будет хорошим решением. Если, однако, имеется большой фрагмент кода, который будет использоваться на нескольких страницах, то, наверно, лучше поместить этот код JavaScript в отдельный файл и соединиться с ним. Это делается для того, чтобы не нужно было загружать этот код всякий раз при посещении различных страниц. Код загружается один раз, и браузер сохраняет его для последующего использования. Это похоже на то, как используются каскадные таблицы стилей (CSS).

Ниже приведены примеры двух способов подключения кода JavaScript:

Заключение

Из всего этого следует сделать вывод, что для написания хорошего и динамичного сайта надо знать не только основные языки, которые я перечислил, но и языки, которые требуются для построения, так сказать, визуального вида страницы, чтобы она была «красочная». Также в большинстве Веб-страниц используются базы данных, удовлетворяющие нуждам страницы. Иллюстрацией их работы служит работа таких сайтов, как Wikipedia.com, amazon.com, Ozon.ru и т.д.

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

1.Основы программирования на JavaScript - Марк Кан

2.Курс "Язык программирования PHP" - Нина Владимировна Савельева

3.HTML - Александр Ромаданов