HTML, CSS y PHP: la hoja de trucos definitiva

Nuestro contenido es compatible con lectores. Si hace clic en nuestros enlaces, es posible que ganemos una comisión. Cómo revisamos.

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

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:

HTML

  • No es compatible con audio y video sin soporte para reproductor flash.
  • Utiliza cookies para almacenar datos temporales.
  • No permite que JavaScipt se ejecute en el navegador.
  • Permite gráficos vectoriales mediante el uso de diferentes tecnologías como VML, Silver-light y Flash, entre otras.
  • No permite efectos de arrastrar y soltar.
  • Funciona con todos los navegadores antiguos.
  • Menos compatible con dispositivos móviles.
  • La declaración de tipo de documento es larga y complicada.
  • No tiene elementos como nav y header, ni atributos como charset, asyncy ping.
  • Extremadamente difícil obtener una verdadera ubicación geográfica de los usuarios mediante el uso de un navegador.
  • No puedo manejar una sintaxis inexacta.

HTML5

  • Admite controles de audio y video con el uso de y etiquetas
  • Utiliza bases de datos SQL y caché de aplicaciones para almacenar datos sin conexión.
  • Permite que JavaScript funcione en segundo plano con el uso de la API de trabajador web JS.
  • Los gráficos vectoriales son una parte fundamental de HTML5, al igual que SVG y lienzo.
  • Permite arrastrar y soltar efectos.
  • Haz posible dibujar formas.
  • Admite todos los navegadores nuevos como Firefox, Mozilla, Chrome y Safari.
  • Más compatible con dispositivos móviles.
  • La declaración de Doctype es simple y fácil.
  • Tiene nuevos elementos para estructuras web como navegación, encabezado y pie de página, entre otros, y también tiene atributos de juego de caracteres, unsyncy ping.
  • Hace que la codificación de caracteres sea simple y fácil.
  • Permite el seguimiento de la ubicación geográfica del usuario mediante el uso de la API de ubicación geográfica JS.
  • Capaz de manejar sintaxis inexacta.
 

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:

elementos de estructura semántica html5
Fuente: w3schools.com
 

Encabezamiento

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

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

Artículo

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

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

Pie de página

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

Ejemplos de formato de texto básico

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

Párrafo ( & )

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

Desordenado y lista ordenada

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

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

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

Enlace

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

Botón

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

Salto de línea

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

Linea horizontal

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

Habla 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índice y superíndice

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

Código

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

Hora

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

Eliminado

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

Ejemplos de tablas

Ejemplo de cabeza, cuerpo y pie de mesa

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

Ejemplo de encabezados, filas y datos de tablas

<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

Imagen

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

Imagen

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

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.

hoja de trucos html

 

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.

Hoja de trucos CSS

 

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.

Hoja de trucos de PHP

 

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

 

Preguntas Frecuentes

¿Qué es la hoja de referencia HTML CSS?

La hoja de trucos de HTML y CSS es un recurso útil para principiantes e incluso para desarrolladores web experimentados. Esta práctica guía de referencia proporciona una descripción general rápida de la sintaxis y las propiedades de HTML y CSS más comunes. 

¿Dónde puedo conseguir la hoja de trucos de PHP en formato PDF?

Puede encontrar hojas de trucos de PHP en formato PDF de varias fuentes en línea. Aquí hay algunos lugares donde puede buscar:
Sitio web oficial de PHP: Consulte el sitio web oficial de PHP (php.net) para obtener la documentación oficial, que incluye un manual completo de PHP que puede descargar en formato PDF. Si bien no es una hoja de trucos en sí, contiene información extensa sobre las funciones y el uso de PHP.
Sitios web de hojas de trucos PHP: Muchos sitios web ofrecen hojas de trucos para la programación PHP. Los sitios web como “Cheatography” a menudo ofrecen hojas de trucos aportadas por los usuarios en formato PDF. Simplemente busque “PDF de hoja de trucos de PHP” en su motor de búsqueda favorito para encontrar estos recursos.
GitHub: GitHub es una plataforma para que los desarrolladores compartan código y recursos. Puede encontrar hojas de trucos de PHP en formato PDF en GitHub buscando "hoja de trucos de PHP" en la barra de búsqueda de GitHub. Muchos desarrolladores y organizaciones comparten allí sus hojas de trucos y recursos.
Generadores de PDF en línea: Existen herramientas en línea que le permiten crear hojas de trucos personalizadas para PHP seleccionando las funciones y temas específicos que desea incluir. Estas herramientas generan un archivo PDF para que lo descargues. Una de esas herramientas es "PDFCcrowd".
Recuerde asegurarse de que la fuente que utilice para una hoja de trucos de PHP tenga buena reputación y esté actualizada para garantizar la precisión y relevancia para sus necesidades.

¿Qué es la hoja de trucos HTML5?

