Blog

Postado em em 25 de março de 2024

Usando o ChatGPT para Criar uma Página com HTML e CSS

Aprenda a usar o ChatGPT para criar uma página com HTML e CSS! Isso mesmo, use a inteligência artificial para te ajudar a criar uma página web.

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

Para receber por e-mail o(s) arquivo(s) utilizados na aula, preencha:

Usando o ChatGPT para Criar uma Página com HTML e CSS

Você com certeza já deve ter ouvido falar ou até mesmo utilizado o ChatGPT, não é mesmo?

Mas será que você já explorou todas as possibilidades dessa ferramenta? Sabia que é possível utilizar o ChatGPT para criar uma página com HTML e CSS? Isso mesmo! Na aula de hoje, vou te mostrar como fazer a criação de uma página web com o ChatGPT.

Para isso, precisaremos fornecer algumas informações e realizar alguns ajustes, mas você verá que é possível gerar o código em HTML e CSS para criar sua página.

E aí, gostou da ideia? Então faça o download do material disponível e venha comigo, que hoje você vai aprender a usar o ChatGPT para criar uma página com HTML e CSS.

Acessando o ChatGPT

O ChatGPT é uma inteligência artificial que pode ser acessada através do site oficial. Atualmente, ele possui duas versões: a versão 4, que é paga, e a versão 3.5, que pode ser utilizada gratuitamente.

ChatGPT

Para começar, será necessário fazer um cadastro inicial com seu nome e e-mail ou conectar-se automaticamente usando sua conta do Google. Feito isso, você estará pronto para utilizar todas as funcionalidades do ChatGPT.

Instruções para o ChatGPT criar uma Página HTML e CSS

O ChatGPT opera por meio de uma conversa, como um chat. Você pode interagir com ele, fazendo perguntas sobre os mais diversos assuntos e também pedindo soluções para tarefas e explicações detalhadas.

Portanto, precisamos pedir a ajuda do ChatGPT para criar uma página HTML e CSS, fornecendo as instruções sobre o que essa página deve conter.

Por exemplo, vamos pedir ajuda para criar uma página que contenha um cabeçalho, um título, um carrossel com três imagens e um link para o site da Hashtag, além de um rodapé.

Prompt

Após definirmos o prompt, ou seja, o comando que queremos passar para o ChatGPT, podemos enviar e aguardar a resposta dele.

Resposta ChatGPT parte1

Além de fornecer um código contendo as características que solicitamos, o ChatGPT também oferece algumas informações adicionais.

Resposta ChatGPT parte 2

Podemos copiar todo esse código e levá-lo para dentro do nosso editor de código. No meu caso, estarei utilizando o VS Code.

Explicação e Testes do Código gerado pelo ChatGPT

Dentro do VS Code, podemos criar um novo arquivo HTML e colar o código gerado pelo ChatGPT.

novo arquivo HTML

Caso você não tenha o VS Code instalado, confira essa aula aqui para aprender a instalar o Visual Studio Code e as extensões recomendadas para trabalhar com HTML e CSS. Inclusive a extensão Live Server, que utilizaremos para abrir o código gerado pelo ChatGPT na janela do navegador.

Ao analisarmos o código gerado pelo ChatGPT, veremos que o documento criado realmente possui a estrutura de um código HTML.

HEAD:

Vamos começar analisando e modificando algumas informações dentro da head do nosso código.

<head>
    <meta charset="utf-8" />
    <title>Minha Página</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
      }

      header {
        background-color: #333;
        color: #fff;
        padding: 10px 20px;
        text-align: center;
      }

      h1 {
        margin-top: 20px;
        text-align: center;
      }

      .carousel {
        display: flex;
        overflow: hidden;
        width: 100%;
        justify-content: center;
      }

      .carousel img {
        max-width: 100%;
        max-height: 200px;
        object-fit: cover;
        transition: transform 0.5s;
      }

      .carousel img:hover {
        transform: scale(1.1);
      }

      footer {
        background-color: #333;
        color: #fff;
        text-align: center;
        padding: 10px 0;
        position: fixed;
        bottom: 0;
        width: 100%;
      }

      a {
        color: rgb(0, 0, 129);
        text-decoration: none;
      }
    </style>
  </head>

Dentro da head, podemos começar alterando o título da nossa página, que é exibido na guia do navegador.

    <title>Minha Página Criada pelo ChatGPT</title>

Ainda dentro da head, podemos observar que ao invés de criar dois arquivos separados, um para o HTML e outro para o CSS, o ChatGPT utilizou a tag <style> para trabalhar com o CSS Interno.

Dentro desse CSS, temos algumas formatações. Começando pelo body, temos todo o espaçamento interno e externo zerado (margin e padding), e a fonte da página definida como Arial ou sans-serif.

Para o header, temos a cor de fundo definida, a cor da fonte, o padding e o alinhamento do texto. E no h1, temos um ajuste final da margem superior do título na página.

Em seguida, temos algumas formatações aplicadas à classe .carousel, que determinará o funcionamento do carrossel de imagens.

E por fim, temos as características definidas para o footer e para as tags de ancoragem da página.

Aqui, precisamos fazer uma alteração no estilo das anchor tags, pois o ChatGPT definiu a cor delas como sendo brancas. Porém, o fundo da nossa página já é branco, então o link não fica visível. Vamos alterar a cor desse link.

a {
        color: rgb(0, 0, 129);
        /* text-decoration: none; */
      }

Além de mudar a cor, comentei a linha de código referente ao text-decoration, para que o link volte a ser sublinhado na página.

BODY:

Podemos visualizar agora o body criado pelo ChatGPT.

<body>
    <header>
      <h1>Meu Site</h1>
    </header>
    <div class="carousel">
      <img
        src="imagem 1.jpg"
        alt="Imagem 1"
      />
      <img
        src="imagem 2.jpg"
        alt="Imagem 2"
      />
      <img
        src="imagem 3.jpg"
        alt="Imagem 3"
      />
    </div>
    <p>
<a href="https://www.hashtagtreinamentos.com">Hashtag Treinamentos</a>
    </p>
    <footer>
      <p>&copy; 2024 Meu Site. Todos os direitos reservados.</p>
    </footer>
  </body>

Dentro do body, temos o título da nossa página como Meu Site dentro da tag <h1>. E logo em seguida, o nosso carrossel.

Como o carrossel é o conteúdo principal da nossa página, podemos organizá-lo dentro de uma tag <main>.

Além disso, não precisamos utilizar a tag de parágrafo para colocar a nossa anchor tag, então podemos removê-la.

E ao final, temos nosso footer que não precisaremos modificar nada.

<body>
    <header>
      <h1>Meu Site</h1>
    </header>
    <main>
      <div class="carousel">
        <img
          src="imagem 1.jpg"
          alt="Imagem 1"
        />
        <img
          src="imagem 2.jpg"
          alt="Imagem 2"
        />
        <img
          src="imagem 3.jpg"
          alt="Imagem 3"
        />
      </div>
      <a href="https://www.hashtagtreinamentos.com"
        >Hashtag Treinamentos</a>
    </main>
    <footer>
      <p>&copy; 2024 Meu Site. Todos os direitos reservados.</p>
    </footer>
  </body>

Podemos visualizar como a página está até o momento com a extensão do Live Server. Basta clicar com o botão direito do mouse sobre o arquivo HTML e selecionar Open with Live Server.

Open with live server
Página do HTML e CSS como o ChatGPT entregou

Então, apesar dessas pequenas modificações que fizemos, o ChatGPT cumpriu com o que foi pedido. Vamos fazer apenas algumas modificações e ajustes finais nessa página.

Configurações e Personalizações – Ajustando o Código HTML e CSS gerado pelo ChatGPT

Vamos começar adicionando o atributo target com o valor _blank para a nossa anchor tag. Dessa forma, ao clicar no link da Hashtag, o site será aberto em uma nova guia.

<a href="https://www.hashtagtreinamentos.com" target="_blank"
        >Hashtag Treinamentos</a>

Vamos adicionar algumas imagens ao nosso carrossel. Você pode utilizar as imagens que preferir, eu vou utilizar algumas imagens aqui da Hashtag.

<div class="carousel">
        <img
          src="https://www.hashtagtreinamentos.com/wp-content/uploads/2024/03/3-Funcoes-de-Texto-no-SQL-1-1024x576.png"
          alt="Imagem 1"
        />
        <img
          src="https://www.hashtagtreinamentos.com/wp-content/uploads/2024/03/Incompany-5-Razoes-para-Sua-Equipe-Comecar-a-Usar-o-Power-BI-1024x576.png"
          alt="Imagem 2"
        />
        <img
          src="https://www.hashtagtreinamentos.com/wp-content/uploads/2024/03/Programar-Online-com-Python-1-1024x576.png"
          alt="Imagem 3"
        />
      </div>

Ajustaremos o espaçamento da sessão principal do nosso site inserindo um estilo para o elemento main dentro do nosso CSS Interno.

Dentro da tag style, vamos adicionar um seletor para a tag main com um padding de 40px.

main {
        padding: 40px;
      }

Vamos ajustar nosso link para que ele fique centralizado, logo abaixo das nossas imagens. Para isso, iremos mexer no estilo da nossa âncora dentro do CSS Interno.

a {
        color: rgb(0, 0, 129);
        display: block;
        text-align: center;
        margin-top: 40px;
        /* text-decoration: none; */
      }

Para finalizar, vamos melhorar o espaçamento das nossas imagens, adicionando o atributo gap para definir os espaçamentos entre os elementos filhos do nosso carrossel, ou seja, nossas imagens.

.carousel {
        display: flex;
        overflow: hidden;
        width: 100%;
        justify-content: center;
        gap: 20px;
      }

Feito isso, podemos visualizar a nossa página e com a ajuda do ChatGPT e algumas modificações, teremos uma página simples, porém funcional, que você pode utilizar para continuar criando e expandindo as possibilidades.

Página final ajustada

Conclusão – Usando o ChatGPT para Criar uma Página com HTML e CSS

Na aula de hoje, você aprendeu a usar a inteligência artificial do ChatGPT para te ajudar a criar uma página web.

Vimos como é fácil usar o ChatGPT para criar uma página com HTML e CSS. E que, com poucos ajustes, é possível aprimorá-la ainda mais.

A partir dessa aula, você poderá explorar por conta própria as possibilidades de criação de páginas para internet com o ChatGPT, aprimorando e expandindo os resultados fornecidos por ele.

Para saber mais sobre como construir páginas web impressionantes, você pode acompanhar o material disponível aqui no blog e no canal da Hashtag sobre HTML e CSS, e também conhecer o nosso curso HTML e CSS Impressionador.

Quer sair do zero no Power BI e virar uma referência na sua empresa? Inscreva-se agora mesmo no Power BI Impressionador