Настоящий материал опубликован пользователем Карынбаева Миргуль Муратбековна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Курс профессиональной переподготовки
Курс профессиональной переподготовки
Курс повышения квалификации
Курс профессиональной переподготовки
Рабочие листы
к вашим урокам
Скачать
1 слайд
ТЕМА 7. ОФОРМЛЕНИЕ ТЕКСТА.
ШРИФТЫ.
План занятия:
Элементы заголовки;
Редактирование документа;
Начертание шрифта;
Управление шрифтами и их размером;
Определение общей структуры составной формы.
2 слайд
Заголовки - элементы H1 – H6
Язык HTML поддерживает 6 уровней заголовков. Они представлены соответственно элементами: H1, H2, H3, H4, H5, H6. Первый – самый главный, отображается более крупным шрифтом, шестой – самый маленький и по значению, и по размеру шрифта.
Пример:
<H1> Пример 1</H1> <H2> Пример2</H2> <H6> Пример3</H6>
Отображение примера в окне браузера:
Пример1 Пример2 Пример3
3 слайд
Выравнивание – атрибут align
По умолчанию текст выравнивается по левому краю страницы. Но можно отцентрировать текст либо выровнять его по правому краю, указав атрибут align="left | center | right" Символ вертикальной черты "|" в данном случае означает "или". Расшифруем значения ключевых слов атрибута align:
left - выравнивание по левому краю.
center - выравнивание по центру.
right - выравнивание по правому краю.
justify - выравнивание по ширине.
Пример
<H2 align="center»> Этот заголовок будет выровнен по центру</H2>
4 слайд
Параграфы (абзацы) - элемент P
Элемент P похож на элемент H, только текст, помещённый в элемент P, имеет абзацные отступы. Выравнивание абзацев осуществляется аналогично выравниванию заголовков.
Пример:
<P>Этот параграф выровнен по умолчанию</P>.
<P align= «right»> А этот по правому краю</P>
5 слайд
Контейнеры - элементы DIV и SPAN
В HTML существует специальный элемент DIV, который может служить контейнером для любых других элементов HTML. Элементы, помещённые внутрь тега DIV, отделяются от остального содержимого страницы абзацным отступом. С помощью атрибута align можно задавать выравнивание содержимого контейнера.
Пример:
<DIV align="center">
<H1> Заголовок 1</H1>
<H2> Заголовок 2</H2>
<H3> Заголовок 3</H3>
</DIV>
<! -- Все три заголовка будут выровнены по центру страницы -->
6 слайд
Шрифты
Все шрифты делятся на несколько больших групп или семейств:
Serif - шрифты с засечками, такие как Times New Roman.
Sans-serif - шрифты рублёные, без засечек, такие как Arial, Verdana и Tahoma.
Monospace - моноширинные шрифты (с одинаковым расстоянием между символами), такие как Courier New.
Cursive - шрифты курсивные, такие как Calisto MT.
Fantasy - декоративные шрифты, буквы которых могут имитировать, например, рукописный текст.
7 слайд
Начертание шрифта
Если хотите получить комбинацию начертаний, то следует поместить один элемент внутрь другого.
Пример:
<B><I> Полужирный курсив</I> </B>
8 слайд
Управление шрифтами и их размером
Пример:
<FONT size="5" color="red" face="arial">Пример</FONT>
! Если нужно задать шрифт для всего документа используется тег <BASEFONT>
Пример:
<HEAD>
<BASEFONT size="5" face="arial" color="red">
</HEAD>
9 слайд
Логическое выделение
Язык HTML поддерживает несколько типов выделений, и, соответственно, для каждого из них существует отдельный элемент:
EM - Слабое логическое выделение, выразительность.
STRONG - Сильное логическое выделение, ударение.
CODE - Фрагмент кода программы.
SAMP - Пример.
VAR - Имя переменной.
CITE - Цитата.
ADDRESS - Адрес.
Пример
<SAMP><STRONG> Тег Strong </STRONG><EM> похож на тег B </EM></SAMP>
Отображение в окне браузера:
Тег Strong похож на тег B
10 слайд
Верхние и нижние индексы
Иногда в тексте встречаются математические и химические формулы, обычное явление для которых - верхние и нижние индексы. Вот примеры: H2O - формула воды или x2+ y3 - математическое выражение.
Пример:
H<SUB>2</SUB>O - химическая формула.
x<SUP>2</SUP>+y<SUP>3</SUP> - математическое выражение.
Отображение в окне браузера:
H2O - химическая формула. x2+y3 - математическое выражение.
11 слайд
Разделители: элементы BR и HR
Иногда требуется принудительно разбить текст на строки или же просто добавить дополнительную пустую строку. Пустой элемент BR выполняет принудительный перевод строки (аналог клавиши Enter в текстовом редакторе).
Примечание: пустой элемент
не имеет содержимого и закрывающего тега и состоит только из открывающего, т.е. <BR>
Пример
<P>Пример 1 <BR> Пример 2</P>
Отображение примера в окне браузера
Пример 1
Пример 2
12 слайд
Элемент HR
Элемент HR отображает горизонтальную линию. Этот элемент имеет следующие атрибуты:
13 слайд
Контрольные вопросы:
С помощью, каких элементов нужно выводить на экран заголовки документа и как выравнивать их в строке?
С помощью, каких элементов нужно задавать абзацы?
Почему не рекомендуется отделять абзацы тегом <BR>?
Как нужно разделять текст на абзацы?
Почему не рекомендуются длинные абзацы?
Почему все абзацы документа рекомендуется выводить с использованием одинаковых приёмов оформления?
Какие приёмы оформления можно использовать?
Какие цвета текста и фона являются самыми комфортными для чтения?
Какой третий цвет можно добавить к основным цветам: чёрному и белому?
Как проверить грамматическую правильность текста документа?
Назовите четыре способа выравнивания текста по горизонтали.
Какой способ выравнивания текста по горизонтали является самым употребительным?
План занятия:
1) Элементы заголовки;
2) Редактирование документа;
3) Начертание шрифта;
4) Управление шрифтами и их размером;
5) Определение общей структуры составной формы.
Цель занятия: познакомятся с основными тегами форматирования текста, научатся изменять цвет фона. А для закрепления материала выполнят лабораторную работу.
7 237 359 материалов в базе
Вам будут доступны для скачивания все 215 533 материалы из нашего маркетплейса.
Мини-курс
6 ч.
Мини-курс
3 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.