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

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

Содержание

ОглавлениеЗанятие № 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.
    Теги

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

    Табличная база данных. Реляционная БД Табличная база данных. Реляционная БД 335
    Глобальная сеть интернет 9-11 класс Глобальная сеть интернет 9-11 класс 269
    Презентация к уроку по теме: Организация информации в виде дерева Презентация к уроку по теме: Организация информации в виде дерева" 281
    Основные понятия системологии Основные понятия системологии 536
    Мастер-класс «Создание учебных презентаций» Мастер-класс «Создание учебных презентаций» 316
    Программное обеспечение компьютера Программное обеспечение компьютера 288
    Что такое алгоритм? Что такое алгоритм? 345
    Виды и свойства информации Виды и свойства информации 326
    Презентация Своя игра к уроку информатике 5 класс Презентация Своя игра к уроку информатике 5 класс 270
    Безопасность в интернете Безопасность в интернете 407
    Компетентностный подход в обучении информатики. Инфографика Компетентностный подход в обучении информатики. Инфографика 273
    Алгоритм как модель действий. Виды алгоритмов 4 класс Алгоритм как модель действий. Виды алгоритмов 4 класс 364
    Решение задач с условным оператором Решение задач с условным оператором 439
    Роль компьютера в жизни человека Роль компьютера в жизни человека 1044
    Методы описания моделей. Типы моделей 7 класс Методы описания моделей. Типы моделей 7 класс 234
    Управление базой данных в СУБД Access 10 класс Управление базой данных в СУБД Access 10 класс 273
    Представление о мультимедийных продуктах Представление о мультимедийных продуктах 345
    История развития Apple История развития Apple 550
    Относительные, абсолютные и смешанные ссылки в электронных таблицах Относительные, абсолютные и смешанные ссылки в электронных таблицах 488
    Язык программирования Бейсик Язык программирования Бейсик 514

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

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

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

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

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

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

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