வெப்சைட் டிசைனிங்க் கற்க HTML

படுகை.காம் சம்பந்தமான எந்தவொரு சந்தேகக் கேள்விக்கும், அல்லது தேவைப்படும் உதவியை கேளுங்கள் பதில் சொல்லி வழிநடத்த காத்திருக்கிறோம்.
Post Reply
User avatar
ஆதித்தன்
Site Admin
Posts: 12146
Joined: Sun Mar 04, 2012 1:17 am
Cash on hand: Locked

வெப்சைட் டிசைனிங்க் கற்க HTML

Post by ஆதித்தன் » Sun Oct 14, 2012 8:06 pm

கடந்த பாகத்தில் நமது சாதாரண HTML webpage -ல் இணைக்கும் படியான டேக் அதிகம் இல்லாததால், இந்தப் பாகத்தில் கூடுதலாக 4 டேக்குகளைப் பற்றிக் கூறிவிட்டு, இவற்றினையும் சேர்த்தே ஒர் அழகான வெப்பேஜ் கோடிங்க் கொடுக்கலாம் என்று இருக்கிறேன். இதன், இமேஜ் & கண்டண்டை மட்டும் மாற்றி அப்படியே நீங்களும் பயன்படுத்திக் கொள்ளலாம்.(பிடிச்சிருந்தால்) ... அல்லது நீங்களே சூப்பராக டேபுள் கொண்டு உருவாக்கிக் கொள்ளலாம்.

இன்று பார்க்க இருப்பது முக்கியமான இரண்டினைப் பற்றி Refresh & Favicon. Favicon, அட்ரஸ் பாரில் தெரியும் தள பெயருடன் சேர்ந்து தெரியும் இமேஜ் உருவாக்க பயன்படுகிறது. இவற்றின் கோடிங்கைப் பார்க்கலாம்.

Favicon: Favorites Icon
(Image அட்ரஸ் பாரில் படுகை பெயருடன் இதனைப் பார்க்கலாம்)

இதுவரையில் <head> என்ற டேக் உள்ளே டைட்டில் மட்டும் கொடுத்து வந்திருப்போம், இப்பொழுது <title> tag அடுத்து அல்லது மேலே, கீழே உள்ள <link> டேக்கையும் சரியாக அதில் கொடுக்கப்பட்டுள்ள attribute உடன் இணைத்துக் கொள்ளுங்கள். அதற்கு முன், href= எனும் இடத்தில் இருக்கும் இமேஜ் முகவரியை மாற்றி, உங்களது தள பேவரைட் லோகோ இமேஜ் முகவரியைக் கொடுத்துக் கொள்ளுங்கள்.
<head>
<link rel="shortcut icon" href="http://www.iconj.com/ico/x/g/xg9a4vhb07.ico">
</head>

லோகோ இமேஜ் கொடுப்பது இருக்கட்டும், அதற்கு முன்னர், எவ்வாறு Image இத்தனை 16*16 என்ற சிறிய வடிவிலான இமேஜ் தயாரிப்பது என்று தெரியலையா? அல்லது எப்படி அதனை .ico என்ற பெயரில் சேவ் செய்வது என்று தெரியலையா? கவலையை விடுங்கள்.

முதலில், ஒர் சதுர வடிவில் உங்கள் லோகோ படத்தினை உருவாக்கிக் கொள்ளுங்கள். பின்னர், www.iconj.com என்ற தளத்திற்கு சென்று, அப்படத்தினை அப்லோடிங்க் செய்து, convert to ico என்று கொடுத்தால் போதும், அது சிறிய வடிவலான ico format image ஆக மாற்றிக் கொடுத்துவிடும். பின்னர், அவர்கள் கொடுக்கும் இமேஜ் லிங்கைப் பயன்படுத்தினாலும் சரி, அல்லது அந்த இமேஜை டவுன்லோடிங்க் செய்து, உங்கள் தளத்தில் அப்லோடிங்க் செய்துவிட்டு, முகவரியைப் பயன்படுத்தினாலும் சரி.

Refresh <meta> Tag
<meta> tag என்பதனையும் <head> tag உள்ளேதான் பயன்படுத்த வேண்டும். இப்பொழுது meta tag-n attribute கொண்டு எவ்வாறு மூன்று விதமாக வெப்தளத்தை Refresh செய்யலாம் என்று பார்ப்போம்.

Auto Refresh <meta> tag

கீழுள்ள கோடிங்கை அப்படியே ஹெட் டேக்கிற்குள் புகுத்திவிட்டால் போதும், ஒவ்வொரு 5 நொடிக்கு ஒர்முறையும் தளம் refresh ஆகிக் கொண்டே இருக்கும். கொஞ்சம் நேரத்தினை அதிகப்படுத்த நினைத்தால் content என்பதில் கொடுக்கப்பட்ட மதிப்பு 5 என்பதனை மாற்றி 20 எனக் கொடுத்தால் 20 நொடிக்கு ஒர் முறை, refresh ஆகும்.
Inside <head> tag
<meta http-equiv="refresh" content="5" >

