Создание Web-сайта на языке HTML. Учебное пособие

В примерной программе по информатике и ИКТ на тему “Коммуникационные технологии” отводится всего 12 часов и предлагается создать Web-страничку с использованием шаблонов. На тему “Мультимедийные технологии” выделяется 8 часов, но если в образовательном учреждении информатика изучается на пропедевтическом уровне уже в 5, 6 и 7 классах, то целесообразно перенести изучение мультимедийных технологий в пропедевтический курс и тогда можно увеличить время на изучение коммуникационных технологий, а точнее, можно добавить тему “Создание Web-сайтов на языке HTML” в 8 классе.

Освоение технологии создания сайтов рекомендуется начать с языка разметки гипертекста HTML в программе Блокнот, что является первоосновой в данном направлении. Конечно, за 8 часов невозможно изучить весь язык HTML, но можно показать назначение и применение основных тегов языка. Если ученик заинтересуется технологией создания сайтов, то сможет продолжить изучение материала самостоятельно или на соответствующих курсах, кружках или факультативах.

Представленное методическое пособие прошло неоднократную опрабацию в 8-х классах гимназии №441 Фрунзенского р-на Санкт-Петербурга и включает материал для проведения теоретических и практических занятий, выполнение которых сначала демонстрируется через проектор, а затем учащиеся выполняют самостоятельно на компьютере, используя раздаточный материал к уроку.

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

Эффективно осваивается материал, когда учащиеся вместе с учителем выполняют общий проект, например, по теме из истории Санк-Петербурга “Драматические театры Санкт-Петербурга”, а затем в качестве итоговой работы создают собственный небольшой проект, используя в качестве шаблона сайт, созданный совместно с учителем.

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

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

Задачи.

Обучающие:

• сформировать систему знаний по технологии создания Web-сайтов;
• обучить языку разметки гипертекста HTML для создания сайтов;
• познакомить с этапами проектной деятельности.

Развивающие:

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

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

• воспитать добросовестное отношение к работе;
• воспитать чувства товарищества и личной ответственности за созданный сайт;
• воспитать художественный и эстетический вкус;
• воспитать грамотного и корректного пользователя сети Интернет.

Урок 1

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 или .htm, содержащий набор тегов.

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

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

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

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

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

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

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

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

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

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

Урок №2

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

Тег <P> …</P> - начинает абзац с новой строки. Новый абзац отделяется от предыдущего двойным межстрочным интервалом.

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

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

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

<BODY BGCOLOR=цвет фона документа TEXT=цвет текста >.

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

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

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

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

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

Урок №3

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

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

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

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

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

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

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

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

Урок №4

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

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

<A href=”имя файла на который надо перейти” > текст гиперссылки </A>.

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

<A HREF ='имя файла на который переходим'>< IMG SRC =’имя графического файла’></a>

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

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

Урок №5

1. Таблицы

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

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

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

 

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

Основные атрибуты тегов <TABLE> <TR> и <TD> задают параметры таблицы, строки или ячейки:

ALIGN=left, right, center – выравнивание (<table>, <tr>, <td>)

BGCOLOR=’цвет’ – фоновый цвет (<table>, <tr>, <td>)

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

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

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

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

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

BORDECOLOR=’цвет’ – цет рамки (<table,<td>>)

VALIGH=bottom, middle, top – выравнивание содержимого по вертикали (<tr>, <td>)

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

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

Уроки №6 и №7

1. Секция заголовка <HEAD>, мета-теги

В секции заголовка на каждой странице указывается информация о документе, которая используется при его отображении. Текст, заключенный между тегами <TITLE> ... </TITLE>, отображается в заголовке окна браузера.

В секции заголовка обычно помещается и ряд тегов <META> с различными атрибутами, предоставляющими дополнительную информацию (метаинформацию) о Web-сайте:

<HEAD>

<title>Драматические театры Санкт-Петербурга</title>

<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251"> - - (указывается тип кодовой таблицы (windows-1251, Koi8-R и другие), использованной при подготовке текстовой части документа.

<meta name="author" CONTENT="Смирнова Татьяна, учитель 441 гимназии СПб"> - информация об

<meta name="Keywords" content="драматические, театры, Товстоногов, Комиссаржевская, Европа, ул.Рубинштейна”> (указывается через запятую набор ключевых слов, которые могут быть использованы рядом поисковых систем)

</HEAD>

2. Самостоятельная работа над своим проектом

Примерные темы проекта: “Мосты через Неву”, “Реки и каналы Санкт-Петербурга”, “Мосты через каналы Санкт-Петербурга”, “Необычные музеи Санкт-Петербурга”, “Музыкальные театры”, “Филармонии и капелла”, “Технические ВУЗ-ы Санкт-Петербурга”, “Детские театры Санкт-Петербурга”, “Гуманитарные ВУЗ-ы Санкт-Петербурга”, “Пригороды Санкт-Петербурга”, “Музеи Санкт-Петербурга”, “Военные учебные заведения в Санкт-Петербурге” и др.

Необходимо оформить главную страницу сайта по образцу файла glavn.htm, выбрав в качестве навигации по сайту таблицу или список, и 2 - 3 страницы, раскрывающие содержание сайта и содержащие: заголовок, текст и рисунок.

Урок №8

1. Контрольный тест на знание тегов HTML – 15 минут.

2. Рефлексия. Представление проекта и оценивание его учениками класса и учителем – 30 минут.

Практические задания – Приложение 1.

Вопросы контрольного теста – Приложение 2.

Литература для учителя

1. Усенков Д.“Уроки Web-мастера”, Москва, БИНОМ, 2004 г.
2. Смирнова И. “Начала Web-дизайна, Санкт-Петербург, БХВ, 2004г.
3. Томас А.Пауэл “Web-дизайн. Наиболее полное руководство. В подлинике”, 2-е издание, БХВ-СПБ, 2005 г.
4. Браун М. “HTML 3.2. Наиболее полное руководство. В подлиннике”, БХВ-СПб, 1999
5. Захаркина В.В. “Основы создания Web-страниц”, методическое пособие, СПБ, 2000 г.
6. К.Ахметов, “Microsoft Internet Explorer 4.0 для всех”, изд-во Компьютер, Москва, 1997 г.

Литература для ученика

1. Усенков Д.“Уроки Web-мастера”, Москва, БИНОМ, 2004 г.
2. Смирнова И. “Начала Web-дизайна, Санкт-Петербург, БХВ, 2004г.

Перечень Internet-ресурсов

1. http://htmlbook.ru — Мержевич Влад. Краткий, но информационно насыщенный учебник по технологии создания сайтов, HTML, CSS, дизайну, графике и др.
2. http://html.manual.ru — Городулин Владимир. HTML-справочник.
3. http://winchanger.narod.ru — А. Климов. Краткий справочник по тегам HTML-языка.