5.4Задание на лабораторную работу
Этап 1. Изучение основных конструкций языка HTML
Ознакомьтесь с теоретическим материалом и основными тегами языка HTML.
В своей папке создайте папку Site. Здесь будут размещаться все файлы проекта.
Запустите текстовый редактор Блокнот. Создайте типовую структуру HTML-документа:
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Между тегами <TITLE> введите заголовок главной страницы: Путешествие по странам Европы.
Сохраните документ в папку Site. При сохранении в качестве типа файла укажите Все файлы, в качестве имени файла index.html.
Закройте Блокнот. Найдите файл index.html и откройте его. Обратите внимание, что на странице уже присутствует заголовок.
В главном меню браузера выполните команду Вид – В виде HTML. Откроется Блокнот, где можно продолжить наполнение страницы.
Добавьте заголовком первого уровня фразу:
Добро пожаловать на страничку, посвященную странам Европы!
Сохраните файл. Вернитесь в браузер и выполните команду Обновить. Оцените полученный результат.
Вернитесь к Блокноту. Создайте новый абзац. Задайте выравнивание текста абзаца по ширине. В качестве текста абзаца введите следующее:
Здравствуйте, уважаемые путешественницы и путешественники! Если ваше собственное желание или судьба манят вас в дорогу – в новые страны, в экзотические места, в необычные путешествия, – загляните прежде на наш сайт. Загляните как в будущее, чтобы заранее узнать: что Вас ожидает за ближайшим поворотом, что Вам понадобится в дороге и о чем не вредно позаботиться заранее. Мы предлагаем Вашему вниманию полную, объективную и достоверную информацию о разных уголках Земли, о странах и путешествиях.
Слова «полную, объективную и достоверную» оформите курсивом.
Сохраните страницу, оцените полученный эффект. Далее без дополнительного напоминания просматривайте страницу по мере необходимости.
Добавьте к документу следующий абзац (настройки соответствуют предыдущему абзацу):
Несмотря на то, что стран Европы огромное количество, мы по мере возможности попытаемся Вам рассказать обо всех этих странах. Так что на нашем сайте вас ждет рассказ о странах Европы, в том числе их краткая характеристика.
Слова «Рассказ о станах Европы» оформите курсивом.
Добавьте третий абзац:
К сожалению, в настоящий момент сайт находится в стадии разработки, поэтому еще далеко не все разделы доступны для просмотра. Мы искренне надеемся, что этот ресурс будет постоянно обновляться, и в ближайшем будущем многие странички займут свое законное место.
Слова «в стадии разработки» оформите полужирным начертанием.
Текст следующего абзаца расположите по центру и увеличьте размер шрифта на один пункт. В качестве текста укажите:
Заходите на нашу страничку почаще!
Поставьте в качестве разделителя горизонтальную линию (толщина – 1 пиксель, ширина – 80% рабочего поля, цвет – черный). После тега горизонтальной линии вставьте разрыв строки.
Добавьте информацию об авторских правах. В конце страницы добавьте абзац, выровненный по центру, с текстом (размер уменьшите на один пункт):
© Ваши инициалы и фамилия 2005, All Rights Reserved
Комбинация символов © в языке HTML означает отображение знака ©.
Отцентрируйте заголовок «Добро пожаловать на страничку, посвященную странам Европы».
Первый вариант начальной страницы сайта должен выглядеть примерно так, как представлено на рисунке 5.1.
Рисунок 5.1 – Примерный вид страницы после выполнения первого этапа
Этап 2. Установка свойств текста, использование списков, организация гиперссылок
Сначала необходимо внести изменения в созданную ранее web-страницу. Откройте файл index.html в текстовом редакторе Блокнот.
Измените цвет фона ("#FCEAD4") и не посещенных гиперссылок ("#014CA1") для всей страницы.
Измените гарнитуру шрифта в текстовых абзацах на Verdana. Установите для них высоту символов шрифта – 2 пункта.
Трижды сохраните получившийся шаблон web-страницы под именами italy.html, france.html и germany.html. На первой из этих страничек будет размещен рассказ об Италии, на второй – о Франции, на третьей – о Германии.
Исправьте заголовки новых страниц, например, Италия для страницы Italy.html. Заголовок первого уровня поменяйте на заголовок второго уровня. В качестве текста заголовка укажите: Италия. Вместо трех текстовых абзацев разместите надпись: Раздел находится в стадии разработки.
Соедините получившиеся странички гиперсвязями. После разделительной горизонтальной черты главной страницы начните новый абзац, задайте гарнитуру шрифта Verdana и высоту шрифта – 2 пункта.
В новом абзаце организуйте гиперссылки на страницы сайта. Внешне это будет выглядеть примерно так, как показано на рисунке 5.2. Таким образом, данный абзац содержит наименования всех четырех страниц сайта. Гиперссылками являются только три из них, поскольку Главная – это та страница, на которой мы находимся сейчас, и нет особенного смысла в организации такой «автоссылки».
Рисунок 5.2 – Внешний вид ссылок на странице
После окончания абзаца с гиперссылками поставьте еще одну разделительную черту с теми же настройками.
Оформите фамилию и инициалы, указанные в нижней части страницы, гиперссылкой на ваш почтовый ящик. Для этого в качестве параметра открывающего тега укажите следующее:
HREF=”mailto:ваш_логин@доменное_имя_почтового_сервера”.
Сделайте изменения, аналогичные описанным в пунктах 5-7, на страницах для Италии, Франции и Германии.
Перейдите к редактированию странички italy.html. В первом абзаце укажите следующее: На этой странице вы можете ознакомиться со следующими подразделами:. Далее, создав новый абзац, перечислите подразделы документа, рассказывающего о данной стране (все названия подразделов должны быть размещены в одном абзаце):
Географическое положение
Национальные особенности
Крупные города
Создайте абзац, содержащий первый подраздел документа. В качестве текста укажите следующее:
Италия – государство на юге Европы в центральной части Средиземноморья. Берега Италии омываются морями: на Западе - Лигурийским и Тирренским, на Юге - Ионическим, на Востоке - Адриатическим. Около 20% границ – сухопутные, проходят преимущественно по различным частям Альп. На Севере граничит с Францией, Швейцарией, Австрией, на Северо-Востоке - с Югославией. Территория Италии охватывает южные склоны Альп, Паданскую равнину, Апеннинский полуостров, острова Сицилию и Сардинию и многочисленные мелкие острова.
Перед абзацем добавьте текст Географическое положение и оформите его полужирным форматированием.
Создайте следующий абзац. В качестве текста укажите:
Этому причудливому ботфорту Европы есть чем похвастаться: религиозными и культурными деятелями, кукурузной кашей-полентой, знаменитыми памятниками архитектуры и своим политическим ребячеством. Его трехтысячелетняя история, культура и кухня могут покорить едва ли не каждого. В Италии можно посетить римские развалины, увидеть искусство ренессанса, побывать в крошечных средневековых городках на холмах, покататься на лыжах в Альпах, исследовать каналы Венеции и увидеть церкви, прекраснее которых трудно себе представить. Конечно, можно также насладиться и более простыми вещами: хорошей едой, вином, походами по магазинам и огромным выбором развлечений.
Перед абзацем аналогично предыдущему пункту добавьте подзаголовок Национальные особенности.
Создайте следующий абзац. В качестве текста введите:
Рим
Милан
Неаполь
Флоренция
Перед абзацем добавьте подзаголовок Крупные города.
Оформите абзац в виде маркированного списка (настройки шрифта аналогично всем текстовым абзацам).
Организуйте гиперссылки с перечня подразделов на соответствующие части документа.
Просмотрите страницы проекта в браузере, проверьте корректность работы гиперссылок.
Этап 3. Вставка изображений и таблиц
Создайте в папке Site папку images. В ней будут размещаться файлы с изображениями, используемыми на страницах сайта. Найдите в Internet картинку с изображением флага Италии и сохраните ее в папке images.
Откройте файл italy.html в текстовом редакторе Блокнот.
Вставьте картинку с флагом в верхней части страницы после заголовка Италия. Выровняйте его по центру.
Добавьте на страницу еще один раздел – Общие сведения –, расположив его между разделами Географическое положение и Национальные особенности. Новый подраздел оформите в виде таблицы, образец оформления которой приведен в таблице 5.1.
Таблица 5.1 – Пример оформления таблицы общих сведений
Столица |
Рим |
Площадь |
301250 км2 |
Население |
57 млн. чел. |
Язык |
Итальянский (классический плюс несколько диалектов), Немецкий, Французский, Словенский |
Таблица должна быть выровнена по центру, иметь ширину 760 пикселей и границу шириной 1. Первый столбец должен иметь ширину 200 пикселей. Для получения надписи в виде верхнего индекса заключите цифру «2» между специальными тегами <SUP></SUP>.
Сохраните документ и просмотрите получившийся результат в браузере.
Пригласите преподавателя для отчета о проделанной работе.
Этап 4. Создание web-сайта
Создайте web-сайт, кратко раскрывающий тему курсовой работы по изучаемой дисциплине. Сайт должен содержать от 4 до 8 web-страниц (одна из которых является главной), фон, не менее 3 изображений и 2 таблиц.
Пригласите преподавателя для отчета о проделанной работе.