HTML, CSS et PHP:
La feuille de triche ultime

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 de l'oubli de la syntaxe correcte pour des tâches particulières. En tant que tel, il n'est pas réaliste de s'attendre à ce que davantage de développeurs Web verts aient une compréhension parfaite de l'art.

C'est pourquoi feuilles de triche pour HTML, CSS et PHP sont extrêmement utiles, peu importe depuis combien de temps vous pratiquez. 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 rafraîchissements 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

En 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 mouiller les pieds dans l'industrie, il est toujours utile d'avoir un Aide-mémoire 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 gagner 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 simple à utiliser. Le défi est qu'il y a beaucoup de sélecteurs et de déclarations qu'il est difficile, voire impossible, de se souvenir de tous. Vous n'êtes pas obligé de 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 fonctionne 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 fois qu'il est ouvert, 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 novice qui souhaite être plus compétent en PHP ou approfondir vos connaissances, voici un 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 tout simplement quelqu'un qui commence 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