рефераты конспекты курсовые дипломные лекции шпоры

Реферат Курсовая Конспект

Лабораторный практикум

Лабораторный практикум - раздел Программирование, Разработка Web-приложений. HTML Министерство Образования И Науки Российской Федерации ...



Министерство образования и науки Российской Федерации
Балтийский государственный технический университет «Военмех»
Институт систем управления и управляющих систем
Кафедра информационных систем и компьютерных технологий

Разработка web-приложений. HTML

Лабораторный практикум

Санкт-Петербург
2006


Составители: О.А. Бузюкина, ст. препод.; Р.Б. Палехов, ст. препод.

 

УДК 004.738.5(075)

 

Разработка Web-приложений. HTML: Лабораторный практикум / Сост.: О.А. Бузюкина, Р.Б. Палехов; Балт. гос. техн. ун-т. – СПб., 2006. – 54 с.

 

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

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

Для студентов всех специальностей, а также слушателей ФПКП и аспирантов.

Рецензент д-р техн. наук, проф. БГТУ А.Д.Ледовский

Утверждено
редакционно-издательским
советом университета

ã Составители, 2006
ã БГТУ, 2006


Предисловие

В последнее время наиболее популярным сервисом в Интернете стал сервис WWW – World Wide Web (Всемирная паутина). Основным элементом Всемирной Паутины являются страницы текста, связанные между собой гиперссылками. Помимо текста Web-страница может содержать различные элементы мультимедиа: рисунки, анимацию, видео, звуковые фрагменты. Разместить все это на странице позволяет язык создания Web–страниц – HTML (Hyper Text Markup Language – язык разметки гипертекста).

Основная цель предлагаемого практикума – познакомить студентов с основами языка HTML. В каждой лабораторной работе приводится необходимое и достаточное количество теоретического материала, общая практическая часть, позволяющая студентам визуально оценить работу языковых конструкций, и варианты индивидуальных заданий, предусматривающие самостоятельное создание студентами HTML-документов. Перед выполнением работы студенты должны просмотреть теоретический материал, продумать дизайн и наполнение Web-страниц. Индивидуальные задания можно выполнять как в компьютерных классах университета, так и самостоятельно (дома или по месту работы обучаемых). Тексты HTML-документов рекомендуется набирать в текстовом редакторе «Блокнот».

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

Защита лабораторной работы состоит из двух частей: практической и теоретической. В практической части студент должен объяснить принципы организации одной из представленных им Web-страниц, в теоретической – ответить на вопросы по теме лабораторной работы.

Лабораторная работа № 1
Структура HTML-документа, форматирование

Цель работы – ознакомление с основами языка HTML, приемами форматирования текста, получение практических навыков создания Web-страниц.

Теоретические сведения

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

– текст документа набирается в любом текстовом редакторе;

– файл сохраняется с расширением *.html или *.htm;

– полученная Web-страница просматривается с помощью любого браузера;

– при необходимости в документ вносятся изменения.

Теги HTML

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

Теги HTML состоят из угловых скобок «<» и «>», в которые заключено название тега. Название может быть указано как прописными, так и строчными буквами. В общем случае теги также могут содержать перечень атрибутов и их значений. Атрибуты изменяют параметры элементов, задаваемых тегами. В этом случае формат тега имеет вид:

<НАЗВАНИЕ атрибут_1=значение_1 атрибут_2=значение_2 …>

Если значение атрибута содержит пробелы, то оно должно быть заключено в кавычки:

<НАЗВАНИЕ атрибут=”значение атрибута”>

Все теги делятся на 2 вида: простые и парные. Простые теги обычно используются для реализации какого-либо элемента документа, например, принудительного перевода строки (тег <BR>), горизонтальной черты (<HR>) или подключения изображения (<IMG …>)

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

Например, все содержимое текстового файла, являющегося документом HTML, должно находиться между тегами <HTML> и </HTML>. Т.е. любой HTML-файл имеет следующий вид:

<HTML>

Содержание

</HTML>

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

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

Простой HTML-документ состоит из двух частей: заголовка и тела документа. Заголовок представляет собой обобщенное описание документа. В теле документа находится его содержательная часть. Начало и конец заголовка документа задают парные теги <HEAD> и </HEAD>, а начало и конец тела документа – теги <BODY> и </BODY>. Таким образом, все простые документы имеют вид:

<HTML>

<HEAD>

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

</HEAD>

<BODY>

Содержательная часть документа

</BODY>

</HTML>

Внутри контейнера <HEAD> размещаются элементы <TITLE>, <META> и <BASE>.

Элемент <TITLE> содержит название документа, отображаемое обычно в строке заголовка окна браузера. Например,

