Методичка: Разработка Web-приложений

Самаркандский филиал ташкентского университета информационных технологий имени Мухаммада Ал-Хоразмий

Факультет «телекоммуникационные технологии и профессиональное образование»

Кафедра «информационно-образовательные технологии»

МЕТОДИЧЕСКОЕ ПОСОБИЕ

для выполнения практических работ по предмету

«Разработка WEB-приложений»

Ахмеджанова З.И.

Рецензент: Каршиев А.Б.

доц. кафедры “Программный инжиниринг” ТУИТ СФ

Рецензент: Зайналов Н.Р.

доц. кафедры “Информационные технологии СамИСИ.

САМАРКАНД - 2018

Введение

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

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

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

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

Данное методическое пособие по предмету «Разработка веб-приложений» был рарзаботан для учащихся 3 курса.

Практическое занятие №1

Тема: Основы технологии html. Работа с тегами

Цель работы: В ходе выполнения этой практической работы необходимо освоить базовые приемы использования языка HTML для создания макета веб-страницы.

Указания к работе: спроектировать структуру веб-сайта по теме вашей учебной научно-исследовательской работы (УНИРС) или по любой другой теме, сопоставимой (или большей) по объему с УНИРС.

Разработать эскиз оформления веб-сайта (использовать любой графический редактор).

1. Выполнить верстку макета страницы с блочной структурой по разработанному эскизу.

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

Типовая структура парного тега:

<тег [атрибут="значение" [атрибут="значение" [...]]]>содержимое</тег>

Типовая структура непарного (одиночного) тега:

<тег [атрибут="значение" [атрибут="значение" [...]]] />

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

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

· Теги HTML не чувствительны к регистру.

· Различные версии HTML поддерживают устаревшие (deprecated) теги только для обратной совместимости.

· Значения атрибутов крайне рекомендуется закрывать в одинарные или двойные кавычки.

Структура веб-страницы

Список основных тегов HTML

Мета-теги

Основное предназначение мета-тегов (<meta ... />), это включение информации о документе, которая может содержать сведения об авторе, дате создания документа или авторских правах.

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

В документе может находится любое количество тегов <meta>. Все они размещаются в блоке <head>...</head>.

Рассмотрим некоторые, часто используемые мета-теги:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

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

<meta http-equiv="Refresh" content="N; url=http://example.org/">

Автоматическое перенаправление (редирект) через N секунд после открытия с текущей страницы на указанный адрес .

<meta name="author" content="Имя автора страницы">

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

<meta name="keywords" content="список, ключевых, слов">

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

<meta name="description" content="Сюда вписывается краткое описание страницы">

Этот тег задает фразу, по которой пользователь определяет суть вашей страницы и решает, посещать ли ее.

Вписанные выражения в данный meta-тег играют важную роль в рейтинге страницы.

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

<meta name="robots" content="index,all">

Управление поисковым роботом, указание ему того, что страницу нужно индексировать (или нет, если указано "noindex").

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

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

Общее форматирование

<!-- Это комментарий -->

<h1>Заголовок</h1>

<p align="center">Абзац по центру</p>

<p align="right">Абзац по правому краю</p>

<p>Обычный текст -- <b>полужирный текст</b></p>

<p><span style="font-size: 10em; color: red;">Ooops!</span> -- использование CSS</p>

Структура макета веб-страницы

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

Больше возможностей по дизайну представляют макеты веб-страниц с нелинейной структурой, которые создаются:

1. С использованием фреймов.

2. С использованием табличной верстки.

3. С использованием блочных элементов.

Пусть требуется создать документ, логически разделенный на три блока): «head» -- верхний блок, «menu» -- левый блок, «content» -- правый блок. Примеры, иллюстрирующие как это можно сделать перечисленными способами, приведены в листингах 2, 3 и 4.

Листинг 2. Фреймовая структура

Содержимое блоков хранится в файлах top.html, left.html, content.html

Сборка выполнена в файле index.html, имеющем следующий вид:

<html>

<head>

<title>Фреймы</title>

</head>

<frameset rows="10%,*">

<frame name="top" src="top.html">

<frameset cols="10%,*">

<frame name="left" src="left.html">

<frame name="cont" src="content.html">

</frameset>

<noframes>Это для браузеров, не поддерживающих фреймы.</noframes>

</frameset>

</html>

Листинг 3. Табличная структура

<html>

<head>

<title>Таблицы</title>

</head>

<body>

<table style="width: 100%; height: 100%; border: solid 1px black;"><tr>

<td colspan=2 height="10%">HEAD</td></tr><tr>

<td width="10%">LEFT</td>

<td>CONTENT</td></tr> </table>

<body>

</html>

Листинг 4. Блочная структура

<html>

<head>

<title>Блоки (div)</title><style> <!-- см. внедренные стили -->

body{margin: 10px;}

div{border: solid 1px black;}

.top{position: relative; height: 100px; width: 100%;}

.left{position: absolute; top: 114px; left: 10px; width: 200px; }

.main{position: absolute; top: 114px; left: 214px; margin-right:8px;}

</style>

</head>

<body>

<div class="top">TOP</div>

<div class="left">LEFT</div>

<div class="main">CONTENT</div>

</body></html>

Задания к работе

1. Создание простейших файлов HTML.

2. Управление расположением текста на экране.

3. Некоторые специальные команды форматирования.

4. Выделение фрагментов текста.

5. Использование стилей заголовка.

6. Установка размера текущего шрифта.

7. Установка гарнитуры и цвета шрифта.

8. Выравнивание текста по горизонтали.

9. Задание цвета фона и текста.

10. Размещение графики на Web-странице.

11. Установка атрибутов изображения.

12. Установка фонового изображения на Web-странице.

Практическое занятие № 2-3

Тема: Таблицы CSS. Использование стилей CSS

Цель работы: Изучить способы использования стилевой разметки. Научиться создавать и применять таблицы стилей для управления представлением содержимого веб-страниц.

Указания к работе: Создать внешние таблицы стилей (раздельные для устройств screen, print и handheld) для вашего сайта (см. задание к практике №1).

1. Подключить созданные таблицы к макету страницы.

2. Проверить правильность отображения веб-страниц в различных браузерах.

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

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

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

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

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

Например, если вы примените определенный цвет текста в теге <div>, то все теги внутри блока будут отображаться этим же цветом.

Использование каскадных таблиц дает возможность разделить содержимое и его представление и гибко управлять отображением гипертекстовых документов путем изменения стилей. Официальная информация о спецификации Cascading Style Sheets всегда доступна по адресу http://www.w3.org/Style/CSS/

Общий синтаксис CSS

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