Html урок информатики

HTML
план-конспект урока по информатике и икт (9 класс) по теме

Подсоединение компьютера к глобальной сети Интернет часто осуществляется посредством телефонной сети. К сожалению, скорость передачи информации по телефонной сети весьма невелика. Поэтому в Интернете для уменьшения количества символов, передаваемых за единицу времени(то есть, трафика) пересылают не сам документ, а его описание на особом языке. Программа для просмотра веб-страниц – браузер сама воспроизводит документ на основе полученного описания. Для описания электронных документов существует особый язык – HTML. Получив описание, написанное на этом языке, браузер воссоздает исходный документ, формируя текст и расставляя иллюстрации в нужных местах.
HTML (HyperText Markup Language, то есть язык разметки гипертекста) –это язык Всемирной паутины. Каждый раз, открывая ту или иную веб-страницу, мы на самом деле открываем документ, написанный на языке HTML. Все веб-документы отформатированы с помощью языка HTML. Для перехода с одной страницы такого документа на другую предусмотрены гиперссылки, созданные посредством языка HTML. Размещенные на веб- страницах цветные иллюстрации, всевозможные формы для заполнения и бегущая строка видны опять-таки благодаря языку HTML.
Гипертекст – это текст со ссылками на другие документы. Чем отличается гипертекст от обычного текста? Вспомните энциклопедический словарь. В статье словаря, раскрывающей какое-либо понятие, некоторые слова выделены курсивом: это означает, что в данном словаре имеются статьи, посвященные этим словам – эти статьи можно найти и прочитать в той же книге. Такое указание на слово является ссылкой. Ссылка дает возможность получения дополнительной информации о слове или группе слов. Гипертекст тоже организован именно так.
Термин “гипертекст” впервые использовал в 1969 году Тед Нельсон. С информацией, написанной на языке гипертекста, можно работать только на компьютере.
Техника чтения обычного текста такова: прочитав страницу, переходишь к следующей. В технологии гипертекста последовательность чтения может быть произвольной, так как с помощью гиперссылки можно моментально перейти на любую страницу. Ссылки обычно выделяются в тексте цветом либо подчеркиванием. Такие ссылки называются гиперссылками, или гиперсвязями.
Объектом гиперссылки может стать отдельное слово, целое предложение или графический объект. При наведении указателя мыши на гиперссылку он меняет форму.
Посредством гиперссылок гипертекст может связывать друг с другом множество различных документов. Текстовые файлы, созданные при помощи HTML, имеют расширение .html или .htm. Их называют HTML-файлами.
Гиперссылка – это выделенный объект, связанный с другими объектами и реагирующий на щелчок мыши.

С точки зрения языка HTML, гипертекст – это текст с кодами разметки.
Обычно вместо термина “код разметки” применяют термин “тег”.
Теги – это команды, определяющие правила отображения текста в браузере.
Тег всегда начинается открывающей угловой скобкой ( ). При написании тегов прописные и строчные буквы не учитываются, то есть, например, , и – это один и тот же тег.
Познакомимся с несколькими наиболее важными тегами, указывающие на то, что документ является именно HTML-документом, тегами заголовков, а также тегами, делящими документ на логические части.
Различные веб-браузеры отражают один и тот же HTML-документ не одинаково: наблюдаются различия в шрифтах, цвете, размере и т.д. При сохранении HTML-файла очень важно использовать расширение .html или .htm Это позволяет с легкостью определить тип документа. Такой документ веб-браузер легко распознает и открывает не как обычный текст, а как веб-страницу. Поэтому HTML-документ следует рассматривать как логический, а не как физический документ. Другими словами, вид документа может изменяться в зависимости от читающей его программы и от класса компьютера.

Каждый HTML-документ начинается и заканчивается тегом . Эти теги показывают, что документ является именно HTML-документом. Они непременно присутствуют в нем, вне зависимости от прочего его содержания. Использовать пару тегов можно следующим образом:

Открытый урок по информатике на тему «Создание связанных Web-страниц средствами языка HTML»

Как организовать дистанционное обучение во время карантина?

Помогает проект «Инфоурок»

Разработка Web-сайта с использованием языка гипертекстовой разметки HTML

Тема урока «Создание связанных Web -страниц средствами языка HTML »

закреплять и систематизировать знания, умения и навыки форматирования текста и вставки графических объектов при создании Web-страниц средствами языка HTML;

развивать познавательный интерес, логическое мышление, творческую активность при выполнении практических заданий;

воспитывать внимательность, усидчивость, информационную культуру обучающихся;

закрепить на представляемом материале знания по географии о природных зонах России (установить межпредметные связи).

Оборудование: текстовый редактор Блокнот, браузер Internet Explorer , доска, компьютер, компьютерная презентация, папка общего доступа с заготовками для создания страницы(графические изображения для фона, текст в формате MS Word); файл, содержащий страницу, созданную на прошлом уроке, карточки с практической работой.

