HTML, CSS e PHP: a folla de trucos definitiva

📥 Descarga o meu Follas de trucos HTML, CSS e PHP, completa con todo o que precisa saber e lembrar sobre estas tres linguaxes de codificación.

• Que é HTML?
• Exemplos HTML5 (Code PlayGround)
• 📥 Folla de trucos HTML
• Que é CSS?
• 📥 Folla de trucos CSS
• Que é PHP?
• 📥 Folla de trucos de PHP
• 📥 Folla de trucos HTML CSS e PHP

A arte da codificación pode levar anos dominarse completamente con todas as etiquetas, sintaxes e outros elementos das linguaxes de programación que adoitan estar entrelazados.

Incluso os desenvolvedores máis experimentados poden caer na trampa de esquecer a sintaxe correcta para tarefas concretas. Polo tanto, non é realista esperar máis verde desenvolvedores web para ter unha comprensión perfecta da arte.

É por iso follas de trucos para HTML, CSS e PHP son extremadamente útiles, independentemente do tempo que levas practicando. Serve como unha guía rápida para atopar os comandos e sintaxes correctos, o que lle permite centrarse no desenvolvemento web real.

A continuación, atoparás follas de trampas visualmente inclinadas precedidas de actualizacións rápidas para axudarche nos teus esforzos de codificación. Tamén o fixen para marcar, gardar ou imprimir facilmente para a túa comodidade.

Que é HTML?

HTML significa Hypertext Markup Language – un código que se usa para crear a estrutura dunha páxina web e o seu contido.

Esta linguaxe de marcado está formada por unha serie de elementos que adoitaban facer que o contido apareza ou funcione dun xeito determinado e é unha parte importante do código de interface de cada sitio web.

HTML é a linguaxe para describir a estrutura das páxinas web... Con HTML, os autores describen a estrutura das páxinas mediante o marcado. Os elementos da linguaxe etiquetan pezas de contido como parágrafo, lista, táboa, etc. – de W3.org

Por exemplo, pode incluír ou envolver diferentes partes do contido, onde as etiquetas que encerran poden facer que unha palabra ou unha imaxe teña unha ligazón a outra páxina. Tamén podes usar isto para poñer en cursiva palabras e facer que os tipos de letra sexan máis grandes ou pequenos, entre outros.

Como observado por W3, algunhas das outras cousas que HTML che permite facer inclúen:

• Publicación de documentos en liña con títulos, texto, táboas, listas, fotos, Etc
• Recuperando información en liña con só facer clic nun botón mediante ligazóns de hipertexto.
• Deseño formas para realizar transaccións con servizos remotos para buscar información, facer reservas ou pedir produtos, entre outras funcións.
• Ata follas de cálculo, videoclips e outros medios e aplicacións xa nos seus documentos.

Entón, se tiveses que facer a liña "O meu can é moi doce" por si só, podes especificar que é un parágrafo encerrándoo en etiquetas de parágrafos (máis sobre isto máis adiante), que se verían así: O meu can é moi doce

Cal é a diferenza entre HTML e HTML5?

Así como o nome suxire, HTML5 é a quinta versión do estándar HTML. Admite a integración de vídeo e audio na linguaxe, o que reduce a necesidade de complementos e elementos de terceiros.

Abaixo amósanse as principais diferenzas entre HTML e HTML5:

Ademais, hai moitos elementos de HTML que foron modificados ou eliminados de HTML5. Estes inclúen:

• - Cambiado a
• - Cambiado a
• - Cambiado a
• – Eliminado
• – Eliminado
• – Eliminado
• - Sen etiqueta nova. Usa CSS.
• - Sen etiqueta nova. Usa CSS.
• - Sen etiqueta nova. Usa CSS.
• - Sen etiqueta nova. Usa CSS.
• - Sen etiqueta nova. Usa CSS.

Mentres tanto, HTML5 tamén inclúe unha serie de elementos recén engadidos. Estes inclúen:

Exemplos HTML5 (Code PlayGround)

Exemplos de estrutura semántica

In HTML5 existen algúns elementos semánticos que se poden utilizar para definir diferentes partes dunha páxina web. Aquí están os máis comúns:

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

Exemplos básicos de formato de texto

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

Exemplos de táboas

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

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

Folla de trucos HTML completa

Tanto se es un programador experimentado como se é alguén que só busca mollar os pés na industria, sempre axuda ter un Folla de trucos HTML útil. E deseña un que pode axudarche en cada paso do camiño.

Descargar HTML Cheat Sheet

Que é CSS?

Follas de estilo en cascada ou CSS describe como se mostrarán os elementos HTML na pantalla. Como pode controlar o deseño de varias páxinas ao mesmo tempo, pode aforrarche moito tempo e esforzo.

