Коллеги - педагогический журнал Казахстана

Учительские университеты

Главная » Статьи » В помощь учителю » Компьютер-бум

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
Категория: Компьютер-бум | Добавил: blad (2017-01-23) E
Просмотров: 705 | Рейтинг: 4.0/2
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Понедельник, 2022-11-28, 7:07 PM
Приветствую Вас Гость

Форма входа

Категории раздела

Русский язык и литература [1611]
Школьный психолог [547]
История [783]
Опыт [554]
Научная кафедра [234]
Воспитание души [262]
Мастер-класс [251]
Семья и школа [201]
Компьютер-бум [271]
Английский язык [876]
Великие открытия [30]
Университет здоровья [142]
Математика [1278]
Химия [406]
Классному руководителю [701]
Биология [612]
Думаем, размышляем, спорим [113]
Казахский язык и литература [1894]
Краеведение [108]
Начальная школа [4177]
Беседы у самовара [26]
Мировая художественная культура [49]
Новые технологии в обучении [409]
Сельская школа [84]
Профильное обучение [89]
Демократизация и школа [34]
Физика [323]
Экология [198]
Дошколенок [1768]
Особые дети [330]
Общество семи муз [66]
Школа и искусство
Уроки музыки [668]
Авторские разработки учителя музыки СШ № 1 г. Алматы Арман Исабековой
География [494]
Мой Казахстан [248]
Школьный театр [84]
Внеклассные мероприятия [1275]
Начальная военная подготовка, гражданская оборона, основы безопасности жизнедеятельности [107]
ИЗО и черчение [233]
Физическая культура [591]
Немецкий язык [61]
Технология [321]
Самопознание [445]
Профессиональное образование [133]
Школьная библиотека [93]
Летний лагерь [26]
Дополнительное образование [70]
Педагогические программы [24]

Социальные закладк

Поиск

Друзья сайта

Академия сказочных наук

  • Теги

    презентация Ирина Борисенко открытый урок информатика флипчарт животные новый год 9 класс 5 класс творчество Казахские пословицы проект конспект урока 6 класс физика язык класс педагогика стихи Казахстан математика урок праздник наурыз познание мира музыка доклад программа литература география природа сценарий семья воспитание классному руководителю осень игра казахский язык и литература викторина Начальная школа тест конкурс ИЗО внеклассная работа литературное чтение Русский язык 3 класс технология воспитательная работа сказка Здоровье Оксана 8 марта искусство независимость английский язык психология учитель 3 класс биология статья внеклассное мероприятие классный час ЕНТ выпускной школа 1 класс Русский язык ЕГЭ тесты химия начальные классы Дети экология Дошкольники любовь разработка урока казахский язык самопознание Английский родители br конспект спорт критическое мышление патриотизм дружба дошколенок История обучение тренинг разработка 7 класс физическая культура игры КВН занятие детский сад физкультура Абай коучинг

    Статистика

    Рейтинг@Mail.ru