സാങ്കേതികവിദ്യ - ചിത്രങ്ങള്‍ (എച് ടി എം എല്‍ - 5)
| URL:http://technology4all.blogspot.com/2006/10/5.html | Published: 10/3/2006 12:34 AM |
| Author: Adithyan |
ഒരു എച്. ടി. എം. എല്‍. പേജില്‍ എങ്ങനെ ടെക്‌സ്റ്റ് ഫോര്‍മാറ്റ് ചെയ്യാം, ഒരു പേജില്‍ നിന്ന് മറ്റൊരു പേജിലേയ്ക്ക് എങ്ങനെ ലിങ്ക് കൊടുക്കാം എന്നൊക്കെ മുന്‍ അദ്ധ്യാങ്ങളില്‍ കണ്ടു കഴിഞ്ഞു. ഒരു പേജ് ആകര്‍ഷകമാക്കുന്നതില്‍ അടുത്ത പടിയാണ് ചിത്രങ്ങള്‍ ഉള്‍പ്പെടുത്തുക എന്നത്. ഒരു ചിത്രം നമ്മുടെ പേജില്‍ കാണിക്കുന്നതിന് അതിന്റെ യു.ആര്‍. എല്‍ അറിഞ്ഞിരിയ്ക്കണം. ഉദാഹരണത്തിന് ശനിയന്‍ ബ്ലോഗറില്‍ അപ്‌ലോഡ് ചെയ്ത ഒരു ചിത്രത്തിന്റെ യു. ആര്‍. എല്‍ ആണ് http://photos1.blogger.com/blogger/511/1919/1600/Picture%20032.0.jpg എന്നത്.
ചിത്രങ്ങള്‍ ഉള്‍പ്പെടുത്താന്‍ 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 ടാഗ് ആണ് ഉപയോഗിക്കണ്ടത്. 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> | |
| Squeet Tip | Squeet Advertising Info |
A great RSS feed can help you live, work, or play better. If it's been a while since you've found a feed like this, head over to the Squeet Reader Directory where you'll find 80+ quality feeds in many categories. Quickly and easily subscribe to multiple groups or catgories all at once.
Read the Squeet Blog Article
posted by സ്വാര്‍ത്ഥന്‍ at 9:33 PM
0 Comments:
Post a Comment
<< Home