HTML5 உடன் தொடங்கவும்

HTML5 உடன் தொடங்கவும்
இந்த வழிகாட்டி இலவச PDF ஆக பதிவிறக்கம் செய்ய கிடைக்கிறது. இந்த கோப்பை இப்போது பதிவிறக்கவும் . உங்கள் நண்பர்கள் மற்றும் குடும்பத்தினருடன் இதை நகலெடுத்து பகிரவும்.

உள்ளடக்க அட்டவணை

§1. அறிமுகம்





§2 – சொற்பொருள் மார்க்அப்



§3 – படிவங்கள்





§4 - நடுத்தர

§5 – CSS3 மாற்றங்கள் மற்றும் அனிமேஷன்கள்



6 -போதுமான ஜாவாஸ்கிரிப்ட்

§7 – கிரியேட்டிவ் கேன்வாஸ்



§8 – அடுத்து எங்கே?

1. அறிமுகம்

நீங்கள் அதைப் பற்றி கேள்விப்பட்டிருக்கிறீர்கள்: HTML5. எல்லோரும் அதைப் பயன்படுத்துகிறார்கள். ஃப்ளாஷ் மற்றும் ஷாக்வேவ் பயன்படுத்துவதைத் தவிர்த்து, பணக்கார, ஈடுபாட்டுடன் இணையப் பக்கங்களை உருவாக்க மக்களை அனுமதிக்கும் இணையத்தின் மீட்பராக இது அறிவிக்கப்படுகிறது.



ஆனால் உண்மையில் அது என்ன?

சரி, பதில் சொல்வது எளிதான கேள்வி அல்ல. இந்த HTML5 டுடோரியலில், சில பதில்களை வழங்க முயற்சிப்போம். HTML5 என்பது மிகவும் மாறுபட்ட விஷயங்களை விவரிக்கப் பயன்படுகிறது. இது வலைப்பக்கங்களை எழுதுவதற்கான ஒரு தரநிலை. இது API களின் தொகுப்பு. இணையப் பக்கங்களில் ஊடாடும் திறனைச் சேர்க்க இது ஒரு புதிய வழி.

HTML5 அவ்வளவுதான். எனவே இந்த புத்தகம் எதைப் பற்றியது?

இந்த HTML5 டுடோரியலில், நீங்கள் ஒரு கட்டத்தில் HTML மற்றும் CSS ஐ தொட்டிருப்பீர்கள் என்று நான் கருதுகிறேன். ஒருவேளை நீங்கள் உங்கள் சொந்த வேர்ட்பிரஸ் தீம் உருவாக்கியிருக்கலாம் அல்லது அன்றைய தினம் ஒரு மைஸ்பேஸ் அமைப்பை திருத்தியிருக்கலாம். MakeUseOf இன் சொந்த XHTML வழிகாட்டியை நீங்கள் படித்திருக்கலாம். முக்கிய விஷயம் என்னவென்றால், ஒரு வலைப்பக்கத்தைச் சுற்றி உங்கள் வழி உங்களுக்குத் தெரியும் என்றும் இந்த வழிகாட்டியில் நாங்கள் விவாதிப்பது உங்களுக்கு மிகவும் அந்நியமாக இருக்காது என்றும் நான் கருதுகிறேன்.

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

நீங்கள் ஏன் HTML5 கற்க விரும்புகிறீர்கள்?

இது நியாயமான கேள்வி. ஸ்மார்ட்போன்கள் மற்றும் பயன்பாடுகளின் உலகில், வலைப்பக்கங்களை எவ்வாறு நிரல் செய்வது என்று கற்றுக்கொள்வது மிகவும் முக்கியமா?

சரி, நம்புங்கள் அல்லது நம்பாதீர்கள், HTML5 தொழில்நுட்பங்களைப் பயன்படுத்தி ஸ்மார்ட்போன் பயன்பாடுகளை எழுதுவது மிகவும் பொதுவானது. சமீப காலம் வரை, ஆண்ட்ராய்டுக்கான பேஸ்புக் செயலி HTML5, CSS மற்றும் Javascript ஐப் பயன்படுத்தி எழுதப்பட்டது.

பிளாக்பெர்ரி HTML5 மீது மிகுந்த ஆர்வம் கொண்ட மற்றொரு பெரிய நிறுவனம். இது அவர்களின் மொபைல் இயக்க முறைமை, பிளாக்பெர்ரி ஓஎஸ் 10 இன் சமீபத்திய மறு செய்கையில் தெளிவாக உள்ளது, அங்கு அவர்கள் டெவலப்பர்களை வலை தொழில்நுட்பங்களைப் பயன்படுத்தி தங்கள் தொலைபேசிகளுக்கான பயன்பாடுகளை உருவாக்க தீவிரமாக ஊக்குவிக்கின்றனர்.

புதிய பயர்பாக்ஸ் ஓஎஸ் ஸ்மார்ட்போன்கள் முழுமையாக HTML5 செயலிகளில் இயங்குகின்றன. இன்றைய ஸ்மார்ட்போன் சூழலில் HTML5 பற்றிய வேலை அறிவு அவசியம்.

கூடுதலாக, HTML5 கற்றல் உங்கள் வாழ்க்கைக்கு நல்லது. என்னை நம்பவில்லையா? Indeed.com படி , ஒரு HTML5 டெவலப்பருக்கான சராசரி ஆண்டுச் சம்பளம் கண்ணை உறுத்தும் $ 89,000. HTML5 தொழில்நுட்பங்களைப் பயன்படுத்த அதிகமான நிறுவனங்கள் தங்கள் வலைத்தளங்களை மாற்றுவதால், HTML5 ஸ்டேக்கை அறிந்த டெவலப்பர்கள் தேடப்படுகிறார்கள் - முன்னெப்போதையும் விட இப்போது.

1.1 முன்நிபந்தனைகள்

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

குறிச்சொற்கள் மிகவும் அச்சுறுத்தலாக இல்லை, மேலும் சில மூலக் குறியீடுகளில் உங்கள் கைகளை அழுக்குவதற்கு நீங்கள் பயப்பட மாட்டீர்கள்.

இரண்டாவதாக, இந்த வழிகாட்டி சிஎஸ்எஸ் என்றால் என்ன, அது எப்படி வேலை செய்கிறது என்று உங்களுக்குத் தெரியும். நீங்கள் வடிவமைப்பு மேதைகள் என்று நாங்கள் எதிர்பார்க்கவில்லை, அல்லது உங்கள் கையின் பின்புறத்தில் உள்ள முழு CSS விவரக்குறிப்பையும் நீங்கள் அறிவீர்கள் என்று எதிர்பார்க்கவில்லை. எவ்வாறாயினும், நீங்கள் ஒரு வலைப்பக்கத்தில் ஒரு உறுப்புக்கு ஸ்டைலிங் விண்ணப்பிக்க முடியும், ஒரு சிஎஸ்எஸ் கோப்புடன் இணைக்க முடியும் மற்றும் ஒரு ஐடி மற்றும் வகுப்பிற்கு இடையேயான வித்தியாசம் மற்றும் அவை ஒவ்வொன்றிற்கும் எப்படி ஸ்டைலிங் விண்ணப்பிக்க வேண்டும்.

மேலே உள்ளவற்றில் உங்கள் தலையை சொறிந்தால், கவலைப்பட வேண்டாம். HTML மற்றும் CSS பற்றிய சிறந்த விஷயங்களில் ஒன்று, இது மிகவும் எளிதானது. உண்மையில், MakeUseOf ஒரு நம்பமுடியாத XHTML வழிகாட்டியைக் கொண்டுள்ளது, இது உங்களை மிக வேகமாக வேகத்திற்கு கொண்டு வரும்.

அந்த வழிகாட்டியைப் படித்த பிறகு, பின்வரும் கட்டுரைகளையும் நீங்கள் பார்க்க விரும்பலாம்:

உங்களுக்கு ஒரு நவீன உரை திருத்தி மற்றும் உலாவி தேவைப்படும். IE 9 ஐ விட பழைய இன்டர்நெட் எக்ஸ்ப்ளோரரின் எந்த பதிப்பும் மற்றும் சஃபாரி, குரோம் மற்றும் பயர்பாக்ஸின் சில பழைய பதிப்புகளும் HTML5 இன் பல அம்சங்களுடன் போராடும் மற்றும் இந்த வழிகாட்டியைப் பின்பற்றுவதைத் தடுக்கலாம்.

இதன் விளைவாக, நீங்கள் ஒரு நவீன உலாவியைப் பதிவிறக்க ஊக்குவிக்கப்படுகிறீர்கள். நான் Google Chrome ஐ பரிந்துரைக்கிறேன், ஒவ்வொரு உதாரணத்திலும் நான் அதைப் பயன்படுத்துவேன்.

அதைத் தாண்டி, உங்களுக்குத் தேவையானது கற்றுக்கொள்ள விருப்பம். ஓ, மற்றும் ஒரு உரை ஆசிரியர்.

1.2 வலை மேம்பாட்டிற்கான உரை எடிட்டர்கள்

உங்கள் குறியீட்டை எழுத நீங்கள் பயன்படுத்தப் போவது உங்கள் உரை திருத்தி. ஒரு உரை ஆசிரியர் என்றால் என்ன என்று நீங்கள் யோசிக்கலாம்.

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

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

உங்கள் கணினி ஏற்கனவே ஒன்றைக் கொண்டுள்ளது. நீங்கள் விண்டோஸ் பிசியைப் பயன்படுத்துகிறீர்கள் என்றால், நோட்பேட் நீங்கள் நிறுவப்பட்ட உரை எடிட்டராக இருக்கலாம்.

மேக்கில், நிலைமை சற்று வித்தியாசமானது. OS X நான்கு வெவ்வேறு உரை எடிட்டர்களுடன் வருகிறது. இவை Vim, Emacs, Pico மற்றும் Nano என அழைக்கப்படுகின்றன. இருப்பினும், நோட்பேட் போலல்லாமல், அவை அனைத்தும் முனையத்தில் வேலை செய்கின்றன.

இது வலை மேம்பாட்டிற்கு புதியவர்களுக்கு கொஞ்சம் பயமுறுத்துகிறது மற்றும் மென்பொருள் மேம்பாட்டுக்கு புதிய நபர்களால் பயன்படுத்தப்படக்கூடாது. இந்த வழிகாட்டியில் நாங்கள் அவற்றைப் பயன்படுத்த மாட்டோம். இருப்பினும், மென்பொருள் மற்றும் வலை மேம்பாட்டில் நீங்கள் இன்னும் கொஞ்சம் நம்பிக்கையுடன் இருக்கும்போது, ​​விம் மற்றும் ஈமாக்ஸைப் பார்ப்பது நிச்சயமாக மதிப்புக்குரியது. அவர்கள் இருவரும் சக்திவாய்ந்த உரை ஆசிரியர்கள், தேர்ச்சி பெற்றால் உங்களுக்கு நிறைய நேரம் மிச்சமாகும்.

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

இருப்பினும், இந்த பாடத்திட்டத்தில் நாங்கள் மூன்று வெவ்வேறு கருவிகளைப் பயன்படுத்தி எங்கள் குறியீட்டை எழுதுகிறோம்.

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

மூன்றாவது கூகிள் க்ரோமில் கட்டமைக்கப்பட்ட ஜாவாஸ்கிரிப்ட் கன்சோல். இது ஜாவாஸ்கிரிப்டை எழுதவும் உடனடியாக இயங்குவதைப் பார்க்கவும் அனுமதிக்கிறது மற்றும் அடிப்படை நிரலாக்கக் கருத்துகளை விளக்க பயன்படும்.

இரண்டாவது Codepen.io என்ற இணையதளம். இந்த குறிப்பிடத்தக்க வலைத்தளம் உலாவியில் HTML, CSS மற்றும் Javascript ஐ குறியிட அனுமதிக்கும் மற்றும் பயன்படுத்த இலவசம். உங்கள் மாற்றங்களை உடனடியாகக் காணவும் இது உங்களை அனுமதிக்கும்.

2. சொற்பொருள் மார்க்அப்

இந்த அத்தியாயத்தில், சொற்பொருள் மார்க்அப் மற்றும் அதன் உள்ளடக்கத்தின் அடிப்படையில் உங்கள் குறியீட்டை எவ்வாறு ஒழுங்கமைப்பது என்பது பற்றி நீங்கள் அறிந்து கொள்வீர்கள்.

சமீப காலம் வரை, HTML குறியீடு பொதுவாக குறிச்சொற்களுடன் ஏற்பாடு செய்யப்பட்டது. உறுப்புகளின் குழுவை உருவாக்கவும், பின்னர் அந்த உறுப்புகளுக்கு ஸ்டைலிங்கைப் பயன்படுத்தவும் இவை உங்களை அனுமதித்தன.

இது வேலை செய்தது, ஆனால் முன்னேற்றத்திற்கு இடம் இருந்தது. குறிச்சொற்களின் சிக்கல் அது சொற்பொருள் அல்ல. டிவ் உண்மையில் எதையும் குறிக்கவில்லை.

சொற்பொருள் மார்க்அப் என்பது HTML5 இல் ஒரு புதிய அம்சமாகும். இது புதிய குறிச்சொற்களைக் கொண்டுவருகிறது, இது ஒரு 'டிவி' டேக் போலவே செயல்படுகிறது, ஆனால் ஒரு பக்கத்தின் பொதுவான பகுதிகளை குறியிடுவதற்கானது.

எனவே, அவர்கள் எப்படி வேலை செய்கிறார்கள்? பின்வரும் குறியீட்டை கவனியுங்கள்.

இந்த குறியீட்டில், எங்களிடம் வழிசெலுத்தல் பட்டி, தலைப்பு மற்றும் பட்டியல் உள்ளது. நீங்கள் நினைக்கும் போது நீங்கள் செல்லக்கூடிய பெரும்பாலான வலைத்தளங்களுக்கு இது மிகவும் வித்தியாசமானது அல்ல.

ஏன் என் imessage வழங்கவில்லை

MakeUseOf இல் ஒரு கட்டுரையைப் பார்ப்போம். பக்கத்தின் ஒரு பகுதி மற்ற கட்டுரைகளுக்கு செல்ல முற்றிலும் ஒதுக்கப்பட்டிருப்பதை நீங்கள் கவனிப்பீர்கள். ஒரு கட்டுரையை உருவாக்கும் சொற்களைக் கொண்ட பக்கத்தின் மற்றொரு பகுதி இருப்பதையும் நீங்கள் கவனிப்பீர்கள். பக்கத்தின் மேல் நோக்கி, MakeUseOf லோகோ மற்றும் வேறு சில இணைப்புகளைக் கொண்ட ஒரு தலைப்பைக் காண்பீர்கள்.

நீங்கள் இதைப் பற்றி சிந்திக்கும்போது, ​​நிறைய வலைத்தளங்கள் இந்த மரபுகளைப் பின்பற்றுகின்றன. பெரும்பாலான வலைத்தளங்கள் வழிசெலுத்தலுக்காக ஒதுக்கப்பட்ட ஒரு பகுதியைக் கொண்டுள்ளன. அவர்கள் வழக்கமாக உள்ளடக்கத்தைக் கொண்டிருக்கிறார்கள். அவர்கள் தலைப்பை விட அதிகமாக இருக்கலாம்.

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

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

நீங்கள் பார்க்க முடியும் என, குறியீட்டைப் படிக்க மிகவும் எளிதானது. எந்தெந்த பாகங்கள் உள்ளன மற்றும் தெளிவின்மை இல்லை என்பது உங்களுக்குத் தெரியும். இது முக்கியமானது, ஏனென்றால் இது நல்ல, சுத்தமான குறியீட்டை எழுதுவதை எளிதாக்குகிறது. நீங்கள் எப்போதாவது ஒரு தொழில்முறை வலை வடிவமைப்பாளராக மாற முடிவு செய்தால், இது மிக முக்கியமானதாக இருக்கும் - நீங்கள் உருவாக்கும் வேலையை யார் படிப்பார்கள் என்று உங்களுக்குத் தெரியாது.

எனவே, இன்னும் சில சொற்பொருள் மார்க்அப் குறிச்சொற்களைப் பார்ப்போம்.

2.1 பிரிவு

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

2.2 கட்டுரை

