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

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

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


По същество, HTML таговете за текст са команди, които добавят конкретни блокове към дадена страница или променят външния им вид. Правилният формат за запис изглежда така: Моля, имайте предвид, че не всички маркери са сдвоени. Например,
(прескачане на линия) или (добавяне на хоризонтална линия) изобщо не трябва да се затварят.

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

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

"Избягайте" през статията "Notepad" и само след това го поставете на сайта. Приложението изтрива целия HTML, така че след това ще трябва да преформатирате текста (използвайки инструментите на редактора или ръчно).

Пишете и публикувайте статии чрез LiveWriter. Популярният блог редактор веднага генерира правилния код. И в отделен раздел можете да видите как изглежда текстът на сайта.

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

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

Параграфи

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

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

Отдавна е използван отделен HTML-таг "Подравняване на текст". Вместо това е създаден универсалният ALIGN атрибут. За да промените позицията на текстовия блок на страницата, трябва да изберете една от трите стойности - CENTER, RIGHT или LEFT. По същия начин можете да настроите подравняването за други елементи - например,заглавията.
В някои ситуации за подравняване се използват други HTML тагове. Текстът в центъра например може да бъде подреден с помощта на елемент. Колко удобно е отделен таг? За разлика от атрибута, той работи с всякакво съдържание, включително снимки, видеоклипове, флаш и др. Когато текстът се разбие на семантични блокове, за читателя е много по-лесно да се концентрира и да научи нова информация. Търсачките също анализират заглавията, за да разберат какви страници за търсене са подканени. Ето защо специалистите по SEO препоръчват използването на тематични ключове в тях. В HTML се използват шест нива на субтитри - от

до

. В тази система има ясна йерархия:

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

. По правило съдържа основния ключ.

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

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

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

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

,

,

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

или

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

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

Списъци

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

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

. Броят на елементите не е ограничен.

Избор на шрифт: и неговите атрибути

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

Лице. Позволява ви да промените шрифта на текста. Можете да изброите няколко опции чрез запетая (Tahoma, Verdana). Ако потребителят няма инсталиран първият шрифт, системата просто използва алтернатива.

Размер. За да увеличите или намалите текста, въведете стойност от 1 до 7. в кавички.

Цвят, В зависимост от дизайна можете да изберете един от стандартните нюанси (червен, зелен, син) или да въведете всеки цветен код, който изберете.

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

Типове подбор на текст

Монохромен текст е труден дори в параграфите по абзац. За да се привлече вниманието и да се повиши интереса на читателя, препоръчително е да се подчертаят графичните точки. Ето някои команди, които ще ви помогнат да се справите с тази задача. . Изключително популярен HTML таг. Смелият текст веднага хваща окото и затова с негова помощ е удобно да се подчертаят важни тези и факти. Мнозина объркват етикетите и. Визуално няма разлика, но те работят по различен начин. Първият просто променя външния вид на текста, а вторият изпълнява функцията на "показалеца" и подчертава най-важните фрагменти (тематични ключови думи и фрази за SEO). , Елегантният и строг курсив е идеален за проектиране на научни термини, чужди думи и различни цитати. В сериозните издания имената на произведения на изкуството също се отличават с наклонения текст. , Очевидно толкова много спорове не предизвикват никакви HTML тагове. Подчертаването на текста се използва рядко, тъй като този метод на разпределение исторически утвърждава хипервръзки. Ако използвате статии, имайте предвид, че това е подходящо само за къси фрагменти - не повече от 1 ред. , Интересен етикет, който ви позволява да направите част от текста зачертана. Много уместни в рекламата - например, да се подчертаеконтраста между старите и новите цени. , Най-лесният начин да увеличите размера на шрифта без допълнителни параметри. , Работи на същия принцип като предишния. Вътрешният текст намалява спрямо основния. , Правилното име за такъв формат е горният индекс. По принцип, този етикет е предназначен за математически стъпки и бележки под линия. Той намалява размера на шрифта и премества маркирания текст нагоре. , По-ниският индекс често се среща в различни формули. Избраният фрагмент се намира под основния текст.

Полуконтейнери

Тъй като някои от блоковете са намерени в много текстове, те започват да създават специални етикети за тях. Това опростява форматирането, защото ако всеки тип съдържание има свой собствен набор от стилове, достатъчно е да маркирате част от текста и да посочите каква информация съдържа.. Маркирайте за добавяне на компютърни кодове. Незаменим при програмирането на статии с примери - командите не се изпълняват, а се показват като обикновен текст. . Предназначен е да прави цитати - например ключови извадки от интервю. . Внася част от текста в отделен блок. По подразбиране, маркираният фрагмент има по-голям ляв марж, но в CSS можете да промените размера, стила на шрифта и цвета на текста. . Допълнителен маркер, който съдържа информация за автора, включително връзката.

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

Чрез проста функция може да се посочи логическият край на голяма част. не се отнася за четни маркери. Това означавакойто затваря елемента на формата не е необходим. Използвайки атрибута WIDTH, можете да направите разделител по-кратък, като зададете желания размер в пиксели или като процент от ширината на прозореца. Като се научите как правилно да използвате тагове, за да форматирате текст в HTML, не само ще направите вашите статии лесни за четене, но и ще увеличите ефективността на SEO.