|
|
| (Одна проміжна версія одного користувача не показана) |
| Рядок 1: |
Рядок 1: |
| − | Web-сторінки можуть існувати в будь-якому форматі, але в якості стандарту прийнятий Hyper Text Markup Language - мова розмітки гіпертекстів, призначена для створення форматованого тексту, насиченого зображеннями, звуком, анімацією, відео та гіпертекстовими посиланнями на інші документи, розкидані як по всьому Web- простору, так і що знаходяться на цьому ж сервері або є складовою частиною цього ж Веб-проекту.
| + | Основна вимога до графічного редактору, який буде застосовуватися для веб-графіки, це підтримка форматів JPEG, а особливо GIF, в тому числі прозорих. А для створення банерів обов'язкова підтримка анімованих GIF-ів, і як наслідок можливість роботи з багатокадровими і багатошаровими зображеннями. Що стосується звичайної графіки для веб-сторінок, то не варто використовувати анімовані зображення. Не вдаючись у деталі, зауважимо, що 90% добрих професійно зроблених сайтів обходяться без неї. І навпаки - 90% подібних "фішок" на веб-сторінках видають непрофесіоналізм їхніх творців, і тільки дратують відвідувачів. Злегка оживити сторіночку краще за допомогою JavaScript, але і тут потрібно почуття міри, і звичайно розуміння самого скрипта. Звичайно, першої частини цієї вимоги задовольняють практично всі провідні графічні редактори. Як растрові так і векторні. Сподіваємося, різниця між ними вам відома, так що зауважимо лише, що растрові пакети, в цілому, для веб-графіки підходять більше. |
| | | | |
| − | Можна працювати на Web без знання мови HTML, оскільки тексти HTML можуть створюватися різними спеціальними редакторами і конвертерами. Але писати безпосередньо на HTML неважко. Можливо, це навіть легше, ніж вивчати HTML-редактор або конвертер, які часто обмежені в своїх можливостях, містять помилки або проводять поганий HTML код, який не працює на різних платформах.
| + | Що стосується створення GIF-анімації, то тут більшість монстрів типу Фотошопа (Adobe Photoshop) або Корела (Corel Draw) поки не встигають за часом, і цього робити не вміють. Втім більшість фірм-розробників графічного ПЗ вже випустили спеціалізовані програми для вебу. |
| | | | |
| − | Мова HTML існує в декількох варіантах і продовжує розвиватися, але конструкції HTML швидше за все будуть використовуватися і надалі. Вивчаючи HTML і пізнаючи його глибше, створюючи документ на початку вивчення HTML і розширюючи його наскільки це можливо, ми маємо можливість створювати Web-сторінки, які можуть бути переглянуті багатьма броузерами Web, як зараз, так і в майбутньому. Це не виключає можливості використання інших методів, наприклад, метод розширених можливостей, що надається Netscape Navigator, Internet Explorer або деякими іншими програмами.
| + | Для прийняття обгрунтованих рішень по створенню веб-графіки потрібно пам'ятати три наступні рекомендації: |
| | | | |
| − | Робота по HTML - це спосіб засвоїти особливості створення документів в стандартизованому мові, використовуючи розширення, тільки якщо це дійсно необхідно.
| + | 1. Використовуйте безпечні web-кольори. |
| | | | |
| − | HTML був ратифікований World Wide Web Consortium. Він підтримується декількома широко поширеними броузерами, і, можливо, стане підставою майже всього програмного забезпечення, яке має відношення до Web.
| + | 2. компроміс між якістю і розміром файлу. |
| − | '''Структура HTML документа'''
| + | |
| − | Оскільки HTML-документи записуються в ASCII-форматі, то для її створення може використаний будь-який текстовий редактор.
| + | |
| | | | |
| − | Зазвичай HTML-документ - це файл з розширенням. Html або. Htm, в якому текст розмічений HTML-тегами (англ. tag - спеціальні вбудовані вказівки). Засобами HTML задаються синтаксис і розміщення тегів, відповідно до яких браузер відображає вміст Веб-документа. Текст самих тегів Веб-браузером не відображається.
| + | 3. вибрати найкращий формат файлу для своєї графіки. |
| − |
| + | |
| − | Всі теги починаються символом '<' і закінчуються символом '>'. Зазвичай є пара тегов - стартовий (що відкриває) і завершальний (що закриває) тег (схоже на що відкриваються і закриваються дужки в математиці), між якими міститься розмічається інформація:
| + | |
| − | <p> Інформація </ p>
| + | |
| − |
| + | |
| − | Тут стартовим тегом є тег <P>, а завершальним - </ P>. Завершальний тег відрізняться від стартового лише тим, що в нього перед текстом в дужках <> стоїть символ '/' (слеш).
| + | |
| − | Браузер, який читає HTML-документ, відображає його у вікні, використовуючи структуру HTML-тегів. У кожному HTML-документі повинні бути присутніми три головні частини:
| + | |
| − | A) Оголошення HTML;
| + | |
| − | B) Заголовачная частину;
| + | |
| − | C) Тіло документа.
| + | |
| − | A) Оголошення HTML
| + | |
| − | <HTML> І </ HTML>. Пара цих тегів повідомляє програмі перегляду (браузеру) що між ними укладено документ у форматі HTML, причому першим тегом в документі повинен бути тег <HTML> (на самому початку документа), а останнім - </ HTML> (в самому кінці документа).
| + | |
| − | | + | |
| − | <HTML>
| + | |
| − | .
| + | |
| − | .
| + | |
| − | .
| + | |
| − | </ HTML>
| + | |
| − | | + | |
| − | B) Заголовна частина.
| + | |
| − | <HEAD> І </ HEAD>. Між цими тегами розташовується інформація про документ (назва, ключові слова для пошуку, опис і т.д.). Однак найбільш важливим є назва документа, яке ми бачимо у верхньому рядку вікна браузера і в списках "Вибране (BookMark)". Спеціальні програми-спайдери пошукових систем використовують назву документа для побудови своїх баз даних. Для того щоб дати назву своєму HTML-документу текст поміщається між тегами <TITLE> і </ TITLE>.
| + | |
| − | | + | |
| − | | + | |
| − | <HTML>
| + | |
| − | | + | |
| − | <HEAD>
| + | |
| − | | + | |
| − | <TITLE> Моя перша сторінка </ TITLE>
| + | |
| − | | + | |
| − | </ HEAD>
| + | |
| − | | + | |
| − | </ HTML>
| + | |
| − | | + | |
| − | C) Тіло документа.
| + | |
| − | Третьою головною частиною документа є його тіло. Воно йде відразу за заголовком і знаходиться між тегами <BODY> і </ BODY>. Перший з них повинен стояти відразу після тега </ HEAD>, а другий - перед тегом </ HTML>. Тіло HTML-документа - це місце, куди автор поміщає інформацію, відформатовану засобами HTML.
| + | |
| − | | + | |
| − | | + | |
| − | <HTML>
| + | |
| − | | + | |
| − | <HEAD>
| + | |
| − | | + | |
| − | <TITLE> Моя перша сторінка </ TITLE>
| + | |
| − | | + | |
| − | </ HEAD>
| + | |
| − | | + | |
| − | <BODY>
| + | |
| − | | + | |
| − | </ BODY>
| + | |
| − | | + | |
| − | </ HTML>
| + | |
| − | | + | |
| − | Тепер ми можемо написати HTML-код нашої сторінки:
| + | |
| − | | + | |
| − | <HTML>
| + | |
| − | | + | |
| − | <HEAD>
| + | |
| − | | + | |
| − | <TITLE> Моя перша сторінка </ TITLE>
| + | |
| − | | + | |
| − | </ HEAD>
| + | |
| − | | + | |
| − | <BODY>
| + | |
| − | | + | |
| − | Тут будуть мої сторінки!
| + | |
| − | | + | |
| − | </ BODY>
| + | |
| − | | + | |
| − | </ HTML>
| + | |
Основна вимога до графічного редактору, який буде застосовуватися для веб-графіки, це підтримка форматів JPEG, а особливо GIF, в тому числі прозорих. А для створення банерів обов'язкова підтримка анімованих GIF-ів, і як наслідок можливість роботи з багатокадровими і багатошаровими зображеннями. Що стосується звичайної графіки для веб-сторінок, то не варто використовувати анімовані зображення. Не вдаючись у деталі, зауважимо, що 90% добрих професійно зроблених сайтів обходяться без неї. І навпаки - 90% подібних "фішок" на веб-сторінках видають непрофесіоналізм їхніх творців, і тільки дратують відвідувачів. Злегка оживити сторіночку краще за допомогою JavaScript, але і тут потрібно почуття міри, і звичайно розуміння самого скрипта. Звичайно, першої частини цієї вимоги задовольняють практично всі провідні графічні редактори. Як растрові так і векторні. Сподіваємося, різниця між ними вам відома, так що зауважимо лише, що растрові пакети, в цілому, для веб-графіки підходять більше.
Що стосується створення GIF-анімації, то тут більшість монстрів типу Фотошопа (Adobe Photoshop) або Корела (Corel Draw) поки не встигають за часом, і цього робити не вміють. Втім більшість фірм-розробників графічного ПЗ вже випустили спеціалізовані програми для вебу.
Для прийняття обгрунтованих рішень по створенню веб-графіки потрібно пам'ятати три наступні рекомендації:
1. Використовуйте безпечні web-кольори.
2. компроміс між якістю і розміром файлу.
3. вибрати найкращий формат файлу для своєї графіки.
