Ученики на Учителя.com


Конспект урока "Язык HTML Форматирование шрифта" 8 класс

Государственное бюджетное образовательное учреждение СОШ № 813
М е т о д и ч е с к а я р а з р а б о т к а
п о в ы п о л н е н и ю п р а к т и ч е с к ой р а б о т ы
п о и н ф о р м а т и к е в 8 к л а с с е
Тема: Язык HTML Форматирование шрифта
Подготовила
учитель информатики
Ильясова Лена Нуртдиновна
г. Москва
2012
2
П р а к т и ч е с к а я р а б о т а
Тема: Язык HTML Форматирование шрифта
Можно создать текст, не уделяя особого внимания тому, как он будет выглядеть в окне
браузера. Так мы и поступали на предыдущих занятиях. Браузер отобразит неформатированный
текст, используя настройки, выбранные пользователем. Однако хотелось бы, чтобы заголовки как-
то отличались от основного текста размером и шрифтом, цветом, чтобы можно было выделить
абзацы, пропустить строку. Все это называется форматированием текста.
Стандартные логические стили
Для выбора размера шрифта можно использовать теги логических стилей. Их всего шесть
и обычно они используются для определения заголовков различного уровня.
И помечаются тегами от <H1> и </H1> до <H6> и </H6> (чем больше номер, тем мельче
заголовок). Реально на экране компьютера все эти заголовки изображаются шрифтами разного
размера (обычно полужирным начертанием).
Пример 1
Раскроем окно текстового редактора «Блокнот» и напишем в нем текст HTML-
программы.
<HTML>
<HEAD>
<TITLE>Функциональные разделы документа</TITLE>
</HEAD>
<BODY>
<H1>ГЛАВНЫЙ ЗАГОЛОВОК ИЛИ ЗАГОЛОВОК ПЕРВОГО УРОВНЯ</H1>
<H2>Заголовок второго уровня </H2>
<H3> Заголовок третьего уровня</H3>
<H4> Заголовок четвертого уровня</H4>
<H5> Заголовок пятого уровня</H5>
<H6> Заголовок шестого уровня</H6>
</Body>
</HTML>
Сохраните эту программу в папке своей группы в файле с расширением HTM или HTML.
Например, назначим ей имя PROBA_3.HTML. Раскройте этот файл в браузере.
Результат покажите преподавателю.
3
Управление начертанием шрифтов
Кроме использования стандартных размеров и начертаний (гарнитуры) шрифтов, можно
определять шрифты для каждого фрагмента текста с помощью специальных тегов. Самый
простой способ – использование физических стилей:
Стиль
Тег
Полужирный (Bold)
<B>
Курсив (Italic)
<I>
Подчеркнутый (Underscore)
<U>
Вычеркнутый
<S>
Пишущая машинка (Typewriter)
<TT>
Выделение
<EM>
Усиленное выделение
<STRONG>
Подстрочный
< Sub>
Надстрочный
< Sup>
Задание 2
Внести в текст страницы теги, определяющие начертание шрифта. Отделить этот фрагмент от
остального текста с помощью горизонтальной разделительной линейки.
ГЛАВНЫЙ ЗАГОЛОВОК ИЛИ ЗАГОЛОВОК ПЕРВОГО УРОВНЯ
Заголовок второго уровня
Заголовок третьего уровня
Заголовок четвертого уровня
Заголовок пятого уровня
Заголовок шестого уровня
Обычный текст
Жирный
Курсив
Подчеркнутый
Жирный подчеркнутый курсив
Выделение
Усиленное выделение
Пишущая машинка
Вычеркнутый
4
Активизировать браузер с открытым в нем предыдущим вариантом страницы. Выбрать
пункт мерю Вид, команда Обновить (F5). В окне браузера отобразится обновленная Web-
страница.
Результат покажите преподавателю.
Внутри тега заголовка можно вставить тег физического стиля, чтобы модифицировать весь
заголовок или только некоторую его часть. Например, чтобы выделить курсивом только часть
текста, можно использовать следующую конструкцию:
Пример 2
<HTML>
<HEAD>
<TITLE>Функциональные разделы документа</TITLE>
</HEAD>
<BODY>
<H2>Это - <I> Модифицированный </I> заголовок второго уровня</H2>
</Body>
</HTML>
Сохраните этот документ в папке вашей группы с именем PROBA_4.HTML.
Просмотрите в браузере.
Выравнивание заголовков
Вернемся к рассмотрению заголовков Они имеют атрибут align. Он задает выравнивание
заголовка на странице. Может принимать четыре значения:
Left – выравнивает заголовок по левому краю страницы (используется по умолчанию);
Right - выравнивает заголовок по правому краю страницы;
Center- выравнивает заголовок по центру;
Justify – выравнивает заголовок по ширине страницы, растягивая строку от правого края до
левого. Эффект проявляется, когда длина строки больше ширины листа.
Например: <h1 align = «center»> текст основного заголовка </h1>
Задание 2
Создать документы по образцу, сохранить его в папке своей группы с именем PROBA_4.HTML.
Активизировать браузер с открытым в нем предыдущим вариантом страницы. Выбрать пункт
мерю Вид, команда Обновить (F5). В окне браузера отобразится обновленная Web- страница.
Результат покажите преподавателю.
5
6
Список использованной литературы
1. Н.Д Угринович. Информатика и ИКТ 8 класс – Москва БИНОМ.
Лаборатория знаний ОАО «Московские учебники», 2011
2. Гаевский А.Ю., Романовский В.А. 100% самоучитель. Создание Web-страниц
и Web-сайтов. HTML и JavaScript – М: Триумф, 2008
3. Матросов А.В., Сергеев А.О., Чаунин М.П. HTML 4.0 – СПб: БХВ, 2005
Скачать материал

Информатика - еще материалы к урокам: