Изменение размера шрифта

Тема 2 практических занятий:
Язык HTML. Фреймы

 

Основы языка HTML и введение в CSS и JavaScript


  + -

Замечание 1: Все выполненные задания и вспомогательные файлы сохранять (если это не оговорено особо) в вашей Личной папке.

Замечание 2: После выполнения заданий удалить все ненужные файлы в вашей личной папке, закрыть все окна на рабочем столе и завершить работу с компьютером, если ваше занятие - последнее.

Замечание 3: Для того, чтобы открыть гиперссылку в отдельном окне, используйте правую кнопку мыши и выберите нужный пункт из контекстного меню.

Замечание 4: Обязательно следует удалять ВСЮ РЕКЛАМУ из скачанных вами файлов

Замечание 5: Если на сохраненной вами странице задания НЕ ВСЕ рисунки загружаются, то надо сохранить в вашей папке img те рисунки, на которые ЕСТЬ ссылка в файле, но сами рисунки не присутствуют. Рисунки можно взять либо из папки img на сайте, либо найти в сети INTERNET. Если рисунок и после этого не появится на той странице, которую вы правите, то проверьте правильность ссылки на него.

Замечание 6: Имена файлов должны быть ТОЧНО такими, как в задании. Если имена файлов явным образом не указаны, то можно использовать ваши имена, но с использованием только ЛАТИНСКИХ букв. Недопустимо использлвание в именах файлов РУССКИХ букв и ПРОБЕЛОВ. Файлы с именами, построенные НЕ ПО ПРАВИЛАМ проверяться не будут. Это же правила распространяется на пересылку заданий по e-mail. Имена папок и архивов с РУССКИМИ буквами и ПРОБЕЛАМИ не принимаются.

ВНИМАНИЕ! На этой странице находятся дополнительные справочные материалы по языку HTML и примеры фреймов.


Задания семинара 2

Подтема 1: Редактирование личной страницы

1. Откройте страницу Main.htm.

2. Перейдите в режим редактирования документа с помощью редактора программы Mozilla или другого редактора.

3. Исправьте данные Петрова на ваши. Добавьте при желании информацию о вас на страницу.

Подтема 2: Расстановка внутренних ссылок

Пояснение: Внутренними ссылками называются сылки на разные части текущего документа. Внутренние ссылки полезны, если материал страницы не помещается на одном экране. Для большого документа с помощью внутренних ссылок можно составить оглавление со ссылками на различные части (разделы или параграфы) документа.

1. Откройте страницу Url.htm для редактирования.

2. Посмотрите, как устроено оглавление к документу, начинаюшее с заголовка <H1 class="subitem">РЕСУРСЫ СЕТИ INTERNET</H1>. Например, ссылка на раздел Новости и Политика документа Url.htm осуществляется по ссылке <A href="#PolitServer">. В данном случае это ссылка на указатель PolitServer в документе. Для размещения указателя используется конструкция <A NAME=PolitServer> </A>. При этом параметр HREF не используется, а браузер не выделяет содержимое тэга <A>. Аналогичным образом устроена ссылка <A href="#Hosting"> на раздел Web хостинг страницы Url.htm.

3. Поставьте указатель к разделу Экономика & Либерализм. Имя указателя выберите самостоятельно, исходя из названия раздела. Следует отметить, что в указателях можно использовать только латинские буквы, цифры и знак подчеркивания _, при этом в записи указателей не должны использоваться пробелы. Такии образом, именем указателя к данному разделу могут служить такие, например, записи: Ekonomika, Ekonomika_Politika, E_P и т.п. Указатель следует поставить сразу после заголовка раздела ЭКОНОМИКА & Либерализм: < H2 class="subitem">ЭКОНОМИКА & Либерализм ...</em> так же как поставлен заголовок к разделу Новости и Политика.

4. Поставьте ссылку на указатель к разделу Экономика & Либерализм в оглавлении документа перед названием раздела после тэга <LI>.

5. Расставьте указатели и ссылки на указатели ко всем разделам докумекнта Url.htm. Проверьте, что все внутренние ссылки работают правильно.

