HTML, CSS y PHP: la hoja de trucos definitiva

📥 Descarga mi Hojas de trucos HTML, CSS y PHP, completo con todo lo que necesita saber y recordar sobre estos tres lenguajes de codificación.

• ¿Qué es HTML?
• Ejemplos HTML5 (Code PlayGround)
• 📥 Hoja de referencia HTML
• ¿Qué es CSS?
• 📥 Hoja de trucos CSS
• ¿Qué es PHP?
• 📥 Hoja de referencia de PHP
• 📥 Hoja de trucos HTML CSS y PHP

El arte de la codificación puede tardar años en dominarse por completo con todas las etiquetas, sintaxis y otros elementos de los lenguajes de programación que a menudo se entrelazan.

Incluso los desarrolladores más experimentados pueden caer en la trampa de olvidar la sintaxis correcta para determinadas tareas. Como tal, no es realista esperar más verde desarrolladores de sitios de Internet tener una perfecta comprensión del arte.

Esta es la razón hojas de trucos para HTML, CSS y PHP son extremadamente útiles, independientemente del tiempo que lleves practicando. Sirve como una guía rápida para encontrar los comandos y sintaxis correctos, lo que le permite concentrarse en el desarrollo web real.

A continuación, encontrará hojas de trucos visualmente inclinadas precedidas de actualizaciones rápidas para ayudarlo en sus esfuerzos de codificación. También lo hice para marcarlo, guardarlo o imprimirlo fácilmente para su conveniencia.

¿Qué es HTML?

HTML son las siglas de Hypertext Markup Language - un código que se utiliza para crear la estructura de una página web y su contenido.

Este lenguaje de marcado se compone de una serie de elementos que solían hacer que el contenido apareciera o funcionara de cierta manera y es una parte importante del código de interfaz de cada sitio web.

HTML es el lenguaje para describir la estructura de las páginas web… Con HTML, los autores describen la estructura de las páginas usando marcado. Los elementos del idioma etiquetan partes de contenido como párrafos, listas, tablas, etc. - de W3.org

Por ejemplo, puede incluir o envolver diferentes partes del contenido, donde las etiquetas adjuntas pueden convertir una palabra o imagen en un hipervínculo a otra página. También puede usar esto para poner en cursiva palabras y hacer que las fuentes sean más grandes o más pequeñas, entre otros.

Como ha señalado W3, algunas de las otras cosas que HTML le permite hacer incluyen:

• Publicar documentos en línea con encabezados, texto, tablas, listas, fotos, etc.
• Recuperar información en línea con solo hacer clic en un botón a través de enlaces de hipertexto.
• Diseño Formularios para realizar transacciones con servicios remotos para buscar información, hacer reservas o pedir productos, entre otras funciones.
• Incluye hojas de cálculo, videoclips y otros medios y aplicaciones que ya están en sus documentos.

Entonces, si tuvieras que hacer la línea "Mi perro es muy dulce" por sí solo, puede especificar que es un párrafo encerrándolo en etiquetas de párrafo (más sobre esto más adelante), que se vería así: Mi perro es muy dulce

¿Cuál es la diferencia entre HTML y HTML5?

Como su nombre indica, HTML5 es la quinta versión del estándar HTML. Admite la integración de video y audio en el idioma, lo que reduce la necesidad de complementos y elementos de terceros.

A continuación se muestran las principales diferencias entre HTML y HTML5:

Además, hay muchos elementos de HTML que se han modificado o eliminado de HTML5. Éstos incluyen:

• - Cambiado a
• - Cambiado a
• - Cambiado a
• - eliminado
• - eliminado
• - eliminado
• - Sin etiqueta nueva. Utiliza CSS.
• - Sin etiqueta nueva. Utiliza CSS.
• - Sin etiqueta nueva. Utiliza CSS.
• - Sin etiqueta nueva. Utiliza CSS.
• - Sin etiqueta nueva. Utiliza CSS.

Mientras tanto, HTML5 también incluye una serie de elementos recién agregados. Éstos incluyen:

Ejemplos HTML5 (Code PlayGround)

Ejemplos de estructura semántica

In HTML5 hay algunos elementos semánticos que se pueden usar para definir diferentes partes de una página web. Aquí están los más comunes:

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

Ejemplos de formato de texto básico

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

Ejemplos de tablas

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

Ejemplos de medios

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

Hoja de trucos HTML completa

Ya sea que sea un desarrollador experimentado o alguien que solo esté buscando mojarse los pies en la industria, siempre es útil tener un Hoja de trucos de formato HTML práctico. Y he diseñado uno que podría ayudarte en cada paso del camino.

Descargar hoja de referencia HTML

¿Qué es CSS?

Hojas de estilo en cascada o CSS describe cómo se mostrarán los elementos HTML en pantalla. Debido a que puede controlar los diseños de varias páginas al mismo tiempo, puede ahorrarle mucho tiempo y esfuerzo.

