IPW_Teste(s_Extras)

▪ HTML (HyperText Markup Language) é uma linguagem
de marcação
▪ Desenvolvida por Tim Berners-Lee no início dos anos

90, enquanto trabalhava no CERN
▪ 1993 - surge a primeira norma, baseada em SGML

(Standard Generalized Markup Language)
▪ 1999 - versão HTML 4.01
▪ 2006 - XHTML (HTML baseado no XML)
▪ 2008 - HTML 5
Introdução à Programação Web - ESTSetúbal/IPS 2

▪ Pretendem anotar textos para criar secções/porções
▪ Possibilitam a indicação de uma estrutura e/ou semântica

associada (dependendo da linguagem)
▪ Podem servir como base de formatação/apresentação
Exemplos:
HTML, XML, XHTML, CSS, SVG, MathML, VRML, etc.

▪ O texto é envolvido em etiquetas (tags) que permitem criar
elementos:
Atributo
<a href=" https://www.slbenfica.pt/pt">SL Benfica</a>
Etiqueta Abertura Etiqueta

▪ Exemplos de etiquetas: <p…> </p> ou <br /> Fecho
▪ Atributos: nome="valor"
▪ Elemento (é tudo):
<a href=" https://www.slbenfica.pt/pt">SL
Benfica</a>
▪ Conteúdo do elemento (entre as etiquetas): SL Benfica
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="utf-8" />
<title>Título da Página</title>
</head>
<body>
Conteúdo da Página
</body>
</html>

O que é o UTF-8: http://en.wikipedia.org/wiki/UTF-8
▪ Permite colocar o título que aparece na barra (<title>)
▪ Serve para colocar etiquetas meta, de caracterização do

documento
▪ “Executada” antes do corpo da página
▪ Serve para definir estilos (CSS)
▪ Serve para definir funções JavaScript
▪ Serve para colocar referências a outros documentos

▪ Com <title>...</title> conseguimos indicar o título
para a página que aparecerá na barra da janela
▪ É também possível colocar uma imagem (“favicon”

abreviatura de “favorite icon”) que aparece ao lado do
título:
▪ Esta imagem deverá ter:
▪ 16x16 pixéis ou 32x32 pixéis
▪ Usando cores de 8-bits ou 24-bits
▪ Gravado num dos formatos PNG, GIF ou ICO

▪ Esta funcionalidade surge no Internet Explorer 5, que tentava procurar um
ficheiro na raiz do site com o nome favicon.ico (o format ICO é originário da
Microsoft).
▪ Caso existisse seria carregado no primeiro acesso ao site.
▪ O HTML4.01 normaliza esta utilização através do uso da etiqueta link e

atributos rel, type e href:
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">
▪ Os atributos representam respetivamente:

▪ rel: relação do ficheiro “ligado” com o atual
▪ type: tipo do conteúdo do ficheiro “ligado”
▪ href: localização do ficheiro (Hypertext REFerence)
▪ Por razões históricas é comum encontrar:

<link rel="shortcut icon"
type="image/x-icon"
href="favicon.ico" />
▪ Permite a caracterização do documento (ajudam os motores de
busca – SEO (Search Engine Optimization):
http://www.w3.org/TR/html4/appendix/notes.html#recs).
▪ Na forma mais simples usa os atributos name e content:

<meta name="description" content=“SLB atacado" />
<meta name="keywords"
content=“FCP,Shakthar,Moreirense" />
<meta name="author" content=“theyAll" />

▪ Atributo name está normalizada para usar:
▪ application-name: identificação da aplicação
que contém a página
▪ author: identificação do autor
▪ description: descrição da página
▪ generator: descrição do software que gerou a
página (ex.: "Microsoft Word 15")
▪ keywords: lista de palavras chaves (separadas por
,) que descrevem o conteúdo da página
▪ Outras definidas em:
http://wiki.whatwg.org/wiki/MetaExtensions

▪ Os sites são acedidos por programas automáticos (Web
crawlers) que tentam recolher informação sobre eles para
alimentarem os motores de busca (ex.: Google).
▪ Podemos dar a indicação de que uma página não pode ser

catalogada, nem os seus links seguidos, através de:
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
podemos usar as diversas combinações com INDEX e FOLLOW

(entre outras).
▪ Alternativamente, podemos colocar um ficheiro

/robots.txt na raiz do site com indicação do que será
vedado ao programa de recolha de informação (o robot).
▪ Neste ficheiro é possível indicar a quem se veda (User-

agent:) e o que se veda (Disallow:)
▪ Excluir todo o site:
User-agent: *
Disallow: /
▪ Dar acesso a todo o site (não há allow:):

User-agent: *
Disallow:
▪ Excluir parte do site:

User-agent: *
Disallow: /privado/
Disallow: /segredo/
▪ Excluir a um tipo de robot (http://www.robotstxt.org/db.html):

User-agent: Googlebot
Disallow: /
▪ Substituindo o atributo name por http-equiv é indicada
informação que será utilizada, nos cabeçalhos do protocolo
HTTP (usado na transmissão da informação das páginas).
▪ A indicação do formato de codificação dos caracteres que

constituem a página é feita através de:
<meta http-equiv="content-type"
content="text/html;charset=UTF-8" />
▪ Será utilizado o seguinte cabeçalho HTTP:

Content-Type: text/html;charset=UTF-8
▪ No HTML 5 basta ser:

▪ Na etiqueta body (seguinte do head) é colocado todo o conteúdo da
página, que será apresentado ao utilizador.
▪ Os Browsers eliminam espaços desnecessários:
<!DOCTYPE html>
<html lang="pt">
<head>
<title>Exemplo</title>
</head>
<body>
Conteúdo da
Página
</body>
</html>

▪ Como apresentar numa página o texto:
As etiquetas em html são colocadas entre < e

>, por exemplo "<p>parágrafo</p>"
▪ Os caracteres especiais <, >, " não podem ser colocados

diretamente pois são interpretados como etiquetas.
▪ Em vez de se escreverem os caracteres coloca-se uma
entidade
▪ Estas são da forma:
&nome;
&#código;
Carácte
Descrição Entidade-Nome Entidade-Código
r
< Menor que < < *
> Maior que > > *
& E-Comercial & & *
" Aspas " " *
' Apóstrofo ' ' *,§
espaço não separável
¢ Cent ¢ ¢
£ Libra £ £
¥ Yen ¥ ¥
€ Euro € €
§ Seção § §
© Copyright © ©
® Marca Registada ® ®
™ Trademark ™ ™
* - Entidades
Introdução àpré-definidas
Programação Web no XML, § - O Apóstrofo não está definido no HTML, apenas surge no
- ESTSetúbal/IPS 26
XHTML
▪ O texto:

>, por exemplo, "<p>parágrafo</p>"
▪ Ficará:
>, por exemplo,
"<p>parágrafo</p>"

Mantem os espaçamentos (não precisa de ) e quebras de linha mas
também muda o tipo de letra para mono-espaçada.
...
<body>
Fatorial em C:
<pre>
int fatorial (int x)
int resultado = 1;
for (int i = 1; i<x; i++)
resultado *= i;
return resultado;
</pre>
</body>
</html>

▪ Ignorados pelo Browser
▪ Indicações aos programadores
▪ Entre 


▪ Etiquetas br e hr:
<!DOCTYPE html>
<html lang="pt">
<head>
<title>exemplo</title>
</head>
<body>
Uma linha<br/>Outra linha<br/><hr/>Frase no meio de
linhas<hr/>
</body>
</html>
▪ Etiqueta p:
<p>Isto é um exemplo de um parágrafo</p>
<p>Outro parágrafo</p>

▪ Etiquetas h*:
<h1>Texto Nível 1</h1>
...

▪ Não ordenadas:
<ul>
<li>cão</li>
<li>gato</li>
<li>peixe</li>
<li>tartaruga</li>
</ul>

▪ Ordenadas:
<ol>
<li>cão</li>
<li>gato</li>
<li>peixe</li>
<li>tartaruga</li>
</ol>

▪ Definições:
<dl>
<dt>C</dt><dd>Imperativa</dd>
<dt>Java</dt><dd>Objetos</dd>
<dt>LISP</dt><dd>Funcional</dd>
<dt>Prolog</dt><dd>Lógica</dd>
</dl>

▪ Etiqueta img:
<img src="logotipo.jpg" alt="Logotipo IPS"/>
▪ Dimensões:
<img src="logotipo.jpg" alt="Logotipo IPS"
width="180" height="140"/>
▪ Externas:
<a href="http://www.ips.pt/">Página IPS</a>
<a href="http://www.ips.pt/"><img src="logotipo.jpg"
alt="Logotipo IPS" /></a>

▪ Atributo target:
<a href="http://www.ips.pt/" target="_blank">
Página IPS
</a>
Valor Descrição
_blank Abre numa nova janela ou tab
_self Abre no mesmo frame onde foi “clicado” (omissão)
_parent Abre no frame pai
_top Abre na janela principal
nome-frame Abre no frame com nome

▪ Internas (antes do HTML 5, em vez do atributo id,
utilizava-se name):
<a id="bibliografia">Referências
Bibliograficas</a>
▪ Acedido por #:
<a href="#bibliografia">As Referências</a>
ou
<a href="outra.htm#bibliografia">
Referências da outra página
</a>
▪ O Browser posiciona-se no elemento

que tenha o id indicado (a etiqueta a
serve apenas para se poder introduzir
um id).
▪ Linguagens de marcação • Texto Pré-formatado (<pre>)
▪ Etiquetas e atributos • Comentários ()
▪ DOCTYPE • Quebras de linha (br e hr)
▪ head: title, favicon e
meta • Parágrafos (p)
▪ robots.txt • Títulos (h1-6)
▪ body • Listas (ul, ol, li, dl, dt,
dd)
▪ Entidades (&…;)
• Imagens (img)
• Ligações (a)

▪ Linguagens de marcação • Texto Pré-formatado (<pre>)
▪ Etiquetas e atributos • Comentários ()
▪ Estrutura de uma página • Quebras de linha (br e hr)
(HTML 4, XHTML, HTML
5) • Parágrafos (p)
▪ DOCTYPE • Títulos (h1-6)
▪ head: title, favicon e
meta • Listas (ul, ol, li, dl, dt,
dd)
▪ robots.txt
• Imagens (img)
▪ body
▪ Entidades (&…;)
• Ligações (a)

▪ Para se estruturar adequadamente um documento
HTML será necessário poder-se agrupar partes.
▪ O elemento div apenas agrupa elementos, não
tendo nenhuma representação gráfica.
...
<body>
<div>
<p>Os dois primeiros parágrafos</p>
<p>estão logicamente agrupados dentro de um div</p>
</div>
<p>mas não tem representação visual</p>
</body>
</html>
A organização em capítulos, secções, subsecções pode ser feita recorrendo
aos div em conjunto com os h*(era usual antes do HTML 5):
...
<div>
<h1>Capítulo Principal</h1>
<p>Texto do capítulo inicial...</p>
<div>
<h2>Primeiro subcapítulo</h2>
<p>Texto do primeiro subcapitulo...</p>
<p>Mais texto do primeiro subcapitulo...</p>
</div>
<div>
<h2>Segundo subcapítulo</h2>
<p>Texto do segundo subcapitulo...</p>
<p>Mais texto do segundo subcapitulo...</p>
</div>
</div>
5
... Introdução à Programação Web - ESTSetúbal/IPS
▪ Com o HTML 5 deu-se a introdução de novas etiquetas
▪ que permitem definir, de forma mais correta, a estrutura da
página;
▪ sem estar exclusivamente dependente do div
▪ Vantagens:
▪ Aumenta o nível semântico de caracterização da página;
▪ Facilita o trabalho dos Browsers para deficientes e/ou
sistemas automáticos de deteção de páginas (ex.: motores de
pesquisa);
▪ Facilita a introdução de documentos externos no
documento principal (mais modular);
▪ Facilita a separação/identificação de aspetos acessórios
(ex.: logotipos, menus de navegação, etc.) que não são
“informação”.

▪ article – porção do documento que pode ser vista de forma
independente
▪ section – uma parte do documento (usar em conjunto com h*)

<section>
<h1>Capítulo Principal</h1>
<p>Texto do capítulo inicial...</p>
<section>
<h2>Primeiro subcapítulo</h2>
<p>Texto do primeiro subcapitulo...</p>
<p>Mais texto do primeiro subcapitulo...</p>
</section>
<section>
<h2>Segundo subcapítulo</h2>
<p>Texto do segundo subcapitulo...</p>
<p>Mais texto do segundo subcapitulo...</p>
</section>
</section>

▪ nav – serve para indicar links de navegação (só deve
haver um por página que contém a navegação principal)
▪ aside – serve para indicar anotações, publicidade ou

outros assuntos desconexos
▪ header – serve para indicar cabeçalho da secção

(normalmente com logotipos)
▪ footer – serve para indicar rodapé da secção

(normalmente com copyright)
▪ Atenção! header e footer não aparecem automaticamente no
topo e base da página: são para estruturação e não formatação

• Usando apenas etiquetas div

• Usando as etiquetas “semânticas”

- Outro exemplo de estrutura

HTML 5 – Etiquetas de estruturação
- Exemplo de análise de mockup para estruturar

Quando se colocam figuras que são referenciadas no documento (ex:
esquemas, ilustrações, etc.)
as img devem ser colocadas em conjunto com figure e figcaption,
criando uma “entidade única”:
...
<h1>Cálculo das áreas</h1>
<p> e o quase pelado do SCP... </p>
<figure>
<img src="/images/areas.png“ alt="Cálculo das áreas" />
<figcaption>
Fig. 1: Fórmulas de Cálculo das Áreas
</figcaption>
</figure>
<p>treta... treta...</p>
...

Fonte: http://html5doctor.com/downloads/h5d-sectioning-flowchart.png

▪ O uso da etiqueta address permite colocar informação sobre
o contacto do autor:
▪ Se colocado dentro do body ou article representa o contacto do
autor dessa página/artigo;
▪ Se colocado no footer será o contacto do autor da secção do
footer.
▪ Pode/deve ter links para os emails dos autores, ou websites

pessoais, etc.
▪ Deve apenas ser utilizado para identificar os contactos dos
autores/donos do documento
▪ e não qualquer tipo de contacto.
▪ Normalmente, os browsers apresentam-no em itálico

...
<address>
Escrito por:<br />
WeAreTheOnes<br />
Gabinetes Importantes<br />
Escola Superior de Tecnologia de Setúbal<br />
Instituto Politécnico de Setúbal<br />
Campus do IPS, Estefanilha<br />
2914-761 Setúbal<br />
e-mail:
<a href="mailto:yes_we_can@gmail.com">
yes_we_can@gmail.com
</a>
</address>
...

▪ Agrupar elementos – div
▪ Etiquetas de estruturação (article, section, nav, aside,
header, footer)
▪ Figuras como informação (figure e figcaption)
▪ Identificação de autores – address

[PI-LINF]
▪ Agrupar elementos – div
▪ Etiquetas de estruturação
(article, section, nav, aside, header, footer)
▪ Figuras como informação (figure e figcaption)
▪ Identificação de autores – address

▪ Possibilidade de indicar o significado de abreviaturas através
de abbr em conjunto com o atributo title:
<p>O <abbr title="HyperText Markup Language">

HTML</abbr> serve para estruturar a informação em
páginas web</p>
▪ A descrição fica disponível quando o rato passa “por cima”.
▪ Nota: Não usar o “equivalente” acronym (IE) que deixou de ser

suportado em HTML 5

▪ É possível indicar alterações a um documento facilitando a
apresentação de diferentes versões:
▪ similar ao sistema “Track Changes” do word.
▪ A etiqueta ins representa texto que foi adicionado

(normalmente representado a sublinhado)
▪ A etiqueta del representa texto que foi removido
(normalmente representado com texto cortado)
▪ Podem conter os atributos:
▪ cite: que será um url para a explicação da alteração
▪ datetime: indica o instante da alteração (só a data, [aaaa-]mm-dd,
incluindo ou não o tempo, hh:mm:[ss])

<p>Estava a escrever um texto
<del>que ficou errado</del>
<ins> e foi substituído por um correto</ins>
</p>

Utilização das etiquetas <table>, <tr> e <td>
<table>
<tr>
<td>Península de Setúbal</td>
<td>Homens</td>
<td>Mulheres</td>
<td>Total</td>
</tr>
<tr>
<td>Alcochete</td>
<td>8496</td>
<td>9073</td>
<td>17569</td>
</tr>
...
</table>

Etiquetas <thead>, <th>, <tbody>, <tfoot>:
<table>
<thead>
<tr>
<th>Península de Setúbal</th> <th>Homens</th>
<th>Mulheres</th> <th>Total</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Total</td><td>373595</td><td>405778</td><td>779373</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Alcochete</td><td>8496</td><td>9073</td><td>17569</td>
</tr>
...
</tbody>
</table>

▪ Etiqueta <caption>:
<table>
<caption>
População residente por Local e Sexo
</caption>
<thead>
...
</thead>
<tfoot>
...
</tfoot>
<tbody>
...
</tbody>
</table>

▪ Atributos colspan, rowspan de <td> ou <th>:
<table border="1">
<tr><th>Aluno</th><th>Avaliação</th><th>Nota</th></tr>
<tr><td rowspan="2">Maria</td><td>1º teste</td><td>13,2</td></tr>
<tr> <td>2º teste</td><td>12,3</td></tr>
<tr><td rowspan="2">Manuel</td><td>1º teste</td><td>10,1</td></tr>
<tr> <td>2º teste</td><td>12,4</td></tr>
<tr><td colspan="2">Média</td> <td>12,0</td></tr>

</table>

▪ As capacidades de posicionamento relativo das linhas e
colunas nas tabelas
▪ e a possibilidade de colocar qualquer conteúdo dentro de
uma célula
▪ levaram muitos programadores a utilizá-las como
mecanismo para definição da estrutura da página
Mas esta abordagem deve ser evitada!!!
▪ Visualmente apelativa nos Browsers gráficos.
▪ Mas muito confusa nos “Screen Readers”, “Speech Output
Browsers”, “Braille Browsers”, “Text Browsers”, etc.
Para definição de layout devem ser utilizados os

mecanismos das CSS
▪ As etiquetas que definem formatação devem ser evitadas,
usadas o menos possível
➢ A marcação deve servir para definir estrutura!
▪ Etiquetas para formatação:

▪ <font>: definir o tipo de letra (fonte) do texto
▪ <b>: texto a bold
▪ <strong>: texto realçado
▪ <i>: texto em itálico
▪ <em>: texto enfatizado
▪ <u>: texto sublinhado
▪ <sub>: texto em subscript
▪ <sup>: texto em superscript
▪ <big>: texto maior
▪ <small>: texto menor

• Um exemplo de uso:
<font face="Verdana, serif" size="4" color="red">Isto</font>
é <b>o</b> <strong>exemplo</strong> de <i>um</i>
<em>texto</em> <u>com</u> di<sub>vers</sub>as
e<sup>tique</sup>tas <big>de</big> <small>formatação</small>

▪ Utilizando o atributo style
▪ Sequência de pares propriedade:valor, separados por ;
(ponto e virgula)
▪ Vários valores separados por , (virgula)
▪ Existem propriedades para:
▪ Cores
▪ Dimensões
▪ Bordos
▪ Posicionamento
▪ Alinhamentos
▪ etc.

<p style="background-color: #FF0;
color: red;
font-size: 24pt;">
Isto é um texto a vermelho, com fundo amarelo e
com tamanho de 24 points</p>

▪ Siglas – abbr
▪ Alterações ao documento – del, ins
▪ Tabelas (table, tr, td, th, thead, tbody, tfoot, caption,

colgroup, col, colspan, rowspan);
▪ Elementos para formatação
▪ Utilização de style (separar formatação da marcação)

[IPW]
Introdução às CSS
CSS - Cascade Style Sheets
norma: http://www.w3.org/Style/CSS/
• Um conjunto de regras (CSS Rules)

• Cada regra é constituída por um
Introdução à Programação Web - ESTSetúbal/IPS

 seletor e
 uma ou mais declarações (par propriedade: valor)
separadas por ; (ponto e virgula)
• O seletor é separado das declarações por um espaço

• As declarações são colocadas dentro de chavetas
body {background-color: silver; font-size: 24pt;}
seletor declaração declaração
nota: é possível colocar comentários /* ... */ 2

Definição de Estilos
• 4 formas de incluir:
 Através do atributo style (inline styles)

 Internamente na própria página (no head):
<style type="text/css">
...
</style>
 Externamente à página (importando o ficheiro):

<link href="estilos.css"
rel="stylesheet"
type="text/css" />
 É possível incluir outro ficheiro, colocando no início:
@import "OutroFicheiro.css";
3
O atributo style
• Não usar etiquetas de formatação (<b>, <i>, <u>,
etc.);

• Colocar no atributo style uma sequência de pares
propriedade: valor, separados por ; (ponto e
virgula)
Desvantagem:
repetição da formatação para diversos elementos
4
Exemplo de uso: Style em
...
<table>
<tr style="background-color: blue;color: white;">

<th>Ano</th><th>Custo</th><th>Venda</th><th>Lucro</th></tr>
<tr>
<td>2008</td><td>800</td><td>950</td><td>150</td></tr>
<tr style="background-color: silver;">
<tr>
<tr style="background-color: silver;">
</table>
5
<table>
Exemplo de uso: Style em

6
Eliminar a repetição do style
• É possível através da criação de estilos
• A solução passa por associar aos valores definidos num

style um nome e utilizar esse nome repetidamente, em
oposição à repetição de todo o atributo style
• Na realidade, a informação de formatação pode ficar
associada a algo mais do que simples nomes
• Os diversos estilos criados devem ser colocados à
“disposição” da página:
 na própria;
 num ficheiro à parte
 importado pela página (permite a partilha por diversas páginas)
7
Definição e utilização dos estilos
<!DOCTYPE html>
<html lang="pt">
<head>

<title>Style Body</title>
body
{
background-color: silver;
font-size: 24pt;
}
</style>
</head>
<body>
Texto de exemplo
</body>
</html> 8
Ordem nos estilos do
programador
•Quando há regras repetidas é utilizada a precedência pelo mais próximo:
...
<head>
...

<link href="estilos.css" rel="stylesheet"
type="text/css" /> 3
... 2
</style>
</head>
<body>
...
<p style="..."> ... </p>
... 1
</body>
</html>
9
O porquê de “cascade”
• Estilos definidos pelo

programador

• Estilos do utilizador
• Estilos, por omissão, do

Browser
10
Estilos do utilizador
• O utilizador pode definir uma folha de estilos que se
sobreporá aos estilo por omissão do Browser
(acessibilidade):

 No Internet Explorer – Menu “Tools”  “Internet Options” 
“Accessibility” do tab “General”  selecionar a “check box” “Format
documents using my style sheet”  através do botão “Browse”,
selecionar o ficheiro com os estilos. Aceitar com “Ok” até sair e
finalmente reiniciar o Browser.
 No Safari – Menu “Edit”  “Preferences”  tab “Advanced” 
escolher opção “Other...” na DropDown list “Style Sheet” e
selecionar o ficheiro de estilos. Reiniciar o Browser para os novos
estilos fazerem efeito
 No Firefox – Renomear o ficheiro de estilos para “userContent.css” e
colocá-lo dentro da pasta do nosso profile (normalmente dentro da
pasta “AppData”)
 Etc.
11
Seletores
• Os seletores indicam (através de emparelhamento) a
aplicabilidade da regra.

• Diferentes possibilidades:
 Seletores de tipo (etiqueta HTML)
 Seletor universal (*)
 Seletores de classe (emparelham com o atributo class)
 Seletores de ID (emparelham com o atributo id)
 Seletores de atributo (emparelham com a existência de um
determinado atributo, eventualmente com um valor concreto)
 Seletores de pseudo-classe
 Seletores de pseudo-elementos
 Seletores descendentes e adjacentes
Fonte: http://www.w3.org/TR/css3-selectors/ 12
Seletores de tipo e universal
• No seletor de tipo usa-se o nome da etiqueta HTML
• A regra será aplicada a todos os elementos que possuam

essa etiqueta:
h1 {color: red;
font-weight: bold;
font-style: italic;}
p {font-size: 12pt; line-height: 1.5em;}
• O seletor Universal (*) emparelha com qualquer etiqueta

(útil para utilizar em seletores dependentes)
13
Seletores de classe
• A ideia original de associar um nome a um estilo
• No seletor o nome da classe é antecedida de um ponto (.)

• O nome da classe depende das maiúsculas/minúsculas
• A regra é aplicada a todos os elementos que tenham o
atributo class igual ao nome que está no seletor
• No atributo class podem-se colocar vários valores
separados por espaços,
 havendo emparelhamento com todos
 usa a ordem com que são definidos no style
• Podem ser usados em simultâneo com seletores de tipo:
p.importante (apenas nos parágrafos com atributo
class com o valor importante)
14
Exemplo de seletores de classe
...

.citacao {font-style: italic;}
.importante {color: red;}
</style>
...
<p class="importante">Isto é um texto importante</p>
<p class="citacao">Isto é uma citação</p>
<p class="citacao importante">Isto é uma citação

importante</p>
<div class=“importante”> raios… </div>
...
15
Seletor de ID
• O atributo id permite identificar univocamente cada
elemento do HTML (será muito útil no JavaScript)

• O identificador depende das maiúsculas/minúsculas
• No seletor de ID o identificador é antecedido de #
• Podem ser usados em simultâneo com seletores de
tipo: p#importante (apenas no parágrafo que tem
o atributo id="importante").
 No entanto, como o id é único, pode tornar-se desnecessário
a colocação da etiqueta (usa-se para aumentar a legibilidade),
 exceto se for para distinguir usos do id entre páginas distintas
16
Exemplo de seletores de ID
...
#segundo

{
color: red;
.citacao {font-style: italic;}
.importante {color: blue;}
</style>
...
<p>Isto é um texto</p>
<p id="segundo“ class=“importante”>Outro texto</p>
<p>Mais um texto</p> 17
Seletores de atributo
• Os seletores de atributo são colocados entre [ ]
• Podem ser apenas incluído o atributo: exemplo → [target]

• Podemos fazer depender do valor do atributo:
Valor deve ser Exemplo
= “igual a” [src="estrela.gif"]
~= “igual a” ou “palavra separada por espaços” [font-family~="Arial"]
|= “igual a” ou “palavra seguida de -” [lang|="en"]
^= “começar por” [class^="logotipo"]
$= “terminar em” [class$="temporario"]
*= “contém” [class*="po"]
• Muito útil se usado em conjunto com seletor tipo. Exemplo, indicar

todos os botões: input[type="button"]
18
Seletores de pseudo-classe
• Associados às ligações (etiqueta a):
 :link – ligação normal
 :visited – ligação visitada

 :focus – ligação quando está pronta a ser selecionada (quando
se usa a tecla tab para navegar pelos itens. Não funciona no IE)
 :hover – ligação quando o rato passa em cima (pode ser usado
sem ser em ligações)
 :active – ligação quando é selecionada
• Ao serem utilizados com ligações (etiqueta a), devemos ter
atenção à ordem com que são colocadas as regras: da mais geral
para a mais específica (como está acima). Para não se perder o
efeito pela precedência/proximidade
 :target – Elemento que está associado à referenciação como
ligação interna (no url com #)
19
Uso de :target destacar a seleção
<!DOCTYPE html>
<html lang="pt">
<head>

<title>Target Pseudo Seletor</title>
:target {
color: #F00;
background-color: #FF0;
font-weight: bold;
}
</style>
</head>
<body>
<p id="primeiro">Lorem ipsum … quod.</p>
<p id="segundo">Lorem ipsum … voluptatem.</p>
<p id="terceiro">Lorem ipsum … repellendus!</p>
</body>
</html> 20
Uso de :target destacar a seleção

21
Seletores de pseudo-classe I/II
• Representam elementos na estrutura do documento:
:first-child – primeiro descendente

:last-child – último descendente
:nth-child(n) – n-ésimo descendente (n – formula para indicar

os descendentes: 2n, even, 2n+1, odd, 3).
Exemplos: tr:nth-child(odd) ou
tr:nth-child(even)
:nth-last-child(n) – equivalente a nth-child(n) mas a

contar do fim
:only-child – quando é o único descendente

22
Seletores de pseudo-classe II/II
• Representam elementos na estrutura do documento:
:nth-of-type(n) – equivalente a nth-child(n) mas apenas
contabiliza os elementos do mesmo tipo (etiqueta).

Ex.: p:nth-of-type(3) é o 3º parágrafo
:nth-last-of-type(n) – equivalente a nth-of-type(n)

mas a contar do fim
:first-of-type – primeiro descendente do tipo (etiqueta)

:last-of-type – último descendente do tipo (etiqueta)
:only-of-type – único descendente do tipo (etiqueta)
:empty – sem descendentes (etiqueta)
etc.
23
Seletores de pseudo-elementos
• Representam partes de elementos:
 ::first-letter – primeira letra
 ::first-line – primeira linha

 ::selection – texto selecionado (nem todas as
propriedades são válidas)
 ::before – colocar antes (propriedade content)
 ::after – colocar depois (propriedade content)
• Também podem ser usadas apenas com um :

(como nas pseudo-classes) embora a norma
aponte para o uso de ::.
24
Seletores de pseudo-elementos
• A propriedade content (usada em ::before e
::after) pode ser:
 String: "Nota: "

 Conteúdo de um url: url("../images/bullet.gif")
 Valor de um atributo: attr(href)
 Contador: counter(var)
(inicializar com counter-reset: var e incrementar com counter-
increment: var)
 etc.
• Em conjunto com a propriedade content, no ::before

ou ::after, pode-se indicar propriedades para
formatação: color, margin, display, etc.
25
Seletor ::selection
<!DOCTYPE html>
<html lang="pt">
<head>

<title>Selection</title>
::selection {
color: #F00;
background-color: #FF0;
text-shadow: 1px 1px 2px black;
/* h-shadow v-shadow blur-radius color */
}
</style>
</head>
<body>
Lorem ipsum … ipsam!
</body>
26
</html>
Seletor ::selection

27
Composição de seletores
• Seletores descendentes são separados por espaço:
div p – todos os p que estão “dentro” de um div
• Seletores filhos através do uso de >:

div > p – todos os p que estão “logo dentro” de div
• Seletores adjacentes através do uso de ~:

div ~ p – todos os p que estão colocados depois de um div
• Seletores imediatamente adjacentes através do uso de +:

div + p – todos os p que estão colocados “imediatamente” depois de um div
• Para não repetir regras é possível agrupar os seletores, separando-os

por vírgulas:
div,p
{
color: red;
}
– os div e p ficam com cor vermelha 28
Aplicabilidade é função da
especificidade I/II
• Cada seletor tem uma especificidade definida por 4
critérios:

A. Estar definido no atributo style em oposição a um seletor
“real”
B. Número de atributos id do seletor
C. Número de outros atributos (ex.: [lang], [rel], [href]) e

pseudo-classes (ex.: :hover, :visited, :first-child)
no seletor (seletores de classe, p.importante – atributo
class, são englobados neste item)
D. Número de elementos (ex.: a, li, p) e pseudo-elementos (ex.:

::before, ::after) no seletor
29
Aplicabilidade é função da
especificidade II/II
• A especificidade do seletor é classificada, e comparada,

através do resultado dos diferentes critérios A, B, C, D.
• Uso de !important toma precedência sobre tudo
30
Cálculo da especificidade
p, div {color: #300; font-size: 1.2em;
line-height: 1.6em; padding: 10px;}
/* A:0, B:0, C:0, D:2 = 0,0,0,2 */

p.noticias {color: #0C0;}
/* A:0, B:0, C:1, D:1 = 0,0,1,1 */
.noticias {color: #0FF;}
/* A:0, B:0, C:1, D:0 = 0,0,1,0 */
p#footer {color: #FFF;}
/* A:0, B:1, C:0, D:1 = 0,1,0,1 */
resultado:
 O parágrafo (p) com id="footer", mesmo que tenha class="noticias",
terá cor branca (#FFF)
 Os parágrafos com class="noticias" terão cor verde (#0C0)
 Todos os outros parágrafos terão cor vermelho escuro (#300)
31
Conclusões - resumo
• Repetição com a utilização exclusiva de style
• Criação de estilos: inline (atributo style), internos (etiqueta style)
e externos (etiqueta link)

• CSS: conjunto de regras com seletor e declarações
• Precedência pelo mais próximo
• Folhas de estilos alternativos
• Diversos seletores (tipo, classe, ID, atributo, etc.) e sua composição
• Cálculo da Especificidade
32
[IPW]
Unidades,
propriedades,
block/inline
Unidades das dimensões
• Podemos indicar dimensões em diferentes unidades.
• Função do “mundo real” (boas para impressão):

 Quartos-Milímetros: q; (1/4 mm)
 Milímetros: mm;
 Centímetros: cm;
 Polegadas: in; (inches: 2,54 cm)
• Tipográficas (fontes e impressão):

 Point: pt; (1/72 da polegada)
 Picas: pc; (12 points = 1/6 da polegada)
• “Informáticas”:
 Pixels: px; (depende da resolução, impressos devem ser 96dpi)
2
Unidades das dimensões
• Relativas:
 Percentagem: %;

 EMs: em; (tamanho da fonte em relação ao “pai”)
Fontes
 REMs: rem; (tamanho da fonte em relação ao

“root”/body – por omissão são 16px)
 EXes: ex; (altura do x minúsculo, ≈ altura das
minúsculas)
 Zeros: ch; (largura do 0 – zero)
Viewport
 Largura da Janela: vw; (1% da largura da janela)

 Altura da Janela: vh; (1% da altura da janela)
 Mínimo da Janela = min(vw,vh): vmin;
 Máximo da Janela = max(vw,vh): vmax;
Fonte: http://www.w3.org/Style/Examples/007/units.en.html 3
Outras Unidades Fonte: http://www.w3.org/TR/css3-values/
• Ângulos (no sentido dos ponteiros do relógio):

 Graus: deg; (360 graus num círculo)
 Gradianos: grad; (400 gradianos num círculo)

 Radianos: rad; (2π radianos num círculo)
 Voltas: turn; (1 volta num círculo)
• Tempos:
 Segundos: s;
 Milissegundos: ms;
• Frequência:
 Hertz: Hz; (ocorrências por segundo)
 Kilo-Hertz: kHz; (1.000 Hz)
• Resolução:
 Pontos por centímetro: dpcm;
 Pontos por polegada: dpi; (dots per inch)
 Pontos por unidade px: dppx; (1dppx = 96dpi) 4
Famílias genéricas de fontes
• serif:

• sans-serif:
• cursive:
• fantasy:
• monospace:
5
Propriedades abreviadas
• Possibilidade de indicar de uma vez o valor para várias
propriedades relacionadas:

font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 100%;
line-height: 120%;
font-family: arial, helvetica, sans-
serif;
6
• Possibilidade de indicar de uma vez o valor para várias
propriedades relacionadas:

font: italic small-caps bold 100%/120%
arial, helvetica, sans-serif;
• O mesmo se passa para border:

border-width: 1px;
border-style: solid;
border-color: gray;
border: 1px solid gray;
7
• O mesmo se passa para margin e padding:
margin-top: 10px;

margin-right: 20px;
margin-bottom: 30px;
margin-left: 20px;
• pode ficar:
margin: 10px 20px 30px 20px;
• ou ainda:
margin: 10px 20px 30px; (top, right-left, bottom)
margin: 10px 20px; (top-bottom, right-left)
margin: 10px; (top-right-bottom-left)
8
• font: font-style font-variant font-weight
font-size/line-height font-family
• border: border-width border-style border-color

• margin: margin-top margin-right margin-bottom
margin-left
• padding: padding-top padding-right
padding-bottom padding-left
• background: background-color
background-image
background-repeat
background-attachment
background-position
• list-style: list-style-type
list-style-position
list-style-image
9
Estilos em grupos de elementos
• Usar os estilos nas etiquetas “agrupadoras”:
div, article, section, nav, aside,

header, footer, figure, table, tr, etc.
 A etiqueta div (e equivalentes) é apresentada em
block
• Aplicar estilos a um texto contínuo (sem

separação de linhas): span
 A etiqueta span é apresentada inline
10
Etiqueta span
<!DOCTYPE html>
<html lang="pt">
<head>

<title>testing span tag...</title>
</head>
<body>
<p>
É um parágrafo que a meio do texto muda de
estilo: texto a <span style="background-color: #FF0;
color: red; font-size: 24pt;">vermelho, com fundo
amarelo</span> e tamanho 24 points
</p>
</body>
</html>
11
Etiqueta span
<!DOCTYPE html>
<html lang="pt">
<head>

</head>
<body>
<p>
estilo: texto a <span style="background-color: #FF0;
amarelo</span> e tamanho 24 points
</p>
</body>
</html>
12
Etiqueta span vs div
<!DOCTYPE html>
<html lang="pt">
<head>

</head>
<body>
<p>
estilo: texto a <div style="background-color: #FF0;
amarelo</div> e tamanho 24 points
</p>
</body>
</html>
13
Etiqueta span vs div
<!DOCTYPE html>
<html lang="pt">
<head>

</head>
<body>
<p>
estilo: texto a <div style="background-color: #FF0;
amarelo</div> e tamanho 24 points
</p>
</body>
</html>
14
Block vs Inline
• Elementos por omissão apresentados em block:

<address>, <article>, <aside>,
<blockquote>, <canvas>, <dd>, <div>,
<dl>, <fieldset>, <figcaption>, <figure>,
<footer>, <form>, <h1>, <h2>, <h3>, <h4>,
<h5>, <h6>, <header>, <hgroup>, <hr>,
<li>, <main>, <nav>, <noscript>, <ol>,
<output>, <p>, <pre>, <section>, <table>,
<tfoot>, <ul>, <video>
http://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
15
Block vs Inline
• Elementos por omissão apresentados em inline:

<a>, <abbr>, <acronym>, <b>, <bdo>, <big>,
<br>, <button>, <cite>, <code>, <dfn>, <em>,
<i>, <img>, <input>, <kbd>, <label>, <map>,
<object>, <q>, <samp>, <script>, <select>,
<small>, <span>, <sub>, <sup>, <strong>,
<time>, <tt>, <textarea>, <var>
http://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
16
• Unidades

• Propriedades abreviadas
• Repetição com a utilização exclusiva de style
• Propriedades e valores
• Etiquetas Block vs Inline
17
[IPW]
CSS – aplicação,
prefixos e media
queries
aplicação dos estilos

2
Colocação dos elementos
1. O Browser começa por processar o head
carregando todos os estilos definidos (por style
e/ou link)

e em seguida vai processar o body.
2. Faz o parse do HTML do body criando uma

estrutura em árvore com os elementos
e de seguida vai formatá-los
3. Para cada elemento HTML tenta encontrar o valor

para cada uma das suas propriedades.
3
• O valor para a propriedade é calculado/encontrado em função
das regras CSS:

1. Começa por selecionar as regras CSS que
 “emparelham” com o elemento (em função dos seletores),
 referem a propriedade e
 são para o media atual (ecrã, impressão, etc.).
Fonte: http://www.w3.org/TR/CSS2/cascade.html 4
• O valor para a propriedade é calculado/encontrado em função
das regras CSS:

2. Ordena as regras pela seguinte ordem:
a) Primeiro pela origem:
i. Estilos !important do Utilizador
ii. Estilos !important do Programador
iii. Estilos do Programador
iv. Estilos do Utilizador
v. Estilos, por omissão, do Browser
b) Depois por especificidade
c) Caso haja duas regras com igual “posição” (mesma origem
e especificidade) então →
ordena-as por distância em relação ao elemento.
• Finalmente, Aplica o valor encontrado
Fonte: http://www.w3.org/TR/CSS2/cascade.html 5
Herança de valores
• Caso não haja valor encontrado:
A. Se a propriedade puder receber valores herdados do “pai”

então usa-o;
B. Se não puder receber valores herdados então usa o valor
inicial definido, na norma, para essa propriedade
 As propriedades que podem herdar valores (ex.: color, font,
text-align, text-indent, text-transform, etc.) e os
valores iniciais de cada propriedade estão definidos na norma:
http://www.w3.org/TR/CSS/#properties
 Usando, numa regra, o valor:
 initial: “forçamos” a utilização do valor inicial
 inherit: “forçamos” que uma propriedade herde o valor do “pai”
6
Herança de valores

Fonte: http://www.w3.org/TR/CSS22/propidx.html 7
queries
media e media

8
Atributo media
• Indicar qual o contexto de aplicabilidade dos estilos;
• Valores mais comuns:
 screen (omissão)

 print (impressão)
 speech (screen readers)
 … (outros definidos na CSS2 mas em desuso)
 all (todos)
• Exemplo - tratamento das ligações na impressão (tirar sublinhado e cor):

<style type="text/css" media="print">
a { color: #000; text-decoration: none; }
</style>
 Também pode ser usado como regra (“no meio das outras”):
@media print {
a { color: #000; text-decoration: none; }
}
Fonte: http://www.w3.org/TR/css3-mediaqueries/ 9
Media Queries
• A partir da CSS3 foi possível condicionar regras a
características dos dispositivos através de Media Queries.

• Apesar de se poderem indicar diversas características, as
mais comuns estão relacionadas com o tamanho do ecrã:
 max-width,
 min-width,
 max-height,
 min-height,
 orientation (landscape ou portrait)

Fonte: http://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries 10
Media Queries
• Uma regra com Media Query tem o formato (opcional e
repetir):

@media only|not tipomedia and (característica) {
Regras CSS
}
• No atributo media para controlar a utilização de uma

folha de estilos:
<link rel="stylesheet" media="only|not tipomedia and
(característica)" href="mystylesheet.css" />
Fonte: http://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries 11
Exemplos de Media Queries
• Se a largura é maior que 800px (o only garante a não aplicação em
Browsers antigos que só veriam “@media screen …”. o not

aplica-se a toda a condição):
@media only screen and (min-width: 800px) {

…
}
• Se está na horizontal (útil para smartphones ou tablets):
@media screen and (orientation: landscape) {

…
}
12
Exemplos de Media Queries
• Uso de vírgulas equivale a or (não indicação do tipomedia
corresponde a all):

@media (min-width: 800px), print and (orientation:
landscape) {
...
}
• Usando a unidade em testa-se o número de caracteres

disponíveis (importante para decidir se colocar colunas):
@media only screen and (max-width: 28em) {
…
}
13
Adaptação ao tamanho do ecrã
Etiqueta picture
 Surge na tentativa de fornecer a melhor imagem, em função do ecrã
atual,

 só funciona em alguns Browsers mais recentes,
 permite indicar qual a imagem a utilizar em função das características:
<picture>
<source media="(min-width: 64em)" src="grande.png">
<source media="(min-width: 37.5em)" src="media.png">
<source src="pequena.png">
<img src="omissao.png"
alt="Para Browsers que não reconheçam o source.">
<p>Texto se tudo o resto falhar (como o alt)</p>
</picture>
Fonte: http://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture 14
• Aplicação dos estilos aos Elementos
• Herança de valores

• Media query
15
[IPW]
CSS – intro
posicionamento
Posição dos elementos
<!DOCTYPE html>
<html>

<head lang="pt“>
<title>Posicionamento</title>
</head>
<body>
<h1>Titulo</h1>
<p>Texto corrido, com uma <a href="#">ligação</a>, seguida</p>
<div>As imagens (<img src="/images/Logotipo.jpg" alt="logotipo"/>)
ficam em linha com o texto</div>
</body>
</html>
2
• O Browser ao processar o documento começa a colocar os
elementos da esquerda para a direita e de cima para baixo
(normal flow).

• Existem quebras de linha em função do valor da propriedade
display:
 block – dá-se uma quebra de linha antes e após o elemento
 inline – não se dá uma quebra de linha antes ou após o elemento
 none – o elemento não é apresentado
• Elementos que por omissão são block:

 div, h*, p, entre outros.
• Elementos que por omissão são inline:

 span, a, img, entre outros.
3

4
Ocultar elementos
display: none

visibility: hidden
5
Modelo de Caixa (Box Model)
Cada elemento é colocado como se fosse uma caixa retangular, sendo
possível definir:
 margens,
 bordos e

 espaçamentos internos (propriedades abreviadas ):
Margem (margin)
Bordo (border)
Espaçamento (padding)
Conteúdo (width e height)
6
3D

Fonte: http://www.hicksdesign.co.uk/boxmodel/ 7
...
body {
background-color: #333;
}

#externo {
border: 1px solid white;
position: absolute; /* para reduzir a largura */
}
#interno {
background-color: #EEE;
margin: 10px 20px 30px 40px;
border: 1px solid red;
padding: 40px 30px 20px 10px;
}
</style>
...
<div id="externo">
<div id="interno">MMMMM</div>
</div>
...
Nota: Controlar o funcionamento através das “Ferramentas de Desenvolvimento” nos Browsers – F12
8
“Ferramentas de
Desenvolvimento” – F12

9
display: inline
...
#texto-inline {

margin: 10px; padding: 10px; border: 1px solid #F00;
width: 200px; height: 50px;
}
</style>
...
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Ex quos adipisci similique, velit quaerat
perferendis vel labore illo. Ducimus incidunt et facere
illo <span id="texto-inline">reprehenderit</span>,
maiores! Quasi voluptas, autem nesciunt optio cupiditate.
Ullam harum, quidem! Corporis, perferendis ipsa. Veniam,
ad eius, sapiente, placeat tempora voluptatem neque optio,
aliquam recusandae aperiam harum.</p>
...
10
display: inline
• Para os elementos com display: inline é possível definir
as margin e o padding
 mas apenas têm efeito na horizontal (os valores verticais não serão utilizados,

pretendem garantir a propriedade line‐height) e também ignoram o
width e height
11
display: inline-block
• O valor inline-block para a propriedade display
concilia os “comportamentos” do inline e do block:

• é colocado inline (sem quebra de linha) mas respeita as
propriedades de formatação do block:
#texto-inline {
margin: 10px;
padding: 10px;
border: 1px solid #F00;
width: 200px;
height: 50px;
display: inline-block;
}
</style>
12
display: inline-block

13
Criação de um menu horizontal
Um menu é essencialmente um conjunto de ligações. Será
implementado através de uma lista não ordenada de links:

...
<body>
<h1>A Empresa</h1>
<nav>
<ul id="menu">
<li><a href="Empresa.htm">Empresa</a></li>
<li><a href="Noticias.htm">Notícias</a></li>
<li><a href="Clientes.htm">Clientes</a></li>
<li><a href="Contactos.htm">Contactos</a></li>
</ul>
</nav>
</body>
</html>
14
Menu Horizontal

15
Menu Horizontal
• Remover, da lista, os espaçamentos, bullets, alterar a
cor de fundo, alinhamento à esquerda a toda a
página:

ul#menu
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
width: 100%;
}
16
Menu Horizontal
• Colocar os elementos da lista em modo de linha:
ul#menu li

{
display: inline;
}
17
Menu Horizontal
• Formatar as ligações com cores, dimensões, alinhamentos e
imagem de fundo:

ul#menu a
text-decoration: none;
color: #FFF;
background: #036 url("CirculoLaranja.png") no-repeat 3px 50%;
/* CirculoLaranja.png: 16x16 */
border-right: 1px solid #FFF;
} 18
Menu Horizontal

19
Menu Horizontal
• Formatar a passagem do rato:

ul#menu a:hover
color: #000;
background-color: #69C;
20
Posicionamento
position, z-index, float

21
Posicionar elementos
• É possível indicar a posição pretendida para um
determinado elemento.

 indicação em relação a um determinado “sistema de coordenadas”
• A origem do “sistema de coordenadas” é definida em

função da propriedade position:
 static – método por omissão (normal flow)
 relative – posicionado como “normal flow” mas “move-se” em
função dos valores indicados
 absolute – utiliza a origem do ascendente mais próximo que
tenha uma position diferente de static e “move-se” em
função dos valores indicados (reduz a largura ao mínimo)
 fixed – utiliza a origem da janela do Browser (não sofre com
scroll)
22
• Com o posicionamento fora do “normal flow” (position:
static) é possível controlar quais os elementos que ficam
“mais acima” (sobreposto) ou “mais abaixo” (coberto) através

da propriedade z-index.
• Por omissão, o valor de z-index é 0 (zero).

 Quando não indicado, é herdado do “pai” (fica ao “mesmo nível”).
• Utilizando um valor inteiro é possível controlar a ordem de

posição: valores superiores colocam os elementos “mais
acima” (sobreposto) em relação aos restantes.
23
• O posicionamento fora do “normal flow” (position: static) é
feito através das propriedades:
 left, top, right, bottom.

• As dimensões indicadas (com unidades: px, em, mm, etc.)
“avançam/recuam” (positivas para o interior, negativas para o
exterior) em função da propriedade:

top
 left right
Bottom

• Deve indicar duas propriedades: uma horizontal e outra vertical

• Caso sejam indicadas as diversas propriedades, obrigando à
alteração da dimensão, a left e top têm precedência.
24
Propriedade position
...
body { margin: 0; padding: 0; }

[id] { height: 50px;
width: 50px;
top: 0;
position: ******;}
#vermelho { background-color: #F00; left: 0; }
#amarelo { background-color: #FF0; left: 25px; }
</style>
...
<p>Posicionamento:</p>
<div style="position: relative;">
<div id="vermelho"></div>
<div id="amarelo"></div>
</div>
...
***** - substituir por static, relative, absolute, ou fixed 25

static
relative

26
absolute
fixed

27
Propriedade z-index

28
Propriedade z-index
<style type="text/css"> <body>
body { <p>Posicionamento com z-index:</p>
margin: 0; padding: 0; <div class="contentor">
} <div id="v1" class="vermelho">1</div>
.contentor { <div id="a2" class="amarelo">2</div>

position: relative; </div>
height: 100px; <div class="contentor">
} <div id="v3" class="vermelho">3</div>
[id] { <div id="a4" class="amarelo">4</div>
height: 50px; width: 50px; </div>
top: 0; </body>
position: absolute;
}
.vermelho {
background-color: #F00; left: 0;
}
.amarelo {
text-align: right;
background-color: #FF0; left: 25px;
}
#v3 {
z-index: 1;
}
</style> 29
Elementos flutuantes
• Possível colocar o elemento alinhado à esquerda (left) ou à
direita (right), deixando os restantes elementos fluir, através da
propriedade float:

...
img {
float: *****;
}
</style>
...
<div>
<img src="Logotipo.jpg" alt="Logotipo" />
<p>Texto com muitas ...</p>
<p>Aqui temos um segundo ...</p>
</div>
...
***** - substituir por left ou right 30
Elementos flutuantes
float: left

float: right
31
• Posição dos elementos (inline e block)
• Ocultar elementos

• Modelo de Caixa
• Formatações no display: inline, uso de display: inline-

block
• Exemplo de menu horizontal
• Posicionar elementos com position (left, top, right e bottom) ou

float e clear
32
[IPW]
CSS - layout fluido

No último episódio de IPW
• Posição dos elementos (inline e block)
• Ocultar elementos

• Modelo de Caixa
• Formatações no display: inline, uso de display:
inline-block
• Exemplo de menu horizontal
• Posicionar elementos com position (left, top, right e
bottom) ou float e clear
2
Criação de um layout fluido
• Criar um layout para uma página:

Cabeçalho
10%
Menu Conteúdo
20% 80%
Rodapé
10%
3
Criação de um layout fluido
• Criar um layout para uma página: article

Cabeçalho
header
div id="esquerda" div id="direita"
Menu Conteúdo
nav
ul id="menu"
Rodapé footer
4
Layout fluido
...
<article>
<header>A Empresa</header>
<div id="esquerda">

<nav>
<ul id="menu">
<li><a href="Empresa.htm">Empresa</a></li>
<li><a href="Noticias.htm">Notícias</a></li>
<li><a href="Clientes.htm">Clientes</a></li>
<li><a href="Contactos.htm">Contactos</a></li>
</ul>
</nav>
</div>
<div id="direita">
<p>Aqui está ... </p>
<p>Vão ser ... </p>
<p>Lorem ipsum dolor sit amet... </p>
</div>
<footer>We All ©</footer>
</article>
... 5
Layout fluido

6
Layout fluido
• Formatar o html e o body:

html, body
{
margin: 0;
padding: 0;
background-color: #CCC;
font-family: Arial, Helvetica, sans-serif;
height: 100%;
width: 100%;
}
7
Layout fluido
• Formatar o article:
article {

margin: 0 auto;
border: 5px solid #FFF;
/* Não há % nos borders */
width: calc(90% - 10px); /* - 2 x 5px */
height: calc(100% - 10px); /* - 2 x 5px */
/* Atenção aos espaços no operador " - " */
}
8
Layout fluido

9
Layout fluido
• Formatar o header:
header {

text-align: center;
color: #FFF;
font-weight: bold;
font-size: 2em;
padding: 10px; /* No padding e margin as
percentagens são em relação ao width */
border-bottom: 5px solid #FFF;
height: calc(10% - 25px); /* -2 x 10px – 5px */
}
Fonte: http://www.w3.org/TR/CSS2/box.html 10
Layout fluido

