HTML के साथ एक साधारण वेब पेज कैसे बनाएं: 9 चरणों (चित्रों के साथ)

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

कदम

6 का भाग 1:

अपने HTML में एक सिर जोड़ना

1. एक पाठ संपादक खोलें. विंडोज ऑपरेटिंग सिस्टम को चलाने वाले कंप्यूटर पर, आप आमतौर पर नोटपैड, या नोटपैड ++ का उपयोग करेंगे, जबकि मैकोज़ उपयोगकर्ता टेक्स्ट एडिट और क्रोमोस उपयोगकर्ता का उपयोग करेंगे टेक्स्ट का उपयोग करेंगे:

खिड़कियाँ - खुला हुआ शुरू

, में टाइप करें नोटपैड, या नोटपैड++ और क्लिक करें नोटपैड या "नोटपैड ++ या सब्लिम" खिड़की के शीर्ष पर.

मैक ओ एस - क्लिक सुर्खियों

, में टाइप करें पाठ संपादित, और डबल-क्लिक करें पाठ संपादित परिणामों के शीर्ष पर.

क्रोम ओएस - लॉन्चर खोलें, फिर टेक्स्ट पर क्लिक करें. (आइकन कोड पैड कहता है).

2. में टाइप करें और प्रेस ↵ दर्ज करें. यह वेब ब्राउज़र को बताता है कि यह एक HTML दस्तावेज़ है.

3. टाइप करें और दबाएं ↵ दर्ज करें. आपके HTML कोड के लिए यह ओपनिंग टैग.

4. टाइप करें और दबाएं ↵ दर्ज करें. यह वह टैग है जो आपके HTML सिर को खोलता है. एचटीएमएल हेड जानकारी जो आमतौर पर आपके वेब पेज पर प्रदर्शित नहीं होती है. इस जानकारी में शीर्षक, मेटा डेटा, सीएसएस स्टाइल शीट्स, और अन्य स्क्रिप्टिंग भाषाएं शामिल हो सकती हैं.

5. में टाइप करें . यह आपके पृष्ठ पर शीर्षक जोड़ने के लिए टैग है.

6. अपने वेब पेज के लिए एक शीर्षक टाइप करें. यह कोई शीर्षक हो सकता है जिसे आप अपने वेब पेज का नाम देना चाहते हैं.

7. टाइप करें और दबाएं ↵ दर्ज करें. यह आपके शीर्षक टैग को बंद करने के लिए टैग है.

8. टाइप करें और दबाएं ↵ दर्ज करें. यह आपके सिर को बंद करने के लिए टैग है. आपका HTML कोड इस तरह कुछ दिखना चाहिए.

<एचटीएमएल><सिर><शीर्षक>मेरा वेब पेजटिटल>सिर>

6 का भाग 2:

अपने HTML को एक शरीर और पाठ जोड़ना

1. नीचे के नीचे टाइप करें "सिर" टैग. यह टैग आपके HTML दस्तावेज़ के शरीर को खोलता है. वेब पेज पर HTML बॉडी डिस्प्ले में जाता है.

2. में टाइप करें . यह आपके HTML दस्तावेज़ में शीर्षक जोड़ने के लिए टैग है. एक शीर्षक बड़ा बोल्ड टेक्स्ट है जो आमतौर पर आपके HTML दस्तावेज़ के शीर्ष पर जाता है.

3. अपने पृष्ठ के लिए एक शीर्षक टाइप करें. यह आपके पृष्ठ या ग्रीटिंग का शीर्षक हो सकता है.

4. अपने शीर्षक पाठ के बाद टाइप करें और दबाएं ↵ दर्ज करें. यह टैग आपके शीर्षक को बंद कर देता है.

जैसे ही आप जाते हैं अतिरिक्त शीर्षक जोड़ें. टैग के माध्यम से आप छह अलग-अलग शीर्षलेख बना सकते हैं. ये विभिन्न आकारों के शीर्षक बनाते हैं. उदाहरण के लिए, उत्तराधिकार में तीन अलग-अलग आकार के शीर्षलेख बनाने के लिए, आप निम्न लिख सकते हैं:

<एच 1>मेरे पेज में आपका स्वागत है!एच 1><एच 2>मेरा नाम बॉब है.एच 2>

शीर्षक पाठ की प्राथमिकता या महत्व दिखाता है. लेकिन यदि आप किसी भी निचले शीर्षक का उपयोग करना चाहते हैं तो उच्चतम शीर्षक का उपयोग करना आवश्यक नहीं है. कोई भी सीधे एच 3 का उपयोग कर सकता है, भले ही आपकी पोस्ट में कोई एच 1 न हो.

5. प्रकार . यह एक पैराग्राफ खोलने के लिए टैग है. अनुच्छेद पाठ का उपयोग सामान्य आकार के पाठ को प्रदर्शित करने के लिए किया जाता है.

6. कुछ पाठ टाइप करें. यह आपके वेब पेज या किसी भी अन्य जानकारी के लिए एक विवरण हो सकता है जिसे आप साझा करना चाहते हैं.

7. अपने पाठ के बाद टाइप करें और दबाएं ↵ दर्ज करें. यह आपके पैराग्राफ टेक्स्ट को बंद करने के लिए टैग. निम्नलिखित HTML में अनुच्छेद पाठ का एक उदाहरण है:

<पी>यह मेरा पैराग्राफ है.पी>

आप एक शीर्षक के तहत पैराग्राफ की एक श्रृंखला बनाने के लिए एक पंक्ति में कई अनुच्छेद लाइन जोड़ सकते हैं.

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

आप HTML का उपयोग करके बोल्ड, इटालिक्स और अन्य टेक्स्ट प्रारूप जोड़ सकते हैं.निम्नलिखित उदाहरण हैं कि आप HTML टैग का उपयोग करके टेक्स्ट को कैसे प्रारूपित कर सकते हैं:

<ख>बोल्ड टेक्स्ट><मैं>इटैलिक टेक्सी><यू>रेखांकित textu><विषय>सबस्क्रिप्ट Textsub><सुड़कना>सुपरस्क्रिप्ट textsup>

यदि आप जोर देने के लिए बोल्ड और इटैलिक टेक्स्ट का उपयोग करते हैं, न केवल स्टाइल के लिए, और इसके बजाय तत्वों का उपयोग करें और . यह आपके वेब पेज को कुछ ब्राउज़रों में प्रदान किए गए स्क्रीन रीडर या रीडर मोड जैसी तकनीकों का उपयोग करते समय समझना आसान बनाता है.

6 का भाग 3:

अपने HTML में अतिरिक्त तत्व जोड़ना

1. अपने पृष्ठ पर एक चित्र जोड़ें. आप निम्न चरणों का उपयोग करके अपने HTML पर एक छवि जोड़ सकते हैं:

प्रकार अपनी छवि टैग खोलने के लिए.
छवि यूआरएल के बाद कॉपी और पेस्ट करें "=" उद्धरण चिह्नों में साइन इन करें.
प्रकार > छवि यूआरएल के बाद अपने छवि टैग को बंद करने के लिए. उदाहरण के लिए, यदि छवि का URL है "http: // मेरी तस्वीर.कॉम / झील", आप निम्नलिखित लिखेंगे:

2. दूसरे पृष्ठ से लिंक करें. आप निम्न चरणों का उपयोग करके अपने HTML के लिए एक लिंक जोड़ सकते हैं:

प्रकार अपना लिंक टैग खोलने के लिए.

के बाद यूआरएल कॉपी और पेस्ट करें "=" उद्धरण चिह्नों में साइन इन करें.

प्रकार > URL के बाद HTML के लिंक भाग को बंद करने के लिए.

समापन ब्रैकेट के बाद लिंक के लिए एक नाम टाइप करें.

HTML लिंक को बंद करने के लिए लिंक नाम के बाद टाइप करें. निम्नलिखित फेसबुक के लिंक का एक उदाहरण है.

<एक href ="https: // फेसबुक.कॉम">फेसबुक>.

3. अपने HTML पर एक लाइन ब्रेक जोड़ें. आप टाइप करके एक लाइन ब्रेक जोड़ सकते हैं अपने HTML के लिए. यह एक क्षैतिज रेखा बनाता है जिसका उपयोग आपके पृष्ठ के विभिन्न खंडों को विभाजित करने के लिए किया जा सकता है.

6 का भाग 4:

अनुकूलन रंग

1. आधिकारिक HTML रंग नाम और कोड की सूची देखें. वर्ल्ड वाइड वेब कंसोर्टियम (डब्ल्यू 3 सी) रंगों की एक आधिकारिक सूची का प्रबंधन करता है जिन्हें आप पाएंगे https: // W3.ORG / WIKI / CSS / गुण / रंग / कीवर्ड. प्रत्येक रंग में एक आधिकारिक नाम, 6-अंकीय हेक्साडेसिमल कोड, और एक दशमलव मान होता है. आप अपने वेबपृष्ठ के तत्वों में रंग जोड़ने के लिए इनमें से किसी भी मान का उपयोग कर सकते हैं. इस उदाहरण के लिए, हम आधिकारिक रंग नामों का उपयोग करेंगे.

2. टैग में पृष्ठभूमि रंग सेट करें. आप इसे जोड़कर ऐसा कर रहे होंगे अंदाज टैग के लिए विशेषता. मान लें कि आप पूरे पृष्ठ का पृष्ठभूमि रंग बनाना चाहते हैं लैवेंडर:

3. किसी भी टैग के लिए पाठ रंग सेट करें. आप इसका भी उपयोग कर सकते हैं अंदाज यह निर्दिष्ट करने के लिए विशेषता कि आप किस रंग को किसी विशेष टैग के भीतर सभी पाठ चाहते हैं. उदाहरण के लिए, मान लीजिए कि आप अपने टैग में टेक्स्ट बनाना चाहते हैं आधी रात जैसा नीला:

रंग परिवर्तन केवल उस टैग के भीतर पाठ को प्रभावित करेगा. यदि आप बाद में एक और टैग शुरू करते हैं जो भी होना चाहिए आधी रात जैसा नीला, आपको वहां भी स्टाइल विशेषता सेट करने की आवश्यकता होगी.

4. एक शीर्षलेख या अनुच्छेद के लिए पृष्ठभूमि रंग सेट करें. आप बॉडी टैग के लिए पृष्ठभूमि रंग कैसे सेट करते हैं, आप अन्य टैग के लिए पृष्ठभूमि रंग भी सेट कर सकते हैं. मान लें कि आप पृष्ठभूमि रंग बनाना चाहते थे हल्का भूरा रंग, और एक H1-शैली शीर्षलेख का पृष्ठभूमि रंग लाइटस्कीब्लू, आप इसका उपयोग करेंगे:

6 का भाग 5:

अपने HTML दस्तावेज़ को बंद करना

1. अपने शरीर को बंद करने के लिए टाइप करें. अपने HTML दस्तावेज़ के शरीर में अपने सभी टेक्स्ट, छवियों और अन्य तत्वों को जोड़ने के बाद, अपने HTML दस्तावेज़ के शरीर को बंद करने के लिए अपने HTML दस्तावेज़ के नीचे इस टैग को जोड़ें.

2. अपने HTML दस्तावेज़ को बंद करने के लिए टाइप करें. यह टैग आपके HTML दस्तावेज़ के अंत में आपके HTML बॉडी को बंद करने के लिए टैग के नीचे चला जाता है. यह वेब ब्राउज़र को बताता है कि इस टैग के बाद कोई और HTML कोड नहीं है. आपके पूरे HTML दस्तावेज़ को इस तरह कुछ देखना चाहिए:

<एचटीएमएल><सिर><शीर्षक>विकीहो फैन पैगेटिटल>सिर><तन><एच 1>मेरे पेज में आपका स्वागत है!एच 1><पी>यह विकीहो के लिए एक प्रशंसक पृष्ठ है. इसे अपना घर समझें!पी><एच 2>महत्वपूर्ण डेटा><पी><मैं>15 जनवरी, 2019i> - विकीहो का जन्मदिन><एच 2>LINKSH2><पी>यहां विकीहो का एक लिंक है: <एक href ="http: // विकीहो.कॉम">विकिहोवा>पी>तन>एचटीएमएल>

6 का भाग 6:

अपना वेब पेज सहेजना और खोलना

1. अपने दस्तावेज़ को सादे पाठ में बदलें (केवल मैक उपयोगकर्ता). दबाएं प्रारूप स्क्रीन के शीर्ष पर मेनू आइटम, फिर क्लिक करें सादा पाठ बनाओ परिणामी ड्रॉप-डाउन मेनू में.

यह कदम न तो आवश्यक है और न ही विंडोज़ पर संभव है.

2. क्लिक फ़ाइल. यह स्क्रीन के शीर्ष पर मेनू बार में है.

3. क्लिक के रूप रक्षित करें. यह नीचे ड्रॉप-डाउन मेनू में है "फ़ाइल".

वैकल्पिक रूप से, आप दबा सकते हैं सीटीआरएल+रों (विंडोज़) या ⌘ कमांड+रों (मैक) ऐसा करने के लिए.

4. अपने HTML दस्तावेज़ के लिए एक नाम दर्ज करें. जो भी आप अपने दस्तावेज़ को नामित करना चाहते हैं टाइप करें "फ़ाइल का नाम" (विंडोज़) या "नाम" (मैक) टेक्स्ट बॉक्स.

5. दस्तावेज़ की फ़ाइल प्रकार बदलें. आपको दस्तावेज़ को किसी टेक्स्ट फ़ाइल से HTML फ़ाइल में बदलना होगा. फ़ाइल प्रकार बदलने के लिए निम्न चरणों का उपयोग करें:

खिड़कियाँ - दबाएं "टाइप के रुप में सहेजें" ड्रॉप-डाउन बॉक्स, क्लिक करें सारे दस्तावेज, और फिर टाइप करें .एचटीएमएल फ़ाइल के नाम के अंत में.

मैक ओ एस - बदलो .टेक्स्ट के साथ फ़ाइल के नाम के अंत में .एचटीएमएल बजाय.

क्रोम ओएस - दबाएं "के रूप रक्षित करें" बटन. के साथ फ़ाइल का नाम दें .एचटीएमएल अंत में. शुरुआत आप पर निर्भर है.

6. क्लिक सहेजें. यह खिड़की के नीचे है. ऐसा करने से एक HTML फ़ाइल बनाई जाएगी.

एचटीएमएल फाइलें आमतौर पर आपके डिफ़ॉल्ट वेब ब्राउज़र के साथ खुलती हैं.

7. अपना टेक्स्ट एडिटर बंद करें. इस बिंदु पर, आप अपने ब्राउज़र में अपनी HTML फ़ाइल खोलने के लिए तैयार हैं ताकि आप अपना वेब पेज देख सकें.

8. अपने ब्राउज़र के साथ HTML दस्तावेज़ खोलें. ज्यादातर मामलों में, आप ऐसा करने के लिए HTML दस्तावेज़ को डबल-क्लिक करने में सक्षम होंगे. यदि किसी त्रुटि में दस्तावेज़ परिणामों को डबल-क्लिक करने पर, निम्न कार्य करें:

खिड़कियाँ - दस्तावेज़ पर राइट-क्लिक करें, चुनें के साथ खोलें, और अपने पसंदीदा ब्राउज़र पर क्लिक करें.

Mac - एक बार दस्तावेज़ पर क्लिक करें, क्लिक करें फ़ाइल, चुनते हैं के साथ खोलें, और अपने पसंदीदा ब्राउज़र पर क्लिक करें.

9. यदि आवश्यक हो तो HTML दस्तावेज़ को संपादित करें. आप अपने HTML पृष्ठ में एक त्रुटि देख सकते हैं. इसे बदलने के लिए, आप HTML दस्तावेज़ के टेक्स्ट को संपादित कर सकते हैं:

विंडोज़ पर, आप दस्तावेज़ पर राइट-क्लिक कर सकते हैं और क्लिक करें संपादित करें परिणामी ड्रॉप-डाउन मेनू में (यदि आपके पास नोटपैड ++ स्थापित है, तो यह कहेंगे नोटपैड के साथ संपादित करें++ बजाय).

मैक पर, आप इसे चुनने के लिए दस्तावेज़ पर क्लिक करना चाहेंगे, क्लिक करें फ़ाइल, चुनते हैं के साथ खोलें, और क्लिक करें पाठ संपादित. आप दस्तावेज़ को टेक्स्ट एडिट में भी खींच सकते हैं.

Chromebook पर, टेक्स्ट ऐप बंद करें, फ़ाइलें खोलें, अपनी फ़ाइल ढूंढें, और उसके बाद उस पर क्लिक करें.

नमूना HTML

एचटीएमएल धोखा शीट

HTML के साथ नमूना वेबपृष्ठ

वीडियो.

इस सेवा का उपयोग करके, कुछ जानकारी YouTube के साथ साझा की जा सकती है.

टिप्स

टैग हमेशा अपने खुले समकक्षों की दर्पण छवि में बंद होना चाहिए. उदाहरण के लिए, के रूप में बंद किया जाना चाहिए .

आप टैग का उपयोग करके अपनी वेबसाइट पर साइड-स्क्रॉलिंग टेक्स्ट जोड़ सकते हैं, लेकिन ध्यान रखें कि इस टैग को कुछ ब्राउज़रों द्वारा मान्यता नहीं दी जा सकती है.

बुहत सारे लोग नोटपैड का उपयोग करें++ लिखने और उनके कोड को संकलित करने के लिए.

यदि आप अपने पृष्ठ में एक छवि को केंद्रित करना चाहते हैं, तो आप छवि के नाम के बाद टाइप कर सकते हैं आईएमजी टैग (उदाहरण के लिए).

चेतावनी

यदि आप अपने वेब पेज पर छवियों को अपलोड करने की योजना बनाते हैं तो imgur या इसी तरह की अपनी छवियों को होस्ट करना सबसे अच्छा है. अन्य लोगों की तस्वीरों को पोस्ट करना कॉपीराइट उल्लंघन में हो सकता है.

सामाजिक नेटवर्क पर साझा करें: