web-design-book-

Мал. 19

Кожен пункт меню продубльований гарячими клавішами.

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

1)використання гарячих клавіш. Кожного разу, заходячи в меню, ми втрачаємо багато часу, тоді як, коли ліва рука майже не задіяна. Навчившись швидко натискати сполучення клавіш, ми суттєво пришвидшимо роботу. Раніше кожен браузер мав свої сполучення, що було незручно для людей, які звикли до інших гарячих клавіш. Тепер вони уніфіковані і майже не відрізняються у різних браузерах. Однією з найкорисніших клавіш є F5, яка оновлює сторінку. Сполучення Ctrl+T відкриває нову вкладку. Для пошуку потрібного слова натискають Ctrl+F. Mozilla і Opera виділяють знайдені слова іншим кольором. Підглянути гарячі клавіші можна в меню, де навпроти майже кожного пункту продубльований його клавіатурний відповідник; (див мал№)

2)дуже зручною функцією є робота в автономному режимі. Щоб пришвидшити нашу роботу в мережі, браузери зберігають сторінки у спеціальну пам’ять – кеш. Під час роботи в інтернеті браузер може завантажувати графіку не з мережі, а з папки

кеша. Це суттєво пришвидшує відкривання часто відвідуваних користувачем сайтів. Обравши автономний режим – можна переглядати відвідані сайти, навіть якщо інтернет відключений. Увімкнути / вимкнути цю функцію можна у меню «Файл» -«Автономний Режим» або «Працювати автономно»;

3)для веб-дизайнера важливо швидко отримати доступ до вихідного коду сторінки. У Mozilla і Opera він відкривається натисненням клавіш Ctrl+U, у Internet Explorer - «Вид» - «Код HTML»;

4)у меню «Вигляд» є підменю «Панелі». Тут можна налаштовувати панелі, які будуть відкриті з правого боку вікна браузера. Зазвичай використовують «Журнал», у якому збережені всі відвідані користувачем сайти, та закладки, куди зберігають корисні посилання. В Opera таких панелей більше: є ще панель нотаток,

Мал. 20

Робота браузера Opera у режимі перегляду коду. Внизу зліва відображається HTML, а зправа – CSS

панель, на якій відображені всі посилання відкритої сторінки, панель завантаження;

5)часто користувачі встановлюють браузер і, не налаштовуючи, починають працювати. Це зручно для людей, які не дуже добре розуміються на комп’ютерах. Зрештою, кілька поколінь програмістів працювало над тим, щоб зараз людна могла навіть не задумуватися, як працює програма. Однак досвідчений користувач повинен знати, як можна налаштувати програму. Для того, щоб відкрити вікно управління, необхідно зайти у «Сервіс» – «Властивості» Internet Explorer, або «Інструменти» – «Налаштування» у Mozilla та Opera. Там розташовані вкладки, кожна з яких відповідає певній сфері функціонування програми. На вкладці «Загальні» можна вказати домашню сторінку, яка завантажуватиметься першою, або вибрати як саме потрібно починати роботу. У налаштуваннях можна стерти усі логіни, паролі, журнали, які зберіг браузер, а також вказати потрібно їх зберігати, чи ні. На вкладці «Безпека», можна виставляти рівень безпеки для вашого комп’ютера. Зважайте, що високий рівень безпеки буде заважати перегляду багатьох сайтів, які використовують у дизайні програмування. На цій владці можна забороняти вхід на деякі сайти мережі. Налаштуванню браузерів можна присвятити окрему книгу, тому дивіться додаткову літературу в мережі:

налаштування Opera: http://www.myopera.net/;

налаштування Mozilla: http://firefox.org.ua/firefox/ about-config-in-firefox/;

налаштування Internet Explorer: http://www.microsoft.com/ rus/windows/internet-explorer/features/overview. aspx;

Обирати браузер для власного користування потрібно самотужки.

Деякі з них кращі для повільного інтернету (Opera), деякі можна модифікувати згідно з власними уподобаннями (Mozilla) тощо. При роботі з Windows бажано не використовувати Internet Explorer. По-перше, він інтегрований в операційну систему, тому його нестабільна робота призводить до проблем у роботі усієї системи. По-друге, він суттєво поступається альтернативним браузерам більшістю важливих показників. По-третє, як лідер ринку, на нього більшою мірою спрямовані атаки хакерів. Інший лідер – Mozilla – дуже швидко реагує на проблеми у захисті, оскільки його розробляє багато програмістів по всьому світові. І останнє - Internet Explorer до сих пір має незручну систему завантаження файлів. Якщо завантаження раптово обривається, його необхідно починати знову, тоді як в інших браузерах цей процес можна зупиняти та відновлювати. Проте у веб-дизайнера повинні бути встановлені всі ці програми, оскільки після створення сайту потрібно протестувати його на

