Para exibir esses cálculos em uma página HTML, você pode usar a linguagem de marcação HTML e inserir o texto e os cálculos em elementos apropriados. Abaixo está um exemplo de como você pode exibir os cálculos em uma tabela simples:
Você pode personalizar a aparência e o estilo do formulário e dos elementos HTML usando CSS. Aqui está um exemplo simples de como você pode estilizar o formulário anterior:
Source:
<!DOCTYPE html>
<html>
<head>
<title>Cálculo de Rendimento Anual</title>
<style>
form {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
font-size: 1.2rem;
text-align: center;
}
label {
display: block;
margin: 10px 0;
color: #333;
font-weight: bold;
}
input[type="number"] {
padding: 5px;
border: 2px solid #ccc;
border-radius: 5px;
font-size: 1.2rem;
}
button {
padding: 10px 20px;
margin: 20px 0;
background-color: #4CAF50;
color: #fff;
font-size: 1.2rem;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #3E8E41;
}
p {
margin-top: 20px;
color: #333;
font-weight: bold;
font-size: 1.4rem;
}
</style>
</head>
<body>
<form>
<label for="valor-inicial">Valor Inicial:</label>
<input type="number" id="valor-inicial" name="valor-inicial">
<label for="taxa-juros">Taxa de Juros (% ao ano):</label>
<input type="number" id="taxa-juros" name="taxa-juros">
<button type="button" onclick="calcular()">Calcular</button>
</form>
<p id="rendimento-anual"></p>
<script>
function calcular() {
var valorInicial = document.getElementById("valor-inicial").value;
var taxaJuros = document.getElementById("taxa-juros").value / 100; // Converter para decimal
var rendimentoAnual = valorInicial * taxaJuros;
document.getElementById("rendimento-anual").innerHTML = "Rendimento Anual = " + rendimentoAnual.toLocaleString('pt-br', { style: 'currency', currency: 'BRL' });
}
</script>
</body>
</html>
Nesse exemplo, adicionamos um bloco <style> ao cabeçalho da página para estilizar os elementos HTML usando CSS. Alguns dos estilos aplicados incluem: Definir a exibição do formulário como um flex container com alinhamento no centro. Adicionar margem, tamanho de fonte e cor para os elementos de rótulo. Definir o tamanho de fonte, preenchimento, borda e raio para os elementos de entrada. Adicionar estilo ao botão, incluindo cor de fundo, cor do texto, borda e transição de fundo em foco. Adicionar estilo para o elemento de parágrafo que exibe o resultado. Você pode ajustar esses estilos para atender às suas necessidades de design.
A programação HTML (HyperText Markup Language) é uma linguagem de marcação usada para criar e estruturar o conteúdo de uma página da web. Ela é composta por tags ou elementos que são usados para definir a estrutura do documento, bem como para inserir imagens, vÃdeos, formulários e outros elementos na página. O exemplo apresentado anteriormente usa HTML para criar um formulário de cálculo de rendimento anual, que coleta dois valores de entrada do usuário (valor inicial e taxa de juros) e, em seguida, calcula e exibe o rendimento anual com base nesses valores. Além disso, o exemplo também usa JavaScript para executar o cálculo e atualizar a exibição do resultado na página. JavaScript é uma linguagem de programação de alto nÃvel usada para adicionar interatividade e dinamismo à s páginas da web. O CSS (Cascading Style Sheets) também é usado no exemplo para estilizar a aparência do formulário e dos elementos HTML, como explicado na minha resposta anterior. CSS é uma linguagem usada para definir a aparência e o layout de um documento HTML. No geral, essa programação combina HTML, JavaScript e CSS para criar uma página da web interativa e responsiva que permite que os usuários façam um cálculo de rendimento anual com facilidade. Essa é apenas uma pequena amostra do que é possÃvel fazer com essas tecnologias, e há muitas outras maneiras de usá-las para criar páginas da web impressionantes e funcionais.