CSS es el lenguaje para describir la presentación de páginas web, incluidos los colores, el diseño y las fuentes. Permite adaptar la presentación a diferentes tipos de dispositivos, como pantallas grandes, pantallas pequeñas o impresoras. - de W3.org

¿Cuál es la diferencia entre HTML y CSS?

Si bien HTML y CSS son lenguajes que se utilizan para crear páginas web y aplicaciones, tienen funciones diferentes.

HTML es lo que utiliza para dictar la estructura y el contenido que se mostrará en la página web.

CSS, por otro lado, se utiliza para la modificación del diseñadores web de los elementos HTML en la página web (incluido el diseño, los efectos visuales y el color de fondo).

HTML crea la estructura y el contenido, CSS hace el diseño o el estilo. Juntos, HTML y CSS forman una interfaz de página web.

¿Qué es la sintaxis CSS?

Sintaxis CSS se compone de un selector y un bloque de declaración.

El selector determina el elemento HTML al que se le aplicará estilo, mientras que el bloque de declaración contiene una o más declaraciones o pares de CSS, un nombre de propiedad y un valor con dos puntos entre ellos.

Las declaraciones están separadas por punto y coma y los bloques de declaración siempre están encerrados entre llaves.

Por ejemplo, si desea modificar la apariencia de su encabezado 1, su sintaxis CSS se vería así: h1 {color: red; tamaño de fuente: 16pc;}

Hoja de trucos CSS completa

CSS es bastante fácil de usar. El desafío es que hay muchos selectores y declaraciones de que recordarlos todos es difícil, si no imposible. Sin embargo, no tienes que memorizarlos.

Aquí hay un hoja de trucos para CSS y CSS3 que puedes usar en cualquier momento.

Descargar hoja de trucos CSS

¿Qué es PHP?

PHP es un acrónimo de Hypertext Preprocessor, un popular lenguaje de programación de código abierto integrado en HTML que se utiliza para desarrollar sitios web dinámicos, aplicaciones web o sitios web estáticos.

Como PHP es un lenguaje del lado del servidor, sus scripts se ejecutan en el servidor (no en el navegador) y su salida es un HTML simple en el navegador.

PHP es un lenguaje de scripting de propósito general de código abierto ampliamente utilizado que es especialmente adecuado para el desarrollo web y puede integrarse en HTML. - de PHP.net

Este lenguaje de secuencias de comandos del lado del servidor se ejecuta en una variedad de sistemas operativos, incluidos Windows, Mac OS, Linux y Unix. También es compatible con la mayoría de servidores como Apache e IIS.

Comparado con otros lenguajes como ASP y JSP, PHP es fácil de aprender para principiantes. PHP también ofrece muchas características que los desarrolladores de nivel avanzado necesitan.

¿Cuál es la diferencia entre PHP y HTML?

Aunque ambos idiomas son cruciales para desarrollo web, PHP y HTML son diferentes de varias formas.

La diferencia clave radica en para qué se utilizan los dos idiomas.

HTML se utiliza para el lado del cliente (o front-end), mientras que PHP se usa para el lado del servidor desarrollo.

HTML es el lenguaje que usan los desarrolladores para organizar el contenido de un sitio web, como insertar texto, imágenes, tablas e hipervínculos, dar formato al texto y especificar colores.

Mientras tanto, PHP se utiliza para almacenar y recuperar datos de una base de datos, realizar operaciones lógicas, enviar y responder correos electrónicos, cargar y descargar archivos, desarrollar aplicaciones de escritorio y más.

En términos de tipo de código, HTML es estático mientras que PHP es dinámico. Un código HTML es siempre el mismo cada vez que se abre, mientras que los resultados de PHP varían según el navegador del usuario.

Para los nuevos desarrolladores, ambos lenguajes son fáciles de aprender, aunque la curva de aprendizaje es más corta con HTML que con PHP.

Hoja de referencia completa de PHP

Si es un programador novato que quiere ser más competente en PHP o ampliar su conocimiento, aquí tiene un Hoja de trucos de PHP puede consultar rápidamente.

Esta hoja de trucos consta de funciones PHP, que son atajos para los códigos más utilizados, que están integradas en el lenguaje de programación.

Descargar la hoja de trucos de PHP

La hoja de trucos definitiva de HTML, CSS y PHP

Ya sea que sea un desarrollador experimentado o simplemente alguien que comienza a programar, es genial tener algo a lo que siempre pueda volver como referencia o simplemente refrescar su memoria.

Y como regalo para los desarrolladores que hacen malabares entre HTML, CSS y PHP, aquí hay una hoja de trucos ULTIMATE, completo con todo lo que necesita saber y recordar con respecto a estos tres lenguajes de codificación:

Descargar la hoja de referencia combinada de HTML, CSS y PHP