Увод у Линк за слике у ХТМЛ-у

Линк до слике У ХТМЛ-у се налази на скоро свим страницама јер нам помажу да се крећемо од једне до друге странице на веб локацији. Популарна комбинација је употреба ХТМЛ ознаке за сидрење са ХТМЛ ознаком за имг . Овом комбинацијом можемо омогућити кретање корисника са једне на другу страницу кликом на слику. Пре него што наставимо даље с овом темом, прво размотримо рад појединачних елемената сидра и слике појединачно, а затим их комбинујемо како бисмо постигли повезану слику.

Ознака ХТМЛ сидра

Ознака ХТМЛ Анцхор користи се за креирање ХТМЛ хипервеза до других веб страница или мултимедијског садржаја хостираног на вебу. Погледајмо синтаксу доле да бисмо разумели како функционишу ознаке сидра и њихове основне атрибуте

Кликните овде!!

У горњем примеру, атрибут „хреф“ одређује УРЛ веб странице на коју желимо да преусмеримо корисника док кликне на текст „Кликните овде !!“.

Да видимо комплетни код испод:

Излаз

->

Уз горњи пример, бићете у могућности да дате следећа запажања

  1. Невиђена веза ће се појавити подцртано и у плавој боји. Нпр. Ово је невиђена веза
  2. Посећена веза ће се појавити подцртано и у љубичастој боји. Нпр. Ово је већ посећена веза
  3. Чини се да је активна веза подвучена и црвене боје. Нпр. Ово је активна веза

ХТМЛ ознака слике

Док прегледавате интернет, сигуран сам да сте сигурно наишли на неколико веб страница које садрже различите облике мултимедије. Посебно су слике популаран облик мултимедије који се данас могу наћи у скоро свим интерактивним веб страницама и веб локацијама. Разјаснимо нам сликовну ознаку и њену имплементацију у ХТМЛ-у са примјером у наставку:

Синтакса

Да сада разумемо како функционише сваки од атрибута у имг таг-у:

  1. срц: Атрибут срц дефинира путању сликовне датотеке коју покушавамо учитати овом ознаком. То може бити веза до слике која се налази на вебу у формату као што је екампле.цом/имагес/думми.пнг или датотека слике која се налази на истом серверу као и веб страница.
  2. алт: Атрибут алт дефинира текст и опис слике које желимо приказати у случају да се слике не учитају због мрежне повезаности или било којег другог проблема.
  3. Ширина и висина: Ширина и висина оба атрибута одређују ширину и висину слике коју желимо да прикажемо на веб страници. Иначе би слика радила са подразумеваним 100% висином и ширином.

Сада да видимо комплетни ХТМЛ код потребан за учитавање слике на веб страници. Сљедећу слику сачувајте именом „сунсет.пнг“ у фасцикли „имаге_тест“ на вашем локалном уређају.

Сада у истој мапи креирајмо ХТМЛ датотеку сунсет.хтмл са следећим ХТМЛ кодом:

Сада идите до прегледача на вашој машини и откуцајте путању датотеке .хтмл. Моје датотеке се чувају у Д погону тако да је пут за мене

Д: /имаге_тест/сунсет.хтмл

И сада можемо видети да је рендерирана ХТМЛ страница учитала залазак слике на нашем претраживачу. Уз помоћ ЦСС-а и

таг, можемо такође приказати текст према нашим захтевима око слике. Ознаке сидра и имг су компатибилне са свим прегледачима као што су Гоогле Цхроме, Сафари, Мицрософт Едге, Фирефок и Интернет Екплорер.

Повезане слике у ХТМЛ-у

Сада када смо разумели са примерима како појединачно функционирају ознака за сидро и сликовна ознака, сада разумемо како можемо да комбинујемо две функционалности да би се постигао сценарио где бисмо желели да се корисници преусмере на нову веб страницу када кликну на слику. . Да би слика могла да се кликне и да преусмери корисника на другу веб страницу, једноставно морамо да угнезди слику у сидрену ознаку. У примјеру у наставку, покушаћемо да уврстимо топ 3 веб претраживаче који се користе широм свијета. На нашој листи приказаћемо логотипе три претраживача и кликом на било који корисник логотипа биће преусмерен на одговарајућу страницу претраживача. Креирајмо фасциклу под називом „тест преусмеравања“ и у исту мапу сачувајмо слике испод

1. Гоогле

2. Иахоо

3. Бинг

Сада ћемо створити .хтмл по имену имагередирецтион.хтмл у истој датотеци. Имагередирецтион.хтмл садржи следећи код

Сада морамо приступити ХТМЛ страници из прегледача, за коју ћу откуцати свој локални пут „Д: / редиректест / имагередирецтион.хтмл“. прегледач ће затим приказати ХТМЛ датотеку да би генерисао следећи резултат:

->

Корисници ће моћи да се упуте до одговарајућег претраживача кликом на њихов лого. Из горњег примера можемо видети да је ХТМЛ једноставан и флексибилан језик који нам омогућава да комбинирамо више тагова заједно и постигнемо сложену функционалност попут ове. Комбинација употребе ознаке имг и анцхор је популарна комбинација. Уз додатно ХТМЛ кодирање, такође можемо додати различите ХТМЛ елементе као што су приказивање повезаних слика на нарученом или неоригрованом списку помоћу

    или
      . Изузетна флексибилност и једноставност коју ХТМЛ пружа сваком изданом верзијом, помажу дизајнерима УИ и УКС-а да дизајнирају интерактивне и интуитивне веб странице које видимо током свакодневног прегледавања интернета.

      Препоручени чланак

      Ово је водич за Имаге Линк у ХТМЛ-у. Овде смо разговарали о различитим врстама ХТМЛ тагова заједно са синтаксом. Можете и да прођете кроз друге наше предложене чланке да бисте сазнали више -
      1. ХТМЛ Атрибути
      2. Ознаке за ХТМЛ формат
      3. Предности ХТМЛ-а
      4. Ознаке ХТМЛ слике
      5. ХТМЛ Фрамес
      6. ХТМЛ Блоцкс
      7. Поставите боју позадине у ХТМЛ-у са примјером
      8. ХТМЛ наручена листа | Врсте атрибута са синтаксом

Категорија:

Алати за веб развој