Урок 2.

 

Тема. Теги управления внешним видом WWW-документа. Фон веб страницы. Вставка  графики на  WWW-страницу.  Определение гиперссылок.

Цели урока:

- дать представление о Веб-редактор  » HTML Gate 5». Научить вставлять на страницу цветной однородный  фон, текст, граф изображений  с помощью тегов Font и  img src

- развития у учащихся интереса к созданию Веб- сайтов

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

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

 

.

Ход урока:

 

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

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

II.                 Проверка домашнего задания.

1. Что такое HTML?

2. Для чего я могу использовать HTML?

3. Как расшифровывается H-T-M-L?

4. Структура Web-страницы

5.Что такое HTML-тэги?

6. Атрибуты тегов

7.  В каких программах создавать сайт?

 

III.    Новая тема.    

(Параллельно выполняем практическую часть).

Постановка задачи. Создать небольшой сайт на тему «Картинная галерея».

1.                  Разработка дизайна Веб-страницы.

2.                  Загрузить редактор » HTML Gate 5».

3.                  Создание 1 страницы под руководством учителя.

 

·        При наличии различных разновидностей HTML вы должны сообщать браузеру, на каком "диалекте" HTML говорите вы, в нашем случае - HTML. Для этого используйте Document Type Definition/определение типа документа. DTD всегда записывается в самом начале документа:

Пример 1:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
           <html >
           <head>
           <title>Картинная галерея</title>
           </head>
           <body>
           </body>
           </html>
Сохранить этот файл в своей папке под именем «Index.htm».
·        Текст на странице. Тег «Font».
<FONT FACE="Arial" SIZE="2" COLOR="#800040">Картинная галерея</FONT>

Выравнивание текста по центру

Выравнивание текста по центру позволяют сделать тег <center> и <center>. При использовании этих тегов заголовки или текст не будут прижаты к левому краю, они равномерно заполнят область вывода текста. Чтобы выровнять текст по центру, просто вставьте теги <center> и </center> в начале и в конце нужного фрагмента:

<p align=center><FONT FACE="Arial" SIZE="2" COLOR="#800040">Картинная галерея</FONT>

 

 

Вы можете центрировать заголовки (как на примере), текст, абзацы и веб-графику.

Полужирный шрифт

Теги <b> и </b> позволяют отображать различные слова и фразы вашего документа полужирным шрифтом. Текст между этими тегами выглядит толще обычного текста, чем приятно выделяется. Чтобы разметить текст как полужирный, вставьте <b> и </b> в начале и в конце этого текста:

<p align=center><FONT FACE="Arial" SIZE="2" COLOR="#800040"><b>Картинная галерея</b></FONT>

 

Курсив

Теги <i> и </i> позволяют отображать различные слова и фразы вашего документа курсивным шрифтом. Чтобы разметить текст как курсивный, вставьте <i> и </i> в начале и в конце этого текста.

Фон страницы.

·        Цвет фона страницы?

Цвет фона определяется значением атрибута BGCOLOR - шестнадцатиричным числом вида #hhhhhh, где первая пара символов является значением насыщенности для красного цвета, вторая - для зеленого, и третья пара - для синего цвета. #00 - минимальная насыщенность, #FF - максимальная насыщенность цвета. Можно использовать текстовое определение цвета: BLUE, RED, FUCHSIA и т.п - одно из шестнадцати допустимых значений.

 

 

BLACK

#000000

 

 

GREEN

#008000

 

 

SILVER

#C0C0C0

 

 

LIME

#00FF00

 

 

GRAY

#808080

 

 

OLIVE

#808000

 

 

WHITE

#FFFFFF

 

 

YELLOW

#FFFF00

 

 

MAROON

#800000

 

 

NAVY

#000080

 

 

RED

#FF0000

 

 

BLUE

#0000FF

 

 

PURPLE

#800080

 

 

TEAL

#008080

 

 

FUCHSIA

#FF00FF

 

 

AQUA

#00FFFF

Например, чтобы сделать цвет фона страницы фиолетовым, можно написать

<BODY BGCOLOR="#FF00FF">, а можно и так:
<BODY BGCOLOR="PURPLE">.

Строго говоря, текстовых значений цвета значительно больше (SCARLET, VIOLET, BROWN и т.д. и т.п.), но не все браузеры их "знают". Применимы также значения LIGHTGREEN (светлозеленый), LIGHTYELLOW (светложелтый) и LIGHTBLUE (светлосиний).

 

Пример 3:

 
           <body style="background-color: red;"> или
           <BODY BGCOLOR="#800000">

 

·        Как оживить веб-страницу с помощью графики?

<img src="имя файла.gif">


·         Гиперсвязь страниц. Основные понятия.

Тэг гиперссылки: <a href=’адрес ссылки’>адрес перехода</a>.

         Например,   <a href=’page2.htm’>Далее</a>

 

Постановка задачи.

o      Создать на главной  странице 4 ссылки: 2 страница: 3 страница; 4 страница; 5 страница;

o      Создать еще 4 новых Веб-страницы ;

o      Имена файлов: 2.htm: 3.htm;4.htm;5.htm.

o      сохранить в той же папке, где сохранен файл  «Index.htm».

o      связать эти страницы с г.лавной, то есть «Index.htm».

§         <a href=”2.htm”>2 страница</a>. и т.д.

o     На каждой новой странице поместить текст ссылки «Назад»; с помощью этой ссылки связать каждую страницу с главной страницей.

§         <a href=”Index.htm”>Назад</a>. и т.д.

 

 

IV.      Самостоятельная работа.

Задание:

 

1.                  На каждой новой веб -странице изменить  фон;

2.                  вставить изображение картины;

3.                  вставить текст, соответственно тематике каждой страницы.

4.                  все сохранить;

5.                  Проверить, как работает;

6.                  показать учителю.

 

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

VI.  Дом. задание. Выучить теорию.

 

Hosted by uCoz