Основные HTML теги форматирования текстаЕсли Вы хотите, чтобы люди читали то, что Вы написали, то надо уделить время для форматирования текста. Люди не любят читать широкие и длинные абзацы текста на страницах сайтов, если они не разбиты на более мелкие. В этой статье вы узнаете основные HTML-теги форматирования текста. Пробелы и пустые строкиПрежде чем Вы начнете форматировать текст, нужно сначала понять, как браузеры читают пробелы и пустые строки. Если Вы считаете, что если сделаете несколько последовательных пробелов между двух слов и эти пробелы появятся этими словами на экране браузера, то это не так. По умолчанию будет отображаться только один пробел. Поэтому необходимо использовать специальные HTML-теги для создания нескольких пробелов. Аналогичным образом, если Вы начинаете новую строку в исходном документе или у вас есть последовательность пустых строк, они будут просто проигнорированы браузером и будут рассматриваются как один большой пробел пробел. Для этого тоже существуют специальные HTML-теги для создания нескольких пустых строк. Создание заголовков (h1 - h6)Любая страница начинается с заголовка. С помощью тегов форматирования мы можем использовать разные размеры заголовков. HTML имеет шесть уровней заголовков, которые представлены тегами: <h1>, <h2>, <h3>, <h4>, <h5>, и <h6>. При отображении любого заголовка, браузер добавляет одну пустую строку до и после заголовка. Примеры заголовков:
Браузер покажет это так:
Тег <p>, параграфТег <p> помогает структурировать свой текст. В HTML, параграф - это абзац. Каждый абзац текста должен быть размещен между тегами <p> и </p>, как показано ниже в примере:
В браузере Вы увидите следующее:
Вы можете использовать атрибут выравнивания абзацев align:
В браузере будет следующий результат:
Тег <br />, перевод строкиВсякий раз, когда вы используете тег <br />, после него текст начинается на следующей строке. Этот тег является примером пустого элемента, который не имеет закрывающий тег, поскольку он не несет никакой информации, а только сообщает браузеру о переводе строк. Примечание: тег <br /> содержит пробел между символами "br" и "/". Если вы пропустите этот пробел, то старые браузеры будут иметь проблемы с подготовкой обрыва строки. Вот пример использования тега <br />:
В браузере Вы увидите такое:
Тег <center>, выравнивание текста по центру,Вы можете использовать тег <center>, чтобы выровнять любой текст по центру страницы или в любой ячейке таблицы:
Вид в браузере такой:
Элемент ( ), неразрывный пробелПредположим, вы решили использовать фразу "только на сайте wmz-mail.at.ua". И Вы не хотите, чтобы браузер разбил ее на две строки эту фразу:
Итак, в тех случаях, когда Вы не хотите, чтобы браузер перервал текст, нужно использовать неразрывный пробел ( ) вместо обычного пробела. Для этого нужно использовать следующий код:
Элемент (­), мягкий переносБывают такие случаи, когда Вы хотите чтобы браузер переносил длинные слова для того, чтоб сделать абзац более визуально эстетичным. Давайте рассмотрим пример. Имеем следующий код:
Давайте сделаем перенос слов "программирования" и "гипертекста". Для этого мы должны проставить элемент (­) в нужном для нас месте слова. Теперь код абзаца будет таким:
Теперь абзац будет иметь следующий вид:
Тег <pre>, исходное форматирование текстаДля того чтобы сохранить исходное форматирование текста нужно использовать тег <pre>. Рассмотрим пример:
Что же мы увидим в итоге? Текст, который находится в средине тегов <pre> и </pre> будет отображен так называемым "моноширинным" шрифтом, который является основным и общепринятым шрифтом в html-документах. Таким образом наше предложение будет иметь такой вид:
HTML - это язык разметки гипертекста. Изучайте его и делайте Ваш сайт лучше.
Тег <hr />, горизонтальная линияГоризонтальные линии используются для того, чтобы визуально разбить разделы текста на веб-странице. Данный тег создает горизонтальную линию от левого до правого края страницы в пределах контента. Например, имеем следующий код:
Результат будет таким:
| ||||||||||||||||||||||
Рейтинг: Категория: Учебник HTML | Добавил: zaharchuk (04.03.2014)
5.0/5 из 2
| ||||||||||||||||||||||
Просмотров: 16154 |
Комментариев: 0 | |