HTML, CSS i PHP: el full de trucs definitiu

📥 Descarrega el meu Fulls de trucs HTML, CSS i PHP, amb tot el que necessiteu saber i recordar sobre aquests tres llenguatges de codificació.

• Què és HTML?
• Exemples HTML5 (Code PlayGround)
• 📥 Full de trucs HTML
• Què és CSS?
• 📥 Full de trucs CSS
• Què és PHP?
• 📥 Full de trucs de PHP
• 📥 Full de trucs HTML CSS i PHP

L'art de la codificació pot trigar anys a dominar-se completament amb totes les etiquetes, sintaxis i altres elements dels llenguatges de programació sovint entrellaçats.

Fins i tot els desenvolupadors més experimentats poden caure en el parany d'oblidar la sintaxi correcta per a tasques concretes. Com a tal, no és realista esperar més verd desenvolupadors web tenir una comprensió perfecta de l'art.

Aquesta és la raó fulls de trampes per a HTML, CSS i PHP són extremadament útils, independentment del temps que hagis estat practicant. Serveix com a guia ràpida per trobar les ordres i sintaxis adequades, cosa que us permet centrar-vos en el desenvolupament web real.

A continuació, trobareu fulls de trucs visualment inclinats precedits d'actualitzacions ràpides per ajudar-vos en els vostres esforços de codificació. També l'he fet perquè es pugui marcar, desar o imprimir fàcilment per a la vostra comoditat.

Què és HTML?

HTML significa Hypertext Markup Language – un codi que s'utilitza per crear l'estructura d'una pàgina web i el seu contingut.

Aquest llenguatge de marques es compon d'una sèrie d'elements que solien fer que el contingut aparegués o funcionés d'una manera determinada i és una part important del codi frontal de cada lloc web.

HTML és el llenguatge per descriure l'estructura de les pàgines web... Amb HTML, els autors descriuen l'estructura de les pàgines mitjançant el marcatge. Els elements de l'idioma etiqueten peces de contingut com ara paràgraf, llista, taula, etc. – de W3.org

Per exemple, podeu incloure o embolicar diferents parts del contingut, on les etiquetes que l'adjunten poden fer que una paraula o una imatge enllaça amb una altra pàgina. També podeu utilitzar-lo per posar paraules en cursiva i fer que els tipus de lletra siguin més grans o més petits, entre d'altres.

Com ha assenyalat W3, algunes de les altres coses que HTML us permet fer inclouen:

• Publicació de documents en línia amb encapçalaments, text, taules, llistes, fotos, Etc
• Recuperació d'informació en línia amb el clic d'un botó mitjançant enllaços d'hipertext.
• Disseny formes per realitzar transaccions amb serveis remots a cercar informació, fer reserves o demanar productes, entre altres funcions.
• Fins i tot fulls de càlcul, videoclips i altres mitjans i les aplicacions que ja estan als vostres documents.

Així que si haguessis de fer la línia "El meu gos és molt dolç" per si mateix, podeu especificar que és un paràgraf tancant-lo a les etiquetes de paràgrafs (més sobre això més endavant), que tindria l'aspecte següent: El meu gos és molt dolç

Quina diferència hi ha entre HTML i HTML5?

Com el seu nom indica, HTML5 és la cinquena versió de l'estàndard HTML. Admet la integració de vídeo i àudio a l'idioma, la qual cosa redueix la necessitat de complements i elements de tercers.

A continuació es mostren les principals diferències entre HTML i HTML5:

A més, hi ha molts elements d'HTML que s'han modificat o eliminat d'HTML5. Això inclou:

• – Canviat a
• – Canviat a
• – Canviat a
• – Eliminat
• – Eliminat
• – Eliminat
• - Cap etiqueta nova. Utilitza CSS.
• - Cap etiqueta nova. Utilitza CSS.
• - Cap etiqueta nova. Utilitza CSS.
• - Cap etiqueta nova. Utilitza CSS.
• - Cap etiqueta nova. Utilitza CSS.

Mentrestant, HTML5 també inclou una sèrie d'elements afegits recentment. Això inclou:

Exemples HTML5 (Code PlayGround)

Exemples d'estructura semàntica

In HTML5 hi ha alguns elements semàntics que es poden utilitzar per definir diferents parts d'una pàgina web. Aquests són els més habituals:

<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 bàsics de format de text

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

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

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

Full de trucs HTML complet

Tant si sou un desenvolupador experimentat com si només vol mullar-se els peus a la indústria, sempre ajuda tenir un Full de trucs de format HTML pràctic. I n'he dissenyat un que us pot ajudar a cada pas del camí.

Baixeu el full de trucs HTML

Què és CSS?

Fulls d'estil en cascada o CSS descriu com es mostraran els elements HTML a la pantalla. Com que pot controlar els dissenys de diverses pàgines al mateix temps, us pot estalviar molt de temps i esforç.

