Практикум по созданию веб-сайта средствами HTML.
методическая разработка по информатике и икт (9 класс) на тему
В данной работе представлен практикум посозданию простейшейвеб-страницы с помощью языка HTML. практикум состоит из лабораторной работы. Занятие сопровождается технологической картой, которая позволяет освоить материал даже слабоуспевающим учащимся.
Скачать:
Вложение | Размер |
---|---|
metodicheskaya_kopilka.docx | 315.36 КБ |
Предварительный просмотр:
МЕТОДИЧЕСКАЯ РАЗРАБОТКА
Практикум по созданию веб-сайта средствами HTML.
Аннотация
В статье представлен практикум по созданию простейшей веб-страницы с помощью языка HTML. Практикум состоит из четырех связанных лабораторных работ один урок на работу). Каждое занятие сопровождается технологической картой, которая позволяет освоить материал даже слабоуспевающим учащимся.
Ключевые слова:
Информатика, методика, практикум, практическая работа, лабораторная работа, HTML, гипертекст, тег, веб-сайт, веб-страница, технологическая карта.
В данной статье представлен практикум по созданию простейшей веб-страницы с помощью языка HTML. Практикум состоит из четырех связанных практических работ и рассчитан на четыре академических часа – один урок на одну практическую работу. Каждое занятие сопровождается технологической картой, которая позволяет освоить материал даже слабоуспевающим ученикам. В каждой практической работе в числе прочих заданий представлено небольшое задание для самостоятельного выполнения. Желательно снабдить учащихся учебным пособием по HTML (это может быть, как обычная методичка, так и электронный учебник), в этом случае для каждого задания в технологической карте нужно указать номера разделов или страниц пособия. По окончании практикума учащимся можно предложить творческую проектную работу по созданию своей веб-страницы.
Для выполнения работы учащимся понадобятся фотографии и различные сведения, относящиеся к контенту сайта. Учитель может снабдить учащихся готовыми текстовыми и графическими файлами, но если есть техническая возможность, то лучше предоставить поиск соответствующих материалов ученикам.
Лабораторная работа
“Создание веб-страницы THE CATHERINE PARK”
Предварительная подготовка
Задание
Найдите в интернете и сохраните в своей папке следующие материалы:
- Фотографию Екатерининского парка;
- Историю парка;
- Фотоальбом достопримечательностей Екатерининского парка (сохраните в папке IMAGES);
Сохраните в файле Ссылки.txt информацию обо всех использованных при выполнении задания информационных источниках.
Технологическая карта 1
“Первая страница”
Задание 1
Создайте пустую страницу с титулом THE CATHERINE PARK.
Теги:
Тег начала документа в формате HTML | <html> |
Тег заголовка документа | |
Тег заголовка (титула) страницы в окне браузера | |
Тег содержимого страницы |
Комментарии.
- В своей папке создайте папку Site, в которой будут располагаться все файлы проекта.
- В текстовом редакторе Блокнот создайте типовую структура HTML-документа, добавив между тегами заголовок главной страницы: THE CATHERINE PARK.
- Сохраните файл под именем index.html в папке Site.
Важно! При сохранении файла в качестве типа файла укажите Все файлы.
- Откройте файл index.html в браузере (как правило, файл в браузере открывается двойным щелчком мыши). Появится пустое окно браузера с заголовком.
Задание 2
Добавьте в качестве заголовка первого уровня (параметры: курсив, выравнивание по центру) следующий текст:
Добро пожаловать на сайт,
посвященный знаменитому Екатерининскому парку.
Теги и параметры:
Тег заголовка первого уровня | <h1> |
Параметр выравнивания абзаца (align) по центру (добавляется внутрь открывающего тега заголовка, абзаца. | align=center |
Тег курсива | |
Тег перехода на новую строку |
Комментарии.
- Откройте файл index.html в блокноте для редактирования;
- Между тегами запишите текст:
Добро пожаловать на сайт,
посвященный знаменитому Екатерининскому парку.
- Добавьте теги и параметры. Сравните свой текст с образцом:
Добро пожаловать на сайт,
посвященный знаменитому Екатерининскому парку.
- Сохраните файл. В браузере выполните команду Обновить(клавиша F5).
Задание 3
Добавьте на страницу следующий текст (параметры: выравнивание по ширине, часть слов выделена курсивом.)
Об Екатерининском парке написано столько, что вряд ли нам удалось бы добавить что-либо новое. На нашем сайте Вы найдете историю создания парка, фотогалерею знаменитых достопримечательностей и ландшафта парка. Мы предлагаем вашему вниманию только достоверную информацию.
Это учебный сайт демонстрационного содержания. Его цель – отработка технологии разметки гипертекстовых документов с помощью языка HTML.
Более полную информацию вы найдете о Екатерининском парке вы найдете на других сайтах. Приносим свои извинения.
Теги и параметры
Тег начала абзаца | |
Параметр выравнивания абзаца(align) по ширине | align=justify |
Тег курсива |
Комментарии
Пример добавления текста:
Задание 4
По центру добавьте разделительную горизонтальную линию:
- Толщина – 1 пиксель;
- Ширина – 50% рабочего поля;
- Цвет – зеленый.
Теги и параметры
Тег вставки горизонтальной линии ( закрывающего тега нет) | |||
Параметры: | |||
выравнивание | align | ||
ширина | width | ||
Толщина, размер | size | ||
цвет | color |
Комментарии
Пример добавления горизонтальной линии
size=1 color =green>
Задание 5
Добавьте информацию об авторских правах.(параметры: размер шрифта -1, шрифт Arial, форматирование – по центру.)
@Все права защищены. Инициалы и фамилия, класс. Год.
Тег параметров шрифта | |||
Параметры: | |||
тип | face | ||
размер | size | ||
цвет | color | ||
Спецсимвол @ | © |
Комментарии
Пример добавления информации об авторских правах:
© Все права защищены. font>
Задание 6
После заголовка первого уровня добавьте фотографию Catherine_Palace_in_Tsarskoe_Selo.jpg, предварительно скопировав файл изображения в папку Site (параметры: размер – 50%, выравниваине – по центру пустой строки).
Теги и параметры
Тег изображения(закрывающего тега нет) | |||
Параметры: | |||
Адрес файла с изображением(обязательный параметр) | src | ||
выравнивание | align | ||
ширина | width |
Комментарии
Пример добавления фотографии:
Catherine_Palace_in_Tsarskoe_Selo.jpg width=50%>
Первоначальный вариант первой страницы
Задание 7 – для самостоятельного выполнения
Создайте следующие страницы
Файл | Заголовок страницы | Содержание |
Info.html | Общая информация | Раздел находится в стадии разработки |
History.html | История | Раздел находится в стадии разработки |
Foto.html | Фотоальбом | Раздел находится в стадии разработки |
Литература и интернет-источники
- Википедия. Свободная энциклопедия. http://ru.wikipedia.org
- Городулин В. HTML справочник. http://html.manual.ru/
- Комолова Н.В. Самоучитель HTML. Спб.: Питер, 2009
По теме: методические разработки, презентации и конспекты
урок прозводственного обучения "Использование гиперссылок в HTML для создания веб-сайтов"
Язык гипертекстовой разметки HTML широко используется для создания веб-сайтов - основных элементов сети ИНТЕРНЕТ. На данном уроке при создании учебной веб-страницы...
Способы создания сайтов. Основы HTML
ЦЕЛИ И ЗАДАЧИ УРОКА:Освоить основные этапы построения web - страницОсвоить основные методы создания web - страницИметь представление об особенностях оформления информационных блоков страницыОсво...
Интерактивная презентация для цикла уроков в 10 классе "Создание Веб-сайта. Язык HTML."
Интерактивная презентация для цикла уроков в 10 классе "Создание Веб-сайта. Язык HTML.". Данная презентация содержит теоретический материал по языку HTML и практические задания по кажлму раз...
Создание веб-сайта с использованием языка html
В работе представлен материал для проведения практических работ по теме "Создание веб-сайта с использованием языка html". Всего 4 практические работы, позволяющие ученикам 7-9х классов иметь представл...
Методическая разработка: Создание сайтов в html
Материал предназначен для учителей и учащихся. Предмет: информатика...
Конспект занятия по теме: «Создание Web-сайтов с использованием языка гипертекстовой разметки документов HTML».
Цель занятия: воспитанники создадут Web-сайт, содержащий пять Web-страниц, знакомящий с основными тегами языка гипертекстовой разметки документов HTML. Учащиеся должны знать:определение следующих...
Создание Web-сайта с помощью языка гипертекстовой разметки HTML
Создание Web-сайта с помощью языка гипертекстовой разметки HTML...