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

Дата: 2025-06-14; Просмотры: 1

Оценка:

0.00 из 5.00 — оценок

Скачиваний: 0

Скачать

ПЛАН ЗАНЯТИЯ

Дисциплина: ОП.16 Основы web - технологий

Преподаватель: Машарова Р.В.

Курс: 2

Группа: 1ИСП-21

Специальность: Информационные системы и программирование

Дата: 13.02.2023

Время проведения: 09.50-11.20, 2 пара

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

Цель занятия:

Дидактическая: познакомиться с форматированием текста в HTML

Развивающая: развивать логическое и критическое мышление, умение обобщать и синтезировать знания

Вид занятия лекция

Литература:

1. Храмцов П.Б., Брик С.А.,. Русак А.М., Сурин А.И., Основы web-технологий. Курс лекций. -3- е изд., пер. и доп. – Интернет-Университет Информационных Технологий, 2017. – 512 с.

2. Гаврилов М.В., Информатика и информационные технологии. Учебник для прикладного бакалавриата /М.В.Гаврилов, В.А.Климов. -4-е изд., пер. и доп. – М.: Юрайт, 2017. – 383с.

3. Новожилов О.П. Информатика. Учебник для прикладного бакалавриата /О.П.Новожилов. -3-е изд., пер. и доп. – М.: Юрайт, 2018. – 619с.

4. Симонович С.В. «Основы Информатики. Базовый курс» СПб: Питер 2018 год – 640 с.

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

1. Использование заголовков

2. Символы разрыва абзаца и разрыва строк. Выравнивание абзацев и заголовков

3. Использование цитат

4. Форматирование текста с помощью стилей

5. Добавление линий и комментариев

6. Escape-последовательности.

7. Организация списков

Основная часть всех Web-страниц определяется с помощью элемента BODY, начальный и конечный тэг которого указывают на начало и окончание информации. Тэг BODY не используется только в одном случае – в документе с фреймами (frameset), где его заменяет тэг FRAMESET.

1. Использование заголовков

Обычно разработчики HTML-кодов начинают с того, что создают заголовки. Существует шесть уровней заголовков и каждому из них соответствует свой размер шрифта. С помощью заголовков различных уровней можно создать четкую иерархическую структуру документа. Здесь используется тот же принцип, что и в книгоиздании, где заголовки глав выделяются крупным шрифтом, заголовки разделов – более мелким, заголовки подразделов – еще более мелким и т.д.

Тег <H1> ... <H6>

Стандарт HTML поддерживает шесть уровней заголовков, которые определяются с помощью тэгов: <H1> ... <H6>. Для каждого уровня заголовков установлены стандартные размеры шрифтов. Заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <H1> ... <H6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство. Видом заголовком легко можно управлять с помощью стилей.

Например:

<h1> Заголовок первого уровня </h1>

<h2> Заголовок второго уровня </h2>

<h3> Заголовок третьего уровня </h3>

В браузере это будет выглядеть так:

2. Символы разрыва абзаца и разрыва строк

Тэг < P >

Используется для вставки символа разрыва абзаца. Вставляя данный тэг мы даем браузеру команду завершить текущий абзац и вставить пустую строку перед следующим абзацем.

Тэг < BR >

Используется для вставки символа разрыва строки. Вставляя данный тэг мы даем браузеру команду завершить текущую строку и перейти на следующую.

Выравнивание абзацев и заголовков

Текст абзаца или заголовка можно выровнять по левому краю (стандартная установка), по правому краю или по центру окна браузера.

Для тэга заголовка используется следующий синтаксис:

< Hn ALIGN =выравнивание>

где n – уровень заголовка;

выравнивание – параметр, который может принимать одно из следующих значений: LEFT, RIGHT, CENTER.

Для тэга абзаца используется следующий синтаксис:

<Р ALIGN =выравнивание>

3. Использование цитат

Тэг < PRE >

Если вы хотите поместить на Web-страницу информацию, которая уже содержится в некотором документе (но не в HTML-коде), то нет никакой необходимости тратить время на повторный набор всего документа. Вместо этого можно воспользоваться тэгом отформатированного текста < PRE >. Этот тэг позволяет сохранить форматирование текста таким, каким оно было при наборе. Кроме того, пробелы внутри текста интерпретируются в точном соответствии с их расположением в текстовом редакторе.

Тэг < BLOCKQUOTE >

Предназначен для длинных цитат. Текст, размеченный данным тэгом, при отображении отделяется от основного текста пустыми строчками и, как правило, выводится с небольшим отступом вправо.

В тэг < BLOCKQUOTE > можно включать другие тэги, например текстовые стили или разрывы строк.

Например:

<BLOCKQUOTE> Пример физического форматирования </BLOCKQUOTE>

В браузере это будет выглядеть так:

Тэг < Q >

Предназначен для отображения коротких цитат. Если с помощью тэга < BLOCKQUOTE > в блоке текста создается отдельный фрагмент, то при использовании тэга < Q > цитата продолжается в той же строке, что и предыдущий текст, т.е. блок текста не разрывается на части.

4. Форматирование текста с помощью стилей

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

Тэги физических стилей являются абсолютными, это значит, что текст, выделенный физическим стилем, во всех браузерах отображается одинаково. А логические стили, в отличие от физических, можно назвать относительными. Это означает, что в различных браузерах они отображаются по-разному.

Тэги физических стилей

Например:

<b> Пример физического форматирования </b>

В браузере это будет выглядеть так:

Например:

<i>

Пример физического форматирования

</i>

В браузере это будет выглядеть так: