HTML5 கொதிகலனைப் பயன்படுத்தி நிமிடங்களில் ஒரு வலைத்தளத்தை உருவாக்குவது எப்படி

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

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

---

---

பிஎஸ் 2 கட்டுப்படுத்தியை கணினியுடன் இணைப்பது எப்படி

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

HTML5 கொதிகலன் வார்ப்புரு

நீங்கள் HTML5 கொதிகலிலிருந்து டெம்ப்ளேட்டைப் பதிவிறக்கும்போது, ​​பல கோப்புறைகள் மற்றும் கோப்புகளைப் பெறுவீர்கள். ZIP கோப்பின் உள்ளடக்கங்கள் இங்கே:

css
---main.css
---normalize.css
doc
img
js
---main.js
---plugins.js
---vendor
---jquery.min.js
---modernizr.min.js
.editorconfig
.htaccess
404.html
browserconfig.xml
favicon.ico
humans.txt
icon.png
index.html
robots.txt
site.webmanifest
tile.png
tile-wide.png

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

HTML5 கொதிகலன் உதவி ஆவணம்

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

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

---

---

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

HTML5 கொதிகலனின் CSS உடன் தொடங்குகிறது

HTML5 கொதிகலன் வார்ப்புரு இரண்டு CSS கோப்புகளுடன் வருகிறது: main.css மற்றும் normalize.css.

---

---

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

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

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

அடிப்படை CSS இல் பல பயனுள்ள உதவி வகுப்புகள் சேர்க்கப்பட்டுள்ளன. அவர்களில் சிலர் நிலையான உலாவிகள் மற்றும் திரை வாசகர்களிடமிருந்து (அல்லது சில சேர்க்கை) பொருட்களை மறைக்கின்றனர்.

மேலும் main.css இல் நீங்கள் பதிலளிக்கக்கூடிய வடிவமைப்பு மற்றும் பயனுள்ள அச்சு அமைப்புகளுக்கான ஆதரவைக் காணலாம்.

இந்த உருப்படிகள் அனைத்தும் CSS இல் உள்ள கருத்துகளால் தெளிவாக விளக்கப்பட்டுள்ளன:

பொதுவாக, நீங்கள் அடிப்படை CSS உடன் தொடங்கலாம்.

டெம்ப்ளேட்டில் உங்கள் சொந்த HTML ஐச் சேர்த்தல்

கொதிகலனில் இரண்டு HTML கோப்புகள் உள்ளன: 404.html மற்றும் index.html.

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

உலாவியில் குறியீட்டுப் பக்கத்தைத் திறந்தால், ஒற்றை வரியைக் காண்பீர்கள். ஆனால் HTML ஐப் பார்த்தால் குறியீட்டில் இன்னும் நிறைய மறைந்திருப்பதை வெளிப்படுத்துகிறது. Google Analytics குறியீட்டை மாற்றுவது பற்றி நீங்கள் கவலைப்பட வேண்டிய ஒரே விஷயம் ('UA-XXXXX-Y' என்ற உரையைக் கண்டுபிடித்து அதை உங்கள் சொந்த கண்காணிப்பு குறியீட்டால் மாற்றவும்).

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

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

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

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

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

ஃபேவிகானைச் சேர்த்தல் (மற்றும் பிற சின்னங்கள்)

உங்கள் ஃபேவிகானை மாற்ற வேண்டுமா? பின்னர் ஃபேவிகான்.இகோ நீங்கள் மாற்ற வேண்டிய கோப்பு.

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

தொழிற்சாலை மீட்டமைக்கப்பட்ட பிறகு கூகுள் சரிபார்ப்பை நான் எப்படித் தவிர்ப்பது

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

உங்கள் தளத்தின் ரூட் கோப்பகத்தில் வேறு மூன்று படங்கள் இருப்பதை நீங்கள் கவனிக்கலாம்: icon.png, tile.png மற்றும் tile-wide.png. இவை எதற்காக?

• icon.png ஆப்பிள் டச் ஐகான்களுக்கு பயன்படுத்தப்படுகிறது. நீங்கள் ஒரு இணைய பயன்பாட்டை உருவாக்கினால், இந்த ஐகான் ஐபோன் அல்லது ஐபாட் பயனர் தங்கள் முகப்புத் திரையில் பயன்பாட்டைச் சேர்க்கும்போது பயன்படுத்தப்படும்.
• tile.png மற்றும் tile-wide.png ஆகியவை Windows '' pin 'செயல்பாட்டிற்காக உள்ளன, மேலும் Windows 10 இல் காண்பிக்கப்படும்.

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

மேலும் செயல்பாட்டைச் சேர்க்கிறது

உங்கள் HTML மற்றும் ஃபேவிகானைச் சேர்த்தவுடன் (நீங்கள் சேர்க்க விரும்பும் எந்த CSS), உங்கள் தளம் வெளியிட தயாராக உள்ளது. HTML5 கொதிகலனைப் பயன்படுத்துவது எவ்வளவு எளிது. உங்கள் சேவையகத்தில் பதிவேற்றவும், நீங்கள் முடித்துவிட்டீர்கள்!

எங்கள் பக்கம் எப்படி இருக்கிறது என்பது இங்கே:

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

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

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

பகிர் பகிர் ட்வீட் மின்னஞ்சல் பொருந்தாத கணினியில் விண்டோஸ் 11 ஐ நிறுவுவது சரியா?

நீங்கள் இப்போது அதிகாரப்பூர்வ ஐஎஸ்ஓ கோப்புடன் பழைய பிசிக்களில் விண்டோஸ் 11 ஐ நிறுவலாம் ... ஆனால் அவ்வாறு செய்வது நல்ல யோசனையா?

அடுத்து படிக்கவும் தொடர்புடைய தலைப்புகள்

• நிரலாக்க
• HTML5
• குறியீட்டு பயிற்சிகள்

எழுத்தாளர் பற்றி பின்னர் ஆல்பிரைட்(506 கட்டுரைகள் வெளியிடப்பட்டன)

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

டான் ஆல்பிரைட்டிலிருந்து மேலும்

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

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

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