Уроки html форматирование текста




Скачать 123.52 Kb.
НазваниеУроки html форматирование текста
Дата конвертации14.05.2013
Размер123.52 Kb.
ТипДокументы

Уроки HTML

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


  • Шрифты: гарнитура, размер, цвет

  • Оформление текста

  • Заголовки

  • Теги переноса строки и форматирования абзаца

  • Выравнивание текста

  • Упражнение

Шрифты: гарнитура, размер, цвет


При помощи HTML-разметки можно написать текст разного начертания (гарнитуры), размера и цвета. Для этого используется тег , имеющий несколько параметров:

  • face – для задания гарнитуры,

  • size – для задания размера,

  • color – для задания цвета.

Чтобы задать нужный шрифт, размер или цвет, необходимо соответствующему параметру присвоить нужное значение:

параметр="значение"

Гарнитура

Например, чтобы написать текст шрифтом Times New Roman, необходимо вставить перед нужным текстом тег и присвоить его параметру face значение Times New Roman, а т.к. тег  – парный, то после необходимого текста обязательно нужно вставить закрывающий тег:

Текст с начертанием Times New Roman

В результате браузер отобразит эту строчку так:

Текст с начертанием Times New Roman

Параметру face можно присвоить несколько значений через запятую:

face="Times New Roman, Times, serif"

В таком случае, браузер сначала попытается отобразить текст шрифтом Times New Roman. Если такой шрифт отсутствует на компьютере пользователя, то браузер попытается отобразить текст шрифтом Times и т.д.

Размер

Чтобы написать текст размером 4, необходимо вставить перед нужным текстом тег и присвоить его параметру size значение 4:

Текст размера 4

В результате браузер отобразит эту строчку так:

Текст размера 4

Что же означает эта загадочная цифра 4? Параметр size может принимать значения от 1 до 7. Это условные единицы. Средний размер, используемый по умолчанию, соответствует size="3".

Следовательно, размер текста 4 – это средний размер, увеличенный на 1 условную единицу, а размер 2 - это средний размер, уменьшенный на 1 условную единицу и т.д. Величина текста, заданная таким способом, называется абсолютной.

Но есть и другой способ уменьшить или увеличить размер текста относительно размера по умолчанию. Для этого нужно присвоить параметру size значение "-1" или "+1" соответственно. При таком способе задания размера величина текста называется относительной.

Итак, чтобы получить размер текста 5, можно воспользоваться двумя способами:

Текст размера 5 или Текст размера 5

Помимо перечисленных существует еще несколько способов задать размер текста.

Увеличить текст можно с помощью тега :

Увеличенный текст

В результате браузер отобразит эту строчку так:

Увеличенный текст

Уменьшить текст можно с помощью тега :

Уменьшенный текст

В результате браузер отобразит эту строчку так:

Уменьшенный текст

Теги  и  можно повторить несколько раз для усиления эффекта. Например, если в результате строки:

Большой текст

текст недостаточно велик:

Большой текст

можно написать так:

Большой текст

И в результате получится больший текст:

Большой текст

Цвет

Теперь о задании цвета текста. Чтобы написать текст красным цветом, необходимо вставить перед нужным текстом тег  и присвоить его параметру color значение red:

Красный текст

В результате браузер отобразит эту строчку так:

Красный текст

Но цвет можно задать не только по названию, но и по цифровому значению в шестнадцатеричном формате, который выглядит как знак # и 6 символов (цифры 0-9 и буквы латинского алфавита A-F) после него. Например, красному цвету соответствует шестнадцатеричное значение #FF0000. Т.е. написать текст красным цветом можно двумя способами:

Красный текст или Красный текст

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

Оформление текста


Для оформления текста существуют следующие теги, именуемые тегами форматирования.

Теги  и  позволяют написать жирный текст:

Жирный текст или Жирный текст

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

Жирный текст

Теги  и  позволяют написать текст курсивом:

Текст курсивом или Текст курсивом

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

Текст курсивом

Тег  позволяет написать подчеркнутый текст:

Подчеркнутый текст

