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

Презентация: Практикум по HTML
1 из 17
Ваша оценка презентации
Оцените презентацию по шкале от 1 до 5 баллов
  • 1
  • 2
  • 3
  • 4
  • 5
3.0
1 оценка

Комментарии

Нет комментариев для данной презентации

Помогите другим пользователям — будьте первым, кто поделится своим мнением об этой презентации.


Добавить свой комментарий

Аннотация к презентации

Посмотреть презентацию на тему "Практикум по HTML" для 8 класса в режиме онлайн. Содержит 17 слайдов. Самый большой каталог качественных презентаций по информатике в рунете. Если не понравится материал, просто поставьте плохую оценку.

Содержание

  • Презентация: Практикум по HTML
    Слайд 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. Составитель - учитель информатики и ИКТ В.В. Окулова

Посмотреть все слайды

Конспект

Практикум по HTML. Учитель информатики и ИКТ В.В. Окулова Основы языка HTML. Учитель информатики и ИКТ В.В. Окулова, практикум по основам языка разметки гипертекстов HTML

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

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

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

Задание:

  • а) создать HTML-документ:<HTML> <HEAD> <TITLE> Название страницы </TITLE> </HEAD> <BODY> Пример страницы </BODY> </HTML>
  • б) Сохранить документ в файле с именем index.html в рабочей папке.
  • в) Просмотреть HTML-документ в обозревателе Internet Explorer.

Логическое форматирование.а) Оформление заголовков:<Hn> </Hn> n - целое число от 1 до 6, определяет уровень заголовка (1 - высокий уровень, 6 - низкий уровень). При оформлении заголовков можно использовать атрибут выравнивания - <Hn align=left> </Hn> - выравнивание по левому краю<Hn align=center> </Hn> - выравнивание по центру<Hn align=right> </Hn> - выравнивание по правому краюб) Оформление параграфа (абзаца):<P> </P> или с выравниванием <P align=......> </P>в) Перевод на новую строку:<BR>

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

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

а)<strong> </strong> (<B> </B>) полужирное начертание <em></em> ( <I> </I>) курсивное начертание <U> </U> подчеркнутый шрифт<FONT size=число color=цвет face= «тип шрифта» > </FONT> - задание параметров шрифта.атрибут size – размер шрифта, целое число от 1 до 7, по умолчанию 3атрибут color – цвет шрифта, название цвета по-английски или 16-ричный код (например: #FF00FF)атрибут face – название типа шрифтаАтрибуты можно использовать в любом сочетании.

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

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

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

Вокзал и Bell-vue

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

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

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

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

<UL> <LI> элемент списка </LI> <LI> элемент списка </LI>. . . . . . . . . <LI> элемент списка </LI></UL>

атрибут type – вид маркера (вводится в теге <UL>)type=circle - маркер в виде небольшой окружности 0type=disc - маркер в виде закрашенной окружности type=square - маркер в виде закрашенного квадратика ¦

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

<OL> <LI> элемент списка </LI> <LI> элемент списка </LI>. . . . . . . . . <LI> элемент списка </LI></OL>

атрибут type – вид нумерации (вводится в теге <OL>)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=число в выбранной системе нумерации (стартовое число)

Атрибуты записываются в открывающиеся теги <UL> или <OL>.

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

Дни недели:

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

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

Понедельник

Вторник

Среда

Четверг

Пятница

Суббота

Воскресенье

Зима

Весна

Лето

Осень

Июнь

Июль

Август

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

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

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

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

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

Зрительная

Слуховая

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

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

Вкусовая

Числовая

Символьная

Графическая

Звуковая

Видео

Локальные

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

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

Глобальные

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

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

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

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

<TABLE>

<TR>

<TD> </TD>

<TD> </TD>

</TR>

<TR>

<TD> </TD>

<TD> </TD>

</TR>

<TR>

<TD> </TD>

<TD> </TD>

</TR>

</TABLE>

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

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

Тип связи

Скорость, Мгбит/с

Помехоустойчивость

Электрические кабели:

Витая пара

Коаксиальный кабель

10 – 100

до 10

Низкая

Высокая

Телефонная линия

10 – 20

Низкая

Оптоволоконный кабель

10 – 200

Абсолютная

Характеристики коммуникационной сети

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

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

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

Формат gif.

Картинки в этом формате поддерживают 256 цветов. Этот формат имеет дополнительные возможности:

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

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

Формат jpg.

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

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

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

Вставка рисунков:<IMG src="имя файла" width=число height=число> - имя файла – путь к файлу с рисунком, width – ширина рисунка в пикселях, height – высота рисунка в пикселях.

Задание:

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

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

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

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

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

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

+

*

*

+

+

*

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

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

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

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

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

новому документу.

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

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

<A name=метка></A> Метка. Сюда броузер

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

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

Рисунок как гиперссылка:<A href=имя_файла1> <IMG src=имя_файла width=число height=число> </A>

Текст как гиперссылка:<A href=имя_файла>текст</A>

Задание:

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

Скопировать в рабочую папку файлы с изображениями.

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

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

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

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

Оглавление

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

Практикум по HTML. Учитель информатики и ИКТ В.В. Окулова Основы языка HTML. Учитель информатики и ИКТ В.В. Окулова, практикум по основам языка разметки гипертекстов HTML

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

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

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

Задание:

  • а) создать HTML-документ:<HTML> <HEAD> <TITLE> Название страницы </TITLE> </HEAD> <BODY> Пример страницы </BODY> </HTML>
  • б) Сохранить документ в файле с именем index.html в рабочей папке.
  • в) Просмотреть HTML-документ в обозревателе Internet Explorer.