Мал. 21

Мінімалістичний дизайн Opera та їхнього сайту.

Завдання:

Завантажте з мережі та встановіть усі описані у розділі браузери

Налаштуйте роботу браузерів Opera та Chrome

Запитання для самоперевірки

1)Хто створив перший браузер?

2)Що таке війна браузерів?

3)Що передувало Mozilla?

4)Які п’ять основних браузерів ви знаєте?

3Синтаксис HTML та CSS

Гіпертекстова мова розмітки

Термінологія HTML

META-теги

Елемент <TITLE> та коментарі

Каскадні стилі CSS

Гіпертекстова мова розмітки (Hyper Text Markup Language) – основа, базовий рівнень веб-дизайну. Ця технологія за останні 20 років інтегрувала майже всі інші мережі інтернету, тож зараз для більшості користувачів слова «веб» і «інтернет» є синонімами. Завдяки гіпертексту з’явилися абсолютно нові можливості управління інформацією та багато винаходів: сайти, внутрішні термінали локальних мереж, редактори, браузери, дискові презентації, інноваційний дизайн і багато іншого. Отримавши на виставці диск із каталогом, ви з подивом дізнаєтеся, що він зроблений в HTML. Викликаючи у комп’ютері довідку, ви також запустите гіпертекстовий документ. Проходячи тестування у виші, ви працюватимете з HTML інтерфейсом. Навіть сучасні анімовані сайти, створені за технологією flash, будуть базуватися на гіпертексті.

HTML винайшов британський науковець Тім Бернерс-Лі для впорядковування документації Женевської лабораторії ядерної фізики. Він же розробив перший браузер для цієї мови. На початку 90-х років відбувалися дискусії щодо того, що перспективніше: текстова система gopher, яка на той час була панівною у мережі, чи красива «іграшка» HTML, яка могла містити зображення, кольори тощо. Зрештою вибір користувачі зробили на користь яскравого гіпертексту, а інші сервіси майже зникли.

Мова HTML з’явилася більше ніж двадцять років тому. За цей час вона багато разів модифікувалася, оскільки змінювалися як програми-браузери, так і вимоги до зовнішнього виду вебсторінок. Уже в 1993 році з’явилася HTML+, але ця подія відбулася непомітно, оскільки використання гіпертекстової мережі не було таким поширеним явищем, як тепер. Справді популярною стає версія HTML 2.0, що виходить у червні 1994го року. У HTML 3.0 додали можливість вставляти спеціальні символи, такі як знак інтеграла, безкінечності, відсотків тощо. У 1996 році цю версію ще вдосконалюють: у неї додають можливість вставляти один документ в інший (фрейми). Завдяки фреймам розробники повністю переглянули бачення структури сайтів. Тепер можна було перемикатися

між сторінками, не перевантажуючи меню. Фреймова верстка тривалий час домінувала у веб-дизайні. У цей період виникає велика кількість варіацій мови. Винахідником мови була заснована організація, що намагалася стандартизувати численні варіації HTML – W3C (WWW Консорціум), проте вона не змогла контролювати виробників браузерів, які під свої програми переписували мову. Через це сторінка, написана одним з варіантів HTML, могла зовсім по-різному виглядати на різних браузерах. У четвертій версії мови, що вийшла у 1997 році, додали підтримку інших мов програмування, через це вона отримала назву Dynamic HTML. На початку 2004 року Mozilla і Opera вирішили об’єднати зусилля над розвитком мови всупереч прийнятій тоді доктрині розвитку W3C. Наразі триває робота над останньою версією HTML.

Мал. 14

Тім Бернерс-Лі, директор W3C.

Девіз цієї організації –­ Керувати мережою до розкриття всіх можливостей (Leading the Web to Its Full Potential)

Термінологія HTML

Визначимо основні терміни, які будемо використовувати при вивченні та роботі з гіпертекстовими документами.

Синтаксис HTML – правила запису гіпертекстової мови розмітки. Знання синтаксису вбереже від грубих помилок при створенні документів. Разом з HTML на веб-сторінках використовують і інші мови програмування, кожна з яких має власний синтаксис.