கட்டுரை குறிச்சொல் எப்படி ஒலிக்கிறது என்பதற்கு பயன்படுத்தப்படுகிறது; ஒரு வலைப்பதிவு இடுகை அல்லது ஒரு செய்தி போன்ற உள்ளடக்கம் கொண்டது. இந்த உள்ளடக்கம் மீதமுள்ள வலைப்பதிவிலிருந்து பிரிக்கப்பட வேண்டும் மற்றும் இன்னும் ஒத்திசைவான அர்த்தத்தை ஏற்படுத்த வேண்டும்.

2.3 தவிர

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

2.4 தலைப்பு

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

2.5 நவ

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

இந்த குறிச்சொல் பக்கத்தின் கீழ் பகுதிக்கு ஒதுக்கப்பட்டுள்ளது. இங்கே, நீங்கள் சில தொடர்பு விவரங்கள், பதிப்புரிமை தகவல், ஒரு வரைபடம் அல்லது உங்கள் 'என்னைப் பற்றி' பக்கத்திற்கு சில இணைப்புகளை வைக்கலாம்.

2.7 உங்களை சோதிக்கவும்

  • சொற்பொருள் மார்க்அப் என்றால் என்ன, அது எதற்காகப் பயன்படுத்தப்படுகிறது?
  • நான் ஒரு வலைப்பக்கத்தை உருவாக்குகிறேன், என்னைப் பற்றிய சுயசரிதையைக் கொண்டிருக்க ஒரு சொற்பொருள் குறிச்சொல்லைப் பயன்படுத்த விரும்புகிறேன். நான் எதைப் பயன்படுத்துகிறேன்?

3. படிவங்கள்

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

படிவங்கள் பாரிய முக்கியத்துவம் வாய்ந்தவை. இணையத்தில் நாம் செய்யும் பெரும்பாலான விஷயங்களுக்கு அவை அடிப்படையாகும். ஒவ்வொரு முறையும் உங்களுக்குப் பிடித்த சமூக வலைப்பின்னலில் ஒரு நிலைப் புதுப்பிப்பை உருவாக்கும் போது, ​​அமேசானிலிருந்து ஏதாவது வாங்கவும் அல்லது மின்னஞ்சல் அனுப்பவும், நீங்கள் ஒரு HTML படிவத்தைப் பயன்படுத்தியிருக்கலாம்.

உங்களுக்குத் தெரியாதது என்னவென்றால், நாங்கள் படிவங்களை உருவாக்கும் முறை HTML5 இல் தீவிரமாக மாறிவிட்டது. இது கணிசமாக சிறந்தது. இந்த அத்தியாயத்தில், நீங்கள் இப்போது செய்யக்கூடிய சில அருமையான விஷயங்களை, சாதாரண பழைய மார்க்அப் மூலம் பார்க்கப் போகிறோம்.

எனவே, HTML5 இல் நாம் படிவங்களை எழுதக்கூடிய புதிய வழி பற்றி என்ன அருமையாக இருக்கிறது? முதலில், படிவத்தின் மார்க்அப்பை மாற்றுவதன் மூலம், சமர்ப்பிக்க சில புலங்கள் நிரப்பப்பட வேண்டும் என்பதை நீங்கள் உறுதி செய்யலாம். கூடுதலாக, இதைச் செய்ய நீங்கள் இனி ஜாவாஸ்கிரிப்ட் அல்லது PHP மலைகளை எழுத வேண்டியதில்லை. இது சாதாரணமாக எளிதானது.

இரண்டாவதாக, உங்கள் பயனர்கள் உங்கள் படிவத்தில் சில வகையான தகவல்களை மட்டுமே சமர்ப்பிக்க முடியும் என்பதை உறுதிப்படுத்த முடியும். எனவே, உங்கள் அஞ்சல் பட்டியலுக்கான ஒரு வலைத்தளம் உங்களிடம் உள்ளது என்று வைத்துக்கொள்வோம், மக்கள் உண்மையான மின்னஞ்சல் முகவரிகளை மட்டுமே சமர்ப்பிக்க வேண்டும் என்று நீங்கள் விரும்புகிறீர்களா? HTML5 ஐப் பயன்படுத்தி நீங்கள் அதைச் செய்யலாம். இது உண்மையில் நம்பமுடியாத சக்தி வாய்ந்தது.

மூன்றாவதாக, சில புலங்களுக்கு ஒரு இடத்தைக் கொடுப்பதன் மூலம் உங்கள் படிவங்களை சிறப்பாகக் காட்டலாம். ஒரு படிவத்திற்காக நீங்கள் என்ன எதிர்பார்க்கிறீர்கள் என்பதற்கான உதாரணத்தை உங்கள் பயனர்களுக்குக் காண்பிப்பதால், இது அவர்களை மிகவும் உள்ளுணர்வாக மாற்றும்.

3.1 படிவத்தை மேம்படுத்துதல்

எனவே, ஒரு படிவத்தைப் பார்த்து, அதை எவ்வாறு சிறப்பாகச் செய்வது என்று பார்க்கலாம்.

இந்த வடிவம் மிகவும் அடிப்படை. இது ஒரு பெயர், மின்னஞ்சல் மற்றும் பிடித்த நிறத்தை எடுத்துக்கொள்கிறது, பின்னர் அதை சமர்ப்பிக்க பயனரை அனுமதிக்கிறது. அதில் என்ன தகவல் வைக்கப்படுகிறது என்பதற்கான சரிபார்ப்பு எதுவும் இதில் இல்லை, மேலும் சில வெற்று புலங்களுடன் இந்தப் படிவத்தை சமர்ப்பிப்பதில் இருந்து பயனர்களைத் தடுக்க எதுவும் இல்லை. அதையெல்லாம் மாற்றுவோம்.

எனவே, நாம் செய்ய விரும்பும் முதல் விஷயம் மின்னஞ்சல் புலம் ஒரு மின்னஞ்சலை மட்டுமே எடுக்கும் என்பதை உறுதி செய்ய வேண்டும். நீங்கள் அனைத்து வகையான ஆர்கேன் ரீஜெக்ஸ் குறியீடுகளையும் உருவாக்க வேண்டும் என்பதால் இது மிகவும் கடினமான பணியாக இருந்தது. சரி, இனி இல்லை. நீங்கள் உள்ளீட்டு வகையை 'உரை' இலிருந்து 'மின்னஞ்சல்' ஆக மாற்ற வேண்டும். நீங்கள் அந்த படிவத்தை கேவலமாக சமர்ப்பிக்க முயற்சிக்கும்போது, ​​அது புகார் மற்றும் நீங்கள் ஒரு மின்னஞ்சலை சமர்ப்பிக்க வலியுறுத்துகிறது.

3.2 உள்ளீட்டு வகைகள் மற்றும் வடிவங்கள்

உங்களுக்கு தேவையான பிற உள்ளீட்டு வகைகள் உள்ளன. இவற்றில் தொலைபேசி எண்கள், வலை முகவரிகள், தேடல் படிவங்கள் மற்றும் வண்ணத் தேர்வாளர்கள் கூட அடங்குவர்! HTML5 தொடர்ந்து உருவாகி வருவதால், விரைவில் எதிர்காலத்தில் மேலும் உள்ளீட்டு வகைகளை நாம் குறிப்பிட முடியும்.

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

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

எங்கள் 'பிடித்த வண்ணம்' புலம் தேவை என்பதை நாங்கள் உறுதிப்படுத்தப் போகிறோம். மின்னஞ்சல் உள்ளீட்டு குறிச்சொல்லில் கடைசி கோணத்தில் (>), 'தேவையானது' என்று எழுதவும். அவ்வளவுதான். இப்போது, ​​உங்கள் படிவத்தை மதிப்பு இல்லாமல் சமர்ப்பிக்க முயற்சிக்கும்போது, ​​அது ஒரு பிழை செய்தியை உருவாக்கும்.

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

HTML5 இல் உள்ள படிவங்களின் சக்தி குறித்த நம்பமுடியாத சுருக்கமான அறிமுகம் அது. நீங்கள் மேலும் படிக்க விரும்பினால், இந்த இணைப்புகளைப் பார்வையிட பரிந்துரைக்கிறேன்.

மேலும் படிக்க:

  • CSS தந்திரங்கள் - சொற்பொருள் மார்க்அப் எழுதலாம்
  • HTML5 டாக்டர் - சொற்பொருள் பற்றி பேசலாம்

3.3 உங்களை சோதிக்கவும்

