Kievuz
Разное

Практическая работа №11 Тема: Создание Web-сайта в программе

Урок-практикум по теме «создание сайта»

Практическая работа №11 Тема: Создание Web-сайта в программе

Подобный материал:

  • Урок по теме «Создание Web сайта», 81.99kb.
  • Пояснительная записка Урок-практикум по теме «Значение генетики для медицины. Наследственные, 106.4kb.
  • Fce star, 46.34kb.
  • Урок в 10 классе по теме: «Создание Web-сайта с помощью текстового процессора ms word», 54.7kb.
  • Техническое задание на разработку туристического сайта сайта, 140.48kb.
  • Урок-практикум, 228.53kb.
  • Название доклада, 56.02kb.
  • Данная статья посвящена теме того, как правильно спланировать техническую концепцию, 219.36kb.
  • Коммерческое предложение на создание и продвижение web-сайта, 46.91kb.
  • Урок-практикум в 9 классе (русский язык) Тема урока: «со спп на ты!», 111.51kb.

УРОК-ПРАКТИКУМ ПО ТЕМЕ «СОЗДАНИЕ САЙТА»

11 КЛАСС ( 2 УРОКА)

ЦЕЛИ И ЗАДАЧИ УРОКА:

  • Освоить основные этапы построения веб-ресурса
  • Освоить основные методы создания веб-ресурса
  • Иметь представление об особенностях оформления информационных блоков страницы
  • Освоить требования к созданию веб-страниц
  • Познакомиться с инструментальными средствами создания сайтов
  • Научиться создавать HTML – файлы
  • Оформлять заголовки
  • Размещать гиперссылки и графику на веб-страницах

ХОД УРОКА

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

2. Актуализация знаний. Постановка целей урока.

Мы продолжаем изучать тему «Основы языка гипертекстовой разметки документов». И сегодня мы закрепим знания по гипертекстовой структуре созданием сайта. Давайте повторим материал, который мы прошли на прошлом уроке.

  1. На доске записать основные тэги HTML – стандарта
  2. Рассказать , что представляют собой веб-страница и веб-сайт.

Фронтальный опрос : На прошлом уроке мы рассматривали различные сайты и обсуждали их технические характеристики. Скажите:

  1. Что такое веб-дизайн?
  2. Что мы понимает под понятием «юзабилити»?
  3. Перечислите «золотые правила» оформления сайта.
  4. С помощью каких приемов автор сайта старается повысить юзабилити? ( на примере представленного сайта)
  5. По мнению дизайнеров, особое внимание при создании сайта следует уделять первой (главной) странице. Почему?

3. Изучение нового материала

1. Разработка сайта «Компьютер».

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

страница содержит: (Показ слайдов)

Заголовок – Давайте знакомиться – компьютер

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

Иллюстрацию : рисунок компьютера

Навигационную панель : Гиперссылки на 3 другие страницы

Вторая страница: (Показ слайдов)

Заголовок – Программное обеспечение

Поясняющий текст : Информацию об основных типах ПО в форме вложенного списка

Иллюстрацию : рисунок дискет

Навигационную панель : Гиперссылки на 3 другие страницы

2.Инструментальные средства создания сайтов

Для создания сайта используются специальные инструментальные средства позволяющие создавать страницы имея минимальные знания по основам программирования. В качестве самого удобного и распространенного инструментального средства следует отметить Microsoft Front Page , который входит в состав Microsoft office. (Показать на слайде). Также для создания сайта используют привычный и удобный текстовый редактор БЛОКНОТ.

3.Практическая работа

Цель работы: Научиться

  • создавать, просматривать и редактировать HTML-документы;
  • оформлять заголовки;
  • управлять размером шрифта;
  • выделять и выравнивать абзацы;
  • размещать графику на web-странице.
  • Оформлять гиперссылки

ХОД РАБОТЫ 1. Создайте папку site (Файл-Создать-Папку). 2. Откройте текстовый редактор Блокнот (Пуск-Программы-Стандартные-Блокнот). 3. Наберите следующий HTML-код:

Давайте знакомиться – компьютер

4. Сохраните под именем index.htm в папке site. 5. Закройте текстовый редактор Блокнот. 6. Откройте папку site. В ней находится файл web-страницы, который открывается и распознаётся браузером Internet Explorer: 7. Откройте двойным щелчком файл index.htm для просмотра в браузере. Проанализируйте полученный результат. 8. Оформим фразу “Давайте знакомиться – компьютер” как заголовок. Для этого откроем HTML-код нашей страницы: 9. Зададим выравнивание заголовка “по центру”:

10. Добавим на страницу основной текст: «Страницы этого сайта позволят Вам больше узнать о компьютере, его программном и аппаратном обеспечении. Терминологический словарь познакомит Вас с компьютерными терминами.Вы получите информацию о ценах на компьютерные комплектующие»

11. Добавим на нашу страницу картинку. 12.Вставим гиперссылки и посмотрим на полученную страницу 1 СТРАНИЦА САЙТА

Давайте знакомиться – компьютер

Страницы этого сайта позволят Вам больше узнать о компьютере, его программном и аппаратном обеспечении. Терминологический словарь познакомит Вас с компьютерными терминами. Вы получите информацию о ценах на компьютерные комплектующие. ПРОГРАММЫ             СЛОВАРЬ             КОМПЛЕКТУЮЩИЕ

13. Откройте текстовый редактор Блокнот . 14. Наберите следующий HTML-код:15. Сохраните под именем index1.htm в папке site. 16. Закройте текстовый редактор Блокнот. 17. Откройте папку site. В ней находится файл web-страницы, который открывается и распознаётся браузером Internet Explorer: 18. Откройте двойным щелчком файл index1.htm для просмотра в браузере. Проанализируйте полученный результат. 19. Оформим фразу “Программное обеспечение” как заголовок. Для этого откроем HTML-код нашей страницы: 20. Зададим выравнивание заголовка “по центру”: 21. Создадим главный нумерованный список основных категорий ПО 22. Добавим вложенный список. 23. Добавим на нашу страницу картинку. 24.Вставим гиперссылки и посмотрим на полученную страницу2 СТРАНИЦА САЙТА

ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ

  1. СИСТЕМНЫЕ ПРОГРАММЫ
  2. ПРИКЛАДНЫЕ ПРОГРАММЫ
    • ТЕКСТОВЫЙ РЕДАКТОР
    • ГРАФИЧЕСКИЙ РЕДАКТОР
    • ЭЛЕКТРОННАЯ ТАБЛИЦА
    • СУБД
  3. СИСТЕМЫ ПРОГРАММИРОВАНИЯ

ГЛАВНАЯ             СЛОВАРЬ             КОМПЛЕКТУЮЩИЕ

4.Подведение итогов.

5.Домашнее задание : п.13.2-13.5, самостоятельно разработать 2 страницы сайта.

Самоанализ урока:

1.Раздел программы: Коммуникационные технологии. Подраздел: Основы языка гипертекстовой разметки документов

2.Тема урока: Создание сайта

3.Цели урока:

Обучающая : Осмысление и усвоение алгоритмического подхода к построению собственной деятельности по созданию Web-сайта.Иметь представление об особенностях оформления информационных блоков страницы.Освоить требования к созданию веб-страниц. Познакомиться с инструментальными средствами создания сайтов.Научиться создавать HTML – файлы.

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

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

4.Тип урока: комбинированный

5.Вид урока: компьютерный практикум .

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

  • Словесные
  • Наглядные
  • Практические

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

6. Место урока в плане: Данный урок является предпоследним в данном разделе. На прошлом уроке были рассмотрены основные тэги языка гипертекстовой разметки, обсуждались технические характеристики сайтов и дизайн сайтов.

7.Этапы урока:

Урок содержит несколько этапов. 1 этап. Проверка домашнего задания : фронтальный и индивидуальный опрос были направлены на подготовку учащихся к практическому выполнению работы по созданию сайта. 2 этап.Усвоение новых знаний и способов действий. Лекция с элементами беседы. 3 этап.Закрепление знаний. Практическая работа.Это главный этап урока. На этом этапе учащиеся самостоятельно применяли полученные знания в процессе практической деятельности. В процессе выполнения практической работы осуществлялась корректировка знаний, умений учащихся. По окончанию практической работы проводилось тестированием двух страниц сайта и выявление ошибок учащихся при его составлении.Были соблюдены дидактические принципы от простого к сложному, от известного к неизвестному , от легкого к трудному. 4 этап. Инструктаж по выполнению домашнего задания. 5 этап. Подведение итогов занятия.Выставление оценок.

