Коллеги - педагогический журнал Казахстана
Учительские университеты
| Главная » Статьи » В помощь учителю » Компьютер-бум |
HTML - программирование. Создание Web - страниц в блокноте.
| 11 класс. Тема: HTML - программирование. Создание Web - страниц в блокноте. Цели: Образовательная: научиться создавать 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 | |
| Просмотров: 916 | |
Среда, 2024-12-18, 11:26 AM
Приветствую Вас Гость
Приветствую Вас Гость
Форма входа |
|---|
Социальные закладк |
|---|
Поиск |
|---|
Друзья сайта |
|---|
Теги |
|---|
Статистика |
|---|