Arquitetura WEB em Camadas - Senac

08/07/2020 Versão para impressão
Informática para internet
Arquitetura web em camadas: conceitos de

camadas front-end e back-end
Arquitetura de uma aplicação web
Já faz um bom tempo que um website deixou de ser constituído de um arquivo
HTML com imagens e links para outras páginas. Hoje em dia, mais do que sites,
temos aplicações web, softwares complexos operando sobre a internet, formados
por páginas que utilizam uma série de recursos para entregar ao usuário uma gama
de serviços que antes eram obtidos apenas por softwares tradicionais, ou de
desktop.
Uma aplicação web obedece a uma arquitetura bastante específica. Uma

aplicação tradicional de desktop tem todas as suas instruções carregadas na
máquina em que está sendo executada e mantém com certa facilidade o estado do
software, já que as informações com que precisa lidar em sua execução estão
facilmente acessíveis em variáveis na memória dessa máquina. Já a aplicação web
depende de uma estrutura em uma máquina remota (chamada servidor), de outros
softwares na máquina do usuário (geralmente navegadores) e de uma estrutura de
rede (no caso, a internet), o que representa uma série de desafios que não são
encontrados em aplicações tradicionais.
Grosso modo, pode-se dizer que a web funciona com trocas de informações
entre um ponto e outro do planeta. Essas trocas são chamadas de requisições.
Quando digita um endereço em seu navegador, você está enviando uma

requisição (um pedido) para um servidor. O endereço é decodificado pela URL
utilizada (ou seja, o endereço do website). Esse servidor recebe esse pedido e envia
1/85
uma resposta ao seu computador, com os dados da página em HTML, por exemplo.
O seu computador repassa essa informação ao navegador, que “desenha” a página
na tela.
Figura 1 – Fluxo de informação na web
A aplicação web, portanto, precisa contar com uma estrutura que permita a
comunicação entre dois lados por meio da rede, um chamado “cliente”, ou seja, a
máquina que o usuário da aplicação está usando com um navegador web, e outro
chamado “servidor”, uma máquina dedicada a processar as informações solicitadas
pelos clientes. Assim, será possível acessar um banco de dados para gravar essas
informações e gerar resposta para o cliente.
Por isso, a arquitetura web é dividida em duas camadas principais: a camada

de front-end (o cliente) e a camada de back-end (o servidor).
Definição das camadas de front-end e back-end

Dada a complexidade inerente à arquitetura de uma aplicação web, é natural
que, na criação de um website, sejam utilizadas diversas linguagens de
programação com finalidades diferentes para atender às demandas dos clientes. Na
maioria das vezes, mais de um programador é envolvido no processo de construção
de um website. Alguns programadores são especialistas em interfaces; e outros, nas
regras de negócio.
2/85
A programação de um site pode ser dividida em duas grandes camadas: a

camada de front-end e a de back-end. A programação de front-end é executada no
próprio navegador, e a de back-end é executada pelo servidor.
Camada de front-end
A camada de front-end é responsável pela interface que o usuário

enxerga. É nela que ficam localizados todos os inputs, ou seja, todos os
controles, os botões e outros elementos que constituem as telas do site.
O programador responsável pelo desenvolvimento da camada de front-end

utiliza linguagens como HTML, CSS e JavaScript, além de princípios de
usabilidade, para que o usuário tenha uma navegação clara e fácil de ser
entendida.
3/85
Camada de back-end
Na camada de back-end, o programador fica responsável pelos requisitos

funcionais e pelas regras de negócios do site a ser desenvolvido. É nela que
são desenvolvidas todas as interações com o banco de dados.
Entre as tecnologias utilizadas nesta camada, estão sistemas de

gerenciamento de banco de dados (SGBDs), como MySQL, Oracle e
SQLServer. Entre as linguagens de programação utilizadas para o seu
desenvolvimento, estão C#, Java, Python e Ruby on Rails.
Algumas tarefas desempenhadas na camada de back-end são:
Conexões com banco de dados
Transações comerciais
Envio de e-mails
Relatórios
Além de desenvolvedores especializados em uma dessas camadas, há

também aqueles que desenvolvem simultaneamente nas duas. Eles se chamam
programadores full-stack.
Como uma introdução aos estudos de desenvolvimento web, abordaremos aqui

a base de C# como uma linguagem de back-end; e o HTML, como um elemento
essencial (e indispensável) para o front-end.
Introdução à programação em C# (#cs1) Criando um novo projeto no VS Code (#cs2) Variáveis

(#cs3) Comandos de entrada e saída no C# (#cs4) Operadores aritméticos (#cs5) Operadores
relacionais (#cs6) Estruturas de decisão (#cs7) Operadores lógicos (#cs8)
Introdução à programação em C#
4/85
A linguagem C# (leia-se “C sharp”) foi desenvolvida pela Microsoft junto com o

lançamento da plataforma .NET em 2002. Ao longo do tempo, teve cinco versões,
acompanhando os lançamentos do Visual Studio.
Trata-se de uma linguagem orientada a objetos. Tem influências de C++, Java

e Pascal. Ela permite criar projetos em modo console (interface de texto) ou em
modo gráfico (interface gráfica).
Em modo console, trabalhamos com programação orientada a objetos. Já no

modo gráfico, a programação é baseada em eventos, como o clique de um botão, o
redimensionamento de uma janela, entre outros.
Linguagens orientadas a objeto utilizam conceitos de classes e objetos para

promover separação, organização e reutilização de códigos e funcionalidades
programadas. É uma evolução da linguagem estruturada, em que o código é
dividido em sub-rotinas (funções), mas obedece a apenas uma unidade de
execução.
A programação estruturada prevê uma linha de execução do início ao fim do

programa sem sair de seu código principal, enquanto, na orientada a objeto, a
execução é repassada a objetos, que invocam outros objetos sucessivamente, de
uma maneira não linear.
Durante o curso, veremos mais informações sobre os paradigmas de programação.
Criando um novo projeto no VS Code

Para estudarmos os exemplos e praticarmos a linguagem C#, unindo as
noções de algoritmos já aprendidas na unidade curricular (UC) Planejar e
documentar aplicações web às estruturas da linguagem, vamos criar pequenos
projetos do tipo console.
O editor que usaremos para criar nossos códigos é o VS Code. Diferentemente

do Visual Studio, que é uma IDE (ambiente de desenvolvimento integrado), o Visual
Studio Code (ou VS Code) é um poderoso editor que dispõe de alguns recursos
5/85
como autocompletar e colorir palavras reservadas, em que podemos digitar nossos

códigos. Para continuar, então, você precisa ter instalado o .NET Core e o Visual
Studio Code em sua máquina.
Caso necessite de ajuda para instalar o .NET Core e o Visual Studio Code, consulte
o material Ambiente de desenvolvimento, instalação e configuração, desta UC.
Abra o VS Code e selecione File > Open Folder, ou use o atalho do teclado
Ctrl + K, O (ou seja, segure a tecla Control e pressione rapidamente a tecla K e
depois O – não as duas ao mesmo tempo). Na tela de seleção de pasta, escolha
uma para seus projetos e depois crie nela uma nova pasta. Selecione esta nova
pasta e clique no botão Selecionar pasta.
Note que, na aba Explorer, aparece a pasta selecionada (no caso, “Hello
World”), mas sem conteúdo.
Agora, abra um terminal clicando no menu Terminal e selecionando New

Terminal, ou usando o atalho Ctrl + '. Uma janela como a do prompt do MS-DOS
aparecerá na parte de baixo da janela.
6/85
Note que o terminal já está apontando para a pasta que você criou e abriu
anteriormente. No terminal, digite “dotnet new console” e tecle Enter.
Com isso, estamos criando um projeto C# do tipo console, ou seja, uma

aplicação de linha de comando. Esse tipo de aplicação é ideal para exercitarmos os
aspectos mais básicos da linguagem.
7/85
Note, na guia Explorer, que foram criados alguns arquivos na pasta Hello
World, especialmente Program.cs, o arquivo principal de código nesta aplicação.
Dê duplo clique em Program.cs para abri-lo no editor. Neste momento, você

também pode fechar ou diminuir a aba de Terminal. Observe que Program.cs tem
um código em C#. Ele está definindo uma aplicação que simplesmente mostra na
tela “Hello World”.
Vamos executar a aplicação abrindo o terminal no VS Code (caso já não

esteja aberto) e digitando “dotnet build” (sem as aspas). Depois, teclamos Enter
para realizar a compilação do projeto.
8/85
Em seguida, digitamos “dotnet run” e depois clicamos Enter para iniciar a

execução do programa. Note que o programa apenas mostra na tela (no terminal) a
expressão “Hello World”.
9/85
Repita esse processo em cada teste que for realizar no material a seguir. Crie
um projeto para cada exemplo.
Abra o VS Code e selecione File > Open Folder, ou use o atalho do teclado
Ctrl + K, O (ou seja, segure a tecla Control e pressione rapidamente a tecla K e
depois O – não as duas ao mesmo tempo). Na tela de seleção de pasta, escolha
uma para seus projetos e depois crie nela uma nova pasta. Selecione esta nova
pasta e clique no botão Selecionar pasta.
10/85
Caixa de diálogo para selecionar pasta do computador. Pasta “Meus Projetos

VS” aberta, na qual foi criada a pasta “Hello World”, que será usada neste exemplo.
Note que, na aba Explorer, aparece a pasta selecionada (no caso, “Hello
World”), mas sem conteúdo.
Agora, abra um terminal clicando no menu Terminal e selecionando New

Terminal, ou usando o atalho Ctrl + '. Uma janela como a do prompt do MS-DOS
aparecerá na parte de baixo da janela.
11/85
Janela do VS Code com aba “Explorer” ativada; nome “Hello World” aparece
nesta aba.
Note que o terminal já está apontando para a pasta que você criou e abriu
anteriormente. No terminal, digite “dotnet new console” e tecle Enter.
12/85
VS Code com a aba “Terminal” aberta na parte inferior, mostrando o caminho

completo da pasta aberta anteriormente.
Com isso, estamos criando um projeto C# do tipo console, ou seja, uma

aplicação de linha de comando. Esse tipo de aplicação é ideal para exercitarmos os
aspectos mais básicos da linguagem.
Note, na guia Explorer, que foram criados alguns arquivos na pasta Hello
World, especialmente Program.cs, o arquivo principal de código nesta aplicação.
VS Code mostrando o comando “dotnet new console” executado. Como

resultado, são criados a subpasta “obj” e os arquivos “Hello World.csproj” e
“Program.cs” na pasta do projeto.
Dê duplo clique em Program.cs para abri-lo no editor. Neste momento, você

também pode fechar ou diminuir a aba de Terminal. Observe que Program.cs tem
um código em C#. Ele está definindo uma aplicação que simplesmente mostra na
tela “Hello World”.
13/85
Vamos executar a aplicação abrindo o terminal no VS Code (caso já não

esteja aberto) e digitando “dotnet build” (sem as aspas). Depois, teclamos Enter
para realizar a compilação do projeto.
Janela do VS Code com código gerado. A região “Terminal” mostra o comando

“dotnet build” executado.
Em seguida, digitamos “dotnet run” e depois clicamos Enter para iniciar a

execução do programa. Note que o programa apenas mostra na tela (no terminal) a
expressão “Hello World”.
14/85
Janela do VS Code com código de Program.cs. A região “Terminal” mostra o

comando “dotnet run” executado e a expressão “Hello World” logo após o comando.
Repita esse processo em cada teste que for realizar no material a seguir. Crie
um projeto para cada exemplo.
Vamos analisar brevemente o que há em “Program.cs”. O código é este:
using System;
namespace Hello_World
{
class Program
{
static void Main(string[] args)
{
Console.WriteLine("Hello World!");
}
}
}
15/85
Neste primeiro contato com o C#, abstrairemos as linhas 1 a 6, 11 e 12. Elas

consistem no contexto do código e na classe, conceitos que serão detalhados nos
próximos materiais, que tratam de programação orientada a objetos.
Por ora, foquemos nossa atenção às linhas 7 a 10. Nelas, temos o método
Main, delimitado pela abertura e pelo fechamento de chaves. Esse método é
basicamente o que iniciará a execução do programa e será composto por todas as
instruções que desejamos executar. No caso, temos dentro deste um comando de
impressão trazendo “Hello World!”.
Quaisquer outros comandos que estivessem entre { } de Main seriam

executados em sequência. Como um teste, tente escrever, na linha abaixo à de
Console.WriteLine(“Hello World”), sem aspas:
Console.WriteLine(“Segunda Linha”);
Depois, execute o programa. Ele deverá imprimir “Hello World!” e, na linha

seguinte, “Segunda Linha”.
Variáveis
As variáveis nada mais são do que espaços na memória que têm um endereço,
recebem um determinado tipo de dado e são referenciados pelo seu nome. O
Flowgoritm, abordado em detalhes na videoaula da UC Planejar e documentar
aplicações web, permite que vejamos isso na prática.
O tipo de informação que uma variável recebe varia de linguagem para

linguagem. Alguns são clássicos, como inteiro, decimal, texto e lógico, mas o C# tem
vários outros, especialmente em se tratando de informações numéricas.
A tabela 1 mostra a lista completa de tipos de dados que podemos utilizar.
16/85
Tipo de Tamanho
Descrição Alcance (valores)
dado (bits)
Numérico
Byte inteiro sem 8 0 a 255
sinal
Numérico
Sbyte inteiro com 8 -128 a 127
sinal
Numérico
Short inteiro com 16 -32.768 a 32.767
sinal
Numérico
Ushort inteiro sem 16 0 a 65.535
sinal
Numérico
-2.147.483.648 a
Int inteiro com 32
2.147.483.647
sinal
Numérico
Uint inteiro sem 32 0 a 4294967295
sinal
Numérico -9.223.372.036.854.775.808
Long inteiro com 64 a
sinal 9.223.372.036.854.775.807
Numérico
0a
Ulong inteiro sem 64
18.446.744.073.709.551.615
sinal
Numérico
decimal
-3,402823e38 a
Float com 32
3,402823e38
precisão
simples
Numérico
decimal
-1,79769313486232e308 a
Double com 64
1,79769313486232e308
precisão
dupla
Numérico
decimal
(+ or -)1,0 x 10e-28 a 7,9 x
Decimal com 128
10e28
precisão de
29 dígitos
17/85
Char Caractere 16 1 caractere
Bool Tipo lógico 8 True or False
Tipo base
para todos
Object
os demais
tipos
Sequência
String de
caracteres
Representa
0:00:00am 1/1/01 a
DateTime data ou
11:59:59pm 12/31/9999
hora
Tabela 1 – Tipos de dados
Os tipos mais comuns são int (inteiro), float (decimal simples), string (texto) e
bool (lógico). Acostume-se a utilizá-los e perceba que, em algumas situações,
outros tipos serão mais indicados.
Imagine que o seu software precisa guardar a idade do usuário. Ela poderia ser
guardada em uma variável do tipo “int”? Sem dúvida, poderia, porém “int” serve para
guardar valores entre -2.147.483.648 e 2.147.483.647.
Então, por que esse tipo de dado não é o mais indicado? Primeiramente,
porque não existe idade negativa. Segundo, porque nenhuma pessoa vive mais do
que 200 anos, e, terceiro, porque você gastaria 32 bits para guardar essa
informação.
O tipo byte comportaria a idade de uma pessoa (0 a 255) e gastaria 8 bits para
o armazenamento. O tipo de dado byte, portanto, é o mais adequado para guardar
idades.
Declaração e atribuição de variáveis
18/85
No C#, é preciso declarar uma variável para ela ser utilizada. A sintaxe para
declaração de variáveis é:
[tipo de dado] [nomedavariável];
Observe os exemplos:
int dias;
string nomeClienteAtual;
float fornecedor;
float alturaCliente;
O nome de uma variável não pode ser composto por espaços ou caracteres
especiais, mas você pode juntar duas ou mais palavras. É importante que a inicial do
nome de uma variável seja sempre uma letra minúscula. Já as demais podem ser
maiúsculas, como em nomeClienteAtual, por exemplo.
A inicialização, ou seja, a atribuição de um valor inicial à variável pode ser feita logo
na declaração dela ou em outra parte do código. Observe:
int dias =100;

// ou
dias = 100;
Podemos ler o exemplo como: a variável “dias” recebe o valor 100.
Comandos de entrada e saída no C#

Sabendo que um programa pode ser constituído das etapas de entrada,
processamento e saída, vamos conhecer os comandos de entrada e saída padrão
da linguagem C#.
O comando utilizado como padrão para a entrada de dados, ou seja, a leitura

das variáveis, é:
Console.ReadLine()
19/85
Esse comando lê uma informação digitada pelo usuário e a atribui a uma

variável.
Exemplo:
string nome;
nome = Console.ReadLine();
O conteúdo lido é entendido como uma string (texto), logo deve ser atribuído a
uma variável string, caso contrário resultará em erro.
Para fazermos a leitura de uma informação que será atribuída a uma variável
numérica, será necessário realizar uma conversão.
Observe o exemplo:
int dias;
dias = int.Parse(Console.ReadLine());
O comando int.Parse() converte a informação digitada pelo usuário

(Console.ReadLine) em um valor inteiro que é atribuído à também variável inteira
“dias”.
Para fazer a leitura de uma string e convertê-la para float, utilize o comando
float.Parse.
Observe o exemplo:
float altura;
altura = float.Parse(Console.ReadLine());
O comando de saída padrão, ou seja, de impressão na tela, é Console.Write()

ou Console.WriteLine(). A diferença entre um e outro é que o segundo pula para a
linha seguinte após o texto.
20/85
Console.Write("Hello, Senac EAD");
Você pode ainda concatenar, ou seja, juntar mensagens com os conteúdos de

variáveis.
Console.Write("O número de dias é: "+dias);
O caractere utilizado para concatenar texto e variáveis é o sinal de adição (+).
O comando Console.Write permite ainda imprimir um texto com código de

formatação que será substituído pelo conteúdo de uma variável. Geralmente,
utilizamo-lo para exibir um valor numérico junto a um texto.
Console.WriteLine("A altura é : {0:N} ",altura);
O código {0:N} representa valores numéricos com casa decimal e será

substituído pelo conteúdo da variável “altura”. Para valores numéricos sem casa
decimal, coloque {0}.
Para exibir o conteúdo de mais de uma variável em uma string, basta numerá-
las entre chaves. Veja:
Console.WriteLine("A altura é : {0} e o peso é: {1}",altura,pes

o);
Outra forma de substituir variáveis é utilizando uma cadeia de caracteres

interpolada. Nesta forma, você coloca o nome das variáveis entre chaves, e o seu
conteúdo será colocado nos respectivos lugares.
21/85
int idade=20;
float peso=70f;
string info = $"você têm {idade} anos e pesa {peso} kg.";
Console.WriteLine(info);
No projeto Hello World, criado anteriormente, teste os comandos apresentados

editando Program.cs e modificando o conteúdo entre { e } de Main(). Após cada
teste, experimente “dotnet run” no terminal para rodar.
Operadores aritméticos
Os operadores aritméticos realizam operações matemáticas, e seu resultado
pode ser atribuído a uma variável ou utilizado em um teste condicional.
Operador Resultado
+ Adição de valores inteiros e decimais
Subtração de valores inteiros e

-
decimais
Multiplicação de valores inteiros e

*
decimais
/ Divisão de valores inteiros e decimais
% Resto da divisão de valores inteiros
= Operação de atribuição
Math.Pow(base,
Exponenciação de valores reais
expoente)
Math.Sqrt(base) Raiz quadrada de valores reais
Tabela 2 – Operadores aritméticos
22/85
Em expressões com várias operações encadeadas, algumas destas podem ser

executadas antes que outras. Isso é chamado de precedência de operadores
aritméticos e determina, por exemplo, que multiplicações serão executadas antes
de somas em expressões.
Prioridade Operador
1.º Parênteses mais internos
2.º * / % (o que vier primeiro)
3.º + - (o que vier primeiro)
Tabela 3 – Precedência de operadores aritméticos
Vejamos alguns exemplos de códigos.
23/85
Exemplo 1 – Programa C# para converter um valor de temperatura em graus

Celsius para um valor de temperatura em graus Fahrenheit
A fórmula é:
Fahrenheit = (Celsius * 1.8 ) + 32;
using System;
namespace myapp
{
class Program
{
{
float tc,tf; //declaração das variáveis d
e tc e tf
Console.WriteLine("Informe a temperatura
em Graus Celsius:");
tc = float.Parse(Console.ReadLine()); //l
eitura da temperatura em celsius
tf = (tc * 1.8f) + 32f; // variável tf re
cebe a fórmula para seu cálculo.
Console.WriteLine(" A temperatura em Fahr
enheit é {0:N}°F.",tf); //impressão em F
}
}
}
Observações:
Para colocar comentários em seu código, digite “//” e o comentário. Os

comentários são importantes para que você lembre rapidamente o que
foi feito e também para que outros programadores entendam com
facilidade seu código. Comentários são ignorados pelo compilador; não
são tratados como comandos.
Utilize, em suas expressões aritméticas, o ponto final como separador

decimal.
Em suas expressões aritméticas, utilize valores seguidos da letra “f”

para indicar que são do tipo float.
24/85
Exemplo 2 – Programa C# para ler 4 notas, calcular e exibir a média aritmética
using System;
namespace myapp
{
class Program
{
{
string nome; //declaração da variável
nome
float media,nota1,nota2,nota3,nota4;
//declaração das variáveis de notas e média
Console.WriteLine("Informe seu nome:"
);
nome = Console.ReadLine(); //leitura
do nome
Console.WriteLine("Informe a primeira
nota:");
nota1 = float.Parse(Console.ReadLine
()); //leitura da primeira nota
Console.WriteLine("Informe a segunda
nota:");
()); //leitura da segunda nota
Console.WriteLine("Informe a terceira
nota:");
()); //leitura da terceira nota
Console.WriteLine("Informe a quarta n
ota:");
()); //leitura da quarta nota
media = (nota1 + nota2 + nota3 + nota
4) / 4; // expressão aritmética para cálculo da média
Console.WriteLine(nome+", você ficou
com média {0:N}",media); //impressão do nome e média
}
}
}
Você entendeu bem o conteúdo até aqui? Se você se sente pronto, que tal
encarar os desafios listados? Neles, pedem-se algoritmos e códigos que usem
entrada, saída de dados e operações aritméticas.
25/85
Desenvolva um programa C# que leia base e altura e que calcule a

área de um triângulo. Lembre: área = (base x altura) /2.
Desenvolva um programa C# que informe a idade e calcule o número

de dias.
Desenvolva um programa C# que informe um número e que mostre seu

antecessor e seu sucessor.
Desenvolva um programa C# que informe o raio de um círculo e que

calcule sua área. Lembre: área = 3.14 x raio2.
Sabendo que um automóvel faz 12 km/l, desenvolva um programa C#

que informe uma distância e que retorne a quantidade de litros de
combustível necessária para percorrê-la.
Operadores relacionais
Além de operações aritméticas, um programa C# pode executar operações
relacionais, ou seja, fazer a comparação entre dois elementos quaisquer. Você
poderá comparar uma variável com outra, uma variável com um determinado valor
ou, ainda, dois valores.
Os operadores relacionais são estes:
26/85
Operador Descrição
< Menor que
> Maior que
<= Menor ou igual a
>= Maior ou igual a
== Igual a
!= Diferente de
Tabela 4 – Operadores relacionais
O resultado de uma operação relacional sempre será um valor VERDADEIRO ou

FALSO.
Nos próximos tópicos, veremos a aplicação direta dessas operações.
Estruturas de decisão
Nos códigos descritos até aqui, todos os comandos são executados
sequencialmente, um após o outro. Nenhum deixa de ser executado. Porém, em
alguns casos, temos a necessidade de executar apenas determinados comandos se
uma condição for satisfeita. Para que isso seja possível, devemos implementar um
comando de decisão, ou seja, uma estrutura com uma ou mais condições que,
sendo verdadeiras, possibilitam essa execução.
Desvio condicional simples
Uma estrutura de desvio condicional simples é aquela que tem uma condição que
desvia a execução de um programa quando a sua condição é satisfeita.
Sintaxe:
27/85
if(condição)
<comando1>
A condição é composta basicamente por:
Condição Exemplo
Variável – Operador relacional – Valor

Idade >= 18
constante
Variável – Operador relacional – Outra Débito ==

variável Crédito
Tabela 4 – Condição
É possível ainda comparar dois valores constantes. Isso só não é muito usual,
pois trará sempre o mesmo resultado.
Somente se a condição for considerada verdadeira é que <comando1> será

executado.
Podemos ter mais de um comando dentro de um comando dentro de uma

estrutura de desvio condicional simples. Para isso, utilizamos abre chaves para
delimitar seu início e fecha chaves para delimitar seu fim ({}).
if(condição)
{
<comando-1>
<comando-2>
<comando-3>
...
<comando-n>
}
Vejamos um exemplo de código:
28/85
Exemplo 3 – Programa C# que verifica se a idade informada é suficiente para a

emissão da carteira de habilitação
using System;
namespace myapp
{
class Program
{
{
int idade; //declaração da variável idade
como inteiro
Console.WriteLine("Informe sua idade:");
idade = int.Parse(Console.ReadLine()); //
leitura da idade e conversão em inteiro
if(idade>=18) //teste condicional
Console.WriteLine("Você tem idade par
a tirar carteira de habilitação."); //mensagem se condição for verdadeira
}
}
}
Operadores lógicos
Quando temos mais de uma condição para ser analisada em uma tomada de
decisão, utilizamos os operadores lógicos.
Os operadores lógicos são:
29/85
Operador Descrição Exemplo
if(idade>=18 && país== “Brasil”) {...}
if abre parentes idade maior =

18 e comercial e comercial país igual
&& E
igual aspas Brasil aspas fecha
parentes abre chaves ponto ponto
ponto fecha chaves
if(estado== “RS” || estado== “SC”)

{...}
if abre parenteses estado igual

igual aspas R S aspas barra vertical
|| OU barra vertical estado igual igual aspas
S C aspas fecha parenteses abre
chaves ponto ponto ponto fecha
chaves
! Não if(!Vazio) {...}
Tabela 5 – Operadores lógicos
Duas condições ligadas pelo operador lógico && trarão um resultado

verdadeiro somente se ambas forem verdadeiras. Caso uma seja falsa, o resultado
será falso.
Duas condições ligadas pelo operador lógico || trarão um resultado falso

somente se ambas forem falsas. Se uma for verdadeira, o resultado será verdadeiro.
O operador ! (não) apenas inverte o valor lógico.
Veja a tabela:
30/85
C1 C2 C1 && C2 C1 || C2 ! C1
F F F F V
F V F V V
V F F V F
V V V V F
Tabela 6 – Operadores lógicos
Na primeira linha da tabela, podemos observar que, caso a afirmação C1 seja

falsa e a afirmação C2 também seja falsa, a operação “E” entre elas resultará em
falso, assim como a operação “OU”. A negação de C1 (falso) é verdadeira. Leia as
outras linhas de maneira análoga para compreender a tabela.
Assim como as operações aritméticas, as operações lógicas têm uma

precedência própria: em uma expressão, uma operação “NÃO” é executada
primeiro, seguida de comparações. Depois, é executada a operação “E”; e, por fim, a
“OU”.
Prioridade Operador
1.º !
2.º Relacionais (>,>=,<,<=,==,!=)
3.º &&
4.º ||
Tabela 7 – Prioridade dos operadores
Vejamos um exemplo de código.
31/85
Exemplo 4 – Programa C# que lê média e frequência e que verifica e exibe

mensagem de aprovação
using System;
namespace myapp
{
class Program3
{
{
float media,frequencia;
Console.WriteLine("Informe sua média:");
media = float.Parse(Console.ReadLine());
Console.WriteLine("Informe sua frequencia:"
);
frequencia = float.Parse(Console.ReadLine
());
if(media>=7 && frequencia>=75)
{
Console.WriteLine("Você está aprovado."
);
}
}
}
}
Executando esse código, você percebe que a mensagem dizendo que você
está aprovado somente é mostrada se, simultaneamente, as condições de média e
frequência forem verdadeiras. Se uma delas for falsa, nenhuma mensagem é
mostrada.
32/85
Exemplo 5 – Programa C# que lê cor e ano de um automóvel e verifica se está

aprovado
using System;
namespace myapp
{
class Program3
{
{
string cor;
int ano;
Console.WriteLine("Informe a cor desejada par
a o automóvel:");
cor = Console.ReadLine();
Console.WriteLine("Informe o ano inicial:");
ano = int.Parse(Console.ReadLine());
if((cor=="preto" || cor=="cinza") && ano>=201
6)
{
Console.WriteLine("Automóvel aprovado.");
}
}
}
}
No código, temos três condições com um operador relacional (“||”) “OU” e um

operador (“”) “E”. Nos parênteses mais internos, temos cor igual a preto ou cor igual
a cinza. Se uma dessas duas condições for verdadeira e se o ano for maior ou igual
a 2016, o automóvel estará aprovado.
Veja as combinações:
33/85
A) Cor == B) Cor == C) Ano >= A || A || B

“Preto” “Cinza” 2016 B && C
F F F F F
F F V F F
F V F V F
F V V V V
V F F V F
V F V V V
V V F V F
V V V V V
Tabela 8 – combinações
A tabela mostra todas as combinações possíveis. Se tivermos três condições,

teremos oito combinações diferentes, ou seja, dois (duas respostas: verdadeiro ou
falso) elevado ao número de condições. Perceba que a última combinação não é
possível, pois a cor não pode ser preta e cinza ao mesmo tempo.
A tabela anterior é chamada de tabela verdade e é muito útil para nos ajudar a
prever todas as possibilidades de respostas informadas pelo usuário.
Desvio condicional composto
Uma estrutura de desvio condicional composta é aquela que executa uma lista de
comandos, se sua condição for verdadeira; ou uma segunda lista de comandos, se a
condição for falsa.
Sintaxe:
34/85
if(condição)
{
<comando 1 >
<comando 2 >
...
<comando n >
}
else
{
<comando 1 >
<comando 2 >
...
<comando n >
}
Se a condição descrita no “if” for verdadeira, então os códigos entre “if” e “else”
são executados; e, depois, o programa segue seu fluxo normal. Caso a condição
não seja verdadeira, os comandos de “else” até o fim são executados.
Observe outro exemplo de código.
35/85
Exemplo 6 – Programa C# que lê média e exibe mensagem de aprovação ou de

reprovação
using System;
namespace myapp
{
class Program3
{
{
float media;
Console.WriteLine("Informe sua média:");
media = float.Parse(Console.ReadLine());
if(media>=7)
Console.WriteLine("Você está aprovado."
);
else
Console.WriteLine("Você está reprovado."
);
}
}
}
No exemplo 6, sempre que for digitado um valor maior ou igual a 7, a condição

estará verdadeira, e a mensagem “Você está aprovado” será mostrada. Caso seja
digitada para média um valor menor que 7, a condição estará falsa, e então será
mostrada a mensagem “Você está reprovado”.
Agora que você aprendeu condicionais simples e compostas, que tal testar
seus conhecimentos? Caso se sinta seguro, tente fazer os seguintes algoritmos e
códigos C#:
36/85
Desenvolva um código que leia a altura de uma pessoa. Deverá

imprimir “Alto” se a altura for maior que 1,80 ou igual; caso contrário,
deverá imprimir “Baixo”.
Desenvolva um código que leia dois valores inteiros positivos e que os

imprima em ordem crescente.
Desenvolva um código que leia o nome de dois times e o número de

gols marcados na partida (para cada time). O nome do vencedor
deverá ser escrito. Caso não haja um, deverá ser impressa a palavra
“empate”.
Desvio condicional encadeado
Além de criar estruturas de desvio condicional composto, é possível encadeá-las, ou

seja, colocar uma estrutura no interior de outra.
Imagine que você deseja testar se o estado de seu cliente é “RJ”. Sendo verdadeira
essa condição, imagine que você deseja testar se o valor da encomenda é superior
a R$ 2.000,00 para calcular um valor de desconto.
Observe o exemplo:
37/85
Exemplo 7 – Programa C# que lê o estado do cliente e o valor do pedido,

calcula o valor do desconto e exibe o valor com desconto
using System;
namespace myapp
{
class Program3
{
{
string estado;
float pedido,desconto=0,total;
Console.WriteLine("Informe o estado do client
e:");
estado = Console.ReadLine();
Console.WriteLine("Informe o valor do pedid
o:");
pedido = float.Parse(Console.ReadLine());
if(estado=="RJ")
{
if(pedido>=2000)
desconto = 30f;
else
desconto = 15f;
}
total = pedido - (pedido * desconto/100);
Console.WriteLine("Valor com descontos: R${0:
N}",total);
}
}
}
No exemplo 7, se o estado for “RJ” e o valor do pedido for maior que 2.000,
temos desconto de 30%. Se não for, o desconto é de 15%.
Desvio condicional de múltipla escolha
No desenvolvimento de um programa, muitas vezes nos deparamos não apenas

com duas alternativas, mas com várias. Uma forma de representar isso poderia ser
pela sequência de desvio condicional encadeado.
Veja o exemplo abaixo:
38/85
Exemplo 8 – Programa C# que lê dois números e uma operação matemática (+

- * /) e que retorna a resposta
39/85
using System;
namespace myapp
{
class Program3
{
{
int op;
float num1, num2, Resultado=0;
Console.WriteLine("Informe o primeiro númer
o:");
num1 = float.Parse(Console.ReadLine());
Console.WriteLine("Informe o segundo número:"
);
Console.WriteLine("Informe a opração desejada
(1-Adição 2-Subtração 3-Multiplicação ou 4-Divisão):");
op = int.Parse(Console.ReadLine());
if(op==1){
Resultado = num1 + num2;
Console.WriteLine("O resultado da adição
é: {0:N}",Resultado);
}
else{
if(op==2){
Resultado = num1 - num2;
Console.WriteLine("O resultado da sub
tração é: {0:N}",Resultado);
}
else{
if(op==3){
Resultado = num1 * num2;
Console.WriteLine("O resultado da
multiplicação é: {0:N}",Resultado);
}
else{
if(op==4){
Resultado = num1 / num2;
Console.WriteLine("O resultad
o da divisão é: {0:N}",Resultado);
}
else{
Console.WriteLine("Operação i
nválida");
}
}
}
}
}
}
}
40/85
Uma forma mais organizada de escrever esse código é substituindo as

estruturas de decisão encadeadas por estrutura de decisão de múltipla escolha.
Podemos fazer isso na linguagem C# utilizando a estrutura switch case.
Sintaxe:
switch(variável)
{
case < valor-1 > : < Lista de Comandos1 >
break;
case < valor-2 > : < Lista de Comandos2 >
break;
...
case < valor-n > : < Lista de ComandosN >
break;
default: < Lista de ComandosDefault >

break;
}
Essa estrutura é usada nos casos em que se deseja verificar se uma variável
tem um valor específico, ou seja, apenas para comparação de igualdade. Também
não aceita expressões lógicas.
Na sintaxe, temos switch, a variável que se quer comparar entre parênteses e a

palavra “case” seguida do valor que a variável pode assumir. Todos os comandos
que devem ser executados quando o valor for esse ficam entre “case” e a palavra
“break”. A condição “default” é usada quando a variável não tiver nenhum dos
valores listados em “case”. Ao atingir “break”, o programa prossegue seu fluxo
normal fora do switch.
O código das operações aritméticas pode ser refeito de forma mais eficiente e
clara usando a estrutura switch. Veja o exemplo 9.
41/85
Exemplo 9 – Programa C# que lê dois números e uma operação matemática (+

- * /) e retorna a resposta usando switch
42/85
using System;
namespace myapp
{
class Program3
{
{
int op;
float num1, num2, Resultado=0;
Console.WriteLine("Informe o primeiro númer
o:");
Console.WriteLine("Informe o segundo número:"
);
Console.WriteLine("Informe a operação desejad
a (1-Adição 2-Subtração 3-Multiplicação ou 4-Divisão):");
op = int.Parse(Console.ReadLine());
switch(op)
{
case 1 : //op == 1
Resultado = num1 + num2;
Console.WriteLine("O resultado da adiç
ão é: {0:N}",Resultado);
break;
case 2: //op == 2
Resultado = num1 - num2;
Console.WriteLine("O resultado da subt
ração é: {0:N}",Resultado);¬¬
break;
case 3: //op == 3
Resultado = num1 * num2;
Console.WriteLine("O resultado da mult
iplicação é: {0:N}",Resultado);
break;
case 4: //op == 4
Resultado = num1 / num2;
Console.WriteLine("O resultado da divi
são é: {0:N}",Resultado);
break;
default:
Console.WriteLine("Operação inválida"
);
break;
}
}
}
43/85
A estrutura começa com o comando switch e a variável “op” entre parênteses.

Caso a variável tenha o valor 1, o resultado recebe a adição das duas variáveis.
Depois, é impresso seu resultado. Para finalizar esse caso, é adicionado o comando
break para sair da estrutura switch. Para os demais casos, são alterados os valores
e os comandos respectivos.
O caso “default” é executado caso a variável “op” não tenha valor 1, 2, 3 ou 4.
É hora de um novo desafio, desta vez com exercícios que usam condicionais
encadeados e switch. Se você se sentir pronto, leia os enunciados e tente resolver
estes problemas com códigos C#.
Desenvolva um código que pergunte “Qual é a cor

(VERDE/AMARELO/VERMELHO)?”. Se for escolhida a cor VERDE,
imprima “Siga em frente”; se for escolhida a opção AMARELO, imprima
“Atenção”; e, se for escolhido VERMELHO, imprima “Pare”. Se tirarmos
o desvio condicional de múltipla escolha, este item teria que sair do
desafio, não? Avalie.
Desenvolva um código que leia três valores inteiros positivos e que os

imprima em ordem crescente.
Desenvolva um código que pergunte quanto você tem para a

passagem. Se esse valor for menor do que R$ 10,00, imprima “Vá de
ônibus”. Se o valor for menor do que R$ 50,00, imprima “Vá de táxi”. Se
o valor for menor do que R$ 150,00, imprima “Vá de avião”. Se o valor
for menor do que R$ 500,00, imprima “Vá de helicóptero”. Se o valor for
superior a R$ 500,00, imprima “Vá de navio”.
44/85
Essas são estruturas básicas de algoritmos e de C#. Até aqui, conseguimos

criar aplicações simples, mas que já determinam valores e dão respostas adequadas
a condições determinadas. Nas próximas UCs, aprofundaremos o nosso
conhecimento com novas estruturas de C#.
Lembre-se de que muito desse conhecimento será usado na programação do back-

end da sua aplicação web.
Voltar ao topo (#topo1)

HTML 5 (#ht1) Padrões W3C (#ht2) Particularidades do HTML5 (#ht3) Novas tags no HTML5
(#ht4) Elementos obsoletos do HTML (#ht5) Exemplo 1 (#ht6) Exemplo 2 (#ht7) Exemplo 3 (#ht8)
HTML5
O front-end de uma aplicação web geralmente envolve três itens: HTML,
JavaScript e CSS.
O HTML é responsável por toda a estrutura da informação e, geralmente, a

informação em si.
O JavaScript é usado para desenvolver comportamentos interativos com o

usuário, como, por exemplo, um carrossel de imagens ou a validação de um
formulário.
45/85
O CSS, por sua vez, é utilizado para dar estilo à página, definindo cores, fontes
e o posicionamento de elementos, entre outras configurações.
É essencial que o profissional de front-end conheça essas tecnologias e saiba

como elas funcionam em conjunto. Por ora, vamos nos concentrar no HTML,
entender o que há de diferente no HTML5 (a versão em uso atualmente) e nos
aprofundar algumas tags com exemplos práticos.
Padrões W3C
Antes de entrar em detalhes sobre HTML e em exemplos, vamos discutir sobre
padrões. Em matéria de aplicações web, a W3C (World Wide Web Consortium) é
uma referência em padronização.
A W3C é a principal organização para padronização da World Wide Web. É

composta por representantes de empresas, de órgãos governamentais e da
academia e tem como objetivo criar padrões para diferentes aspectos de aplicações
web.
Uma dessas padronizações é a definição do HTML5. E esta é uma

particularidade: outra organização, a WHATWG (Web Hypertext Application
Technology Working Group) também tem um padrão próprio para a linguagem. Este
grupo foi o que deu origem ao HTML5, que logo foi adotado e expandido pela W3C.
Na prática, as definições do WHATWG são mais direcionadas aos

desenvolvedores de navegadores (interpretadores de HTML), enquanto o padrão
W3C é voltado para os desenvolvedores de aplicações web. Felizmente, há poucas
diferenças entre uma definição e outra.
Por aqui, seguiremos com as padronizações do W3C com relação ao HTML5 e

a aspectos gerais da construção de um software web.
Particularidades do HTML5
46/85
Diferentemente das versões anteriores, o HTML5 traz um suporte nativo para

mídias (vídeos e sons) e elementos que flexibilizam as páginas em questão de
interatividade, de organização de conteúdo e de responsividade.
As versões anteriores dependiam de softwares adicionais para rodar certo tipo

de conteúdo multimídia. O Adobe Flash se tornou então o mais popular entre eles e
era essencial para qualquer página que precisasse mostrar um vídeo ou tocar uma
música. Hoje, com as tags <video> e <audio>, isso é possível sem a necessidade de
extensões.
Na questão de interatividade, uma adição interessante e bastante explorada,

especialmente na área de jogos, é a inclusão da tag <canvas>. Ela permite
manipular cores e formas, ou seja, desenhar livremente. Anteriormente, isso se
conseguia também por meio de plug-ins, como o Adobe Flash Player.
A organização do conteúdo também ganha melhorias no HTML5, já que

elementos como <nav>, <header>, <article> e <footer> foram incluídos. O <header>
(não confundir com a tag <head>) define a região de cabeçalho da página, que pode
incluir logo e informações gerais. Já <nav> serve para definir listas de links
47/85
(breadcrumbs, ou caminhos de páginas visitadas, menus, entre outros), o <footer>

define um local para as informações de rodapé do site, e <article> traz um conteúdo
da página. Todas essas regiões eram antes necessariamente definidas por
elementos de contêiner, como o <div>, o que não garantia nenhuma padronização
entre websites.
Com a introdução desses elementos, aplicações que leem páginas HTML,

como sites de busca (que vasculham HTML das páginas disponíveis na internet para
indexar resultados), são beneficiados, isso porque, havendo separação clara, é mais
fácil entender que tipo de informação está ali. Assim, se o buscador ler a tag
<header>, conseguirá indexar as informações contidas nelas como algo que
identifique o website. Se ele ler <article>, saberá que está lidando com o conteúdo,
podendo buscar por palavras-chave nesse elemento. Apenas com <div> isso se
torna mais difícil.
Por último, a responsividade é a capacidade de um site de se adaptar a

diferentes meios de exibição, em diferentes aparelhos e em diferentes resoluções.
Isso se tornou essencial nesta era de mobile. O HTML5 colabora para esse aspecto
com as tags de navegação citadas anteriormente e com propriedades que permitem
identificar a resolução da tela em que a página é exibida. É importante ressaltar que
a responsividade em si somente será alcançada em conjunto com o CSS. Não se
pode dizer que, por si só, o HTML é responsivo. Ele apenas fornece elementos que
ajudam nisso.
A estrutura do HTML5 permanece praticamente a mesma utilizada na versão 4

da linguagem. Veja na figura 2 a comparação de uma declaração com HTML4 e
outra com HTML5.
Clique ou toque na imagem para ampliar.
48/85
(objetos/8.png)
Figura 2 – Declaração de uma página simples em HTML5 (à esquerda) e

HTML4 (à direita)
Uso de <!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01//EN" " h t t

p://www.w3.org/TR/html4/strict.dtd > no HTML4 e <!doctype html> no HTML5. Para
codificação de caracteres, usa-se <meta http-equiv="Content-Type"
content="text/html; charset=utf-8"> no HTML4 e <meta charset=”UTF-8”> no HTML5.
As tags <header>, <main> e<footer> no HTML 5 aparecem como <div> no exemplo
com HTML4. Tags <h1>, <p> e <ul> funcionam do mesmo jeito no 4 e no 5.
Note, na figura 2, que a estrutura geral permanece a mesma (as regras de

abertura e fechamento de tags, os elementos principais, as tags de escrita),
diferenciando-se os elementos semânticos.
Novas tags no HTML5

Entre os elementos (tags) de estrutura que o HTML5 introduz, destacam-se os
seguintes:
<figure >
Define um contêiner para uma imagem (tag <img>), que pode ficar agrupada à sua
descrição, utilizando a também nova tag <figcaption>.
<header >
É a seção de cabeçalho da página.
49/85
<main>
Representa a porção principal do corpo da página. É onde o conteúdo estará. Deve
ser único na página.
<nav>
É a seção com links de navegação da página, para breadcrumbs e menus, por
exemplo.
<article>
É uma porção de conteúdo independente na página, como um post de blog ou uma
notícia.
<section>
É uma seção genérica na página, um agrupamento de elementos que podem se
referir a um article ou não.
<aside>
Representa uma região da página com conteúdo auxiliar ao conteúdo principal,
como notas explicativas ou links auxiliares.
<footer>
É a seção de rodapé da página, geralmente contendo informações sobre website,
autor, copyright e/ou endereço da empresa.
Clique ou toque na imagem para ampliar.
50/85
(objetos/9.png)
Figura 3 – Esquema dos posicionamentos das novas tags estruturais de HTML
Exemplo de regiões representadas pelas tags. No topo, um retângulo na região

que corresponde a <header>; abaixo dele, um retângulo que corresponde a <nav>;
abaixo, dois retângulos lado a lado que representam <article> à esquerda e <aside>
à direita; abaixo, na extensão dos dois retângulos, outro retângulo representa
<footer>.
Note, porém, que a tag <section> não necessariamente estará dentro de um

article.
Como um apoio ao aprendizado do conteúdo, caso se sinta pronto para

exercitar o que foi estudado, faça o seguinte exercício:
Escolha uma página na internet e tente identificar as regiões de

cabeçalho (header), o conteúdo principal (main) e o rodapé (footer).
Nessa página, verifique o que poderia ser considerado article e nav.
Entre os novos elementos de mídia, os principais são:
51/85
<video> e <audio>
Define um áudio ou vídeo que possa ser reproduzido na página.
<embed>
É a tag padrão para incluir conteúdos que dependem de plug-ins externos.
<canvas>
Define um “quadro de pintura”, uma região na página em que se pode desenhar,
geralmente via JavaScript.
Para formulários, o HTML5, entre outras novidades, define:
<datalist >
São listas de itens usadas em conjunto com o tipo “list” de input (veja a seguir).
<output>
É o campo para resultado de um cálculo.
<progress >
É a barra de progresso, que mostra a porcentagem ou a etapa do processamento no
sistema.
Veja novos tipos para a tag <input>:
52/85
tel – Campo de telefone
search – Campo de busca
url – Campo de endereço da web
email – Campo para endereço de e-mail (com validação de formato)
date, detetime-local, month, week – Campos para data, data local,

mês e semana, respectivamente, usando calendário
time – Campo para horas, minutos e segundos
number – Campo de texto que aceita apenas números
range – Seletor de número em um intervalo (slider)
color – Campo para escolha de cor
Caso esteja pronto para colocar seus novos conhecimentos à prova e adquirir
outros, propomos o seguinte desafio:
Escreva o seguinte código no seu editor de texto (Visual Studio Code,

preferencialmente) e salve-o como “teste.html”.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Título da Página</title>
</head>
<body>
<form action="#">
Campo teste:
<input type="text" />
<input type="submit" value="ok">
</form>
</body>
Teste a página abrindo-a em um navegador como o Chrome ou Firefox.
Depois disso, troque o atributo type da tag <input> pelos seguintes valores:
53/85
e-mail
number
date
color
Após cada mudança, recarregue a página para testar esses diferentes tipos de
campos e clique no botão Ok para ver se há alguma validação. No caso de
type=”text”, não há nenhuma validação acontecendo, mas em “e-mail”, por exemplo,
deverá haver.
Elementos obsoletos do HTML

O padrão HTML5 também definiu a obsolescência de algumas tags, uma
porção delas porque definiam estilo no HTML, que deve se preocupar
essencialmente com a estrutura da informação.
<basefont>
Definição de um padrão de fonte para toda a página
<big>
Fontes maiores
54/85
<center>
Centralização de elementos horizontalmente
<font>
Definição de fonte, cor e tamanho de um texto
<strike>
Texto riscado
<tt>
Fonte estilo “máquina de escrever”
Essas tags devem ser evitadas. Em vez delas, devem-se usar estilos CSS, o que
será estudado posteriormente no curso.
Além das tags de estilo, outros elementos redundantes ou relativos a

multimídia foram retirados. Veja:
<acronym>
Corresponde à tag <abbr>, usada para indicar abreviação.
<dir>
Corresponde à tag <ul> para lista textual não numerada.
<applet>
Era usada para aplicações Java.
<frame> e <frameset>
Definem uma página HTML dentro da própria página.
Além disso, vários atributos foram se tornando obsoletos, a maioria

relacionados a estilo.
55/85
A tag <body> agora não aceita mais nenhum parâmetro (exemplo:

“background”).
Bgcolor, presente em <table> e <body>, define uma cor de fundo, mas

não deve mais ser usado.
cellpadding, cellspacing e frame da tag <table> são usados para

definir as bordas e o espaçamento entre as células de uma tabela.
valign, presente em vários elementos, usado para alinhar verticalmente

um conteúdo, não deve mais estar presente.
A lista é extensa, e, à medida que progredirmos nos estudos, conheceremos

mais itens a evitar.
Pesquise por “Obsolete Attributes in HTML 5”, em <w3.org>, para obter uma lista
completa.
Apesar de não serem mais recomendados, esses atributos e tags ainda são
aceitos nos navegadores atuais. O efeito original continuará a acontecer, até por
conta da preocupação da compatibilidade de páginas antigas com o browser, mas é
possível que no futuro esse suporte deixe de existir. Por isso, e em conformidade
com os padrões estabelecidos pela W3C, esses elementos devem ser evitados.
Exemplo 1 – Construindo uma página de notícias

Para discutirmos detalhes e padrões das tags mais utilizadas no HTML, vamos
praticar com alguns exemplos. O primeiro deles mostra propostas para algumas
páginas de um site de notícias.
A primeira página deve conter:
56/85
Título do site, data e uma caixa de buscas
Resumo das notícias principais com suas manchetes
Menu com as categorias de notícias
Rodapé com copyright e links
Você já deve ter realizado alguns exemplos parecidos anteriormente no curso.

A ideia aqui é contextualizar a prática nos padrões do HTML5, detalhar algumas tags
e reforçar seu conhecimento.
Não usaremos estilos nas páginas, apenas estrutura. Por isso, não nos
preocuparemos com cores, tipografia e o posicionamento dos elementos da página.
Será possível alcançar tudo isso com CSS.
Você pode revisitar esse exercício após estudos com CSS para aplicar um estilo a
essa página.
Para fazer a primeira página, abra o Visual Studio Code e selecione File >
Open Folder. Escolha uma pasta de sua preferência para armazenar todas as
páginas que escreveremos aqui. Feito isso, na área “Explorer”, ao lado do nome da
pasta aberta, use o ícone “New File” para criar um novo arquivo e nomeie-o como
“index.html”.
Figura 4 – Criando arquivo na pasta de trabalho no VS Code.
57/85
Janela do Visual Studio Code, na guia “Explorer”, acessada pelo ícone de duas páginas de
papel. Ao lado do nome da pasta de trabalho, há um ícone com uma página de papel e um sinal
de + para criar um novo arquivo.
“Index” é um nome padrão para a primeira página de uma aplicação web.
Inicie digitando a estrutura básica: doctype, html e head, com meta, title e body.
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="utf-8">
<title>Notícias da Hora</title>
</head>
<body>
</body>
</html>
Esses são os elementos básicos de uma página HTML. É boa prática usar o
elemento “meta” para definir a codificação da escrita (geralmente UTF-8), quando
queremos usar acentuação no conteúdo da página.
Para fins de internacionalização, o W3C define como padrão o uso do atributo lang
para definir a língua em que a página está escrita (no nosso caso, “pt”, para
português, mas como exemplos temos “en” para inglês, “es” para espanhol e “zh”
para chinês).
Cuidado com a indentação: o espaçamento inicial das linhas é muito importante

para identificar qual elemento é “filho” de qual.
Dentro da tag <body>, vamos iniciar nosso conteúdo usando a construção

semântica definida pelo W3C para HTML5.
58/85
<header>
<h1>Notícias Da Hora</h1>
<form>
<input type="search" />
<input type="submit" value="Buscar" />
</form>
</header>
Estamos aqui usando a tag <header> para definir o cabeçalho da página, com
o título (o logo) do nosso site. Para ele, utilizamos a tag <h1>. A família “H” de tags
define títulos e subtítulos para um texto em HTML. Para definir o título mais
importante do site ou de uma seção, é usado <h1>; para o segundo mais importante,
é usado <h2>; e assim por diante, até <h6>.
Não use as tags “H” apenas para definir tamanho de fonte, mas, sim, para demarcar
títulos ou indicar a importância de textos. Não pule a hierarquia das tags: depois de
<h1>, não use diretamente <h3> ou <h4> para um subtítulo, por exemplo, mas, sim,
<h2>.
Seguindo <h1>, temos um pequeno <form>, que servirá para implementar uma
busca pelo site. Note que nele usamos a tag <input> com o atributo type=”search”.
O form não realizará uma ação neste exemplo, pois não implementaremos código do
lado do servidor por ora. Veja mais detalhes sobre o funcionamento do elemento
form no exemplo 2, adiante.
Abaixo de </header>, incluiremos uma tag <main> para indicar que esta é a
região em que o conteúdo principal da página está. Dentro dela, incluiremos uma tag
<nav>, para delimitar um menu de navegação. O identificador desse <nav> será
“menu-lateral”.
59/85
<main>
<nav id="menu-lateral">
<span>Navegue por categorias:</span>
<ul>
<li><a href="#">Cotidiano</a></li>
<li><a href="#">Esportes</a></li>
<li><a href="#">Tecnologia</a></li>
<li><a href="#">Comportamento</a></li>
</ul>
</nav>
Usamos um elemento <span> apenas para informar um subtítulo para a

navegação. Essa tag é usada quando queremos escrever um texto livre, sem
quebras de fluxo, como acontece com um <p>.
A seguir, usamos uma tag <ul> para criar uma lista não numerada (no caso, a
lista é de links). Cada elemento dessa lista precisa ser declarado com a tag <li>.
Dentro da tag <li>, temos a tag <a>, usada para hyperlinks. No nosso caso,
não temos ainda definidas páginas para as categorias “Cotidiano”, “Esportes”,
“Tecnologia” e “Comportamento”. Por isso, em href, usamos o endereço “#”, que, em
vez de abrir uma nova página, mantém a página atual.
Prosseguindo com a página, incluiremos o seguinte trecho:
<section id="destaques">
<h2>Destaques</h2>
<a href="noticia1.html">
<img src="imagens/futebol.png" alt="Bola de
futebol no gramado" title="Futebol">
<h3>Com gol de França, São Paulo derrota o S
antos no Morumbi</h3>
</a>
<img src="imagens/ideias.png" alt="Ideias e
tecnologia" title="Tecnologia">
<h3>As idéias inovadoras de oito profissiona
is geniais</h3>
</a>
</section>
</main>
60/85
Seguem algumas observações importantes:
A tag <section> delimitará a região em que teremos as manchetes do

nosso site.
Criamos um subtítulo com <h2>.
Cada notícia nesta página é apenas um link que leva aos detalhes da
notícia. Por isso, usamos a tag <a> e preenchemos com uma imagem
(tag<img>) e um subtítulo (tag <h3>).
Note que preenchemos os atributos href das tags <a> com

“noticia1.html” e “noticia2.html”, respectivamente. Estas são páginas
que criaremos em seguida na mesma pasta em que está “index.html”.
Chamamos este tipo de endereçamento, sem “htttp” ou “www”, de
caminho relativo, o qual é usado quando referenciamos recursos do
próprio sistema (no caso, outra página no mesmo nível de diretório).
Evite usar caminhos absolutos (completos, com “http” e domínio) em tags <a>
quando estiver referenciando um recurso do próprio sistema. Prefira caminhos
relativos.
Na tag <img>, no atributo src, usamos a mesma lógica para caminhos

relativos da tag <a> para encontrar a imagem. Desta vez, no entanto,
estamos referenciando a imagem “futebol.png”, que está na pasta
“Imagens”, que, por sua vez, está na pasta em que “index.html” está
salvo. Analogamente, a tag <img> busca a imagem “ideias.png”.
Também usamos os atributos alt e title.
O atributo alt deve ser sempre considerado, pois é a mensagem mostrada na tela
quando o navegador, por algum motivo, não consegue mostrar a imagem.
O atributo title serve para mostrar uma descrição flutuante da imagem, que aparece
quando se para o mouse sobre ela. O recurso deve ser usado com moderação, já
que aparelhos com tela de toque não conseguem utilizá-lo.
Utilize as imagens disponibilizadas a seguir para o seu teste. Crie uma

pasta no diretório em que salvou “index.html” e a nomeie como
“imagens”. Grave nesta pasta as imagens.
61/85
(objetos/11.png)
(objetos/11.png)
imagens de exemplo para que o aluno possa usar no exercício. Uma para futebol e
outra para tecnologia. Ambas medem 300 x 225.
Um recurso importante de acessibilidade envolve o peso de imagens usadas nos

websites. Elas devem ser otimizadas, para que não seja demorado carregá-las.
Recomenda-se que, no geral, não ultrapasse a linha dos kilobytes.
Note que a tag <a> envolve todo o elemento <img> e o <h3>. Assim, toda a
área é clicável. Também não se esqueça de incluir, no fim, o fechamento da tag
<main>.
Apesar da capacidade dos navegadores de interpretar códigos incompletos, é

essencial o encerramento das tags HTML. Exemplos: <p> e </p>; <a> e </a>.
62/85
Algumas tags são autocontidas, como <img>. Neste caso, o encerramento acontece
na própria tag: <img atributos />.
Após </main> e antes de </body>, podemos incluir finalmente o <footer>, o

rodapé da página. Ele conterá apenas um texto informando copyright.
<footer>
<span>Todos os direitos Reservados. Contato (88) 1122
3-4455</span>
</footer>
O código HTML completo da página “index.html” deve estar dessa maneira:
63/85
<!DOCTYPE html>
<html lang="pt">
<head>
</head>
<body>
<header>
<form>
</form>
</header>
<main>
<ul>
</ul>
</nav>
<section id="destaques">
<h2>Destaques</h2>
<img src="imagens/futebol.png" alt="Bola de fu
tebol no gramado" title="Futebol">
<h3>Com gol de França, São Paulo derrota o San
tos no Morumbi</h3>
</a>
<img src="imagens/ideias.png" alt="Ideias e te
cnologia" title="Tecnologia">
<h3>As idéias inovadoras de oito profissionais
geniais</h3>
</a>
</section>
</main>
<footer>
3-4455</span>
</footer>
</body>
</html>
64/85
Teste no seu navegador a página que você desenvolveu. Revise o código caso
algo tenha saído errado.
Vamos agora criar a segunda página. No VS Code, use o ícone New File ao
lado do nome da pasta para criar o arquivo “noticia1.html”.
A estrutura inicial do HTML é semelhante à que fizemos para “index.html”:
<!DOCTYPE html>
<html lang="pt">
<head>
<title>Notícia 1 - Notícia da Hora</title>
</head>
<body>
</body>
</html>
A única diferença é que trocamos <title> para indicar a página em que

estamos. Lembre-se de que esta tag é responsável pela informação que aparece na
aba do navegador.
Agora, dentro de body, vamos incluir as estruturas de <header>, de <main> e

de <nav> que tínhamos em “index.html”.
65/85
<header>
<form>
</form>
</header>
<main>
<ul>
</ul>
</nav>
Por que a repetição? Porque se trata de elementos comuns ao leiaute do site.

O cabeçalho sempre será o mesmo, e o menu sempre deverá aparecer com os
menus gerais, como um padrão para o nosso website. A diferença vem a seguir, com
a inclusão da tag <article> abaixo de </nav>.
66/85
<article>
<header>
<h2>Com gol de França, São Paulo derrota o Santos no Mo
rumbi</h2>
<i>Os times paulistas jogaram pelo Campeonato Brasileir
o no último domingo</i>
</header>
<figure>
<img src="imagens/futebol2.png" alt="Bola de futebol" t
itle="Futebol"/>
<figcaption>A bola rolou no último Domingo</figcaption>
</figure>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing eli
t. Vivamus molestie iaculis ante eu ornare.
In auctor est non accumsan placerat. Mauris nec varius
orci. Nam sodales est id lectus finibus,
in cursus ipsum posuere. Phasellus vel euismod ex. Inte
ger non metus nunc. Mauris blandit malesuada
lacus quis iaculis.
</p>
<p>
Aliquam mauris augue, tincidunt elementum volutpat nec,
vulputate et dui. Nunc sed massa magna.
Nam mollis ligula justo, nec fringilla sapien venenatis
vel. Fusce eget euismod neque. Quisque
euismod sed nisl a placerat. Nunc scelerisque, est sed
laoreet faucibus, est augue gravida eros,
id convallis magna risus non mi.
</p>
</article>
Note que, na estrutura de <article>, usamos também a tag <header> para

indicar a região em que está o título da notícia. Icluímos uma tag <h2> e uma <i>,
que indica ênfase, citação, pensamento ou termo estrangeiro no texto (geralmente, é
representada por itálico nos navegadores). Poderíamos ainda ter um <foot> caso
achássemos adequado incluir, por exemplo, o nome do autor do artigo.
Abaixo de header, temos uma tag <figure>. Diferentemente de “index.html”,

optamos pelo uso dessa tag para envolver a imagem da notícia porque também
incluímos, junto a ela, uma descrição que aparecerá logo abaixo. Essa descrição
está expressa pela tag <figcaption>. A tag <figure> também pode ser usada para
tabelas com descrição, vídeos, trechos de código ou mesmo com várias imagens
que usem uma mesma descrição.
67/85
Utilize a imagem logo a seguir para fazer o teste. Salve-a como “futebol2.png”
na pasta “Imagens”, criada anteriormente.
Imagem de exemplo para que o aluno possa usar no exercício. Assunto:

futebol. Tamanho: 615 x 410.
Após o fechamento de <figure>, temos o texto em si, usando parágrafos com a

tag <p>.
Esse texto estranho que aparece no exemplo é um famoso texto chamado Lorem
Ipsum, bastante usado para preencher páginas apenas para que se possa validar
um leiaute ou fazer testes. Busque por “gerador de lorem ipsum” na internet para
ajudar a criar esses parágrafos.
Nesta página, temos apenas uma notícia e, portanto, apenas um <article>.

Nada nos impede de incluir mais desses elementos em uma página. A seguir,
fechamos <main> e incluímos o <footer>, o mesmo que usamos em “index.html”.
68/85
</main>
<footer>
3-4455</span>
</footer>
Lembre-se de que isso vem antes de </body>. O código completo de

“noticia1.html” fica assim:
69/85
<!DOCTYPE html>
<html lang="pt">
<head>
</head>
<body>
<header>
<h1>Notícia 1 - Notícias Da Hora</h1>
<form>
</form>
</header>
<main>
<ul>
</ul>
</nav>
<article>
<header>
<h2>Com gol de França, São Paulo derrota o San
tos no Morumbi</h2>
<i>Os times paulistas jogaram pelo Campeonato
Brasileiro no último domingo</i>
</header>
<figure>
<img src="imagens/futebol2.png" alt="Bola de f
utebol" title="Futebol"/>
<figcaption>A bola rolou no último Domingo</fi
gcaption>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipisc
ing elit. Vivamus molestie iaculis ante eu ornare. In auctor est non accumsan pla
cerat. Mauris nec varius orci. Nam sodales est id lectus finibus, in cursus ipsum
posuere. Phasellus vel euismod ex. Integer non metus nunc. Mauris blandit malesua
da lacus quis iaculis.
</p>
<p>Aliquam mauris augue, tincidunt elementum volut
pat nec, vulputate et dui. Nunc sed massa magna. Nam mollis ligula justo, nec fri
ngilla sapien venenatis vel. Fusce eget euismod neque. Quisque euismod sed nisl a
placerat. Nunc scelerisque, est sed laoreet faucibus, est augue gravida eros, id
convallis magna risus non mi.
</p>
</article>
</main>
<footer>
70/85

3-4455</span>
</footer>
</body>
</html>
Teste “noticia1.html” no seu navegador. Depois, acesse “index.html” e tente

usar o link da notícia 1. Veja se ocorre o redirecionamento para a página da notícia
número 1. Caso não tenha acontecido, verifique a tag <a> logo após
<h1>Destaques</h1> em “index.html”. Verifique se a grafia do atributo href está
correta. O valor dela deve estar idêntico ao nome do arquivo HTML com o conteúdo
da notícia.
Apesar de termos usado as estruturas “article” para montar as notícias do site,

a tag pode ser usada para qualquer tipo de conteúdo que envolva texto, como, por
exemplo, a descrição de um produto à venda.
Você está compreendendo o conteúdo? Quer se desafiar e pôr a prova o que

aprendeu? Caso afirmativo, encare o seguinte exercício:
Usando o VS Code, tente criar uma página para a notícia 2, de maneira

bem semelhante ao que foi feito para a notícia 1.
71/85
Exemplo 2 – Construindo um formulário de

cadastro
Prosseguindo com a ideia do site de notícias, digamos que ele precisa
cadastrar leitores, aos quais serão oferecidos conteúdos exclusivos e newsletter.
Vamos construir, para isso, um formulário de cadastro. No Visual Studio Code,
incluímos em nossa pasta de trabalho um novo arquivo, chamado “cadastro.html”.
Iniciamos nosso código com as já conhecidas estruturas básicas do HTML.
72/85
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="utf-8" />
<title>Cadastro - Notícias da Hora</title>
</head>
<body>
<header>
<h1>Notícias da Hora</h1>
</header>
<main>
</main>
</body>
</html>
Já acrescentamos ao código as tags <header> e <main>, que usaremos em

nosso cadastro. Para essa página, omitiremos o <footer>.
Dentro da tag <main>, vamos incluir o esqueleto do nosso formulário com a tag
<form> e, dentro dela, um botão “reset” e um botão “submit”.
<form method="POST" action="#">
<input type="reset" value="Limpar" />

<input type="submit" value="Salvar" />
</form>
A tag <form> é utilizada quando queremos transmitir informações do lado do

cliente para o servidor. É muito usado para cadastros. O atributo method pode ser
do tipo “post” ou do tipo “get”; e o atributo action indica qual endereço receberá as
informações postadas pelo formulário.
Usa-se get quando se quer enviar informações explícitas via URL para outra página
(aparecerá algo como url?campo1=valor&campo2=valor no endereço da página
indicada pelo atributo action de <form>). Usa-se post quando o objetivo é omitir as
informações enviadas para o endereço de action. O mais comum é o uso de post.
73/85
O botão Reset é usado para limpar os campos do formulário. O botão Submit

serve para enviar as informações ao endereço indicado por action. Assim que
terminarmos nosso formulário, voltaremos a comentar como as informações
trafegam da página para o código server side.
A seguir, dentro da tag <form> e antes do Reset, vamos incluir um <fieldset>.

Essa tag é usada para agrupar campos de um mesmo contexto. No caso do nosso
cadastro, vamos usar um único fieldset, mas pode haver mais de um, desde que se
verifique a necessidade de agrupar campos que se refiram a um assunto.
Dentro do fieldset, usamos a tag <legend> para descrevê-lo.
O fieldset não é obrigatório, mas é uma boa prática tanto para a leitura do código
HTML quanto para a semântica da página.
<fieldset>
<legend>Inscreva-se no nosso site</legend>
<ul>
<li>
<label for="txtNome">Nome</label>
<input type="text" id="txtNome" name="nome" required
/>
</li>
</ul>
</fieldset>
Veja que, no trecho, já incluímos nosso primeiro campo de formulário, e há

algumas observações sobre ele.
74/85
Usamos a tag <ul> e seus elementos <li> para organizar o formulário.

Note a versatilidade da tag, que, além de ser usada para fazer listas
não numeradas de texto, pode ajudar no leiaute da página. Com CSS,
será possível remover o ponto preto que aparece à esquerda de cada
item.
A tag <label> é usada para descrever o campo. O atributo for deve ter
o mesmo valor do id do campo que ela referencia.
Usamos aqui a tag <input> com type igual a “text”. Ou seja, temos um
campo de texto livre. O atributo required indica que se trata de um
campo de preenchimento obrigatório.
É altamente recomendado que todos tenham seus atributos id preenchidos. O

atributo name também precisa ser preenchido. É por meio dele que o código do lado
do servidor identificará cada informação vinda do form.
Recomendamos que você, a cada novo campo incluído neste tutorial, teste a
página no browser para verificar seu resultado. Clique no botão Submit para ver as
diretivas de validação (como “required”) serem executadas.
A seguir, prosseguiremos com os próximos campos do formulário. Considere

que eles sempre virão após o último </li> incluído no formulário.
<li>
<label for="txtEmail">Email</label>
<input type="email" id="txtEmail" name="email" required/>
</li>
Desta vez, foi incluído o campo de input do tipo “email”, com seu respectivo
label. Ele valida, ao realizar submit, se a informação incluída está em um formato
válido de e-mail. Caso não esteja, a ação do submit não é concluída.
O próximo campo servirá para o usuário cadastrar sua senha no site.
75/85
<li>
<label for="txtSenha">Senha</label>
<input type="password" id="txtSenha" name="senha" required/
>
</li>
O <input>, neste caso, é do tipo “password”. Este tipo de campo esconde o que
está sendo digitado, substituindo os caracteres por símbolos. Alguns browsers
embutem nele uma opção de visualizar o texto oculto.
A seguir, estão os campos para cadastrar a data de nascimento. Para isso,

usaremos um input do tipo “number” para o dia, outro para o ano e uma caixa de
seleção para o mês.
<li>
<label>Data de Nascimento</label>
<input type="number" id="txtDia" name="nascimento-dia" min=
"1" max="31"/>
<select id="selMes" name="nascimento-mes">
<option value="1">Janeiro</option>
<option value="2">Fevereiro</option>
<option value="3">Março</option>
<option value="4">Abril</option>
<option value="5">Maio</option>
<option value="6">Junho</option>
<option value="7">Julho</option>
<option value="8">Agosto</option>
<option value="9">Setembro</option>
<option value="10">Outubro</option>
<option value="11">Novembro</option>
<option value="12">Dezembro</option>
</select>
<input type="number" id="txtAno" name="nascimento-ano"/>
</li>
No trecho:
76/85
Usamos um elemento <label> sem atributo for, pois ele se refere a

vários campos.
Usamos um <input> do tipo “number” para o dia do nascimento.

Limitamos seu valor à faixa de 1 a 31 (a validação ocorre ao se clicar
no botão Submit).
Incluímos uma tag <select>, usada para caixa de seleção de um dos

valores listados. Cada valor é listado dentro da tag usando <option>. O
atributo value de <option> é o valor que será transmitido ao código do
servidor no momento da postagem. O texto entre <option> e </option>
é o que será mostrado ao usuário na página, na lista de opções.
Por fim, temos um <input> do tipo “number” para o usuário digitar o ano
de nascimento. Não incluímos restrições ao valor.
A seguir, vamos perguntar a quem está se cadastrando o seu gênero. Para

isso, usaremos radio buttons.
<li>
<label>Sexo</label>
<label><input type="radio" name="genero" value="m"/>Mascu
lino</label>
<label><input type="radio" name="genero" value="f"/>Femin
ino</label>
</li>
Radio buttons são elementos específicos. Eles geralmente aparecem

agrupados para que o usuário opte por uma das alternativas oferecidas. Por isso,
ambos os <input> do tipo “radio” listados têm o mesmo valor no atributo name. O
valor do atributo value é o que será transmitido ao servidor no momento do submit.
Caso o primeiro item esteja marcado, o servidor receberá o valor “m” para a
informação “genero”; caso contrário, receberá “f”.
Veja que, no exemplo anterior, o input “radio” está envolvido por uma tag <label>.
Isso não é obrigatório, mas constitui um recurso importante de usabilidade. Teste
retirar o <label> que está antes do primeiro <input type=”radio” …/> e o </label>
77/85
após. Depois, no browser, clique na palavra “Masculino” e note que o radio button só
ficará marcado se clicarmos exatamente no círculo à esquerda. Depois teste clicar
na palavra “Feminino” e note que esta, por manter-se envolvida em <label>, expande
a área de clique para além do círculo, à palavra que descreve o radio.
O último elemento será uma marcação para quem estiver se cadastrando

informar se deseja receber propagandas.
<li>
<label><input type="checkbox" id="chkOfertas"
name="ofertas" />Desejo receber ofertas de sites parceir
os</label>
</li>
Para informações desse tipo (sim/não), podemos usar <input> do tipo

“checkbox”. Note que usamos a mesma lógica do <label> que usamos nos radio
buttons para aumentar a área do clique.
O código completo de “cadastro.html” fica assim:
78/85
<!DOCTYPE html>
<html lang="pt">
<head>
</head>
<body>
<header>
</header>
<main>
<form method="POST" action="#">
<fieldset>
<legend>Inscreva-se no nosso site</legend>
<ul>
<li>
<label for="txtNome">Nome</label>
<input type="text" id="txtNome" name
="nome" required />
</li>
<li>
<label for="txtEmail">Email</label>
<input type="email" id="txtEmail" name=
"email" required />
</li>
<li>
<label for="txtSenha">Senha</label>
<input type="password" id="txtSenha"
name="senha" required/>
</li>
<li>
<label>Data de Nascimento</label>
<input type="number" id="txtDia" nam
e="nascimento-dia" min="1" max="31"/>
<select id="selMes" name="nascimento
-mes">
<option value="1">Janeiro</optio
n>
<option value="2">Fevereiro</opt
ion>
<option value="3">Março</option>
<option value="4">Abril</option>
<option value="5">Maio</option>
<option value="6">Junho</option>
<option value="7">Julho</option>
<option value="8">Agosto</option
>
<option value="9">Setembro</opti
on>
<option value="10">Outubro</opti
on>
<option value="11">Novembro</opt
79/85
ion>
<option value="12">Dezembro</opt
ion>
</select>
<input type="number" id="txtAno" nam
e="nascimento-ano"/>
</li>
<li>
<label>Sexo</label>
<label><input type="radio" name="gen
ero" value="m"/>Masculino</label>
<label><input type="radio" name="gen
ero" value="f"/>Feminino</label>
</li>
<li>
<label>
<input type="checkbox" id="chkOf
ertas" name="ofertas" />
Desejo receber ofertas de sites
parceiros
</label>
</li>
</ul>
</fieldset>
<input type="reset" value="Limpar" />
<input type="submit" value="Salvar" />
</form>
</main>
</body>
</html>
O atributo align de input está obsoleto no HTML5 e não deve ser usado.
Faça os testes no navegador. Use todos os campos e realize submit do

formulário para notar as validações automáticas previstas pelo HTML5 (cada
browser as implementa de uma maneira diferente). Para validações mais complexas
e dinâmicas, deve-se usar JavaScript.
O processo de postagem de informações de um formulário se inicia quando o

usuário clica no botão Submit. As informações então são organizadas de maneira
que fiquem em pares nome-valor (os nomes definidos nos atributos name; e os
80/85
valores preenchidos nos campos). Essa informação é enviada para o endereço

indicado por action, o qual, geralmente, refere-se a um recurso de servidor.
No servidor, ao receber essa informação, o sistema faz o processamento

cadastrando os valores em um banco de dados, por exemplo.
Você está pronto para usar elementos de form em uma nova página? Se
estiver, faça este exercício:
Desenvolva uma página HTML com formulário de log in, com campos
de e-mail e senha.
Exemplo 3 – Tabela de dados

O último exemplo é uma tabela de dados com as informações registradas pelo
nosso cadastro.
No VS Code, inclua um novo arquivo na pasta de trabalho, chamado

“listagem.html”. Preencha com a nossa já tradicional estrutura de página.
81/85
<!DOCTYPE html>
<html lang="pt">
<head>
</head>
<body>
<header>
</header>
<main>
</main>
</body>
</html>
Dentro da tag <main>, vamos incluir uma tag <table>, que trará os dados do
cadastro.
<table>
<thead>
</thead>
<tbody>
</tbody>
</table>
A tag <table> é usada para tabular dados em uma página, usando colunas e
linhas para isso. Dentro dela, temos as marcações opcionais de <thead> (indica os
títulos das colunas) e <tbody> (indica o conteúdo da tabela).
Não use <table> para organizar leiaute de página. Use apenas para mostrar dados.
O uso da tag para estruturas uma página e seus elementos era muito comum nos
primórdios da internet, mas hoje deve ser evitado, já que deixa a página inadequada
para navegadores de mobile, por exemplo.
A seguir, vamos preencher o cabeçalho da tabela. Dentro de <thead>, inclua:
82/85
<tr>
<th>Nome</th>
<th>Email</th>
<th>Nascimento</th>
<th>Gênero</th>
<th>Aceita ofertas</th>
</tr>
Sempre usamos <tr> para denotar uma linha na tabela. A tag <th> indica o
título de uma coluna. Agora, é momento de preencher o <tbody>.
<tr>
<td>Fulano da Silva</td>
<td>fulano@mail.com</td>
<td>01/11/1980</td>
<td>Masculino</td>
<td>Sim</td>
</tr>
<tr>
<td>Ciclana da Silva</td>
<td>ciclana@mail.com</td>
<td>05/10/1974</td>
<td>Feminino</td>
<td>Não</td>
</tr>
<tr>
<td>Beltrano da Silva</td>
<td>beltrano@mail.com</td>
<td>06/06/1995</td>
<td>Masculino</td>
<td>Não</td>
</tr>
Temos nesse código três linhas com dados e informações para cada coluna.
Usamos a tag <td> para delimitá-las.
É simples! Veja como ficou o código completo da listagem:
83/85
<!DOCTYPE html>
<html lang="pt">
<head>
</head>
<body>
<header>
</header>
<main>
<table>
<thead>
<tr>
<th>Nome</th>
<th>Email</th>
<th>Nascimento</th>
<th>Gênero</th>
<th>Aceita ofertas</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fulano da Silva</td>
<td>fulano@mail.com</td>
<td>01/11/1980</td>
<td>Masculino</td>
<td>Sim</td>
</tr>
<tr>
<td>Ciclana da Silva</td>
<td>ciclana@mail.com</td>
<td>05/10/1974</td>
<td>Feminino</td>
<td>Não</td>
</tr>
<tr>
<td>Beltrano da Silva</td>
<td>beltrano@mail.com</td>
<td>06/06/1995</td>
<td>Masculino</td>
<td>Não</td>
</tr>
</tbody>
</table>
</main>
</body>
</html>
84/85
Salve seu código e teste-o no browser. Note que a tabela está sem bordas.
Estilos para a tabela devem ser aplicados via CSS.
Os atributos align, bgcolor, border, cellpadding, cellspacing, frame, rules,

summary e width da tag <table>, todos relativos a estilo, estão obsoletos e, em
conformidade com o HTML5, não devem ser usados. Usa-se CSS.
O HTML5 traz recursos importantes, especialmente no que se refere à

semântica de uma página. É importante o bom uso desses recursos para uma
melhor leitura e interpretação do site nas ferramentas de buscas da web, por uma
melhor organização, pela possibilidade de manutenção facilitada e por uma
separação maior de responsabilidades. Com a retirada de atributos e tags de estilo
do HTML, esse papel fica totalmente por conta do CSS.
É importante experimentar os elementos definidos pelo W3C no padrão HTML5 e

treinar, sempre atentando para as recomendações de uso. Um bom complemento é
o conhecimento em padrões de usabilidade e acessibilidade, definidos também pela
W3C. Eles proporcionam páginas de navegação clara e estruturas bem-definidas.
Assim, concluímos nossos estudos introdutórios de como programar no front-

end e no back-end de uma aplicação. Ainda estamos arranhando conceitos. Um
aprofundamento, tanto em C# e em tecnologias de back-end quanto em HTML e em
tecnologias de front-end, será realizado no decorrer do curso.
Voltar ao topo (#topo2)
85/85

Arquitetura WEB em Camadas - Senac

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Arquitetura WEB em Camadas - Senac

Enviado por

Direitos autorais:

Formatos disponíveis

08/07/2020 Versão para impressão

Informática para internet

Arquitetura web em camadas: conceitos de

Uma aplicação web obedece a uma arquitetura bastante específica. Uma

Quando digita um endereço em seu navegador, você está enviando uma

Figura 1 – Fluxo de informação na web

Por isso, a arquitetura web é dividida em duas camadas principais: a camada

Definição das camadas de front-end e back-end

A programação de um site pode ser dividida em duas grandes camadas: a

A camada de front-end é responsável pela interface que o usuário

O programador responsável pelo desenvolvimento da camada de front-end

Na camada de back-end, o programador fica responsável pelos requisitos

Entre as tecnologias utilizadas nesta camada, estão sistemas de

Algumas tarefas desempenhadas na camada de back-end são:

Conexões com banco de dados

Além de desenvolvedores especializados em uma dessas camadas, há

Como uma introdução aos estudos de desenvolvimento web, abordaremos aqui

Introdução à programação em C# (#cs1) Criando um novo projeto no VS Code (#cs2) Variáveis

A linguagem C# (leia-se “C sharp”) foi desenvolvida pela Microsoft junto com o

Trata-se de uma linguagem orientada a objetos. Tem influências de C++, Java

Em modo console, trabalhamos com programação orientada a objetos. Já no

Linguagens orientadas a objeto utilizam conceitos de classes e objetos para

A programação estruturada prevê uma linha de execução do início ao fim do

Durante o curso, veremos mais informações sobre os paradigmas de programação.

Criando um novo projeto no VS Code

O editor que usaremos para criar nossos códigos é o VS Code. Diferentemente

como autocompletar e colorir palavras reservadas, em que podemos digitar nossos

Agora, abra um terminal clicando no menu Terminal e selecionando New

Com isso, estamos criando um projeto C# do tipo console, ou seja, uma

Dê duplo clique em Program.cs para abri-lo no editor. Neste momento, você

Vamos executar a aplicação abrindo o terminal no VS Code (caso já não

Em seguida, digitamos “dotnet run” e depois clicamos Enter para iniciar a

Caixa de diálogo para selecionar pasta do computador. Pasta “Meus Projetos

Agora, abra um terminal clicando no menu Terminal e selecionando New

VS Code com a aba “Terminal” aberta na parte inferior, mostrando o caminho

Com isso, estamos criando um projeto C# do tipo console, ou seja, uma

VS Code mostrando o comando “dotnet new console” executado. Como

Dê duplo clique em Program.cs para abri-lo no editor. Neste momento, você

Vamos executar a aplicação abrindo o terminal no VS Code (caso já não

Janela do VS Code com código gerado. A região “Terminal” mostra o comando

Em seguida, digitamos “dotnet run” e depois clicamos Enter para iniciar a

Janela do VS Code com código de Program.cs. A região “Terminal” mostra o

Vamos analisar brevemente o que há em “Program.cs”. O código é este:

Neste primeiro contato com o C#, abstrairemos as linhas 1 a 6, 11 e 12. Elas

Quaisquer outros comandos que estivessem entre { } de Main seriam

Depois, execute o programa. Ele deverá imprimir “Hello World!” e, na linha

O tipo de informação que uma variável recebe varia de linguagem para

A tabela 1 mostra a lista completa de tipos de dados que podemos utilizar.

Char Caractere 16 1 caractere

Bool Tipo lógico 8 True or False

Tabela 1 – Tipos de dados

Declaração e atribuição de variáveis

[tipo de dado] [nomedavariável];

int dias =100;

Podemos ler o exemplo como: a variável “dias” recebe o valor 100.

Comandos de entrada e saída no C#

O comando utilizado como padrão para a entrada de dados, ou seja, a leitura

Esse comando lê uma informação digitada pelo usuário e a atribui a uma

O comando int.Parse() converte a informação digitada pelo usuário

O comando de saída padrão, ou seja, de impressão na tela, é Console.Write()

Console.Write("Hello, Senac EAD");

Você pode ainda concatenar, ou seja, juntar mensagens com os conteúdos de

Console.Write("O número de dias é: "+dias);