11
Layout fluido
• Formatar o div esquerda:

#esquerda
{
float: left;
width: 20%;
}
12
Layout fluido
• Formatar o menu:
ul#menu {
margin-left: 0;
padding-left: 0;

list-style-type: none;
width: 100%;
}
ul#menu a {
width: calc(100% - 32px); /* - 5px - 27px */
text-decoration: none;
color: #FFF;
background: #036 url("CirculoAmarelo.png") no-repeat 8px 50%;
}
ul#menu a:hover {
color: #000;
}
13
Layout fluido

14
Layout fluido
• Formatar o div direita:

#direita
{
float: right;
padding: 0 10px;
height: 80%;
width: calc(80% - 20px); /* -2 x 10px */
}
15
Layout fluido

16
Layout fluido
• Formatar o footer:
footer
{

clear: both;
text-align: right;
color: #FFF;
font-size: 0.8em;
padding: 15px 5px; /* No padding e margin as
percentagens são em relação ao width */
border-top: 5px solid #FFF;
height: calc(10% - 35px); /* -2 x 15px – 5px */
/* Atenção aos espaços no operador " – " */
}
Fonte: http://www.w3.org/TR/CSS2/box.html
17
Layout fluido

18
Criação de Layouts
• Layout fixo (800 x 600)

