Урок по теме «Основы создания HTML - страниц»

Рогозина Светлана Яковлевна МБОУ СОШ № 12 МО город-курорт Анапа

Краснодарский край, учитель информатики

Урок по теме «Основы создания HTML - страниц»

Урок № 3 «Создание и форматирование таблиц».

Тема урока: Создание и форматирование таблиц в НTML-документе.

Тип урока: урок-практикум.

Время проведения: третий урок, отведенный на изучение темы «О$сновы создания HTML - страниц » (ба­зовый курс 8 класс).

$Формы организации учебной деятельности: индивидуальная.

Цели урока:

  • повторить знания о способах создания WEB-страниц;

  • изучить способы создания и форматирования таблиц с помощью НTML – кода;

  • развитие познавательного интереса, творческой активности учащихся;

  • развитие у школьников умения излагать мысли, моделировать ситуацию;

Задачи урока:

  1. Воспитательная — развитие познавательного интереса, логического мышления.

  2. Учебная — повторение знаний по теме, изучение нового материала.

  3. $Развивающая — развитие алгоритмического стиля мышления, памяти, внимательности.

Этапы урока:

  1. постановка цели урока и мотивация учебной деятельности;

  2. актуализация знаний по изучаемой теме;

  3. объяснение нового материала;

  4. практическое закрепление изученной темы;

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

Ход урока$.

1. Организационная часть:

  • приветствие;

  • проверка отсутствующих.

2. Актуализация деятельности учащихся:

  • объявление плана урока;

  • повторение основных вопросов изученной темы (фронтальный опрос с дублированием основных моментов повторения на сладах презентации):

  1. вопрос. Что такое HTML – документ?

Слайд презентации 1. HTML – документ - это файл, содержащий текст и команды форматирования, пред$назначенный для размещения на web-серверах в сети Интернет. HTML – документ создается с помощью языка гипертекстовой разметки или HTML – кода. Основным элементом разметки HTML – кода является ТЭГ. Тэги выделяются угловыми скобками и могут быть одиночными или парными. Тэги могут содержать внутри себя атрибуты, которые задают определенные параметры форматирования.

  1. Вопрос. Какую структуру должен иметь HTML – документ?

$Слайд презентации 2. Весь HTML – код страницы помещается в парный тег HTML> HTML>, который состоит из двух частей: заголовка и отображаемого в браузере содержания.

Заголовок страницы помещается в парный тег Head>$Head>, который в свою очередь содержит название страницы – парный тег title> title>, а так же одиночные служебные теги и BASE>. Отображаемое в браузере содержание страницы помещается внутри парного тэга body> body>.

  1. Вопрос. С помощью, какой программы создается и просматривается HTML – документ?

HTML – код страницы может быть создан с помощью текстового редактора Блокнот в фале с расширеним .HTM или .HTML и затем просмотрен с помощью любого браузера. При внесении изменений в HTML – код страницы необходимо сохранить эти изменения в файле, а содержание браузера – обновить.

$ 3. Объяснение нового материала: Создание и форматирование таблиц. (По презентации):

Слайд презентации 3. При работе с таблицами в офисных приложениях они у нас задаются количеством строк и столбцов. При создании таблицы с помощью HTML – кода порядок действий иной:

  1. описание таблицы;

  2. описание строки;

  3. $описание ячейки;

  4. ввод текста ячейки

Слайд презентации 4. Вставка таблицы - парный тэг

По умолчанию текст выравнивается по левому краю, ширина столбца - по наиболее длинному элементу.

Слайд презентации 5. Атрибуты к тэгу

BORDER– толщина границы таблицы в пикселях;

WIDTH – ширина таблицы в пикселях или процентах, относительно окна браузера

Пример:

$

Слайд презентации 6. Вставка строки таблицы - парный тэг tr> tr>

Атрибуты:$

Align = (left, center, richt) – горизонтальное выравнивание

Valign = bottom, middle, top) – вертикальное выравнивание

Пример:

tr>

Слайд презентации 7. Вставка ячейки таблицы - парный тэг

Атрибуты:

Align = (left, center, richt) – горизонтальное выравнивание

Valign = (bottom, middle, top) – вертикальное выравнивание

Пример:

Тема доклада

Слайд презентации 8. Пример кода таблицы:

$

$

№ пп ФИО Тема доклада

Демонстрация отображения полученной таблицы в браузере (гиперссылка на слайде № 8).

4. Практическое закрепление изученной темы: выполнение практической работы «Создание Web-страницы, содержащей таблицу». (Практическое задание и справочный материал по теме выдаются каждому ученику.) Время работы на компьютере 20минут.

2-я страница docl.html

$Докладчики

Заголовок браузера

Список докладчиков | заголовок 2 уровня

пп

$ФИО

Тема доклада

1

Иванова Е.И.

«Этапы проектирования курса обучения»

2

Петрова Н.С.

«Гуманизация образовательного процесса»

3

Семенова Е.И.

