- •Разработка web-приложений Методические указания по выполнению лабораторных работ для студентов всех форм обучения
- •230201 – Информационные системы и технологии Санкт-Петербург
- •Цель лабораторных работ
- •Программно-техническая платформа
- •Теоретическая часть
- •Перечень заданий к лабораторным работам
- •Порядок выполнения лабораторных работ
- •5.1. Работа № 1. «Основы языка разметки html»
- •5.1.1 Создание шаблона html-документа
- •5.1.2 Работа с текстом
- •5.1.3 Списки и таблицы
- •5.1.4 Фреймы
- •5.1.5 Ссылки в документах html
- •5.1.6 Графика и звук в документах html
- •5.1.7 Работа с формами
- •5.2. Работа № 2. «Разработка Web–приложения с использованием html»
- •5.2.1 Создание каркаса страницы
- •5.2.2 Создание заголовка web-страницы. Ячейка top
- •5.2.3 Разработка меню и строки поиска
- •5.2.4 Работа с оформлением, графикой. Ячейки News и Text
- •5.2.5 Создание нижнего меню. Ячейки Copyright и Bottom
- •5.2.6 Создание контента web-страницы. Заполнение ячейки News
- •5.2.7 Заполнение ячейки Text
- •5.3. Работа № 3. «Основы разработки asp.Net приложений»
- •5.4. Работа № 4. «Разработка asp.Net Web-сайта в среде Microsoft Visual Studio»
- •5.5. Работа № 5. «Поиск хостинг провайдера и публикация Web-приложения в сети Internet»
- •Содержание отчета по лабораторным работам
- •Список литературы
Порядок выполнения лабораторных работ
5.1. Работа № 1. «Основы языка разметки html»
5.1.1 Создание шаблона html-документа
Создание документа
HTML (HyperText Markup Language ) - язык управления программой, предназначенной для просмотра web-документов (браузером).
Основным элементом языка HTML является тэг - последовательность символов, заключенная между уговыми скобками. Тэги бывают двух видов - открывающие и закрывающие. Закрывающие тэги отличаются прямым слэшем "/" после первой угловой скобки, например:
<p> - тэг, открывающий абзац
</p> - тэг, закрывающий абзац
Некоторые тэги не имеют закрывающих тэгов, например тэг <br>, который сообщает браузеру о разрыве строки, или тэг <hr> - рисующий горизонтальную линию.
Для некоторых тэгов закрывающие тэги не обязательны, например для тэга абзаца <p>, закрывающий тэг не обязателен, но наличие его улучшает читабельность документа и придает ему структуру.
Тэги могут вкладываться друг в друга, например:<b><i>текст</i></b>. В этом случае важно соблюдать последовательность открытия и закрытия:
<тэг1><тэг2><тэг3>...</закрытие тэга3></закрытие тэга2></закрытие тэга1>
HTML-документ является обычным текстовым документом, который можно создать, просмотреть и отредактировать в текстовом редакторе.
HTML не реагирует на регистр символов, например, тэг открывающий таблицу может быть написан так-<TABLE>, или так-<table>, или скажем так-<tAbLe>. Лишние пробелы и переносы тоже не учитываются.
Можно написать
<P> Красная строка.
Следующая строка</P>
и все равно браузер выведет это так:
Красная строка.Следующая строка.
(Есть единственное исключение- тэг <PRE>, после которого браузер начинает учитывать пробелы и переносы).
Итак, создадим простейший документ, который потом можно будет использовать как шаблон для разных HTML-документов. Лучше воспользуйтесь для этого специализированным редактором для работы с HTML.
Первой строкой документа, написанного на языке HTML должна быть строка, начинающаяся декларацией
<!DOCTYPE>. В ней браузер почерпнет информацию о том какому стандарту соответствует документ.
Например, строка:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
скажет браузеру, что документ соответствует английскому стандарту HTML 4.0 Transitional DTD.
Затем идут следующие строки:
<HTML> - необязательный элемент
<HEAD>-начало заголовка документа.
В заголовке располагаются метаданные - информация, позволяющая задать кодовую страницу языка для правильного отображения текста браузером, ключевые слова для индексации страницы поисковыми системами, автора документа и другую информацию. Например, следующая строка укажет браузеру, что надо использовать для вывода текста стандартную кодовую страницу для вывода кириллицы - windows-1251.
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
Следующие две строки нужны для индексации вашей страницы поисковыми системами.
<META NAME="Description" content="краткое описание страницы">
<META NAME="Keywords" content=" ключевые слова через запятую ">
Следующая строка укажет язык таблицы стилей CSS.
<META http-equiv="Content-Style-Type" content="text/css">
Затем следуют описание стилей:
<STYLE type="text/css">
Зададим красный цвет ссылок.
A:link {COLOR: red; TEXT-DECORATION: none}
Зададим цвет посещенных ссылок.
A:visited {COLOR: maroon; TEXT-DECORATION: none}
Зададим цвет ссылки, при клике на ней мышью
A:active {COLOR: fuschia TEXT-DECORATION: none}
Зададим цвет ссылки, при наведении на нее мышью
A:hover {COLOR: black; TEXT-DECORATION: underline}
Зададим цвет фона документа, и параметры шрифта по умолчанию
BODY {BACKGROUND: white; COLOR: black; FONT-FAMILY: Verdana,Arial,sans-serif; FONT-SIZE: 8pt}
</STYLE> -завершаем таблицу стилей.
Затем указывает титул документа - надпись, которая будет выводится в заголовке окна браузера.
<TITLE>Моя первая страничка</TITLE>
</HEAD>- завершаем заголовок.
После заголовка открываем тело документа
<BODY>
Здесь будет содержание нашего документа.
И наконец, завершаем тело документа и сам документ.
</BODY>
</HTML>
Ваш шаблон будет выглядить так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<META NAME="Description" content="краткое описание страницы">
<META NAME="Keywords" content=" ключевые слова через запятую ">
<META http-equiv="Content-Style-Type" content="text/css">
<STYLE type="text/css">
A:link {COLOR: red; TEXT-DECORATION: none}
A:visited {COLOR: maroon; TEXT-DECORATION: none}
A:active {COLOR: fuschia; TEXT-DECORATION: none}
A:hover {COLOR: black; TEXT-DECORATION: underline}
BODY {BACKGROUND: white; COLOR: black; FONT-FAMILY: Verdana,Arial,sans-serif; FONT-SIZE: 8pt}
</STYLE>
<TITLE>Моя первая страничка</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Итак, шаблон создан. Теперь введите следующий текст в тело документа (внутри тэгов <BODY></BODY>
Например:
<P>Мой первый HTML-документ
<A HREF="">ссылка</A></P>
Сохраните документ например как template.html и кликните на нем мышкой. Запустится браузер, в окне которого на белом фоне, черными буквами будет выведен наш текст и красными буквами ссылка, цвет которой изменится на черный, при наведении на ней курсором.