<TITLE>Моя первая Web-страница</TITLE>

Роботы многих поисковых систем используют содержание контейнера <TITLE> для создания поискового образа документа.

Элемент <META> содержит управляющую информацию, которую браузер использует для правильного отображения и обработки содержания тела документа. Основной формат тега <META> таков:

<META [name=”имя мета-записи”] [http-equiv=”имя_HTTP-операции”] content=”текст”>

Практика показывает, что можно указывать одновременно и атрибут name, и атрибут http-equiv с одинаковыми значениями. Это связано с тем, что одни роботы индексирования анализируют содержание META-элемента по атрибуту name, а другие – по атрибуту http-equiv.

В каждом теге <META> допускается использование только одной мета-записи, поэтому, когда нужно использовать несколько мета-записей, создают целый список из тегов <META>.

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

<META name=”keywords” content=”лабораторная работа, HTML, тег, гиперссылка, фрейм”>

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

<META name=”description” content=”Лабораторный практикум по HTML содержит четыре работы, позволяющие освоить основы языка HTML и научиться создавать привлекательные Web-страницы”>

Мета-записи author и copyright предназначены для защиты прав авторов страницы:

<META name=”author” content=”И.И.Иванов, ivanov@mail.ru”>

<META name=”copyright” content=”описание авторских прав”>

С помощью мета-записи content-type можно указать браузеру тип и кодировку Web-страницы, например

<META http-equiv=content-type content=”text/html; charset=windows-1251”>

Разметка гипертекстовых ссылок обычно выполняется в частично заданных (относительных) адресах, когда URL задается относительно текущего местоположения документа. Такой стиль разметки удобен тем, что при переносе всего дерева документов в другое место не потребуется менять систему гипертекстовых ссылок внутри документов. По умолчанию в качестве базы выбирается каталог, в котором размещен HTML-документ. Если использование текущего каталога в качестве базы неудобно, можно с помощью тега <BASE> назначить URL, относительно которого будут определяться частичные адреса. Например,

<BASE href=”http://i5.bstu.spb.ru/portal/”>

Тело документа или содержимое Web-страницы ограничивается маркерами <BODY> и </BODY>. Оно может содержать:

– заголовки (Н1 – Н6);

– элементы на уровне текста;

– гипертекстовые ссылки;

– мультимедийные фрагменты.

Элемент <BODY> имеет набор ключевых атрибутов, используемых для того, чтобы задать повторяющееся фоновое изображение, дополнительный цвет фона и цвет, который будет применяться при печати на экране обычного текста и гипертекстовых связей:

background определяет адрес URL, откуда будет браться фоновое изображение документа;

bgproperties запрещает прокрутку фонового изображения вместе с содержимым документа, если установлено значение fixed;

bgcolor определяет цвет фона для тела документа;

text задает цвет отображаемого на экране текста и обычно используется при изменении фонового цвета атрибутами bgcolor и background;

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

alink задает цвет, которым будут выделяться в тексте гипертекстовые связки в тот момент, когда пользователь щелкает по ним клавишей мыши;

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

leftmargin устанавливает ширину левого поля документа в пикселях;

topmargin устанавливает размер верхнего поля документа в пикселях.

Например,

<BODY background =”picture1.jpg” bgproperties =fixed leftmargin =100>

Текст на фоне рисунка, смещенный вправо на 100 пикселей

</BODY>

