Шрифт
Шрифт - це таблиці заміни коду видимим зображенням.
Тобто, шрифтом. Кожна клавіша вашої клавіатури дає певний код, розпізнаваний ОС (операційною системою, в більшості випадків це Windows або Linux / Unix).
Таким чином, вибравши певний шрифт, система замінює отриманий з клавіатури код на зіставлене в таблиці символів шрифту зображення літери або значка. Кожен шрифт - це файл. Файл, що містить зображення букв, цифр і символів, які призначаються на кожну кнопку. Встановити шрифт - означає включити в систему файл з додатковими таблицями зіставлення. У системах MS Windows зазвичай використовується кілька шрифтів, що поставляються разом з системою - це:
Кожен з цих шрифтів доречний у своєму дизайні і стилі. Найбільш поширений - Ариал. Всі ці шрифти є у 90% всіх відвідувачів вашої майбутньої сторінки. Кожен шрифт - це самостійний файл в папці Windows / fonts / * .ttf
Тому, якщо ви маєте будь-якої нестандартний шрифт і хочете його використовувати, вам доведеться: а) доставити цей файл користувачеві, що, враховуючи вагу файлу в 150-300 кб, що не п'ятисекундна завдання, або б) обмежитися наявними, замінивши інше лише графікою , тобто, картинками (раджу дотримуватися міри; 0)
Як в HTML надати шрифту той чи інший вид?
Тег, що призначає шрифт - <font> вміст тега - те, на що вплинуть параметри тега </ font>
У цей самий <font> ми зараз і будемо вставляти параметри ... Зверну вашу увагу на те, що вставляються всі параметри саме в початок тега, а не в кінець. У замикає тег взагалі нічого ніколи не вставляється.
Отже:
розмір шрифта - <font size="число от 1 до 7">
текст размера 1
текст размера 2
текст размера 3
текст размера 4
текст размера 5
текст размера 6
текст размера 7
У дизайні зазвичай використовуються перші чотири розміри. Все, що вище, поганий тон і ознака дилетантства, бо займає надто багато місця, важко читається і взагалі негарно. Правда, і великим розмірам знайдеться застосування. Наприклад, сьомим розміром можна писати буквицу (першу літеру початку глави):
Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст.
Якщо правильно підібрати розміри, виглядає цілком приємно.
Окрім іншого, ми можемо вибрати і сам шрифт, використовуваний для відображення тексту. Робиться це тегом face = "назва шрифту" (приклад: face = "Comic Sans MS")
Ці два тега - розмір і вид шрифту, - можна розташувати в будь-якій послідовності в тезі <font> - що
<font size = "1" face = "Comic Sans MS"> текст </ font>
що
<font face = "Comic Sans MS" size = "1"> текст </ font>
Головне тут стежити, щоб задаються параметри (у даном випадку це ім'я шрифту і його розмір) були виділені лапками і знаходилися всередині тега <font> межу font і>
Тепер, для кращого розуміння таких термінів, як "контейнер",, "Вкладення тег" і "спадкування", розглянемо нижче наступний приклад:
Потім задана схильність шрифту тегом <i> </ i> Контейнер цього тега включає в себе і заголовок (розмір 4) і текст.
Так само в роботі з текстом допомагає і тег, що позначає абзаци - це <p> </ p> - все, поміщене в них, відокремлюється зверху і знизу пропуском і може мати власні параметри абзацу,, що прописують прямо в тезі - <p align = "center"> текст </ p>.
Прогалини між виділенням абзацу, що є скоріше недоліком, ніж корисністю, можна прибрати за допомогою CSS, про яке буде окрема глава.
Шрифт так само може бути похилий, виделеннний, і жирний похилий.
Досягається це тегами
<i> текст </ i>
<b> текст </ b>
і їх поєднанням - <b> <i> текст </ i> </ b>
Поєднання виду м - <b> <i> текст </ b> </ i> в більшості браузерів викличе помилку, внаслідок якої ваша сторінка може криво відобразитися або не з'явиться взагалі: залежить від стійкості броузера. Мозилла, наприклад, проковтне і зрозуміє це правильно, а от більшість інших - "заорут". Тому раджу писати правильно.
Власне, ось повний список таких тегів і, заодно, як це виглядає в броузері:...
<b>жирный шрифт</b>
<strong>жирный шрифт</strong> - (аналог <b></b>)
<i>наклонный шрифт</i> - (курсив)
<em>наклонный шрифт</em> - (аналог <i></i>)
<u>пАдчёркнутый шрифт</u>
<s>перечёркнутый
шрифт</s>
<strike>перечёркнутый
шрифт</strike> (аналог
<s></s>)
<big>текст отображается больше, чем основной шрифт</big>
<small>текст отображается меньше, чем основной шрифт</small>
<sub>нижний индекс</sub> и <sup>верхний индекс</sup>
<code>
<tt>текст отображается моноширинным шрифтом (чаще всего шрифт Courier)</tt>
<kbd>текст отображается моноширинным жирным шрифтом</kbd>
<var>отображение переменных (как правило - курсив)</var>
<cite>отображение цитат (как правило - курсив)</cite>
<address>так обозначается адрес (как правило, курсив) </address>
<blockquote>
Ця фіча зміщується весь абзац (ув'язнений в неї текст) на n відступ зліва - потрібно для спрощення дізігна, щоб не рівняти таблицями або пробілами. Іноді дуже полегшує життя:
</blockquote>
Спробуйте використовувати й таке:
<blockquote><blockquote>
І власне, тег <br> - це фіча (тег) закриття не вимагає.
Окрім іншого, варто було б згадати такі теги, як <H1> </ H>, але, будучи вставлені в текст, "за замовчуванням" вони непоправно спотворять дизайн. Тому про них я напишу після розгляду CSS, бо без серйозної "доведення" за допомогою стилів теги ці нестравною і марні.
Списки.
Замість того, щоб нумерувати все вручну, замість запарок з виділеннями різного роду і калібру, набагато простіше скористатися маловідомими, але підтримуваними усіма бродилками, тегами <UL> і <LI>:
списки можуть бути і вкладеними:
Який тег що означає?
UL - початок списку, / UL - закриття списку
LI - тег, що означає рядок списку. Якщо величина не задана (параметром value = "число"), то за замовчуванням має вигляд точки, якщо задано число - відраховує, додаючи в початок кожної нової строчки, наступне число до заданого.
OL - тег початку нумерованого списку. Може приймати значення ні з одиниці, а з заданої величини: робиться введенням параметра start = "число, з якого почати відлік"
Декорувати списки можна різними значками. Робиться це за допомогою параметра type:
Але вищеописані премудрості з точками, кружечками і квадратиками чи спрацюють якщо просто встановити тег в подвійному екземпяре - тобто <ul> <ul> <li> вміст </ ul> </ ul> </ li> тоді замість точки відобразиться гурток. А якщо <ul> написати три рази, то квадратик.
Тобто, шрифтом. Кожна клавіша вашої клавіатури дає певний код, розпізнаваний ОС (операційною системою, в більшості випадків це Windows або Linux / Unix).
Таким чином, вибравши певний шрифт, система замінює отриманий з клавіатури код на зіставлене в таблиці символів шрифту зображення літери або значка. Кожен шрифт - це файл. Файл, що містить зображення букв, цифр і символів, які призначаються на кожну кнопку. Встановити шрифт - означає включити в систему файл з додатковими таблицями зіставлення. У системах MS Windows зазвичай використовується кілька шрифтів, що поставляються разом з системою - це:
| Arial | Ариал |
| Courier New | Курьер Нью |
| Comic Sans | Комик Санс |
| Times New Roman | Таймс Нью Роман |
| Verdana | Вердана |
Кожен з цих шрифтів доречний у своєму дизайні і стилі. Найбільш поширений - Ариал. Всі ці шрифти є у 90% всіх відвідувачів вашої майбутньої сторінки. Кожен шрифт - це самостійний файл в папці Windows / fonts / * .ttf
Тому, якщо ви маєте будь-якої нестандартний шрифт і хочете його використовувати, вам доведеться: а) доставити цей файл користувачеві, що, враховуючи вагу файлу в 150-300 кб, що не п'ятисекундна завдання, або б) обмежитися наявними, замінивши інше лише графікою , тобто, картинками (раджу дотримуватися міри; 0)
Як в HTML надати шрифту той чи інший вид?
Тег, що призначає шрифт - <font> вміст тега - те, на що вплинуть параметри тега </ font>
У цей самий <font> ми зараз і будемо вставляти параметри ... Зверну вашу увагу на те, що вставляються всі параметри саме в початок тега, а не в кінець. У замикає тег взагалі нічого ніколи не вставляється.
Отже:
розмір шрифта - <font size="число от 1 до 7">
текст размера 1
текст размера 2
текст размера 3
текст размера 4
текст размера 5
текст размера 6
текст размера 7
У дизайні зазвичай використовуються перші чотири розміри. Все, що вище, поганий тон і ознака дилетантства, бо займає надто багато місця, важко читається і взагалі негарно. Правда, і великим розмірам знайдеться застосування. Наприклад, сьомим розміром можна писати буквицу (першу літеру початку глави):
Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст.
Якщо правильно підібрати розміри, виглядає цілком приємно.
Окрім іншого, ми можемо вибрати і сам шрифт, використовуваний для відображення тексту. Робиться це тегом face = "назва шрифту" (приклад: face = "Comic Sans MS")
Ці два тега - розмір і вид шрифту, - можна розташувати в будь-якій послідовності в тезі <font> - що
<font size = "1" face = "Comic Sans MS"> текст </ font>
що
<font face = "Comic Sans MS" size = "1"> текст </ font>
Головне тут стежити, щоб задаються параметри (у даном випадку це ім'я шрифту і його розмір) були виділені лапками і знаходилися всередині тега <font> межу font і>
Тепер, для кращого розуміння таких термінів, як "контейнер",, "Вкладення тег" і "спадкування", розглянемо нижче наступний приклад:
<font face="Название шрифта" size="1">
<i>
< font size="4">Заголовок </font> текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст </i>
< font size="4">Заголовок </font>
текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст</font>
Як бачимо з прикладу, зовсім необов'язково кожен раз писати колір, розмір і ім'я шрифту. Всі ці параметри "успадковуються" молодшими тегами, тобто тими, що вкладені в інші. Роз'ясню. Приклад вище словами: задали ім'я шрифту; воно збережеться у всьому просторі, обмеженому тегами з ім'ям.
Потім задана схильність шрифту тегом <i> </ i> Контейнер цього тега включає в себе і заголовок (розмір 4) і текст.
Так само в роботі з текстом допомагає і тег, що позначає абзаци - це <p> </ p> - все, поміщене в них, відокремлюється зверху і знизу пропуском і може мати власні параметри абзацу,, що прописують прямо в тезі - <p align = "center"> текст </ p>.
Прогалини між виділенням абзацу, що є скоріше недоліком, ніж корисністю, можна прибрати за допомогою CSS, про яке буде окрема глава.
Шрифт так само може бути похилий, виделеннний, і жирний похилий.
Досягається це тегами
<i> текст </ i>
<b> текст </ b>
і їх поєднанням - <b> <i> текст </ i> </ b>
Поєднання виду м - <b> <i> текст </ b> </ i> в більшості браузерів викличе помилку, внаслідок якої ваша сторінка може криво відобразитися або не з'явиться взагалі: залежить від стійкості броузера. Мозилла, наприклад, проковтне і зрозуміє це правильно, а от більшість інших - "заорут". Тому раджу писати правильно.
Власне, ось повний список таких тегів і, заодно, як це виглядає в броузері:...
<b>жирный шрифт</b>
<strong>жирный шрифт</strong> - (аналог <b></b>)
<i>наклонный шрифт</i> - (курсив)
<em>наклонный шрифт</em> - (аналог <i></i>)
<u>пАдчёркнутый шрифт</u>
<s>
<strike>
<big>текст отображается больше, чем основной шрифт</big>
<small>текст отображается меньше, чем основной шрифт</small>
<sub>нижний индекс</sub> и <sup>верхний индекс</sup>
<code>
текст отображается как код или формула (чаще всего
как шрифт
Courier)</code><tt>текст отображается моноширинным шрифтом (чаще всего шрифт Courier)</tt>
<kbd>текст отображается моноширинным жирным шрифтом</kbd>
<var>отображение переменных (как правило - курсив)</var>
<cite>отображение цитат (как правило - курсив)</cite>
<address>так обозначается адрес (как правило, курсив) </address>
<blockquote>
Ця фіча зміщується весь абзац (ув'язнений в неї текст) на n відступ зліва - потрібно для спрощення дізігна, щоб не рівняти таблицями або пробілами. Іноді дуже полегшує життя:
</blockquote>
Спробуйте використовувати й таке:
<blockquote><blockquote>
</blockquote></blockquote>текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст..
І власне, тег <br> - це фіча (тег) закриття не вимагає.
Окрім іншого, варто було б згадати такі теги, як <H1> </ H>, але, будучи вставлені в текст, "за замовчуванням" вони непоправно спотворять дизайн. Тому про них я напишу після розгляду CSS, бо без серйозної "доведення" за допомогою стилів теги ці нестравною і марні.
Списки.
Замість того, щоб нумерувати все вручну, замість запарок з виділеннями різного роду і калібру, набагато простіше скористатися маловідомими, але підтримуваними усіма бродилками, тегами <UL> і <LI>:
| як це виглядає: | Код: |
|
<ul> <LI>строка 1 <LI>строка 2 <LI>строка 3 </ul> |
списки можуть бути і вкладеними:
| як це виглядає: | Код: |
|
<UL> <LI>тема 1 <OL> <LI>підтема 1 <LI> підтема 2 <OL start="10"> <LI> підподтема </OL> <LI> підтема 3 </OL> <LI>тема 2 </UL> |
Який тег що означає?
UL - початок списку, / UL - закриття списку
LI - тег, що означає рядок списку. Якщо величина не задана (параметром value = "число"), то за замовчуванням має вигляд точки, якщо задано число - відраховує, додаючи в початок кожної нової строчки, наступне число до заданого.
OL - тег початку нумерованого списку. Може приймати значення ні з одиниці, а з заданої величини: робиться введенням параметра start = "число, з якого почати відлік"
Декорувати списки можна різними значками. Робиться це за допомогою параметра type:
| як це виглядає: | Код: |
|
<UL> |
|
<UL type="circle"> |
|
<UL type="square"> квадратик |
|
<UL type="disc"> (власне, цей параметр ставиться "по-замовчуванню") |
|
<OL type="i" > римські малі |
|
<OL type="I" > римські заголовні |
|
<OL type="a" > англійські малі |
|
<OL type="A" > англійські заголовні |
|
<OL type="1" > арабські цифри |
Але вищеописані премудрості з точками, кружечками і квадратиками чи спрацюють якщо просто встановити тег в подвійному екземпяре - тобто <ul> <ul> <li> вміст </ ul> </ ul> </ li> тоді замість точки відобразиться гурток. А якщо <ul> написати три рази, то квадратик.
Немає коментарів:
Дописати коментар