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

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

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

Получите профессию

Фитнес-тренер

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Методические разработки к Вашему уроку:

Получите новую специальность за 2 месяца

Управляющий рестораном

Описание презентации по отдельным слайдам:

  • практикум по основам языка разметки гипертекстов HTMLСоставитель: учитель и...

    1 слайд

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

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

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

    2 слайд

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

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

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

    3 слайд

    Занятие № 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.
    3
    Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова

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

    4 слайд

    Занятие № 1.
    Создание первого HTML-документа
    Логическое форматирование.
    а) Оформление заголовков:
    <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.
    4
    Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова

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

    5 слайд

    Занятие № 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 – цвет линии (название или код цвета).

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

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

    6 слайд

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

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


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

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

    7 слайд

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

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

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

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

    8 слайд

    Занятие № 3. Использование списков
    при оформлении текстов
    б) Оформление нумерованного списка:
    <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>.
    8
    Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова

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

    9 слайд

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


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

  • Дни недели:
Понедельник
Вторник
Среда
Четверг
Пятница
Суббота
Воскресенье
Вре...

    10 слайд

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



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


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

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

    11 слайд

    Занятие № 4. Оформление таблиц
    в HTML-документе
    В практическом HTML-программировании таблицы совершенно незаменимы выравнивания элементов на экране, многоколонной верстки, наложения картинок друг на друга, для отображения на экране табличного материала. Таблица представляет собой прямоугольник, расчерченный на клетки, образующие столбцы и строки.
    Таблица задается командой <TABLE>…</TABLE> . Внутри этих тегов задаются строки командами <TR>…</TR>, внутри строк задаются ячейки командами <TD>…</TD>. Таким образом, по строкам задается вся структура таблицы:

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

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

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

    12 слайд

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

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

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

    13 слайд

    Занятие № 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 – высота рисунка в пикселях.
    13
    Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова

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

    14 слайд

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


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

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

    15 слайд

    Занятие № 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>
    15
    Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова

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

    16 слайд

    Занятие № 6. Гиперссылки
    в HTML- документе
    Задание:
    Скопировать в рабочую папку html-файлы с текстами (avia.html, avto.html, flot.html, geldor.html – см. Приложение).
    Создать в рабочей папке паку для изображений images.
    Скопировать в папку images файлы с изображениями автомобиля, самолета, корабля, паровоза (из локальной сети класса или сети Internet) .
    Создать html-документ, состоящий из четырех картинок-ссылок на текстовые файлы, картинки расположены в таблице по две картинки в два ряда. Документ сохранить под именем index6.html в рабочей папке.
    В файлах-текстах создать ссылки с конца документа на начало этого же документа, а также ссылки на основной html-документ. Сохранить обновленные файлы с текстами в рабочей папке.
    Просмотреть результат работы в обозревателе Internet Explorer.
    Отформатировать файлы с текстами, используя изученные на предыдущих уроках приемы оформления шрифта и фона.

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

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

    17 слайд

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

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

Получите профессию

Секретарь-администратор

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Скачать материал

Найдите материал к любому уроку, указав свой предмет (категорию), класс, учебник и тему:

6 624 663 материала в базе

Скачать материал

Вам будут интересны эти курсы:

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

Авторизуйтесь, чтобы задавать вопросы.

  • Скачать материал
    • 24.09.2020 255
    • PPTX 417 кбайт
    • Оцените материал:
  • Настоящий материал опубликован пользователем Успенская Любовь Кирилловна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт

    Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.

    Удалить материал
  • Автор материала

    Успенская Любовь Кирилловна
    Успенская Любовь Кирилловна
    • На сайте: 3 года и 3 месяца
    • Подписчики: 0
    • Всего просмотров: 71529
    • Всего материалов: 213

Ваша скидка на курсы

40%
Скидка для нового слушателя. Войдите на сайт, чтобы применить скидку к любому курсу
Курсы со скидкой

Курс профессиональной переподготовки

Менеджер по туризму

Менеджер по туризму

500/1000 ч.

Подать заявку О курсе

Курс профессиональной переподготовки

Библиотечно-библиографические и информационные знания в педагогическом процессе

Педагог-библиотекарь

300/600 ч.

от 7900 руб. от 3950 руб.
Подать заявку О курсе
  • Сейчас обучается 458 человек из 66 регионов

Курс профессиональной переподготовки

Организация деятельности библиотекаря в профессиональном образовании

Библиотекарь

300/600 ч.

от 7900 руб. от 3950 руб.
Подать заявку О курсе
  • Сейчас обучается 282 человека из 66 регионов

Курс повышения квалификации

Специалист в области охраны труда

72/180 ч.

от 1750 руб. от 1050 руб.
Подать заявку О курсе
  • Сейчас обучается 40 человек из 19 регионов

Мини-курс

От Зейгарника до Личко: путь к пониманию человеческой психологии

4 ч.

780 руб. 390 руб.
Подать заявку О курсе
  • Сейчас обучается 22 человека из 15 регионов

Мини-курс

Hard-skills современного педагога

8 ч.

1180 руб. 590 руб.
Подать заявку О курсе
  • Сейчас обучается 62 человека из 29 регионов

Мини-курс

Феноменология в педагогике: основные концепции и их практическое применение

4 ч.

780 руб. 390 руб.
Подать заявку О курсе