HTML тагове за текст: подравняване, размер, шрифт

Изглежда, защо знаете HTML таговете за текста, ако сега почти всеки администратор има удобно визуален редактор,

Факт е, че форматирането на съдържанието на сайта е фундаментално различно от работата в офис приложения. Не е достатъчно само текстът да изглежда привлекателен, защото правилният външен вид зависи не само от показването на уеб страницата, но и от нейното популяризиране в търсачките.

HTML тагове и атрибути: основите на синтаксиса

Всеки текст има скрит код, който "обяснява" на компютъра какво и как трябва да се показва на екрана. Цялата информация се записва с помощта на набор от универсални елементи.

Всъщност, HTML таговете за текст са команди, които добавят конкретни блокове към страница или променят външния си вид. Правилният формат за влизане е:

Имайте предвид, че не всички маркери са сдвоени. Например,
(прескачане на линия) или (добавянето на хоризонтална линия) изобщо не е необходимо да бъде затворена.

Защо не можете да копирате статии от Word и други програми в редактора на сайтове

Въпреки че съвременните офис програми използват същите HTML тагове за текст, в 99% от случаите кодовият код не е подходящ за уеб страници. Дори ако документът се показва нормално в самата програма, форматирането може да не успее, когато бъде поставено на сайта. Освен това, поради големия брой ненужни тагове и атрибути, търсачките не могат да анализират адекватно съдържанието на страницата. Това на свой ред затруднява популяризирането на вашия ресурс.

За да получите чист и подходящ код, първо трябва да изчистите текста от HTML таговете, създадени от обикновения редактор. Има няколко начина да направите това:

1. "Пуснете" статията през "Бележник" и само след това поставяне на сайта. Приложението изтрива всички HTML, така че след това ще трябва да форматирате отново текста (използвайки инструментите на редактора или ръчно).
2. Пишете и публикувайте статии чрез LiveWriter. Популярен редактор на блога незабавно генерира правилния код. И в отделен раздел можете да видите как ще изглежда текстът на сайта.
3. Използвайте HTML Cleaner. Тази онлайн услуга не унищожава изцяло кода, но само допълнителни фрагменти. С помощта на филтрите избирате кои маркери искате да запазите. Има и мощен визуален редактор за форматиране, който добавя оптимизирани команди към кода.

Винаги проверявайте HTML преди да публикувате нов запис. То не трябва да съдържа други маркери, освен тези, които ще разгледаме сега.

параграфи

Този елемент присъства в почти всички статии. Всеки параграф трябва да се намира в такъв контейнер - той опростява форматирането и ви позволява да запазите един стил на всички страници на сайта. За удобство, маркера

винаги напишете нов ред.

подравняване

Отделен HTML маркер "Align text" не е бил използван дълго време. Вместо това е създаден универсален атрибут ALIGN. За да промените позицията на текстовия блок на страницата, трябва да изберете една от трите стойности - ЦЕНТЪР, НАДЯСНО или НАЛЯВО. По същия начин можете да зададете подравняване за други елементи - например заглавки.

В някои ситуации се използват други HTML тагове за подравняване. Текстът в центъра, например, може да бъде подреден с помощта на елемент

Заглавия и подпозиции

Системата на подзаглавията ви позволява да създадете логическа структура на съдържанието. Когато текстът е разделен на семантични блокове, читателят е много по-лесно да се концентрира и да научи нова информация. Търсачката също анализира заглавията, за да разбере какви искания за популяризиране на страницата. Ето защо специалистите по SEO препоръчват използването на тематични ключове.

HTML използва шест нива на субтитрите - от

• . Основното заглавие (заглавието на статията, стоките в онлайн магазина и т.н.). В текста може да има само един

• ...

  . Подзаглавията на второто ниво прекъсват текста в семантични блокове. Например, ако оценявате преносими компютри, можете да направите няколко

  с имената на различни модели.

• ...

  . Третото ниво е необходимо, ако текстът е между два

  също разбити на малки блокове. В нашия пример това може да са критериите за оценка - "Performance", "Memory", "Video card" и т.н. за всеки модел.

• ,

  ,

  . На практика те са изключително редки. Но общият принцип е същият - те трябва да бъдат "вложени" в блока с подзаглавие на най-високото ниво.

Проследявайте правилната йерархия. Връщайки се към нашия пример, това означава, че не можете да въведете веднага имената на моделите като

или

. И освен това да използва хомогенна в смисъл на субтитри блокове на различни нива (например, маркирайте лаптоп, класирана на последно място в класацията, като се използва

).

И тук е диаграма, която ще ви помогне веднага да разберете и запомните правилната структура на заглавията в HTML.

списъци

Всички изброявания и инструкции са по-добре форматирани като списъци, използващи специални HTML тагове за текст (типична грешка е само няколко параграфа

,които започват с тире или цифра).

Структурата на такива блокове е много проста. Първо, ние определяме вида на списъка - етикетиран

...

...

Всички елементи са между етикетите за отваряне и затваряне. Всеки елемент в списъка започва с нов ред и има формат

селекция шрифта: и нейните атрибути

Какво мога да променя, използвайки този HTML маркер? Размерът на текста, неговия шрифт и цвят - и без добавяне на нови класове в CSS. Това е много удобно, когато трябва да изберете само едно изречение или фрагмент.

има няколко атрибута:

• лице. Позволява ви да промените шрифта на текста. Можете да посочите няколко опции, разделени със запетаи (Tahoma, Verdana). Ако потребителят не разполага с първия шрифт, системата просто използва алтернативата.
• размер. За да увеличите или намалите текста, посочете в кавички стойност от 1 до 7.
• цвят. В зависимост от дизайна, можете да изберете един от стандартните нюанси (червен, зелен, син) или да въведете цветен код, от който да избирате.

Не използвайте параграфи, форматирани с , вместо субтитри. По-добре е да настроите същите настройки за правилния маркер.

Начини за избор на текст

Монотонните текстови гуми, дори и с разбивка по параграфи. За да привлече вниманието и да загрее интереса на читателя, се препоръчва графично да се подчертаят основните въпроси. Ето няколко команди, които ще помогнат да се справите с тази задача.

.... Изключително популярен HTML маркер. Дръзкият текст веднага хваща окото ви и следователно с негова помощ е удобно да се подчертаят важни теми и факти.

Много объркващи маркери и . Визуално няма разлика, но те работят по различни начини. Първият просто променя външния вид на текста, а другата служи като "указател" и подчертава най-важните части (тематични ключови думи и фрази за SEO).

.... Елегантен и строг курсив е идеален за проектиране на научни термини, чужди думи и разнообразни цитати. В сериозните публикации наклоненият текст отличава имената на произведения на изкуството.

.... Може би толкова много спорове не са причинили HTML-таг. Подчертайте текста Рядко се използва, тъй като този метод на разпределение е бил исторически присвоен на хипервръзки. Ако използвате в статии, имайте предвид, че това е подходящо само за къси фрагменти - не повече от 1 ред.

.... Интересен маркер, който ви позволява да участвате текст заличаване. Много важно в рекламата - например да се подчертае контраста между старите и новите цени.

.... Най-лесният начин да увеличите размера на шрифта без допълнителни параметри.

.... Работи по същия принцип като предишния маркер. Текстът отвътре се намалява спрямо главния текст.

^.... Точното име за този формат е горната. По принцип този маркер е предназначен за математически степени и бележки под линия. Тя намалява размер на шрифта и премества избрания текст.

_.... Индексът често се среща в различни формули. Избраният фрагмент се намира под основния текст.

Семантични контейнери

Тъй като в много текстове са открити някои блокове, за тях са създадени специални етикети. Това опростява форматирането, защото ако всеки тип съдържание има собствен набор стилове, достатъчно е да изберете фрагмент от текста и да посочите каква информация съдържа.

.... Маркер за добавяне на компютърни кодове. Той е незаменим в статиите за програмиране с примери - командите не се изпълняват, но се показват като обикновен текст.

.... Той е предназначен за формулиране на котировки - например ключови откъси от интервюто.

...

. Допълнителен маркер, който съдържа информация за автора, включително връзки.

Разделителна линия

С помощта на проста лента можете да маркирате логическия край на голяма секция. не се отнася за двойките маркери. Това означава, че затварящият елемент на формата не е необходим.

Чрез атрибута WIDTH можете да направите разделителя по-кратък, като зададете подходящия размер в пиксели или проценти от ширината на прозореца.

За да се научите да използвате тагове за форматиране на текст в HTML, вие не само ще направи вашите статии по-лесно да се чете, но и подобряване на ефективността на SEO.