HTML, CSS et PHP: la feuille de triche ultime

📥 Téléchargez mon Feuilles de triche HTML, CSS et PHP, avec tout ce que vous devez savoir et retenir concernant ces trois langages de codage.

• Qu'est-ce que le HTML?
• Exemples HTML5 (Code PlayGround)
• 📥 Feuille de triche HTML
• Qu'est-ce que CSS?
• 📥 Feuille de triche CSS
• Qu'est-ce que PHP?
• 📥 Feuille de triche PHP
• 📥 HTML CSS et PHP Cheat Sheet

L'art du codage peut prendre des années à maîtriser pleinement toutes les balises, syntaxes et autres éléments des langages de programmation souvent entrelacés.

Même les développeurs les plus expérimentés peuvent tomber dans le piège d'oublier la syntaxe correcte pour des tâches particulières. En tant que tel, il est irréaliste de s'attendre à plus de vert développeurs web avoir une parfaite maîtrise de l'art.

C'est pourquoi feuilles de triche pour HTML, CSS et PHP sont extrêmement utiles, quelle que soit la durée de votre pratique. Il sert de guide rapide pour trouver les bonnes commandes et syntaxes, vous permettant de vous concentrer sur le développement Web réel.

Ci-dessous, vous trouverez des feuilles de triche visuellement inclinées précédées de rappels rapides pour vous aider dans vos efforts de codage. Je l'ai également fait pour qu'il soit facilement mis en signet, enregistré ou imprimé pour votre commodité.

Qu'est-ce que le HTML?

HTML signifie Hypertext Markup Language – un code utilisé pour créer la structure d'une page Web et son contenu.

Ce langage de balisage est composé d'une série d'éléments qui permettaient de faire apparaître ou de fonctionner le contenu d'une certaine manière et constitue une partie majeure du code frontal de chaque site Web.

HTML est le langage pour décrire la structure des pages Web… Avec HTML, les auteurs décrivent la structure des pages à l'aide de balisage. Les éléments du langage étiquettent des éléments de contenu tels que paragraphe, liste, tableau, etc. - de W3.org

Par exemple, vous pouvez entourer ou encapsuler différentes parties du contenu - où les balises englobantes peuvent créer un lien hypertexte de mot ou d'image vers une autre page. Vous pouvez également l'utiliser pour mettre en italique des mots et agrandir ou réduire les polices, entre autres.

Comme l'a noté W3, certaines des autres choses que le HTML vous permet de faire incluent:

• Publication de documents en ligne avec titres, textes, tableaux, listes, photos, etc.
• Récupérer des informations en ligne en un clic via liens hypertextes.
• Conception document pour effectuer des transactions avec des services à distance rechercher des informations, faire des réservations ou commander des produits, entre autres fonctions.
• Y compris feuilles de calcul, clips vidéo et autres médias et applications déjà dans vos documents.

Donc si tu devais faire la ligne «Mon chien est très gentil» stand par lui-même, vous pouvez spécifier qu'il s'agit d'un paragraphe en l'enfermant dans des balises de paragraphes (plus à ce sujet plus tard), qui ressemblerait à: Mon chien est très gentil

Quelle est la différence entre HTML et HTML5?

Comme son nom l'indique, HTML5 est la cinquième version du standard HTML. Il prend en charge l'intégration de la vidéo et de l'audio dans la langue, ce qui réduit le besoin de plugins et d'éléments tiers.

Voici les principales différences entre HTML et HTML5:

De plus, de nombreux éléments HTML ont été modifiés ou supprimés de HTML5. Ceux-ci inclus:

• - Changé en
• - Changé en
• - Changé en
• - Supprimé
• - Supprimé
• - Supprimé
• - Pas de nouvelle balise. Utilise CSS.
• - Pas de nouvelle balise. Utilise CSS.
• - Pas de nouvelle balise. Utilise CSS.
• - Pas de nouvelle balise. Utilise CSS.
• - Pas de nouvelle balise. Utilise CSS.

Pendant ce temps, HTML5 comprend également un certain nombre d'éléments nouvellement ajoutés. Ceux-ci inclus:

Exemples HTML5 (Code PlayGround)

Exemples de structure sémantique

In HTML5 Certains éléments sémantiques peuvent être utilisés pour définir différentes parties d'une page Web. Voici les plus courants :

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

Exemples de formatage de texte de base

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

Exemples de tableaux

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

Exemples de médias

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

Feuille de triche HTML complète

Que vous soyez un développeur chevronné ou quelqu'un qui cherche simplement à se familiariser avec l'industrie, il est toujours utile d'avoir un Aide-mémoire pour le formatage HTML pratique. Et j'en ai conçu un qui pourrait vous aider à chaque étape du processus.

Télécharger la feuille de triche HTML

Qu'est-ce que CSS?

Feuilles de style en cascade ou CSS décrit comment les éléments HTML seront affichés à l'écran. Parce qu'il peut contrôler la mise en page de plusieurs pages en même temps, il peut vous faire économiser beaucoup de temps et d'efforts.

