Inc० अविश्वसनीय रूपमा सरल वेब पृष्ठहरू

वेब
केहि सबैभन्दा प्रख्यात पृष्ठहरू सूचनाको साथ धेरै ओभरलोड हुन्छन्, तर म यसको उल्टो मनपर्दछु: साधारण।

स्पष्टतः यस समूहको महान प्रतिपादक गुगल हो यसको न्यूनतम गृह पृष्ठको साथदेखि जब यो यात्रा शुरू भयो, तर स्पष्टतया यो इन्टरनेट मा मात्र एक मात्र हैन कि सामान सरल राख्न को लागी प्रतिबद्ध छ।

साधारण HTML वेब पृष्ठ उदाहरणहरू

केन रिचमंड

केन रिचमण्ड

केन रिचमण्डले हामीलाई केहि तत्वहरूसँग खेल्ने सरलता देख्दछ, तर राम्रोसँग राखिएको हुन्छ न्यूनतावाद को लागी एक महान भावना दिनुहोस्। उसको लोगो माथिको बाँयामा, ट्विटर र सम्पर्क आइकनहरू दाँया र केन्द्रमा, हडतालउने टाइपोग्राफीको साथ, जुन उहाँ समर्पित हुनुहुन्छ।

वेबमा लिंक: केनरिक मोन्ड

ऐलिस ड्रोगार्ड

ऐलिस ड्रोगार्ड

ऐलिस ड्रोगार्ड तपाइँको लोगो राखिएको संग पनि यो सरल राख्नुहोस् केन्द्रमा, तपाईंको वेबसाइटको मुख्य पृष्ठहरू र फोटोग्राफहरूको श्रृ between्खलाको बीचमा सर्न चार ट्याबहरू उचित रूपमा राख्दछन् ताकि एक झलकमा हामीलाई थाहा हुन्छ कि तपाईं के गर्नुहुन्छ र तपाईं के गर्नुहुन्छ।

वेबमा लिंक: ऐलिस ड्रोगार्ड

जोनाथन ओग्डेन

जोनाथन ओग्डेन

ओगेडन तपाइँको नाम लोगोको रूपमा कत्तिको सरल छ भनेर खेलिरहनुहोस्, सामाजिक नेटवर्कहरू बिना नै ध्यान आकर्षित गर्दछ र उनीहरूको डिजाइनले कार्य गर्दछ ताकि हामी द्रुत रूपमा तिनीहरूमार्फत जान सकौं। एउटा पृष्ठमा यसले सबै कुरा देखाउँदछ जुन महत्त्वपूर्ण छ।

वेबमा लिंक: जोनाथन ओग्डेन

चिडिया

चिडिया

फिन्च पहिले नै टाइपोग्राफी र तीसँग खेल्न अन्य ठाउँमा गइरहेको छ र colors्गहरू जुन यो गर्छ के भव्यता र ज्ञान दर्शाउँछ। केही तत्वहरूको साथ, उसले आफ्नो सबै व्यावसायिकतालाई ध्यानमा राख्दछ। कुन पृष्ठले तपाईंसँग लिंक गरेको छ यसले स्पष्ट पार्दछ।

वेबमा लिंक: चिडिया

एक फरक डिजाइन

एक फरक डिजाइन

यो वेबसाइट फरक खेल। हेडरको साथ एक वालपेपर प्रयोग गर्नुहोस् जहाँबाट हामी मुख्य पृष्ठहरू, तपाईंको फोन र तपाईंको सामाजिक नेटवर्कमा लिंकहरूमा जान सक्दछौं।

वेबमा लिंक: एक फरक डिजाइन

ब्रिजक

ब्रिजक

काईले हामीलाई आफ्नै फिगरको साथ चित्रण गर्दछ एउटा अमूर्त त्रिकोण र एक उपयुक्त रंग प्यालेट निकटता दिन। हामी उहाँको बारेमा अधिक जान्न चाहन्छौं भने सानो आकारमा फन्टको साथ उनले आफ्नो बायोको अंश पनि प्रस्ताव गर्दछ।

वेबमा लिंक: ब्रिजक

ठाडो बगैंचा डिजाइन

ठाडो बगैंचा डिजाइन

अघिल्लो जस्तो, ठाडो बगैंचा डिजाइन एक फोटो तर्फ जान्छ जुन छिटो देखिन्छ ओस्लो एयरपोर्टमा उसको सबैभन्दा राम्रो कामहरू। शीर्षमा हामीसँग er NAV बार »वा नेभिगेसन बार र भाषा बदल्ने सम्भावनाको साथ हेडर छ। लोगोले यसलाई ठाडो ढाँचामा राख्दछ एक धेरै साधारण पृष्ठमा अन्तिम टच दिनको लागि।

वेबमा लिंक: ठाडो बगैंचा डिजाइन

२247 ग्रैड

२247 ग्रैड

२247 ग्रैड मोनोक्रोम र पृष्ठभूमि छवि को साथ खेल्नुहोस् लगभग पूरै अँध्यारो। हेडर फन्ट, पाठ र हेडर भन्दा सानो, समग्र डिजाइनमा ठूलो कन्ट्रास्ट सिर्जना गर्न ठूला अक्षरमा राखिन्छ।

वेबमा लिंक: २247 ग्रैड

यो मजा लिनुहोस्

यो मजा लिनुहोस्

una उत्कृष्ट टाइपोग्राफी प्रामाणिक हुनुको संकेत हुन सक्छ र हामी जान्दछौं कि हामी के गर्छौं। यदि सन्देश सीधा छ भने तपाईले अरू केहि पनि दिनपर्दैन। उनीहरूले यसलाई स्पष्ट बनाउँदछन्: उनीहरू राम्रा अनुप्रयोगहरू र वेबसाइटहरू सिर्जना गर्न मन पराउँछन्। तिनीहरूले परियोजनाहरू र उनीहरूको अध्ययनको लागि अर्को लिंकमा मेल छोड्छन्।

वेबमा लिंक: यो मजा लिनुहोस्

एलिसन हौ

एलिसन हौ

एलिसन हामीलाई लिन्छ अन्य पाठ्यक्रमहरू अघि र अधिक छविहरू समावेश गर्दछ र त्यो बढी "स्त्री" टाइपफेस। उही तपाईंको मुख्य छवि र त्यो हेडरको लागि जान्छ। उनीसँग शपिंगका लागि तरिकाहरू देखाउने कार्ड पेश गर्ने लक्जरी छ।

वेबमा लिंक: एलिसन हौ

पिक्सेलोट

पिक्सेलोट

पिक्सेलोट थोरै पागल हो, तर यसले लेखकको रचनात्मकतालाई पनि स indicates्केत गर्दछ। प्रयोग गर्नुहोस् एक मास्क बनाउन माउस सूचक हामी जहाँ जहाँ भए पनि ब्लर हुन्छ।

वेबमा लिंक: पिक्सेलोट

लिओनेल स्कोलेट्स

लिओनेल स्कोलेट्स

यदि तपाईं चाहानुहुन्छ भने तपाईको रेजुमेलाई अनलाइन बनाउनुहोस् भन्दा बढि केहि पनि छैन, लिओनेलले तपाईंलाई चरणहरू देखाउँदछ। एक उपयुक्त फन्ट, माथिको बाँयामा तपाईंको फोटो, तपाईंको सामाजिक नेटवर्कहरू र तपाईंको अनुभवमा लिंक। केवल सजावटी तत्व ती दुई र horiz्ग फरक रेखाको हुन्।

वेबमा लिंक: लिओनेल स्कोलेट्स

रमणीय समुद्री

रमणीय समुद्री

हामी फर्कन्छौं न्यूनतम को लालित्य को लागी र ती ठूला खाली ठाउँहरू। एक तर्फ हेडर अन्य तत्वहरूबाट धेरै टाढा छ, र अर्को तर्फ ती तत्वहरू यस्तो आकार दिन्छन् कि उनीहरू बीच एक ठूलो दृश्य सद्भाव सिर्जना गर्दछ।

वेबमा लिंक: रमणीय समुद्री

Lebensraum

Lebensraum

तपाईं सबै उदाहरणहरूमा देख्न सक्नुहुन्छ, यो महत्त्वपूर्ण छ हेडर ट्याबहरू विभिन्न पृष्ठहरूमा जान वेबसाइट बाट। टाइपोग्राफी ठूलो महत्त्वको हुन्छ, हेडरको लागि एकसँग खेल्नुहोस् र अर्कोको लागि सान सेरीफको साथ टेक्स्टको लागि खेल्नुहोस् जसले उत्तम कार्य गर्दछ।

वेबमा लिंक: Lebensraum

गुलाबी पोइन्ट

गुलाबी पोइन्ट

रंगहरूको भिन्नताले हामीलाई सबै दृश्यहरूको अलि बढी जटिल वेबमा पुर्‍याउँछ। ती सबै मुख्य तत्वहरू हराइरहेका छैनन् यस समय पृष्ठभूमि छवि र ती दुई सेक्सनका लागि ग्रेडीएन्टहरूसँग खेल्न जुनसँग मुख्य छविको ढाँचाको मुख्य रंगहरू छन्।

वेबमा लिंक: गुलाबी पोइन्ट

IWC

IWC

यसका साथ उत्कृष्ट फोटो एक राम्रो छनौट टाइपफेस र "नायक" तत्व तपाईं यो वेबमा दिन सक्नुहुन्छ। स्लाइडरको साथ यसले कामको अंश देखाउँदछ जुन यसको कन्सेप्टमा एकदम सरल छ।

वेबमा लिंक: IWC

काट्नु काट्नु

काट्नु काट्नु

डिजिटल चित्रणले हामीलाई चोप चोपको साथ लैजान्छ त्यो छविले यसको सबै दृश्य उपस्थिति खान्छ। हेडरमा निलो रंगले वेबमा प्रस्तुत गरिएको सम्पूर्ण छविको साथ ट्यूनमा क्रोमाटिक मानहरू सिर्जना गर्न यसको पोइन्ट दिन्छ।

वेबमा लिंक: काट्नु काट्नु

7 पाइन

7 पाइन

7 पाइन हरियोसँग खेल्छ घरको प्लेटको महान पात्र हुन। बाँकी यसलाई रचना गर्दछ धेरै हरियो र एक सरल हेडरको साथ एक छवि त्यो लोगोले कुनै ध्यान नदिउन जान चाहान्छ।

वेबमा लिंक: 7 पाइन

योग

योग

योगले हामीलाई अन्य दिशाहरूमा लैजान्छ। असक्षम कालो र सेतो, एक धेरै रचनात्मक दृष्टान्त संग खेल्नुहोस् र त्यो बाँकी तत्वहरू र दुई अन्य चित्रहरूसँग मिलेर जान्छ रमाईलो भन्दा बढी दृश्य सिर्जना गर्न। एक वेबसाइट सिर्जना गर्नको लागि उदाहरण हो जुन बाँकीबाट भिन्न छ।

वेबमा लिंक: योग

ह्याटबक्स

ह्याटबक्स

यस वेबसाइटमा निलो प्रमुख रंग हो जसमा सेतोबाट पूर्ण रूपले प्रबुद्ध भएका छविहरूको अभाव छैन र खेल कस्तो हुनेछ। त्यो साइट बिल्डरको थ्रीडीमा त्यो हामी सार्न को रूप मा सर्छ।

वेबमा लिंक: ह्याटबक्स

कारा लिटे

कारा लिटे

कारा जान्छ यसको प्राकृतिक र सुन्दर उपस्थितिको साथ सादगी र न्यूनतमता तपाईंको फोटोमा। बाँकी एउटा पाठ हो जुन हेडरको लागि मुख्य तत्वहरू हुन् र यसलाई खोल्न ह्यामबर्गर बटनको साथ आउँदछ।

वेबमा लिंक: कारा लिटे

Instrinsic स्टुडियो मार्केटिंग

इन्ट्रिन्सिक

Es सबैभन्दा सरल वेबको तर यसले हामीलाई ब्लग बनाउने कुरा देखाउँदछ। रातो र कालो एक धेरै "ब्लग" साइटको ताराहरू हुन्।

वेबमा लिंक: Instrinsic स्टुडियो मार्केटिंग

HTML मा कसरी साधारण वेबसाइट बनाउने

HTML

हामी तपाईंलाई सिकाउन जाँदैछौं HTML मा एक साधारण वेबसाइट बनाउनुहोस् ताकि तपाइँ सबैभन्दा रचनात्मक तत्वहरू जान्नुहुन्छ जुन यसलाई कम्पोज गर्दछ। वेब होस्ट हुनु आवश्यक पर्दछ जहाँ हामी कोड लोड गर्न सक्दछौं र CSS मा केही ट्वीकहरू छन्, तर आउनुहोस्, यी सिद्धान्तहरू हुन् जुन HTML मा हाम्रो यात्रा सुरु गर्नका लागि छन्।

केहि देखेको छ साधारण वेब उदाहरणहरू जुन तपाईं आफ्नो टाउको एक धेरै तोड्न बिना आफ्नै डिजाईनहरू बनाउन पर्याप्त आफूलाई प्रेरित गर्न सक्नुहुनेछ। कहिलेकाँही सरलले जटिल चीजहरूमा हामीलाई जटिल बनाउन भन्दा राम्रो प्रभाव सिर्जना गर्दछ। तपाईं देख्नुहुनेछ कि धेरै जसो मामिलाहरूमा साधारण कार्यहरू राम्रोसँग गर्दछन्। त्यसको लागि जानुहोस्।

HTML मा एक साधारण वेबसाइट बनाउने यो पहिले जस्तो देखिन्छ सजिलो छ। एक वेबसाइट हेडर, शरीर समावेश गर्दछ वा सामग्री र फुटर वा फुटर मुख्य तत्वहरूको रूपमा। हामी तिनीहरूलाई यसरी वर्गीकृत गर्न सक्छौं:

  • Documentos: सबै कागजातहरू जुन हामी सिर्जना गर्न गइरहेका छौं एकको साथ हुनु पर्छ । हामी एक संग खोल्छौं र सँधै बन्द हुन्छ
  • शरीर वा शरीर: कागजातको देखिने भाग बीच हो Y
  • हेडरहरू: ती H1, H2, H3 द्वारा चिनिन्छ ... हामी एक संग शुरू गर्छौं र हामी एक संग बन्द । भित्र रहेको पाठ हेडरको रूपमा देखा पर्नेछ र यसको नम्बरमा निर्भर गर्दै यसले सानो वा ठूलो आकारमा गर्दछ।
  • अनुच्छेद: अनुच्छेद एक भित्र बन्द छ र बन्द हुन्छ
  • लिंक: यसको स्पष्ट उदाहरण क्रिएटिभ्स अनलाईनमा लिंक हो
  • छविहरू: हामी तिनीहरूलाई लेबलबाट परिभाषित गर्दछौं । एक उदाहरण हुनेछ । हामी उद्धरण चिह्नहरूको बिच छवि छनौट गर्दछौं र वैकल्पिक पाठको लागि एक Alt प्रयोग गर्छौं जुन SEOको लागि आवश्यक छ।
  • सूचीहरू: हामीसँग सूचीहरू परिभाषित गर्दछौं एक गन्दा र संग सफा लागि। सूची आईटमहरू प्रयोग गरीन्छ । तिनीहरूलाई पट्टीको साथ बन्द गर्न सधैं सम्झनुहोस्।

HTML

यी तत्वहरूको साथ हामीसँग हुनेछ एक साधारण वेबसाइट बनाउन को लागी आधार हामी तपाईलाई अर्को भागमा पढाउने छनौट को राम्रो संख्यामा तपाईले देख्नुहुनेछ। मानौं कि यसको मुख्य तत्वसँग सिमेंस्टिक संरचना यस जस्तो देखिन्छ:

  • यसको नेभिगेसन बारको साथ हेडर साइट को विभिन्न पृष्ठहरु को लागी।
  • लेख वा बडि स्पेस जसमा हामी ब्लग प्रविष्टि सिर्जना गर्न सक्दछौं, हाम्रो पाठ्यक्रम वा छवि राख्नुहोस्।
  • साइडबार वा साइडबार थप जानकारी राख्न।
  • फुटर वा खुट्टाजहाँ हामी साइटको महत्त्वपूर्ण पृष्ठहरूमा लिंक राख्दछौं साथै सामाजिक नेटवर्कहरूका आइकनहरू (सँधै उदाहरणको रूपमा)।

उदाहरणहरूमा जुन तपाईं तल देख्नुहुनेछ सबै एक साधारण तर सुरुचिपूर्ण लोगो मा आधारित छ, हेडर जहाँ उनीहरूले साइटको बिभिन्न पृष्ठहरूमा नेभिगेशन राख्छन्, मध्यवर्ती स्पेस पाठ वा छवि द्वारा वर्गीकृत हुन्छ र अघिल्लो अनुच्छेदमा उल्लेखित तत्वहरू सहित फुटर गर्दछ।

हामी सुझाव दिन्छौं आफ्नो टाउको नतोड्नुहोस् र साधारणमा जानुहोस्। मुख्य कुरा यो हो कि यी क्षेत्रहरू सेकेन्डको भिजुअल पासमा बाँकीबाट भिन्न छन्। समयको साथ हामी आफैंलाई जटिल बनाउन र अन्य स्थानहरूमा काम गर्न सक्षम हुनेछौं।

यो हो HTML कोडको स्पष्ट उदाहरण सब भन्दा महत्त्वपूर्ण तत्व संग:

<!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>

HTML कोडका यी लाइनहरूसँग हामीसँग हुनेछौं पहिले हेडरमा पृष्ठ शीर्षक सिर्जना गरियो, यस अवस्थामा «सिमेन्टिक HTML», हामी सँगै दुबै शीर्षक बन्द गर्नेछौं , हेडरको साथ र हामी शरीर खोल्नको लागि बाटो दिनेछौं ।

हामीसँग छ साथ H1 मा पहिलो हेडर यसको साथ बन्द गर्न , र हामी एक सूचीमा जान्छौं जसले हामीलाई हाम्रो साइटको बिभिन्न पृष्ठहरूका लागि नेभिगेसन बार सिर्जना गर्न मद्दत गर्दछ। हामीसँग सूची बन्द गर्छौं , हामी बन्द र अन्तमा html कागजातको साथ ।

अन्तमा, सँधै कागजात खोल्नुहोस् स्ल्याशको साथ पूरै कोडको अन्त्यमा यसलाई बन्द गर्न। कागजात खोले पछि, भाषा को सन्दर्भ सँधै प्रयोग गरिन्छ, जुन यस अवस्थामा स्पानिश is es« को साथ र ।

यो महत्वपूर्ण छ कि तपाईले कोडलाई कहिले पनि हेर्ने हो भने तपाईले फंक्शन खोल्नुहुन्छ यसलाई बारको साथ बन्द गर्नुहोस् अनुरूप

CSS को एक बिट

हामी सीएसएसमा थोरै जान्छौं, तर त्यस पस्ने क्रममा जुन तपाईं बुझ्नुहुन्छ HTML शैली कसरी बनाउने। मानौं कि CSS र HTML सँगै जानुहोस् ती सरल वेबसाइटहरू दिनुहोस् जुन तपाईले तल पाउनुहुनेछ।

