Основы разработки WEB-сайтов

ЛЕКЦИЯ 8. ОСНОВЫ РАЗРАБОТКИ WEB -САЙТОВ

Направления развития web -индустрии. Зачем нужен сайт?

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

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

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

Что такое сайт?

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

Web-страницы создаются с помощью специального языка HTML. HTML или Hyper Text Markup Language является языком разметки гипертекста, разметка осуществляется с помощью тегов. Сегодня кроме HTML применяются и другие языка разметки: WML, XML.

В настоящее время для создания интерактивных сайтов применяются различные современные технологии: PHP, ASP, Perl, JSP, CSS, базы данных DB2, MsSQL, Oracle, Access и т.д. Современные сайты, как правило, управляемые сайты, т.е. сайты, которые оснащены CMS (Системой Управления Контентом - Content Management Systems).

Как осуществляется передача Web-страниц в сети Интернет?

Возможность работы с Web-страницами обеспечивает один из видов сервиса Internet, который называется World Wide Web или сокращенно WWW. В основу World Wide Web был положен протокол прикладного уровня http, который обеспечивает прием и передачу Web-страниц.

WWW работает по принципу клиент-серверы: серверы Internet, по запросу клиента, который осуществляется с помощью Web-броузера, установленного на компьютере пользователя, направляют ему копии документов. Получив затребованные документы, Web-броузер ПК пользователя, интерпретирует данные и отображает содержание документов на экране.

Для создания Веб–сайта необходимо:

• определить цель создания сайта;
• разработать ТЗ;
• зарегистрировать домен сайта в определенной зоне (com, ru, ua, net и т.д.);
• разработать сайт;
• разместить сайт на хостинге;
• зарегистрировать в поисковых системах и тематических каталогах;
• выполнить поисковую оптимизацию сайта;
• осуществлять постоянную поддержку сайта.

Определение цели создания сайта

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

Разработка технического задания

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

Обычно сайт должен включать:

• Информацию о компании, реквизиты: почтовый адрес. Телефон, адрес электронной почты.
• Каталог предлагаемой продукции или услуг.
• Информационный раздел (новости, статьи, аналитические обзоры по тематике предлагаемой продукции или услуг).
• Гостевую книгу.
• Способы оплаты.
• Счетчики числа посетителей (счетчики рейтингов).

Регистрация домена

Регистрация домена осуществляется в выбранной пользователем зоне ua, ru, com, net, info и так далее. В зависимости от назначения сайта выбирается его зона регистрации. Для регистрации сайта желательно выбрать домен второго уровня или третьего уровня, например www.lessons-tva.info .

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

maps.google.com

Разработка сайта - важнейший этап создания сайта

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

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

Для разработки сайта используются различные средства: конструкторы сайтов (дизайнеры), WebCoder 1.6.0.0, профессиональные приложения: Macromedia HomeSite Plus, Macromedia Dreamweaver, Microsoft FrontPage и т.д. Для создания сайтов целесообразно использовать редакторы на русском языке.

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

Особое внимание необходимо уделять таким мета - тегам как Тitle (заголовок), Keywords (ключевые слова) и Description (описание), а также расположению ключевых слов в тексте Web-страниц.

Размещение сайта на хостинге

Веб-хостинг - это место для размещения сайта на сервере в сети Internet, который предоставляет доступ к Web-страницам посетителям сайта. Серверы предлагают как платные, так и бесплатные хостинги. Отличие этих хостингов состоит в качестве предоставляемых услуг.

Для размещения сайта на хостинге необходимо зарегистрироваться на одном из серверов, который предоставляет услуги по размещению. Интернет-адрес или доменный адрес сайта зависит от того, какой Вы уровень домена приобрели. При работе в Internet используются не доменные имена, а универсальные указатели ресурсов, называемые URL (Universal Resource Locator).

URL - это адрес любого ресурса (документа, файла) в Internet, он указывает, с помощью какого протокола следует к нему обращаться, какую программу следует запустить на сервере и к какому конкретному файлу следует обратиться на сервере. Общий вид URL: протокол://хост-компьютер/имя файла (например, http://www.lessons-tva.info/book.html) .

Для загрузки файлов сайта на сервер можно использовать файловый менеджер; с помощью браузера; WC или Total Commander.

Регистрация сайта в поисковых системах и тематических каталогах

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

Контроль посещаемости сайта осуществляется по счетчикам. Поисковые машины, как правило, имеют рейтинговые системы, которые ранжируют ресурсы по их посещаемости. Для участия в рейтинге установите на главной странице своего сайта счетчики рейтингов.

Поддержка и регулярные обновления (развитие) сайта

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

Разработка концепции сайта. Этапы работы.

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

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

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

ТЕХНОЛОГИИ СОЗДАНИЯ САЙТОВ

На данный момент сайты есть уже практически у всех достаточно крупных компаний. А те, у кого сайта нет, мечтают его создать. И, в последнее время, большинство пользователей начали понимать, что создание сайта – не такое уж легкое дело. Существуют определенные технологии создания сайтов , которыми необходимо отлично владеть, чтобы создать хороший, работающий сайт.

PHP-скрипт

Это скриптовый язык программирования, созданный для генерации HTML-страниц на веб-сервере и работы с базами данных. На данный момент он поддерживается практически всеми представителями хостинга, входит в «стандартный» набор для создания сайтов (LAMP – Linux, Apache, MySQL, PHP).

Благодаря своей простоте, скорости выполнения, богатой функциональности, распространению исходных кодов на основе лицензии PHP, этот язык является чуть ли не самым популярным в области технологий создания сайтов . Отличается наличием ядра и подключаемых модулей, «расширений»: для работы с базами данных, сокетами, динамической графикой, криптографическими библиотеками, документами формата PDF и т.п. Есть возможность разработать, а также подключить дополнительное расширение.

Возможности PHP очень обширны. Главным образом, PHP применяется при написании скриптов, работающих на стороне сервера; таким образом, PHP способен выполнять всё то, что выполняет любая другая программа CGI (например, обрабатывать данных форм, генерировать динамические страницы, отсылать и принимать cookies). Но PHP дает возможность выполнять также множество других задач. Существуют три основных области, где используется PHP:

Создание скриптов для выполнения на стороне сервера.

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

Создание приложений GUI, выполняющихся на стороне клиента.

Помимо этого PHP: - доступен для большинства операционных систем, включая Linux

Java Script

Это пока еще относительно молодой язык программирования, но уже очень популярный в области технологий создания сайтов . На данный момент, работа над ним еще не закончена. Он постоянно дорабатывается и совершенствуется. Технический комитет работает над существенными расширениями, включая механизмы для сценариев, которые будут созданы для применения в Internet, а также более жесткой координацией с другими основными стандартами групп World Wide Web Консорциум и Wireless Application Protocol Форум.

HTML

Этот язык является базовым в области технологий создания сайтов , так как относительно легок в освоении. Но чрезмерная простота является и его недостатком. HTML (от английского Hyper Text Markup Language – язык разметки гипертекста) прекрасно отвечал требованиям раннего периода развития технологий создания сайтов, но с дальнейшим его развитием возникли существенные проблемы. HTML предоставляет следующие возможности:

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

Получать информацию из Сети через ссылки гипертекста при нажатии кнопки.

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

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

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

СУБД и MySQL

SQL (от Structured Query Language – структурированный язык запросов) – создан для работы с реляционными базами данных. Он позволяет пользователям взаимодействовать с базами данных (просматривать, искать, добавлять, управлять данными). MySQL – многопользовательский, многопоточный сервер базы данных SQL. Имеет хорошую скорость и гибкость, если использовать его для хранения изображений и файлов.

Его преимущества:

• Поддержка нескольких одновременных запросов (многопоточность).
• Возможность записи фиксированной, а также переменной длины.
• Оптимизация связей с присоединением многих данных за один проход.
• Гибкая система паролей и доступов.
• ODBC драйвер в комплекте с исходником.

СТРУКТУРА WEB- САЙТА

Логическая и физическая структура сайта

Каждый ресурс Интернета, от любительской домашней странички до большого информационного портала, содержит несколько тематических рубрик, соединенных между собой гиперсвязями. Как правило, ссылки на все разделы сайта с краткими анонсами их содержимого приводится на первой, так называемой стартовой странице, которой присваивается имя index.htm (.html). Если тематические рубрики содержат собственные подразделы, каждая из них также имеет свою стартовую страницу, называющуюся index.html.

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

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

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

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

Динамическая или статическая компоновка сайта

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

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

Элементы web-страницы

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

Элементы web-страницы: заголовок, рекламный баннер, логотип, текстовое поле, элементы навигации, информация о разработчиках сайта и адрес электронной почты, счетчик посещений.

Пример компоновки сайта

Пример компоновки сайта

Пример компоновки сайта

Пример компоновки сайта

ОСНОВЫ ЯЗЫКА HTML

Язык HTML (от англ. Hyper Text Markup Language – «язык разметки гипертекста») служит для создания веб-страниц. Большинство сайтов созданы именно с помощью HTML.

Синтаксис HTML

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

Структура тега:

Тег состоит из имени тега, за которым может следовать список атрибутов, помещаемых между открывающей и закрывающей угловыми скобками (). Атрибуты позволяют управлять поведением тега. Они могут иметь конкретные значения, задаваемые после знака равенства. Значения атрибутов заключаются в одиночные или двойные кавычки ("). Атрибуты отделяются друг от друга пробелом, порядок следования атрибутов значения не имеет. Имена тэгов и атрибутов нечувствительны к регистру.

Пример:  

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

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

Примером непарного тега является тег – перевод строки. Обычный перевод строки клавишей { Enter } браузер игнорирует (как и несколько постав-ленных подряд пробелов или знаков табуляции).

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

  Неправильно: HTML -код:

первая строка

вторая строка

В браузере:

первая строкавторая строка

Правильно:

HTML -код:

первая строкавторая строка

В браузере:

первая строка

вторая строка

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

… заголовок документа

… тело документа

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

Пример: простейший HTML -документ

Заголовок

Мой первый HTML -документ!

(это пример)

Представление цвета в HTML

Цвет в HTML может быть задан ключевыми словами – названиями цветов на английском языке.

Но компьютер может отобразить гораздо больше – около 16 миллионов – цветов. Альтернативным способом задания цвета является указание кода цве-та в системе RGB (от англ. red , green , blue – красный, зеленый, синий). Суть системы заключается в том, что любой цвет может быть представлен как смешение основных цветов – красного, зеленого и синего. Цвет записывается в виде 6-символьного кода.

Код представляет собой шестнадцатеричное число от 000000 до FFFFFF . Первые две цифры соответствуют красной компоненте, следующие две – зеленой, последние две – синей. Значение 00 означает полное отсутствие составляющей, значение FF (255) – максимум составляющей. В качестве шестнадцатеричных цифр используются десятичные цифры от 0 до 9 и ла-тинские буквы от A до F для обозначения цифр от 10 до 15. Таким обра-зом, получается 256 3 ≈ 16.7 млн. цветов – этого достаточно, чтобы вос-произвести любой цвет, который различает человеческий глаз.

Основные теги, работа с текстом, списки

Теги структуры документа

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

Теги для работы с текстом

– выводит горизонтальную разделительную линию Атрибуты:   align ="…" – определяет режим выравнивания линии left – по левому краю   center – по центру (по умолчанию) right – по правому краю   noshade – использовать сплошную линию вместо объемной size =" N " – толщина линии в пикселах width =" N " – ширина линии в пикселах или процентах по отношению к ширине экрана.   Размеры объектов в HTML часто указываются в пикселях. Пиксель – наи-меньший элемент изображения на экране (точка). Количество пикселей на экране по горизонтали и вертикали называют разрешением (например, 1024 по горизонтали на 768 по вертикали)." width="640"

Тег HR

hr – выводит горизонтальную разделительную линию

Атрибуты:

align ="…" – определяет режим выравнивания линии left – по левому краю

center – по центру (по умолчанию) right – по правому краю

noshade – использовать сплошную линию вместо объемной size =" N " – толщина линии в пикселах

width =" N " – ширина линии в пикселах или процентах по отношению к ширине экрана.

Размеры объектов в HTML часто указываются в пикселях. Пиксель – наи-меньший элемент изображения на экране (точка). Количество пикселей на экране по горизонтали и вертикали называют разрешением (например, 1024 по горизонтали на 768 по вертикали).

… ol – создает нумерованный список элементов Атрибуты: start =" N " – начать нумерацию с числа N type ="…" - определяет формат нумерации 1 – арабские цифры (по умолчанию) A – прописные буквы ( A , B , C ) а – строчные буквы ( a , b , c ) I – прописные римские цифры ( I , II , III ) i – строчные римские цифры ( i , ii , iii ) ul … ul – создает маркированный список элементов Атрибут: type ="…" – определяет формат маркера disk – диск (по умолчанию) circle – окружность square – квадрат li … li – задает элемент списка в нумерованном или маркированном списке Атрибуты: type ="…" – формат номера или маркера value =" N " – задает номер элемента списка" width="640"

Работа со списками

В HTML есть возможность создавать нумерованные и маркированные списки.

ol … ol – создает нумерованный список элементов

Атрибуты:

start =" N " – начать нумерацию с числа N type ="…" - определяет формат нумерации

1 – арабские цифры (по умолчанию)

A – прописные буквы ( A , B , C )

а – строчные буквы ( a , b , c )

I – прописные римские цифры ( I , II , III ) i – строчные римские цифры ( i , ii , iii )

ul … ul – создает маркированный список элементов

Атрибут:

type ="…" – определяет формат маркера

disk – диск (по умолчанию)

circle – окружность

square – квадрат

li … li – задает элемент списка в нумерованном или маркированном

списке Атрибуты:

type ="…" – формат номера или маркера

value =" N " – задает номер элемента списка

Создание ссылок

Создание ссылок

Создание таблиц

Атрибуты:

 

align ="…" – определяет режим выравнивания таблицы относительно текста в строке

left – по левому краю

right – по правому краю

background =" URL " – задает фоновый рисунок в таблице bgcolor ="цвет"– цвет фона таблицы

border =" N " – устанавливает толщину границ таблицы, равную N пикселей

(0 для отключения)

bordercolor ="цвет" – цвет рамки

cellpadding =" N " – размер поля вокруг содержимого каждой ячейки

Объединение ячеек

colspan =" N " – растягивает ячейку на N столбцов влево

Пример:

ФОРМЫ

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

Элемент формы TEXT

Элемент формы CHECKBOX

Элеент формы RADIO

Элемент форм BUTTON

Элемент формы TEXTAREA

Элемент формы SELECT

ФРЕЙМЫ

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

Кодировки текста и специальные символы

Кодировки текста и специальные символы

Специальные символы в HTML

 

В HTML предусмотрен механизм вставки в документ любых символов Юни-код – подстановки или сущности (англ. entities ). Подстановки позволяют употреблять символы, отсутствующие на клавиатуре или даже в используе-мой кодировке (т.е. даже используя кодировку Windows -1251 можно вставить букву греческого алфавита). Подстановки начинаются с символа амперсанда и записываются в виде &# DDDD ; где DDDD – код символа в Юникоде в де-сятеричной системе счисления. Также можно записывать код в шестнадцате-ричной системе счисления в форме &# xHHHH ; Для некоторых символов за-даны специальные названия – мнемоники. Например, знак копирайта © мо-жет быть задан кодом © или &# xA 9; или мнемоникой & copy ;.

Кодировки текста и специальные символы