Правете разлика между универсални и неуниверсални атрибути. Универсалните са подходящи за почти всякакви етикети, докато неуниверсалните са подходящи за един или повече, но не за всички...

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

Текст

Какво следва от този пример? Отворихме параграф и вътре в тага поставихме атрибута align, който отговаря за подравняването на текста. След това поставяме знака "=", което означава, че присвояваме стойност на този атрибут. По-нататък в кавички записваме тази стойност. В този случай това е "център". Това означава, че текстът в този (и само този!) параграф ще бъде центриран. Опитайте сами.

Но не забравяйте да разгледате сайта. html книга. Определено ще намерите това, което отговаря на какво. Това е само настолен справочник за всеки уеб разработчик и още повече за начинаещ.

Подравнете

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

,...,

), в параграфи (

), снимки , блоков елемент (

).

Възможни стойности на атрибута:

• ляво - ляво подравняване (по подразбиране)
• дясно - дясно подравняване
• център - централно подравняване
• justify - подравняване по цялата ширина

Опитайте се да практикувате и вижте как ще се промени позицията на вашите елементи.

Заглавие

Познато име, нали? Наистина ли. Има такъв етикет и ние го поставяме между И . Но сега говоря за атрибута, а той пасва на почти всеки етикет, тъй като е универсален. И вие се нуждаете от него като подсказка при зависване. И най-важното е, че вие ​​сами напишете този намек. Изглежда нещо подобно:

Колко е 5-3?

Какво виждаме тук? В началото отваряме параграфа, след което предписваме самия атрибут и му даваме стойността „Е, защо си глупав? Ще има 2. След това пишем показания текст и накрая затваряме етикета

.

Какво ще стане след това? Запазете документа и вижте сами. Когато задържите курсора върху текста, трябва да се появи подсказка.

Множество стойности

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

Съдържание

Както можете да видите, тук всичко е доста просто, просто в един етикет трябва да напишете всички атрибути, разделени с интервал. от този примервиждаме, че съдържанието ще бъде подравнено вдясно и когато задържите курсора на мишката върху него, ще изскочи подсказка. Всичко е просто. Надявам се всичко да е ясно?

Е, сега нека се върнем към нашето Лукоморие, което направихме в последния урок.

Жив пример

• Подравнете целия текст в документа с "Lukomorye" в центъра (заедно със заглавията),
• В заглавието на първото ниво поставете подсказката „Авторът на произведението е A.S. Пушкин"

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

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

След това запазваме html документа и го стартираме. Да проверим какво имаме. всичко наред ли е Мисля, че трябва да си добре. Но все пак чувствам, че на много от вас им е писнало да записват атрибути във всяко четиристишие. Ще ви покажа как да улесните този процес.

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

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

По принцип в този случай не можете да поставите атрибута align="center" на всеки таг. Просто трябва да поставите

пред заглавката и го затворете с

в края на целия текст. Ами вътре

set align="center" , но само веднъж. Според мен е много по-бързо и удобно и резултатът е същият.

Е, как? Разбирате ли общия принцип? Просто ще продължим да изследваме повече. Основното е, че разбирате самия принцип на маркиране и атрибути. Ако е така, задайте вашите въпроси. Ще се радвам да им отговоря.

Е, за пълноценно обучение по принципа на създаване на сайт, препоръчвам да гледате отличен видео курс " HTML5 и CSS3 от нула до професионалист". Там ще научите HTML, CSS, ще научите как да създавате сайтове за визитки, блогове и дори онлайн магазини. Курсът е просто умрял за начинаещ уеб разработчик.

Е, свърших за днес. Надявам се статията да ви е харесала и да ви е била полезна. Не забравяйте да се абонирате за актуализациите на моя блог, за да сте в крак с най-интересните неща и да не пропускате нови уроци. Е, днес се сбогувам с теб. Желая ви успех в усвояването на материала. Чао чао!

С уважение, Дмитрий Костин.

Браузър	Internet Explorer			Netscape			Опера			сафари	Mozilla	Firefox
Версия	5.5	6.0	7.0	6.0	7.0	8.0	7.0	8.0	9.0	1.0	1.7	1.0	2.0
Поддържа се	да	да	да	да	да	да	да	да	да	да	да	да	да

Описание

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

Синтаксис

Текст

Затварящ етикет

Задължително.

Настроики

цвят Задава цвета на текста. лице Указва лицето на шрифта. размер Указва размера на шрифта в конвенционални единици.

Пример 1: Използване на етикет

ППървата буква на това изречение е в Arial, маркирана в червено и увеличена.

Описание на параметрите на етикета

параметър COLOR

Описание

Задава цвета на текста вътре в контейнера .

Синтаксис

...

Аргументи

Стойността на цвета може да се зададе по два начина.

1. По името си

Браузърите поддържат някои цветове по име.

2. По шестнадесетична стойност

За определяне на цветове се използват шестнадесетични числа. Шестнадесетичната система, за разлика от десетичната, се основава, както подсказва името й, на числото 16. Числата ще бъдат следните: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Цифрите от 10 до 15 се заменят с латински букви. Числата, по-големи от 15 в шестнадесетичната система, се образуват чрез комбиниране на две числа в едно. Например числото 255 в десетична система съответства на числото FF в шестнадесетична система. За да избегнете объркване в дефиницията на бройната система, преди шестнадесетично числопоставете хеш символа #, например #666999. Всеки от трите цвята - червен, зелен и син - може да приема стойности от 00 до FF. По този начин обозначението на цвета се разделя на три компонента #rrggbb, като първите два знака означават червения компонент на цвета, двата средни означават зеления, а последните два означават синия.

