Форматирование текста
Оценка 4.7

Форматирование текста

Оценка 4.7
doc
информатика
11.05.2020
Форматирование текста
Форматирование текста
Форматирование текста..doc

Тема урока: Форматирование текста.

Цели урока:

Ø  Отработать навыки создания отдельных интернет-страниц;

Ø  Показать возможности форматирования текста;

Ø  Научить форматировать текст по заданному образцу.

Тип урока: изучение нового материала.

Вид урока: повторение, лекция, практикум.                                                    

Форма организации учебно-познавательной деятельности учащихся: фронтальная, индивидуальная.

Методы обучения:

Ø  словесные: рассказ, объяснение;

Ø  наглядные: методы иллюстрации;

Конспект урока.

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

  Оформление текста электронных Web-документов отличается от оформления текстовых документов. Главное отличие - игнорирование обычной красной строки. Браузер игнорирует перенос текста на следующую строку в самом Web-документе:


В блокноте

В браузере

Первая строка

Вторая строка

Третья строка

Первая строка Вторая строка Третья строка


  Для задания красной строки используйте тэг <p>:


В блокноте

В браузере

<p>Первая строка </p>

<p>Вторая строка </p>

<p>Третья строка </p>

Первая строка

Вторая строка

Третья строка


Для принудительного обрыва строки, используется тег <br> в конце строки.

В блокноте

В браузере

Первая строка <br>

Вторая строка <br>

Третья строка <br>

Первая строка

Вторая строка

Третья строка

 

 

  Текст, вставляемый в Web-документ, может быть нужным образом отформатирован, а именно, можно изменить шрифт, его размер, цвет, начертание, выравнивание. Для выравнивания текста абзаца используйте параметр align тэга <p>:


В блокноте

В браузере

<p align="left">Строка, выровненная по левому краю

<p align="right">Строка, выровненная по правому краю

<p align="center">Строка, выровненная по центру окна

Строка, выровненная по левому краю

Строка, выровненная по правому краю

Строка, выровненная по центру окна


Для увеличения или уменьшения высоты символов текста на стандартную величину, используйте тэги <big> и <small>:


В блокноте

В браузере

Строка с обычными символами

<big>Строка с увеличенными символами</big>

<small>Строка с уменьшенными символами</small>

Строка с обычными символами

Строка с увеличенными символами

Строка с уменьшенными символами


Е56кпппппппппп6 Для изменения базовых параметров шрифта (размер, начертание, цвет) используйте тэг <basefont>. Новый размер шрифта задается параметром size:


В блокноте

В браузере

<basefont size="1">Размер шрифта = 1

<basefont size="4">Размер шрифта = 4

<basefont size="7">Размер шрифта = 7

Размер шрифта = 1

Размер шрифта = 4

Размер шрифта = 7

 


  Можно изменить параметры шрифта относительно базовых значений, то есть "временно". Для этого используется тэг <font> с соответствующими параметрами:


В блокноте

В браузере

<font size="-1">Размер шрифта уменьшин на 1

<font size="+3">Размер шрифта увеличен на 3

<font color="blue">Цвет шрифта - голубой

Размер шрифта уменьшен на 1

Размер шрифта увеличен на 3

Цвет шрифта - голубой


 Для изменения физического начертания шрифта применяйте следующие тэги форматирования (не забудьте указать парный закрывающий тэг):


В блокноте

В браузере

<b>Выделение жирным шрифтом</b>

<i>Выделение наклонным шрифтом</i>

<u>Выделение подчеркиванием</u>

<strike>Выделение перечеркиванием</strike>

<tt>Шрифт с фиксированной шириной букв</tt>

Выделение жирным шрифтом

Выделение наклонным шрифтом

Выделение подчеркиванием

Выделение перечеркиванием

Шрифт с фиксированной шириной букв


 Для отображений формул и индексов используйте тэги подстрочных символов <sub> и надстрочных символов <sup> (не забудьте указать парный закрывающий тэг):


В блокноте

В браузере

Формула воды - H<sub>2</sub>O

Кубическая функция: y = x<sup>3</sup>

Формула фоды - H2O

Кубическая функция: y = x3


Дополнительно: В зависимости от смыслового значения текста, его можно отформатировать логически. Способ выделения определяется браузером.


В блокноте

В браузере

<cite>Текст - цитата</cite>

<em>Текст с особым значением</em>

<strong>Сильное выделение текста</strong>

<kbd>Пользовательский текст</kbd>

<code>Текст программы</code>

<samp>Последовательность символов</samp>

<var>Имя переменной</var>

Текст - цитата

Текст с особым значением

Сильное выделение текста

Пользовательский текст

Текст программы

Последовательность символов

Имя переменной


При необходимости исключить строки Web-документа из обработки браузером, их заключают в тэг коментария <!-- -->


