Как да вмъкнете изображение в HTML

Предишен ◈ Следващото

Най-простият случай на вмъкване на изображения ще изглежда така (изображение, наречено image.png и се намира в същата папка, като HTML-документ):

Преди таг Това бе поредният задължителен атрибут - н. но с появата на HTML 5, той е прехвърлен в категорията желания. ALT задава текст, който потребителят ще види образа вместо това, ако изведнъж не може да се стартира. Този атрибут се препоръчва да добавите някои оптимизатори, защото се смята, че тя има положителен ефект върху напредъка в търсачките.







Ако не посочите допълнителни атрибути на снимката, тя ще се показва в пълен размер, както и необходимостта, че не винаги е така. За щастие, можете да посочите желания размер на чертежа с помощта на ширина атрибут (ширина точки) и височина (определя от височината). Размери могат да се отразяват в пиксели или като процент. Във втория случай, браузърът ще изчисли процентът на елемента родител (например точка, в която е поставена на снимката).

Да предположим, че искате да добавите към image.png страницата изображение с алтернативен текст "Просто картина", с ширина от 420 и 280 пиксела дълги. в този случай, кодът ще бъде, както следва:

навигация Chart

За да създадете карта на изображението (това е името, описан възможност) са необходими следните тагове и атрибути:

  • - контейнер, вътре в който е описан изображение на картата.
  • - етикет вътре . описва една област от изображението. Колко активни региони се планира да се раздели с изображения на много елементи и ще трябва да се достави. куп - Тя работи точно като един куп
      -
    1. и
        -
      • . създаване на списъци.
      • форма - маркер атрибут . определяне на формата на препратката. Активната област може да бъде във формата на правоъгълник, многоъгълник или кръг.
      • кабели - определяне на координатите на областта на атрибута. Също принадлежи към маркера . За правоъгълника, определен координатите на горния ляв ъгъл и долния десен ъгъл, полигон - координати на върховете, определящи кръг, уточни координатите на нейния център и радиус.
      • usemap - IMG таг атрибут. която свързва изображението с картата. Благодарение на него, браузърът разбира, че контейнерът описана карта точно тази рисунка.






      Пример изображение на карта

      За да се разбере как да се използват всички по-горе, тук е основен пример за това. Една картина, map.jpg. Тя трябва да бъде разделена на две активни региони. Кликването на върха на (зелено) ще отвори "Odnoklassniki" сайта, долната част (в синьо), ще доведе до "VKontakte". Връзки трябва да се отварят в нов таб. За да създадете карта, изпълнете следните стъпки.

      Как да вмъкнете изображение в уебсайт

      1. Поставете снимката на страницата и го свързва към следващата карта (тя ще се нарича социална), за които пишем следния код:

      3. Започнете да създадете карта: Отворете маркер и сложи това в името атрибут на неговото име, което трябва задължително да съвпада с тази на изображението е usemap:

      4. Използване на етикетите определят активните региони площ:

      5. Затворете на картата:

      Въпреки факта, че като се разглежда като пример за най-простия случай, че можеш да се сетиш, това ясно показва принципа на създаване на навигационни карти. Следваща - бизнес оборудване и позициониране, от гледна точка на HTML нищо сложно.







Предишен ◈ Следващото