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

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

  1. Главная
  2. Информатика
  3. Уроки
  4. HTML списки

HTML списки

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

Данная практическая работа является третьей практической работой из общего цикла «Мой первый сайт». 

  В этих работах рассматривались технологии по созданию структуры сайта и вывода на на web-страницах текстовой информации с заданием различных параметров шрифта. В данной работе рассматриваются основные теги по созданию и оформление различных структур, типа «Список».

 

Вы уже знаете о суперспособностях современного учителя?
Тратить минимум сил на подготовку и проведение уроков.
Быстро и объективно проверять знания учащихся.
Сделать изучение нового материала максимально понятным.
Избавить себя от подбора заданий и их проверки после уроков.
Наладить дисциплину на своих уроках.
Получить возможность работать творчески.

Просмотр содержимого документа
«HTML списки »

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ КРАСНОДАРСКОГО КРАЯ

ГБПОУ КК «КОЛЛЕДЖ ЕЙСКИЙ»







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


Мой первый сайт







Разработал

преподаватель информатики

Караваев Игорь Григорьевич



















г. Ейск

2014 г.

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

HTML списки



Цели работы:

Обучающая: способствовать формированию знаний учащихся по созданию и редактированию списков на сайте.

Воспитательная: формирование системного мышления, восприятия компьютера как инструмента информационной деятельности человека.

Развивающая: развитие познавательного интереса, творческой активности учащихся.



Задачи работы:

  • Рассмотреть основные технологические приемы по созданию и оформлению списков на странице сайта при помощи тегов языка HTML.

Оборудование: ПК, текстовый редактор «Блокнот» либо «Wordpad», любой действующий браузер.

Теоретическая часть практической работы

Данная практическая работа является третьей практической работой из общего цикла «Мой первый сайт». Первые две практические работы можно найти и открыть по адресам:

http://kopilkaurokov.ru/informatika/uroki/131520 - «Мой первый сайт»

http://kopilkaurokov.ru/informatika/uroki/132776 - «Работа со шрифтами в HTML

В этих работах рассматривались технологии по созданию структуры сайта и вывода на на web-страницах текстовой информации с заданием различных параметров шрифта. В данной работе рассматриваются основные теги по созданию и оформление различных структур, типа «Список».

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

  1. Окно приложения WordPad и напечатать там первые теги, которые необходимы для задания структуры сайта. Сохранить этот документ с расширением – HTML

Если кто-то выполнял предыдущие работы и сохранил файлы с кодом сайта, то можно не создавать заново структуру сайта, указанную на картинке, а сразу в первом окне текстовым редактором открыть этот код сайта.

  1. Второе окно браузера, в котором открыть сохраненный текст на предыдущем шаге.

Р
азместить оба эти окна на экране, как показано на рисунке:



Поскольку вторая работа завершилась на шаге №30, эта работа, как продолжение, начнется сразу с шага №31.

При выполнении работы, набирайте каждый тег, заданный в очередном задании, в отдельной строке текстового редактора, сохраняйте документ командой «Сохранить» и обновляйте страницу браузера. Это позволит вам видеть действие каждого тега.

Основные теги для создания списков:


– определяют маркированный HTML список.

    • – определяют элементы (пункты) маркированного HTML списка.

    Эти теги можно использовать без дополнительных параметров, тогда на странице сайта будут выводиться стандартные списки. Но можно задавать дополнительные параметры, что бы изменять типы номеров или маркеров, а так же оформлять многоуровневые списки.



    Ход работы



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

      1. Стандартный маркированный список



    • Один

    • Два

    • Три

    ul

    li Один li

    li Два li

    li Три li


      1. Определяем тип маркера для элементов маркированного HTML списка:

    • Один

    • Два

    • Три

      type="circle"

    • Один

      • li Два li

      li Три li

      ul

      • Один

      • Два

      • Три

        type="square"

      • Один

        • li Два li

        li Три li

        ul



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

          1. Стандартный нумерованный список – тег ol

          2. Тег с параметром буквенной нумерации - ol type = “A”

        ol type="A"

      • Один

      • Два

      • Три


        1. Один

        2. Два

        3. Три

        1. Один

        2. Два

        3. Три

        ol

        li Один li

        li Два li

        li Три li




          1. Тег с параметром начального номера -

              start = “3”


          ol type="a"

        1. Один

        2. Два

        3. Три

        ol start="3"

      • Один

      • Два

      • Три


        1. Один

        2. Два

        3. Три

        3. Один

        4. Два

        5. Три








        1. HTML многоуровневые или вложенные списки

        ul

        li Америкаli

        li Европа

        ul

      • Швеция

      • Норвегия

      • Финляндия

    • Азия

    • Австралия

    • Америка

    • Европа

      • Швеция

      • Норвегия

      • Финляндия

    • Азия

    • Австралия


    1. Создайте самостоятельно на сайте следующий список:

    Устройства современного компьютера:
       1.  Процессор
       2.  Память
         2.1.  Оперативная память
         2.2.  Долговременная память
           2.2.1.  Жесткий магнитный диск
           2.2.2.  Дискета
           2.2.3.  Флэш-память
           2.2.4.  Оптические диски
               2.2.4.1. CD
               2.2.4.2. DVD
       3. Устройства ввода
          3.1.  Клавиатура
          3.2.  Мышь
          3.3.  Сканер
          3.4.  Графический планшет
          3.5.  Цифровая камера
          3.6.  Микрофон
          3.7.  Джойстик
       4. Устройства вывода
          4.1. Монитор
            4.1.1.  Жидкокристаллический монитор
            4.1.2.  Монитор на электронно-лучевой трубке
          4.2. Принтер
            4.2.1.  Матричный принтер
            4.2.2.  Струйный принтер
            4.2.3.  Лазерный принтер

    Варианты

    1. К первому уровню списка применить:

      1. стиль: полужирный

      2. цвет: 1/3 красного + ½ синего

    2. Пункты списка с 3.1. по 3.7. выделить:

      1. стиль: курсив

      2. цвет: ½ зеленого + 1/3 синего + красный

    3. Пункты списка 4.1. и 4.2. выделить:

      1. стиль: подчеркнутый

      2. цвет: ½ зеленого + 1/3 красного + синий

    4. Пункты списка с 2.2.1. по 2.2.4. выделить:

      1. стиль: зачеркнутый

      2. цвет: 1/3 зеленого + ½ красного

    5. Пункты списка 4.1. 1. и 4.1.2. выделить:

      1. стиль: курсив - подчеркнутый

      2. цвет: 1/2 красного + синий

    6. Пункты списка с 4.2.1. по 4.2.3. выделить:

      1. стиль: полужирный - зачеркнутый

      2. цвет: 1/3 красного + ½ зеленого

    7. Пункты списка с 3.1. по 3.7. выделить:

      1. стиль: полужирный

      2. цвет: 1/3 зеленого + 1/3 синего + красный

    8. Пункты списка с 2.2.1. по 2.2.4. выделить:

      1. стиль: зачеркнутый - курсив

      2. цвет: 1/3 зеленого + ½ красного




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

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

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

    Творческие задания в Sсratch 5-6 классы

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

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

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

    Основы алгоритмизации и...

    Информатика 3 класс

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

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

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

    Скачать
    HTML списки

    Автор: Караваев Игорь Григорьевич

    Дата: 23.11.2014

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

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

    object(ArrayObject)#862 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(83) "Основы языка разметки гипертекста HTML. Списки."
    ["seo_title"] => string(46) "osnovy_iazyka_razmetki_giperteksta_html_spiski"
    ["file_id"] => string(6) "529959"
    ["category_seo"] => string(11) "informatika"
    ["subcategory_seo"] => string(5) "uroki"
    ["date"] => string(10) "1575364182"
  }
}

    object(ArrayObject)#884 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(97) "Презентация к уроку язык гипертекстовой разметки HTML "
    ["seo_title"] => string(62) "priezientatsiia-k-uroku-iazyk-ghipiertiekstovoi-razmietki-html"
    ["file_id"] => string(6) "101311"
    ["category_seo"] => string(11) "informatika"
    ["subcategory_seo"] => string(11) "presentacii"
    ["date"] => string(10) "1402413420"
  }
}

    object(ArrayObject)#862 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(110) "Разработка урока по теме "Оформление списков на web-странице" "
    ["seo_title"] => string(65) "razrabotka-uroka-po-tiemie-oformlieniie-spiskov-na-web-stranitsie"
    ["file_id"] => string(6) "242883"
    ["category_seo"] => string(11) "informatika"
    ["subcategory_seo"] => string(5) "uroki"
    ["date"] => string(10) "1445571651"
  }
}

    object(ArrayObject)#884 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(88) "Конспект урока по теме "Язык HTML. Создание списка""
    ["seo_title"] => string(46) "konspiekturokapotiemieiazykhtmlsozdaniiespiska"
    ["file_id"] => string(6) "299643"
    ["category_seo"] => string(11) "informatika"
    ["subcategory_seo"] => string(5) "uroki"
    ["date"] => string(10) "1456570724"
  }
}

    object(ArrayObject)#862 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(60) "Списки на странице HTML - документа"
    ["seo_title"] => string(34) "spiski_na_stranitse_html_dokumenta"
    ["file_id"] => string(6) "501468"
    ["category_seo"] => string(11) "informatika"
    ["subcategory_seo"] => string(7) "prochee"
    ["date"] => string(10) "1551152311"
  }
}

    Полезное для учителя




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

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

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

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

    Ваш личный кабинет

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