HTML, CSS और PHP: अल्टीमेट चीट शीट

द्वारा लिखित

📥 डाउनलोड करें मेरा HTML, CSS और PHP चादरों को धोखा देते हैं, इन तीन कोडिंग भाषाओं के बारे में जानने और याद रखने के लिए आपको जो कुछ भी चाहिए, उसे पूरा करें।

कोडिंग की कला को सभी टैग्स, सिंटैक्स, और प्रोग्रामिंग भाषाओं के अन्य तत्वों के साथ पूरी तरह से मास्टर करने में कई साल लग सकते हैं।

यहां तक ​​​​कि अधिक अनुभवी डेवलपर्स भी विशेष कार्यों के लिए सही सिंटैक्स को भूलने के जाल में पड़ सकते हैं। जैसे, अधिक हरे रंग की अपेक्षा करना अवास्तविक है वेब डेवलपर्स कला की एक निर्दोष समझ रखने के लिए।

यही कारण है HTML, CSS और PHP के लिए शीट को धोखा देना आप कितने समय से अभ्यास कर रहे हैं, इस पर ध्यान दिए बिना अत्यंत उपयोगी हैं। यह सही कमांड और सिंटैक्स खोजने के लिए एक त्वरित मार्गदर्शिका के रूप में कार्य करता है, जिससे आप वास्तविक वेब विकास पर ध्यान केंद्रित कर सकते हैं।

नीचे, आपको अपने कोडिंग प्रयासों में सहायता करने के लिए त्वरित रिफ्रेशर से पहले नेत्रहीन इच्छुक चीट शीट मिलेंगे। मैंने इसे आपकी सुविधा के लिए आसानी से बुकमार्क, सहेजे या मुद्रित करने के लिए भी बनाया है।

HTML क्या है?

HTML हाइपरटेक्स्ट मार्कअप लैंग्वेज के लिए है - एक कोड जिसका उपयोग वेब पेज और उसकी सामग्री के लिए संरचना बनाने के लिए किया जाता है।

यह मार्कअप भाषा उन तत्वों की एक श्रृंखला से युक्त है जो सामग्री को एक निश्चित तरीके से प्रदर्शित करने या कार्य करने के लिए उपयोग किया जाता है और हर वेबसाइट के फ्रंट-एंड कोड का एक प्रमुख हिस्सा है।

HTML वेब पेजों की संरचना का वर्णन करने के लिए भाषा है ... HTML के साथ, लेखक मार्कअप का उपयोग करके पृष्ठों की संरचना का वर्णन करते हैं। सामग्री के भाषा लेबल के तत्व जैसे अनुच्छेद, सूची, तालिका, और इसी तरह। - W3.org से

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

द्वारा नोट W3कुछ अन्य चीजों में HTML आपको शामिल करने की अनुमति देता है:

  • के साथ ऑनलाइन दस्तावेज़ प्रकाशित करना शीर्षकों, पाठ, तालिकाओं, सूचियों, फ़ोटो, आदि
  • के माध्यम से एक बटन के क्लिक पर ऑनलाइन जानकारी प्राप्त करना हाइपरटेक्स्ट लिंक.
  • डिजाइनिंग रूपों दूरस्थ सेवाओं के साथ लेनदेन करने के लिए जानकारी के लिए खोज करें, आरक्षण करें, या उत्पादों का ऑर्डर करें, अन्य कार्यों के बीच।
  • सहित स्प्रेडशीट, वीडियो क्लिप और अन्य मीडिया और आपके दस्तावेजों में पहले से ही आवेदन।

तो अगर आप लाइन बनाने के लिए थे "मेरा कुत्ता बहुत प्यारा है" अपने आप से खड़े होकर, आप यह निर्दिष्ट कर सकते हैं कि यह पैराग्राफ टैग (इसे बाद में और अधिक) में संलग्न करके एक पैराग्राफ है, जो इस प्रकार दिखेगा: मेरा कुत्ता बहुत प्यारा है

HTML और HTML5 में क्या अंतर है?

, नाम से पता चलता है HTML5 HTML मानक का पांचवा संस्करण है। यह भाषा में वीडियो और ऑडियो के एकीकरण का समर्थन करता है, जो तीसरे पक्ष के प्लगइन्स और तत्वों की आवश्यकता को कम करता है।

नीचे HTML और HTML5 के बीच मुख्य अंतर हैं:

एचटीएमएल

  • फ्लैश प्लेयर समर्थन के बिना ऑडियो और वीडियो का समर्थन नहीं करता है।
  • अस्थायी डेटा संग्रहीत करने के लिए कुकीज़ का उपयोग करता है।
  • JavaScipt को ब्राउज़र में चलने की अनुमति नहीं देता है।
  • वीएमएल, सिल्वर-लाइट और फ्लैश जैसी विभिन्न तकनीकों का उपयोग करके वेक्टर ग्राफिक्स की अनुमति देता है।
  • ड्रैग एंड ड्रॉप प्रभाव की अनुमति नहीं देता है।
  • सभी पुराने ब्राउज़रों के साथ काम करता है।
  • कम मोबाइल के अनुकूल।
  • Doctype घोषणा लंबी और जटिल है।
  • इसमें एनएवी और हेडर जैसे तत्व नहीं हैं, साथ ही वर्णसेट, ए . जैसी विशेषताएं भी नहीं हैंsync, और पिंग।
  • एक ब्राउज़र का उपयोग करके उपयोगकर्ताओं के सच्चे जियलोकेशन प्राप्त करना बहुत कठिन है।
  • गलत सिंटैक्स को हैंडल नहीं कर सकता.

HTML5

  • के उपयोग के साथ ऑडियो और वीडियो नियंत्रण का समर्थन करता है तथा टैग।
  • ऑफ़लाइन डेटा संग्रहीत करने के लिए SQL डेटाबेस और एप्लिकेशन कैश का उपयोग करता है।
  • जावास्क्रिप्ट को जेएस वेब कार्यकर्ता एपीआई के उपयोग के साथ पृष्ठभूमि में काम करने की अनुमति देता है।
  • वेक्टर ग्राफिक्स एचटीएमएल 5 का एक मूलभूत हिस्सा है, जो एसवीजी और कैनवास की तरह है।
  • खींचें और ड्रॉप प्रभाव की अनुमति देता है।
  • आकृतियों को खींचना संभव बनाएं।
  • फ़ायरफ़ॉक्स, मोज़िला, क्रोम और सफारी जैसे सभी नए ब्राउज़रों का समर्थन करता है।
  • अधिक मोबाइल के अनुकूल।
  • Doctype घोषणा सरल और आसान है।
  • वेब संरचनाओं जैसे एनएवी, हेडर और फुटर के लिए नए तत्व हैं, और इसमें चारसेट की विशेषताएं भी हैं, एsync, और पिंग।
  • चरित्र एन्कोडिंग को सरल और आसान बनाता है।
  • JS GeoLocation API का उपयोग करके उपयोगकर्ता GeoLocation के ट्रैकिंग के लिए अनुमति देता है।
  • गलत सिंटैक्स को संभालने में सक्षम।
 

इसके अतिरिक्त, HTML के कई तत्व हैं जो या तो संशोधित किए गए हैं या HTML5 से हटा दिए गए हैं। इसमें शामिल है:

  • - में परिवर्तित किया गया
  • - में परिवर्तित किया गया
  • - में परिवर्तित किया गया
  • - हटा दिया
  • - हटा दिया
  • - हटा दिया
  • - कोई नया टैग नहीं। सीएसएस का उपयोग करता है।
  • - कोई नया टैग नहीं। सीएसएस का उपयोग करता है।
  • - कोई नया टैग नहीं। सीएसएस का उपयोग करता है।
  • - कोई नया टैग नहीं। सीएसएस का उपयोग करता है।
  • - कोई नया टैग नहीं। सीएसएस का उपयोग करता है।

इस बीच, HTML5 में कई नए जोड़े गए तत्व भी शामिल हैं। इसमें शामिल है:

 

HTML5 उदाहरण (कोड PlayGround)

शब्दार्थ संरचना उदाहरण

एचटीएमएल 5 में कुछ अर्थ तत्व होते हैं जिनका उपयोग किसी वेब पेज के विभिन्न भागों को परिभाषित करने के लिए किया जा सकता है। यहाँ सबसे आम हैं:

html5 शब्दार्थ संरचना के तत्व
स्रोत: w3schools.com
 

हैडर

<header>
  <h1>Guide to Search Engines</h1>
</header>

नव

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
 

अनुभाग

<section>
  <h2>Internet Browsers</h2>
  <p>Google Chrome, Mozilla Firefox, Internet Explorer, Safari and Opera dominate the browser market.</p>
