Nola jarri irudi bat HTMLn

Sarrera:
Munduan Gaur egungo mundu digitalean, programazio-lengoaiak menderatzea gero eta ezinbestekoa da arlo teknikoan sartu nahi duenarentzat. Hizkuntzarik erabilienetako bat sortu web orriak HiperText Markup Language (HTML) da, Interneten ikusten dugun edukia egituratu eta formateatzeko aukera ematen duena. HTML-k eskaintzen dituen funtzio anitzen artean aukera dago irudiak txertatu web orrialdeetan. Artikulu honetan, xehetasunez eta zehatz-mehatz nola erakutsiko dizugu jarri irudi bat HTMLn,⁢ beharrezko ezagutzak eskaintzen dizkizu zure barruan eduki bisual erakargarriak eta deigarriak sortzeko. webgune.

Etiketen erabilera :
Ahal izateko irudi bat txertatu HTMLn, etiketa erabili behar dugu .‍ Etiketa hau hizkuntzan gehien erabiltzen denetako bat da, bere erabilgarritasun handiagatik. etiketaren bidez , web orrian erakutsi nahi dugun irudiaren bidea zehaztu dezakegu, baita haren tamaina eta posizioa egokitu ere. Gainera, testu alternatiboa gehi dezakegu, testu hori bistaratu dadin irudia behar bezala kargatu ezin bada.

Irudiaren bidea zehaztea:
Irudiaren bidea elementu erabakigarria da noiz gehitu irudi bat HTMLn. Horretarako, ‌irudiaren kokapena gure fitxategi-sisteman⁤ edo lineako zerbitzariren batean ezagutu behar dugu. Bi modu nagusitan zehaztu dezakegu bidea: bide absolutua edo bide erlatiboa erabiliz. ⁢Lehena irudiaren kokapen osoa fitxategi-sisteman adieraztea da, ⁤bigarrena, berriz, irudiaren kokapen erlatiboari egiten dio erreferentzia, sortzen ari garen web-orriarekiko.

Irudiaren tamaina eta posizioa doitzea:
Irudiaren bidea zehaztu ondoren, baliteke behar izatea egokitu bere tamaina eta posizioa gure beharren arabera. Horretarako, etiketan gehi ditzakegun atributu batzuk ditugu . Adibidez, irudiaren tamaina aldatu nahi badugu, zabalera eta altuera atributuak erabil ditzakegu nahi diren neurriak pixeletan ezartzeko. Era berean, "lerrokatu" atributua erabil dezakegu irudia orriaren ezkerrean, eskuinaldean edo erdian lerrokatzeko.

Laburbilduz, jarri irudi bat HTMLn Zeregin erraza izan daiteke prozesu zuzena jarraituz gero. Etiketa erabiliz eta irudiaren bidea zehaztuz, baita bere tamaina eta posizioa doitzeko atributuak manipulatuz ere, ikusmen erakargarriak diren web orrialdeak sor ditzakegu multimedia edukiekin. Artikulu honek zure web proiektuetan irudiekin esperimentatzen hasteko behar duzun ezagutza eman izana espero dugu. Ausartu HTML-k eskaintzen dizkizuen aukera guztiak arakatzen!

1. HTMLrako sarrera: zer den eta nola funtzionatzen duen markatze-lengoaia

HTML web-orriak sortzeko erabiltzen den markatze-lengoaia da. Interneten ikusten ditugun orrialde guztien oinarria da, edukiaren egitura eta nabigatzailean nola bistaratu behar diren definitzen baitu. HTML akronimoak Hypertext Markup Language esan nahi du, hau da, "hipertestu markatze lengoaia" gisa itzultzen dena.

HTML funtzionatzeko modua etiketen bidez da, web orrialde bateko elementu desberdinak definitzeko erabiltzen direnak. Adibidez, etiketa

