Язык HTML работа с текстом и графическими изображениями


Тема урока: «Язык HTML. Работа с графическими изображениями»

Цели урока:

Общеобразовательные:

Формировать умение размещать изображения на странице, задавать различные атрибуты.

Развивающие:

формировать целостное восприятие окружающего мира,

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

Воспитательные:

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

Форма проведения урока – урок-лекция.

Тип урока – урок изучения и первичного закрепления нового материала.

Методы обучения:

Словесный (объяснение нового материала).

Форма работы на уроке:

Коллективная

Индивидуальная

Оборудование: компьютеры, доска, учебник Н.Д. Угриновича «Информатика» 8 класс.

План урока:

Организационный этап (1 мин.).

Цель этапа: Проверка готовности учащихся и кабинета к уроку, психологическая подготовка учащихся к предстоящей работе.

2. Изучение нового материала (20 мин.).

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

Практическая работа (15 мин.).

Цель этапа: учиться работать с изображениями на языке HTML

Подведение итогов, рефлексия(2 мин).

Цель этапа: подведение итогов работы на уроке. Рефлексия предполагает следующие вопросы: «С каким понятием мы сегодня познакомились?», «Что называется компьютерные сети ?», «Вызвало ли затруднения новая тема? Если да, то в чём?», «Что было не понятно?»…

Информация о домашнем задании (1 мин).

Цель этапа: сообщить учащимся о домашнем задании.

Ход урока:

№ этапа

Деятельность учителя

Деятельность учащихся

1

-Здравствуйте, ребята! Садитесь.

Здороваются, садятся.

Кто сегодня отсутствует на уроке?

Отвечает на вопрос учителя.

2

Начнем урок с повторения.

Какой язык называют HTML?

Назовите теги, обозначающие начало и конец

web-страницы.

Назовите теги заголовка.

Назовите теги названия страницы.

Между какими тегами прописывается видимое содержание web-страницы?

HTML-стандартный язык разметки документов во Всемирной паутине.

3

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

Есть у вас фотография, которая где-то лежит на жёстком диске, копируем ёе и вставляем в ту папку (директорию) где уже лежит заготовка будущей страницы, то есть туда же, куда сохраняете блокнотом html документ. Так, вот для того чтобы теперь вставить её в нашу страничку к ней нужно указать путь.

делается это так:

<img src=«foto.jpg«>

Где foto.jpg это название фотографии в данном случае, так как фото лежит рядом с html документом, путь к ней мы не указываем.

Помните, тег <img> не требует закрывающего тега!

Теперь приведу пример, где путь указывается:

<img src=«myfoto/foto.jpg«> — Такая запись подразумевает, что в директории где расположен наш html документ есть папка myfoto в которой расположен файл foto.jpg Моя первая страничка с фото


Привет мир!!!

<img src=«graphics/foto.jpg«>Меня зовут Карлсон! Я в меру упитанный мужчина — это моя первая страничка! Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам! Я очень очень сильно люблю вареньё!!! С нетерпеньем буду ждать Вашего приглашения на чай. Прилечу!!

Атрибуты тега

Поговорим о расположении изображений относительно текста.

Как и другие теги <img> тоже имеет свои атрибуты.уже знакомый нам атрибут align «выравнивание» применим и к данному тегу

<img src=«foto.jpg» align=«left«> — фото слева от текста<img src=«foto.jpg» align=«right«> — фото справа от текста<img src=«foto.jpg» align=«top«> — текст выше фото<img src=«foto.jpg» align=«bottom«> — текст ниже фото<img src=«foto.jpg» align=«middle«> — ну и соответственно текст посередине

Помимо align тег <img> имеет еще ряд атрибутов, но сначала расскажу немного о пикселях. Пиксель -это элементарная неделимая единица изображения. Каждый пиксель имеет свои координаты, например, самый верхний левый пиксель на мониторе имеет координаты x=1, y=1, а самый нижний правый в зависимости от разрешения монитора x=800, y=600 — будет соответственно при разрешении 800 на 600 точек. Нужно усвоить, что все расстояния в графических изображениях измеряются пикселями, так картинка длинной 800 пикселей и шириной в 600 пикселей при указанном разрешении заполнит весь экран.

<img src=«foto.jpg» vspace=«15»> — Атрибут vspace задаёт расстояние по вертикали от рисунка до текста, в данном случае мы задали расстояние в 15 пикселей<img src=«foto.jpg» hspace=«25»> — Расстояние по горизонтали соответственно <img src=«foto.jpg» width=«180»> — Ширина непосредственно самого изображения <img src=«foto.jpg» height=«240»> — Высота изображения. Если атрибуты width и height не использовать, то ширина и высота изображения по умолчанию будет равна реальным её размерам, без каких либо искажений.<img src=«foto.jpg» border=«5»>— Бордюр, рамка вокруг изображения и её толщина в пикселях.<img srcfoto.jpg» border=»5″ bordercolor=»#008000 «> — bordercolor — это цвет рамки.Еще изображение можно сделать фоном страницы. Для этого используем атрибут background «фон» открывающего тега<body>

Вот так:

<body backgroundfoto.jpg«>

Выравнивание рисунка.

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

Используются теги

<center> center> по центру

<left> left> — по левому краю

<right> right>по правому краю

4

Ответьте на вопросы устно:

— Вызвала ли затруднения новая тема?

5

Записывают домашнее задание в дневник.






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