</section>

लेख

<article>
  <h3>Google Chrome</h3>
  <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>
 

एक तरफ (साइडबार)

<p>Google Chrome is a cross-platform web browser developed by Google.</p>

<aside>
  <h4>History of Mozilla</h4>
  <p>Mozilla is a free software community founded in 1998.</p>
</aside>

फ़ुटबाल

<footer>
  <p>Copyright Example.com. Read our <a href="#">privacy policy</a>.</p>
</footer>
 

मूल पाठ प्रारूपण उदाहरण

हेडिंग सेवा

<h1>Heading level 1</h1>
 <h2>Heading level 2</h2>
  <h3>Heading level 3</h3>
   <h4>Heading level 4</h4>
    <h5>Heading level 5</h5>
     <h6>Heading level 6</h6>

अनुच्छेद (( ))

<p>Paragraph of text with a sentence of words.</p>

<p>Paragraph of text with a word that has <em>emphasis</em>.</p>

<p>Paragraph of text with a word that has <strong>importance</strong>.</p>
 

अक्रमित और सूची का आदेश दिया

<ul>
  <li>HTML5</li>
  <li>CSS3</li>
  <li>PHP</li>
</ul>

<ol>
  <li>HTML5</li>
  <li>CSS3</li>
  <li>PHP</li>
</ol>

Blockquote और हवाला देते हैं

<blockquote cite="https://www.huxley.net/bnw/four.html">
  <p>Words can be like X-rays, if you use them properly – they'll go through anything. You read and you're pierced.</p>
</blockquote>
  <cite>– Aldous Huxley, Brave New World</cite>
 

संपर्क

<p>Search for it on <a href="https://www.google.com/" title="Google search engine">Google</a>

बटन

<button name="button">I am a Button. Click me!</button>
 

रेखा अवरोध

<p>The line break tag produces a<br> line break in<br> text (carriage-return)</p>

क्षैतिज रेखा

<p>This is the first paragraph of text.</p><hr><p>This is second paragraph of text.</p>
 

पता

<address>
Acme Inc<br>
PO Box 555, New York, USA<br>
Call us: <a href="tel:+1-555-555-555">+1-555-555-555</a><br>
Email us: <a href="mailto:[email protected]">[email protected]</a>
</address>

सबस्क्रिप्ट और सुपरस्क्रिप्ट

<p>The chemical formula of water is H<sub>2</sub>O</p>

<p>This text is <sup>superscripted</sup></p>
 

संक्षिप्त

<p><abbr title="Hypertext Markup Language">HTML</abbr> is easy to learn.</p>

कोड

<p>This is normal text. <code>This is code.</code> This is normal text.</p>
 

समय

<p>The movie starts at <time>20:00</time>.</p>

हटाए गए

<p>I am <del>wrong</del> right, you are <del>right</del> wrong.</p>
 

टेबल उदाहरण

टेबल सिर, शरीर और पैर का उदाहरण

<table>
<thead>
     <tr> ...table header... </tr>
</thead>
<tfoot>
     <tr> ...table footer... </tr>
</tfoot>
<tbody>
     <tr> ...first row... </tr>
     <tr> ...second row... </tr>
</tbody>
<tbody>
     <tr> ...first row... </tr>
     <tr> ...second row... </tr>
     <tr> ...third row... </tr>
</tbody>
</table>

तालिका शीर्षक, पंक्तियाँ और डेटा उदाहरण

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
    <td>34</td>
  </tr>
</table>
 

मीडिया उदाहरण

छवि

<img src="images/dinosaur.png" 
     alt="The head and torso of a dinosaur skeleton;it has a large head with long sharp teeth"/>

चित्र

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp">
  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>
 

आकृति

<figure>
    <img src="/images/frog.png" alt="Tree frog" />
    <figcaption>Tree frog by David Clode on Unsplash</figcaption>
</figure>

वीडियो

<video controls width="400" height="400" autoplay loop muted poster="poster.png">
  <source src="rabbit.mp4" type="video/mp4">
  <source src="rabbit.webm" type="video/webm">
  <source src="rabbit.ogg" type="video/ogg"> 
  <source src="rabbit.mov" type="video/quicktime">
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit.mp4">link to the video</a> instead.</p>
</video>
 

HTML धोखा शीट को पूरा करें

