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

Скачать файл
Заказать решение

ВУЗ: Не указан

Категория: Не указан

Дисциплина: Не указана

Добавлен: 11.12.2023

Просмотров: 18

Скачиваний: 1

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.

Практическое занятие №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">Цветы h1>

Замечание. Изменяя цифру от 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

Вставка рисунка: после тэга

ЦВЕТЫ 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>

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


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. Итог урока.

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

Смотрите также файлы