Урок Инструменты создания Web-страниц. HTML
Тема: Инструменты создания Web-страниц. HTML
Цели :
Образовательные:
приобрести начальные навыки создания простейших Internet-документов;
научиться выполнять форматирование созданных Web-страниц.
Воспитательные:
воспитание информационной культуры учащихся, внимательности, аккуратности, дисциплинированности, усидчивости;
формировать элементы научного мировоззрения
Развивающие:
развивать наглядно-образное мышление, память и умение сравнивать и анализировать
Тип занятия: комбинированный.
План урока:
I. ОргмоментII. Актуализация знаний.
III. Объяснение нового материала
IV. Выполнение практической работы по теме.
V. Подведение итогов, выдача домашнего задания
ХОД УРОКА
1. ОргмоментПриветствие, проверка присутствующих. Объяснение хода занятия.
2. Актуализация знаний
Давайте вспомним, какие услуги предоставляет Internet?
Какая из перечисленных услуг является самой популярной? (WWW – всемирная паутина, которая позволяет просматривать Web - страницы)
Любой пользователь 21 века должен уметь представлять свою информацию в Internet. Тема, с которой мы сегодня познакомимся, называется: Создание Web – страниц с помощью HTML.
3. Объяснение нового материала.
а) Основные понятия языка гипертекстов.
Web – страницы находятся на Web – сервере.
Web – сервер- компьютер в сети Internet, хранящий
Web-страницы и соответствующие программы для
работы с ними. Информация на Web – сервере представлена в виде Web – сайта. Web – сайт – это объединение Web – страниц одной темой.
На Web – страницах находится информация: текстовая, графическая, звуковая, видео. Поэтому Web – страницы являются мультимедийными. Для того, чтобы создать Web – страницу нужно написать программу. А на каком языке мы будем писать программу для создания Web – страницы? (На языке HTML)
«HTML»
Слово «HTML» представляет собой сокращение от «HyperTextMarkupLanguage» - «язык разметки гипертекста».
Прежде чем начать писать программу на языке HTML, мы познакомимся с основами языка HTML. Сначала познакомимся с историей создания языка HTML.
«Тег»
Основным понятием языка HTML является понятие тег. ТЕГ – инструкция браузеру, указывающая способ отображения информации.
Задание.Даны теги, определить парные и одиночные
теги.<H1> </H1>, <Br>, <Head> </Head>
Теги пишутся с использованием, какого алфавита? (Латинского)
При написании тегов используются только буквы? (Нет, еще и цифры)
б) Инструментарий для создания web– страниц.
Существует три класса программных средств, используемых для создания web– страниц и сайтов. Все они имеют свои преимущества и недостатки.
1. Обычные текстовые редакторы, например Блокнот. При этом web– страница полностью создается вручную, путем вставки в требуемый текст необходимых тегов. Это самый трудоемкий и отнимающий много времени способ. Но благодаря ему вам становится понятной вся технология сайтостроения.
2. HTML-редакторы.Это уже специальные программы, с помощью которых создаются web– страницы. Обычно работа в них также производится с текстом HTML-документа, но предусмотрен ряд инструментов, позволяющих автоматически вставлять в текст соответствующие теги. Просмотр окончательного результата производится в браузере. Такая программа – хороший помощник, намного ускоряющий создание страниц. Но при работе с ней вы также должны быть знакомы с основами HTML.
3. WYSIWYG редакторы. Программы для создания web– страниц и сайтов WYSIWYGредакторы(сокращение фразы «WhatYouSeeIsWhatYouGet» - «Что видишь, то и получаешь») позволяют создаватьweb– страницы, даже ни имея никакого понятия о языке HTML, путем визуального редактирования на экране дисплея. При этом страница в окне редактора выглядит почти также, как должна отображаться в браузере, а при сохранении результатов работы в файле программа автоматически генерирует требуемый HTML-код.
в) Структура web– страницы.
Заголовки.
<H1> Заголовок первого уровня </H1>
<H2> Заголовок второго уровня </H2>
<H3> Заголовок третьего уровня </H3>
<H4> Заголовок четвертого уровня </H4>
<H5> Заголовок пятого уровня </H5>
<H6> Заголовок шестого уровня </H6>
Цвет фона страницы.
г) Работа с программой блокнот для создания Web-страниц.
4. Практическое закрепление нового материала.
1. Запустите программу Блокнот: Пуск – Все программы - Стандартные- Блокнот.
2. Создайте файл и сохраните его под именем index.html.
3. В файле оформите текст «Первая web– страница будет посвящена исследованиям»в виде заголовка первого уровня.
4. Придумайте заголовки для оставшихся пяти уровней и оформите их.
5. Используя документ «Цвет» с палитрой цветов выберете цвет для своей страницы (документ находится на рабочем столе).
5. Подведение итогов урока, выдача домашнего задания
Подведение итогов: достигнута ли цель урока; выставление оценок.
Домашнее задание:
Придумать и нарисовать главную страницу своего сайта
6. Рефлексия