Nola gehitu irudi bat HTMLn
HTML (HyperText Markup Language) da markaketa-lengoaia edukia sortzeko eta egituratzeko erabiltzen den estandarra webean. Web garapenean ohikoena eta erabilgarrienetako bat irudiak gehitzeko gaitasuna da. Artikulu honetan, nola ikasiko dugu gehitu irudi bat HTMLn modu sinple eta eraginkorrean.
Irudiaren etiketaren anatomia HTMLn
HTML-ko irudiaren etiketa elementuarekin irudikatzen da . Etiketa honek ez du itxierarik eta web orri batean irudiak txertatzeko erabiltzen da. Hemen erakusten da HTML-n irudiaren etiketaren oinarrizko anatomia:
`html
«`
– iturria: bistaratuko den irudiaren bidea edo URLa zehazten duen beharrezko atributua da.
– alt: irudiaren ordezko testua eskaintzen duen atributua da, irudia kargatzen ez bada. Garrantzitsua da webaren irisgarritasunerako.
– zabalera: irudiaren zabalera pixeletan ezartzen duen aukerako atributu bat da.
– altuera: irudiaren altuera pixeletan ezartzen duen aukerako atributu bat da.
Tokiko irudi bat gehitzea
-rako gehitu tokiko irudi bat HTMLnLehenik eta behin, ziurtatu behar duzu irudia lantzen ari zaren HTML fitxategiaren karpeta edo direktorio berean gordeta duzula. Ondoren, etiketa erabil dezakezu eta src atributua irudiaren bide erlatiboa zehazteko.
Laburbilduz, gehitu irudi bat HTMLn Web orri baten itxura eta edukia nabarmen hobetu dezakeen prozesu sinplea da. Irudiaren etiketaren eta bere ezaugarrien erabilera menderatuta, pertsonalizatu eta biziarazi ahal izango duzu zure proiektuak web modu eraginkorragoan. Adierazi zure sormena irudi erakargarri eta garrantzitsuak sartuz!
1. Irudi bat gehitzeko oinarrizko HTML elementuak
HTML etiketak irudi bat gehitzeko
Irudi bat HTMLn gehitzeko, bi etiketa nagusi erabiltzen dira: y
irudia bera definitzeko erabiltzen da, berriz, etiketa
, atributua erabiltzen da iturria irudiaren jatorria, eta atributua zehazteko alt testu alternatiboa eskaintzeko irudia kargatzen ez bada.
Atributu gehigarriak bistaratzea hobetzeko
Oinarrizko atributuez gain, bistaratzea hobetzeko erabil daitezkeen atributu gehigarriak daude irudi batetik. HTMLn. Atributu horietako bat atributua da zabalera, erabiltzen dena. irudiaren zabalera pixeletan edo ehunekotan zehazteko. Beste atributu erabilgarria atributua da altuera, irudiaren altuera zehazteko erabiltzen dena. Atributuak ere erabil ditzakezu lerrokatu irudia inguruko testuarekiko lerrokatzeko, eta estilo irudiari estilo pertsonalizatuak aplikatzeko, adibidez, letra-tamaina edo atzeko planoaren kolorea.
Optimizazioa eta Irisgarritasunari buruzko gogoetak
Irudi bat HTMLn gehitzean, garrantzitsua da optimizazioa eta irisgarritasuna kontuan hartzea. Irudi bat optimizatzeko, konprimitzea gomendatzen da bere fitxategiaren tamaina murrizteko, ikusizko kalitate gehiegi galdu gabe. Horrek web orriak azkarrago kargatzen laguntzen du eta erabiltzailearen esperientzia hobetzen du. Irisgarritasunari dagokionez, ezinbestekoa da alt testu esanguratsua ematea atributuan alt etiketatik. . Horri esker, ikusmen-urritasuna duten edo pantaila-irakurgailuak erabiltzen dituzten pertsonek irudiaren edukia uler dezakete. Gainera, alt-testua irudiaren testuinguruarekin deskribatzailea eta egokia dela ziurtatu behar duzu.
2. Etiketa sartzea ![]()
eta funtsezko ezaugarriak
Etiketa HTMLn gehien erabiltzen den bat da irudiak web orri batean txertatzeko. Gure kodean irudi bat sartzeko, etiketa hau eta irudia nabigatzailean behar bezala bistaratzeko beharrezkoak diren funtsezko atributu batzuk gehitu behar ditugu. Atributu garrantzitsuenetako bat da iturria, erakutsi nahi dugun irudiaren bidea edo URLa adierazten duena. Atributu hori gabe, etiketa
Ez nuke irudirik erakusteko.
Ezinbesteko beste ezaugarri bat da alt, irudia kargatzen ez bada edo erabiltzaileak irudia kargatzea desgaituta badu bistaratzeko testu alternatibo bat zehazten duena. Garrantzitsua da atributu honetan deskribapen-testua sartzea, ikusmen urritasuna duten pertsonei irudiaren edukia ulertzen laguntzen dielako.
Atributu horiez gain, badira beste batzuk, hala nola zabalera y altuera, irudiaren zabalera eta altuera pixeletan zehazteko aukera ematen duena. Atributu hauek aukerakoak dira, baina irudiaren tamaina kontrolatzeko eta orrialdean distortsionatu ez dadin erabiltzea gomendatzen da.
Laburbilduz, HTMLn irudi bat gehitzeko, etiketa erabili behar dugu eta gehitu bezalako funtsezko atributuak iturria y alt. Aukerako atributuak ere erabil ditzakegu zabalera y altuera irudiaren tamaina kontrolatzeko. Garrantzitsua da atributuan dagoen alt testua alt Gure webgunearen irisgarritasuna bermatzeko deskribatzailea eta garrantzitsua izan behar du.
3. Irudi egokia hautatzea eta prestatzea
Atal honetan, zure HTML web orrira gehitzeko irudi egokia hautatzen eta prestatzen ikasiko duzu. Garrantzitsua da garrantzitsua eta erakargarria den irudi bat aukeratzea erabiltzaileentzat, honek haien arreta bereganatzen eta nabigazio-esperientzia hobetzen laguntzen baitu. Gainera, irudiak behar bezala prestatzeak ongi agertzea bermatzen du gailu desberdinak eta pantailaren tamainak.
Irudien hautaketa: Zure web-orrian irudi bat gehitu aurretik, garrantzitsua da zure webgunearen eduki eta helburura egokitzen den irudi bat aukeratzea. Zure irudiak erabil ditzakezu edo doako edo ordainpeko irudi bankuak bilatu. Gomendagarria da kalitate handiko irudiak hautatzea, JPG, PNG edo GIF bezalako formatu arruntekin. Gainera, ziurtatu irudia erabiltzeko beharrezko eskubideak dituzula jabea ez bazara.
Edizioa eta optimizazioa: Irudia hautatu ondoren, editatu eta optimizatzeko garaia da weberako. Irudiak editatzeko programak erabil ditzakezu Photoshop edo GIMP bezalako bere tamaina doitzeko, beharrezkoak ez diren zatiak mozteko eta kalitatea hobetzeko. Gainera, garrantzitsua da irudia optimizatzea bere tamaina murrizteko eta zure orriaren karga-abiadura hobetzeko. Erabili TinyPNG edo JPEGmini bezalako tresnak irudia konprimitzeko kalitatea galdu gabe.
Alt eta izenburu etiketak: Irisgarritasuna hobetzeko eta irudia errazago ulertzeko, garrantzitsua da alt eta izenburuko etiketak gehitzea. Alt etiketak testu alternatiboak eskaintzen ditu irudia behar bezala kargatzen ez bada edo pantaila-irakurgailuak erabiltzen dituzten ikusmen-urritasuna duten erabiltzaileentzat. Alt etiketaren testuak laburki deskribatu behar du irudiaren edukia. Titulu atributua irudiaren deskribapen gehigarria emateko erabiltzen da erabiltzailea gainean jartzen denean.
Gogoratu: Irudi garrantzitsu eta erakargarri bat hautatzea, egoki editatzea eta optimizatzea eta alt eta izenburu-etiketak gehitzea ezinbestekoak dira web-orri erakargarri eta irisgarri baterako. Jarraitu urrats hauek irudiak gehitzeko eraginkortasunez zure webgunean eta erabiltzailearen esperientzia hobetu.
4. Alt propietatea erabiltzea irisgarritasuna eta SEO hobetzeko
HTML-n alt propietatea ezinbestekoa da bai irisgarritasuna hobetzeko gune batetik. webgunea zure SEO optimizatzeko. Alt etiketa irudi bati testu alternatiboa emateko erabiltzen da, bistaratu ezin denean edo orrialdearen edukia ozen irakurtzen denean. Funtsezkoa da propietate hau irudi guztietan sartzea, ikusmen-urritasuna duten erabiltzaileek pantaila-irakurleen bidez edo ikusmen-edukia ulertzeko aukera ematen baitu. beste gailu batzuk laguntza.
Alt propietatean alt testua gehitzean, irudian adierazten dena behar bezala deskribatzen duela ziurtatu behar da. Deskribatzailea eta zehatza izan behar du, irudiaren funtsezko informazioa helaraziz. Gainera, komeni da orriaren gaiarekin lotutako gako-hitzak erabiltzea SEO hobetzeko. Horrek bilatzaileei irudiaren edukia ulertzen lagunduko die eta webgunea bilaketa-emaitzetan hobeto sailkatzen lagunduko die.
Irisgarritasuna eta SEO hobetzeaz gain, alt propietatearen erabilera egokiak konexio motela edo mugatua duten erabiltzaileei ere mesede egin diezaieke. Irudi bat kargatzeko arazoak direla-eta bistaratu ezin denean, alt propietatean emandako alt testuari esker, erabiltzaileek irudiaren edukia ulertzeko aukera izango dute kargatu arte itxaron behar izan gabe. Horrek erabiltzailearen esperientzia hobetzen du eta balizko frustrazioak saihesten ditu.
Laburbilduz, alt propietatea erabiltzea ezinbestekoa da webgune baten irisgarritasuna eta SEO hobetzeko. Irudi bakoitzerako alt testu deskribatzaile eta garrantzitsua eskaintzeak ikusmen urritasuna duten erabiltzaileei ikusmen-edukia ulertzen lagunduko die eta bilatzaileei webgunea hobeto indexatzeko aukera emango die. Gainera, konexio motelak edo mugatuak dituzten erabiltzaileei ere mesede egingo die, irudia kargatu arte itxaron gabe eduki bisuala ulertzeko aukera emanez. Ez ahaztu alt propietatea zure irudi guztietan sartzea beti erabiltzailearen esperientzia hobetzeko eta zure webgunearen ikusgarritasuna bilatzaileetan areagotzeko.
5. Irudiaren tamaina eta posizioa doitzea
Irudi baten tamaina eta posizioa HTMLn doitzea ezinbestekoa da web orri batean diseinu erakargarria eta orekatua lortzeko. Hori lortzeko, hainbat aukera daude, irudiak proiektuaren beharren arabera egokitu eta pertsonalizatzeko aukera ematen dutenak. Doikuntza hauek egiteko teknika nagusiak jarraian zehaztuko dira.
Tamaina doikuntza: Irudi baten tamaina aldatzeko, etiketan "zabalera" eta "altuera" atributuak erabil ditzakezu . Atributu hauek irudiaren zabalera eta altuera pixeletan zehazteko aukera ematen dute. Adibidez,
. Gainera, "estiloa" atributua ere erabil dezakezu tamaina ehunekotan edo unitate erlatiboetan (% edo em) definitzeko. Adibidez, .
Posizio doikuntza: Irudi baten posizioa bere edukiontziarekiko aldatzeko, "style" atributua "float" propietatearekin batera erabil daiteke. Adibidez, . Honek irudia edukiontziaren ezkerreko aldean lerrokatuko du. "Marjina" propietatea ere erabil dezakezu irudiaren inguruko marjina edo espazioa doitzeko. Adibidez, .
Lerrokadura doikuntza: Irudi bat bere edukiontzian horizontalki lerrokatzeko, edukiontziko CSS "text-align" propietatea erabil dezakezu. Adibidez, irudi bat erdialdera lerrokatu nahi baduzu, "text-align: center;" aplika dezakezu. edukiontzira. Gainera, "lerrokatu bertikala" propietatea ere erabil dezakezu irudia testuaren barruan bertikalki lerrokatzeko. Adibidez, . Teknika hauek web orri batean irudi baten tamaina eta posizioa behar bezala doitzeko aukera ematen dute, erabiltzailearen esperientzia bisuala hobetuz.
6. Irudien optimizazioa eta formatua kargatzeko abiadura hobetzeko
Webgune baten karga-abiadura hobetzeko irudiak optimizatzean, garrantzitsua da irudiaren formatua eta tamaina kontuan hartzea. Irudi formatua aukeratzerakoan, JPEG edo PNG bezalako formatuak erabiltzea gomendatzen da, ohikoenak eta nabigatzaile gehienek onartzen dituztenak baitira. Gainera, formatu hauei esker, irudia konprimitu daiteke kalitate bisual gehiegi galdu gabe.
Irudiaren konpresioa funtsezkoa da fitxategiaren tamaina murrizteko eta, beraz, kargatzeko abiadura hobetzeko. Hainbat sareko tresna eta software espezializatu daude horretan lagun dezaketen, hala nola Photoshop, TinyPNG edo JPEG Optimizer. Tresna hauek irudiaren kalitatea doitzeko aukera ematen dute, bereizmena murriztuz eta beharrezkoak ez diren metadatuak ezabatuz. Era berean, gogoratu irudiaren tamainak egokia izan behar duela webgunean erabiltzeko, handiegiak diren irudiak erabiltzea saihestuz, orriaren karga motelduko luketelako.
Konpresioaz gain, Beste alderdi garrantzitsu bat irudiaren tamaina pixeletan da. Irudiaren neurriak zuzenean HTMLn doitzea komeni da "zabalera" eta "altuera" bezalako atributuak erabiliz. Horri esker, arakatzaileak espazio egokia gorde dezake irudiarentzat, orria kargatzen den bitartean diseinua kolapsoa saihestuz. Era berean, erabilgarria da "srcset" bezalako tresnak erabiltzea irudiaren bertsio desberdinak adierazteko pantaila tamaina eta bereizmen desberdinetarako.
Amaitzeko, web orri baten karga-abiadura hobetzeko, beharrezkoa da irudiak optimizatzea eta behar bezala formateatzea. Honek formatu egokia hautatzea, irudia konprimitzea kalitatea galdu gabe eta pixelen tamaina doitzea dakar errendimendu optimoa bermatzeko. Jarraian aholku hauek, erabiltzailearen esperientzia eta zure webgunearen posizionamendua hobetu ahal izango dituzu bilatzaileetan.
7. Irudiari deskribapena edo izenburua gehitzea
Nola gehitu deskribapena edo izenburua irudiari HTMLn
Gure web-orrietara irudiak gehitzen ditugunean, garrantzitsua da deskribapena edo izenburua ematea irisgarritasuna eta erabiltzailearen esperientzia hobetzeko. HTMLn, hori lortzeko modu desberdinak ditugu. Jarraian, zure irudiei deskribapena edo izenburua gehitzeko hiru metodo ezagun azalduko ditut.
1. "alt" atributua etiketan : deskribapen bat gehitzeko modu arrunta HTMLko irudi batera etiketan "alt" atributua erabiltzea da
. Atributu hau irudia behar bezala kargatzen ez bada bistaratu beharreko testu alternatiboa emateko erabiltzen da. Gainera, bilatzaileek eta irakurketa laguntzaileek deskribapen hau erabiltzen dute irudiaren edukia ulertzeko. Testuak laburra eta argia izan behar du, irudiaren zatirik garrantzitsuena jasoz.
2. «title» atributua etiketan : Irudi bati deskribapena edo izenburua gehitzeko beste modu bat etiketaren "title" atributua erabiltzea da
. Atributu hau irudiari buruzko informazio gehigarria emateko erabiltzen da erabiltzailea gainean jartzen denean. Hau erabil dezakezu irudiari buruzko xehetasun gehiago eskaintzeko edo testuinguru zehatza emateko.
3. Etiketa
Gogoratu zure webguneko irudi bakoitzaren deskribapen edo izenburu egoki bat gehitzea. Honek erabiltzailearen esperientzia hobetzeaz gain, irisgarritasuna eta bilatzaileen sailkapena ere hobetuko ditu. Gehitu balioa zure irudiei eta hobetu zure web edukiaren kalitatea!
8. Irudiei CSS estiloak aplikatzea
Artikulu honetan, HTMLko irudiei CSS estiloak nola aplikatu aztertuko dugu. CSS-rekin, gure irudien itxura pertsonaliza dezakegu, hala nola, tamaina aldatzea, ertzak gehituz eta efektu bisualak aplikatuz. Horrek gure webguneko irudien itxuraren kontrol osoa ematen digu.
1. Irudien tamaina aldatu: CSS-rekin, gure irudiak erraz alda ditzakegu gure beharretara egokitzeko. "zabalera" eta "altuera" propietateak erabil ditzakegu irudiaren neurri zehatzak zehazteko. Tamaina erlatiboa ere ezarri dezakegu ehunekoak edo "em" erabiliz. Horri esker, diseinu malguak eta sentikorrak sortzeko aukera dugu.
2. Gehitu ertzak irudiei: CSS-rekin pertsonaliza dezakegun beste alderdi bat gure irudien ertzak dira. "Ertza" propietatea erabil dezakegu gure irudiei ertz solido, puntudun, ertz edo ertz bat gehitzeko. Ertzaren kolorea eta lodiera ere zehaztu ditzakegu gure lehentasunen arabera.
3. Aplikatu ikusizko efektuak irudiei: CSS-k gure irudiei efektu bisual interesgarriak aplikatzeko aukera ematen digu. "Iragazkia" propietatea erabil dezakegu lausotasuna, kontrastea edo saturazioa bezalako efektuak gehitzeko. "Opakotasun" propietatea ere erabil dezakegu gure irudiak gardenagoak izateko edo gainjarri efektuak sortzeko. Efektu hauek gure irudien itxura hobetzen eta gure webgunean nabarmentzen lagun dezakete.
Laburbilduz, CSS-k aukera asko eskaintzen dizkigu gure HTML irudien itxura pertsonalizatzeko. Tamaina aldatu, ertzak gehitu eta efektu bisualak aplikatu ditzakegu gure erabiltzaileentzat bisualki erakargarria den esperientzia bat sortzeko. Probatu estilo eta aukera ezberdinekin zure beharretara eta lehentasunetara hobekien egokitzen den diseinua aurkitzeko.
9. Irudietan estekak habiatzea erabiltzailearen esperientzia hobea izateko
Irudietan estekak habiatzea oso teknika erabilgarria da webgune bateko erabiltzailearen esperientzia hobetzeko. HTMLrekin, irudiei estekak gehi diezazkiekegu, erabiltzaileek haien gainean klik egin dezaten eta erlazionatutako orrialde edo baliabide batera joateko. Hau bereziki erabilgarria da irudiak esteka bat bisualki irudika dezakeen kasuetan, baina esteka-atributurik ez duen kasuetan.
Irudi batean esteka bat habiatzeko, lehenik eta behin irudiaren etiketa dugula ziurtatu behar dugu (), irudiaren etiketa biltzen dugu. Estekaren etiketaren barruan, irudian klik egiten denean birbideratu nahi dugun URLa zehazten dugu.
Garrantzitsua da irudi batean esteka bat habiatzerakoan, alt testu deskribatzailea ere gehitu behar dugula atributua erabiliz. alt. Hau ezinbestekoa da irisgarritasunerako eta pantaila-irakurgailuak erabiltzen dituzten pertsonei irudiaren edukia ulertzen laguntzen die.
10. HTMLn irudiak gehitzeko azken gogoetak eta jardunbide egokiak
Irudiak HTMLn gehitzean, garrantzitsua da praktika on batzuk kontuan hartzea nabigatzaile eta gailu desberdinetan bistaratzea eta optimizazioa zuzena bermatzeko. Jarraian, zure web orrietako irudien kalitatea eta errendimendua hobetzen lagunduko duten azken gogoeta batzuk eta praktika onak daude.
1. Irudiaren tamaina eta bereizmena: Irudi bat gehitu aurretik, ziurtatu zure webgunerako tamaina eta bereizmen egokia dela. HTML erabiliz irudi baten tamaina aldatzeak bere kalitatean eta karga-errendimenduan eragina izan dezake, beraz, komeni da irudiak editatzeko programa bat erabiltzea zure beharretara aldez aurretik doitzeko.
2. Irudi formatuak: HTMLn, hainbat irudi formatu erabil ditzakezu, hala nola JPEG, PNG eta GIF. Formatu bakoitzak bere ezaugarriak eta abantailak ditu, beraz, garrantzitsua da formatu zuzena aukeratzea erakutsi nahi duzun irudi motaren arabera. Adibidez, gardentasuna duen irudi bat behar baduzu, PNG formatua da aukerarik onena.
3. Elementuaren atributuak : Elementua
Irudiak HTMLn bistaratzeko erabiltzen da. Itxiera etiketaz gain, elementu honek tamaina, alt testua, esteka eta irudiaren estiloa bezalako alderdiak kontrolatzeko aukera ematen duten hainbat atributu onartzen ditu. Zure webguneko irudiaren bistaratzea eta irisgarritasuna optimizatzeko atributu egokiak erabiltzea komeni da.
HTMLn irudiak gehitzean azken gogoeta eta jardunbide egoki hauei jarraituz, erabiltzailearen esperientzia optimoa bermatu dezakezu eta zure webgunearen errendimendua hobetu. Gogoratu beti zure irudiak probatu eta optimizatu behar dituzula emaitzarik onenak lortzeko. Espero dugu artikulu hau baliagarria izan zaizula eta bisualki erakargarri eta eraginkorrak diren web-orrialdeak sortzen lagunduko dizula!
