Разделы презентаций

Практикум по основам языка разметки гипертекстов HTML 10 класс

Содержание

ОглавлениеЗанятие № 1. Создание первого HTML-документаЗанятие № 2. Физическое форматирование (форматирование шрифта)Занятие № 3. Использование списков при оформлении текстов.Занятие № 4. Оформление таблиц в Занятие № 4. Оформление таблиц

Слайды и текст этой презентации

Слайд 1ПРАКТИКУМ ПО ОСНОВАМ ЯЗЫКА РАЗМЕТКИ ГИПЕРТЕКСТОВ HTML
Составитель: учитель информатики и

ИКТ ГБОУ СОШ № 411 «Гармония» с углубленным изучением английского

языка Петродворцового района Санкт-Петербурга Окулова Виктория Викторовна
ПРАКТИКУМ ПО ОСНОВАМ ЯЗЫКА РАЗМЕТКИ ГИПЕРТЕКСТОВ HTML Составитель: учитель информатики и ИКТ ГБОУ СОШ №

Слайд 2Оглавление
Занятие № 1. Создание первого HTML-документа
Занятие № 2. Физическое форматирование

(форматирование шрифта)
Занятие № 3. Использование списков при оформлении текстов.
Занятие №

4. Оформление таблиц в Занятие № 4. Оформление таблиц в HTMLЗанятие № 4. Оформление таблиц в HTML-документе.
Занятие № 5. Графика в Занятие № 5. Графика в HTMLЗанятие № 5. Графика в HTML- документе.
Занятие № 6. Гиперссылки в Занятие № 6. Гиперссылки в HTMLЗанятие № 6. Гиперссылки в HTML- документе.

Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова

ОглавлениеЗанятие № 1. Создание первого HTML-документаЗанятие № 2. Физическое форматирование (форматирование шрифта)Занятие № 3. Использование списков

Слайд 3Занятие № 1. Создание первого HTML-документа
Знакомство со структурой HTML-документа. HTML-документ заключается

в теги и . Между этими тегами два блока: - блок

заголовка - содержит описание параметров, используемых при отображении документов, но не отображающихся в окне обозревателя. Например: Название страницы . - тело документа - содержит текст, предназначенный для отображения обозревателем, и теги, указывающие на способ форматирования текста, определяющие графическое оформление, задающие параметры гиперссылок.
Задание: а) создать HTML-документ: Название страницы Пример страницы б) Сохранить документ в файле с именем index.html в рабочей папке. в) Просмотреть HTML-документ в обозревателе Internet Explorer.



Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова

Занятие № 1. Создание первого HTML-документаЗнакомство со структурой HTML-документа. HTML-документ заключается в теги и .

Слайд 4Занятие № 1. Создание первого HTML-документа
Логическое форматирование. а) Оформление заголовков:

n - целое число от 1 до 6, определяет

уровень заголовка (1 - высокий уровень, 6 - низкий уровень). При оформлении заголовков можно использовать атрибут выравнивания - - выравнивание по левому краю - выравнивание по центру - выравнивание по правому краю б) Оформление параграфа (абзаца):

или с выравниванием

в) Перевод на новую строку:

Задание: а) внести изменения в файл index.html так, чтобы на экране обозревателя были отображены образцы 6 уровней заголовков, три абзаца, выровненные тремя способами, четверостишие, оформленное с помощью тега перевода на новую строку. б) Сохранить новый документ в файле с именем index1.html в рабочей папке. в) Просмотреть HTML-документ в обозревателе Internet Explorer.


Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова


Занятие № 1. Создание первого HTML-документаЛогическое форматирование. а) Оформление заголовков: n - целое число

Слайд 5Занятие № 2. Физическое форматирование (форматирование шрифта)
а) ( ) полужирное

начертание ( ) курсивное начертание

подчеркнутый шрифт - задание параметров шрифта. атрибут size – размер шрифта, целое число от 1 до 7, по умолчанию 3 атрибут color – цвет шрифта, название цвета по-английски или 16-ричный код (например: #FF00FF) атрибут face – название типа шрифта Атрибуты можно использовать в любом сочетании.
Горизонтальный разделитель:
- горизонтальная линия, разделяющая части документа, можно использовать без атрибутов или с атрибутами в любом сочетании, size – толщина линии в пикселях, width – ширина линии в пикселях, color – цвет линии (название или код цвета).



Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова

Занятие № 2. Физическое форматирование (форматирование шрифта)а) ( ) полужирное начертание ( ) курсивное