CSS é a linguaxe para describir a presentación de páxinas web, incluíndo cores, deseño e fontes. Permite adaptar a presentación a diferentes tipos de dispositivos, como pantallas grandes, pantallas pequenas ou impresoras. – de W3.org

Cal é a diferenza entre HTML e CSS?

Aínda que HTML e CSS son linguaxes utilizadas para crear páxinas web e aplicacións, teñen funcións diferentes.

HTML é o que usas para ditar a estrutura e o contido que se mostrará na páxina web.

CSS, pola contra, úsase para a modificación do deseño web dos elementos HTML da páxina web (incluíndo deseño, efectos visuais e cor de fondo).

HTML crea a estrutura e o contido, CSS fai o deseño ou estilo. Xuntos, HTML e CSS conforman unha interface de páxina web.

Que é a sintaxe CSS?

Sintaxe CSS está formado por un selector e un bloque de declaración.

O selector determina o elemento HTML ao que se debe estilizar mentres que o bloque de declaración contén unha ou máis declaracións ou pares de CSS, un nome de propiedade e un valor con dous puntos entre eles.

As declaracións están separadas por punto e coma e os bloques de declaración sempre están encerrados entre chaves.

Por exemplo, se desexa modificar o aspecto do seu título 1, a súa sintaxe CSS sería así: h1 {color:red; tamaño da fonte: 16 unidades;}

Folla de trucos CSS completa

CSS é o suficientemente sinxelo de usar. O reto é que hai moitos seleccionadores e declaracións de que lembralos a todos é difícil se non imposible. Con todo, non tes que memorizalos.

Aquí está unha folla de trucos para CSS e CSS3 que podes usar en calquera momento.

Descarga a folla de datos CSS

Que é PHP?

PHP é un acrónimo de Hypertext Preprocessor, unha popular linguaxe de script de código aberto e HTML que se usa para desenvolver sitios web dinámicos, aplicacións web ou sitios web estáticos.

Desde PHP é unha linguaxe do servidor, os seus scripts execútanse no servidor (non no navegador) e a súa saída é un HTML simple no navegador.

PHP é unha linguaxe de script de propósito xeral de código aberto amplamente usada que é especialmente adecuada para o desenvolvemento web e que se pode incorporar en HTML. – desde PHP.net

Esta linguaxe de script do lado do servidor execútase nunha variedade de sistemas operativos, incluíndo Windows, Mac OS, Linux e Unix. Tamén é compatible coa maioría dos servidores como Apache e IIS.

En comparación con outros idiomas como ASP e JSP, PHP é fácil de aprender para principiantes. PHP tamén ofrece moitas funcións que necesitan os desenvolvedores de nivel avanzado.

Cal é a diferenza entre PHP e HTML?

Aínda que as dúas linguas son fundamentais para desenvolvemento web, PHP e HTML son diferentes en varios aspectos.

A diferenza fundamental reside no que se utilizan as dúas linguas.

O HTML úsase para o lado do cliente desenvolvemento (ou front-end), mentres PHP úsase para o lado do servidor desenvolvemento.

HTML é a linguaxe que usan os desenvolvedores para organizar o contido dun sitio web, como inserir texto, imaxes, táboas e hipervínculos, dar formato ao texto e especificar cores.

Mentres tanto, PHP úsase para almacenar e recuperar datos dunha base de datos, realizar operacións lóxicas, enviar e responder correos electrónicos, cargar e descargar ficheiros, desenvolver aplicacións de escritorio e moito máis.

En canto ao tipo de código, HTML é estático mentres que PHP é dinámico. Un código HTML é sempre o mesmo cada vez que se abre, mentres que os resultados PHP varían segundo o navegador do usuario.

Para os novos desenvolvedores, ambos idiomas son fáciles de aprender, aínda que a curva de aprendizaxe é máis curta con HTML que con PHP.

Folla completa de trucos de PHP

Se es un programador novato que quere ser máis competente en PHP ou ampliar os seus coñecementos sobre el, aquí tes un Folla de trucos PHP podes consultar rapidamente.

Esta folla de trampas consta de funcións PHP, que son atallos para os códigos amplamente utilizados, que están integradas na linguaxe de script.

Descargar PHP Cheat Sheet

A folla de trucos definitiva de HTML, CSS e PHP

Tanto se es un programador experimentado como se estás empezando a codificar, é xenial ter algo ao que sempre poidas volver como referencia ou simplemente refrescar a túa memoria.

E como agasallo para os desenvolvedores que fan malabares entre eles HTML, CSS e PHP, aquí tes unha folla de trucos ULTIMATE, completa con todo o que necesitas saber e lembrar sobre estas tres linguaxes de codificación:

Descarga a folla de trucos combinada de HTML, CSS e PHP