В браузере увидим:

Подчеркнутый текст

Этот тег полезно использовать для выделения ссылок.

Тег  позволяет написать зачеркнутый текст:

Зачеркнутый текст

В браузере увидим:

Зачеркнутый текст

Теги  и  позволяют написать верхний индекс или нижний индекс соответственно. Эти теги уменьшают размер текста и сдвигают его относительно базовой линии вверх или вниз.

Например, их можно использовать для написания формул:

E = mc2 или C2H5OH

В браузере увидим:

E = mc2 или C2H5OH

Теги форматирования можно использовать совместно.

Например, чтобы сделать текст жирным и курсивным одновременно, достаточно написать:

Жирный курсивный текст

И в браузере мы увидим:

Жирный курсивный текст

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

Сводная таблица тегов форматирования:

Тег

Действие

Пример использования

Результат



Делает текст жирным

Текст

Текст



Делает текст жирным

Текст

Текст



Делает текст курсивным

Текст

Текст



Делает текст курсивным

Текст

Текст



Делает текст подчеркнутым

Текст

Текст



Делает текст зачеркнутым

Текст

Текст



Верхний индекс

E = mc2

E = mc2



Нижний индекс

C2H5OH

C2H5OH

Заголовки


Чтобы как-то выделить заголовки в тексте, в html существуют специальные теги заголовка. Эти теги изменяют размер текста, сверх и снизу заголовка делаются отступы, пропорциональные его размеру, а также после заголовка делается перенос строки. Вот эти теги: 

 : 

 - самый большой заголовок, 
 - самый маленький.

Т.е. если написать:

Текст в виде большого заголовка

и

Текст в виде маленького заголовка


Браузер отобразит это так:

Текст в виде большого заголовка


и

Текст в виде маленького заголовка

Теги переноса строки и форматирования абзаца


Вот еще несколько полезных теги для форматирования текста.

Полезно знать:

Если в тесте html-документа поставить перенос строки, то браузер его проигнорирует и отобразит весь текст в одну строку.

Например, в тесте html-документа написано:

Идет бычок, качается,
Вздыхает на ходу...

А браузер отобразит этот текст следующим образом:

Идет бычок, качается, Вздыхает на ходу...

Тут-то нас и спасет тег 
. Это непарный тег, означающий переход на новую строку.

Т.е написав:

Идет бычок, качается,

Вздыхает на ходу...

или

Идет бычок, качается,
Вздыхает на ходу...

В браузере мы увидим:

Идет бычок, качается,
Вздыхает на ходу...

С помощью этого тега можно не только перенести тест на новую строку, но и делать отступы между разными элементами документа. Достаточно просто вставить не один тег 
, а два и т.д.

Полезно знать:

Если в тесте html-документа подряд стоят несколько пробелов, то браузер их проигнорирует и отобразит только один.

Например, в тесте html-документа написано:

Здравствуй,     дорогой друг!

А браузер отобразит этот текст следующим образом:

Здравствуй, дорогой друг!

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

Т.е. если написать:


Идет бычок,     качается,
Вздыхает на ходу...


То браузер отобразит этот текст следующим образом:

Идет бычок, качается,

Вздыхает на ходу...

Но!

Не стоит злоупотреблять тегом 
. И по возможности обходиться без него.

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

Выравнивание текста


Всего в html можно задать 4 типа выравнивания: по левому краюпо правому краюпо центрупо ширине. Чтобы задать тип выравнивания нужно параметру align тега 
 присвоить одно из значений:

  • left (выравнивание по левому краю),

  • right (выравнивание по правому краю),

  • center (выравнивание по центру),

  • justify (выравнивание по ширине).

Вот примеры текста с различным типом выравнивания:

по левому краю

по правому краю

по центру

по ширине


Хотя Карлсон и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.



Хотя Карлсон и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.



Хотя Карлсон и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.



Хотя Карлсон и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.


Результат в браузере

Хотя Карлсон и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.

Хотя Карлсон и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.

Хотя Карлсон и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.

Хотя Карлсон и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.