உதாரணத்திற்கு viewonline.php?sg=1&sk=b&sd=d&start=0 என்ற லிங்க் சென்றால், எத்தனை பேர் ஆன்லைனில் இருக்கிறார்கள் என்பது 10 நொடிக்கு ஒர்முறை refresh ஆகிக் கொண்டிருப்பதனைப் பார்க்கலாம்.

Auto Redirection
கடந்த கோடிங்க், 5 நொடிக்கு ஒர்முறை அதே பக்கத்தினை மீண்டும் திறக்க பயன்படுத்தினோம். இப்பொழுது அதே கோடிங்க் மூலம் அதே பக்கத்திற்கு பதிலாக மற்றொரு தளத்திற்கு திசை திருப்பவிடச் செய்ய, எந்தப் பக்கத்திற்கு செல்ல வேண்டுமோ, அந்தப் பக்கத்தின் முகவரியைக் கூடுதலாகக் கொடுத்தால் போதும், அந்த தளத்திற்கு சென்றுவிடும்.
இதனை ஹெட் டேக் உள்ளே பயன்படுத்த வேண்டும்.
<meta http-equiv="refresh" content="5; url=http://freedomain.padugai.com">

உதாரணத்திற்கு, www.padukai.com என்ற நமது பழைய படுகைக்கு சென்றால், சிறிது நேரத்தில் padugai.com என்ற இன்றைய முகவரிக்கு வந்துவிடும்.

<iFrame> Tag :
தற்பொழுது அனேக வெப்தளங்களில் பயன்படுத்தப்படும் டேக், iFrame. இதன் மூலம் வேறு ஒர் பக்கத்தினை அப்படியே, ஒர் பக்கத்தின் சிறிய பகுதியாக கொண்டுவர முடியும். அதாவது ஒர் 200 *200 வடிவிலான ஒர் சின்ன பாக்ஸ் வெப்பக்கத்தினை உருவாக்கிவிட்டு, அதன் முகவரியினைக் கொண்டு Iframe டேக் மூலம், மற்றொரு வலைப்பக்கத்தில் பயன்படுத்தினால், அந்த முகவரியில் அல்லது அப்படியே இங்கு கிடைக்கும். ஆகையால் இதனைக் கொண்டும் ஒர் பக்கத்தின் ஒர் குறிப்பிட்ட பகுதியை மட்டும் refresh செய்ய முடியும். இதற்கு எடுத்துக்காட்டாக, கிரிக்கெட் நடந்து கொண்டிருக்கும் பொழுது ஒர் தளத்திற்குள் சென்றால், அந்த தளம் refresh ஆகாமலே, அங்கு இணைக்கப்பட்ட கிரிக்கெட் ஸ்கோர் பாக்ஸ் மட்டும் refresh ஆகிக் கொண்டிருப்பதனை நீங்கள் பார்த்திருக்கலாம். அப்படியில்லாவிடில், அடுத்தப்பாகத்தில் இதற்கான ஒர் உதாரணம் வெப் கோடிங்க் + பக்கங்களைக் கொடுக்கிறேன். ஆனால், அப்பக்கங்கள் புதிய கண்டண்டை மாற்றிக் கொண்டே இருக்க ஜாவாஸ்கிரிப்ட் கோடிங்க் மூலம் எழுதியிருக்கும். ஏனெனில் ஹெஸ்டிஎம் எல் மூலம் ரொட்டேட்டிங்க் கண்டண்ட் கொடுக்க முடியாது. நீங்களும் அடுத்து வரும் எடுத்துக்காட்டினைப் பயன்படுத்துங்கள். இப்போதைக்கு, iframe டேக் பயன்படுத்தும் கோடிங்க் முறை பார்த்துக் கொள்ளுங்கள்.

PUT iFrame in Body Section
<body>
welcome to padugai

<iframe src="http://padugai.com/test.htm" width=100 height=100 frameborder=0 scrolling=no>
</iframe>

No.1 Tamil online job tutorial site

</body>


மேலும் விளக்கமாக அடுத்தப் பாகத்தில் ஒர் வெப்பக்கம் + கோடிங்க் உடன் பார்ப்போம்.

தொடரும்....
User avatar
ஆதித்தன்
Site Admin
Posts: 12146
Joined: Sun Mar 04, 2012 1:17 am
Cash on hand: Locked

HTML online Tutorial - Website Designing இன் தமிழ்

Post by ஆதித்தன் » Thu Oct 18, 2012 5:34 am