அடுத்த வாரம் உங்கள் பிறந்த நாள், நீங்கள் ஒரு பதிவு படிவத்தை உருவாக்க விரும்புகிறீர்கள், அதனால் நீங்கள் எவ்வளவு கேக் உருவாக்க வேண்டும் என்று உங்களுக்குத் தெரியும். உங்கள் உரை திருத்தியைத் திறந்து பின்வரும் புலங்களுடன் ஒரு படிவத்தை உருவாக்கவும்.

  • பெயர்
  • மின்னஞ்சல் முகவரி
  • தொலைபேசி எண்
  • ஒவ்வாமை

பெயர், மின்னஞ்சல் மற்றும் தொலைபேசி எண் புலங்கள் கட்டாயமாக இருப்பதை உறுதிசெய்து, மின்னஞ்சல் மற்றும் தொலைபேசி எண் புலங்கள் 'மின்னஞ்சல்' மற்றும் 'டெல்' உள்ளீட்டு வகைகளுடன் அமைக்கப்பட்டுள்ளன. 'மகரந்தம், முட்டை, க்விச்' மதிப்புடன் ஒவ்வாமை வயலுக்கு ஒரு ஒதுக்கிடத்தை உருவாக்கவும்.

படிவத்துடன் சுற்றி விளையாடுங்கள். தேவையான புலங்களை காலியாக சமர்ப்பிக்க முயற்சிக்கவும், எண் அல்லாத எழுத்துக்களை தொலைபேசி எண் புலத்தில் செருக முயற்சிக்கவும். மின்னஞ்சல் புலத்தில், மின்னஞ்சல் முகவரி இல்லாத ஒன்றைச் செருகவும். என்ன நடக்கிறது?

4. சராசரி

ஃபிளாஷ், ஷாக்வேவ் அல்லது சில்வர்லைட் போன்றவற்றைப் பயன்படுத்துவதன் மூலம் ஒரு வலைப்பக்கத்தில் சில வீடியோ அல்லது ஆடியோவைச் செருகுவதற்கான ஒரே வழி ஒரு காலத்தில் இருந்தது.

இது உகந்ததாக இல்லை. முதலில், இந்த கட்டமைப்புகள் எதுவும் மொபைல் சாதனங்களில் நன்றாக வேலை செய்யவில்லை. நவீன ஸ்மார்ட்போன்கள் மற்றும் டேப்லெட்டுகளுக்கு அவை பொருத்தப்படவில்லை.

பேஸ்புக்கில் ஒரு அறிவிப்பை எப்படி நீக்குவது

கூடுதலாக, அவை தனியுரிம வடிவங்களாக இருந்தன. இதன் விளைவாக, லினக்ஸ் மற்றும் ஓஎஸ் எக்ஸ் பயன்படுத்துபவர்கள் அழகான இரண்டாம் தர அனுபவத்தைப் பெறலாம் அல்லது ஊடக சேவைகளைப் பயன்படுத்துவதைத் தடுக்கலாம், ஏனெனில் அது அவர்களின் தளத்திற்கு கிடைக்கவில்லை.

இறுதியாக, அவர்கள் மெதுவாக இருப்பதற்கான முனைப்பைக் கொண்டிருந்தனர். நீங்கள் அதிகாரம் இல்லாத அல்லது பழைய கணினியில் இருந்தால், இந்த கட்டமைப்புகளைப் பயன்படுத்தி வீடியோவைப் பார்க்க உங்களுக்கு நல்ல அனுபவம் இருக்காது. ஃப்ளாஷ் இதற்கு குறிப்பாக பிரபலமானது.

4.1 எப்படி HTML5 வீடியோ மற்றும் ஆடியோவை அற்புதமாக்குகிறது

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

இதன் விளைவாக, யூடியூப், விமியோ மற்றும் நெட்ஃபிக்ஸ் போன்ற முக்கிய நிறுவனங்கள் HTML5 புரட்சியைப் பயன்படுத்திக் கொள்கின்றன. நீங்கள் ஏன் அவர்களுடன் சேரக்கூடாது?

4.2 கோடெக்குகள் பற்றிய அனைத்தும்

இந்த அத்தியாயத்தில், உங்கள் வலைப்பக்கங்களில் ஆடியோ மற்றும் வீடியோவை சேர்க்க HTML5 இன் சக்தியை எவ்வாறு பயன்படுத்துவது என்பதை நீங்கள் கற்றுக் கொள்ளப் போகிறீர்கள்.

முதலில், நான் ஒரு எச்சரிக்கையுடன் தொடங்க வேண்டும். ஒவ்வொரு நவீன இணைய உலாவியிலும் நீங்கள் HTML5 வீடியோவைப் பயன்படுத்த முடியும், அது ஒவ்வொரு வலை உலாவியிலும் ஒரே மாதிரியாக இயங்காது. ஒவ்வொரு உலாவியும் பயன்படுத்தும் கோடெக்குகள் மாறுபடும். இன்டர்நெட் எக்ஸ்ப்ளோரரில், நீங்கள் MP4 வீடியோவைப் பயன்படுத்துவதற்கு மட்டுப்படுத்தப்பட்டிருக்கிறீர்கள். குரோம் சற்று தாராளமானது மற்றும் WebM, MP4 மற்றும் Ogg Theora வீடியோவைப் பயன்படுத்த உங்களை அனுமதிக்கிறது. ஓபரா இன்னும் கொஞ்சம் கட்டுப்படுத்தக்கூடியது மற்றும் தியோரா மற்றும் வெப்எம் வீடியோவைப் பயன்படுத்த மட்டுமே உங்களை அனுமதிக்கிறது.

இதன் விளைவாக, உங்கள் வலைப்பக்கத்தில் வீடியோவை எவ்வாறு செருகுவது என்பதில் நீங்கள் கொஞ்சம் புத்திசாலியாக இருக்க வேண்டும். எனவே, அது எப்படி வேலை செய்கிறது என்று பார்ப்போம்.

4.3 வீடியோவுடன் தொடங்குகிறது

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

சரி, உங்கள் வீடியோ ஏற்றப்படுவதற்கு நீங்கள் காத்திருக்கும்போது, ​​உங்கள் தளத்தைப் பார்வையிடும் நபர் வீடியோவுடன் தொடர்புடைய ஒரு படத்தைக் காணலாம். அதைச் செய்ய, நீங்கள் இணைக்க விரும்பும் படத்தின் மதிப்புடன் உங்கள் வீடியோ குறிச்சொற்களுக்கு 'போஸ்டர்' என்ற பண்பைக் கொடுங்கள். இது இப்படி இருக்க வேண்டும்.

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

அதைச் செய்ய, உங்கள் வீடியோ குறிச்சொற்களுக்குள் உங்கள் செய்தியை எழுதுங்கள். வேறு எதுவும் தேவையில்லை. நீங்கள் அதைச் செய்தவுடன், இது போன்ற சில குறியீடுகளை நீங்கள் விட்டுவிடுவீர்கள்.

இப்போது, ​​சில வீடியோவைச் சேர்ப்போம். நான் இதை Google Chrome இல் சோதிக்கப் போகிறேன், அதனால் நான் ஒரு MP4 படத்துடன் இணைக்கப் போகிறேன். அதைச் செய்ய, நான் ஒரு Source டேக்கை உருவாக்கி, நான் சேர்க்க விரும்பும் வீடியோவின் மதிப்பைக் கொண்ட src இன் பண்புகளைக் கொடுக்கிறேன்.

எனது வலை உலாவியில் திறக்க இப்போது எனது பக்கம் தயாராக உள்ளது. நான் உண்மையில் ஒரு பெரிய படத்துடன் இணைத்துள்ளேன், இதன் விளைவாக, திறக்கும் போது போஸ்டரை மட்டுமே பார்க்க முடியும்.

4.4 ஆடியோவைச் சேர்க்கிறது

ஆடியோவை உங்கள் வலைப்பக்கத்தில் செருகலாம், அது எப்படி எங்கள் பக்கத்தில் வீடியோவை செருகினோம் என்பதை நினைவூட்டுகிறது.

முதலில், ஒருவர் சில ஆடியோ டேக்குகளை உருவாக்குகிறார். இந்த ஆடியோ குறிச்சொற்களில் 'கட்டுப்பாடுகள்' என்ற பண்பு உள்ளது. இது பக்கத்தைப் பார்வையிடும் பயனருக்கு இடைநிறுத்தப்படும், முன்னாடி விளையாடும் மற்றும் இயக்கப்படும் ஆடியோவை வேகமாக அனுப்பும் திறனை அளிக்கிறது.

