Практикум по созданию веб-сайта средствами HTML.
методическая разработка по информатике и икт (9 класс) на тему

Субботина Анна Николаевна

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

Скачать:

ВложениеРазмер
Файл metodicheskaya_kopilka.docx315.36 КБ

Предварительный просмотр:

МЕТОДИЧЕСКАЯ РАЗРАБОТКА

Практикум по созданию веб-сайта средствами HTML.

Аннотация

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

Ключевые слова:

Информатика, методика, практикум, практическая работа, лабораторная работа, HTML, гипертекст, тег, веб-сайт, веб-страница, технологическая карта.

        В данной статье представлен практикум по созданию простейшей веб-страницы с помощью языка HTML. Практикум состоит из четырех связанных практических работ и рассчитан на четыре академических часа – один урок на одну практическую работу. Каждое занятие сопровождается технологической картой, которая позволяет освоить материал даже слабоуспевающим ученикам. В  каждой практической работе в числе прочих заданий представлено небольшое задание для самостоятельного выполнения. Желательно снабдить учащихся учебным пособием по HTML (это может быть, как обычная методичка, так и электронный учебник), в этом случае для каждого задания в технологической карте нужно указать номера разделов или страниц пособия. По окончании практикума учащимся можно предложить творческую проектную работу по созданию своей веб-страницы.

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

Лабораторная работа

“Создание веб-страницы THE CATHERINE PARK”

Предварительная подготовка

Задание

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

  • Фотографию Екатерининского парка;
  • Историю парка;
  • Фотоальбом достопримечательностей Екатерининского парка (сохраните в папке IMAGES);

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

Технологическая карта 1

“Первая страница”

Задание 1

        Создайте пустую страницу с титулом THE CATHERINE PARK.

Теги:

Тег начала документа в формате HTML

<html>

Тег заголовка документа

Тег заголовка (титула) страницы в окне браузера

</span></p></td></tr><tr class="c7"><td class="c27" colspan="1" rowspan="1"><p class="c2 c1"><span class="c0">Тег содержимого страницы</span></p></td><td class="c28" colspan="1" rowspan="1"><p class="c2 c8 c12"><span class="c0"><body></span></p></td></tr></tbody></table><p class="c1 c22 c9"><span class="c3 c4"></span></p><p class="c1 c22"><span class="c3 c4">Комментарии.</span></p><ol class="c23 lst-kix_list_2-0 start" start="1"><li class="c15 c1"><span class="c3 c24">В своей папке создайте папку </span><span class="c3 c24 c17">Site</span><span class="c3 c24">, в которой будут располагаться все файлы проекта.</span></li><li class="c1 c15"><span class="c3 c24">В текстовом редакторе Блокнот создайте типовую структура HTML-документа, добавив между тегами заголовок главной страницы: THE CATHERINE PARK.</span></li></ol><p class="c1 c22"><span class="c3"><html>  </span></p><p class="c1 c22"><span class="c3">  <head></span></p><p class="c8"><span class="c3">          <title></span><span> </span><span class="c3">THE CATHERINE PARK

       

       

       

       

  1. Сохраните файл под именем index.html в папке Site.

Важно! При сохранении файла в качестве типа файла укажите Все файлы.

  1. Откройте файл index.html в браузере (как правило, файл в браузере открывается двойным щелчком мыши). Появится пустое окно браузера с заголовком.

Задание 2

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

Добро пожаловать на сайт,

посвященный знаменитому Екатерининскому парку.

Теги и параметры:

Тег заголовка первого уровня

<h1>

Параметр выравнивания абзаца (align) по центру (добавляется внутрь открывающего тега заголовка, абзаца.

align=center

Тег курсива

Тег перехода на новую строку


Комментарии.

  1. Откройте файл index.html в блокноте для редактирования;
  2. Между тегами  запишите текст:

Добро пожаловать на сайт,

посвященный знаменитому Екатерининскому парку.

  1. Добавьте теги и параметры. Сравните свой текст с образцом:

 

  </span><span> </span><span class="c3">THE CATHERINE PARK  

         

                   

Добро пожаловать на сайт,
 посвященный знаменитому Екатерининскому парку.

         

     

  1. Сохраните  файл. В браузере выполните команду Обновить(клавиша F5).

  Задание 3

Добавьте на страницу следующий текст (параметры: выравнивание по ширине, часть слов выделена курсивом.)

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

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

 Более полную информацию вы найдете о Екатерининском парке вы найдете на других сайтах. Приносим свои извинения.

Теги и параметры

Тег начала абзаца

Параметр выравнивания абзаца(align) по ширине

align=justify

Тег курсива

Комментарии

Пример добавления текста:

Об екатерининском парке написано столько…

Задание 4

По центру добавьте разделительную горизонтальную линию:

  • Толщина – 1 пиксель;
  • Ширина – 50% рабочего поля;
  • Цвет – зеленый.

Теги и параметры

Тег вставки горизонтальной линии ( закрывающего тега нет)


Параметры:

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

align

ширина

width

Толщина, размер

size

цвет

color

Комментарии

Пример добавления горизонтальной линии


 size=1  color =green>

Задание 5

Добавьте информацию об авторских правах.(параметры: размер шрифта -1, шрифт Arial, форматирование – по центру.)

@Все права защищены. Инициалы и фамилия, класс. Год.

Тег параметров шрифта

Параметры:

тип

face

размер

size

цвет

color

Спецсимвол @

©

Комментарии

Пример добавления информации об авторских правах:

© Все права защищены.

Задание 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

Фотоальбом

Раздел находится в стадии разработки

Литература и интернет-источники

  1. Википедия. Свободная энциклопедия. http://ru.wikipedia.org
  2. Городулин В. HTML справочник. http://html.manual.ru/
  3. Комолова Н.В. Самоучитель 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...