चाहे आप एक अनुभवी डेवलपर हों या कोई ऐसा व्यक्ति जो उद्योग में अपने पैरों को गीला करना चाहता हो, यह हमेशा एक होने में मदद करता है एचटीएमएल धोखा शीट आसान। और मैंने एक ऐसा डिज़ाइन किया है जो हर कदम पर आपकी मदद कर सकता है।

HTML धोखा देने वाली शीट

 

HTML धोखा शीट डाउनलोड करें

 

CSS क्या है?

कैस्केडिंग स्टाइल शीट्स या सीएसएस वर्णन करता है कि HTML तत्वों को स्क्रीन पर कैसे प्रदर्शित किया जाएगा। क्योंकि यह एक ही समय में कई पृष्ठों के लेआउट को नियंत्रित कर सकता है, यह आपका बहुत समय और प्रयास बचा सकता है।

सीएसएस वेब पेजों की प्रस्तुति का वर्णन करने के लिए भाषा है, जिसमें रंग, लेआउट और फोंट शामिल हैं। यह विभिन्न प्रकार के उपकरणों, जैसे बड़ी स्क्रीन, छोटी स्क्रीन या प्रिंटर के लिए प्रस्तुति को अनुकूलित करने की अनुमति देता है। - W3.org से

HTML और CSS में क्या अंतर है?

जबकि HTML और CSS दोनों वेबपेज और एप्लिकेशन बनाने के लिए उपयोग की जाने वाली भाषाएं हैं, उनके अलग-अलग कार्य हैं।

HTML वह है जो आप संरचना और सामग्री को वेबपेज पर प्रदर्शित करने के लिए उपयोग करते हैं।

दूसरी ओर, सीएसएस का उपयोग संशोधन के लिए किया जाता है वेब डिजाइन वेबपृष्ठ पर HTML तत्वों (लेआउट, दृश्य प्रभाव और पृष्ठभूमि रंग सहित)।

HTML संरचना और सामग्री बनाता है, CSS डिजाइन या शैली करता है। साथ में, HTML और CSS एक वेबपेज इंटरफ़ेस बनाते हैं।

CSS Syntax क्या है?

सीएसएस सिंटेक्स एक चयनकर्ता और एक घोषणा ब्लॉक से बना है।

चयनकर्ता HTML तत्व को स्टाइल करने के लिए निर्धारित करता है, जबकि घोषणा ब्लॉक में सीएसएस के एक या एक से अधिक घोषणा या जोड़े एक संपत्ति का नाम और उनके बीच एक बृहदान्त्र के साथ एक मूल्य होता है।

घोषणाओं को अर्धविरामों द्वारा अलग किया जाता है और घोषणा खंड हमेशा घुंघराले ब्रेसिज़ में संलग्न होते हैं।

उदाहरण के लिए, यदि आप अपने शीर्ष 1 को देखने के तरीके को संशोधित करना चाहते हैं, तो आपका CSS सिंटैक्स कुछ इस तरह दिखाई देगा: h1 {color: red; font-size: 16pc;}

पूरा CSS चीट शीट

सीएसएस का उपयोग करना काफी आसान है। चुनौती यह है कि बहुत सारे चयनकर्ता और घोषणाएं हैं कि उन सभी को याद रखना असंभव नहीं तो मुश्किल है। हालाँकि, आपको उन्हें याद करने की ज़रूरत नहीं है।

यहाँ एक है CSS और CSS3 के लिए शीट को धोखा देना कि आप किसी भी समय उपयोग कर सकते हैं।

सीएसएस धोखा शीट

 

डाउनलोड सीएसएस धोखा शीट

 

PHP क्या है?

PHP हाइपरटेक्स्ट प्रीप्रोसेसर के लिए एक परिचित हैएक लोकप्रिय ओपन-सोर्स, एचटीएमएल-एम्बेडेड स्क्रिप्टिंग भाषा जिसका उपयोग डायनेमिक वेबसाइट, वेब एप्लिकेशन या स्थिर वेबसाइटों को विकसित करने के लिए किया जाता है।

जबसे PHP एक सर्वर-साइड भाषा है, इसकी लिपियों को सर्वर पर (ब्राउज़र में नहीं) निष्पादित किया जाता है, और इसका आउटपुट ब्राउज़र पर एक सादा HTML है।

PHP एक व्यापक रूप से उपयोग किया जाने वाला ओपन सोर्स सामान्य-प्रयोजन स्क्रिप्टिंग भाषा है जो विशेष रूप से वेब विकास के लिए अनुकूल है और इसे HTML में एम्बेड किया जा सकता है। - PHP.net से

