06:06:2014

Основы верстки HTML #2 Форматирование текста в html

Сегодня мы рассмотрим форматирование текста в html, основные теги и атрибуты. Для работы нам потребуется обычный текстовый редактор, но я советую использовать notepad++.  Форматирование текста в htmlОн будет поудобнее, функционал в нем побольше, да и работать приятнее, чем в обычном ТР. Как я говорил в прошлом уроке, лучше идти по порядку от 1-го урока до последнего, т.к последующие могут оказаться для вас бесполезными и непонятными, если вы не изучите предыдущие.Поэтому советую прочитать предыдущий урок на тему “Основы верстки HTML” – “Введение в html“. Мы же пойдем дальше и сегодняшняя наша тема : Форматирование текста в html.

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


Для начала нам понадобиться html-документ, который мы создали в прошлом уроке, так сказать, скелет нашего сайта, выглядит он вот так:Форматирование текста в html

Удалим то, что мы написали между тегами <body></body>, потому что так писать не принято, если мы хотим, чтобы на странице нашего сайта отображался какой-либо текст, то нам понадобиться тег <p>. Модернизируем наш код, вписывая нужный нам текст между тегами <p></p>:Форматирование текста в html

Таким образом, если открыть наш файл в браузере, мы увидим вот такую картину:Форматирование текста в html

Не красиво, слишком большой отступ каждой строки от следующей, поэтому мы изменим наш код, добавив туда один из немногих непарных тегов <br>:Форматирование текста в html

Не обязательно записывать каждую строку текста в теги <p></p>, достаточно написать этот тег всего один раз, остальное время нам будет помогать <br>, да и отступы он делает более красивыми, вот как выглядит наша страница, после добавления тега <br>:Форматирование текста в html

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

Атрибуты текста в html


Вернемся к изначальному варианту кода, когда каждая строка была записана между тегами <p></p>.  Теперь мы научимся перемещать текст к левому, правому краю или в центр. Сразу скажу, атрибутов в html великое множество и рассказать про все в одной статье невозможно, да и не нужно, ведь для работы с текстом используют, в основном, один единственный атрибут – align. Вот и мы воспользуемся именно им! Сделаем вот как, перепишите код с картинки, а я объясню, что и как работает:теги форматирования текста htmlВот так выглядит наш видоизмененный код и вот, что он делает с нашей веб-страничкой:теги форматирования текста html

Вы могли уже догадаться, что 1-я строка осталась слева, 2-я и 4-я отодвинулись к правому краю, а 3-я стала центральной. В этом нам помог тег align, значение которого мы заносим “вот в такие кавычки”, что очень напоминаем о том, как мы учились работать с таблицами вот в этом уроке – “Учимся работать с таблицами в html” , – советую вам прочитать его.

Выглядит код вот так:

После p ставиться пробел, пишется атрибут align=”значение”, в зависимости от указанного значения текст будет должным образом отформатирован. Изначально текст ровняется по левому краю, то есть указано значение “left”, если мы указываем значение “right”, то текст перебегает на правый край и соответственно, если указать значение “center”, то текст окажется по центру страницы.

Теперь научимся управлять выделением текста и различными способами работы с ним. Допишем в наш код вот такой текст:теги форматирования текста html

Теперь мы сделаем слово “привет” подчеркнутым, “дорогой” выделим жирным, “друг” курсивом, “сколько будет равно” зачеркнем, 7 возведем в 98 степень, а в H2O 2-ку опустим в нижний индекс. Вот как это будет выглядеть:Форматирование текста в html

И вот как это выглядит в браузере:Форматирование текста в html

Чтобы подчеркнуть слово, мы заносим его под тег <u></u>, чтобы сделать жирным, под тег <strong></strong>, кстати, существует и другая форма выделения текста жирным, но <strong> лучше подходит для seo-оптимизации статей в выделении ключевых слов, она больше нравится поисковикам! Чтобы сделать курсивом заносим под <i></i>, чтобы зачеркнуть используем <strike></strike>, для выделения нашей степени мы заносим числа, которые мы хотим поднять в степень, под тег <sup></sup>, а чтобы опустить в индекс нужное число, выделяем его <sub></sub>. Вот и все, достаточно просто!

Сегодня мы стали еще более крутыми верстальшиками узнав о том, что такое форматирование текста в html и, чтобы не потерять свой талант подписывайтесь на обновления блога и мы с вами станем еще круче, в следующих статьях!

 

Ответить


 Seogeeks.ru