За да получите абзац с шрифт 12pt, трябва да зададете свойството му font-size:

h3 (размер на шрифта: 24px; )

Това ще промени размера на заглавията от трето ниво на 24 пиксела. Можете да добавите това свойство към външен лист със стилове и всички заглавки ще използват тази стойност< h3>.

За да приложите допълнителни типографски стилове към вашия текст, добавете следните CSS правила:

h3 ( размер на шрифта: 24px; цвят: #000; тегло на шрифта: нормално; )

Това не само ще зададе размера на шрифта за заглавията от трето ниво, но и ще направи текста черен ( Какво означава шестнадесетичен код #000?), и също ще зададе стила на " нормално" По подразбиране браузърите показват заглавия h1-h6 като получер текст. Този стил ще замени стандартния и ще направи шрифта неудебелен.

Размери на изображенията

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

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

За да оразмерите изображение в HTML, използвайте етикета с атрибути за височина и ширина.

Например изображението трябва да е 400 на 400 пиксела:

височина="400" ширина="400" alt="изображение" />!}

За да зададете размери на изображението в CSS, използвайте свойствата за височина и ширина. Ето същото изображение, използващо CSS за оразмеряване:

style="height:400px; width:400px;" alt="изображение" />!}

Размери на основните блокове на страницата

Най-често ширината се задава за основните блокове на страницата. Първо трябва да вземете решение за вида на дизайна: статичен или адаптивен. Трябва да решите дали искате да посочите ширината в абсолютни мерни единици - пиксели, инчове, точки? Или размерът на блоковете трябва да бъде адаптивен и ems или проценти трябва да се използват за определяне на размерите? За да зададете размерите на основните блокове, както в случая на HTML изображения, за да паснат на прозореца, трябва да използвате CSS свойствата височина и ширина.

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

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

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

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

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

Моля, имайте предвид, че не всички тагове са сдвоени. Например,
(прескачане на ред) или

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

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

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

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

Параграфи

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

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

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

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

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

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

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

HTML използва шест нива на подзаглавия – от

преди

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

• ...

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

  . По правило той съдържа основната ключова дума.

• ...

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

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

• ...

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

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

• ,

  ,

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

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

или

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

).

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

Списъци

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

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

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

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

Изборът и неговите характеристики

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

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

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

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

Начини за подчертаване на текст

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

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

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

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

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

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

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

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

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

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

Смислени контейнери

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

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

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

. Поставя част от текста в отделен блок. По подразбиране селекцията има повече лява подложка, но можете също да промените размера, стила на шрифта и цвета на текста в CSS.