கடந்த இரண்டு பாடங்களுக்கு என்னும் உதாரணமாக எந்தப் பக்கத்தையும் கொடுக்கவில்லை, இருந்தாலும் தொடர்ந்து என்னும் மூன்று டேக்குகளை சொல்லிக் கொடுத்துவிட்டு, அதனை எவ்வாறு பயன்படுத்தி ஒர் அழகான வெப்பேஜ் உருவாக்கலாம் என்று கோடிங்க் மூலம் சொல்கிறேன், சரிங்களா. இப்பொழுது நமது தளத்தில் எப்படி ஆடியோ மற்றும் விடியோ பைல்களை எம்பட்டிங்க் மூலம் HTML Coding ஆல் ரன் செய்வது என்பதனைப் பார்ப்போம்.

<embed> tag, வலைப்பக்கத்தில் audio, video போன்ற media file-களைப் பயன்படுத்த உதவுகிறது. முதலில், ஒர் ஆடியோவை/பாடலை எப்படிக் கொண்டு வருவது என்ற கோடிங்க் பார்ப்போம்.
<embed> Audio:

Example Code:

<EMBED SRC="http://padugai.com/song/poove.mp3" HIDDEN="true" AUTOSTART="true" LOOP="-1" Height=145 width=160></EMBED>
கோடிங்கில் பயன்படுத்தியுள்ள attribute value எவ்வாறு கொடுக்க வேண்டும் என்பதனைப் பார்ப்போம்.
SRC : பாடல்/ ஆடியோ லிங்க் முகவரியை கொடுக்க வேண்டும்.

HIDDEN: தளத்திற்குள் ஒருவர் வந்தவுடன் பேக்ரவுண்ட் இசையாக ஒலிக்க வேண்டும் என்றால், அதன் கன்றோல் இமேஜ் ஆன ஆடியோ ப்ளேயர் தெரியாமல் இருக்க TRUE என்றும், இல்லை, அவர்கள் விரும்பினால் ஆப் செய்து கொள்ளட்டும் என்றால் FALSE என்றும் கொடுக்க வேண்டும்.

AUTOSTART : தானாகவே ஒலிக்க வேண்டும் என்றால் TRUE என்றும், தள பார்வையாளர் ஆன் செய்தால் மட்டுமே ஒலிக்க வேண்டும் என்றால் FALSE என்றும் கொடுக்க வேண்டும்.

LOOP : பாடல் மீண்டும் மீண்டும் ஒலித்துக் கொண்டே ஒர் பேக்ரவுண்ட் இசையாக அமைய வேண்டும் என்றால் "-1" கொடுங்கள், அல்லது ஒரே ஒர்முறை மட்டும் பாடினால் போதும் என்றால் FALSE என கொடுங்கள்.

Height & width : Audio player image-ன் உயரம் & அகலம் எவ்வளவு வேண்டுமோ அவ்வள்வு கொடுங்கள்.

EMBED VIDEO

audio வுக்கும் video-வுக்கும் பெரிய வித்தியாசம் ஒன்றும் இல்லை. அதில் ஆடியோ முகவரியைக்(.mp3) கொடுத்தோம் என்றால், இதில் விடியோ முகவரி(.avi,.mov,.mpeg..ext) கொடுக்க வேண்டும்.
Example Code:

<EMBED SRC="mymovie.mov" WIDTH="200" HEIGHT="100" AUTOPLAY="TRUE" LOOP="true"></EMBED>


நீளம் & அகலத்தின் அளவுகளை, விடியோ ப்ளேயரைப் பயன்படுத்தும் பக்கத்திற்கு தகுந்தவாறு கொடுத்துக் கொள்ளுங்கள்.

YouTube Video :
Youtube தளத்தில் உள்ள விடியோக்களை நமது தளத்தில் பதிவிட நினைத்தால், அவ்விடியோ ப்ளேயர்க்கு கீழேயிருக்கும் Share என்ற பட்டனை சொடுக்கி, Embed Code என்பதனை மறுபடியும் தேர்வு செய்தால் கிடைக்கும் கோடிங்கை, அப்படியே வேண்டிய இடத்தில் பேஸ்ட் செய்து கொள்ளலாம்.
எடுத்துக்காட்டு:

<iframe width="420" height="315" src="http://www.youtube.com/embed/pcWUqm8T-Pw" frameborder="0" allowfullscreen></iframe>
மேலுள்ள கோடிங்க், பாடி அழைத்தேன் என்ற பாடலுக்கான விடியோ எம்பட்(embed) கோடிங்க். அதில் கொடுக்கப்பட்டுள்ள நீளம் & அகலத்தினை தங்களுக்குத் தகுந்தவாறு மாற்றிக் கொள்ளலாம். மேலும், வீடியோ மத்தியில் அமைய வேண்டுமா வலப்பக்கம் அமைய வேண்டுமா என்பதனை அப்படியே மொத்தமாக தேர்வு செய்து Html code மூலம் நீங்கள் முடிவு செய்து கொள்ளலாம்.

அடுத்த பாகத்தில் meta tag என்பது என்னும் எவ்வாறு பல விதங்களில் பயன்படுகிறது என்று பார்க்கலாம்..

தொடரும்....
Post Reply

Return to “உதவிக் களம்”