பிறகு, நீங்கள் இணைக்க விரும்பும் எம்பி 3 கோப்பில் ஒரு மூலக் குறியைச் சேர்க்கிறீர்கள். கோடெக் பொருந்தக்கூடியதாக இருக்கும்போது நீங்கள் உண்மையில் அதிகம் கவலைப்பட வேண்டியதில்லை. மிக சமீபத்திய இணைய உலாவிகளில் எம்பி 3 ஆடியோவை இயக்கும் திறன் உள்ளது, இருப்பினும் ஒரு '.ogg' மற்றும் '.wav' கோப்பையும் சேர்ப்பது நல்லது.

இறுதியாக, நீங்கள் பழைய உலாவிகளுக்கு ஒரு பின்னடைவை உருவாக்கலாம். உங்கள் வீடியோவின் பின்னடைவை நீங்கள் உருவாக்கிய அதே முறையில் இது செய்யப்படுகிறது.

இறுதி முடிவு இதுபோல் தெரிகிறது.

உங்கள் இணைய உலாவியில் இதைத் திறக்கும்போது, ​​இது சற்றுத் தோன்ற வேண்டும்.

4.5 உங்களை சோதிக்கவும்

  • உங்கள் வீடியோ டேக்குகளில் ஒரு போஸ்டரின் நோக்கம் என்ன?
  • இன்டர்நெட் எக்ஸ்ப்ளோரரில் என்ன கோடெக்குகள் பயன்படுத்த முடியாது?
  • சில ஆடியோவை இடைநிறுத்தும் திறனை நான் விரும்பினால், உங்கள் 'ஆடியோ' டேக்கில் நீங்கள் என்ன பண்பைச் சேர்ப்பீர்கள்?

மேலும் படிக்க:

5. CSS3 மாற்றங்கள் மற்றும் அனிமேஷன்கள்

CSS பாரம்பரியமாக ஒரு வலைப்பக்கத்தின் அமைப்பையும் வடிவமைப்பையும் கையாள பயன்படுத்தப்பட்டது. இது இன்னும் உண்மை, ஆனால் அதன் சமீபத்திய மறு செய்கையில் அனிமேஷன் மற்றும் உறுப்புகள் மற்றும் படங்களின் மாற்றங்களை கையாளும் திறனை பெற்றுள்ளது.

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

இந்த அத்தியாயத்தில், CSS3 பற்றிய ஒரு சுருக்கமான அறிமுகத்தை நான் உங்களுக்கு வழங்கப் போகிறேன், மேலும் உங்கள் பக்கத்தில் சில அற்புதமான விளைவுகளை எவ்வாறு சேர்ப்பது என்பதைக் காண்பிப்பேன்.

முதலில், codepen.io க்குச் சென்று புதிய பேனாவை உருவாக்கவும். இந்த அத்தியாயத்தின் காலத்திற்கு இதை எங்கள் பணியிடமாகப் பயன்படுத்தப் போகிறோம்.

நாங்கள் எளிமையாகத் தொடங்கி, படத்தைப் படம்பிடிக்கும்போது 3 டிகிரி சுழலும் எளிய பட மாற்றத்தை உருவாக்கப் போகிறோம். முதலில், ஒரு டேவ் டேக்கை உருவாக்கி அதற்கு ஒரு ஐடி கொடுக்கவும். கீழே உள்ள எடுத்துக்காட்டில், நான் அதற்கு 'muo' ஐடி கொடுத்துள்ளேன்.

5.1 CSS மிதவை விளைவுகள்

அந்த பிரிவில், உங்களுக்கு விருப்பமான படத்தை சேர்க்கவும். MakeUseOf க்கான லோகோவின் நகலை நான் சேர்த்துள்ளேன்.

நீங்கள் சில ஸ்டைல்ஷீட் விதிகளை எழுத வேண்டும். கீழேயுள்ள எடுத்துக்காட்டில், படத்திற்கு சில இடத்தைக் கொடுக்க நான் ஒரு மேல் மற்றும் இடது விளிம்பை உருவாக்கியுள்ளேன். '#Moo: hover' என்று தொடங்கும் ஆர்வமுள்ள ஸ்டைல்ஷீட் விதியையும் சேர்த்துள்ளேன். அது என்ன?

நீங்கள் ஒரு ஸ்டைல்ஷீட் விதிக்கு ': ஹோவர்' இணைக்கும் போது, ​​அது ஒரு உறுப்பு, ஐடி அல்லது வகுப்பாக இருந்தாலும், உங்கள் சுட்டி உறுப்பை நிர்வகிக்கும் போது இந்த ஸ்டைலிங்கைப் பயன்படுத்த உலாவிக்கு நீங்கள் திறம்பட சொல்கிறீர்கள். மிகவும் அருமை, இல்லையா?

'#Moo: hover' விதியின் உள்ளே, '-webkit-transform: rotate (3deg)' என்று ஒரு வரி கிடைத்துள்ளது. நீங்கள் யூகித்ததை நான் உறுதியாக நம்புகிறேன், இது உலாவிக்கு அந்த டிவ் உறுப்பை மூன்று டிகிரி சுழற்றச் சொல்கிறது.

இருப்பினும், இந்த குறிச்சொல் Chrome மற்றும் Safari இல் மட்டுமே செயல்படுகிறது என்பது கவனிக்கத்தக்கது. உங்கள் குறியீடு பயர்பாக்ஸ் அல்லது இன்டர்நெட் எக்ஸ்புளோரர் 9 மற்றும் அதற்கு மேல் வேலை செய்ய விரும்பினால், பின்வரும் வரிகளை சேர்க்க உங்கள் CSS கோப்பை மாற்ற வேண்டும்.

இப்போது, ​​நீங்கள் படத்தின் மீது வட்டமிடும் போது, ​​இது போல் தெரிகிறது:

5.2 படங்களின் அளவை மாற்ற CSS3 ஐப் பயன்படுத்துதல்

எனவே, ஏன் அங்கே நிறுத்த வேண்டும்? ஒரு படத்தை பெரிதாக்க அல்லது சுருங்க 'டிரான்ஸ்ஃபார்ம்' முறையையும் பயன்படுத்தலாம் என்பது உங்களுக்குத் தெரியுமா. பின்வரும் வரிகளைச் சேர்க்க எங்கள் CSS கோப்பை மாற்றுவோம்.

நீங்கள் பார்க்கிறபடி, நாங்கள் இப்போது ஒரு புதிய உருமாற்ற விதியைச் சேர்த்துள்ளோம், ஆனால் இந்த முறை 'ஸ்கேல்' என்று ஏதாவது செய்யச் சொல்கிறோம். ஒரு படத்தின் அளவை அதிகரிக்க இது மிகவும் அழகான வழியாகும். இது இரண்டு அளவுருக்களை எடுத்துக்கொள்கிறது (அந்த அடைப்புக்குறிக்குள் நீங்கள் காணும் எண்கள்), அவை நீங்கள் உயரத்தையும் உறுப்பின் அகலத்தையும் அதிகரிக்கும் அளவை குறிக்கும்.

குறியீட்டிலிருந்து நீங்கள் பார்க்க முடியும் என, நான் MakeUseOf div சின்னத்தின் அளவை 50%அதிகரிக்கப் போகிறேன். இந்த வேலையை அதன் மீது வட்டமிடுவதன் மூலம் நீங்கள் சோதிக்கலாம். இப்போது 'MakeUseOf' லோகோ கணிசமாக அதிகமாக நீட்டப்பட்டிருப்பதைக் காண்பீர்கள்.

CSS3 மாற்றங்களுக்கு இது மிகவும் மென்மையான அறிமுகம். CSS3 உண்மையில் மிகவும் புதியதாக இருந்தாலும், அதனுடன் நீங்கள் மிகவும் சுவாரஸ்யமான கையாளுதல்களைச் செய்ய முடியும் என்பதை இப்போது நீங்கள் காணலாம்.