CSS és el llenguatge per descriure la presentació de pàgines web, inclosos els colors, la disposició i els tipus de lletra. Permet adaptar la presentació a diferents tipus de dispositius, com ara pantalles grans, pantalles petites o impressores. – de W3.org

Quina diferència hi ha entre HTML i CSS?

Tot i que HTML i CSS són llenguatges utilitzats per crear pàgines web i aplicacions, tenen funcions diferents.

HTML és el que s'utilitza per dictar l'estructura i el contingut que es mostrarà a la pàgina web.

CSS, d'altra banda, s'utilitza per a la modificació del fitxer disseny web dels elements HTML de la pàgina web (inclosos el disseny, els efectes visuals i el color de fons).

HTML crea l'estructura i el contingut, CSS fa el disseny o l'estil. Junts, HTML i CSS formen una interfície de pàgina web.

Què és la sintaxi CSS?

Sintaxi CSS està format per un selector i un bloc de declaració.

El selector determina l'element HTML que s'ha d'aplicar mentre que el bloc de declaració conté una o més declaracions o parells de CSS, un nom de propietat i un valor amb dos punts entre ells.

Les declaracions estan separades per punt i coma i els blocs de declaració sempre es tanquen entre claus.

Per exemple, si voleu modificar l'aspecte de l'encapçalament 1, la vostra sintaxi CSS es veuria com aquesta: h1 {color:red; mida del tipus de lletra: 16 unitats;}

Full de trucs CSS complet

CSS és prou fàcil d'utilitzar. El repte és que hi ha molts seleccionadors i declaracions que recordar-los tots és difícil si no impossible. No cal memoritzar-los, però.

Aquí hi ha una full de trucs per a CSS i CSS3 que pots utilitzar en qualsevol moment.

Baixeu CSS Cheat Sheet

Què és PHP?

PHP és l'acrònim de Hypertext Preprocessor, un popular llenguatge de programació de codi obert i HTML integrat que s'utilitza per desenvolupar llocs web dinàmics, aplicacions web o llocs web estàtics.

Des PHP és un llenguatge del costat del servidor, els seus scripts s'executen al servidor (no al navegador) i la seva sortida és un HTML senzill al navegador.

PHP és un llenguatge de programació de propòsit general de codi obert àmpliament utilitzat que és especialment adequat per al desenvolupament web i es pot incrustar a HTML. – de PHP.net

Aquest llenguatge de script del costat del servidor s'executa en diversos sistemes operatius, inclosos Windows, Mac OS, Linux i Unix. També és compatible amb la majoria de servidors com Apache i IIS.

En comparació amb altres idiomes com ASP i JSP, PHP és fàcil d'aprendre per als principiants. PHP també ofereix moltes funcions que necessiten els desenvolupadors de nivell avançat.

Quina diferència hi ha entre PHP i HTML?

Tot i que ambdues llengües són crucials desenvolupament web, PHP i HTML són diferents de diverses maneres.

La diferència clau rau en el que s'utilitzen les dues llengües.

HTML s'utilitza per al costat del client desenvolupament (o front-end), mentre PHP s'utilitza per al costat del servidor desenvolupament.

HTML és el llenguatge que utilitzen els desenvolupadors per organitzar el contingut d'un lloc web, com ara inserir text, imatges, taules i hiperenllaços, donar format al text i especificar colors.

Mentrestant, PHP s'utilitza per emmagatzemar i recuperar dades d'una base de dades, realitzar operacions lògiques, enviar i respondre correus electrònics, carregar i descarregar fitxers, desenvolupar aplicacions d'escriptori i molt més.

Pel que fa al tipus de codi, HTML és estàtic mentre que PHP és dinàmic. Un codi HTML és sempre el mateix cada vegada que s'obre, mentre que els resultats PHP varien segons el navegador de l'usuari.

Per als nous desenvolupadors, ambdós idiomes són fàcils d'aprendre, tot i que la corba d'aprenentatge és més curta amb HTML que amb PHP.

Full de trucs PHP complet

Si sou un programador novell que vol ser més competent en PHP o ampliar-ne els coneixements, aquí teniu un Full de trucs PHP podeu consultar ràpidament.

Aquest full de trucs consta de funcions PHP, que són dreceres per als codis àmpliament utilitzats, que s'incorporen al llenguatge de script.

Baixeu el full de trucs de PHP

El full de trucs definitiu d'HTML, CSS i PHP

Tant si sou un desenvolupador experimentat com si només algú comença a codificar, és fantàstic tenir alguna cosa a la qual sempre podeu tornar com a referència o simplement refrescar-vos la memòria.

I com a regal als desenvolupadors que fan malabars entre ells HTML, CSS i PHP, aquí teniu un full de trucs ULTIMATE, completa amb tot el que necessites saber i recordar sobre aquests tres llenguatges de codificació:

Baixeu el full de trucs combinat HTML, CSS i PHP