Hoje, a maior parte da nossa interação com a internet ocorre através da web, onde possuímos sites que entregam conteúdo com uma interface/template visualmente atraente e compreensível, facilitando a compreensão do conteúdo e a usabilidade para o usuário.
Todas as páginas web atualmente são compostas por diversos fatores. No entanto, um dos mais essenciais para a construção delas é o HTML e CSS, através dos quais é possível elaborar páginas mais agradáveis visualmente, com interações e até mesmo animações.
O HTML é uma abreviação para HyperText Markup Language (Linguagem de Marcação de Hipertexto), portanto, não é considerado uma linguagem de programação, mas sim uma linguagem de marcação. No entanto, seu valor não é diminuído por isso.
Foi desenvolvido por Tim Berners-Lee e formalizado em 1991. Seu principal objetivo é criar documentos com marcações que os navegadores podem interpretar para gerar nossas páginas web. Durante o desenvolvimento da linguagem de marcação HTML, tivemos algumas versões onde as alterações de cada uma são muito importantes para a formação da última versão lançada em 2017 (HTML5), onde foram introduzidas mais tags semânticas que melhoram a estrutura e significado do conteúdo das páginas.
A estrutura de uma página web começa com um documento HTML, que contém marcadores (tags). Estas tags são palavras reservadas fundamentais no HTML, essenciais para estruturar e formatar o conteúdo no desenvolvimento web. Frequentemente, encontramos essas tags com uma estrutura básica (<tag>conteúdo</tag>), onde temos a tag de abertura (<tag>) e a tag de fechamento (</tag>), e entre elas o conteúdo.
Dentro do documento HTML, temos quatro tags principais sem as quais não é possível construir uma página HTML: <!DOCTYPE html>, <html>, <head>, e <body>.
<!DOCTYPE html> é utilizada para informar ao navegador que o documento está em HTML5. É a primeira linha em um documento HTML e garante que o navegador renderize a página corretamente.<html> envolve todo o conteúdo do documento HTML, representando a raiz do documento HTML.<head> contém metadados sobre o documento, como o título da página (<title>), links para folhas de estilo (<link>), scripts (<script>), e outras informações não visíveis diretamente no conteúdo da página.<body> contém o conteúdo visível da página, como textos, imagens, vídeos, links, e outros elementos multimídia.Embora estas sejam as tags principais, existe uma infinidade de outras tags, cada uma com sua função específica e um papel essencial para construir uma página HTML. Abaixo, temos uma tabela com algumas dessas tags e suas funcionalidades. Caso deseje conhecer mais tags, temos o link da documentação oficial do HTML onde estão listadas todas as tags com explicações e exemplos práticos.
<h1>: Define o título de nível 1, usado para o título principal da página.<h2>: Define o título de nível 2, usado para subtítulos importantes.<h3>: Define o título de nível 3, usado para subtítulos de nível inferior.<li>: Define um item de uma lista.<ol>: Define uma lista ordenada.<br>: Insere uma quebra de linha.<p>: Define um parágrafo.<strong>: Define texto com importância, geralmente exibido em negrito.<i>: Define texto em itálico.<div>: Define uma divisão ou seção no documento.<style>: Define estilos CSS para o documento.<a> : Define um hyperlink.<img> : Define uma imagem.<span> : Define uma seção em linha, usada para agrupar elementos em linha.<article> : Define um conteúdo independente e de relevância.<aside> : Define um conteúdo à parte, como uma barra lateral.<footer> : Define o rodapé do documento ou de uma seção.<header> : Define o cabeçalho do documento ou de uma seção.<main> : Define o conteúdo principal do documento.<nav> : Define um conjunto de links de navegação.<section> : Define uma seção genérica de um documento.As tags semânticas são muito importantes para a interpretação pelos navegadores, pois têm funcionalidades específicas que ajudam na acessibilidade e SEO das páginas. Elas atribuem significado e estrutura ao conteúdo, facilitando a compreensão do contexto e da hierarquia da informação.
Os atributos em HTML são usados para fornecer informações adicionais sobre os elementos HTML. Eles são sempre especificados na tag de abertura e geralmente vêm em pares de nome e valor, como name="value". Alguns atributos comuns incluem:
id: Define um identificador único para o elemento.class: Define uma classe ou lista de classes para o elemento, usada para aplicar estilos CSS.src: Especifica a URL de um recurso externo, como uma imagem ou script.href: Especifica a URL para a qual um link aponta.alt: Fornece um texto alternativo para imagens, útil para acessibilidade.Os atributos permitem personalizar e controlar o comportamento dos elementos HTML, tornando o conteúdo mais flexível e interativo.
O CSS é a abreviação de Cascading Style Sheets (Folhas de Estilo em Cascata). Ele é uma linguagem de estilo cuja função principal é adicionar estilos a uma página web, permitindo criar documentos HTML mais agradáveis e coerentes visualmente, além de permitir criar mecanismos de animação e interação responsiva nas páginas web.
Podemos dizer que o CSS é um irmão mais novo do HTML, onde sua característica principal é estilizar o HTML. O CSS pode ser aplicado diretamente nas tags HTML através do atributo style, contido dentro das tags <style> no cabeçalho do documento HTML, ou em arquivos CSS externos que são referenciados no documento HTML. Assim como o HTML tem suas tags, no CSS também temos as chamadas propriedades, onde podemos definir diversos estilos e comportamentos visuais para as tags HTML.
As propriedades são aplicadas de acordo com as tags que desejamos estilizar. Por exemplo, se atribuirmos a cor vermelha para a tag <p>, todo o conteúdo dentro das tags <p> será exibido em vermelho. Se houver mais de uma tag <p> dentro do seu body, todas elas ficarão vermelhas. Caso queira que apenas uma das tags <p> fique vermelha, será necessário utilizar o recurso de atributos do HTML, atribuindo uma classe (class) ou um identificador (id) na tag específica que deseja estilizar. Assim, na hora da estilização, em vez de referenciar a tag <p> diretamente, podemos usar o valor do atributo id ou class para aplicar um estilo único a uma única tag. Dessa forma, apenas a tag com o id ou class mencionado receberá a estilização vermelha, enquanto as demais permanecerão com a estilização padrão.
Aqui apresento algumas propriedades existentes que podemos usar para estilizar nossas tags HTML:
color: Serve para alterar a cor do texto.background-color: Define a cor de fundo de um elemento.font-family: Define a família de fontes do texto.font-size: Define o tamanho da fonte.margin: Define a margem externa de um elemento.padding: Define o espaçamento interno de um elemento.border: Define a borda de um elemento.width: Define a largura de um elemento.height: Define a altura de um elemento.display: Define como o elemento deve ser exibido na página.position: Define o método de posicionamento de um elemento.text-align: Define o alinhamento do texto dentro de um elemento.float: Define se o elemento deve flutuar à esquerda ou à direita dentro de seu contêiner.Para implementar estilos em um documento HTML, é necessário adicionar a tag <style> dentro da seção <head> do documento. Esta tag <style> permite que você defina regras de estilo utilizando as prioridades do CSS, que serão aplicadas aos elementos HTML dentro do corpo do documento.
<!DOCTYPE html>
<html>
<head>
<style>
/* Definição de estilos para todos os parágrafos (<p>) */
p {
color: red; /* Define a cor do texto como vermelho */
font-size: 16px; /* Define o tamanho da fonte como 16 pixels */
background-color: #f0f0f0; /* Define a cor de fundo como cinza claro */
padding: 10px; /* Define o preenchimento interno de 10 pixels */
margin-bottom: 20px; /* Define a margem inferior de 20 pixels */
}
</style>
</head>
<body>
<p>Este é um parágrafo com texto vermelho.</p>
</body>
</html>
Para estilizar um parágrafo específico com um id chamado “paragrafo-unico”, devemos utilizar o caractere (#), e para uma classe chamada “texto-vermelho”, utilizamos o ponto (.). O código HTML e CSS seria:
<!DOCTYPE html>
<html>
<head>
<style>
.texto-vermelho {
color: red;
}
#paragrafo-unico {
font-size: 20px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<p class="texto-vermelho">Este é um parágrafo com texto vermelho.</p>
<p id="paragrafo-unico">Este é um parágrafo único com tamanho de fonte maior e fundo cinza claro.</p>
</body>
</html>
Neste exemplo, a primeira tag <p> terá o texto vermelho devido à classe texto-vermelho, enquanto a segunda tag <p> terá um tamanho de fonte maior e um fundo cinza claro devido ao id paragrafo-unico.
As propriedades CSS são aplicadas para controlar e personalizar a aparência dos elementos HTML, tornando as páginas web mais atraentes e funcionais.
Agora que já entendemos o funcionamento do HTML e CSS, vamos praticar para aperfeiçoar o conhecimento adquirido. Para isso, utilizaremos o site CodePen, que oferece um ambiente gratuito onde podemos escrever nosso código em HTML e CSS, além de poder visualizar em tempo real o que está sendo feito.
O primeiro passo é acessar o site através do link https://codepen.io/. Após isso, podemos fazer login ou criar uma conta no canto superior direito.
Após realizar o login, devemos iniciar o projeto através do botão “Open” na página inicial.
Ao iniciar o projeto, iremos nos deparar com a tela abaixo, onde podemos escrever nosso código HTML na área que está demarcada em amarelo e visualizar o resultado do que estamos escrevendo logo abaixo, na área demarcada em vermelho.
Para treinar, vamos desenvolver um formulário simples onde a pessoa vai cadastrar alguns dados e enviar para algum destino.
Código:
<!DOCTYPE html><! -- Define que o documento é do tipo HTML -->
<html lang="pt-br"> <! -- Define a linguagem padrão da página -->
<head> <! -- Abertura da tag head -->
<meta charset="UTF-8"> <! -- Define o conjunto de caracteres como UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <! -- Define a janela de visualização para dispositivos móveis -->
<title>Formulário de Cadastro</title> <! -- Define o título da página -->
<style> <! -- Abertura da tag style-->
body { /* Estilo para o corpo da página */
font-family: Arial, sans-serif; /* Define a família de fontes */
background-color: #f0f0f0; /* Define a cor de fundo do corpo da página */
padding: 20px; /* Define o preenchimento ao redor do conteúdo do corpo */
}
#titulo{ /* Estilo para o título da página */
max-width: 500px; /* Define a largura máxima para o título */
padding: 15px; /* Define o preenchimento interno do título */
margin: 0 auto; /* Centraliza o título horizontalmente */
}
form { /* Estilo para o formulário */
max-width: 600px; /* Define a largura máxima para o formulário */
background-color: #fff; /* Define a cor de fundo do formulário */
padding: 20px; /* Define o preenchimento interno do formulário */
border-radius: 8px; /* Define as bordas arredondadas */
box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Adiciona sombra ao redor do formulário */
margin: 0 auto; /* Centraliza o formulário horizontalmente */
}
label { /* Estilo para os rótulos dos campos do formulário */
display: block; /* Exibe o rótulo como um bloco */
margin-bottom: 8px; /* Define o espaço abaixo do rótulo */
}
input { /* Estilo para os campos de entrada de texto */
width: 100%; /* Define a largura para ocupar todo o espaço disponível */
padding: 8px; /* Define o preenchimento interno do campo */
margin-bottom: 15px; /* Define o espaço abaixo do campo */
border: 1px solid #ccc; /* Define a borda do campo */
border-radius: 4px; /* Define as bordas arredondadas */
box-sizing: border-box; /* Inclui a borda e o preenchimento na largura total */
font-size: 14px; /* Define o tamanho da fonte */
}
select { /* Estilo para os campos de seleção */
width: 100%; /* Define a largura para ocupar todo o espaço disponível */
padding: 8px; /* Define o preenchimento interno do campo */
margin-bottom: 15px; /* Define o espaço abaixo do campo */
border: 1px solid #ccc; /* Define a borda do campo */
border-radius: 4px; /* Define as bordas arredondadas */
box-sizing: border-box; /* Inclui a borda e o preenchimento na largura total */
font-size: 14px; /* Define o tamanho da fonte */
}
.checkbox { /* Estilo para a caixa de seleção */
width: auto; /* Define a largura como automática */
margin-bottom: 0; /* Remove o espaço abaixo da caixa */
color: blue; /* Define a cor do texto */
}
button { /* Estilo para o botão */
background-color: #4CAF50; /* Define a cor de fundo do botão */
color: white; /* Define a cor do texto do botão */
padding: 10px 20px; /* Define o preenchimento interno do botão */
border: none; /* Remove a borda do botão */
border-radius: 4px; /* Define as bordas arredondadas do botão */
cursor: pointer; /* Define o cursor do mouse ao passar sobre o botão */
font-size: 16px; /* Define o tamanho da fonte do botão */
}
button:hover { /* Estilo para o botão ao passar o mouse sobre ele */
background-color: #45a049; /* Define a cor de fundo do botão ao passar o mouse */
}
</style><! -- Fechamento da tag style-->
</head> <! -- Fechamento da tag head -->
<body> <! -- Abertura da tag body -->
<h1 id="titulo">Projeto Eletrogate Formulario</h1> <! -- Título da página com id "titulo" -->
<form action="#" method="post"> <! -- Início do formulário com método POST e ação padrão -->
<label for="nome">Nome:</label> <! -- Rótulo para o campo de nome -->
<input type="text" id="nome" name="nome" required> <! -- Campo de entrada de texto para nome com id "nome" e obrigatório -->
<label for="sobrenome">Sobrenome:</label> <! -- Rótulo para o campo de sobrenome -->
<input type="text" id="sobrenome" name="sobrenome" required> <! -- Campo de entrada de texto para sobrenome com id "sobrenome" e obrigatório -->
<label for="telefone">Telefone:</label> <! -- Rótulo para o campo de telefone -->
<input type="tel" id="telefone" name="telefone" required> <! -- Campo de entrada de texto para telefone com id "telefone" e obrigatório -->
<label for="cep">CEP:</label> <! -- Rótulo para o campo de CEP -->
<input type="text" id="cep" name="cep" required> <! -- Campo de entrada de texto para CEP com id "cep" e obrigatório -->
<label for="data_nascimento">Data de Nascimento:</label> <! -- Rótulo para o campo de data de nascimento -->
<input type="date" id="data_nascimento" name="data_nascimento" required> <! -- Campo de entrada de data para data de nascimento com id "data_nascimento" e obrigatório -->
<label for="profissao">Profissão:</label> <! -- Rótulo para o campo de profissão -->
<select id="profissao" name="profissao" required> <! -- Campo de seleção para profissão com id "profissao" e obrigatório -->
<option value="">Selecione...</option> <! -- Opção padrão do campo de seleção -->
<option value="TI">TI (Tecnologia da Informação)</option> <! -- Opção TI -->
<option value="Administração">Administração</option> <! -- Opção Administração -->
<option value="Engenharia">Engenharia</option> <! -- Opção Engenharia -->
<option value="Marketing">Marketing</option> <! -- Opção Marketing -->
</select>
<label>
<input class="checkbox" type="checkbox" name="aceita_termos" required> <! -- Caixa de seleção para aceitar os termos com classe "checkbox" e obrigatório -->
Aceito os termos <! -- Texto ao lado da caixa de seleção -->
</label>
<button type="submit">Enviar</button> <! -- Botão de submissão do formulário -->
</form>
</body> <! -- Fechamento da tag body -->
</html> <! -- Fechamento da tag html -->
No vídeo acima, acessamos o site do OpenCode e realizamos o login. Após o login, acessamos a tela inicial onde podemos ver nossos projetos já iniciados ou iniciar um novo projeto em “Open”. No caso do vídeo, iniciamos um novo projeto. Caso queira escrever o código todo, temos um atalho que facilita a escrita inicial do documento HTML. O atalho é ( ! ) e, após digitá-lo, aperte Tab para gerar o código básico e iniciar a escrita. Caso queira apenas testar, você pode copiar o código acima e colar, como foi feito no vídeo, e assim automaticamente gerar o resultado abaixo, permitindo que possamos interagir com ele. Esta é a forma mais simples de começar a praticar HTML. Existem muitas outras formas de trabalhar com essa tecnologia.
O HTML tem um único objetivo: gerar uma página web onde o usuário pode interagir via web, facilitando o acesso a informações, controle de sistemas e outros. O HTML é usado em e-commerce, sites educacionais, blogs, entre outros. Entretanto, podemos utilizá-lo também para trabalhar com IoT, servindo para mostrar uma mensagem ou até mesmo enviar comandos.
Podemos entender melhor com os projetos desenvolvidos aqui no blog da Eletrogate. Existem vários projetos onde usamos HTML para receber ou enviar informações, criando uma interface gráfica para aplicações que utilizam WiFi.
Podemos analisar o projeto WebServer com ESP32 e BMP280, onde temos um sensor que capta dados do ambiente e os envia para o ESP32 através de uma de suas portas. Assim, o ESP pode manipular os dados de acordo com o código-fonte, utilizando uma biblioteca que realiza a conexão WiFi e envia os dados coletados para uma interface web feita em HTML que exibirá os dados recebidos. Caso não existisse a interface desenvolvida em HTML, teríamos que adicionar um display onde os dados seriam exibidos. Mas, com a possibilidade do uso do WiFi, é possível enviar o documento HTML através do IP gerado ao conectar o ESP32 à internet. Assim, ao acessar o navegador, é possível visualizar o arquivo HTML graças à interpretação do navegador.
Para podermos utilizar o HTML juntamente com a eletrônica, vamos criar uma integração simples onde utilizamos o ESP32 para se conectar ao WiFi e acessar uma página web que exibirá uma mensagem de “Hello, World”. Dessa forma, vamos entender como podemos integrar o HTML com o ESP32 para criar interfaces e abrir caminho para novos projetos utilizando essa tecnologia.
#include <WiFi.h> // Inclusão da biblioteca WiFi para gerenciar a conexão Wi-Fi
#include <WebServer.h> // Inclusão da biblioteca WebServer para criar um servidor web
WebServer server(80); // Criação de um objeto WebServer na porta 80
const char* ssid = "nome da sua rede"; // SSID da sua rede Wi-Fi
const char* senha = "senha da sua rede"; // Senha da sua rede Wi-Fi
void handleRoot() { // Função de callback para lidar com a requisição na raiz ("/")
server.send(200, "text/html", "<h1>Hello, World!</h1>"); // Responde à requisição com uma página HTML simples
}
void setup() { // Função setup() do Arduino, chamada uma vez ao inicializar
Serial.begin(115200); // Inicia a comunicação serial com taxa de baud rate 115200
delay(100); // Aguarda 100 milissegundos
Serial.print("Conectando-se a ");
Serial.println(ssid); // Imprime o nome da rede Wi-Fi que está tentando se conectar
WiFi.begin(ssid, senha); // Tenta conectar-se à rede Wi-Fi especificada com a senha
while (WiFi.status() != WL_CONNECTED) { // Enquanto não estiver conectado ao Wi-Fi
delay(1000); // Aguarda 1 segundo
Serial.print("."); // Imprime um ponto para indicar tentativas de conexão
}
Serial.println(""); // Imprime uma linha em branco
Serial.println("WiFi conectado."); // Imprime mensagem indicando que o Wi-Fi está conectado
Serial.print("Endereço de IP: ");
Serial.println(WiFi.localIP()); // Imprime o endereço IP atribuído ao ESP32
server.on("/", handleRoot); // Configura o servidor para lidar com requisições na raiz ("/")
server.begin(); // Inicia o servidor
Serial.println("Servidor iniciado."); // Imprime mensagem indicando que o servidor está iniciado
}
void loop() { // Função loop() do Arduino, chamada continuamente após a função setup()
server.handleClient(); // Permite que o servidor atenda às requisições dos clientes
}
Assim chegamos ao fim de mais um post no blog. Hoje, você aprendeu o que é o HTML, como ele funciona e para que serve. Além disso, praticou o desenvolvimento de um projeto simples e, por fim, explorou como usar o HTML junto com o ESP32 para criar interfaces mais interativas.
Agradeço a todos e espero que tenha contribuído para o seu aprendizado. Se deseja um desafio para os corajosos, que tal integrar um formulário dentro do ESP32? A pessoa acessa o formulário através do IP do ESP32 e os dados digitados e enviados são exibidos no monitor serial do ESP32.
|
A Eletrogate é uma loja virtual de componentes eletrônicos do Brasil e possui diversos produtos relacionados à Arduino, Automação, Robótica e Eletrônica em geral.
Conheça a Metodologia Eletrogate e Lecione um Curso de Robótica nas Escolas da sua Região!
Rua Rio de Janeiro, 441 - Sala 1301
Centro - Belo Horizonte/MG
CEP 30160-041
*Não temos atendimento físico
Eletrogate Componentes Eletrônicos
CNPJ: 18.917.521/0001-73
