Коллеги - педагогический журнал Казахстана
Наша библиотека
| Главная » Файлы » В помощь учителю » Информатика |
Разработка урока "Введение в язык HTML. Редакторы HTML" 9 класс
| [ Скачать с сервера (927.6 Kb) ] | 2013-01-13, 9:44 PM |
Разработка урока "Введение в язык HTML. Редакторы HTML" 9 класс КГУСО школа-лицей №7, г.Семей, ВКО Учитель информатики: Сангалиева Г.К. Дата проведения: __________________ Предмет: информатика Класс: 9 Тема урока: Введение в язык HTML. Редакторы HTML. Цель урока: Изучить язык HTML и уметь создавать с его помощью Web-страницы. Задачи урока: 1.познакомить с новыми понятиями языка HTML; научить создавать Web-документы. 2.развитие познавательного интереса, логического мышления, навыков работы языком HTML. 3.воспитать бережное отношение к компьютеру, к своему рабочему месту, осознание своей значимости в образовательном процессе. Тип урока (форма проведения урока): лекционно-демонстрационный Методы обучения: словесный – рассказ с элементами беседы и практики. Оборудование (средства обучения): демонстрации. Ход урока 1. Организационный момент. Повторение ТБ. 2. Практическое задание. 3. Подведение итогов. 4. Домашнее задание. 1. Приветствие. Техника безопасности. Требования безопасности во время работы •При появлении изменений в функционировании аппаратуры, самопроизвольного ее отключения необходимо немедленно прекратить работу и сообщить об этом преподавателю. •Контролировать расстояние до экрана и правильную осанку. •Не допускать работы на максимальной яркости экрана дисплея. Запрещается: •Эксплуатировать неисправную технику. •При включенном напряжении сети отключать, подключать кабели, соединяющие различные устройства компьютера. •Работать с открытыми кожухами устройств компьютера. •Касаться экрана дисплея, тыльной стороны дисплея, разъемов, соединительных кабелей, токоведущих частей аппаратуры. •Касаться автоматов защиты, пускателей, устройств сигнализации. •Во время работы касаться труб, батарей. •Самостоятельно устранять неисправность работы клавиатуры. •Передвигать системный блок и дисплей. •Брать сумки, портфели за рабочее место у компьютера. •Класть какие-либо предметы на системный блок, дисплей, клавиатуру. •Работать грязными, влажными руками, во влажной одежде. •Работать при недостаточном освещении. •Работать за дисплеем дольше положенного времени. Запрещается без разрешения преподавателя: •Включать и выключать компьютер, дисплей. •Подключать кабели, разъемы и другую аппаратуру к компьютеру. •Пользоваться преподавательским компьютером. Требования безопасности по окончанию работы: По окончании работы выполнить действия строго по указанию преподавателя. 2. Объяснение нового материала: Основные понятия. (Объяснение с помощью презентации) На данном уроке вы познакомитесь с языком, разработанным специально для создания Web-страниц – язык HTML (HyperText Markup Language – язык гипертекстовой разметки). Для создания HTML-документов можно использовать любой текстовый редактор (Блокнот, WORD). Мы будем использовать Блокнот. Для начала познакомимся с основными понятиями языка HTML: Язык HTML основан на использовании тэгов. Тэги – это команды, которые указывают браузеру, где и как расположить на странице текст и картинки, а так же позволяют организовывать ссылки на другие документы. Для того, чтобы браузер не путал тэги с текстом, их выделяют треугольными скобками (<, >). Большинство тэгов используется парами: первым идет открывающий тэг. Он объясняет браузеру, что делать с последующим текстом (<тэг>). Затем следует закрывающий тэг, который указывает на область действия первого (</тэг>). Атрибуты добавляются в тэг для расширения или модификации его действий. К одному тэгу можно добавить несколько атрибутов. Атрибуты тэга следуют после имени тэга и разделяются пробелом. Порядок следования не важен. Рассмотрим, из чего в основном состоит HTML-документ. Сам документ ограничивается тэгами <html> и </html> - браузер должен знать, где страница начинается и где заканчивается. Состоит из заголовка (тэги <head> и </head>), содержащих различную информацию о документе и тело документа (тэги <body> и </body>), т. е. того, что находится в окне браузера. В заголовке находится заглавие (название) страницы (тэги <title> и </title>). Слайд 4. Работа с текстом. Текст вашего HTML-документа можно форматировать с помощью тэгов: <B>…</B> – жирный шрифт. <I>…</I> – курсив. <FONT>…</FONT> – изменение цвета, размера и начертания шрифта. Язык HTML имеет 6 уровней заголовков разделов страницы, имеющих номера от 1 до 6. Отличаются заголовки от текста и между собой толщиной и высотой букв. В заголовке <h1> самые крупные символы, в <h6> - самые маленькие. Абзацы в тексте выделяются тэгами <p> и </p>. При просмотре браузером абзацы отделяются друг от друга пустой строкой. Чтобы перейти на новую строку, не прерывая абзаца (т. е., чтобы не вставлять пустую строку между абзацами) применяется тэг <br>. Закрывающего тэга у него нет. И заголовки и абзацы по умолчанию выровнены по левому краю страницы. Атрибут align позволяет выровнять текст по центру или по правому краю страницы. Аналогично форматируются заголовки. Сразу несколько заголовков и абзацев можно выровнять по центру тэгом <center>… </center>. Работа с фоном, вставка графических изображений. Цвет фона определяется значением атрибута bgcolor (цвета приведены в путеводителе Таблица 2) тэга <body>. В HTML-документ можно вставить рисунок. Для этого используют изображение в формате .gif, .jpg или .jpeg. Тэг вставки рисунка: <img src=”Рисунок.jpg”>. Вокруг рисунка можно нарисовать рамку. Для этого используем атрибут border=”n”, где n – толщина рамки в пикселях. При n=0 рамка не рисуется. Картинку, как и текст можно выровнять по левому, правому краям и по центру - атрибут align. Бегущая строка и ссылка. В будущую web-страницу можно вставить бегущую строку с помощью тега <marquee>… </marquee>. Атрибуты тега <marquee>… </marquee>: height=“n” – высота бегущей строки n пикселей; width=“m” - ширина бегущей строки m пикселей; bgcolor=“цвет”> - цвет фона бегущей строки. Ссылки – инструмент, позволяющий связывать мужду собой различные документы. Описывается ссылка тэгом <A HREF>… </A>. Существует 2 вида ссылок: текстовая и графическая ссылки. Текстовая ссылка: <A HREF=“страница2.html”> текст-ссылка </A> Графическая ссылка: <A HREF=“страница2.html”> <IMG SRC=“рисунок.jpeg”> </A> Внимание! Браузер чувствителен к регистру ссылок и к расширению документов. Результат – не рабочая ссылка. Полностью разработку можно скачать с архива | |
| Просмотров: 3883 | Загрузок: 467 | Комментарии: 2 | | |
Понедельник, 2026-03-16, 1:28 PM
Приветствую Вас Гость
Приветствую Вас Гость
Форма входа |
|---|
Категории раздела | |||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Социальные закладк |
|---|
Поиск |
|---|
Друзья сайта |
|---|
Теги |
|---|
Статистика |
|---|