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

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

एक पृष्ठ साइट

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

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

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

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

फेसबुक पेज

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

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

ब्लॉग

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

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

डायरी

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

सूचना

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

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

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

शीर्षलेखाच्या भागानंतर, आपल्याला टॅग ठेवणे आवश्यक आहे ज्यामध्ये दस्तऐवजाच्या मुख्य भागाच्या सूचना संलग्न केल्या जातील: त्यांच्यामध्ये घाला, उदाहरणार्थ, प्रदर्शित होणारा टॅग पृष्ठमजकूराचा परिच्छेद:

माहितीचा संपूर्ण परिच्छेद येथे आहे!

सर्व HTML भाषा टॅग जोडलेले नाहीत. त्यांच्यापैकी काहींना सुरुवातीच्या टॅगमध्ये आवश्यक असलेली प्रत्येक गोष्ट आहे. अशा टॅगसाठी, क्लोजिंग स्लॅश क्लोजिंग ब्रॅकेटच्या आधी ठेवला जातो. उदाहरणार्थ, ओळीचा शेवट आणि "कॅरेज रिटर्न" टॅग
:

परिच्छेदाची पहिली ओळ.


परिच्छेदाची दुसरी ओळ.

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

परिच्छेदाची पहिली ओळ.


परिच्छेदाची दुसरी ओळ.

यावर डॉ

सूचना

खालील टॅग नोटपॅडमध्ये कॉपी करा, ते तयार करण्यासाठी आवश्यक आहेत.

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

साइट मेनू

अंतर्गत क्षेत्र

साइट शीर्षलेख

साइट तळटीप

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

साइटचे शीर्षलेख, पार्श्वभूमी आणि तळटीप निवडा, त्यांना आवश्यक टॅगमध्ये घाला. टॅग वापरून चित्रे घातली जातात . आता “स्लाइड हेडर” आणि “साइट फूटर” शिलालेख गायब झाले पाहिजेत.

घातलेली सर्व चित्रे एकत्र जोडा. टॅगमध्ये हे करण्यासाठी

मुख्य टेबलमध्ये सेलपॅडिंग = 0 आणि सेलस्पेसिंग = 0 घाला

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

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

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

विषयावरील व्हिडिओ

संबंधित लेख

स्रोत:

• नोटपॅडवर तयार वेबसाइट

आज इंटरनेटवर वेगवेगळ्या इंटरनेटची प्रचंड संख्या आहे साइट्स. सृष्टी असे एक मत आहे साइट्सही एक अतिशय क्लिष्ट प्रक्रिया आहे, पण तसे नाही! कोणीही साधा कोड लिहायला शिकू शकतो, उदाहरणार्थ, “बिझनेस कार्ड साइट” (फक्त HTML वापरून तयार केलेली 2-3 पृष्ठांची साइट). वर्ल्ड वाइड वेबवर कोणीही स्वतःचे वैयक्तिक प्रतिनिधित्व तयार करू शकतो. सहसा तयार करण्यासाठी साइट्सविशेष प्रोग्राम वापरा, हे नियमितपणे केले जाऊ शकते नोटपॅड. नंतरच्या प्रकरणात, तुम्हाला HTML भाषेचे ज्ञान आवश्यक असेल (हायपरटेक्स्ट मार्कअप भाषा - "हायपरटेक्स्ट मार्कअप भाषा"), तसेच सीएसएस (कॅस्केडिंग स्टाइल शीट्स - कॅस्केडिंग स्टाइल शीट्स) दस्तऐवजाचे स्वरूप वर्णन करण्यासाठी भाषा.

सूचना

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

ते तयार करण्यासाठी, तुम्हाला HTML फॉरमॅटमध्ये लिखित मजकूर जतन करणे आवश्यक आहे. फाईलचे नाव लॅटिन अक्षरात लिहिलेले असले पाहिजे, त्यात विरामचिन्हे, मोकळी जागा किंवा गणिती चिन्हे नसावीत. तुम्ही फाइल नावात “_” चिन्ह आणि संख्या वापरू शकता. फाइल .html किंवा .htm विस्तारासह जतन करणे आवश्यक आहे, उदाहरणार्थ page.html परिणामी फाइल कोणत्याही इंटरनेटवर आढळू शकते, परिणाम आकृतीमध्ये दर्शविला आहे.
नोटपॅडचा वापर करून, तुम्ही विशेष प्रोग्रामिंग भाषा वापरून अनेक पृष्ठांमधून अधिक जटिल पृष्ठे तयार करू शकता.

