Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Инфоурок / Информатика / Конспекты / Практическое занятие на тему: «Создание простой Web-страницы» (10 класс)

Практическое занятие на тему: «Создание простой Web-страницы» (10 класс)



Внимание! Сегодня последний день приёма заявок на
Международный конкурс "Мириады открытий"
(конкурс сразу по 24 предметам за один оргвзнос)


  • Информатика

Документы в архиве:

Название документа Создание простой Web-страницы.docx

Поделитесь материалом с коллегами:











Практическое занятие на тему:

«Создание простой Web-страницы»
























Цели:

Образовательная:

  • приобрести начальные навыки создания простейших Internet-документов;

  • научиться выполнять форматирование созданных Web-страниц

Воспитательная:

  • воспитание информационной культуры учащихся, внимательности, аккуратности, дисциплинированности, усидчивости;

  • формировать элементы научного мировоззрения

Развивающая:

  • развивать наглядно-образное мышление, память и умение сравнивать и анализировать


Тип занятия: комбинированный

Технические средства: компьютеры IBM/PC

Программное обеспечение: операционная система WINDOWS 7/Vista,

программа Блокнот, Браузер Internet Explorer


Замечание. Для выполнения задания должна быть приготовлена папка КРЕМЛЬ с рабочим материалом, в который включить файлы:

  1. текстовый файл для веб-страницы.txt (создан в программе Блокнот)

  2. рисунок cvetok.jpg

  3. музыкальный файл mtv-1.mp3

  4. Краткая справка по тэгам Приложение 1

  5. Таблица цветов Приложение 2


План урока:
I. Орг. момент.
II. Актуализация знаний.
III. Выполнение лабораторно-практической работы по теме.
IV. Домашнее задание
V. Итог урока.


Ход урока:
I. Орг. момент.

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


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

Web - это средство представления информации в Интернете. Информация может быть представлена в виде текстов, рисунков, аудио и видеоклипов. В то же время, Web - это технология доступа к информационным ресурсам Интернета, размещенным на множестве Web-серверов. В целом, Web - это гипертекстовая информационная среда, использующая принятый язык разметки гипертекста и поддерживающая различные протоколы Интернета для доступа к его информационным ресурсам. Любой протокол - это набор правил, которые используются компьютерами для обмена информацией. Среди протоколов Интернета самый распространенный - HTTP (Hyper Text Transfer Protoсol). Используются FTP (для присоединения и загрузки файлов), FILE (для доступа к файлам на локальных дисках), протокол для электронной почты и некоторые другие.

Язык HTML (HyperText Markup Language, язык разметки гипертекста) — это язык, на котором создаются Web-страницы. HTML-документы могут просматриваться различными типами Web-браузеров. Когда документ создан с использованием HTML, Web-браузер может интерпретировать HTML для выделения различных элементов документа и первичной их обработки. Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей.

Web-страницы могут быть созданы с помощью

  1. обычного текстового редактора;

  2. редактора, способного сохранять в формате HTML;

  3. специализированного редактора;

  4. специализированной системы.


HTML-документы сохраняются на диске как обычные текстовые документы в формате ASCII. Для распознавания Web-страниц по их именам общепринято обозначать такие файлы использованием расширений .HTM (для Windows 3.1) или .HTML (для Windows 95/98/NT/XP, Macintosh и Unix).

Кроме полезного текста в HTML-документах используются специальные управляющие последовательности символов — тэги.

Чаще всего тэги используются попарно, окружая размеченные фрагменты текста. Такие тэги называются контейнерами. Закрывающийся тэг отличается от начального только присутствием символа "/" , добавляемого перед именем тэга. При интерпретации тэгов браузер не делает различия между строчными и прописными буквами. Поэтому сами тэги можно набирать на любом регистре. Зачастую параметр (атрибут) является необязательной величиной и его можно пропускать.


III. Выполнение лабораторно-практической работы.

1. Исходные файлы: находятся в папке Цветы

Перед выполнением задания скопируйте все файлы из папки ЦВЕТЫ в свою рабочую папку.

2. Загрузить программу Блокнот (ПУСК – Программы – Стандартные)

3. Открыть готовый текстовый файл «для веб-страницы.txt »


Замечание. На каждом шаге будете добавлять новый тэг – он выделен жирным шрифтом. Остальные тэги остаются без изменения.

4. В начале текста разместить тэг, указывающий, что данный документ является HTML-текстом (т.е. обязательный тэг для Web-страницы):

<html>

текст

html>

5. Создание заголовка Web-страницы:

<html>

<head>

<title>Любимые цветыtitle> (заголовок страницы)

head>

текст

html>