Слайд 6Занятие № 2. Физическое форматирование (форматирование шрифта)
Задание: а) создать HTML-документ (на

основе файла index.html), в котором будут заданы параметры форматирования текста

(например, небольшой текст на тему краеведения). б) Сохранить документ в файле с именем index2.html в рабочей папке. в) Просмотреть HTML-документ в обозревателе Internet Explorer.
Пример текста:
Вокзал и Bell-vue
У пристани, на берегу моря, устроен с 1849 года красивый вокзал, где желающие могут иметь удобное помещение в особых комнатах. Отдельные комнаты можно иметь и в строении Bell-vue на берегу моря, вблизи вокзала. Вид на море с балконов Bell-vue вполне оправдывает это название.

В продолжение летнего сезона в вокзале и Bell-vue помещается кафе-ресторан. В обширной, светлой зале вокзала устраиваются петергофскими жителями летом балы, в саду вокзала играет оркестр.


Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова


Занятие № 2. Физическое форматирование (форматирование шрифта)Задание: а) создать HTML-документ (на основе файла index.html), в котором

Слайд 7Занятие № 3. Использование списков при оформлении текстов
Текст с перечислением

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

нумерованный. Маркированный список используют, если порядок перечисления не важен, нумерованный – если порядок перечисления важен. а) Оформление маркированного списка:
  • элемент списка
  • элемент списка
    • . . . . . . . . .
  • элемент списка

атрибут type – вид маркера (вводится в теге
    ) type=circle - маркер в виде небольшой окружности ○ type=disc - маркер в виде закрашенной окружности ● type=square - маркер в виде закрашенного квадратика ■



    Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова

Занятие № 3. Использование списков при оформлении текстовТекст с перечислением – список. Выделяют два основных вида списков

Слайд 8Занятие № 3. Использование списков при оформлении текстов
б) Оформление нумерованного

списка:
элемент списка элемент списка

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

    • атрибут type – вид нумерации (вводится в теге
      ) type=1 - арабская нумерация (1,2,3 …) type=I - римская нумерация заглавными буквами (I, II, III, IV) type=I - римская нумерация строчными буквами (i, ii, iii, iv ) type=A - нумерация латинскими заглавными буквами (A,B,C,D…) type=a - нумерация латинскими строчными буквами (a,b,c,d…) атрибут start=число в выбранной системе нумерации (стартовое число)
      Атрибуты записываются в открывающиеся теги
        или
          .



          Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова


    Занятие № 3. Использование списков при оформлении текстовб) Оформление нумерованного списка: элемент списка

    Слайд 9Занятие № 3. Использование списков при оформлении текстов
    Задание: а) оформить HTML-документ

    (на основе файла index.html), содержащий 6 списков (см. след. слайд,

    расположить друг под другом)

    б) Сохранить документ в файле с именем index3.html в рабочей папке. в) Просмотреть HTML-документ в обозревателе Internet Explorer.



    Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова


    Занятие № 3. Использование списков при оформлении текстовЗадание: а) оформить HTML-документ (на основе файла

    Слайд 10Дни недели:
    Понедельник
    Вторник
    Среда
    Четверг
    Пятница
    Суббота
    Воскресенье
    Времена года:
    Зима
    Весна
    Лето
    Осень
     Летние месяцы:
    Июнь
    Июль
    Август



    Занятие № 3. Использование списков при оформлении

    текстов

    Виды информации,
    воспринимаемой человеком:
    Зрительная
    Слуховая
    Осязательная
    Обонятельная
    Вкусовая
    Виды информации,
    воспринимаемой компьютером:
    Числовая
    Символьная
    Графическая
    Звуковая
    Видео
    Виды компьютерных сетей:
    Локальные
    Корпоративные
    Региональные
    Глобальные



    Практикум по HTML.

    Составитель - учитель информатики и ИКТ В.В. Окулова


    Дни недели:ПонедельникВторникСредаЧетвергПятницаСубботаВоскресеньеВремена года:ЗимаВеснаЛетоОсень Летние месяцы:ИюньИюльАвгустЗанятие № 3. Использование списков при оформлении текстовВиды информации,воспринимаемой человеком:ЗрительнаяСлуховаяОсязательнаяОбонятельнаяВкусоваяВиды информации,воспринимаемой компьютером:ЧисловаяСимвольнаяГрафическаяЗвуковая ВидеоВиды

    Слайд 11Занятие № 4. Оформление таблиц в HTML-документе
    В практическом HTML-программировании таблицы

    совершенно незаменимы выравнивания элементов на экране, многоколонной верстки, наложения картинок

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










    Атрибуты для тегов

    , ,
    : border=число - толщина линии bordercolor= цвет - цвет линии bgcolor=цвет - цвет заливки фона Атрибут width=число (или %) – ширина таблицы или ячейки в пикселях



    Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова

    Занятие № 4. Оформление таблиц в HTML-документеВ практическом HTML-программировании таблицы совершенно незаменимы выравнивания элементов на экране,

    Слайд 12Занятие № 4. Оформление таблиц в HTML-документе
    Задание: а) создать HTML-документ

    (на основе файла index.html), содержащий таблицу;
    б) Сохранить документ в файле

    с именем index4.html в рабочей папке. в) Просмотреть HTML-документ в обозревателе Internet Explorer.


    Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова


    Занятие № 4. Оформление таблиц в HTML-документеЗадание: а) создать HTML-документ (на основе файла index.html), содержащий

    Слайд 13Занятие № 5. Графика в HTML- документе
    Браузеры «понимают» три графических

    формата – gif, jpg, png.
    Формат gif. Картинки в этом формате

    поддерживают 256 цветов. Этот формат имеет дополнительные возможности: мультипликация. Используя анимационный GIF-редактор, легко собрать простой мультик (нарисовать отдельные кадры, настроить время задержки и последовательность показа, «зациклить» кино или показывать кадры только один раз). Когда анимация готова, она записывается на диск как обычный gif-файл. В HTML нет различия в выводе на экран простого gif-файла или анимационного.
    Прозрачная графика. GIF-формат позволяет один или несколько цветов в картинке объявить прозрачными. Это помогает избавиться от строго прямоугольных иллюстраций и вписывать рисунок в документ более привлекательно. Прозрачный цвет задается в редакторе (GIF-редактор или FOTOSHOP) при записи файла на диск.
    Формат jpg. Этот формат был разработан специально для передачи фотографий. Он поддерживает миллионы цветов и позволяет получать изображения очень высокого качества. Но это отражается на увеличении объема файлов.
    Графические файлы желательно хранить в отдельной папке.
    Оформление фона: атрибут background=”имя файла” – для тегов , ,
    )
    Вставка рисунков: - имя файла – путь к файлу с рисунком, width – ширина рисунка в пикселях, height – высота рисунка в пикселях.



    Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова

    Занятие № 5. Графика в HTML- документеБраузеры «понимают» три графических формата – gif, jpg, png.Формат gif. Картинки

    Слайд 14Занятие № 5. Графика в HTML- документе
    Задание:
    а) Создать папку для

    рисунков Image;
    б) Скопировать в папку Image файлы с понравившимися рисунками

    и фонами;
    в) Создать html-документ следующего содержания:
    оформить фон страницы;
    в ячейки, помеченные *, вставить рисунки, указав размеры рисунка;
    в ячейки, помеченные +, вставить текст пояснения к соответствующим рисункам и оформить фон ячейки.


    г) Сохранить файл с именем index5.html в рабочей папке;
    д) Просмотреть результат в обозревателе Internet Explorer.


    Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова


    Занятие № 5. Графика в HTML- документеЗадание:а) Создать папку для рисунков Image;б) Скопировать в папку Image файлы

    Слайд 15Занятие № 6. Гиперссылки в HTML- документе
    Гипертекст – документ, содержащий

    ссылки на другие документы. Информация, подготовленная в виде гипертекста, это

    электронная информация, и работать с ней можно только на компьютере. Чаще ссылка выделяется на фоне экрана монитора с помощью изменения цвета и подчеркивания. Это гиперссылка или гиперсвязь. Гиперссылка – это выделенный объект, связанный с другим файлом и реагирующий на щелчок мыши. Гипертекст связывает множество документов с помощью гиперссылок. На занятие будут рассмотрены способы создания гиперссылок на документы локального компьютера.
    Гиперссылка с одного файла на другой. Для того, чтобы броузер загрузил в свое окно новый html-документ (файл), нужно записать ссылку при помощи тега с атрибутом href=имя_файла: текст или рисунок Задание перехода к новому документу.
    Гиперссылка внутри одного файла. Для задания гипертекстового перехода внутри документа используют два тега . Первая команда с атрибутом href является источником перехода, а вторая с атрибутом name – приемником: текст или рисунок Задание перехода по метке. На экран выводится ссылка.
    Метка. Сюда броузер переходит по ссылке. На экране ничего не отображается.
    Метка – набор символов (латинских букв и (или) цифр).
    Рисунок как гиперссылка:
    Текст как гиперссылка: текст



    Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова

    Занятие № 6. Гиперссылки в HTML- документеГипертекст – документ, содержащий ссылки на другие документы. Информация, подготовленная

    Слайд 16Занятие № 6. Гиперссылки в HTML- документе
    Задание:
    Скопировать в рабочую папку

    html-файлы с текстами (avia.html, avto.html, flot.html, geldor.html – см. Приложение).
    Создать

    в рабочей папке паку для изображений images.
    Скопировать в папку images файлы с изображениями автомобиля, самолета, корабля, паровоза (из локальной сети класса или сети Internet) .
    Создать html-документ, состоящий из четырех картинок-ссылок на текстовые файлы, картинки расположены в таблице по две картинки в два ряда. Документ сохранить под именем index6.html в рабочей папке.
    В файлах-текстах создать ссылки с конца документа на начало этого же документа, а также ссылки на основной html-документ. Сохранить обновленные файлы с текстами в рабочей папке.
    Просмотреть результат работы в обозревателе Internet Explorer.
    Отформатировать файлы с текстами, используя изученные на предыдущих уроках приемы оформления шрифта и фона.


    Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова


    Занятие № 6. Гиперссылки в HTML- документеЗадание:Скопировать в рабочую папку html-файлы с текстами (avia.html, avto.html, flot.html,

    Слайд 17Список использованных источников
    http://ab-w.net/ - самоучитель по сайтостроению
    http://evgeniypopov.com/ - видеоуроки по

    HTML и CSS

    Практикум по HTML. Составитель - учитель информатики

    и ИКТ В.В. Окулова
    Список использованных источниковhttp://ab-w.net/ - самоучитель по сайтостроениюhttp://evgeniypopov.com/ - видеоуроки по HTML и CSS Практикум по HTML.

    Похожие презентации

    Основы моделирования Основы моделирования 402
    Модуль GraphABC Модуль GraphABC 389
    Алгоритм. Свойства алгоритма Алгоритм. Свойства алгоритма 427
    Внедрение электронных образовательных ресурсов в системе СПО Внедрение электронных образовательных ресурсов в системе СПО 407
    Подготовка к контрольной работе Подготовка к контрольной работе "Информация вокруг нас" 5 класс 286
    Варианты использования PostScript Варианты использования PostScript 455
    Основы графического редактора Paint Основы графического редактора Paint 340
    "Организация работы дошкольников в компьютерном классе" 328
    "Миф мейрамханасы" апталықтың қорытынды кеші 584
    Информатизация общества Информатизация общества 337
    Текстовый процессор MS WORD основные понятия Текстовый процессор MS WORD основные понятия 364
    Табличные информационные модели Сложные таблицы Табличные информационные модели Сложные таблицы 379
    Текстовые редакторы и процессоры 8 класс Текстовые редакторы и процессоры 8 класс 339
    Знаковые системы. Кодирование информации Знаковые системы. Кодирование информации 286
    Электронные таблицы Электронные таблицы 387
    Анимация в презентации Анимация в презентации 353
    Сетевой этикет Сетевой этикет 332
    Компьютерные вирусы Компьютерные вирусы 389
    Руководства Руководства 292
    Autodesk Inventor® Professional Autodesk Inventor® Professional 574

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

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

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

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

    Это сайт презентации, докладов, проектов в PowerPoint. Здесь удобно  хранить и делиться своими презентациями с другими пользователями.

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

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