Scribd Logo
Upload

Welcome to Scribd!

  • HTML тег визначає карту зображення

    Uploaded by

    kosoy
    9 views4 pages

    Original Title

    Img

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    9 views4 pages

    HTML тег визначає карту зображення

    Uploaded by

    kosoy

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 4

    Зображення на веб-сторінках.

    Карта зображень
    Теоретичні відомості
    Атрибути тегу <Img> Атрибути тегу <Img>

    Текстові гіперпосилання Графічні гіперпосилання

    Теги створення карти посилань Атрибути тега <Area>

    Карта зображень
    HTML тег <map> визначає карту зображення.

    Карта зображень — це зображення із клікабельними областями. Області визначаються


    одним або кількома тегами <area>.
    Етапи створення

    Правила визначення координат


    Прямокутник розміром 100 на 100 пікселів описується тегом
    <AREA shape=”rect” cords=”0,0,99,99” href=”ref.html”>, де 0,0 і 99,99 – горизонтальні
    і вертикальні координати лівого верхнього і правого нижнього кутів прямокутника.
    Многокутник описується тегом
    <AREA shape=”poly” cords=”координати” href=”ref1.html”>, де в значенні
    «координати» перераховуються попарно горизонтальні і вертикальні координати всіх
    вершин многокутника послідовно.

    Коло задається тегом


    <AREA shape=” circle ” cords=”х,у,r” href=”ref2.html”>, де х і у – координати центру
    кола, а r – її радіус.

    Практичне завдання
    Завдання 1. (4 бали) Створіть веб-сторінку, що містить зображення-карту.
    Зображення-карта повинна містити такі області: «системний блок», «монітор»,
    «клавіатура», «миша». Наприклад, при наведенні користувачем покажчика миші на
    системний блок повинна з'являтися спливаюча
    підказка «системний блок», а після клацання мишею
    по області «системний блок» здійснюватиметься
    перехід на веб-сторінку з інформацією про системний
    блок.
    <HTML>
    <HEAD>
    <TITLE>Комп'ютер</TITLE>
    </HEAD>
    <BODY BGCOLOR="#FFFFFF" TEXT="#996699">
    <H1 ALIGN="center">Натисни на пристрій, щоб побачити детальну
    інформацію!</H1>
    <div ALIGN="center"><IMG src="зображення" align=middle usemap="#new" ></div>
    <map name="new">
    <AREA ALT="Монітор" SHAPE="rect" COORDS="вкажіть координати"
    HREF="monitor.html"/>
    Аналогічно задайте координати зображень інших пристроїв.
    </map>
    </BODY>
    </HTML>
    Завдання 2. (6 балів). Створіть веб-сторінку, що містить зображення-карту. На
    сторінці розміщено карту України. Сторінка має відповідати запропонованому зразку.
    ✓ Зображення-карта повинна містити інтерактивні області (повторити контури),
    що співпадають з адміністративними областями України. Наприклад, при наведенні
    користувачем покажчика миші на Вінницьку область повинна з'являтися спливаюча
    підказка «Вінницька область», а після клацання мишею по області здійснюватиметься
    перехід на веб-сторінку (у новій вкладці) з інформацією про неї (можна використати
    https://uk.wikipedia.org/).
    ✓ Карту можна створити вручну, або ж скористатися сервісом https://www.image-
    map.net/
    ✓ Додайте до створеної сторінки назву «Карта України» та фавікон — це
    невеличке зображення, що відображається поруч із заголовком сторінки на вкладці
    браузера. Можна використати будь-яке зображення в якості своєї фавіконки. Або створити
    свій власний фавікон, наприклад, на сайті https://favicon.cc.
    Щоб розмістити фавіконку, в після тегу <title> стрічку:
    <link rel="icon" type="image/x-icon" href="зображення">

    Завдання 3. (2 бали).
    Ознайомтесь із додатковим матеріалом у статті: «Адаптивна карта зображень як елемент
    декору сайту» та спробуйте самостійно вирішити питання адаптивності для веб-сторінки
    «Карта України».
    ДОДАТКОВІ МАТЕРІАЛИ
    Список сервісів із безкоштовними Платні сервіси:
    зображеннями:
    • Getty Images
    • Pexels • iStock
    • Burst
    • Pixabay • Adobe Stock
    • Freestocks • Flickr
    • StockSnap • Shutterstock
    • FoodiesFeed

    Для платних зображень є такі типи ліцензій:


    ✓ Royalty-Free — купуєте картинку один раз і використовуєте зображення без
    обмежень у часі. Ексклюзивні права залишаються у автора.
    ✓ Editorial — такі картинки не можна використовувати з комерційною метою.
    ✓ Rights-Managed – отримайте виняткове право на використання картинки.

    You might also like