HTML, CSS e PHP: l'ultimo cheat sheet

📥 Scarica il mio Cheat sheet HTML, CSS e PHP, completo di tutto ciò che devi sapere e ricordare riguardo a questi tre linguaggi di codifica.

• Cos'è l'HTML?
• Esempi HTML5 (codice PlayGround)
• 📥 Cheat Sheet HTML
• Cos'è il CSS?
• 📥 Cheat Sheet CSS
• Cos'è PHP?
• 📥 Cheat Sheet PHP
• 📥 HTML CSS e PHP Cheat Sheet

L'arte della programmazione può richiedere anni per padroneggiare completamente tutti i tag, le sintassi e altri elementi dei linguaggi di programmazione spesso intrecciati.

Anche gli sviluppatori più esperti possono cadere nella trappola di dimenticare la sintassi corretta per compiti particolari. In quanto tale, non è realistico aspettarsi più verde sviluppatori web per avere una perfetta comprensione dell'arte.

Ecco perché nello studio legale cheat sheet per HTML, CSS e PHP sono estremamente utili, indipendentemente da quanto tempo hai praticato. Serve come guida rapida per trovare i comandi e le sintassi giusti, permettendoti di concentrarti sullo sviluppo web effettivo.

Di seguito, troverai cheat sheet visivamente inclini preceduti da rapidi aggiornamenti per aiutarti nei tuoi sforzi di codifica. L'ho anche creato per essere facilmente aggiunto ai segnalibri, salvato o stampato per tua comodità.

Cos'è l'HTML?

HTML sta per Hypertext Markup Language – un codice utilizzato per creare la struttura di una pagina web e il suo contenuto.

Questo linguaggio di markup è composto da una serie di elementi utilizzati per far apparire o funzionare il contenuto in un certo modo ed è una parte importante del codice front-end di ogni sito web.

HTML è il linguaggio per descrivere la struttura delle pagine Web ... Con l'HTML, gli autori descrivono la struttura delle pagine utilizzando il markup. Gli elementi della lingua etichettano parti di contenuto come paragrafo, elenco, tabella e così via. - da W3.org

Ad esempio, puoi racchiudere o racchiudere parti diverse del contenuto, dove i tag che lo racchiudono possono creare un collegamento ipertestuale di una parola o di un'immagine a un'altra pagina. Puoi anche usarlo per mettere in corsivo le parole e ingrandire o ridurre i caratteri, tra gli altri.

Come notato da W3, alcune delle altre cose che l'HTML ti consente di fare includono:

• Pubblicazione di documenti online con intestazioni, testo, tabelle, elenchi, foto, ecc.
• Recupero delle informazioni in linea con un clic di un pulsante tramite collegamenti ipertestuali.
• Progettazione forme per condurre transazioni con servizi remoti a cercare informazioni, effettuare prenotazioni o ordinare prodotti, tra le altre funzioni.
• Compreso fogli di calcolo, clip video e altri media e applicazioni già presenti nei tuoi documenti.

Quindi, se dovessi fare la linea "Il mio cane è molto dolce" da solo, puoi specificare che si tratta di un paragrafo racchiudendolo nei tag dei paragrafi (ne parleremo più avanti), che sarebbe simile a: Il mio cane è molto dolce

Qual è la differenza tra HTML e HTML5?

Come suggerisce il nome, HTML5 è la quinta versione dello standard HTML. Supporta l'integrazione di video e audio nella lingua, riducendo la necessità di plug-in ed elementi di terze parti.

Di seguito sono riportate le principali differenze tra HTML e HTML5:

Inoltre, ci sono molti elementi di HTML che sono stati modificati o rimossi da HTML5. Questi includono:

• - Cambiato in
• - Cambiato in
• - Cambiato in
• - Rimosso
• - Rimosso
• - Rimosso
• - Nessun nuovo tag. Utilizza CSS.
• - Nessun nuovo tag. Utilizza CSS.
• - Nessun nuovo tag. Utilizza CSS.
• - Nessun nuovo tag. Utilizza CSS.
• - Nessun nuovo tag. Utilizza CSS.

Nel frattempo, HTML5 include anche una serie di elementi appena aggiunti. Questi includono:

Esempi HTML5 (codice PlayGround)

Esempi di struttura semantica

In HTML5 ci sono alcuni elementi semantici che possono essere usati per definire diverse parti di una pagina web. Ecco i più comuni:

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

Esempi di formattazione del testo di 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>

Esempi di tabelle

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

Esempi di media

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

Cheat Sheet HTML completo

Che tu sia uno sviluppatore esperto o qualcuno che sta solo cercando di bagnarsi i piedi nel settore, aiuta sempre avere un Foglio informativo sulla formattazione HTML maneggevole. E ne ho progettato uno che potrebbe aiutarti in ogni fase del percorso.

Scarica il cheat sheet HTML

Cos'è il CSS?

Fogli di stile a cascata o CSS descrive come gli elementi HTML verranno visualizzati sullo schermo. Poiché può controllare i layout di più pagine contemporaneamente, può farti risparmiare molto tempo e fatica.