8.Время на уроке использовалось таким образом. Чтобы основная часть времени была выделена на выполнение практической работы и подведению итогов.

9.В классе обучается 5 человек. Из них на «4» и «5» занимаются 3 человека. Особенно сильных и увлекающихся информатикой учащихся нет. Два слабых ученика, которые в полной мере не справляются с программой варианта Б.

10.На уроке была создана деловая атмосфера, способствующая разрешению целей и задач урока.

11.ВЫВОД:

Считаю, что обучение на уроке наглядное, доступное, систематическое и последовательное, развивающее, познавательное и проблемное, что позволило развить у учащихся внимание, воображение, мышление, память. Учащиеся освоили алгоритмический подход к построению сайта. Научились оформлять блоки страницы Усвоили требования к созданию веб-страниц. Познакомились с инструментальными средствами создания сайтов. Научились создавать HTML – файлы. Знания полученные на этих уроках позволят учащимся 11 класса создать веб-страницы к школьному сайту www.kam2005.boom.ru

Раздаточный материал

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

Цель работы: Научиться

  • создавать, просматривать и редактировать HTML-документы;
  • оформлять заголовки;
  • управлять размером шрифта;
  • выделять и выравнивать абзацы;
  • размещать графику на web-странице.
  • Оформлять гиперссылки

ХОД РАБОТЫ 1. Создайте папку site . 2. Откройте текстовый редактор Блокнот. 3. Наберите следующий HTML-код:

Давайте знакомиться – компьютер

4. Сохраните под именем index.htm в папке site. 5. Закройте текстовый редактор Блокнот. 6. Откройте папку site. В ней находится файл web-страницы, который открывается и распознаётся браузером Internet Explorer: 7. Откройте файл index.htm для просмотра в браузере. Проанализируйте полученный результат. 8. Оформим фразу “Давайте знакомиться – компьютер” как заголовок. Для этого откроем HTML-код нашей страницы: 9. Зададим выравнивание заголовка “по центру”:

10. Добавим на страницу основной текст: «Страницы этого сайта позволят Вам больше узнать о компьютере, его программном и аппаратном обеспечении. Терминологический словарь познакомит Вас с компьютерными терминами.Вы получите информацию о ценах на компьютерные комплектующие»

11. Добавим на нашу страницу картинку. 12.Вставим гиперссылки и посмотрим на полученную страницу 13. Откройте текстовый редактор Блокнот . 14. Наберите следующий HTML-код:15. Сохраните под именем index1.htm в папке site. 16. Закройте текстовый редактор Блокнот. 17. Откройте папку site. В ней находится файл web-страницы, который открывается и распознаётся браузером Internet Explorer: 18. Откройте двойным щелчком файл index1.htm для просмотра в браузере. Проанализируйте полученный результат. 19. Оформим фразу “Программное обеспечение” как заголовок. Для этого откроем HTML-код нашей страницы: 20. Зададим выравнивание заголовка “по центру”: 21. Создадим главный нумерованный список основных категорий ПО 22. Добавим вложенный список. 23. Добавим на нашу страницу картинку. 24.Вставим гиперссылки и посмотрим на полученную страницу. 25.Закрыть все окна и проверить работу двух созданных страниц

Источник: http://geum.ru/next/art-12828.php

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

Практическая работа №11 Тема: Создание Web-сайта в программе

Задание:

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

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

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

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

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

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

Сайт города Кунгур

Практическая работа №11 Тема: Создание Web-сайта в программе

Историякунгура

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

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

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

История Кунгура

Практическая работа №11 Тема: Создание Web-сайта в программе

  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. Ktv@pgu.ru

    3. Miller@frend.de

    4. Sveta_petrova@rest.com

  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:user_name@int.glasnet.ruКаково имя владельца электронного адреса?

    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. Принтер.

Источник: https://StudFiles.net/preview/2957039/page:3/

Босов Андрей Витальевич – Практическая работа

Практическая работа №11 Тема: Создание Web-сайта в программе

1. Общие сведения о Web-сайтах и языке HTML

Публикации во Всемирной паутине (World Wide Web)реализуются в форме Web-сайтов. Web-сайт по своей структуре напоминает журнал, который содержит информацию, посвящённую какой-либо теме или проблеме.

Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц, объединённых гиперссылками. Web-страницы могут содержать текст, рисунки, таблицы, мультимедийные и динамические объекты.

