HTML و CSS و PHP: The Ultimate Cheat Sheet

كتب بواسطة

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

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

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

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

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

ما هو HTML؟

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

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

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

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

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

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

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

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

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

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

HTML

  • لا يدعم الصوت والفيديو بدون دعم مشغل الفلاش.
  • يستخدم ملفات تعريف الارتباط لتخزين البيانات المؤقتة.
  • لا يسمح بتشغيل JavaScipt في المتصفح.
  • يسمح بالرسومات المتجهة باستخدام تقنيات مختلفة مثل VML و Silver-light و Flash وغيرها.
  • لا يسمح بتأثيرات السحب والإفلات.
  • يعمل مع جميع المتصفحات القديمة.
  • أقل توافقًا مع الجوّال.
  • إعلان Doctype طويل ومعقد.
  • لا يحتوي على عناصر مثل التنقل والرأس ، بالإضافة إلى سمات مثل مجموعة الأحرف ، أsyncو ping.
  • من الصعب للغاية الحصول على موقع جغرافي حقيقي للمستخدمين باستخدام متصفح.
  • لا يمكن التعامل مع البنية غير الدقيقة.

HTML5

  • يدعم عناصر التحكم في الصوت والفيديو باستخدام ملفات و العلامات.
  • يستخدم قواعد بيانات SQL والتخزين المؤقت للتطبيق لتخزين البيانات دون اتصال.
  • يسمح لـ JavaScript بالعمل في الخلفية باستخدام واجهة برمجة تطبيقات JS Web worker.
  • تعد الرسومات المتجهة جزءًا أساسيًا من HTML5 ، مثل SVG والقماش.
  • يسمح بتأثيرات السحب والإفلات.
  • اجعل من الممكن رسم الأشكال.
  • يدعم جميع المتصفحات الجديدة مثل Firefox و Mozilla و Chrome و Safari.
  • أكثر ملاءمة للجوّال.
  • إعلان Doctype بسيط وسهل.
  • يحتوي على عناصر جديدة لهياكل الويب مثل التنقل والرأس والتذييل ، من بين أمور أخرى ، ولديه أيضًا سمات مجموعة الأحرف ،syncو ping.
  • يجعل تشفير الأحرف بسيطًا وسهلاً.
  • يسمح بتتبع الموقع الجغرافي للمستخدم باستخدام JS GeoLocation API.
  • قادر على التعامل مع البنية غير الدقيقة.
 

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

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

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

 

أمثلة HTML5 (Code PlayGround)

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

توجد في HTML5 بعض العناصر الدلالية التي يمكن استخدامها لتحديد أجزاء مختلفة من صفحة الويب. فيما يلي أكثرها شيوعًا:

عناصر البنية الدلالية 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

 

قم بتنزيل 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

 

قم بتنزيل ورقة الغش في 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

 

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

 

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

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

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

 

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

 

اشترك في صحيفتنا الإخبارية

اشترك في النشرة الإخبارية الأسبوعية لدينا واحصل على آخر أخبار الصناعة والاتجاهات

بالنقر فوق "اشتراك" ، فإنك توافق على شروط الاستخدام و سياسة الخصوصية.