Clique aqui e veja todas as aulas
1. O que é HTML?
HTML (HyperText Markup Language) é a linguagem de marcação usada para criar a estrutura de páginas web. Ela define como o conteúdo é organizado e exibido no navegador.
Estrutura Básica de um Documento HTML:
<!DOCTYPE html>
<html>
<head>
<title>Título da Página</title>
</head>
<body>
<h1>Olá, mundo!</h1>
<p>Bem-vindo ao meu site.</p>
</body>
</html>Elementos e Tags HTML:
- Tags HTML: São delimitadas por
<e>e definem o início e o fim de um elemento. Exemplo:<h1>...</h1>. Atributos HTML: São usados dentro de uma tag para fornecer informações adicionais sobre o elemento. Exemplo:
<a href="https://example.com">Link</a>.
2. Integrando PHP com HTML
PHP em HTML:
Você pode inserir código PHP diretamente dentro de um arquivo HTML para tornar o conteúdo dinâmico. Isso é feito utilizando as tags <?php ?>.
Exemplo Simples de Integração:
<!DOCTYPE html>
<html>
<head>
<title>Página Dinâmica com PHP</title>
</head>
<body>
<h1><?php echo "Bem-vindo ao meu site!"; ?></h1>
<p><?php echo "Hoje é " . date("d/m/Y"); ?></p>
</body>
</html>Nesse exemplo, o PHP é usado para exibir uma saudação e a data atual. Isso permite que o conteúdo da página mude dinamicamente.
3. Enviando Dados com Formulários HTML
Formulários HTML:
Formulários são usados para coletar dados do usuário e enviá-los para o servidor. Eles são criados com a tag <form>.
Exemplo de Formulário HTML:
<!DOCTYPE html>
<html>
<head>
<title>Formulário de Contato</title>
</head>
<body>
<h1>Formulário de Contato</h1>
<form method="post" action="processa_formulario.php">
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome"><br><br>
<label for="email">E-mail:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Enviar">
</form>
</body>
</html>Processando Dados do Formulário com PHP:
Quando o usuário preenche o formulário e clica em "Enviar", os dados são enviados para o arquivo PHP especificado no atributo action.
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$nome = $_POST['nome'];
$email = $_POST['email'];
echo "Nome: " . $nome . "<br>";
echo "E-mail: " . $email;
}
?>Nesse exemplo, os dados do formulário são capturados usando $_POST e exibidos na tela.
4. Criando uma Página Dinâmica no Projeto
Vamos aplicar o que aprendemos em nosso projeto Sistema de Gerenciamento de Tarefas.
Passo 1: Criando o Arquivo index.php
Vamos criar uma página inicial que exibe uma mensagem de boas-vindas ao usuário e um formulário para adicionar tarefas.
<!DOCTYPE html>
<html>
<head>
<title>Gerenciador de Tarefas</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<?php include 'includes/header.php'; ?>
<h1><?php echo "Bem-vindo ao Gerenciador de Tarefas"; ?></h1>
<form method="post" action="adicionar_tarefa.php">
<label for="tarefa">Nova Tarefa:</label>
<input type="text" id="tarefa" name="tarefa"><br><br>
<input type="submit" value="Adicionar Tarefa">
</form>
<?php include 'includes/footer.php'; ?>
</body>
</html>Passo 2: Criando o Arquivo adicionar_tarefa.php
Este arquivo vai processar os dados enviados pelo formulário e exibir uma mensagem confirmando a adição da tarefa.
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$tarefa = $_POST['tarefa'];
echo "Tarefa '" . $tarefa . "' adicionada com sucesso!";
}
?>5. Exercício Prático
Crie uma página HTML que pergunte ao usuário seu nome e idade, e um arquivo PHP que exiba uma mensagem personalizada com esses dados. Experimente integrar diferentes elementos HTML com PHP para criar páginas dinâmicas.
6. Próximos Passos
Agora que você sabe como integrar PHP com HTML, está pronto para criar páginas web dinâmicas e interativas. Na próxima aula, vamos explorar como conectar o projeto a um banco de dados para armazenar e recuperar informações.