स्रोत:

• नोटपॅड उदाहरणांमध्ये वेबसाइट तयार करणे

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

तुम्हाला लागेल

• मायक्रोसॉफ्ट ऍक्सेस डीबीएमएस

सूचना

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

डेटाबेस डेटा स्कीमा उघडा. हे करण्यासाठी, ऍक्सेस डीबीएमएस मेनूमध्ये “साधने” - “डेटा स्कीमा…” निवडा. सर्व संबंधित डेटाबेस घटक असलेले एक क्षेत्र स्क्रीनवर दिसेल. क्षेत्र असल्यास, जोडा टेबल विंडो आपोआप उघडेल. अन्यथा, या क्षेत्राच्या संदर्भ मेनूमधून कॉल केला जातो.

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

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

कनेक्शन स्थापित करण्यासाठी, विंडोमधील "तयार करा" बटणावर क्लिक करा. डेटा स्कीमा क्षेत्रामध्ये, दोन सारण्यांमध्ये एका फील्डमधून दुस-या फील्डमध्ये संबंध दिसून येईल. कनेक्शनचा प्रकार योजनाबद्धपणे विंडोमध्ये क्रमांक 1 आणि अनंत चिन्हासह प्रदर्शित केला जाईल, जो “ते-अनेक” कनेक्शन दर्शवेल. डेटाबेस सेव्ह करा. आता दोन टेबलनिर्दिष्ट प्रमाणात जोडलेले आहेत.

विषयावरील व्हिडिओ

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

सूचना

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

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

- त्यात दस्तऐवजाचा मुख्य भाग असणे आवश्यक आहे.

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

आता मजकूर फॉरमॅट करा - टॅग वापरून परिच्छेदांमध्ये खंडित करा

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

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

स्रोत:

• नोटपॅड वापरून वेब पृष्ठ कसे तयार करावे

एक साधे वेब पृष्ठ तयार करण्यासाठी, आपल्याला कोणत्याही विशेष उपकरणे किंवा कौशल्यांची आवश्यकता नाही. मानक नोटपॅड प्रोग्राम प्राप्त करणे पुरेसे आहे, जे सामान्यतः विंडोज चालविणार्या सर्व संगणकांवर स्थापित केले जाते.

HTML पृष्ठ कसे तयार करावे याबद्दल आश्चर्य वाटत आहे? हे करण्यासाठी, तुम्हाला अनेक तास घालवावे लागतील, आणि तुम्हाला कळेल आणि तुम्ही तुमचे पहिले पेज ५ मिनिटांत तयार करू शकता.

HTML म्हणजे हायपरटेक्स्ट मार्कअप लँग्वेज. अनुवादित, याचा अर्थ "हायपरटेक्स्ट मार्कअप भाषा" असा होतो. हे समजून घेणे महत्त्वाचे आहे की एचटीएमएल ही प्रोग्रामिंग भाषा नाही तर साइट मार्कअप भाषा आहे.

सर्व आधुनिक ब्राउझर ते ओळखू शकतात. नंतर ते माहिती वापरकर्ता-अनुकूल पद्धतीने प्रदर्शित करतात, लेखकाने आगाऊ इच्छेनुसार.

ही भाषा विशेष टॅग वापरते. प्रत्येक टॅग स्वतःचे कार्य करतो. त्यापैकी बरेच आहेत. आदर्शपणे, आपल्याला सर्वकाही शिकण्याची आवश्यकता आहे. परंतु नवशिक्यासाठी, मूलभूत ज्ञान पुरेसे आहे.

HTML मूलभूत

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

ओपनिंग आणि क्लोजिंग टॅगचा वापर घटक कुठे सुरू होतो आणि कुठे संपतो हे दर्शविण्यासाठी केला जातो. असे दिसते.

<открывающий тег>सामग्री