Елемент (element) – конструкція мови HTML. Це контейнер, що містить дані й дозволяє їх форматувати. Будь-яка веб-сторінка – це набір елементів, вкладених один в одний. Всі елементи мови можна умовно розділити на три частини .

1.До першої належать ті, що створюють структуру документа. У них вказують також технічну інформацію для браузерів та пошукових машин, що будуть працювати з документом. Використання більшості з них – певна формальність, яку можна опустити. Однак дотримання правил оформлення гіпертекстових документів – показник рівня веб-дизайнера, тому бажано виконувати ці формальності.

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

3.У третю групу потрапляють елементи, які використовують для введення у гіпертекст кодів інших мов програмування або об’єктів, стилів.

Тег (tag) – початковий і кінцевий маркер елементу. Теги показують межі дії елементів і розділяють їх. Теги мають трикутні дужки(< >), а кінцевий тег містить слеш(/).

Атрибут (attribute) – параметр або властивість елементу. Це змінна, що може набувати різних значень, які визначають поведінку елемента. Значення атрибута повинні мати лапки. Атрибути в елементі розділяють пробілами.

Гіперпосилання (hyperlink) – фрагмент тексту або зображення, який вказує на інший документ або об’єкт. Гіперпосилання необхідні для того, щоб можна було переходити від одного документа до іншого, або ж переміщуватися документом.

Фрейм (frame) – область документа, що містить інший документ. Значення терміну фрейм у програмах для анімованого веб-дизайну дещо інший.

Вебсторінка (web-page) – документ, створений на базі гіпертексту та розміщений у мережі WWW. Такі файли мають розширення .html або .html.

Мал. 15

Фрагмент програми Adobe Dreamweaver з підсвіченими кольором тегами HTML та CSS

Сьогодні веб-сторінки можуть формувати також програмами на сервері відповідно до вашого запиту та налаштувань. Такі сторінки називаються динамічними і мають розширення .php, .asp.

Сайт (site) – набір веб-сторінок, що належать одному власнику і мають одну спільну адресу. Сьогодні поняття сайту стає дедалі розмитішим, оскільки з появою технології RSS сайти почали містити елементи інших. А деякі з них надають користувачам можливість створювати свої міні-сайти на їх технологічній базі. Беззаперечним визначенням сайту є спільна для всіх його сторінок адреса в мережі.

Скрипт або сценарій (script) – програма, яку вписують у вебсторінку для розширення її можливостей. Скрипти можуть містити віруси, тому в більшості випадків браузери блокують їх виконання, або запитують користувача, чи варто їх запустити. Скрипти зазвичай пишуть мовою JavaScript та ActiveX.

Код або вихідний код (source)–гіпертекст із видимою для користувача розміткою та можливістю редагування. Для роботи з вихідним кодом використовують спеціалізовані програми – HTMLредактори, або текстовий редактор notepad.

URL (uniform resource locator) – адреса об’єкта чи документа в інтернеті.

Браузер (browser) – програма для перегляду веб-сторінок.

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

Динамічний сайт – сайт, інформацією та зовнішніми виглядом якого може управляти користувач. У такого сайту сторінки формуються залежно від дій користувача. Для їх створення необхідно знати мови програмування PHP або ASP, а також мову управління

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

Гіпертекст є мовою з відкритим кодом. На відміну від документів, створених у інших програмах, його вихідний код можна відкрити і редагувати, тоді як документ MS WORD можна редагувати тільки за допомогою цієї ж програми і через її інтерфейс. Користувач не бачить, яким чином текст стає курсивним, напівжирним чи підкресленим. Все, що від нього вимагається, – виділити текст мишкою та клацнути кнопкою. Якщо ж ми відкриємо гіпертекстовий документ у будь-якому текстовому редакторі, то побачимо, яким чином він відформатований. А переглянути результат можна у програмі-браузері.

Мал. 16

Акаунт користувача на динамічному сайті facebook.com

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

Синтаксис HTML