6. Сохраните документ в своей рабочей папке под именем indeх.htm для этого выполните команду Файл – Сохранить как

7. Открыть программу Internet Explorer (ПУСК – Программы). Работать будем автономно !

Открыть Web-страницу – команда Файл – Открыть; выбрать нужный файл и щелкнуть по кнопке «Обзор…»

Замечание. Будете продолжать редактирование файла index.htm, не закрывая Internet Explorer: для этого через панель задач переключиться на программу Блокнот, в которой открыт файл index.htm.

8. Определение тела документа:

для этого необходимо вставить тэги <body> … body>

Страница получит вид:

<html>

<head>

Любимые цветы

<body>

текст

body>

html>

Замечание. Сохранить редактируемый в Блокноте файл (Файл – Сохранить) и, переключившись через панель задач на Internet Explorer, выполнить в браузере команду Вид – Обновить (или щелкнуть по кнопке «Обновить»).

9. Разбить текст на несколько абзацев (сделаем 6 абзацев):

для этого имеется тэг
(его действие аналогично нажатию клавиши Enter в процессоре Word). Поставить тэг
перед словами:

  1. «Цветок представляет собой …»

  2. «Исключительная роль цветка …»

  3. «Цветок, будучи уникальным …»

  4. «Самые мелкие цветки …»

10. Оформить красную строку: для этого нужно вставить несколько символов пробела   (вставьте 4 пробела) – после каждого тэга
и перед началом всего текста - т.е.


    

11. Между абзацами вставить по одной пустой строки – для этого добавить еще один тэг

12. Выровнить абзацы по ширине: для этого перед текстом поставить тэг <p align="justify">, после текста – тэг p>

13.Вставить к тексту заголовок: для этого после <body> поставить тэг <h1>Цветыh1> и выровнять его по центру страницы – дополнить этот тэг, чтобы получилось<h1 align="center">Цветы h1>

Замечание. Изменяя цифру от 1 до 6, можно получить заголовки шести уровней. Попробуйте, не забывая при этом замечание п. 7.

14. Изменение фона страницы и цвета текста: для этого добавить в тэг <body>

bgcolorцвет фона; textцвет текста



Замечание. Код цвета фона и текста можно подобрать другие. Запись цвета - в формате RGB


Цвет

#RRGGBB (код)

Цвет

#RRGGBB (код)

Black— черный

#000000

Рurple — фиолетовый

#FF00FF

White — белый

#FFFFFF

Yellow — желтый

#FFFF00

Red— красный

#FF0000

Вrown — коричневый

#996633

Сreen — зеленый

#00FF00

Оrangе — оранжевый

#FF8000

Аzure — бирюзовый

#00FFFF

Violet— лиловый

#8000FF

Вlue — синий

#0000FF

Gray — серый

#А0А0А0

Более полный перечень цветов – см. файл Приложение 2.

Просматривайте Web-страницу после внесения изменений (не забывайте о замечании п.7)

15. Расположение текста на экране: редактируемая страница при просмотре в браузере имеет недостаток - слишком широкий текст, который неудобно читать. Чтобы «сузить» текст можно использовать для разметки страницу таблицу с невидимыми границами (атрибут bolder).


После тэга <body …>вставить тэги таблицы<table>, состоящей из одной строки <tr>и трех ячеек <td> в этой строке:

<table bolder=0>

<tr>

Числа 10%, 80%, 10% можно изменить, но их сумма должна быть равна 100%

<td width="80%">

.

Заголовок

Текст

td>

body>

16. Изменение начертания шрифта (т.е. выделение фрагментов текста): выделить слова «Цветок» (1-й абзац) – полужирным, 3-й абзац – курсивом. Для этого в тексте поставить тэги

Цветок и


Замечание. Способы выделения текста: - полужирный, -курсив, <U> - подчеркивание (парные тэги! Не забывайте ставить закрывающий тэг)


17. Изменение размера шрифта: текст


Замечание. Цифру можно изменять от 1 до 7: 7 – самый крупный шрифт, 1 – самый мелкий

Сделайте для 1-го абзаца шрифт 5, для 4-го абзаца – шрифт 4

Вставка рисунка: после тэга <h1 align="center">ЦВЕТЫ h1> вставить тэг

<p align="center "><img src="kreml.jpg ">p> (рисунок вставляем по центру сразу после заголовка)


Внимание ! Рисунок cvetok.jpg должен находиться в той же рабочей папке, куда сохранили свою Web-страницу. Формат рисунка должен быть jpeg.

Для этого скопируйте рисунок cvetok.jpg из папки Цветы в свою рабочую папку.


18. Сохраните изменения в Блокноте и просмотрите Web-страницу в браузере Internet Explorer.


19. Вставка «бегущей строки»: после заголовка

