Занятие элективного курса "Web-дизайнер" для учащихся 9-го класса: "Создание титульной страницы сайта"





Скачать 61.89 Kb.
НазваниеЗанятие элективного курса "Web-дизайнер" для учащихся 9-го класса: "Создание титульной страницы сайта"
Дата публикации02.10.2014
Размер61.89 Kb.
ТипУрок
100-bal.ru > Информатика > Урок

Занятие элективного курса "Web-дизайнер" для учащихся 9-го класса: "Создание титульной страницы сайта"


Цель урока: разработать эскиз и приступить к созданию титульной страницы сайта.

  • Научиться:

    • создавать HTML-файлы;

    • оформлять заголовки;

    • управлять размером, гарнитурой и цветом шрифта;

    • выделять и выравнивать абзацы;

    • размещать графику на web-странице.

ХОД УРОКА

I. Актуализация знаний. Постановка целей урока

Учитель: На прошлом уроке мы приступили к знакомству с языком разметки гипертекстовых документов HTML, ввели понятия: “тег”, “атрибуты тега”, рассмотрели структуру HTML-файла и главные теги: “HTML”, “HEAD”, “TITLE”, “BODY” (учитель обращает внимание учащихся на таблицу “Структура HTML-документа”). Мы разработали проект нашего учебного сайта “Компьютер”. Решили, что наш сайт будет содержать 4 страницы.

Учитель: Перечислите, пожалуйста, названия страниц нашего сайта (диалог с учащимися, учащиеся перечисляют название страниц сайта и поясняют их содержание).

Учитель: Сегодня на уроке мы приступим к созданию первой страницы учебного сайта “Компьютер”.

II. Разработка эскиза титульной страницы

Учитель: Создадим эскиз титульной страницы сайта “Компьютер” (обсуждение с учащимися). В результате обсуждения решили, что титульная страница обязательно должна содержать “заголовок”, “поясняющий текст”, “иллюстрацию”. (Учитель показывает на демонстрационном компьютере предполагаемый внешний вид титульной страницы.)

III. Изучение нового материала

Учитель: Внешний вид страницы задается с помощью управляющих символов языка HTML – тегов. Рассмотрим теги, которые позволят нам реализовать задуманный проект титульной страницы.

Учитель объясняет материал, учащиеся конспектируют.

Заголовки:

HTML поддерживает 6 уровней внутренних заголовков.

самый крупный





самый мелкий

Атрибуты: align="значение" (определяет способ выравнивания заголовка по горизонтали).

Значения: center (по центру), right (по правому краю), left (по левому краю).

Например,

Давайте знакомиться - Компьютер

(заголовок первого уровня, выравнивание по центру).

Форматирование текста

1) Выделение текста:

- выделение полужирным
- выделение курсивом
- выделение подчёркиванием
Например: Привет

2) Стиль шрифта (гарнитура, размер, цвет):



Тег должен иметь хотя бы один из трёх возможных атрибутов:

Размер шрифта size="значение" (значения целые числа от 1 до 7)
Цвет шрифта color="значение"
Значение – название цвета или его 16-й код, например
привет
привет
Гарнитура (вид шрифта) FACE="значение", например
привет

Пример привет (слово привет имеет размер 7, красного цвета, вид шрифта Arial).

Тег абзаца:



Атрибут:

  • align="значение"

  • left (по левому краю), right (по правому краю), center (по центру), justify (по ширине).

Перевод строки:


Вставка графического изображения

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

Тег вставки изображения:

Например: компьютер

Изображение переносится с сохранением размера.

Атрибуты:

  • alt="текст" выводит поясняющий текст в случае, если рисунок не может быть отображен браузером.

  • align="значение" расположение рисунка относительно текста.

Значения: top (вверх), middle (середина), bottom (низ), left (слева), right (справа).

height и width – определяют высоту и ширину изображения соответственно. Если указанные размеры не совпадают с реальным размером изображения, то изображение масштабируется (порой с заметной потерей качества).

IV. Практическая работа

Обсуждение и выполнение практической работы (учащимся раздаётся распечатка c ходом практической работы). Во время практической работы учитель консультирует учащихся.

V. Итог урока

Фронтальная беседа: что сегодня узнали на уроке, чему научились?

VI. Постановка задач на следующий урок

Учитель: На следующем уроке мы продолжим работу по оформлению титульной страницы: "Компьютер". Мы научимся задавать цвет фона, вставлять фоновое изображение, создавать простые таблицы.

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

Разработайте эскиз титульной страницы собственного сайта (начинается работа по выполнению индивидуального итогового проекта).

Практическая работа "Создание титульной страницы – “Компьютер”"


Цель работы:

  • Научиться

    • создавать, просматривать и редактировать HTML-документы;

    • оформлять заголовки;

    • управлять размером, гарнитурой и цветом шрифта;

    • выделять и выравнивать абзацы;

    • размещать графику на web-странице.

ХОД РАБОТЫ

1. Создайте папку site (Файл-Создать-Папку).

