← Back to HTML Course | Chapter 3: Page Structure | Lesson 1 of 12

HTML प्रोजेक्ट

एक अकेला webpage बनाना एक single musical chord practice करने जैसा है। यह एक अच्छी शुरुआत है, लेकिन पूरा गाना बजाने के लिए आपको कई chords को साथ लाना पड़ता है। एक complete web प्रोजेक्ट बिल्कुल यही करता है — यह HTML फ़ाइलों, styling documents, और images को एक structured system में व्यवस्थित करता है। एक web प्रोजेक्ट सेट करने का मतलब है एक organized directory बनाना, जहाँ हर फ़ाइल का अपना एक तय जगह हो। आपका homepage secondary tools से लिंक होता है, stylesheets design themes को direct करती हैं, और relative file paths इन सबको आपस में जोड़ते हैं। एक साफ project structure बनाकर, आप सुनिश्चित करते हैं कि आपका पूरा web suite functional, portable बना रहे, और किसी भी पल public web server पर upload करने के लिए तैयार रहे।

In this page:

  1. अपने प्रोजेक्ट फ़ोल्डर को व्यवस्थित करना
  2. Homepage (index.html) बनाना
  3. प्रोजेक्ट Assets को Link करना
  4. Navigation Bar जोड़ना
  5. अपने प्रोजेक्ट को Locally Test करना

अपने प्रोजेक्ट फ़ोल्डर को व्यवस्थित करना

कोड लिखने से पहले, आपको अपना workspace व्यवस्थित करना चाहिए। एक सही web प्रोजेक्ट एक साफ-सुथरे folder structure से शुरू होता है, जहाँ आपका homepage, stylesheets, scripts, और media अलग-अलग folders में रहते हैं।

Note: अपने app के नाम पर एक root directory बनाएं, फिर उसके अंदर css, js, और images नाम के subfolders बनाएं।
Warning: अपने folder और file names के लिए हमेशा lowercase letters का उपयोग करें, ताकि Linux servers पर अपनी site host करते समय paths टूटने से बचें।

उदाहरण: Structuring Your Project Folder

markup 
<!-- Project structure:
  /project
    index.html
    /css
    /js
    /images
-->

Homepage (index.html) बनाना

जब भी visitors आपका domain load करते हैं, हर web server अपने-आप index.html नाम की फ़ाइल खोजता है। यह फ़ाइल आपके पूरे multi-page web प्रोजेक्ट के लिए front door और core hub का काम करती है।

Note: अपनी index.html को साफ और modular रखें, और custom logic को बाहरी script और style फ़ाइलों में डालें।
Warning: अपनी home फ़ाइल को कभी भी uppercase में index.HTML नाम न दें, क्योंकि कई operating systems इसे default homepage के रूप में serve नहीं कर पाएंगे।

उदाहरण: Creating the Homepage (index.html)

markup 
<!-- Save this file as: index.html -->
<!DOCTYPE html>
<html>
</html>

प्रोजेक्ट Assets को Link करना

एक HTML document सिर्फ plain text होता है। अपने प्रोजेक्ट को एक styled app में बदलने के लिए, आपको अपनी बाहरी stylesheets और image folders को link करना होगा। Relative paths यह सुनिश्चित करते हैं कि आपके local assets तब भी link रहें, जब आपका प्रोजेक्ट फ़ोल्डर कहीं और move हो जाए।

Note: अपने root directory के अंदर folders को सही तरीके से link करने के लिए dot-slash से शुरू होने वाले relative file paths का उपयोग करें।
Warning: C:/Users/Projects/styles.css जैसे absolute paths का उपयोग करने से बचें, क्योंकि आपका प्रोजेक्ट online publish होते ही ये links पूरी तरह टूट जाएंगे।

उदाहरण: Linking Project Assets

markup 
<link rel="stylesheet" href="./css/styles.css">
<img src="./images/logo.png" alt="Logo">

Navigation Bar जोड़ना

जैसे-जैसे आपका प्रोजेक्ट एक अकेले tool से बढ़कर एक multi-page utility hub बनता है, आपको एक navigation bar की जरूरत पड़ती है। एक consistent navigation menu आपके HTML documents को आपस में जोड़ता है, जिससे users services के बीच आसानी से आ-जा सकते हैं।

Note: अपने navigation links को semantic nav और ul elements में wrap करें, ताकि search engines आपकी site की structure समझ सकें।
Warning: सुनिश्चित करें कि सभी linked pages वाकई आपकी project directory के अंदर मौजूद हों, ताकि परेशान करने वाली 404 page errors से बचा जा सके।

उदाहरण: Adding a Navigation Bar

markup 
<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
  </ul>
</nav>

अपने प्रोजेक्ट को Locally Test करना

अपना web प्रोजेक्ट चलाने के लिए आपको महंगी web hosting खरीदने की जरूरत नहीं है। आप अपनी index.html फ़ाइल को सीधे किसी भी browser में खोलकर कोड को locally test कर सकते हैं, जिससे आपको ठीक-ठीक पता चल जाता है कि यह online कैसा दिखेगा।

Note: अपने code editor में एक live preview extension install करें, ताकि design में हुए बदलाव टाइप करते ही तुरंत दिख जाएं।
Warning: ध्यान रखें कि local file:// protocols कुछ advanced features जैसे cookie management या active API requests को support नहीं करते।

उदाहरण: Testing Your Project Locally

markup 
<!-- Open this file directly in your browser: file:///path/to/index.html -->
<!DOCTYPE html>
<html>
</html>
Live Example
Related Topics

HTML क्लासेस · HTML आईडी · HTML आइफ्रेम्स · एचटीएमएल जावास्क्रिप्ट

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. अपने code में absolute desktop paths इस्तेमाल करना, जो online publish होने पर styles और images को तोड़ देता है।
  2. filenames में uppercase characters इस्तेमाल करना, जिससे Linux-based web servers पर navigation टूट जाता है।
  3. testing server के बजाय local file:// protocols से user logins जैसी advanced features test करने की कोशिश करना।
चैप्टर सारांश
  • एक complete HTML project को pages, styles, scripts, और images organize करने के लिए structured folders चाहिए होते हैं।
  • हर web project का main entry page lowercase में index.html नाम से होना चाहिए।
  • Relative file paths यह सुनिश्चित करते हैं कि project directory को move या publish करते समय सभी assets आपस में linked रहें।
ब्राउज़र सपोर्ट

Multi-page local और hosted HTML project structures सभी web browsers में supported हैं।

🔒

Chapter Quiz — Complete all 12 topics to unlock

0/12 topics done

Complete these topics first:

← Previous Lesson HTML Background Images Next Lesson → HTML Classes

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.