तुम्ही बघू शकता, ओपनिंग आणि क्लोजिंग टॅगमधला फरक फक्त "/" आहे.

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

हे देखील लक्षात ठेवा की HTML भाषेच्या संरचनेची स्वतःची पदानुक्रम आहे. अन्यथा त्याला घरटी म्हणतात. सर्वात महत्वाचे आहे, कारण इतर सर्व त्यात आहेत.

HTML मध्ये दोन मूल घटक आहेत:

• ... ;
• ..
  
  .

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

सर्वात महत्वाची गोष्ट अशी आहे की येथे कोणतीही सामग्री नाही.

BODY विभाग दस्तऐवज सामग्री निर्दिष्ट करतो जी वापरकर्त्याला प्रदर्शित केली जाईल.

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

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

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

कोड लिहिण्यासाठी तुम्हाला एक प्रकारचा संपादक आवश्यक आहे. त्यापैकी बरेच आहेत. Notepad++ आणि Adobe Dreamweaver हे लोकप्रिय आहेत. तुम्ही नोटपॅड देखील वापरू शकता.

Notepad++ संपादक असे दिसते.

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

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

नोटपॅडमध्ये HTML पेज कसे तयार करायचे ते पाहू. म्हणजेच, तांत्रिक भाग पूर्ण करूया आणि नंतर थेट टॅगचा अभ्यास करू.

एचटीएमएल नोटपॅडमध्ये वेब पृष्ठ कसे तयार करावे

प्रारंभ करण्यासाठी, नोटपॅड उघडा.

नंतर खालील स्क्रीनशॉटमध्ये काय सूचित केले आहे ते टाइप करा.

नुसती कॉपी न करता हाताने लिहिण्याची सवय लावा. जेव्हा तुम्ही तुमच्या हातांनी लिहिता तेव्हा तुम्हाला संपूर्ण टॅग बेस चांगल्या प्रकारे लक्षात ठेवा.

यानंतर, आपण ब्राउझरमध्ये फाइल उघडू शकता आणि निकालाची प्रशंसा करू शकता. HTML Notepad मध्ये वेबपेज कसे तयार करायचे ते आता तुम्हाला समजले पाहिजे.

जागतिक कंसोर्टियम W3C

W3C नावाची एक संस्था आहे, जी इंटरनेटसाठी सर्व मानके विकसित आणि लागू करते. सर्व ब्राउझर या मानकांचे पालन करतात आणि या नियमांनुसार पृष्ठ मार्कअप (कोड) प्रक्रिया करतात.

एचटीएमएल भाषेच्या विकसकांच्या अधिकृत वेबसाइटवर आपण सर्व टॅग आणि त्यांच्या वापरासाठी नियमांसह एक टेबल शोधू शकता. या लेखात आम्ही सर्वात मूलभूत गोष्टींचा विचार करतो.

तुम्ही विचार करत असाल, नियम काय असू शकतात? वर्णन केलेल्या सर्व टॅगची स्वतःची शिफारस आहे. त्यापैकी अनेक आहेत:

• पर्यायी टॅग.
• निषिद्ध.
• रिक्त टॅग.
• कालबाह्य
• हरवले.

HTML मध्ये टॅग

तुम्ही एचटीएमएल पेज तयार करण्यापूर्वी, तुम्हाला हेड सर्व्हिस पार्टमध्ये काय असावे हे समजून घेणे आवश्यक आहे.

HEAD क्षेत्रामध्ये आवश्यक आणि पर्यायी दोन्ही टॅग असतात. आवश्यक टॅग हे शीर्षक आहे. हे नियुक्त केले आहे . हे संपूर्ण दस्तऐवजासाठी नियुक्त केले आहे. आणि तुम्ही Google शोध परिणामांमध्ये जे पाहता ते शीर्षक टॅग आहे.

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

ते म्हणून नियुक्त केले आहेत

मधले सगळे, कार्यक्रमाद्वारे असे मानले जाते. कृपया लक्षात घ्या की तुम्ही दुसऱ्या टिप्पणी टॅगमध्ये टिप्पणी टॅग नेस्ट करू शकत नाही. कारण एकदा उघडा.

अशा घरट्यांचे उदाहरणः

पहिल्या टिप्पणीची सुरुवात -->

ब्राउझरमधील परिणाम खालीलप्रमाणे असेल

पहिल्या टिप्पणीची सुरुवात -->

येथे एक तुकडा आहे दिसणार नाही. दुसरा ओपनिंग टॅग

Файл нужно назвать index.html . Окончание «.html» указывает на расширение файла. Если вы просто введете название индекс, то документ сохранится как текстовый файл и не откроется браузером.

Я сохранял документ на рабочий стол. Теперь нужно найти его, нажать правую кнопку мыши и открыть с помощью любого браузера. Я выберу Google Chrome.

Вот так выглядит только что созданная мной страничка. Ваша ничем не будет отличаться. Все точно также: с картинками и цветным шрифтом.

Сейчас я более подробно расскажу о тегах, а пока давайте просто уберем из заголовка «center » и вставим строчку, в которой содержится слово «Color ». Кстати, я уже писал. Это очень просто, рекомендую к прочтению.

Еще раз сохраните документ, в этот раз можно просто воспользоваться сочетанием клавиш Ctrl+S, а затем обновите страницу в браузере при помощи кнопочки F5

Помните, практически любой тег должен открываться и закрываться. То есть где-то должен располагаться код со слешем. В данном случае он выглядит так: .

Видите, заголовок стал красным. Точно также вы можете придать нужный оттенок любой части текста.

Ну вот и все, пример готов, и вы должны гордиться собой. Конечно, она еще не находится онлайн, для этого веб-страницу надо выложить на , который предоставляется хостингом. Нужно также подключить свой домен, чтобы и другие люди могли увидеть ваше творение.

Пока страничку видите только вы. Но согласитесь, таким сайтом можно удивить только человека из железного века. Но это первый опыт, давайте сделаем его еще более успешным, разобравшись с тегами, которые мы использовали. Это поможет вам научиться создавать свои проекты, без чьей либо помощи.

Теги

С вашего позволения я перейду в программу NotePad++. Она обладает целым рядом преимуществ в сравнении с обычным блокнотом. Сейчас мне очень пригодится подсветка тегов, чтобы показывать вам те элементы, о которых я буду рассказывать. Вообще, если вы собираетесь, изучать html, то я очень рекомендую установить эту бесплатную программу.

Она не единственная и я могу предложить вам еще несколько если кого-то заинтересуют альтернативы. Мы же перейдем к теоретической части.

Основные

Начинается и заканчивается страница с тегов . Они показывают браузеру, что это веб-документ, созданный при помощи html.

Далее идет или заголовок. В ней располагается самая важная информация о странице, в нашем случае – . Если вы еще не нашли фразу «Моя первая страница», которая присутствует в коде, обратите внимание на саму вкладку, над поисковой строчкой.

Именно теги отвечают за начало и конец основной информации о страничке.

Тег

указывает на то, что фраза является заголовком. По умолчанию, она чуть больше основного текста и выделяется жирным. Если бы мы с вами сейчас писали не только на html, но и создавали CSS-файл, с которым перекликался наш файл, то могли бы управлять размерами, шрифтом и даже цветом всех заголовков на странице, не прописывая font style , как мы это делали в примере. Хотя об этом тоже рановато.

Кстати, Title и H1 имеют свое влияние во время присваивания вашему сайту места в поисковой выдаче. Относиться к ним нужно с большим вниманием и не писать внутри лишь бы что. Они имеют отношение к . Помимо h1, существуют еще и h2, h3,h4.

В этой же строчке есть открывающийся и закрывающийся

. Благодаря этому элементу можно выравнивать текст по середине. Если этот тег удалить, то текст встанет по правому краю.

— один из немногих единичных тегов. То есть он работает сам по себе. Благодаря этому элементы вы перепрыгиваете с одной строки, на другую. Проще говоря, делаете отступ. Написали его один раз, значит один раз переместились вниз, два, как у меня, и отступ получился чуть больше.

Картинка

Далее идет тег img , то есть image, картинка. Квадратная скобка открывается, в нее вписывается вся основная информация о изображении, только после этого она закрывается. Надо отметить, что img – это тег, а все остальные элементы кода, которые вписываются внутрь, это его атрибуты.

