वेबसाइट कैसे बनाएं: शुरुआती के लिए

वेबसाइट कैसे बनाएं: शुरुआती के लिए

क्या आप हमेशा एक वेबसाइट बनाना चाहते हैं? हो सकता है कि आपने हमारा कुछ HTML पढ़ा हो ( एचटीएमएल को समझना ) और CSS ट्यूटोरियल , लेकिन यह नहीं जानते कि किसी बड़े प्रोजेक्ट पर उन भाषाओं का उपयोग कैसे किया जाए।





आज मैं आपको शुरुआत से एक पूरी वेबसाइट बनाने की प्रक्रिया के बारे में बताऊंगा। अगर यह एक कठिन काम लगता है तो चिंता न करें, मैं हर कदम पर आपका मार्गदर्शन करूंगा।





आप इस वेबसाइट को HTML, CSS और जावास्क्रिप्ट का उपयोग करके jQuery के स्पर्श के साथ तैयार करेंगे (गाइड टू jQuery)। आप कुछ नहीं करेंगे सचमुच ब्लीडिंग एज, इसलिए यह कोड अधिकांश आधुनिक ब्राउज़रों में काफी अच्छी तरह से काम करना चाहिए।





यदि आप किसी सीएसएस के बारे में सुनिश्चित नहीं हैं, तो इस पर एक नज़र डालें सीएसएस गाइड पर 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 को परिभाषित करता है।
  • 'शोर मीडिया' के पृष्ठ शीर्षक को परिभाषित करता है
  • Google सीडीएन पर होस्ट किया गया jQuery शामिल है (सीडीएन क्या है)।
  • Google सीडीएन पर होस्ट किए गए फ़ॉन्ट विस्मयकारी शामिल हैं।
  • ए को परिभाषित करता है अंदाज अपने सीएसएस को लिखने के लिए टैग करें।
  • ए को परिभाषित करता है लिपि अपने जावास्क्रिप्ट को लिखने के लिए टैग करें।

अपनी फ़ाइल को फिर से सहेजें और इसे अपने वेब ब्राउज़र में खोलें। आप शायद ज्यादा ध्यान नहीं देंगे, और यह निश्चित रूप से अभी तक एक वेबसाइट की तरह नहीं दिखेगा।

ध्यान दें कि पृष्ठ का शीर्षक कैसा है शोर मीडिया . यह अंदर के पाठ द्वारा परिभाषित किया गया है शीर्षक उपनाम। इस है के अंदर होना सिर टैग।

विंडोज़ से लिनक्स में फाइल ट्रांसफर करें

शीर्षलेख

आइए हेडर बनाएं। यहाँ जो दिखता है वह है:

आइए शीर्ष पर उस छोटे से ग्रे बिट से शुरू करें। यह हल्के भूरे रंग का होता है जिसके नीचे हल्का सा गहरा भूरा रंग होता है। यहाँ एक क्लोज अप है:

इस HTML को अंदर जोड़ें तन शीर्ष पर टैग करें:

जब आप यहां हों, तो आइए इसे तोड़ दें। ए डिव अन्य सामान डालने के लिए एक कंटेनर की तरह है। यह 'अन्य सामान' अधिक कंटेनर, टेक्स्ट, छवियां, वास्तव में कुछ भी हो सकता है। कुछ टैग में क्या हो सकता है, इस पर कुछ प्रतिबंध हैं, लेकिन divs काफी सामान्य चीजें हैं। इसमें एक है पहचान का शीश पट्टी . इसका उपयोग इसे सीएसएस के साथ स्टाइल करने के लिए किया जाएगा, और यदि आवश्यक हो तो इसे जावास्क्रिप्ट के साथ लक्षित किया जाएगा। सुनिश्चित करें कि आपके पास एक विशेष आईडी वाला केवल एक तत्व है - वे अद्वितीय होने चाहिए। यदि आप चाहते हैं कि एक से अधिक तत्वों का एक ही नाम हो, तो 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;
}

ध्यान दें कि नाम से पहले हैश साइन (#, हैशटैग, पाउंड साइन) का उपयोग कैसे किया जाता है। इसका मतलब है कि तत्व एक आईडी है। यदि आप a वर्ग का उपयोग कर रहे थे, तो आप इसके बजाय पूर्ण विराम (.) का उपयोग करेंगे। NS एचटीएमएल तथा तन टैग की पैडिंग और मार्जिन शून्य पर सेट है। यह किसी भी अवांछित रिक्ति के मुद्दों को रोकता है।

लोगो और नावबार पर जाने का समय आ गया है। शुरू करने से पहले, आपको इस सामग्री को रखने के लिए एक कंटेनर की आवश्यकता है। आइए इसे एक वर्ग बनाएं (ताकि आप इसे बाद में फिर से उपयोग कर सकें), और जैसा कि यह है नहीं एक प्रतिक्रियाशील वेबसाइट, इसे 900 पिक्सेल चौड़ा बनाएं।

एचटीएमएल:


सीएसएस:

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

जब तक आप कोड समाप्त नहीं कर लेते, तब तक क्या चल रहा है, यह बताना कठिन हो सकता है, इसलिए क्या हो रहा है यह देखने के लिए एक (अस्थायी) रंगीन पृष्ठभूमि जोड़ना सहायक हो सकता है:

background: red;

अब लोगो बनाने का समय आ गया है। फ़ॉन्ट विस्मयकारी आइकन के लिए ही आवश्यक है। फ़ॉन्ट विस्मयकारी एक वेक्टर फ़ॉन्ट के रूप में पैक किए गए चिह्नों का एक सेट है - बहुत बढ़िया! ऊपर का प्रारंभिक कोड पहले से ही फ़ॉन्ट विस्मयकारी सेटअप कर चुका है, इसलिए यह जाने के लिए तैयार है!

यह HTML जोड़ें के भीतर NS सामान्य-आवरण div:



सीएसएस:

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

डिज़ाइन से मेल नहीं खाने वाले अन्य फ़ॉन्ट्स के बारे में चिंता न करें - आप बाद में इसे ठीक कर लेंगे। यदि आप अलग-अलग आइकन का उपयोग करना चाहते हैं, तो आगे बढ़ें फ़ॉन्ट विस्मयकारी प्रतीक पृष्ठ, और फिर बदलें एफए-वॉल्यूम-डाउन उस आइकन के नाम पर जिसका आप उपयोग करना चाहते हैं।

नेविगेशन बार पर चलते हुए, आप एक अनियंत्रित सूची का उपयोग करेंगे ( NS ) इसके लिए। यह HTML जोड़ें उपरांत NS लोगो-कंटेनर (लेकिन अभी भी अंदर सामान्य-आवरण ):

NS href अन्य पृष्ठों से लिंक करने के लिए उपयोग किया जाता है। इस ट्यूटोरियल वेबसाइट में कोई अन्य पेज नहीं है, लेकिन आप यहां नाम और फ़ाइल पथ (यदि आवश्यक हो) डाल सकते हैं, उदा। समीक्षाएं.html . सुनिश्चित करें कि आपने इसे दोनों दोहरे उद्धरण चिह्नों के अंदर रखा है।

यहाँ सीएसएस है:

#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;
}

यह सीएसएस एक से शुरू होता है अव्यवस्थित सूची . यह तब बुलेट बिंदुओं का उपयोग करके हटा देता है सूची-शैली-प्रकार: कोई नहीं; . जब आप अपने माउस को उनके ऊपर मँडराते हैं तो लिंक थोड़े अलग हो जाते हैं, और एक रंग दिया जाता है। छोटा ग्रे डिवाइडर प्रत्येक तत्व पर एक सही सीमा होती है, जिसे बाद में अंतिम तत्व के लिए हटा दिया जाता है अंतिम कड़ी कक्षा। यहाँ जो दिखता है वह है:

इस खंड के लिए जो कुछ बचा है वह लाल क्षैतिज रंग हाइलाइट है। इसके बाद इस HTML को जोड़ें सामान्य-आवरण :

और यहाँ सीएसएस है:

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

वह शीर्ष खंड किया गया है। यहाँ यह कैसा दिखता है - डिज़ाइन के समान ही सही है?

मुख्य सामग्री क्षेत्र

अब मुख्य सामग्री क्षेत्र पर जाने का समय है - तथाकथित 'तह के ऊपर'। यहाँ यह हिस्सा कैसा दिखता है:

यह एक बहुत ही सरल हिस्सा है, दाईं ओर एक छवि के साथ बाईं ओर का कुछ पाठ। यह क्षेत्र होगा शिथिल तिहाई में विभाजित, मोटे तौर पर लगभग सुनहरा अनुपात .

इस भाग के लिए आपको नमूना छवि की आवश्यकता होगी। यह डाउनलोड में शामिल है। यह छवि 670px चौड़ी है, और हमारे Panasonic Lumix DMC-G80/G85 समीक्षा से है।

एचटीएमएल जोड़ें उपरांत NS शीर्ष-रंग-छिड़काव तत्व:



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.

Android के लिए सबसे अच्छा मुफ्त संगीत ऐप

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






ध्यान दें कि कैसे सामान्य-आवरण तत्व वापस आ गया है (यह कक्षाओं का उपयोग करने का आनंद है)। आप सोच रहे होंगे कि छवि क्यों ( आईएमजी ) टैग बंद नहीं होता है। यह एक सेल्फ क्लोजिंग टैग है। फॉरवर्ड स्लैश ( /> ) इसे इंगित करता है, क्योंकि टैग को बंद करने का हमेशा कोई मतलब नहीं होता है।

सीएसएस:

.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



और फिर यह सीएसएस:

#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 एक बार फिर से का उपयोग कर रहा है सामान्य-आवरण कक्षा। यहाँ सीएसएस है:

.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;
}

सीएसएस में कुछ नई चीजें चल रही हैं। गोल कोनों द्वारा सेट किया जा रहा है सीमा-त्रिज्या: 200px; . इस मान को चौड़ाई के समान सेट करने से एक पूर्ण वृत्त बनता है। आप इसे कम कर सकते हैं यदि आप गोलाकार कोनों वाले वर्ग को अधिक पसंद करते हैं। ध्यान दें कि कैसे होवर क्रियाएं divs पर लागू होती हैं - यह केवल लिंक तक ही सीमित नहीं है। यह अनुभाग अब कैसा दिखता है:

करने के लिए आखिरी चीज पाद लेख है! यह वास्तव में सरल है, क्योंकि यह केवल एक ग्रे क्षेत्र है जिसमें कोई पाठ नहीं है। इस HTML को आइकन क्षेत्रों के बाद जोड़ें' सामान्य-आवरण :

यहाँ सीएसएस है:

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

देखें - वास्तव में सरल सामान।

कुछ पिज्जा जोड़ें

बस, कोडिंग हो गई! आप चीजों को वैसे ही छोड़ सकते हैं जैसे वे हैं, यह एक तैयार वेबपेज है। हालाँकि, आपने देखा होगा कि यह नहीं दिखता है बिल्कुल सही डिजाइन की तरह। इसका मुख्य कारण इस्तेमाल किए जाने वाले फोंट हैं। आइए इसे सुलझाते हैं।

अधिकांश शीर्षकों के लिए प्रयुक्त फ़ॉन्ट है असंख्य प्रो . यह साथ आता है एडोब क्लाउड बनाएँ, लेकिन यह वेबफ़ॉन्ट के रूप में उपलब्ध नहीं है। वर्तमान में वेबपेज पर उपयोग किया जाने वाला फ़ॉन्ट है Helvetica . यह ठीक लग रहा है, इसलिए आप इसे वैसे ही छोड़ सकते हैं, हालांकि पीटी संस वेबफॉन्ट के रूप में उपलब्ध है। सभी टेक्स्ट के लिए इस्तेमाल किया जाने वाला फॉन्ट है पीटी सेरिफ़ , जो एक वेबफॉन्ट के रूप में उपलब्ध है।

वेबफोंट एक सरल प्रक्रिया है। जैसे आपके कंप्यूटर पर एक नया फ़ॉन्ट लोड हो रहा है, वैसे ही वेबपेज मांग पर फोंट लोड कर सकते हैं। ऐसा करने के सर्वोत्तम तरीकों में से एक है गूगल फ़ॉन्ट्स .

बेहतर फोंट पर स्विच करने के लिए इस सीएसएस को जोड़ें:

@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';
}

अब नए फोंट का उपयोग करने के लिए अपने एचटीएमएल और बॉडी तत्वों को संशोधित करें:

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

ध्यान दें कि सूची में h3 तत्व कैसे शामिल नहीं है - यह डिफ़ॉल्ट रूप से होगा पीटी-सेरिफ़ की बजाय पीटी-संस .

अंतिम सुंदरता के रूप में, आइए कुछ जावास्क्रिप्ट का उपयोग करके तीन अलग-अलग विशेष रुप से प्रदर्शित छवियों के माध्यम से स्क्रॉल करें। आपको चाहिये होगा छवि_2 तथा छवि_3 इस भाग के लिए, और फिर से, यह वैकल्पिक है। इस सुविधा के बिना इस समय वेबसाइट पूरी तरह कार्यात्मक है। यहाँ यह कैसा दिखेगा (तेजी से):

तीन चुनिंदा छवियों को शामिल करने के लिए अपने HTML को संशोधित करें। ध्यान दें कि इनमें से दो का CSS वर्ग कैसे है छिपा हुआ . प्रत्येक छवि को एक आईडी दी गई है ताकि जावास्क्रिप्ट उनमें से प्रत्येक को स्वतंत्र रूप से लक्षित कर सके।





अतिरिक्त विशेष रुप से प्रदर्शित छवियों को छिपाने के लिए आवश्यक सीएसएस यहां दिया गया है:

.hidden {
display: none;
}

अब जबकि HTML और CSS का ध्यान रखा गया है, आइए JavaScript पर स्विच करें। इस भाग के लिए दस्तावेज़ ऑब्जेक्ट मॉडल (डीओएम) को समझना उपयोगी है, लेकिन यह कोई आवश्यकता नहीं है।

खोजो लिपि पृष्ठ के निचले भाग में क्षेत्र:


/* 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;
}
}
});

यहां कुछ चीजें हो रही हैं। कोड अंदर निहित है $ (दस्तावेज़)। तैयार () . इसका मतलब है कि यह तब चलेगा जब आपका ब्राउज़र पेज को रेंडर करना समाप्त कर देगा -- यह एक अच्छा अभ्यास है। NS सेटइंटरवल () फ़ंक्शन का उपयोग कॉल करने के लिए किया जाता है चित्र को बदलें () मिलीसेकंड (1000 मिलीसेकंड = 1 सेकंड) में पूर्वनिर्धारित अंतराल पर नियमित रूप से कार्य करें। यह में संग्रहीत है समय चर। स्क्रॉलिंग को तेज या धीमा करने के लिए आप इसे बढ़ा या घटा सकते हैं। अंत में, एक साधारण केस स्टेटमेंट का उपयोग विभिन्न छवियों को दिखाने के लिए किया जाता है, और वर्तमान में दिखाई जा रही छवि का ट्रैक रखता है।

कोडिंग चुनौती

इतना ही! उम्मीद है कि आपने इस प्रक्रिया के दौरान बहुत कुछ सीखा होगा। यदि आप एक चुनौती पसंद करते हैं, और अपने नए कौशल का परीक्षण करना चाहते हैं, तो इन संशोधनों को लागू करने का प्रयास क्यों न करें:

एक पाद लेख जोड़ें: पाद लेख में कुछ पाठ जोड़ें (संकेत: आप फिर से उपयोग कर सकते हैं सामान्य-आवरण तथा एक तिहाई/दो तिहाई कक्षाएं।)

छवि स्क्रॉलिंग में सुधार करें: छवि परिवर्तनों को चेतन करने के लिए जावास्क्रिप्ट को संशोधित करें (संकेत: jQuery को देखें फीका होना तथा एनिमेटेड )

एकाधिक उद्धरण लागू करें: कई अलग-अलग में से किसी एक के बीच बदलने के लिए उद्धरणों को संशोधित करें (संकेत: प्रारंभिक बिंदु के लिए छवि स्क्रॉलिंग कोड देखें)।

एक सर्वर सेटअप करें: एक सर्वर सेटअप करें और वेबपेज और सर्वर के बीच डेटा भेजें (संकेत: JSON और पायथन के लिए हमारा गाइड पढ़ें)।

क्रोम इतनी मेमोरी हॉग क्यों है

एक बार जब आप जावास्क्रिप्ट का उपयोग करने में सहज हो जाते हैं या यदि आपके पास रूबी के साथ कोई अनुभव है, तो आप GatsbyJS या Jekyll जैसे स्थिर वेबसाइट बिल्डर के साथ एक वेबसाइट बनाने में अपना हाथ आजमा सकते हैं।

साझा करना साझा करना कलरव ईमेल अपने विंडोज 10 डेस्कटॉप के लुक और फील को कैसे बदलें

जानना चाहते हैं कि विंडोज 10 को बेहतर कैसे बनाया जाए? विंडोज 10 को अपना बनाने के लिए इन सरल अनुकूलन का उपयोग करें।

आगे पढ़िए
संबंधित विषय
  • प्रोग्रामिंग
  • एचटीएमएल
  • वेब डिजाइन
  • सीएसएस
लेखक के बारे में जो कोबर्न(136 लेख प्रकाशित)

जो ब्रिटेन के लिंकन विश्वविद्यालय से कंप्यूटर विज्ञान में स्नातक हैं। वह एक पेशेवर सॉफ्टवेयर डेवलपर है, और जब वह ड्रोन नहीं उड़ा रहा है या संगीत नहीं लिख रहा है, तो उसे अक्सर तस्वीरें लेते या वीडियो बनाते हुए पाया जा सकता है।

जो कोबर्न . की अन्य फ़िल्में-टीवी शो

हमारे न्यूज़लेटर की सदस्यता लें

तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!

सब्सक्राइब करने के लिए यहां क्लिक करें