Тема урока: Форматирование текста.
Цели урока:
Ø Отработать навыки создания отдельных интернет-страниц;
Ø Показать возможности форматирования текста;
Ø Научить форматировать текст по заданному образцу.
Тип урока: изучение нового материала.
Вид урока: повторение, лекция, практикум.
Форма организации учебно-познавательной деятельности учащихся: фронтальная, индивидуальная.
Методы обучения:
Ø словесные: рассказ, объяснение;
Ø наглядные: методы иллюстрации;
Конспект урока.
Теоретическая часть.
Оформление текста электронных Web-документов отличается от оформления текстовых документов. Главное отличие - игнорирование обычной красной строки. Браузер игнорирует перенос текста на следующую строку в самом Web-документе:
|
В блокноте |
В браузере |
|
|
Первая строка Вторая строка Третья строка |
Для задания красной строки используйте тэг <p>:
|
В блокноте |
В браузере |
|
|
Первая строка Вторая строка Третья строка |
Для принудительного обрыва строки, используется тег <br> в конце строки.
|
В блокноте |
В браузере |
|
|
Первая строка Вторая строка Третья строка |
Текст, вставляемый в Web-документ, может быть нужным образом отформатирован, а именно, можно изменить шрифт, его размер, цвет, начертание, выравнивание. Для выравнивания текста абзаца используйте параметр align тэга <p>:
|
В блокноте |
В браузере |
||
|
|
Для увеличения или уменьшения высоты символов текста на стандартную величину, используйте тэги <big> и <small>:
|
В блокноте |
В браузере |
|
|
Строка с обычными символами Строка с увеличенными символами Строка с уменьшенными символами |
Е56кпппппппппп6 Для изменения базовых параметров шрифта (размер, начертание, цвет) используйте тэг <basefont>. Новый размер шрифта задается параметром size:
|
В блокноте |
В браузере |
|
|
Размер шрифта = 1 Размер шрифта = 4 Размер шрифта = 7 |
Можно изменить параметры шрифта относительно базовых значений, то есть "временно". Для этого используется тэг <font> с соответствующими параметрами:
|
В блокноте |
В браузере |
|
|
Размер шрифта уменьшен на 1 Размер шрифта увеличен на 3 Цвет шрифта - голубой |
Для изменения физического начертания шрифта применяйте следующие тэги форматирования (не забудьте указать парный закрывающий тэг):
|
В блокноте |
В браузере |
|
|
Выделение жирным шрифтом Выделение наклонным шрифтом Выделение подчеркиванием
Шрифт с фиксированной шириной букв |
Для отображений формул и индексов используйте тэги подстрочных символов <sub> и надстрочных символов <sup> (не забудьте указать парный закрывающий тэг):
|
В блокноте |
В браузере |
|
|
Формула фоды - H2O Кубическая функция: y = x3 |
Дополнительно: В зависимости от смыслового значения текста, его можно отформатировать логически. Способ выделения определяется браузером.
|
В блокноте |
В браузере |
|
|
Текст - цитата Текст с особым значением Сильное выделение текста Пользовательский текст Текст программы Последовательность символов Имя переменной |
При необходимости исключить строки Web-документа из обработки браузером, их заключают в тэг коментария <!-- -->
|
В Блокноте |
В браузере |
|
|
Первая строка Третья строка |
Вы можете явно задать название шрифта, которым будет отображен текст. Для этого используйте тэг <font> с параметром face:
|
В Блокноте |
В браузере |
|
|
Текст шрифтом Ариал Текст шрифтом Курьер Текст шрифтом Таймс |
Дополнительно:В языке Web-страниц определены специальные символы. Их нельзя вставлять в обычный текст, вместо этого необходимо использовать следующую замену:
|
В блокноте |
В браузере |
|
|
f < kx2 M = <ab> Торговый дом "От & До" |
|
Код символа |
Именное значение |
Символ |
|
" |
" |
" |
|
& |
& |
& |
|
< |
< |
< |
|
> |
> |
> |
|
  |
  |
пробел |
|
¡ |
¡ |
¡ |
|
¢ |
¢ |
¢ |
|
£ |
£ |
£ |
|
¤ |
¤ |
¤ |
|
¥ |
¥ |
¥ |
|
¨ |
¨ |
¨ |
|
© |
© |
© |
|
« |
« |
« |
|
® |
® |
® |
|
± |
± |
± |
|
» |
» |
» |
Дополнительно: Вы можете изменить цвет шрифта. Для задания цвета, наиболее распространенные из них имеют названия:
|
Aqua Black Blue Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal Yellow |
White |
Новый цвет шрифта задается параметром color:
|
В Блокноте |
В браузере |
|
|
Малиновый цвет Серебряный цвет Темно-красный цвет |
· Вы можете изменить цвет шрифта, задав его шестнадцатиричный код. Таблица с кодами цветов находиться в папке Учебные материалы (к ней имеют доступ все учащиеся, работающие в кабинете).
|
В Блокноте |
В браузере |
|
|
Это цветной текст |
Чтобы задать цвет фона страницы используется атрибут color внутри тега <BODY>, например:
<BODY bgcolor=" FFFFCC">
· При оформлении Web-страниц часто оформляют текстовые абзацы горизонтальной линией. Для включения горизонтальной линии в документ используйте тэг <hr>. При этом можно изменять параметры:
|
Параметр |
Описание (Значения) |
|
align= |
выравнивание линии по окну ("left" - по левой границе,"center" - центрирование, "right" - по правой границе) |
|
color= |
Цвет разделительной линии |
|
noshade |
Плоская линия |
|
size= |
Высота линии в пикселах |
|
width= |
Ширина линии в пикселах или процентах от ширины окна браузера (число с %) |
|
В Блокноте |
В браузере |
||
|
|
Домашнее
задание: учебник
п.3.7.3.
Практическая часть
Создать интернет-страницу по предложенному образцу (образец выдается в печатном виде). Сохранить в личной папке по именем format.html
Дополнительно: представить строки разными цветами.
ЗЕМЛЯНКА
Бьется в тесной печурке огонь,
На поленьях смола, как слеза,
И поет мне в землянке огонь
Про улыбку твою и глаза.
Ты сейчас далеко-далеко.
Между нами снега и снега.
До тебя мне дойти нелегко,
А до смерти - четыре шага.
ВРЕМЕНА ГОДА
Декабрь, январь и февраль – зимние месяцы.
Март, апрель и май – летние месяцы.
Июнь, июль и август – летние месяцы.
Сентябрь, октябрь, ноябрь – осенние месяцы.
ХИМИЧЕСКИЕ ЭЛЕМЕНТЫ
H2O, SO4.
9б, 9в, 9г – изучают язык HTML
Тема урока: Форматирование текста
Для увеличения или уменьшения высоты символов текста на стандартную величину, используйте тэги <big> и <small>:
Для отображений формул и индексов используйте тэги подстрочных символов <sub> и надстрочных символов <sup> (не забудьте указать парный закрывающий тэг):
В блокноте В браузере f < kx<sup>2</sup>
Цвет разделительной линии noshade
Практическая часть Создать интернет-страницу по предложенному образцу (образец выдается в печатном виде)
© ООО «Знанио»
С вами с 2009 года.
