Цели:
Образовательная:
научиться создавать Web-страницы в блокноте.
Воспитательная:
воспитание информационной культуры учащихся, внимательности, аккуратности, дисциплинированности, усидчивости.
Развивающая:
развивать наглядно-образное мышление, память и умение сравнивать и анализировать.
Тип занятия: комбинированный
Технические средства: компьютеры
Программное обеспечение: операционная система Windows, тестовая программа,
программа блокнот, браузер Mozilla Firefox
План урока:
I. Орг. момент.
II. Актуализация знаний.
III. Практическая работа.
Тест.
IV. Домашнее задание
V. Итог урока.
Ход урока:
I. Орг. момент.
Приветствие, проверка присутствующих. Объяснение хода занятия.
II. Актуализация знаний.
Web - это средство представления информации в Интернете. Информация может быть представлена в виде текстов, рисунков, аудио и видеоклипов. В то же время, Web - это технология доступа к информационным ресурсам Интернета, размещенным на множестве Web-серверов. В целом, Web - это гипертекстовая информационная среда, использующая принятый язык разметки гипертекста и поддерживающая различные протоколы Интернета для доступа к его информационным ресурсам. Любой протокол - это набор правил, которые используются компьютерами для обмена информацией. Среди протоколов Интернета самый распространенный - HTTP (Hyper Text Transfer Protoсol). Используются FTP (для присоединения и загрузки файлов), FILE (для доступа к файлам на локальных дисках), протокол для электронной почты и некоторые другие.
Язык HTML (HyperText Markup Language, язык разметки гипертекста) — это язык, на котором создаются Web-страницы. HTML-документы могут просматриваться различными типами Web-браузеров. Когда документ создан с использованием HTML, Web-браузер может интерпретировать HTML для выделения различных элементов документа и первичной их обработки. Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей.
Web-страницы могут быть созданы с помощью
1) обычного текстового редактора;
2) редактора, способного сохранять в формате HTML;
3) специализированного редактора;
4) специализированной системы.
HTML-документы сохраняются на диске как обычные текстовые документы в формате ASCII. Для распознавания Web-страниц по их именам общепринято обозначать такие файлы использованием расширений .HTM (для Windows 3.1) или .HTML (для Windows 95/98/NT/XP, Macintosh и Unix).
Кроме полезного текста в HTML-документах используются специальные управляющие последовательности символов — тэги.
Чаще всего тэги используются попарно, окружая размеченные фрагменты текста. Такие тэги называются контейнерами. Закрывающийся тэг отличается от начального только присутствием символа "/», добавляемого перед именем тэга. При интерпретации тэгов браузер не делает различия между строчными и прописными буквами. Поэтому сами тэги можно набирать на любом регистре. Зачастую параметр (атрибут) является необязательной величиной и его можно пропускать.
III. Практическая работа.
1. Откройте программу Блокнот (Пуск-Программы-Стандартные-Блокнот).
2. Напишите следующий текст(карточки):
<HTML>
<HEAD>
<TITLE>Государственные символы</TITLE>
</HEAD>
<BODY>
<H1> <center>Государственный Герб Республики Казахстан</center> </H1>
<H2> Авторы герба — два известных архитектора Казахстана, Жандарбек Малибеков и Шот-Аман Валиханов</H2>
<MARQUEE BEHAVIOR="SCROLL" DIRECTION="RIGHT"> <IMG SRC="GERB.JPG" width="200" height="200" ></MARQUEE>
<P align="left"> 4 июня 1992 года навсегда останется в истории и в памяти народа как день рождения Государственного Герба Республики Казахстан </P>
<P align="left"> Сегодняшний Герб суверенного Казахстана является результатом огромного труда, творческих исканий двух известных архитекторов: Жандарбека Малибекова и Шоты Уалиханова, выиграть в этом соревновании было нелегко.
Достаточно напомнить, что только в финальном конкурсе принимали участие 245 проектов и 67 описаний будущего герба. </P>
</BODY>
</HTML>
• Обратите внимание, что есть отрытые теги (например <p>) и закрытые теги (например <HTML> </HTML> или <center> </center>)
• Первый и главный тег <HTML> </HTML> - который сообщает браузеру, что сайт написан на языке HTML.
• Тег <HEAD> </HEAD> является заголовочной частью документа и помещается сразу после тега <HTML> .
• Тег <TITLE>текст</TITLE> позволяет дать имя странице, которое будет отображаться в строке заголовка Вашего браузера.
• Между тегами <BODY> </BODY> содержится тело документа - текст, таблицы, рисунки.
• Теги <H1> </H1> и <H2> </H2> соответственно заголовки 1-го и 2-го уровней.
• Тег <center>текст</center> позволяет выровнять текст, помещенный внутри него, по центру страницы.
• В HTML бегущая строка определяется тегами <marquee> </marquee>.
Атрибут BEHAVIOR="" – определяет тип движения текста. При значении alternate текст движется слева направо, достигнув края, меняет направление. При значении scroll бегущая строка, достигнув края, появляется с противоположной стороны. При значении slide бегущая строка останавливается у противоположного края страницы.
Атрибут DIRECTION="" – определяет направление движения текста. Значение down определяет движение текста вниз. Значение up определяет движение текста вверх. При значении left бегущая строка движется справа налево. При right – слева направо.
• Таким же образом может перемещаться изображение:
• Для вставки картинки в страницу применяется тег <IMG>.
Для указания пути к картинке в теге используется параметр SRC=
Вот так будет выглядеть код HTML, при помощи которого можно вставить картинку в страницу HTML:
<IMG SRC="GERB.JPG"> (при условии: страница и картинка находятся в одной папке). WIDTH="" – определяет ширину изображения в пикселях. HEIGHT="" – определяет высоту изображения в пикселях. ALT="" – определяет альтернативный текст.
• Тег </P> указывает на новый абзац. Тег </P> указывает на закрытие нового абзаца. ALIGN="LEFT" – определяет выравнивание текста слева (по умолчанию).
3. Сохраните документ в своей папке:
o Файл-Сохранить Как
o Укажите свою папку
o Дайте имя файлу index.html
4. Откройте файл с помощью Mozilla Firefox и просмотрите результат.
IV. Тест
1. Кто выполняет HTML-программу?
а) Браузер
б) Человек
в) Компилятор
г) Операционная система
2. Записывая на HTML абзац, между двумя соседними словами вы поставили пять пробелов. Сколько пробелов вы увидите в браузере?
а) Пять
б) Один
в) Ни одного
г) Два
3. Голова документа задается тегами:
а) <HTML> </HTML>
б) <BODY> </BODY>
в) <HEAD> </HEAD>
г) <TITLE> </TITLE>
4. Записывая на HTML свое имя, вы написали так:
<P>
Государственный
Герб
</P>
Как покажет этот текст браузер?
а) В одну строку с одним пробелом
б) В одну строку с двумя пробелами
в) В две строки
г) Не покажет вовсе
5. HTML (HYPER TEXT MARKUP LANGUAGE) является:
а) Одним из средств при создании Web-страниц
б). Системой программирования
в). Графическим редактором
г). Системой управления базами данных
6. Какие команды способны изменить цвет шрифта.
а) команда <HTML>...</HTML>
б) команда <BODY>...</BODY>
в) команда <FONT>...</FONT>
г) команда <P>...</P>
7. Web-страница (документ HTML) представляет собой:
а) Текстовый файл с расширением txt или doc
б). Текстовый файл с расширением htm или html
в) Двоичный файл с расширением com или exe
г) Графический файл с расширением gif или jpg
8. В HTML бегущая строка определяется тегам:
а) COLOR
б) MARQUEE
в) FACE
г) TITLE
9. В какой тег заключается основное содержание web-страницы?
а) <HTML> </HTML>
б) <HEAD> </HEAD>
в) <TITLE> </TITLE>
г) <BODY> </BODY>
10. При помощи какого атрибута команды <P> можно изменить выравнивание абзаца по горизонтали:
а) ALIGN
б) CENTER
в) BR
г) RIGHT
11. Укажите значение атрибута команды <P> и для выравнивания абзаца по левому краю:
а) атрибут LEFT
б) атрибут RIGHT
в) атрибут CENTER
г) атрибут JUSTIFY
12. Каким тегом задается вставка изображения на web-страницу?
а) <FONT COLOR="..."> </FONT>
б) <IMG SRC="/...">
в) <A HREF="/..."> </A>
г) <A NAME="..."></A>
13. В каком коде абзац " Авторы герба " выровнен по центру:
а) <BODY> <H3 ALIGN = "CENTER"> АВТОРЫ ГЕРБА </H3> </BODY>
б) <BODY> <Р ALIGN = "CENTER"> АВТОРЫ ГЕРБА </Р> </BODY>
в) <BODY> <FONT ALIGN = "CENTER"> АВТОРЫ ГЕРБА </FONT> </BODY>
г) <BODY> < ALIGN = "CENTER"> АВТОРЫ ГЕРБА </H3> </BODY>
V. Домашнее задание
Записи в тетради.
VI. Итог урока.
Подведение итога занятия. Просмотреть выполненные задания и тест.
Добавил : Пойманов А. А. учитель информатики школы Гани Муратбаева
e-mail: blad20010@mail.ru
| 
