एक अकेला 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 करने के लिए तैयार रहे।
कोड लिखने से पहले, आपको अपना 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 टूटने से बचें।
जब भी 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 पूरी तरह टूट जाएंगे।
जैसे-जैसे आपका प्रोजेक्ट एक अकेले 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 से बचा जा सके।
अपना 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>
{# 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. #}