2. Откройте текстовый редактор Блокнот (Пуск-Программы-Стандартные-Блокнот).

3. Наберите следующий HTML-код:



Компьютер


Давайте знакомиться – компьютер

Добавить документ в свой блог или на сайт

Похожие:

Занятие элективного курса \"Web-дизайнер\" для учащихся 9-го класса: \"Создание титульной страницы сайта\" iconПлан урока по теме: «Web-страницы и web-сайты. Структура web-страницы.»...
Обучающая организовать деятельность учащихся по изучению новой темы; ознакомить учащихся с понятием сайта, структурой web- страницы,...
Занятие элективного курса \"Web-дизайнер\" для учащихся 9-го класса: \"Создание титульной страницы сайта\" iconИзучение информатики в старшей школе направлено на достижение следующих целей
В данном проекте рассматривается создание Web страниц с помощью html кода. Он может быть использован для изучения темы "Создание...
Занятие элективного курса \"Web-дизайнер\" для учащихся 9-го класса: \"Создание титульной страницы сайта\" iconПроекта: Разработка Web-приложений
Разработка web-приложений, бизнес процесс разработки web-приложения, cms drupal, создание сайта кафедры
Занятие элективного курса \"Web-дизайнер\" для учащихся 9-го класса: \"Создание титульной страницы сайта\" iconСоздание персонального сайта педагога
Создание сайта должно начинаться с тщательного планирования всех этапов. Такое планирование начинается с разработки Технического...
Занятие элективного курса \"Web-дизайнер\" для учащихся 9-го класса: \"Создание титульной страницы сайта\" iconТемы экзаменационных рефератов по информатике в 9 классе 2010-11 уч г
Создание тестового Web-сайта средствами html. Гиа по одному из школьных предметов в Web-формате
Занятие элективного курса \"Web-дизайнер\" для учащихся 9-го класса: \"Создание титульной страницы сайта\" iconПрограмма элективного курса по информатике и икт «Создание Web-сайтов»
Умение представлять информацию в виде, удобном для восприятия и использования другими людьми – одно из условий образовательной компетентности...
Занятие элективного курса \"Web-дизайнер\" для учащихся 9-го класса: \"Создание титульной страницы сайта\" iconПрограмма элективного курса по алгебре для 9 класса «Уравнения, неравенства и их системы»
Программа данного элективного курса рассчитана на 16 часов и предназначена для учащихся 9 класса
Занятие элективного курса \"Web-дизайнер\" для учащихся 9-го класса: \"Создание титульной страницы сайта\" iconПрограмма элективного курса по русскому языку для учащихся 9-го класса "Практикум по орфографии"
Программа элективного курса «Практикум по орфографии» рассчитана на 17 часов и предназначена для всех учащихся 9 класса
Занятие элективного курса \"Web-дизайнер\" для учащихся 9-го класса: \"Создание титульной страницы сайта\" iconРабочая программа элективного курса по английскому языку «Лингва. Страноведение. Великобритания»
Программа элективного курса по страноведению предназначена для учащихся 5 класса и рассчитана на 17 часов
Занятие элективного курса \"Web-дизайнер\" для учащихся 9-го класса: \"Создание титульной страницы сайта\" iconПрограммы
Государственных требований к минимуму содержания и уровню требований к специалистам для получения дополнительной квалификации «Специалист...
Занятие элективного курса \"Web-дизайнер\" для учащихся 9-го класса: \"Создание титульной страницы сайта\" iconОбразовательная программа элективного курса по русскому языку. Категория учащихся: 5 класс
Программа элективного курса «Юный лингвист» составлена на основе стандартов основного общего образования и нормативных документов...
Занятие элективного курса \"Web-дизайнер\" для учащихся 9-го класса: \"Создание титульной страницы сайта\" iconПояснительная записка Программа элективного курса по биологии предназначена...
Программа элективного курса по биологии для10(11)класса в рамках профильной подготовки
Занятие элективного курса \"Web-дизайнер\" для учащихся 9-го класса: \"Создание титульной страницы сайта\" iconИнтернет-технологии и Web-дизайн
...
Занятие элективного курса \"Web-дизайнер\" для учащихся 9-го класса: \"Создание титульной страницы сайта\" iconПрограмма элективного курса «Избранные вопросы физики» (2ч в неделю, всего 68часов)
...
Занятие элективного курса \"Web-дизайнер\" для учащихся 9-го класса: \"Создание титульной страницы сайта\" iconУрок Тема : «Эрмитаж-место уединения особо приближенных к императрице»
Предлагаемое занятие разработано для учащихся 3 класса, обучающихся по программе учебного курса «Чудесный город». Занятие проводится...
Занятие элективного курса \"Web-дизайнер\" для учащихся 9-го класса: \"Создание титульной страницы сайта\" iconПрограмма элективного курса по истории для 11 класса Составитель:...
Программа элективного курса «Современная Россия на рубеже XX – начала XXI века» предназначена для учащихся 11-х классов, стремящихся...


Школьные материалы


При копировании материала укажите ссылку © 2013
контакты
100-bal.ru
Поиск