ஒரு வலைத்தளத்தை உருவாக்குவது எப்படி: ஆரம்பநிலைக்கு

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

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

---

---

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

நீங்கள் எந்த CSS பற்றி உறுதியாக தெரியவில்லை என்றால், பாருங்கள் CSS வழிகாட்டி மணிக்கு W3Schools.com .

வடிவமைப்பு

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

நான் இந்த வலைத்தளத்தை ஒரு கற்பனை நிறுவனத்திற்காக வடிவமைத்தேன் அடோ போட்டோஷாப் 2017. நீங்கள் ஆர்வமாக இருந்தால், மூட்டை பதிவிறக்கத்திலிருந்து .PSD கோப்பைப் பிடித்துக் கொள்ளுங்கள். ஃபோட்டோஷாப் கோப்பில் நீங்கள் பெறுவது இங்கே:

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

---

---

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

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

---

---

ஆரம்ப குறியீடு

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

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

உங்களுக்கு தேவையான குறியீடு இங்கே:





Noise Media


/* CSS goes here, at the top of the page */





/* JavaScript goes here, at the bottom of the page */




இது பல விஷயங்களைச் செய்கிறது:

• தேவையான குறைந்தபட்ச HTML ஐ வரையறுக்கிறது.
• 'சத்தம் ஊடகத்தின்' பக்க தலைப்பை வரையறுக்கிறது
• கூகுள் சிடிஎன் (சிடிஎன் என்றால் என்ன) ஹோஸ்ட் செய்யப்பட்ட jQuery அடங்கும்.
• கூகுள் சிடிஎன் இல் ஹோஸ்ட் செய்யப்பட்ட எழுத்துரு அருமை அடங்கும்.
• A ஐ வரையறுக்கிறது பாணி உங்கள் CSS ஐ எழுத டேக் செய்யவும்.
• A ஐ வரையறுக்கிறது கையால் எழுதப்பட்ட தாள் உங்கள் ஜாவாஸ்கிரிப்டை எழுத டேக் செய்யவும்.

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

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

Android இல் வைஃபை கடவுச்சொல்லை எவ்வாறு சரிபார்க்கலாம்

தலைப்பு

தலைப்பை உருவாக்குவோம். அது எப்படி இருக்கிறது என்பது இங்கே:

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

இந்த HTML ஐ உள்ளே சேர்க்கவும் உடல் மேலே குறிச்சொல்:

நீங்கள் இங்கே இருக்கும்போது, ​​இதை உடைப்போம். ஏ div மற்ற பொருட்களை வைக்க ஒரு கொள்கலன் போன்றது. இந்த 'மற்ற பொருள்' அதிக கொள்கலன்கள், உரை, படங்கள், உண்மையில் எதுவாகவும் இருக்கலாம். சில குறிச்சொற்களுக்குள் செல்ல சில கட்டுப்பாடுகள் உள்ளன, ஆனால் டிவிஸ் மிகவும் பொதுவான விஷயங்கள். இது ஒரு உள்ளது ஐடி இன் மேல்-பட்டை . இது CSS உடன் ஸ்டைல் ​​செய்யப் பயன்படும், தேவைப்பட்டால் ஜாவாஸ்கிரிப்ட் மூலம் குறிவைக்கப்படும். ஒரு குறிப்பிட்ட ஐடியுடன் ஒரே ஒரு உறுப்பு உங்களிடம் இருப்பதை உறுதிப்படுத்திக் கொள்ளுங்கள் - அவை தனித்துவமாக இருக்க வேண்டும். பல உறுப்புகளுக்கு ஒரே பெயர் இருக்க வேண்டுமென்றால், a ஐப் பயன்படுத்தவும் வர்க்கம் அதற்கு பதிலாக - அவை எதற்காக வடிவமைக்கப்பட்டுள்ளன! நீங்கள் வடிவமைக்க வேண்டிய சிஎஸ்எஸ் இங்கே (உங்கள் உள்ளே மேலே வைக்கவும் பாணி குறிச்சொல்):

html, body {
margin: 0;
padding: 0;
font-family: 'Helvetica', 'Arial'; /* initial fonts */
}
#top-bar {
width: 100%;
background: #F1F1F1; /* light gray */
border-bottom: 1px solid #D4D4D4; /* dark gray 'underline' */
height: 25px;
}

பெயருக்கு முன் ஹாஷ் அடையாளம் (#, ஹேஷ்டேக், பவுண்டு அடையாளம்) எவ்வாறு பயன்படுத்தப்படுகிறது என்பதைக் கவனியுங்கள். இதன் பொருள் உறுப்பு ஒரு ஐடி. நீங்கள் ஒரு வகுப்பைப் பயன்படுத்துகிறீர்கள் என்றால், அதற்கு பதிலாக ஒரு முழு நிறுத்தத்தை (.) பயன்படுத்துவீர்கள். தி html மற்றும் உடல் குறிச்சொற்கள் அவற்றின் திணிப்பு மற்றும் விளிம்பு பூஜ்ஜியமாக அமைக்கப்பட்டுள்ளன. இது தேவையற்ற இடைவெளி சிக்கல்களைத் தடுக்கிறது.

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

HTML:




CSS:

.normal-wrapper {
width: 900px;
margin: 0 auto;
padding: 15px 40px;
background: red;
overflow: auto;
}

நீங்கள் குறியீட்டை முடிக்கும் வரை என்ன நடக்கிறது என்று சொல்வது கடினமாக இருக்கலாம், எனவே என்ன நடக்கிறது என்பதைப் பார்க்க (தற்காலிக) வண்ண பின்னணியைச் சேர்ப்பது உதவியாக இருக்கும்:

background: red;

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

இந்த HTML ஐ சேர்க்கவும் உள்ளே தி சாதாரண-போர்த்தி div:





CSS:

.logo-icon {
color: #000000;
font-size: 60pt;
float: left;
}
h1 {
float: left;
margin: 21px 0 0 25px;
}

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

வழிசெலுத்தல் பட்டியில் நகரும் போது, ​​நீங்கள் வரிசைப்படுத்தாத பட்டியலைப் பயன்படுத்துவீர்கள் ( தி ) இதற்காக. இந்த HTML ஐ சேர்க்கவும் பிறகு தி லோகோ-கொள்கலன் (ஆனால் இன்னும் உள்ளே சாதாரண-போர்த்தி ):

• Home


• About


• Reviews


• Contact

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

இங்கே CSS உள்ளது:

#navbar {
list-style-type: none; /* remove bullet points */
margin: 29px 0 0 0;
padding: 0;
float: right;
font-size: 16pt;
}
#navbar li {
display: inline; /* make items horizontal */
}
#navbar li a:link, #navbar li a:visited, #navbar li a:active {
text-decoration: none; /* remove underline */
color: #000000;
padding: 0 16px 0 10px; /* space links apart */
margin: 0;
border-right: 2px solid #B4B4B4; /* divider */
}
#navbar li a:link.last-link {
/* remove divider */
border-right: 0px;
}
#navbar li a:hover {
/* change color on hover (mouseover) */
color: #EB6361;
}

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

இந்த பகுதிக்கு எஞ்சியிருப்பது சிவப்பு கிடைமட்ட வண்ண சிறப்பம்சமாகும். பிறகு இந்த HTML ஐ சேர்க்கவும் சாதாரண-போர்த்தி :

இங்கே CSS:

#top-color-splash {
width: 100%;
height: 4px;
background: #EB6361;
}

அதுதான் மேல் பகுதி முடிந்தது. இது எப்படி இருக்கிறது என்பது இங்கே - வடிவமைப்பைப் போலவே இருக்கிறது?

முக்கிய உள்ளடக்க பகுதி

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

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

இந்த பகுதிக்கு உங்களுக்கு மாதிரி படம் தேவைப்படும். இது பதிவிறக்கத்தில் சேர்க்கப்பட்டுள்ளது. இந்த படம் 670px அகலம் கொண்டது, இது எங்கள் பானாசோனிக் லுமிக்ஸ் DMC-G80/G85 விமர்சனத்திலிருந்து.

HTML சேர்க்கவும் பிறகு தி மேல்-வண்ண-தெறிப்பு உறுப்பு:

Welcome!

Noise Media is a technology company specialising in tech reviews.

We’re very good at what we do, but unfortunately, we are not a real company.

Make sure you visit makeuseof.com for the full tutorial on how to build this website.

ps3 விளையாட்டுகள் ps4 இல் விளையாடுகின்றன

Alternatively, check out our review of the Panasonic G80 shown on the right!

எப்படி என்பதை கவனிக்கவும் சாதாரண-போர்த்தி உறுப்பு திரும்பியது (வகுப்புகளைப் பயன்படுத்துவதில் மகிழ்ச்சி). படம் ஏன் என்று நீங்கள் யோசிக்கலாம் ( img குறிச்சொல் மூடப்படவில்லை. இது ஒரு சுய மூடும் குறி. முன்னோக்கி சாய்வு ( /> ) இது ஒரு குறிச்சொல்லை மூட வேண்டிய அவசியமில்லை என்பதால் இதை குறிக்கிறது.

CSS:

.one-third {
width: 40%;
float: left;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
margin-top: 20px;
}
.two-third {
width: 60%;
float: left;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
padding-left: 40px;
text-align: right;
margin-top: 20px;
}
.featured-image {
max-width: 500px; /* reduce image size while maintaining aspect ratio */
}
.no-margin-top {
margin-top: 0; /* remove margin on things like headers */
}

இங்கு மிக முக்கியமான பண்பு பெட்டி அளவு: எல்லைப் பெட்டி; . உறுப்புகள் எப்போதும் 40% அல்லது 60% அகலமாக இருப்பதை இது உறுதி செய்கிறது. இயல்புநிலை (இந்த பண்பு இல்லாமல்) உங்கள் குறிப்பிட்ட அகலம் மற்றும் எந்த திணிப்பு, ஓரங்கள் மற்றும் எல்லைகள். பட வகுப்பு ( சிறப்பு புகைப்படம் ) ஒரு அதிகபட்ச அகலம் இன் 500px . நீங்கள் ஒரு பரிமாணத்தை (ஒரு அகலம் அல்லது உயரம்) மட்டும் குறிப்பிட்டு, மற்றொன்றை காலியாக விட்டால், சிஎஸ்எஸ் அதன் விகிதத்தை பராமரிக்கும் போது படத்தின் அளவை மாற்றும்.

மேற்கோள் பகுதி

மேற்கோள் பகுதியை உருவாக்குவோம். இது எப்படி இருக்கிறது என்பது இங்கே:

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

இந்த HTML ஐ சேர்க்கவும் பிறகு முந்தைய சாதாரண-போர்த்தி :

makeuseof is the best website ever

Joe Coburn

பின்னர் இந்த CSS:

#quote-area {
background: #363636;
color: #FFFFFF;
text-align: center;
padding: 15px 0;
}
h3 {
font-weight: normal;
font-size: 20pt;
margin-top: 0px;
}
h4 {
font-weight: normal;
font-size: 16pt;
margin-bottom: 0;
}

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

ஐகான் பகுதி

அழுத்திக் கொண்டே போகலாம் - கிட்டத்தட்ட முடிந்துவிட்டது! உருவாக்க வேண்டிய அடுத்த பகுதி இங்கே:

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

YouTube

Checkout our YouTube channel for more tech reviews, tutorials and giveaways!

Reviews

If you’re planning to buy a new gadget, check here first. We’ll give you in-depth reviews of the latest devices.

Buying Guides

At Buying Guides we strive to provide readers with the tools to get the best stuff for the lowest amount of money.

இந்த மூன்று சின்னங்களும் கூட எழுத்துரு-அற்புதம் . HTML மீண்டும் பயன்படுத்தி வருகிறது சாதாரண-போர்த்தி வர்க்கம். இங்கே CSS உள்ளது:

.icon-outer {
box-sizing: border-box; /* ensure padding and borders do not increase the size */
float: left;
width: 33.33%;
padding: 25px;
margin: 0;
text-align: center;
}
.icon-circle {
background: #EEEEEE;
color: #B4B4B4;
width: 200px;
height: 200px;
border-radius: 200px; /* make rounded corners */
margin: 0 auto;
border: 2px solid #D6D6D6;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
font-size: 75pt;
padding: 30px 0 0 0;
cursor: pointer;
}
.icon-circle:hover {
/* change color on hover (mouseover) */
color: #FFFFFF;
background: #EB6361;
}
h5 {
margin: 15px 0 10px 0;
font-size: 20pt;
}

CSS இல் சில புதிய விஷயங்கள் நடக்கின்றன. வட்டமான மூலைகள் அமைக்கப்படுகின்றன எல்லை-ஆரம்: 200px; . அகலத்தைப் போலவே இந்த மதிப்பை அமைப்பது சரியான வட்டத்தில் விளைகிறது. வட்டமான மூலைகளைக் கொண்ட சதுரத்தை நீங்கள் அதிகம் விரும்பினால் இதை நீங்கள் குறைக்கலாம். டிவிஸில் ஹோவர் செயல்கள் எவ்வாறு பயன்படுத்தப்படுகின்றன என்பதைக் கவனியுங்கள் - இது இணைப்புகளுக்கு மட்டும் கட்டுப்படுத்தப்படவில்லை. இந்த பிரிவு இப்போது எப்படி இருக்கிறது என்பது இங்கே:

அடிக்குறிப்பு

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

இங்கே CSS உள்ளது:

#footer {
width: 100%;
background: #F1F1F1; /* light gray */
border-top: 1px solid #D4D4D4; /* dark gray 'topline' */
height: 150px;
}

பார்க்க - மிகவும் எளிமையான விஷயங்கள்.

கொஞ்சம் பீஸ்ஸாஸைச் சேர்க்கவும்

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

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

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

சிறந்த எழுத்துருக்களுக்கு மாற இந்த CSS ஐச் சேர்க்கவும்:

@import url('https://fonts.googleapis.com/css?family=PT+Sans');
@import url('https://fonts.googleapis.com/css?family=PT+Serif');
h1, h2, h4, h5, h6 {
font-family: 'PT Sans', 'Helvetica', 'Arial';
}

புதிய எழுத்துருக்களைப் பயன்படுத்த இப்போது உங்கள் html மற்றும் உடல் உறுப்புகளை மாற்றவும்:

font-family: 'PT Serif', 'Helvetica', 'Arial';

எப்படி h3 உறுப்பு பட்டியலில் சேர்க்கப்படவில்லை என்பதை கவனிக்கவும் - இது இயல்புநிலைக்கு செல்லும் பிடி-செரிஃப் அதற்கு பதிலாக பிடி-சான்ஸ் .

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

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







கூடுதல் சிறப்புப் படங்களை மறைக்க CSS தேவை:

.hidden {
display: none;
}

இப்போது HTML மற்றும் CSS கவனித்து, ஜாவாஸ்கிரிப்டுக்கு மாறுவோம். இந்த பகுதிக்கான ஆவணப் பொருள் மாதிரியை (DOM) புரிந்துகொள்வது பயனுள்ளது, ஆனால் அது ஒரு தேவை இல்லை.

கண்டுபிடிக்க கையால் எழுதப்பட்ட தாள் பக்கத்தின் கீழே உள்ள பகுதி:


/* JavaScript goes here, at the bottom of the page */


பின்வரும் ஜாவாஸ்கிரிப்டை உள்ளே சேர்க்கவும் கையால் எழுதப்பட்ட தாள் குறிச்சொல்:

/* JavaScript goes here, at the bottom of the page */
$(document).ready(function() {
// run once the page is ready
var time = 2500;
// get the image containers
$im1 = $('#f-image-1');
$im2 = $('#f-image-2');
$im3 = $('#f-image-3');
setInterval(function(){
// call function every x milliseconds (defined in time variable above)
changeImage();
}, time);
var currentImage = 1;
function changeImage(){
switch(currentImage) {
case 1:
// show image 2
$im1.hide();
$im2.show();
$im3.hide();
currentImage = 2;
break;
case 2:
// show image 3
$im1.hide();
$im2.hide();
$im3.show();
currentImage = 3;
break;
default:
// show image 1
$im1.show();
$im2.hide();
$im3.hide();
currentImage = 1;
}
}
});

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

குறியீட்டு சவால்

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

ஒரு அடிக்குறிப்பைச் சேர்க்கவும்: அடிக்குறிப்பில் சில உரையைச் சேர்க்கவும் (குறிப்பு: நீங்கள் மீண்டும் பயன்படுத்தலாம் சாதாரண-போர்த்தி மற்றும் மூன்றில் ஒரு பங்கு/மூன்றில் ஒரு பங்கு வகுப்புகள்.)

பட ஸ்க்ரோலிங்கை மேம்படுத்தவும்: பட மாற்றங்களை உயிர்ப்பிக்க ஜாவாஸ்கிரிப்டை மாற்றவும் (குறிப்பு: jQuery ஐப் பார்க்கவும் fadein மற்றும் அனிமேஷன் )

பல மேற்கோள்களை செயல்படுத்தவும்: மேற்கோள்களை பலவற்றில் ஒன்றை மாற்றியமைக்கவும்.

சேவையகத்தை அமைக்கவும்: ஒரு சேவையகத்தை அமைத்து, வலைப்பக்கத்திற்கும் சேவையகத்திற்கும் இடையில் தரவை அனுப்பவும் (குறிப்பு: JSON மற்றும் பைத்தானுக்கு எங்கள் வழிகாட்டியைப் படியுங்கள்).

இல்லஸ்ட்ரேட்டரில் படத்தை திசையனாக மாற்றுவது எப்படி

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

பகிர் பகிர் ட்வீட் மின்னஞ்சல் உங்கள் விண்டோஸ் 10 டெஸ்க்டாப்பின் தோற்றம் மற்றும் உணர்வை எப்படி மாற்றுவது

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

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

• நிரலாக்க
• HTML
• வலை வடிவமைப்பு
• CSS

எழுத்தாளர் பற்றி ஜோ கோபர்ன்(136 கட்டுரைகள் வெளியிடப்பட்டன)

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

ஜோ கோபர்னிடமிருந்து மேலும்

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

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

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