HTML, CSS e PHP: The Ultimate Cheat Sheet

Escrito por

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

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 tarefas específicas. Como tal, não é realista 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 real da web.

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 que é 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:

HTML

  • Não suporta áudio e vídeo sem suporte para flash player.
  • Usa cookies para armazenar dados temporários.
  • Não permite que o JavaScipt seja executado no navegador.
  • Permite a geração de gráficos vetoriais utilizando diferentes tecnologias como VML, Silver-light e Flash, entre outras.
  • Não permite efeitos de arrastar e soltar.
  • Funciona com todos os navegadores mais antigos.
  • Menos compatível com dispositivos móveis.
  • A declaração Doctype é longa e complicada.
  • Não tem elementos como nav e header, bem como atributos como charset, umsynce ping.
  • Extremamente difícil de obter a verdadeira localização geográfica dos usuários usando um navegador.
  • Não é possível lidar com sintaxe imprecisa.

HTML5

  • Suporta controles de áudio e vídeo com o uso de e Tag.
  • Usa bancos de dados SQL e cache de aplicativo para armazenar dados offline.
  • Permite que o JavaScript funcione em segundo plano com o uso da API JS Web worker.
  • Os gráficos vetoriais são uma parte fundamental do HTML5, assim como o SVG e o canvas.
  • Permite efeitos de arrastar e soltar.
  • Torne possível desenhar formas.
  • Suporta todos os novos navegadores como Firefox, Mozilla, Chrome e Safari.
  • Mais compatível com dispositivos móveis.
  • A declaração Doctype é simples e fácil.
  • Possui novos elementos para estruturas da web como nav, header e footer, entre outros, e também possui atributos de charset, umsynce ping.
  • Torna a codificação de caracteres simples e fácil.
  • Permite o rastreamento de GeoLocation do usuário usando a API JS GeoLocation.
  • Capaz de lidar com sintaxe imprecisa.
 

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

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

 

Cabeçalho

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

Seção

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

Artigo

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

À parte (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>

Rodapé

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

Exemplos básicos de formatação de texto

Títulos para

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

Parágrafo ( & )

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

Não ordenado e lista ordenada

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

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

Bloco de citação e 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>
 

Ligação

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

Botão

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

Quebra de linha

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

Linha horizontal

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

Endereço

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

Subscrito e sobrescrito

<p>The chemical formula of water is H<sub>2</sub>O</p>

<p>This text is <sup>superscripted</sup></p>
 

Abreviação

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

Tempo

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

Excluído

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

Exemplos de mesa

Exemplo de cabeça, corpo e pé da 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>

Títulos de tabela, linhas e exemplo de dados

<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

Imagem

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

Cenário

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

Folha de referências HTML completa

Quer você seja um desenvolvedor experiente ou alguém que está apenas procurando começar a trabalhar na indústria, sempre ajuda ter um Folha de referências HTML acessível. E eu projetei um que pode ajudá-lo em cada etapa do caminho.

folha de dicas de html

 

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 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 é fácil de usar. O desafio é que há muitos selecionadores e declarações de que lembrar de todos eles é difícil, senão impossível. Você não precisa memorizá-los, no entanto.

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

Folha de referências CSS

 

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 uma variedade de 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 cada vez que é aberto, enquanto os resultados de 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 novato que deseja ser mais proficiente em PHP ou expandir seus conhecimentos sobre ele, 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.

Folha de referências do PHP

 

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 programar, é ótimo ter algo que você sempre pode consultar 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

 

Participe do nosso boletim

Assine nosso boletim informativo semanal e receba as últimas notícias e tendências do setor

Ao clicar em 'inscrever-se' você concorda com nossos Termos de uso e politica de privacidade.