Логическое форматирование.а) Оформление заголовков:<Hn> </Hn> n - целое число от 1 до 6, определяет уровень заголовка (1 - высокий уровень, 6 - низкий уровень). При оформлении заголовков можно использовать атрибут выравнивания - <Hn align=left> </Hn> - выравнивание по левому краю<Hn align=center> </Hn> - выравнивание по центру<Hn align=right> </Hn> - выравнивание по правому краюб) Оформление параграфа (абзаца):<P> </P> или с выравниванием <P align=......> </P>в) Перевод на новую строку:<BR>

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

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

а)<strong> </strong> (<B> </B>) полужирное начертание <em></em> ( <I> </I>) курсивное начертание <U> </U> подчеркнутый шрифт<FONT size=число color=цвет face= «тип шрифта» > </FONT> - задание параметров шрифта.атрибут size – размер шрифта, целое число от 1 до 7, по умолчанию 3атрибут color – цвет шрифта, название цвета по-английски или 16-ричный код (например: #FF00FF)атрибут face – название типа шрифтаАтрибуты можно использовать в любом сочетании.

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

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

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

Вокзал и Bell-vue

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

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

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

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

<UL> <LI> элемент списка </LI> <LI> элемент списка </LI>. . . . . . . . . <LI> элемент списка </LI></UL>

атрибут type – вид маркера (вводится в теге <UL>)type=circle - маркер в виде небольшой окружности 0type=disc - маркер в виде закрашенной окружности type=square - маркер в виде закрашенного квадратика ¦

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

<OL> <LI> элемент списка </LI> <LI> элемент списка </LI>. . . . . . . . . <LI> элемент списка </LI></OL>

атрибут type – вид нумерации (вводится в теге <OL>)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=число в выбранной системе нумерации (стартовое число)

Атрибуты записываются в открывающиеся теги <UL> или <OL>.

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

Дни недели:

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

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

Понедельник

Вторник

Среда

Четверг

Пятница

Суббота

Воскресенье

Зима

Весна

Лето

Осень

Июнь

Июль

Август

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

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

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

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

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

Зрительная

Слуховая

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

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

Вкусовая

Числовая

Символьная

Графическая

Звуковая

Видео

Локальные

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

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

Глобальные

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

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

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

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

<TABLE>

<TR>

<TD> </TD>

<TD> </TD>

</TR>

<TR>

<TD> </TD>

<TD> </TD>

</TR>

<TR>

<TD> </TD>

<TD> </TD>

</TR>

</TABLE>

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

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

Тип связи

Скорость, Мгбит/с

Помехоустойчивость

Электрические кабели:

Витая пара

Коаксиальный кабель

10 – 100

до 10

Низкая

Высокая

Телефонная линия

10 – 20

Низкая

Оптоволоконный кабель

10 – 200

Абсолютная

Характеристики коммуникационной сети

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

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

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

Формат gif.

Картинки в этом формате поддерживают 256 цветов. Этот формат имеет дополнительные возможности:

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

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

Формат jpg.

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

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

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

Вставка рисунков:<IMG src="имя файла" width=число height=число> - имя файла – путь к файлу с рисунком, width – ширина рисунка в пикселях, height – высота рисунка в пикселях.

Задание:

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

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

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

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

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

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

+

*

*

+

+

*

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

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

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

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

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

новому документу.

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

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

<A name=метка></A> Метка. Сюда броузер

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

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

Рисунок как гиперссылка:<A href=имя_файла1> <IMG src=имя_файла width=число height=число> </A>

Текст как гиперссылка:<A href=имя_файла>текст</A>

Задание:

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

Скопировать в рабочую папку файлы с изображениями.

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

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

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

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

Оглавление

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

Сообщить об ошибке