Ahoana ny fomba hanampiana sary ao amin'ny HTML
HTML (HyperText Markup Language) dia ny fiteny fanamarihana fenitra ampiasaina hamoronana sy handrafetana votoaty ao amin'ny tranonkala. Ny iray amin'ireo endri-javatra mahazatra sy mahasoa indrindra amin'ny fampivoarana tranonkala dia ny fahafahana manampy sary. Ato amin'ity lahatsoratra ity, isika dia hianatra ny fomba ampio sary amin'ny HTML tsotra sy mahomby.
Anatomy ny tag sary amin'ny HTML
Ny tag sary amin'ny HTML dia aseho amin'ny singa . Ity tag ity dia tsy misy fanakatonana ary ampiasaina hampidirana sary ao anaty pejin-tranonkala. Eto dia aseho ny Anatomy fototra amin'ny tag sary amin'ny HTML:
"`html
«`
– src: dia ny toetra ilaina izay mamaritra ny lalana na URL ny sary haseho.
– hafa: dia ny toetra ilaina izay manome lahatsoratra hafa ho an'ny sary, raha toa ka tsy voaloa ny sary. Zava-dehibe amin'ny fidirana amin'ny tranonkala izany.
– sakany: dia toetra azo atao izay mametraka ny sakan'ny sary amin'ny piksel.
– haavo: dia toetra tsy voatery mametraka ny haavon'ny sary amin'ny piksel.
Manampy sary eo an-toerana
HO AN'NY ampio sary eo an-toerana amin'ny HTMLVoalohany, mila mahazo antoka ianao fa manana ny sary voatahiry ao amin'ny lahatahiry na lahatahiry mitovy amin'ny rakitra HTML iasanao. Avy eo dia azonao ampiasaina ny tag ary ny toetra src hamaritana ny lalana mifandray amin'ny sary.
Raha fintinina, ampio sary amin'ny HTML Izany dia dingana tsotra izay afaka manatsara ny endriny sy ny votoatin'ny pejy web. Amin'ny alàlan'ny fifehezana ny fampiasana ny tag sary sy ny toetrany, dia ho azonao atao ny manamboatra sy mamelona ny tetikasanao tranonkala mahomby kokoa. Asehoy ny fahaiza-mamorona anao amin'ny fampidirana sary manintona sy mifanentana!
1. Singa HTML fototra hanampiana sary
Tag HTML hanampiana sary
Mba hanampiana sary ao amin'ny HTML, marika roa lehibe no ampiasaina: y
ampiasaina hamaritana ny sary mihitsy, raha ny tag
, ny toetra no ampiasaina src mba hamaritana ny niandohan'ny sary, sy ny toetra alt manome lahatsoratra hafa raha sendra tsy voaloa ny sary.
Toetra fanampiny hanatsarana ny fahitana
Ankoatra ny toetra fototra, dia misy toetra fanampiny azo ampiasaina hanatsarana ny fahitana avy amin'ny sary amin'ny HTML. Ny iray amin'ireo toetra ireo dia ny toetra sakany, izay ampiasaina mba hamaritana ny sakan'ny sary amin'ny pixel na isan-jato. Ny toetra mahasoa iray hafa dia ny toetra hahavony, izay ampiasaina hamaritana ny haavon'ny sary. Azonao atao koa ny mampiasa ny toetra Alahatra hampifanaraka ny sary mifandraika amin'ny lahatsoratra manodidina, ary fomba hampihatra fomba fanao amin'ny sary, toy ny haben'ny endri-tsoratra na loko ambadika.
Fandinihana ny Optimization sy ny Accessibility
Rehefa manampy sary amin'ny HTML dia zava-dehibe ny mandinika ny fanatsarana sy ny fidirana. Mba hanamafisana ny sary iray dia asaina manindry azy io mba hampihenana ny haben'ny rakitra nefa tsy very ny kalitaon'ny maso. Manampy haingana kokoa ny pejy web ary manatsara ny traikefan'ny mpampiasa izany. Mikasika ny fidirana dia ilaina ny manome lahatsoratra alt misy dikany amin'ny toetra alt avy amin'ny marika . Izany dia ahafahan'ny olona manana fahasembanana ara-pahitana na mampiasa mpamaky efijery hahatakatra ny votoatin'ilay sary. Ankoatra izany, tsy maintsy miantoka ianao fa ny lahatsoratra alt dia mamaritra sy mifanaraka amin'ny tontolon'ny sary.
2. Fampidirana etikety ![]()
ary toetra tena ilaina
Ny marika Iray amin'ireo ampiasaina indrindra amin'ny HTML izy io mba hampidirana sary ao anaty pejin-tranonkala. Mba hampidirana sary iray ao amin'ny kaodinay dia mila ampiana ity marika ity sy ireo toetra tena ilaina ilaina amin'ny fanehoana ny sary amin'ny navigateur. Ny iray amin'ireo toetra manan-danja indrindra dia src, izay manondro ny lalana na URL an'ny sary tiantsika haseho. Raha tsy misy io toetra io, ny tag
Tsy hanana sary haseho aho.
Toetra ilaina iray hafa dia ny alt, izay mamaritra lahatsoratra hafa haseho raha toa ka tsy voaloa ny sary na raha toa ka tsy nety ny fampidinana sary ny mpampiasa. Zava-dehibe ny fampidirana lahatsoratra misy famaritana ao amin'io toetra io, satria manampy ny olona sembana amin'ny fahitana ny votoatin'ny sary.
Ankoatra ireo toetra ireo dia misy hafa toy ny sakany y hahavony, izay ahafahanao mamaritra ny sakany sy ny haavon'ny sary amin'ny piksel. Ireo toetra ireo dia tsy azo atao, saingy asaina mampiasa azy ireo ianao mba hifehezana ny haben'ny sary sy hisorohana azy tsy hikorontana amin'ny pejy.
Raha fintinina, mba hanampiana sary amin'ny HTML dia mila mampiasa ny tag ary ampio ireo toetra ilaina toy ny src y alt. Azontsika atao koa ny mampiasa toetra tsy voatery toy ny sakany y hahavony hifehy ny haben'ny sary. Zava-dehibe ny manamarika fa ny lahatsoratra alt amin'ny toetra alt Tsy maintsy misy famaritana sy mifanaraka amin'izany mba hahazoana antoka ny fidirana amin'ny tranokalanay.
3. Fifidianana sy fanomanana ny sary mety
Amin'ity fizarana ity dia hianatra ny fomba hifidianana sy hanomanana ny sary mety hanampy amin'ny pejinao HTML ianao. Zava-dehibe ny mifidy sary iray manan-danja sy manintona ho an'ny mpampiasa, satria manampy amin'ny fisarihana ny sain'izy ireo sy hanatsara ny traikefan'ny fitetezana izany. Fanampin'izany, ny fanomanana sary araka ny tokony ho izy dia miantoka fa miseho tsara izy io fitaovana samihafa ary ny haben'ny efijery.
Fifantenana sary: Alohan'ny hampidirana sary amin'ny pejin-tranonkalanao dia zava-dehibe ny misafidy sary mifanaraka amin'ny atiny sy ny tanjon'ny tranokalanao. Azonao atao ny mampiasa ny sarinao manokana na mikaroka banky sary maimaim-poana na karama. Tsara ny mifidy sary avo lenta miaraka amin'ny endrika tohana mahazatra toy ny JPG, PNG na GIF. Ataovy azo antoka koa fa manana zo ilaina hampiasa ny sary ianao raha tsy manana azy ianao.
Fanitsiana sy fanatsarana: Rehefa voafantina ny sary dia tonga ny fotoana hanitsiana sy hanatsarana azy ho an'ny tranonkala. Azonao atao ny mampiasa programa fanitsiana sary toy ny Photoshop na GIMP hanitsiana ny habeny, hanapaka ny ampahany tsy ilaina ary hanatsara ny kalitao. Fanampin'izany, zava-dehibe ny manatsara ny sary mba hampihenana ny habeny sy hanatsara ny hafainganam-pandehan'ny pejinao. Mampiasà fitaovana toa an'i TinyPNG na JPEGmini hanenjehana ny sary nefa tsy very kalitao.
Alt sy title tags: Mba hanatsarana ny fidirana sy hanamora ny fahazoana ilay sary, dia zava-dehibe ny manampy ny alt sy ny lohateny. Ny tenifototra alt dia manome lahatsoratra hafa haseho raha toa ka tsy mandeha tsara ny sary na ho an'ireo mpampiasa sembana amin'ny fahitana mampiasa mpamaky efijery. Ny lahatsoratra alt tag dia tokony hamaritra fohifohy ny votoatin'ny sary. Ny toetran'ny lohateny dia ampiasaina mba hanomezana famaritana fanampiny momba ny sary rehefa misidina eo amboniny ny mpampiasa.
Tsarovy: Ny fisafidianana sary mifanentana sy mahasarika, ny fanitsiana sy ny fanatsarana azy araka ny tokony ho izy, ary ny fampidirana alt sy lohateny dia tena ilaina amin'ny pejy web manintona sy azo idirana. Araho ireto dingana ireto mba hanampiana sary MAHAY ao amin'ny tranokalanao ary manatsara ny traikefan'ny mpampiasa.
4. Mampiasa ny fananana alt hanatsarana ny fidirana sy SEO
Ny fananana alt amin'ny HTML dia tena ilaina mba hanatsarana ny fidirana avy amin'ny tranonkala iray tranokala hanatsarana ny SEO anao. Ny tag alt dia ampiasaina hanomezana lahatsoratra hafa ho an'ny sary rehefa tsy azo aseho na rehefa vakina mafy ny votoatin'ny pejy. Zava-dehibe ny fampidirana ity fananana ity amin'ny sary rehetra satria ahafahan'ny mpampiasa sembana mahita ny votoatiny hita maso amin'ny alàlan'ny mpamaky efijery na fitaovana hafa fanampiana.
Rehefa manampy lahatsoratra alt amin'ny fananana alt dia zava-dehibe ny hahazoana antoka fa mamaritra tsara izay aseho amin'ny sary izy io. Tokony ho famaritana sy fohy, mampita ny fampahalalana fototra amin'ny sary. Fanampin'izany, tsara ny mampiasa teny fanalahidy mifandraika amin'ny lohahevitry ny pejy hanatsarana SEO. Izany dia hanampy ny milina fikarohana hahatakatra ny votoatin'ny sary ary hametraka ny tranokala tsara kokoa amin'ny valin'ny fikarohana.
Ho fanampin'ny fanatsarana ny fidirana sy ny SEO, ny fampiasana araka ny tokony ho izy ny fananana alt dia mety hahasoa ireo mpampiasa manana fifandraisana miadana na voafetra ihany koa. Rehefa tsy azo aseho ny sary iray noho ny olana amin'ny fametahana, ny lahatsoratra alt omena ao amin'ny fananana alt dia ahafahan'ny mpampiasa mahazo ny votoatin'ny sary nefa tsy mila miandry azy hampiditra azy. Manatsara ny traikefan'ny mpampiasa izany ary misoroka ny fahasorenana mety hitranga.
Raha fintinina, ny fampiasana ny fananana alt dia ilaina amin'ny fanatsarana ny fidirana sy SEO amin'ny tranokala iray. Ny fanomezana lahatsoratra alt descriptive sy manan-danja ho an'ny sary tsirairay dia hanampy ireo mpampiasa manana fahasembanana hahatakatra ny atiny hita maso ary hamela ny milina fikarohana hanondro tsara kokoa ny tranokala. Ho fanampin'izay, hahasoa ireo mpampiasa manana fifandraisana miadana na voafetra ihany koa izany amin'ny alàlan'ny famelana azy ireo hahatakatra ny votoaty hita maso tsy hiandry ny sary. Aza adino ny mampiditra foana ny fananana alt amin'ny sarinao rehetra mba hanatsarana ny traikefan'ny mpampiasa sy hampitombo ny fahitana ny tranokalanao amin'ny milina fikarohana.
5. Fanitsiana ny haben'ny sary sy ny toerana misy azy
Ny fanitsiana ny habeny sy ny toeran'ny sary iray amin'ny HTML dia tena ilaina mba hahazoana endrika manintona sy voalanjalanja amin'ny pejy web. Mba hahatratrarana izany dia misy safidy isan-karazany ahafahanao mampifanaraka sy mampifanaraka ny sary mifanaraka amin'ny filan'ny tetikasa. Ny teknika fototra hanaovana ireo fanitsiana ireo dia horesahina etsy ambany.
Fanitsiana ny habe: Raha hanova ny haben'ny sary iray dia azonao ampiasaina ny toetra "width" sy "haavo" ao amin'ny tag . Ireo toetra ireo dia ahafahanao mamaritra ny sakany sy ny haavon'ny sary amin'ny piksel. Ohatra,
. Fanampin'izany, azonao atao koa ny mampiasa ny toetra "style" hamaritana ny habe amin'ny isan-jato na amin'ny singam-pifandraisana (% na em). Ohatra, .
Fanitsiana toerana: Raha hanova ny toeran'ny sary mifandray amin'ny fitoerany, dia azo ampiasaina miaraka amin'ny fananana "float" ny toetra "style". Ohatra, . Izany dia hahatonga ny sary hirindra amin'ny ilany havia amin'ny fitoeran-javatra. Azonao atao ihany koa ny mampiasa ny fananana "margin" hanitsiana ny sisiny na ny habaka manodidina ny sary. Ohatra, .
Fanitsiana fampifanarahana: Mba hampifanitsiana sary mitsivalana ao anatin'ny fitoerany dia azonao atao ny mampiasa ny fananana CSS "text-align" ao amin'ny container. Ohatra, raha te hampifanaraka sary amin'ny afovoany ianao dia azonao atao ny mampihatra "text-align: center;" mankany amin'ny fitoeran-javatra. Ho fanampin'izay, azonao atao koa ny mampiasa ny fananana "vertical-align" hanitsy ny sary mitsangana ao anatin'ny lahatsoratra. Ohatra, . Ireo teknika ireo dia ahafahanao manitsy araka ny tokony ho izy ny haben'ny sary iray amin'ny pejin-tranonkala, manatsara ny traikefan'ny mpampiasa.
6. Fanatsarana ny sary sy fandrafetana mba hanatsarana ny hafainganam-pandeha
Rehefa manatsara ny sary hanatsarana ny hafainganam-pandehan'ny tranonkala iray, dia zava-dehibe ny mandinika ny endrika sy ny haben'ny sary. Rehefa misafidy ny endrika sary dia asaina mampiasa endrika toy ny JPEG na PNG, satria izy ireo no mahazatra indrindra ary tohanan'ny ankamaroan'ny navigateur. Ankoatr'izay, ireo endrika ireo dia mamela ny sary ho voatsindry nefa tsy very ny kalitaon'ny maso.
Zava-dehibe ny famoretana sary mba hampihenana ny haben'ny rakitra ary noho izany dia manatsara ny hafainganam-pandeha. Misy fitaovana an-tserasera maromaro sy rindrambaiko manokana afaka manampy amin'izany, toy ny Photoshop, TinyPNG na JPEG Optimizer. Ireo fitaovana ireo dia ahafahanao manitsy ny kalitaon'ny sary, mampihena ny famahana ary manafoana ny metadata tsy ilaina. Tsarovy ihany koa fa ny haben'ny sary dia tsy maintsy mifanentana amin'ny fampiasana amin'ny tranokala, misoroka ny fampiasana sary lehibe loatra satria mety hampiadana ny fampidinana ny pejy.
Ankoatra ny famoretana, Ny lafiny manan-danja iray hafa dia ny haben'ny sary amin'ny pixel. Tsara ny manitsy mivantana ny haben'ny sary amin'ny HTML amin'ny fampiasana ny toetra toy ny "width" sy "haavony". Izany dia ahafahan'ny navigateur mitahiry toerana sahaza ho an'ny sary, manakana ny firodanan'ny rindran-damina rehefa mitondra ny pejy. Tena ilaina ihany koa ny mampiasa fitaovana toy ny "srcset" hanondro ny dikan-tsary samihafa amin'ny haben'ny efijery sy ny fanapahan-kevitra.
Ho fehin-kevitra, mba hanatsarana ny hafainganam-pandehan'ny pejin-tranonkala iray dia ilaina ny manatsara sy manara-maso tsara ny sary. Tafiditra ao anatin'izany ny fisafidianana ny endrika mety, ny fanerena ny sary nefa tsy very ny kalitao, ary ny fanitsiana ny haben'ny piksel mba hahazoana antoka fa mahomby. FANARAHANA ireto torohevitra ireto, dia ho afaka hanatsara ny traikefan'ny mpampiasa sy ny fametrahana ny tranokalanao amin'ny milina fikarohana ianao.
7. Manampy famaritana na lohateny amin'ny sary
Ahoana ny fomba hanampiana famaritana na lohateny amin'ny sary amin'ny HTML
Rehefa manampy sary amin'ny pejin-tranonkalanay izahay, dia zava-dehibe ny manome famaritana na lohateny hanatsarana ny fidirana sy ny traikefan'ny mpampiasa. Ao amin'ny HTML, manana fomba samihafa hanatanterahana izany isika. Eto ambany aho dia hanazava fomba telo malaza amin'ny fampidirana famaritana na lohateny amin'ny sarinao.
1. toetra "alt" ao amin'ny etikety : Fomba mahazatra hanampiana famaritana amin'ny sary iray ao amin'ny HTML dia ny fampiasana ny toetra "alt" ao amin'ny tag
. Ity toetra ity dia ampiasaina hanomezana lahatsoratra hafa haseho raha toa ka tsy mandeha tsara ny sary. Fanampin'izany, ny milina fikarohana sy ny mpanampy mamaky teny dia mampiasa ity famaritana ity mba hahatakarana ny votoatin'ny sary. Ny lahatsoratra dia tokony ho fohy sy mazava, maka ny ampahany manan-danja indrindra amin'ny sary.
2. Toetra «lohateny» eo amin'ny marika : Fomba iray hafa hanampiana famaritana na lohateny amin'ny sary iray dia ny fampiasana ny toetra "lohateny" ao amin'ny marika
. Ity toetra ity dia ampiasaina mba hanomezana fampahalalana fanampiny momba ny sary rehefa misidina eo amboniny ny mpampiasa. Azonao atao ny mampiasa an'io mba hanolorana antsipiriany bebe kokoa momba ilay sary na hanome azy contexte manokana.
3. Marika
Aza adino ny manampy famaritana na lohateny mety ho an'ny sary tsirairay ao amin'ny tranokalanao. Tsy hanatsara ny traikefan'ny mpampiasa fotsiny izany, fa koa ny fidirana sy ny laharan'ny milina fikarohana. Ampio lanja ny sarinao ary hatsarao ny kalitaon'ny ati-tranonkalanao!
8. Mampihatra fomba CSS amin'ny sary
Ato amin'ity lahatsoratra ity, dia hijery ny fomba fampiharana ny CSS styles amin'ny sary ao amin'ny HTML. Miaraka amin'ny CSS, azontsika atao ny mampifanaraka ny endriky ny sarintsika, toy ny fanovana ny habeny, ny fampidirana sisin-tany ary ny fampiharana ny vokatry ny maso. Izany dia manome antsika fifehezana tanteraka ny fisehon'ireo sary ao amin'ny tranokalanay.
1. Ovay ny haben'ny sary: Miaraka amin'ny CSS, afaka manova ny habeny mora foana izahay mba hifanaraka amin'ny filanay. Afaka mampiasa ny fananana "width" sy "haavo" isika mba hamaritana ny refy marina amin'ny sary. Azontsika atao ihany koa ny mametraka ny habeny amin'ny fampiasana isan-jato na "em". Izany dia mamela antsika hamorona endrika malefaka sy mahazaka.
2. Ampio sisintany amin'ny sary: Ny lafiny iray hafa azontsika amboarina amin'ny CSS dia ny sisin'ny sarintsika. Azontsika atao ny mampiasa ny fananana "sisintany" hanampiana sisin-tany mivaingana, misy teboka, misy embossed na embossed amin'ny sarintsika. Azontsika atao koa ny mamaritra ny loko sy ny hatevin'ny sisin-tany araka izay tiantsika.
3. Ampiharo ny vokatry ny maso amin'ny sary: Ny CSS ihany koa dia mamela antsika hampihatra vokatra hita maso mahaliana amin'ny sarintsika. Azontsika ampiasaina ny fananana "sivana" hanampiana vokatra toy ny blur, contrast na saturation. Azontsika ampiasaina koa ny fananana "opacity" mba hahatonga ny sarintsika ho mangarahara kokoa na hamoronana fiantraikany amin'ny overlay. Ireo vokatra ireo dia afaka manampy amin'ny fanatsarana ny endrik'ireo sarinay ary mampisongadina azy ireo amin'ny tranokalanay.
Raha fintinina, CSS dia manome antsika safidy maro hanamboarana ny endriky ny sary HTML. Azontsika ovaina ny habeny, ampiana sisintany, ary ampiharana ny fiantraikan'ny maso mba hamoronana traikefa mahafinaritra ho an'ny mpampiasa antsika. Manandrama fomba sy safidy samihafa hahitana ny endrika mifanaraka amin'ny filanao sy ny safidinao.
9. Manangana rohy amin'ny sary ho an'ny traikefan'ny mpampiasa tsara kokoa
Ny rohy fanaingoana amin'ny sary dia teknika tena ilaina hanatsarana ny traikefan'ny mpampiasa amin'ny tranokala iray. Miaraka amin'ny HTML, afaka manampy rohy mankany amin'ny sary isika mba ahafahan'ny mpampiasa manindry azy ireo ary mankany amin'ny pejy na loharano mifandraika. Tena ilaina izany amin'ny toe-javatra misy ny sary mety maneho rohy hita maso, nefa tsy manana toetra rohy.
Mba hametrahana rohy amin'ny sary iray dia mila mahazo antoka aloha isika fa manana ny tag sary (), nofonosinay ny tag sary. Ao anatin'ny tenifototra rohy, dia mamaritra ny URL tiantsika halefa rehefa tsindrio ilay sary.
Zava-dehibe ny manamarika fa rehefa mametraka rohy amin'ny sary iray dia tsy maintsy ampiana lahatsoratra alt descriptive amin'ny fampiasana ny toetra. alt. Tena zava-dehibe amin'ny fidirana izany ary manampy ny olona mampiasa mpamaky efijery hahatakatra ny votoatin'ilay sary.
10. Hevitra farany sy fomba fanao tsara indrindra amin'ny fampidirana sary amin'ny HTML
Rehefa manampy sary ao amin'ny HTML dia zava-dehibe ny mandinika fomba fanao tsara indrindra mba hiantohana ny fampisehoana marina sy ny fanatsarana amin'ny navigateur sy fitaovana samihafa. Ireto ambany ireto ny fiheverana farany sy fomba fanao tsara indrindra izay hanampy amin'ny fanatsarana ny kalitao sy ny fampisehoana sary ao amin'ny pejin-tranonkalanao.
1. Haben'ny sary sy ny famaha azy: Alohan'ny hampidirana sary dia ataovy azo antoka fa mifanaraka amin'ny habeny sy ny famahana ny tranokalanao izany. Mety hisy fiantraikany amin'ny kalitaony sy ny fampandehanana entana ny fanovana ny sary amin'ny fampiasana HTML, noho izany dia tsara ny mampiasa programa fanitsiana sary hanitsiana azy mialoha amin'ny filanao.
2. Endriky ny sary: Ao amin'ny HTML, misy endrika sary maromaro azonao ampiasaina, toy ny JPEG, PNG, ary GIF. Ny endrika tsirairay dia manana ny toetrany sy ny tombony, noho izany dia zava-dehibe ny misafidy ny endrika mety, arakaraka ny karazana sary tianao haseho. Ohatra, raha mila sary misy mangarahara ianao dia ny endrika PNG no safidy tsara indrindra.
3. Toetran'ny singa : Ny singa
Ampiasaina hanehoana sary amin'ny HTML izy io. Ho fanampin'ny tenifototra famaranana, ity singa ity dia manaiky toetra maromaro ahafahanao mifehy ny lafiny toy ny habe, lahatsoratra alt, rohy ary fomba sary. Tsara ny mampiasa ny toetra mifanaraka amin'izany mba hanatsarana ny fampisehoana sy ny fidirana amin'ny sary ao amin'ny tranokalanao.
Amin'ny fanarahana ireo hevitra farany sy fomba fanao tsara indrindra rehefa manampy sary amin'ny HTML ianao dia afaka miantoka ny traikefan'ny mpampiasa tsara indrindra ary manatsara ny fahombiazan'ny tranokalanao. Tsarovy foana ny manandrana sy manatsara ny sarinao mba hahazoana vokatra tsara indrindra. Manantena izahay fa nahasoa anao ity lahatsoratra ity ary manampy anao hamorona pejy web manintona sy mahomby!