Создание Web-сайтов можно осуществлять с помощью языка HTML.

HTML – Hyper Text Markup Language – язык разметки гипертекста. HTML ни в коей мере не является языком программирования, он отвечает только за расположение элементов (текста, рисунков) в окне браузера.

HTML является языком для создания Web-сайтов во Всемирной паутине. Язык HTML состоит из простых команд – тегов. Теги управляют представлением информации на экране при отображении HTML-документа.

Теги заключаются в угловые скобки … и бывают парные и непарные (одиночные ).

Теги HTML

Документ HTML – это текстовый файл с расширением .html или .htm, содержащий набор тегов.

Браузер – (browser) – программа для просмотра Web-страниц. Широко используют браузеры Microsoft Internet Explorer, Opera и др. Браузер при получении документа HTML выполняет его анализ, строит объектную модель документа, затем результат отображает на мониторе.

2. Структура HTML-документа

Тело документаСодержит непосредственно информацию страницы: тексты, рисунки, таблицы

3. Форматирование символов

Символы, заключенные между следующими тегами отображают:

…. – полужирный шрифт…… – курсивный шрифт…… – подчеркнутый шрифт … – нижний индекс… – верхний индекс

Параметры шрифта

Текст, заключенный между тегами  …….. имеет заданный размер, цвет и гарнитуру. Для этого используются атрибуты: SIZE = значение от 1 до 7 и COLOR = цвет (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow, white), каждому цвету соответствует свой шестнадцатеричный код от 000000 до FFFFFF.

Если в тексте имеется несколько пробелов между словами или символы табуляции, то браузер на экран выводит всего один пробел. Если необходимы дополнительные пробелы то между словами надо добавить   – символьный примитив.

Одиночный тег 
 разрывает текстовый поток и вставляет пустую строку. Несколько таких тегов добавляют несколько пустых строк. Межстрочный интервал – одинарный.

4. Практическое задание №1.

Создание первого HTML-документа “ страница”, работа со шрифтами, задание цвета и размера шрифта. Освоение технологии работы.

Урок №2

1. Форматирование текста по абзацам

Тег

…

 – начинает абзац с новой строки. Новый абзац отделяется от предыдущего двойным межстрочным интервалом.

Выравнивание текста по абзацам:

… – по центру… – по ширине … – по левому краю… – по правому краю

2. Задание цвета всего текста и фона документа

Описываются в начальном теге тела документа 

.

3. Заголовки разных уровней

Тегами …. оформляют заключенный в них текст. Значения n меняются от 1 до 6, при этом текст выводится от более крупного к более мелкому. Теги …. могут иметь атрибуты ALIGN=CENTER, LEFT, RIGHT.

