Guia de Desenvolvimento Web Básico: Criando uma Réplica Simples do Google

Neste guia, vamos revisar as principais tags HTML e conceitos básicos de CSS enquanto criamos uma réplica simplificada da página inicial do Google.

Estrutura do Projeto

  1. Criação de Arquivos
  2. Estrutura HTML
  3. Estilo CSS

1. Criação de Arquivos

Vamos criar dois arquivos: index.html para o conteúdo HTML e styles.css para o estilo CSS.

2. Estrutura HTML

Crie o arquivo index.html com a seguinte estrutura:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="logo">
            <img src="<https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png>" alt="Google Logo">
        </div>
        <form class="search-form">
            <input type="text" class="search-input" placeholder="Search Google or type a URL">
            <div class="buttons">
                <button type="submit" class="btn">Google Search</button>
                <button type="button" class="btn">I'm Feeling Lucky</button>
            </div>
        </form>
    </div>
</body>
</html>

Explicação das Tags HTML