Розглянемо основні правила запису коду HTML на прикладі декількох елементів. Детальніше про ці елементи і їх використання будемо говорити далі. Зараз варто звернути увагу саме на розміщення тегів та використання атрибутів. Редагуватимемо вихідний код у програмі «Блокнот» (Notepad), яка є на більшості комп’ютерів. Для того щоб знайти її, заходимо в меню «Пуск»>«Програми» >«Стандартні». Файл одразу зберігаємо як HTML. Для цього заходимо «Файл”>“Зберегти як”. У вікні вибираємо теку, куди будемо зберігати документ. У полі «Формат файлу» обираємо «Всі формати», у полі «Ім’я» вписуємо ім’я файлу, ставимо крапку і дописуємо розширення html. За правилами ім’я файлу повинно бути написане латинськими літерами, назва – не містити великих літер, крапок, спеціальних символів та пробілів.

Правильна назва: proba.html

Неправильні назви: проба.html, pr%ba.html, Proba.html, proba documenta.html

Для перегляду нашого документу будемо використовувати браузер Opera, або будь-який інший. При макетуванні HTML сторінок на вашому комп’ютері повинні одночасно бути відкритими дві програми: «Блокнот», у якому ми будемо програмувати, та браузер, у якому ми зможемо переглядати відформатований документ. Для пришвидшення роботи варто запам’ятати такі сполучення клавіш, так звані «гарячі клавіші»:

Ctrl+S — у “Блокноті”, коли необхідно зберегти відредагований код.

Alt+Tab – для швидкого перемикання між вікнами у Windows. У нашому випадку – між “Блокнотом” та браузером.

Мал. 17

Іконка блокноту у меню «Пуск« операційної системи Windows XP

F5 – у браузері, щоб оновити вид документа після змін, які внесено у вихідний код сторінки.

Для початку впишемо в нашу сторінку будь-яких три слова і збережемо. Перейдемо на сторінку браузера і оновимо. В тілі документа повинні з’явитися вписані слова. Вони поки що не містять жодних ознак макетування. Браузер підставляє шрифт, розмір тексту за замовчуванням. Далі спробуємо відформатувати його.

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

Гіпертекстова <b>мова</b> розмітки

Слово «мова» оточене з обох боків тегами. Перший тег позначає

початок дії елемента, який робить слово напівжирним. Останній </ b> показує, де закінчується дія елемента. Якщо ми переставимо кінцевий тег на одне слово далі, то воно також стане напівжирним. Вся конструкція <b>мова</b> і є тим, що ми будемо називати елементом. Для тегів можна використовувати як великі, так і малі літери, для мови HTML це неважливо. Однак веб-дизайнери «старої школи» записують початковий тег великою літерою, а кінцевий – малою: <B>мова</b>. Це ніби особливий почерк, за яким угадувалася майстерність веб-програміста. Окрім того, це допомагало візуально розібратися у вихідному коді. Однак новітні тенденції в HTML свідчать про те, що це правило уже не актуальне.

У мові HTML діє правило: одні елементи вкладаються в інші. Спробуємо наше слово зробити окрім напівжирного ще й курсивом. Для цього оточуємо елемент <B>мова</b> тегами на позначення курсиву:

Гіпертекстова <I><B>мова</b></i> розмітки

Зберігаємо, переходимо на браузер, оновлюємо сторінку. Слово повинно стати курсивним. Проте, навіть якщо ви зробите помилку і неправильно вкладете один елемент в інший, програма-переглядач спробує проігнорувати помилку. Сучасні браузери запрограмовані на такі стандартні помилки і не будуть видавати повідомлення про невірний код. Наприклад, якщо ви забудете поставити кінцевий тег </i>, то курсивним стане весь текст до кінця сторінки. Тепер спробуємо написати ще один рядок нашого документу.

Гіпертекстова <I><B>мова</b></i> розмітки. Веб-дизайн.

Оновивши документ у браузері, ви побачите, що новий рядок не був створений, а текст продовжується після вашого першого рядка. Браузер не реагує на форматування, які ви робите з текстом без застосування HTML. Для переносу використайте тег <BR>. Це

Мал. 18

Вигляд коду у браузері

один з рідкісних елементів, які не мають кінцевого тегу. Таких елементів небагато.

Гіпертекстова <I><B>мова</b></i> розмітки.

<BR>

Веб-дизайн.

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

Також браузери не помічають більше одного пробілу. Спробуйте у вашому документі поставити між словами двадцять пробілів і подивіться, що браузер покаже всього один. Для того щоб вписувати пробіли, а також специфічні знаки, такі як &®§, у мові запровадили спецсимволи. Починаються вони зі знака & і закінчуються крапкою з комою. Всі символи можна подивитися у додатку №1. Так, пробіл –   поставте кілька пробілів у вашому тексті.

Гіпертекстова <I><B>мова</b></i> розмітки.

