Лекция №2 -Оформление текста в HTML
.pdf
HTML выравнивание текста по центру и ширине, отступ
<html>
<head>
<title>Выравнивание текста в HTML, текст по центру, справа страницы</title>
</head>
<body>
<p align="left">Текст выровнен по левому краю страницы.</p>
<p align="right">Текст справа страницы.</p>
<p align="center" style="color:#ff0099; fontsize:30px">
Текст выровнен по центру, розового цвета, размером в 30 пикселей.</p>
</body>
</html>
Выравнивание текста в HTML по центру, по ширине
В примере ниже показано, как выровнять текст по ширине страницы:
HTML текст и его отступ слева страницы
Произведем отступ текста слева двумя способами:
<html>
<title>HTML отступ текста слева страницы</title>
</head>
<body style="background-color:#ffee77">
<p><blockquote>Отступ слева с использованием тегов.</blockquote></p> <p style="text-indent:100px">Отступ слева с использованием CSS атрибута.</p>
</body>
В первом случае отступ строки был произведен тегами <blockquote> </blockquote>, а во втором случае – с помощью CSS атрибута text-indent,
значения которого устанавливаются в
пикселях и могут иметь любую величину, что бывает очень удобно.
Расстояние между строками, HTML перенос строки
Тег <br /> осуществляет перенос строки, разбивает строку:
<html>
<head>
<title>Расстояние между строками по вертикали, HTML перенос строки</title>
</head>
<body>
<p>Тег <br /> осуществляет перенос, то есть текст,<br /> размещенный за ним, будет отображен с новой строки.</p>
Расстояние между строками, HTML перенос строки
Увеличим расстояние между строками по вертикали:
<html>
<head>
<title>HTML перенос строки, расстояние между строками по вертикали</title>
</head>
<body>
<p style="color:DarkBlue">Тег <br /> осуществляет перенос, то есть текст,
<br /><br /> размещенный за ним, будет отображен с новой строки.</p>
Расстояние между строками, HTML перенос строки
Не злоупотребляйте тегом <br /> для увеличения
расстояния между строками:
Увеличить расстояние между строками текста вам помогут CSS.
HTML перенос слов
Возможно ли в HTML реализовать перенос слов
HTML перенос слов какими-либо тегами осуществить не удастся, а пользоваться вспомогательным кодом нет смысла, потому что результат будет отображен далеко не во всех браузерах, то есть не будет соблюдена его кросс-браузерность.
Перенос слов можно производить вручную, но результат не понравится ни вам, ни вашим посетителям, потому как наличие большого количества черточек в тексте страницы не делают его привлекательным. Оставьте идею переноса слов – экономьте свое драгоценное время.
HTML блок и параграф, пробел, абзац
Рассмотрим в деталях HTML блоки и параграфы как элементы интернет-страницы.
HTML параграф определяется тегами <p> </p>. HTML параграфы обыкновенно содержат текст, форматирующие теги, изображения.
HTML параграф не может содержать внутри себя блочные элементы, такие как заголовки
<h1> – </h6>, блок <div> </div> и другие параграфы. HTML блок определяется тегами <div> </div>.
HTML блок может вмещать в себя любые элементы webстраницы, в любом количестве.
HTML блоки прекрасно подходят для верстки интернетстраниц, ими легко манипулировать.
HTML блок и параграф, пробел, абзац
<html>
<head>
<title>HTML параграфы и блоки</title>
</head>
<body>
<p>Первая строка</p> <p>Вторая строка</p> <div>Третья строка</div> <div>Четвертая строка</div> <div style="color:#ff0000"><p>Пятая строка</p></div> <div>Шестая строка</div> </body>
</html>
HTML блок и параграф, пробел, абзац
Нам видно, что HTML параграфы имеют отступы по вертикали – такова особенность тегов <p> </p>. HTML блоки <div> </div> такие пространства не создают, потому что они не несут никакой нагрузки, а просто являются контейнерами.
Tеги <p> </p> не могут содержать другие <p> </p> или <div> </div>. Внутри <p> </p> могут быть размещены линейные элементы, такие как <span> </span> или, например, теги, отвечающие за форматирование текста.
Теги <p> </p> и <P> </P>, в принципе, одно и то же, но W3C консорциумом рекомендовано использовать маленькие буквы. В новой версии HTML как и в современном XHTML использование больших букв при написании тегов запрещено.
Блок <div> </div> может содержать внутри себя сколько угодно <div> </div> и <p> </p> и других элементов HTML документа. Он идеально подходит для верстки.