यदि एक तर्फ हामीसँग हेडिमेटर वा हेडर, शरीर वा यसको लेख वा छवि र फुटर सहितको शरीरको लागि HTML को प्रयोगात्मक प्रयोग छ, CSS मा हामी identify Div »प्रकार्य पहिचान गर्न प्रयोग गर्दछौं यी प्रत्येक रिक्त स्थानमा पछि डिजाइनमा आवश्यक परिवर्तनहरू लागू गर्न।

केहि साधारण को रूप मा:

वेब शब्दावली

जबकि हामी Div संग शैलीहरू लागू गर्न सक्छौं, एक उपयुक्त र उत्तम संरचना मद्दत गर्दछ ताकि वेब क्रोलरहरूले हाम्रो सामग्रीको बारेमा केहि राम्रोसँग "पढ्न" सक्दछन्, त्यसैले यदि हामी त्यो आधारभूत संरचना अनुसरण गर्छौं भने, हामीसँग पहिले ठूलो काम र आधार हुनेछ।

Un साधारण CSS कोड उदाहरण:

h1 {
रंग: सेतो;
पाठ-पङ्क्तिबद्ध गर्नुहोस्: केन्द्र;
}

हामी H1 र पाठ कल गर्दछौं हामी यसलाई सेतोमा रंगमा राख्नेछौं: सेतो; र हामी यसलाई to Text align with को साथ केन्द्रमा प will्क्तिबद्ध गर्नेछौं। H1 कल खोल्ने पछि सधैं वर्ग कोष्ठकको साथ बन्द गर्नुहोस्।

को हेडर फोटो ग्रेग rakozy


लेखको सामग्री हाम्रो सिद्धान्तहरूको पालना गर्दछ सम्पादकीय नैतिकता। त्रुटि क्लिक गर्न रिपोर्ट गर्नुहोस् यहाँ.

२ टिप्पणीहरू, तपाइँको छोड्नुहोस्

तपाइँको टिप्पणी छोड्नुहोस्

तपाईंको ईमेल ठेगाना प्रकाशित हुनेछैन। आवश्यक फिल्डहरू चिन्ह लगाइएको छ *

*

*

  1. डाटाका लागि उत्तरदायी: मिगुएल gelन्गल ग्याटन
  2. डाटाको उद्देश्य: नियन्त्रण स्पाम, टिप्पणी प्रबन्धन।
  3. वैधानिकता: तपाईंको सहमति
  4. डाटाको सञ्चार: डाटा कानुनी बाध्यता बाहेक तेस्रो पक्षलाई सूचित गरिने छैन।
  5. डाटा भण्डारण: डाटाबेस ओसीन्टस नेटवर्क (EU) द्वारा होस्ट गरिएको
  6. अधिकार: कुनै पनि समयमा तपाईं सीमित गर्न सक्नुहुनेछ, पुन: प्राप्ति र तपाईंको जानकारी मेटाउन।

  1.   क्रिस्टोफर - वेबसाइट भन्यो

    म पनि डिजाइनको बारेमा साँच्चिकै उत्साहित छु, डिजाईनको विश्व हेर्नका लागि राम्रो पृष्ठ।

    शुभेक्षा सहित।

  2.   जर्ज भन्यो

    नमस्ते साथीहरु, कस्तो छ?

    म html मा एक धेरै साधारण वेब पृष्ठ बनाउँदैछु, र म प्रत्येक प्रकाशनमा टिप्पणी बाकस थप्न चाहान्छु। के तपाइँ मलाई यो गर्न को लागी मार्गदर्शन गर्न सक्नुहुन्छ?

  3.   इमर्सनले भन्यो

    हामी मध्ये जो तीन बटन र एक छवि को साथ एक धेरै साधारण वेब पृष्ठ को आवश्यकता छ, र कुनै पनि केस मा एक प्लेयर, यो केहि धेरै उपयोगी हुनेछ।
    जहाँसम्म म विश्वास गर्दिन कि यो जानकारीको साथ म आफ्नो पृष्ठ निर्माण गर्न सक्षम छु, तर कम्तिमा यसले तपाईंलाई विचारहरू दिन्छ र के खोज्नको लागि दिन्छ।