site em html

Aqui está um exemplo básico de um site tradicional que pode ser editado facilmente. O site contém uma página principal (index.html), um arquivo CSS para estilização (style.css) e um arquivo JavaScript opcional para funcionalidades adicionais (script.js). Além disso, há um espaço para você adicionar fotos, links e conteúdo como um blog.

Estrutura de Pastas

/meu-site

├── index.html

├── style.css

├── script.js

└── imagens/ (coloque suas imagens aqui)

Arquivo: index.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meu Blog Tradicional</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Bem-vindo ao Meu Blog</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#sobre">Sobre</a></li>
                <li><a href="#fotos">Fotos</a></li>
                <li><a href="#contato">Contato</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="home">
            <h2>Últimas Postagens</h2>
            <article>
                <h3>Título do Post</h3>
                <p>Este é um exemplo de postagem. Aqui você pode escrever sobre qualquer tema interessante.</p>
                <a href="#">Leia mais...</a>
            </article>
        </section>

        <section id="sobre">
            <h2>Sobre Mim</h2>
            <p>Este é o espaço para falar sobre você ou o propósito do blog.</p>
        </section>

        <section id="fotos">
            <h2>Galeria de Fotos</h2>
            <div class="galeria">
                <img src="imagens/foto1.jpg" alt="Foto 1">
                <img src="imagens/foto2.jpg" alt="Foto 2">
                <img src="imagens/foto3.jpg" alt="Foto 3">
            </div>
        </section>

        <section id="contato">
            <h2>Contato</h2>
            <form>
                <label for="nome">Nome:</label>
                <input type="text" id="nome" name="nome" required>

                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required>

                <label for="mensagem">Mensagem:</label>
                <textarea id="mensagem" name="mensagem" required></textarea>

                <button type="submit">Enviar</button>
            </form>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 Meu Blog. Todos os direitos reservados.</p>
    </footer>

    <script src="script.js"></script>
</body>
</html>

Arquivo: style.css
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

header {
    background: #333;
    color: #fff;
    padding: 1rem 0;
    text-align: center;
}

header h1 {
    margin: 0;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

main {
    padding: 20px;
}

section {
    margin-bottom: 20px;
}

.galeria {
    display: flex;
    gap: 10px;
}

.galeria img {
    width: 150px;
    height: auto;
    border: 2px solid #ddd;
    border-radius: 5px;
}

form label {
    display: block;
    margin: 10px 0 5px;
}

form input, form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

form button {
    background: #333;
    color: #fff;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
}

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

Arquivo: script.js
document.querySelector('form').addEventListener('submit', function(event) {
    event.preventDefault();
    alert('Formulário enviado com sucesso!');
});

Como usar
Crie uma pasta chamada imagens e coloque suas fotos lá.
Edite o conteúdo do index.html para adicionar mais seções ou alterar textos e imagens.
Abra o arquivo index.html no navegador para visualizar o site.
Se precisar de ajuda para hospedá-lo ou personalizá-lo, é só avisar!

site em html

Como usar

Postar um comentário

Formulário de Contacto