वेब डिज़ाइन में HTML सूचियों का शानदार उपयोग

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

इस पोस्ट में मैं विभिन्न प्रकार की HTML सूचियों की शुरुआत करूंगा, उन्हें डिजाइन करने की युक्तियों के साथ, विशेषकर कैसे अपनी सूची में एक अद्वितीय बढ़त जोड़ें. इसके अलावा, मैं आपको शानदार सूची डिज़ाइन वाली वेबसाइटों के कुछ उदाहरणों के माध्यम से ले जाऊंगा, और अंततः आपको अच्छी तरह से डिज़ाइन की गई HTML सूचियों वाली वेबसाइटों की एक सूची मिलेगी। आपकी सादी दिखने वाली सूचियों को अद्वितीय बनाने के तरीके पर कोई अधिक संदेह नहीं है, और चलो आज उनसे सबसे अधिक बनाने की शुरुआत करते हैं!

लिस्टिंग के तत्व

वेब डिज़ाइनर लगातार एक से एक बैंडवैगन से कूद रहे हैं, इस प्रकार समय के साथ वेबसाइट शैलियों में बदलाव हो रहा है, लेकिन सूचियों ने समय की कसौटी पर खड़ा किया है और वर्ल्ड वाइड वेब के भविष्य के नवाचार में बहुत अच्छी तरह से चारों ओर हो सकता है.

उदाहरणों की जांच करने से पहले, मैं HTML सूचियों के साथ कुछ बिंदुओं को कवर करना चाहता हूं। कुछ अलग-अलग प्रकार की सूचियाँ हैं जिनका उपयोग आप अपने स्वयं के डिजाइन कार्य में कर सकते हैं। अधिकांश वेब डिजाइनर इस पर ध्यान केंद्रित करते हैं अव्यवस्थित सूची जो एक के साथ खोले जाते हैं

टैग, लेकिन दो अन्य कम लोकप्रिय विविधताएं भी हैं: सूचियों का आदेश दिया तथा डेटा परिभाषाएँ. मैं नीचे और अधिक विवरणों में गया हूं.

अनियंत्रित सूची (

)

संभवतः HTML4 / HTML5 मानकों में सबसे अधिक उपयोग किए जाने वाले तत्वों में से एक है। अनियंत्रित सूचियाँ, आदेशित सूची के समान डेटा का उत्पादन करेंगी, हालाँकि आप किसी भी संख्यात्मक मार्कर को साइड में नहीं देखेंगे. इसके बजाय प्रत्येक आइटम को एक दिया जाता है छोटा वृत्त या डिस्क और एक नई लाइन पर टूट गया। यह आइकन सूची-शैली-प्रकार की संपत्ति के साथ भी बदला जा सकता है सीएसएस में पाया.

नीचे अनारक्षित सूची का उदाहरण कोड है:

 
 
वस्तु 1
 
आइटम 2
 
मद ३
 
 

अव्यवस्थित सूचियाँ भवन निर्माण का अचूक उपाय हैं नेविगेशन लिंक. चूंकि आप आसानी से कर सकते हैं किसी भी सूची आइटम के भीतर संपूर्ण सूची यह है उप-नेविगेशन लिंक बनाने के लिए सरल मामला भी। सूची शैली को हटाने के बाद आपको एक खाली आइटम तत्व के साथ छोड़ दिया जाएगा। यहां से आप अपने पेज पर ब्लॉक तत्वों के रूप में प्रकट होने के लिए एंकर लिंक को स्टाइल कर सकते हैं, इस प्रकार नेविगेशन मेनू डिज़ाइन को भर सकते हैं, और कुछ jQuery कोड के साथ आप अपनी साइट के लिए एक सुंदर हेडर डाल सकते हैं।.

आमतौर पर आप वेब लेखों या इंस्टॉलेशन निर्देशों के बीच में अनियंत्रित सूचियां पाएंगे। गौर कीजिए कि Google और अन्य खोज बॉट आपके पृष्ठ की सामग्री को किसी भी तरह से संसाधित नहीं करते हैं, तो आपका एसईओ प्रभावित नहीं होना चाहिए, भले ही आप किस प्रकार की सूची चुनें.

आदेशित सूचियाँ (

)

जब आपको डेटा का एक सेट ऑर्डर करने की आवश्यकता होती है, तो खरोंच से अपना स्वयं का लेआउट ढांचा स्थापित करना संभव है, लेकिन इस तरह आपको हाथ से प्रत्येक इंक्रीमेंट नंबर जोड़ना होगा, जो थकाऊ हो सकता है। ऑर्डर की गई सूचियां बहुत अच्छी हैं गिने-चुने कार्यों को कतार में रखना बिना किसी पेंच के। आपके आंतरिक सूची आइटम का क्रम (

• ) डिक्टेट करेगा कि डेटा कैसे प्रस्तुत किया जाता है.

  नीचे दी गई सूची का उदाहरण कोड है:

   
   
  वस्तु 1
   
  आइटम 2
   
  मद ३
   
   

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

  डेटा परिभाषा सूची (

  )

  परिभाषा सूचियाँ अब बहुत बार नहीं देखी जाती हैं (जैसे वे कभी लोकप्रिय नहीं थीं)। वे वेब डिजाइनरों के साथ लिंक या बॉक्स सामग्री के जटिल प्रारूप बनाते हुए देखे जाते थे। डेटा सूची टैग (

  ) आज कोडर्स द्वारा अक्सर गलत समझा जाता है। HTML4.01 स्पेक्स में डेटा सूचियों का उपयोग किया गया था उनके विवरण के साथ जोड़ी आइटम. इन्हें डेफिनिशन लिस्ट कहा जाता था.

  नीचे डेटा परिभाषा सूची का उदाहरण कोड है:

   
   
  वस्तु 1
   
  विवरण
   
  आइटम 2
   
  विवरण
   
  मद ३
   
  विवरण
   
   

  हालाँकि नई HTML5 स्पेक्स के साथ डेटा सूचियों को एक ट्रांसक्रिप्शन दिया गया है। आप तत्वों का उपयोग कैसे करते हैं, इसमें सिंटैक्स के साथ कोई अंतर नहीं है, हालांकि उनके उद्देश्य को अपडेट किया गया है विवरण सूची जिसमें एक या अधिक डेटा शब्द होते हैं (

  ) एक या अधिक डेटा परिभाषाओं के बाद (

  ).

  HTML5 डॉक्टर के लेख का एक मजबूत उदाहरण है मेटाडेटा स्वरूपित सूची. एक के अंदर एक डीएल सूची तत्व आप चाहते हैं एक शब्द निर्धारित करें, जैसे कि आपका नाम, उसके बाद प्रत्येक परिभाषा टैग डेटा का वर्णन कर सकता है आपके बारे में, संभवतः आपकी आयु, व्यवसाय, वर्तमान शहर / शहर, आदि कुंजी / मान युग्म के साथ डेटा का कोई भी सेट विवरण सूची में अच्छी तरह से फिट बैठता है. आप एक सूची में एक से अधिक डेटा शब्द का उपयोग कर सकते हैं, लेकिन W3C कहता है कि प्रत्येक पद अद्वितीय होना चाहिए सूची मैं.

  अब जब हमने 3 लोकप्रिय सूची शैलियों को नीचे कर लिया है, तो कुछ उदाहरणों पर चलते हैं! वेब डिजाइनरों ने हाल के वर्षों में अपनी सूचियों के साथ बहुत रचनात्मक प्राप्त किया है। मैंने सूची के उनके रचनात्मक उपयोग पर विशेष ध्यान देने के साथ नीचे अपनी पसंदीदा वेबसाइटों में से 7 को सूचीबद्ध किया है.

  सरल अनियंत्रित सूची नेविगेशन

  आधुनिक सीएसएस तकनीकों के साथ निर्माण के लिए नेविगेशन मेनू बहुत सरल है। यही कारण है कि अव्यवस्थित सूचियाँ और यहां तक ​​कि सूचियाँ भी एक लोकप्रिय विकल्प बन गई हैं। इसका एक पसंदीदा उदाहरण सोशल मीडिया ब्लॉग, Mashable पर दिखाई देता है.

  

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

  इसके ठीक नीचे आपको उनके उप नेविगेशन लिंक दिखाई देंगे। यह नेविगेशन मेनू ब्लॉग श्रेणियों जैसे सोशल मीडिया या टेक की ओर जाता है। दोनों अनियंत्रित सूची एक में निहित हैं एचटीएमएल 5