Цель урока: разработать эскиз и приступить
к созданию титульной страницы сайта.
- Научиться:
- создавать HTML-файлы;
- оформлять заголовки;
- управлять размером, гарнитурой и цветом шрифта;
- выделять и выравнивать абзацы;
- размещать графику на web-странице.
ХОД УРОКА
I. Актуализация знаний. Постановка целей урока
Учитель: На прошлом уроке мы приступили к
знакомству с языком разметки гипертекстовых
документов HTML, ввели понятия: "тег”, "атрибуты
тега”, рассмотрели структуру HTML-файла и главные
теги: "HTML”, "HEAD”, "TITLE”, "BODY” (учитель
обращает внимание учащихся на таблицу
"Структура HTML-документа”). Мы разработали
проект нашего учебного сайта "Компьютер”.
Решили, что наш сайт будет содержать 4 страницы.
Учитель: Перечислите, пожалуйста, названия
страниц нашего сайта (диалог с учащимися,
учащиеся перечисляют название страниц сайта и
поясняют их содержание).
Учитель: Сегодня на уроке мы приступим к
созданию первой страницы учебного сайта
"Компьютер”.
II. Разработка эскиза титульной страницы
Учитель: Создадим эскиз титульной страницы
сайта "Компьютер” (обсуждение с учащимися).
В результате обсуждения решили, что титульная
страница обязательно должна содержать
"заголовок”, "поясняющий текст”,
"иллюстрацию”. (Учитель показывает на
демонстрационном компьютере предполагаемый
внешний вид титульной страницы.)
III. Изучение нового материала
Учитель: Внешний вид страницы задается с
помощью управляющих символов языка HTML – тегов.
Рассмотрим теги, которые позволят нам
реализовать задуманный проект титульной
страницы.
Учитель объясняет материал, учащиеся
конспектируют.
Заголовки:
HTML поддерживает 6 уровней внутренних
заголовков.
<H1>…</H1> самый крупный
<H2>…</H2>
<H3>…</H3>
<H4>…</H4>
<H5>…</H5>
<H6>…</H6> самый мелкий
Атрибуты: align="значение" (определяет способ
выравнивания заголовка по горизонтали).
Значения: center (по центру), right (по правому краю), left
(по левому краю).
Например, <H1 align="center"> Давайте
знакомиться - Компьютер</H1> (заголовок первого
уровня, выравнивание по центру).
Форматирование текста
1) Выделение текста:
<B>…</B> - выделение полужирным
<I>…</I> - выделение курсивом
<U>…</U> - выделение
подчёркиванием
Например: <B>Привет</B>
2) Стиль шрифта (гарнитура, размер, цвет):
<FONT>…</FONT>
Тег <FONT> должен иметь хотя бы один из трёх
возможных атрибутов:
Размер шрифта size="значение" (значения
целые числа от 1 до 7)
Цвет шрифта color="значение"
Значение – название цвета или его 16-й код,
например
<FONT color="red"> привет</FONT>
<FONT color=#cc0000> привет</FONT>
Гарнитура (вид шрифта) FACE="значение",
например
<FONT FACE="Arial"> привет</FONT>
Пример <FONT size="7" color="red"
face="Arial"> привет</FONT> (слово привет имеет
размер 7, красного цвета, вид шрифта Arial).
Тег абзаца: <P>…</P>
Атрибут:
- align="значение"
- left (по левому краю), right (по правому краю), center (по
центру), justify (по ширине).
Перевод строки: <BR>
Вставка графического изображения
В web-страницах могут использоваться три
графических формата - GIF, JPG, RNG.
Ваш рисунок должен быть размещён в папке сайта,
лучше все рисунки размещать в отдельной папке,
например, images.
Тег вставки изображения: <IMG src="имя
графического файла">
Например: <IMG src="images\comp.gif"
alt="Компьютер" align="right">
Изображение переносится с сохранением размера.
Атрибуты:
- alt="текст" выводит поясняющий текст в
случае, если рисунок не может быть отображен
браузером.
- align="значение" расположение рисунка
относительно текста.
Значения: top (вверх), middle (середина), bottom (низ), left
(слева), right (справа).
height и width – определяют высоту и ширину
изображения соответственно. Если указанные
размеры не совпадают с реальным размером
изображения, то изображение масштабируется
(порой с заметной потерей качества).
IV. Практическая работа
Обсуждение и выполнение практической работы
(учащимся раздаётся распечатка c ходом
практической работы). Во время практической
работы учитель консультирует учащихся.
V. Итог урока
Фронтальная беседа: что сегодня узнали на
уроке, чему научились?
VI. Постановка задач на следующий урок
Учитель: На следующем уроке мы продолжим
работу по оформлению титульной страницы:
"Компьютер". Мы научимся задавать цвет фона,
вставлять фоновое изображение, создавать
простые таблицы.
VII. Домашнее задание
Разработайте эскиз титульной страницы
собственного сайта (начинается работа по
выполнению индивидуального итогового проекта).
Практическая работа "Создание
титульной страницы – "Компьютер”"
Цель работы:
- Научиться
- создавать, просматривать и редактировать
HTML-документы;
- оформлять заголовки;
- управлять размером, гарнитурой и цветом шрифта;
- выделять и выравнивать абзацы;
- размещать графику на web-странице.
ХОД РАБОТЫ
1. Создайте папку site (Файл-Создать-Папку).
2. Откройте текстовый редактор Блокнот
(Пуск-Программы-Стандартные-Блокнот).
3. Наберите следующий HTML-код:
<HTML>
<HEAD>
<TITLE> Компьютер</TITLE>
</HEAD>
<BODY >
Давайте знакомиться – компьютер
</BODY>
</HTML> |
4. Сохраните под именем index.html в папке site.
Для этого выполните Файл – Сохранить как… В
окне Сохранение документа в списке Тип
файла выберите Все файлы (*.*). В поле Имя
файла введите index.html и нажмите кнопку Сохранить.
Рис. 1
5. Закройте текстовый редактор Блокнот.
6. Откройте папку site. В ней находится файл
web-страницы, который открывается и распознаётся
браузером Internet Explorer:
Рис. 2
7. Откройте двойным щелчком файл index.html для
просмотра в браузере. Проанализируйте
полученный результат.
Рис. 3
8. Оформим фразу "Давайте знакомиться –
компьютер” как заголовок. Для этого откроем
HTML-код нашей страницы:
- вызовите контекстное меню и выберите пункт Просмотр
HTML-кода;
Рис. 4
- внесите изменения:
<HTML>
<HEAD>
<TITLE> Компьютер </TITLE>
</HEAD>
<BODY >
<H1> Давайте знакомиться – компьютер</H1>
</BODY>
</HTML> |
- сохраните файл (Файл – Сохранить);
Замечание. Обратите внимание на панель
задач. На ней располагаются папка site, Блокнот с файлом
index.html (HTML-код страницы) и браузер с нашей
страничкой "Компьютер”.
Рис. 5
- воспользуйтесь Панелью задач и перейдите к
просмотру страницы в браузере. Нажмите кнопку Обновить
или клавишу F5.
9. Зададим выравнивание заголовка "по центру”:
- вернитесь к HTML-коду нашей страницы (index-Блокнот)
и внесите изменения:
<HTML>
<HEAD>
<TITLE> Компьютер </TITLE>
</HEAD>
<BODY >
<H1 align=”center”> Давайте знакомиться –
компьютер</H1>
</BODY>
</HTML> |
- gросмотрите страницу в браузере (нажмите кнопку Обновить).
10. Изменим цвет заголовка на голубой и
гарнитуру шрифта на Arial:
<HTML>
<HEAD>
<TITLE> Компьютер </TITLE>
</HEAD>
<BODY >
<H1 align=”center”> <FONT color=”blue” face=”Arial” >Давайте
знакомиться – компьютер</FONT></H1>
</BODY>
</HTML> |
- просмотрите страницу в браузере (нажмите кнопку
Обновить).
11. Добавим на страницу основной текст. Оформим
его как абзац, зададим выравнивание текста "по
ширине”:
<HTML>
<HEAD>
<TITLE> Компьютер </TITLE>
</HEAD>
<BODY >
<H1 align=”center”> <FONT color=”blue” face=”Arial” >Давайте
знакомиться – компьютер</FONT></H1>
<P align=”justify”> Страницы этого сайта
позволят Вам больше узнать о компьютере, его
программном и аппаратном обеспечении.
Терминологический словарь познакомит Вас с
компьютерными терминами.
Вы получите информацию о ценах на компьютерные
комплектующие.
</P>
</BODY>
</HTML> |
- просмотрите страницу в браузере (нажмите кнопку
Обновить).
12. Добавим на нашу страницу картинку. Для этого
в папке site создайте вложенную папку images. В
папку images скопируйте файл comp.gif. Добавьте
в HTML-код нашей страницы тег вставки изображения
(зададим поясняющий текст к картинке,
выравнивание по правому краю):
<HTML>
<HEAD>
<TITLE> Компьютер </TITLE>
</HEAD>
<BODY >
<H1 align=”center”> <FONT color=”blue” face=”Arial”
>Давайте знакомиться – компьютер</FONT></H1>
<IMG src=”images\comp.gif” alt=”Компьютер”align=”right” >
<P align="justify"> Страницы этого сайта
позволят Вам больше узнать о компьютере, его
программном и аппаратном обеспечении.
Терминологический словарь познакомит Вас с
компьютерными терминами.
Вы получите информацию о ценах на компьютерные
комплектующие.
</P>
</BODY>
</HTML> |
- просмотрите страницу в браузере (нажмите кнопку
Обновить).
Итак, мы реализовали проект сегодняшнего урока.
Наша страница:
Подведем итоги:
Рис. 7 | 