Monday, October 02, 2006

ചിത്രങ്ങള്‍ (എച് ടി എം എല്‍ - 5)

ഒരു എച്. ടി. എം. എല്‍. പേജില്‍ എങ്ങനെ ടെക്‌സ്റ്റ് ഫോര്‍മാറ്റ് ചെയ്യാം, ഒരു പേജില്‍ നിന്ന് മറ്റൊരു പേജിലേയ്ക്ക് എങ്ങനെ ലിങ്ക് കൊടുക്കാം എന്നൊക്കെ മുന്‍ അദ്ധ്യാങ്ങളില്‍ കണ്ടു കഴിഞ്ഞു. ഒരു പേജ് ആകര്‍ഷകമാക്കുന്നതില്‍ അടുത്ത പടിയാണ് ചിത്രങ്ങള്‍ ഉള്‍പ്പെടുത്തുക എന്നത്. ഒരു ചിത്രം നമ്മുടെ പേജില്‍ കാണിക്കുന്നതിന് അതിന്റെ യു.ആര്‍. എല്‍ അറിഞ്ഞിരിയ്ക്കണം. ഉദാഹരണത്തിന് ശനിയന്‍ ബ്ലോഗറില്‍ അപ്‌ലോഡ് ചെയ്ത ഒരു ചിത്രത്തിന്റെ യു. ആര്‍. എല്‍ ആണ് 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 src="http://www.techmag.org/images/Shaniyan.jpg" > </img>
<img src="http://www.techmag.org/images/Shaniyan.jpg" alt="Tool Tip"> </img> Tool Tip
<img src="http://www.techmag.org/images/Shaniyan.jpg" alt="Poochakkutty" width="200" height="100" > </img> Poochakkutty

<img src="http://www.techmag.org/images/Shaniyan.jpg" alt="Poochakkutty" width="25%" border="2" > </img>
Poochakkutty

4 comments:

വിശ്വപ്രഭ viswaprabha said...

ആ ശനിയന്റെ പൂച്ചയെ ഇങ്ങനെ വലിച്ചു നീട്ടിയും കുറുക്കിയൊടിച്ചും കളിച്ചാല്‍ കഷ്ടമല്ലേ ആദിത്യാ?

എന്താ പൂച്ചയ്ക്ക് ഒന്‍പത്‌ ജീവന്‍ (ജീ.9/- മാത്രം) ഉണ്ടെന്നുള്ള ധൈര്യത്തിലാണോ ഇതൊക്കെ?
അതോ എങ്ങനെയിട്ടാലും പൂച്ച നാലുകാലിന്മേല്‍ തന്നെ ടെമ്പ്ലേറ്റില്‍ വീണോളും എന്നു കരുതിയോ?

അതോ ഇതു പൂച്ചയല്ലേ, വല്ല ജാഗ്വാറുമാണോ ഇനി?

Adithyan said...

ഹ ഹ ഹ..
ഞാന്‍ മര്യാദയ്ക്ക് ശോഭനയുടെ ഒരു ചിത്രം എടുത്തിട്ടതായിരുന്നു. കോപ്പി ലെഫ്റ്റ് റൈറ്റ് എന്നൊക്കെപ്പറഞ്ഞ് അത് മാറ്റിയത് ശനിയന്‍ തന്നെ :))

Kiranz..!! said...

ആദിച്ചേട്ടോ..

ഒരു പാവം പൂച്ചയെ ടെക്നോളജിയുടെ പേരും പറഞ്ഞു ഗര്‍ഭിണി വരെ ആക്കിയോ..?
മേനകാ ഗാന്ധി മലയാളം ബ്ലോഗില്‍ വന്നു നോക്കാഞ്ഞതു ഭാഗ്യമായി..! :)

ശ്രീജിത്ത്‌ കെ said...

ഇമേജ് ടാഗിന് ക്ലോസിങ്ങ് ടാഗ് ഉണ്ടോ ആദീ?