<BR>

Веб       дизайн.

Деякі елементи мають кілька функцій. Так, наприклад, елемент <H1></h1> відповідає за створення заголовків. Він одночасно збільшує розмір шрифта і перекидає увесь текст за собою на новий рядок.

<H1>Гіпертекстова</h1> <I><B>мова</b></i>

розмітки. <BR>

Веб       дизайн.

Для елементів можна застосовувати додаткові функції, які зазначають атрибутами. Кожен атрибут має дві частини. Перша – це стандартне ім’я атрибута, і друга, в якій записують його значення. Між іменем та значенням ставлять знак рівності, значення повинно бути взяте в лапки. Наприклад, color=”red”. Ім’я color вказує, що цим атрибутом ми визначаємо колір. ”red” – його значення, яке може змінюватися. У нашому випадку це червоний колір. HTML, як і більшість мов програмування, базується на англійських словах. У значення можна підставити кольори англійською мовою. Назви стандартних кольорів дивіться у додатку №2. Якщо вам потрібен специфічний колір, його код можна визначити за допомогою будь-якого растрового редактора (Adobe Photoshop, Corel Photopaint) і записати через дієз код RGB:

<H1 color=”red”>Гіпертекстова</h1> <I><B color=”#000080”>мова</b></i> розмітки. <BR> Веб       дизайн.

Багато елементів можна використовувати тільки разом. До таких належать таблиці, списки, карти. Наприклад елемент <li>, що позначає рядок нумерованого списку буде працювати виключно всередині елемента <UL></ul>, що показує межі списку. Впишіть:

Мал. 19

Вигляд коду у браузері

<H1>Континенти:</h1>

<UL>

<LI>Євразія <LI>Південна Америка <LI>Північна Америка <LI>Африка <LI>Австралія <LI>Антарктида

</ul>

Елемент <LI> також має тільки початковий тег. Кожен наступний тег <LI> завершає попередній.

Для створення структури документу використовують такі елементи: <HTML>, який показує межі нашого документу, <HEAD> – у цьому елементі зазначають інформацію, яка необхідна браузерам та пошуковим машинам, а також стилі, які стосуються всього документу, <BODY> – елемент, у якому розміщують інформацію, що буде показана у тілі браузера. Ці елементи розташовують у такому порядку:

<HTML>

<HEAD>

</head>

<BODY>

</body>

</html>

Зверніть увагу, що спочатку вписують елемент <HEAD></head>, а потім <BODY></body>. На початку вивчення мови HTML цей порядок часто порушують, оскільки інтуїтивно спрацьовує правило, що елементи вкладаються один в інший, і голову документа «засовують» в тіло, або навпаки. Однак слід їх вписувати окремо.

У <HEAD> записують багато специфічних елементів, які можуть не відображатися у документі, але які необхідні для пошукових машин. Наприклад, група елементів <META>:

<HEAD>

<META http-equiv=”Content-Type” content=”text/ html; charset=windows-1251”>

<META name=”Keywords” content=”Антарктида, станція, полюс, Antarctica, pole, station”> <META name=”description” content=”Цей сайт присвячений дослідженню Антарктиди”>

<META name=”GENERATOR» content=”Notepad (Win 95, I)»>

<META name=”Author» content=”Oleksij Sytnyk»> </head>

Елемент <META> не має кінцевого тегу. Всю інформацію вписують у вигляді атрибутів, які доволі складно запам’ятати, тому краще їх

записувати, звіряючись із підручником. Атрибути записують через пробіл. У першому елементі ми вказуємо кодування тексту (детальніше про кодування див. ст.№????). У другому елементі ми зазначаємо ключові слова нашої сторінки. Ці слова необхідні для пошукових машин, щоб точніше видавати результати пошуку. Вебдизайнери 90-х використовували цей елемент, щоб збільшити відвідуваність своїх сайтів. Вони вписували туди слова, які найбільше шукають у мережі, наприклад «реферат», щоб пошукові машини давали на них посилання. Це порушувало нормально роботу, тому більшість пошукових машин відмовилися від практики враховувати ключові слова у своїх пошукових алгоритмах. Однак не варто нехтувати цим елементом, оскільки відмовилися не всі і визначати ключові слова все одно доведеться для оптимізації сайту (детальніше про оптимізацію ст.№???). Наступний елемент з атрибутом description відповідає за

Мал. 19

МЕТА-теги офіційної сторінки президента України president.gov.ua