Цвета в языке HTML задаются по схеме RGB шестнадцатеричными числами (например, link=“#C0FFC0”) или одним из шестнадцати общепринятых названий для цвета. Первоначально эти цвета были выбраны в соответствии со стандартными цветами, которые использовала палитра VGA. Названия цветов и соответствующие значения RGB приведены в таблице 1.

Таблица 1

Цвет Название Шестнадцатеричный код
Черный Black #000000
Серебряный Silver #C0C0C0
Серый Gray #808080
Белый White #FFFFFF
Бордовый Maroon #800000
Красный Red #FF0000
Пурпурный Purple #800080
Фиолетовый Fuchsia #FF00FF
Зеленый Green #008000
Лимонный Lime #00FF00
Оливковый Olive #808000
Желтый Yellow #FFFF00
темно-синий Navy #000080
Синий Blue #0000FF
Голубой Teal #008080
зеленовато-голубой Aqua #00FFFF

Для изменения расположения и начертания текста предназначены элементы уровня текста. При их отсутствии текст будет представлен одним блоком, оформленным по умолчанию.

Форматирование шрифта

Парный тег <FONT> определяет гарнитуру, размер и цвет шрифта ограниченного этим тегом текста. Гарнитуру устанавливает атрибут face, значением которого является имя шрифта. Цвет шрифта задает атрибут color. Цвет указывается в шестнадцатеричном формате согласно цветовой модели RGB. Размером шрифта управляет атрибут size. Шрифт может иметь размер от 1 до 7. Можно указать абсолютный размер шрифта или задать смещение относительно базового значения (по умолчанию 3) в положительную или отрицательную сторону. Соответствие размера шрифта величине в пунктах представлено в таблице 2.

Таблица 2

Размер шрифта Величина в пунктах

Пример использования тега <FONT>:

<FONT face=Arial Color=”#00FF00” size=5> Зеленый </FONT>

Аналогично для определения базового шрифта HTML-документа может использоваться непарный тег <BASEFONT>, имеющий те же атрибуты, что и <FONT>. Этот тег обычно указывают непосредственно после открывающего тега <BODY>.

Для выделения текстовой информации в документах можно использовать различное начертание, которое задается парными тегами <B>, <I>, <U>, <TT>, <BIG>, <SMALL>, <STRIKE>, <SUB> и <SUP>. Тег <B> придает тексту полужирное начертание, тег <I> – курсивное, <U> задает подчеркивание, <TT> выравнивает все символы по ширине, <BIG> увеличивает текущий размер шрифта на 1, <SMALL> уменьшает текущий размер на 1, <STRIKE> или просто <S> перечеркивает текст, <SUB> и <SUP> позволяют создать соответственно верхний и нижний индекс.

Все теги форматирования шрифта могут быть вложенными друг в друга. Например, для выделения текста полужирным курсивом тег <I> используется совместно с тегом <B>:

<B><I>полужирный курсив</I></B>

Для формирования заголовков различных уровней в языке HTML предусмотрены специальные парные теги, определяющие стиль их оформления. Обозначение тега заголовка состоит из буквы Н и цифры, определяющей уровень заголовка: для заголовка первого уровня <H1>, для заголовка второго уровня <H2> и т.д. Всего может быть шесть уровней заголовков. Тег <Hn> может иметь атрибут align, устанавливающий выравнивание заголовка по центру (center), левому (left) или правому (right) краю. По умолчанию используется выравнивание по левому краю. Пример:

<H1 align=center>Заголовок первого уровня</H1>

<H2>Заголовок второго уровня</H2>

Форматирование абзаца

В HTML-документе невозможно разбить текст на абзацы, используя клавишу Enter. Нажатие этой клавиши улучшает внешний вид исходного текста, но никак не влияет на получаемое изображение. Разделить текст на абзацы можно несколькими способами: перейти на новую строку с помощью тега <BR>, отделять один абзац от другого горизонтальными линиями <HR> или использовать тег параграфа <P>.

Одинарный тег <BR> не требует атрибутов и указывается в том месте текста, где требуется поставить разрыв строки.

Тег <HR> в месте разрыва текста вставляет горизонтальную линейку, вид которой определяется атрибутами: size задает толщину линии в пикселях, width – длину (или в пикселях, или в процентах от ширины страницы), align – выравнивание. Таким образом, два абзаца оказываются разделенными горизонтальной линией.

Парный тег <P> позволяет выделить фрагмент текста, который будет отделен от предыдущего и следующего пустыми строками. Единственный атрибут align позволяет установить выравнивание параграфа. Внутри параграфа можно использовать теги форматирования шрифта и разрыва строки, применение других тегов завершает параграф аналогично закрывающему тегу </P>.

Текст со специфическим форматированием можно вставлять в HTML-документ с помощью парного тега <PRE>. Заключенный в теги текст будет отображаться так, как он был отформатирован предварительно, без обработки, с точным соблюдением переносов строк и интервалов между словами. Атрибут width позволяет задать количество символов, которое необходимо разместить в одной строке.

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

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

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Текст с отступом

Такие комбинации символов, начинающиеся со знака «&» и заканчивающиеся точкой с запятой, служат в языке HTML для задания символов, которые отсутствуют на клавиатуре или не могут включаться в текст документа согласно спецификации языка HTML, например «<».

Списки

Язык HTML поддерживает три вида списков: нумерованные списки, маркированные списки и списки определений.

Нумерованные списки создаются с помощью парного тега <OL>, который может иметь атрибуты type и start. Значение атрибута type определяет тип нумерации: A и a – прописные и строчные латинские буквы, I и i – большие и маленькие римские цифры, 1 – арабские цифры. Атрибут start задает номер первого элемента в списке. По умолчанию нумерация осуществляется арабскими числами и начинается с 1. Каждый элемент списка начинается с тега <LI>. Пример нумерованного списка с большими римскими цифрами и начальным значением XLIX:

<OL type=I start=49>

<LI>пункт 1

<LI>пункт 2

<LI>пункт 3

</OL>

Маркированные списки создаются при помощи парного тега <UL>, единственный атрибут которого type определяет внешний вид маркера: disk – закрашенные круглые маркеры (используется по умолчанию), circle – незакрашенные круглые маркеры, square – квадратные маркеры. Размер маркера не зависит от установленного размера шрифта. Элементы маркированного списка так же, как и элементы нумерованного, задаются тегом <LI>. Пример списка с квадратными маркерами:

<UL type=square>

<LI>пункт 1

<LI>пункт 2

<LI>пункт 3

</UL>

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

<OL>

<LI>пункт 1

<UL><LI>подпункт 1<LI>подпункт 2</UL>

<LI>пункт 2

<UL><LI>подпункт 1<LI>подпункт 2</UL>

</OL>

В научно-технических и учебных изданиях часто используют списки определений, оформляя с их помощью глоссарии. Такой список, обрамленный тегами <DL> и </DL>, содержит элементы двух типов: термины, помеченные тегом <DT>, и их определения, начинающиеся с тега <DD>.

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

<DL>

<DТ>Дискета

<DD>Гибкий носитель информации

</DL>

Порядок выполнения работы

– Конец работы –

Эта тема принадлежит разделу:

Разработка Web-приложений. HTML

На сайте allrefs.net читайте: "Разработка Web-приложений. HTML"

Если Вам нужно дополнительный материал на эту тему, или Вы не нашли то, что искали, рекомендуем воспользоваться поиском по нашей базе работ: Лабораторный практикум

Что будем делать с полученным материалом:

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

Все темы данного раздела:

Создание простейшего Web-документа.
1.1.Запустите текстовый редактор Блокнот. 1.2.Создайте документ, содержащий следующий текст: <НТМL> <HEAD> <ТIТLЕ>Заголовок Документа</TIТLЕ

Приемы форматирования текста
2.1.Откройте документ first.htm в программе Блокнот. 2.2.Удалите весь текст, находящийся между тегами <BODY> и </BODY>. 2.3.Добавьте тег <BASEFONT size=5 color=brow

Изучение приемов форматирования абзацев.
3.1.Откройте документ first.htm в программе Блокнот. 3.2.Удалите весь текст, находящийся между тегами <BODY> и </BODY>. 3.3.Введите заголовок первого уровня, заключив

Создание списков
4.1.Откройте доку­мент first.htm в программе Блокнот. 4.2.Удалите весь текст, находящийся между тегами <BODY> и </BODY>. 4.3.Вставьте в документ тег <OL type=I>,

Исследование методов создания абзацного отступа в документах HTML
5.1.Запустите текстовый редактор Блокнот и начните создание доку­мента HTML. Введите теги структурных элементов и дайте документу заголовок, например, «Имитация абзацных отступов». 5.2.Вве

Создание гиперссылок
1.1.Откройте Блокнот и создайте новый документ. 1.2.В теле документа напишите фразу «Текст до ссылки». 1.3.Создайте гиперссылку <А href="first.htm">Ссылка</А>

Использование изображений на Web-странице
2.1.Создайте новый HTML-документ. Введите произвольный текст объемом 4-5 строк и установите курсор в его начало. 2.2.Введите тег <IMG src="…" align=bottom>, вместо многоточ

Создание карты изображений
3.1.Создайте новый HTML-документ. 3.2.Введите следующий текст <IMG src="C:Documents and SettingsAll UsersДокументыМои рисункиОбразцы рисунковзакат.jpg" usemap=#map1 h

Создание таблиц
1.1.Создайте новый HTML-документ в программе Блокнот. 1.2.Введите тег <TABLE border=10 width=70% align=center> 1.3.Введите строку <CAPTION valign=top>

Создание формы
1.1.В редакторе Блокнот создайте новый документ следующего содержания: <HTML> <HEAD> <TITLE>Форма</TITLE> </HEAD> <BODY

Создание фреймов
2.1.В редакторе Блокнот создайте новый документ следующего содержания: <HTML> <HEAD> <TITLE>Описание фреймов</TITLE>

Хотите получать на электронную почту самые свежие новости?
Education Insider Sample
Подпишитесь на Нашу рассылку
Наша политика приватности обеспечивает 100% безопасность и анонимность Ваших E-Mail
Реклама
Соответствующий теме материал
  • Похожее
  • Популярное
  • Облако тегов
  • Здесь
  • Временно
  • Пусто
Теги