5.3 உங்களை சோதிக்கவும்

  • வட்டமிடும் போது ஒரு உறுப்புக்கு ஒரு ஸ்டைலிங்கை எவ்வாறு பயன்படுத்துவது?
  • CSS3 ஐ பயன்படுத்தி ஒரு படத்தை எப்படி சுழற்றுவது?
  • CSS3 ஐப் பயன்படுத்தி ஒரு படத்தை எவ்வாறு அளவிடுவது?
  • உங்கள் 'டிரான்ஸ்ஃபார்ம் முறையை' மொழிபெயர்த்தால் (50px, 50px) 'கடந்து சென்றால் என்ன ஆகும்?

மேலும் படிக்க:

HTML5 ராக்ஸ் - விளக்கக்காட்சி

6. போதுமான ஜாவாஸ்கிரிப்ட்

உங்கள் வலை உலாவியில் ஸ்கிரிப்டைப் பயன்படுத்த விரும்பினால், நீங்கள் ஜாவாஸ்கிரிப்டைப் பயன்படுத்த வேண்டும். இதில் இரண்டு வழிகள் இல்லை, துரதிர்ஷ்டவசமாக. இது பல ரசிகர்களைக் கொண்ட ஒரு மொழி, மேலும் பல எதிர்ப்பாளர்களைக் கொண்டுள்ளது. மொழிகள் செல்லும்போது, ​​அதற்கு பல மருக்கள் உள்ளன. மொழியைப் பற்றிய மிகவும் குறிப்பிடத்தக்க புத்தகம் 'ஜாவாஸ்கிரிப்ட்: நல்ல பாகங்கள்' என்று அழைக்கப்படுவதற்கு ஒரு காரணம் இருக்கிறது.

ஒரு அத்தியாயத்தில் ஜாவாஸ்கிரிப்டை எவ்வாறு பயன்படுத்துவது என்பதை உங்களுக்கு கற்பிக்க இயலாது. இங்கே நோக்கம் அதுவல்ல. வரைபடங்கள் மற்றும் அனிமேஷன்களை உருவாக்க கேன்வாஸ் என்ற தொழில்நுட்பத்தைப் பயன்படுத்துவதைப் பற்றிய அடுத்த அத்தியாயத்தை நீங்கள் புரிந்து கொள்ள போதுமான ஜாவாஸ்கிரிப்டை உங்களுக்குக் கற்பிப்பதே இதன் நோக்கம்.

6.1 கன்சோலை அணுகுதல்

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

எந்தவொரு வளரும் டெவலப்பரும் எழுதும் முதல் நிகழ்ச்சி 'ஹலோ வேர்ல்ட்' திட்டம் என்பது பாரம்பரியமானது. இது 'ஹலோ வேர்ல்ட்' என்ற சொற்றொடரை அச்சிடும் ஒரு எளிய நிரலாகும், வேறு எதுவும் இல்லை. உங்கள் பணியகத்தில், 'console.log (' வணக்கம் உலகம்! ');

6.2 உங்கள் முதல் திட்டம்

எனவே, நாங்கள் சரியாக என்ன செய்தோம்? முதலில், நாங்கள் 'console.log' என்று அழைத்தோம். இது கணினியில் கட்டமைக்கப்பட்ட ஒரு பிட் குறியீடாகும், அது நீங்கள் எதைச் சொன்னாலும் அதை அச்சிடுகிறது. நாங்கள் அதனுடன் சில அடைப்புக்குறிப்புகளை இணைத்து, 'ஹலோ வேர்ல்ட்' என்ற இரட்டை மேற்கோள்களில் சேர்த்தோம். இது 'கடந்து செல்லும் வாதங்கள்' என்று அழைக்கப்படுகிறது, மேலும் நாங்கள் அனுப்பிய வாதத்தின் வகை சரம் என்று அழைக்கப்படுகிறது. கடிதங்கள் மற்றும் சிறப்பு எழுத்துக்கள் சம்பந்தப்பட்ட ஒன்றை நீங்கள் செய்ய விரும்பும் போதெல்லாம், நீங்கள் ஒற்றை மேற்கோள்களைப் பயன்படுத்த வேண்டும். எவ்வாறாயினும், எண்களைப் பயன்படுத்தி நீங்கள் எதையும் செய்ய விரும்பினால், கீழே காணப்படுவது போல் நீங்கள் வழக்கமாக மேற்கோள்களைப் பயன்படுத்தத் தேவையில்லை.

6.3 ஜாவாஸ்கிரிப்டில் மாறிகள்

நீங்கள் மாறிகளை 'console.log' க்கும் அனுப்பலாம். மாறிகள் சிக்கலானதாகத் தோன்றுகின்றன, ஆனால் அவை அனைத்தும் தகவலின் துகள்களை வைப்பதற்கான ஒரு இடம் மட்டுமே. இவை பெரும்பாலும் எண்கள் அல்லது எழுத்துக்கள். அதைச் செய்ய, நீங்கள் 'var' முக்கிய சொல்லைப் பயன்படுத்தி ஒரு மாறியை அறிவிக்கிறீர்கள், அதற்கு ஒரு பெயரைக் கொடுங்கள், பின்னர் சமமான அடையாளத்துடன், நீங்கள் அதற்கு ஒரு மதிப்பை வழங்குகிறீர்கள். எனவே, நான் 'ஹலோ' என்ற ஒரு மாறியை உருவாக்கப் போகிறேன், பின்னர் அதற்கு 'ஹலோ வேர்ல்ட்' என்ற மதிப்பைக் கொடுக்கிறேன். நான் அதை console.log க்கு அனுப்பப் போகிறேன்.

மேற்கோள்களைப் பயன்படுத்தி console.log க்கு நான் எப்படி 'ஹலோ' அனுப்பவில்லை என்பதை கவனிக்கவும். ஏனென்றால், நான் 'ஹலோ'வின் உள்ளடக்கங்களை கன்சோலில் அச்சிட விரும்பினேன்,' ஹலோ 'அல்ல.

6.4 என்ன செயல்பாடுகளை செய்கிறது

குறியீட்டின் அதே பகுதியை மீண்டும் மீண்டும் எழுதுவது சற்று கடினமாக இருக்கலாம், எனவே இந்த காரணத்திற்காகவே நாம் செயல்பாடுகளை எழுதுகிறோம். நீங்கள் நினைப்பதை விட செயல்பாடுகள் எளிது. அவை அனைத்தும் குறியீட்டின் துண்டுகள் மட்டுமே, அதே குறியீட்டை மீண்டும் எழுதாமல் நாம் மீண்டும் பயன்படுத்தலாம். கீழே, நாங்கள் 'sup' என்ற ஒரு செயல்பாட்டை உருவாக்கியுள்ளோம் மற்றும் அதை அடைப்புக்குறிக்குள் பயன்படுத்தி ஒரு வாதத்தை அனுப்புகிறோம், பின்னர் அது திரையில் உள்நுழைகிறது. கன்சோலுக்கு 'sup (' வணக்கம் உலகம்! ');'

6.5 'ஃபார்' லூப் மூலம் ஒரு செயலை மீண்டும் செய்வது

நீங்கள் ஒரே செயலை ஒரு குறிப்பிட்ட எண்ணிக்கையிலான முறை செய்ய விரும்பினீர்கள் என்று வைத்துக்கொள்வோம். அதனால்தான் நாம் ஒரு 'ஃபார்' லூப்பைப் பயன்படுத்துவோம். அவை முதலில் பயமாகத் தெரிகின்றன, ஆனால் நீங்கள் புரிந்துகொண்டவுடன் அதைச் செய்வது மிகவும் எளிது. நீங்கள் '((') 'என்று எழுதித் தொடங்குங்கள்.

அந்த அடைப்புக்குறிக்குள், நாம் எத்தனை முறை ஒரு செயலைச் செய்தோம் என்பதைக் கணக்கிடும் ஒரு மாறியை உருவாக்க விரும்புகிறோம். எனவே, 'for (var i = 0;)' போன்ற ஒன்றை நாங்கள் பெறுகிறோம்.

நான் ஒரு நிபந்தனையை பூர்த்தி செய்யவில்லை என்பதை நாங்கள் சரிபார்க்க விரும்புகிறோம். எனவே, இந்த விஷயத்தில், அது 10 க்கும் குறைவாக இருப்பதை நாம் பார்க்க விரும்புகிறோம்.<10'. Our loop now looks like this: 'for(var i = 0; i < 10;).