⁢ paragrafo bat definitzeko erabiltzen da, eta ⁤ etiketa orrialdean irudi bat txertatzeko erabiltzen da. Etiketa hauek markatu nahi duzun edukiaren inguruan jartzen dira, eta barra batekin ixten dira handiagoa baino ikurraren aurretik (>).

HTMLn, elementuei buruzko informazio gehiago emateko atributuak ere erabil daitezke. Adibidez, src atributua erabiltzen da etiketan bistaratu nahi duzun irudiaren kokapena adierazteko. Atributuak etiketei gako-balio bikote gisa gehitzen zaizkie, berdintasun zeinu batez (=) bereizita. Etiketa eta atributuez gain, HTML-k estiloak eta egiturak gehitzeko aukera ematen du estilo-orrien eta elementuen bidez, hala nola, taulak eta inprimakiak. Laburbilduz, HTML markatze-lengoaia ezinbestekoa da web-orriak sortzeko eta formateatzeko, eta nola funtzionatzen duen ulertzea ezinbestekoa da edozein web garatzaile edo diseinatzailerentzat.

2. Oinarrizko HTML sintaxia: Web orri bat egituratzeko elementuak eta etiketak

HTMLren oinarrizko sintaxia Ezinbestekoa da web orri bat behar bezala egituratu ahal izatea. HTML elementuak eta etiketak ezinbestekoak dira web orri baten egitura eta edukia definitzeko. Oinarrizko kontzeptu hauek ezagutzea web-orri funtzionalak eta bisualki erakargarriak garatu ahal izateko lehen urratsa da.

HTML elementuak Web orri bat eraikitzeko oinarrizko blokeak dira.Elementu horiek goiburuak, paragrafoak, zerrendak, irudiak, estekak izan daitezke, besteak beste. Elementu horietako bakoitza etiketa zehatz batekin definitzen da. ‌Adibidez,⁤ goiburu bat sortzeko⁤ "h1" etiketa erabiltzen duzu goiburuaren edukia eta ondoren. Era berean, paragrafo bat sortzeko, ⁤»p» etiketa erabiltzen da eta ondoren paragrafoaren edukia.

Web orri bat egituratzeko etiketak Orriaren edukiari antolatzeko eta zentzua emateko aukera ematen dute. Etiketa ohikoenetako batzuk "head", "title", "body" eta "div" dira. Buru etiketa orriaren goiburuko informazioa definitzeko erabiltzen da, hala nola izenburua eta deskribapena. Titulu etiketa arakatzailearen izenburu-barran agertuko den orriaren izenburua zehazteko erabiltzen da. Body etiketa orriaren eduki nagusia biltzeko erabiltzen da, eta div etiketa, berriz, edukia ataletan banatzeko.

Jakitea. Oinarrizko HTML sintaxia eta web-orri bat egituratzeko elementuak eta etiketak ezinbestekoak dira edozein web garatzailerentzat. Kontzeptu hauei esker, erabiltzaileentzako web-orrialde ondo antolatuak eta irakurterrazak sortzeko aukera ematen dute. Horrez gain, HTML etiketak behar bezala erabiltzeak bilatzaileen posizionamendua hobetzen eta orriaren irisgarritasuna hobetzen laguntzen du. Laburbilduz, oinarrizko HTML kontzeptu hauek menderatzea ezinbestekoa da web orrialde eraginkor eta kalitatezkoak sortzeko.

3. Irudiak HTMLn txertatzea: ⁣ atributua eta bere propietateak

Atributua⁢ HTML dokumentu batean irudiak txertatzeko erabiltzen da. Etiketa hau ezinbestekoa da web-orri batean elementu grafikoak bistaratzeko, izan argazki bat, logotipo bat edo beste edozein irudi. Atributu hau erabiltzeko, etiketa barruan sartu besterik ez dugu egin behar eta zehaztu erakutsi nahi dugun irudiaren bidea. Gainera, propietate gehigarriak gehi ditzakegu irudia bistaratzeko modua pertsonalizatzeko, hala nola, tamaina, testu alternatiboa eta lerrokatzea.

