Создание простой Web-страницы. Занятие 16 Создание простой Webстраницы Цели приобрести начальные навыки создания простейших Internetдокументов

• Название: Занятие 16 Создание простой Webстраницы Цели приобрести начальные навыки создания простейших Internetдокументов
• Анкор: Создание простой Web-страницы
• Дата: 27.04.2023
• Размер: 37.08 Kb.
• Имя файла: Создание простой Web-страницы.docx
• Тип: Занятие; #1093734

Практическое занятие №16

«Создание простой 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-страницы:



<head>

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

head>

…

текст

…



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

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

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

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

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

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

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





<body>

…

текст

…

body>



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

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

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

1. 
   «Цветок представляет собой …»
   
2. 
   «Исключительная роль цветка …»
   
3. 
   «Цветок, будучи уникальным …»
   
4. 
   «Самые мелкие цветки …»
   

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


    

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


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

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

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

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


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).
После тэга вставить тэги таблицы, состоящей из одной строки и трех ячеек

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

<tdwidth="80%">

….

Заголовок

Текст

…

td>

в этой строке: <table bolder=0> <tr>

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

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

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

Вставка рисунка: после тэга ЦВЕТЫ вставить тэг

<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>

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



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

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

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

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

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

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

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

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

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

Запишите Вашу фамилию, имя - размер шрифта текста

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

---

перед вторым абзацем вставить тэг

---

- толщина и длина полосы; noshade – чтобы полоса была темной

Убрать тэги

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

---

тэг

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

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

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

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