Главная / Старшие классы / Информатика и ИКТ

"Знакомство с языком разметки гипертекстовых документов HTML"

Скачать
87.5 КБ, 436988.doc Автор: Оюн Ольга Таржайевна, 21 Мар 2015

МБОУ СОШ с.Бай-Даг Эрзинского кожууна Республики Тыва

Урок по информатике

в 9 классе по теме:

«Знакомство с языком разметки гипертекстовых документов HTML»

Учитель информатики: Оюн О.Т.

2013-2014 уч.год.

Тема: «Знакомство с языком разметки гипертекстовых документов HTML»

Цели урока:

  • Обобщить знания по теме «Коммуникационные технологии»;
  • Научиться разрабатывать документы, предназначенные для публикации в; Интернете;
  • Отработать навыки редактирования веб-страниц в кодах HTML;
  • Восприятие компьютера как инструмента обработки и создания информационных объектов;
  • Формирование целостного восприятия окружающего мира.
  • Ход урока

    I. Оргмомент. (проверка готовности учащихся класса и доски к уроку)

    II. Проверка знаний.

    Тест по теме «Информационные технологии», с использование перфокарт

    1. Интернет-адрес - это?

    А) адрес сервера;

    Б) почтовый адрес;

    В) адрес Интернета;

    Г) адрес который имеет каждый компьютер подключенный к Интернету;

    2. Интернет – это?

    А) сводка меню программных продуктов;

    Б) документ в котором хранится вся информация по сети;

    В) глобальная компьютерная сеть, в которой локальные, региональные и корпоративные сети; соединены между собой многочисленными каналами передачи информации;

    Г) соединение нескольких компьютеров в одну локальную сеть.

    3. Сервер – это?

    А) сетевая программа, которая ведет диалог одного пользователя с другим;

    Б) мощный компьютер, к которому подключаются остальные компьютеры;

    В) компьютер отдельного пользователя, подключенный в общую сеть;

    Г) стандарт, определяющий форму представления и способ пересылки сообщения.

    4. Модем – это?

    А) мощный компьютер, к которому подключаются остальные компьютеры;

    Б) устройство, преобразующее цифровой сигналы компьютера в аналоговый телефонный сигнал и обратно;

    В)программа, с помощью которой осуществляется диалог между несколькими компьютерами;

    Г) персональная ЭВМ, используемая для получения и отправки корреспонденции.

    5. Скорость передачи данных – это?

    А) количество информации, передаваемой в одну секунду;

    Б) количество байт информации, передаваемой за одну минуту;

    В) количество байт информации, передаваемой с одного компьютера на другой;

    Г) количество битов информации, передаваемой через модем в единицу времени.

    6. Адресация – это?

    А) способ идентификации абонентов в сети;

    Б) адрес сервера;

    В)почтовый адрес пользователя в сети;

    Г) количество бод (символов/сек), пересылаемой информации Вашим модемом.

    7. Локальные компьютерные сети – это?

    А) сеть, к которой подключены все компьютеры Вашего села;

    Б) сеть, к которой подключены все компьютеры Вашей страны;

    В) сеть, к которой подключены компьютеры Вашего офиса, или кабинета информатики, или одного здания;

    Г) сеть, к которой подключены все компьютеры.

    8. Сетевой адаптер – это?

    А) специальная программа, через которую осуществляется связь нескольких компьютеров;

    Б) специальное аппаратное средство для эффективного взаимодействия персональных компьютеров сети;

    В) специальная система управления сетевыми ресурсами общего доступа;

    Г) система обмена информацией между различными компьютерами.

    9. Домен – это?

    А) часть адреса, определяющая адрес компьютера пользователя в сети;

    Б) название программы, для осуществления связи между компьютерами;

    В) название устройства, осуществляющего связи между компьютерами

    Г) единица измерения информации.

    10. Всемирная паутина - это?

    А) компьютер отдельного пользователя, подключенный в общую сеть;

    Б) перенесение информации с одного компьютера на другой с помощью дискет

    В) передача информации между пользователями о состоянии работы компьютера;

    Г) сотни миллионов Web-серверов Интернета, содержащих большое количество Web – страниц, в которых используется технология гипертекста.

    (сразу проверяются работы и выставляются оценки)

    III. Изучение нового материала. (на доске новые ключевые термины: Тэги, браузеры, контейнеры)

    Использование инструментальных средств создания Веб-страниц недостаточно, если мы хотим создать качественные по стилю и содержанию документы, предназначенные для публикации в сети Интернет. Часто приходится форматировать введенные данные непосредственно в Блокноте, где представлена программа языка гипертекстовой разметки HTML (Hyper Text Markup Language). Если даже нет необходимости создавать страницы на языке HTML надо знать основные тэги для внесения необходимых изменений в уже готовую программу.

    Для работы с HTML документом необходимо пройти подготовительный этап:

    1. Создать персональную папку, где обязательным требованием является использование для имени папки английские буквы;

    2. Создать текстовой документ блокнот;

    3. Открыть документ и сохранить его под новым именем с расширением html или htm.

    4. Закрыть документ;

    5. Открыть html –документ;

    6. Открыть блокнот, выполнив команду Вид/в виде html.

    В папке должны находится два

    Текстовой файл можно будет удалить после создания html-документа. Основными элементами документа являются тэги (или дескрипторы).

    Тэги – управляющие символы, которые определяют вид Web-страницы при её просмотре в браузере.

    Браузерами называются специальные программы для просмотра и создания Web-страниц. (Примеры программ браузеров на стр. 189)

    Контейнеры – это парные тэги содержащие открывающий и закрывающий тэг.

    Каждый тэг ограничен угловыми скобками, и технология предполагает использование открытых и закрытых тэгов, указывающих на начало и конец форматирования определенного блока. Программа состоит из двух частей. В первой части задается заголовок страницы, которая отображается в заголовке окна и первая загружается, при просмотре страницы. Выбор названия заголовка имеет большое значение, т.к. именно по заголовку индексируется страница в поисковых системах. Название заголовка должно отражать суть информационного наполнения страницы.

    (С помощью проектора на экран выводится общий вид программы)

    Общий вид программы:

    <html>
    <head>
    <title>Моя персональная страница</title>
    </head>
    <body>
    Моя страница
    </body>
    </html>

    Основное содержание программы помещается между тэгами <body></body>. Рассмотрим основные тэги.

    (Каждому ученику раздается данная таблица и проектируется на экран).

    Таблица основных тэгов языка HTML

    ТЭГИ

    НАЗНАЧЕНИЕ

    <html></html>

    Указывает программе просмотра страниц, что это HTML документ. Данные тэги обрамляют документ

    <head></head>

    Определяет место, где помещается различная информация, не отображаемая в теле документа. Здесь располагается тэг названия документа и тэги для поисковых машин

    <title></title>

    Помещает название в оглавление программы просмотра страниц

    <body></body>

    Определяет видимую часть документа

    <body bgcolor=…>

    Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB – пример: FF0000 – красный цвет

    <body text=…>

    Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB – пример: 000000 – черный цвет

    <body link=…>

    Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB – пример: 00FF00 – зеленый цвет

    <body vlink=…>

    Устанавливает цвет гиперссылок на которых вы уже побывали, используя значение цвета в виде RRGGBB – пример: 333333 – серый цвет

    <body alink=…>

    Устанавливает цвет гиперссылок при нажатии

    Для создания своей первой страницы недостаточно знать основные тэги. Необходимо научиться форматировать текст соответствующим образом. Для этого используются тэги для форматирования текста. Они представлены в следующей таблице:

    (Каждому ученику раздается данная таблица и проектируется на экран).

    Таблица тэгов для форматирования текста

    ТЭГИ

    НАЗНАЧЕНИЕ

    <hl></hl>

    <hl></hl>

    Задает размер заголовка

    <pre></ pre >

    Обрамляет предварительно отформатированный текст

    <b></b>

    Жирное начертание шрифта

    <i></i>

    Начертание Курсив

    <tt></tt>

    Имитация стиля печатной машинки

    <cite></cite>

    Используется для цитат, обычно наклонный текст

    <strong></ strong >

    Используется для выделения наиболее важных частей текста (наклонный и жирный текст)

    <font size=…></font>

    Устанавливает размер текста в пределах от 1 до 7

    <font color=…></font >

    Устанавливает цвет текста, используя значение цвета в виде

    <p>

    Начало нового абзаца

    <p align=…>

    Выравнивает абзац относительно одной из сторон документа, значения:

    <br>

    Вставляет перевод строки

    <blockquote>

    </ blockquote>

    Создает отступы с обеих сторон текста.

    <ol></ol>

    Создает нумерованный список

    <li>

    Определяет каждый элемент списка и присваивает номер

    <ul></ul>

    Создает ненумерованный список

    <a href=”URL”></a>

    Создает гиперссылку на другие документы или часть текущего документа

    Тэги состоят из ключевых слов и могут быть дополнены атрибутами, разделенным пробелами. Описание атрибутов без использования ключевых слов не допускается

    IV. Закрепление

    Задания выводится на экран.

    Задание 1.

    Составить программу из готовых тэгов, вставив в неё заголовок страницы и содержание программы.

    Задание 2.

    Дана программа на языке HTML определите какие тэги в ней используются и каково их назначение

    <html>
    <head>
    <title>компьютер</title>
    </head>
    <body>
    <i>Компьютер и ПО </i>
    <p><b>комплектующие</b>
    </p>
    </body>
    </html>

    Задание 3 (для более сильных учащихся)

    Набрать данную программу в браузере Mozilla.

    V. Домашнее задание: Практическое задание. Разработать страницу «Мое хобби» с использованием лишь тэгов для форматирования текста.


    Автор: Оюн Ольга Таржайевна
    Похожие материалы
    Тип Название материала Автор Опубликован
    документ "Знакомство с языком разметки гипертекстовых документов HTML" Оюн Ольга Таржайевна 21 Мар 2015
    документ Проверочная работа по теме "Знакомство с языком HTML" Пронько Анна Павловна 21 Мар 2015
    документ Контрольный тест по теме "Язык гипертекстовой разметки документов", 9 класс .. .. Фролова Ирина Геннадьевна 21 Мар 2015
    разное ЦОР интерактивный тест на тему: "язык разметки html" Саенко Сергей Петрович 21 Мар 2015
    разное Методическая разработка "Основы языка разметки гипертекста HTML" 10 класс Чиркова Анна Николаевна 21 Мар 2015
    разное Учебный сайт "Сайтостроение", освещающий технологию разметки гипертекста HTML Жукова Оксана Николаевна 21 Мар 2015
    документ Практическая работа на тему "Язык разметки гипертекста HTML" Адвин Софья Александровна 4 Апр 2015
    разное Тест по теме "Язык гипертекстовой разметки HTML" 8 класс Пайвина Наталья Сергеевна 20 Ноя 2015
    документ Разработка web-сайтов с использованием языка разметки гипертекста HTML Демидова Людмила Альбертовна 21 Мар 2015
    разное Разработка Web-сайтов с использованием языка разметки гипертекста HTML Лезина Алена Владимировна 21 Мар 2015
    разное Занятия по ознакомлению с языком изобразительного искусства "Зимний пейзаж" Посековская Ирина Павловна 31 Мар 2015
    презентация Презентация "Язык разметки гипертекста " Адвин Софья Александровна 1 Апр 2015
    документ Язык разметки гипертекста HTML Все о компьютере , Вихарева Тамара Владимировна 21 Мар 2015
    разное Язык разметки гипертекста HTML Кривенцов Леонид Александрович 21 Мар 2015
    презентация Создание сайта с помощью языка гипертекстовой разметки HTML ( самый крупный) до ( самый мелкий).Заголовок страницы целесообразно выделить самым крупным шрифтом: Моя страничка Выравнивание Принято, чтобы заголовок на странице находился по центру, для э Кемпа Татьяна Владимировна 21 Мар 2015
    презентация Знакомство с алгоритмическим языком стрелок Шевченко Татьяна Алексеевна 31 Мар 2015
    разное "Домашние животные и птицы" игровое пособие с использованием ИКТ для ознакомления детей дошкольного возраста с хакасским языком Сметанкина Тамара Васильевна 30 Мар 2015
    презентация, документ Методическая разработка "Вводный урок "Знакомимся с английским языком" Рагозина Варвара Михайловна 23 Янв 2016
    документ КВН "С русским языком можно творить чудеса!" ( 5 класс) Михеева Людмила Николаевна 20 Мар 2015
    презентация Есенин "Черемуха". Презентация к уроку в 7 классе школы с узбекским языком обучения. Мусурманова Юлия Юрьевна 20 Мар 2015
    документ Есенин. "Черемуха". Урок в 7 классе школы с узбекским языком обучения. Мусурманова Юлия Юрьевна 20 Мар 2015
    документ Конспект внеклассного мероприятия по русскому языку "Хочу дружить я с русским языком" Петрова Татьяна Валентиновна 31 Мар 2015
    документ Занятие по теме: "Хочу дружить я с русским языком" Проворова Ирина Александровна 31 Мар 2015
    документ Разработка урока русского языка в 7 классе с казахским языком обучения по теме "Антонимические пары" Садыкова Бахытгуль Газизкызы 1 Апр 2015
    презентация Внеклассное мероприятие "С русским языком можно творить чудеса" в форме игры брейн-ринг. Двоеглазова Галина Павловна 20 Ноя 2015
    документ Урок русского языка в 7 классе с узбекским языком обучения "Любите ли вы музыку?" Мусурманов Убайдулла Мусурманович 5 Мая 2015
    разное Антинаркотический урок с презентацией "О вреде наркотиков - языком математики" Николаева Нина Алексеевна 10 Июл 2015
    документ План урока русского языка в 8 классе с казахским языком обучения. Тема урока:"Сложные прилагательные" Каргажанова Гульжан Задаевна 7 Дек 2015
    разное Урок с использованием модульной технологии. "Создание, редактирование и форматирование документов" Мурашова Татьяна Юрьевна 21 Мар 2015
    документ Образцы документов работы классного руководителя с "семьями группы риска" Дегтярева Валентина Николаевна 7 Апр 2016
    разное Методическая разработка "Игра как способ активизации познавательной деятельности при изучении коми языка в школах с русским (родным) языком обучения Игнатова Галина Ивановна 20 Мар 2015
    презентация, документ Технологическая карта урока труда "Приемы приклеивания деталей без разметки" Филатова Надежда Михайловна 4 Апр 2015
    документ Выкладывание полного мозаичного изображения. Урок по теме "Способы разметки по лицевой стороне заготовки. Правило укладки мозаики. Стахнёва Галина Николаевна 31 Мар 2015
    документ Рабочая программа "Русский язык как государственный (индивидуальные и групповые занятия с учащимися с неродным русским языком), адаптированная к коррекционно-развивающему обучению в 1-4 классах" Чусова Марина Владимировна 20 Мар 2015
    разное Учебно-методический материал по развитию речи ( старшая группа) по теме: "Домашние животные" пособие с использованием ИКТ по ознакомлению детей дошкольного возраста с хакасским языком Ботина Ирина Сергеевна 6 Апр 2015
    документ Рабочая программа элективного курса «Язык разметки гипертекста HTML» заголовок страницы Все о компьютере Все о компьютере Все о компьютере Все о компьютере Таблицы в html-документе Анкета Свистунова Снежана Владимировна 21 Мар 2015
    документ Межпредметная контрольная работа "Сравнение содержания программных документов декабристов с основными идеями, мотивами, образами их "мятежной" лирики" (9-10 кл.). Васильева Татьяна Анатольевна 7 Апр 2015
    документ Интегрированный урок по математике и русскому языку по теме "Путешествие в страну Числяндию, или как Математика с Русским языком подружились" 6 класс Щурова Любовь Владимировна 20 Мар 2015
    документ Дидактический материал для организации коллективных учебных занятий по русскому языку в 6 классе в школе с государственным (казахским) языком обучения. Модуль "Имя существительное". Аринова Динара Холдаровна 22 Ноя 2015
    документ Таблица "Основные теги HTML" Иванова Наталья Валерьевна 21 Мар 2015