Tema 1 - Aula 05

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
29/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
29/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>
29/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.
29/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.
29/02/2024 M. S 7
TAG <input>
Possíveis Valores
29/02/2024 M. S 8
TAG <input>
Possíveis Valores para a opcção Type
29/02/2024 M. S 9
29/02/2024 M. S 10
29/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.
29/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.
29/02/2024 M. S 13
Situação 1
Situação 2
29/02/2024 M. S 14
Divisão em HTML
29/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).
29/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.
29/02/2024 M. S 17
Frames
Exemplo
29/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
29/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>
29/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.
29/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.
29/02/2024 M. S 22
<Div>…</div>
29/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.
29/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.
29/02/2024 M. S 25

➢ <article> ➢ <main>
➢ <aside> ➢ <mark>
➢ <details> ➢ <nav>
➢ <figcaption> ➢ <section>
➢ <figure> ➢ <summary>
➢ <footer> ➢ <time>
➢ <header> ➢ <date>
➢ Etc
29/02/2024 M. S 26
29/02/2024 M. S 27
29/02/2024 M. S 28
CSS
Cascading Style Sheets
29/02/2024 M. S 29
Historial
As configurações referente a apresentação de elementos em uma página, podiam ser
feitas através de atributos HTML;
❑ As páginas tinham a complexidade de código exponencial!
Nove linguagens diferentes apareceram: – A W3C escolheu definiu apenas duas:

❑ CHSS (Cascated HTML Style Sheet);
❑ SSP (Stream-based Style Sheet Proposal)
A letra “H”foi removida do CHSS devido a sua aplicação em outras tecnologias e não
apenas ao HTML.
29/02/2024 M. S 30
CSS
É uma linguagem de estilos. Define a apresentação de documentos:
❑ HTML;
❑ XHTML;
❑ XML;
❑ Outros
29/02/2024 M. S 31
CSS
Para vincular o arquivo .css no arquivo HTML basta apenas:

<head>
<link rel = “stylesheet” type = “text/css” href = “arquivo.css”>
</head>
29/02/2024 M. S 32
CSS
Sintaxe
Selector {
Propriedade: valor;
}
29/02/2024 M. S 33
CSS : Selector
O selector representa uma estrutura. Essa estrutura é usada como uma
condição para determinar quais elementos de um grupo de elementos serão
formatados. Selectores encadeados e selectores agrupados são a base do CSS.
29/02/2024 M. S 34
CSS : Selector
Selector encadeado
HTML CSS
<div> div p strong a { color: red;
<p><strong> <a href = “#“>….</a> </strong> </p> }
</div>
Este selector formata o link (a), que está dentro de um strong, que está dentro de P e que por
sua vez está dentro de um DIV.
29/02/2024 M. S 35
CSS : Selector
Selector agrupado
HTML
CSS
<div>
p, strong, span{ color:
<p>…</p> red;
strong> …</strong> }
<span>…</span>
</div>
Agrupa-se elementos separados por vírgula para que herdem a mesma formatação.
29/02/2024 M. S 36
CSS : Selector por tag - Type selector

HTML span {
<span> Here's a span with some text. </span>
background-color:
<p> Here's a p with some text. </p>
<span> Here's a span with more text. </span skyblue;
}
Este selector básico escolhe todos os

elementos que correspondem ao nome
fornecido.
29/02/2024 M. S 37
CSS : Selector por Classe- classe selector

Este selector básico escolhe elementos baseados no valor de seu
atributo classe. Sintaxe: .nome-da-classe
<p class="red">This paragraph has red text.</p> .red {

color: #f33;
<p class="yellow-bg">This paragraph has red text and a yellow
}
background.</p> .yellow-bg {
<p class="fancy">This paragraph has red text and "fancy" background: #ffa;
}
styling.</p>
.fancy {
<p>This is just a regular paragraph.</p> font-weight: bold;
text-shadow: 4px 4px 3px #77f;
}
29/02/2024 M. S 38
CSS : Selector por id - idselector
Este selector básico escolhe nós baseados no valor do atributo id. Um Id está
para apenas um elemento no mesmo documento. Sintaxe: # nome-do-id
<div id="identified">This div has a special ID on it!</div> #identified {

background-color:
<div>This is just a regular div.</div>
skyblue;
}
29/02/2024 M. S 39
ISP –EIT2 7ºS/24 div has a special ID on it!</div> <div>This is just a regular div.</div> Programação Web
<div id="identified">This
CSS : Selector universal – General Selector
Este selector básico irá escolher nós baseados no valor de um de seus atributos, ou até
mesmo pelo próprio atributo.
<p class="warning"> * [lang^=en] {

color: green;
<span lang="en-us">A green span</span> in a red paragraph.
}
</p>
*.warning {
<p id="maincontent" lang="en-gb">
color: red;
<span class="warning">A red span</span> in a green paragraph. }
</p> *#maincontent {
border: 1px solid blue;
}
.floating {
float: left}
29/02/2024 M. S 40
CSS : Selector universal – General Selector
Ler mais sobre:

Selectores por atributos – attribute selectors
Selector de irmãos adjacentes Adjacent sibling combinator
Selectores de child combinator
selectores de Descendentes - Descendant combinator
Bibliografia:
https://developer.mozilla.org/en-US/docs/Web/CSS/
29/02/2024 M. S 41
CSS {…}
Uma classe é uma maneira de identificar um grupo de elementos como por
exemplo class="button" já o Id é um identificador único para um elemento.
❑Utilize id quando quiser identificar apenas um elemento no HTML e
utilize class quando quiser se referir a mais de um elemento.
❑Utilize Id quando deseja que as propriedades do CSS sejam direccionadas a apenas um
elemento. Utilize Class quando deseja as mesmas propriedades para uma série de
elementos.
O #id é mais especifico em relação a .class
29/02/2024 M. S 42
<div id="identified">This div has a special ID on it!</div> <div>This is just a regular div.</div>
CSS propriedades e atributos
Bibliogafias
https://www.w3schools.com/cssref/
https://www.tutorialrepublic.com/css-reference/css3-properties.php
29/02/2024 M. S 43
<div id="identified">This div has a special ID on it!</div> <div>This is just a regular div.</div>
CSS Responsivo
29/02/2024 M. S 44
Responsive Web Design - RWD
➢ RWD é usar HTML e CSS para redimensionar, ocultar, reduzir ou ampliar

automaticamente uma página web, para torná-la “bom” em todos os
dispositivos (computadores, tablets,telefones, etc).
➢ Permite que as páginas renderizem bem em uma variedade de dispositivos e
tamanhos de tela.
Fonte: https://www.w3schools.com/html/html_responsive.asp
29/02/2024 M. S 45
Responsive Web Design - RWD

Responsive Vs Adaptive
Responsive Design Adaptive Design

❑ Adapta a renderização de uma única ❑ Fornece várias versões completamente
versão de página. diferentes de uma mesma página.
❑ Mesmo arquivo básico. O ❑ Há um script que verifica o tamanho da
CSS controlará o layout e o renderizará tela, e depois acede ao modelo
de forma diferente com base no projectado para aquele dispositivo
tamanho da tela
29/02/2024 M. S 46
RWD
Configurando a janela de visualização
Para criar um site responsivo, adicione a seguinte <meta> tag a todas as suas páginas da
web:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Isso definirá a janela de visualização de sua página, que fornecerá ao navegador instruções
sobre como controlar as dimensões e o dimensionamento da página
29/02/2024 M. S 47
RWD
Media Queries
➢ É um recurso do CSS3 que faz com que uma página da web adapte o seu
layout para tamanhos de tela e tipos de mídia diferentes
➢ Permite executar uma série de testes (e.g. se a tela do usuário é maior que
uma certa largura, ou uma certa resolução) e aplicar um CSS selectivamente
para estilizar a página de acordo com as necessidades do usuário.
29/02/2024 M. S 48
RWD
Media Queries
Tipos de mídia
Se não aplicarmos um tipo de mídia, a regra de @media seleccionará todos os tipos de
dispositivo por padrão. Do contrário, os tipos de mídia vêm logo após a regra de @media.
Há muitos tipos de dispositivos, mas podemos agrupá-los em 4 categorias:
all — para todos os tipos de mídia
print — para impressoras
screen — para telas de computador, tablets e smartphones
speech — para leitores de tela que “leem” a página em voz alt
29/02/2024 M. S 49
RWD
Media Queries
29/02/2024 M. S 50
ISP –EIT2 7ºS/24 divdivhashasa special Programação Web
id="identified">This a special IDit!</div>
ID on on it!</div> <div>This
<div>This is justisajust a regular
regular div.</div>
div.</div>
RWD : Media Queries: Breakpoint

Um breakpoint é uma chave para determinar o momento de mudar o layout e adaptá-lo às
novas regras dentro das media queries.
@media only screen and (max-width: 480px) {

.text {
font-size: 16px;
}
}
❑Aqui, o breakpoint é 480px. A media query sabe quando definir ou sobrescrever a nova
classe. Basicamente, se a largura de um dispositivo for inferior a 480px, a classe text será
aplicada. Do contrário, isso não acontece.
29/02/2024 M. S 51
regular div.</div>
div.</div>
RWD
Repare que os elementos aside e content antes dispostos horizontalmente, agora estão dispostos
verticalmente e seus background-color também mudaram.
@media only screen and

(max-width:…){…
}
29/02/2024 M. S 52
regular div.</div>
div.</div>
RWD
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */

/* Large devices (laptops/desktops, 992px and up) */

/* Extra large devices (large laptops and desktops, 1200px and up) */
29/02/2024 M. S 53
regular div.</div>
div.</div>
RWD
Encontramos também, a @media screen. Esta é uma consulta de mídia que
aplica estilos a qualquer dispositivo com tela.
29/02/2024 M. S 54

Tema 1 - Aula 05

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 05

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

Nove linguagens diferentes apareceram: – A W3C escolheu definiu apenas duas:

Para vincular o arquivo .css no arquivo HTML basta apenas:

CSS : Selector por tag - Type selector

Este selector básico escolhe todos os

CSS : Selector por Classe- classe selector

<p class="red">This paragraph has red text.</p> .red {

CSS : Selector por id - idselector

<div id="identified">This div has a special ID on it!</div> #identified {

CSS : Selector universal – General Selector

<p class="warning"> * [lang^=en] {

CSS : Selector universal – General Selector

Ler mais sobre:

CSS propriedades e atributos

Responsive Web Design - RWD

➢ RWD é usar HTML e CSS para redimensionar, ocultar, reduzir ou ampliar

Responsive Web Design - RWD

Responsive Design Adaptive Design

RWD : Media Queries: Breakpoint

@media only screen and (max-width: 480px) {

@media only screen and

/* Medium devices (landscape tablets, 768px and up) */

/* Large devices (laptops/desktops, 992px and up) */

Você também pode gostar