CSS est le langage pour décrire la présentation des pages Web, y compris les couleurs, la mise en page et les polices. Il permet d'adapter la présentation à différents types d'appareils, tels que les grands écrans, les petits écrans ou les imprimantes. - de W3.org

Quelle est la différence entre HTML et CSS?

Bien que HTML et CSS soient les deux langages utilisés pour créer des pages Web et des applications, ils ont des fonctions différentes.

Le HTML est ce que vous utilisez pour dicter la structure et le contenu qui seront affichés sur la page Web.

CSS, d'autre part, est utilisé pour la modification de la conception de sites Web des éléments HTML de la page Web (y compris la mise en page, les effets visuels et la couleur d'arrière-plan).

HTML crée la structure et le contenu, CSS fait la conception ou le style. Ensemble, HTML et CSS forment une interface de page Web.

Qu'est-ce que la syntaxe CSS?

Syntaxe CSS se compose d'un sélecteur et d'un bloc de déclaration.

Le sélecteur détermine l'élément HTML à styliser tandis que le bloc de déclaration contient une ou plusieurs déclarations ou paires de CSS, un nom de propriété et une valeur avec deux-points entre eux.

Les déclarations sont séparées par des points-virgules et les blocs de déclaration sont toujours entre accolades.

Par exemple, si vous souhaitez modifier l'apparence de votre titre 1, votre syntaxe CSS ressemblera à quelque chose comme ceci: h1 {color: red; taille de la police: 16pc;}

Feuille de triche CSS complète

CSS est assez facile à utiliser. Le défi est qu'il y a beaucoup de sélecteurs et de déclarations dont il est difficile, voire impossible, de se souvenir. Vous n'avez pas à les mémoriser, cependant.

Voici un aide-mémoire pour CSS et CSS3 que vous pouvez utiliser à tout moment.

Télécharger la feuille de triche CSS

Qu'est-ce que PHP?

PHP est un acronyme pour Hypertext Preprocessor, un langage de script open source populaire intégré HTML utilisé pour développer des sites Web dynamiques, des applications Web ou des sites Web statiques.

Depuis que PHP est un langage côté serveur, ses scripts sont exécutés sur le serveur (pas dans le navigateur), et sa sortie est un simple HTML sur le navigateur.

PHP est un langage de script à usage général open source largement utilisé, particulièrement adapté au développement Web et pouvant être intégré au HTML. - depuis PHP.net

Ce langage de script côté serveur s'exécute sur divers systèmes d'exploitation, notamment Windows, Mac OS, Linux et Unix. Il est également compatible avec la plupart des serveurs tels qu'Apache et IIS.

Comparé à d'autres langages comme ASP et JSP, PHP est facile à apprendre pour les débutants. PHP offre également de nombreuses fonctionnalités dont les développeurs de niveau avancé ont besoin.

Quelle est la différence entre PHP et HTML?

Bien que les deux langues soient cruciales pour le développement web, PHP et HTML sont différents de plusieurs manières.

La principale différence réside dans l'utilisation des deux langues.

HTML est utilisé pour le côté client (ou front-end), tandis que PHP est utilisé pour le côté serveur

HTML est le langage utilisé par les développeurs pour organiser le contenu d'un site Web, comme l'insertion de texte, d'images, de tableaux et d'hyperliens, la mise en forme de texte et la spécification de couleurs.

Pendant ce temps, PHP est utilisé pour stocker et récupérer des données à partir d'une base de données, effectuer des opérations logiques, envoyer et répondre aux e-mails, télécharger et télécharger des fichiers, développer des applications de bureau, etc.

En termes de type de code, HTML est statique tandis que PHP est dynamique. Un code HTML est toujours le même à chaque ouverture, tandis que les résultats PHP varient en fonction du navigateur de l'utilisateur.

Pour les nouveaux développeurs, les deux langues sont faciles à apprendre, bien que la courbe d'apprentissage soit plus courte avec HTML qu'avec PHP.

Feuille de triche PHP complète

Si vous êtes un programmeur débutant qui souhaite maîtriser PHP ou approfondir ses connaissances, voici une Aide-mémoire PHP vous pouvez vous y référer rapidement.

Cette feuille de triche se compose de fonctions PHP - qui sont des raccourcis pour les codes largement utilisés - qui sont intégrées au langage de script.

Télécharger la feuille de triche PHP

La feuille de triche ultime pour HTML, CSS et PHP

Que vous soyez un développeur chevronné ou simplement quelqu'un qui débute dans le codage, c'est formidable d'avoir quelque chose sur lequel vous pouvez toujours revenir pour référence ou simplement vous rafraîchir la mémoire.

Et comme cadeau aux développeurs qui jonglent entre HTML, CSS et PHP, voici une feuille de triche ULTIMATE, complet avec tout ce que vous devez savoir et retenir concernant ces trois langages de codage:

Téléchargez la feuille de triche combinée HTML, CSS et PHP