kopilkaurokov.ru - сайт для учителей

Создайте Ваш сайт учителя Курсы ПК и ППК Видеоуроки Олимпиады Вебинары для учителей

Основы языка разметки гипертекста HTML. Списки.

Нажмите, чтобы узнать подробности

Тема урока: Основы языка разметки гипертекста HTML. Списки.

Цель: Использование основ языка разметки гипертекста  HTML при оформлении списков и Web-конструировании.

Задачи:

Образовательная: вспомнить назначение языка разметки гипертекста HTML, основных тегов и их атрибутов; научить обучающихся оформлять и использовать списки при создании Web-страниц.

Развивающая: способствовать развитию информационной культуры; развивать эмоциональную сферу:  формировать положительные эмоции  к процессу обучения.

Воспитательная: воспитывать уважение и  умение сотрудничать с окружающими людьми, трудолюбие  и добросовестность, воспитывать  интерес  к занятиям информатикой  как возможной области будущей практической деятельности.

Тип урока: Урок усвоения новых знаний и применение их на практике.

Просмотр содержимого документа
«Основы языка разметки гипертекста HTML. Списки.»

Предмет: Информатика и ИКТ

Группа: 10 класс

Тема урока: Основы языка разметки гипертекста HTML. Списки.

Цель: Использование основ языка разметки гипертекста HTML при оформлении списков и Web-конструировании.

Задачи:

Образовательная: вспомнить назначение языка разметки гипертекста HTML, основных тегов и их атрибутов; научить обучающихся оформлять и использовать списки при создании Web-страниц.

Развивающая: способствовать развитию информационной культуры; развивать эмоциональную сферу:  формировать положительные эмоции  к процессу обучения.

Воспитательная: воспитывать уважение и  умение сотрудничать с окружающими людьми, трудолюбие  и добросовестность, воспитывать  интерес  к занятиям информатикой  как возможной области будущей практической деятельности.

Тип урока: Урок усвоения новых знаний и применение их на практике.

Оборудование: 1. Современные компьютеры.

                            2. Мультимедийный проектор.

Оснащение:       Презентация Power Point.

                             Раздаточный материал для обучающихся.

Программное обеспечение: ОС Windows, браузер.

Список использованной литературы:    

1. Угринович, Н. Д. Информатика и ИКТ. Базовый уровень. Учебник 10 класса / Н. Д. Угинович. – 10-е изд. – М.: БИНОМ. Лаборатория знаний, 2013. – 213 с. : ил.

Продолжительность проведения: один урок по 45 минут.

 Ход занятия   

  1. Организационный момент

Учитель: Здравствуйте, ребята! На прошлых уроках мы уже начали изучать язык разметки гипертекста HTML. Познакомились с основными тегами, разобрали структуру html-документа. А как вы это усвоили на практике, мы проверим во второй половине нашего урока.

(Демонстрация презентации, 1 слайд).

  1. Этап подготовки обучающихся к активному сознательному усвоению знаний.

Учитель: А сейчас предлагаю вспомнить некоторые понятия (беседа с обучающимися).

Гипертекст – структура, позволяющая устанавливать смысловые связки между элементами текста и другими документами.

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

Гиперссылка – фрагмент текста, который является указателем на другой файл или объект

Браузер — программное обеспечение для просмотра веб-сайтов.


  1. Этап усвоения новых знаний.

Учитель: Тема сегодняшнего урока «Списки». Скажите, пожалуйста, какие виды списков вам известны?

Возможные ответы учеников: маркированный, нумерованный и список определений.

Учитель: Для начала рассмотрим два основных вида списков.

    1. Теги и атрибуты для создания списков на Web-странице.

3.1.1 Тэги

Учитель: Для создания маркированного списка используется контейнер

    . Тэг
  • – тег элемента списка.

    Пример:

    • первый элемент
    • второй элемент

    Результат:

      • первый элемент

      • второй элемент



    Учитель: Для создания нумерованного списка используется контейнер ol. Тэг

  • – тег элемента списка.

    Пример:

    ol

  • первый элемент
  • второй элемент
  • Результат:

    1. первый элемент

    2. второй элемент


    (Обучающиеся в процессе рассказа учителя записывают основные моменты, демонстрация презентации,  3  слайд).

    3.1.2 Атрибуты

    Учитель: Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора стиля маркера используется атрибут type тега 

      .

      Тип списка

      Код HTML

      Пример

      Список с маркерами в виде круга

         type="disc"
      • ...

      • Первый

      • Второй

      • Третий

      Список с маркерами в виде окружности

         type="circle"
      • ...

      • Первый

      • Второй

      • Третий

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

        type="square"
      • ...

      • Первый

      • Второй

      • Третий



      Учитель: Для указания типа нумерованного списка применяется атрибут type тега 

        . Чтобы начать список с определенного значения, используется атрибут start тега 
          .

          Тип списка

          Код HTML

          Пример

          Арабские числа

            type="1"
          1. ...

          1. Чебурашка
          2. Крокодил Гена
          3. Шапокляк

          Прописные буквы латинского алфавита

            type="A"
          1. ...

          A. Чебурашка
          B. Крокодил Гена
          C. Шапокляк

          Строчные буквы латинского алфавита

            type="a" 
          1. ...

          a. Чебурашка
          b. Крокодил Гена
          c. Шапокляк

          Римские числа в верхнем регистре

            type="I"
          1. ...

          I. Чебурашка
          II. Крокодил Гена
          III. Шапокляк

          Римские числа в нижнем регистре

            type="i"
          1. ...

          i. Чебурашка
          ii. Крокодил Гена
          iii. Шапокляк



          (Обучающиеся в процессе рассказа учителя записывают основные моменты, демонстрация презентации,  4, 5  слайд).

          3.2 Список определений

          Учитель: Список определений состоит из двух элементов — термина и его определения. Сам список задается с помощью контейнера , термин — тегом , а его определение — с помощью тега .

          Термин 1

          Определение 1

          Термин 2

          Определение 2

          Пример:

          Тег

          Тег — это специальный символ разметки, который применяется для вставки различных элементов на веб-страницу таких как: рисунки, таблицы, ссылки и др., и для изменения их вида.

          HTML-документ

          Обычный текстовый файл, который может содержать в себе текст, теги и стили. Изображения и другие объекты хранятся отдельно. Содержимое такого файла обычно называется HTML-код.

          Сайт

          Cайт — это набор отдельных веб-страниц, которые связаны между собой ссылками и единым оформлением.


          Результат:

          (Демонстрация презентации,  6,7 слайд).


          4. Этап закрепления знаний.

          4.1. Индивидуальная работа на компьютере:

          Практическая работа:

          1. Разбор и оформление примера с использованием списков в web-страницу.


          1. Проверка изученного материала на тему форматирования документа: Изменить пример из задания 1 в соответствии с подписями (в качестве результата можно показать пример, рисунок).



          Ответ:

          li bжирностьb li

        1. наклон
        2. liUподчеркиваниеU li

        3. индексы
          • нижние
          • верхние
          • liUподчеркиваниеU li

        4. цвет
        5. ul

          ….

          (Демонстрация презентации, 8,9 слайд)


          3. Создайте новую страницу в редакторе блокнот. В элемент укажите «Создание списков» и вашу фамилию. Отформатируйте текст по заданию:

          Солнце должно быть: (шрифт размером 7, красного цвета, выравнивание по центру)

          1. Теплым.

          2. Круглым.

          3. Желтым.

          Снег должен быть: (выравнивание по центру, размер шрифта 7, синего цвета)

          А. Белым

          B. Холодным

          C. Пушистым



          Подведение итогов: учитель демонстрирует лучшие работы, обращает внимание на ошибки, сообщает оценки за работу на ПК.

          4. (можно на домашнее задание) Создайте страницы со следующими списками:

          Перечень покупок:

              • Говядина -1кг

              • Масло сливочное -500 г

              • Хлеб - 2 батона

              • Молоко - 1 литр

          Алгоритм вычисления дробей:

              1. очистить экран

              2. ввести значения X и Y

              3. если , вернуться к пункту 2

              4. вычислить

              5. вывести результат z

          (Демонстрация презентации, 8-11 слайд)

          5. Этап информации о домашнем задании.

          Учитель.  1Параграф 2.13 задание 4 (кто не успел)

          (Демонстрация презентации, 12 слайд).

          Спасибо за урок! До свидания, ребята.




Получите в подарок сайт учителя

Предмет: Информатика

Категория: Уроки

Целевая аудитория: 10 класс

Скачать
Основы языка разметки гипертекста HTML. Списки.

Автор: Журавлева Мария Сергеевна

Дата: 03.12.2019

Номер свидетельства: 529959



ПОЛУЧИТЕ СВИДЕТЕЛЬСТВО МГНОВЕННО

Добавить свою работу

* Свидетельство о публикации выдается БЕСПЛАТНО, СРАЗУ же после добавления Вами Вашей работы на сайт

Удобный поиск материалов для учителей

Ваш личный кабинет
Проверка свидетельства