• Layout fluido
19
box-sizing

20
Propriedade box-sizing
• Na versão 6 do Internet Explorer (IE6), o Modelo de Caixa (Box
Model) foi implementado erradamente:
 o width e o height incluíam padding e border.

• Por questões de compatibilidade posterior, foi criada a propriedade
box-sizing.
 O valor border-box faz com que o browser simule o funcionamento do IE6
 o valor por omissão (content-box) mantém o width e o height

independentes do padding e border.
• No exemplo do layout fluido, a função calc apenas foi utilizada

para calcular width ou height em percentagem, retirando os
valores fixos do border e/ou padding.
 O seu uso poderia ser evitado através de: box-sizing: border-box;
Fonte: http://www.w3.org/TR/css-ui-3/#box-sizing 21
• Alteração, no layout fluido, das regras para utilizar
box‐sizing: border-box;

article {
...
width: calc(90% - 10px);
height: calc(100% - 10px);
box-sizing: border-box;
width: 90%;
height: 100%;
}
header { footer {
... ...
height: calc(10% - 25px); height: calc(10% - 35px);
box-sizing: border-box; box-sizing: border-box;
height: 10%; height: 10%;
} }
22
• Alteração, no layout fluido, das regras para utilizar
box‐sizing: border-box;:

ul#menu a { #direita {
... ...
width: calc(100% - 32px); width: calc(80% - 20px);
width: 100%; width: 80%;
... ...
} }
23
• Exemplo de layout fixo
 Tentar não usar layouts fixos. Em desuso!

• Exemplo de layout fluido
• Propriedade box-sizing
24
[IPW]
CSS –
FlexBox intro
No último episódio de PI-LInf
• Exemplo de layout fluido

• Notação funcional em CSS: rgb, rgba, hsl,
hsla, url, calc, etc.
• Propriedade box-sizing
2
float “issue”

3
float “issue” –
“perde-se” conteúdo
...
section {

border: 1px solid #000;
padding: 5px;
}
</style>
...
<section>
<figure>
<img src="/images/areas.png" alt="Cálculo das áreas" />
<figcaption>
</figcaption>
</figure>
<p>Lorem ipsum dolor ...</p>
</section>
...
4

5
...
section {

padding: 5px;
}
figure {
float: right;
}
</style>
...
<section>
<figure>
<figcaption>
</figcaption>
</figure>
</section>
...
6
• Um elemento (figure) colocado como float é retirado do
“normal flow” e colocado lateralmente:

Fonte: http://css-tricks.com/all-about-floats/ 7
• Temos que colocar conteúdo, no final, e garantir que este não fica
encostado a nada que esteja a flutuar, ficando “abaixo” destes
(Clear Fix).

• Para isso vamos usar o pseudo-elemento ::after com content
vazio ("")
section::after {
content: "";
display: block;
clear: both;
}
Fonte: http://cssmojo.com/the-very-latest-clearfix-reloaded/ 8
...
section {
padding: 5px;

}
figure {
float: right;
}
section::after {
content: "";
display: block;
clear: both;
}
</style>
...
<section>
<figure>
<figcaption>
</figcaption>
</figure>
</section>
...
9

Nota: também aconteceria quando “position: absolute” e
“position: fixed” (retiram os elementos do “normal flow”)
10
Flexbox

11
Novos Sistemas de
Posicionamento
• O uso de mecanismos de posicionamento apenas baseado no
Box Model (as dimensões) e seus relacionados (normal flow,
float+clear, position) têm um conjunto de problemas

quando se pretendem layouts que se adaptem (Responsive):
 problemas do tratamento das percentagens das várias dimensões, clear
fix, etc.
• Assim, surgiram sistemas de posicionamento alternativos:

 Flexbox Layout: http://www.w3.org/TR/css-flexbox-1/
 Grid Layout: http://www.w3.org/TR/css3-grid-layout/
• Mais informação detalhada sobre sistemas de posicionamento em:

http://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout
12
Flexbox – Conceitos
• Filosofia baseada num “contentor” (container) com “itens” (items),
onde é possível indicar a forma como os “itens” irão preencher o
espaço do “contentor”.

• “Ativada” por display: flex; (ou inline-flex) no
container.
• É possível indicar um preenchimento (propriedade flex-

direction) com prioridade
 “às linhas” (row ou row-reverse)
 ou “às colunas” (column ou column-reverse).
• A ordem de posicionamento pode deixar de estar condicionada à

ordem pela qual os elementos surgem
(usando a propriedade order).
13
Flexbox – Terminologia

Fonte: http://www.w3.org/TR/css-flexbox-1/#box-model 14
Flexbox – Propriedades do
Container
Propriedade Valores Observações
flex-direction row | row-reverse | Prioridade “às linhas”
column | column- ou “às colunas”

reverse
flex-wrap nowrap | wrap | wrap- Distribuição dos “itens”
reverse pelo cross-axis
justify- flex-start | flex-end Como é distribuído o
content | center | space- espaçamento ao longo
between do main-axis
align-items stretch | flex-start Como é distribuído o
| flex-end | center | espaçamento ao longo
baseline da cross-axis
align-content stretch | flex-start Como é distribuído o
| flex-end | center | espaçamento dos
space-between | “itens” em mais de uma
space-around “linha”
Valores por omissão a verde 15

Flexbox – Propriedades dos
Items
Propriedade Valores Observações
flex-grow 0 | número Capacidade do “item”
se “alargar”

flex-shrink 1 | número Capacidade do “item”
se “encolher”
flex-basis auto | width Uso dos valores de
width e height, ou
sua indicação
order número Ordem de colocação do
“item” em oposição ao
uso da ordem em que
surge no HTML
align-self auto | flex-start | Sobrepõe-se, no “item”
flex-end | center | atual, ao valor de
baseline | stretch align-items
Valores por omissão a verde 16

Flexbox – Propriedades
• Existem, ainda, as seguintes propriedades abreviadas:
 flex-flow → flex-direction flex-wrap

 flex → flex-grow flex-shrink flex-basis
• Obter mais informação sobre o Flexbox em:

 http://www.w3.org/TR/css-flexbox-1/
 http://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_ Box_Layout
 http://css-tricks.com/snippets/css/a-guide-to-flexbox/
 http://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
• Simulador do funcionamento dos diferentes valores das

propriedades em:
https://codepen.io/ariedam/full/dyYJBwq
17
Layout fluido com Flexbox
• border-box Model • Flexbox
article {

article {
margin: 0 auto;
margin: 0 auto;
width: 90%;
width: 90%;
height: 100%;
height: 100%;
}
display: flex;
flex-flow: row wrap;
/* flex-direction: row;
flex-wrap: wrap; */
}
18
header { header {

text-align: center; text-align: center;
color: #FFF; color: #FFF;
font-weight: bold; font-weight: bold;
font-size: 2em; font-size: 2em;
padding: 10px; padding: 10px;
border-bottom: 5px solid #FFF; border-bottom: 5px solid #FFF;
height: calc(10% - 25px); height: calc(10% - 25px);
height: 10%; height: 10%;
} flex-basis: calc(100% - 10px);
/* width: calc(100% - 10px);*/
flex-basis: 100%;
/* width: 100%; */
}
19
#esquerda { #esquerda {

float: left; flex-basis: 20%;
width: 20%; /* width: 20%; */
} }
#direita {
#direita { padding: 0 10px;
float: right; background-color: #69C;
padding: 0 10px; height: 80%;
background-color: #69C; width: calc(80% - 20px);
height: 80%; box-sizing: border-box;
width: calc(80% - 20px); flex-basis: 80%;
box-sizing: border-box; /* width: 80%; */
width: 80%; flex-basis: calc(80% - 20px);
} /* width: calc(80% - 20px);*/
} 20
footer { footer {

clear: both; text-align: right;
text-align: right; color: #FFF;
color: #FFF; font-size: 0.8em;
font-size: 0.8em; padding: 15px 5px;
padding: 15px 5px; border-top: 5px solid #FFF;
border-top: 5px solid #FFF; height: calc(10% - 35px);
height: calc(10% - 35px); box-sizing: border-box;
box-sizing: border-box; height: 10%;
height: 10%; flex-basis: 100%;
} /* width: 100%; */
flex-basis: calc(100% - 10px);
/* width: calc(100% - 10px);*/
}
21
• Box Model
• Flexbox

22
Flexbox – Compatibilidade
• A compatibilidade deste sistema não é total e depende da
versão do Browser:

• Mas todos os browsers mais modernos/atuais já implementam:
{
...
-webkit-flex-direction: row; /* Safari */
flex-direction: row;
23
}
Fonte: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout#Browser_compatibility
• Resolução da perda de conteúdo por uso de float,
“position: absolute” e “position: fixed”

• Novos Sistemas de Posicionamento: Flexbox e Grid
• Flexbox
• Layout fluido com Flexbox
24
[IPW]
Forms
Elemento form
• O elemento form, introduzido na versão 2 do HMTL,
agrupa um conjunto de controlos para introdução da

informação.
• Quando toda a informação está introduzida é possível

gerar o evento de submit e ela é processada
 tipicamente enviada para o servidor.
 Mas também pode ser tratada do lado do cliente através de

Javascript.
2
Envio da informação
• O envio da informação é feito através de um conjunto
de pares “nome do controlo”/“valor”.

• O nome do controlo é obtido através do atributo
name. Este atributo pode ter valores repetidos (não é
unívoco como o id).
• Normalmente, o atributo name é utilizado em

conjunto com o id, sendo este último utilizado para
aceder via JavaScript (através de
getElementById).
3
Controlos para introdução da
informação
• O elemento input representa diversos tipos de controlos,
sendo diferenciados através do atributo type:

 text – caixa de texto de uma só linha
 password – caixa de texto de um só linha com caracteres
escondidos
 radio – um “botão de rádio”
 checkbox – uma “caixa de seleção”
 hidden – permite armazenar informação sem ser apresentada ao
