Составление кроссплатформенного лабораторного практикума

Автор работы: Пользователь скрыл имя, 27 Июня 2013 в 13:46, курсовая работа

Описание работы

Цель – составление кроссплатформенного лабораторного практикума.
Теоретическое исследование цели дало возможность сформулировать гипотезу, согласно которой составление лабораторного практикума будет более результативным в том случае, если будет учтена кроссплатформенность.
В соответствии с целью и гипотезой исследования были поставлены следующие задачи:
1. Анализ учебной, научной и методической литературы по теме исследования.
2. Систематизация теоретического и подбор задачного материала.

Скачать архив (50.16 Кб) Сколько стоит заказать работу?
Файлы: 1 файл

Диплом, окончательный вариант.doc

— 219.00 Кб (Скачать файл)

Задание

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

Я, … (ФИО), родился … (дата и год рождения) в городе … (место, где родились).

 В 19… году окончил … школу (лицей, гимназию) с углубленным изучением …, средний балл аттестата ...

В 19… году поступил на факультет … СПбГУНиПТ. Средний  балл по первым сессиям (аттестациям) …

В свободное от учебы  время увлекаюсь … (перечислить  не менее трех увлечений помимо учебы).

Мои приятели в группе: …(перечислить не менее трех фамилий  из группы).

 

Выполнение 

Введите в созданный  документ стандартные теги:

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

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

Внутри контейнера  <BODY> напечатайте свое резюме. Выполните  команду Файл, Сохранить.

Посмотрите, как выглядит набранный текст без «украшательств». Для этого следует открыть созданный файл из папки своей группы. Сжать размеры окна  web-браузера.

Обратите внимание на информацию в заголовке окна web-браузера и в поле Адрес, а также на то, как компонуются строки текста при изменении размеров окна, в которое он выдается.

Проведите первую коррекцию  кода. Для этого следует:

  1. не закрывая web-браузера, перейти в редактор;
  2. вставить в контейнер <HEAD> …</HEAD> контейнер

<TITLE> Резюме ФИО  </TITLE>

(вместо ФИО, естественно,  должна стоять Ваша фамилия);

  1. выполнить команду - Файл, Сохранить;
  2. перейти в окно web-браузера;
  3. нажать кнопку - Обновить.

Посмотрите, как повлиял  тег <TITLE> на информацию в заголовке web-браузера.

Проведите вторую коррекцию  кода. Для этого следует:

  1. не закрывая обозреватель, перейти в окно редактора;
  2. в открывающий тег <BODY> вставить атрибуты TEXT и BGCOLOR, значения цветов выбрать самим.
  3. Выполнить - Файл, Сохранить;
  4. перейти в окно web-браузера;
  5. нажать кнопку - Обновить.

Посмотрите, как изменился  вид информации в окне web-браузера.

Если какой-то атрибут  «не сработал», значит, допущены ошибки в написании английских слов или пропущены пробелы между атрибутами. Следует найти ошибки и повторить цикл коррекции кода.

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

Проведите третью коррекцию  кода. Для этого следует:

  1. после раздела «ФИО, где и когда родился», поставить тег абзаца <P>;
  2. после раздела «какую школу кончил, средний балл аттестата» – тег разрыва строки <BR>;
  3. перед разделом «увлечения помимо учебы» вставить в код тег горизонтальной линии <HR>.

Посмотрите через web-браузера, в чем разница действий тегов <P> и <BR>, как действует тег <HR> со значениями атрибутов по умолчанию.

Оформите линию нестандартным способом. Для этого следует внести в тег <HR> атрибуты длины, толщины,  цвета и выравнивания   линии. Задайте длину 20 % – 50 % от ширины окна, выравнивание по центру, толщину 4 – 10 пикселей, цвет – любой.

Посмотрите через web-браузера, как действуют атрибуты на линию, созданную тегом <HR>.

Измените вид шрифтов в разных частях резюме. Для этого следует контейнером <H1>  выделить свою фамилию, контейнером <I> – город, где Вы родились, контейнером <H6> – информацию о школе, контейнером <FONT> с атрибутами SIZE=7  COLOR=RED – информацию о факультете, контейнером <FONT> с атрибутами SIZE=1  COLOR=GREEN – информацию о приятелях, контейнером <В> выделить какое-нибудь увлечение.

Просмотрите через web-браузера, как действуют эти теги.

Оформите часть текста в виде списка. Для этого следует  контейнером <OL> выделить блок об увлечениях, разбить его на пункты тегами <LI>. Аналогично контейнером <UL> и тегами <LI> оформить в виде маркированного списка перечень ваших приятелей.

Посмотрите, как выглядят стандартные списки.

Измените нумерацию  в списке. Для этого с помощью атрибутов TYPE  и  START  поменяйте нумерацию  в  списке  увлечений.

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

 

 

 

 

Лабораторная  работа №2:

Создание таблиц в HTML-документах

Задание

 

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

 

Характеристики гостиниц

Название

Адрес

Тип номера

Цена за день

Центральная

Пр. Мира, д. 4

Люкс одноместный

$150

Люкс двухместный

$250

Одноместный

$80

Спортивная

Бульвар Профсоюзов, д. 15

Одноместный

$50

Двухместный

$80

Вокзальная

Привокзальная пл., д. 3

Четырехместный

$50


 

Выполнение 

  1. Подготовьте бланк для HTML-документа. Для этого следует:

выполнить команду Пуск ® Программы ® Стандартные ® Блокнот ® Файл® Сохранить как…;

в окне Сохранение документа  открыть папку своей группы. В  поле Имя ввести Таблица Фамилия.html (вместо Фамилия, естественно, должна стоять Ваша фамилия), нажать кнопку Сохранить.

Если все сделано  правильно, то в папке Вашей группы появится этот файл со значком обозревателя, в противном случае – со значком блокнота. Тогда следует удалить созданный файл и повторить все снова.

  1. Введите в созданный документ стандартные теги:

<HTML>

<HEAD>

<TITLE> Таблица ФИО </TITLE>

</HEAD>

<BODY>

 

</BODY>

</HTML>

Вместо ФИО в контейнере  <TITLE>, естественно, должна стоять Ваша фамилия. Теги набираются в английском регистре. Для ускорения и облегчения набора желательно активно пользоваться командами копирования и переноса информации. Подробнее об этих тегах см. п. 2.4.

III. Внутри контейнера  <BODY> вставьте скелетные теги:

<TABLE>

<CAPTION>

    Характеристики  гостиниц 

    </CAPTION>

<TR>

 

</TR>

<TR>

 

</TR>

……..

<TR>

 

</TR>

</TABLE>  

Количество контейнеров  для строк рассчитывается так же, как в редакторе Word (по самому мелкому дроблению). В нашем примере – 7.

Отцентрируйте заголовок  таблицы. Расположите ее на цветном  фоне. Выберите цвет для шрифта (см. лабораторную работу № 1).

  1. Заполните первую строку таблицы. Так как это «шапка» с названиями столбцов, для ячеек используйте контейнеры <TH> … </TH>. Окончательно контейнер первой строки выглядит так:

<TR>

<TH> Название </TH> <TH> Адрес </TH>  
<TH> Тип номера </TH> <TH> Цена за день </TH>

</TR>

  1. Заполните вторую строку таблицы. Так как это уже содержание таблицы, для ячеек используйте контейнеры <TD> … </TD>. Первая и вторая ячейки по высоте занимают 3 строки. Чтобы объединить их, добавьте атрибуты ROWSPAN=3. Окончательно контейнер второй строки выглядит так:

<TR>

<TD ROWSPAN=3> Центральная  </TD> 
<TD ROWSPAN=3> Пр. Мира, д. 4</TD> 
<TD> Люкс одноместный </TD> <TD> $150 </TD>

</TR>

  1. Заполните контейнер третьей строки таблицы. Для ячеек по-прежнему используйте контейнеры <TD> … </TD>. Первая и вторая ячейки входят в объединенные раньше блоки, их объявлять не надо. А третья и четвертая ячейки содержат новую информацию. Скопируйте контейнеры соответствующих ячеек из второй строки и поменяйте в них содержимое. Окончательно контейнер этой строки выглядит так:

<TR>

<TD> Люкс двухместный </TD> <TD> $250 </TD>

</TR>

VII. Аналогично п. VI заполните  контейнер четвертой строки. Сохраните  документ и просмотрите его через Explorer. В таблице пока нет разлиновки, но, если все сделано правильно, структура расположения информации должна просматриваться. Если нет – исправляйте ошибки.

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

Получаем для новых  строк:

<TR>

<TD ROWSPAN=2> Спортивная </TD>

<TD ROWSPAN=2>  Бульвар   Профсоюзов,  д. 15  </TD> <TD> одноместный  </TD> <TD> $50 </TD>

</TR>

<TR>

<TD> двухместный </TD> <TD> $80 </TD>

</TR>

  1. Добавьте в таблицу сведения о гостинице Вокзальная. Они располагаются в седьмой строке. В ней нет объединения ячеек, все четыре ячейки содержат новую информацию. Можно скопировать теги второй строки, убрать в них атрибуты  ROWSPAN и просто заменить информацию в контейнерах ячеек:

<TR>

<TD >  Вокзальная  </TD>

<TD>  Привокзальная пл., д. 3 </TD>

<TD> Четырехместный </TD> <TD> $50 </TD>

</TR>

Сохраните документ и  просмотрите его через web-браузер.

  1. Форматирование таблицы. Добавьте в тег <TABLE> атрибуты BORDER=3 WIDTH=70% ALIGN=CENTER BGCOLOR=YELLOW BORDERCOLOR=MAROON (можно взять свои значения атрибутов).

Посмотрите через Explorer, как действуют эти атрибуты на вид таблицы. Добавьте атрибут CELLSPACING=0, потом измените его на CELLSPACING=10. Посмотрите через web-браузер, за что отвечает этот атрибут.

  1. Форматирование ячеек. Выделите сведения, относящиеся к разным гостиницам, разной заливкой. Выровняйте по центру ячеек цены номеров.

 

Лабораторная  работа №3:

Создание изображений в HTML-документах

 

Для вставки графических  элементов служит тэг <IMG>.

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

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

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

Чтобы вставить графику  в текст html-страницы надо указать  имя и место хранения соответствующего файла. Если файл находится в той же папке, что и страница, то достаточно указать имя файла с расширением. Если графический файл находится в другой папке, то, помимо имени файла с расширением необходимо указывать путь к этому файлу. Для выравнивания изображения по центу используется тэг <CENTER>, для размещения на новой строке - тэг <BR>

Информация о работе Составление кроссплатформенного лабораторного практикума