HTML, CSS e PHP: The Ultimate Cheat Sheet

📥 Baixe meu Folhas de dicas de HTML, CSS e PHP, completo com tudo que você precisa saber e lembrar sobre essas três linguagens de codificação.

• O que é HTML?
• Exemplos de HTML5 (Code PlayGround)
• 📥 Folha de referências HTML
• O que é CSS?
• 📥 Folha de referências de CSS
• O que é PHP?
• 📥 Folha de referências do PHP
• 📥 Folha de referências HTML CSS e PHP

A arte da codificação pode levar anos para ser totalmente dominada com todas as tags, sintaxes e outros elementos de linguagens de programação frequentemente interligados.

Mesmo os desenvolvedores mais experientes podem cair na armadilha de esquecer a sintaxe correta para determinadas tarefas. Como tal, é irreal esperar mais verde desenvolvedores da web ter uma compreensão perfeita da arte.

É por isso folhas de dicas para HTML, CSS e PHP são extremamente úteis, independentemente de quanto tempo você pratica. Ele serve como um guia rápido para encontrar os comandos e sintaxes corretos, permitindo que você se concentre no desenvolvimento web real.

Abaixo, você encontrará folhas de dicas visualmente inclinadas precedidas por atualizações rápidas para ajudá-lo em seus esforços de codificação. Também o fiz para ser facilmente marcado, salvo ou impresso para sua conveniência.

O que é HTML?

HTML significa Hypertext Markup Language – um código usado para criar a estrutura de uma página da Web e seu conteúdo.

Essa linguagem de marcação é composta por uma série de elementos que costumavam fazer o conteúdo aparecer ou funcionar de uma determinada maneira e é uma parte importante do código de front-end de cada site.

HTML é a linguagem para descrever a estrutura das páginas da Web ... Com HTML, os autores descrevem a estrutura das páginas usando marcação. Os elementos do idioma identificam partes de conteúdo, como parágrafo, lista, tabela e assim por diante. - de W3.org

Por exemplo, você pode delimitar ou envolver diferentes partes do conteúdo - onde as tags delimitadoras podem criar um hiperlink de palavra ou imagem para outra página. Você também pode usar isso para colocar palavras em itálico e tornar as fontes maiores ou menores, entre outras.

Como observado por W3, algumas das outras coisas que o HTML permite que você faça incluem:

• Publicação de documentos online com títulos, texto, tabelas, listas, fotos, etc.
• Recuperar informações online com o clique de um botão via links de hipertexto.
• Desenho formas para realizar transações com serviços remotos para pesquise informações, faça reservas ou encomende produtos, entre outras funções.
• Incluindo planilhas, videoclipes e outras mídias e aplicativos já em seus documentos.

Então, se você fosse fazer a linha “Meu cachorro é muito doce” por si só, você pode especificar que é um parágrafo colocando-o entre tags de parágrafos (mais sobre isso mais tarde), que se pareceriam com: Meu cachorro é muito doce

Qual é a diferença entre HTML e HTML5?

Como o nome sugere, HTML5 é a quinta versão do padrão HTML. Ele suporta a integração de vídeo e áudio no idioma, o que reduz a necessidade de plug-ins e elementos de terceiros.

Abaixo estão as principais diferenças entre HTML e HTML5:

Além disso, existem muitos elementos de HTML que foram modificados ou removidos do HTML5. Esses incluem:

• - Alterado para
• - Alterado para
• - Alterado para
• - Removido
• - Removido
• - Removido
• - Nenhuma nova tag. Usa CSS.
• - Nenhuma nova tag. Usa CSS.
• - Nenhuma nova tag. Usa CSS.
• - Nenhuma nova tag. Usa CSS.
• - Nenhuma nova tag. Usa CSS.

Enquanto isso, o HTML5 também inclui vários elementos recém-adicionados. Esses incluem:

Exemplos de HTML5 (Code PlayGround)

Exemplos de estrutura semântica

In HTML5 existem alguns elementos semânticos que podem ser usados ​​para definir diferentes partes de uma página web. Aqui estão os mais comuns:

<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 formatação 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 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>

<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 mídia

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

Folha de referências HTML completa

Quer você seja um desenvolvedor experiente ou alguém que está apenas querendo se aventurar na indústria, sempre ajuda ter um Folha de dicas de formatação HTML útil. E desenvolvi um que pode ajudá-lo em cada etapa do caminho.

Baixar folha de referências em HTML

O que é CSS?

Cascading Style Sheets ou CSS descreve como os elementos HTML serão exibidos na tela. Como ele pode controlar os layouts de várias páginas ao mesmo tempo, pode economizar muito tempo e esforço.