Первым делом идет alt , то есть описание. Это также необходимо для оптимизации. Иногда добавляется еще и title . При наведении на изображение мышью рядом с курсором появляется подсказка, когда страница уже открыта в браузере.

Можно было загрузить рисунок в папку сайта и прописать к ней путь, но я пошел простым путем. Среди на Pixabay я нашел картинку, открыл ее в новом окне и вставил ссылку.

В теге src прописывается путь к картинке. Именно он указывает браузеру, что дальше нужно двигаться, чтобы найти нужное изображение, а в каком направлении искать – пишете вы сами.

Форматирование текста

отвечает за придание части текста какого-то особого стиля, к примеру, как в нашем случае другого цвета. style=»color:red» показывает, что цвет будет красным. Если хотите желтый, напишите yellow, зеленый – green. Можно пользоваться кодами цветов из фотошопа.

помогает выделить текст жирным.

---

рисует горизонтальную линию. Он одиночный и используется только в закрытом виде. Если вы напишете

---

несколько раз, то получите ровно столько же горизонтальных полос при открытии страницы в браузере.

Ссылки

указывает браузеру, что дальше будет ссылка. Вы хотите перенаправить читателя на другой адрес. Этот тег идет с обязательным атрибутом href=”адрес” . В кавычки вставляется путь, куда браузер должен перенести посетителя страницы. После того, как этот тег прописан, вставляется описание, слово или несколько, при нажатии на которое читателя будет переносить дальше. После того как эти условия выполнены, можно вставлять второй, закрывающийся тег .

После того как основная часть страницы написана, вы закрываете тег body , так как тело закончено. И указываете на то, что прекращаете на сегодня использовать html .

Если вы хотите больше узнать о тегах html и научиться вставлять не только картинки, но и видео, создавать кнопки, различные формы, списки, параграфы, то я могу предложить вам бесплатный курс Евгения Попова «Основы html ». Всего 33 урока помогут вам выйти на новый уровень.

Ещё хочу порекомендовать вам Видеокурс, который рассказывает, как верстаются сайты. Весь процесс показан на реальных примерах, что особенно хорошо. Курс предназначен как для новичков, которые ещё даже HTML не знают, так и для тех, кто уже хорошо знает и HTML, и CSS, однако, верстать сайты хорошо не умеет. Более полную информацию Вы можете получить, перейдя по ссылке: www.srs.myrusakov.ru/makeup

Помимо этого заберите Бесплатную книгу по созданию сайтов ! Эта книга рассчитана на начинающих, и вот там создаётся сайт ОТ и ДО. То есть готовится дизайн, затем верстаются страницы, пишется программная часть, а после сайт размещается в Интернете. Автор тщательно всё комментирует, а в книге очень много скриншотов и иллюстраций. Причём особенностью книги является то, что создаётся не какой-то абстрактный сайт, а вполне реальный и существующий в Интернете.

Сегодня вы сделали много, ведь первый шаг самый сложный.

Подписывайтесь на рассылку и группу ВКонтакте , и узнавайте еще: как и зачем нужен движок сайта, что такое блочная верстка и модульная сетка, как правильно писать сайты и многое другое.

До новых встреч и удачи!

आम्ही वाचण्याची शिफारस करतो

व्हायरस आणि मालवेअर काढून टाकण्यासाठी सर्वोत्तम उपयुक्तता

मालवेअर हे अनाहूत किंवा धोकादायक प्रोग्राम आहेत जे...

कार्यक्रमांची चाचणी कशी झाली

कोणत्याही स्टोरेज मीडियावरून डेटा रिकव्हरीसाठी सर्वोत्तम प्रोग्राम....

CPU लोड कसे कमी करावे: समस्येचे निराकरण करण्यासाठी सोप्या परंतु प्रभावी पद्धती

हॅलो का सर्वात सामान्य कारणांपैकी एक...

वर

• बातम्या
• चेरचर
• विंडोजसाठी
• विंडोज फोनसाठी
• व्हायबर डाउनलोड करा
• संगणकावर व्हायबर

×

साइट शोधा