Kas ir HTML attēli un kā modificēt jūsu tīmekļa lapu?

Šis raksts sniegs jums detalizētas un visaptverošas zināšanas par HTML attēliem un to, kā tos pievienot un modificēt, lai jūsu vietne izskatītos labi.

Attēli ir ļoti svarīga tīmekļa lapas sastāvdaļa, jo tie uzlabo tīmekļa lapas izskatu un palielina klientu mijiedarbību. Vairāku vietņu USP ir veids, kā viņi savās tīmekļa lapās organizē dažādus attēlus un pievieno tam garšas. Šajā Rakstā Attēli mēs sapratīsim, kā iegult attēlus tīmekļa lapā, izmantojot HTML, šādā secībā:



Kā pievienot attēlu HTML

Iegult attēlu tīmekļa lapā HTML dod jums tagu. Vēl viens svarīgs jautājums, kas jāatceras, ir nav beigu taga. skr atribūtu izmanto, lai norādītu attēla ceļu, kas var būt URL vai attēla ceļš no sistēmas / servera. Vispirms sāksim ar attēla iegulšanas pamata sintaksi tīmekļa lapā, izmantojot HTML.



Sintakse

img src = 'img / front-end-web-development / 50 / what-are-html-images.png'>

Parauga kods



HTML attēlu ievietošana attēlos tīmekļa vietnē  

Līdzīgi kā citiem tagiem, ar to ir saistīti dažādi atribūti tagu. Apskatīsim katru no viņiem pa vienam, sapratīsim viņu vajadzības un kā tos izmantot.

HTML attēlu tagi

  • alt Atribūts

Atribūts alternatīvs ir attēla teksts. Iemesls, kāpēc tika ieviests alt atribūts, ir tāds, ka attēlu kāda iemesla dēļ nevarēja ielādēt, tāpēc vajadzētu parādīties alternatīvs teksts, kas sniedz priekšstatu par attēlu. Attēla ielādes iemesli var būt lēns interneta savienojums vai attēls neatrodas norādītajā avotā utt.



Ja attēls atrodas tajā pašā mapē, kur atrodas HTML fails, varat tieši norādīt faila nosaukumu. Pretējā gadījumā jums ir jānorāda attēla faila absolūtais ceļš.

Atribūta Alt vērtībai vajadzētu aprakstīt attēlu.

Piemērs

 Edureka logotips
HTML attēlu ievietošana attēlos tīmekļa vietnē edureka logo 

iestatīt java klases ceļa logus 7
  • Attēla platums un augstums

Stila atribūtu izmanto, lai iestatītu attēla augstumu un platumu. Stila atribūtā jūs norādāt CSS stilu.

HTML attēlu ievietošana attēlos tīmekļa vietnē  

Daži no svarīgiem jautājumiem, iegult attēlu tīmekļa vietnē, izmantojot HTML, ir:

kā dinamiski piešķirt masīvu Java
  • Platuma un augstuma atribūti ir noteikti pikseļos.
  • Jūs varat arī definēt attēla platumu un augstumu procentos. Tā ņems vērā procentuālo daļu atbilstoši visai tīmekļa vietnei.
   
  • Ja jūs norādāt tikai vienu no tiem, tas attiecīgi pielāgo otru.
  • Attēlu iegulšana, izmantojot URL

HTML nodrošina arī elastību, kur jūs varat izvēlēties attēlu no cita servera, vienkārši norādot URL. Attēlu mitināšanai un pēc tam šo attēlu iegulšanai, izmantojot URL, varat izmantot atsevišķu serveri.

HTML attēlu ievietošana attēlos tīmekļa vietnē  

  • Attēls kā saite

Attēlu var izmantot arī kā saiti, kurā lietotājs var noklikšķināt uz attēla un nokļūt jaunā tīmekļa lapā. Lai to izdarītu, jums vienkārši jāievieto diena tagu.

HTML attēlu ievietošana attēlos tīmekļa vietnē  

Jūs varat arī pielāgot attēla izlīdzināšanu, izmantojot CSS pludiņa rekvizītu. Stila atribūtā ir jānorāda viss CSS rekvizīts.

HTML attēls Attēls peldēs pa labi no teksta. Attēls peldēs pa kreisi no teksta.

Šī ir viena no svarīgākajām HTML piedāvātajām funkcijām. tags palīdz noteikt attēla karti. Jums noteikti jābrīnās, kas ir attēlu karte. Attēlu karte ir attēls ar apgabaliem, uz kuriem var noklikšķināt

HTML attēls  

Tīmekļa lapā varat pievienot arī fona attēlu. Jums vienkārši jāizmanto CSS rekvizīts, ti, fona attēls stila tagā un jāpievieno HTML elementam.

HTML attēls

Fona attēls

BODY elements

Ar to mēs esam nonākuši pie šī HTML attēlu emuāra beigām.Tagad, izpildot iepriekš minētos fragmentus, jūs būtu sapratis, kā HTML ievietot attēlu. Es ceru, ka šis emuārs ir informatīvs un sniedz jums pievienoto vērtību.

Pārbaudiet mūsu kas nāk ar instruktoru vadītu tiešraides apmācību un reālās dzīves projektu pieredzi. Šīs apmācības ļauj jums prasmīgi strādāt ar back-end un front-end tīmekļa tehnoloģijām. Tas ietver apmācību par Web izstrādi, jQuery, Angular, NodeJS, ExpressJS un MongoDB.

Vai mums ir jautājums? Lūdzu, pieminējiet to emuāra “HTML attēli” komentāru sadaļā, un mēs ar jums sazināsimies.