यह सर्वर-साइड स्क्रिप्टिंग भाषा विंडोज, मैक ओएस, लिनक्स और यूनिक्स सहित विभिन्न ऑपरेटिंग सिस्टम पर चलती है। यह अपाचे और आईआईएस जैसे अधिकांश सर्वरों के साथ भी संगत है।

एएसपी और जेएसपी जैसी अन्य भाषाओं की तुलना में, PHP शुरुआती लोगों के लिए सीखना आसान है। PHP भी बहुत सारी सुविधाएँ प्रदान करता है जिनकी उन्नत स्तर के डेवलपर्स को आवश्यकता होती है।

PHP और HTML के बीच अंतर क्या है?

हालांकि दोनों भाषाएं महत्वपूर्ण हैं वेब विकास, PHP और HTML कई मायनों में अलग हैं।

मुख्य अंतर यह है कि दोनों भाषाओं का उपयोग किस लिए किया जाता है।

HTML का उपयोग क्लाइंट-साइड के लिए किया जाता है (या फ्रंट-एंड) विकास, जबकि PHP का उपयोग सर्वर-साइड के लिए किया जाता है विकास.

HTML एक वेबसाइट पर सामग्री को व्यवस्थित करने के लिए भाषा डेवलपर्स का उपयोग करता है, जैसे कि पाठ, चित्र, तालिकाओं और हाइपरलिंक सम्मिलित करना, पाठ को प्रारूपित करना और रंग निर्दिष्ट करना।

इस बीच, PHP का उपयोग डेटाबेस से डेटा को संग्रहीत करने और पुनर्प्राप्त करने के लिए किया जाता है, तार्किक संचालन करते हैं, ईमेल भेजते हैं और जवाब देते हैं, फ़ाइलों को अपलोड करते हैं और डाउनलोड करते हैं, डेस्कटॉप एप्लिकेशन विकसित करते हैं, और बहुत कुछ।

कोड प्रकार के संदर्भ में, पीएचपी गतिशील है, जबकि HTML स्थिर है. एक HTML कोड हर बार खोले जाने पर हमेशा एक जैसा होता है, जबकि PHP के परिणाम उपयोगकर्ता के ब्राउज़र के आधार पर भिन्न होते हैं।

नए डेवलपर्स के लिए, दोनों भाषाओं को सीखना आसान है, हालांकि सीखने की अवस्था PHP की तुलना में HTML से कम है।

पूरा PHP धोखा शीट

यदि आप एक नौसिखिए प्रोग्रामर हैं जो PHP में अधिक कुशल होना चाहते हैं या इसके बारे में अपने ज्ञान का विस्तार करना चाहते हैं, तो यहां एक PHP धोखा शीट आप जल्दी से उल्लेख कर सकते हैं।

इस चीट शीट में PHP फ़ंक्शंस होते हैं - जो व्यापक रूप से उपयोग किए जाने वाले कोड के लिए शॉर्टकट हैं - जो स्क्रिप्टिंग भाषा में बनाए गए हैं।

PHP धोखा शीट

 

PHP धोखा शीट डाउनलोड करें

 

परम HTML, सीएसएस और PHP धोखा शीट

चाहे आप एक अनुभवी डेवलपर हों या सिर्फ कोडिंग शुरू करने वाला कोई व्यक्ति, कुछ ऐसा होना बहुत अच्छा है जिसे आप हमेशा संदर्भ के लिए वापस आ सकते हैं या बस अपनी याददाश्त को ताज़ा कर सकते हैं।

और उन डेवलपर्स के लिए एक उपहार के रूप में जो बीच में घिसटते हैं HTML, CSS, और PHP, यहाँ एक ULTIMATE चीट शीट है, इन तीन कोडिंग भाषाओं के बारे में जानने और याद रखने के लिए आपको जो कुछ भी चाहिए, वह पूरा:

 

संयुक्त HTML, सीएसएस और PHP धोखा शीट डाउनलोड करें

 

हमारे समाचार पत्र शामिल हों

हमारे साप्ताहिक राउंडअप न्यूज़लेटर की सदस्यता लें और नवीनतम उद्योग समाचार और रुझान प्राप्त करें

'सदस्यता लें' पर क्लिक करके आप हमारी सहमति देते हैं उपयोग की शर्तें और गोपनीयता नीति.