План урока:
I. Организационный момент. (1 мин)
II. Актуализация знаний. (12 мин)
III. Теоретическая часть. (12 мин)
IV. Д/з (2 мин)

V. Физкультминутка (3 мин)

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

VII . Итог урока. Рефлексия. (5мин)

I. Орг. момент.
Приветствие, проверка присутствующих. Объяснение хода урока.

II. Актуализация знаний.
Как видно из текста на слайде (Слайд 1), сегодня мы с вами продолжаем знакомиться с основными приемами разработки Web -страницы с применением языка гипертекстовой разметки HTML . На прошлых уроках вы уже создавали свои странички, применяя различные стили форматирования текста и добавляя на них графические объекты. Давайте с вами вспомним основные понятия, пройденные нами ранее.

Что такое Web-сайт? ( Web-сайт — группа Web-страниц, принадлежащих одному автору или одному издателю и взаимосвязанных общими гиперссылками, образующих структуру)

С помощью какого языка создаются Web -страницы? ( Языка Hyper Text Markup Language — HTML)

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

Как называются управляющие команды, заключенные в угловые скобки, задающие вид web -страницы? (Теги)

Какие виды тегов вам известны? (Парные и одиночные)

На предыдущих уроках мы говорили, что во Всемирной паутине Web -сайты обычно содержат материалы по определенной теме или проблеме. Государственные структуры и организации обычно создают официальные web -сайты, на которых размещают информацию о своей деятельности. Коммерческие фирмы размещают на своих сайтах рекламу товаров или услуг. Любой пользователь Интернета может создать свой тематический сайт.

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

А теперь вам предлагается выполнить следующее задание. Необходимо Исправьте ошибки, допущенные в программном коде:

Html урок информатики

Задание. Создать сайт, посвященный основам HTML. Сайт состоит из 10 страниц:

Все страницы имеют одинаковый дизайн, основанный на таблицах.

Дизайн страницы построен на 4 таблицах

Часть 1. Разметка страницы

Задание 1. Создать шаблон страницы.

Создать в программе Блокнот файл под именем shablon.html и сохраните его в папку Site.

! Важно. При сохранении файла в качестве типа файла укажите Все файлы.

• гиперссылки на страницы сайта Главная, География, Животные, Растения, Информационные источники.

Таблица 3. Страница

Ширина таблицы: W

Высота строки подбирается автоматически под высоту экрана: Height=»100%»

Выравнивание в строке по верхнему краю: Valign=»top»

Без границ: Border=»0″ Frame=»vo

Форматирование по центру: Аlign=»center»

Расстояние внутри ячеек: Cellpadding=»10″

Цвет строки — фисташковый: Bgcolor=»#B8DB7C»

Ширина 1-го и 4-го столбца фиксированная: W

Ширина 2-го столбца фиксированная: W

Цвет 2-го столбца – серый: Bgcolor=»#ADC2D1″

Цвет 3-го столбца – белый: Bgcolor=»#FFFFFF»

• 2-й столбец: три гиперссылки в виде рисунков;
• 3-й столбец: заголовок 1-го уровня, форматирование по центру; текст страницы, форматирование по ширине.

Таблица 4. Подвал

• © Все права защищены. Инициалы и фамилия, класс. Год
• Гиперссылка на отправку письма на E-mail автора сайта.

Подсказка-код (допишите недостающие строки кода)

Заголовок

Основной текст

Задание 2. Используя файл shablon.html как шаблон, создайте заготовки всех страниц сайта.

Часть 2. Создание страниц сайта

Задание 3. Заполните страницы сайта содержимым.

Дизайн страницы Растения (файл flora.html) на рис. 3.

Фрагмент кода (допишите недостающие строки кода, курсивом выделены команды кода, добавляемые в страницу-шаблон).

Конспект урока по информатике на тему «Основы языка гипертекстовой разметки HTML. Создание HTML — документа в редакторе Блокнот»

Описание разработки

Цели урока:

·формирование представлений о языке гипертекстовой разметки HTML;

·формирование умений создавать HTML-документы в редакторе Блокнот;

·развитие логического мышления, умений анализировать, сравнивать, систематизировать, обобщать.

Методические рекомендации к уроку

1. Проверка знаний предыдущего урока (репродуктивный метод обучения, индивидуальная и фронтальная форма работы).

Выполнение индивидуальных заданий на компьютере: сохранить в виде веб-страницы предложенную учителем презентацию (упражнение к § 2 (п. 2. 2) пособия [1]; ЭСУ Web11‑4 [2]). Предложите учащимся перечислить последовательность действий при сохранения презентации PowerPoint в виде веб-документа и ответить на вопрос: Какие параметры веб-документа можно настроить?

2. Актуализация знаний и мотивация учащихся на изучение нового материала (фронтальная форма работы).

Мотивации учащихся способствует формулировка целей урока: познакомиться с основами языка гипертекстовой разметки и создать HTML-документ в редакторе Блокнот.

Для актуализации ранее изученного материала напомните возможности простейшего текстового редактора Блокнот и основные приемы работы. В каком формате сохраняется текстовый документ в редакторе Блокнот?

3. Объяснение нового материала (объяснительно-иллюстративный метод обучения, фронтальная форма работы).

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

Далее отметьте, что HTML‑ документ можно создавать в простейших текстовых редакторах, например, редакторе Блокнот, а затем сохранять в файле с расширением . htm или . html. Разметка HTML‑документа состоит в расстановке тегов ‑ меток языка HTML.

Рассмотрите структуру простейшей веб-страницы (рис. 1. 14 пособия[1] или ЭСУ Web11‑5 [2]). Выясните роль парных тегов.

C помощью видеопроектора продемонстрируйте действие некоторых тегов структуры, например:

4. Закрепление нового материала (частично-поисковый метод обучения, индивидуальная форма работы).

Предложите учащимся занять места за компьютерами и выполнить задания примеров 1 и 2 из § 3 (п. 3. 1); ЭСУ Web11‑5 [2]. Контролируйте самостоятельную работу каждого ученика, просматривая результаты на каждом этапе в браузере. При затруднениях оказывайте необходимую помощь.

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

5. Подведение итогов урока

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

6. Домашнее задание

Изучить материал § 3 (п. 3. 1) учебного пособия [1], ответить на вопросы 1‑4, подготовиться к практическому выполнению одного из заданий упражнения
(на выбор учащегося).

Полную информацию смотрите в файле.

Содержимое разработки

формирование представлений о языке гипертекстовой разметки HTML;

формирование умений создавать HTML-документы в редакторе Блокнот;

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

Тип урока: урок усвоения новых знаний и умений.

Учащиеся должны знать: понятия тег, атрибуты тега.

Учащиеся должны уметь: создавать HTML-документы в редакторе Блокнот.

Программное и методическое обеспечение урока: редактор Блокнот; учебное пособие «Информатика 11», § 3 (п.3.1) [1]; ЭСУ Web11‑5 [2].

Методические рекомендации к уроку

1. Проверка знаний предыдущего урока (репродуктивный метод обучения, индивидуальная и фронтальная форма работы).

Выполнение индивидуальных заданий на компьютере: сохранить в виде веб-страницы предложенную учителем презентацию (упражнение к § 2 (п.2.2) пособия [1]; ЭСУ Web11‑4 [2]). Предложите учащимся перечислить последовательность действий при сохранения презентации PowerPoint в виде веб-документа и ответить на вопрос: Какие параметры веб-документа можно настроить?

2. Актуализация знаний и мотивация учащихся на изучение нового материала (фронтальная форма работы).

Мотивации учащихся способствует формулировка целей урока: познакомиться с основами языка гипертекстовой разметки и создать HTML-документ в редакторе Блокнот.

Для актуализации ранее изученного материала напомните возможности простейшего текстового редактора Блокнот и основные приемы работы. В каком формате сохраняется текстовый документ в редакторе Блокнот?

3. Объяснение нового материала (объяснительно-иллюстративный метод обучения, фронтальная форма работы).

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

Далее отметьте, что HTML‑ документ можно создавать в простейших текстовых редакторах, например, редакторе Блокнот, а затем сохранять в файле с расширением .htm или .html. Разметка HTML‑документа состоит в расстановке тегов ‑ меток языка HTML.

Рассмотрите структуру простейшей веб-страницы (рис. 1.14 пособия[1] или ЭСУ Web11‑5 [2]). Выясните роль парных тегов html … html, … , body … body.

C помощью видеопроектора продемонстрируйте действие некоторых тегов структуры, например: p, br; оформления, например: b, i (ЭСУ Web11‑5 [2]). Введите понятие атрибутов тега. Приведите примеры атрибутов и продемонстрируйте их действие. Например, изменяйте цвет фона веб-страницы, задавая значения атрибута bgcolor (red, green, blue).

4. Закрепление нового материала (частично-поисковый метод обучения, индивидуальная форма работы).

Предложите учащимся занять места за компьютерами и выполнить задания примеров 1 и 2 из § 3 (п.3.1); ЭСУ Web11‑5 [2]. Контролируйте самостоятельную работу каждого ученика, просматривая результаты на каждом этапе в браузере. При затруднениях оказывайте необходимую помощь.

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

5. Подведение итогов урока

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

6. Домашнее задание

Изучить материал § 3 (п. 3.1) учебного пособия [1], ответить на вопросы 1‑4, подготовиться к практическому выполнению одного из заданий упражнения
(на выбор учащегося).