HTML, CSS e PHP: The Ultimate Cheat Sheet

Nosso conteúdo é suportado pelo leitor. Se você clicar em nossos links, podemos ganhar uma comissão. Como revisamos.

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

HTML

  • Não suporta áudio e vídeo sem o suporte do 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 possui elementos como nav e header, assim 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

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:

 

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

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

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

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

 

Perguntas frequentes

O que é folha de dicas html css?

A folha de dicas de HTML e CSS é um recurso útil para iniciantes e até mesmo para desenvolvedores web experientes. Este prático guia de referência fornece uma visão geral rápida da sintaxe e propriedades HTML e CSS mais comuns. 

Onde posso obter o pdf da folha de dicas do php?

Você pode encontrar folhas de dicas de PHP em formato PDF em várias fontes online. Aqui estão alguns lugares onde você pode procurar:
Site oficial do PHP: Verifique o site oficial do PHP (php.net) para obter a documentação oficial, que inclui um manual abrangente do PHP que você pode baixar em formato PDF. Embora não seja uma folha de dicas em si, ela contém informações abrangentes sobre as funções e o uso do PHP.
Sites de folhas de dicas de PHP: Muitos sites fornecem folhas de dicas para programação PHP. Sites como “Cheatography” geralmente oferecem folhas de dicas fornecidas por usuários em formato PDF. Basta pesquisar “PHP cheat sheet PDF” em seu mecanismo de busca favorito para encontrar esses recursos.
GitHub: GitHub é uma plataforma para desenvolvedores compartilharem código e recursos. Você pode encontrar folhas de dicas do PHP em formato PDF no GitHub pesquisando “folha de dicas do PHP” na barra de pesquisa do GitHub. Muitos desenvolvedores e organizações compartilham suas folhas de dicas e recursos lá.
Geradores de PDF on-line: Existem ferramentas online que permitem criar folhas de dicas personalizadas para PHP, selecionando as funções e tópicos específicos que deseja incluir. Essas ferramentas geram um arquivo PDF para você baixar. Uma dessas ferramentas é “PDFCrowd”.
Lembre-se de garantir que a fonte usada para uma folha de dicas do PHP seja confiável e atualizada para garantir precisão e relevância às suas necessidades.

O que é folha de dicas HTML5?

Um recurso útil para desenvolvedores é a Cheat Sheet do HTML5, que fornece um guia de referência rápida para os vários elementos, atributos e sintaxe usados ​​no HTML5. Esta folha de dicas inclui informações sobre como criar títulos, parágrafos, links, imagens, tabelas, formulários e muito mais. Ele serve como uma ferramenta útil para desenvolvedores iniciantes e experientes, ajudando-os a economizar tempo e evitar erros durante a codificação em HTML5.

Quais são as principais diferenças entre php e HTML?

PHP e HTML são frequentemente comparados e contrastados devido às suas funções distintas e utilidade no desenvolvimento web. Enquanto o HTML é responsável por definir a estrutura e o conteúdo das páginas web, o PHP permite a criação de elementos dinâmicos, como formulários interativos e integração de banco de dados. Consequentemente, a escolha entre PHP e HTML depende em grande parte dos requisitos e objetivos específicos de um projeto de desenvolvimento web.

Onde posso encontrar a folha de referências das tags HTML?

Você pode encontrar folhas de dicas de tags HTML online de várias fontes. Aqui estão alguns lugares onde você pode procurar:
Site oficial do W3C: O World Wide Web Consortium (W3C) é a organização que desenvolve e mantém padrões da web, incluindo HTML. Eles possuem documentação abrangente sobre HTML, que serve como referência oficial. Visite a seção HTML do site do W3C para obter informações detalhadas sobre tags HTML.
Rede de Desenvolvedores Mozilla (MDN): MDN oferece extensa documentação sobre tecnologias web, incluindo HTML. Seu guia de referência em HTML é um dos recursos disponíveis mais confiáveis ​​e frequentemente atualizados. Você pode acessar a referência do elemento HTML nos documentos da web do MDN.
Sites de folhas de dicas em HTML: Muitos sites fornecem folhas de dicas de tags HTML em vários formatos, incluindo PDF. Sites como “Cheatography”, “HTML.com” e “W3Schools” geralmente oferecem folhas de dicas em HTML para impressão.
GitHub: GitHub é um recurso valioso para desenvolvedores. Você pode encontrar folhas de dicas de tags HTML em vários repositórios pesquisando “folha de dicas HTML” ou palavras-chave semelhantes no GitHub.
Geradores de PDF on-line: Assim como acontece com as folhas de dicas do PHP, existem ferramentas online que permitem criar folhas de dicas de tags HTML personalizadas, selecionando as tags e os elementos específicos que deseja incluir. Essas ferramentas geram um arquivo PDF para você baixar.

Lá você também pode encontrar folha de dicas em formato pdf em html.

Mathias Ahlgren é CEO e fundador da Website Rating, liderando uma equipe global de editores e escritores. Ele possui mestrado em ciência da informação e gestão. Sua carreira girou em torno do SEO após as primeiras experiências de desenvolvimento web durante a universidade. Com mais de 15 anos em SEO, marketing digital e desenvolvimento web. Seu foco também inclui segurança de sites, comprovada por certificado em Segurança Cibernética. Essa experiência diversificada sustenta sua liderança na Website Rating.

A "Equipe WSR" é o grupo coletivo de editores e escritores especializados em tecnologia, segurança na Internet, marketing digital e desenvolvimento web. Apaixonados pelo mundo digital, eles produzem conteúdo bem pesquisado, perspicaz e acessível. Seu compromisso com a precisão e a clareza faz com que Website Rating um recurso confiável para se manter informado no dinâmico mundo digital.

Mantenha-se informado! Junte-se à nossa newsletter
Assine agora e obtenha acesso gratuito a guias, ferramentas e recursos exclusivos para assinantes.
Você pode cancelar sua inscrição a qualquer momento. Seus dados estão seguros.
Mantenha-se informado! Junte-se à nossa newsletter
Assine agora e obtenha acesso gratuito a guias, ferramentas e recursos exclusivos para assinantes.
Você pode cancelar sua inscrição a qualquer momento. Seus dados estão seguros.
Mantenha-se informado! Junte-se à nossa newsletter!
Assine agora e obtenha acesso gratuito a guias, ferramentas e recursos exclusivos para assinantes.
Mantenha-se atualizado! Junte-se ao nosso boletim informativo
Você pode cancelar sua inscrição a qualquer momento. Seus dados estão seguros.
Minha compania
Mantenha-se atualizado! Junte-se ao nosso boletim informativo
???? Você está (quase) inscrito!
Vá para a caixa de entrada do seu e-mail e abra o e-mail que enviei para confirmar seu endereço de e-mail.
Minha compania
Você está inscrito!
Obrigado por sua assinatura. Enviamos boletins informativos com dados perspicazes todas as segundas-feiras.
Compartilhar com...