utilizador
 file – permite o upload de um ficheiro (atenção ao atributo
enctype)
4
Criação de botões
• O elemento input também permite a criação de botões, sendo
diferenciados através do atributo type:
 button – botão de texto genérico (usar onclick)

 submit – botão de texto que inicia o evento submit
 image – idêntico ao submit mas com uma imagem
 reset – botão de texto que inicia o evento reset (limpa todos os
controlos)
• Podem ser criados botões mais complexos (incluindo texto,

imagens, etc.) através do elemento button:
<button style="background-color: white;">
<img src="Aceitar.jpg"/>
<br />
<span style="font-family: Verdana, sans-serif; font-size:
12pt; font-weight: bold;">Aceitar</span>
</button>
5
No HTML5 temos novos tipos
de input
• São definidos 13 novos tipos de elementos input para as form
(em caso de incompatibilidade ficam como text):
 <input type="search"> – caixas de pesquisa (permite limpar

texto)
 <input type="number"> – spinboxes
 <input type="range"> – sliders
 <input type="color"> – color pickers
 <input type="tel"> – números de telefone
 <input type="url"> – endereços web
 <input type="email"> – endereços de email
 <input type="date"> – date pickers
 <input type="month"> – meses do ano
 <input type="week"> – semanas do ano
 <input type="time"> – instantes
 <input type="datetime"> – instantes, com datas, absolutas
 <input type="datetime-local"> – instantes, com datas, locais
6
No HTML5 surgem atributos novos do
input
• Com o atributo placeholder é possível colocar um
texto que aparece (normalmente mais suave – a cinza) para

explicação do que estamos à espera.
• O atributo autofocus permite indicar qual o input que

ficará ativo no arranque da form.
• O atributo required torna o input obrigatório (será

usado no processo de validação da form.
 Caso não se deseje que a form faça validação, então devemos

colocar o atributo novalidate="novalidate" na form).
7
Lista de alternativas
• Uma lista de alternativas é implementada através do
elemento select, sendo as alternativas
apresentadas com elemento option:

<select name="idade">
<option value="menor"><18</option>
<option value="jovem">18-21</option>
<option value="novato">22-29</option>
<option value="trintão">30-39</option>
<option value="quarentão">40-49</option>
<option value="avancada">>=50</option>
</select>
8
Porções de texto
• A introdução de grandes porções de texto é feito
através do elemento textarea,

 é possível indicar o número de linhas (rows) e de colunas
(cols) a apresentar:
<textarea id="mensagem" name="mensagem"
rows="10" cols="50“
placeholder="Introduza a sua mensagem">
</textarea>
9
Colocação de rótulos
• A introdução de rótulos é feita através do elemento
label.

• Com o atributo for identifica-se o controlo associado
(através do seu id):
<label for="mensagem">Mensagem:</label><br />
<textarea id="mensagem" name="mensagem"
rows="10" cols="50“
placeholder="Introduza a sua mensagem"></textarea>
10
Criação de zonas na form
• É possível agrupar elementos da form, criando zonas
através do elemento fieldset.

• Estas zonas podem ter um rótulo, através do
elemento legend:
<fieldset>
<legend>Dados Administrativos</legend>
...
</fieldset>
• Nota: Anteriormente, o elemento legend era posicionado através do

atributo align (top, bottom, left, right). Em HTML5 devem ser
utilizadas CSS.
11
Exemplo de form
• Pretende-se criar uma form com o seguinte aspeto:

12
Exemplo de form (continuação)
<!DOCTYPE html>
<html lang="pt">
<head>

<title>Exemplo de Form</title>
</head>
<body>
<form action=“#" method="post">

<fieldset>
<legend>Dados Administrativos</legend>
<label for="nome">Nome:</label>
<input id="nome" name="nome" type="text" />
<br />
<label for="password">Password:</label>
<input id="password" name="password" type="password" />
<br />
13
<label>Sexo:</label>
<input id="masculino" name="sexo" type="radio" value="m" />
<label for="masculino" class="valores">Masculino</label>
<input id="feminino" name="sexo" type="radio" value="f" />

<label for="feminino" class="valores">Feminino</label>
<br />
<label for="idade">Idade:</label>
<select id="idade" name="idade">
</select>
</fieldset>
14
<fieldset>
<legend>Sugestões</legend>
<label for="mensagem">Mensagem:</label><br />
<textarea id="mensagem" name="mensagem" rows="10" cols="50"

placeholder="Introduza a sua mensagem">
</textarea>
<br />
<input id="submeter" name="submeter"
type="submit" value="Enviar" />
<input id="limpar" name="limpar"
type="reset" value="Limpar" />
</fieldset>
</form>
</body>
</html>
15
Exemplo de form (resultado)

16
Caixas de texto
• Nas caixas de texto (type="text") é possível
indicar

 o número de colunas (size) e o número máximo de
caracteres (maxlength):
<input id="nome" name="nome" type="text"

size="50" maxlength="120"/>
• Nas zonas de texto (textarea) não é possível

indicar o número máximo de caracteres.
 Pode-se limitar através de JavaScript, usando o evento

onkeypress e a propriedade length do atributo value.
17
Listas
• É possível indicar o número de alternativas visíveis no
elemento select através do atributo size:

<select id="idade" name="idade" size="4">
• É possível fazer seleções múltiplas (usando as teclas

shift e/ou ctrl) através do atributo multiple:
<select id="idade" name="idade"
size="6" multiple="multiple">
18
Listas
• É possível criar grupos (organizar opções) através de
optgroup:

<select id="idade" name="idade" size="8">
<optgroup label="Juniores">
</optgroup>
<optgroup label="Seniores">
</optgroup>
</select>
19

IPW_Teste(s_Extras)

Enviado por

Dados do documento

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

IPW_Teste(s_Extras)

Enviado por

Direitos autorais:

Formatos disponíveis

▪ HTML (HyperText Markup Language) é uma linguagem

▪ Desenvolvida por Tim Berners-Lee no início dos anos

▪ 1993 - surge a primeira norma, baseada em SGML

▪ 1999 - versão HTML 4.01

▪ 2006 - XHTML (HTML baseado no XML)

Introdução à Programação Web - ESTSetúbal/IPS 2

▪ Possibilitam a indicação de uma estrutura e/ou semântica

▪ Podem servir como base de formatação/apresentação

HTML, XML, XHTML, CSS, SVG, MathML, VRML, etc.

Introdução à Programação Web - ESTSetúbal/IPS 3

<a href=" https://www.slbenfica.pt/pt">SL Benfica</a>

Etiqueta Abertura Etiqueta

Introdução à Programação Web - ESTSetúbal/IPS 12

▪ Serve para colocar etiquetas meta, de caracterização do

▪ “Executada” antes do corpo da página

▪ Serve para definir estilos (CSS)

▪ Serve para definir funções JavaScript

▪ Serve para colocar referências a outros documentos

Introdução à Programação Web - ESTSetúbal/IPS 15

▪ É também possível colocar uma imagem (“favicon”

▪ Esta imagem deverá ter:

▪ 16x16 pixéis ou 32x32 pixéis

▪ Usando cores de 8-bits ou 24-bits

▪ Gravado num dos formatos PNG, GIF ou ICO

Introdução à Programação Web - ESTSetúbal/IPS 16

▪ Caso existisse seria carregado no primeiro acesso ao site.

▪ O HTML4.01 normaliza esta utilização através do uso da etiqueta link e

▪ Os atributos representam respetivamente:

▪ Por razões históricas é comum encontrar:

▪ Na forma mais simples usa os atributos name e content:

<meta name="author" content=“theyAll" />

Introdução à Programação Web - ESTSetúbal/IPS 18

Introdução à Programação Web - ESTSetúbal/IPS 19

▪ Podemos dar a indicação de que uma página não pode ser

podemos usar as diversas combinações com INDEX e FOLLOW

▪ Alternativamente, podemos colocar um ficheiro

▪ Neste ficheiro é possível indicar a quem se veda (User-

▪ Dar acesso a todo o site (não há allow:):

▪ Excluir parte do site:

▪ Excluir a um tipo de robot (http://www.robotstxt.org/db.html):

▪ A indicação do formato de codificação dos caracteres que

▪ Será utilizado o seguinte cabeçalho HTTP:

▪ No HTML 5 basta ser:

<meta charset="utf-8" />

Introdução à Programação Web - ESTSetúbal/IPS 22

▪ Os Browsers eliminam espaços desnecessários:

Introdução à Programação Web - ESTSetúbal/IPS 24

As etiquetas em html são colocadas entre < e

▪ Os caracteres especiais <, >, " não podem ser colocados

As etiquetas em html são colocadas entre < e

Introdução à Programação Web - ESTSetúbal/IPS 27

int fatorial (int x)

for (int i = 1; i&lt;x; i++)

Introdução à Programação Web - ESTSetúbal/IPS 28

Introdução à Programação Web - ESTSetúbal/IPS 30

Introdução à Programação Web - ESTSetúbal/IPS 33

Introdução à Programação Web - ESTSetúbal/IPS 34

Introdução à Programação Web - ESTSetúbal/IPS 35

Introdução à Programação Web - ESTSetúbal/IPS 36

Introdução à Programação Web - ESTSetúbal/IPS 37

Introdução à Programação Web - ESTSetúbal/IPS 40

Introdução à Programação Web - ESTSetúbal/IPS 41

▪ O Browser posiciona-se no elemento

for (int i = 1; i<x; i++)