Презентация на тему "Практикум по HTML" 8 класс

Содержание

• 
  Слайд 1

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

  Составитель: учитель информатики и ИКТ ГБОУ СОШ № 411 «Гармония» с углубленным изучением английского языка Петродворцового района Санкт-Петербурга Окулова Виктория Викторовна

• 
  Слайд 2

  Оглавление

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

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

• 
  Слайд 3

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

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

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

  Задание:а) создать HTML-документ:

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

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

• 
  Слайд 4
  

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

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

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

• 
  Слайд 5

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

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

  Горизонтальный разделитель:

  - горизонтальная линия, разделяющая части документа, можно использовать без атрибутов или с атрибутами в любом сочетании, size – толщина линии в пикселях,width – ширина линии в пикселях,color – цвет линии (название или код цвета).

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

• 
  Слайд 6
  

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

  Пример текста:

  Вокзал и Bell-vue

  У пристани, на берегу моря, устроен с 1849 года красивый вокзал, где желающие могут иметь удобное помещение в особых комнатах. Отдельные комнаты можно иметь и в строении Bell-vue на берегу моря, вблизи вокзала. Вид на море с балконов Bell-vue вполне оправдывает это название.

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

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

• 
  Слайд 7

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

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

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

  атрибут type – вид маркера (вводится в теге

  • )type=circle - маркер в виде небольшой окружности ○type=disc - маркер в виде закрашенной окружности ●type=square - маркер в виде закрашенного квадратика ■ 7 Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова
• 
  Слайд 8
  

  б) Оформление нумерованного списка:

  1. элемент списка
  2. элемент списка
  3. . . . . . . . . .
  4. элемент списка

  атрибут type – вид нумерации (вводится в теге

  1. )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=число в выбранной системе нумерации (стартовое число) Атрибуты записываются в открывающиеся теги
     • или
       1. . 8 Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова
• 
  Слайд 9
  

  Задание:а) оформить HTML-документ (на основе файла index.html), содержащий 6 списков (см. след. слайд, расположить друг под другом)

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

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

• 
  Слайд 10
  

  Дни недели:

  Понедельник

  Вторник

  Среда

  Четверг

  Пятница

  Суббота

  Воскресенье

  Времена года:

  Зима

  Весна

  Лето

  Осень

  Летние месяцы:

  Июнь

  Июль

  Август

  Виды информации,

  воспринимаемой человеком:

  Зрительная

  Слуховая

  Осязательная

  Обонятельная

  Вкусовая

  Виды информации,

  воспринимаемой компьютером:

  Числовая

  Символьная

  Графическая

  Звуковая

  Видео

  Виды компьютерных сетей:

  Локальные

  Корпоративные

  Региональные

  Глобальные

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

• 
  Слайд 11

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

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

  Таблица задается командой …

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

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

   

  :border=число - толщина линииbordercolor= цвет - цвет линииbgcolor=цвет - цвет заливки фонаАтрибут width=число (или %) – ширина таблицы или ячейки в пикселях 11 Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова
• 
  Слайд 12
  

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

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

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

• 
  Слайд 13

  Занятие № 5. Графика в HTML- документе

  Браузеры «понимают» три графических формата – gif, jpg, png.

  Формат gif. Картинки в этом формате поддерживают 256 цветов. Этот формат имеет дополнительные возможности: мультипликация. Используя анимационный GIF-редактор, легко собрать простой мультик (нарисовать отдельные кадры, настроить время задержки и последовательность показа, «зациклить» кино или показывать кадры только один раз). Когда анимация готова, она записывается на диск как обычный gif-файл. В HTML нет различия в выводе на экран простого gif-файла или анимационного.

  Прозрачная графика. GIF-формат позволяет один или несколько цветов в картинке объявить прозрачными. Это помогает избавиться от строго прямоугольных иллюстраций и вписывать рисунок в документ более привлекательно. Прозрачный цвет задается в редакторе (GIF-редактор или FOTOSHOP) при записи файла на диск.

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

  Графические файлы желательно хранить в отдельной папке.

  Оформление фона:атрибут background="имя файла" – для тегов , ,

  ) Вставка рисунков: - имя файла – путь к файлу с рисунком, width – ширина рисунка в пикселях, height – высота рисунка в пикселях. 13 Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова
• 
  Слайд 14
  

  Задание:

  а) Создать папку для рисунков Image;

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

  в) Создать html-документ следующего содержания:

  оформить фон страницы;

  в ячейки, помеченные *, вставить рисунки, указав размеры рисунка;

  в ячейки, помеченные +, вставить текст пояснения к соответствующим рисункам и оформить фон ячейки.

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

  д) Просмотреть результат в обозревателе Internet Explorer.

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

• 
  Слайд 15

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

  Гипертекст – документ, содержащий ссылки на другие документы. Информация, подготовленная в виде гипертекста, это электронная информация, и работать с ней можно только на компьютере. Чаще ссылка выделяется на фоне экрана монитора с помощью изменения цвета и подчеркивания. Это гиперссылка или гиперсвязь. Гиперссылка – это выделенный объект, связанный с другим файлом и реагирующий на щелчок мыши. Гипертекст связывает множество документов с помощью гиперссылок. На занятие будут рассмотрены способы создания гиперссылок на документы локального компьютера.

  Гиперссылка с одного файла на другой. Для того, чтобы броузер загрузил в свое окно новый html-документ (файл), нужно записать ссылку при помощи тега с атрибутом href=имя_файла:текст или рисунок Задание перехода к новому документу.

  Гиперссылка внутри одного файла.Для задания гипертекстового перехода внутри документа используют два тега . Первая команда с атрибутом href является источником перехода, а вторая с атрибутом name – приемником: текст или рисунок Задание перехода по метке. На экран выводится ссылка.

  Метка. Сюда броузер переходит по ссылке. На экране ничего не отображается.

  Метка – набор символов (латинских букв и (или) цифр).

  Рисунок как гиперссылка:

  Текст как гиперссылка: текст

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

• 
  Слайд 16
  

  Задание:

  Скопировать в рабочую папку html-файлы с текстами (avia.html, avto.html, flot.html, geldor.html – см. Приложение).

  Создать в рабочей папке паку для изображений images.

  Скопировать в папку images файлы с изображениями автомобиля, самолета, корабля, паровоза (из локальной сети класса или сети Internet) .

  Создать html-документ, состоящий из четырех картинок-ссылок на текстовые файлы, картинки расположены в таблице по две картинки в два ряда. Документ сохранить под именем index6.html в рабочей папке.

  В файлах-текстах создать ссылки с конца документа на начало этого же документа, а также ссылки на основной html-документ. Сохранить обновленные файлы с текстами в рабочей папке.

  Просмотреть результат работы в обозревателе Internet Explorer.

  Отформатировать файлы с текстами, используя изученные на предыдущих уроках приемы оформления шрифта и фона.

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

• 
  Слайд 17

  Список использованных источников

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