Вітаю, Друзі.
Після чергової довгої перерви згадав, що давно вже не писав жодного рядка. Звичайно, на це є свої причини, адже якась причина вигадати собі виправдання завжди знайдеться, правда? Насправді, щодня займаюся ВідеоКурсом, про який вже згадував кілька разів, але поки більше про це нічого говорити не буду, скоро все дізнаєтесь.
Так от, бо на думку нічого не спадало, про що можна написати. Вирішив подивитися статистику, що ж цікавить користувачів Рунету з питань HTML, WordPress, DLE тощо. І знаєте, що? Є ще про що писати. На всі питання, що я знайшов, начебто є відповіді, проте не завжди в зрозумілій формі. Та й взагалі стало цікаво написати щось таке.
Сьогодні поговоримо про HTML. А саме про те, як виділити текст жирним та курсивним зображенням, а також поговоримо про виділення кольором.
Виділення тексту жирним зображенням.
Щоб виділити текст жирним накресленням, не потрібно нічого мудрувати зі стилями CSS або вигадувати ще якісь складності. HTML вже має таку можливість. При цьому ми можемо не просто виділити текст жирним, але й зробити на ньому якийсь акцент за допомогою виділення. Акцент може робитися для пошукових систем або спеціальних браузерів або програм. Головне це не переборщити з акцентуванням тексту в статті або на сторінці з якоюсь інформацією, так як це може згубно позначитися як мінімум на просуванні цієї HTML-сторінки.
Отже, щоб виділити текст жирним, ми можемо скористатися тегом . Цей тег відноситься до елементів фізичної розмітки, при цьому встановлюючи жирне зображення тексту, не роблячи на ньому будь-якого акценту. Цей тег є парним, що говорить про те, що він має, як тег, що відкриває, так і закриває. Крім того, оскільки елемент вбудований, він повинен знаходитися в якомусь блоковому елементі, наприклад
Приклад коду:
жирний текст
Результат:
жирний текст
У цьому випадку ми просто виділили текст жирним зображенням і все.
Але буває, тому нам потрібно не просто виділити текст, а зробити на ньому акцент. Для цього ми можемо використовувати тег логічної розмітки . Мало того, що текст виділений цим тегом має більшу вагу для пошукових систем. Але і за ідеєю він повинен відрізнятись від тега у мовних браузерах, наприклад, інтонацією. Однак не можу ні підтвердити, ні спростувати цю інформацію, чи це так?
У цьому випадку все абсолютно так само, як і у випадку, з простим виділенням жирним, тільки ми робимо акцент, а не просто виділення.
Приклад коду:
Результат:
Все досить просто, чи не так?
Виділення тексту курсивом.
І тут усе складніше, ніж у першому. І ситуація у нас абсолютно та сама. Ми можемо виділити текст двома варіантами HTML. Знову ж таки, використовуючи або тег фізичної розмітки або тег логічної, за допомогою якого ми знову ж таки робимо акцент на виділений текст.
Щоб виділити текст курсивом ми скористаємося тегом . Цей елемент є парним і малим, що говорить нам про те, що ми повинні використовувати, як тег, що відкриває, так і закриває. Також повинні використовувати його всередині блокового елемента. І в даному випадку найбільш підходящий блоковий елемент - тег параграфа
Приклад коду:
текст курсивом
Результат:
текст курсивом
І звичайно ж ми можемо зробити акцент на тексті, одночасно виділивши його курсивом за допомогою тега. . Цей елемент такий самий як , Крім того що виділяється текст курсивом а не жирним.
Приклад коду:
текст, на якому ми зробили акцент
Результат:
текст, на якому ми зробили акцент
І останнє, про що я хотів би сьогодні поговорити, — це виділення тексту кольором.
На жаль тега, виділення тексту кольором в HTML ми маємо. Але все ж таки і в цьому способі немає нічого складного.
Отже, щоб виділити певну частину тексту кольором, ми можемо обернути потрібну частину тексту тегом , що є універсальним тегом, і використовується всередині блокового елемента. У нашому випадку блоковим елементом є тег Але додати недостатньо. Також необхідно вказати параметр style, що дозволить додати CSS властивості необхідному тексту, вказати саму властивість (color), яке допоможе задати певний колір. І нарешті, вказати значення для якості color. Але може виникнути питання: Що вказувати-то? Вказати необхідно HTML-код того кольору, в який ми хочемо «пофарбувати» текст. HTML-коди кольорів можна знайти. Тепер щоб було зрозуміліше розглянемо приклад. Приклад коду.
текст, який потрібно виділити кольором
І тут виділяємо одне слово: кольором. Також хочу зазначити, що тег є парним, і ми маємо його закрити там, де властивість має закінчитися.
Результат:
текст, який потрібно виділити кольором
Такими способами ми можемо маніпулювати текстом на нашій сторінці. Хочу також відзначити, що все те, про що ми щойно говорили, працює і на WordPress і на DLE, бо будь-який движок для виведення сторінок використовує HTML. Саме тому HTML можна назвати основою основ будь-якого сайту, не важливо яка у Вас CMS.
Сподіваюся, я пояснив усе зрозуміло.
Удачі, Друзі. Скоро… Будуть цікаві новини…
Тег у HTML використовується виділення фрагмента тексту курсивом.
HTML тег відноситься до тегів фізичного форматування. Зміна зображення шрифту за допомогою тега носить стилістичний характер.
Зробити HTML текст курсивом можна також за допомогою тега. При цьому текст буде вважатися виділеним логічно (за змістом), "підкресленим".
Специфікація HTML5 рекомендує віддавати пріоритет тегам логічного форматування: важливі фрагменти тексту - тег, акцентування уваги - тег, підзаголовки - теги, підсвічування тексту - тег. Виділяти текст курсивом за допомогою тега слід лише якщо характер виділення відповідає жодному тегу логічного форматування.
Усі види виділення тексту описані у статті: .
Синтаксис
текст виділений курсивомВідображення у браузері
Приклад використання у HTML коді
Простий текст може бути розташований на будь-якому сайті. А ось текст виділений курсивом (
Зараз ми з вами візьмемося до вивчення основних тегів. Почнемо з того, які теги обов'язкові на сторінці, формуючи її структуру.
Блок. Структура найпростішої сторінки
Сторінка сайту – це звичайний текстовий файл з розширенням .html. Всередині цього файлу зберігається текст HTML сторінки разом з тегами. Цей файл обов'язково повинен мати такі теги: тег , який повинен містити в собі текст всього сайту (все, що написано поза цим тегом, браузером буде проігноровано), а всередині нього мають бути ще два теги: тег
для службового вмісту сторінки та тег - для основного тексту, який видно на екрані браузера.У службовий вміст, що розташовується всередині тега
, входить багато різних речей, але поки що нам потрібні тільки дві з них. Це тегЯк виглядає цей приклад у браузері дивіться за цим посиланням.
Думаю, після того, як ви прочитали про основну структуру сторінки, у вас, як і раніше, залишається деяке непорозуміння, як все це виглядає на практиці. Тому я зняв спеціальне відео, в якому покажу вам, як зробити вашу першу сторінку і запустити її в браузері (в ньому я також розповім про title сторінки, про кодування, про оформлення коду). Подивіться його і потім переходьте до подальшого читання:
А тепер, навчившись створювати найпростіші сторінки, ми перейдемо до вивчення корисних тегів, які слід використовувати всередині тега
. Це будуть теги для абзаців, заголовків, списків, посилань та інших корисних речей. Отже, почнемо.Блок. Абзаци
Одним з основних елементів сторінки є абзаци. Їх можна порівняти з абзацами у книзі – кожен абзац починається з нового рядка і має так званий червоний рядок (це коли перший рядок тексту абзацу трохи відступає праворуч). За замовчуванням червоного рядка немає, але його легко зробити (про це трохи згодом).
Абзац створюється за допомогою тега
Таким чином:
Це абзац.
Це ще один абзац.
І ще один абзац.
Це абзац.
Це ще один абзац.
І ще один абзац.
Блок. Заголовки h1, h2, h3, h4, h5, h6
Крім абзаців, важливе значення на сторінці мають заголовки. Їх також можна порівняти із заголовками з книги - кожен розділ має свій заголовок (назва цього розділу) і розбитий на параграфи, які теж мають свої заголовки. Ну а основний текст сторінки розташовується в абзацах.
Заголовки створюютьсяза допомогою тегів
,
,
,
,
,
. Вони мають різну міру важливості. У заголовку h1слід розташовувати назва всієї HTML сторінки, в h2- назва блоківсторінки, в h3- назва підблоків тощо.
,
,
,
. Вони мають різну міру важливості. У заголовку h1слід розташовувати назва всієї HTML сторінки, в h2- назва блоківсторінки, в h3- назва підблоків тощо.
,
. Вони мають різну міру важливості. У заголовку h1слід розташовувати назва всієї HTML сторінки, в h2- назва блоківсторінки, в h3- назва підблоків тощо.
Всі заголовки за замовчуванням жирні і мають різний розмір (це можна змінити через CSS, але про це пізніше). Дивіться приклад:
Заголовок h1
Заголовок h2
Заголовок h3
Заголовок h4
Заголовок h5
Заголовок h6
Це перший абзац.
Це другий абзац.
Це третій абзац.
Так код буде виглядати у браузері:
Заголовок h1
Заголовок h2
Заголовок h3
Заголовок h4
Заголовок h5
Заголовок h6
Це перший абзац.
Це другий абзац.
Це третій абзац.
Блок. жирний
Ви вже знаєте, що заголовки за замовчуванням жирні. Однак, можна зробити жирним і звичайний текст – достатньо взяти його у тег . Дивіться приклад:
Це звичайний текст, а це жирнийтекст.
Так код буде виглядати у браузері:
Це звичайний текст, а це жирнийтекст.
слід використовувати всередині будь-якого іншого тега, наприклад абзацу. У цьому випадку абзаци створюють загальну структуру сторінки (абзаци та заголовки), а тег bробить жирним окремі шматочки тексту.
Блок. Курсив
Крім жирного можна зробити також і курсивза допомогою тега :
Це звичайний текст, а це курсивнийтекст.
Так код буде виглядати у браузері:
Блок. Списки
Поряд із абзацами та заголовками існує ще один важливий елемент сторінки – це списки. Такі елементи, напевно, знайомі всім користувачам інтернету. Вони є перерахування чогось (список) за пунктами. Біля кожного пункту списку зазвичай стоїть зафарбований гурток (він називається маркерсписку).
Списки створюються за допомогою тега
- , всередині якого обов'язково повинні йти теги
- . Тег ulставить сам список, а в теги liслід класти пункти списку (тобто одному li відповідає один маркер списку). Майте на увазі, що окремо теги li не можна використовувати. Дивіться приклад:
Це заголовок тайтл - Перший пункт списку.
- Другий пункт списку.
- Третій пункт списку.
Так код буде виглядати у браузері:
- Перший пункт списку.
- Другий пункт списку.
- Третій пункт списку.
Списки, створені через тег ul, називаються невпорядкованимисписками. Така назва їм дана тому, що існують ще й упорядкованісписки, які замість маркерів-точок будуть маркери-цифри. Такі списки замість ul мають тег
- , а пункти таких списків також створюються через теги li.
- Перший пункт списку.
- Другий пункт списку.
- Третій пункт списку.
- Перший пункт списку.
- Другий пункт списку.
- Третій пункт списку.
- color – встановлює колір тексту;
- size – розмір шрифту умовних одиницях.
- face – використовується для встановлення сімейства шрифтів тексту, які будуть використані всередині тега . Підтримується відразу кілька значень, перерахованих через кому.
- - Задає в html жирний шрифт. Тег по дії аналогічний до попереднього;
- - Розмір більше встановленого за замовчуванням;
- - Менший розмір шрифту;
- - Похилий текст (курсив). Аналогічний йому тег ;
- - Текст з підкресленням;
- Закреслений;- — відображення тексту лише у нижньому регістрі;
- - У верхньому регістрі.
- У пікселях;
- В абсолютному значенні ( xx-small, x-small, small, medium, large);
- У відсотках;
- У пунктах (pt).
- normal -нормальне написання;
- italic – курсив;
- oblique – шрифт із нахилом вправо;
- inherit – успадковує написання батьківського елемента.
- bold – встановлює жирний шрифт html;
- bolder – жирніша щодо normal;
- lighter –менш насичене щодо normal;
- normal – нормальне написання;
- 100-900 - задається товщина шрифту в числовому еквіваленті.
- caption – для кнопок;
- icon – для іконок;
- menu – меню;
- message-box –для діалогових вікон;
- small-caption – для невеликих елементів керування;
- status-bar – шрифт рядка стану.
Давайте зробимо впорядкований список, використовуючи тег ol:
Це заголовок тайтл Так код буде виглядати у браузері:
Зручність упорядкованих списків у тому, що я можу вставити новий пункт списку в будь-яке місце - і нумерація сама перебудується (тобто мені не доводиться за нею стежити у разі будь-яких змін, як було б у тому випадку, якби я розставляв її вручну) ).
Блок. Посилання
Посиланняє тими елементами, які роблять із інтернету інтернет. Натискаючи посилання, ми можемо переходити з однієї сторінки сайту на другу. Якби їх не було – інтернет був би просто набором сторінок, що ніяк не пов'язані один з одним.
Це заголовок тайтл Посилання на веб-сайт phphtml.net.Так код буде виглядати у браузері:
Посилання бувають абсолютніі відносніКрім того, вони можуть вести як на ваш сайт, так і на чужий. Ці складні моменти краще показувати, а не описувати текстом, тому я зняв вам наступне відео. Подивіться його і потім переходьте до подальшого читання:
Блок. Картинки
Давайте тепер розберемося з тим, як розмістити зображенняна сторінці вашого сайту. Для цього призначено тег
, що має обов'язковий атрибут src, в якому зберігається шлях до файлу зображення.
Як це працює, подивимося на наступному прикладі:
Це заголовок тайтл 
Так код буде виглядати у браузері:
Зверніть увагу на те, що тег
не вимагає тега, що закриває.
Блок. Посилання у вигляді картинок
Посиланнямможе бути не лише текст, а й малюнок- для цього достатньо тег
вкласти в тег Як це зроблено в наступному прикладі. Натисніть на картинку - і ви перейдете за посиланням на сайт phphtml.net (щоб потім повернутися назад на книжку - натисніть кнопку "назад" у браузері):
Це заголовок тайтл
Так код буде виглядати у браузері:
Блок. Розрив рядка
Згадайте, що буде, якщо зробити, наприклад, два абзаци поруч - у цьому випадку текст, який лежить у кожному з них, починатиметься новоюрядки.
Давайте переконаємось у цьому на наступному прикладі:
Це заголовок тайтл Це перший абзац.
Це другий абзац.
Так код буде виглядати у браузері:
Це перший абзац.
Це другий абзац.
Бувають, однак, ситуації, коли ми хотіли б, щоб ми мали один абзац, але деякий текст у ньому починався з нового рядка. Навіщо таке може знадобиться? Наприклад, я хочу набрати вірш, але не хочу розбивати кожен його рядок в окремий абзац, оскільки це було б не дуже логічно.
Щоб зробити таке, у тому місці, де має бути розрив рядка, слід написати тег
. Зверніть увагу, що цей тег особливий і не має закриває.Давайте подивимося на його роботу на наступному прикладі:
Це заголовок тайтл Це перший рядок тексту,
а це друга.Так код буде виглядати у браузері:
Це перший рядок тексту,
а це друга.Блок. Коментарі HTML
Практично у всіх мовах програмування є таке поняття як "коментарі".
Щоб наша WEB сторінка виглядала більш презентабельно, розділимо текст на абзаци і виділимо заголовок. HTML має 6 рівнів заголовків розділів документа, пронумерованих цифрами від 1 до 6. Назва оголошуються парою тегів з номерами, належними рівню, наприклад,
- заголовок розділу першого рівня, а - Заголовок розділу шостого рівня. Від простого тексту назви відрізняються розміром і шириною букв. Заголовок першого рівня h1 відображається зазвичай дуже великим шрифтом, тоді як заголовок шостого рівня h6 - дуже маленьким.Назва
Не слід плутати заголовки розділів документа з розглянутим раніше заголовком документа, що визначається елементом
.Як заголовок тексту використовуємо першу пропозицію - Для цього досить обмежити його тегами
і
.Вставте текст файлу other.html теги
і
так, щоб вони обмежували першу пропозицію тексту, і цей шматок коду прийняв такий вигляд:Ласкаво просимо до сторінки компанії SD!
Переглянемо отриманий результат.
Збережіть файл, вибравши команду меню програми Блокнот (Notepad) Файл - Зберегти (File - Save).
Операцію збереження потрібно завжди робити перед переглядом документа, тому що відкриває файл для перегляду, завантажуючи його в оперативну пам'ять комп'ютера з диска. Якщо після редагування коду HTML ви не збережете файл, жодних конфігурацій у браузері не побачите.
Відновіть вікно браузера, натиснувши кнопку на панелі завдань (Taskbar).
Натисніть кнопку F5 або кнопку Оновити (Refresh) на панелі інструментів робочого вікна програми. Файл other.html буде перезавантажено, і ви побачите у вікні браузера, як виглядає заголовок першого рівня.
Перегляньте, як будуть виглядати назви інших 5 рівнів, змінюючи в тегах номери: h2, h3 і так далі Після кожного конфігурації не забувайте зберігати файл і оновлювати зображення у вікні браузера.
Коли ви закінчите досліди, знову відновіть у файлі other.html теги
.Використовуючи 6 рівнів заголовків, які надає у ваше розпорядження мову HTML, можна зробити документ, що просто читається, з інтуїтивно ясною структурою. Пам'ятайте, що ваш документ завжди буде читатися значно краще, якщо в ньому буде точний поділ на розділи та підрозділи.
Вирівнювання заголовків
За замовчуванням заголовок вирівнюється по лівому краю сторінки. Але його можна також вирівняти праворуч або центрувати. Для правобічного вирівнювання у тезі
Використовується атрибут align="right", а центрування - align="center". Допускається також очевидна вказівка лівостороннього вирівнювання - align = left.
Додати в тег
атрибут align="center", щоб центрувати заголовок. Цей елемент повинен набути наступного вигляду:
Ласкаво просимо до сторінки компанії SD!
Надалі ми не будемо нагадувати вам про необхідність перед переглядом зберігати файл з початковим кодом і оновлювати зображення в браузері.
Як у HTML зробити текст виділеним (жирним)
Тепер займемося іншим текстом. Збільшимо його розмір та оформимо текст напівжирним курсивним зображенням. Для установки напівжирного зображення використовуються парні теги .
Вставте у файлі other.html відкриваючий і закриваєтеги так, щоб вони обмежили текст Тут ви дізнаєтеся ... Цей елемент повинен прийняти такий вигляд:
Як у HTML зробити текст курсивом
Курсивне накреслення встановлюється за допомогою тегів .
Вставте в початковий код HTML тег ітак, щоб відредагований елемент набув наступного вигляду:
Тут Ви дізнаєтесь про нашу діяльність, про програмні продукти нашої компанії та обладнання, яке ми виробляємо
Елементи розмітки можуть бути вкладеними, як у цій структурі, де елемент …вкладено в елемент …. Сучасні браузери здатні чітко обробляти вкладені теги. Тому вам необхідно стежити за тим, щоб не порушувався порядок вкладення. Робота браузера виявиться складною, якщо вкладеність буде порушена. Наприклад, такий запис буде неправильним: …. Дотримання вкладеності - дуже важлива частина загальної культури написання HTML коду.
Як у HTML зробити текст підкресленим
За допомогою пари тегів можна встановити накреслення текстового шматка, обмеженого даними тегами, а за допомогою пари тегів - Показати текст телетайпним шрифтом.
З недавніх пір тег спрощено і підкреслення робиться за допомогою стилів. еквівалент . Так новий аналог виглядає більш громіздким, але на жаль це вірніше. Головне на цю користь говорить, що громіздкий варіант є кроссбраузерним, тобто підходить для всіх браузерів, коли як підтримують далеко не всі браузери.
Як у HTML збільшити текст
Наразі збільшимо розмір шрифту тексту. Це можна зробити різними способами.
Теги збільшують обсяг шрифту тексту, укладеного з-поміж них.
Додайте в початок і кінець вищезгаданого шматка коду відповідно до теги ітак, щоб елемент прийняв такий вигляд:
Тут Ви дізнаєтесь про нашу діяльність, про програмні продукти нашої компанії та обладнання, яке ми виробляємо
За допомогою тегів Ви можете зменшити розмір шрифту тексту в порівнянні з початковим.
Інший метод вказівки розміру шрифту – за допомогою тегів з атрибутом size. Як значення цього атрибута використовуються цілі числа від 1 до 7. У цьому значення 1 відповідає найменшому розміру шрифту, а значення 7 - максимальному.
Використовуючи замість тегів теги виду , перегляньте як змінюється розмір тексту шрифту при різних значеннях атрибута size - від 1 до 7.
Як значення атрибута size можна використовувати числа від 1 до 7 зі знаком + (плюс) чи - (мінус). У разі розмір шрифту відповідно збільшується чи зменшується, проти початковим, наприклад, теги збільшать обсяг шрифту, в порівнянні з поточним, на один рівень. Перевірте.
Встановіть 5 як значення атрибута size для шматка тексту, що розглядається: . HTML код цього шматка має бути таким:
Тут Ви дізнаєтесь про нашу діяльність, про програмні продукти нашої компанії та обладнання, яке ми виробляємо.
У тегах може також використовуватися атрибут color для вказівки кольору шрифту, обмеженого тегами тексту. Значення цього атрибуту такі ж, як і для розглянутих раніше атрибутів, що описують колір тла та тексту документа.
За замовчуванням абзац з текстом Тут Ви дізнаєтесь… вирівняно ліворуч. Центруємо його по горизонталі за допомогою тегів
. Ви можете також вирівняти абзац з правого краю сторінки за допомогою тегів або по лівому - за допомогою тегів . Вставте теги
обмеживши ними позначений абзац. Зверніть увагу, що для центрування абзацу ми використовували теги
, на відміну від атрибуту align="center", який застосований нами у тегах . Увага! На 2010 рік ,
, , вважаються застарілими і тому потрібно використовувати аналоги зі стилів. Це не означає, що використовувати їх не можна, але при здатності намагайтеся їх позбавлятися. =
= = = =
Також існує безліч інших застарілих тегів, які не описати в цій статті, тому краще відразу ознайомитися на спеціалізованих WEB сайтах з цього питання. Але головні я виклав тут трохи вище
Коди виділення
Мова HTML допускає два підходи до виділення фрагментів тексту. З одного боку, можна прямо вказати, що шрифт на деякій ділянці тексту може бути напівжирним або курсивним, тобто очевидно вказати накреслення шрифту тексту, як ми це робили в цьому досвіді. З іншого боку, можна помітити будь-який шматок тексту, як має певний, відмінний від простого, логічний стиль, надавши інтерпретацію цього стилю браузеру. Таким чином, логічний стиль показує роль текстового шматка, наприклад, велику роль у порівнянні з звичайним текстом або те, що цей шматок є цитатою. У своїй роботі ви можете використовувати такі теги, що визначають логічні стилі. Перевірте, як вони працюють у різних браузерах.
- застосовується визначення слова. Текст виводиться курсивом за замовчуванням.
- для виділення слів та посилення. Текст відображається курсивом за замовчуванням.
- виділення назв книжок, фільмів, спектаклів тощо виводиться курсивом за замовчуванням.
- Для фрагментів коду програм. На дисплеї відображається шрифт фіксованої ширини.- використовується для тексту, який користувач вводить із клавіатури. У різних браузерах може відображатись різні шрифти. Тег застарілий.
- використовується для відображення повідомлень програм. Виводиться шрифтом фіксованої ширини. Тег застарілий.
- Для особливо важливих фрагментів. Зазвичай виділяється напівжирним зображенням.
- Використовується для вказівки, що частина тексту або слово є символьною змінною, тобто текстом, який може бути замінений різними висловлюваннями. Відображається курсивом за замовчуванням. Тег застарілий.
Специфікація HTML 4.0 пропонує більш прогресивний спосіб вказівки стилів тексту та інших елементів - за допомогою спеціальної мови каскадних таблиць стилів CSS (Cascading Style Sheets). Таблиці стилів - це величезне досягнення в області WEB дизайну, що розширює можливості поліпшення зовнішнього вигляду сторінок. Таблиці стилів спрощують визначення інтервалів між рядками, відступів, кольорів, використовуваних для тексту і тла, розміру і стилю шрифтів тощо Стиль більшості елементів HTML може описуватися з допомогою атрибута style, що розташовується всередині відкриває тега елемента. Як значення атрибута style використовуються пари типу «властивість: значення». Наприклад, у шматку коду, що визначає заголовок розділу,
атрибут style="color: blue" визначає, що якість color (колір) має значення blue (блакитний), тобто текст заголовка першого рівня повинен відображатися блакитним кольором.
Вирівнювання стилями
Подивимося, як за допомогою мови каскадних таблиць стилів вказати стиль текстового шматка, який починається словами.
Для вказівки товщини шрифту використовується якість font-weight зі значеннями lighter (вузький), bold (напівжирний), bolder (жирний), наприклад, style = "font-weight: bold".
Для визначення курсивного зображення застосовується властивість font-style зі значенням italic. Тому, щоб надати тексту жирне курсивне зображення, слід атрибут style визначити так: style="font-weight: bold; font-style: italic". Зверніть увагу: параметри можуть розташовуватися у порядку і обов'язково повинні ділитися крапкою з комою.
Якщо потрібно вказати розмір шрифту, слід користуватися властивістю font-size, значення якого можна вказати у відносних або абсолютних величинах. Відносні величини - це відсотки, а як абсолютні величини використовуються пункти (pt), пікселі (рх), сантиметри (cm), міліметри (mm). Наприклад:
style="font-size: 200%"
style="font-size: 16pt"
style="font-size: 100px"
Вказуючи абсолютні, а не відносні розміри, ви позбавляєте користувачів, що розглядають ваші сторінки, можливості збільшувати або зменшувати обсяг шрифтів за допомогою команди меню браузера відповідно до їх зору і дозволу монітора. Шрифти будуть відображатися лише такого розміру, який ви вказали. Тому краще вказувати розмір шрифту у відсотках. У цьому випадку розмір шрифту буде менше або більше на зазначену кількість відсотків, ніж при оформленні за допомогою HTML тега за замовчуванням.
Для визначення способу вирівнювання тексту по горизонталі використовується якість text-align зі значеннями left (ліворуч), right (праворуч), center (центром), justify (по ширині). Таким чином, щоб вказати, що текст Тут Ви дізнаєтеся ... повинен бути оформлений напівжирним курсивним зображенням з розміром 150% від початкового і вирівняний по центру, слід його стиль визначити наступним чином:
style="font-weight: bold; font-style: italic; font-size: 150%; text-align: center"
Цей атрибут ми застосовуємо у тегах<р>, які дозволяють подати текст у вигляді окремого абзацу.
Відредагуйте елемент HTML, що включає текст Тут Ви дізнаєтесь… видаливши теги
, , , і вставивши теги<р>із атрибутом style те щоб цей елемент прийняв такий вид: <р style="font-weight: bold; font-style: italic; font-size: 150%; text-align: center">Тут Ви дізнаєтесь про нашу діяльність, про програмні продукти нашої компанії та обладнання, яке ми виробляємо
Чи бачите, мова HTML дозволяє використовувати різні методи стильового дизайну. Разом про те, застосування мови каскадних таблиць стилів CSS є найбільш бажаним.
Інші варіанти вирівнювання та використання стилів
Ми розглянули лише один варіант використання мови таблиць стилів, коли визначення стилю розташовується саме всередині тега елемента, який ви описуєте.
Це робиться за допомогою атрибуту style, що застосовується з більшістю стандартних тегів HTML. Але є інші варіанти використання CSS.
У стандартному HTML, без застосування таблиць стилів, для присвоєння якому-небудь елементу певних властивостей, таких як колір, розмір, положення на сторінці і тому подібне, доводиться щоразу описувати ці параметри для кожного елемента, навіть якщо на одній сторінці повинні розміщуватися 10- ки таких частин, що не відрізняються одна від одної. Доводиться десятки разів вставляти один і той же шматок HTML коду в сторінку, збільшуючи розмір файлу і час його завантаження з мережі.
Таблиці стилів діють іншим, більш зручним і бюджетним способом. Для присвоєння якомусь елементу певних характеристик ви повинні один раз описати цей елемент і визначити цей опис як стиль, а надалі просто вказувати, що елемент, який ви хочете оформити відповідним чином, повинен прийняти властивості стилю, описаного вами. Комфортно, чи не так?
Більше того, ви можете зберегти опис стилю не в тексті вашої WEB сторінки, а в окремому файлі - це дозволить використовувати опис стилю на будь-якій кількості WEB сторінок. І ще одне, пов'язане з цим перевага - можливість змінити оформлення будь-якої кількості сторінок, виправивши тільки опис іміджу в одному окремому файлі.
Крім того, мова таблиць стилів дозволяє працювати зі шрифтовим оформленням сторінок на більш високому рівні, ніж стандартний HTML.
В даний час мова CSS налічує досить безліч параметрів елементів HTML, якими він може керувати. Застосовуючи «безпечні», тобто сумісні з максимальною кількістю браузерів елементи CSS - параметри шрифту, кольору елементів і фону, параметри тексту і кордонів - ви можете значно полегшити свою роботу і зробити ваші WEB сторінки більш привабливими в плані оформлення тексту.
У HTML розмір шрифту відіграє важливу роль. Він дозволяє звернути увагу користувача на важливу інформацію на сторінці сайту. Хоча важливим є не тільки розмір літер, а й їх колір, товщина і навіть сімейство.
Теги та атрибути при роботі зі шрифтами html
Мова гіпертексту має великий набір засобів для роботи зі шрифтами. Адже саме форматування тексту є основним завданням html.
Причиною створення мови HTML стала проблема відображення правил форматування тексту браузерами.
Розглянемо теги, які використовуються для роботи зі шрифтами в HTML та їх атрибути. Основним із них є тег . За допомогою значень його атрибутів можна задати кілька параметрів шрифту:Підтримується позитивне значення атрибута 1-7.
Форматується лише той текст, розташований між частинами парного тега font.Решта тексту відображається стандартним шрифтом, встановленим за замовчуванням.
Також у html існує ряд парних тегів, що задають лише одне правило форматування. До них відносяться:
Звичайний текст
Жирний текст
Жирний текст
Більше звичайного
Менше звичайного
Курсив
Курсив
З підкресленням
ЗакресленийМожливості атрибуту
Крім описаних тегів існує ще кілька способів, як змінити шрифт у html. Одним із них є застосування універсального атрибуту style. За допомогою значень його властивостей можна задавати стиль відображення шрифтів:
1) font-family – властивість визначає сімейство шрифту. Можливе перерахування кількох значень.
Зміна шрифту в html на наступне значення відбудеться, якщо попередня родина не встановлена в операційній системі користувача.Синтаксис написання:
font-family: ім'я шрифту [, ім'я шрифту[, ...]]
2) font-size – задається розмір від 1 до 7. Це один із основних способів того, як у html можна збільшити шрифт.
Синтаксис написання:font-size: абсолютний розмір Відносний розмір | значення | відсотки | inherit
Розмір шрифту можна також задати:
Font-size:7
Font-size:24px
Font-size: x-large
Font-size: 200%
Font-size:24pt
3) font-style – встановлює стиль написання шрифту. Синтаксис:
font-style: normal | italic | oblique | inherit
Значення:
Приклад того, як змінити шрифт у html за допомогою цієї властивості:
font-style:inherit
font-style:italic
font-style:normal
font-style:oblique
4) font-variant - переводить всі великі літери в великі. Синтаксис:
font-variant: normal | small-caps | inherit
Приклад того, як змінити шрифт у html цією властивістю:
font-variant:inherit
font-variant:normal
font-variant:small-caps
5) font-weight – дозволяє встановити товщину написання тексту (насиченість). Синтаксис:
font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900
Значення:
font-weight:bold
font-weight:bolder
font-weight:lighter
font-weight:normal
font-weight:900
font-weight:100
Властивість font та колір шрифту html
Font є ще однією контейнерною властивістю. Усередині воно об'єднало значення кількох властивостей, призначених зміни шрифтів. Синтаксис :
font: font-size font-family | inherit
Також як значення можуть бути задані шрифти, що використовуються системою в написах різних елементів управління:
font:icon
font:caption
font:menu
font:message-box
small-caption
font:status-bar
font:italic 50px bold "Times New Roman", Times, serif
Для того щоб задати колір шрифту в HTML можна використовувати властивість color. Воно дозволяє встановлювати колір як за допомогою ключового слова, так і у форматі rgb . А також у вигляді шістнадцяткового коду.