Урок 3.

Тема.  Практическая работа «Создание WWW-документов, которые содержат теги форматирования символов, гиперссылки и графику».

Цели:

-Закрепить навыки в создании веб-страниц;

- воспитание у учащихся внимательности, аккуратности, дисциплинированности, усидчивости.

        - развитие познавательных интересов, навыков работы в сети Интернет и на компьютере.

 

Ход урока.

I. Орг. момент.

Приветствие, проверка присутствующих. Объяснение хода урока.

II.                Актуализация:

Основные понятия.

  1. WWW (World Wide Web) - всемирная сеть, Интернет.
  2. Web-браузер - программа запроса и просмотра Web - документов.
  3. Гиперссылка - ссылка, позволяющая быстро (скачком) переходить на другой Web-документ (Web-страницу) или в другую точку (абзац) этого же документа.
  4. HTML (Hyper Text Marked Language) - язык форматирования гипертекста.
  5. Tag - тэг, метка, оператор языка HTML. Например:
  6. <html></html> - тэги, открывающий и закрывающий код (HTML-текст) Web-страницы;
  7. <body></body>- пара тэгов, открывающая и закрывающая основную часть (тело) кода.

Атрибут - параметр, свойство тэга. Например:

<body bgcolor = yellow > , где bgcolor есть атрибут тэга body, определяющий цвет фона Web-страницы.

 

III.   Практическая работа.   

Разработка 2 Web - страницы.

1. Мотивация.

Выполните рекомендации, изложенные ниже, и вы создадите свою 2 Web-страницу. Этот документ можно разместить в Интернете и таким образом сразу же заявить о себе, объявить всему миру о своих помыслах и чаяниях (ведь Интернет - всемирная сеть). И найдутся друзья, готовые выслушать, откликнуться и составить компанию. Вот, к примеру, неплохая идея - летом махнуть в Крым к подножию горы Кара – Даг. Если так, то первым делом, сделаем заявку в Интернете о наших планах, поищем информацию о поселке Планерское, Биостации с дельфинарием (ведь в Интернете все есть), пригласим желающих, у кого есть, скажем, видеокамера, свяжемся по Интернету с ребятами из Феодосии т.д. Но все по порядку.

2. Постановка задачи(раздать карточки).

РАЗРАБОТАТЬ WEB-СТРАНИЦУ, ВЫБРАВ ОДНУ ИЗ ПРЕДЛОЖЕННЫХ ТЕМ. МОЖНО ОПРЕДЕЛИТЬ СВОЮ ТЕМУ.

ТЕМЫ ДЛЯ ИНДИВИДУАЛЬНЫХ WEB-СТРАНИЧЕК.

1. История школы.

2. Школа сегодня и завтра.

3. Школьные праздники.

4. Праздник труда.

5. Я и моя семья.

6. Увлечения.

7. Моя будующая профессия.

8. Мой класс.

Примечание: можно воспользоваться подсказками из презентации   » Web».

Рекомендуемый план разработки темы:

1. Образуйте на диске, в своей папке, новую папку под именем, напр., «My site».

2. Запустите Web - браузер (иконка Internet на рабочем столе Windows).

3. Войдите в редактор браузера. Смотрите меню (или рисунок): «Вид» - «В виде HTML» (или «Источник») – «Ввод» (Enter). Теперь перейдите в меню редактора: Файл - Создать -Ввод.

4. Наберите в окне редактора текст, который отразит пока только структуру Web - страницы:

<html>

<head><title> Ваша тема </title>

</head>

<body>

 

</body>

</html>

                                  

5.Набранный текст сохраните как page1.htm в предварительно образованной вами папке «My site».

Не забудьте установить тип файла как «Все файлы (*.*)».

6. Загрузите в Web - браузер файл page1.htm. Для этого откройте в меню браузера: Файл - Открыть - Обзор - найдите в своей папке файл page1.htm - Открыть - O.K. Убедитесь, что название Web-страницы (Ваш текст) отразилось в верхней статусной строке Web- браузера.

7. Откройте первоисточник Web-страницы (Вид - В виде HTML) и между тэгами <body> </body> наберите следующий текст:

 Введите текст, соответствующий вашей тематике.

.

8. Перейдите в меню Web - браузера. Щелкните по иконке Обновить. Убедитесь, что в окне браузера отразился весь набранный вами текст.

Задача в своем минимуме выполнена.

Теперь для полного решения поставленной задачи попытайтесь выполнить все упражнения.

 

УПРАЖНЕНИЯ.

Это не просто тренировка, а интересное расширение и углубление ваших знаний. Вы всегда можете воспользоваться справкой.

Попытайтесь выполнить все упражнения.

1.Отформатируйте текст с помощью тэга перехода на новую строку <br>, тэгов центровки текста <center> </center>, тэга разделительной линии <hr>. 

2. Измените цвет фона страницы , напр., на желтый(yellow) с помощью тэга

<body bgcolor= “yellow” > вместо тэга <body>. 

3. Измените тип, размер, цвет текста, используя тэги:

<font face =” “   size =    color =   ></font> Можно применить такие типы (face) шрифтов, как Decor, Arial, Times New Roman, Domkrat, ArtScript. Для заголовка примените тэги <h2></h2>. Размер шрифта (size) для основного текста возьмите, равным 3. Не забудьте проставлять закрывающий тэг </font>

4. Отразите на странице изображение, предварительно поместив графический файл в текущую папку (“My site. ”):<image src=”имя_графического_файла”> Файлы картинок подготовьте заранее. Файлы должны иметь расширение  *.gif   или *.jpg

5. Запрограммируйте изображение так, чтобы при наведении на него указателя мыши, появлялась бы подсказка (напр., “Вид с утеса на «Золотые ворота»).

Справка: в тэге Image используйте его атрибут alt=”текст”, отражающий соответствующий текст.

6. Измените код (HTML-текст) так, чтобы щелкнув по слову "Вниз", перейти в самый конец страницы. Для этого сделайте так, чтобы в начале страницы было бы слово “Вниз”. Затем в коде введите, после тэга <body>, необходимую гиперссылку, а перед закрывающим тэгом </body> присвойте атрибуту name (тэга <a>) значение, равное “Конец страницы”.

Справка:

< a href="#kонец страницы">Вниз</A> - гипертекстовая связь в Web-документе.

< a name="kонец страницы"></A> - определяет место перехода по гиперсвязи в этом же документе.

  1. Осуществите, по аналогии с предыдущим пунктом, гиперпереход с конца страницы в ее начало.

 

IV. Итог урока. Выставление оценок.

Hosted by uCoz