Урок по информатике «Создание web-страниц с помощью HTML. Основы языка HTML»

Тараненко Н.Ф.
Учитель информатики и физики
Цели урока:
  • Обучающая: изучение структуры HTML – документа, основных понятий: тег, структура, технология создания Web-страниц;
  • Развивающая: умение сравнивать и обобщать;
  • Воспитательная: воспитание информационной культуры, положительное отношение к знаниям.
Тип урока: изучение нового материала с последующим применением его в практической работе.
Вид урока: теоретический урок
Методы: объяснительно-иллюстративный, репродуктивный
План урока.
  1. Постановка цели урока.
  2. Актуализация знаний
III Изучение нового материала.
IV Закрепление полученных знаний. Практическая работа.
  1. Подведение итогов урока.
VI Домашнее задание
Ход урока.
  1. I. Постановка цели урока.
Ребята, каждый из вас  с помощью сотового телефона или подключив компьютер к Интернету обязательно захочет посмотреть, что интересного скрывает в себе глобальная компьютерная сеть. Вы уже умеете пользоваться различными средствами Интернета и  заходить на интересующие вас сайты, сайты своих друзей. Любой пользователь 21 века должен уметь представлять свою информацию в Internet.
А кто-нибудь из вас хотел бы сделать свою личную страничку,  свой сайт.
Сегодня мы начнём рассмотрение одного  из способов  создания сайта, в рамках изучения нашего профильного курса: web-программирование.        
II Актуализация знаний
  • Где находятся Web – страницы? (На Web — серверах)
Web – сервер — компьютер в сети Internet, хранящий Web-страницы и соответствующее программное обеспечение для работы с ними.
  • Информация на Web – серверах представлена в виде … (Web — сайта)
  • Что такое Web – сайт? (Объединение Web – страниц одной темой)
  • А что ещё характерно для Web – сайт? (Наличие титульной страницы, которая называется домашняя или главная)
  • в Web – сайтах как соединены Web – страницы? (Гиперссылками)
  • Что такое гиперссылка? (Гиперссылка осуществляет переход от одной страницы к другой)
  • Как узнать, что в тексте есть гиперссылка? (Выделена другим цветом или курсор на ссылке меняет свою форму и превращается в указующий перст)
Для того, чтобы создать Web – страницу нужно написать программу.
  • Какие языки программирования вы знаете?
Вспомним технологию создания программы на языке программирования
1.Набор текста программы.
2. Запуск программы.
3. Сохранение программы с расширением
III Изучение нового материала.
Теперь мы будем действовать по другому. Нам необходимо будет иметь 2 программы:
  1. Блокнот (для создания текста программ)
    2. Браузер (будет отображать информацию в своём рабочем окне)
Технология создания Web – страницы:
1.Набрать текст программы (в Блокноте)
2. Сохранить программу с расширением *.htm или
html (если это главная страница, то этот файл должен иметь имя index.html)
  1. Запустить броузер Internet Explorer и из него открыть html-файл
  2. Для просмотра и редактирования html-кода выполнить ВИДв виде НТМL
  3. 5. После внесения изменений выполнить Обновить (F5)
Замечания:
  1. имена файлов д.иметь только латинские имена с расширением htm или html
  2. все файлы, относящиеся к одному проекту: html-файлы, графика и т.д. должны располагаться в одном каталоге
  • А на каком языке мы будем писать программу для создания Web – страницы? (На языке HTML).
Прежде чем начать писать программу на языке HTML, мы познакомимся с основами языка HTML.
Основным понятием языка HTML является понятие тег.
Записываем в опорный конспект
ТЕГ – инструкция браузеру, указывающие способ отображения информации.
Задание. Даны теги, определить парные и одиночные теги.              <H1> </H1>, <Br>, <Hr>, <Head> </Head>
  • Теги пишутся с использованием, какого алфавита?! (Латинского)
  • При написании тегов используются только буквы?! (Нет, еще и цифры)
Структура HTML – документа.
Особенности:     
  1. текст, который мы хотим видеть в окне браузера, помещается между тегами.
  2. все теги заключены в скобки.
  3. в парных тегах закрывающий тег начинается с символа / «слеш». Парные теги выделяют текстовый блок и придают ему на странице некоторый статус; например, с помощью тегов <hi>…</hi> текстовый блок выделяется как заголовок.
  4. Большинство тегов имеют ряд свойств, называемых параметрами; например, заголовок, помеченный тегами <hi aiign=»center” >…</hi>, располагается в центре окна браузера.
  5. Каждый параметр представлен в следующем виде: имя_параметра=«значение_параметра», например width=»80».
Все параметры располагаются в открывающем теге. Если параметров несколько, они отделяются пробелами. Порядок их следования не имеет значения.
  1. Информация, располагаемая между тегами <head> … </head>, не отображается в окне браузера, там находятся тег заголовка страницы, теги  для поисковых машин, программный код, написанный на языке программирования, например JavaScript, и другая  служебная информация.
  2. Вся информация, видимая в окне браузера, помещается между тегами <body>…</body>.
IV Закрепление полученных знаний. Практическая работа.
(Выполнение заданий по карточке.)
Отметить тех, кто справился с заданием быстро и правильно. Оцениваться задания будут позже учителем, в виде проверки сохранённых файлов
   Анализ работы:
?        какую команду надо выполнять после внесения изменений в код.
?        изменилось ли изображение текста на экране, когда вы клавишей Enter разбили предложение на абзацы?
?        вспомните работу в текстовых редакторах. Какие параметры текста и как мы меняли  – цвет шрифта, размер, начертание, отступ  абзаца, выравнивание и т.д.
Для изменения вида шрифта, абзаца, работы с графикой, таблицами в HTML существуют специальные команды (теги).
 Кроме того, существует команда, которая запрещает программе браузера каким-либо образом изменять форматирова­ние текста и позволяет точно воспроизвести на экране заданный фрагмент текстового файла.
Основные теги для работы содержатся в таблице (в опроных конспектах учеников)
  1. Подведение итогов урока.
  2. Как переводится HTML и что это обозначает?
  3. Как устроен HTML-документ?
  4. В чем отличие обычного текста от HTML-документа?
  5. Для чего используется тег?
  6. Назовите обязательные теги.
  7. Чем отличается тег <BR> от тега <Р>?
  8. С помощью каких средств можно изменить стиль, цвет, размер выводимого текста на HTML-странице?
  9. Как можно просмотреть структуру HTML-документа?
На этом уроке мы с вами сделали только первые шаги. Самое интересное ещё впереди: это работа с графикой, фотографиями, создание собственных страниц. Всё это на следующих уроках. До свидания!
VI Домашнее задание
 На следующем уроке будем создавать Web – страницы  с графикой на тему «Рассказ о себе и своих увлечениях». Принести текстовый материал и фото.