HTML، CSS ۽ PHP: الٽيميٽ چيٽ شيٽ

📥 ڊائون لوڊ ڪريو منهنجو HTML، CSS ۽ PHP چيٽ شيٽ، انهن ٽن ڪوڊنگ ٻولين جي حوالي سان توهان کي ڄاڻڻ ۽ ياد رکڻ جي هر شيءِ سان مڪمل ڪريو.

• HTML ڇا آهي؟
• HTML5 مثال (ڪوڊ راند جو ميدان)
• 📥 HTML چيٽ شيٽ
• CSS ڇا آهي؟
• 📥 CSS چيٽ شيٽ
• PHP ڇا آهي؟
• 📥 PHP چيٽ شيٽ
• 📥 HTML CSS ۽ PHP چيٽ شيٽ

ڪوڊنگ جي فن کي مڪمل طور تي مهارت حاصل ڪرڻ ۾ سال لڳي سگهن ٿا سڀني ٽيگ، نحو، ۽ پروگرامنگ ٻولين جي ٻين عنصرن سان اڪثر جڙيل آهن.

اڃا به وڌيڪ تجربيڪار ڊولپرز خاص ڪمن لاءِ صحيح نحو کي وسارڻ جي جال ۾ پئجي سگهن ٿا. جيئن ته، وڌيڪ سائي جي اميد ڪرڻ غير حقيقي آهي ويب ڊولپر فن جي بي عيب گرفت حاصل ڪرڻ لاء.

اهو ڇو آهي HTML، CSS ۽ PHP لاءِ چيٽ شيٽ انتهائي مفيد آهن، قطع نظر ته توهان ڪيتري عرصي کان مشق ڪري رهيا آهيو. اهو صحيح حڪم ۽ نحو ڳولڻ لاءِ هڪ تڪڙي گائيڊ طور ڪم ڪري ٿو، توهان کي حقيقي ويب ڊولپمينٽ تي ڌيان ڏيڻ جي اجازت ڏئي ٿو.

هيٺ، توهان کي توهان جي ڪوڊنگ جي ڪوششن ۾ مدد ڪرڻ لاءِ تڪڙا ريفريشرن کان اڳ ۾ بصري مائل چيٽ شيٽ ملندا. مون ان کي آساني سان بک مارڪ، محفوظ، يا توهان جي سهولت لاءِ پرنٽ ڪيو آهي.

HTML ڇا آهي؟

HTML جو مطلب آهي Hypertext Markup Language - هڪ ڪوڊ جيڪو ويب پيج ۽ ان جي مواد لاءِ ڍانچي ٺاهڻ لاءِ استعمال ڪيو ويندو آهي.

هي مارڪ اپ ٻولي عناصر جي هڪ سيريز تي مشتمل آهي جيڪا مواد کي ظاهر ڪرڻ يا هڪ خاص طريقي سان ڪم ڪرڻ لاءِ استعمال ڪئي وئي آهي ۽ هر ويب سائيٽ جي فرنٽ-اينڊ ڪوڊ جو هڪ وڏو حصو آهي.

HTML ويب صفحن جي ڍانچي کي بيان ڪرڻ جي ٻولي آهي ... HTML سان، ليکڪ مارڪ اپ استعمال ڪندي صفحن جي ساخت کي بيان ڪن ٿا. ٻوليءَ جا عنصر مواد جي ليبل جا ٽڪرا جهڙوڪ پيراگراف، لسٽ، ٽيبل وغيره. - W3.org کان

مثال طور، توهان مواد جي مختلف حصن کي ڳنڍي يا لپي سگهو ٿا - جتي ڳنڍڻ وارا ٽيگ هڪ لفظ يا تصوير کي ٻئي صفحي ڏانهن هائپر لنڪ ٺاهي سگهن ٿا. توھان ھي استعمال ڪري سگھوٿا لفظن کي ترڪيب ڪرڻ ۽ فونٽ کي وڏو يا ننڍو ڪرڻ لاءِ، ٻين جي وچ ۾.

ڌيان ڇڪايو جيئن W3، ڪجھ ٻيون شيون جيڪي HTML توھان کي ڪرڻ جي اجازت ڏئي ٿي شامل آھن:

• سان گڏ آن لائن دستاويز شايع ڪرڻ عنوان، متن، جدول، فهرست، فوٽووغيره
• جي ذريعي هڪ بٽڻ جي ڪلڪ تي آن لائن معلومات حاصل ڪرڻ هائپر ٽيڪسٽ لنڪس.
• ڊيزائنگ فارم ريموٽ سروسز سان ٽرانزيڪشن کي هلائڻ لاء معلومات جي ڳولا ڪريو, رزرويشن ڪريو, يا آرڊر پراڊڪٽس، ٻين ڪمن جي وچ ۾.
• شامل اسپريڊ شيٽ، وڊيو ڪلپس، ۽ ٻيا ميڊيا ۽ ايپليڪيشنون اڳ ۾ ئي توهان جي دستاويزن ۾.

تنهن ڪري جيڪڏهن توهان لائن ٺاهي رهيا آهيو ”منهنجو ڪتو ڏاڍو مٺو آهي“ stand by stand, you can specify that it is enclosing by an paragraphs tags (وڌيڪ ان تي بعد ۾)، جيڪو نظر ايندو: منهنجو ڪتو ڏاڍو مٺو آهي

HTML ۽ HTML5 جي وچ ۾ ڇا فرق آهي؟

جيئن ته نالي مشورو ڏيندو، HTML5 HTML معيار جو پنجون نسخو آهي. اهو ٻولي ۾ وڊيو ۽ آڊيو جي انضمام کي سپورٽ ڪري ٿو، جيڪا ٽئين پارٽي پلگ ان ۽ عناصر جي ضرورت کي گھٽائي ٿي.

هيٺ ڏنل HTML ۽ HTML5 جي وچ ۾ بنيادي فرق آهن:

اضافي طور تي، HTML جا ڪيترائي عنصر آھن جيڪي HTML5 مان تبديل ڪيا ويا يا ختم ڪيا ويا آھن. انهن ۾ شامل آهن:

• - ۾ تبديل ڪيو ويو
• - ۾ تبديل ڪيو ويو
• - ۾ تبديل ڪيو ويو
• - هٽايو ويو
• - هٽايو ويو
• - هٽايو ويو
• - نئون ٽيگ ناهي. CSS استعمال ڪري ٿو.
• - نئون ٽيگ ناهي. CSS استعمال ڪري ٿو.
• - نئون ٽيگ ناهي. CSS استعمال ڪري ٿو.
• - نئون ٽيگ ناهي. CSS استعمال ڪري ٿو.
• - نئون ٽيگ ناهي. CSS استعمال ڪري ٿو.

ان کان علاوه، HTML5 ۾ شامل ڪيل نوان شامل ڪيل عناصر شامل آھن. انهن ۾ شامل آهن:

HTML5 مثال (ڪوڊ راند جو ميدان)

سيمينٽڪ ساخت جا مثال

In HTML5 ڪجھ لفظي عنصر آھن جيڪي ويب پيج جي مختلف حصن کي بيان ڪرڻ لاءِ استعمال ڪري سگھجن ٿيون. هتي سڀ کان وڌيڪ عام آهن:

<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 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 ڇا آهي؟

Cascading اسٽائل شيٽ يا CSS بيان ڪري ٿو ته ڪيئن HTML عناصر اسڪرين تي ڏيکاريا ويندا. ڇاڪاڻ ته اهو هڪ ئي وقت ڪيترن ئي صفحن جي ترتيب کي ڪنٽرول ڪري سگهي ٿو، اهو توهان کي گهڻو وقت ۽ ڪوشش بچائي سگهي ٿو.

CSS ويب صفحن جي پيشڪش کي بيان ڪرڻ جي ٻولي آهي، بشمول رنگ، ترتيب، ۽ فونٽ. اهو هڪ کي اجازت ڏئي ٿو ته پيشڪش کي مختلف قسمن جي ڊوائيسز، جهڙوڪ وڏي اسڪرين، ننڍيون اسڪرين، يا پرنٽرز کي ترتيب ڏيو. - W3.org کان

HTML ۽ CSS جي وچ ۾ ڇا فرق آهي؟

جڏهن ته HTML ۽ CSS ٻئي ٻوليون آهن ويب پيجز ۽ ايپليڪيشن ٺاهڻ لاءِ استعمال ٿينديون آهن، انهن جا مختلف ڪم آهن.

HTML اھو آھي جيڪو توھان استعمال ڪندا آھيو ساخت ۽ مواد کي ترتيب ڏيڻ لاءِ جيڪو ويب پيج تي ڏيکاريو ويندو.

CSS، ٻئي طرف، جي ترميم لاء استعمال ڪيو ويندو آهي ويب سائٽ ٺھرائڻ جو ويب پيج تي HTML عناصر جو (بشمول ترتيب، بصري اثرات، ۽ پس منظر جو رنگ).

HTML ساخت ۽ مواد ٺاهي ٿو، سي ايس ايس ڊيزائن يا انداز ٺاهي ٿو. گڏو گڏ، HTML ۽ CSS ٺاهي هڪ ويب پيج انٽرفيس.

CSS نحو ڇا آهي؟

CSS نحو منتخب ڪندڙ ۽ اعلان واري بلاڪ مان ٺهيل آهي.

چونڊيندڙ HTML عنصر کي اسٽائل ڪرڻ لاءِ طئي ڪري ٿو جڏهن ته اعلان واري بلاڪ ۾ هڪ يا وڌيڪ بيانن تي مشتمل آهي يا CSS جو جوڙو هڪ ملڪيت جو نالو ۽ انهن جي وچ ۾ ڪولن سان هڪ قدر.

بيانن کي سيميڪولن سان ورهايو ويو آهي ۽ ڊڪليئريشن بلاڪ هميشه گھميل ڪنگڻ ۾ بند ٿيل آهن.

مثال طور، جيڪڏھن توھان چاھيو ٿا تبديليءَ جي طريقي سان توھان جو ھيڊ 1 نظر اچي ٿو، توھان جو CSS نحو ڪجھ ھن طرح نظر ايندو: h1 {color:red; فونٽ سائيز: 16pc؛}

مڪمل CSS چيٽ شيٽ

CSS استعمال ڪرڻ ڪافي آسان آهي. چيلنج اهو آهي ته ڪافي چونڊيندڙ ۽ اعلان آهن ته انهن سڀني کي ياد رکڻ مشڪل آهي جيڪڏهن ناممڪن ناهي. توهان کي انهن کي ياد ڪرڻ جي ضرورت ناهي، جيتوڻيڪ.

هتي هڪ آهي CSS ۽ CSS3 لاءِ چيٽ شيٽ جيڪو توهان ڪنهن به وقت استعمال ڪري سگهو ٿا.

ڊائون لوڊ ڪريو CSS چيٽ شيٽ

PHP ڇا آهي؟

PHP Hypertext Preprocessor جو مخفف آهي، هڪ مشهور اوپن سورس، HTML-ايمبيڊڊ اسڪرپٽنگ ٻولي جيڪا متحرڪ ويب سائيٽون، ويب ايپليڪيشنون، يا جامد ويب سائيٽون ٺاهڻ لاءِ استعمال ٿيندي آهي.

کان وٺي PHP هڪ سرور-سائڊ ٻولي آهي، ان جا اسڪرپٽ سرور تي عمل ڪيا ويندا آهن (نه برائوزر ۾)، ۽ ان جو آئوٽ پٽ برائوزر تي هڪ سادي HTML آهي.

PHP هڪ وڏي پيماني تي استعمال ٿيل اوپن سورس جنرل-مقصد اسڪرپٽنگ ٻولي آهي جيڪا خاص طور تي ويب ڊولپمينٽ لاءِ موزون آهي ۽ HTML ۾ شامل ٿي سگهي ٿي. - PHP.net کان

هي سرور-سائيڊ اسڪرپٽنگ ٻولي مختلف آپريٽنگ سسٽم تي هلندي آهي، بشمول ونڊوز، ميڪ او ايس، لينڪس، ۽ يونڪس. اهو سڀ کان وڌيڪ سرورز جهڙوڪ اپاچي ۽ IIS سان پڻ مطابقت رکي ٿو.

ASP ۽ JSP وانگر ٻين ٻولين جي مقابلي ۾، PHP شروعاتي لاءِ سکڻ آسان آهي. PHP پڻ پيش ڪري ٿو ڪافي خاصيتون جيڪي ترقي يافته سطح جي ڊولپرز جي ضرورت هونديون آهن.

PHP ۽ HTML جي وچ ۾ ڇا فرق آهي؟

جيتوڻيڪ ٻئي ٻوليون اهم آهن ويب ترقيPHP ۽ HTML ڪيترن ئي طريقن سان مختلف آهن.

اھم فرق اھو آھي ته ٻنھي ٻولين کي ڪھڙي لاءِ استعمال ڪيو وڃي ٿو.

HTML ڪلائنٽ پاسي لاء استعمال ڪيو ويندو آهي (يا سامهون-آخر) ترقي، جڏهن ته PHP استعمال ڪيو ويندو آهي سرور-سائڊ لاءِ ترقي.

HTML ٻولي آهي ڊولپرز ويب سائيٽ تي مواد کي ترتيب ڏيڻ لاءِ استعمال ڪندا آهن، جهڙوڪ ٽيڪسٽ داخل ڪرڻ، تصويرون، ٽيبل، ۽ هائپر لنڪس، ٽيڪسٽ فارميٽ ڪرڻ، ۽ رنگن جي وضاحت ڪرڻ.

ان کان علاوه، PHP ڊيٽابيس مان ڊيٽا کي ذخيرو ۽ ٻيهر حاصل ڪرڻ، منطقي عملن کي انجام ڏيڻ، اي ميلون موڪلڻ ۽ جواب ڏيڻ، فائلون اپلوڊ ۽ ڊائون لوڊ ڪرڻ، ڊيسڪ ٽاپ ايپليڪيشنن کي ترقي ڪرڻ، ۽ وڌيڪ ڪرڻ لاء استعمال ڪيو ويندو آهي.

ڪوڊ جي قسم جي لحاظ کان، HTML جامد آهي جڏهن ته PHP متحرڪ آهي. هڪ HTML ڪوڊ هميشه ساڳيو هوندو آهي هر دفعي اهو کوليو ويندو آهي، جڏهن ته PHP جا نتيجا صارف جي برائوزر جي لحاظ کان مختلف هوندا آهن.

نون ڊولپرز لاءِ، ٻئي ٻوليون سکڻ ۾ آسان آهن، جيتوڻيڪ سکڻ وارو وکر PHP کان HTML سان ننڍو آهي.

مڪمل PHP چيٽ شيٽ

جيڪڏهن توهان هڪ نوان پروگرامر آهيو جيڪو PHP ۾ وڌيڪ ماهر ٿيڻ چاهي ٿو يا ان بابت توهان جي ڄاڻ کي وڌائڻ چاهي ٿو، هتي هڪ آهي PHP چيٽ شيٽ توهان تڪڙو حوالو ڪري سگهو ٿا.

هي چيٽ شيٽ پي ايڇ پي افعال تي مشتمل آهي - جيڪي وڏي پيماني تي استعمال ٿيل ڪوڊس لاءِ شارٽ ڪٽ آهن - جيڪي اسڪرپٽنگ ٻولي ۾ ٺهيل آهن.

ڊائون لوڊ ڪريو PHP چيٽ شيٽ

حتمي HTML، CSS ۽ PHP چيٽ شيٽ

ڇا توهان هڪ تجربيڪار ڊولپر آهيو يا صرف ڪو ماڻهو ڪوڊنگ شروع ڪري رهيو آهي، اهو تمام سٺو آهي ته توهان وٽ ڪجهه آهي ته توهان هميشه حوالي لاء واپس اچي سگهو ٿا يا صرف پنهنجي يادگيري کي تازو ڪري سگهو ٿا.

۽ ڊولپرز لاءِ تحفا جي طور تي جيڪي وچ ۾ جڙندا آهن HTML، CSS، ۽ PHP، هتي هڪ الٽيميٽ چيٽ شيٽ آهي، انهن ٽن ڪوڊنگ ٻولين جي حوالي سان توهان کي ڄاڻڻ ۽ ياد رکڻ جي هر شيءِ سان مڪمل ڪريو:

ڊائون لوڊ ڪريو گڏيل HTML، CSS ۽ PHP چيٽ شيٽ