Un recurso útil para los desarrolladores es la hoja de referencia HTML5, que proporciona una guía de referencia rápida para los diversos elementos, atributos y sintaxis utilizados en HTML5. Esta hoja de trucos incluye información sobre cómo crear títulos, párrafos, enlaces, imágenes, tablas, formularios y más. Sirve como una herramienta útil tanto para principiantes como para desarrolladores experimentados, ayudándoles a ahorrar tiempo y evitar errores al codificar en HTML5.

¿Cuáles son las principales diferencias entre php y HTML?

PHP y HTML a menudo se comparan y contrastan debido a sus distintas funciones y utilidad en el desarrollo web. Mientras que HTML es responsable de definir la estructura y el contenido de las páginas web, PHP permite la creación de elementos dinámicos, como formularios interactivos e integración de bases de datos. En consecuencia, la elección entre PHP y HTML depende en gran medida de los requisitos y objetivos específicos de un proyecto de desarrollo web.

¿Dónde puedo encontrar la hoja de referencia de etiquetas html?

Puede encontrar hojas de referencia de etiquetas HTML en línea de varias fuentes. Aquí hay algunos lugares donde puedes buscar:
Sitio web oficial del W3C: El World Wide Web Consortium (W3C) es la organización que desarrolla y mantiene estándares web, incluido HTML. Tienen documentación completa sobre HTML, que sirve como referencia autorizada. Visite la sección HTML del sitio web del W3C para obtener información detallada sobre las etiquetas HTML.
Red de desarrolladores de Mozilla (MDN): MDN ofrece una amplia documentación sobre tecnologías web, incluido HTML. Su guía de referencia HTML es uno de los recursos disponibles más confiables y actualizados con frecuencia. Puede acceder a la referencia del elemento HTML en los documentos web de MDN.
Sitios web de hojas de trucos HTML: Muchos sitios web proporcionan hojas de referencia de etiquetas HTML en varios formatos, incluido PDF. Los sitios web como “Cheatography”, “HTML.com” y “W3Schools” a menudo ofrecen hojas de trucos HTML imprimibles.
GitHub: GitHub es un recurso valioso para los desarrolladores. Puede encontrar hojas de referencia de etiquetas HTML en varios repositorios buscando “hoja de referencia HTML” o palabras clave similares en GitHub.
Generadores de PDF en línea: Al igual que con las hojas de trucos de PHP, existen herramientas en línea que le permiten crear hojas de trucos de etiquetas HTML personalizadas seleccionando las etiquetas y elementos específicos que desea incluir. Estas herramientas generan un archivo PDF para que lo descargues.

Allí también puede encontrar la hoja de referencia html en formato pdf.

Mathias Ahlgren es el director ejecutivo y fundador de Website Rating, dirigiendo un equipo global de editores y escritores. Tiene una maestría en ciencias y gestión de la información. Su carrera giró hacia el SEO después de sus primeras experiencias en desarrollo web durante la universidad. Con más de 15 años en SEO, marketing digital y desarrollo web. Su enfoque también incluye la seguridad de los sitios web, como lo demuestra un certificado en Seguridad Cibernética. Esta experiencia diversa sustenta su liderazgo en Website Rating.

El "Equipo WSR" es un grupo colectivo de editores y escritores expertos que se especializan en tecnología, seguridad de Internet, marketing digital y desarrollo web. Apasionados por el ámbito digital, producen contenido accesible, revelador y bien investigado. Su compromiso con la precisión y la claridad hace Website Rating un recurso confiable para mantenerse informado en el dinámico mundo digital.

¡Mantente informado! Suscríbase a nuestro boletín
Suscríbase ahora y obtenga acceso gratuito a guías, herramientas y recursos exclusivos para suscriptores.
Puedes darte de baja en cualquier momento. Tus datos están seguros.
¡Mantente informado! Suscríbase a nuestro boletín
Suscríbase ahora y obtenga acceso gratuito a guías, herramientas y recursos exclusivos para suscriptores.
Puedes darte de baja en cualquier momento. Tus datos están seguros.
¡Mantente informado! ¡Suscríbase a nuestro boletín!
Suscríbase ahora y obtenga acceso gratuito a guías, herramientas y recursos exclusivos para suscriptores.
¡Estar al día! Suscríbase a nuestro boletín
Puedes darte de baja en cualquier momento. Tus datos están seguros.
Mi Empresa
¡Estar al día! Suscríbase a nuestro boletín
???? ¡Estás (casi) suscrito!
Dirígete a la bandeja de entrada de tu correo electrónico y abre el correo electrónico que te envié para confirmar tu dirección de correo electrónico.
Mi Empresa
¡Estás suscrito!
Gracias por su suscripción. Enviamos un boletín informativo con datos interesantes todos los lunes.
Compartir a...