Что такое абзац с точки зрения web браузера
Тема: Абзацы, отступы и интервалы.
Цель урока:- помочь учащимся получить представление о текстовых редакторах, основных понятиях, используемых при редактировании и форматировании текстовых документов, дать основные понятия, необходимые для работы на компьютере.
- учить выполнять простое форматирование документов, настраивать междустрочный интервал и отступ;
- воспитывать информационную культуру учащихся, внимательность, аккуратность, дисциплинированность, усидчивость;
- развивать познавательные интересы, навыки работы с мышью и клавиатурой, самоконтроль, умение конспектировать.
Тип урока: комбинированный
Оборудование:
учебник «Информатика» 6 класс. Авторы: Вьюшкова Е.А, Параскун Н.В.; компьютеры
Ход урока
I. Орг. момент.
1. Приветствие
2. Проверка отсутствующих.
3. Объяснение хода урока.
- Вам нужно было ответить на вопросы. Итак, я задаю вопросы, а вы «по цепочке» на них отвечаете.
Какая команда помогает вставить символ, отсутствующий на клавиатуре?
Какие настройки шрифта можно изменить?
Как изменить строчные буквы в выделенном фрагменте на прописные?
Что такое кегль?
Как установить размер шрифта, которого нет в списке?
Что такое межсимвольный интервал? Как его настроить?
Как сделать текст цветным?
Для чего нужны верхний и нижний регистры шрифта?
Перечислите комбинации клавиш, предназначенных для перемещения курсора.
Каким правилом надо руководствоваться, чтобы грамотно набрать текст?
Какие способы выделения фрагмента текста вы знаете?
III. Актуализация знаний.
- Для обработки текстовой информации на компьютере используются текстовые редакторы.
- Какие вы знаете текстовые редакторы? (например, стандартное приложение Windows Блокнот, WordPad)
- Назовите более совершенные текстовые редакторы (Microsoft Word и StarOffice Writer)
- Более совершенные текстовые редакторы называют иногда текстовыми процессорами, они имеют широкий спектр возможностей по созданию документов (вставка списков и таблиц.)
IV. Изучение нового материала.
Форматирование – это преобразования, определяющие, в каком виде текст появляется на странице. Форматирование выполняется для выделенного фрагмента или начиная от курсора!
- Абзац с литературной точки зрения – это часть текста, представляющая собой законченный по смыслу фрагмент произведения, окончание которого служит естественной паузой для перехода к новой мысли.
В компьютерных документах абзацем считается любой текст, заканчивающийся управляющим символом конца абзаца. Ввод конца абзаца обеспечивается нажатием клавиши [ВВОД] ([ENTER]).
Форматирование абзацев позволяет подготовить правильно и красиво оформленный документ.
Форматирование применяется к текущему абзацу или фрагменту текста, если он выделен. Форматировать текст можно по линейке форматирования (работа с рисунком на с.103.), при помощи команд вкладки ленты Главная =>Абзац (рис.42, с.103) или диалогового окна команды Абзац (рис.43, с.104)
Настройка междустрочного интервала.
Настройка междустрочного интервала — это расстояние между строками. Оно измеряется в кратных долях размера шрифта. Например, если расстояние между строками равно высоте шрифта, такой междустрочного интервала называют одинарным, а если оно вдвое больше высоты шрифта, то двойным.
Абзацный отступ — это расстояние от края текста до ближайшего поля. Отступ слева — это расстояние от левого края текста до левого поля, а отступ справа — расстояние от правого края текста до правого поля. Абзацный отступ используют для аккуратного размещения заголовков, примечаний, врезок.
Отступ первой строки.
В художественных текстах принято начинать каждый абзац с «красной строки». Для этого в текстовых процессорах есть специальная настройка — она позволяет задать отступ первой строки, отличный от отступа всего абзаца.
Вопросы:
1. Что такое текстовый редактор?
2. Какие основные функции текстового редактора?
3. Что такое редактирование текста?
4. Что такое форматирование текста?
V. Практическая работа.
Учащиеся самостоятельно выбирают уровень практической работы (рассчитывая на свои знания и умения).
Учащиеся самостоятельно выполняют задание.
Учитель наблюдает за работой учащихся. Если у них возникают затруднения, при выполнении работы, то учитель направляет и подсказывает.
с. 109-110, выполнить тест в тетради.
VII. Итог урока.
Вопросы учеников.
Ответы на вопросы учащихся.
- На уроке мы познакомились с текстовыми редакторами, научились производить основные операции форматирования текстовых документов.
Практическая работа.
Упражнение 1 . Набрать текст по образцу.
Информация всегда связана с материальным носителем , а ее передача с затратами энергии . Однако одну и ту же информацию можно хранить в различном материальном виде и передавать с различными энергетическими затратами, причем последствия - в том числе и материальные - переданной информации совершенно не зависят от физических затрат на ее передачу. Поэтому информационные процессы не сводимы к физическим, и информация , наряду с материей и энергией, является одной из фундаментальных сущностей окружающего нас мира .
Любой текст имеет свою уникальную структуру: книги разделены на части, разделы и главы, газеты и журналы имеет отдельные рубрики и подзаголовки, которые, в свою очередь, включают фрагменты текста, также имеющие собственную структуру: абзацы, отступы и пр.
Текст, размещаемый на веб-страницах, не является исключением, он также должен иметь логическую, понятную каждому пользователю, структуру. Ведь от того, насколько удобно и просто будет восприниматься текст на странице, зависит многое: прежде всего, какое впечатление сложится у посетителя о вашем сайте.
Для создания таких структурных единиц текста, как абзацы, в HTML-документах используется тег <p>, который разделяет фрагменты текста вертикальным отступом (до и после абзаца добавляется пустая строка).
Примечание: по умолчанию расстояние между абзацами равно 1em (em - это единица измерения равная высоте шрифта), то есть расстояние между абзацами напрямую зависит от размера шрифта.
Для изменения отступов между абзацами, без изменения размера шрифта, можно воспользоваться CSS свойством margin.
Не забывайте про закрывающий тег
Большинство браузеров будут отображать HTML документ корректно, даже если вы забыли про закрывающий тег.
Этот код будет работать в большинстве браузеров, но не полагайтесь на это. Забытый закрывающий тег может привести к непредвиденным результатам или ошибкам.
Красная строка
Что такое красная строка? Согласно определению, это начальная строка абзаца, которую раньше выделяли красным цветом (откуда и пошло название). До того, как было изобретено книгопечатание, книги писали от руки – главу или часть текста, первое слово или букву писали красной краской. Так появилось понятие «писать с красной строки» - это означает начало новой мысли, главы или части.
Однако при создании веб-страниц оформление красной строки используется достаточно редко, несмотря на то, что она позволяет с гораздо большим удобством воспринимать текст в визуальном плане, что для традиционного читателя достаточно важно – не всем удобно читать электронный вариант текста.
Для добавления красной строки к вашим абзацам нужно воспользоваться CSS свойством text-indent, которое позволяет поставить отступ перед первым предложением:
В примере, приведенном выше, первая строка каждого абзаца на странице будет начинаться с отступа в 25px. Пример, расположенный ниже, демонстрирует, как можно задать красную строку только для определенного абзаца на странице.
Примечание: не обязательно устанавливать отступ размером в 25px, вы можете выбрать оптимальный размер отступа сами, также с помощью свойства text-indent возможно сделать выступающую над остальным текстом строку, для этого нужно задать отрицательное значение для свойства ( например: -30px).
Теперь, когда у вас есть базовая структура документа HTML, можно наконец добавить немного контента.
Вернитесь в текстовый редактор и добавьте в код вашей веб-страницы еще одну строку:
Посмотрите на получившийся документ в браузере.
Наверное, вы ожидали, что в браузере ваш документ будет отображаться так же, как вы его писали, т.е. на двух строчках. Однако вместо этого вы увидите что-то вроде:
Это произошло потому, что браузер совершенно не обращает внимание на количество строк, на которых расположен код веб-страницы. Также ему безразлично сколько пробелов вы ввели между словами (вы получите тот же результат, если напишите " Это моя первая веб-страница Вот здорово").
Если вы хотите, чтобы текст отображался на разных строках, вы должны ясно указать это, определив абзац HTML.
Измените две строки вашего контента следующим образом:
Тег <p> создает параграф или абзац HTML.
Посмотрите на получившуюся веб-страницу в браузере: теперь две строки текста в браузере отображаются также на двух строках.
Рассматривайте контент HTML документа, как текст книги – с делением на параграфы и абзацы HTML там, где это необходимо.
Выделение текста
Вы можете внутри абзаца HTML выделять текст при помощи тега <em> (акцент) и тега <strong> (усиленный акцент). Оба эти тега в принципе делают одно и то же – выделяют текст, хотя традиционно браузеры отображают текст внутри тега <em> курсивом, а внутри тега <strong> жирным шрифтом.
Разрыв строки
Для разделения строк также можно использовать тег разрыва строки <br>:
Тем не менее, данный метод часто приводит к разным злоупотреблениям и в тех случаях, когда один блок текста должен быть отделен от другого, не рекомендуется к использованию (так как если речь идет об абзацах HTML, то лучше использовать элемент <p>).
Обратите внимание, что в связи с тем, что внутри элемента разрыва строки не используется контент, у него нет закрывающего тега, и он закрывает сам себя при помощи символа "/", который следует за именем тега "br".
Для работы с текстом в html есть множество тегов, но для начала необходимо поговорить о некоторых особенностях отображения текста в браузере. Во-первых, любое количество пробелов, знаков табуляции и переносов строк, идущих подряд, отображается как один пробел. Т.е. позиционировать текст с помощью пробелов и знаков табуляций не получится.
Для примера эти строки на web-странице будут отображаться одинаково не смотря на их разное написание:
Исключение составляет тег pre, внутри которого все пробелы и переносы отображаются как есть.
Во-вторых, текст занимает ширину окна браузера. Если длинная строка текста шире окна браузера, то в местах пробелов или дефиса автоматически будут вставлены переносы строк. Если в строке нет ни пробелов, ни дефисов, а строка не умещается по ширине окна, то в браузере появится горизонтальная полоса прокрутки.
Теперь перейдем к рассмотрению структурных элементов текста в разметке html.
Абзацы в языке HTML
Обычно, блоки текста разделяют между собой абзацами(параграфами). Это облегчает чтение больших кусков текста. Язык HTML для создания абзаца содержит парный тег «p». Синтаксис создания абзацев следующий:
Абзацы на html-странице отделяются небольшими отступом от предыдущего и последующего элементов. Тег «Р» также является блочным элементом. Что такое блочные элементы я писал в статье «Как создать web-страницу». Напомню, что блочные элементы характеризуются тем, что занимают всю доступную ширину html-страницы, высота элемента определяется его содержимым, и он всегда начинается с новой строки.
Рассмотрим пример применения абзацев на web-странице. Откроем текстовый редактор, наберем HTML-код и сохраним с расширением html:
При открытии данного файла будет примерно такая картина:
Пока, что наша страница содержит одни абзацы.
Для выравнивания текста в абзаце тег «Р» поддерживает атрибут align. Он может принимать одно из четырех значений:
- left — выравнивание текста по левому краю;
- center — выравнивание текста по центру;
- right — выравнивание текста по правому краю;
- justify — выравнивание по ширине, т.е. выравнивание текста одновременно по правому и левому краю. Для этого браузер помещает пробелы между словами.
- disc — закрашенная окружность;
- circle — окружность;
- square — квадрат.
- A — заглавные латинские буквы;
- a — строчные латинские буквы;
- I — заглавные римские цифры;
- i — строчные римские цифры;
- 1 — арабские цифры.
- align — определяет выравнивание линии;
- color — задает цвет линии;
- size — устанавливает толщину линии в пикселях;
- width — устанавливает ширину линии в пикселях.
По умолчанию атрибут align имеет значение left. Пример использования атрибута align:
И так это отобразится в браузере:
Заголовки в языке HTML
Для выделения разделов текста на web-странице применяются заголовки. В html существует шесть уровней заголовков. Самым верхним уровнем является уровень 1 — тег h1, а самым нижним — уровень 6, тег «h6». Теги h1 — h6 являются блочными элементами страницы. Содержимое заголовка первого уровня отображается самым крупным шрифтом жирного начертания, а заголовки последнего шестого уровня — самым мелким.
Синтаксис создания заголовков:
Также заголовки играют важную роль при раскрутке сайта, так как поисковики добавляют рейтинг тексту, если он находится внутри тега заголовка.
Добавим заголовки в нашу страницу:
И видим, что на нашей странице кроме абзацев появились выделенные большим жирным шрифтом заголовки:
Теги h1-h6, как и тег «Р», используют атрибут align для выравнивания текста. При использовании этого атрибута все аналогично как с тегом «Р».
Нумерованные и маркированные списки в HTML
Список применяется для того, чтобы сформировать пронумерованный или непронумерованный перечень каких-либо фраз или значений. Список с пронумерованными пунктами называется нумерованным, а с непронумерованными пунктами — маркированным.
В маркированных списках пункты помечаются маркерами, которые ставятся левее пунктов списка. Web-браузер отображает список с отступом слева и самостоятельно расставляет необходимые маркеры или нумерацию. Списки и их пункты относятся к блочным элементам Web-страницы.
Любой список в HTML представляет собой набор элементов, каждый из которых помещается внутрь тега «li». Затем все элементы помещаются внутрь тега «ul», если нужен маркированный список, или внутрь тега «ol», если нужен нумерованный список.
И выглядят они примерно так:
В маркированных списках могут применяться различные типы маркеров. Для определения типа маркера в тег «ul» добавляется атрибут type, если мы хотим задать вид маркера для всех элементов списка или добавить это же атрибут в тег «li» если необходимо задать вид маркера для конкретного элемента. Атрибут type может принимать следующие значения:
По умолчанию атрибут type равен disc. Пример использования:
Отображение в браузере:
Нумерованный список также поддерживает атрибут type, с помощью которого можно задавать следующие типы маркера:
По умолчанию в нумерованном списке атрибут type устанавливает в качестве маркеров арабские цифры. Кроме атрибута type нумерованный список поддерживает атрибут start, который задает число с которого будет начинаться список. В спецификации HTML5 для нумерованного списка появился еще атрибут reversed, который меняет нумерацию на обратный порядок. Т.е. вместо 1, 2, 3 список будет нумероваться 3, 2, 1. Но атрибут reversed поддерживается еще очень малым количеством браузеров.
Списки можно помещать друг в друга, создавая вложенные списки. Вложенный список помещается внутрь элементов «li» внешнего списка:
В HTML есть еще третий вид списка — список определений, который представляет из себя перечень терминов и их определений. Этот список задается с помощью парного тега «dl». Внутри него помещают пары «термин — определение». Термины заключают в парный тег «dt», а определения — в парный тег «dd»:
Отображение в браузере:
На нашей Web-странице есть абзац классификации автомобилей. Сделаем эту классификацию при помощи маркированного списка:
И посмотрим результат:
Горизонтальные линии
Для разделения или дополнительного выделения блоков текста в HTML есть одинарный тег HR — горизонтальная линя. Так это выглядит в коде html:
И вот как это отображается:
Горизонтальная линия HTML растягивается по горизонтали на всю ширину Web-страницы и имеет один-два пиксела в толщину, в зависимости от используемого браузера.
С помощью атрибутов можно задавать внешний вид горизонтальной линии. Тег «hr» поддерживает следующие атрибуты:
Вставим горизонтальную линию на нашу WEB-страницу. Сделаем ее зеленым цветом, толщиной в 1 пиксель и шириной 320 пикселей:
Результат будет примерно таким:
Комментарии html
В html есть возможность вставлять комментарии. Комментарий — это часть html-кода, которая не отображается в WEB-браузере. Текст комментария размещается между открывающим тегом. Пример:
Комментариями можно помечать какие-то участки кода, чтобы в будущем можно было легче разобраться в нем.
На этом все и, как обычно, подведу итог поста. В данной статье мы рассмотрели основные html-элементы для разделения текста страницы на логические части. Напомню все эти элементы:
-
Абзацы — выделяются с помощью парного тега P;
Остальные материалы о тегах html ищите в рубрике HTML и CSS и подписывайтесь на обновления моего блога. До встречи в следующих постах!
Читайте также: