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

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

  1. Главная
  2. Информатика
  3. Уроки
  4. Конспект урока по теме "Язык HTML. Создание списка"

Конспект урока по теме "Язык HTML. Создание списка"

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

Конспект урока по информатике "Язык HTML. Создание списка".Предназначен для учащихся девятого класса.УМК: Угринович.Тип урока изучение нового материала.Для усвоения изученой темы имеется практическая работа.Конспект урока расчитан на 40 минут урока.Конспект урока соответствует учебнику.

Просмотр содержимого документа
«Конспект урока по теме "Язык HTML. Создание списка"»

Конспект урока, проведенного в 9 классе.

Тема: «Язык HTML. Создание списка».


Цель урока: закрепить знания об общих принципах работы в HTML документе, научиться создавать маркированные, нумерованные, вложенные списки и списки определений. 

Задачи урока: 

образовательные:

-практическое применение изученного материала;

- формирование представления о маркированном и нумерованном списке в HTML документе;

-изучение особенностей записи логических выражений в электронных таблицах;

развивающие:

-развитие познавательного интереса, речи и внимания учащихся;

-развитие коммуникационной компетентности у учащихся;

-развитие умения применять полученные знания для;

воспитательные:

-воспитание творческого подхода к работе;

-профессиональная ориентация и подготовка к трудовой деятельности.

Оборудование: программное обеспечение: стандартная программа Блокнот; мультимедийный проектор, интерактивная доска.

Ход урока:

№

Этап занятия

Содержание

I.

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


  1. Сообщение темы и цели занятия

Здравствуйте ребята.


(1 слайд) Тема сегодняшнего нашего урока «Язык HTML. Создание списка». Откройте тетради и запишите тему урока.

II.

Актуализация знаний учащихся

1. Ответы учащихся на поставленные вопросы по пройденной теме.

На прошлом уроке вы уже начали знакомиться с языком HTML и изучили создание таблиц. Давайте с вами проверим как вы выполнили домашнее задание. Я буду задавать вам вопросы, а вы поднимайте руку и отвечайте. Что такое HTML?(Язык разметки гипертекста).Что такое тег?(Элемент HTML, представляющий из себя текст, заключенный в угловые скобки).Чем отличается открывающийся тег от закрывающего?(Перед закрывающимся тегом ставиться знак /). Какой тег используется для вставки таблицы в HTML документе?(Table).Какой тег обозначает столбец таблицы? (TD).А столбец таблицы какой тег обозначает?(TR).Какой атрибут обозначает выравнивание таблицы на странице?(Align). Какое значение принимает выравнивание таблицы на странице?(Left, Center, Right).

III.

Изучение нового материала

  1. Структура списка.





  1. Маркированный список.














































































  1. Нумерованный список.



















































































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








  1. Вложенный список.

Сегодня мы с вами продолжаем работать с языком HTML. Очень часто определенную информацию на сайте необходимо представить в виде списков. Списки позволяют упорядочить и систематизировать различную информацию и представить ее для посетителя в удобном виде. Списки в HTML могут быть четырех разновидностей: маркированные списки, нумерованные списки, вложенные списки и списки определений. Рассмотрим, как их создавать по порядку.


(2 слайд) Данный вид списка используется наиболее часто. Маркированный список в HTML создается при помощи тегов

  • . При этом напротив каждого элемента списка добавляется маркер, по умолчанию это маркер в виде кружка. При помощи тегов
      создается контейнер, внутри которого располагаются элементы списка:
      .

      Каждый пункт списка начинается с маркера, в качестве маркера может использоваться закрашенный кружок (используется по умолчанию), окружность или квадратик. У тега

        есть атрибут type, при помощи которого, и задается стиль маркера. Данный атрибут имеет следующие значения:

        • disc - круг;

        • circle - окружность;

        • square - квадрат.

        Значение disc используется по умолчанию.

        (3 слайд) Структура маркированного списка будет выглядеть так:

        • Вариант 1

        • Вариант 2

        • Вариант 3

        • Вариант 1

        • Вариант 2

        • Вариант 3

        (4 слайд) Пример создания маркированного списка с маркерами в виде окружности:

          type="circle"

        • Вариант 1

        • Вариант 2

        • Вариант 3

        В результате список примет, следующий вид:

        • Вариант 1

        • Вариант 2

        • Вариант 3

        (5 слайд) Создание маркированного списка с маркерами в виде квадратиков:

          type="square"

        • Вариант 1

        • Вариант 2

        • Вариант 3

        Список будет иметь вид:

        • Вариант 1

        • Вариант 2

        • Вариант 3

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

        (6 слайд) Атрибут type можно применять не только к тегу

          , но и к тегу
        • . Таким образом можно создать список с разнообразными маркерами.

            LI type="disc"Вариант 1LI

          • type="circle"Вариант 2

          • type="square"Вариант 3

          В результате получится следующее:

          • Вариант 1

          • Вариант 2

          • Вариант 3

          Нумерованные списки в HTML представляют собой списки, в которых каждый пункт имеет порядковый номер, (7 слайд) создаются нумерованные списки при помощи тега

            и вложенных в его тегов

            1. Первая строчка

            2. Вторая строчка

            3. Третья строчка

            Выглядит такой список следующим образом:

            1. Первая строчка

            2. Вторая строчка

            3. Третья строчка

            (8 слайд) (По умолчанию нумерация производится арабскими цифрами. Но у тега

              есть атрибут type, при помощи значений которого нумерацию можно делать заглавными (type="A") или строчными (type="a") латинскими буквами, римскими цифрами в верхнем (type="I") и нижнем (type="i") регистре.

              Ниже приведены сокращенные варианты кода, и вид нумерации который может быть в том или ином случае.

              (9 слайд) Нумерация арабскими цифрами:

                type="1"

              1. ...

              Вид списка:

              1. Первая строчка

              2. Вторая строчка

              3. Третья строчка

              (10 слайд) Нумерация заглавными латинскими буквами:

                type="A"

              1. ...

              Вид списка:

              1. Первая строчка.

              2. Вторая строчка.

              3. Третья строчка.

              (11 слайд) Нумерация строчными буквами латинского алфавита:

                type="a"

              1. ...

              Вид списка:

              1. Первая строчка.

              2. Вторая строчка.

              3. Третья строчка.

              (12 слайд) Нумерация римскими цифрами в верхнем регистре:

                type="I"

              1. ...

              Вид списка:

              1. Первая строчка.

              2. Вторая строчка.

              3. Третья строчка.

              (13 слайд) Нумерация римскими цифрами в нижнем регистре:

                type="i"

              1. ...

              Вид списка:

              1. Первая строчка.

              2. Вторая строчка.

              3. Третья строчка.

              (14 слайд) Список определений задает тег DL, имеющий следующую структуру:

              DL

              DTТермин

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

              DTТермин

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

              …

              DL

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

              1. Деревья

                • ДУБ

                • КЛЕН

                • ГРАБ

              2. Цветы

                • АСТРА

                • РОЗА

                  LIЛИЛИЯ UL

    IV.

    Закрепление нового материала(Выполнение практической работы за компьютером).


      1. Задание № 1.













































      1. Задание №2.














































      1. Задание №3.

    Для закрепления материала давайте с вами выполним несколько заданий.

    Присаживаемся за компьютеры. Начинаем выполнять практическую работу.

    Внимательно прочтите задание!

    Задание№1.

    1. Создайте новую страницу в редакторе блокнот.

    2. В элемент title укажите «Практическая работа» и вашу фамилию.

    3. Отформатируйте текст по заданию:

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

          1. Теплым.

          2. Круглым.

          3. Желтым.

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

    А. Белым

    B. Холодным

    C. Пушистым (шрифт списков черный, размер 3)

    Решение:

    Content =”text/html; charset = windows – 1251”

    практическая работа. ФИО.

    Солнце должно быть:

    1. Теплым

    2. Круглым

    3. Желтым

      Снег должен быть:

      1. Белым

      2. Холодным

      3. Пушистым


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

    Информатика 9 класс ФГОС

    Информатика 5 класс ФГОС

    Электронная тетрадь по информатике 7...

    Информатика 8 класс ФГОС

    Электронная тетрадь по информатике 8...

    Информатика 10 класс (Россия)

    Электронная тетрадь по информатике 5...

    Информатика 7 класс (Россия)

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

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

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

    Скачать
    Конспект урока по теме "Язык HTML. Создание списка"

    Автор: Заболотняя Екатерина Владимировна

    Дата: 27.02.2016

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

    Похожие файлы

    object(ArrayObject)#852 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(159) "Конспект урока по информатике "Добавление таблиц, оформление рисунков на Web-страницах" "
    ["seo_title"] => string(93) "konspiekt-uroka-po-informatikie-dobavlieniie-tablits-oformlieniie-risunkov-na-web-stranitsakh"
    ["file_id"] => string(6) "104059"
    ["category_seo"] => string(11) "informatika"
    ["subcategory_seo"] => string(5) "uroki"
    ["date"] => string(10) "1402663191"
  }
}

    object(ArrayObject)#874 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(109) "Конспект урока на тему: Создание веб-страницы: Мир животных "
    ["seo_title"] => string(64) "konspiekt-uroka-na-tiemu-sozdaniie-vieb-stranitsy-mir-zhivotnykh"
    ["file_id"] => string(6) "108791"
    ["category_seo"] => string(11) "informatika"
    ["subcategory_seo"] => string(5) "uroki"
    ["date"] => string(10) "1403861222"
  }
}

    object(ArrayObject)#852 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(43) "Изучение основ языка HTML"
    ["seo_title"] => string(26) "izuchieniieosnoviazykahtml"
    ["file_id"] => string(6) "269918"
    ["category_seo"] => string(11) "informatika"
    ["subcategory_seo"] => string(5) "uroki"
    ["date"] => string(10) "1450952784"
  }
}



    Распродажа видеоуроков!
    1250 руб.
    1920 руб.
    1250 руб.
    1920 руб.
    Смотреть все комплекты
    Курсы ПК и ППК для учителей!
    Смотреть все курсы
    ПОЛУЧИТЕ СВИДЕТЕЛЬСТВО МГНОВЕННО

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

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

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

    Восстановить пароль
    Регистрация
    Проверка свидетельства