Atributuaren propietate garrantzitsuenetako bat “src” atributua da, eta horri esker, erakutsi nahi dugun irudiaren bidea edo URLa zehaztu dezakegu.Adibidez, . Garrantzitsua da bidea zuzena dela eta irudia zehaztutako kokapenean dagoela ziurtatzea, bistaratzeko akatsak ekiditeko. Irudia HTML fitxategiaren karpeta berean badago, irudiaren izena zehaztu besterik ez dugu goiko adibidean erakusten den moduan.

"src" atributuaz gain, beste propietate batzuk erabil ditzakegu irudiaren itxura pertsonalizatzeko. Adibidez, "alt" atributua erabil dezakegu irudia kargatzen huts egiten badu bistaratzen den testu alternatiboa emateko. Testu honek irudia laburki deskribatu behar du irisgarritasun-helburuetarako. "zabalera" eta "altuera" atributuak ere erabil ditzakegu irudiaren tamaina pixeletan doitzeko. Adibidez, . Era berean, “lerrokatu” atributua erabil dezakegu irudia inguratzen duen testuarekiko lerrokatzeko.

4. Bide erlatiboak eta absolutuak erabiltzea HTML kodean irudiak lotzeko

Web orrialdeak sortzeko oinarrizko elementua irudiak jartzea da. HTMLn, irudiak kodearekin lotzeko modu desberdinak daude, bide erlatiboak eta absolutuak erabiltzea gehien erabiltzen denetakoa izanik.

Bide erlatiboak: Bide erlatiboak kodea dagoen HTML fitxategiaren kokapenari dagokionez definitzen dira. Horrek esan nahi du bidea karpeta-egitura eta direktorio bereko fitxategien kokapenak kontuan hartuta sortzen dela. Adibidez, HTML fitxategia eta irudia karpeta berean kokatzen badira, bide erlatiboa irudi fitxategiaren izena besterik ez litzateke izango.

Ibilbide absolutuak: Bide erlatiboek ez bezala, bide absolutuek irudi-fitxategiaren kokapen zehatza zehazten dute fitxategi-sisteman. Honek URL osoa edo fitxategi-sistemako bide fisikoa izan dezake. Adibidez, irudia urruneko zerbitzari batean badago, bide absolutua irudia ostatatutako web-helbide osoa izango litzateke.

Irudiak HTML kodean lotzean bide erlatiboak eta absolutuak ulertzea eta zuzen erabiltzea garrantzitsua da. Horrek bermatzen du irudiak⁤ behar bezala bistaratzen direla⁤, edozein dela ere fitxategiak non dauden. Laburbilduz, bide erlatiboak erabilgarriak dira irudiak HTML fitxategiaren zerbitzari edo karpeta berean daudenean, eta bide absolutuak urruneko zerbitzarietan edo fitxategi-sistemaren kokapen zehatzetan dauden irudietarako erabiltzen diren bitartean.

5. HTML-k onartzen dituen ezaugarriak eta irudi formatuak: JPEG, PNG, GIF, SVG

ren ezaugarriak irudi formatuak HTML bateragarria: HTMLko irudiekin lan egitean, garrantzitsua da ulertzea formatu desberdinak bateragarriak eta haien ezaugarri bereizgarriak. Gehien erabiltzen diren formatuen artean JPEG, PNG, GIF eta SVG daude.

El JPEG formatua Detaile konplexuak eta kolore tonu leunak dituzten argazkietarako eta beste irudi mota batzuetarako aproposa da. Konpresio handia ematen du, ikusmen-kalitatea nabarmen galdu gabe. Horrek aukera bikaina da fitxategien tamaina murrizteko eta web-orrien karga-abiadura hobetzeko. Hala ere, kontuan izan behar da JPEG galtzen den irudi formatua dela, beraz, baliteke eduki grafikoa edo testu zorrotza duten irudietarako aukerarik egokiena ez izatea.

