Етикети за контрол на шрифта в HTML. Основни html тагове Защо са необходими h1-h6 тагове?

Шрифт на страницата

Тагът за размер на шрифта в html е само sub, sup и strong, които по някакъв начин променят размера на буквите. Но html предоставя много малко възможности в това отношение. Имаше, разбира се, етикет за шрифт, но днес той отдавна е остарял. Ако наистина се интересувате как да промените размера на шрифта по-гъвкаво, тогава трябва да се обърнете към силата на CSS.

CSS свойство размер на шрифта

В CSS можете да зададете произволен размер на текста и това може да стане не само в пиксели, но и в други мерни единици. Най-често се задава в пиксели, но може да се направи и по различен начин. Например в проценти. Шрифтът на родителския елемент се приема за 100%.

Например, ако зададем размера на текста в проценти към абзац и той се намира в основния таг, тогава 100% за него ще бъдат равни на размера, посочен за основния текст. Съответно, ако етикет има шрифт, зададен на 12 пиксела, тогава за да зададете размера на абзаца на 24 пиксела, трябва да напишете това:

p(размер на шрифта: 200%)

p(размер на шрифта: 200%)

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

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

селектор (размер на шрифта: по-голям)

селектор (размер на шрифта: по-голям)

Текстът в елемент с желания селектор ще стане по-голям от своя родител. Съществуват HTML тагове за размер, но все още не се препоръчва използването им. Това са големите и малките етикети. Ограждането на текст в тях позволява на буквите да бъдат малко по-големи или по-малки от техния родителски елемент. Но днес е по-добре да използвате css, ако трябва да зададете стойност.

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

Що се отнася до настройката на размерите за други елементи, всичко е същото: за тази цел трябва да използвате css, а не html. По принцип можете да задавате атрибути като ширина и височина в таг, но това е неудобно. И най-важното, не отговаря на стандартите, които определят, че външният вид и структурата трябва да бъдат отделени един от друг, поставени в отделни файлове.

Поради тази причина е обичайно да се използват ширината и височината на CSS свойствата, за да се определи ширината и височината на даден елемент.

img (ширина: 50px; височина: 50px)

< img width = "50" height = "50" > < ! -- такненужнопрописыватьширинуивысотудляэлемента-- >

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

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

483
За да изглежда сайтът като вашия дизайн, ще трябва да промените размера на текста или размера на HTML изображенията. За да направите това, вероятно ще потърсите етикета " размер”, но скоро ще разберете, че в хипертекста няма такова нещо.

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

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

Размери на шрифта

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

За да получите абзац с шрифт 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.

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

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

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


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

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

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

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

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

Списък с html тагове

1. HTML таг (за параграфи)

- показва текстов абзац (позволява стил, клас, id атрибути). Най-често срещаният таг, тъй като в него най-често се поставя текст (все пак за това е създаден).

Например html код:

Текст номер едно

И това е друг параграф

Текст номер едно

И това е друг параграф

Можете също да добавите стилов параметър към етикета:

Тези различни стойности могат да се използват за редактиране на външния вид на шрифта. Можете да прочетете за тези параметри в отделен урок: стилове в html и свойството на шрифта css.

Можете също така да посочите атрибутите CLASS и ID. Например:

2. HTML таг И(маркирани с удебелен шрифт)

И - два етикета, които ви позволяват да направите шрифта удебелен. Няма разлика между тези етикети.

Нека дадем пример. HTML код:

миниатюра

Преобразува в следното на страницата:

миниатюра

Можете също така да посочите атрибутите CLASS и ID (както в случая с Note

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

3. HTML таг (създайте курсив)

- наклонен шрифт (позволява стил, клас, id параметри)

Например html код:

наклонен текст

Преобразува в следното на страницата:

4. HTML таг (подчертан текст)

- подчертан шрифт (позволява стил, клас, id параметри)

Например html код:

подчертан текст

Преобразува в следното на страницата:

подчертан текст

5. HTML таг (създаване на хипервръзка)

Създава връзка на страницата (позволява стил, клас и други параметри).

Например html код:

текст на връзката

Преобразува в следното на страницата:

Всички параметри и атрибути на етикета ще бъдат разгледани в отделен урок: html таг.

6. HTML таг

(заглавия в съдържанието)

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

Например html код:

Заглавие h1

Етикет

използва се за заглавието на страницата (както и заглавието)

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

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

7. HTML таг
(подравняване)

- подравнява съдържанието в центъра.

Например html код:

Този текст ще бъде в центъра

Преобразува в следното на страницата:

Този текст ще бъде в центъра

Забележка
  • - за текст
  • ...
    - за всичко (например изображение)

8. HTML таг (междуредов текст)

- показва долен шрифт.

Например html код:

Обикновен текст, междуредов текст

Преобразува в следното на страницата:

Обикновен текст, междуредов текст

9. HTML таг (горен индекс)

- показва горен индекс.

Например html код:

Обикновен текст, горен индекс

Преобразува в следното на страницата:

Обикновен текст, горен индекс

10. HTML таг ,

, - показва шрифт с един пиксел по-голям/по-малък от текущия размер (позволено от параметъра style, class, id).

Например html код:

Обикновен шрифт, този шрифт е с един пиксел по-голям

Преобразува в следното на страницата:

Обикновен шрифт, този шрифт е с един пиксел по-голям

11. HTML таг
    (създаване на списъци)

Извежда списък (приема стил, клас, id параметри). Всеки нов елемент се записва между

  • И
  • .

    Например html код:

    списък:
    • първият елемент от списъка
    • вторият елемент от списъка

    Преобразува в следното на страницата:

    списък:

    • първият елемент от списъка
    • вторият елемент от списъка

    12. HTML таг (създаване на таблици)

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

    Например html код:

    1-ред 1 елемент1-ви ред 2-ри елемент
    2-редов 1 елемент2-редов 2 елемент

    Преобразува в следното на страницата:

    Всички възможности за тагове

    13. HTML таг
    (нов ред)


    - преходът към следващия ред е един таг.

    Например html код:

    Ред 1
    2-редов
    3-редов И този текст ще бъде на 3-ти ред, тъй като нямаше преход

    Преобразува в следното на страницата:

    1-ред
    2-редов
    3-ти ред И този текст ще бъде на 3-ти ред, тъй като нямаше преход

    14. HTML таг
    (хоризонтална линия)


    - чертае линия, представлява един таг (позволява стил, клас параметър).

    Например html код:

    Малко текст над реда
    И този текст вече ще бъде под чертата

    Преобразува в следното на страницата:

    Малко текст над реда и този текст ще бъде под реда

    15. HTML таг (изход на картина)

    Например html код:

    http://img-fotki.yandex.ru/get/5821/27743399.2b/0_8875d_14383ca6_M.jpg">

    Преобразува в следното на страницата:

    Всички възможности за тагове ще бъдат разгледани в отделен урок: .

    16. HTML таг (форматиране на текст)

    - за форматиране на текст, промяна на стил и др. (позволява параметър стил, клас, id). Тежестта му в очите на търсачките липсва, така че можете да го използвате колкото искате.

    Например html код:

    Този текст е зелен и размерът му е 15 пиксела

    Преобразува в следното на страницата:

    Забележка

    Подобен етикет е.

    17. HTML таг
    (създаване на формуляр)

    - създаване на формуляр на страницата (позволява стил, клас параметър).

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

    18. HTML таг
    (създаване на блокове)

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



     

    Може да е полезно да прочетете: