- 18.05.2015
- 4374
- 1
Тема урока: «Язык разметки гипертекста HTML»
Цель: познакомить учеников с языком разметки гипертекста – HTML.
Задачи:
- Сформулировать основные принципы создания WEB-страниц;
- познакомить учеников с основными командами оформления текста; продемонстрировать использование этих команд на конкретных примерах оформления WEB-страниц;
- формировать навыки и умения создания простейших WEB-страниц;
- развивать логику, умение анализировать, сравнивать, делать выводы, высказывать свою мысль;
- воспитывать аккуратность, внимательность, вежливость и дисциплинированность, бережное отношение к своему здоровью.
Тип урока: усвоение новых знаний.
Оборудование: мультимедийная система, слайды, карточки со справочным материалом.
План урока
1. Актуализация опорных знаний
2. Изложение нового материала.
3. Примеры использования тегов форматирования.
4. Закрепление нового материала.
5. Итоги урока.
6. Домашнее задание: Выучить конспект.
Ход урока:
I.Актуализация опорных знаний
· Как вы можете определить понятие «Интернет»?
· Что такое служба WWW?
· Как называются документы, которые мы можем просматривать в программе-браузере?
II. Изложение нового материала.
Знакомство с языком HTML
Гипертекст – это электронный документ, который содержит гиперссылки на другие документы.
Гипертекстовый документ предназначен для вывода информации на экран компьютера.
Гипертекстовая технология – это технология, базирующаяся на использовании гипертекстовых документов. Ее применяют в компьютерных энциклопедиях и учебных программах, прикладных программах для работы со справочной информацией и для организации доступа к информации в W W W, т.е. при работе с WEB-документами.
WEB-документ – это текст, написанный на языке HTML или другом, который предназначен для просмотра электронной информации на экране компьютера с помощью программы-браузера.
Команды языка HTML называются теги и они записываются в < >. Большинство тегов – парные <html>…</html>
Документ HTML имеет три структурных типа содержимого:
1. Теги – команды в < >.
2. Комментарии –пояснения к документу. Они помогают разобраться в его содержании <!-- … -- >.
3. Текст – то, что пользователь видит на экране браузера.
Мультимедийные элементы – картинки, звук, видео – не являются частью HTML-документа и хранятся в отдельных файлах. HTML-документ содержит только ссылки на эти файлы в виде тегов.
Каждый тег состоит из имени тега, за которым может следовать список атрибутов (параметров)
<i>
<img src=“dog.gif” width=6>
Атрибуты отделяются от имени тега и друг от друга пробелами. Значение атрибута пишется после знака равенства. Если значение состоит из одного слова или цифры, то его можно писать без кавычек. Для значений из нескольких слов кавычки обязательны ( “ ).
Тег со всеми атрибутами желательно располагать на одной строке.
Для большинства тегов нужен закрывающий тег:
<i> </i>
Структура HTML-документа
<html>
<head>
<title> Мой первый шаг </title>
</head>
<body>
Здравствуйте, это моя первая страница.
<br>
Добро пожаловать!
</body>
</html>
Заголовок документа – теги <Head> и <Title>
Тег <Head>…</Head> заключает в себе теги заголовка.
1. Тег <Title>…</Title> содержит слова, которые появляются в стоке заголовка браузера
<html>
<head>
<title>Мой первый шаг </title>
</head>
2. Дополнительные теги заголовка:
<meta> - содержит дополнительные данные о документе, используемые поисковыми серверами;
<base> и <link> - определяют базовый адрес документа и некоторые другие
Тело документа – тег <body>
Все, что находится между<body> и </body>, называется содержимым тела документа.
Тег <body> может содержать 3 группы параметров:
1. Управление внешним видом документа.
2. Атрибуты программирования – по событию, таблицы стилей и пр.
3. Атрибуты ссылок и идентификации.
Параметры тега <body>
Bgcolor – изменяет цвет фона. Цвет задается словом или кодом RGB
<body bgcolor = “red”>
<body bgcolor = “#FF0000”>
Text – задает цвет текста.
<body bgcolor = “red” text=“blue”>
Background – помещает в качестве фона изображение из файла с картинкой.
<body background = “dog.gif”>
Bgproperties = “fixed” – фоновый рисунок не прокручивается вместе со страницей.
Link – задает цвет гиперссылок, по которым пользователь еще «не ходил».
Vlink – задает цвет посещенных гиперссылок.
Alink – цвет активной гиперссылки (под курсором мышки во время нажатия)
III. Закрепление нового материала.
Создание WEB-страниц в блокноте.
• В своей папке создать отдельную папку для файлов сайта.
• Открыть программу БЛОКНОТ.
• Написать в нем текст WEB-страницы.
• Сохранить этот текст в этой папке под любым именем с расширением .html.
• Перейти в эту папку
• Открыть этот документ. (Откроется программа-браузер).
• Если нужно внести изменения в документ, то выполнить команду ВИДðПросмотр HTML-кода (Исходный текст). Текст WEB-страницы откроется в блокноте.
• Внести в текст изменения. Сохранить его (Ctrl+S), перейти в программу-браузер и нажать кнопку ОБНОВИТЬ.
IV. Итоги урока.
Сегодня мы изучили некоторые теги формативрования.
V. Домашнее задание: Выучить конспект.
Рабочие листы
к вашим урокам
Скачать
Это разработанный урок готовый для проведения в 11 классе, в рамках раздела "HTML". Данный урок был проведен студентом группы Ин(о)-11, факультета информационных технологий Северо-Казахстанского Государственного Университета имени Манаша Козыбаева, во время прохождения практики в Смирновской Средней Школе №2 Аккайынского района, селе Смирново.
6 665 188 материалов в базе
Настоящий материал опубликован пользователем Каскеев Азамат Канатович. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Ваша скидка на курсы
40%
Курс профессиональной переподготовки
600 ч.
Курс повышения квалификации
36 ч. — 180 ч.
Курс профессиональной переподготовки
300/600 ч.
Мини-курс
3 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.