Т.к. по умолчанию задано выравнивание по левому краю, то в первом примере параметр align="left" можно не писать.

Для задания выравнивания по ширине существует еще один тег 
:

Хотя Карлсон и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.


И в браузере текст отобразится по центру. Правда в таком случае утратится свойство параграфа: отступ сверху и снизу. Но ведь оно и не всегда требуется.

Упражнение


Создайте по образу html-документ с соблюдение всех элементов оформления текста.

Малыш и Карлсон

Часть первая. Карлсон, который живет на крыше

В городе Стокгольме, на самой обыкновенной улице, в самом обыкновенном доме живет самая обыкновенная шведская семья по фамилии Свантесон. Семья эта состоит из самого обыкновенного папы, самой обыкновенной мамы и трех самых обыкновенных ребят -Боссе, Бетан и Малыша.

- Я вовсе не самый обыкновенный малыш, - говорит Малыш.

Но это, конечно, неправда. Ведь на свете столько мальчишек, которым семь лет, у которых голубые глаза, немытые уши и разорванные на коленках штанишки, что сомневаться тут нечего: Малыш - самый обыкновенный мальчик…

Астрид Линдгрен

Выложите получившийся файл в личный каталог, составьте линк (посмотреть как) и откройте Вашу страничку в браузере.

Похожие:

Уроки html форматирование текста iconУроки html изображения
Для вставки изображения в html-документ используется непарный тег, который помещается в то место документа, где должно быть вставлено...
Уроки html форматирование текста iconОтчет: Защита: Изм. Лист № докум. Подпись Дата Лист 050702. 1371. 02. 01
Цель работы: научиться выполнять ввод и редактирование текстов в редакторе Блокнот; создавать простейшие примитивы в графическом...
Уроки html форматирование текста iconСьюзен Молдоу и Нэп Грэм сначала новости из газеты «Ист Орегониен» от 25 июня 1947 года
Зло, единственное оружие против которого кроется в тайной магии старинного индийского амулета — «Ловца снов» — Дополнительное форматирование...
Уроки html форматирование текста iconУроки экономики «Sonin ru: Уроки экономики / К. И. Сонин.»
Эти уроки показывают своеобразную тонкость экономической науки, неочевидность, а порой и парадоксальность ее выводов. Достаточно...
Уроки html форматирование текста iconЗадачи и упражнения Ввод данных (числа, формулы) в ячейки, копирование данных, форматирование числовых данных Упражнение № Основные приемы работы с эт: ввод данных в ячейку, форматирование шрифта, автозаполнение, ввод формул
Для этого ввести в ячейку В4 число 1, в ячейку В5 число Выделите обе ячейки и
Уроки html форматирование текста iconЛекция 11. Html-құжаттың интерактивтік интерфейсі
Бұл бөлімнің мақсаты Web-құжаттың интерактивтік интерфейсін құру әдістерімен танысу болып табылады. Бөлімді сипаттауда www және html...
Уроки html форматирование текста iconГрафика в html-документе Использование рисунков
Поскольку каждый рисунок занимает много времени на отображение на экране (что замедляет загрузку всей странички), не рекомендуется...
Уроки html форматирование текста iconДля получения зачёта по блоку I необходимо
Обязательные страницы html. В таблице Zzzz обозначает краткое название вашего белка; Y. yyyyyy – латинское название вашей бактерии....
Уроки html форматирование текста iconМазурина Анна Маратовна Основы web-дизайна учебно-методическое пособие для самостоятельной работы
Охватывают в файле html то место, где стоит курсор. В этой строке щелчок по какому-то тэгу выделит содержимое документа целиком внутри...
Уроки html форматирование текста iconОсновные тэги таблицы Таблица
Таблицы в html организуются как набор столбцов и строк. Ячейки таблицы могут содержать любые html-элементы, такие, как заголовки,...
Разместите кнопку на своём сайте:
kk.convdocs.org



База данных защищена авторским правом ©kk.convdocs.org 2012-2019
обратиться к администрации
kk.convdocs.org
Главная страница