Великий шрифт html. Форматування тексту HTML-сторінки (ч.2). з назвами різних моделей

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

Тег розміру шрифту в html - це хіба sub, sup і strong, які так чи інакше змінюють розмір букв. Але html у цьому плані дає дуже малі можливості. Був, звичайно, тег font, але сьогодні він давно вже застарів. Якщо вам дійсно цікаво, як гнучкіше змінювати розмір шрифту, потрібно звернутися до можливостей CSS.

CSS властивість font-size

У CSS можна задати будь-яку величину тексту і це можна зробити не тільки в пікселях, але і в інших одиницях виміру. Найчастіше її задають у пікселях, але можна і по-іншому. Наприклад, у відсотках. За 100% береться шрифт батьківського елемента.

Наприклад, якщо ми задаємо величину тексту у відсотках якомусь абзацу і він лежить у тезі body, то для нього 100% дорівнюватиме розміру, заданому для body. Відповідно, якщо у тега заданий шрифт 12 пікселів, то щоб задати абзацу розмір 24 ​​пікселя, потрібно написати так:

p(font-size: 200%)

Це якщо використати відсотки. Ще одна відома відносна величина – em або висота шрифту у батьківського елемента. Прописування відносних величин краще тим, що при зміні розміру тексту все зміниться пропорційно і добре відображатиметься.

Також регулювати величину можна за допомогою ключових слів larger та smaller, які встановлюють відповідно більший чи менший розмір тексту, ніж у батьківського елемента.

selector(font-size: larger)

Текст в елементі з потрібним селектором стане більшим, ніж у батька. Html тегирозміру існують, але використовувати їх все ж таки не рекомендується. Це теги big та small. Висновок тексту дозволяє трохи збільшити або зменшити розмір літер порівняно з батьківським елементом. Але сьогодні краще використовувати CSS, якщо вам треба задати величину.

Розмір основних елементів на веб-сторінці

Щодо завдання розмірів для інших елементів все також: потрібно використовувати для цього css, а не html. Взагалі, у тегу можна задати такі атрибути, як width і height, але робити це незручно. А найголовніше – це не відповідає стандартам, які визначають, що зовнішній вигляді структуру потрібно відокремлювати один від одного, виносячи окремі файли.

Тому для визначення ширини і висоти елемента прийнято використовувати css-властивості width і height.

img( width: 50px; height: 50px )

Насамперед хочу трохи відволіктися від теми і поговорити про свої приклади кодів, наприклад у попередньому розділі я ніде не зобразив повного коду сторінки, а показував тільки так:

• HTML
• CSS
  • Вступ
  • типи документів
  • типи стилів
• PHP

Нині ж повернемося до нашої главі, до виконання всіх цих функцій перелічених у назві служить тег-контейнер

Тепер повернемось до нашої теми.

Для того щоб змінити розмір, шрифт або колір тексту окремої ділянки в HTML існує тег-контейнер окремий шматок тексту

Почнемо по порядку і навчимося змінювати колір тексту окремої ділянки, для цієї мети в тег FONTпотрібно помістити атрибут COLORось так:

color="red"> окремий шматок текстуЗначення атрибуту colorтакі ж як і для атрибутів bgcolor text тега body, тобто ми можемо їх задавати словами англійською (Black, Green, Silver, Lime, Gray, Olive, White, Yellow, Maroon, Navy, Red, Blue, Purple, Teal , Fuchsia, Aqua) або номерами кольору в RGB (#000000- #FFFFFF)

face="Tahoma"> окремий шматок текстуШрифти служать для того щоб текст мав більш неординарний вигляд, але є одна проблема, шрифтів які є у вас (подивитися їх можна в C:WINDOWSFonts) може не виявитися у ваших відвідувачів, друга проблема шрифтів що деякі шрифти можна використовувати тільки до кирилиці (російськими буквами) або навпаки тільки з латиницею(англійськими буквами), є звичайно і третій тип який підходить і до латиниці та кирилиці. У нижньому списку я покажу які шрифти є стандартними і є на всіх комп'ютерах і підходять до будь-яких літер:

• Arial
• Cosmic Sans
• Courier
• Garamond
• Helvetica
• Verdana
• Tahoma
• Times
• Times New Roman

А тепер перейдемо до розмірів, змінити розмір тексту в HTML можна за допомогою двох тегів fontта/або BASEFONT.
Почнемо з BASEFONT, цей тег служить для зміни базового кольору, шрифту та розміру тексту, наприклад:
....текст....
Цей тег перестав бути контейнером, тобто. зворотного тега немає. Колір та шрифт тексту задається як у тезі FONT, а для зміни розміру тексту використовується атрибут SIZEзі значенням від 1 до 7. Цей тег можна використовувати в тексті кілька разів: size="4">....текст....
size="6">....текст....
size="3">....текст....
За промовчанням розмір тексту = "3", цей розмір не можна задавати. У першому прикладі ми звістку текст збільшили на одиницю, у другій лінії ми його збільшили до "6", а в третій ми знову його повернули до тексту за замовчуванням.
Тепер хочу вас круто засмутити, цей тег був введений у версії HTML-4.01, і відповідно підтримується у браузері лише Інтернет Експлорер, решта браузерів його просто ігнорують, Так що краще цей тег не використовувати взагалі!!!
А користуватися лише тегом FONT з атрибутом SIZEвін підтримується багатьма браузерами. Атрибут SIZEтак само приймає значення від 1 до 7, але ці розміри можуть задаватися і від "-2" до "+4"
текст
текст
текст
текст
текст
текст
текст
Тег FONT як і BASEFONT може містити кілька атрибутів:
size="5" color="red" fase="Tahoma, Times, Verdana">.... текст....

Здавалося б, навіщо знати HTML-теги для тексту, якщо зараз майже в будь-якій адмінці є зручний який виставляє їх автоматично?

Справа в тому, що форматування контенту на сайті докорінно відрізняється від роботи в офісних додатках. Тут недостатньо просто надати тексту привабливого вигляду, адже від правильного оформлення залежить не тільки відображення веб-сторінки, а й її просування в пошукових системах.

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

Будь-який текст має прихований код, який "пояснює" комп'ютеру, що і як потрібно відобразити на екрані. Уся інформація записується за допомогою набору універсальних елементів.

По суті, HTML-теги для тексту - це команди, які додають на сторінку певні блоки або змінюють їхній зовнішній вигляд. Правильний формат запису виглядає так:

Зауважте, що не всі теги є парними. Наприклад,
(пропуск рядка) або

Чому не можна копіювати статті з Word та інших програм у редактор сайту

Хоча сучасні офісні програми використовують ті ж HTML-теги для тексту, у 99% випадків рідний код непридатний для веб-сторінок. Навіть якщо в самому додатку документ відображається нормально, при вставці на сайт форматування може збитися. Крім того, через велику кількість зайвих тегів та атрибутів пошукові системи не можуть адекватно проаналізувати вміст сторінки. Що, у свою чергу, ускладнює просування вашого ресурсу.

Щоб отримати чистий та релевантний код, спочатку потрібно очистити текст від HTML-тегів, створених звичайним редактором. Є кілька способів зробити це:

1. "Прогнати" статтю через "Блокнот" і лише після цього вставити на сайт. Програма стирає весь HTML, так що після цього доведеться форматувати текст заново (за допомогою інструментів редактора або вручну).
2. Писати та публікувати статті через LiveWriter. Популярний редактор блогів одразу генерує правильний код. А в окремій вкладці можна переглянути, як виглядатиме текст на сайті.
3. Використовувати HTML Cleaner. Цей онлайн-сервіс знищує не весь код повністю, а лише зайві фрагменти. За допомогою фільтрів ви вибираєте теги, які потрібно зберегти. Тут є потужний візуальний редактор для форматування, який додає в код вже оптимізовані команди.

Абзаци

Цей елемент є практично у всіх статтях. Кожен абзац повинен розташовуватись усередині такого контейнера – це спрощує форматування та дозволяє зберегти єдиний стиль на всіх сторінках сайту. Для зручності тег

Завжди пишуть із нового рядка.

Вирівнювання

Окремий HTML-тег "Вирівнювання тексту" вже давно не використовується. Натомість було створено універсальний атрибут ALIGN. Щоб змінити положення текстового блоку на сторінці, необхідно вибрати одне з трьох значень CENTER, RIGHT або LEFT. Так само можна задати вирівнювання для інших елементів - наприклад, заголовків.

У деяких ситуаціях для вирівнювання використовують інші теги, наприклад, можна розташувати за допомогою елемента

Заголовки та підзаголовки

Система підзаголовків дозволяє створити логічну структуру контенту. Коли текст розбитий на смислові блоки, читачеві набагато простіше сконцентруватися та засвоїти нову інформацію. Пошуковики також аналізують заголовки, щоб зрозуміти, за якими запитами просувати сторінку. Саме тому фахівці SEO рекомендують використовувати в них тематичні ключі.

У HTML використовуються шість рівнів підзаголовків - від

до

. У цій системі існує чітка ієрархія:

• ...

  . (основної статті, товару в інтернет-магазині тощо). У тексті може бути лише один

  . Як правило, він містить головний ключовик.

• ...

  . Підзаголовки другого рівня розбивають текст на смислові блоки. Наприклад, якщо ви складаєте рейтинг ноутбуків, можна зробити декілька

  із назвами різних моделей.

• ...

  . Третій рівень потрібен у випадку, якщо текст між двома

  також розбивається на невеликі блоки. У нашому прикладі це можуть бути критерії оцінки - "Продуктивність", "Пам'ять", "Відеокарту" тощо для кожної моделі.

• ,

  ,

  . Насправді зустрічаються вкрай рідко. Але загальний принцип той самий — вони мають бути вкладені в блок із підзаголовком вищого рівня.

Слідкуйте за збереженням правильної ієрархії. Повертаючись до нашого прикладу, це означає, що не можна відразу вписувати назви моделей як

або

. А тим більше використовувати для однорідних за змістом блоків підзаголовки різних рівнів (припустимо, виділити ноутбук, який посів останнє місце в рейтингу, за допомогою

).

А ось схема, яка допоможе моментально зрозуміти та запам'ятати правильну структуру заголовків у HTML.

Списки

Будь-які переліки та інструкції краще оформляти у вигляді списків, використовуючи спеціальні HTML-теги для тексту (типова помилка — кілька абзаців

Які починаються з дефісу чи цифри).

Структура таких блоків дуже проста. Спочатку визначаємо тип списку - маркований або нумерований.

Всі елементи знаходяться між тегами, що відкривають і закривають. Кожен пункт списку починається з нового рядка і має формат. Кількість елементів не обмежена.

Вибір та його атрибути

Що можна змінити, використовуючи цей його шрифт і колір, причому без додавання нових класів до CSS. Це дуже зручно, коли потрібно виділити лише одну пропозицію чи фрагмент.

має кілька атрибутів:

• Face. Дозволяє змінювати текст шрифту. Можна перерахувати кілька варіантів через кому (Tahoma, Verdana). Якщо користувач не має першого шрифту, система просто використовує альтернативу.
• Size. Щоб збільшити або зменшити текст, вкажіть значення від 1 до 7 у лапках.
• Color. Залежно від дизайну можна вибрати один із стандартних відтінків (red, green, blue) або ввести код будь-якого кольору на вибір.

Не використовуйте абзаци, відформатовані за допомогою замість підзаголовків. Краще встановити ті ж параметри оформлення правильним тегом.

Способи виділення тексту

Одноманітний текст стомлює, навіть із розбивкою за абзацами. Щоб привернути увагу та підігріти інтерес читача, ключові моменти рекомендується виділяти графічно. Ось кілька команд, які допоможуть впоратися із цим завданням.

... . Надзвичайно популярний HTML-тег. Жирний текст відразу впадає у вічі, а тому з його допомогою зручно виділяти важливі тези та факти.

Багато хто плутає теги і . Візуально різниці немає, але вони працюють по-різному. Перший просто змінює зовнішній вигляд тексту, а другий виконує функцію покажчика і виділяє найважливіші фрагменти (тематичні ключові словата фрази для SEO).

... . Витончений та строгий курсив ідеально підходить для оформлення наукових термінів, іноземних слів та різноманітних цитат. У серйозних виданнях похилим текстом також вирізняють назви творів мистецтва.

... . Мабуть, стільки суперечок не викликав жоден HTML-тег. Підкреслення тексту використовується рідко, оскільки даний спосібвиділення історично закріпилося за гіперпосиланнями. Якщо ж ви використовуєте у статтях, врахуйте, що це підходить лише для коротких фрагментів – не більше 1 рядка.

... . Цікавий тег, який дозволяє зробити частину Дуже актуальний у рекламі, наприклад, щоб підкреслити контраст між старою і новою цінами.

... . Найпростіший спосіб збільшити розмір шрифту без будь-яких додаткових параметрів.

... . Працює за тим же принципом, що попередній тег. Текст, розташований усередині, зменшується щодо основного.

^... . Правильна назва такого формату – верхній індекс. В основному цей тег призначений для математичних ступенів та виносок. Він зменшує розмір шрифту та зміщує виділений текст вгору.

_... . Нижній індекс часто зустрічається у різних формулах. Виділений фрагмент міститься нижче основного тексту.

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

Оскільки деякі блоки зустрічалися у багатьох текстах, їм почали створювати спеціальні теги. Це спрощує форматування, адже якщо кожен тип контенту має свій набір стилів, достатньо виділити фрагмент тексту та вказати, яка інформація міститься.

... . Тег для додавання комп'ютерних кодів. Незамінний у статтях з програмування з прикладами команди не виконуються, а відображаються, як звичайний текст.

... . Призначений для оформлення цитат, наприклад, ключових витримок з інтерв'ю.

. Виносить частину тексту окремий блок. За замовчуванням виділений фрагмент має більший відступ ліворуч, однак у CSS також можна змінити розмір, стиль зображення та колір тексту.