अपनी वेबसाइट शुरू करना एक डरावना काम हो सकता है। यह खासकर तब सच है जब आपके पास वेबसाइट बिल्डिंग का सीमित अनुभव है। आपको शुरू करने के लिए, Dynadot प्रदान करता है मुफ्त एक पेज होस्टिंग हर डोमेन खरीद के साथ। हमारी वन पेज होस्टिंग में एक "wizard" है जो HTML नहीं जानने वाले लोगों को उनकी वेबसाइट बनाने में मदद करता है। हालाँकि, हमारा विज़ार्ड आपको आपकी साइट के लिए HTML जितना नहीं करने देता, इसलिए यहाँ कुछ बेसिक्स हैं जो आपको शुरू करने में मदद करेंगे*:

<b>bold</b>
<i>italics</i>
<u>underline</u>

फ़ॉन्ट साइज़
फ़ॉन्ट साइज़ बदलने का सबसे आसान तरीका इन टैग्स का इस्तेमाल करना है:

<big>फ़ॉन्ट को एक आकार से बढ़ाता है</big>
<small>फ़ॉन्ट को एक आकार से घटाता है</small>

अगर आपको अपने फ़ॉन्ट को और बड़ा या छोटा करने की ज़रूरत है, तो आप इन अधिक विशिष्ट टैग का उपयोग कर सकते हैं:

<font size="+2">कोट्स में दिए गए नंबर से फ़ॉन्ट साइज़ बढ़ाता है</font>
<font size="-2">कोट्स में दिए गए नंबर से फ़ॉन्ट साइज़ घटाता है</font>

आप फ़ॉन्ट आकार के साथ और भी विशिष्ट हो सकते हैं, 1-7 की संख्या निर्दिष्ट करके, जहाँ 1 सबसे छोटा आकार है और 7 सबसे बड़ा:

<font size="1">सबसे छोटा फ़ॉन्ट 8 pt</font>
<font size="7">सबसे बड़ा फ़ॉन्ट 36 pt</font>

फ़ॉन्ट साइज़ के साथ एक और विकल्प है हेडर टैग 1-6 का उपयोग करना, जो टेक्स्ट के आसपास स्पेसिंग भी डालता है:

 

 

<h1>सबसे बड़ा हेडर</h1>

 

 

<h6>सबसे छोटा हेडर</h6>

फ़ॉन्ट कलर
अपने फ़ॉन्ट के साइज़ को बदलने के अलावा, आप रंग भी एडजस्ट कर सकते हैं।

<font color="blue">नीला</font>
<font color="red">लाल</font>

यदि आप लाल या नीले के एक अलग शेड का उपयोग करना चाहते हैं, तो आप शब्द "red" या "blue." के बजाय एक छह अंकों का हेक्साडेसिमल नंबर इनपुट कर सकते हैं। सभी रंग लाल, नीले, और हरे से बने होते हैं और प्रत्येक रंग का अपना "code." होता है। कोड के पहले दो नंबर (या कभी-कभी अक्षर) लाल का प्रतिनिधित्व करते हैं, फिर अगले दो हरे का, और अंतिम दो नीले का। आप डाउनलोड कर सकते हैं कलर कॉप पीसी या के लिए डिजिटल कलर मीटर Mac के लिए और इन प्रोडक्ट्स का इस्तेमाल करके अपनी स्क्रीन पर किसी भी कलर पर होवर करें और यह आपको वह कोड देगा जिसकी आपको जरूरत है। उदाहरण के लिए अगर आप ऊपर दिख रहे ब्लू के लिए कोड इस्तेमाल करते हैं, तो यह ऐसा दिखेगा:

<font color="#0000FF">वही नीला</font>
<font color="#3DC6EA">और यहाँ नीले रंग के दूसरे शेड का एक उदाहरण है जिसे आप कोड का उपयोग करके चुन सकते हैं</font>

फॉन्ट टाइपफेस
अंत में, आप अपने फ़ॉन्ट का टाइपफेस बदल सकते हैं। अगर आपको आइडिया चाहिए तो आप Microsoft Word का उपयोग कर सकते हैं।

<font face="arial">एरियल फ़ॉन्ट</font>
<font face="comic sans ms">कॉमिक सैंस एमएस फ़ॉन्ट</font>
<font face="lucida handwriting">लूसिडा हैंडराइटिंग</font>

अब आपको इसे सब एक साथ रखना होगा। "font" शब्द वाली किसी भी चीज़ के लिए आप बस सारी जानकारी एक टैग में डाल सकते हैं। अगर आप हेडर टैग्स का इस्तेमाल करना चाहते हैं या बोल्ड, इटैलिक, या अंडरलाइन जोड़ना चाहते हैं तो आप उन्हें अपने अलग टैग में जोड़ सकते हैं।

<font size="4" color="376E1E" face="calibri">आप इसे सभी को एक साथ रख सकते हैं</font>

<b><font size="4" color="376E1E" face="calibri">आप इसे सभी को बोल्ड कर सकते हैं</font></b>

<font size="4" color="376E1E" face="calibri">या आप बोल्ड कर सकते हैं <b>part</b> of it</font>

स्पेसिंग
अब जब आप अपना फ़ॉन्ट समायोजित कर सकते हैं, तो आप पैराग्राफ़, लाइन ब्रेक बनाना चाहेंगे, और कुछ मामलों में आपको मैन्युअल रूप से स्पेस जोड़ने की आवश्यकता हो सकती है:

<p>पैराग्राफ टैग का इस्तेमाल करने से आपका टेक्स्ट अपने पैराग्राफ में आ जाता है...</p>

<p>...और अगली लाइन पर</p>

लाइन ब्रेक का उपयोग करना ऐसा है...<br>
...अगली लाइन पर जाने के लिए एंटर दबाना और इस पेज पर बाकी सब चीज़ों के विपरीत इसे क्लोजिंग टैग की जरूरत नहीं है (यह एक क्लोजिंग टैग है </p>). आप बस इसे फिर से इनपुट कर सकते हैं...<br>
...फिर से अगली लाइन पर जाने के लिए।

आपको टेक्स्ट के बीच स्पेस के लिए कोड का उपयोग करने की आवश्यकता नहीं होगी (जैसे स्पेसबार से) जब तक कि आप अतिरिक्त स्पेस जोड़ना नहीं चाहते क्योंकि HTML केवल एक को पहचानेगा भले ही आप अपने स्पेसबार से एक से अधिक डालें। आपको टेक्स्ट के बीच स्पेस देने के लिए आप कोड का उपयोग कर सकते हैं: &nbsp;

लिंक्स
एक चीज़ जो आप शायद अपनी वेबसाइट में जोड़ना चाहेंगे, वह है अपनी वेबसाइट की अन्य पृष्ठों या अन्य वेबसाइटों के लिंक। लिंक जोड़ना इस कोड का उपयोग करके आसान है:

<a href="http://www.dynadot.com">यह डायनाडॉट के होमपेज पर लिंक करता है</a>

आप देख सकते हैं कि यदि आप ऊपर दिए गए लिंक पर क्लिक करते हैं, तो यह आपके ब्राउज़र सेटिंग्स के आधार पर या तो एक अलग टैब या विंडो में खुलता है। इसे जोड़ना आसान है और अनुशंसित है यदि आप अपनी वेबसाइट से दूर लिंक कर रहे हैं या किसी विशेष पेज (जैसे ब्लॉग) पर लोगों को खोना नहीं चाहते हैं, क्योंकि यह उस पेज को आपके ग्राहकों के लिए वापस जाने के लिए खुला रखता है बिना उनके ब्राउज़र में बैक बटन दबाए। आपको बस अपने लिंक के बाद target="_blank" जोड़ना है:

<a href="http://www.dynadot.com" target="_blank">यह डायनाडॉट के होमपेज पर लिंक करता है</a>

इमेजेस
अंत में, आप अपनी साइट पर इमेजेज़ जोड़ना चाह सकते हैं। HTML के साथ इमेज जोड़ने के लिए आपको इसे कहीं होस्ट करना होगा। अगर आपके पास खुद इमेज होस्ट करने की जगह नहीं है तो आप एक सर्विस का इस्तेमाल कर सकते हैं जैसे Tiny Pic.com जो आपको मुफ्त में अपनी छवियाँ अपलोड करने देता है और आपके लिए HTML टैग जनरेट करता है। यदि आप एक अकाउंट बनाना नहीं चाहते हैं, तो आप बस उत्पन्न HTML को सेव कर सकते हैं (बस इसे Microsoft Word में सेव न करें क्योंकि Word कभी-कभी ऐसी चीजें जोड़ देता है जो कोड को काम नहीं करने देतीं)। ध्यान रखें कि कुछ छवियाँ बहुत बड़ी होती हैं और आप उन्हें ऑप्टिमाइज़ करना चाह सकते हैं ताकि वे कम जगह लें। कुछ मुफ्त इमेज ऑप्टिमाइज़र हैं जिनका उपयोग आप अपनी छवियों के फ़ाइल आकार को कम करने के लिए कर सकते हैं, जैसे Image Optimizer.net. यहाँ एक बुनियादी छवि टैग का उदाहरण है:
<img src="https://i45.tinypic.com/9bkglk.jpg"> जो कुछ इस तरह दिखता है:

आप अपनी छवि में बॉर्डर भी जोड़ सकते हैं, साइज़ बदल सकते हैं, और उसके आसपास स्पेसिंग जोड़ सकते हैं:

<img src="https://i45.tinypic.com/9bkglk.jpg" border="2" width="100" height="30" vspace="10" hspace="20" align="left">

जैसा कि आप देख सकते हैं, इमेज में बॉर्डर है, यह चौड़ी और छोटी है, और ऊपर और नीचे और दाएं और बाएं के आसपास स्पेस की गई है। यह लेफ्ट अलाइन भी है, इसलिए टेक्स्ट अब इमेज के बगल में दिख रहा है।

आप अपनी छवि में एक लिंक भी जोड़ सकते हैं। आपको बस इमेज टैग के चारों ओर लिंक टैग लगाने होंगे, जैसे कि:

<a href="http://www.dynadot.com" target="_blank"><img src="https://i45.tinypic.com/9bkglk.jpg" border="0"></a>
अब आप इस इमेज पर क्लिक कर सकते हैं और यह आपको हमारे होमपेज पर ले जाता है:

यह कभी-कभी छवि के चारों ओर एक बॉर्डर जोड़ देगा उस नीले रंग में जो आप टेक्स्ट लिंक्स पर देखते हैं। इसे हटाने के लिए बस अपने इमेज टैग में border="0" जोड़ें। आप यह भी देख सकते हैं कि Tiny Pic.com द्वारा जनरेट किया गया HTML में alt="Image and video hosting by Tiny Pic" इमेज टैग के अंदर होता है। आप इसका उपयोग अपनी छवि के साथ टेक्स्ट डालने के लिए कर सकते हैं यदि यह किसी के ब्राउज़र पर ठीक से नहीं दिखती है। वैकल्पिक टेक्स्ट जोड़ना सर्च इंजन ऑप्टिमाइज़ेशन (SEO) में भी मदद कर सकता है।

अब जब आप HTML के बारे में उम्मीद है कि बेहतर महसूस कर रहे हैं, तो आप अपने स्किल्स को अपनी वेबसाइट पर टेस्ट कर सकते हैं। लेकिन इससे पहले कि आप संभावित अपूर्ण HTML के साथ सेव करें, हम सुझाव देते हैं कि आप अपने HTML को एक फ्री सर्विस से टेस्ट करें जैसे onlinehtmleditor.net. इसमें ऊपर कुछ आसान HTML बटन भी हैं जो आपकी मदद कर सकते हैं। अब आपको बस आपका डोमेन अगर आपके पास पहले से नहीं है तो आज ही अपनी वेबसाइट शुरू करें!

*कृपया ध्यान दें कि फ़ॉन्ट टैग अप्रचलित है और सभी ब्राउज़रों में सही ढंग से नहीं दिख सकता है। फ़ॉन्ट स्टाइल को CSS में परिभाषित करना सबसे अच्छा है, जिसे हम बाद के ब्लॉग पोस्ट में कवर करेंगे।

द्वारा पोस्ट रोबिन नोर्गन