contato.html (parte 1)
<!DOCTYPE html>
<html lang="pt-br">
<head> <!-- Cabeça -->
<title> Contato - Barbearia Alura </title> <!-- Título do site -->
<meta charset="utf-8"> <!-- Pacote de linguagem HTML -->
<link rel="stylesheet" href="reset.css"> <!-- Para limpar todas as configurações padrões do html -->
<link rel="stylesheet" href="style.css"> <!-- Referenciando outro arquivo (no caso, é o arquivo CSS) -->
</head>
<body> <!-- Corpo -->
<header> <!-- Cabeçalho -->
<div class="caixa"> <!-- Divisão/ Para facilitar na hora da leitura dos comandos -->
<h1> <img src="logo.png" alt="Logo da Barbearia Alura"> </h1>
<!-- alt/ Comando para pessoas com problema visual. Baixando algum programa e passando por cima da imagem, o programa fará a leitura da imagem. Também é um texto alternativo, caso a imagem não carregue -->
<nav> <!-- Menu de navegação, comando que receberá links -->
<ul> <!-- UL - Lista desordenada -->
<li> <a href="index.html"> Home </a> </li> <!-- LI= topico / A= link -->
<li> <a href="produtos.html"> Produtos </a> </li>
<li> <a href="contato.html"> Contato </a> </li>
</ul>
</nav>
</div>
</header>
<main> <!-- Função principal -->
<form> <!-- Formulário -->
<label for="nomesobrenome"> Nome e sobrenome: </label> <!-- Label/ Etiqueta para o input --> <!-- Texto que exibirá o que é pedido no campo -->
<input type="text" id="nomesobrenome" class="input-padrao" required> <!-- Entrada dos dados -->
<!-- Label pertence ao input. Para se conectarem, devem possuir o mesmo nome. ID e FOR -->
<label for="email"> Email </label>
<input type="email" id="email" class="input-padrao" required placeholder="seuemail@dominio.com">
<!-- Required/ torna o preenchimento do campo, obrigatório -->
<!-- placeholder/ para exibir exemplo de preenchimento -->
<!-- type="email"/ o formato do campo será de email, para que o usuário digite email num formato válido -->
<label for="telefone"> Telefone </label>
<input type="tel" id="telefone" class="input-padrao" required placeholder="(xx) xxxxx-xxxx">
<label for="mensagem"> Mensagem </label> <!-- Campo de mensagem -->
<textarea cols="50" rows="5" id="mensagem" class="input-padrao" > </textarea> <!-- Para, visualmente, aumentar o tamanho da caixa -->
<fieldset> <!-- Fieldset/ Conjunto de campo -->
<!-- É usada quando queremos agrupar melhor os formulários -->
<!-- Para preenchimento de campos -->
<legend> Como prefere o nosso contato? </legend>
<!-- Opção de escolha -->
<label for="radio-email"><input type="radio" name="contato" value="email" id="radio-email"> Email </label>
<!-- name=contato/ Recebem o mesmo nome para que a seleção seja permitida em apenas uma opção -->
<!-- Para que o input pertença ao label, deverão ter o mesmo nome de referência: FOR e ID -->
<label for="radio-telefone"><input type="radio" name="contato" value="telefone" id="radio-telefone"> Telefone </label>
<label for="radio-whatsapp"><input type="radio" name="contato" value="whatsapp" id="radio-whatsapp" checked> Whatsapp </label>
<!-- checked/ marcará a opção automaticamente, até que o usuário mude -->
</fieldset>
<fieldset>
<legend> Qual horário prefere ser atendido? </legend>
<select> <!-- Campo de seleção --> <!-- Irá conter as opções -->
<option>Manhã</option>
<option>Tarde</option>
<option>Noite</option>
</select>
</fieldset>
<label class="checkbox"> <input type="checkbox" checked> Gostaria de receber nossas novidades por email? </label> <!-- Caixa de seleção para SIM ou NÃO -->
<!-- checkbox/ Caixa de seleção -->
<input type="submit" value="Enviar Formulário" class="enviar"> <!-- Caixa de envio do formulário -->
<!-- submit/ Enviar -->
</form>
<table> <!-- Table/ Para criar tabela -->
<thead> <!-- Cabeça da tabela -->
<tr> <!-- Tr/ Para criar linhas -->
<th> Dia </th> <!-- Td/ Para criar colunas do cabeçalho -->
<th> Horário </th>
</tr>
</thead>
<tbody> <!-- Corpo da tabela -->
<tr>
<td> Domingo </td> <!-- Td/ Para criar colunas da tabela -->
<td> Fechado </td>
</tr>
<tr>
<td> Segunda </td>
<td> Fechado </td>
</tr>
<tr>
<td> Terça </td>
<td> 8h ~ 22h </td>
</tr>
<tr>
<td> Quarta </td>
<td> 8h ~ 22h </td>
</tr>
<tr>
<td> Quinta </td>
<td> 8h ~ 22h </td>
</tr>
<tr>
<td> Sexta </td>
<td> 8h ~ 22h </td>
</tr>
<tr>
<td> Sábado </td>
<td> 10h ~ 20h </td>
</tr>
</tbody>
</table>
</main>