«Методика преподавания программирования.

5. Подведение итогов урока. Итак, сегодня на уроке мы познакомились с приемами вставки в HTML-документ таблиц. Давайте повторим основные момент$ы новой темы.

  • Назовите алгоритм вставки и форматирования таблиц.

  • Назовите теги, которые мы использовали для создания таблицы.

  • Назовите атрибуты, $которые можно использовать при создании таблиц.

Выполненные вами работы будут проверены, оценки я объявлю на следующем уроке.

Какие будут вопросы по проведенному уроку.

Домашнее задание: Записать HTML- код страницы, содержащей таблицу из 5 столбцов и 3 строк. Для каждого столбца установите свое выравнивание текста.

Скачать оригинальный файл

(function(w, d, n, s, t) {
w[n] = w[n] || [];
w[n].push(function() {
Ya.Context.AdvManager.render({
blockId: "R-A-187659-4",
renderTo: "yandex_rtb_R-A-187659-4",
async: true
$ });
});
t = d.getElementsByTagName("script")[0];
s = d.createElement("script");
s.type = "text/javascript";
s.src = "//an.yandex.ru/system/context.js";
s.async = true;
t.parentNode.insertBefore(s, t);
})(this, this.document, "yandexContextAsyncCallbacks");

.globuss24_show_bottom { width: 300px; height: 100px; }
@media(min-width: 600px) { .globuss24_show_bottom { width: 580px; height: 400px; } }

$

(adsbygoogle = window.adsbygoogle || []).push({});

Репетиторы по информатике
Виктория Владимировна

от 500 руб./час

Студент, стаж 3 года

0

$

Александр Сергеевич

от 450 руб./час

Частный преподаватель, стаж 2 года

0

Айгуль Геннадьевна

от 1 000 руб./час

Частный преподаватель, стаж 8 лет

$

1

Добавить комментарий

You must have JavaScript enabled to use this form.


$

О текстовых форматах

$

  • 1 класс
  • 2 класс
  • 3 класс
  • 4 класс
  • 5 класс
  • 6 класс
  • 7 класс
  • 8 класс
  • 9 класс
  • 10 класс
  • 11 класс

(function(w, d, n, s, t) {
w[n] = w[n] || [];
w[n].push(function() {
Ya.Context.AdvManager.render({
blockId: "R-A-187659-2",
renderTo: "yandex_rtb_R-A-187659-2",
async: true
});
});
t = d.getEleme$ntsByTagName("script")[0];
s = d.createElement("script");
s.type = "text/javascript";
s.src = "//an.yandex.ru/system/context.js";
s.async = true;
t.parentNode.insertBefore(s, t);
})(this, this.document, "yandexContextAsyncCallbacks");

Рекомендуем
Мультимедиа технологии
Электронные образовательные ресурсы
Что умеет компьютер
Что умеет компьютер
Что умеет компьютер
Что умеет компьютер
Что умеет компьютер_Васильева Вика
Алгоритмы на паскале

.globus24_sidebar { width: 300px; height: 600px; }

$$

(adsbygoogle = window.adsbygoogle || []).push({});

Рекомендуем
Конспект урока для 7 класса на тему "Компьютерная графика"
Конспект урока по информатике для 10 класса на тему "Графические операторы Turbo Pascal"
Тест на знание ИКТ
Конспект урока для 3 класса на тему "Алгоритм. Схема алгоритма"
Конспект урока на тему «Знакомство с текстовым редактором Microsoft Word 2010»
Урок для 6 класса «Операции над несколькими объектами с помощью панели Свойств в CorelDraw»
Урок по информатике для 5 класса «Кодирование информации»
Знакомство со средой программирования Basic-256

  • Алгебра
  • $

  • Английский язык
  • Биология
  • География
  • Геометрия
  • ИЗО
  • Информатика
  • История
  • Литература
  • Математика
  • Музыка
  • МХК
  • Начальная школа
  • $

  • ОБЖ
  • Обществознание
  • Окружающий мир
  • ОРКСЭ
  • Педагогика
  • Природоведение
  • Разное
  • Русский язык
  • Технология
  • Физика
  • Физкультура
  • Химия
  • Экология
  • Экономика

(function(w, d, n, s, t) {
w[n] = w[n] || [];
w[n].push(function() {
Ya.Context.AdvManager.render({
blockId: "R-A-187659-3",
renderTo: "yandex_rtb_R-A-187659-3",
async: true
});
});
t = d.getElementsByTagName("script")[0];
s = d.createElement("script");
s.type = "text/javascript";
s.src = "//an.yandex.ru/system/context.js";
s.async = true;
t.parentNode.insertBefore(s, t);
})(this, this.document, "yandexContextAsyncCallbacks");

Сайт
  • Контакты
  • Правообладателям
  • Рекламодателям
  • $Авторам
Образование не может быть собственно целью.
Ханс Георг Гадамер

globuss24.ru © 2017 – образование для всех

вверх

Post Comment