7.4 Задание на лабораторную работу HTML.
advertisement
7.4 Задание на лабораторную работу Этап 1. Изучение основных конструкций языка HTML 1. Ознакомьтесь с теоретическим материалом и основными тегами языка HTML. 2. В своей папке создайте папку Site. Здесь будут размещаться все файлы проекта. 3. Запустите текстовый редактор Блокнот. Создайте типовую структуру HTML-документа: <НТМ1_> <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. Добавьте информацию об авторских правах. В конце страницы добавь те абзац, выровненный по центру, с текстом (размер уменьшите на один пункт): &copy; Ваши инициалы и фамилия 2005, All Rights Reserved Комбинация символов &copy; в языке 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.
