cart-icon Товаров: 0 Сумма: 0 руб.
г. Нижний Тагил
ул. Карла Маркса, 44
8 (902) 500-55-04

Создание веб страницы практическая работа – Практическая работа «Создание Web страницы»

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

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

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

  • приобрести начальные навыки создания простейших 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 alignjustify«>, после текста – тэг p>

13.Вставить к тексту заголовок:

для этого после <body> поставить тэг <h1>Цветыh1> и выровнять его по центру страницы – дополнить этот тэг, чтобы получилось<h2 aligncenter«>Цветы h2>

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

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

<p aligncenter «><img srckreml.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. Итог урока.

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

infourok.ru

Сборник практических работ по созданию сайта с помощью языка «HTML»

Работа 1. Основные тэги HTML.

Создать Web-страницу, знакомящую с основными тэгами HTML.

Сохранить изменения в блокноте. Активизировать браузер с открытым в нем предыдущим вариантом страницы. Щелкнуть по кнопке Обновить. В процессе создания Web-страницы приходится добавлять новые тэги и просматривать получаемый результат.

Работа 2. Форматирование шрифта.

Внести в текст страницы тэги, определяющие начертание шрифта и горизонтальных разделительных линий. Отделить этот фрагмент от остального текста с помощью горизонтальных разделительных линий.

(в блокнот необходимо внести только то, что написано полужирным шрифтом в работе.)

Жирный
Курсив
Подчеркнутый
Жирный подчеркнутый курсив
Равноширинный

Работа 3. Цветовые схемы. Шрифты.

Атрибуты задания цветовой схемы (цвета фона, текста и гиперссылок). Цвет на Web-странице задают либо его названием, либо числовым шести разрядным шестнадцатеричным кодом #RRGGBB (первые два разряда задают интенсивность красного цвета, вторые – зеленого и третьи – синего). Значение яркости цвета может меняться от минимальной 00 до максимальной FF. В таблице приведены примеры некоторых цветов: 

Цвет

Код

Название

 

Цвет

Код

Название

черный

#000000

black

фиолетовый

#FF00FF

magenta

белый

#FFFFFF

white

бирюзовый

#00FFFF

cyan

красный

#FF0000

red

желтый

#FFFF00

yellow

зеленый

#00FF00

lime

золотой

#FFD800

gold

синий

#0000FF

blue

оранжевый

#FFA500

orange

серый

#808080

gray

коричневый

#A82828

brown

Основную цветовую схему Web-страницы можно задать в тэге <BODY> с помощью атрибутов:

  Цвет фона

BGCOLOR=»#RRGGBB»

Текстура фона

BACKGROUND=»file_name»

Цвет текста

TEXT=»#RRGGBB»

Цвет текста ссылки

LINK=»#RRGGBB»

Цвет текста активной ссылки

ALINK=»#RRGGBB»

Цвет текста просмотренной ссылки

VLINK=»#RRGGBB»

При использовании текстуры, закрывающей собой всю площадь страницы, применение однотонного фона кажется излишним. Однако рисунки загружаются несколько медленнее, чем текст. Все это время посетители страницы будут видеть цвет фона, заданный атрибутом BGCOLOR. Поэтому для фона указывают цвет, совпадающий с основным тоном фонового рисунка.

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

  1. Открыть файл первое_знакомство.htm через блокнот.

  2. Для оформления страницы можно использовать следующую цветовую схему:

(!!!)описание атрибутов цвета производится в открытом теге <BODY>(!!!)

  1. Сохранить файл и Обновить страничку (цвет текста и цвет фона должен поменяться).

  2. Закончить работу с файлом.

Работа 4. Вставка изображений.

Вставка изображений. Для размещения на Web-страницах используются графические файлы форматов GIF, JPEG и PNG. Изображения помещаются на Web-страницу тэгом IMG с атрибутом SRC, сообщающим браузеру имя и местоположение графического файла.

<IMG SRC=»image_name»>

Если рядом с изображением не должно быть текста, его размещают внутри отдельного абзаца. Выравнивание рисунка по горизонтали в этом случае задают в тэге <P>. Размеры изображения (в пикселах) можно задать с помощью атрибутов  WIDTH и HEIGHT. К изображению атрибутом ALT можно добавить название, которое появляется на экран или вместо иллюстрации (если по какой — либо причине графика не выводится в окне браузера), или в качестве всплывающий строки, при указании на рисунок мышью.

  1. Открыть файл первое_знакомство.htm в блокноте.

  2. Вставить в начале страницы картинку (после тега <BODY>) с помощью тега:

Атрибут ALIGN выравнивает по верхнему краю, середине или нижнему краю изображения, справа или слева от него с помощью значений: top, bottom, middle, left или right.  

  1. Форматирование текста. Для выделения фрагментов текста используется тэг <FONT>. Атрибут FACE определяет гарнитуру шрифта, атрибут COLOR – цвет и атрибут

SIZE — размер символов. Выравнивание текста по горизонтали задает атрибут ALIGN. Выравнивание можно добавлять к тэгам, задающим заголовки, абзацы, или размещающим информацию в таблице. Выровнять по центру заголовок страницы. HSPACE, VSPACE — горизонтальный и вертикальный отступы между картинкой и текстом. Введем заголовки различных уровней сразу после изображения.

А это — подзаголовок нашей странички.

Сохранить файл и Обновить страничку.

Выделим часть текста более крупным шрифтом и цветом и определим выравнивание

<P ALIGN=»left»><FONT SIZE=»6″ COLOR=»#FF0066″ FACE=»Arial» > Давайте, просто напечатаем простой текст для создания нашей странички, выровненный по левому краю.

<P ALIGN=»right»><FONT SIZE=»5″ COLOR=»#FF0000″ FACE=»Times New Roman» > Давайте, просто напечатаем простой текст для создания нашей странички, выровненный по правому краю.

<P ALIGN=»center»><FONT SIZE=»4″ COLOR=»#FF0011″ FACE=»Arial»> Давайте, просто напечатаем простой текст для создания нашей странички, выровненный по центру.FONT>P>

  1. Сохранить файл и Обновить страничку). Закончить работу с файлом.

блокнот

браузер

Работа 5. Оформление гиперссылок.

  1. Запустить текстовый редактор Блокнот командой [Пуск — Программы — Стандартные — Блокнот].

  2. Открыть файл первое_знакомство.htm

  3. Различные виды гиперссылок. Связать Web-страницу с другими документами можно с помощью универсального тэга <A>, и его атрибута HREF, указывающим в каком файле хранится вызываемый ресурс.

Указатель ссылки

file_name – путь к файлу или его URL-адрес в Интернете. Если вызываемый документ размещается в той же папке, что и Web-страница, то можно указывать только имя файла.

Указатель ссылки в окне браузера выделяется подчеркиванием и особым цветом. При указании на него мышью, ее курсор превращается в значок «рука». Щелчок мыши по указателю, вызывает переход на документ, указанный в гиперссылке. Используем различные значения атрибута HREF для реализации различных реакций браузера:

<A HREF=»вторая страница.htm«>Моя вторая страничкаA>

Сохранить файл и Обновить страничку

  1. А теперь с оформлением выравнивания и шрифтов Исправляем предыдущую запись.

<A HREF=»вторая страница.htm»><P ALIGN=»center»><FONT SIZE=»4″ COLOR=»#FFaa11″ FACE=»Arial»> Моя вторая страничкаFONT>P>A>

  1. Сохранить файл и Обновить страничку

  2. Создадим вторую страничку. Для этого откроем Блокнот еще раз. И наберем в нем следующий текст.

<TITLE>Моя вторая страницаTITLE>

Моя первая страничка, на ней я познакомился (лась) с основными тегами

  1. Сохраним файл под именем вторая_страница.htm

  2. Запустить первый файл первое_знакомство.htm. Запустим гиперссылку Моя вторая страница.

В качестве указателя ссылки можно использовать не только текст, но и изображение. В этом случае указатель ссылки задается с помощью тэга . Пусть в нашем проекте при щелчке мышью по маленькому рисунку, вызывается ее крупная фотография. Такой прием часто используют, для снижения времени загрузки страницы. Посетитель увидит уменьшенные копии рисунков, а при желании, сможет загрузить полномасштабное изображение. Дополним нашу страничку, введем текст в пустую строку в файл вторая_страница.htm

< A REL=»nofollow» target=»_blank» HREF=»http://infourok.ru/go.html?href=%3C%2FSPAN%3E%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B0%3CSPAN+%3E.jpg»>

  1. Сохранить файл и Обновить обе странички

Работа 6-8. Творческое задание.

Творческое задание. «Мой сайт». Создать Web-сайт, рассказывающий о Процессорах, Внешней памяти, Внутренней памяти, Свободная тема.

Сайт рекомендуется хранить в отдельной, специально созданной папке Сайт, вложенной в папку Ваша_фамилия. Здесь будут находиться как Web-страницы, так и графические файлы.

HTML код первой страницы.

Первое знакомство с тэгами HTML

