Студопедия
Случайная страница | ТОМ-1 | ТОМ-2 | ТОМ-3
АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатика
ИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханика
ОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторика
СоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансы
ХимияЧерчениеЭкологияЭкономикаЭлектроника

Этап 1. Изучение основных конструкций языка HTML

Читайте также:
  1. Cловарь основных понятий и терминов.
  2. F80.9 Расстройства развития речи и языка неуточненные
  3. I. ОПРЕДЕЛЕНИЕ НЕКОТОРЫХ ОСНОВНЫХ ТЕРМИНОВ И ПОНЯТИЙ
  4. III. 10.1. Понятие о восприятии и характеристика основных его особенностей
  5. III. 13.1. Понятие о воображении, его основных видах и процессах
  6. III. Изучение нового материала
  7. III. Изучение нового материала

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. Добавьте заголовком первого уровня фразу:

Добро пожаловать на страничку, посвященную странам Европы! Сохраните файл. Вернитесь в браузер и выполните команду Обновить. Оцените полученный результат.


8. Вернитесь к Блокноту. Создайте новый абзац. Задайте выравнивание
текста абзаца по ширине. В качестве текста абзаца введите следующее:

Здравствуйте, уважаемые путешественницы и путешественники! Если ваше собст­венное желание или судьба манят вас в дорогу - в новые страны, в экзотические места, в необычные путешествия, - загляните прежде на наш сайт. Загляните как в будущее, чтобы заранее узнать: что Вас ожидает за ближайшим поворотом, что Вам понадобится в дороге и о чем не вредно позаботиться заранее. Мы предлагаем Вашему вниманию полную, объективную и достоверную информацию о разных уголках Земли, о странах и путешествиях.

Слова «полную, объективную и достоверную» оформите курсивом.

Сохраните страницу, оцените полученный эффект. Далее без дополнитель­ного напоминания просматривайте страницу по мере необходимости.

9. Добавьте к документу следующий абзац (настройки соответствуют
предыдущему абзацу):

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

Слова «Рассказ о станах Европы» оформите курсивом.

10. Добавьте третий абзац:

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

Слова «в стадии разработки» оформите полужирным начертанием.

11. Текст следующего абзаца расположите по центру и увеличьте размер
шрифта на один пункт. В качестве текста укажите:

Заходите на нашу страничку почаще!

12. Поставьте в качестве разделителя горизонтальную линию (толщина - 1
пиксель, ширина - 80% рабочего поля, цвет - черный). После тега горизонталь­
ной линии вставьте разрыв строки.


13. Добавьте информацию об авторских правах. В конце страницы добавь­
те абзац, выровненный по центру, с текстом (размер уменьшите на один пункт):

&copy; Ваши инициалы и фамилия 2005, All Rights Reserved

Комбинация символов &copy; в языке HTML означает отображение знака ©.

14. Отцентрируйте заголовок «Добро пожаловать на страничку, посвящен­
ную странам Европы».

15. Первый вариант начальной страницы сайта должен выглядеть пример­
но так, как представлено на рисунке 7.1.

Рисунок 7.1 - Примерный вид страницы после выполнения первого этапа

Этап 2. Установка свойств текста, использование списков, организа­ция гиперссылок

Сначала необходимо внести изменения в созданную ранее web-страницу. Откройте файл index.html в текстовом редакторе Блокнот.

1. Измените цвет фона ("#FCEAD4") и не посещенных гиперссылок
("#014CA1") для всей страницы.

2. Измените гарнитуру шрифта в текстовых абзацах на Verdana. Установи­
те для них высоту символов шрифта - 2 пункта.


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. В первом абзаце
укажите следующее: На этой странице вы можете ознакомиться со следующими под­
разделами:. Далее, создав новый абзац, перечислите подразделы документа, рас-


сказывающего о данной стране (все названия подразделов должны быть разме­щены в одном абзаце):

Географическое положение

Национальные особенности

Крупные города

10. Создайте абзац, содержащий первый подраздел документа. В качестве текста укажите следующее:

Италия - государство на юге Европы в центральной части Средиземноморья. Бе­рега Италии омываются морями: на Западе - Лигурийским и Тирренским, на Юге - Ио­ническим, на Востоке - Адриатическим. Около 20% границ - сухопутные, проходят пре­имущественно по различным частям Альп. На Севере граничит с Францией, Швейцари­ей, Австрией, на Северо-Востоке - с Югославией. Территория Италии охватывает юж­ные склоны Альп, Паданскую равнину, Апеннинский полуостров, острова Сицилию и Сардинию и многочисленные мелкие острова.

Перед абзацем добавьте текст Географическое положение и оформите его по­лужирным форматированием.

13. Создайте следующий абзац. В качестве текста укажите:

Этому причудливому ботфорту Европы есть чем похвастаться: религиозными и культурными деятелями, кукурузной кашей-полентой, знаменитыми памятниками архи­тектуры и своим политическим ребячеством. Его трехтысячелетняя история, культура и кухня могут покорить едва ли не каждого. В Италии можно посетить римские развалины, увидеть искусство ренессанса, побывать в крошечных средневековых городках на хол­мах, покататься на лыжах в Альпах, исследовать каналы Венеции и увидеть церкви, прекраснее которых трудно себе представить. Конечно, можно также насладиться и бо­лее простыми вещами: хорошей едой, вином, походами по магазинам и огромным выбо­ром развлечений.

Перед абзацем аналогично предыдущему пункту добавьте подзаголовок Национальные особенности.

14. Создайте следующий абзац. В качестве текста введите:
Рим


Милан Неаполь Флоренция

Перед абзацем добавьте подзаголовок Крупные города.

Оформите абзац в виде маркированного списка (настройки шрифта анало­гично всем текстовым абзацам).

15. Организуйте гиперссылки с перечня подразделов на соответствующие
части документа.

16. Просмотрите страницы проекта в браузере, проверьте корректность ра­
боты гиперссылок.


Дата добавления: 2015-07-26; просмотров: 91 | Нарушение авторских прав


<== предыдущая страница | следующая страница ==>
Гиперссылки в HTML-документах| От редактора.

mybiblioteka.su - 2015-2024 год. (0.009 сек.)