நான் 10 க்கும் குறைவாக இருந்தால், நாங்கள் அதை ஒன்று சேர்த்து பின்னர் ஏதாவது செய்ய வேண்டும். எனவே, நாங்கள் 'i = i + 1' ஐ வைக்கிறோம். எங்கள் வளையம் கிட்டத்தட்ட முடிந்தது: 'க்கு (var i = 0; i<10; i = i + 1)'. Note how the last part does not have a semicolon.

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

நாம் பார்க்க போகும் கடைசி இரண்டு நிரலாக்க கட்டமைப்புகள் 'if' அறிக்கைகள் மற்றும் 'while' loops.

6.6 அறிக்கைகள் என்றால்

ஒரு குறிப்பிட்ட நிபந்தனை பூர்த்தி செய்யப்பட்டால் ஒரு 'if' அறிக்கை ஒரு செயலைச் செய்கிறது. அவை கட்டுமானத்தில் 'ஃபார்' லூப்ஸைப் போலவே இருக்கின்றன, மேலும் பின்வருமாறு வேலை செய்கின்றன. உங்களிடம் 'சீஸ் பர்கர்ஸ்' என்று ஒரு மாறுபாடு உள்ளது என்று வைத்துக்கொள்வோம், அது 'சுவையான' மதிப்புள்ளதா என்று பார்க்க விரும்புகிறீர்கள். அது நடந்தால், நீங்கள் திரையில் 'யம், சீஸ்பர்கர்கள்' பதிவு செய்ய வேண்டும். இதைச் செய்ய நீங்கள் இதைப் போன்ற ஒன்றை எழுதுவீர்கள்.

நான் 'if (cheeseburgers ==' சுவையான ')' என்பதை எப்படி எழுதினேன் என்பதை கவனிக்கவும். சமநிலையை சரிபார்க்க நீங்கள் இரட்டை அல்லது மூன்று சமமானவற்றையும் ஒரு மதிப்பை ஒதுக்க ஒற்றை சமத்தையும் பயன்படுத்துகிறீர்கள்.

6.7 சுழல்கள் இருக்கும் போது

இறுதியாக, ஒரு 'போது' லூப் ஒரு அளவுகோலை சந்திக்கும் போது ஒரு செயலைச் செய்கிறது. எனவே, நீங்கள் 'யம், சீஸ்பர்கர்கள்' பதிவு செய்ய விரும்புகிறீர்கள் என்று கற்பனை செய்து பாருங்கள். இதைச் செய்ய, நீங்கள் பின்வருவனவற்றை எழுத வேண்டும்.

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

நான் முன்பு குறிப்பிட்டது போல, இது ஜாவாஸ்கிரிப்டில் நிரலாக்க கட்டமைப்புகளுக்கான மிகச் சுருக்கமான அறிமுகம். பெரிய விஷயமாக இருந்தாலும், இந்த கவர்ச்சிகரமானதைப் பற்றி மேலும் படிக்க நீங்கள் ஊக்குவிக்கப்படுகிறீர்கள்.

6.8 உங்களை சோதிக்கவும்

  • நான் 30 இலிருந்து எண்ண விரும்புகிறேன். அதைச் செய்யும் 'ஃபார்' லூப்பை எழுதுங்கள்.
  • நான் 'makeuseof' என்ற ஒரு மாறியை உருவாக்கி அதற்கு 'அருமை' என்ற மதிப்பைக் கொடுக்க விரும்புகிறேன். அது எப்படி செய்யப்படுகிறது?
  • அழைக்கும் போது 'MakeUseOf is Awesome' என்று அச்சிடும் ஒரு செயல்பாட்டை நான் உருவாக்க விரும்புகிறேன். அந்த செயல்பாட்டை எழுதுங்கள்.

மேலும் படிக்க:

7. கிரியேட்டிவ் கேன்வாஸ்

கேன்வாஸ் என்பது ஃபிளாஷ் அல்லது சில்வர்லைட்டைப் பயன்படுத்தாமல் படங்களை வரையவும் அனிமேஷன்களை உருவாக்கவும் உதவும் ஒரு சிறந்த தொழில்நுட்பமாகும். ஹேர்டிரையர் சிமுலேட்டர் மற்றும் பல்வேறு வீடியோ கேம்கள் உட்பட வினோதமான மற்றும் அற்புதமான விஷயங்களை உருவாக்க மக்கள் இதைப் பயன்படுத்தியுள்ளனர். இது ஒரு அற்புதமான மற்றும் புரிந்துகொள்ள முடியாத பெரிய தொழில்நுட்பம், இந்த டுடோரியலில், நான் உங்களுக்கு ஒரு சுருக்கமான அறிமுகத்தை கொடுக்கப் போகிறேன்.

கேன்வாஸ் நவீன இணைய உலாவிகளில் மட்டுமே செயல்படுகிறது என்பது குறிப்பிடத்தக்கது. நீங்கள் IE, Chrome அல்லது Firefox இன் பழைய பதிப்பைப் பயன்படுத்துகிறீர்கள் என்றால், இந்த அத்தியாயத்தை நீங்கள் பின்பற்ற முடியாமல் போகலாம். அப்படியானால், நான் இந்த டுடோரியலை உருவாக்கிய இணைய உலாவியான கூகுள் குரோம் சமீபத்திய பதிப்பை பதிவிறக்கம் செய்ய வேண்டும்.

7.1 கேன்வாஸுடன் தொடங்குதல்

முதலில், நீங்கள் உங்கள் இணைய உலாவியைத் திறந்து codepen.io க்குச் செல்ல வேண்டும். ஒரு புதிய பேனாவை உருவாக்கவும்.

இப்போது, ​​நாம் ஒரு கேன்வாஸ் உறுப்பை அறிவிக்க வேண்டும். இரண்டு திறக்கும் மற்றும் மூடும் கேன்வாஸ் குறிச்சொற்களை உருவாக்கவும். அவற்றில், நீங்கள் அதை மூன்று பண்புகளைக் கடக்க வேண்டும். இவை கேன்வாஸ் உறுப்பின் அகலம் மற்றும் உயரம், நீங்கள் கொடுக்கும் ஐடியுடன். முன்பு போல் நீங்கள் சில வீடியோவைச் செருகும்போது, ​​நீங்கள் ஒரு பின்னூட்டச் செய்தியைச் சேர்க்க வேண்டும்.

இப்போது, ​​நாங்கள் சில ஜாவாஸ்கிரிப்ட் குறியீட்டை எழுத விரும்புவோம், அது திரையில் எதையாவது ஈர்க்கும். நாங்கள் அடிப்படை தொடங்கி ஒரு எளிய சிவப்பு சதுரத்தை உருவாக்க போகிறோம்.

நாங்கள் ஒரு மாறியை உருவாக்கப் போகிறோம் (நான் அதை 'டெமோ' என்று அழைத்தேன்), பின்னர் கேன்வாஸ் உறுப்பைத் தேர்ந்தெடுத்து அதை அந்த மாறிக்கு ஒதுக்கவும். அதைச் செய்ய, document.getElementByID () ஐப் பயன்படுத்தவும் மற்றும் நீங்கள் தேர்ந்தெடுக்க விரும்பும் உறுப்பு ஐடியில் அனுப்பவும்.

எங்கள் ஸ்கிரிப்டில் உள்ள இரண்டாவது வரி, 'கான்டெக்ட்' எனப்படும் மற்றொரு மாறியை உருவாக்கி, பின்னர் அதில் 'demo.getContext (' 2d ')' ஐ அழைக்கிறது. இது உலாவியிடம் நாங்கள் 2 டி படத்தில் வேலை செய்வோம் என்று கூறியது, பின்னர் திரைக்கு வர தேவையான செயல்பாடுகளை நிறைவேற்றினோம்.

மூன்றாவது மற்றும் நான்காவது வரிகள் உண்மையில் திரையில் வரைதல் செய்கின்றன. மூன்றாவது வரி சிவப்பு நிறத்துடன் ஒரு செவ்வகத்தை நிரப்புகிறது, அதே நேரத்தில் நான்காவது வரி ஃபில்ரெக்ட் என்று அழைக்கப்படுகிறது, இது அதை நிலைநிறுத்தி அதன் நீளம் மற்றும் அகலத்தை வரையறுக்கிறது.

இருந்தாலும் அது சுவாரசியமாக இல்லை. இன்னும் கொஞ்சம் மேம்பட்டதைச் செய்து, ஜாவாஸ்கிரிப்ட் மற்றும் கேன்வாஸின் மந்திரத்தைப் பயன்படுத்தி MakeUseOf என்ற புதிய லோகோவை உருவாக்கலாம்.

