- Шульга Е. В.
- Уроки по HTML (основы)
- Просмотров: 105665
HTML. Форматирование текста
Для создания абзаца используется тэг Р.
Пример:
<HTML>
<HEAD>
<TITLE> Стихотворение </TITLE>
</HEAD>
<BODY>
<P>
Унылая пора! Очей очарованье!...
</P>
<P>
Александр Пушкин
</P>
<P>
Унылая пора! Очей очарованье!
Приятна мне твоя прощальная краса —
Люблю я пышное природы увяданье,
В багрец и в золото одетые леса,
В их сенях ветра шум и свежее дыханье,
И мглой волнистою покрыты небеса,
И редкий солнца луч, и первые морозы,
И отдаленные седой зимы угрозы.
</P>
</BODY>
</HTML>
Результат:
Замечание. Если в Блокноте при наборе текста вы начали писать текст с новой строки, то в браузере этот текст все равно будет расположен на одной строчке. Чтобы перенести строку внутри одного абзаца требуется поставить тэг <BR> в конце строки.
Пример:
<HTML>
<HEAD>
<TITLE> Стихотворение </TITLE>
</HEAD>
<BODY>
<P>
Унылая пора! Очей очарованье!...
</P>
<P>
Александр Пушкин
</P>
<P>
Унылая пора! Очей очарованье! <BR>
Приятна мне твоя прощальная краса — <BR>
Люблю я пышное природы увяданье, <BR>
В багрец и в золото одетые леса, <BR>
В их сенях ветра шум и свежее дыханье, <BR>
И мглой волнистою покрыты небеса, <BR>
И редкий солнца луч, и первые морозы, <BR>
И отдаленные седой зимы угрозы.
</P>
</BODY>
</HTML>
Результат:
Как выровнять текст
Для выравнивания текст у тэга Р есть атрибут ALIGN. Но не достаточно просто написать <P ALIGN>. У атрибута должен быть указан параметр. Так атрибут ALIGN имеет следующие параметры:
LEFT – выравнивание текста по левому краю
RIGHT – выравнивание текста по правому краю
CENTER – выравнивание текста по центру
JUSTIFY – выравнивание текста по ширине
Чтобы выровнять название стихотворения по центру необходимо сделать следующую запись:
Пример:
<P ALIGN = “CENTER”>
Унылая пора! Очей очарованье!...
</P>
Замечание. Обратите внимание, что при закрытии тэга его атрибуты не пишутся.
Результат:
Самостоятельно сделайте выравнивание строки «Александр Пушкин» по правому краю.
Использование заголовков
В нашем примере очень хотелось бы, чтобы название и автор стихотворения были бы выделены. Для этого можно использовать заголовки. У заголовка существуют уровни: H1 – самый первый уровень и, соответственно, текст, заключенный в контейнер <H1>…</H1>, будет самым большим. Н6 – самый нижний уровень и самый маленький размер текста.
Содержимое тэгов <H1>, <H2>, ..., <H6> всегда начинается с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.
У тэгов <H1>, <H2>, ..., <H6> также имеется атрибут.
ALIGN определяет выравнивание заголовка. Параметр ALIGN такие же как и у атрибута ALIGN тэга P.
Сделаем в нашем примере название стихотворения заголовком первого уровня и выравнивание по центру, а автора – вторым уровнем и выравнивание по правому краю.
Пример:
<H1 ALIGN = “CENTER”>
Унылая пора! Очей очарованье!...
</H1>
Результат:
Использование горизонтальных разделителей
При оформлении текста можно воспользоваться горизонтальными разделителями. Для того чтобы их вставить нужно воспользоваться тэгом <HR>.Линия всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке. Этот элемент является одинарным тэгом и не требует закрытия.
У тэга HR есть параметры:
SIZE - устанавливает толщину линии.
Пример:
<HR SIZE=”3”> WIDTH – устанавливает ширину линии в пикселах или процентах.
Пример:
<HR WIDTH =”300”>
<HR WIDTH =”25%”>
COLOR – задает линии определенный цвет.
Пример:
<HR COLOR =”red”> ALIGN определяет выравнивание линии.
Пример:
<HR ALIGN=”LEFT”> Вставим горизонтальный разделитель после стихотворения с толщиной в 2 пикселя и желтым цветом.
Пример:
<HTML>
<HEAD>
<TITLE> Стихотворение </TITLE>
</HEAD>
<BODY>
<H1 ALIGN = “CENTER”>
Унылая пора! Очей очарованье!...
</H1>
<H3 ALIGN = “RIGHT”>
Александр Пушкин
</H3>
<P>
Унылая пора! Очей очарованье! <BR>
Приятна мне твоя прощальная краса — <BR>
Люблю я пышное природы увяданье, <BR>
В багрец и в золото одетые леса, <BR>
В их сенях ветра шум и свежее дыханье, <BR>
И мглой волнистою покрыты небеса, <BR>
И редкий солнца луч, и первые морозы, <BR>
И отдаленные седой зимы угрозы. <BR>
</P>
<HR COLOR="yellow" SIZE="2">
</BODY>
</HTML>
Замечание. Если для одного тэга мы применяем несколько атрибутов, то достаточно перечислить их через пробел.
Результат:
Как установить шрифт текста
Давайте изменим шрифт стихотворения. Для этого применяют тэг <FONT>. Но если просто вставить тэг <FONT> наш текст не изменится. Для изменения шрифта нужно воспользоваться атрибутом FACE.
У этого атрибута есть свои параметры:
При записи
<FONT FACE="Times New Roman ">
текст
</FONT>
Слово «текст» будет иметь шрифт Times New Roman – с засечками.
При записи
<FONT FACE="Arial”>
текст
</FONT>
Слово «текст» будет иметь шрифт Arial – без засечек.
Зададим стихотворению шрифт Arial.
Пример:
<HTML>
<HEAD>
<TITLE> Стихотворение </TITLE>
</HEAD>
<BODY>
<H1 ALIGN =” CENTER”>
Унылая пора! Очей очарованье!...
</H1>
<H3 ALIGN = “RIGHT”>
Александр Пушкин
</H3>
<FONT FACE=" Arial ">
<P>
Унылая пора! Очей очарованье! <BR>
Приятна мне твоя прощальная краса — <BR>
Люблю я пышное природы увяданье, <BR>
В багрец и в золото одетые леса, <BR>
В их сенях ветра шум и свежее дыханье, <BR>
И мглой волнистою покрыты небеса, <BR>
И редкий солнца луч, и первые морозы, <BR>
И отдаленные седой зимы угрозы. <BR>
</P>
</FONT>
<HR COLOR="yellow" SIZE="2">
</BODY>
</HTML>
Замечание. Обратите внимание, что первым начался тэг <FONT>, а за ним идет тэг <P>. А закрываем мы тэги в обратном порядке: сначала тэг </P>, а потом </FONT>.
Результат:
Как изменить размер текста
Тэг <FONT> представляет собой контейнер не только для изменения гарнитуры, но и для установки таких характеристик шрифта как размер и цвет.
Для изменения размера шрифта используется атрибут SIZE, который задает размер шрифта в условных единицах от 1 до 7. Средний размер, используемый по умолчанию принят 3. Размер шрифта можно указывать как абсолютной величиной (например, size="4"), так и относительной (например, size="+1", size="-1"). В последнем случае размер изменяется относительно текущего.
Изменим размер стихотворения на 5 условных единиц.
Пример:
<FONT FACE=" Arial" SIZE="5">Результат:
Как задать цвет текста
Для изменения цвета шрифта тэг FONT имеет атрибут COLOR. Значение цвета можно задавать двумя способами. по его названию или по шестнадцатеричному значению.
Зададим для текста цвет FF9900, для этого нужно сделать следующую запись:
Пример:
<FONT COLOR="# FF9900">Обратите внимание, что при использовании шестнадцатеричного кода для указания цвета перед ним обязательно нужно вставить знак решетка #.
Пример:
<HTML>
<HEAD>
<TITLE> Стихотворение </TITLE>
</HEAD>
<BODY>
<H1 ALIGN = “CENTER”>
Унылая пора! Очей очарованье!...
</H1>
<H3 ALIGN = “RIGHT”>
Александр Пушкин
</H3>
<FONT FACE=" Arial" SIZE="5" COLOR="#FF9900">
<P>
Унылая пора! Очей очарованье! <BR>
Приятна мне твоя прощальная краса — <BR>
Люблю я пышное природы увяданье, <BR>
В багрец и в золото одетые леса, <BR>
В их сенях ветра шум и свежее дыханье, <BR>
И мглой волнистою покрыты небеса, <BR>
И редкий солнца луч, и первые морозы, <BR>
И отдаленные седой зимы угрозы. <BR>
</P>
</FONT>
<HR COLOR="yellow" SIZE="2">
</BODY>
</HTML>
Результат:
Тэги изменения начертания шрифта
Создадим новый документ.
Пример:
<HTML>
<HEAD>
<TITLE> Формулы </TITLE>
</HEAD>
<BODY>
<H3 ALIGN = “CENTER”>
Пример некоторых математических формул
</H3>
здесь будут записаны 2 математические формулы
<H3 ALIGN = “CENTER”>
Пример некоторых химических формул
</H3>
здесь будут записаны 2 химические формулы
</BODY>
</HTML>
Для строки «здесь будут записаны 2 математические формулы» установим курсивное начертание, для этого используем тэг <I>.
Пример:
<I>
здесь будут записаны 2 математические формулы
</I>
А для строки «здесь будут записаны 2 химические формулы» установим жирное начертание, используя тэг <B>.
Пример:
<B>
здесь будут записаны 2 химические формулы
</B>
Результат:
Тэг <SUB> отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера.
Тэг <SUP> отображает шрифт в виде верхнего индекса. Текст при этом располагается выше базовой линии остальных символов строки и уменьшенного размера.
Пример:
<HTML>
<HEAD>
<TITLE> Формулы </TITLE>
</HEAD>
<BODY>
<H3 ALIGN = “CENTER”>
Пример некоторых математических формул
</H3>
<I>
здесь будут записаны 2 математические формулы <BR>
</I>
(a+b) <SUP> 2</SUP> =a<SUP> 2</SUP> +2*a*b+b<SUP> 2</SUP> <BR>
(a+b)*(a-b)=a<SUP> 2</SUP>-b<SUP> 2</SUP> <BR>
<H3 ALIGN = “CENTER”>
Пример некоторых химических формул
</H3>
<B>
здесь будут записаны 2 химические формулы
</B>
H<SUB> 2</SUB> O <BR>
H<SUB> 2</SUB> SO<SUB> 4</SUB>
</BODY>
</HTML>
Результат:
