HTML و CSS و PHP: The Ultimate Cheat Sheet

📥 قم بتنزيل ملف أوراق غش HTML و CSS و PHP، كاملة مع كل ما تحتاج إلى معرفته وتذكره فيما يتعلق بلغات الترميز الثلاث هذه.

• ما هو HTML؟
• أمثلة HTML5 (Code PlayGround)
• 📥 ورقة الغش HTML
• ما هو CSS؟
• 📥 ورقة الغش CSS
• ما هو PHP؟
• 📥 ورقة الغش PHP
• 📥 HTML CSS و PHP Cheat Sheet

يمكن أن يستغرق فن الترميز سنوات لإتقانه بالكامل مع جميع العلامات والصيغ والعناصر الأخرى للغات البرمجة التي غالبًا ما تتشابك.

حتى المطورين الأكثر خبرة يمكن أن يقعوا في فخ نسيان الصيغة الصحيحة لمهام معينة. على هذا النحو ، من غير الواقعي توقع المزيد من البيئة مطوري الويب للحصول على فهم لا تشوبه شائبة للفن.

هذا هو السبب أوراق الغش لـ HTML و CSS و PHP مفيدة للغاية ، بغض النظر عن المدة التي تمارسها. إنه بمثابة دليل سريع للعثور على الأوامر والصيغ الصحيحة ، مما يسمح لك بالتركيز على تطوير الويب الفعلي.

أدناه ، ستجد أوراق غش مائلة بصريًا مسبوقة بمرشحات سريعة لمساعدتك في مساعيك في الترميز. لقد جعلت من السهل وضع إشارة مرجعية عليه أو حفظه أو طباعته من أجل راحتك.

ما هو HTML؟

HTML تعني لغة ترميز النص التشعبي - الكود المستخدم لإنشاء هيكل صفحة الويب ومحتواها.

تتكون لغة الترميز هذه من سلسلة من العناصر التي تُستخدم لجعل المحتوى يظهر أو يعمل بطريقة معينة وهي جزء رئيسي من رمز الواجهة الأمامية لكل موقع ويب.

HTML هي لغة وصف بنية صفحات الويب… باستخدام HTML ، يصف المؤلفون بنية الصفحات باستخدام الترميز. عناصر اللغة تسمي أجزاء المحتوى مثل الفقرة والقائمة والجدول وما إلى ذلك. - من W3.org

على سبيل المثال ، يمكنك إحاطة أجزاء مختلفة من المحتوى أو التفافها - حيث يمكن لعلامات التضمين إنشاء ارتباط تشعبي لكلمة أو صورة إلى صفحة أخرى. يمكنك أيضًا استخدام هذا لجعل الكلمات مائلة وجعل الخطوط أكبر أو أصغر ، من بين أمور أخرى.

كما لاحظ W3، بعض الأشياء الأخرى التي تتيح لك HTML القيام بها تشمل:

• نشر المستندات عبر الإنترنت باستخدام العناوين والنصوص والجداول والقوائم والصور، الخ.
• استرداد المعلومات عبر الإنترنت بنقرة زر عبر روابط تشعبية.
• تصميم أشكال لإجراء المعاملات مع الخدمات عن بُعد إلى البحث عن المعلومات أو الحجز أو طلب المنتجات، من بين وظائف أخرى.
• بما فيه جداول البيانات ومقاطع الفيديو والوسائط الأخرى والتطبيقات الموجودة بالفعل في مستنداتك.

لذلك إذا كنت تريد أن تجعل الخط "كلبي حلو جدا" قف بمفردها ، يمكنك تحديد أنها فقرة من خلال تضمينها في علامات الفقرات (المزيد حول هذا لاحقًا) ، والتي ستبدو مثل: كلبي حلو جدا

ما هو الفرق بين HTML و HTML5؟

وكما يوحي اسمها، HTML5 هو الإصدار الخامس من معيار HTML. يدعم دمج الفيديو والصوت في اللغة ، مما يقلل من الحاجة إلى مكونات إضافية وعناصر خارجية.

فيما يلي الاختلافات الرئيسية بين HTML و HTML5:

بالإضافة إلى ذلك ، هناك العديد من عناصر HTML التي تم تعديلها أو إزالتها من HTML5. وتشمل هذه:

• - تغير إلى
• - تغير إلى
• - تغير إلى
• - إزالة
• - إزالة
• - إزالة
• - لا توجد علامة جديدة. يستخدم CSS.
• - لا توجد علامة جديدة. يستخدم CSS.
• - لا توجد علامة جديدة. يستخدم CSS.
• - لا توجد علامة جديدة. يستخدم CSS.
• - لا توجد علامة جديدة. يستخدم CSS.

وفي الوقت نفسه ، يتضمن HTML5 أيضًا عددًا من العناصر المضافة حديثًا. وتشمل هذه:

أمثلة HTML5 (Code PlayGround)

أمثلة على البنية الدلالية

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 Cheat Sheet

ما هو CSS؟

أوراق الأنماط المتتالية أو CSS يصف كيفية عرض عناصر HTML على الشاشة. نظرًا لأنه يمكنه التحكم في تخطيطات صفحات متعددة في نفس الوقت ، فيمكنه توفير الكثير من الوقت والجهد.

CSS هي لغة وصف عرض صفحات الويب ، بما في ذلك الألوان والتخطيط والخطوط. يسمح للشخص بتكييف العرض التقديمي مع أنواع مختلفة من الأجهزة ، مثل الشاشات الكبيرة أو الشاشات الصغيرة أو الطابعات. - من W3.org

ما هو الفرق بين HTML و CSS؟

بينما تُستخدم كل من HTML و CSS في إنشاء صفحات الويب والتطبيقات ، فإن لهما وظائف مختلفة.

HTML هو ما تستخدمه لإملاء الهيكل والمحتوى الذي سيتم عرضه على صفحة الويب.

من ناحية أخرى ، يتم استخدام CSS لتعديل ملف تصميم مواقع الإنترنت لعناصر HTML على صفحة الويب (بما في ذلك التخطيط والتأثيرات المرئية ولون الخلفية).

يقوم HTML بإنشاء البنية والمحتوى ، بينما يقوم CSS بالتصميم أو النمط. يشكل HTML و CSS معًا واجهة صفحة ويب.

ما هو CSS Syntax؟

بنية CSS يتكون من محدد وكتلة إعلان.

يحدد المحدِّد عنصر HTML المراد تصميمه بينما تحتوي كتلة الإعلان على إعلان أو أكثر أو أزواج من CSS اسم خاصية وقيمة مع نقطتين بينهما.

يتم فصل التعريفات بواسطة فواصل منقوطة ويتم دائمًا وضع كتل التصريح في أقواس معقوفة.

على سبيل المثال ، إذا كنت ترغب في تعديل طريقة ظهور العنوان 1 ، فإن بناء جملة CSS الخاص بك سيبدو مثل هذا: h1 {color: red؛ حجم الخط: 16 قطعة ؛}

ورقة الغش كاملة CSS

CSS سهل الاستخدام بدرجة كافية. التحدي هو أن هناك الكثير من المحددات والإعلانات التي يصعب تذكرها جميعًا إن لم تكن مستحيلة. ليس عليك حفظها ، رغم ذلك.

وهنا ورقة الغش لـ CSS و CSS3 يمكنك استخدامها في أي وقت.

قم بتنزيل ورقة الغش في CSS

ما هو PHP؟

PHP هو اختصار للمعالج الأولي للنص التشعبي، لغة برمجة نصية مشهورة مفتوحة المصدر ومضمنة في HTML تُستخدم لتطوير مواقع ويب ديناميكية أو تطبيقات ويب أو مواقع ويب ثابتة.

منذ PHP هي لغة من جانب الخادم، يتم تنفيذ نصوصه على الخادم (وليس في المتصفح) ، وإخراجها عبارة عن HTML عادي على المتصفح.

PHP هي لغة برمجة برمجية للأغراض العامة مفتوحة المصدر مستخدمة على نطاق واسع وهي مناسبة بشكل خاص لتطوير الويب ويمكن تضمينها في HTML. - من PHP.net

تعمل لغة البرمجة النصية من جانب الخادم على مجموعة متنوعة من أنظمة التشغيل ، بما في ذلك Windows و Mac OS و Linux و Unix. كما أنه متوافق مع معظم الخوادم مثل Apache و IIS.

بالمقارنة مع لغات أخرى مثل ASP و JSP ، فإن PHP سهلة التعلم للمبتدئين. تقدم PHP أيضًا الكثير من الميزات التي يحتاجها مطورو المستوى المتقدم.

ما هو الفرق بين PHP و HTML؟

على الرغم من أن كلتا اللغتين مهمتان تطوير الشبكةتختلف PHP و HTML بعدة طرق.

يكمن الاختلاف الرئيسي في الغرض من استخدام اللغتين.

يستخدم HTML من جانب العميل (أو الواجهة الأمامية) ، بينما يتم استخدام PHP للجانب الخادم التنمية.

HTML هي اللغة التي يستخدمها مطورو البرامج لتنظيم المحتوى على موقع ويب ، مثل إدراج النص والصور والجداول والارتباطات التشعبية وتنسيق النص وتحديد الألوان.

وفي الوقت نفسه ، يتم استخدام PHP لتخزين واسترداد البيانات من قاعدة البيانات ، وإجراء العمليات المنطقية ، وإرسال رسائل البريد الإلكتروني والرد عليها ، وتحميل الملفات وتنزيلها ، وتطوير تطبيقات سطح المكتب ، والمزيد.

من حيث نوع الكود ، HTML ثابت بينما PHP ديناميكي. دائمًا ما تكون شفرة HTML هي نفسها في كل مرة يتم فتحها ، بينما تختلف نتائج PHP اعتمادًا على متصفح المستخدم.

بالنسبة للمطورين الجدد ، من السهل تعلم اللغتين ، على الرغم من أن منحنى التعلم أقصر باستخدام HTML منه في PHP.

ورقة غش PHP كاملة

إذا كنت مبرمجًا مبتدئًا وتريد أن تكون أكثر كفاءة في PHP أو توسع معرفتك بها ، فإليك ملف ورقة الغش PHP يمكنك الرجوع إليها بسرعة.

تتكون ورقة الغش هذه من وظائف PHP - وهي اختصارات للرموز المستخدمة على نطاق واسع - المضمنة في لغة البرمجة النصية.

تحميل ورقة الغش PHP

ورقة غش HTML و CSS و PHP المطلقة

سواء كنت مطورًا متمرسًا أو مجرد شخص بدأ في البرمجة ، فمن الرائع أن يكون لديك شيء يمكنك الرجوع إليه دائمًا للرجوع إليه أو لمجرد تحديث ذاكرتك.

وكهدية للمطورين الذين يتنقلون بينهم HTML و CSS و PHP ، هنا ورقة الغش النهائية، كاملة مع كل ما تحتاج إلى معرفته وتذكره فيما يتعلق بلغات الترميز الثلاث هذه:

قم بتنزيل ورقة الغش المجمعة HTML و CSS و PHP