фон.jpg» TEXT=»#993300″ LINK=»#00FF00″ ALINK=»#FF0000″ VLINK=»#00FF00″>

Моя вторая страничка

А это — подзаголовок нашей странички.

Выделим часть текста более крупным шрифтом и цветом и определим выравнивание

Давайте, просто напечатаем простой текст для создания нашей странички, выровненный по левому краю.

Давайте, просто напечатаем простой текст для создания нашей странички, выровненный по правому краю.

Давайте, просто напечатаем простой текст для создания нашей странички, выровненный по центру.

Заголовок второго уровня

Заголовок третьего уровня

Заголовок четвертого уровня
Заголовок пятого уровня
Заголовок шестого уровня

Жирный

Курсив

Подчеркнутый

Жирный подчеркнутый курсив

Равноширинный

Выделение

Усиленное выделение

Первый элемент списка

Второй элемент списка

Третий элемент списка

Первый элемент списка

Второй элемент списка

Третий элемент списка

ТЕРМИН 1

Пояснение к термину 1

ТЕРМИН 2

Пояснение к термину 2

ТЕРМИН 3

Пояснение к термину 3

HTML код второй страницы.

Моя вторая страница

Моя первая страничка, на ней я познакомился (лась) с основными тегами

infourok.ru

создание Web –сайта на языке HTML»

Я не знаю большей красоты, чем здоровье.
(Г. Гейне)

Практическая работа №5

Тема: «Интернет: создание Web –сайта на языке HTML»

Цель:

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

знакомство с элементами и структурой HTML документа;

освоение приемов создания Web-страницы на языке HTML;

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

закрепить технологические навыки работы с компьютером;

Развивающие

способствовать развитию познавательного интереса у учащихся;

способствовать развитию творческой активности учащихся;

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

Воспитательные

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

способствовать культурному и интеллектуальному развитию учащихся;

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

Оборудование: ПК, мультимедийных проектор, экран.

Программное обеспечение: операционная система Windows ХР, браузер Internet Explorer или Mozilla Firefox, стандартное приложение Блокнот, графические изображения.

Ход работы.

