HTML, CSS i PHP: el full de trucs definitiu

El nostre contingut és compatible amb els lectors. Si feu clic als nostres enllaços, podrem guanyar una comissió. Com revisem.

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

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:

HTML

  • No admet àudio i vídeo sense suport de Flash Player.
  • Utilitza cookies per emmagatzemar dades temporals.
  • No permet que JavaScipt s'executi al navegador.
  • Permet gràfics vectorials utilitzant diferents tecnologies com VML, Silver-light i Flash, entre d'altres.
  • No permet efectes d'arrossegar i deixar anar.
  • Funciona amb tots els navegadors antics.
  • Menys adaptat per a mòbils.
  • La declaració de Doctype és llarga i complicada.
  • No té elements com nav i header, així com atributs com charset, async, i ping.
  • Extremadament difícil obtenir la geolocalització real dels usuaris mitjançant un navegador.
  • No es pot gestionar la sintaxi inexacta.

HTML5

  • Admet controls d'àudio i vídeo amb l'ús de i etiquetes.
  • Utilitza bases de dades SQL i memòria cau d'aplicacions per emmagatzemar dades fora de línia.
  • Permet que JavaScript funcioni en segon pla amb l'ús de l'API JS Web worker.
  • Els gràfics vectorials són una part fonamental d'HTML5, com SVG i llenç.
  • Permet efectes d'arrossegar i deixar anar.
  • Permet dibuixar formes.
  • Admet tots els navegadors nous com Firefox, Mozilla, Chrome i Safari.
  • Més adaptat per a mòbils.
  • La declaració de Doctype és senzilla i fàcil.
  • Té elements nous per a estructures web com ara nav, capçalera i peu de pàgina, entre d'altres, i també té atributs de joc de caràcters, unsync, i ping.
  • Fa que la codificació de caràcters sigui senzilla i senzilla.
  • Permet el seguiment de la geolocalització de l'usuari mitjançant l'API JS GeoLocation.
  • Capaç de gestionar una sintaxi imprecisa.
 

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:

 

Capçalera

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

Secció

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

Article

<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 part (barra lateral)

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

Peu de pàgina

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

Exemples bàsics de format de text

Encapçalaments a

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

Paràgraf ( & )

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

No ordenat i llista ordenada

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

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

Cita de bloc i citar

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

Enllaç

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

Botó

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

Salt de línia

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

Línia horitzontal

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

adreça

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

Subíndex i superíndex

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

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

Abreviatura

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

Codi

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

Temps

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

S'ha suprimit

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

Exemples de taules

Exemple de cap de taula, cos i peu

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

Encapçalaments de taules, files i exemple de dades

<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

Imatge

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

Imatge

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

Vídeo

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

full de trucs html

 

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.

Full de trucs CSS

 

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.

Full de trucs de PHP

 

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

 

FAQ

Què és el full de trucs html css?

El full de trucs HTML i CSS és un recurs útil per a principiants i fins i tot desenvolupadors web experimentats. Aquesta pràctica guia de referència ofereix una visió general ràpida de la sintaxi i propietats HTML i CSS més habituals. 

On puc aconseguir el full de trucs php pdf?

Podeu trobar fulls de trucs de PHP en format PDF de diverses fonts en línia. Aquí teniu alguns llocs on podeu mirar:
Lloc web oficial de PHP: Consulteu el lloc web oficial de PHP (php.net) per a la documentació oficial, que inclou un manual complet de PHP que podeu descarregar en format PDF. Tot i que no és un full de trampes per se, conté informació àmplia sobre les funcions i l'ús de PHP.
Llocs web de fulls de trucs de PHP: Molts llocs web ofereixen fulls de trucs per a la programació PHP. Els llocs web com "Cheatography" sovint ofereixen fulls de trucs aportats pels usuaris en format PDF. Només cal que cerqueu "PHP full de trampes PDF" al vostre motor de cerca preferit per trobar aquests recursos.
GitHub: GitHub és una plataforma perquè els desenvolupadors comparteixin codi i recursos. Podeu trobar fulls de trucs PHP en format PDF a GitHub cercant "Full de trucs PHP" a la barra de cerca de GitHub. Molts desenvolupadors i organitzacions hi comparteixen les seves fitxes i recursos.
Generadors de PDF en línia: Hi ha eines en línia que us permeten crear fulls de trucs personalitzats per a PHP seleccionant les funcions i temes específics que voleu incloure. Aquestes eines generen un fitxer PDF per descarregar-lo. Una d'aquestes eines és "PDFCcrowd".
Recordeu assegurar-vos que la font que utilitzeu per a un full de trucs PHP sigui fiable i estigui actualitzada per garantir la precisió i la rellevància per a les vostres necessitats.

Què és el full de trucs html5?

Un recurs útil per als desenvolupadors és l'HTML5 Cheat Sheet, que proporciona una guia de referència ràpida per als diferents elements, atributs i sintaxis utilitzats en HTML5. Aquest full de trucs inclou informació sobre com crear encapçalaments, paràgrafs, enllaços, imatges, taules, formularis i molt més. Serveix com una eina útil tant per a desenvolupadors principiants com per a desenvolupadors experimentats, ajudant-los a estalviar temps i evitar errors durant la codificació en HTML5.

Quines són les principals diferències entre php i HTML?

PHP i HTML sovint es comparen i contrasten a causa de les seves diferents funcions i utilitat en el desenvolupament web. Mentre que HTML és l'encarregat de definir l'estructura i el contingut de les pàgines web, PHP permet la creació d'elements dinàmics, com ara formularis interactius i integració de bases de dades. En conseqüència, l'elecció entre PHP i HTML depèn en gran mesura dels requisits i objectius específics d'un projecte de desenvolupament web.

On puc trobar el full de trucs d'etiquetes html?

Podeu trobar fulls de trampes d'etiquetes HTML en línia des de diverses fonts. Aquí teniu alguns llocs on podeu mirar:
Lloc web oficial del W3C: El World Wide Web Consortium (W3C) és l'organització que desenvolupa i manté estàndards web, inclòs HTML. Tenen documentació completa sobre HTML, que serveix com a referència autoritzada. Visiteu la secció HTML del lloc web del W3C per obtenir informació detallada sobre les etiquetes HTML.
Xarxa de desenvolupadors de Mozilla (MDN): MDN ofereix una àmplia documentació sobre tecnologies web, inclòs HTML. La seva guia de referència HTML és un dels recursos més fiables i actualitzats amb freqüència. Podeu accedir a la referència de l'element HTML als documents web de MDN.
Llocs web de fulls de trucs HTML: Molts llocs web ofereixen fulls de trucs d'etiquetes HTML en diversos formats, inclòs el PDF. Els llocs web com "Cheatography", "HTML.com" i "W3Schools" sovint ofereixen fulls de trucs HTML imprimibles.
GitHub: GitHub és un recurs valuós per als desenvolupadors. Podeu trobar fulls de trucs d'etiquetes HTML en diversos dipòsits cercant "full de trampes HTML" o paraules clau similars a GitHub.
Generadors de PDF en línia: Igual que amb els fulls de trucs PHP, hi ha eines en línia que us permeten crear fulls de trucs d'etiquetes HTML personalitzades seleccionant les etiquetes i elements específics que voleu incloure. Aquestes eines generen un fitxer PDF per descarregar-lo.

Allà també podeu trobar el full de trucs html en format pdf.

Mathias Ahlgren és el CEO i fundador de Website Rating, dirigint un equip global d'editors i escriptors. Té un màster en ciències de la informació i gestió. La seva carrera va girar cap al SEO després de les primeres experiències de desenvolupament web durant la universitat. Amb més de 15 anys en SEO, màrqueting digital i desenvolupament web. El seu enfocament també inclou la seguretat del lloc web, demostrada per un certificat en ciberseguretat. Aquesta experiència diversa recolza el seu lideratge Website Rating.

El "WSR Team" és el grup col·lectiu d'editors i escriptors experts especialitzats en tecnologia, seguretat a Internet, màrqueting digital i desenvolupament web. Apassionats de l'àmbit digital, produeixen contingut ben investigat, perspicaç i accessible. El seu compromís amb la precisió i la claredat fa Website Rating un recurs de confiança per mantenir-se informat en el dinàmic món digital.

Estigues informat! Uneix-te al nostre butlletí
Subscriviu-vos ara i obteniu accés gratuït a guies, eines i recursos només per a subscriptors.
Pots donar-te de baixa en qualsevol moment. Les teves dades estan segures.
Estigues informat! Uneix-te al nostre butlletí
Subscriviu-vos ara i obteniu accés gratuït a guies, eines i recursos només per a subscriptors.
Pots donar-te de baixa en qualsevol moment. Les teves dades estan segures.
Estigues informat! Uneix-te al nostre butlletí!
Subscriviu-vos ara i obteniu accés gratuït a guies, eines i recursos només per a subscriptors.
Estigueu al dia! Uneix-te al nostre butlletí
Pots donar-te de baixa en qualsevol moment. Les teves dades estan segures.
La meva empresa
Estigueu al dia! Uneix-te al nostre butlletí
🙌 Esteu (gairebé) subscrit!
Dirigiu-vos a la vostra bústia de correu electrònic i obriu el correu electrònic que us he enviat per confirmar la vostra adreça de correu electrònic.
La meva empresa
Esteu subscrit!
Gràcies per la teva subscripció. Enviem un butlletí informatiu amb dades detallades cada dilluns.
Comparteix a...