CSS é a linguagem para descrever a apresentação de páginas da Web, incluindo cores, layout e fontes. Permite adaptar a apresentação a diferentes tipos de dispositivos, como telas grandes, telas pequenas ou impressoras. - de W3.org

Qual é a diferença entre HTML e CSS?

Embora HTML e CSS sejam linguagens usadas para construir páginas da web e aplicativos, eles têm funções diferentes.

HTML é o que você usa para ditar a estrutura e o conteúdo que será exibido na página da web.

CSS, por outro lado, é usado para a modificação do web design dos elementos HTML na página da web (incluindo layout, efeitos visuais e cor de fundo).

HTML cria a estrutura e conteúdo, CSS faz o design ou estilo. Juntos, HTML e CSS formam uma interface de página da web.

O que é sintaxe CSS?

Sintaxe CSS é composto por um seletor e um bloco de declaração.

O seletor determina o elemento HTML a ser estilizado enquanto o bloco de declaração contém uma ou mais declarações ou pares de CSS, um nome de propriedade e um valor com dois pontos entre eles.

As declarações são separadas por ponto e vírgula e os blocos de declaração são sempre colocados entre chaves.

Por exemplo, se você deseja modificar a aparência do título 1, sua sintaxe CSS seria algo como: h1 {color: red; tamanho da fonte: 16pc;}

Folha de referências CSS completa

CSS é bastante fácil de usar. O desafio é que existem muitos seletores e declarações que lembrar de todos eles é difícil, senão impossível. Você não tem que memorizá-los, no entanto.

Aqui está um folha de dicas para CSS e CSS3 que você pode usar a qualquer hora.

Baixar folha de dicas CSS

O que é PHP?

PHP é um acrônimo para Hypertext Preprocessor, uma linguagem de script embutida em HTML de código aberto popular usada para desenvolver sites dinâmicos, aplicativos da web ou sites estáticos.

Como PHP é uma linguagem do lado do servidor, seus scripts são executados no servidor (não no navegador) e sua saída é um HTML simples no navegador.

PHP é uma linguagem de script de código-fonte aberto amplamente usada, especialmente adequada para desenvolvimento da Web e pode ser incorporada em HTML. - de PHP.net

Essa linguagem de script do lado do servidor é executada em vários sistemas operacionais, incluindo Windows, Mac OS, Linux e Unix. Também é compatível com a maioria dos servidores, como Apache e IIS.

Comparado com outras linguagens como ASP e JSP, PHP é fácil de aprender para iniciantes. O PHP também oferece muitos recursos de que os desenvolvedores de nível avançado precisam.

Qual é a diferença entre PHP e HTML?

Embora ambas as línguas sejam cruciais para desenvolvimento web, PHP e HTML são diferentes de várias maneiras.

A principal diferença está no uso dos dois idiomas.

HTML é usado para o lado do cliente (ou front-end) de desenvolvimento, enquanto PHP é usado para servidor desenvolvimento.

HTML é a linguagem que os desenvolvedores usam para organizar o conteúdo em um site, como inserir texto, imagens, tabelas e hiperlinks, formatar texto e especificar cores.

Enquanto isso, o PHP é usado para armazenar e recuperar dados de um banco de dados, realizar operações lógicas, enviar e responder a e-mails, fazer upload e download de arquivos, desenvolver aplicativos de desktop e muito mais.

Em termos de tipo de código, HTML é estático, enquanto PHP é dinâmico. Um código HTML é sempre o mesmo sempre que é aberto, enquanto os resultados do PHP variam dependendo do navegador do usuário.

Para novos desenvolvedores, ambas as linguagens são fáceis de aprender, embora a curva de aprendizado seja mais curta com HTML do que com PHP.

Folha de referências do PHP completa

Se você é um programador iniciante que deseja ser mais proficiente em PHP ou expandir seu conhecimento, aqui está um Folha de referências do PHP você pode consultar rapidamente.

Esta folha de dicas consiste em funções PHP - que são atalhos para os códigos amplamente usados ​​- que são incorporadas à linguagem de script.

Baixe a folha de referências do PHP

The Ultimate HTML, CSS e PHP Cheat Sheet

Quer você seja um desenvolvedor experiente ou apenas alguém começando a codificar, é ótimo ter algo para o qual você pode sempre voltar para referência ou simplesmente refrescar sua memória.

E como um presente para os desenvolvedores que fazem malabarismos entre HTML, CSS e PHP, aqui está uma folha de dicas ULTIMATE, completo com tudo o que você precisa saber e lembrar sobre essas três linguagens de codificação:

Baixe a folha combinada de referências de HTML, CSS e PHP