वेब पृष्ठ कसे बनवायचे. अतिरिक्त टॅग जोडत आहे. डावा मेनू आणि सामग्री

सज्जनो, प्रत्येकासाठी चांगला मूड) आज मी या विषयावर एक लेख लिहिण्याचा निर्णय घेतला - आपले स्वतःचे वेब पृष्ठ कसे तयार करावे. मला या विषयावर वाचक आणि मित्रांकडून प्रेरणा मिळाली आहे जे अद्याप काही कारणास्तव इंटरनेटवरील साइट्स आणि पृष्ठांच्या प्रकारांमध्ये फरक करत नाहीत. मी फार क्वचितच कोणत्याही गोष्टीला वेब पृष्ठ म्हणतो))) तथापि, माझे बरेच मित्र असे म्हणतात. विशेषत: त्यांच्यासाठी, मी मुख्य प्रकारच्या वेब पृष्ठांचे वर्णन करण्याचा निर्णय घेतला आहे जे आपण ऑनलाइन स्वतःचे प्रतिनिधित्व करण्यासाठी स्वतःसाठी तयार करू शकता.

वेब पृष्ठ तयार करण्यापूर्वी, आपण निश्चितपणे ईमेल किंवा ईमेल पत्ता तयार करणे आवश्यक आहे. मी या लेखात निर्मिती पर्यायांचे वर्णन केले आहे - . आणि जर तुमच्याकडे ईमेल ॲड्रेस असेल, तर तुमचे वैयक्तिक वेब पेज तयार करण्याच्या पर्यायांवर जाऊ या. आपले स्वतःचे वेब पृष्ठ तयार करण्यात मदत करण्याच्या मार्गांसाठी वाचा.

एक पृष्ठ साइट

सर्वात प्राचीन पद्धत))) त्यासाठी तुम्हाला HTML भाषेच्या मूलभूत गोष्टी शिकण्याची आवश्यकता आहे. आमच्या काळात हे करणे अजिबात आवश्यक नाही; तेथे एक दशलक्ष सेवा आहेत, ज्यांची खाली चर्चा केली जाईल. तथापि, जर तुम्हाला वेबसाइट आणि काही प्रमाणात इंटरनेट कसे कार्य करते हे समजून घ्यायचे असेल, तर स्वतः एक पृष्ठ वेबसाइट तयार करण्याचा प्रयत्न करा. मी लेखात हे कसे करायचे ते वर्णन केले -. वेबसाइट बिल्डर्स आणि विनामूल्य प्लॅटफॉर्म वापरून एक-पृष्ठ वेबसाइट तयार करण्याचे पर्याय आहेत.

सामाजिक नेटवर्क VKontakte वर पृष्ठ

मला असे वाटते की आमच्या काळात हा वाक्यांश: "मी इंटरनेटवर स्वतःसाठी एक पृष्ठ तयार केले आहे" बहुतेक सर्व सोशल नेटवर्क Vkontakte वर लागू होते. व्हीके हे सीआयएसमधील सर्वात लोकप्रिय सोशल नेटवर्क आहे. तुमचे पृष्ठ येथे तयार करण्यासाठी फक्त 1 मिनिट लागतो. शिवाय, ऑनलाइन क्रियाकलापांसाठी डझनभर उपयुक्त कार्ये तुमच्यासाठी उघडली जातात.
मी Vkontakte बद्दल बरेच काही लिहिले आहे आणि आणखी लिहिण्याची योजना आहे)) या सोशल नेटवर्कसह आपण हे करू शकता...

VKontakte तुम्हाला http://vk.com/id8032931 ची नोंदणी करताना मानक URL ऐवजी तुमच्या वेब पेजवर सोयीस्कर URL तयार करण्याची परवानगी देते. मग तुम्ही ते एका सुंदरमध्ये बदलू शकता - http://vk.com/vasheimya.vashafamiliya.

फेसबुक पेज

जर व्हीकॉन्टाक्टे हे CIS मधील सर्वात लोकप्रिय सोशल नेटवर्क असेल, तर फेसबुक संपूर्ण जगात प्रथम क्रमांकाचे सोशल नेटवर्क आहे. फेसबुक हे प्रगत रशियन भाषिक वापरकर्त्यांसाठी मानले जाते))) परंतु वैयक्तिकरित्या, मला वाटते की हे सर्व आहे कारण फेसबुक खूप लोकप्रिय आणि सोयीस्कर आहे.

Vkontakte प्रमाणेच, आपण आपल्या वेब पृष्ठासाठी एक सुंदर पत्ता नियुक्त करू शकता. मी लेखात Facebook वर वेब पृष्ठ कसे तयार करावे यावरील संपूर्ण मॅन्युअलचे वर्णन केले आहे -.

ब्लॉग

तुमचे स्वतःचे वेब पृष्ठ तयार करण्यासाठी ब्लॉग हा माझा सर्वात शिफारस केलेला पर्याय आहे. ब्लॉग स्वयं-साक्षात्कारासाठी हजारो संधी प्रदान करतो आणि वापरण्यास अतिशय सोपे आहे. अनेकदा सोशल मीडिया वेब पृष्ठांप्रमाणे विनामूल्य.
मी ब्लॉग वापरून वेब पृष्ठ तयार करण्यासाठी लेखांची निवड ऑफर करतो:

• - जलद, परंतु होस्टिंग आणि स्वतंत्र डोमेनच्या खर्चासह.
• Google चे ब्लॉगिंग प्लॅटफॉर्म आहे. अनेक Google सेवांसह एकत्रित. तुम्ही Google चे चाहते असल्यास खूप सोयीस्कर))
• सर्वात गतिमानपणे विकसित होणारे ब्लॉगिंग प्लॅटफॉर्म आहे. मी एका अमेरिकन प्रकाशनातील आकडेवारी वाचली की फेसबुकपेक्षा 12-13 वर्षे वयाच्या यूएस मुलांमध्ये Tumblr अधिक लोकप्रिय आहे!!! मला वाटते की हे या व्यासपीठाच्या सोयीचे आणि विकासाचे सूचक आहे.
• — येथे वरीलसह जवळजवळ सर्व सुप्रसिद्ध ब्लॉगिंग प्लॅटफॉर्मसाठी मॅन्युअल आहेत.

डायरी

तुमचे वेब पृष्ठ तयार करण्यासाठी किंवा दुसऱ्या शब्दांत, वेब उपस्थितीसाठी येथे सर्व मुख्य पर्याय आहेत. अक्षरशः 1 मिनिट आणि आपण आधीच वर्ल्ड वाइड वेबच्या जागेत बुडलेले आहात. वेब ब्राउझिंगच्या शुभेच्छा!

आता आम्ही हे पृष्ठ बनवण्यासाठी वापरलेल्या टॅगबद्दल काही शब्द.

उदाहरणावरून html टॅगचे वर्णन

1. - हे टॅग प्रत्येक वेब पृष्ठावर उपस्थित असणे आवश्यक आहे. ते ब्राउझर आणि शोध इंजिनांना सांगतात की हे एक HTML पृष्ठ आहे.

कोणत्याही html पृष्ठाची खालील रचना असते:

... हेडिंग टॅग्ज ... ... पृष्ठाचा मुख्य भाग ...

2. - या टॅगमध्ये पृष्ठावरील सर्व दृश्यमान सामग्री आहे.

4. - या टॅग्जमध्ये पृष्ठाचे शीर्षक लिहिलेले आहे, जे ब्राउझरच्या अगदी शीर्षस्थानी प्रदर्शित केले जाते. तसे, जेव्हा आपण शोध इंजिनमध्ये काहीतरी शोधता तेव्हा प्रथम प्रदर्शित होणारी गोष्ट म्हणजे पृष्ठाचे नाव. टॅगला सहसा "शीर्षक" असे संक्षिप्त केले जाते. मी तुम्हाला लेख वाचण्याचा सल्ला देतो: टॅग कसा तयार करायचा

आता एचटीएमएल पेजच्या मुख्य भागामध्ये (आत आणि ) असलेल्या टॅगकडे जाऊ.

5. - हे टॅग त्यांच्या आत सर्व काही केंद्रस्थानी ठेवतात. या प्रकरणात, मध्यभागी स्क्रीनचे केंद्र असेल. तुम्ही भविष्यात हे टॅग वापरणे थांबवावे अशी शिफारस केली जाते.

6. शीर्षक टॅगच्या वर्गांपैकी एक आहे..., सहसा पृष्ठाचे शीर्षक संलग्न करते. उदाहरणार्थ, या पृष्ठावर "एचटीएमएल पृष्ठ तयार करण्याचे उदाहरण" शीर्षक टॅग आहे.

नोंद

या टॅग्जचे वेबसाइट रँकिंगमध्ये खूप वजन आहे, त्यामुळे त्यांचा काळजीपूर्वक आणि हुशारीने वापर करणे आवश्यक आहे.

एचटीएमएल कोड तयार करताना, तुम्हाला एका साध्या नियमाचे पालन करणे आवश्यक आहे: शीर्षक टॅग प्रथम आला पाहिजे आणि नंतर ते येऊ शकतात इ. मुख्य गोष्ट अशी आहे की प्रथम, नंतर, नंतर इत्यादी नसावेत. कठोर पदानुक्रम असणे आवश्यक आहे. मथळे इ. कदाचित खूप.

7.
हा एकच टॅग आहे ज्याला क्लोजिंग टॅगची आवश्यकता नाही. तो पुढच्या ओळीत जातो. माझ्या उदाहरणात, पुढच्या ओळीवर दोनदा जाण्यासाठी मी सलग दोन सिंगल टॅग लिहिले.

8. एकच टॅग आहे जो प्रतिमा प्रदर्शित करतो.

• src हे आवश्यक पॅरामीटर आहे, जे प्रतिमेचा पत्ता निर्दिष्ट करते (URL_IMAGE ऐवजी, तुमची प्रतिमा जिथे संग्रहित आहे तो पत्ता प्रविष्ट करणे आवश्यक आहे).
  नोंद:
  • जर प्रतिमा आपल्या html पृष्ठाप्रमाणेच फोल्डरमध्ये असेल तर प्रतिमेचे नाव लिहिणे पुरेसे आहे, अन्यथा आपल्याला एकतर परिपूर्ण किंवा संबंधित URL प्रविष्ट करणे आवश्यक आहे;
  • प्रतिमा विस्तार निर्दिष्ट करण्यास विसरू नका. उदाहरणार्थ, .jpg, .gif, .jpeg.
• alt किंवा शीर्षक - या पॅरामीटर्समध्ये तुम्ही तुमच्या प्रतिमेचे वर्णन लिहू शकता. जेव्हा तुम्ही तुमचा माउस इमेजवर फिरवाल, तेव्हा हे वर्णन दिसेल. हे पॅरामीटर्स वेबसाईटच्या जाहिरातीसाठी, विशेषतः इमेज सर्चमध्ये महत्त्वाचे आहेत. प्रतिमा लोड करण्यात अयशस्वी झाल्यास, हा मजकूर प्रदर्शित केला जाईल, जो देखील एक प्लस आहे.

9. - हे टॅग फॉन्ट, पार्श्वभूमी, आकार इत्यादी बदलण्यासाठी तयार केले आहेत. थोडक्यात, मजकूर स्वरूपनाशी संबंधित सर्व काही एका टॅगमध्ये कॉन्फिगर केले जाऊ शकते. या टॅगमध्ये काही विशेषता आहेत, ज्यांची मी वेगळ्या धड्यात चर्चा करेन.

टीप:- समान टॅग.

एक CSS फॉन्ट गुणधर्म देखील आहे जिथे तुम्ही हे सर्व पॅरामीटर्स सेट करू शकता.

10. - ठळक मध्ये हायलाइट करा. आणि दरम्यान सर्व काही ठळकपणे हायलाइट केले जाईल. उदाहरणार्थ, जर तुम्ही ते आशयाच्या अगदी सुरुवातीला लिहिले आणि अगदी शेवटी ते बंद केले, तर पृष्ठावरील सर्व मजकूर ठळकपणे हायलाइट केला जाईल. हा एक सामान्य टॅग आहे, ज्याचा एक ॲनालॉग आहे.

कीवर्डचा प्रभाव वाढवण्याच्या दृष्टीने शोध इंजिन या टॅगकडे लक्ष देतात. परंतु आपण सावधगिरी बाळगणे आवश्यक आहे, कारण प्रत्येक वेळी ठळक कीवर्ड हायलाइट करणे स्पॅम म्हणून समजले जाईल.

प्रत्येक नवशिक्या वेबमास्टरला HTML पृष्ठ कसे तयार करावे हे माहित असले पाहिजे आणि हे अगदी सहज आणि सोप्या पद्धतीने केले जाते. मी तुम्हाला आत्मविश्वासाने सांगू शकतो की हा लेख वाचल्यानंतर तुम्ही कोणत्याही अडचणीशिवाय html पृष्ठे तयार कराल.

तुम्ही कोणत्याही टेक्स्ट एडिटरमध्ये (अगदी नोटपॅड देखील) html कोड लिहू शकता, परंतु मी शिफारस करतो की तुम्ही प्रथम नोटपॅड++ सारखा अप्रतिम संपादक वापरा. हे अतिशय सोयीचे आणि वापरण्यास सोपे आहे. तुम्ही ते अधिकृत वेबसाइट https://notepad-plus-plus.org वरून डाउनलोड करू शकता.

या संपादकाचा मुख्य फायदा म्हणजे त्यात कोड हायलाइटिंग आहे. माझ्यावर विश्वास ठेवा, हे खूप सोयीचे आहे, कारण... टॅग कुठे उघडतो आणि कुठे बंद होतो हे तुम्ही लगेच पाहू शकता.

प्रोग्राम उघडा आणि तुम्हाला नाव असलेली नवीन फाइल कशी दिसली नवीन 1, स्वयंचलितपणे तयार केले गेले.

एचटीएमएल पृष्ठ तयार करण्याचे टप्पे

आता नवीन फाईलमधून आपण खालीलप्रमाणे html डॉक्युमेंट तयार करू.
1. फाइल मेनूवर जा आणि म्हणून सेव्ह करा निवडा किंवा हॉट की दाबा (Ctrl+Alt+S)

2. दिसणाऱ्या विंडोमध्ये, फाईल सेव्ह करण्याचे ठिकाण निवडा.

3. फाइल नाव फील्डमध्ये लिहा निर्देशांकआणि फाइल प्रकार निवडा हायपर टेक्स्ट मार्कअप भाषा फाइल (*html; *htm; *shtml; *shtm; *xhtml;*hta).

फाइल प्रकार निवडल्यानंतर, a

Notepad++ बंद करा आणि तुम्ही फाइल सेव्ह केलेल्या निर्दिष्ट फोल्डरवर जा. तिथे एक फाईल तयार झाली निर्देशांक html विस्तारासह आणि ब्राउझर चिन्ह जे डीफॉल्टनुसार स्थापित केले आहे. तुम्ही डबल क्लिक केल्यावर फाइल तुमच्या ब्राउझरमध्ये उघडते. माझा डीफॉल्ट ब्राउझर ऑपेरा आहे, म्हणून जतन केलेली फाइल यासारखी दिसते:

ब्राउझरमध्ये फाईल उघडल्यानंतर आपल्याला काहीही दिसत नाही कारण आपली फाईल रिकामी आहे, त्यात html कोडची एक ओळ नाही. फाइलमध्ये कोडच्या दोन ओळी लिहून परिस्थिती दुरुस्त करूया. हे करण्यासाठी, आमच्या फाईलसह फोल्डरवर जा, त्यावर उजवे-क्लिक करा आणि दिसत असलेल्या मेनूमधील आयटम निवडा. .

फाइल Notepad++ संपादकात उघडेल. आता फाईलमध्ये खालील कोड लिहू:

html फाईल    हॅलो वर्ल्ड

फाइल सेव्ह करण्याचा आणखी एक मार्ग आहे, तुम्हाला टूलबारवर असलेल्या फ्लॉपी डिस्क आयकॉनवर क्लिक करणे आवश्यक आहे.

साइट प्रत्यक्षात अनेक भाषांमधील कोड फाइल्सचा संग्रह आहे. आणि कोड कोणत्याही सामान्य टेक्स्ट एडिटरमध्ये लिहिला जाऊ शकतो, अगदी Notepad मध्ये. अर्थात, Notepad++ किंवा पूर्ण विकास कार्यक्रमांसारखे अधिक प्रगत सॉफ्टवेअर वापरणे चांगले. बरं, ठीक आहे, html आणि css वापरून नोटपॅडमध्ये वेबसाइट कशी बनवायची ते पाहू.

नोटपॅडमध्ये HTML मध्ये सुरवातीपासून वेबसाइट कशी तयार करावी - चरण-दर-चरण सूचना

आणि हा आमचा कीवर्ड आहे - HTML. या भाषेतूनच संकेतस्थळाची निर्मिती सुरू होते. त्याशिवाय वेब विकासाची कल्पना करणे अशक्य आहे. हे पाण्याशिवाय सूप शिजवण्याचा प्रयत्न करण्यासारखे आहे. जर तुम्ही html मध्ये पूर्ण शून्य असाल तर पेज बंद करण्याची घाई करू नका. या चरण-दर-चरण सूचनांमध्ये, आम्ही एकत्रितपणे एक साधी वेबसाइट तयार करू, आणि मी कोडचे तुकडे समजावून सांगण्याचा प्रयत्न करेन जे आम्ही नोटपॅडवर जोडू.

पायरी 1: फाइल तयार करा

नोटपॅडमध्ये एचटीएमएल वेबसाइट तयार करणे, तुम्हाला काही रिकाम्या फोल्डरमध्ये दोन मजकूर दस्तऐवज तयार करून प्रारंभ करणे आवश्यक आहे. एकाला .html आणि दुसऱ्याला .css विस्तार मिळावा. नावे काहीही असू शकतात. कृपया लक्षात ठेवा, site.html.txt नव्हे तर site.html.

हे करण्यासाठी, दस्तऐवज मॅन्युअली सेव्ह करताना, डॉट वापरून त्यात विस्तार जोडा. आम्ही दुसऱ्या फाईलसह समान हाताळणी करतो, परंतु आम्ही त्यास .css विस्तार देतो. अरे हो, UTF-8 एन्कोडिंग निवडण्यास विसरू नका.

पायरी 2. रचना घालणे

फाइल्स तयार केल्या गेल्या आहेत आणि तुम्ही काम सुरू करू शकता. html डॉक्युमेंट उघडा. या ठिकाणी मुख्य काम होणार आहे. या भाषेचा बिल्डिंग ब्लॉक टॅग आहे—कोन कंसातील विशेष शब्द जे ब्राउझरला वेब पृष्ठावर काय प्रदर्शित करायचे ते सांगतात.

चला आमच्या दस्तऐवजात काहीतरी समाविष्ट करू, अन्यथा ते पूर्णपणे रिकामे आहे.

नमस्कार, जग!

हॅलो वर्ल्ड!

म्हणून, आम्ही एकाच वेळी टॅग्जचा समूह घातला आणि कदाचित तुम्हाला काहीही समजत नसेल. तुमच्या ब्राउझरमध्ये पेज उघडण्याचा प्रयत्न करा. सर्वकाही योग्यरित्या केले असल्यास तुम्हाला "हॅलो वर्ल्ड" असे शब्द दिसतील. हे खरे तर सर्वात सोपे वेब पेज आहे.
html इतर सर्व टॅगसाठी कंटेनर आहे. त्यामध्ये संपूर्ण वेब पृष्ठ आहे.

अगदी शीर्षस्थानी आम्ही दस्तऐवज प्रकार सूचित केला आहे. हेड टॅग पृष्ठाविषयी सेवा माहिती आहे. येथे आम्ही पृष्ठाचे नाव सेट करण्यासाठी एक टॅग वापरला आहे, जो शीर्षस्थानी ब्राउझर लाइनमध्ये प्रदर्शित होईल. पुढे, आम्ही एन्कोडिंग सेट केले आणि टॅग वापरून css फाइल समाविष्ट केली.

जसे आपण पाहू शकता, तेथे जोडलेले आणि एकल टॅग आहेत. आता मी यावर तपशीलवार विचार करणार नाही, ते संघ कोणते कार्य करते यावर अवलंबून आहे.

पायरी 3: नियोजन

तर, आमची पहिली सोपी वेबसाइट कशी बनवायची याचे नियोजन करूया. या प्रकरणात, सर्वकाही नियोजनाने सुरू करणे आवश्यक आहे. भविष्यातील टेम्पलेटचे संरचनात्मक भाग हायलाइट करणे आवश्यक आहे, त्यात काय असेल. समजा आमच्या साध्या टेम्प्लेटमध्ये हेडर, बॉडी पार्ट, साइड कॉलम आणि फूटर किंवा फूटर (समान गोष्ट) असेल.

पायरी 4. चला सुरुवात करूया!

याचा अर्थ आम्हाला 4 मुख्य ब्लॉक्सची आवश्यकता आहे. html मध्ये पेअर केलेल्या टॅगमध्ये अमर्यादित संख्येने इतर टॅग नेस्ट करणे शक्य आहे, म्हणून मी खालील पद्धत सुचवितो:
एक सामान्य कंटेनर तयार करा ज्यामध्ये आमचे सर्व 4 मुख्य ब्लॉक्स असतील.

चला तर कोड वर परत जाऊया. आम्ही ते बॉडी टॅगमध्ये लिहू, कारण ते भविष्यातील पृष्ठाचे प्रतिनिधित्व करते. "हॅलो, वर्ल्ड" शिलालेख काढण्यास मोकळ्या मनाने आणि हे लिहा:

हे आमचे शीर्षलेख आहे हे साइडबार आहे हे सामग्री तळटीप आहे

अशा प्रकारे, आम्ही एक मोठा ब्लॉक तयार केला ज्यामध्ये आम्ही उर्वरित 4 ठेवले. html मधील ब्लॉक जोडलेल्या div टॅगद्वारे तयार केला जातो, ज्यामध्ये आवश्यक गुणधर्म नसतात, परंतु नंतर डिझाइन करण्यासाठी मी लगेचच प्रत्येकामध्ये एक अद्वितीय आयडी जोडला. CSS द्वारे देखावा.

हा कोड तुमच्यासाठी कॉपी करा आणि तुमच्या ब्राउझरमध्ये पेज रिफ्रेश करा. सध्या तुम्हाला तुमच्या समोर मजकुराच्या फक्त 4 ओळी दिसत आहेत, पण ते ठीक आहे, आता आम्ही त्यांना वेबसाइटमध्ये बदलू!

पायरी 5. CSS आम्हाला मदत करेल

आता आमचे ब्लॉक्स डिझाईन करायला सुरुवात करूया. नक्कीच, आपल्याला सर्वात मोठ्या कंटेनरसह प्रारंभ करणे आवश्यक आहे. आम्ही अगदी सुरुवातीला एक css फाईल तयार केली, पण त्यावर काहीही लिहिले नाही. हे दुरुस्त करण्याची वेळ आली आहे. तेथे खालील कोड जोडूया:

*( बॉक्स-आकार: बॉर्डर-बॉक्स) #मुख्य (रुंदी: 810px; समास: 0 ऑटो; सीमा: 5px घन काळा)

पहिला नियम ब्लॉक्ससाठी वर्तन सेट करतो जेणेकरून पॅडिंग आणि बॉर्डर त्यांची रुंदी वाढवत नाहीत. पुढे कोडमध्ये आम्ही अभिज्ञापक मुख्य सह ब्लॉकचा संदर्भ देतो, हे करण्यासाठी, फक्त एक हॅश टाका आणि अभिज्ञापकाचे नाव जोडा. यानंतर लगेच, कुरळे ब्रेसेस उघडतात, जे घटकास लागू होतील अशा स्वरूपाचे नियम सूचीबद्ध करतात.

आम्ही एकूण कंटेनरची रुंदी 810 पिक्सेलवर सेट केली आहे, मार्जिन: 0 स्वयं नियम ब्लॉकला मध्यभागी सेट करतो, म्हणजेच आमची साइट मध्यभागी छान प्रदर्शित केली जाईल आणि डाव्या काठावर दाबली जाणार नाही. शेवटची सीमा गुणधर्म ब्लॉकच्या प्रत्येक बाजूला एक काळी घन सीमा जोडते.

बरं, आम्ही मुख्य कंटेनरसाठी शैली तयार केली आहे. वेब पृष्ठावर आम्ही अजूनही मजकूराच्या 4 ओळी प्रदर्शित करतो, परंतु एका काळ्या फ्रेममध्ये. चला पुढे जाऊया.

आता आमच्या पृष्ठाच्या चार मुख्य बिल्डिंग ब्लॉक्सचे स्वरूप सानुकूलित करण्याची वेळ आली आहे. मी त्वरित कोड प्रदान करेन आणि त्यावर खाली टिप्पणी देईन.

#हेडर (उंची: 100px; सीमा-तळाशी: 5px घन काळा) # साइडबार (रुंदी: 200px; उंची: 500px; फ्लोट: डावीकडे; सीमा-उजवीकडे: 5px घन काळा) # सामग्री (रुंदी: 600px; फ्लोट: उजवीकडे; उंची : 500px ) #footer (उंची: 75px; स्पष्ट: दोन्ही; बॉर्डर-टॉप: 5px घन काळा;)

तुम्ही कल्पना करू शकता, मी फक्त भिन्न आयडी असलेल्या घटकांचा संदर्भ देत आहे, त्यांचे वर्णन वरपासून खालपर्यंत करत आहे. प्रथम, हेडरसाठी शैली सेट केल्या आहेत - मी उंची 100 पिक्सेल आणि तळाशी एक सीमा सेट केली आहे जेणेकरून ते उर्वरित ब्लॉक्सपासून वेगळे केले जाईल.

पण नंतर गोष्टी अधिक मनोरंजक होतात. वस्तुस्थिती अशी आहे की डीफॉल्टनुसार ब्लॉक्स आपण फक्त html कोडमध्ये लिहिल्यास आणि कोणतेही अतिरिक्त नियम सेट न केल्यास वरपासून खालपर्यंत प्रदर्शित केले जातात. पण साइड कॉलम हा फक्त साइड कॉलम आहे, जो पेजच्या मुख्य भागाच्या बाजूला दाखवायचा आहे. हे कसे करायचे? पहा, आम्ही साइडबारची उंची, रुंदी, फ्रेम आणि आणखी एक गुणधर्म सेट करतो (फ्लोट: डावीकडे).

या नियमाचा अर्थ असा आहे की घटक पालकांच्या डाव्या काठावर ढकलला जाईल (म्हणजे, मूळ घटक - # मुख्य ब्लॉक). छान, आता आम्ही सामग्रीसह ब्लॉकमध्ये समान गुणधर्म सेट करू आणि ते डाव्या काठावर देखील दाबले जाईल, परंतु बाजूच्या स्तंभानंतर.

अर्थात, सामग्रीला अधिक रुंदी मिळते, कारण ती तशीच असली पाहिजे, परंतु आम्ही उंची समान सेट करतो. वास्तविक वेबसाइटवर, मुख्य ब्लॉकमध्ये सहसा बरीच माहिती असते, त्यामुळे तुम्हाला उंची अजिबात सेट करण्याची गरज नाही. जर साइडबारमध्ये माहिती सतत जोडली जात असेल तर तेच आहे. परंतु उदाहरणार्थ, आम्ही स्पष्टपणे उंची निर्दिष्ट केली जेणेकरून ब्लॉक्सचे आकार स्पष्टपणे दिसू शकतील.

शेवटी, शेवटच्या ब्लॉकचे वर्णन करणे बाकी आहे - तळटीप. त्याला एक लहान उंची, उंची असलेली एक फ्रेम आणि आमच्यासाठी आणखी एक नवीन मालमत्ता मिळते. दोन्ही मूल्यांसह ही स्पष्ट मालमत्ता आहे. ते का लिहायचे? आम्ही मागील दोन ब्लॉक डाव्या काठावर दाबले आहेत. ते तथाकथित फ्लोटिंग ब्लॉक्स बनले, परंतु डीफॉल्टनुसार सामान्य ब्लॉक्सना फ्लोटिंग ब्लॉक्स लक्षात येत नाहीत आणि त्यांच्यावर धावू शकतात.

हे होण्यापासून रोखण्यासाठी, आमच्या तळघराला खालील आदेश प्राप्त झाले: ते म्हणतात, पहा, हा एक सामान्य ब्लॉक आहे, तुमच्या वर दोन फ्लोटिंग आहेत. त्यांच्याकडे लक्ष द्या आणि स्वतःला त्यांच्यापेक्षा खाली ठेवा. ही अनिवार्यपणे स्पष्ट द्वारे दिलेली आज्ञा आहे: दोन्ही गुणधर्म, जे नियमित ब्लॉकला सर्व फ्लोटिंगच्या खाली ठेवण्यास भाग पाडतात.

छान, आता तुमच्या ब्राउझरमध्ये पेज रिफ्रेश करा. बरं, हे आधीच वेबसाइटसारखे आहे, कमीतकमी संरचनेत.

पायरी 6. साइट सजवा

पुढील, अतिशय मनोरंजक टप्पा - चला आमच्या साइटवर काही रंग जोडूया. त्याला एक घन पांढरी पार्श्वभूमी असू द्या, परंतु काहीतरी अधिक मनोरंजक असू द्या. तुम्ही पार्श्वभूमी दोन प्रकारे सेट करू शकता:

• एकाच वेळी संपूर्ण साइटसाठी सामान्य पार्श्वभूमी, सामान्य कंटेनर #main वर नियुक्त करणे
• जर प्रत्येक मुख्य ब्लॉकची स्वतःची रंगाची छटा असली पाहिजे, तर तुम्हाला प्रत्येकासाठी स्वतंत्रपणे रंग सेट करणे आवश्यक आहे. परंतु जास्त वाहून न जाणे चांगले आहे - लाल शीर्षलेख, हिरवा कंटेंट आणि पिवळा तळघर फार चांगले दिसणार नाही, मी तुम्हाला लगेच सांगेन.

मी प्रथम पद्धत वापरून ते करण्याचा सल्ला देतो. मला ऑनलाइन सेवेमध्ये एक छान हलका निळा सावली सापडली, जी मी साइटच्या पार्श्वभूमी म्हणून वापरण्याचा प्रस्ताव ठेवतो. सामान्य कंटेनर शैलींमध्ये खालील गुणधर्म जोडा:

#मुख्य (पार्श्वभूमी: #B3C1E6 )

आम्ही पृष्ठ अद्यतनित करतो आणि आमच्या साइटवर छान हलका निळा रंग योजना आहे याची खात्री करतो. आता मी डिझाईनची पातळी थोडी पुढे नेण्याचा प्रस्ताव देतो - हेडर आणि फूटरची पार्श्वभूमी इतर ब्लॉक्सपेक्षा गडद असू द्या. तुम्ही कोडच्या खालील ओळी जोडू शकता:

#हेडर, #फूटर (पार्श्वभूमी: #9091DA )

येथे आम्ही एक नवीन तंत्र वापरले - आम्ही स्वल्पविरामाने विभक्त केलेले दोन ब्लॉक लिहिले आणि नवीन पार्श्वभूमी त्या दोन्हीवर लागू केली जाईल.

पायरी 7. हेडरवर काम करणे

पुढील कार्यामध्ये वैयक्तिक ब्लॉकला अधिक आकर्षक स्थितीत सजवणे समाविष्ट असेल. चला शीर्षलेखाने सुरुवात करूया. आमच्या टोपीमध्ये सहसा काय असते? बरोबर आहे, साइटचे सुंदर नाव आणि लोगो. हे आम्ही जोडू.

मी लोगोसह प्रारंभ करण्याचा सल्ला देतो. आम्ही html वापरून साइट तयार करत असल्याने, आम्ही हेडरच्या डाव्या कोपर्यात या भाषेचा लोगो ठेवू. मला हा गोंडस लोगो इंटरनेटवर सापडला.

हे डाऊनलोड करून त्याच फोल्डरमध्ये ठेवावे लागेल जिथे html डॉक्युमेंट संग्रहित आहे.
आता पाहू:

#header(पार्श्वभूमी: #9091DA url(html.jpeg) नो-रिपीट 5% केंद्र )

मी चित्र html ला कॉल केला, आणि त्याचे स्वरूप jpeg आहे, म्हणून ही नोंद आहे. त्यानंतर आम्ही खालील आज्ञा देखील निर्दिष्ट केल्या आहेत: पार्श्वभूमी प्रतिमा पुनरावृत्ती करू नये, परंतु ब्लॉकच्या सुरुवातीपासून 5% क्षैतिज ऑफसेटसह आणि अनुलंब मध्यभागी ठेवली पाहिजे. क्षैतिज स्थिती नेहमी प्रथम रेकॉर्ड केली जाते, आणि नंतर अनुलंब.

साहजिकच, जर तुमचे चित्र वेगळे म्हटले असेल किंवा त्याचे स्वरूप वेगळे असेल, तर तुम्ही दिलेला कोड किंचित बदलला पाहिजे. छान, आमच्याकडे लोगो आहे. शिलालेख काढण्याची वेळ आली आहे - हे साइट शीर्षलेख आहे आणि त्याच्या जागी एक सुंदर शीर्षक ठेवा. हेडरमधून मजकूर काढून टाकू आणि तेथे एक नवीन घटक घालू:

साइटचे नाव

आता आपल्याला ते औपचारिक करणे आवश्यक आहे:

शीर्षक

आम्ही स्टाइलिंगची योग्य रक्कम सेट केली आहे: फॉन्ट आकार, फॉन्ट फॅमिली, डावीकडे हेडिंग, डावे पॅडिंग, रंग, टॉप पॅडिंग आणि टेक्स्ट शॅडो. आता प्रत्येक प्रॉपर्टी कशी कार्य करते हे स्पष्ट करण्यात काही अर्थ नाही, म्हणून फक्त कोड कॉपी करा आणि स्टाईल शीटमध्ये (सीएसएस फाइल) पेस्ट करा.

तेच आहे, साधी टोपी तयार आहे. अर्थात, वास्तविक वेबसाइटवर त्यात काही इतर दुवे, पत्ते इत्यादी असू शकतात. बरं, वास्तववादासाठी काहीतरी जोडूया. हा html कोड साइट शीर्षलेखाच्या सामग्रीमध्ये समाविष्ट करणे आवश्यक आहे.

• आमच्याबद्दल
• ब्लॉग
• अभिप्राय

ते त्यांच्या तीन लिंक्सची यादी तयार करते. खरं तर, त्यांनी कुठेतरी नेतृत्व केले पाहिजे, परंतु आमच्यासाठी ते फक्त रिक्त दुवे आहेत. आम्ही त्यात एक यादी आणि लिंक्स देखील तयार करू.

#about( float: right; list-style: none; margin-right: 50px ) #about a(रंग: पिवळा; )

पायरी 8. बाजूच्या स्तंभात मेनू बनवणे

सामान्यतः, साइड कॉलममध्ये साइट मेनू आणि इतर अनेक विजेट्स असतात. तिथे एक साधा मेनू बनवू. पुन्हा एकदा, हेडरमध्ये आम्ही आधीच लिंक्स दाखवलेली यादी आम्हाला यात मदत करेल, परंतु मुख्य मेनू कथितपणे मोठा असल्याने, आणखी दुवे असतील.

• मेनू आयटम 1
• मेनू आयटम 2
• मेनू आयटम 3
• मेनू आयटम 4
• मेनू आयटम 5
• मेनू आयटम 6

मेनू (सूची-शैली: काहीही नाही)

वास्तविक, मी येथे फक्त एक नियम लिहिला आहे - मी सूची आयटममधून मार्कर काढले आहेत, बाकी सर्व काही ठीक आहे. तुम्ही मेनूच्या आधी शीर्षक जोडू शकता आणि ते कसे तरी डिझाइन करू शकता. तुम्ही हे स्वतः करू शकता. मथळे जोडलेल्या टॅगमध्ये लिहिलेले असतात - जिथे पहिले सर्वात मोठे (लेखाचे शीर्षक) असते आणि शेवटचे सर्वात लहान असते, बहुतेकदा ते अजिबात वापरले जात नाही. बाजूच्या स्तंभातील मेनू शीर्षकासाठी, वापरणे इष्टतम आहे.

पायरी 9. सामग्री ब्लॉक डिझाइन करा

बरं, तिथे औपचारिकता कशाला? लेखासह ती खऱ्या वेबसाइटसारखी दिसण्यासाठी तुम्हाला काही मजकूर जोडणे आवश्यक आहे.

लेखाचे शीर्षक

आणि इथे काही लेख असेल...

लेखातील सामग्री परिच्छेद आणि उपशीर्षकांमध्ये विभागली आहे...

लेखाचे उपशीर्षक

सामग्री ब्लॉकमध्ये कोणतीही सामग्री समाविष्ट केली जाऊ शकते. त्यातील परिच्छेद मुख्य सामग्री बनवतात आणि h1-h2 टॅग हेडिंग आणि उपशीर्षक तयार करतात. h1 टॅग हा पृष्ठावरील एकमेव असावा.

या प्रकरणात डिझाइन मजकूराचा रंग निश्चित करणे आहे. उदाहरणार्थ, आपण तपकिरी घालू शकता. हेडिंग्स थोड्या वेगळ्या शेडमध्ये हायलाइट केले जाऊ शकतात. मी येथे कोणताही कोड देणार नाही, तुम्ही ते स्वतः शोधू शकता.

पायरी 10. तळघर सजवणे

खरे सांगायचे तर मला सध्या तळघरात काहीही ढकलण्याची इच्छा नाही. वास्तविक साइट्सवर, त्यात कॉपीराइट माहिती असते, काहीवेळा त्यात मेनू आणि इतर साइट्सचे दुवे असतात. मी तिथे फक्त कॉपीराइट हा शब्द लिहीन आणि तो याप्रमाणे मध्यभागी ठेवेन:

#footer( मजकूर-संरेखित: मध्यभागी )

पायरी 11. अरे नाही, आणखी पायऱ्या नाहीत

ते सर्व आहे, प्रत्यक्षात. सर्वात सोपा HTML टेम्पलेट तयार करण्याची प्रक्रिया पूर्ण मानली जाऊ शकते. आमच्याकडे लोगो, साइटचे नाव, मेनू, लेख, तळटीप आहे. सर्वसाधारणपणे, ही एक अतिशय प्राचीन साइट आहे, परंतु तरीही एक साइट आहे.

अर्थात, साइट अशा प्रकारे दिसते की आपण त्याकडे पुन्हा कधीही पाहू इच्छित नाही, परंतु हे सार बदलत नाही. चांगले दिसणे हे वेब डिझायनरचे काम आहे.

त्याचे पुढे काय करायचे?

या लेखाचा उद्देश फक्त html आणि css वापरून एक साधी वेबसाइट कशी तयार करावी हे दाखवणे हा होता. आपण त्याच्या डिझाइनवर कार्य करू शकता आणि परिणाम काहीतरी आकर्षक असू शकते. परंतु आपल्याला अद्याप लक्षात ठेवणे आवश्यक आहे की ही एक स्थिर साइट आहे. आपण त्यात नवीन पृष्ठे जोडल्यास, नवीन html दस्तऐवज तयार करून हे व्यक्तिचलितपणे केले जाते.

वेबसाइट व्यवस्थापित करण्याची ही पद्धत भूतकाळातील गोष्ट आहे, जरी तिचे फायदे आहेत. वेबसाइट ऑनलाइन ठेवण्यासाठी, तुम्हाला सर्व html फाइल्स, स्टाईल शीट आणि आवश्यक प्रतिमा काही होस्टिंगवर, सशुल्क किंवा विनामूल्य अपलोड करणे आवश्यक आहे. आपल्याला साइटचे नाव नोंदणी करणे देखील आवश्यक आहे जेणेकरून त्यास काहीतरी म्हटले जाईल. थर्ड-लेव्हल डोमेन अनेक कंपन्यांकडून मोफत मिळू शकते, परंतु तुम्हाला दुसऱ्या-स्तरीय डोमेनसाठी (.ru, .com, .ua, इ.) पैसे द्यावे लागतील.

या लेखादरम्यान आम्ही तुमच्यासोबत जे केले त्याला वेबसाइट लेआउट म्हणतात. तुम्हाला सोयीस्कर व्हिज्युअल एडिटर वापरून तुमची वेबसाइट व्यवस्थापित करायची असल्यास, आधीपासून तयार केलेला लेआउट कोणत्याही लोकप्रिय इंजिनसह समाकलित करणे आवश्यक आहे. वर्डप्रेस सह सर्वोत्तम.

हा एक वेगळा विषय आहे - एकीकरण अनेक प्रकारे मांडणीपेक्षा अधिक क्लिष्ट आहे. इंजिनसाठी वेबसाइट्स कशी तयार करायची हे शिकण्यासाठी, तुम्हाला एक चांगला प्रशिक्षण कोर्स घेणे आवश्यक आहे. इंटरनेटवरील मोफत माहिती तुमच्यासाठी पुरेशी नसेल. मी Wordpress वर साइट तयार करण्याच्या प्रक्रियेचे वर्णन केले आहे, परंतु तेथे आपल्याला इंजिनसह html टेम्पलेट कसे समाकलित करावे याबद्दल माहिती मिळणार नाही.

लेखाने तथाकथित ब्लॉक लेआउट पद्धत सादर केली आहे, म्हणजेच आम्ही सर्व सामग्री ब्लॉकमध्ये ठेवली आहे. आज ही सर्वात लोकप्रिय पद्धत आहे. सर्वसाधारणपणे, प्रक्रियेत HTML5 टॅग वापरण्याचा सल्ला दिला जातो आणि केवळ ब्लॉक्सच नव्हे तर साधेपणासाठी, या लेखात सर्वात सोपा पर्याय वापरला गेला होता.

मला आशा आहे की नोटपॅड किंवा इतर कोणत्याही टेक्स्ट एडिटरमध्ये एचटीएमएल वेबसाइट कशी बनवायची याबद्दल तुम्हाला किमान कल्पना असेल.

वेबसाइट तयार करणे चुकीचे आहे व्वा अवघड आहेअसे दिसते तसे तसे नाही. एक साधे पृष्ठ कसे कोड करायचे ते शिकाHTML भाषा वापरणेआणि वेबसाठी मार्कअप.

साधी वेबसाइट डिझाइन करणे आणि तयार करणे खूप सोपे आहे. अगदी नवशिक्याही जास्त मेहनत आणि वेळ न लावता वेब डिझाइन शिकू शकतात.

HTML ही वेब पृष्ठांसाठी प्राथमिक मार्कअप भाषा आहे. चला मूलभूत गोष्टी जाणून घेऊ आणि एक साधे पृष्ठ तयार करण्याचा प्रयत्न करूया.

HTML चा परिचय

HTML ही हायपरटेक्स्ट मार्कअप भाषा आहे.

हायपरटेक्स्ट हा मजकूर आहे जो लिंक म्हणून कार्य करतो.

HTML वेब पृष्ठाची रचना परिभाषित करते आणि ते ब्राउझरमध्ये योग्यरित्या प्रदर्शित होते याची खात्री करते. HTML दस्तऐवज हाताच्या उद्देशावर अवलंबून, खूप सोपे किंवा जटिल असू शकते.

वेब ब्राउझर वेब सर्व्हरवरून HTML दस्तऐवज प्राप्त करतात आणि त्यांना वेब पृष्ठे म्हणून प्रदर्शित करतात. प्रत्येक ब्राउझर HTML समजतो आणि कोडमध्ये लिहिलेल्याप्रमाणे प्रतिमा, मजकूर, व्हिडिओ पुनरुत्पादित करतो.

HTML ही वेबसाठी प्राथमिक मार्कअप भाषा आहे. तथापि, याचा वापर परस्परसंवाद किंवा ॲनिमेशनशिवाय स्थिर वेब पृष्ठे तयार करण्यासाठी केला जातो. एचटीएमएल 5, HTML ची नवीनतम आवृत्ती, या संदर्भात थोडी चांगली आहे, विशेषत: जेव्हा व्हिडिओ किंवा ऑडिओचा विचार केला जातो.

HTML आज HTML5 आहे, ही नवीनतम आवृत्ती आहे जी मागील आवृत्तीपेक्षा अधिक वैशिष्ट्ये जोडते आणि आता ब्राउझर स्क्रीनवर व्हिडिओ, प्रतिमा आणि मजकूर कसा प्रदर्शित केला जातो हे निर्धारित करू शकते.

HTML5 वेब पृष्ठे विकसित करण्यासाठी एक शक्तिशाली साधन आहे. HTML5 सह, फ्लॅश सारख्या तृतीय-पक्ष प्लगइनचा वापर न करता मीडिया स्ट्रीमिंग शक्य आहे. HTML5 क्लायंट-साइड डेटा स्टोरेजला देखील समर्थन देते. क्लायंट ऑफलाइन असताना वेब अनुप्रयोगांना समर्थन देण्यासाठी याचा वापर केला जाऊ शकतो.

वेब आणि HTML

नेटवर्कमध्ये परस्पर जोडलेली वेब पृष्ठे आणि अनुप्रयोग, तसेच प्रतिमा, व्हिडिओ, ॲनिमेशन आणि परस्परसंवादी सामग्री यांचा समावेश होतो. मार्कअप भाषा वेबचा आधार बनतात. या भाषा ज्या दिवसांपासून वेबसाइट्स अगदी सोप्या होत्या त्या दिवसांपासून वापरल्या जात आहेत आणि त्या वेबचा एक भाग, तिचा विकास आणि भविष्यात यापुढेही राहतील.

सर्व वेब डेव्हलपर आणि डिझायनर्ससाठी HTML हे मूलभूत कौशल्य आहे.

W3Techs च्या सर्वेक्षणानुसार, HTML ही सर्व वेबसाइट्सपैकी 74.3% वर वापरली जाणारी भाषा आहे.

एक साधे HTML पृष्ठ कसे तयार करावे

एचटीएमएल डेव्हलपमेंट सोपे आहे आणि त्यामुळे साधे एचटीएमएल पेज कसे कोड करायचे ते सहज शिकता येते. परंतु प्रथम आपल्याला भाषेच्या मूलभूत गोष्टी शिकण्याची आवश्यकता आहे.

टेक्स्ट एडिटरसह HTML कोडिंग

HTML दस्तऐवज हा मुळात मजकूर दस्तऐवज असतो. अनेक मजकूर संपादक उपलब्ध आहेत जे तुम्ही HTML लिहिण्यासाठी वापरू शकता. ड्रीमवीव्हर आणि सबलाइम टेक्स्ट हे दोन सर्वात लोकप्रिय आहेत. मोफत संपादक Windows साठी Notepad++ आणि Mac साठी Text Wrangler आहेत. खरं तर, तुम्ही Microsoft Word मध्ये वेब पेज बनवू शकता, परंतु तुम्ही ते करू नये कारण ते HTML दस्तऐवजांमध्ये अतिरिक्त आणि अनावश्यक कोड जोडते.

उदाहरणार्थ, आम्ही संपादक म्हणून Notepad++ वापरू. तुम्ही तुमच्या आवडीचा कोणताही संपादक निवडू शकता.

HTML तयार करणे आणि संपादित करणे

नवीन HTML दस्तऐवज तयार करणे इतर कोणत्याही दस्तऐवज प्रकाराप्रमाणेच आहे. Notepad++ मध्ये नवीन दस्तऐवज उघडण्यासाठी फाइल - नवीन निवडा. दस्तऐवजात बदल करा आणि सेव्ह वर क्लिक करा.

HTML जतन करत आहे

एचटीएमएल दस्तऐवज .htm किंवा .html या विस्तारासह फाइल आहे. काही संपादक "HTML म्हणून जतन करा" पर्याय देखील देऊ शकतात. फाईलला लॅटिन अक्षरात नाव देणे, एका लहान अक्षराने आणि रिक्त स्थानांना डॅश किंवा बिंदूंनी बदलणे चांगले आहे.

जर तुम्ही नोटपॅडमध्ये कोड लिहिला आणि तो मजकूर दस्तऐवज म्हणून सेव्ह केला असेल, तर तुम्ही टोटल कमांडर प्रोग्राम वापरून html पेजमध्ये भाषांतर करू शकता. "पुन्हा नाव द्या" कमांड निवडा आणि फाईल एक्स्टेंशन .txt वरून .html मध्ये बदला.

HTML पृष्ठ स्वरूप

भाषा म्हणून HTML मध्ये वेबसाइटची सामग्री परिभाषित करणारे घटक, टॅग आणि विशेषता असतात. HTML घटक आम्हाला वेब पृष्ठावर सारण्या, प्रतिमा, व्हिडिओ, ऑडिओ इत्यादी जोडण्याची परवानगी देतात.

HTML घटक

घटक वेब पृष्ठाची रचना आणि सामग्री परिभाषित करतात. घटकाच्या नावाभोवती कोन कंसाने सूचित केले आहे. "" मधील नसलेली सामग्री वेबसाइटवर प्रदर्शित केली जाईल. घटक असे काहीतरी दिसते:

टॅग्ज

त्याच्या भोवती कोन कंस असलेला घटक () टॅग बनवतो. टॅग स्क्रीनवर प्रदर्शित होत नाहीत, परंतु ते ब्राउझरला काय प्रदर्शित करावे हे समजण्यास मदत करतात. ओपनिंग टॅग घटकाच्या सुरूवातीस चिन्हांकित करतो आणि बंद होणारा टॅग घटकाच्या शेवटी चिन्हांकित करतो.

उदाहरणार्थ:

ओपनिंग टॅग:

क्लोजिंग टॅग:

ओपनिंग आणि क्लोजिंग टॅगमधील सामग्री ही घटकाची सामग्री आहे.

टॅग दोन प्रकारे वापरले जाऊ शकतात:

जोड्यांमध्ये टॅग वापरणे

जोडलेल्या टॅगमध्ये ओपनिंग आणि क्लोजिंग टॅग असतात. ते कसे दिसतात ते येथे आहे:

येथे काही मजकूर आहे

परिच्छेदाचा शेवट दर्शविण्यासाठी एक ओपनिंग टॅग () आणि क्लोजिंग टॅग () आहे. याचा अर्थ या दोन टॅगमधील प्रत्येक गोष्ट परिच्छेद आहे.

सिंगल टॅग

सेल्फ-क्लोजिंग एलिमेंट्स परिभाषित करण्यासाठी आणि इमेज सारखे घटक घालण्यासाठी सिंगल टॅगचा वापर केला जातो. तुम्हाला या घटकांचा प्रारंभ आणि शेवट परिभाषित करण्याची आवश्यकता नाही.

हे घटक असे लिहिले आहेत:

बंद / (स्लॅश) देखील पर्यायी आहे. हे रेकॉर्डिंग करताना सारखेच आहे. तथापि, ओपनिंग टॅगसह गोंधळ टाळण्यासाठी, शेवटी / (स्लॅश) जोडण्याची शिफारस केली जाते.

विशेषता

विशेषता हे घटक आहेत जे अतिरिक्त माहितीसह टॅग वाढवतात. विशेषता ओपनिंग टॅगमध्ये ठेवली आहे आणि त्यात नाव आणि मूल्य समाविष्ट आहे.

विशेषता टॅग असे दिसेल:

वरील "HTML" टॅगमध्ये "en-US" मूल्यासह "lang" विशेषता आहे.

HTML दस्तऐवज संरचना

प्रत्येक HTML दस्तऐवजात खालील घटकांद्वारे परिभाषित केलेली मूलभूत रचना असते:

DOCTYPE किंवा DTD: दस्तऐवज प्रकार घोषणा वापरलेल्या HTML ची आवृत्ती निर्दिष्ट करते. हा टॅग दस्तऐवजाच्या सुरूवातीस ठेवला आहे.

एचटीएमएल: एचटीएमएल टॅगची जोडी एचटीएमएल डॉक्युमेंटची सुरुवात आणि शेवट परिभाषित करते.

शीर्षलेख विभाग< head>: हा विभाग पृष्ठासाठी सामान्य माहिती परिभाषित करतो आणि सहसा लहान असतो. या घटकाची सामग्री पृष्ठावर प्रदर्शित केलेली नाही. शीर्षकामध्ये TITLE टॅग आहे, जो ब्राउझरच्या शीर्षक बारमध्ये दिसणाऱ्या दस्तऐवजाचे शीर्षक निर्दिष्ट करतो. HEADER मध्ये मेटाडेटा किंवा बाह्य फायलींचे दुवे देखील असू शकतात.

मुख्य भाग: या विभागात पृष्ठाचा मुख्य भाग आहे. त्याची सामग्री ब्राउझरमध्ये प्रदर्शित केली जाते. एचटीएमएल पृष्ठावरील बहुतेक कोड मुख्य घटकाच्या आत असतात.

एन्कोडिंग: हा टॅग HTML दस्तऐवजात वापरलेले एन्कोडिंग निर्दिष्ट करतो. एन्कोडिंग फाइल कशी सेव्ह केली जाते आणि विशेष वर्ण कसे प्रदर्शित केले जातील हे निर्दिष्ट करते. या टॅगसाठी सामान्यतः स्वीकृत मूल्य UTF-8 आहे, जे भाषेतील जवळजवळ सर्व वर्ण प्रदर्शित करण्यास अनुमती देते.

साधे HTML पृष्ठ

आता आपल्याला HTML चे मूलभूत घटक समजले आहेत, चला मूलभूत HTML पृष्ठ तयार करण्याचा प्रयत्न करूया. वर्ड प्रोसेसरमध्ये रिक्त मजकूर दस्तऐवज तयार करून प्रारंभ करूया.

पायरी 1: जोडण्यासाठी HTML कोडची पहिली ओळ DOCTYPE घटक "html" म्हणून निर्दिष्ट करते. याचा अर्थ HTML ची नवीनतम आवृत्ती वापरली जात आहे.

पायरी 3: मग आम्ही शीर्षक टॅग आणि वर्ण सेट तपशीलांसह शीर्षक टॅग जोडतो.

हॅलो वर्ल्ड

स्टेप 4: यानंतर BODY टॅग लिहिलेला आहे.

हॅलो वर्ल्ड

पायरी 5: आता रिक्त HTML दस्तऐवज तयार आहे. चला प्रदर्शित करण्यासाठी मजकूर जोडण्यास प्रारंभ करूया. आम्ही शीर्षक टॅग आणि टॅग जोडतो

ते प्रथम स्तराचे शीर्षक आणि त्याखालील परिच्छेद परिभाषित करतात.

हॅलो वर्ल्ड

हॅलो वर्ल्ड

साधे HTML पृष्ठ

मूलभूत HTML पृष्ठ तयार आहे आणि आम्ही ते आमच्या आवडीच्या फोल्डरमध्ये जतन करू शकतो.

HTML पृष्ठ पहा

HTML पृष्ठ पाहण्यासाठी, आम्हाला ते ब्राउझरमध्ये उघडावे लागेल. तुम्ही HTML दस्तऐवज सेव्ह केलेल्या फोल्डरवर नेव्हिगेट करा आणि त्यावर डबल-क्लिक करा.

ते ब्राउझरमध्ये उघडेल आणि आपल्याला एक अतिशय साधे पृष्ठ दिसेल. ते काय दाखवते ते तुम्ही तपासू शकता:

"हॅलो वर्ल्ड" सारखे शीर्षक

"हॅलो वर्ल्ड" म्हणून प्रथम स्तरावरील शीर्षक

"साधे HTML पृष्ठ" मजकुरासह परिच्छेद

आता आम्ही एक साधे HTML पृष्ठ तयार केले आहे, चला अधिक कार्यक्षमता कशी जोडता येईल ते पाहू. आम्ही मूळ HTML पृष्ठावर जे जोडले आहे त्यापेक्षा HTML अधिक कार्यक्षमता प्रदान करते. सुंदर HTML पृष्ठ तयार करण्यासाठी तुम्ही पार्श्वभूमी रंग, फॉन्ट, फॉन्ट रंग निर्दिष्ट करू शकता, प्रतिमा, दुवे, सूची इ. चला यापैकी काही अतिरिक्त वैशिष्ट्यांवर एक नजर टाकूया.

प्रगत मजकूर स्वरूपन

HTML मजकूराच्या विशेष स्वरूपनासाठी विशेष घटक प्रदान करते.

हेडिंग लेव्हल्स - टॅग वापरून सेट केले जाऊ शकतात. शीर्षकांसाठी एकूण 6 स्तर उपलब्ध आहेत. शिवाय, हे त्यापैकी सर्वात मोठे आणि सर्वात लहान आहे.

टॅग्ज

नवीन परिच्छेदाची सुरुवात दर्शविण्यासाठी वापरले जातात. ब्राउझर सहसा दोन परिच्छेदांमध्ये एक रिक्त ओळ जोडतो.

फॉर्मेटिंग घटकांचा वापर विशेष प्रकारचा मजकूर प्रदर्शित करण्यासाठी केला जातो. मजकूर खालील टॅगसह स्वरूपित केला जाऊ शकतो:

ठळक -

तिर्यक -

अधोरेखित -

फॉन्ट -

या टॅगची संपूर्ण यादी येथे उपलब्ध आहे.

दुवे जोडत आहे

हा लिंक मजकूर आहे

प्रतिमा जोडत आहे

टॅग करा एकच टॅग आहे, क्लोजिंग टॅगशिवाय. आपण प्रतिमा गुणधर्म निर्दिष्ट करू शकता.

src विशेषता प्रतिमेचे स्थान निर्दिष्ट करते.

स्टाइल विशेषतामध्ये पिक्सेलमधील प्रतिमेची रुंदी आणि उंची यासह अनेक पॅरामीटर्स आहेत.

Alt विशेषता प्रतिमेचे संक्षिप्त वर्णन देते. काही कारणास्तव प्रतिमा लोड होत नसल्यास वापरले जाते.

शीर्षक जोडत आहे

टॅग HTML5 साठी नवीन आहे आणि वेब पृष्ठाचा सर्वात वरचा घटक सूचित करतो. हेडिंगमध्ये विशेषत: कंपनीचा लोगो, संपर्क माहिती, नेव्हिगेशन लिंक्स इत्यादी असतात. एकाच दस्तऐवजात अनेक घटक असू शकतात.

HTML मधील प्रगत संकल्पना

एचटीएमएल हे शिकण्यासाठी सोपे तंत्रज्ञान आहे, त्यामुळे अनेक डिझाइनर फक्त मूलभूत संकल्पनांसह कार्य करतात. तुम्हाला HTML चा पूर्ण वापर करायचा असेल, तर तुम्हाला प्रगत संकल्पनांशी परिचित होणे आवश्यक आहे. हे तुम्हाला कमी कष्टात एक आकर्षक वेबसाइट तयार करण्यात मदत करेल.

आम्ही काही संकल्पनांचा उल्लेख करू ज्या तुम्हाला पुढे मदत करतील. तुम्ही अधिक जाणून घेणे सुरू ठेवू शकता आणि प्रगत HTML आणि त्याची वैशिष्ट्ये वापरू शकता.

HTML कोड प्रमाणीकरण

HTML प्रमाणीकरण हे HTML कोडमधील त्रुटी तपासण्यासाठी वापरले जाते. तुमचे वेब पेज लोड होत नसल्यास, तुम्ही समस्येचे कारण शोधण्यासाठी चेक वापरू शकता.

प्रमाणीकरण नवीनतम HTML मानकांचे पालन न करणाऱ्या कोडवर मार्गदर्शन देखील प्रदान करते. अवैध HTML साइट निरुपयोगी करेल. यामुळे लोडिंग समस्या किंवा भिन्न ब्राउझरमध्ये विसंगत आउटपुट होऊ शकते. अनेक पडताळणी सेवा मोफत आहेत, जसे की validator.w3.org

अतिरिक्त टॅग जोडत आहे

आम्ही येथे चर्चा केल्यापेक्षा बरेच HTML टॅग आणि विशेषता आहेत. शिकण्यासाठी दोन चांगली संसाधने म्हणजे w3schools आणि HTML डॉग, ज्यात अधिक ट्यूटोरियल आणि टॅगची विस्तृत सूची आहे.

तुम्ही तुमच्या ब्राउझरमधील व्ह्यू सोर्स पेजचा वापर चांगल्या प्रकारे डिझाइन केलेल्या वेबसाइट्सच्या कोडचे परीक्षण करण्यासाठी आणि नवीन तंत्रे पाहण्यासाठी देखील करू शकता.

वेब होस्टिंग सेवेसह, तुम्ही तुमच्या वेब डोमेनमध्ये एकाधिक HTML पृष्ठे जोडू शकता. तुमच्या HTML फाइल्स वेब सर्व्हरवर हस्तांतरित करण्यासाठी तुम्हाला FTP अपलोड सॉफ्टवेअरची आवश्यकता असू शकते. अनेक वेब होस्टिंग सेवा आहेत ज्या FTP कार्यक्षमता प्रदान करतात.

CSS आणि JavaScript जोडत आहे

CSS चा वापर आपल्या वेबसाइटचे स्वरूप द्रुतपणे सुधारण्यासाठी केला जाऊ शकतो. रंग, फॉन्ट जोडण्यासाठी आणि घटकांचे स्थान बदलण्यासाठी तुम्ही CSS वापरू शकता. HTML पृष्ठाशी लिंक केलेल्या CSS स्टाइलशीटसह, तुम्ही सर्व मजकूराची शैली बदलू शकता.

JavaScript ही प्रोग्रामिंग भाषा आहे आणि HTML पृष्ठांवर अतिरिक्त कार्यक्षमता जोडण्यासाठी वापरली जाऊ शकते. दरम्यान JavaScript कमांड घातल्या जातात. ते परस्परसंवादी बटणे जोडण्यासाठी, गणितीय गणना करण्यासाठी वापरले जाऊ शकतात.

वेब डेव्हलपमेंटचे अद्भुत जग तुमच्यासमोर उघडते. त्यासाठी जा! हे शिखर जिंकणे सोपे आहे, आपल्याला फक्त प्रारंभ करणे आवश्यक आहे.