The⁢ PNG formatua Oso erabilia da gardentasuna duten irudietarako eta ertz zorrotzak eta kolore trinkoak dituzten ilustrazioak egiteko. Kalitate eta gardentasuna eskatzen duten logotipo, ikono eta elementu grafikoetarako aproposa da. JPEG formatuan ez bezala, PNG-k galerarik gabeko konpresioa eskaintzen du, eta horrek esan nahi du irudiaren kalitatea ez dela kaltetzen. Hala ere, PNG fitxategiak JPEG fitxategiak baino handiagoak izan daitezke eta web-orrietako karga-abiaduran eragina izan dezakete.

El GIF formatua Kolore mugatuak dituzten irudi animatuetarako eta grafiko sinpleetarako erabili ohi da, hala nola botoiak edo pankartak. Bere ezaugarri nagusia hainbat fotograma bistaratzeko gaitasuna da bakar batean irudia, horrela mugimenduaren ilusioa sortuz. GIF formatuak a erabiltzen du kolore paleta 256 koloretara mugatuta, aukera ezin hobea da grafiko sinpleetarako eta bereizmen baxuko animazioetarako. Hala ere, formatu honek ez du irudi-kalitate handirik eskaintzen eta beste formatu batzuek baino fitxategi-tamaina handiagoa izan dezake, eta horrek karga-abiadura eragin dezake.

Laburbilduz, ‌irudiak HTMLn jartzerakoan, ‌JPEG, ⁤PNG, GIF eta SVG bezalako ezaugarriak eta onartzen diren formatuak kontuan hartu behar ditugu. Formatu bakoitzak bere abantailak eta desabantailak ditu konpresioari, irudiaren kalitateari, gardentasunari eta animagarritasunari dagokionez. Irudi motaren eta webgunearen behar zehatzen arabera formatu egokia aukeratzeak ikus-entzunezko aurkezpen erakargarria eta erabiltzailearen esperientzia ona bermatuko ditu.

6. Irudiak optimizatzea Webean azkarrago kargatzeko: gomendatutako tresnak eta teknikak

7. Irudiak HTMLn pertsonalizatzea: Tamaina, posizioa eta ikusizko efektuak

HTML irudiak pertsonalizatzea funtsezkoa da web orri batean diseinu bisual erakargarria sortzeko. Tamaina, posizioa eta efektu bisualak kontrolatzeko gaitasunarekin, garatzaileek irudi zehatzak nabarmendu ditzakete eta erabiltzailearen esperientzia hobetu. Artikulu honetan, HTMLn irudiak pertsonalizatzeko teknika desberdinak aztertuko ditugu.

Irudiaren tamaina: ⁤ HTML irudien pertsonalizazioaren ezaugarri oinarrizkoenetako bat tamaina kontrola da. Etiketarekin ⁤ irudia eta atributua zabalera y altuera, neurri zehatzak doi ditzakegu irudi batetik.. Hau bereziki erabilgarria da diseinu sentikor batean lan egiten denean, non irudiaren tamaina alda daitekeen gailuaren arabera.

Irudiaren posizioa: Tamainaz gain, web orrialde batean irudi baten posizioa kontrola dezakegu. HTMLn hori lortzeko hainbat modu daude. Adibidez, CSS erabil dezakegu propietatea ezartzeko float 'ezker' edo 'eskuine' gisa, testua irudiaren inguruan biltzeko aukera emango duena. Jabetza ere erabil dezakegu posizioa irudi bat edukiontzi-elementu baten kokapen zehatz batera ainguratzeko.

Ikusmen efektuak: Irudien itxura gehiago hobetzeko, HTML-ek efektu bisualak aplikatzeko gaitasuna ematen digu. Atributua estilo lausotasuna, saturazioa edo opakutasunaren aldaketak bezalako iragazkiak gehitzeko aukera ematen digu.Hau erabilgarria izan daiteke efektu zehatzak sortzeko, hala nola, irudi bat nabarmentzeko kurtsorea haren gainetik pasatzen denean edo irudi baten kolorea aldatzeko sakatzean .

