எழுதப் பழகுவோம், எச் ரி எம் எல் பகுதி 3 இந்த மூன்றாவது பகுதியில் நாம் காணப் போவது, ஒரு வலைப் பக்கத்திற்கென நீங்கள் படிவம் எழுதப் போவதாக இருந்தால் குறைந்த அளவு அறிந்திருக்க வேண்டிய விடயங்களைப் பற்றிது.ஒரு வலைப் பக்கம் என்பது, நாம் இதுவரை கண்ட படிவத்திற்கு மேம்பட்டது. எதாவதொரு வலைப்பக்கத்தின் மூலத்தை (source) பார்த்தீர்களானால் ஏராளமான பட்டிகளைப் காணலாம். அவற்றில் பல, வலைப் பக்கத்திற்கு நேரடியான தொடர்புள்ளவையும் (நாம் முன்பு கண்டதுபோல்) சில நேரடியான தொடர்பு இல்லாதவையுமாக இருக்கும். அப்படிப்பட்ட பட்டிகளைப்யைப் பற்றி பார்க்கப் போகிறோம். எந்த ஒரு வலைப் பக்கத்தை எடுத்தாலும் பட்டிக்கும் பட்டிக்கும் இடையே பட்டியைக் காணலாம். இந்த பட்டிகளுக்கிடையில் சில தேவையான தகவல்கள் சில விசேட பட்டிகளில் தரப் படுகின்றன. இவற்றுள் வெகு சாதாரணமாகக் காணக் கூடியது பட்டியாகும். இதில் தரப்படும் வரிகள், தலைப்பாக அந்த பக்கத்தில் (title bar) தெரியும். உங்கள் பக்கத்திற்கு தலைப்பு My page என்று வைத்தீர்களானால் அது இவ்வாறு குறிக்கப் படவேண்டும். My page அதை அன்றி, , , , , போன்ற வேறு சில தகவல் பட்டிகளும் இந்த பட்டிகளுக்கிடையே குறிக்கப் படுகின்றன. பட்டியானது, உங்கள் பக்கத்தைப் பற்றிய தகவல்களைக் கொண்டிருக்கும். இந்த பட்டியில் தரப்படும் தகவல்கள் சில, தேடு செயலிகளால் (search engines) கையாளப் படுகின்றன. கீழ்க் காண்பவை பொதுவாக பாவிக்கப்படும் சில பட்டிகளாகும். META HTTP-EQUIV=”Content-Type” என்பது உங்கள் பக்கத்தில் எந்த எழுத்துரு (charecter set) அமைப்பு உபயோகப் படுத்தப் பட்டிருக்கிறது என்பதை குறிக்கிறது: META NAME=”generator” என்பது அந்தப் பக்கம் எந்த மென்பொருளால் உண்டாக்கப் பட்டது என்று குறிக்கிறது. META NAME=”author” என்பது யார் எழுதியது என்பதையும், META NAME=”description” என்பது அந்த பக்கம் பற்றிய சிறு குறிப்பையும், META NAME=”keywords” என்பது எந்தெந்த சொற்கள் மூலம் அந்தப் பக்கத்தை செயலிகள் மூலம் தேடலாம் என்பதையும் குறிக்கிறது. கீழே தரப்பட்டிருக்கும் உதாரணத்தில் பட்டிகள் எவ்வாறு உபயோகப் படுத்தப் பட்டிருக்கின்றன என்று பாருங்கள்: Head and Meta tags ……………………….. ……………….. இங்கு META HTTP-EQUIV=”Content-Type” என்பதில் user-defined என்பதாக எழுத்துருவும், META NAME=”generator” என்பதில் Note Pad இந்தப் பக்கம் உருவாக்குவதற்கு பயன்படுத்தப் பட்டிருக்கிறது என்பதையும், META NAME=”author” என்பது இது யாரால் எழுதப்பட்டது என்பதையும், META NAME=”description” என்பதில் இந்த பக்கத்தைப் பற்றிய சிறு குறிப்பும், META NAME=”keywords” என்பதில் இந்த பக்கத்தை எந்த சொற்களால் தேடலாம் என்பதையும் குறிப்பிடுகின்றன. இவையன்றி, When it is auto refreshed, a random number is generated. இனி இணையப் பக்கங்களில் சாதாரணமாகக் காணப்படும் பட்டிகள் சிலவற்றைப் பார்ப்போம். சுட்டிகள், இணையப் பக்கங்களில் வெகுவாகக் காணப்படும் ஒன்றாகும். நாம் இவைகளைப் பற்றி முந்தய பகுதியொன்றில் கண்டிருக்கிறோம். இந்த சுட்டிகளை ஏதுவாக்கித் தருவது என்ற (Anchor) பட்டியாகும். இந்த பட்டியில் காணப்படும் ஒரு பண்பு(Attribute), இதற்கு துணை செய்கிறது. HREF (Hyper link reference) எனப்படும் இந்தப் பண்பிற்கு நாம் எந்த இணையத் தலத்திற்குச் செல்ல வேண்டுமோ அதன் இணைப்பு முகவரியைக் கொடுத்துவிட்டால் போதும். மேலும் அந்த முகவரியைப் பற்றிய இலகுவான சொற்றொடர்களையும் அமைத்துக் கொள்ளலாம். உதாரணமாக, ஒரு அமெரிக்க செய்தி நிறுவனம் இதில் A என்பது பட்டி. அதை அடுத்து வரும் “cnn” ஐ, இந்த பட்டியின் HREF பண்பாகக் கொடுத்திருக்கிறோம். அந்த பட்டியின் பின், ஒரு வசதியான ஒரு சொற்றொடரை கொடுத்துக் கொள்ளாம். (இங்கு ‘ ஒரு அமெரிக்க செய்தி நிறுவனம்’ என்று தந்திருக்கிறோம்.) மின்னஞ்சல் முகவரியை உங்கள் இணையப் பக்கத்தில் இணைப்புச் சுட்டியாகத் தரலாம். அது கீழ்க் கண்டவாறு அமையும். உமரின் மின்னஞ்சல் இங்கும் உங்களுக்கு வசதியானதொரு சொற்றொடரை தரலாம். கணினியில் உள்ள ஒரு கோப்பை(file) சுட்டவும் கீழ்க்கண்டவாறு பயன்படுத்தலாம்: test (கவனிக்க: ” file: ” அடுத்து மூன்று சாய்கோடுகள்(///) இருக்கின்றன) இந்த HREF பண்பை அன்றி வேறு சில பண்புகளும் இந்த பட்டியில் இருக்கின்றன. அவைகளை தேவையான தருணத்தில் பார்க்கலாம். இன்றும் வெகுவாகக் காணக் கூடிய பட்டியொன்றைப் பற்றி காணப்போகிறோம். பக்கங்களுக்கு அழகூட்டுவது மற்றுமன்றி விளக்கப் கட்டுரைகள், விளம்பரங்கள் ஆகியவைகளைக் கொண்ட பக்கங்களில் படங்களை சேர்ப்பது தேவையான ஒன்றாகும். இதற்கு என்ற (Image) பட்டியை உபயோகிக்கிறோம். இந்த என்ற பட்டியானது, SRC, WIDTH, HEIGHT, BORDER, ALIGN, HSPACE, VSPACE, ALT முதாலான பண்புகளைக்(properties) கொண்டது. இதில் SRC என்ற பண்பு தேவையான(mandatory) ஒரு பண்பாகும். இந்த பண்புதான் படத்தின் இருப்பிடத்தைக்(source) குறிப்பதாகும். குறைந்த அளவு, இந்தப் பண்பாவது பட்டியில் குறிப்பிடப் பட்டிருக்க வேண்டும். நீங்கள் உபயோகப் படுத்தப் படும் படம் C:/winter.jpg வாக இருந்தால் இப்படிக் குறிக்க வேண்டும்: படத்தின் இருப்பிடம் உங்கள் கணினியாகவோ அல்லது ணையத் தலமாகவோ இருக்கலாம். இனியொரு சோதனை செய்து பார்க்கலாம். உங்கள் கணினியில் உள்ள ஏதாவது ஒரு gif அல்லது jpg படத்தை தேர்ந்தெடுத்து அதன் இருப்பிடத்தை குறித்துக் கொள்ளுங்கள். இப்போது கீழ்க் காணுவதுபோல் ஒரு உரை தொகுப்பியில்(text editor – eg: Note pad) தட்டச்சு செய்யுங்கள்: My picture I like this Picture குறிப்பு: மேற்கண்டதில் “file:///f:/tamil-asp/stage.gif” என்பதை உங்கள் படத்தின் இருப்பிடத்திற்கு தக்கவாறு மாற்றிக் கொள்ளுங்கள். இதில் கோப்பின் இருப்பிடமான f:/tamil-asp/stage.gif என்பதற்கு முன் file:/// என்பதைச் சேர்த்துக் கொள்ள வேண்டும்(காரணத்தை சென்றமுறை விளக்கியிருக்கிறோம்). stage.gif என்ற கோப்பு உங்கள் வலைப் பக்கத்தின் அதே directory இல் இருந்தால் IMG SRC=”stage.gif” என்று கோப்பின் பெயரை மட்டும் தந்தால் போதுமானது. இவ்வாறே அந்தப் படம் வேறு ஒரு வலைப் பக்கத்தில் இருந்தாலும் குறிக்கலாம். கீழே காணும் பட்டியலை yahoomail.html என்ற பெயரில் சேமித்து உங்கள் உலவியில் சோதித்துப் பாருங்கள். Yahoo Mail இன் படத்தை அதன் வலைப் பக்கத்திலிருந்தே உபயோகித்துக் கொள்கிறோம். இவ்வாறு தேவைப் பட்டால் வெவ்வேறு இணையத்தலங்களிலிருந்து படங்களை உபயோகித்துக் கொள்ளலாம். குறிப்பு: இதை சோதிக்கும்போது இணையத் தொடர்பு (internet connection) இருக்கவேண்டும் My picture Yahoo Mail logo WIDTH, HEIGHT என்ற பண்புகளைக் கொண்டு படத்தின் அகல உயரங்களை மாற்றிக் கொள்ளல்லாம். அளவுகள் படத்தின் தனிமப் புள்ளிகளில் (pixel). உம்: WIDTH=”100″ , HEIGHT=”75″ இனி BORDER என்ற பண்பையும் சேர்த்து அது எவ்வாறு உலவியில் தோற்றமளிக்கிறது என்று பார்க்கலாம். மேற்கண்ட உதாரணத்தில் மாறுதல் செய்யுங்கள்: என்ற வரியில் BORDER=”2″ என்பதைச் சேருங்கள். அது இவ்வாறு அமையும்: உங்கள் படத்தைச் சுற்றி கோடு இடப் பட்டிருக்கும். இது எத்தனை படத் தனிமங்களால் (picture element – pixel) ஆனது என்று குறிக்க வேண்டும் இங்கு 2 என்பது இரண்டு புள்ளிகள் தடிமன் என்று பொருள். ALT என்கிற பண்பு மூலம் படத்திற்கு ஒரு மாற்றாக (alternate) சிறு குறிப்புத் தரலாம். படத்தின்மேல் ‘எலி’ நகரும்போதும், ஏதோ ஒரு காரணத்தால் திரையில் படம் தெரியாத போதும் இந்த குறிப்பு தோன்றும். ALIGN என்பது படத்தை அதைச் சுற்றி இருக்கும் எழுத்துக்களுக்கோ (அல்லது படத்திற்கோ) எப்படி அமையவேண்டும் என்பதைக் குறிக்கும். ALIGN=”bottom” ALIGN=”middle” ALIGN=”left” ALIGN=”right” ALIGN=”top” ஆகியவைகளை இதில் குறிக்கலாம். HSPACE, VSPACE என்பவை இந்தப் படத்திற்கு பக்கவாட்டிலோ அல்லது மேலும் கீழுமோ எவ்வளவு இடைவெளி இருக்கவேண்டும் என்று குறிக்கலாம். அளவு பட தனிமத்தில் (pixel). நீங்கள் தட்டச்சு செய்தவைகளை mypic.html என்ற பெயரில் சேமித்து உலவியில் சோதித்துப் பாருங்கள். பல நேரங்களில் ஒரு படத்தில் சொடுக்குவதன் மூலம் வேறு பக்கத்திற்கோ அல்லது பக்கத்தின் வேறு பகுதிக்கோ செல்ல முடிவதைப் பார்த்திருப்பீர்கள். இன்று, அது எப்படி என்பதைப் பார்ப்போம். படத்தைப் பெறுவதில் இதுவரைகண்ட எல்லா பண்புகளையும் இதில் உபயோகித்தும், அந்தப் படத்தை சுட்டாகவும் (link) ஆகவும் பயன்படுத்தி ஒரு படிவத்தைப் பார்ப்போம். முதலில் இந்த பகுதியை வழக்கம்போல் ஒரு உரை தொகுப்பியில் வெட்டி, ஒட்டி mylink.html என்ற பெயரில் சேமித்துக் கொண்டு, உலவில் பாருங்கள். கீழ்க் காணும் பண்புகள் உபயோகப் படுத்தப் பட்டிருகின்றன. அவைகளை நீங்கள் எவ்வாறு காண்கிறீர்கள் என்பதை சோதிக்கலாம். WIDTH=”80″ HEIGHT=”80″ BORDER=”5″ ALIGN=”left” HSPACE=”20″ VSPACE=”5″ ALT=”Science Tamil Search”> முதலில் இணைய இணைப்பு (internet connection) ஏதுமில்லாமல் சோதித்துப் பாருங்கள். அப்போது படம் கிடைக்காது. காரணம் அந்தப் படம் ஒரு இணையப் பக்கத்தில் இருக்கிறது. ஆனால் அது இருக்க வேண்டிய இடத்தில் Science Tamil Search என்ற வாசகம் இருக்கும். இதுதான் ALT (alternate) என்ற பண்பில் நாம் குறிப்பிட்டிருப்பதாகும். பின்னர் இணைய இணைப்புடன் அந்த படத்தில் சொடுக்கிப் பாருங்கள் இந்தப் படத்தோடு இணைக்கப்பட்டிருக்கும் வலைப் பக்கத்திற்குத் தாவிச் செல்லலாம். இந்தப் படத்தின் உண்மையான அளவு 36X36 pixel ஆகும். இங்கு நாம் 80X80 அளவுக்குப் பெரிதாக்கி இருக்கிறோம். இவ்வாறே பெரிய படங்களையும் இடத்திற்குத் தக்கவாறு குறுக்கிக் கொள்லலாம். My picture Testing hyper link The HTML comments in this page contain the configuration in formation that allows users to edit pages in your web using the Microsoft Web Publishing Wizard or programs which use the Microsoft Web Publishing Wizard such as FrontPad using the same username and password they would use if they were authoring with Microsoft FrontPage. Please refer to the Microsoft’s Internet SDK for more information on the Web Publishing Wizard APIs. பண்புகளை மாற்றி சோதனை செய்து பாருங்கள்.
Posted on: Fri, 16 Aug 2013 17:35:25 +0000
Trending Topics
Recently Viewed Topics
© 2015