DAWeb_Tema_02_TEXTO DE APOIO AO ESTUDO

•

UNICARIOCA

4

0

4

0

Gisselen Ribeiro

30/03/2023

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Análise e Desenvolvimento de Sistemas

48.931 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

CURSO CIÊNCIA DA COMPUTAÇÃO
DISCIPLINA: DESENVOLVIMENTO DE APLICAÇÕES WEB
TEMA: 01 – HTML

TEXTO PARA APOIO AO ESTUDO

1) Introdução

Nesta aula, iniciaremos o estudo de HTML e, inicialmente, é preciso saber qual é a finalidade de HTML e
entender o nicho de aplicação. A Figura 1, mostrada a seguir, traça um paralelo com a construção civil porque,
mesmo quem nunca trabalhou com isso, pode ter uma idéia sobre o que se trata. O terreno onde um imóvel será
construído pode ser considerado como sendo o servidor web, que hospeda as aplicações web. A estrutura do
imóvel pode ser comparada ao HTML, que fornece a estrutura das páginas web. E o acabamento do imóvel pode
ser comparado ao CSS, que atua no estilo ou na identidade visual das páginas web.

Terreno Estrutura Tijolos, acabamento
Servidor web HTML CSS

Figura 1 - Paralelo entre construção civil e tecnologias utilizadas na web.

2) Funcionamento básico de interação com a Web

Portanto, as aplicações web ficam armazenadas nos servidores. O usuário então faz uma requisição ao
servidor, que pode conter várias aplicações com diferentes tecnologias. Os métodos Get e Post podem ser usados
para enviar as informações. O servidor, ao receber uma requisição, processa o pedido e envia a resposta ao usuário
solicitante, com os recursos de HTML, CSS, e JavaScript (nossa disciplina).
Os recursos enviados pelo servidor são processados no lado do usuário e exibidos por meio de
navegadores. A Figura 2 ilustra todo esse processo de requisição e resposta.

Figura 2 - Processos de Requisição e Resposta.

Os navegadores possuem motores de renderização que fazem a conversão de HTML e CSS para serem
exibidos na tela do dispositivo do cliente.
3) HTML

HTML (Hyper Text Markup Language) utiliza tags/marcadores com funções específicas. A Figura 3 mostra os
códigos básicos de uma página HTML.

Figura 3 - Códigos básicos de uma página HTML.

A primeira linha <!DOCTYPE html> é utilizada para indicar que a página utiliza a versão HTML 5. As demais
linhas estão dentro da tag html, que começa com <html> e termina com </html>.
Dentro do <head> </head>, encontramos três linhas de código que exploraremos a seguir:
● O texto que estiver entre as tags <title> </title> é o que será exibido na aba do navegador;
● <meta charset=”UTF-8”> possibilita o uso de caracteres de língua portuguesa;
● <meta name-”viewport” content=”width=device-width, initial-scale=1.0”> possibilita o ajuste do
tamanho da tela da página à tela do dispositivo usado pelo cliente.

Dentro de <boldy> </body> estarão as linhas de código que, de fato, irão compor a página. Neste exemplo,
há apenas a tag <div> </div> mas, naturalmente, em uma página terão muitas outras linhas de código. Fica a dica
para pesquisar o é esta tag <div> </div>.
Os elementos HTML são divididos em categorias que guardam certas semelhanças. Mas os elementos
podem estar presentes em mais de uma categoria, conforme ilustrado na Figura 4.

Figura 4 - Categorias HTML.

A Figura 5 mostra linhas de código HTML e a Figura 6 mostra a página correspondente ao código da Figura
5. Compare as linhas de código HTML com o que foi exibido na página.
O texto que aparece entre as tags <h1> </h1> tem letra maior que <h2> </h2>, que tem texto maior que
<h3> </h3> e assim por diante.
<ul> é lista não ordenada. Os textos que aparecem entre <li> </li> terão bullets a esquerda do texto.
Faça um outro exemplo e, ao invés de usar <ul>, utilize <ol>, que é lista ordenada, e veja o que acontece.
Ao invés de bullets, os textos ficarão à direita de números.

Figura 5 - Exemplo de código HTML com h1 até h6 e bullets.

A Figura 6 mostra então a exibição da página que tem o código mostrado na Figura 5.

Figura 6 - Exibição da página do código da Figura 5.

Vamos analisar agora o que aparece na URL mostrada na Figura 6. Foi utilizado o NetBeans e o servidor
GlassFish, que está rodando localmente na máquina, daí o localhost. 8383 foi a porta utilizada. Tema_02_01 é o
nome do projeto que foi dado ao criá-lo no NetBeans. Pode-se criar projeto com outros nomes. index.html é o
nome do arquivo que contém o código HTML mostrado na Figura 5.

O próximo passo é a criação de formulários de login e senha. Neste momento, estamos estudando HTML e,
portanto, nos limitaremos ao front-end com as linhas básicas para a criação de um formulário. Posteriormente,
estudaremos o back-end e, a partir daí, poderemos fechar o ciclo de envio das informações de um formulário como
o de login e senha, que serão processados pela aplicação back-end que, por sua vez, envia a resposta ao cliente.
Então, neste momento, só mostraremos algumas linhas para a criação de formulário, conforme mostrado
na Figura 7.

Figura 7 - Primeiro formulário.

A Figura 8 mostra a exibição da página que tem o código da Figura 7.

Figura 8 - Exibição da página com o primeiro formulário.

Agora, vamos analisar as linhas de código para a criação do formulário. A linha mostrada abaixo é tem os
atributos action e method.

O atributo action especifica a aplicação do servidor que fará o processamento dos dados enviadas pelo
formulário. Neste código, como não estamos fazendo aplicação de servidor, /processa_formulario não tem
utilidade e foi colocado no código apenas para exemplificação. O atributo method permite especificar o método
de envio dos dados que, neste exemplo, é o método post.
Vamos analisar agora as linhas de input, que são utilizadas para possibilitar a inserção do login, senha e do
botão de enviar. Quando type=”text”, quer dizer que o campo de input receberá texto com os caracteres
visíveis. Quando type=”password”, quer dizer que o campo de input receberá senha e que os caracteres não
devem ser visíveis e, portanto, aparecerão círculos cada vez que usuário digita um caractere. E quando
type=”submit”, quer dizer que o campo input será um botão utilizado para enviar os dados para a aplicação do
servidor. Podemos fazer uma analogia com os campos name=”login” e name=”senha” como se fossem os nomes
de variáveis. Os dados enviados ao servidor são “empacotados” e, para que a aplicação do servidor possa
“desempacota-los” e fazer os processamentos necessários, é preciso ter alguma forma de identificá-los. Isso é feito
por meio do name. Por fim, o campo value=”Enviar” se refere ao nome que aparece sobre o botão utilizado para
enviar os dados.

<br> quer dizer quebra de linha, ou seja, posicionará o cursor na próxima linha. É usado para organizar
melhor a estrutura da página, de modo que as linhas não fiquem tão próximas umas das outras, quando for o caso.