ВхідЗображення на веб сторінках. Графіка на WEB-сторінці в HTML
Для вставки зображення в текст Web-сторінки використовується одинарний тег (Табл. П 1). Атрибути цього тега задають всі параметри зображення, що розміщується на сторінці. Обов'язковою є атрибут SRC, що визначає адресу і ім'я графічного файлу. Якщо атрибут SRC не встановлено, то буде відображатися тільки значок порожнього зображення.
структура тега з атрибутом SRC має вигляд:
.
Якщо графічний файл з ім'ям Інститут знаходиться в тій же папці, що і Web-сторінка, то для його розміщення слід записати:
.
Файл Формат
Для розміщення графічного файлу з ім'ям МІНСЬК, знахо-дящегося за адресою D: \\ Колекція \\ Міста \\ МІНСК.GIF, слід записати .
За допомогою тега на Web-сторінці розміщується графічний файл, що знаходиться на іншому комп'ютері в глобальній мережі «Інтернет».
Щоб створити Web-сторінку з фотографією нашого інституту, яка приведена на рис. 4.1, потрібно ввести наступний HTML-код:
наш інститут
Мал. 4.1. Web-сторінка з фотографією інституту
У наведеному прикладі висота фотографії (HEIGHT) становить 200 пікселів, а ширина (WIDTH) - 300 пікселів. Для розміщення фотографії створюється абзац з вирівнюванням по центру.
горизонтальні лінії
Розміщення на Web-сторінці горизонтальних ліній здійснюється за допомогою одинарного тега
. За допомогою атрибутів SIZE, WIDTH, COLOR і ALIGN змінюються відповідно товщина, ширина, колір і спосіб вирівнювання ліній.
Розглянемо кілька прикладів, що пояснюють розміщення гори-зонтальним ліній:
1.
- горизонтальна лінія на всю сторінку товщиною 2 пікселя.
2.
WIDTH \u003d "200" ALIGN \u003d "RIGHT"\u003e - горизонтальна лінія зеленого кольору товщиною 15 пікселів, шириною 200 пікселів і вирів-Нівань по правому краю.
3.
- горизонтальна лінія синього кольору на всю сторінку товщиною 25 пікселів.
4.
WIDTH \u003d "300" ALIGN \u003d "LEFT"\u003e - горизонтальна лінія червоного кольору товщиною 20 пікселів, шириною 300 пікселів і вирівнюванням по лівому краю.
Відображення ліній для чотирьох записаних прикладів показано на рис. 4.2.
Мал. 4.2. Лінії на Web-сторінці
ТАБЛИЦІ
створення таблиць
Створення таблиці здійснюється за допомогою парного тега
в коді HTML.
Будь-яка таблиця складається з рядків, а рядки - з осередків. Для фор-мування рядків і осередків таблиці використовуються такі ключові слова:
Ці теги записуються всередині парного тега
Формування таблиці відбувається по рядках - спочатку задається один рядок і в ній вказується необхідна кількість осередків, потім другий рядок і т.д.
Для того щоб на Web-сторінці отримати таблицю, представлену на рис. 5.1, необхідно набрати наступний HTML-код:
| Автомобілі | Ціна | Форд | 5000 | гольф | 6000 |
|---|
то товщина зовнішнього кордону буде дорівнює 6 пикселям. Щоб кордону таблиці не відображалися, необхідно атрибуту BORDER привласнити значення, рівне 0, або просто цей атрибут опустити.
Привіт шановні читачі блогу! У цій статті ви дізнаєтеся все про те як вставити зображення на html сторінку. У вас є кілька зображень, які ви хочете помістити на свою сторінку або ви хочете помістити на свій сайт логотип? Все це легко. Прочитавши цю статтю, ви зможете без будь-яких труднощів вставляти картинки на свої html сторінки. Для цього ми детально поговоримо про тезі img і його атрибутах, коротко розглянемо формати графічних файлів, таких як gif, jpeg і png, а також подивимося нові можливості HTML5, які спрощують вставку відео і аудіо на сайт.
Через те що графічні дані і текст html неможливо об'єднати в одному файлі, для їх відображення на сайті застосовується інший підхід, ніж з іншими елементами html-сторінок. Перш за все, графічні зображення, та й інші мультимедійні дані зберігаються в окремих файлах. А для їх впровадження в web-сторінку використовують спеціальні теги, які містять посилання на ці окремі файли. Зокрема таким тегом є тег img. Зустрівши такий тег з адресою, браузер спочатку запитує у Web-сервера відповідний файл із зображенням, аудіо- або відеороликом, а тільки потім відображає його на Web-сторінці.
Всі графічні зображення і взагалі будь-які дані, які зберігаються в окремих від web-сторінки файлах називаються впровадженими елементами сторінки.
Перш ніж вставляти картинки і детально розглядати тег «img», варто трохи дізнатися про графічних форматах.
Формати графічних зображень.
Існує безліч різних графічних форматів, але браузери підтримують лише кілька. Розглянемо три з них.
1. формат JPEG(Joint Photographic Experts Group). Досить популярний формат, застосовуваний для зберігання зображень. Підтримує 24-бітовий колір і зберігає всі півтони в фотографіях незмінними. Але jpeg не підтримує прозорість і спотворює дрібні деталі і текст в зображеннях. JPEG використовується в основному для зберігання фотографій. Файли цього формату мають розширення jpg, jpe, jpeg.
2. формат GIF(Graphics Interchange Format). Головне достоїнство цього формату можливість зберігати відразу кілька зображень в одному файлі. Це дозволяє створювати цілий анімаційні ролики. По-друге він підтримує прозорість. Головний недолік це підтримка всього лише 256-кольорів, що нікуди не годиться для зберігання фотографій. GIF в основному використовується для зберігання логотипів, банерів, зображення з прозорими ділянками і містять текст. Файли цього формату мають розширення gif.
3. формат PNG(Portable Network Graphics). Це формат був розроблений як заміна застарілого GIF, а також, в деякій мірі, JPEG. Підтримує прозорість, але не дозволяє створювати анімацію. Даний формат має розширення png.
При створенні сайтів зазвичай використовують зображення в форматі JPEG або GIF, але іноді використовують PNG. Головне розібратися в яких випадках який формат краще використовувати. Якщо коротко, то:
- GIF використовується в основному для анімації;
- PNG - формат для всього іншого (іконки, кнопки та ін.).
JPEG найкраще використовувати для зберігання фотографій або напівтонових картинок що не містять тексту;
Вставка картинок в html сторінки
Отже, як все таки вставити зображення на веб-сторінку? Вставити зображення дозволяє одинарний тег img. Браузер поміщає зображення в тому місці веб-сторінки, де зустріне тег img.
Код вставки картинки в html сторінку має такий вигляд:
Даний html-код помістить на веб-сторінку зображення, яке зберігається в файлі image.jpg, який знаходиться в одній і тій же папці з веб-сторінкою. Як ви могли помітити адресу картинки вказується в атрибуті src. Що таке я вже розповідав. Так ось, атрибут src обов'язковий атрибут, який служить для вказівки адреси файлу із зображенням. Без атрибуту src тег img не має сенсу.
Наведу ще кілька прикладів вказівки адреси файлу із зображенням:
цей html-код вставить на сторінку картинку з назвою image.jpg, яка зберігається в папці images, розташованої в корені веб-сайту.
В атрибуті src можна вказувати не тільки відносні посилання на зображення. Так як зображення зберігаються в мережі разом з html-сторінками, тому у кожного файлу із зображенням є свій власний url-адреса. Тому в атрибут src можна вставляти url-адресу зображення. наприклад:
Даний код вставить на сторінку зображення з сайту mysite.ru. URL-aдpec зазвичай застосовується, якщо ви вказуєте на зображення, що знаходиться на іншому сайті. Для зображень зберігаються на вашому сайті краще використовувати відносні посилання.
Тег img є рядковим елементом, тому його краще поміщати всередину блокового елемента, наприклад всередину тега «Р» - абзац:
Давайте попрактікуемся і вставимо на нашу сторінку з попередніх статей про html зображення. Я створю поруч з html-файлом своєї сторінки папку «images» і розміщу туди файл з картинкою «bmw.jpg», який виглядає так:
Тоді html-код сторінки вставленої картинкою буде таким:
І дивимося результат відображення в браузері:
Як ми бачимо нічого складного в розміщенні зображень на веб-сторінках немає. Далі розглянемо кілька інших важливих атрибутів тега «img».
Атрибут alt - як запасний варіант
Оскільки файли з зображеннями зберігаються окремо від веб-сторінок, то для їх отримання браузеру доводиться робити окремі запити. А що якщо зображень на сторінці буде дуже багато і швидкість підключення до мережі маленька, тоді на завантаження додаткових файлів знадобиться чимало часу. А ще гірше якщо зображення було видалено з сервера без вашого відома.
У цих випадках сама веб-сторінка буде успішно завантажена, тільки замість зображень будуть відображатися білі прямокутники. Тому, щоб повідомити користувачеві інформацію, що представляє із себе зображення застосовується. За допомогою цього атрибута вказується так званий текст заміни, який буде відображатися в порожньому прямокутнику поки зображення не завантажиться:
І приблизно так це виглядає:
Задаємо розміри зображення
Залишилося ще пару атрибутів тега img, про які вам слід знати. Це пара атрибутів width і height. Ви можете використовувати їх, щоб вказати розміри зображення:
В обох атрибутах вказується розмір в пікселях. Атрибут width вказує браузеру якої ширини має бути зображення, а атрибут height якої висоти. Ці два атрибути можна застосовувати разом і окремо. Наприклад, якщо ви вкажете тільки атрибут width, то браузер підбере висоту автоматично пропорційно зазначеної ширині і також в разі використання тільки атрибута height. У разі якщо ви не вкажіть ці атрибути зовсім, то браузер автоматично визначити розмір зображення перед виведенням його на екран. Варто лише зауважити, що вказування розмірів зображень трохи прискорить роботу браузера при відображенні сторінки.
На цьому про вставці зображень на сторінки поки все, далі розглянемо як вставити аудіо або відео на сайт ...
Вставляємо відео і аудіо за допомогою HTML 5
У новій специфікації html5 з'явилося кілька нових тегів за допомогою яких можна дуже легко вставляти файли мультимедіа. Це перш за все стосується відео і аудіо.
для вставки аудіо HTML5 надає парний тег AUDIO. Адреса файлу, в якому зберігається аудіоролик, вказується за допомогою вже знайомого нам атрибута src:
Тег «audio» створює на сторінці блоковий елемент. За замовчуванням браузер не буде відтворює аудіоролик. Що б він це зробив, в тезі audio необхідно вказати особливий атрибут autoplay. Особливий, бо він не має значення. Досить одного присутності цього атрибута в тезі, щоб він почав діяти.
За замовчуванням аудіоролик ніяк не відображається на web-сторінці. Але якщо в тезі «audio» поставити атрибут без значення controls, Браузер виведе в тому місці веб-сторінки, де проставлено тег audio, елементи управління відтворенням аудиоролика. Вони включають кнопку запуску і припинення відтворення, шкалу відтворення і регулятор гучності.
визначення 1
Web-сторінка - це текстовий файл, створений на мові HTML і розміщений в World Wide Web (WWW). У Web-сторінці крім тексту можуть міститися гіпертекстові посилання, за якими можна здійснити перехід до інших Web-сторінок і переглянути їх, а також вставки у вигляді графіки, анімації, відеокліпів і музики.
За допомогою мови HTML можна:
- Створювати і редагувати Web-сторінки.
- Редагувати документи HTML-формату з Інтернету з урахуванням функціонування всіх впроваджених в документ об'єктів (картинок, анімацій і т.д.).
- Використовуючи гіпертекстові посилання і можливість впровадження в документ HTML-формату малюнків, діаграм, анімації, відеокліпів, музичного та мовного супроводу, текстових спецефектів, створювати мультимедійні презентації, слайд-шоу, демонстраційні проекти.
зауваження 1
Графічні зображення, як правило, зберігаються в окремих файлах. У мові HTML є особливі теги, за допомогою яких в кодах Web-сторінок прописуються посилання, що представляють собою фактичні адреси цих файлів в мережі Інтернет. Зустрічаючи такі теги, Web-оглядач робить запит Web-сервера на відповідний файл із зображенням, аудіо - або відеороликом і виводить його на Web-сторінку в місце знаходження даного тега. Будь-які дані (зображення, аудіо- та відеоролики та ін.), Які зберігаються в окремих від Web-сторінки файлах, називають впровадженими елементами Web-сторінок. Розглянемо докладніше процес додавання зображення на Web-сторінку.
Додавання зображень на Web-сторінку
Привабливість Web-сторінок полягає саме в використовуваної на них графіку і інших різних об'єктах. Додати зображення на сторінку не складно. А додати графіку, здатну зробити зовнішній вигляд Web-сторінки більш презентабельним і професійним, набагато складніше, будуть потрібні спеціальні знання.
Додати зображення на сторінку можна, використовуючи тег джерела зображення, який має вигляд:
де - власне сам тег, а scr - його атрибут. Так як атрибут scr є обов'язковим, то можна сказати, що вся ця запис являє собою один загальний тег. У тезі джерела зображення не використовується відповідного закриває тeга, так як тег джерела є самодостатнім, і тому при його використанні необхідно додавати в кінці закриває косу рису:.
Додавання альтернативних написів
В Інтернеті дуже часто можна зустріти різні написи, які відображаються при наведенні курсором на який-небудь графічний об'єкт Web-сторінки. У цих написах зазвичай міститься додаткова інформація про самому зображенні або ж про область сторінки, на якій воно знаходиться.
Нижче представлений НТМ-код, в якому атрибут alt доданий всередину тега. Даний атрибут аналогічно атрибуту src повідомляє браузеру якусь додаткову інформацію про зображення і його також завжди можна використовувати разом з тeгом.
alt \u003d "(! LANG: Це картинка!" />!}
Функція атрибута alt полягає у визначенні для доданого на Web-сторінку графічного елементу альтернативного тексту. Альтернативним він називається тому, що відображається на екрані як альтернатива для самого зображення. Атрибут alt виконує ще одну важливу функцію. Він дозволяє веб-дизайнеру бути впевненим в тому, що, якщо відвідувач сторінки не побачить на своєму екрані зображення, він у будь-якому випадку хоча б зможе ознайомитися з доданою до цього зображення текстовою інформацією.
При використанні атрибуту alt для кожного тега, важливо бути уважним, щоб не призначити графічним елементам невідповідні їм текстові повідомлення. Наприклад, немає сенсу в додаванні альтернативних текстових написів до елементів зовнішнього оформлення сторінки. Щоб уникнути таких помилок, можна привласнити атрибуту alt цих елементів пусте значення (alt \u003d ""). Якщо не поставити значень інших атрибутів, браузер відтворить зображення в початковому розмірі, при цьому вирівняє верхній край зображення з верхнім краєм знаходиться поруч текстового рядка. Однак можна змінити обидва цих параметра, використовуючи теги стильових таблиць.
атрибути зображення
У тезі є атрибути, які дозволяють змінювати розмір зображень. Ось деякі з них:
- height - за допомогою нього визначається висота зображення в пікселях або відсотках;
- width - за допомогою нього визначається ширина зображення в пікселях або відсотках.
Налаштування висоти і ширини зображення
Розміри зображень, розміщених на Web-сторінках, можуть задаватися за допомогою вищеназваних атрибутів. Причому їх значення задають або як фіксована кількість пікселів, або у відсотках щодо розмірів сторінки. У представленому нижче коді HTML перший тег містить розміри вихідного зображення в пікселях (60 пікселів по вертикалі і 60 пікселів по горизонталі), другий тег ширину того ж зображення встановлює рівний 6% від ширини сторінки, а висоту - 10% відносно висоти сторінки.
аlt \u003d "Це картинка!" hеight \u003d "60" width \u003d "60" /\u003e
аlt \u003d "Це картинка!" height \u003d "10%" width \u003d "6%" /\u003e
зауваження 2
При відтворенні зображень в своєму вікні браузер однаково добре справляється з обробкою значень обох видів. Однак необхідно пам'ятати про те, що у відвідувачів Web-сторінок на комп'ютерах може бути встановлено екранне дозвіл, відмінне від вашого. Тому при зміні розмірів зображення, потрібно обов'язково ставити обидва значення зображення (висоту і ширину). При зміні тільки одного з цих значень, на екрані зображення може виявитися витягнутим по вертикалі або горизонталі.
Можна використовувати створення ілюзії швидкого завантаження фотографій. Для цього потрібно завжди вказувати значення атрибутів height і width в незалежності від того, змінені розміри зображення чи ні. Оскільки вони повідомляють браузеру важливі відомості про кількість місця, необхідного для розміщення зображення на сторінці. У відповідь браузер позначає необхідне для зображення простір і продовжує будувати інші елементи сторінки, не припиняючи завантаження самого зображення. У зв'язку з цим здається, що сторінка вантажиться швидше, так як її відвідувачам не доводиться чекати повного завантаження зображення, щоб побачити іншу інформацію на сторінці.
Для того щоб зображення на будь-якому екрані незалежно від його дозволу займало точно певний простір по ширині сторінки, необхідно використовувати процентні значення. Якщо ж потрібно, щоб постійним був дозвіл самого малюнка (його розмір у пікселях), необхідно використовувати значення в пікселях.
Вирівнювання тексту та графіки
Для вирівнювання зображення по правому (right) або лівому (left) краю текстового рядка використовується атрибут align тега. наприклад:
аlt \u003d "Це картинка!" hеight \u003d "60" width \u003d "60" align \u003d "right" /\u003e
Для вирівнювання зображення по вертикалі щодо текстового рядка можна також використовувати цей атрибут, який може приймати значення top, bottom і center. Значення top вказує на вирівнювання верхнього краю зображення по верхньому краю навколишнього його тексту. Значення bottom вказує на вирівнювання нижнього краю зображення по нижньому краю навколишнього його тексту. Значення center вказує на вирівнювання центру зображення по центру текстового рядка.
Використання зображень як посилання
Зображення використовуються також для оформлення гіперпосилань на інші документи. В HTML зображення перетворюється в гіперпосилання так само, як і напис. Для цього використовується тeг, в який полягає елемент сторінки (в нашому випадку зображення), який повинен стати посиланням. Перехід за посиланням буде здійснюватися після клацання на дане зображення.
мініатюри зображень
Крім вищевказаного способу, в якому зображення виступає в якості гіперпосилання, його також можна використовувати як гіперпосилання, що здійснює перехід від одного зображення до іншого. Це необхідно в тих випадках, коли розмір зображення, яке хочуть опублікувати на Web-сторінці, досить великий і буде дуже довго завантажуватися, що неприйнятно для багатьох відвідувачів. Тому створюють зменшену копію цього зображення (мініатюру) і представляють її гіперпосиланням. Якщо відвідувач сторінки зацікавиться даними зображенням, він, клацнувши на мініатюру, зможе перейти до перегляду повноцінного зображення. Наведемо приклад коду:
аlt \u003d "Клацніть, щоб побачити нормальне зображення."
hеight \u003d "60" width \u003d "60" /\u003e
Секрети успішного використання зображень
Зображення несуть масу наочної інформації для відвідувачів, і це робить їх привабливими, до того ж їх досить-таки просто додавати на Web-сторінку, але при цьому необхідно дотримуватися певних правил створення сайту, якщо ми хочемо, щоб він став популярним в мережі.
При створенні сторінок потрібно намагатися розміщувати на них зображення невеликих розмірів, оскільки зображення великих розмірів зажадають для завантаження багато часу, а деякі користувачі все ще для доступу до мережі як і раніше використовують канали зв'язку з низькою пропускною здатністю, і тому розміри завантаження мають для них принципове значення.
зауваження 3
Важливим є і загальний розмір файлу всього HTML-документа, який, в свою чергу, буде залежати не тільки від розміру зображень, що містяться в ньому, а й від їх кількості. Потрібно бути уважними при використанні атрибуту alt, щоб зміст текстового повідомлення завжди відповідало самому зображенню. І в зворотному випадку: необхідно стежити за тим, щоб зображення відповідало представленої на сторінці текстової інформації.
При використанні зображень, запозиченим у мережі Інтернет, на створюваній сторінці, необхідно перевірити, чи не захищені ці зображення авторськими правами.
HTML-зображення додаються на веб-сторінки за допомогою тега . Використання графіки робить веб-сторінки візуально привабливішим. Зображення допомагають краще передати суть і зміст веб-документа.
За допомогою HTML-тегів
Вставка зображень в HTML-документ
1. Тег ![]()
елемент представляє зображення і його резервний контент, який додається за допомогою атрибута alt. Так як елемент
є рядковим, то рекомендується розташовувати його всередині блокового елемента, наприклад,
або
тег має обов'язковий атрибут src, значенням якого є абсолютний або відносний шлях до зображення:
для тега доступні наступні атрибути:
| Атрибут | Опис, прийняте значення |
|---|---|
| alt | Атрибут alt додає альтернативний текст для зображення. Виводиться на місці появи зображення до його завантаження або при відключеній графіку, а також виводиться спливаючій підказкою при наведенні курсору миші на зображення. Синтаксис: alt \u003d "(! LANG: опис зображення" . !} |
| crossorigin | Атрибут crossorigin дозволяє завантажувати зображення з ресурсів іншого домену за допомогою CORS-запитів. Зображення, завантажені в полотно за допомогою CORS-запитів, можуть бути використані повторно. Допустимі значення: anonymous - Cross-origin запит виконується за допомогою HTTP-заголовка, при цьому облікові дані не передаються. Якщо сервер не дає облікові дані сервера, з якого запитується контент, то зображення буде зіпсовано і його використання буде обмежено. use-credentials - Cross-origin запит виконується з передачею облікових даних. Синтаксис: crossorigin \u003d "anonymous". |
| height | Атрибут height задає висоту зображення в px. Синтаксис: height \u003d "300". |
| ismap | Атрибут ismap вказує на те, що картинка є частиною зображення-карти, розташованого на сервері (зображення-карта - зображення з інтерактивними областями). При натисканні на зображення-карту координати передаються на сервер у вигляді рядка запиту URL-адреси. Атрибут ismap допускається тільки в разі, якщо елемент Синтаксис: ismap. |
| longdesc | URL розширеного опису зображення, яке доповнює атрибут alt. Синтаксис: longdesc \u003d "http://www.example.com/description.txt". |
| src | Атрибут src задає шлях до зображення. Синтаксис: src \u003d "flower.jpg". |
| sizes | Задає розмір зображення в залежності від параметрів відображення. Працює тільки при заданому атрибуті srcset. Значенням атрибута є одна або кілька рядків, зазначених через кому. |
| srcset | Створює список джерел для зображення, які будуть обрані, виходячи з дозволу екрану. Може використовуватися разом або замість атрибута src. Значенням атрибута є одна або кілька рядків, розділених комою. 
|
| usemap | Атрибут usemap визначає зображення в якості карти-зображення. Значення обов'язково має починатися з символу #. Значення асоціюється зі значенням атрибута name або id тега |
| width | Атрибут width задає ширину зображення в px. Синтаксис: width \u003d "500". |
1.1. Адреса зображення
Адреса зображення може бути вказаний повністю (абсолютний URL), наприклад:
url (http://anysite.ru/images/anyphoto.png)
Або ж через відносний шлях від документа або кореневого каталогу сайту:
url (../ images / anyphoto.png) - відносний шлях від документа,
url (/images/anyphoto.png) - відносний шлях від кореневого каталогу.
Це інтерпретується наступним чином:
../ - означає піднятися вгору на один рівень, до кореневого каталогу,
images / - перейти до папки з зображеннями,
anyphoto.png - вказує на файл зображення.
1.2. розміри зображення
Без завдання розмірів зображення малюнок відображається на сторінці в реальному розмірі. Відредагувати розміри зображення можна за допомогою атрибутів width і height. Якщо буде поставлено тільки один з атрибутів, то другий буде обчислюватися автоматично для збереження пропорцій малюнка.
1.3. Формати графічних файлів
формат JPEG (Joint Photographic Experts Group). Зображення JPEG ідеальні для фотографій, вони можуть містити мільйони різних квітів. Стискають зображення краще GIF, але текст і великі площі із суцільним кольором можуть покритися плямами.
формат GIF (Graphics Interchange Format). Ідеальний для стиснення зображень, в яких є області із суцільним кольором, наприклад, логотипів. GIF-файли дозволяють встановити один з кольорів прозорим, завдяки чому фон веб-сторінки може проявлятися через частину зображення. Також GIF-файли можуть включати в себе просту анімацію. GIF-зображення містять всього лише 256 відтінків, через що зображення виглядають плямистими і нереалістичного кольору, як плакати.
формат PNG (Portable Network Graphics). Включає в себе кращі риси GIF- і JPEG-форматів. Містить 256 кольорів і дає можливість зробити один з кольорів прозорим, при цьому стискає зображення в менший розмір, ніж GIF-файл.
формат APNG (Animated Portable Network Graphics). Формат зображення, заснований на форматі PNG. Дозволяє зберігати анімацію, а також підтримує прозорість.
формат SVG (Scalable Vector Graphics). SVG-малюнок складається з набору геометричних фігур, описаних у форматі XML: лінія, еліпс, багатокутник і т.п. Підтримується як статична, так і анімована графіка. Набір функцій включає в себе різні перетворення, альфа-маски, ефекти фільтрів, можливість використання шаблонів. Зображення в форматі SVG можуть змінюватися в розмірі без зниження якості.
формат BMP (Bitmap Picture). Являє собою нестиснене (оригінальна) растрове зображення, шаблоном якого є прямокутна сітка пікселів. Bitmap-файл складається з заголовка, палітри і графічних даних. У заголовку зберігається інформація про графічному зображенні і файлі (глибина пікселів, висота, ширина і кількість квітів). Палітра вказується тільки в тих Bitmap-файлах, які містять палітровие зображення (8 і менше біт) і перебуває не більше ніж з 256 елементів. Графічні дані представляють саму картинку. Глибина кольору в даному форматі може бути 1, 2, 4, 8, 16, 24, 32, 48 біт на піксель.
формат ICO (Windows icon). Формат зберігання значків файлів в Microsoft Windows. Також, Windows icon, використовується як іконка на сайтах в інтернеті. Саме картинка такого формату відображається поруч з адресою сайту або закладкою в браузері. Один ICO-файл містить один або кілька значків, розмір і кольоровість кожного з яких задається окремо. Розмір значка може бути будь-яким, але найбільш вживані квадратні значки зі сторонами 16, 32 і 48 пікселів.
2. Тег
тег
Для тега доступний атрибут name, який задає ім'я карти. Значення атрибут name для тега
елемент
3. Тег
тег описує тільки одну активну область у складі карти зображень на стороні клієнта. Елемент не має закриває тега. Якщо одна активна область перекриває іншу, то буде реалізована перша посилання зі списку областей.
| Атрибут | Короткий опис |
|---|---|
| alt | Задає альтернативний текст для активної області карти. |
| coords | Визначає позицію області на екрані. Координати задаються в одиницях довжини і розділяються комами: для кола - координати центру і радіус кола; для прямокутника - координати верхнього лівого і правого нижнього кутів; для багатокутника - координати вершин багатокутника в потрібному порядку, також рекомендується вказувати останні координати, рівні першим, для логічного завершення фігури. |
| download | Доповнює атрибут href і повідомляє браузеру, що ресурс повинен бути завантажений в момент, коли користувач клацає по посиланню, замість того, щоб, наприклад, попередньо відкрити його (як PDF-файл). Ставлячи ім'я для атрибута, ми таким чином задаємо ім'я завантажуваного об'єкту. Дозволяється використовувати атрибут без вказівки його значення. |
| href | Вказує URL-адресу для посилання. Може бути вказано абсолютний або відносний адресу посилання. |
| hreflang | Визначає мову пов'язаного веб-документа. Використовується тільки разом з атрибутом href. Прийняті значення - абревіатура, що складається з пари букв, що позначають код мови. |
| media | Визначає, для яких типів пристроїв файл буде оптимізовано. Значним може бути будь-який медіа-запит. |
| rel | Доповнює атрибут href інформацією у цій справі між поточним і пов'язаним документом. Прийняті значення: alternate - посилання на альтернативну версію документа (наприклад, друковану форму сторінки, переклад або дзеркало). author - посилання на автора документа. bookmark - постійний URL-адреса, що використовується для закладок. help - посилання на довідку. license - посилання на інформацію про авторські права на даний веб-документ. next / prev - вказує зв'язок між окремими URL. Завдяки цій розмітці Google може визначити, що зміст даних сторінок пов'язано в логічній послідовності. nofollow - забороняє пошуковій системі переходити за посиланнями на даній сторінці або по конкретній посиланням. noreferrer - вказує, що переході по посиланню браузер не повинен посилати заголовок HTTP-запиту (Referrer), в який записується інформація про те, з якої сторінки прийшов відвідувач сайту. prefetch - вказує, що цільовий документ повинен бути кешуватися, тобто браузер у фоновому режимі завантажує вміст сторінки до себе в кеш. search - вказує, що цільовий документ містить інструмент для пошуку. tag - вказує ключове слово для поточного документа. |
| shape | Задає форму активної області на карті і її координати. Може приймати наступні значення: rect - активна область прямокутної форми; circle - активна область в формі кола; poly - активна область в формі багатокутника; default - активна область займає всю площу зображення. |
| target | Вказує, куди буде завантажений документ при переході по посиланню. Набуває таких значень: _self - сторінка завантажується в поточне вікно; _blank - сторінка відкривається в новому вікні браузера; _parent - сторінка завантажується у фрейм-батько; _top - сторінка завантажується в повне вікно браузера. |
| type | Вказує MIME-тип файлів посилання, тобто розширення файлу. |
4. Приклад створення карти-зображення
1) Розмічаємо вихідне зображення на активні області потрібної форми. Координати областей можна обчислити за допомогою програми для обробки фотографій, наприклад, Adobe Photoshop або Paint.
Мал. 1. Приклад розмітки зображення для створення карти 2) Задаємо ім'я карти, додавши його в тег
Jpg "alt \u003d" (! LANG: flowers_foto" width="680" height="383" usemap="#flowers">
!}
Мал. 2. Приклад створення карти-зображення, при натисканні курсора миші на квітку здійснюється перехід на сторінку з описом
Кольори в таблиці
Як побудувати на сторінці таблицю
Списки в списках
списки визначень
нумерований список
маркований список
Як створити на сторінці список
Існує три основних типи списків: марковані, нумеровані і списки визначень. Головна відмінність перерахованих типів полягає в способі нумерації і структурі.
Найбільш часто використовується ненумерований, або маркований список. Маркований список задається тегами, а пункти списку між цими тегами - за допомогою тега
нумерований список дуже нагадує маркований. Єдиною відмінністю є те, що в нумерованому списку перед кожним пунктом замість графічних маркерів автоматично поміщаються послідовні номери або літери.
Нумерований список задається за допомогою тегів. Як і в маркірованих списках, кожен пункт задається тегом
- ключове слово TAPE.
- . тег
- задає окремий елемент, тобто кожний термін, а тег
- - іншу інформацію, яка виводиться на наступному рядку з відступом. Другий рядок інформації називається визначенням. Здається список визначень так само, як і інші списки. Єдина відмінність - для кожного елемента потрібно два тега.
Одне з чудових властивостей списків - це можливість вкладати їх один в одного. Вкладення списку в список проводиться так само, як просте створення списку. Для цього не існує спеціальних тегів HTML. Щоб не заплутати браузер, переконайтеся, що ви закрили кожен внутрішній список за допомогою тега. Вкладати один в одного можна навіть різні типи списків.
Розпочніть відтворення всі перераховані вище списки
У списків є один недолік - вони одномірні. Це означає, що ви можете мати у своєму розпорядженні інформацію тільки на наступних один за одним рядках. Таблиці ж дозволяють розташовувати дані не тільки по рядках, але і по стовпцях.
Для завдання таблиць використовується цілий ряд тегів. Теги
і
обрамляють таблицю цілком, а ряд інших тегів визначають, яким чином буде виводитися інформація. У таблиці наведено повний опис тегів таблиць.Теги HTML для побудови таблиць:
Теги Опис
і Ці теги охоплюють таблицю. тег
TAPE \u003d 1 - Стандартна нумерація (1,2,3,4,5, ...)
TAPE \u003d A - Прописні букви (A, B, C, D, ...)
TAPE \u003d a - Термінові літери (a, b, c, d, ...)
TAPE \u003d I - Римські цифри (I, II, III, IV, ...)
TAPE \u003d i - Малі римські цифри (i, ii, iii, iv, ...)
Списки визначень виглядають трохи інакше, ніж інші типи списків. Для опису кожного пункту списку в цьому випадку застосовується два тега, а не один тег