7.2 வடிவங்கள் மற்றும் உரை

நமது நான்காவது வரியை நீக்கிவிட்டு, மேல் இடது மூலையில் நமது செவ்வகத்தை வைத்து, அதை நம் கேன்வாஸின் நீளத்திற்கு நீட்டுகிறோம்.

வடிவத்தின் x மற்றும் y அச்சை நாம் எங்கு வைக்க விரும்புகிறோம் என்பதை முதல் இரண்டு வாதங்கள் வரையறுக்கின்றன. இந்த இரண்டையும் இப்போதைக்கு '0' ஆக அமைப்போம். மூன்றாவது வாதம் வடிவத்தின் அகலத்தைக் குறிக்கிறது. அதை '200' ஆக அமைத்து, பின்னர் நான்காவது வாதத்தை '50' க்கு விட்டு விடுங்கள். இது போன்ற ஒரு சிறிய தோற்றத்தை நீங்கள் இப்போது கொண்டிருக்க வேண்டும்.

இது ஒரு சிறந்த தொடக்கம், ஆனால் அது MakeUseOf ஐ குறிப்பிடவில்லை. எனவே, நாங்கள் சில உரையைச் சேர்க்கப் போகிறோம். 'Makeuseof' கொண்ட ஒரு மாறியை உருவாக்குவோம், அந்த மாறியை 'MakeUseOf' என்று அழைப்போம்.

நாங்கள் மற்றொரு சூழல் மாறியை உருவாக்க விரும்புகிறோம். இதை 'சூழல் 2' என்று அழைக்கவும், அது 2 டி என்பதை உறுதிப்படுத்தவும். எங்கள் உரையை எழுத இதைப் பயன்படுத்துவோம்.

எங்கள் உரை நீல நிறத்தில் இருக்க வேண்டும் மற்றும் எங்கள் சிவப்பு சதுரத்தை மேலடுக்க வேண்டும். எனவே, முன்பு போலவே, நாங்கள் அதற்கு ஒரு நீல நிறத்தை கொடுக்க விரும்புகிறோம். இப்போது, ​​எங்கள் உரையின் பண்புகளைத் தேர்ந்தெடுக்கப் போகிறோம். இது 20px பெரியதாகவும், தைரியமாக வடிவமைக்கப்பட்டதாகவும் மற்றும் Arial எழுத்துருவைப் பயன்படுத்துவதாகவும் நாங்கள் விரும்புகிறோம். நாங்கள் எழுத்துருவை சூழல் 2 இல் அழைக்கிறோம் மற்றும் அதற்கு 'தைரியமான 20 பிஎக்ஸ் ஏரியல்' மதிப்பை ஒதுக்குகிறோம்.

இந்த உரை நமது முந்தைய சிவப்புப் பெட்டியை மேலோட்டமாக வைக்க வேண்டும் என்பதால், நாம் 'textBaseLine' ஐ சூழல் 2 இல் அழைக்க வேண்டும் மற்றும் அதற்கு மேல் மதிப்பு கொடுக்க வேண்டும். அது முடிந்தவுடன், நாங்கள் கான்டிகல் 2 இல் 'ஃபில்டெக்ஸ்ட்' என்று அழைக்கிறோம், மேலும் எங்கள் உரையைக் கொண்ட மாறி மற்றும் எங்கள் உரையை வைக்க விரும்பும் எக்ஸ் மற்றும் ஒய் ஆயங்களை அனுப்புகிறோம். எங்கள் குறியீட்டின் இறுதி முடிவு இது போன்றது.

குறியீட்டால் தயாரிக்கப்பட்ட படம் இதுபோல் தெரிகிறது.

7.3 கேன்வாஸில் ஒரு வார்த்தை

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

இலவச பாடப்புத்தகங்களை நான் எங்கே பதிவிறக்கம் செய்யலாம்

7.4 உங்களை சோதிக்கவும்

  • நீங்கள் உருவாக்கிய படத்தில் பின்வரும் சுலோகத்தைச் சேர்க்கவும்: 'சிறந்த தொழில்நுட்பத் தளம்!'
  • பத்து மறுபடியும் இயங்கும் ஒரு 'ஃபார்' லூப்பை உருவாக்கவும். உங்கள் வரைபடத்தை கேன்வாஸுக்கு கீழே நகர்த்த முடியுமா என்று பாருங்கள், ஒரு நேரத்தில் ஒரு பிக்சல்.
  • ஒரு செயல்பாட்டில் உங்கள் வரைபடத்தை மடிக்கவும். நீங்கள் அழைக்கவில்லை என்றால் என்ன ஆகும்?

மேலும் படிக்க:

8. அடுத்து எங்கே?

HTML5 இல் காணப்படும் புதிய தொழில்நுட்பங்களுக்கான எனது நம்பமுடியாத சுருக்கமான வழிகாட்டியைப் படித்ததற்கு நன்றி. HTML5 என்பது எதிர்கால தொழில்நுட்பம் என்பது மறுக்க முடியாதது. இது எழுத எளிதானது மற்றும் அளவிட முடியாத சக்தி வாய்ந்தது என்பதால், பெரும்பாலான தொழில்நுட்பங்களால் இது ஏற்றுக்கொள்ளப்படுகிறது. மக்கள் எப்போதுமே நம்பமுடியாத விஷயங்களைச் செய்கிறார்கள், எதிர்காலத்தில் நீங்கள் அந்த மக்களில் ஒருவராக இருப்பீர்கள் என்பதில் எனக்கு எந்த சந்தேகமும் இல்லை. HTML5 இன் காட்டு மற்றும் அற்புதமான உலகத்திற்கு உங்கள் பயணத்தின் ஒரு பகுதியாக இருப்பதில் நான் பெருமைப்படுகிறேன்.

தொடர்ந்து கற்றுக் கொள்ளுமாறு உங்களை வேண்டுகிறேன். குறியீட்டைத் தொடரவும். தொடர்ந்து மேம்படுத்தவும் மேம்படுத்தவும், எந்த நேரத்திலும் அற்புதமான தயாரிப்புகளை உருவாக்க இந்த குறுகிய வழிகாட்டியில் அறிமுகப்படுத்தப்பட்ட தொழில்நுட்பங்களை நீங்கள் பயன்படுத்த மாட்டீர்கள்.

பகிர் பகிர் ட்வீட் மின்னஞ்சல் விண்டோஸ் 11 க்கு மேம்படுத்துவது மதிப்புள்ளதா?

விண்டோஸ் மறுவடிவமைப்பு செய்யப்பட்டுள்ளது. ஆனால் விண்டோஸ் 10 இலிருந்து விண்டோஸ் 11 க்கு மாறுவதற்கு இது போதுமானதா?

அடுத்து படிக்கவும் தொடர்புடைய தலைப்புகள்
  • வேர்ட்பிரஸ் & வலை மேம்பாடு
  • HTML5
  • நீண்ட வடிவம்
  • லாங்ஃபார்ம் கையேடு
எழுத்தாளர் பற்றி மேத்யூ ஹியூஸ்(386 கட்டுரைகள் வெளியிடப்பட்டன)

மேத்யூ ஹியூஸ் இங்கிலாந்தின் லிவர்பூலைச் சேர்ந்த மென்பொருள் உருவாக்குநர் மற்றும் எழுத்தாளர் ஆவார். அவர் ஒரு கப் வலுவான கருப்பு காபி இல்லாமல் அரிதாகவே காணப்படுகிறார் மற்றும் அவரது மேக்புக் ப்ரோ மற்றும் அவரது கேமராவை முற்றிலும் வணங்குகிறார். நீங்கள் அவரது வலைப்பதிவை http://www.matthewhughes.co.uk இல் படிக்கலாம் மற்றும் @matthewhughes இல் ட்விட்டரில் அவரைப் பின்தொடரலாம்.

மேத்யூ ஹியூஸின் மேலும்

எங்கள் செய்திமடலுக்கு குழுசேரவும்

தொழில்நுட்ப குறிப்புகள், மதிப்புரைகள், இலவச மின் புத்தகங்கள் மற்றும் பிரத்யேக ஒப்பந்தங்களுக்கு எங்கள் செய்திமடலில் சேரவும்!

குழுசேர இங்கே சொடுக்கவும்