Laburbilduz, HTML-n irudiak pertsonalizatzeak funtsezko alderdiak kontrolatzeko aukera ematen digu, hala nola, tamaina, posizioa eta efektu bisualak. Teknika hauekin, garatzaileek ikusmen erakargarria den diseinua sor dezakete eta erabiltzailearen esperientzia hobetu dezakete beren web orrietan.

8. Irudien irisgarritasuna eta erabilgarritasuna: Ikusmen-urritasuna duten erabiltzaileentzako testu alternatiboak sartzea

Irudiaren irisgarritasuna eta erabilgarritasuna: Sartu testu alternatiboak ikusmen urritasuna duten erabiltzaileentzat.

Gure webgunean irudi bat jartzen dugunean, ezinbestekoa da erabiltzaile guztien irisgarritasuna eta erabilgarritasuna kontuan hartzea, baita ikusmen urritasuna dutenentzat ere. Hori ziurtatzeko modu eraginkorra da alt testua gehitzea irudietara. Alt testuak, "alt" atributu gisa ere ezagutzen dena, irudiaren deskribapena eskaintzen du, ikusmen urritasuna duten erabiltzaileek bistaratzen den edukia uler dezaten.

Garrantzitsua da Alt testuak izan behar duela deskribatzailea baina zehatza. Irudiaren funtsa jaso behar du eta bisualki ematen duen informazio bera transmititu behar du. Horrek esan nahi du irudiaren irudikapen egokia ematen ez duten termino generikoak edo garrantzirik gabekoak erabiltzea saihestu behar dugula. Hori eginez, ikusmen-urritasuna duten erabiltzaileei gure webgunean nabigatzean esperientzia aberatsagoa eta osatuagoa izatea ahalbidetzen dugu.

Gainera, ‌alt‌testua erabiltzea komeni da hobetu SEO ‌ (Bilatzaileen optimizazioa) gure webguneko. Bilatzaileek ezin dituzte irudiak gizakiek bezala interpretatu, beraz, testu alternatiboa erabiltzen dute irudia zer den ulertzeko eta bilaketa-emaitzetan behar bezala sailkatzeko. Testu alternatibo garrantzitsua eta deskribatzailea eskainiz, gure irudiak bilatzaileek aurkitzeko aukerak areagotzen ditugu, eta horrek gure webgunearen ikusgarritasuna eta trafikoa hobetu ditzake.

9. Diseinu responsive kontuak irudiak HTMLn jartzerakoan: Nola egokitu gailu ezberdinetara

Diseinu sentikorra ezinbestekoa da zure webguneko irudiak behar bezala egokitzen direla ziurtatzeko. gailu desberdinak. Hori lortzeko, kontuan izan behar dituzun zenbait kontu garrantzitsu daude. Lehenik eta behin, ezinbestekoa da HTML etiketa egokia erabiltzea irudia zure kodean txertatzeko. Etiketa erabil dezakezu ondoren, src atributua irudiaren bidea zehazteko eta alt atributua testu alternatiboa emateko, irudia behar bezala kargatzen ez bada. Gainera, gomendagarria da irudiari width atributua erabiliz gehienezko tamaina ezartzea, gailu txikiagoetan pantaila gainezka ez dadin.

Kontuan hartu beharreko beste alderdi garrantzitsu bat irudiaren tamaina eta bereizmena da. Irudiak editatzeko tresnak erabil ditzakezu fitxategien tamaina murrizteko, kalitate bisualari gehiegi kaltetu gabe. Hau bereziki garrantzitsua da gailu mugikorretan, non kargatzeko abiadura funtsezkoa den. Era berean, gomendagarria da srcset atributua erabiltzea irudiaren bertsio desberdinak bereizmen ezberdinekin emateko, arakatzaileak erabiltzailearen gailuaren arabera egokiena aukera dezan. Zure irudien tamaina eta bereizmena optimizatuz, erabiltzailearen esperientzia hobea eta zure webgunearen errendimendu azkarragoa bermatuko dituzu.

