Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.

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

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

Содержание

2. ОглавлениеЗанятие № 1. Создание первого HTML-документаЗанятие №
3. Занятие № 1. Создание первого HTML-документаЗнакомство
4. Занятие № 1. Создание первого HTML-документаЛогическое
5. Занятие № 2. Физическое форматирование (форматирование
6. Занятие № 2. Физическое форматирование (форматирование
7. Занятие № 3. Использование списков при оформлении
8. Занятие № 3. Использование списков при
9. Занятие № 3. Использование списков при
10. Дни недели:ПонедельникВторникСредаЧетвергПятницаСубботаВоскресеньеВремена года:ЗимаВеснаЛетоОсень Летние месяцы:ИюньИюльАвгустЗанятие № 3. Использование
11. Занятие № 4. Оформление таблиц в
12. Занятие № 4. Оформление таблиц в
13. Занятие № 5. Графика в HTML- документеБраузеры
14. Занятие № 5. Графика в HTML- документеЗадание:а)
15. Занятие № 6. Гиперссылки в HTML-
16. Занятие № 6. Гиперссылки в HTML-
17. Скачать презентацию
18. Похожие презентации

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

Главная
Информатика
Практикум по основам языка разметки гипертекстов html

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML-документа. HTML-документ заключается в теги и . Между этими тегами

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

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

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

заголовков: 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 Занятие № 2. Физическое форматирование (форматирование шрифта)
Задание: а) создать

HTML-документ (на основе файла index.html), в котором будут заданы

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

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

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

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

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

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

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

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

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

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

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

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

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

. . . . . . . . .

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

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

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

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

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

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

(см. след. слайд, расположить друг под другом)

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

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

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

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

при оформлении текстов

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

сетей:
Локальные
Корпоративные
Региональные
Глобальные

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

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

HTML-программировании таблицы совершенно незаменимы выравнивания элементов на экране, многоколонной

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

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

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

, ,

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

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

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

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

создать 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 – высота рисунка в пикселях.

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

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

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

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

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

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

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

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

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

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

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

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

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

рабочую папку html-файлы с текстами (avia.html, avto.html, flot.html, geldor.html

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

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