6. Посмотрите как оформлены всплывающие подсказки к отдельным ссылкам страницы Url.htm. Например, подсказка Сервер Polit.Ru к ссылке на сервер Polit.Ru оформляется с помощю параментра title тега <A :
<A href="http://www.polit.ru" title="Сервер Polit.Ru"> .
Поставьте подходящие всплывающие подсказки ко ВСЕМ ссылкам на сайты, там где они отсутствуют, или вместо них стоят звездочки: *******. Вставленная вами подсказка НЕ ДОЛЖНА совпадать с адресом сайта, к которому эта подсказка относится.

7. Проверьте, что при наведении на ЛЮБУЮ ссылку на странице Url.htm появляется всплывающая подсказка.

Подтема 3: Вставка гиперссылок на другие страницы

1. Откройте страницу Menu.htm для редактирования.

2. Вставьте гиперссылку на страницу Main.htm. Найдите в файле Menu.htm текст Главная страница. Оформите гиперссылку с помощью тега <A>.
Слева от текста добавьте адрес файла Main.htm <A href="Main.htm">, а справа - завершающий тег </A>.

3. Вставьте гиперссылку на Ваше самое любимое место, то есть на сайт того города, места в городе, моря, реки, озера, горы, леса или поляны, которое вам нравится больше всего. Это может быть место как в России, так и в любой другой стране, например Гавайские острова, Южный берег Крыма, Река Нерль, Петропавловская крепость и т.д.. (http://www.spbmuseum.ru/peterpaul/ ...) к тексту Мое самое любимое место на странице Menu.htm. В данном случае следует использовать полный адрес сайта при оформлении гиперссылки:
<A href="http://адрес вашего любимого места">

4. Вставьте гиперссылку на файл URL.htm к тексту страница url.htm (без фреймов)" (см. пункт 2).

5. Посмотрите, как выглядит ваша страница в кодах HTML (в браузере Mozilla закладка <HTML> Source внизу страницы) и в окне Браузера.

Подтема 4. Настройка фоновых изображений

Основные цвета RGB цвета Фоновые рисунки

1. Поменяйте фон вашей личной страницы. Найдите внутри тега BODY параметр bgcolor=. Откройте таблицу основных цветов (ссылка Основные цвета рядом с названием подтемы). Выберите подходящий цвет фона и вставьте его название как значение параметра bgcolor= (вместо значения cornsilk). Сохраните изменения на странице и просмотрите изменения в браузере.

2. Поменяйте фон вашей страницы Links.htm. Найдите внутри тега BODY параметр bgcolor=. Откройте таблицу цветов в представлении RGB (ссылка RGB рядом с названием подтемы 3). Выберите подходящий цвет фона и вставьте его цифровое значение вместо значения #444400. Сохраните изменения на странице и просмотрите изменения в браузере.

3. Установите фоновый рисунок со звездным фоном на странице Logo.htm с помощью параметра background тега BODY. Список фоновых рисунков можно просмотреть с помощью ссылки Фоновые рисунки рядом с названием подтемы

4. Установите подходящий фоновый рисунок на странице Menu.htm (см. пункт 3 для справки).

5. Поставьте всплывающие подсказки ко ВСЕМ ссылкам страницы Menu.htm.

Подтема 5. Создание фреймов на основе готовых WEB-страниц.

1. Открыть страницу со фреймами в папке PrimerFrame и познакомиться с ее устройством.

2. Собрать фрейм с помощью файла Index1.htm. Вставить в файле Index1.htm в первую строчку, начинающуюся с тега   <frame name= "" ...    название (name) фрейма (Logo) и указать его источник (src):   Logo.htm.

3. Повторить эту операцию с оставшимися фреймами: links, main, menu   (links.htm, main.htm и menu.htm) и сохранить файл Index1.htm. Просмотреть, как выглядеть вся страница с фреймами Index1.htm.
Примечание: Во всех фреймах страницы Index1.htm должны находиться загружаемые вами страницы Logo.htm, Links.htm, Main.htm и Menu.htm.


Сайт управляется системой uCoz