CSS аналог

Стойност по подразбиране

Цветът по подразбиране на браузъра.

Параметър FACE

Описание

Параметърът face се използва за задаване на шрифта, използван за текста. Могат да бъдат дадени няколко имена на шрифтове, разделени със запетаи. В този случай, ако първият зададен шрифт не бъде намерен, браузърът ще използва следващия в списъка.

Синтаксис

...

Аргументи

Произволен брой имена на шрифтове, разделени със запетаи. Универсални семейства шрифтове:
serif - серифни шрифтове (антични), като Times;
sans-serif - серифни шрифтове (безсерифни или гротескни шрифтове), типичен представител е Arial;
cursive - курсивни шрифтове;
фентъзи - декоративни шрифтове;
monospace - моноширинни шрифтове, ширината на всеки знак в това семейство е една и съща.

CSS аналог

Стойност по подразбиране

Шрифтът по подразбиране в браузъра.

Параметър РАЗМЕР

Описание

Z задава размера на шрифта в условни единици от 1 до 7. Средният размер, използван по подразбиране, е 3. Размерът на шрифта може да бъде зададен или като абсолютна стойност (например size="4" ), или като относителна стойност (например , size="+1" , size="-1" ). В последния случай размерът се променя спрямо основата. Размерът на шрифта се влияе не само от дадения параметър за размер, но и от избора на шрифт. Например шрифтът Arial изглежда по-голям от шрифта Times, а шрифтът Verdana е малко по-голям от шрифта Arial. Имайте предвид тази функция, когато избирате шрифт и неговите размери.

Синтаксис

...

Аргументи

Цяло число от 1 до 7 или променете стойността нагоре или надолу с помощта на символите + и -.

елемент

Сега знаете, че можете да контролирате размера на текста, показван на екрана, с помощта на тагове И . И как програмистът може да промени други параметри на шрифта? За това е директивата. .

Както знаете, размерът на шрифта в стандарта HTML се обозначава с условни точки и има общо седем от тях. Не всички браузъри обаче разбират термина точка по един и същи начин. Например, когато се показва документ в Microsoft Internet Explorer, размерите на всички шрифтове са различни, с изключение на елементи 2 и 3 - те се показват с шрифт с еднаква височина, която е равна на стойността по подразбиране и зависи от потребителя настройки на браузъра. В Netscape Navigator елементи 4 и 5 са ​​абсолютно еднакви, както и b и 7, те са по-големи на височина от елемент 3, което е нормалният размер на шрифта.

ЗАБЕЛЕЖКА Имайте предвид, че някои браузъри, като Microsoft Internet Explorer, ви позволяват да персонализирате текста, показван като част от HTML документи, като промените размера на шрифта, предоставен от интерпретатора по подразбиране на браузъра. Това означава, че параметрите на елемента , както и други тагове, които контролират размера на шрифта, може да варират в зависимост от потребителските настройки. По същата причина е възможен ефектът от нарушаване на оформлението на страница, оптимизирана за гледане в уеб браузър. настройките по подразбиране. Можете да избегнете това, като затворите всички елементи на документа в невидима таблица с фиксирана ширина, зададена в пиксели.

IN общ изгледсинтаксис за въвеждане на тагове както следва:

текст

Стойността на атрибута FACE е името на шрифта, който планирате да използвате за показване на маркиран текст. . Ако например вместо параметъра "стойност!" в дадения пример ще замените "Arial" с етикет , текстът ще се показва с този шрифт.

ВНИМАНИЕ Не забравяйте, че наборът от шрифтове, инсталирани на компютрите на посетителя на вашия сайт, може да е различен и ако посочите в атрибута FACE на маркера шрифт, който не присъства в системата на потребителя, текстът на екрана на монитора на потребителя ще стане нечетлив. За да избегнете грешки при показване на текст в браузъри на крайни потребители, обърнете се само към стандартните шрифтове, включени в повечето браузъри: Arial и New Times Roman. И е по-добре да пропуснете този атрибут напълно, позволявайки на браузъра да замени шрифта, който се използва по подразбиране при интерпретиране на кода.

Атрибутът SIZE показва размера на шрифта, с който трябва да се изведе текстът. Параметърът на този атрибут, обозначен като "стойност2" в нашия пример, може да бъде описан или с абсолютна, или с относителна стойност. Абсолютна стойност означава използване като параметър на цяло число в диапазона от 1 до 6, което показва височината на шрифта в точки. Относителната стойност, обозначена с плюс или минус цяло число (като +2 или -1), е броят точки, които трябва да се добавят или изваждат от размера на шрифта по подразбиране на браузъра. Да, запис показва, че размерът на текста, маркиран с такъв етикет, ще бъде с една точка по-голям от нормалния текст на документа.

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

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

откъс

ПРЕДУПРЕЖДЕНИЕ Имайте предвид, че някои по-стари браузъри не поддържат директивата . Сред тях е текстов браузър за UNIX-съвместими платформи, наречен Lynx.

Съдържание

Изглежда, защо трябва да знаете 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 можете също да промените размера, стила и цвета на текста.

...

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

Демаркационна линия

---

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

---

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

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

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