Презентация, доклад на тему Создание Web-страниц средствами языка HTML. (с использованием цифрового диктанта и терминов КНРС(Я)

Содержание

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

Слайд 1Тема урока: Создание Web-страниц средствами языка HTML. (с использованием цифрового диктанта

и терминов КНРС(Я)

учитель информатики и ИКТ Гуляев Николай Николаевич
МБОУ «Эбяхская СОШ»

Дата проведения урока: 11 декабря 2013г.

Тема урока:  Создание Web-страниц средствами языка HTML.  (с использованием цифрового диктанта и терминов КНРС(Я)учитель информатики

Слайд 2повторение
HTML документы представляют собой текстовые файлы, состоящие из HTML элементов.
HTML элементы

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

Слайд 3Тэги HTML
HTML-тэги используются для разметки HTML элементов
HTML-тэги окружены двумя символами

< и >
Окружающие символы называют угловыми скобками
HTML-тэги, как правило, используются парами как и
Первый тэг в паре - тэг начала, второй тэг - конечный тэг
Html-тэги не чувствительны к регистру, означает то же самое что и
Примечание: Тэг начала обычно называют открытым тэгом, а конечный тэг закрытым.
Тэги HTMLHTML-тэги используются для разметки HTML элементов HTML-тэги окружены двумя символами < и > Окружающие символы называют

Слайд 4Элементы HTML
HTML элемент начинается с начального тэга
Содержанием элемента будет

всё между начальным тэгом и конечным тэгом
HTML элемент заканчивается конечным тэгом
У некоторых HTML элементов нет содержания
У некоторых HTML элементов нет конечного тэга
Примечание: HTML элементы довольно часто называют контейнерами.

Элементы HTML HTML элемент начинается с начального тэга Содержанием элемента будет всё между начальным тэгом и конечным

Слайд 5Вспомним наш первый HTML пример
 

Первая страница

 
 Это моя первая страница.
 Этот текст выделен

полужирным шрифтом
 
 
Данный выше пример, содержит в себе 6 элементов.
Вспомним наш первый HTML пример Первая страница  Это моя первая страница. Этот текст выделен полужирным шрифтом  Данный выше пример, содержит в

Слайд 6Пустые HTML элементы
HTML элементы без содержания, называются пустыми элементами. Пустые элементы

не имеют конечного тэга.

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

Слайд 7Основные HTML тэги
Самые важные тэги в HTML - тэги, которые

определяют заголовки, параграфы и окончания строк.
Основные HTML тэги Самые важные тэги в HTML - тэги, которые определяют заголовки, параграфы и окончания строк.

Слайд 8Заголовки
Заголовки определяются с помощью тэгов от до . Тэг

определяет наибольший заголовок, а
наименьший.
 

Это - заголовок

 

Это - заголовок

 

Это - заголовок

 

Это - заголовок

 
Это - заголовок
 
Это - заголовок

Браузер автоматически добавляет дополнительную пустую строку до и после заголовка.
ЗаголовкиЗаголовки определяются с помощью тэгов от до . Тэг определяет наибольший заголовок, а наименьший.  Это - заголовок

Слайд 9Параграфы
Параграфы определяются тэгом .
  Это - параграф   Это -

другой параграф


Браузер автоматически добавляет дополнительную пустую строку до и после параграфа.
ПараграфыПараграфы определяются тэгом .  Это - параграф    Это - другой параграф Браузер автоматически добавляет дополнительную

Слайд 10Подведем промежуточный итог…
У каждого элемента HTML есть своё название
body

-
h1 -
p -
br -
В начале тэга имя окружено угловыми скобками:


В конце тэга черта и имя окружены угловыми скобками:     
Содержание элемента находится в промежутке между начальным тэгом и конечным тэгом
Некоторые HTML элементы не имеют содержания
Некоторые HTML элементы не имеют конечного тэга

[тело],

[заголовок],

[параграф],

[конец строки])

Подведем промежуточный итог…У каждого элемента HTML есть своё название body  -h1 - p - br

Слайд 11Изученные основные HTML-тэги

Изученные основные  HTML-тэги

Слайд 12Работа с карточками
( Задание по тегам HTML)
Выстроить ряд тэгов данной

web страницы.

Работа с  карточками( Задание по тегам HTML)Выстроить ряд тэгов данной web страницы.

Слайд 13

Природные зоны



Природные зоны России

Арктика

Тундра

Тайга

Средняя полоса

Лесостепь

Степь



Работа с карточками

Природные зоны

Слайд 14
Видеоурок «Списки»
Тема :
Списки на Web страницах
(Составление HTML при размещении списка на

примере программы «ТНТ».)
Видеоурок «Списки»Тема :Списки на Web страницах(Составление HTML при размещении списка на примере программы «ТНТ».)

Слайд 15Списки
Ненумерованный
Нумерованный

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

Список располагается внутри контейнера

    , <ОL> а каждый элемент списка определяется также тэг-ом
  • .
  • СпискиНенумерованный   Нумерованный       Довольно часто при размещении текста на Web

    Слайд 16Маркированный (ненумерованный) список.

    Саха Саарын Тойон
    Айыы Сиэр Тойон
    Дьулуруйар Ньургун Боотур
    Урун Уолан
    Уот Уhутаакы
    Кун

    Дьирибинэ
  • Уот Уhуму


  • Маркированный (ненумерованный) список.Саха Саарын ТойонАйыы Сиэр ТойонДьулуруйар Ньургун БоотурУрун УоланУот УhутаакыКун ДьирибинэУот Уhуму

    Слайд 17 Нумерованный список

    Сабыйа Баай Хотун
    Айталыын Куо
    Туйаарыма Куо
    Кыыс о5о Кыскыйдаан Куо
    Кыыс

    Ньургун

    Для красоты нашей Web страницы используем горизонтальный
    разделитель


    между списками

    Нумерованный списокСабыйа Баай ХотунАйталыын КуоТуйаарыма Куо Кыыс о5о Кыскыйдаан КуоКыыс НьургунДля красоты нашей Web страницы используем

    Слайд 18СПИСКИ


    Олонхо


    Дьулуруйар Ньургун Боотур

    Саха Саарын Тойон
    Айыы Сиэр Тойон
    Дьулуруйар

    Ньургун Боотур
  • Урун Уолан

  • Уот Уhутаакы

  • Кун Дьирибинэ

  • Уот Уhуму





    1. Сабыйа Баай Хотун

    2. Айталыын Куо

    3. Туйаарыма Куо

    4. Кыыс о5о Кыскыйдаан Куо

    5. Кыыс Ньургун




    СПИСКИ Олонхо  Дьулуруйар Ньургун БоотурСаха Саарын ТойонАйыы Сиэр ТойонДьулуруйар Ньургун БоотурУрун УоланУот УhутаакыКун ДьирибинэУот УhумуСабыйа Баай

    Слайд 20Цифровой диктант

    Цифровой диктант

    Слайд 21Цифровой диктант
    Форматирование
    Списки
    Изображение
    Структура
    HTML
    Вариант 1
    1
    2
    3
    4
    Вариант 2
    5
    6
    7
    8

    Цифровой диктантФорматированиеСпискиИзображениеСтруктураHTMLВариант 11234Вариант 25678

    Слайд 221.
    2.
    3.


    8.
    9.

    10. <….ALT=”*”>

    1. Структура
    2. Списки
    3. Изображение
    4. Форматирование
    5. Форматирование
    6. Структура
    7. Форматирование
    8. Структура
    9. Списки
    10. Изображение

    Цифровой диктант

    1. 4,8
    2. 3,7
    3. 2,6
    4. 1,5
    5. 1,5
    6. 4,8
    7. 1,5
    8. 4,8
    9. 3,7
    10. 2,6

    1. 2. 3.

    Слайд 23Домашнее задание
    Составить HTML код Web страницы «Олонхо» с

    нумерованными и ненумерованными списками основных персонажей олонхо «Эрчимэн Бэргэн », автор Сергей Васильев-Борогонский с использованием размера шрифта и значения атрибута .
    Домашнее задание   Составить HTML код Web страницы «Олонхо» с нумерованными и ненумерованными списками основных персонажей

    Что такое shareslide.ru?

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


    Для правообладателей

    Яндекс.Метрика

    Обратная связь

    Email: Нажмите что бы посмотреть