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


Тема урока: Языки HTML. Форматирование абзацев. Форматирование шрифта.
Цели урока: Иметь представление о структуре web – страницы, о форматировании шрифта и абзацев и вставки изображении.
Задачи урока :Образовательные
познакомить учащихся с определением и основным назначением языка HTML, с основными объектами языка;
изучить с учащимися структуру Web-страницы;
отработать умение учащихся создавать Web-страницу с помощью приложения Блокнот;
научить учащихся вносить изменения в созданную Web-страницу.
Развивающие
Умение применять получения знания на практике для решения простейших задач
Умение самостоятельно добывать знания (работа с литературой)
Воспитательные:
Формирование системного мышления
формирование мировоззренческой позиции при описании объективной действительности
развитие логического мышления учащихся
Тип урока: урок получения и освоения новых знаний , умений и навыков
Вид урока: лекция с практикой
Оборудование урока: Компьютер с установленной операционной системой Windows, с установленным браузером
Оформление доски: Вывод на доску с помощью проектора презентацию на данную тему конспекта
План урока:
Организационный момент
Актуализация знаний
Теоретический материал урока
Практическая работа
Домашнее задание
Подведение итогов урока
Этапы урока
№ Этапы Цель Деятельность учителя Деятельность ученика Время
(мин.)
1 Организационный момент Настроить учащихся на учебный процесс Проверка готовности к уроку, мотивация учащихся, проверка присутствующих Учащиеся записывают в тетрадях дату и тему урока 3
2 Актуализация знаний Повторить пройденный материал прошлого урока, связь прошлого материала с новым Учитель дает тест, проверяет знания учащихся. Учащиеся решают тест.
7
3 Теоретическая часть Изучение нового материала Учитель показывает презентацию, рассказывает материал. Учащиеся записывают определения в тетрадь. 20
4 Практическая часть Закрепление изученного материала Учитель дает задание ученикам, рассказывает ход работы Учащиеся выполняют задания 10
5 Подведение итогов Вспомнить изученный материал на уроке Учитель задает вопрос Ученики дают ответ на данный вопрос 5
Ход урока.
1.Организационный момент
2. Актуализация знаний
Перед изучением новой темы повторим материал прошлого урока.
Учитель: Какова логическая структура Web- страницы?
Ученики: Web-страница разделяется на две логические части: заголовок и содержание.
Учитель: Какой тег из основных не является (обязательным)?
BODY, HTML, CAPTION, HEAD.
Ученики: CAPTION
Мы ответили на основные вопросы, предыдущей темы урока, теперь приступим к изучению нового материала
3. Теоретическая часть
План урока:
Заголовки
Выравнивание текста
Шрифты
Горизонтальная линия
Абзацы
Вставка изображения
Для форматирования текста существует много тегов. Одни их них используются часто, другие - редко. Здесь мы рассмотрим те, которые используются часто.
Заголовки.
Теги, делающие текст заголовками
<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.
Учитель отмечает наиболее активных учащихся. Ставит оценку за урок.