Цветы

вставить тэги

height=30 width=100%

hspase=5 vspase=5 align=middle

bgcolor=yellow

direction=left loop=infinite behavior=scroll

scrollamount=5 scrolldelay=100>

Запишите Вашу фамилию, имя


<marquee - открывающий тэг;

height= высота (в пикселях) и width= ширина (в пикселях или процентах) поля «бегущей строки»;

hspase= и vspase= интервалы (в пикселях) по горизонтали и вертикали между текстом и краями её поля;

align= расположение текста в поле «бегущей строки»: top – вверху, bottom – внизу, middle – посредине;

bgcolor= позволяет установить цвет фона;

direction= определяет направление движения «бегущей строки»: left – справа налево, right – слева направо

loop=infinite – «бегущая строка» присутствует все время, пока идёт просмотр страницы;

scrollamount= длина в пикселях, на которую текст перемещается за один такт;

scrolldelay= величина паузы между отдельными тактами перемещения текста (в долях се

кунды; 1000 – пауза в 1сек)

<font size="5">Запишите Вашу фамилию, имяfont> - размер шрифта текста

- закрывающий тэг


20. Вставка разделительных полос: тэг

перед вторым абзацем вставить тэг - толщина и длина полосы; noshade – чтобы полоса была темной

Убрать тэги

- две пустые строки перед вторым абзацем


21. Т.к. после вставки разделительной полосы нарушается выравнивание (все абзацы, кроме первого, будут выровнены по левому краю), то необходимо добавить после тэга тэг


22. Вставка фонового звука: после тэга вставить тэг

- музыка будет звучать до тех пор, пока файл изображается на экране. Звуковой файл mtv-1.mp3 должен находиться в Вашей рабочей папке (скопируйте его из папки Цветы)


Не забудьте сохранить задание.




IV. Домашнее задание

Записи в тетради.

V. Итог урока.

Подведение итога занятия. Просмотреть выполненные задания. Ответить на вопросы обучающихся.

Название документа Приложение 2.docx

Поделитесь материалом с коллегами:

Таблица цветов

Color's name

Red

Green

Blue

Color

alicemblue

F0

F8

FF

sample

antiquewhite

FA

EB

D7

sample

aqua

00

FF

FF

sample

aquamarine

7F

FF

D4

sample

azure

F0

FF

FF

sample

beige

F5

F5

DC

sample

bisque

FF

E4

C4

sample

black

00

00

00

sample

blanchedalmond

FF

EB

CD

sample

blue

00

00

FF

sample

blueviolet

8A

2B

E2

sample

brown

A5

2A

2A

sample

burlywood

DE

B8

87

sample

cadetblue

5F

9E

A0

sample

chartreuse

7F

FF

00

sample

chocolate

D2

69

1E

sample

coral

FF

7F

50

sample

cornflowerblue

64

95

ED

sample

cornsilk

FF

F8

DC

sample

crimson

DC

14

3C

sample

cyan

00

FF

FF

sample

darkblue

00

00

8B

sample

darkcyan

00

8B

8B

sample

darkgoldenrod

B8

86

0B

sample

darkgray

A9

A9

A9

sample

darkgreen

00

64

00

sample

darkkhaki

BD

B7

6B

sample

darkmagenta

8B

00

8b

sample

darkolivegreen

55

6B

2F

sample

darkorange

FF

8C

00

sample

darkochid

99

32

CC

sample

darkred

8B

00

00

sample

darksalmon

E9

96

7A

sample

darkseagreen

8F

BC

8F

sample

darkslateblue

48

3D

8B

sample

darkslategray

2F

4F

4F

sample

darkturquoise

00

CE

D1

sample

darkviolet

94

00

D3

sample

deeppink

FF

14

93

sample

deepskyblue

00

BF

FF

sample

dimgray

69

69

69

sample

dodgerblue

1E

90

FF

sample

firebrick

B2

22

22

sample

floralwhite

FF

FA

F0

sample

forestgreen

22

8B

22

sample

fushsia

FF

00

FF

sample

gainsboro

DC

DC

DC

sample

ghostwhite

F8

F8

FF

sample

gold

FF

D7

00

sample

goldenrod

DA

A5

20

sample

gray

80

80

80

sample

green

00

80

00

sample

greenyellow

AD

FF

2F

sample

honeydew

F0

FF

F0

sample

hotpink

FF

69

B4

sample

indiandred

CD

5C

5C

sample

indigo

4B

00

82

sample

ivory

FF

FF

F0

sample

khaki

F0

E6

8C

sample

lavender

E6

E6

FA

sample

lavenderblush

FF

F0

F5

sample

lawngreen

7C

FC

00

