Урок работа с языком html

Урок «Основы языка HTML»

Цель урока: Сформировать представление о структуре HTML-документа.

• Сформировать представление учащихся о понятии «тэг».
• Ознакомить с типами тэгов.
• Ввести понятие «статическая Web-страница».

• развитие способности к анализу и обобщению;
• развитие навыков по созданию Web-страниц;
• развитие информационной культуры.

• мультимедийный проектор;
• экран;
• презентация «Основы языка HTML: тэги, атрибуты, комментарии» (Приложение 4);
• раздаточный материал «Структурные тэги» (Приложение 5).

Межпредметные связи: английский язык.

1. Организационный этап – 2 мин.
2. Объяснение нового материала – 18 мин.
3. Самостоятельная работа – 17 мин.
4. Подведение итогов, домашнее задание – 3 мин.

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

«Основы языка HTML: тэги, атрибуты, комментарии»

Объяснение цели и задач урока, ознакомление с основными вопросами темы урока.

Вопросы при необходимости. Запись темы урока в тетрадь

«Основы языка HTML: тэги, атрибуты, комментарии»

Объяснение нового материала

Объясняет суть и особенности создания HTML-документа. Дает определение понятию «тэг». Поясняет классификацию тэгов. Объясняет структуру HTML-документа (Приложение 5).

Задают вопросы, отвечают на вопросы, рассуждают по теме, записывают самое главное.

Раздает задания для выполнения практической работы, объясняет суть задания и способы действия.

Задают вопросы, выполняют задания на компьютере в документе: создают пробную Web-страницу, заготовку и сохраняют в личную папку.

Подведение итогов урока, выставление оценок

Благодарит учащихся за работу на уроке. Подводит итоги урока, выставляет оценки в журнал и дневники учащихся.

Задает домашнее задание (читать конспект, составить теги web- страницы тему выбирают сами учащихся)

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

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

Методика преподавания информатики в начальных классах

К данной скидке мы можем добавить скидку Вашего образовательного учреждения (она зависит от того, сколько Ваших коллег прошло курсы «Инфоурок»)

В настоящий момент дополнительные накопительные скидки (от 2% до 25%) предоставляются 58.361 образовательному учреждению . Чтобы узнать, какая скидка действует для всех сотрудников Вашего образовательного учреждения, войдите в свой личный кабинет «Инфоурок».

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

Информатика: теория и методика преподавания в профессиональном образовании

К данной скидке мы можем добавить скидку Вашего образовательного учреждения (она зависит от того, сколько Ваших коллег прошло курсы «Инфоурок»)

В настоящий момент дополнительные накопительные скидки (от 2% до 25%) предоставляются 58.361 образовательному учреждению . Чтобы узнать, какая скидка действует для всех сотрудников Вашего образовательного учреждения, войдите в свой личный кабинет «Инфоурок».

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

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

К данной скидке мы можем добавить скидку Вашего образовательного учреждения (она зависит от того, сколько Ваших коллег прошло курсы «Инфоурок»)

В настоящий момент дополнительные накопительные скидки (от 2% до 25%) предоставляются 58.361 образовательному учреждению . Чтобы узнать, какая скидка действует для всех сотрудников Вашего образовательного учреждения, войдите в свой личный кабинет «Инфоурок».

Структура программного обеспечения для пользователя

Выбранный для просмотра документ Язык разметки гиппертекста HTML.ppt

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

2 слайд Сегодня я познакомлю Вас с языком разметки гипертекста HTML (HyperText Markup Language). Если Вы хотите стать
Web — дизайнером, то вы непременно должны знать этот язык.

3 слайд Язык HTML состоит из специальных разметочных указателей, иногда их называют флаги разметки, а также команды или коды языка HTML, но чаще их называют теги (от английского слова tag).

4 слайд Браузер – это программа, служащая для просмотра Web-документов (страниц в Internet).
Тег – это инструкция браузеру, указывающая способ отображения текста.

5 слайд Существует много программ-браузеров.

Каждая из них предоставляет разные возможности при работе с
Web-документами.

Наиболее известные и конкурирующие браузеры – Netscape Navigator и Microsoft Internet Explorer.

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

7 слайд Прописные и строчные буквы при написании тегов не различаются.
=
=
Тег всегда начинается и заканчивается угловыми скобками “<>”.

8 слайд ТЕГИ
НЕПАРНЫЕ
ПАРНЫЕ

Парный тег влияет на текст с того места, где употреблён, до того места, где указан признак окончания его действия, а им служит тот же самый тег, только начинающийся с символа слэш «/»

13 слайд Сохраним нашу Web-страницу в текстовом формате
Переименуем полученный текстовой файл, присвоив ему расширение html

14 слайд Откроем полученный Web-сайт
Браузер Internet Explorer вывел наше стихотворение без переходов на новую строку. Хотелось бы показать стихотворение по-человечески.
Для указания перехода на новую строку используется непарный тег . Данный тег ставится в месте перехода на новую строку.

15 слайд Чтобы внести данный тег в текст HTML-файла нужно в Строке меню выбрать
Вид→Просмотр HTML-кода

18 слайд Снова открываем наш Web-сайт.
Чтобы увидеть внесённые изменения, страницу нужно обновить.
ОБНОВЛЕНИЕ
I способ
В Строке меню выбрать
Вид→Обновить
II способ
На Панели инструментов
нажать

19 слайд Теперь наша Web-страница выглядит лучше
Добавим на страницу цветной фон. Для этого в теге допишем атрибут bgcolor с указанием цвета.
Например:

21 слайд Вот наша Web-страница
Сделаем текст стихотворения цветным. Для этого в теге допишем атрибут text с указанием цвета.
Например:

23 слайд Наша Web-страница преобразилась
Сделаем заголовок стихотворения и имя автора крупнее. Для этого воспользуемся парным тегом .

25 слайд Теперь наша Web-страница выглядит лучше
Добавим на нашу Web-страницу картинку. Нам понадобится непарный тег с атрибутом src, после которого указывается полное название картинки.
Например:

26 слайд Вставьте на созданную нами Web-страницу картинку с изображением козлёнка. Картинка с козлёнком называется 248.gif

Не забудьте сохранить файл и обновить страницу

27 слайд Создадим на нашей Web-странице бегущую строку. Движущийся элемент должен находиться внутри парного тега .
Например:

Задание Сделайте бегущей строкой название стихотворения и изображение козлёнка

29 слайд Задание
Представьте себя Web-дизайнерами и создайте свои сайты со стихами Агнии Барто.
Тексты стихотворений и картинки вы можете найти в папке ЗАДАНИЕ.

Краткое описание документа:

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

Рабочие листы и материалы для учителей и воспитателей

Более 10 000 дидактических материалов для школьного и домашнего обучения

Дистанционные курсы для педагогов

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

6 319 447 материалов в базе

Другие материалы

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

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

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

Автор материала

• На сайте: 8 лет и 7 месяцев
• Подписчики: 2
• Всего просмотров: 7700
• Всего материалов: 6

Дистанционные курсы
для педагогов

28 минут

64 минуты

58 минут

Видеолекция Оценка эффективности реализации инвестиционного проекта: затратный, рыночный и доходный подходы

• 

• 

• 

Подарочные сертификаты

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

Все материалы, размещенные на сайте, созданы авторами сайта либо размещены пользователями сайта и представлены на сайте исключительно для ознакомления. Авторские права на материалы принадлежат их законным авторам. Частичное или полное копирование материалов сайта без письменного разрешения администрации сайта запрещено! Мнение администрации может не совпадать с точкой зрения авторов.

Источник

Язык HTML: работа с текстом и графическими изображениями
план-конспект урока по информатике и икт (8 класс) на тему

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

Скачать:

Вложение	Размер
2_urok.docx	33.71 КБ
kartochki2.docx	22.39 КБ
kartochki1.docx	23.41 КБ
1urok.docx	31.73 КБ

Предварительный просмотр:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Моя первая страничка с фото

Привет мир.

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

Источник