CSS è il linguaggio per descrivere la presentazione delle pagine Web, inclusi colori, layout e caratteri. Consente di adattare la presentazione a diversi tipi di dispositivi, come schermi grandi, schermi piccoli o stampanti. - da W3.org

Qual è la differenza tra HTML e CSS?

Sebbene HTML e CSS siano entrambi linguaggi utilizzati per creare pagine Web e applicazioni, hanno funzioni diverse.

HTML è ciò che usi per dettare la struttura e il contenuto che verrà visualizzato sulla pagina web.

CSS, d'altra parte, viene utilizzato per la modifica del file web design degli elementi HTML sulla pagina Web (inclusi layout, effetti visivi e colore di sfondo).

HTML crea la struttura e il contenuto, CSS fa il design o lo stile. Insieme, HTML e CSS costituiscono un'interfaccia di pagina web.

Cos'è la sintassi CSS?

Sintassi CSS è composto da un selettore e da un blocco di dichiarazione.

Il selettore determina l'elemento HTML da applicare allo stile mentre il blocco di dichiarazione contiene una o più dichiarazioni o coppie di CSS, un nome di proprietà e un valore con due punti tra di loro.

Le dichiarazioni sono separate da punto e virgola ei blocchi di dichiarazioni sono sempre racchiusi tra parentesi graffe.

Ad esempio, se desideri modificare l'aspetto dell'intestazione 1, la sintassi CSS sarà simile a questa: h1 {color: red; dimensione carattere: 16 pz;}

Cheat Sheet CSS completo

I CSS sono abbastanza facili da usare. La sfida è che ci sono molti selezionatori e dichiarazioni che ricordarli tutti è difficile se non impossibile. Non devi memorizzarli, però.

Ecco un cheat sheet per CSS e CSS3 che puoi usare in qualsiasi momento.

Scarica CSS Cheat Sheet

Cos'è PHP?

PHP è l'acronimo di Hypertext Preprocessor, un popolare linguaggio di scripting open source incorporato in HTML utilizzato per lo sviluppo di siti Web dinamici, applicazioni Web o siti Web statici.

Dal PHP è un linguaggio lato server, i suoi script vengono eseguiti sul server (non nel browser) e il suo output è un semplice HTML sul browser.

PHP è un linguaggio di scripting generico open source ampiamente utilizzato che è particolarmente adatto per lo sviluppo web e può essere incorporato in HTML. - da PHP.net

Questo linguaggio di scripting lato server funziona su una varietà di sistemi operativi, inclusi Windows, Mac OS, Linux e Unix. È anche compatibile con la maggior parte dei server come Apache e IIS.

Rispetto ad altri linguaggi come ASP e JSP, PHP è facile da imparare per i principianti. PHP offre anche molte funzionalità di cui hanno bisogno gli sviluppatori di livello avanzato.

Qual è la differenza tra PHP e HTML?

Sebbene entrambe le lingue siano fondamentali per sviluppo web, PHP e HTML sono diversi in diversi modi.

La differenza fondamentale sta nell'utilizzo delle due lingue.

HTML viene utilizzato per il lato client (o front-end) sviluppo, mentre PHP viene utilizzato per lato server .

HTML è il linguaggio utilizzato dagli sviluppatori per organizzare i contenuti su un sito Web, come l'inserimento di testo, immagini, tabelle e collegamenti ipertestuali, la formattazione del testo e la specifica dei colori.

Nel frattempo, PHP viene utilizzato per archiviare e recuperare dati da un database, eseguire operazioni logiche, inviare e rispondere a e-mail, caricare e scaricare file, sviluppare applicazioni desktop e altro ancora.

In termini di tipo di codice, HTML è statico mentre PHP è dinamico. Un codice HTML è sempre lo stesso ogni volta che viene aperto, mentre i risultati PHP variano a seconda del browser dell'utente.

Per i nuovi sviluppatori, entrambe le lingue sono facili da imparare, sebbene la curva di apprendimento sia più breve con HTML rispetto a PHP.

Cheat Sheet completo di PHP

Se sei un programmatore alle prime armi che vuole essere più esperto in PHP o espandere la tua conoscenza di esso, ecco un Cheat sheet PHP a cui puoi fare rapidamente riferimento.

Questo cheat sheet è costituito da funzioni PHP, che sono scorciatoie per i codici ampiamente utilizzati, che sono incorporate nel linguaggio di scripting.

Scarica il Cheat Sheet di PHP

Il miglior cheat sheet per HTML, CSS e PHP

Che tu sia uno sviluppatore esperto o semplicemente qualcuno che inizia a programmare, è fantastico avere qualcosa a cui puoi sempre tornare per riferimento o semplicemente per rinfrescarti la memoria.

E come regalo per gli sviluppatori che si destreggiano tra HTML, CSS e PHP, ecco un foglio di trucco ULTIMATE, completo di tutto ciò che devi sapere e ricordare riguardo a questi tre linguaggi di codifica:

Scarica il cheat sheet combinato HTML, CSS e PHP