Языки HTML. Форматирование абзацев. Форматирование шрифта.

Тема урока:  Языки HTML. Форматирование абзацев. Форматирование шрифта.

Цели урока: Иметь представление о структуре web – страницы, о форматировании шрифта и абзацев и вставки изображении.

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

Образовательные

• познакомить учащихся с   определением и основным назначением языка HTML, с основными объектами языка;
• изучить с учащимися структуру Web-страницы;
• отработать умение учащихся создавать Web-страницу с помощью приложения Блокнот;
• научить учащихся вносить изменения в созданную Web-страницу.

Развивающие

·         Умение применять получения знания на практике для решения простейших задач

·         Умение самостоятельно добывать знания (работа с литературой)

Воспитательные:

·         Формирование системного мышления

·         формирование мировоззренческой позиции при описании объективной действительности

·         развитие логического мышления учащихся

Тип урока: урок получения и освоения новых знаний , умений и навыков

Вид урока:  лекция с практикой

Оборудование урока: Компьютер с установленной операционной системой Windows, с установленным браузером

Оформление доски: Вывод на доску с помощью проектора презентацию на данную тему конспекта

План урока:

1.      Организационный момент

2.      Актуализация знаний

3.      Теоретический материал урока

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

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

6.      Подведение итогов урока

Этапы урока

№	Этапы	Цель	Деятельность учителя	Деятельность ученика	Время (мин.)
1	Организационный момент	Настроить учащихся на учебный процесс	Проверка готовности к уроку, мотивация учащихся, проверка присутствующих	Учащиеся записывают в тетрадях дату и тему урока	3
2	Актуализация знаний	Повторить пройденный материал прошлого урока, связь прошлого материала с новым	Учитель дает тест, проверяет знания учащихся.	Учащиеся решают тест.	7
3	Теоретическая часть	Изучение нового материала	Учитель показывает презентацию, рассказывает материал.	Учащиеся записывают определения в тетрадь.	20
4	Практическая часть	Закрепление изученного материала	Учитель дает задание ученикам, рассказывает ход работы	Учащиеся выполняют задания	10
5	Подведение итогов	Вспомнить изученный материал на уроке	Учитель задает вопрос	Ученики дают ответ на данный вопрос	5

Ход урока.

1.Организационный момент

2. Актуализация знаний

Перед изучением новой темы повторим материал прошлого урока.

Учитель: Какова логическая структура Web- страницы?

Ученики: Web-страница разделяется на две логические части: заголовок и содержание.

Учитель: Какой тег из основных не является (обязательным)?

BODY, HTML, CAPTION, HEAD.

Ученики: CAPTION

Мы ответили на основные вопросы, предыдущей темы урока,  теперь приступим к изучению нового материала

3. Теоретическая часть

План урока:

1.     Заголовки

2.     Выравнивание текста

3.     Шрифты

4.     Горизонтальная линия

5.     Абзацы

6.     Вставка изображения

Для форматирования текста существует много тегов. Одни их них используются часто, другие - редко. Здесь мы рассмотрим те, которые используются часто.

Заголовки.

Теги, делающие текст заголовками

<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>

<h6></h6>

Эти теги выделяют текст в виде заголовков. Т.е. каждый заголовок начинается с новой строки, выделен полужирным шрифтом и имеет свой размер (заголовок первого уровня самый большой, шестого - самый маленький).

Эти теги могут использоваться с параметром горизонтального выравнивания align.

Возможные значения этого параметра:

 left - слева,

 right - справа,

center - по центру,

jastify - по ширине. 

Шрифт( атрибуты font, color). Тег font и его параметры

Теги <font></font> указывают параметры шрифта текста:

face - название шрифта. Названий шрифтов можно привести несколько, через запятую. В этом случае, если первый указанный шрифт не будет найден (вы же не знаете, какие шрифты установлены на компьютере пользователя), браузер станет использовать следующий по списку. size - размер шрифта в условных единицах от 1 до 7. По умолчанию размер шрифта равен 3.

 color - цвет текста (по умолчанию - черный).

Существуют два способа задания цвета: по имени и указанием шестнадцатеричного кода цвета. С именными цветами (их 156) все просто (например, color="blue").

 Но гораздо больший выбор предоставляет второй способ. Здесь мы можем выбирать из миллиона цветов, указав его шестнадцатеричный код. Этот код представляет собой 6 цифр.

Шестнадцатеричное представление цвета использует RGB-формат “#RRGGBB”, где две первые шестнадцатеричные цифры задают интенсивность красного (Red), две следующие интенсивность зеленого (Green) и две последние – интенсивность синего (Blue) цветов. Минимальная интенсивность цвета задается шестнадцатеричным числом 00, а максимальная – FF. Например, синий цвет задается значением “#0000FF”

Горизонтальная линия.

Заголовки целесообразно отделять от остального содержания страницы горизонтальной линией с помощью одиночного тэга <hr>.

Абзацы.

Теги разделения на абзацы и переноса строки.

Тег <br> - тег принудительного перевода строки. Текст, после этого тега начинается с новой строки.

Теги <p></p> разделяют текст на абзацы. Перед началом каждого абзаца следует поместить тег <p>, закрывающий тег не обязателен. В отличии от тега <br> абзацы отделяются друг от друга пустой строкой.

 У тега <p> есть параметр align, который задает способ выравнивания текста внутри параграфа.

Возможные значения этого параметра:

left - слева,

right - справа,

 center - по центру,

jastify - по ширине.

Вставка рисунка.

Для вставки рисунка в web – страницу используется тег <img>, с его неотъемлемым атрибутом src, которому присваивается значение адреса рисунка, его названия и расширения. Если графический файл находится на локальном компьютере в той же папке, что и файл  web-страницы, то в качестве значения атрибута src достаточно указать только имя файла. Например:

<img SRC=’Мой файл.jpg’ > </img>

Если файл находится в другой папке на данном  локальном компьютере, то значением атрибута должно быть полное имя файла, включая путь к нему в иерархической файловой системе. Например:

<img SRC=’C:Мои рисунки\Мой файл.jpg' > </img>

4. Практическая часть:

Н.Д. Угринович – информатика и ИКТ. Стр. 165. Практическая работа 3.8

Задание 1-5.

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

(§§3.7.3; 3.7.4;)

6. Подведение итогов

Вопрос учителя: Какие основные теги мы сегодня изучили?

Ответ ученика: h1, font,  face, size, color, hr, br, p, img.

Учитель отмечает наиболее активных учащихся. Ставит оценку за урок.