Tamaina eta bereizmena kontuan hartzeaz gain, kontuz ibiltzea ere garrantzitsua da zure irudien kokapenarekin eta formatuarekin. Irudiak leku estrategiko batean kokatzea komeni da, non edukia osatzen duten eta testuaren irakurketa oztopatzen ez duten. CSS float propietatea erabil dezakezu irudiak testuaren ezkerrera edo eskuinera lerrokatzeko, edo baita CSS flexbox propietatea erabil dezakezu diseinu konplexuagoak eta sentikorragoak sortzeko. Era berean, hobe da JPEG edo PNG bezalako irudi formatu arinak erabiltzea, TIFF edo BMP bezalako formatu astunagoak baino. Horrek zure orria kargatzeko denbora murrizten lagunduko du eta erabiltzailearen esperientzia orokorra hobetuko du.

Laburbilduz, ‌irudiak HTMLn jartzerakoan, ezinbestekoa da responsive design kontuan hartzea gailu desberdinetara egokitzeko.⁢ Erabili ⁢etiketa. behar bezala, ezarri irudiaren gehienezko tamaina eta eman alt testua. Optimizatu zure irudien tamaina eta bereizmena editatzeko tresnak erabiliz, eta ziurtatu zure orrian estrategikoki jartzen dituzula. Gainera, erabili irudi formatu arinak eta saihestu formatu astunak. Gogoeta hauek jarraituz, erabiltzaileei edozein gailutan ikusteko esperientzia ezin hobea emango diezu.

10. Irudien SEO Optimizazioa: Alt eta izenburuaren atributuak erabiltzea bilatzaileetan indexatzea hobetzeko

Bilatzaileek zenbait irizpide erabiltzen dituzte web orrialdeetako irudiak indexatzeko eta sailkatzeko. A eraginkortasunez Irudien SEO optimizatzeko modu bat alt eta title atributuak erabiltzea da.⁢ Alt (alt text) atributuak irudiaren deskribapena eskaintzen du, irudia behar bezala kargatzen ez bada bistaratuko dena. Garrantzitsua da erabili gako-hitzak ⁤alt atributuan, bilatzaileek irudia zer den ulertu eta behar bezala indexatzen dute.

Beste ezaugarri garrantzitsu bat izenburua da erabiltzen dena. Irudiari buruzko informazio gehiago emateko, erabiltzaileak gainean jartzen duenean. Erabiltzaileen esperientzia hobetzeaz gain, title atributuak bilatzaileei ere lagun diezaieke irudiaren testuingurua ulertzen. Izenburuaren atributuan irudiaren deskribapen labur baina zehatza sartzea komeni da, gako-hitz garrantzitsuak erabiliz.

Alt eta title atributuak erabiltzeaz gain, beste alderdi batzuk ere kontuan hartu behar dira irudien SEO optimizatzeko. Garrantzitsua da izena eman irudi fitxategiak deskriptiboki, orriaren edukiarekin lotutako gako-hitzak erabiliz. Gomendagarria da ere optimizatu irudiaren tamaina orrialdeak kargatzeko abiadura hobetzeko, kargatzeko denbora faktore garrantzitsua baita. Erabili irudi formatu egokiak, hala nola JPEG edo PNG, eta konprimitu irudiak kalitatea galdu gabe, SEO emaitza hobeak lortzen lagunduko dizu.

Sebastian Vidal

Sebastián Vidal naiz, informatika ingeniaria, teknologiarekin eta brikolajearekin zaletua. Gainera, ni naizen sortzailea tecnobits.com, non tutorialak partekatzen ditudan teknologia guztiontzat eskuragarriago eta ulergarriagoa izan dadin.