📥 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 DE paciente 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:
- nav
- audio
- figcaption
- progreso
- comando
- equipo
- lista de datos
- Video
- la figura
- metro
- datos
- .
- equipo
- aparte
- lienzo
- resumen
- rp
- rt
- detalles
- wbr
- encabezamiento
- pie de página
- keygen
- incrustar
- artĂculo
- hgrupo
- bdi
- marca
- salida
- fuente
- seguir
- .
- rubĂ
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:
![HTML CSS y PHP: la hoja de trucos definitiva [Descarga gratuita] (1) HTML CSS y PHP: la hoja de trucos definitiva [Descarga gratuita] (1)](https://i0.wp.com/www.websiterating.com/wp-content/uploads/html5-semantic-structure-elements.gif)
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:[emailprotected]">[emailprotected]</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 referencia HTML práctico. Y he diseñado uno que podrĂa ayudarte en cada paso del camino.
![HTML CSS y PHP: la hoja de trucos definitiva [Descarga gratuita] (2) HTML CSS y PHP: la hoja de trucos definitiva [Descarga gratuita] (2)](https://i0.wp.com/www.websiterating.com/wp-content/uploads/Ultimate-HTML-Cheatsheet.png)
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.
![HTML CSS y PHP: la hoja de trucos definitiva [Descarga gratuita] (3) HTML CSS y PHP: la hoja de trucos definitiva [Descarga gratuita] (3)](https://i0.wp.com/www.websiterating.com/wp-content/uploads/Ultimate-CSS-Cheatsheet.png)
¿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.
![HTML CSS y PHP: la hoja de trucos definitiva [Descarga gratuita] (4) HTML CSS y PHP: la hoja de trucos definitiva [Descarga gratuita] (4)](https://i0.wp.com/www.websiterating.com/wp-content/uploads/Ultimate-PHP-Cheatsheet.png)
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