ചിത്രങ്ങള് ഉള്പ്പെടുത്താന് img ടാഗ് ആണ് ഉപയോഗിക്കണ്ടത്. img ടാഗിന്റെ ഏറ്റവും സാധാരണ രൂപം ഇങ്ങനെയാണ് - <img src="URL"></img>
ഇവിടെ URL എന്ന സ്ഥാനത്ത് മുകളില് പരാമര്ശിച്ച മുഴുവന് യു. ആര്. എല് കൊടുത്താല് ചിത്രം പേജില് ആ സ്ഥാനത്ത് വരും.
ഇതാ ഒരു ഉദാഹരണം - <img src="http://www.techmag.org/images/Shaniyan.jpg"></img> എന്ന് കൊടുത്താല് ഇങ്ങനെയായിരിക്കും പേജില് കാണുക.
ഇനി img ടാഗിന് മറ്റു പല ആട്രിബ്യൂട്ടുകളും ഉപയോഗിക്കാം. അവയേതൊക്കെ എന്നു നോക്കാം
ALT: എന്തെങ്കിലും കാരണത്താല് ചിത്രം കാണാതിരുന്നാല് ചിത്രത്തിനു പകരം ALT എന്ന ആട്രിബ്യൂട്ടിന്റെ വില പേജില് കാണിയ്ക്കും. ഇന്റര്നെറ്റ് എക്സ്പ്ലോററില് ഒരു ചിത്രത്തില് മൌസ് ഹോവര് ചെയ്യുമ്പോള് കാണിക്കുന്ന ടൂള് ടിപ്പും ഇതേ ALT വില തന്നെയാണ്.
NAME: ചിത്രത്തിന് എളുപ്പത്തിനായി ഒരു പേരു കൊടുക്കണമെങ്കില് ഇത് ഉപയോഗിക്കാം. അധികം ഉപയോഗിക്കാത്ത ഒരു ആട്രിബ്യൂട്ട് ആണിത്.
WIDTH: ഇത് ചിത്രത്തിന്റെ വീതി നിയന്ത്രിക്കാനായി ഉപയോഗിക്കുന്നു. പേജിന്റെ ഒരു പേര്സെന്റേജ് ആയോ അല്ലെങ്കില് പിക്സല് എണ്ണം വെച്ചോ വീതി പറയാവുന്നതാണ്. സാധാരണ വിലകള് 75%, 300 തുടങ്ങിയവയാണ്.
HEIGHT: ഇത് ചിത്രത്തിന്റെ നീളം നിയന്ത്രിക്കാനായി ഉപയോഗിക്കുന്നു. പേജിന്റെ ഒരു പേര്സെന്റേജ് ആയോ അല്ലെങ്കില് പിക്സല് എണ്ണം വെച്ചോ നീളം പറയാവുന്നതാണ്.
BORDER: ചിത്രത്തിനു ചുറ്റും ഒരു ബോര്ഡര് വേണമോ, അതിന്റെ വീതി എത്രയാവണം എന്നൊക്കെയുള്ള നിര്ദ്ദേശങ്ങള്. ഇതിന്റെ വില 0,1,2 എന്നിങ്ങനെ ആവാം.
ALIGN: ചിത്രത്തിനു ചുറ്റുമുള്ള ടെക്സ്റ്റ് ഏത് രീതിയില് വേണം എന്നതിനുള്ള നിര്ദ്ദേശം. സാധാരണ വിലകള് left, right തുടങ്ങിയവയാണ്.
HSPACE: ചിത്രവും ചുറ്റുമുള്ള ടെക്സ്റ്റും തമ്മിലുള്ള തിരശ്ചീന അകലം. 10, 50 എന്നിങ്ങനെ പിക്സല് വിലകളാണിതിനു നല്കാറ്.
VSPACE: ചിത്രവും ചുറ്റുമുള്ള ടെക്സ്റ്റും തമ്മിലുള്ള ലംബ അകലം. 10, 50 എന്നിങ്ങനെ പിക്സല് വിലകളാണിതിനു നല്കാറ്.
ഒരു ചിത്രത്തിന്റെ പല ഭാഗങ്ങള് പല ലിങ്കുകളുമായി ബന്ധിക്കാന് സാധിയ്ക്കും. ISMAP, USEMAP തുടങ്ങിയ ആട്രിബ്യൂട്ടുകള് അതിനാണ്.
SUPPRESS എന്ന ആട്രിബ്യൂട്ട് ഈ ചിത്രം ഡൌണ്ലോഡ് ചെയ്തു കഴിയുന്നതു വരെ ഇതിന്റെ ഐക്കണ് കാണിക്കാതിരിയ്ക്കാനായി ഉപയോഗിക്കാം.
ചില ഉദാഹരണങ്ങള്
ഉദാഹരണം | ബ്രൌസറില് കാണുന്നത് |
<img src="http://www.techmag.org/images/Shaniyan.jpg" > </img> | |
<img src="http://www.techmag.org/images/Shaniyan.jpg" alt="Tool Tip"> </img> | |
<img src="http://www.techmag.org/images/Shaniyan.jpg" alt="Poochakkutty" width="200" height="100" > </img> | |
<img src="http://www.techmag.org/images/Shaniyan.jpg" alt="Poochakkutty" width="25%" border="2" > </img> |