Tema 1 - Aula 04

Universidade Politécnica
A POLITÉCNICA
Engenharia Informática e de Telecomunicações

7º Semestre
Programação Web
M.Sitoe_24A
Tema 1_Aula 4
Formulário HTML, Frames e Iframes;
Fundamentos de CSS
HTML & CSS
❑Formulário Inteligentes;
❑Divisão
❑Frames e Iframes;
❑Introdução ao CSS e conceitos
❑Estilização de Paginas HTML com CSS
❑CSS Responsivo
25/02/2024 M. S 3
ISP –EIT2 7ºS/24 Programação Web
Formulários
São usados para:
❑ Seleccionar diferentes entradas do usuário.
❑ Aumentar a interactividade fazendo comunicação entre o usuário e o site.
São Composto no mínimo por campo entrada de dados e um botão para enviar
as informações contidas nele
25/02/2024 M. S 4
Formulários
❑ Todo formulário em HTML é construído usando elementos dentro de um bloco <FORM>
❑ O bloco <FORM> define a URL que receberá o formulário e pode definir também o
método usado.
<FORM ACTION ="URL para onde serão enviado os dados"
METHOD= "método HTTP (Verbos HTTP)“ ENCTYPE="formato de codificação“

TARGET="nome da janela que mostrará a resposta" >
... corpo do formulário
</FORM>
25/02/2024 M. S 5
Formulários
❑ Verbos HTTP: GET, POST, PUT, DELETE, HEAD, OPTIONS, PATCH, CONNECT, TRACE
❑ENCTYPE:
▪application/x-www-form-urlencoded: O padrão. Todos os caracteres são codificados

antes do envio (espaços são convertidos em +, caracteres especiais em valores ASCII HEX).
▪multipart/form-data: Necessário quando o formulário contém controles de arquivo

(<input type="file">), permitindo que envie arquivos como parte do formulário.
▪text/plain: envia os dados sem qualquer codificação.
25/02/2024 M. S 6
Formulários
❑TARGET:
▪__self: A resposta será exibida na mesma janela/quadro que contém o formulário.
▪blank: A resposta será exibida em uma nova janela ou aba.
▪_parent: A resposta será exibida na janela ou quadro pai do quadro actual.
▪_top: A resposta será exibida no corpo inteiro da janela.
25/02/2024 M. S 7
TAG <input>
Possíveis Valores
25/02/2024 M. S 8
TAG <input>
Possíveis Valores para a opcção Type
25/02/2024 M. S 9
25/02/2024 M. S 10
25/02/2024 M. S 11
<form action = “recebe_dados.php “ method = “post “>
<p>Digite seu e-mail:

<input type="email“ name="email" size="20">
</p>
<p> <input type="submit" value="Enviar!" name="enviar"> </p>
</form>
❑ As informações vão ser perdidas, pois o navegador não sabe o que fazer com elas
❑ Para o tornar útil podemos usar a opção action, informando ao navegador para aonde
enviar a informações para serem processadas.
25/02/2024 M. S 12
Dado código abaixo:
A seguir são mostradas duas situações resultantes da modificação deste código.

Reflicta em grupo sobre os dois resultados e debata sobre:
➢ O que possivelmente aconteceu (em relação ao atributo “method”)?
➢ Em que situações pode se usar cada caso.
25/02/2024 M. S 13
Situação 1
Situação 2
25/02/2024 M. S 14
Divisão em HTML
25/02/2024 M. S 15
Frames
❑ São usados para mostrar mais de um documento HTML em uma janela.
❑ Permite que diferentes arquivos HTML componham a mesma pagina;
❑ Dividem o espaço da janela do browser com colunas e/ou linhas.
Desde a introdução de PHP e CSS essa técnica tem sido cada vez menos
utilizada. […]ocasionar serias barreiras a acessibilidade e assim contrariar um dos
fundamentos dos padrões Web (silva, 2008).
25/02/2024 M. S 16
Frames - estrutura
Em geral uma pagina com frame é constituída com os seguintes elementos:
❑ Frameset: contem as tags que especificam como as paginas aparecerão no

browser.
❑ Frames: páginas normais que aparecerão de acordo com as instruções