Организационный момент.

    Приветствие. Здравствуйте ребята! Сегодня у нас не обычный урок. Сегодня мы с вами будем учиться создавать продукт, который является основным элементом, или можно сказать структурным «атомом» сети Интернет. А именно – Web-странички и сайты.

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

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

      Грамотно разработанный сайт может стать хорошим методом распространения информации о предприятии.

      Так вот знания и навыки по созданию и раскрутке сайтов в ближайшем будущем будут наиболее востребованы в мире. А Интернет дает возможность распространять свою деятельность на всю нашу планету. А это означает, что где бы вы не находились, вы можете быть полезны и зарабатывать. Для этого вам нужен более-менее современный компьютер и Интернет.

      Содержательная часть.

        Теоретическая часть.

        Для проверки домашнего задания, я предлагаю вам пройти тест. Приложение 1

        По окончанию тестирования, предлагаю вам подвести итог и снять усталость. Дети встают, листочки с тестовыми заданиями лежат на столе. Учитель называет правильную букву ответа. Тот, кто ответил правильно, поднимает обе руки вверх и тянется к потолку, тот кто ответил не правильно разводит руки в стороны и делает повороты туловища вправо-влево. Сосед по парте, на листике с тестовым заданием, ставит «+», если ответ правильный, и «–», если ответ не верный. Подсчитывает количество баллов. Теперь предлагаю вам сесть за компьютеры и приступить к выполнению практического задания

        Практическая часть

        Инструктаж по ТБ

        Цель работы: освоение приемов создания Web-страниц и Web-сайтов на языке HTML: знакомство с элементами HTML и структурой HTML-документа; управление форматами текста и шрифтами; организация гиперсвязей между документами.

        Инструктаж по ТБ

        Создание WEB-страницы по предложенному материалу

          В папке Женева находится текстовый файл «Женева», в котором дается небольшая информация об этом городе и файл картинки «Женева», с изображением самого города.

          Создайте в Блокноте WEB-страницу, содержащую этот текст под названием ЖЕНЕВА

          Вставить картинку города, расположив ее посередине перед текстом .

            3. Выделите в тексте 3 абзаца:

            1-ый абзац – цвет шрифта — красный, размер шрифта = 5

            2-ой — цвет шрифта — синий, размер шрифта = 3

            3-ий – цвет шрифта — зеленый, размер шрифта = 4

            Предполагаемый результат.

            Физкультминутка

            Снятие зрительного напряжения.

            Снятие физического и умственного напряжения. Приложение 2

            б) Создание сайта

            В папке ГОРОСКОП дан WEB-сайт «ГОРОСКОП» для трех знаков зодиака, состоящий из 4-х WEB-страниц.

            Создать гиперссылки:

            А) с первой страницы сайта на другие страницы сайта

            Б) с каждой страницы сайта на главную.

            Предполагаемый результат.

            Заключительная часть.

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

              И в заключении хотелось бы добавить: здоровье нельзя улучшить, его можно только сберечь! Берегите себя!

              Оценить работу на уроке.

              Домашнее задание. Прочитать §29. Ответить на вопросы письменно стр. 163 (5,6)

              xn--j1ahfl.xn--p1ai

              Практическая работа №5 «Создание Web-сайта»

              Задание:

              1. Разработать сайт на тему «Мой город»

              2. Просмотреть сайт в web-браузере (Mozilla FireFox).

              Порядок выполнения:

              Сайт «Мой город» будет состоять из 2х страниц: Главной страницы (kungur.htm), на которой будет ссылка на страницу История Кунгура (history.htm)

              1. Откройте программу «Блокнот» (Пуск/ Все программы/ Стандартные/ Блокнот).

              1. В Блокноте наберите код главной страницы сайта «Мой город»:

              <html>

              <head>

              <title>

              Главная страница

              </title>

              </head>

              <body>

              <h2> Сайт города Кунгур</h2>

              <a href =»history.htm»> История кунгура </a> <br><br>

              </body>

              </html>

              1. Сохраните документ в свою папку в папке 9 класс на Рабочем столе под именем kungur.htm

              3 – вместо bogdan.htm – написать kungur.htm

              1. Создаем вторую страницу История Кунгура. Открыть программу Блокнот и набрать код страницы:

              <html>

              <head>

              <title>

              История

              </title>

              </head>

              <body>

              <h2> История Кунгура</h2>

              <h5>

              Кунгу́р—городвПермском крае, административный центрКунгурского района. Имеет статус городского округа. Расположен на юго-востоке края, в 80 км к юго-востоку от городаПерми. Официально основанный в1663 году, с1970 годаявляетсяисторическим городом России. Получил широкую известность благодаря уникальнойледяной пещере.

              Население — 68,1 тыс. человек (2008), территория — 68,7 км². Жителей города называют кунгуряками. Прежде использовалось другое название — кунгурцы

              </h5>

              </body>

              </html>

              1. Также сохраните документ в свою папку в папке 9 класс на Рабочем столе под именем history.htm

              1. Зайдите в свою папку, двойным щелчком откройте файл kungur.htm и нажмите на ссылку История Кунгура.

              Вместо сайт города Богдановича – у вас должно быть: сайт города Кунгура Вместо История Богдановича – у вас должно быть История Кунгура

              Работа считается выполненной после того, как вы приносите учителю информационный носитель, на котором хранятся два документа: kungur.htm и history.htm.

              Практическая работа №6 «Работа в программе-архиватор»

              Выполнив данную практическую работу, вы научитесь:

              Технология выполнения работы:

              1. Найдите файл или группу файлов, которые вы хотите заархивировать с защитой паролем.

              1. Обычно архиватор, установленный на компьютере, доступен через контекстное меню. Выделим найденные файлы и через контекстное меню вызовем архиватор WinRar.

              1. Зададим параметры архивирования. На вкладке Дополнительно зададим пароль. Можно выбрать опцию Показывать пароль при вводе

              1. Разархивируем файлы. Выполнить эту операцию можно двойным кликом по файлу архива, либо через контекстное меню — Извлечь файлы. При разархивации запаролированного архива от вас потребуются ввести пароль.

              Данная работа считается выполненной после показа учителю действий, которыми вы овладели на уроке.

              Итоговая контрольная работа №1

              Подготовка к контрольной работе (дома): вам нужно подготовить ответы на данные вопросы.

              Контрольная работа: время – 45 минут, включает тест (два варианта – по 15 вопросов в каждом (40 минут)) + практическое задание (5 минут) + сдача реферата (в электронном виде).

              1. Компьютерная сеть — это:

                1. Программа, для подключения компьютера в Internet;

                2. Несколько компьютеров, находящихся в одном помещении;

                3. Система компьютеров, связанных каналами передачи информации;

                4. Часть аппаратуры компьютера, обеспечивающая работу в сети.

              2. Сети по географическому признаку делятся на:

                1. Персональные;

                2. Глобальные;

                3. Локальные;

                4. Местные.

              3. Сеть, работающая в пределах одного помещения, называется:

                1. Локальная;

                2. Всемирная;

                3. Глобальная;

                4. Телекоммуникационная.

              4. Локальная сеть, в которой все компьютеры выполняют одинаковые функции, называется:

                1. Одноранговая;

                2. Многоранговая;

                3. Сеть с выделенным сервером;

                4. Персональная.

              5. Компьютер, который распределяет между многими пользователями общие ресурсы, называется:

                1. Провайдер;

                2. Рабочая станция;

                3. Терминал абонента;

                4. Сервер.

              6. Общими ресурсами в сети могут быть:

                1. Телефон;

                2. Программы;

                3. Принтер;

                4. Внешняя память.

              7. Выберите утверждения, касающиеся глобальной сети:

                1. Соединяется с другими сетями, образуют одну всемирную сеть;

                2. Объединение множества локальных сетей и отдельных компьютеров;

                3. Масштабы не ограничены;

                4. Все компьютеры выполняют одинаковые функции, нет преимущества ни у одного персонального компьютера.

              8. Технические средства, связывающие компьютеры в сетях, называются.

                1. Хост-машинами;

                2. Пропускной способностью;

                3. Скоростью передачи информации;

                4. Каналами связи.

              9. Каналами связи в глобальных сетях могут быть:

                1. Витая пара;

                2. Телефонные линии;

                3. Коаксиальный кабель;

                4. Оптико-волоконная линия.

              10. Какое количество информации можно передать по телефонной линии за 0,5 минут при скорости 800 бит/с?

                1. 400 байт;

                2. 3000 байт;

                3. 24000 байт;

                4. 400 бит.

              11. Модем – это:

                1. Высоко-производительный компьютер с большим объёмом памяти;

                2. Устройство для преобразования цифровой информации в аналоговую;

                3. Устройство для преобразования аналоговой информации в цифровую;

                4. Устройство для преобразования цифровой информации в аналоговую и обратно.

              12. Общий стандарт на представление и преобразование передаваемой информации по сети, название.

                1. Сервер-программа.

                2. Клиент-программа.

                3. Протокол.

                4. Интернет.

              13. Компьютерная сеть может предоставить пользователю услуги:

                1. Обмен электронными письмами.

                2. Распространение программного обеспечения.

                3. Обмен информацией на определённую тему.

                4. Базы данных со справочной информацией (поиск информации).

              14. Электронное письмо-это:

                1. Текстовый файл.

                2. Графический файл.

                3. Электронная таблица.

                4. База данных.

              15. Какие компоненты обязательно присутствуют в электронном адресе:

                1. Имя почтового сервера.

                2. Имя почтового ящика.

                3. Имя Web-сервера

                4. Страна

              16. Укажите неправильный электронный адрес:

                1. Ivanov.mail.ru

                2. [email protected]

                3. [email protected]

                4. [email protected]

              17. Укажите, какие аппаратные средства необходимы для подключения вашего персонального компьютера к сети через телефонную линию:

                1. Хост-машина.

                2. Принтер.

                3. Модем.

                4. Телефонная линия.

              18. Программное обеспечение, которое даёт возможность абоненту на своём компьютере принимать и отправлять письма, просматривать корреспонденцию, формировать текст письма, называется:

                1. Сервер-программа;

                2. Клиент-программа;

                3. Хост-машина;

                4. Всемирная паутина.

              19. Что такое World Wide Web:

                1. Всемирная информационная система с гиперсвязями, существующая на технической базе Internet;

                2. Программа, с помощью которой, осуществляется доступ в Internet;

                3. Система обмена информацией на определённую тему между абонентами сети;

                4. Компания, обеспечивающая доступ в Internet.

              20. Прикладная программа, для работы пользователя с WWW называется:

                1. Web-броузер;

                2. Web-страница;

                3. Web-сервер;

                4. Internet.

              21. Какой тип сервера используется для хранения файлов?

                1. FTP-сервер

                2. WWW-сервер

                3. HTTP-сервер

                4. HTML-сервер

              22. Электронный почтовый ящик пользователя E-mail создается на

                1. пользовательском компьютере, подключенном к глобальной сети

                2. почтовом сервере

                3. сервере локальной сети

                4. FTP-сервере

              23. Система обмена информацией на определённую тему между абонентами сети – это

                1. Электронная почта;

                2. Телеконференция;

                3. Чат;

                4. Веб- страница.

              24. Задан адрес электронной почты в сети Internet:[email protected]Каково имя владельца электронного адреса?

                1. Int.glasnet.ru;

                2. User_name;

                3. Glasnet.ru;

                4. Ru.

              25. Электронная почта позволяет передавать…

                1. только сообщения;

                2. только файлы;

                3. сообщения и приложенные файлы;

                4. видеоизображение.

              26. Для передачи информации в локальных сетях обычно используют

                1. телефонную сеть;

                2. волоконно — оптический кабель;

                3. спутниковую связь;

                4. кабель.

              27. Какой из способов подключения к Internetобеспечивает наибольшие возможности?

                1. Постоянное подключение по оптоволоконному каналу;

                2. Удалённый доступ по коммутируемому телефонному каналу;

                3. Постоянное соединение по выделенному телефонному каналу;

                4. Терминальное соединение по коммутируемому телефонному каналу.

              28. Служба FTPв Интернете предназначена:

                1. Для создания, приёма и передачи Web-страниц;

                2. Для удалённого управления техническими системами;

                3. Для приёма и передачи файлов любого формата;

                4. Для обеспечения работы телеконференций.

              29. Отличительной чертой Web-документа является :

                1. Наличие в нём гипертекстовых ссылок;

                2. Наличием в нём иллюстраций;

                3. Отсутствие строго определённого формата представления документа;

                4. Его компактность.

              30. Какое устройство является средством телекоммуникации?

                1. Сканер;

                2. Факс;

                3. Ксерокс;

                4. Принтер.

              studfiles.net

              11 класс. Создание web — страниц. Практическая работа №1

              Разработка Web-сайтов. Тема — Основные тэги HTML. 11 кл

              Задание № 1: Создать структуру Web-страницы.

              1. В своей папке создайте папку Создание Web-сайта.

              2. Запустите текстовый редактор Блокнот .

              3. Введите HTML-код, задающий структуру Web-страницы:

              (Ваша фамилия и имя)

              ДИНАМИЧЕСКОЕ ПРОГРАММИРОВАНИЕ

              5. Сохраните файл с именем Структура.

              6. Скопируйте созданный файл, переименуйте копию в index.html.

              Задание №2: Редактирование Web-страницы.

              1. Откройте файл index.html с помощью браузера.

              2. Для редактирования откройте этот же файл с помощью «Блокнот».

              3. Текст ДИНАМИЧЕСКОЕ ПРОГРАММИРОВАНИЕ поместите в контейнер<H1>…H1>. Сохраните файл Блокнота, обновите Web -страницу и выясните, что изменилось.

              4. После закрывающего тега H1> добавьте тег <HR>. Выясните, что изменилось.

              5. После <HR> добавьте следующий текст:
              Динамическое программирование – это способ решения сложных задач путём сведения их к более простым подзадачам того же типа. Такой подход впервые применил американский математик Р. Беллман. Его идея состояла в том, что оптимальная последовательность шагов оптимальна на любом участке. Например, в задачах поиска оптимального маршрута по графу или нахождению количества программ исполнителя. В информатике динамическое программирование часто сводится к тому, что мы храним в памяти решение задач меньшей размерности, что ускоряет выполнение программы, если использовать рекурсивную функцию.
              Для справки:
              Оптимальный
              наиболее приемлемый, самый благоприятный, наилучший для чего-либо.

              6. Сохраните текст в Блокноте, сверните его, обновите страницу браузера, просмотрите изменения.

              Задание № 3: Форматирование Web-страницы.

              1. Добавьте выделенные строки в текст Web-страницы.

              <FONT color=” maroon ”>

              ДИНАМИЧЕСКОЕ ПРОГРАММИРОВАНИЕ
              FONT>
              Просмотрите изменения.

              2. Добавьте выделенные строки в текст Web-страницы

              <P align=”left”>
              Динамическое программирование – это способ решения сложных задач путём сведения их к более простым подзадачам того же типа.
              P>
              Просмотрите изменения.
              3. Добавьте выделенные строки в текст Web-страницы.
              <P align=”justify”>
              Такой подход впервые применил американский математик Р. Беллман. Его идея … что ускоряет выполнение программы, если использовать рекурсивную функцию.

              P>
              Просмотрите изменения.

              4. Самостоятельно оформите текст примерно так, как в рамке ниже:

              5. Добавьте выделенные строки в текст Web-страницы
              bgcolor=»FFFFCC«>

              Просмотрите изменения.

              6. Найдите фото Р. Беллмана в интернете. сохраните в свою папку с Web-страницей.

              7. Добавьте выделенные строки в текст Web-страницы (вместо *** вставьте имя сохранённого изображения).


              Р. Беллман. ”>
              Просмотрите изменения.

              8. Закройте файлы, сохранив их. Ваша Web-страница готова к просмотру.

              Задание № 4.

              Исследуйте команду отображающую рисунок:
              <IMG src=”***.jpgwidth=”200” height=”150” border=”1” align=”rightalt=”КОМПЬЮТЕР”>
              Справа налево убирайте по одной команде и просматривайте результат.Например:
              а) <
              IMG src=”*.jpgwidth=”200” height=”150” border=”1” align=”right” >
              Сохраните, просмотрите и т. д.

              infourok.ru

              Набор практических работ для 11-х классов по WEB

              При отсутствии этого атрибута ширина таблицы определяется автоматически в зависимости от содержимого. Атрибут WIDTH можно использовать для установки фиксированной ширины в пикселах (например, WIDTH=212) или в процентах от пространства между левым и правым полем (например,).

              Используется для указания ширины внешней окантовки таблицы в пикселах (например, BORDER=4). Значение можно установить равным нулю, в результате чего окантовка не будет видна. В отсутствие этого атрибута окантовка также не должна показываться на экране. Обратите внимание: некоторые браузеры воспринимают метку

              точно так же, как BORDER=1.

              cellspacing

              В традиционном издательском программном обеспечении расположенные рядом ячейки таблицы имеют общую окантовку. В HTML это не так. Каждая ячейка имеет собственную окантовку. Ширина окантовки ячейки в пикселах устанавливается атрибутом CELLSPACING (например, CELLSPACING=10). Этот атрибут также устанавливает расстояние между окантовкой таблицы и окантовками крайних клеток таблицы.

              cellpadding

              Устанавливает расстояние между окантовкой ячейки таблицы и содержимым ячейки.

              Элемент CAPTION может иметь один атрибут ALIGN со значением ALIGN=TOP или ALIGN=BOTTOM. Соответственно, заголовок таблицы показывается либо над, либо под таблицей. Большинство браузеров по умолчанию показывают заголовок над таблицей. Открывающая и закрывающая метки обязательны. В заголовках тыблиц не разрешаются элементы уровня блока.

              Элемент TR открывает описание строки таблицы. Закрывающая метка не обязательна. Имеет два стрибута:

              align

              Устанавливает горизонтальное выравнивание в ячейках строки. Допустимые значения: LEFT, CENTER и RIGHT. Действие аналогично атрибуту ALIGN у абзацев.

              valign

              Устанавливает вертикальное выравнивание в ячейках строки. Допустимые значения: TOP, MIDDLE и BOTTOM; содержимое ячеек при этом выравнивается по верхнему краю, по центру или по нижнему краю.

              Существует два элемента, определяющих ячейки таблицы. TH используется для ячеек-заголовков, а TD — для ячеек с данными. Открывающие метки обязательны, закрывающие — нет. Ячейки могут иметь следующие атрибуты:

              nowrap

              Этот атрибут запрещает автоматический перевод текста со строки на строку внутри ячейки таблицы (например,

              Просмотр содержимого документа
              «практика №7»

              ). Эффект применения этого атрибута аналогичен использованию объекта   вместо пробела по всему содержимому ячейки.

              rowspan

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

              colspan

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

              align

              Указывает принятое по умолчению выравнивание содержимого ячейки. Имеет приоритет над значением, установленным атрибутом ALIGN строки таблицы. Допустимые значения те же самые: LEFT, CENTER и RIGHT. Если атрибут ALIGN не указан, принятое по умолчанию выравнивание — по левому краю для

              и по центру для , однако это можно изменить установкой атрибута ALIGN элемента TR.

              valign

              Указывает принятое по умолчению выравнивание содержимого ячейки. Имеет приоритет над значением, установленным атрибутом ALIGN строки таблицы. Допустимые значения те же самые: TOP, MIDDLE и BOTTOM. Если атрибут VALIGN не установлен, по умолчанию принято выравнивание по центру, однако это можно изменить установкой атрибута VALIGN элемента TR.

              width

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

              height

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

              Таблицы, как правило, показываются на экране «приподнятыми» над поверхностью страницы, а ячейки — «вдавленными» в тело таблицы. Ячейки выделяются окантовкой только если в них есть содержимое. Если содержимое ячейки состоит только из пробелов, ячейка считается пустой, за исключением случаев, когда в ней есть хотя бы один объект  .

               5

              Сохраните и откройте в браузере.

              Вывод

              Мы научились создавать таблицы.

              kopilkaurokov.ru

              Практическая работа на тему: «Создание сайта»

              Практическая работа на тему: «Средства создания и сопровождения сайта».

              Цель работы: научиться создавать и форматировать титульную Web- страницу.

              Задание 1. Создание титульной Web- страницы.

              1. Откройте окно текстового редактора Блокнот.

              Для этого выполните команду Пуск — Все программы — Стандартные — Блокнот.

              2. Ведите теги обозначения НТМL- документа: <НТМL> и НТМL>.

              Эти тэги предназначены для определения браузером формата документа и правильной его интерпретации.

              3. Введите заголовочную часть НТМL- документа: <HEAD> и < / НЕАD>.

              Заголовок содержит название документа и справочную информацию о странице (например, тип кодировки), которая используется браузером для ее правильного отображения.

              4. Введите заголовочную часть Web- страницы: <TITLE> и < / TITLE>.

              Заголовок Web- страницы отображается в строке заголовка браузера при просмотре страницы. Введите в заголовок Название вашего предприятия

              5. Ведите тэги для основного содержания: <ВОDУ> и < / ВОDУ>.

              Основное содержание страницы помещается между тeгами <ВОDУ> иВОDУ> и может включать в себя текст, таблицы, бегущие строки, ссыпки на графические изображения и звуковые файлы и так далее. Поместим для начала на страницу текст: «Все о … (введите название своего предприятия и краткую информацию по турфирме».

              6. Отделите заголовок от остального содержания страницы горизонтальной линией.

              Для этого введите одиночный тeг R> после текста о названии и адресе предприятия перед тeгом ВОDУ>

              7. Поместите на титульную страницу текст, кратко описывающий содержание вашего сайта, разбитый на абзацы.

              Для этого:

              • после тэга<НR> поместите парные тэги <Р> и Р>, производящие деление текста на абзацы,

              • между этими тэгами введите текст: «»МЕРИДИАН» сегодня – это современная универсальная туристическая компания, которая предлагает широкий спектр услуг для всех групп клиентов.

              • Мы отправляем на отдых из 50 городов РФ

              • Мы предлагаем отдых на лучших курортах и отелях (2500 отелей) в 22 странах мира

              • Мы работаем с ведущими авиакомпаниями России

              • Мы организуем групповые, индивидуальные, корпоративные, спортивные и VIP туры

              • Мы предлагаем 7 дней в неделю, 24 часа в сутки онлайн заказ туров и билетов на регулярные рейсы по всему миру

              • Мы оказываем качественное обслуживание в более чем 920 фирменных офисах продаж в 259 городах.»;

              8. Сохраните Web- страницу в виде файла.

              Для того:

              • в меню программы Блокнот выполните команду Файл=> Сохранить:

              • в диалоговом окне Сохранение файла выберите папку Мои документы:

              • в качестве имени файла установите имя index.htm

              • нажмите на кнопку Сохранить

              • закройте окно программы Блокнот.

              • войдите в свою рабочую папку и переместите файл index.htm в свою папку.

              1. Загрузите файл index.htm в окно браузера для просмотра.
                10. Изучите открывшийся документ. Найдите, где отображается текст, помещенный в различных тегах. Закройте файл.

              Задание 2. Форматирование титульной Web- страницы.

              1. Откройте файл в окне редактора Блокнот, выполнив команду контекстного меню Открыть с помощью => Блокнот;

              2. Измените размер шрифта.

              Размер шрифта меняют, помещая текст между тегов от <Н1> (самый крупный) до <Н6> (самый мелкий). Заголовок страницы целесообразно выделить самым крупным шрифтом, Для этого:

              • поместите заголовок между тэгами <Н1> и Н1>;

              • выполните команду Сохранить:

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

              • САМОСТОЯТЕЛЬНО установите размер шрифта для всех абзацев Web- страницы.

              3. Отформатируйте текст с помощью тега FONT.
              Для этого:

              • с помощью атрибута СОLOR покрасьте заголовок в синий цвет, то есть введите команду:

              • установите парный тег FONT > после тега Н1>.

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

              • САМОСТОЯТЕЛЬНО покрасьте текст абзацев в разные цвета.

              4. Задайте выравнивание абзацев.

              Для этого:

              • в поле тега <Н1> заголовка страницы введите команду <Н1 align = «сепtеr»>, что обозначает выравнивание по центру

              • в поле тега <Н> первого абзаца введите команду <Н align «1еft»>. что обозначает выравнивание по левому краю

              • в поле тeга <Н> второго абзаца введите команду <Н align = «right»>, что обозначает выравнивание по правому краю

              • третий абзац выровняйте на свое усмотрение

              • выполните команду Сохранить в редакторе Блокнот:

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

              infourok.ru

              Добавить комментарий

              Ваш адрес email не будет опубликован. Обязательные поля помечены *