sample

lemonchiffon

FF

FA

CD

sample

ligtblue

AD

D8

E6

sample

lightcoral

F0

80

80

sample

lightcyan

E0

FF

FF

sample

lightgoldenrodyellow

FA

FA

D2

sample

lightgreen

90

EE

90

sample

lightgrey

D3

D3

D3

sample

lightpink

FF

B6

C1

sample

lightsalmon

FF

A0

7A

sample

lightseagreen

20

B2

AA

sample

lightscyblue

87

CE

FA

sample

lightslategray

77

88

99

sample

lightsteelblue

B0

C4

DE

sample

lightyellow

FF

FF

E0

sample

lime

00

FF

00

sample

limegreen

32

CD

32

sample

linen

FA

F0

E6

sample

magenta

FF

00

FF

sample

maroon

80

00

00

sample

mediumaquamarine

66

CD

AA

sample

mediumblue

00

00

CD

sample

mediumorchid

BA

55

D3

sample

mediumpurple

93

70

DB

sample

mediumseagreen

3C

B3

71

sample

mediumslateblue

7B

68

EE

sample

mediumspringgreen

00

FA

9A

sample

mediumturquoise

48

D1

CC

sample

medium violetred

C7

15

85

sample

midnightblue

19

19

70

sample

mintcream

F5

FF

FA

sample

mistyrose

FF

E4

E1

sample

moccasin

FF

E4

B5

sample

navajowhite

FF

DE

AD

sample

navy

00

00

80

sample

oldlace

FD

F5

E6

sample

olive

80

80

00

sample

olivedrab

6B

8E

23

sample

orange

FF

A5

00

sample

orengered

FF

45

00

sample

orchid

DA

70

D6

sample

palegoldenrod

EE

E8

AA

sample

palegreen

98

FB

98

sample

paleturquose

AF

EE

EE

sample

palevioletred

DB

70

93

sample

papayawhop

FF

EF

D5

sample

peachpuff

FF

DA

B9

sample

peru

CD

85

3F

sample

pink

FF

C0

CB

sample

plum

DD

A0

DD

sample

powderblue

B0

E0

E6

sample

purple

80

00

80

sample

red

FF

00

00

sample

rosybrown

BC

8F

8F

sample

royalblue

41

69

E1

sample

saddlebrown

8B

45

13

sample

salmon

FA

80

72

sample

sandybrown

F4

A4

60

sample

seagreen

2E

8B

57

sample

seashell

FF

F5

EE

sample

sienna

A0

52

2D

sample

silver

C0

C0

C0

sample

skyblue

87

CE

EB

sample

slateblue

6A

5A

CD

sample

slategray

70

80

80

sample

snow

FF

FA

FA

sample

springgreen

00

FF

7F

sample

steelblue

46

82

B4

sample

tan

D2

B4

8C

sample

teal

00

80

80

sample

thistle

D8

BF

D8

sample

tomato

FF

63

47

sample

turquose

40

E0

D0

sample

violet

EE

82

EE

sample

wheat

F5

DE

B3

sample

white

FF

FF

FF

sample

whitesmoke

F5

F5

F5

sample

yellow

FF

FF

00

sample

yellowgreen

9A

CD

32

sample


 




57 вебинаров для учителей на разные темы
ПЕРЕЙТИ к бесплатному просмотру
(заказ свидетельства о просмотре - только до 11 декабря)


Краткое описание документа:

Цели:

Образовательная:

-       приобрести начальные навыки создания простейших Internet-документов;

-       научиться выполнять форматирование созданных Web-страниц

Воспитательная:     

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

-       формировать элементы научного мировоззрения

Развивающая:    

-       развивать наглядно-образное мышление, память и умение сравнивать и анализировать

 

Тип занятия:                        комбинированный

Технические средства:        компьютеры IBM/PC

Программное обеспечение:         операционная система WINDOWS 7/Vista,

программа Блокнот, Браузер InternetExplorer

 

Замечание. Для выполнения задания должна быть приготовлена папка КРЕМЛЬ    с рабочим материалом, в который включить файлы:

1)    текстовый файл для веб-страницы.txt (создан в программе Блокнот)

2)    рисунокcvetok.jpg

3)    музыкальный файл mtv-1.mp3

4)    Краткая справка по тэгам  Приложение 1

5)    Таблица цветов Приложение 2

 

 

План урока:
I. Орг. момент.
II. Актуализация знаний.
III. Выполнение лабораторно-практической работы по теме.
IV. Домашнее задание
V. Итог урока.

Автор
Дата добавления 28.05.2015
Раздел Информатика
Подраздел Конспекты
Просмотров318
Номер материала 547740
Получить свидетельство о публикации

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