काही सर्वात प्रसिद्ध पृष्ठे माहितीसह खूपच अधिक भारित आहेत, परंतु मी त्यापेक्षा अधिक सोपे आहे: साधी.
साहजिकच या समुहाचा महान घातांक म्हणजे गूगलने कमीतकमी मुख्यपृष्ठासह आपला प्रवास सुरू केल्यापासून, परंतु स्पष्टपणे इंटरनेटवर फक्त असेच नाही जे गोष्टी सोप्या ठेवण्यासाठी वचनबद्ध आहे.
सोपी एचटीएमएल वेब पृष्ठ उदाहरणे
केन रिचमंड
केन रिचमंड आम्हाला काही घटकांसह खेळण्याची साधेपणा पाहण्यास मदत करते, परंतु अगदी चांगले ठेवलेले आहे मिनिमलिझमला एक उत्तम भावना द्या. वरच्या डावीकडील त्याचा लोगो, उजवीकडे आणि मध्यभागी ट्विटर आणि कॉन्टॅक्ट आयकॉन ज्यात त्याला समर्पित आहे त्याकडे लक्षवेधी टाइपोग्राफी आहे.
वेबशी दुवा साधा: कॅनरीच सोमवार
Iceलिस ड्रोगार्ड
Iceलिस ड्रोगार्ड आपल्या लोगोसह हे सोपे ठेवा मध्यभागी, आपल्या वेबसाइटच्या मुख्य पृष्ठांवर जाण्यासाठी चार टॅब आणि छायाचित्रांची मालिका योग्य प्रकारे ठेवली जेणेकरून एका दृष्टीक्षेपात आपण काय करावे आणि आपण काय करता हे आम्हाला कळेल.
वेबशी दुवा साधा: Iceलिस ड्रोगार्ड
जोनाथन ओगडेन
ओग्डेन आपले नाव लोगो म्हणून किती सोपे आहे हे खेळत रहा, खाली लक्ष दिलेली सामाजिक नेटवर्क्स लक्ष वेधून घेत नाहीत आणि त्यांचे डिझाइन कार्य करते जेणेकरुन आम्ही त्यांच्याद्वारे द्रुतगतीने जाऊ शकू. एका पृष्ठावर ते महत्त्वाचे असलेले सर्वकाही दर्शविते.
वेबशी दुवा साधा: जोनाथन ओगडेन
फिंच
टायपोग्राफी आणि त्यासह खेळण्यासाठी फिंच आधीपासूनच अन्य ठिकाणी जात आहे ते काय करते याने अभिजात आणि शहाणपणा दर्शविणारे रंग. फक्त काही घटकांसह, तो आपला सर्व व्यावसायिकता पाहता सोडतो. कोणत्या पृष्ठांनी आपल्याशी दुवा साधला आहे हे देखील हे स्पष्ट करते.
वेबशी दुवा साधा: फिंच
एक वेगळी डिझाइन
ही वेबसाइट वेगळ्या खेळा. शीर्षलेख असलेले वॉलपेपर वापरा ज्यामधून आम्ही मुख्य पृष्ठांवर, आपल्या फोनवर आणि आपल्या सामाजिक नेटवर्कवरील दुव्यांवर जाऊ शकतो.
वेबशी दुवा साधा: एक वेगळी डिझाइन
ब्रिजक
काई त्याच्या स्वत: च्या आकृतीसह आपले वर्णन करतो एक अमूर्त त्रिकोण आणि योग्य रंग पॅलेट जवळ असणे आम्हाला त्याच्याबद्दल अधिक जाणून घ्यायचे असेल तर तो त्याच्या बायोचा एक भाग लहान आकारात फॉन्टसह देखील प्रदान करतो.
वेबशी दुवा साधा: ब्रिजक
अनुलंब गार्डन डिझाइन
मागील प्रमाणे, व्हर्टिकल गार्डन डिझाइन वेगवान दर्शविणार्‍या छायाचित्रांकडे जाते ओस्लो विमानतळावर त्याची एक चांगली नोकरी. शीर्षस्थानी आमच्याकडे «एनएव्ही बार» किंवा नेव्हिगेशन बार असलेले हेडर आहे आणि भाषा बदलण्याची शक्यता देखील आहे. अगदी सोप्या पृष्ठास अंतिम स्पर्श देण्यासाठी लोगो त्यास अनुलंब स्वरूपात ठेवतात.
वेबशी दुवा साधा: अनुलंब गार्डन डिझाइन
247Grad
247Grad मोनोक्रोम आणि पार्श्वभूमी प्रतिमेसह खेळा जवळजवळ पूर्णपणे अंधार एकूणच डिझाइनमध्ये उत्कृष्ट कॉन्ट्रास्ट तयार करण्यासाठी मजकूर आणि शीर्षलेखापेक्षा लहान असलेल्या शीर्षलेख फॉन्टचे भांडवल केले जाते.
वेबशी दुवा साधा: 247Grad
याचा आनंद घ्या
una महान टायपोग्राफी अस्सल असल्याचे लक्षण असू शकते आणि आम्ही काय करतो हे आम्हाला माहित आहे. संदेश थेट असल्यास आपल्याला आणखी काही देण्याची आवश्यकता नाही. ते हे अगदी स्पष्ट करतात: त्यांना सुंदर अॅप्स आणि वेबसाइट तयार करण्यास आवडते. ते प्रकल्पांसाठी मेल आणि त्यांच्या अभ्यासासाठी मेल दुसर्‍या दुव्यावर सोडतात.
वेबशी दुवा साधा: याचा आनंद घ्या
अ‍ॅलिसन हौ
अ‍ॅलिसन आम्हाला घेते इतर कोर्स करण्यापूर्वी आणि त्यात अधिक प्रतिमा समाविष्ट आहेत आणि त्याहून अधिक "स्त्रीलिंग" टाइपफेस. आपल्या मुख्य प्रतिमेसाठी आणि त्या शीर्षलेखात तीच आहे. त्याच्याकडे खरेदीचे युक्त्या दर्शविणारे कार्ड सादर करण्याची लक्झरी आहे.
वेबशी दुवा साधा: अ‍ॅलिसन हौ
पिक्सेलॉट
पिक्सेलॉट जरा वेडा आहे, परंतु ते लेखकांच्या सर्जनशीलता देखील सूचित करते. वापरा एक मुखवटा तयार करण्यासाठी माउस पॉईंटर आपल्याकडे जिथे जिथे जिथे मिळेल तिथे तशी अस्पष्टता येते.
वेबशी दुवा साधा: पिक्सेलॉट
लिओनेल स्कॉलेट्स
आपण इच्छित असल्यास त्याशिवाय आणखी काही न करता आपला सारांश ऑनलाइन करा, लिओनेल आपल्याला चरण दाखवते. योग्य फॉन्ट, वरच्या डाव्या बाजूस आपला फोटो, आपल्या सामाजिक नेटवर्क आणि आपल्या अनुभवाचा दुवा. केवळ सजावटीचा घटक भिन्न रंगांच्या त्या दोन आडव्या रेषा आहेत.
वेबशी दुवा साधा: लिओनेल स्कॉलेट्स
मोहक सीगल्स
आम्ही परत मिनिमलिझमच्या अभिजाततेकडे आणि त्या मोठ्या रिक्त जागा. एकीकडे हेडर उर्वरित घटकांपासून खूप दूर आहे आणि दुसरीकडे त्या घटकांना अशा आकाराचे आकार दिले आहेत की ते त्यांच्यामध्ये एक उत्तम व्हिज्युअल सुसंवाद निर्माण करतात.
वेबशी दुवा साधा: मोहक सीगल्स
लेबेन्स्रॅम
जसे आपण सर्व उदाहरणांमध्ये पाहू शकता, हे महत्वाचे आहे विविध पृष्ठांवर जाण्यासाठी शीर्षलेख टॅब वेबसाइटवरून. टायपोग्राफीला खूप महत्त्व आहे, एक शीर्षकासाठी खेळा आणि दुसर्‍या मजकूरावर सन सेरीफसह मजकूर खेळा जे एक उत्तम कार्य करते.
वेबशी दुवा साधा: लेबेन्स्रॅम
पिंक पॉइंट
रंगांचा फरक आपल्याला सर्व दृश्यांच्या जटिल वेबकडे घेऊन जातो. ते सर्व मुख्य घटक गहाळ नाहीत यावेळी पार्श्वभूमी प्रतिमेसाठी आणि मुख्य प्रतिमेच्या ग्रेडियंटचे मुख्य रंग असलेले दोन विभाग ग्रेडियंट्ससह खेळण्यासाठी.
वेबशी दुवा साधा: पिंक पॉइंट
IWC
सह एक उत्तम छायाचित्र एक निवडलेला फॉन्ट आणि "नायक" घटक आपण या वेबला देऊ शकता. स्लाइडरद्वारे ते कामातील काही भाग त्याच्या संकल्पनेत अगदी सोपे असल्याचे दर्शवते.
वेबशी दुवा साधा: IWC
पटा पट
डिजिटल इलस्ट्रेशन आपल्याला चॉप चॉपसह घेऊन जाते त्या प्रतिमांची उपस्थिती खाणारी ती प्रतिमा. शीर्षलेखातील निळा रंग वेबद्वारे प्रक्षेपित केलेल्या संपूर्ण प्रतिमेच्या अनुषंगाने रंगीन मूल्ये तयार करण्यासाठी त्याचा बिंदू देतो.
वेबशी दुवा साधा: पटा पट
7 पाइन
मुख्यपृष्ठ प्लेटचा उत्कृष्ट नायक होण्यासाठी पाइन हिरव्यासह खेळते. बाकीचे ते कंपोझ करतात बरीच हिरव्या आणि साध्या शीर्षलेख असलेली प्रतिमा त्या लोगोद्वारे कोणाचेही दुर्लक्ष होऊ इच्छित आहे.
वेबशी दुवा साधा: 7 पाइन
बेरीज
बेरीज आम्हाला इतर दिशेने घेऊन जाते. दुर्बल काळ्या आणि पांढर्‍या, एक अतिशय सर्जनशील चित्रणासह खेळा आणि हे मनोरंजक लँडस्केपपेक्षा अधिक तयार करण्यासाठी उर्वरित घटक आणि इतर दोन स्पष्टीकरणांसह आहे. उर्वरित स्टॅन्ड वेबसाइट तयार करण्याचे उदाहरण.
वेबशी दुवा साधा: बेरीज
हॅटबॉक्स
या वेबसाइटवर निळा हा एक प्रमुख रंग आहे ज्यामध्ये पांढर्‍याने पूर्णतः प्रकाशित केलेली हरवलेल्या प्रतिमा नाहीत आणि खेळ कसा असेल त्या साइट बिल्डरच्या 3 डी मध्ये जे आपण हलवितो ते हलवते.
वेबशी दुवा साधा: हॅटबॉक्स
कारा लयटे
काराकडे जाते साधेपणा आणि अतिसूक्ष्मत्व त्याच्या नैसर्गिक आणि सुंदर उपस्थितीसह आपल्या छायाचित्रात बाकी एक मजकूर आहे जो हेडरसाठी मुख्य घटक काय आहेत आणि तो उघडण्यासाठी हॅमबर्गर बटण आहे.
वेबशी दुवा साधा: कारा लयटे
Instrinsic स्टुडिओ विपणन
Es सर्वात सोपा वेब परंतु ब्लॉग बनविणे म्हणजे काय हे ते आम्हाला दर्शवते. लाल आणि काळा हा अत्यंत "ब्लॉग" साइटवरील नायक आहे.
वेबशी दुवा साधा: Instrinsic स्टुडिओ विपणन
एचटीएमएल मध्ये एक साधी वेबसाइट कशी तयार करावी
आम्ही तुम्हाला शिकवणार आहोत एचटीएमएल मध्ये एक साधी वेबसाइट तयार करा जेणेकरून आपल्याला ते तयार करणारे सर्वात मूलभूत घटक माहित आहेत. वेब होस्ट असणे आवश्यक आहे जिथे आम्ही सीएसएसमध्ये कोड आणि काही चिमटे लोड करू शकू, परंतु पुढे जा, HTML मध्ये आपला प्रवास सुरू करण्यासाठी ही तत्त्वे आहेत.
काही पाहिले सोपी वेब उदाहरणे ज्याद्वारे आपण आपले डोके बरेच न तोडता स्वत: चे डिझाइन तयार करण्यासाठी स्वत: ला पुरेसे प्रेरित करू शकता. कधीकधी साध्या गोष्टी जटिल गोष्टींमध्ये गुंतागुंत करण्यापेक्षा एक चांगला प्रभाव निर्माण करतात. आपणास दिसेल की बर्‍याच बाबतींत साधे कार्य अगदी चांगले करतात. त्यासाठी जा.
एचटीएमएलमध्ये एक साधी वेबसाइट तयार करणे हे आधी दिसते त्यापेक्षा सोपे आहे. एक वेबसाइट हेडर, बॉडी बनलेला असतो किंवा सामग्री आणि तळटीप किंवा तळटीप मुख्य घटक म्हणून. आम्ही त्यांचे अशा प्रकारे वर्गीकरण करू शकतो:
- Documentos: आम्ही तयार करणार आहोत सर्व कागदपत्रे ए सह केली पाहिजेत . आम्ही ए सह उघडतो आणि नेहमीच ए बरोबर बंद होते
- शरीर किंवा शरीर: दस्तऐवजाचा दृश्य भाग दरम्यान आहे वाय
- शीर्षलेख: ते एच 1, एच 2, एच 3 द्वारे ओळखले जातात ... आम्ही ए सह प्रारंभ करतो आणि आम्ही एक सह बंद . मजकूर आत असलेले शीर्षलेख म्हणून दिसेल आणि त्याच्या संख्येनुसार ते लहान किंवा मोठ्या आकारात करेल.
- परिच्छेद: परिच्छेद ए मध्ये बंद आहे आणि बंद होते
- Enlaces: सर्वात स्पष्ट उदाहरण आहेcreativosonline.org/»> याचा दुवा Creativos Online
- प्रतिमा: आम्ही त्यांना लेबलद्वारे परिभाषित करतो . एक उदाहरण असेल . आम्ही अवतरण चिन्हांच्या दरम्यानच्या प्रतिमेची विनंती करतो आणि एसईओसाठी आवश्यक असलेल्या पर्यायी मजकूरासाठी एखादी एलईटी वापरतो.
- सूची: आम्ही याद्या यासह परिभाषित करतो एक गोंधळ आणि सह व्यवस्थित सूची आयटम सह वापरले जातात . बारसह त्यांना बंद करणे नेहमी लक्षात ठेवा.
या घटकांसह आपल्याकडे असेल एक साधी वेबसाइट तयार करण्याचा आधार आम्ही त्या पुढच्या भागात तुम्हाला शिकवू म्हणून त्यातील चांगल्या प्रमाणात तुम्हाला दिसेल. असे समजू या की त्याच्या सर्वात महत्वाच्या घटकांसह सिमेंटिक स्ट्रक्चर यासारखे दिसते:
- त्याच्या नेव्हिगेशन बारसह शीर्षलेख साइटच्या विविध पृष्ठांसाठी.
- लेख किंवा शरीराची जागा ज्यामध्ये आम्ही ब्लॉग पोस्ट तयार करू, आमच्या सारांश किंवा प्रतिमा ठेवू.
- साइडबार किंवा साइडबार अतिरिक्त माहिती ठेवणे.
- तळटीप किंवा पाऊल, जिथे आम्ही साइटच्या सर्वात महत्वाच्या पृष्ठांवर तसेच सामाजिक नेटवर्कच्या चिन्हे (नेहमीच एक उदाहरण म्हणून) दुवे ठेवू.
आपण खाली दिसेल की उदाहरणे आहेत सर्व एका साध्या परंतु मोहक लोगोवर आधारित, एक शीर्षलेख जेथे ते साइटच्या भिन्न पृष्ठांवर नेव्हिगेशन ठेवतात, मध्यभागी मजकूर किंवा प्रतिमेचे वर्चस्व असते आणि मागील परिच्छेदात नमूद केलेल्या घटकांसह तळटीप असते.
आम्ही याची शिफारस करतो आपले डोके तोडू नका आणि सोप्याकडे जा. मुख्य गोष्ट अशी आहे की सेकंदांच्या व्हिज्युअल पासमध्ये ही क्षेत्रे उर्वरित भागांपासून भिन्न आहेत. वेळेसह आम्ही स्वत: ला गुंतागुंत करण्यात आणि इतर जागांवर कार्य करण्यास सक्षम होऊ.
हे आहे एचटीएमएल कोडचे स्पष्ट उदाहरण सर्वात महत्वाच्या घटकांसह:
<!DOCTYPE html>
<html lang='es'>
<head>
<meta charset='UTF-8'/>
<title>HTML Semántico</title>
</head>
<body>
<h1>Crear web es fácil!</h1>
<ul>
<li><a href='#'>Inicio</a></li>
<li><a href='#'>Acerca de</a></li>
<li><a href='#'>Blog</a></li>
<li><a href='#'>Iniciar sesión</a></li>
</ul>
</body>
</html>एचटीएमएल कोडच्या या ओळींसह प्रथम हेडरमध्ये पृष्ठ शीर्षक तयार केले, या प्रकरणात «अर्थपूर्ण एचटीएमएल., सह आम्ही दोन्ही शीर्षक बंद करू , सह शीर्षलेख आणि आम्ही शरीर उघडण्यासाठी मार्ग देऊ .
आम्ही एक होता सह एच 1 मधील प्रथम शीर्षलेख ते बंद करणे , आणि आम्ही आमच्या साइटच्या भिन्न पृष्ठांसाठी नॅव्हिगेशन बार तयार करण्यास मदत करणार्‍या यादीवर जाऊ. आम्ही यासह सूची बंद करतो , आम्ही बंद आणि शेवटी HTML दस्तऐवज .
शेवटाकडे, अंताकडे, नेहमी कागदजत्र उघडा स्लॅश सह संपूर्ण कोडच्या शेवटी बंद करण्यासाठी. दस्तऐवज उघडल्यानंतर, भाषेचा संदर्भ नेहमीच वापरला जातो, जो या प्रकरणात "एसई" सह अ आणि स्पॅनिश आहे .
आपण कोडकडे आणि केव्हाही बारकाईने पाहणे महत्वाचे आहे आपण एखादे फंक्शन उघडता तेव्हा बारसह बंद करा संबंधित
थोडा सीएसएस
आम्ही थोड्या वेळाने सीएसएसमध्ये जाऊ, परंतु पुढे जात असताना आपल्याला समजेल एचटीएमएल स्टाईल कशी करावी. असे समजू की आपण खाली सापडलेल्या त्या सोप्या वेबसाइट्स देण्यासाठी सीएसएस आणि एचटीएमएल एकत्र काम करत आहेत.
एकीकडे आपल्याकडे शीर्षलेख म्हणजे मुख्य भाग म्हणजे त्यावरील लेख किंवा प्रतिमा आणि तळटीप असलेले मुख्य भाग म्हणजे एचटीएमएलचा अर्थपूर्ण वापर असल्यास, सीएसएस मध्ये आम्ही ओळखण्यासाठी «Div» फंक्शन वापरू नंतर डिझाइनमध्ये आवश्यक बदल लागू करण्यासाठी यापैकी प्रत्येक जागेवर.
यासारखे काहीतरी सोपेः
आम्ही Div सह शैली लागू करू शकतो, एक योग्य आणि परिपूर्ण रचना मदत करेल जेणेकरून वेब क्रॉलर आमची सामग्री काय आहे हे अचूकपणे "वाचू" शकतील, म्हणून जर आपण त्या मूलभूत संरचनेचे अनुसरण केले तर आपल्याकडे प्रथम एक चांगली नोकरी आणि बेस असेल.
Un साधे सीएसएस कोड उदाहरण:
h1 {
रंग: पांढरा;
text-align: केंद्र;
}
आम्ही एच 1 आणि मजकूर कॉल करतो आम्ही ते पांढर्‍या रंगात घालू: पांढरा; आणि आम्ही त्यास मध्यभागी «टेक्स्ट अलाइन with सह संरेखित करू. एच 1 कॉल उघडल्यानंतर नेहमी कंसात बंद करा.
चा शिर्षक फोटो ग्रेग राकोझी
मला डिझाईनविषयी खरोखरच आवड आहे, डिझाइनचे जग पाहण्याचे एक चांगले पृष्ठ आहे.
शुभेच्छा.
नमस्कार मित्रांनो, तुम्ही कसे आहात?
मी एचटीएमएल मध्ये एक अगदी साधे वेबपृष्ठ बनवित आहे, आणि मी प्रत्येक प्रकाशनात एक टिप्पणी बॉक्स जोडायला आवडेल. हे कसे करावे याबद्दल आपण मला मार्गदर्शन करू शकता?
आपल्यापैकी ज्यांना तीन बटणे आणि प्रतिमेसह एक अगदी साधे वेब पृष्ठ आवश्यक आहे आणि कोणत्याही परिस्थितीत एखादा खेळाडू, असे काहीतरी खूप उपयुक्त ठरेल.
तथापि मला विश्वास नाही की या माहितीसह मी माझे पृष्ठ तयार करण्यास सक्षम आहे, परंतु कमीतकमी ते आपल्याला कल्पना देते आणि काय शोधावे