В Блокноте

В браузере

<p>Первая строка

<!--<p>Вторая строка-->

<p>Третья строка

Первая строка

Третья строка


Вы можете явно задать название шрифта, которым будет отображен текст. Для этого используйте тэг <font> с параметром face:


В Блокноте

В браузере

<font face="Arial">Текст шрифтом Ариал

<font face="Courier New">Текст шрифтом Курьер

<font face="Times New Roman">Текст шрифтом Таймс

Текст шрифтом Ариал

Текст шрифтом Курьер

Текст шрифтом Таймс


  Дополнительно:В языке Web-страниц определены  специальные символы. Их нельзя вставлять в обычный текст, вместо этого необходимо использовать следующую замену:

 

 

 

 

 

 

 

В блокноте

В браузере

f &lt kx<sup>2</sup>

M = &ltab&gt

Торговый дом &quotОт &amp До&quot

f < kx2

M = <ab>

Торговый дом "От & До"

 

Код символа

Именное значение

Символ

&#34

&quot

"

&#38

&amp

&

&#60

&lt

< 

&#62

&gt

> 

&#160

&nbsp

пробел

&#161

&iexcl

¡

&#162

&cent

¢

&#163

&pound

£

&#164

&curren

¤

&#165

&yen

¥

&#168

&uml

¨

&#169

&copy

©

&#171

&laquo

«

&#174

&reg

®

&#177

&plusmn

±

&#187

&raquo

»

Дополнительно: Вы можете изменить цвет шрифта. Для задания цвета, наиболее распространенные из них имеют названия:

Aqua Black Blue Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal Yellow

White

Новый цвет шрифта задается параметром color:


В Блокноте

В браузере

<basefont color="fuchsia">Малиновый цвет

<basefont color="silver">Серебряный цвет

<basefont color="maroon">Темно-красный цвет

Малиновый цвет

Серебряный цвет

Темно-красный цвет


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

В Блокноте

В браузере

<FONT color="FF5800"> Это цветной текст </font>

Это цветной текст


Чтобы задать цвет фона страницы используется атрибут color внутри тега <BODY>, например:

<BODY bgcolor=" FFFFCC">


·                    При оформлении Web-страниц часто оформляют текстовые абзацы горизонтальной линией. Для включения горизонтальной линии в документ используйте тэг <hr>. При этом можно изменять параметры:

Параметр

Описание (Значения)

align=

выравнивание линии по окну ("left" - по левой границе,"center" - центрирование, "right" - по правой границе)

color=

Цвет разделительной линии

noshade

Плоская линия

size=

Высота линии в пикселах

width=

Ширина линии в пикселах или процентах от ширины окна браузера (число с %)


В Блокноте

В браузере

<hr color="red">

<hr width="50%">

<hr width="50%" align="left">

<hr size="5" width="50%" align="right">

<hr width="80%" noshade>






 

Домашнее задание: учебник п.3.7.3.
Практическая часть

Создать интернет-страницу по предложенному образцу (образец выдается в печатном виде). Сохранить в личной папке по именем  format.html

Дополнительно: представить строки разными цветами.

ЗЕМЛЯНКА

Бьется в тесной печурке огонь,

На поленьях смола, как слеза,

И поет мне в землянке огонь

Про улыбку твою и глаза.

 

Ты сейчас далеко-далеко.

Между нами снега и снега.

До тебя мне дойти нелегко,

А до смерти - четыре шага.

 

ВРЕМЕНА ГОДА

Декабрь, январь и февраль – зимние месяцы.

Март, апрель и май – летние месяцы.

Июнь, июль и август – летние месяцы.

Сентябрь, октябрь, ноябрь – осенние месяцы.

 

 

ХИМИЧЕСКИЕ  ЭЛЕМЕНТЫ

H2OSO4.

9б, 9в, 9г – изучают язык HTML


Тема урока: Форматирование текста

Тема урока: Форматирование текста

Для увеличения или уменьшения высоты символов текста на стандартную величину, используйте тэги <big> и <small>:

Для увеличения или уменьшения высоты символов текста на стандартную величину, используйте тэги <big> и <small>:

Для отображений формул и индексов используйте тэги подстрочных символов <sub> и надстрочных символов <sup> (не забудьте указать парный закрывающий тэг):

Для отображений формул и индексов используйте тэги подстрочных символов <sub> и надстрочных символов <sup> (не забудьте указать парный закрывающий тэг):

В блокноте В браузере f &lt kx<sup>2</sup>

В блокноте В браузере f &lt kx<sup>2</sup>

Цвет разделительной линии noshade

Цвет разделительной линии noshade

Практическая часть Создать интернет-страницу по предложенному образцу (образец выдается в печатном виде)

Практическая часть Создать интернет-страницу по предложенному образцу (образец выдается в печатном виде)
Скачать файл