Поурочный план
Тема: Назначение и основные понятия HTML
Цели:
- дидактическая: познакомить студентов с основами HTML программирования.
- развивающая: развивать знания студентов в области информационных технологий.
- воспитательная: показать важность знаний и умений в сфере информационных компьютерных технологий.
Вид занятий (тип урока): комбинированный урок.
Оборудования: интерактивная доска, компьютеры.
Организационные формы обучения: лекция.
Литература:
1.Дунаев В.В. Сам себе Web-мастер. – СПб.: БХВ-Петербург, Арлит, 2000.
2.Курова И.А. Руководство по HTML. – М.: БИНОМ, 2001.
3.Угринович Н.Д. Информатика и информационные технологии. – М.: Лаборатория Базовых Знаний, 2002
4.Роббинс Д. Web-дизайн. Справочник. — "КУДИЦ-ПРЕСС", 2008.
5.Гончаров А. Ю. Web-дизайн: HTML, JavaScript и CSS. Карманный справочник. "КУДИЦ-ПРЕСС", 2007.
Ход занятия
1. Организационный момент.
2. Сообщение темы и цели занятия.
3. Изучение нового материала.
4. Практическая работа
5. Повторение изученного материала.
6. Подведение итогов занятия.
7. Домашнее задание.
Что необходимо для освоения HTML?
Термин HTML (HyperText Markup Language) означает "язык маркировки гипертекстов". Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.
Как и многое другое в компьютерном мире, версии, или спецификации, HTML пронумерованны. Известны спецификации 2.0, 3.0, 3.2 и 4.0.
Все примеры и самостоятельные практические работы, данные в данном пособии будут работать с программным обеспечением, поддерживающим любую известную на сегодня спецификацию HTML.
Для освоения HTML Вам понадобятся две вещи:
Любой браузер, т.е., программа, пригодная для просмотра HTML-файлов. Например, Internet Explorer. Любой редактор текстовых файлов, поддерживающий русский язык в выбранной Вами кодировке. Если на компьютере установлен Windows, то подойдет стандартная программа Блокнот.
Вы будете использовать текстовый редактор для подготовки HTML-файлов, а браузер — как инструмент контроля за сделанным.
Все HTML-файлы Вы будете разрабатывать у себя на локальном диске. Другими словами, компьютер, на котором Вы будете заниматься, может и не иметь подключения к Интернет. При этом один и тот же *.html-файл может быть одновременно открыт и в Блокноте, и в Internet Explorer. Сохранив изменения в Блокноте, просто нажмите кнопку ОБНОВИТЬ в Internet Explorer, чтобы увидеть эти изменения реализованными в HTML-документе.
Редакторы HTML
В настоящее время широко используются два типа редакторов HTML:
Редакторы типа "что видишь, то и получишь" (WebPageMaker, Microsoft Front Page). Пользователь не видит "внутренностей" документа, с которым он работает, точно так же, как при работе с текстовым процессором типа Microsoft Word. Cуществует довольно много конвертеров, способных преобразовывать документы, созданные в Microsoft Word в HTML-документы.
Редакторы HTML-текстов (Macromedia Dreamweaver, Web Editor и многие другие). В процессе работы пользователь видит внутреннее содержание HTML-файла и может изменять его либо вручную, либо вызывая команды меню для вставки определенных элементов HTML. Работа с таким редактором очень похожа на работу с интерактивной средой программирования типа Microsoft Visual Basic или Borland Delphi.
Простой HTML-документ
HTML-документ — это просто текстовый файл с расширением *.html. Вот самый простой HTML-документ:
<html>
<head>
<title>
Пример 1
</title>
</head>
<body>
<H1>
Привет!
</H1>
<P> Меня зовут {Ф.И.О}
</P>
<P>Этот *.html-файл необходимо сохранить в программе Блокнот следующим образом: выполните команду ФАЙЛ-СОХРАНИТЬ, в окне сохранения документа в поле ИМЯ ФАЙЛА наберите 1.html. Откройте документ в Internet Explorer, выберите команду ОБНОВИТЬ чтобы увидеть изменения.</P>
</body>
</html>
Для удобства чтения можно ввести дополнительные отступы, однако в HTML это совсем не обязательно. Более того, браузеры просто игнорируют символы конца строки и множественные пробелы в HTML-файлах.
Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками "<" и ">". Такой фрагмент (например, <html>) называется тегом (по-английски — tag, читается "тэг").
Большинство HTML-тегов— парные, то есть на каждую открывающую метку вида <tag> есть закрывающая метка вида </tag> с тем же именем, но с добавлением "/".
Теги можно вводить как большими, так и маленькими буквами. Например, теги <body>, <BODY> и <Body> будут восприняты браузером одинаково.
Многие теги, помимо имени, могут содержать атрибуты — элементы, дающие дополнительную информацию о том, как браузер должен обработать текущий тег. В нашем простейшем документе, однако, нет ни одного атрибута. Их мы рассмотрим на следующих уроках. Договоримся сохранять файлы на английском языке, короткими именами. Все задания, выполняемые на уроке сохраняйте под именами 1. html, 2.html и т.д.
Практическая работа №1
Вызовите текстовый редактор Блокнот из папки "Стандартные". Наберите следующий ниже текст и сохраните под именем 1а.html в личной папке на сетевом диске.
<html>
<head>
<title>Моя персональная страничка (заголовок)</TITLE>
</head>
<body>
Добро пожаловать на мою личную страничку! Меня зовут (Укажите свою фамилию, имя и отчество).
</body>
</html>
Откройте теперь Internet Explorer. Используя меню Файл, команду Открыть, откройте свой файл 1a.html.
Домашнее задание: Откройте файл 1a.html. и дополните информацией о себе
