БВ-12Д / nets_uk_1
.pdf79
square – квадрат, circle – окружность.
<LH> – заголовок списка. <LI> – элемент списка.
Пример оформления маркированного списка: <UL type=square>
<LH>Части html-документа <LI>Заголовок
<LI>Тело </UL>
Таблицы в HTML-документах
<TABLE> </TABLE> – таблица. Основные параметры:
ALIGN – выравнивание таблицы. Значения: LEFT, RIGHT или CENTER. WIDTH – ширина таблицы в пикселях или процентах.
BORDER – ширина обрамления ячеек таблицы в пикселях. BORDERCOLOR – цвет границ таблицы.
BGCOLOR – фоновый цвет таблицы. <TR> </TR> – строка таблицы. Параметры:
ALIGN – горизонтальное выравнивание содержимого строки. Значения: LEFT, RIGHT или CENTER.
VALIGN – вертикальное выравнивание содержимого строки. Значения: TOP, MIDDLE или BOTTOM.
<TD> </TD> – ячейка строки. Основные параметры: ALIGN и VALIGN – аналогичны параметрам тега <TR>.
HEIGHT и WIDTH – высота и ширина в пикселях, либо в процентах. ROWSPAN – объединение смежных ячеек в одном столбце. Этот параметр
принимает значения в зависимости от того, сколько ячеек нужно объединить. COLSPAN – аналогично ROWSPAN, но для объединения ячеек в одной
строке.
80
BORDERCOLOR – цвет границ ячейки.
BGCOLOR – фоновый цвет ячейки.
7.4 Задание на лабораторную работу
Этап 1. Изучение основных конструкций языка HTML
1.Ознакомьтесь с теоретическим материалом и основными тегами языка
HTML.
2.В своей папке создайте папку Site. Здесь будут размещаться все файлы проекта.
3.Запустите текстовый редактор Блокнот. Создайте типовую структуру HTML-документа:
<HTML>
<HEAD>
<TITLE> </TITLE> </HEAD>
<BODY>
</BODY>
</HTML>
Между тегами <TITLE> введите заголовок главной страницы: Путешествие по странам Европы.
4.Сохраните документ в папку Site. При сохранении в качестве типа файла укажите Все файлы, в качестве имени файла index.html.
5.Закройте Блокнот. Найдите файл index.html и откройте его. Обратите внимание, что на странице уже присутствует заголовок.
6.В главном меню браузера выполните команду Вид – В виде HTML. Откроется Блокнот, где можно продолжить наполнение страницы.
7.Добавьте заголовком первого уровня фразу:
Добро пожаловать на страничку, посвященную странам Европы!
Сохраните файл. Вернитесь в браузер и выполните команду Обновить. Оцените полученный результат.
81
8.Вернитесь к Блокноту. Создайте новый абзац. Задайте выравнивание текста абзаца по ширине. В качестве текста абзаца введите следующее:
Здравствуйте, уважаемые путешественницы и путешественники! Если ваше собственное желание или судьба манят вас в дорогу – в новые страны, в экзотические места,
внеобычные путешествия, – загляните прежде на наш сайт. Загляните как в будущее, чтобы заранее узнать: что Вас ожидает за ближайшим поворотом, что Вам понадобится
вдороге и о чем не вредно позаботиться заранее. Мы предлагаем Вашему вниманию полную, объективную и достоверную информацию о разных уголках Земли, о странах и путешествиях.
Слова «полную, объективную и достоверную» оформите курсивом. Сохраните страницу, оцените полученный эффект. Далее без дополнитель-
ного напоминания просматривайте страницу по мере необходимости.
9.Добавьте к документу следующий абзац (настройки соответствуют предыдущему абзацу):
Несмотря на то, что стран Европы огромное количество, мы по мере возможности попытаемся Вам рассказать обо всех этих странах. Так что на нашем сайте вас ждет рассказ о странах Европы, в том числе их краткая характеристика.
Слова «Рассказ о станах Европы» оформите курсивом.
10.Добавьте третий абзац:
К сожалению, в настоящий момент сайт находится в стадии разработки, поэтому еще далеко не все разделы доступны для просмотра. Мы искренне надеемся, что этот ресурс будет постоянно обновляться, и в ближайшем будущем многие странички займут свое законное место.
Слова «в стадии разработки» оформите полужирным начертанием.
11.Текст следующего абзаца расположите по центру и увеличьте размер шрифта на один пункт. В качестве текста укажите:
Заходите на нашу страничку почаще!
12.Поставьте в качестве разделителя горизонтальную линию (толщина – 1 пиксель, ширина – 80% рабочего поля, цвет – черный). После тега горизонтальной линии вставьте разрыв строки.
82
13.Добавьте информацию об авторских правах. В конце страницы добавьте абзац, выровненный по центру, с текстом (размер уменьшите на один пункт):
© Ваши инициалы и фамилия 2005, All Rights Reserved
Комбинация символов © в языке HTML означает отображение знака ©.
14.Отцентрируйте заголовок «Добро пожаловать на страничку, посвященную странам Европы».
15.Первый вариант начальной страницы сайта должен выглядеть примерно так, как представлено на рисунке 7.1.
Рисунок 7.1 – Примерный вид страницы после выполнения первого этапа
Этап 2. Установка свойств текста, использование списков, организация гиперссылок
Сначала необходимо внести изменения в созданную ранее web-страницу. Откройте файл index.html в текстовом редакторе Блокнот.
1.Измените цвет фона ("#FCEAD4") и не посещенных гиперссылок ("#014CA1") для всей страницы.
2.Измените гарнитуру шрифта в текстовых абзацах на Verdana. Установите для них высоту символов шрифта – 2 пункта.
83
3.Трижды сохраните получившийся шаблон web-страницы под именами italy.html, france.html и germany.html. На первой из этих страничек будет размещен рассказ об Италии, на второй – о Франции, на третьей – о Германии.
4.Исправьте заголовки новых страниц, например, Италия для страницы Italy.html. Заголовок первого уровня поменяйте на заголовок второго уровня. В качестве текста заголовка укажите: Италия. Вместо трех текстовых абзацев раз-
местите надпись: Раздел находится в стадии разработки.
5.Соедините получившиеся странички гиперсвязями. После разделительной горизонтальной черты главной страницы начните новый абзац, задайте гарнитуру шрифта Verdana и высоту шрифта – 2 пункта.
В новом абзаце организуйте гиперссылки на страницы сайта. Внешне это будет выглядеть примерно так, как показано на рисунке 7.2. Таким образом, данный абзац содержит наименования всех четырех страниц сайта. Гиперссылками являются только три из них, поскольку Главная – это та страница, на которой мы находимся сейчас, и нет особенного смысла в организации такой «автоссылки».
Рисунок 7.2 – Внешний вид ссылок на странице
6.После окончания абзаца с гиперссылками поставьте еще одну разделительную черту с теми же настройками.
7.Оформите фамилию и инициалы, указанные в нижней части страницы, гиперссылкой на ваш почтовый ящик. Для этого в качестве параметра открывающего тега укажите следующее:
HREF=”mailto:ваш_логин@доменное_имя_почтового_сервера”.
8.Сделайте изменения, аналогичные описанным в пунктах 5-7, на страницах для Италии, Франции и Германии.
9.Перейдите к редактированию странички italy.html. В первом абзаце укажите следующее: На этой странице вы можете ознакомиться со следующими под-
разделами:. Далее, создав новый абзац, перечислите подразделы документа, рас-
84
сказывающего о данной стране (все названия подразделов должны быть размещены в одном абзаце):
Географическое положение Национальные особенности Крупные города
10. Создайте абзац, содержащий первый подраздел документа. В качестве текста укажите следующее:
Италия – государство на юге Европы в центральной части Средиземноморья. Берега Италии омываются морями: на Западе - Лигурийским и Тирренским, на Юге - Ионическим, на Востоке - Адриатическим. Около 20% границ – сухопутные, проходят преимущественно по различным частям Альп. На Севере граничит с Францией, Швейцарией, Австрией, на Северо-Востоке - с Югославией. Территория Италии охватывает южные склоны Альп, Паданскую равнину, Апеннинский полуостров, острова Сицилию и Сардинию и многочисленные мелкие острова.
Перед абзацем добавьте текст Географическое положение и оформите его полужирным форматированием.
13. Создайте следующий абзац. В качестве текста укажите:
Этому причудливому ботфорту Европы есть чем похвастаться: религиозными и культурными деятелями, кукурузной кашей-полентой, знаменитыми памятниками архитектуры и своим политическим ребячеством. Его трехтысячелетняя история, культура и кухня могут покорить едва ли не каждого. В Италии можно посетить римские развалины, увидеть искусство ренессанса, побывать в крошечных средневековых городках на холмах, покататься на лыжах в Альпах, исследовать каналы Венеции и увидеть церкви, прекраснее которых трудно себе представить. Конечно, можно также насладиться и более простыми вещами: хорошей едой, вином, походами по магазинам и огромным выбором развлечений.
Перед абзацем аналогично предыдущему пункту добавьте подзаголовок
Национальные особенности.
14. Создайте следующий абзац. В качестве текста введите:
Рим
85
Милан
Неаполь
Флоренция
Перед абзацем добавьте подзаголовок Крупные города.
Оформите абзац в виде маркированного списка (настройки шрифта аналогично всем текстовым абзацам).
15.Организуйте гиперссылки с перечня подразделов на соответствующие части документа.
16.Просмотрите страницы проекта в браузере, проверьте корректность работы гиперссылок.
Этап 3. Вставка изображений и таблиц
1.Создайте в папке Site папку images. В ней будут размещаться файлы с изображениями, используемыми на страницах сайта. Найдите в Internet картинку с изображением флага Италии и сохраните ее в папке images.
2.Откройте файл italy.html в текстовом редакторе Блокнот.
3.Вставьте картинку с флагом в верхней части страницы после заголовка Италия. Выровняйте его по центру.
4.Добавьте на страницу еще один раздел – Общие сведения –, располо-
жив его между разделами Географическое положение и Национальные особен-
ности. Новый подраздел оформите в виде таблицы, образец оформления которой приведен в таблице 7.1.
Таблица 7.1 – Пример оформления таблицы общих сведений
Столица |
Рим |
|
Площадь |
301250 км2 |
|
Население |
57 млн. чел. |
|
Язык |
Итальянский (классический плюс несколько диалектов), |
|
Немецкий, Французский, Словенский |
||
|
Таблица должна быть выровнена по центру, иметь ширину 760 пикселей и границу шириной 1. Первый столбец должен иметь ширину 200 пикселей. Для
86
получения надписи в виде верхнего индекса заключите цифру «2» между специальными тегами <SUP></SUP>.
5. Сохраните документ и просмотрите получившийся результат в браузе-
ре.
6. Пригласите преподавателя для отчета о проделанной работе.
Этап 4. Создание web-сайта
1.Создайте web-сайт, кратко раскрывающий тему курсовой работы по изучаемой дисциплине. Сайт должен содержать от 4 до 8 web-страниц (одна из которых является главной), фон, не менее 3 изображений и 2 таблиц.
2.Пригласите преподавателя для отчета о проделанной работе.
7.5 Контрольные вопросы
1.Дайте определение и поясните назначение тега.
2.Каковы принципы записи тегов?
3.Назовите структурные составляющие HTML-документа. Охарактеризуйте их назначение.
4.Какие параметры могут задаваться для текста?
5.Ссылки какого вида могут использоваться в HTML-документах? В чем их отличие?
6.Поясните принцип описания таблиц с помощью тегов языка HTML.
87
Список рекомендуемой литературы
1.Олифер, В.Г. Компьютерные сети. Принципы, технологии, протоколы: Учебник для вузов [Текст] / В.Г. Олифер, Н.А. Олифер. – СПб: Издательство
«Питер», 2005, – 864 с.
2.Олифер, В.Г. Сетевые операционные системы: Учебник для вузов [Текст] / В.Г. Олифер, Н.А. Олифер. – СПб: Издательство «Питер», 2003, – 554 с.
3.Сетевые средства Windows NT: Windows NT Workstation и Windows NT Server версия 3.5: пер. с англ. [Текст] – СПб.: BHV, 1996,– 496 с.
4.Игер, Б. Работа в Internet: пер. с англ. [Текст] / Б. Игер. – М.: БИНОМ, 1996, – 320 с.
5.Браун, М. Использование HTML 4: пер. с англ. [Текст] / М. Браун, Д. Ханикатт. – М.: Издательский дом «Вильямс», 1999. – 784 с.
88
Приложение А (обязательное)
Пример оформления титульного листа отчета по лабораторной работе
ФЕДЕРАЛЬНОЕ АГЕНСТВО ПО ОБРАЗОВАНИЮ
ОРЛОВСКИЙ ГОСУДАРСТВЕННЫЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ
Кафедра «Информационные системы»
ОТ Ч Е Т
овыполнении лабораторной работы
на тему: «___________________________________»
по дисциплине «Сети электронно-вычислительных машин и средства коммуникаций»
Выполнил(и):____________________ |
Шифр:_______________ |
Ф. И. О. |
|
Факультет:___________________________________________________________
Специальность:_______________________________________________________
Группа:_____________
Орел 200_