contidas no código do frameset.
25/02/2024 M. S 17
Frames
Exemplo
25/02/2024 M. S 18
Divisão em HTML
HTML Div é um dos elementos mais conhecidos do HTML. Até o lançamento do

HTML5, era muito utilizado para dividir todas secções e todos os blocos do
documento. Porém, com a actualização da versão 5 do HTML, começou a dividir
o espaço com as demais tags semânticas
25/02/2024 M. S 19
Divisão em HTML
<div id="header"></div>
<div class="section">
<div class="article">
<div class="figure">
<img…>
</div> class="figcaption">
</div>
</div>
</div>
</div>
<div id="footer"></div>
25/02/2024 M. S 20
Atributos da Div HTML

O Elemento HTML Div costuma ter entre seus principais atributos:
➢ id – Define uma ID;

➢ Name – Define um nome;
➢ class – Define uma classe;
➢ title – Define um título;
➢ height – Define uma altura;
➢ width – Define uma largura.
25/02/2024 M. S 21
Atributos da Div HTML

Porém, com excepção do ID, da class e do title, todos os demais atributos já são
considerados depreciados. Portanto, dessa forma, podemos definir a altura, a
largura e a cor de fundo através do próprio estilo CSS, assim como outras
diversas características.
25/02/2024 M. S 22
<Div>…</div>
25/02/2024 M. S 23
Elementos semânticos em HTML
❑ São aqueles que descrevem claramente seu significado de uma maneira que
seja legível tanto para humanos quanto para máquinas.
25/02/2024 M. S 24
➢ O uso correto desses elementos não apenas melhora a acessibilidade e a
usabilidade do site, mas também pode ajudar no SEO (Search Engine
Optimization) ao permitir que os mecanismos de busca entendam melhor a
estrutura e o significado do conteúdo da página.
25/02/2024 M. S 25

➢ <article> ➢ <main>
➢ <aside> ➢ <mark>
➢ <details> ➢ <nav>
➢ <figcaption> ➢ <section>
➢ <figure> ➢ <summary>
➢ <footer> ➢ <time>
➢ <header> ➢ <date>
➢ Etc
25/02/2024 M. S 26
25/02/2024 M. S 27
25/02/2024 M. S 28

Tema 1 - Aula 04

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

Tema 1 - Aula 04

Enviado por

Direitos autorais:

Formatos disponíveis

Universidade Politécnica

Engenharia Informática e de Telecomunicações

❑ Seleccionar diferentes entradas do usuário.

❑ Aumentar a interactividade fazendo comunicação entre o usuário e o site.

as informações contidas nele

<FORM ACTION ="URL para onde serão enviado os dados"

METHOD= "método HTTP (Verbos HTTP)“ ENCTYPE="formato de codificação“

... corpo do formulário

▪application/x-www-form-urlencoded: O padrão. Todos os caracteres são codificados

▪multipart/form-data: Necessário quando o formulário contém controles de arquivo

▪text/plain: envia os dados sem qualquer codificação.

▪__self: A resposta será exibida na mesma janela/quadro que contém o formulário.

▪blank: A resposta será exibida em uma nova janela ou aba.

▪_parent: A resposta será exibida na janela ou quadro pai do quadro actual.

▪_top: A resposta será exibida no corpo inteiro da janela.

<form action = “recebe_dados.php “ method = “post “>

<p>Digite seu e-mail:

Dado código abaixo:

A seguir são mostradas duas situações resultantes da modificação deste código.

❑ Permite que diferentes arquivos HTML componham a mesma pagina;

❑ Dividem o espaço da janela do browser com colunas e/ou linhas.

❑ Frameset: contem as tags que especificam como as paginas aparecerão no

❑ Frames: páginas normais que aparecerão de acordo com as instruções

HTML Div é um dos elementos mais conhecidos do HTML. Até o lançamento do

Atributos da Div HTML

➢ id – Define uma ID;

Atributos da Div HTML

Elementos semânticos em HTML

Elementos semânticos em HTML

➢ O uso correto desses elementos não apenas melhora a acessibilidade e a

usabilidade do site, mas também pode ajudar no SEO (Search Engine

Optimization) ao permitir que os mecanismos de busca entendam melhor a

estrutura e o significado do conteúdo da página.

Elementos semânticos em HTML

Você também pode gostar