Le migliori offerte del Black Friday / Cyber ​​Monday del 2022 Clicca qui 🤑

HTML, CSS e PHP: l'ultimo cheat sheet

Scritto da

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

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. Pertanto, 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 ti eserciti. Serve come una guida rapida per trovare i comandi e le sintassi giuste, permettendoti di concentrarti sullo sviluppo web effettivo.

Di seguito, troverai cheat sheet visivamente inclinati 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 del 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:

HTML

  • Non supporta audio e video senza supporto per flash player.
  • Utilizza i cookie per memorizzare dati temporanei.
  • Non consente l'esecuzione di JavaScipt nel browser.
  • Consente la grafica vettoriale utilizzando diverse tecnologie come VML, Silver-light e Flash, tra le altre.
  • Non consente effetti di trascinamento della selezione.
  • Funziona con tutti i browser meno recenti.
  • Meno mobile-friendly.
  • La dichiarazione di Doctype è lunga e complicata.
  • Non ha elementi come nav e header, così come attributi come charset, asynce ping.
  • Estremamente difficile ottenere una vera posizione geografica degli utenti utilizzando un browser.
  • Non è possibile gestire la sintassi imprecisa.

HTML5

  • Supporta i controlli audio e video con l'uso di e tag.
  • Utilizza database SQL e cache dell'applicazione per archiviare dati offline.
  • Consente a JavaScript di funzionare in background con l'utilizzo dell'API di lavoro Web JS.
  • La grafica vettoriale è una parte fondamentale di HTML5, proprio come SVG e canvas.
  • Consente effetti di trascinamento della selezione.
  • Rendi possibile disegnare forme.
  • Supporta tutti i nuovi browser come Firefox, Mozilla, Chrome e Safari.
  • Più mobile-friendly.
  • La dichiarazione di Doctype è semplice e facile.
  • Ha nuovi elementi per le strutture web come nav, header e footer, tra gli altri, e ha anche attributi di charset, unsynce ping.
  • Rende la codifica dei caratteri semplice e facile.
  • Consente il monitoraggio della posizione geografica dell'utente utilizzando JS GeoLocation API.
  • Capace di gestire una sintassi imprecisa.
 

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:

 

Intestazione

<header>
  <h1>Guide to Search Engines</h1>
</header>

Nav

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
 

Sezione

<section>
  <h2>Internet Browsers</h2>
  <p>Google Chrome, Mozilla Firefox, Internet Explorer, Safari and Opera dominate the browser market.</p>
</section>

Articolo

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

A parte (barra laterale)

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

Piè di pagina

<footer>
  <p>Copyright Example.com. Read our <a href="#">privacy policy</a>.</p>
</footer>
 

Esempi di formattazione del testo di base

Titoli per

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

Paragrafo ( & )

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

Non ordinato ed elenco ordinato

<ul>
  <li>HTML5</li>
  <li>CSS3</li>
  <li>PHP</li>
</ul>

<ol>
  <li>HTML5</li>
  <li>CSS3</li>
  <li>PHP</li>
</ol>

Blockquote e cita

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

Link

<p>Search for it on <a href="https://www.google.com/" title="Google search engine">Google</a>

Pulsante

<button name="button">I am a Button. Click me!</button>
 

Interruzione di linea

<p>The line break tag produces a<br> line break in<br> text (carriage-return)</p>

Linea orizzontale

<p>This is the first paragraph of text.</p><hr><p>This is second paragraph of text.</p>
 

Indirizzo

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

Pedice e apice

<p>The chemical formula of water is H<sub>2</sub>O</p>

<p>This text is <sup>superscripted</sup></p>
 

Abbreviazione

<p><abbr title="Hypertext Markup Language">HTML</abbr> is easy to learn.</p>

Codice

<p>This is normal text. <code>This is code.</code> This is normal text.</p>
 

Tempo

<p>The movie starts at <time>20:00</time>.</p>

Eliminato

<p>I am <del>wrong</del> right, you are <del>right</del> wrong.</p>
 

Esempi di tabelle

Esempio di testa, corpo e piede del tavolo

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

Intestazioni di tabella, righe ed esempio di dati

<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

Immagine

<img src="images/dinosaur.png" 
     alt="The head and torso of a dinosaur skeleton;it has a large head with long sharp teeth"/>

Immagine

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

figura

<figure>
    <img src="/images/frog.png" alt="Tree frog" />
    <figcaption>Tree frog by David Clode on Unsplash</figcaption>
</figure>

video

<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, è sempre utile avere un Cheat sheet HTML maneggevole. E ne ho progettato uno che potrebbe aiutarti in ogni fase del processo.

cheat sheet html

 

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

CSS è abbastanza facile da usare. La sfida è che ci sono molti selezionatori e dichiarazioni che ricordarli tutti è difficile se non impossibile. Tuttavia, non è necessario memorizzarli.

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

Cheat Sheet CSS

 

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 viene eseguito 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 ampliare le tue conoscenze, 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.

Cheat Sheet di PHP

 

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 sta iniziando a programmare, è bello avere qualcosa a cui puoi sempre tornare come riferimento o semplicemente 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

 

Iscriviti alla nostra newsletter

Iscriviti alla nostra newsletter settimanale di riepilogo e ricevi le ultime notizie e tendenze del settore

Cliccando 'iscriviti' accetti il ​​nostro termini di utilizzo e informativa sulla privacy.