4. Простые списки

    ……
 – неупорядоченный (ненумерованный) список
    ……
 – упорядоченный (нумерованный) списокЧасть текста, которая будет оформляться как список, заключается в соответствующие теги, а каждый элемент списка помечается одиночным тегом 
    		•  Виды нумераций списков:

      5. Практичекое задание №2

      Форматирование текста по абзацам, цвет фона, заголовки разных уровней, списки.

      Урок №3

      1. Вставка графических изображений

      Всеми браузерами поддерживаются форматы .gif, .jpg. Эти форматы являются растровыми. GIF – поддерживается прозрачность и анимацияю, хорошо подходит для рисованных изображений. JPG – для полноцветных изображений, хорошо подходит для отсканированных изображений и фотографий, анимацию не поддерживает.

      Одиночный тег  вставляет графические изображения в текстовый поток в любом месте:

      Необязательные атрибуты тега :

      ALT = альтернативный текстBORDER = толщина обрамляющей рамки в пикс., 0 нет рамкиHEIGHT = высота изображения в пикселях или %WIDTH = ширина изображения в пикселях или % HSPACE = свободное пространство слева и справа от изображения в пикселях или %VSPACE =- свободное пространство сверху и снизу от изображения в пикселях или %ALIGN = left, right, middle выравнивание изображения

      Чтобы рисунок был по центру, можно использовать тег ……./

      2. Практическое задание №3

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

      Урок №4

      1. Гиперссылки

      Связь с другими документами организуется тегами ….

       текст гиперссылки .

      Рисунок так же можно сделать, как гиперссылку, написав:

      < IMG SRC =’имя графического файла’>

      2. Практическое задание №4

      Оформление списка театров на главной странице glavn.htm, как гиперссылки на соотвествующие Web-страницы театров.

      Урок №5

      1. Таблицы

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

      С помощью таблиц удобно создавать навигацию по сайту.

      … – строка.

       – ячейка в ряду.

      …
             – вся таблица.
      …

      Пример таблицы из двух строк (рядов), содержащих по две ячейки:

      Текст ячейки 1, 1 Текст ячейки 1 2
      Текст ячейки 2, 1 Текст ячейки 2, 2
       таблица первая строка

       вторая строка

       текст ячейки 1,1 текст ячейки 1,2
       текст 2,1 ячейки  текст 2,2 ячейки 

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

      Основные атрибуты тегов

      и
       задают параметры таблицы, строки или ячейки:ALIGN=left, right, center – выравнивание (

      ,

      ,

      )BGCOLOR=’цвет’ – фоновый цвет (

      ,

      ,

      )HSPACE=значение – свободное пространство слева и справа от таблицы в пикселах (

      )VSPACE=значение – свободное пространство сверху и снизу от таблицы в пикселах (

      )WIDTH=значение – ширина таблицы (ячейки) – в пикселах, или в процентах (

      ,

      и завершаются закрывающимся , а каждая ячейка таблицы начинается тегом .

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

      Создайте папку и переименуйте её своей фамилией.

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

      На первом документе отобразите следующий список:

      • сканеры для ввода текстов и иллюстраций

        1. листовые сканеры

        2. ручные сканеры

        3. планшетные сканеры

      • специальные типы сканеров

        1. барабанные сканеры

        2. сканеры форм

        3. штрих-сканеры

      HTML- код для этой страницы выглядит следующим образом:

      • сканеры для ввода текстов и иллюстраций

        1. листовые сканеры

        2. ручные сканеры

        3. планшетные сканеры

      • специальные типы сканеров

        1. барабанные сканеры

        2. сканеры форм

        3. штрих-сканеры

        Сохраните документ под именем spisok.htm

        В теле этой же Веб-страницы постройте следующую таблицу:

      )HEIGHT= значение – высоты таблицы (ячейки, строки) – в пикселах, или в процентах (

      ,

      )BORDER= значение – толщина рамки вокруг таблицы и ее ячеек, по умолчанию значение=1, если значение=0, то рамки нет (

      ,

      ,

      ,

      )BORDECOLOR=’цвет’ – цет рамки ()VALIGH=bottom, middle, top – выравнивание содержимого по вертикали (

      )2. Практичекое задание №5Создание навигации по сайту в форме таблицы из одной строки

      Уроки №6 и №7

      1. Секция заголовка 2. Самостоятельная работа над своим проектомПримерные темы проекта: “Мосты”, “Реки и каналы ”, “Мосты через каналы ”, “Необычные музеи ”, “Музыкальные театры”, “Филармонии и капелла”, “Технические ВУЗ-ы Башкортостана”, “Детские театры Башкортостана”, “Гуманитарные ВУЗ-ы Башкортостана”, свободная тема и др .Необходимо оформить главную страницу сайта по образцу файла index.html, выбрав в качестве навигации по сайту таблицу или список, и 2 – 3 страницы, раскрывающие содержание сайта и содержащие: заголовок, текст и рисунок.Палитра цветов RGB1. Создайте в Яндекс диске в своей личной папке папку по имени Компьютер+ ФИО ученика2. Создайте пустой текстовый документ в простом текстовом редакторе Блокнот.3. Выполните команду Файл-сохранить как.4. В открывшемся окне выполните все команды как описано на рисунке ниже.5. Если вам нужно открыть сохраненный файл в браузере или блокноте, выполните действия описанные ниже.6. Заполните страницу по образцу, сохраните под именем index.html, откройте в браузере.Если все правильно у вас получиться следующая страница:  страница 7. Аналогично пунктам 2-4 создайте страницы software.html, glossary.html и anketa.html8. Если вы все правильно выполнили то в браузере у вас должно получиться следующее: программы  словарь анкета9. В папке сайта у вас должны находиться следующие файлы см. рисунок ниже.10. Рисунок для главной страницы сказать можно по  ссылке : Рисунок>>>11. Для создания меню на каждой сранице используйте код:[ ][ Программы][Словарь][Анкета]12. Если вы все выполнили правильно то у вас получиться сайт который вы можете посмотреть по ссылкам ниже:страница   программы  словарь анкета

      Источник: http://bosov.ucoz.ru/index/prakticheskaja_rabota_quot_sozdaem_sajt_quot/0-18

      Практические задания ( Информационно-коммуникационные технологии) ОГЛАВЛЕНИЕ

      Практическая работа №11 Тема: Создание Web-сайта в программе

      Цель работы: Знакомство учащихся с общими положениями создания WEB-страниц и базовыми тегами языка HTML

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

      HTML — это теговый язык разметки документов. Элементы — это структуры, которые описывают отдельные составляющие HTML-документа. Элемент состоит из трех частей: начального тега, содержимого и конечного тега. Тег — это специальный текст, заключенный в угловые скобки “”.

      Конечный тег имеет то же имя, что начальный тег, но начинается с косой черты “/”. Атрибуты элемента определяют его свойства. Значение атрибута может быть заключено в одинарные или двойные кавычки. Порядок следования атрибутов в теге не важен.

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

      Базисные теги

      Тип документа

      Начало и конец файла

      арибуты

      Имя документа

      Должно быть в заголовке

      Заголовок

      Описание документа

      Тело

      Содержимое страницы

      Оформление тела Веб-страницы

      Атрибут

      Действие

      Значения атрибута

      BACKGROUND=”URL”

      Фоновая картинка

      *.jpg, *.gif, .png. графический файл расположен в одной папке с Вашим документом

      BGCOLOR=”цвет “

      Цвет фона

      TEXT=”color”

      Цвет текста

      LEFTMARGIN=”40″

      Определяет ширину левого и правого полей документа

      Пикселы

      MARGINWIDTH=”40″

      Определяет ширину верхнего и нижнего полей документа

      Пикселы

      Таблица цветов НТМL

      pink

      Розовый

      blue

      синий

      cyan

      оттенок бирюзового

      teal

      ярко-голубой

      orange

      Оранжевый

      gray

      серый

      brown

      Коричневый

      yellow

      желтый

      fuchsia

      ярко-фиолетовый

      olive

      оливковый

      aqua

      Бирюзовый

      purple

      фиолетовый

      silver

      светло-серый

      red

      красный

      black

      Черный

      green

      зеленый

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

      Создание простейшей Веб-страницы:

      Создайте стандартный текстовый файл.

      Откройте его редактором “Блокнот”.

      Сначала напечатайте основные теги: Здравствуйте!!!

      Сохраните документ с расширением *.htm.

      Создайте веб-страницу с оформленным фоном и текстом.

      HTML-код будет выглядеть следующим образом:

      …Текст документа (5-6 предложений на любую тему)….

      Сохраните документ с расширением *.htm.

      Самостоятельно создайте две веб-страницы с разными фонами и цветами текстов (5-6 предложений).

      Практическая работа №9. Форматирование текста на Веб-странице

      Цель работы: Знакомство учащихся с приёмами форматирования веб-документа.

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

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

      Форматирование

      Заголовки

      * – от 1 до 6

      Стандарт определяет 6 уровней заголовков

      Конец строки

      Начало абзаца

      Выравнивание

      *-ALIGN=

      LEFT|CENTER|RIGHT

      По левому краю, по правому, по центру

      Цитата

      Обычно выделяется отступом

      Шрифт

      Жирный

      Курсив

      Размер шрифта

      От 1 до 7

      Цвет шрифта

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

      Форматирование текста.

      На базе первой простейшей Веб-страницы создайте текстовый документ, имеющий следующее оформление:

      Устройства компьютера(заголовок 1)

      Внешние (заголовок 2)

      Принтер, сканер, монитор, клавиатура. (размер -2, цвет синий, шрифт Arial)

      Внутренние (заголовок 2)

      Винчестер, материнская плата, видеокарта.

      Внешние

      Принтер, сканер, монитор, клавиатура

      Внутренние

      винчестер материнская плата видеокарта

      Самостоятельно создайте Веб-страницу, на которой будет изображен текст в следующем виде:

      Методика освоения новых программ

      Знакомство с примерами, шаблонами и образцами документов.

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

      Эксперименты с пробными документами.

      Цель эксперимента – проверка действия команд редактирования.

      Практическая работа №10. Веб-страницы с гиперссылками и изображениями

      Цель работы: Знакомство учащихся с различными возможностями перехода на другие страницы и вставки графических изображений

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

      Важнейшую роль в оформлении страницы играют иллюстрации.

      Для размещения рисунков в документе служит одиночный тег , который должен обязательно содержать атрибут SCR=, значение которого составляет адрес файла изображения.

      Изображение переносится на страницу с сохранением размеров. Нужные размеры рисунка можно задать с помощью атрибутов WIDTH= (ширина) и HEIGHT= (высота).

      Альтернативный текст – словесное описание изображения задаётся при помощи атрибута ALT=.

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

      Некоторые гиперссылки могут указывать на определённое место внутри страницы (якоря). Для него является обязательным атрибут NAME=.

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

      В качестве гиперссылки можно использовать изображения. Для этого теги разметки изображения должны быть помещены между тегами гиперссылок.

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

      Создайте папку и переименуйте её своей фамилией.

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

      В свою папку скопируйте две картинки (большую для фона и маленькую) и одну анимацию, переименуйте их соответственно paint1.gif, paint2.gif, anim.gif. (расширения должны быть соответствующими вашим изображениям).

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

      ИЗОБРАЖЕНИЕ1

      Сохраните этот документ под именем document1.

      Второй документ должен содержать ссылку на этот документ, при нажатии на которую появится список. Код тела этой веб-страницы должен иметь вид:

      Самостоятельно постройте две Веб-страницы. Первая должна содержать 5-6 предложений, касающихся темы изображений, 3 картинки, 2 анимации и небольшой пояснительный текст. Вторая – гиперссылку на первый документ.

      Практическая работа №11. Размещение на веб-страницах списков и таблиц

      Цель работы: освоить возможности размещения текста в форме списков и с созданием таблиц при разработке WEB – страниц

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

      Рассмотрим процесс создания нумерованных и маркированных списков. Они создаются примерно одинаковым образом. Список всегда располагается между открывающим и закрывающим тегом списка:

        и
      в случае упорядоченного списка;
        и
      – в случае неупорядоченного. Внутри списка располагаются его элементы. Их заключают между тегами
    1. и
      2. .

      Таблица начинается открывающимся тегом

      и завершается закрывающимся
      .

      Строки таблицы начинаются открывающимся тэгом

      и завершается

      Монитор

      Клавиатура

      Мышь

      Системный блок

      Такая таблица реализуется следующим кодом:



      Монитор Клавиатура
      Мышь Системный блок

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

      • Рабочие дни:

        1. понедельник

        2. вторник

        3. среда

        4. четверг

        5. пятница

      • Выходные дни:

      и таблица:

      Прогноз погоды:

      Дата

      Осадки

      Атмосферное давление

      Источник: http://textarchive.ru/c-1350085-p2.html

      No related posts.

      ovdmitjb

      View all posts

      Add comment

      You may also like

      ЭТАПЫ СТРОИТЕЛЬСТВА БАМа
      Разное

      ЭТАПЫ СТРОИТЕЛЬСТВА БАМа

      Содержание 75 лет началу строительства БАМаБайкало-Амурская магистраль: история, планы развития, интересные фактыПервые задумки грандиозной стройкиКоротко о истории БАМаГде проходит магистраль?ГидропортыСталинский...

      Основные данные самолета Ил-62м(Д-30КУ)
      Разное

      Основные данные самолета Ил-62м(Д-30КУ)

      Содержание Основные данные самолета Ил-62м(Д-30КУ)КНАУРасчетно-графическаяСамолет Ил-62: технические характеристики и модификация 62МИстория создания – история созданияТТХИстория эксплуатацииМодификации Ил-62МОтличие...

      МЕТОДИЧЕСКИЕ РЕКОМЕНДАЦИИ ДЕПАРТАМЕНТА МИРОВОЙ ЭКОНОМИКИ И МИРОВЫХ ФИНАНСОВ ПО НАПИСАНИЮ РЕФЕРАТОВ
      Разное

      МЕТОДИЧЕСКИЕ РЕКОМЕНДАЦИИ ДЕПАРТАМЕНТА МИРОВОЙ ЭКОНОМИКИ И МИРОВЫХ ФИНАНСОВ ПО НАПИСАНИЮ РЕФЕРАТОВ

      Содержание Методические рекомендации по написанию рефератов и подготовке презентаций по дисциплине «финансы, денежное обращение и кредит»Page 3Методические рекомендации департамента мировой экономики и мировых финансов...