web-design-book-
.pdf
опис сайту чи вмісту сторінки. Він також призначений для деяких пошукових машин, які потім підставляють цей опис під посилання на сайт. Наступний елемент вказує, якою програмою був створений документ. І останній – прихований копірайт вебдизайнера. Зазвичай більшість метатегів усіх сторінок вашого сайту однакові, тому їх варто вписати один раз і вставити на усі інші сторінки.
Ще однією стандартною для <HEAD> частиною є елемент <TITLE>. Він відіграє дуже важливу роль для пошукових машин, оскільки те, що написане у цьому елементі, вони сприймають як квінтесенцію веб-сторінки. Текст, написаний у цьому елементі, буде відображений на треї вікна браузера (синя смужка програми вгорі вікна). Часто його прикрашають ASCII графікою, однак краще вписати туди назву, яка буде найточніше передавати зміст сторінки.
<TITLE> -== A N T A R C T I D A ==- </title>
<TITLE> Дослідження Антарктиди </title>
Інколи необхідно написати у коді коментар, який не буде відображатися на сторінці. Така функція є в більшості мов програмування. Використовують коментарі для пояснення коду іншим веб-дизайнерам, які будуть працювати з цими сторінками, а також, якщо ви хочете видалити частину елементів з коду, щоб перевірити як буде виглядати сторінка без них. Починаються коментарі знаком <!-- і закінчуються знаком --> Коментар є в документі, але користувач його не бачить.
<!-- Це коментар -->
Розширення HTML
Через кілька років після своєї появи мова розмітки HTML перестала задовольняти вимоги веб-дизайнерів. Програмісти різних країн створювали свої розширення для мови. У 1994 році за розробку
стилів для HTML береться норвежський фахівець інтернет-технологій Хокон Віум Лі (Håkon Wium Lie). Він створює каскадні таблиці стилів CSS (Cascading Style Sheets) – доповнення до гіпертекстової мови розмітки, що спрощує процес верстки та розширює межі веб-дизайну. У 1996 році W3C приймає CSS за стандарт. З цього часу каскадні таблиці підтримує більшість браузерів.
Синтаксис CSS суттєво відрізняється від запису HTML. До того ж він має кілька варіацій запису, що ускладнює його вивчення. Зате, освоївши CSS, веб-дизайнер зможе легко управляти зовнішнім виглядом сайтів. Багато сучасних соціальних мереж (livejournal, bloggers) дозволяють налаштовувати зовнішній вид своїх сторінок за допомогою каскадних стилів.
Стилі CSS будуть розлядатися детально у наступній лекції.
Мал. 20
Творець каскадних стилів CSS, співробітник компанії Opera Software Хокон Віум Лі
58 синтаксис HTML |
Основи веб-дизайну 59 |
Завдання:
Створіть сторінку HTML з правильною структурою та МЕТА-тегами. Наповніть її інформацією, осформлюючи її засобами HTML.
Запитання для самоперевірки
1)Що таке <ТІТLE>?
2)Що таке правила вкладення елементів?
3)Які елементи не мають закриваючих тегів?
4)Я правильно називати файли у вебдизайні?
5)Що таке МЕТА-теги і навіщо вони потрібні?
4Оформлення
тексту
Текст як елемент
Засоби оформлення HTML
CSS у роботі з текстом
Колонка
Буквиці
60 синтаксис HTML |
Основи веб-дизайну 61 |
Мал. 20
Вид коду сайту у мережі WWW (info.cern.ch)
Текст – один з основних елементів веб-сторінки нарівні з ілюстраціями та гіперпосиланнями. Перші сайти були виключно текстовими та гіпертекстовими. Тогочасні можливості форматувати текст були замалі, тому вигляд таких видань був мінімалістичний.
HTML має цілий ряд елементів, що відповідають за форматування тексту. Основні з них:
<B></b> – напівжирний текст;
<I></i> – курсивний текст;
<U></u> – підкреслює текст;
<S></s> – перекреслює текст;
<H2></h2> – елемент меншого заголовку або підзаголовку. HTML має шість стандартних заголовків, які відрізняються розміром та накрес-
ленням і позначаються відповідно <H1>, <H2>, <H3>, <H4>, <H5>, <H6>;
<H1></h1> – елемент заголовку, збільшує кегль тексту і перекидає текст до і після елемента на новий рядок;
<br> – закінчення рядка, цей елемент не має кінцевого тега;
<p> – абзац. На відміну від <br>, він робить відступ абзацу від попереднього. Також не має кінцевого тега;
<SUB></sub> – підрядковий текст;
<SUР></suр> – надрядковий текст;
<CENTER></center> – вирівнювання тексту/ графіки по центру.
Мал. 20
Вид коду першого сайту у мережі WWW (info.cern.ch)
62 оформлення тексту |
Основи веб-дизайну 63 |
Мал. 20
Результат у вікні браузера коду
стовувати < SUB > та < SUP >. Наприклад: <br><br><br><br> <H2> <CENTER>21 <SUP>o</ sup>C <br><br><br> H<SUB>2</sub>O <center></h2>
|
При запису цього коду ми використали синтаксис HTML. Спеціальні |
|
символи < та > передані кодом > та <. |
|
Елементи вкладаються один в одний по черзі: |
|
правильно: <B><I><U>Наприклад</u></i></b>; |
|
неправильно: <U><I><B>Наприклад</u></i></b>. |
|
Для того, щоб перекинути текст на новий рядок, використовуємо |
Код № Вписуйте елементи по одному, |
тег <br>, а для більшого відступу – кілька <br>. |
|
|
щоразу зберігайте і оновлюйте сторінку! |
Більше можливостей форматування тексту мають каскадні стилі |
<H1>Перевірка коду </h1> |
CSS. Спочатку розглянемо, як записують стилі в елементи HTML. |
|
|
<h3>Пробуємо елементи HTML</h3> |
Стилі, як і атрибути HTML, записують усередину початкового тегу за |
Текст у документі може бути |
допомогою атрибута style=””. |
<B>напівжирним</b>, <I>курсивним</ |
<B style=”color:red”>Червоний</b> |
i>, <U>підкресленим</u>, |
|
<S>перекресленим</s>. Також можна |
|
застосовувати комбінацію |
Як видно з цього прикладу, визначають стилі через двокрапку. Якщо |
елементів. <B><I><U>Наприклад, |
забути закрити лапки у стилі, то браузер буде сприймати весь текст |
напівжирний, курсивний та |
як стиль і нічого не відображатиме. Колір тексту можна задавати |
підкреслений</u></i></b>. <br> |
англійською назвою, або номером. Щоб дізнатися номер, варто за- |
Може починатися з нового рядка. |
йти у будь-який растровий редактор і підібрати колір, а потім |
<p> Параграфи відступають один від |
скопіювати його номер (Див. мал. № ). |
одного завдяки елементу < P |
<B style=”color:#6DAAE9”>Блакитний</b> |
>. |
|
<h3>Використання < SUB > та |
|
< SUP ></h3> |
Для того, щоб задати колір фону, використовують стиль |
Для певних символів можна викори- |
background-color. Якщо ми записуємо кілька стилів CSS, то |
64 оформлення тексту |
Основи веб-дизайну 65 |
Мал. 20
Результат у вікні браузера коду
відділяємо через крапку з комою. Спробуємо записати наш текст виворіткою (світлий текст на темному тлі). Для цього призначимо тексту білий колір, а фону – чорний.
<B style=”color:white; background-color: black”>Виворітка</b>
В елементах заголовків колір фону може розтягуватися за всю ширину сторінки (див. мал. № ).
<h1 style=»backgroundcolor:orange»>Perfect day</h1>
Тому варто зазначити ширину фону за допомогою стилю width:400px
<h1 style=»backgroundcolor:orange;
Мал. 20
Вибір кольору у вікні редактора Adobe Photoshop
width:400px»>Perfect day</h1>
Стиль font-size керує розміром тексту. Визначати його можна у відсотках, пунктах та інших одиницях.
Цей текст нормального розміру, <SPAN style=”font-size:120%”>а цей на 20% більший</ span>
У попередньому коді є новий елемент <SPAN>, який у мові HTML не означає нічого і використовується виключно для застосування стилів до тексту.
Щоб підняти або опустити символ у рядку застосовують стиль vertical-align. Одиницею вимірювання переміщень слугує em
– це відносна величина щодо розміру шрифту. Щоб наочніше було переміщення символа щодо вісі шрифту, застосуємо елемент <S>.
<S style=»font-size:21pt»>K
<span style=»vertical-align:1em»>Y</span>
66 оформлення тексту |
Основи веб-дизайну 67 |
Мал. 20
Приклад гарнітури з засічками та без засічок.
<span style=»verticalalign:0.5em»>P</span>
<span style=»vertical-align:-
0.5em»>C</span>
<span style=»vertical-align:-
1em»>O</span>
P</s>
Для прикрашання заголовків можна використовувати капітель: font-variant:small-caps. Це такий запис шрифту, коли прописні літери мають накреслення заголовних. У кириличних шрифтах не багато прописних літер, малюнок яких відрізняється від заголовних – Аа, Бб, Іі, Ее, Рр. Натомість у латиниці майже всі прописні літери відрізняються за малюнком від заголовних. Тому для іноземців наші тексти здаються суцільно набраним капітелем. Використання цього прийому в текстах латиницею дає більш помітний результат.
<h1>Нормальний заголовок</h1>
<h1 style=»font-variant:small-caps»>Нормальний заголовок (капітель)</h1>
<h1>English Header</h1>
<h1 style=»font-variant:small-caps»>English
Header</h1>
Шрифти поділяють на великі сімейства, що мають загальні стильові особливості, – ці сімейства називають також гарнітурами. Найпоширеніші з яких в інтернеті– з засічками (serif), без засічок (sans-serif) та моноширинні (monospace).
Засічки – це маленькі риски на торцях літер, що допомагають оку сформувати рядок у лінію. Такі шрифти використовують, коли великий за обсягом текст потрібно чітко структурувати по рядках. Браузер автоматично підставляє шрифти з засічками для всього тексту. Часте використання шрифтів із засічками у газетних виданнях створило образ офіційності цієї гарнітури. Тому використання їх у новинних чи представницьких сайтах призводить до серйознішого сприйняття тексту. Шрифти без засічок простіші й не надають тексту офіційності, тому їх бажано використовувати на молодіжних, мистецьких сайтах.
Часто можна побачити на веб-сторінці комбінації гарнітур, коли заголовки набрані шрифтами із засічками, а основний текст – без, і навпаки. Наприклад, на сайті zaxid.net (див мал. №)
<b style=»font-size:140%»>Приклади різних шрифтів: <b>з засічками,</b> <b style=»font- family:sans-serif»>без засічок,</b> <b style=»font-family:monospace»>моноширинний.</ b></span>
68 оформлення тексту |
Основи веб-дизайну 69 |
Мал. 20
Приклад використання різних гарнітур на сайті zahid.net
Можна також прописувати в коді назви шрифтів, наприклад, font-family:Arial. Але такий запис може не спрацювати, оскільки ми не знаємо,
на якому комп’ютері будуть переглядати наш сайт і які там будуть встановлені шрифти. Тому бажано вказувати саме гарнітуру шрифту, а не його назву
– тоді браузер сам підставить найбільш адекватний варіант.
За допомогою CSS можна ефективніше керувати підкресленнями. Для цього використовують рамки
–border: 1px solid black. У цьому стилі зазначають три параметри. Перший – товщина лінії, другий – форма (solid – суцільна, dotted
–крапками, dashed – пунктирна), третій – колір. Для того, щоб лінія була проведена не з усіх боків тексту, а тільки знизу, слід вказати напрямок border-bottom.
<b style=»border: 1px solid black»>слово</b>
<b style=»border-bottom: 2px dotted red»>слово</b>
<b style=»border-bottom: 2px dashed grey»>слово</b>
Якщо ми хочемо створити свої підкреслення і застосувати їх у всьому документі, вписувати однакові стилі у кожен елемент <U> буде нераціонально. Тому в CSS є можливість застосовувати стилі для усіх елементів документу відразу. Такий запис називається селектором тегів, записують його в елементі <STYLE></style>, вкладений в елемент <head>.
<head>
<style>
u {color:gray} </style>
Мал. 20
Приклад використання різних гарнітур на сайті washingtonpost.com
70 оформлення тексту |
Основи веб-дизайну 71 |
Мал. 20
Результат у вікні браузера коду
</head>
<body>
<u>Електронні журнали</u> (коротка форма терміну е-журнал) — вид періодичних <u>журнальних видань</u>, які публікують в одному з електронних форматів
ACII текст, HTML, EXE, FLASH або
PDF і розповсюджують через комп’ютери.
</body>
Тут стилі застосовують одночасно для всіх зазначених на сторінці тегів. Тепер відповідне форматування (сірий колір) відбуватиметься щоразу після використання елемента (у нашому випадку <u>). Якщо нам потрібно додати ще якийсь стиль до поточного, дописуємо його через крапку з комою.
<style>
u {color:gray; background-color: pink} </style>
Використовуючи селектори тегів зручно для налаштування стилю заголовків, основного тексту тощо. Розглянемо запис стилю заголовка, що має такі параметри: розмір – 30pt, усі заголовні літери, колір – оливковий, підкреслений суцільною оливковою лінією. Для того, щоб перевести всі літери у заголовні нам знадобиться стиль text-transform, що може мати такі параметри: uppercase (усі літери заголовні), lowercase (усі літери прописні), capitalize (кожне слово буде починатися з заголовної літери).
<style>
H1 {font-size:30pt; text-transform: uppercase; color: olive; border-bottom: 2px solid olive}
</style>
<h1 >Заголовок</h1>
Для форматування великих масивів тексту використовують елемент <P>, який може не мати кінцевого тега – </p>, оскільки кожен наступний <P> показує кінець попереднього.
Для цього елемента за допомогою CSS підбирають розмір шрифту, гарнітуру та інші стилі, які ми вже розглянули. Також у нього є особливі параметри. Для того, щоб протестувати стилі, слід створити новий документ з великим відрізком тексту і розставити перед абзацами тег <P>. На початку документа створимо селектор тегів для елемента абзацу.
<style>
P { }
</style>
Він поки що порожній, але ми додаватимемо туди по черзі стилі і
72 оформлення тексту |
Основи веб-дизайну 73 |
Мал. 20
Різниця внутрішнього та зовнішнього відступу
стежитимемо, як змінюється текст.
Перш за все необхідно сформувати текст у колонку і відцентровувати її. Для цього перед першим тегом <P> вводимо <center> і закриваємо його в кінці сторінки </center>. Далі задаємо ширину колонки стилем width. Можна виставити фіксований розмір у пікселях: width:500px.
<style>
P {width:500px }
</style>
У кожного користувача роздільна здатність монітора налаштована по різному. Якщо на вашому екрані все виглядає чудово, це не означає, що так само буде і в інших користувачів. Виставляючи width:1024px, варто пам’ятати, що є монітори з шириною 800px, на яких така
колонка заступатиме за межі екрану. Вихід із ситуації – зазначати ширину у відсотках. Тоді конкретному випадку – width: 50% вона буде вирахувана індивідуально у кожному.
Вирівнюванням тексту керує стиль text-align, який може мати значення left (по лівому краю), right (по правому), center (по центру), justify (по обох краях). Для колонки найкраще вирівнювання – justify.
Перший рядок абзаців зазвичай має відступ, який зазначають стилем text-indent, йому можна задавати різні величини у зручних одиницях вимірювання, наприклад, text-indent:20px. Вписуємо його туди ж – у фігурні дужки через крапку з комою.
Щоб бачити межі абзацу, спробуємо задати колір фону за допомогою background-color: olive. Тепер помітно, що між абзацами існують відступи. Вони автоматично виставляються браузерами для елемента <P>.
Щоб прибрати пробіли між абзацами виставимо зовнішні відступи: margin:0px. У об’єктів веб-сторінки є два види відступів – зовнішні, керовані стилем margin, та внутрішні, за які відповідає стиль padding. Фон абзацу «прилипає» до тексту. Щоб задати поля, слід застосувати стиль для внутрішніх відступів, наприклад, padding: 10px. Також можна керувати напрямком відступів за допомогою уже знайомих нам -left, -right, -bottom, -top. Щоб збільшити, наприклад, тільки праве поле, записуємо padding-right: 60px.
При макетуванні великих за обсягом текстів важливо визначити правильний інтерліньяж – відстань між рядками. Автоматично він зазначений як 120% від розміру шрифту. Тобто, якщо кегль – 10 пунктів, то інтерліньяж буде 12. Щоб змінити відстань між рядками, використовують стиль line-height. Підберіть інтерліньяж, що найкраще пасує до вашого розміру шрифту.
74 оформлення тексту |
Основи веб-дизайну 75 |
Мал. 20
Результат деформації тексту у колонці
За відступи між словами відповідає стиль wordspacing, а за відступи між літерами – letterspacing. Щоб зазначити розмір використовують вищезгадувану одиницю вимірювання em, наприклад letter-spacing:0.1em. Щоб, навпаки, зменшити відстані між літерами, застосовують розмір з мінусом letter-spacing:- 0.1em.
Інколи першу літеру абзацу потрібно зробити буквицею збільшена заголовна літера розділу тексту. Тоді можна застосувати стиль обтікання текстом: float:left. Оточимо першу літеру абзацу елементом <span>, збільшимо розмір на 200% і визначимо внутрішній відступ у 3px.
<span style=»float:left; padding:3px; font-size:200%»>М</ span>алевич Казимир Северинович: 23 лютого 1878, Київ — †15 травня
1935, Ленінград) — український і російський художник-авангардист білоруського походження, один із засновників нових напрямків у абстрактному мистецтві — супрематизму та кубофутуризму, педагог, теоретик мистецтва.
Для веб-дизайнера дуже важливо навчитися управлятися з макетуванням тексту засобами CSS. Це дозволить йому робити кожен сайт оригінальним та неповторним.
Мал. 20
Приклад використання шрифтів на сайті fajnechlopaki.com
76 оформлення тексту |
Основи веб-дизайну 77 |