UFCD0792 Conteudos

Criação de páginas para a
web em hipertexto
UFCD0792 (25h)
“Na internet não existe ninguém feio, existe

quem não usa Photoshop”
Augusto Branco
FORMADOR
RUI FERNANDES
Criação de páginas para a web em hipertexto
Objetivos
❑Avaliação Teórico/Pratica (70%)
❑Realização e entrega das propostas de trabalho (30%);
❑Trabalho de avaliação (40%);
❑Avaliação. Continua (30%)

❑Participação (20%);
❑Comportamento (5%);
❑Assiduidade (5%);
Conteúdos
❑ Elaborar páginas para a web, com recurso a hipertexto.
3
Conteúdos
❑Conceitos gerais de HTML
❑Ficheiros HTML
❑Estrutura da página HTML

Conteúdos
❑Ligações
❑Tag para ligação
❑Ligação local com caminhos relativos e absolutos
❑Ligação a outros documentos na Web e a determinados locais

dentro de documentos.
Conteúdos
❑Formatação de texto com HTML
❑Estilos de carateres, carateres especiais e fontes
❑Quebra de linha de texto
❑Endereços de mail
Conteúdos
❑Imagens
❑Imagens online
❑Imagens e ligações
❑Imagens externas e de fundo
❑Atributos das imagens
❑Referência das cores, cor de fundo e de texto
❑Preparação das imagens

Conteúdos
❑Multimédia na web
❑Ficheiros de som e de vídeo

❑Animação na web
❑Animação através de ficheiros de imagens GIF e JAVA
❑Desenho de páginas web

❑Estrutura da página
Conteúdos
❑Desenho de páginas web
❑Estrutura da página
❑Ligações, imagens fundos e cores
❑Tabelas
❑Definição e constituição de uma tabela
❑Alinhamento de células e tabelas
❑Dimensão das colunas e tabelas

Conteúdos
❑Frames
❑Definição e atributos de frames
❑Conjuntos e ligações de frames
❑Mapas
❑Estrutura de map e utilização de e <AREA>
❑Atributo USEMAP
❑Coordenadas e ligações
❑Páginas Web com mapas
Definir uma estrutura coerente para um site
•Quais os seus objetivos?
•A quem se destina (público-alvo)?
•Como será produzido?
•Que tecnologia será utilizada na sua construção?
•Onde será colocado?
•Qual o espaço máximo que poderá ocupar?
•Como será atualizado?

T ÉC N I CO M U LT I M É D I A
•Escolher o conteúdo
•Que elementos vais incluir: texto, imagens, sons, tabelas, fotografias,
•Organizar o conteúdo
•Decidir qual o n.º páginas do site
•Dividir o conteúdo por paginas, ou seja, organizar
•Qual a estrutura das páginas
•Página principal: deve ser apelativa e informativa!
• Atenção: não exagerar na quantidade de informação por página

A estrutura de um site esta dependente, de vários fatores
sendo os mais relevantes os seguintes:
• Temática
• Tipo de estrutura
• Tipo de estrutura de navegação

• Tipos Sites quanto a temática

• Pessoais
• Institucional
• Dinâmico
• E-Commerce
• Site one-page /Landing page
• Blogs
• Portais
Estruturas de navegação
Navegação
Global
Navegação
Contextual
Navegação
Local
Conceitos gerais de HTML
O que é HTML?
Criada pelo britânico Tim Berners-Lee, o acrônimo HTML significa HiperText

Markup Language, traduzindo ao português: Linguagem de Marcação de
Hipertexto.
O HTML é o componente básico da web, ele permite inserir o conteúdo e

estabelecer a estrutura básica de um website. Portanto, serve para dar significado
e organizar as informações de uma página na web.
Sem isso, o navegador não saberia exibir textos como elementos ou carregar
imagens e outros conteúdos.
Os hipertextos são conjuntos de tags Ligados.
Estes podem ser representar palavras, imagens, vídeos,

documentos, etc.
Quando conectados, formam uma rede de informações que

permite a comunicação de dados, organizando conhecimentos e
guardando informações.
O QUE É UM FICHEIRO .HTML?
As páginas HTML são ficheiros de texto que representam tanto o

conteúdo quanto o layout do que é visto no ecrã do
navegador/browser web ao se aceder a um site ou abrir um ficheiro
“. html” no computador.
O QUE SÃO TAGS
As tags são códigos que definem toda a estrutura da página, tais como o
seu tamanho, a fonte da letra, as cores, as quebras de linha e etc. A
maioria dos elementos/tags de um documento HTML são compostos
por uma estrutura de abertura e uma de fim, como <tag> e </tag>.
Há também tags de estrutura única, como a tag <br/> que realiza uma
quebra de linha.
PRINCIPAIS TAGS HTML
Atualmente existem mais de 140 tags, mas algumas delas quase não são utilizadas. Dentre as mais
utilizadas temos:
<head> – local para declarar todas informações, como título e metadados da sua página;
<title> – define o título;
<body> – local para declarar todos os elementos que irão compor o corpo da página;
<h1>,<h2>,<h3>,<h4>,<h5 >e <h6> – Tags para definir um título e subtítulos, variando de 1 a 6, sendo h1 o
título mais importante e h6 o de menor importância;
<p> – Tag para definir um parágrafo;
<a> – Tag de link, junto ao atributo href=”” é responsável pela principal característica da web;
PRINCIPAIS TAGS(tags de estrutura)
<header> – define um cabeçalho;
<section> – define uma seção;
<article> – define um artigo;
<div> – define uma divisão;
<footer> – define um rodapé;
<nav> – define uma área de navegação (como menus);
<details> – Esconde um texto extra até que este seja requisitado.

TAGS DE LAYOUT/SECÇÕES EM HTML
… …
<body> <section id="meio"> …
<aside id="lateral">
<header id="topo"> <article id="conteudo"> <p>Barra lateral</p>
<h1>Topo da página</h1> Aqui vai o conteúdo <br /> </aside>
</header> Aqui vai o conteúdo <br />
Aqui vai o conteúdo <br /> </section>
<nav id="menu"> Aqui vai o conteúdo <br />
<a href="#">Menu 1</a> Aqui vai o conteúdo <br /> <footer id="rodape">
<a href="#">Menu 2</a> Aqui vai o conteúdo <br /> <h2>Rodapé da página</h2>
<a href="#">Menu 3</a> Aqui vai o conteúdo <br /> </footer>
<a href="#">Menu 4</a> </article>
<a href="#">Menu 5</a> … </body>
</nav> …
…
PRINCIPAIS TAGS
<table> – define uma tabela;
<ol> – define uma lista ordenada;
<ul> – define uma lista não ordenada;
<li> – define o item de uma lista;

PRINCIPAIS TAGS
<form> – define um formulário;
<input> – define os campos do formulário;
<textarea> – define uma área para o usuário digitar um texto;
<button> – define um botão;
<img> – permite inserir uma imagem no seu documento.

A estrutura básica de um documento HTML
O documento deve conter uma declaração informando o doctype, que no caso do HTML5, basta
declarar com o elemento <!DOCTYPE html>.
Após isso iniciamos nosso documento com a tag <html> que deverá ser fechada ao final do
documento com </html>. Posteriormente, nosso documento deverá ter um elemento <head> que
receberá todas as informações básicas da sua página, como o título, links de elementos externos,
metadados, etc.
Declaramos então um título para página através da tag <title>. Finalmente abrimos então a tag <body>
que consiste no corpo do nosso documento, onde ficarão todos os elementos que serão renderizados
na janela do navegador. Dessa forma, temos a estrutura básica do nosso documento html:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1 pagina web</title>
</head>
<body>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>
ESTRUTURA DE UM DOCUMENTO HTML
O Doctype
O Doctype deve ser a primeira linha de código do documento antes do elemento HTML.
<!DOCTYPE html!>
O elemento HTML
O código HTML é uma série de elementos em árvore onde alguns elementos são filhos de
outros e assim por diante.
O elemento principal dessa grande árvore é sempre o elemento <HTML>
<html lang=”pt-pt”>
Head
A Tag HEAD é onde fica toda a parte inteligente da página. No HEAD ficam os metadados.
Metadados são informações sobre a página e o conteúdo ali publicado.
Metatag Charset
No exemplo abaixo há uma metatag responsável por defenir qual tabela de caractéres que
a página irá a usar.
<meta charset=”utf-8”>
Ou
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”>
Tag LINK
Há dois tipos de links no HTML: a tag A, que são links que levam o utilizador para outros
documentos e a tag LINK, que são links para fontes externas que serão usadas no documento.
No exemplo seguinte há uma tag LINK que importa o CSS para a página:
<link rel=”stylesheet” type=”text/css” href=”estilo.css”>

TAGS DE MODELOS DE CONTEÚDO
CORPO DE DOCUMENTO /<BODY> :
ASPECTOS VISUAIS GERAIS
Tag <BODY>: uso de alguns atributos para configuração de aspetos gerais da página
• BGCOLOR
• BACKGROUND
• TEXT
Atributo: BGCOLOR
Valor especificado em função do nome da cor (quando se tratar de uma cor básica) ou
de um valor hexadecimal de 6 dígitos.
<body bgcolor="yellow">
• BGCOLOR
• BACKGROUND
• TEXT
Atributo: BACKGROUND
Especificação de uma imagem para uso como imagem de fundo da página
Se for também for especificado o atributo BGCOLOR, este será ignorado
<body background="fundo.gif">
• BGCOLOR
• BACKGROUND
• TEXT
Atributo: TEXT
Especificação de uma cor de texto padrão para exibição de textos
Cor padrão (quando não especificado): #000000 (cor preta)
Atributo É ignorado apenas quando for especificado a cor COLOR, em textos envolvidos
pela tag <FONT>
<BODY>
O elemento <body> do HTML representa o conteúdo de um documento HTML. è permitido apenas um <body> por documento.
O <body> é o elemento no nosso documento responsável por ser o container de tudo que é conteúdo do site, ou seja funciona
como se fosse um recipiente, caixa, saco, onde colocamos o conteúdo da nossa pagina web(textos, imagens, fotos, vídeos, sons,
etc…).
O que está dentro do <body> é o que fica/ou ficará disponível para visualização do visitante.
Atributos do <body>
Background: define uma imagem de fundo da pagina
Ex.: <body style="background-image:url(background.gif)">
Background-color: define uma cor de fundo da pagina
Ex.: <body style="background-color:blue;">
ELEMENTOS DE MODELOS DE CONTEÚDO:
Algumas tags encontradas dentro do corpo /BODY:
<table>: especificação de uma tabela

Linhas são indicadas com a tag <TR>
Novas células são indicadas com a tag <TD>
As colunas de Cabeçalhos de coluna são indicadas com a tag <TH>
ELEMENTOS DE LAYOUT/SECÇÕES EM HTML
O HTML oferece elementos semânticos que definem diferentes partes de uma página Web.
Elementos semânticos são usados para "dizer" o que é cabeçalho, o que é barra de
navegação, o que é conteúdo da página, o que é uma barra lateral, etc.
Estas tags são declaradas dentro da tag <BODY>
ELEMENTOS PARA LAYOUT
<HEADER> - Define um cabeçalho para um documento ou

seção.
<NAV> - Define um container para links de navegação.
<SECTION> - Define uma seção em um documento.
<ARTICLE> - Define uma seção independente.
<ASIDE> - Define uma área lateral para inserir conteúdo.
<FOOTER> - Define um cabeçalho para um documento ou
seção.
<DIV> - Este é um elemento não-semântico também usado
para dividir a página e/ou seções.
EXEMPLO DE LAYOUT/SECÇÕES EM HTML
… …
<body> <section id="meio"> …
<aside id="lateral">
<header id="topo"> <article id="conteudo"> <p>Barra lateral</p>
<h1>Topo da Aqui vai o conteúdo </aside>
página</h1> <br />
</header> Aqui vai o conteúdo </section>
<br />
<nav id="menu"> Aqui vai o conteúdo <footer id="rodape">
<a href="#">Menu <br /> <h2>Rodapé da
1</a> Aqui vai o conteúdo página</h2>
<a href="#">Menu <br /> </footer>
2</a> Aqui vai o conteúdo
<a href="#">Menu <br /> </body>
3</a> Aqui vai o conteúdo …
<a href="#">Menu <br />
4</a> Aqui vai o conteúdo
<a href="#">Menu <br />
5</a> </article>
</nav> …
ELEMENTOS DE MODELOS DE CONTEÚDO:
Elementos/TAGS:
Estrutura semântica constituída por elemento de abertura, conteúdo e elemento de fecho.
Propriedades: São usadas para estilização (cor de fundo, tamanho e cor de fonte, alinhamento de
texto, por exemplo) e configuração de visualização de elementos
<h1> Título HTML </h1>
Exemplo da TAG/Elemento
<table border="1"> </table>
O elemento table (tabela) acima representado tem o atributo border, que define o bordo ou limite
da tabela.
Existem pequenas regras básicas que estão no HTML desde o início. Estas regras definem onde os
elementos podem ou não estar. Se eles podem ser filhos ou pais de outros elementos e quais os
seus comportamentos.
Dentre todas as categorias de modelos de conteúdo, existem dois tipos de elementos:

• Elementos de linha.
• Elementos de bloco.
Os elementos de linha marcam, na maioria das vezes, texto. Alguns exemplos:
a, strong,em, img, input, abbr, span.
Os elementos de blocos funcionam como caixas, que dividem o conteúdo nas seções do layout.
exemplos :table, div, section
Elementos DE MODELOS DE CONTEÚDO:
Alguns elementos encontrados dentro do corpo /BODY:

<h1>, <h2>,... <h6>: cabeçalhos e títulos no documento em diversos tamanhos
<p> : novo parágrafo
<br> : quebra de linha
<font> : definição de formatação (fonte, cor e tamanho) de um trecho de texto
<b>, <i>, <u> e <s> : especificação de formatação em negrito, itálico, sublinhado e
riscado, respetivamente, sobre o conteúdo envolvo nestes elementos
<img>: indicação de uma imagem
<a>: hiperligação para um outro documento web (páginas HTML, endereço de e-
mail, arquivos diversos, etc.)
CABEÇALHOS PARA TÍTULOS E SUBTÍTULOS
Normalmente são usados para títulos e subtítulos de um texto da página

Níveis de cabeçalhos: numerados de 1 a 6
Tags:
<H1>
<H2>
<H3>
<H4>
<H5>
<H6>
Quanto menor o nível, maior será o destaque

Em geral, os cabeçalhos são exibidos em letras maiores e em negrito;
uma linha em branca é adicionada antes e depois do cabeçalhos
Sintaxe:<Hy>Texto do Cabeçalho</Hy>
Onde o y é um número que poderá ser especificado entre 1 e 6, definindo o nível do cabeçalho
CABEÇALHOS PARA TÍTULOS E SUBTÍTULOS
Existe a possibilidade de alinhamento de cabeçalhos através do atributo align
Valores admitidos para este atributo

LEFT: título/subtítulo alinhado à esquerda (alinhamento padrão)
CENTER: título/subtítulo alinhado ao centro
RIGHT: título/subtítulo alinhado à direita
JUSTIFY: título/subtítulo justificado
<h1 align="left">Título alinhado à esquerda</h1>

<h2 align="center">Título alinhado de forma centralizada</h2>
<h3 align="right">Título alinhada à direita</h3>
<h4 align="justify">Título alinhada de forma justificada</h4>
PARÁGRAFOS
Tag: <p>
Demarcação de início de um parágrafo, com a criação de uma linha em branco
entre cada parágrafo
Atributo para alinhamento dos parágrafos: align
LEFT : parágrafo alinhado à esquerda (alinhamento padrão)

CENTER: parágrafo alinhado ao centro
RIGHT: parágrafo alinhado à direita
JUSTIFY : parágrafo justificado
<p align="left">Parágrafo alinhado à esquerda</p>

<p align="center">Parágrafo alinhado ao centro</p>
<p align="justify">Parágrafo justificado</p>
<p align="right">Parágrafo alinhada à direita</p>
HTML:
IMAGENS
HTML:IMAGENS
• Navegadores: suporte a vários formatos de imagens
• Formatos mais comuns: GIF e JPEG (JPG)

• Formato GIF (Grafic Interchange Format);
• Arquivos com extensão .gif;
• Paleta limita de cores: máximo de 256 cores
• Imagens com tamanhos menores;
• Apropriado para uso na exibição de ícones, pequenas animações ou
imagens com áreas extensas de cores chapadas;
• GIFs animados: requer cuidado em seu uso, pois arquivos neste formato
podem ocupar bastante espaço em disco, a depender da quantidade de
cores e quadros usados
• Formato JPEG (Joint Photografic Engineering Group)

• Arquivos com extensão .jpeg, .jpe, .jpg, .jfif, .jfi ;
• Paleta limita de cores: 16 milhões de cores;
• Recurso de compressão com pouco percetível perda na qualidade da
imagem;
• Comumente usado para compressão de imagens fotográficas;
• Imagens com tamanhos menores: carregamento mais rápido das páginas
nos navegadores;
Tag: <IMG>
Atributo obrigatório: SRC

Localização, no sistema de arquivos local ou na web, da imagem a ser exibida
Importante: não omitir a extensão do arquivo de imagem
Sintaxe
<img src="localização_arquivo_imagem" />
<img src="imagem01.jpg" />
<img src="diretoria2/imagem2.jpg" />
<img src="http://www.w3.org/2008/site/images/twitter-bird" />

Tag: <IMG>
Possibilidade de redimensionamento do tamanho da imagem através de dois atributos:

WIDTH e HEIGHT
Em caso de não ser especificado nenhum destes atributos, o navegador adotará o

tamanho original da imagem para sua exibição
Sintaxe
<img src="localização_imagem" width="n" height="n" />
Onde
WIDTH: especificação da largura da imagem (em pixels)

HEIGHT: especificação da altura da imagem (em pixels)
Importante: o uso indevido destes atributos poderá resultar na exibição de imagens com
aspeto distorcido ou com péssima definição
<img src="diretorio2/imagem2.jpg" width="800px" height="193px" />
Tag: <IMG>
Atributo: ALIGN
Tipos de alinhamento
• Alinhamento em relação ao navegador
• Alinhamento em relação ao texto
Alinhamento em relação ao navegador: tipos

• LEFT: alinhamento à esquerda (padrão)
• RIGHT: alinhamento à direita
Alinhamento em relação ao texto

Requer posicionamento da tag <IMG> no interior uma tag de parágrafo
Tipos
• TOP: alinhamento de texto com o topo da imagem
• MIDDLE: alinhamento de texto com o centro da imagem
• BOTTOM: alinhamento de texto com o rodapé da imagem
Tag: <IMG>
Atributo: ALIGN
Alinhamento em relação ao navegador:
<body>
<img src="imagem01.jpg" align="left" />
<img src="imagem01.jpg" align="right"/>
</body>
Alinhamento em relação ao texto:
<p>Texto alinhado com o topo da imagem <img src="imagem1.jpg" align="top" width="100"></p>
<p>Texto alinhado com o centro da imagem <img src="imagem1.jpg" align="middle“

width="100"></p>
<p>Texto alinhamento com o rodapé da imagem <img src="imagem1.jpg" align="bottom“

width="100"></p>
Tag: <IMG>
Atributo TITLE:
Especificação de uma mensagem de texto a ser exibida durante o carregamento da

imagem
Em caso de não carregamento da imagem, essa mensagem de texto será exibida
permanentemente
Em caso de posicionamento do cursor do mouse sobre a imagem, após o seu

carregamento, a mesma mensagem de texto é mostrada
<img src="imagem1.jpg" title="W3C" />

HTML:
Links/ Hiperligações
HIPERLIGAÇÕES EM HTML
• Tag <A>
• Links: âncoras
• Links: e-mails
Tag: <A>
Possibilidade de navegações entre diversos recursos disponíveis na WEB através de
hipertextos
Visualização, normalmente, na forma de textos destacados ou de imagens no corpo do
documento
Elementos clicáveis: quando clicados, o navegador é levado a carregar e visualizar o

recurso apontado pelo
Link
Atributo obrigatório: HREF

Localização, no sistema de arquivos local ou na web, de qualquer recurso disponível na
WEB (páginas HTML, imagens, arquivos de áudio ou de vídeo, etc.)
Sintaxe
• Tag <A>
• Links: âncoras
• Links: e-mails
Tag: <A>
O Atributo : TARGET
Este atributo especifica onde mostrar o recurso. E pode tomar os seguintes valores:
_self: Carrega a resposta na mesma janela frame
_blank: Carrega a resposta em uma nova janela
_parent: Carrega a resposta no frame pai do frame atual
_top: Carrega a resposta na janela original cheia
Sintaxe:
<a href="localização_recurso_web" target=”_destino” >Texto</a>
Exemplo:
<a href="https://www.w3schools.com" target="_blank">Visita a W3Schools</a>

• Tag <A>
• Links: âncoras
• Links: e-mails
Tag: <A>
O Atributo : DOWNLOAD
O atributo de download especifica que o destino será descarregado quando um utilizador
clicar no hiperlink.
Este atributo é usado apenas se o atributo href estiver definido.
O valor do atributo será o nome do arquivoa descarregar.

Não há restrições quanto aos valores permitidos, e o navegador detectará automaticamente
a extensão de arquivo correta e a adicionará ao arquivo (.img, .pdf, .txt, .html, etc.).
Sintaxe:
<a href="localização_recurso_web" download>Texto</a>
Exemplo:
<a href="/images/myw3schoolsimage.jpg" download>
• Tag <A>
• Links: âncoras
• Links: e-mails
Tag: <A>
O Atributo : MEDIAS
O atributo de media especifica para qual media / dispositivo o documento vinculado está
otimizado.
Este atributo é usado para especificar que o URL de destino é projetado para dispositivos
especiais (como iPhone), voz ou impressão.
Este atributo pode aceitar vários valores.
Utilizado apenas se o atributo href estiver presente.

Sintaxe:
<a href="localização_recurso_web" download>Texto</a>
Exemplo:
<a href="media.asp?output=print“ media="print and (resolution:300dpi)">Abre media para
Tag: <A>
Exemplos:
<a href=“exemplo1.html">Mistura da Casa</a>
<a href=“exemplos/exemplo2.html">Mistura da Casa</a>
<a href="../exemplo3.html">Retornar</a>
Nota: Atributo href: se inicia com os caracteres “../”, como caminho de um ficheiro html
apontado pelo link se encontra em um local hierarquicamente acima no local onde se
encontra o arquivo em si.
<a href=http://www.sapo.pt” target=“_blank” title=“Portal sapo” acesskey=“s”>Sapo</a> -

hiperligação com uso de um URL, com os atributos target, title e acesskey
Links: âncoras
O que são âncoras?
links que apontam para conteúdos dentro da mesma página HTML
Uso comum em páginas com conteúdo extenso
Definição de seções; para cada seção, é definido um link âncora, para o qual deverá ser
especificado o atributo
NAME
Atributo NAME: nome de referência para referenciamento do link âncora em links comuns
Atributo HREF: não especificado em links âncoras
Conteúdo interno da tag: igualmente não especificado Em função disso, ausência de
elemento visual para
identificação visual deste tipo de link
Sintaxe:
Declaração da ancora :<a name="nome_seção"></a>
O Atributo HREF: indicação do nome do link âncora, precedido do símbolo “#”
Link para a Ancora: <a href="#nome_seção">Conteúdo HTML</a>
Links: E-mails
Em HTML existe a possibilidade de referenciar e-mails em links
Quando for clique no link, o navegador acionará o cliente de e-mail (programa de

computador para envio, recepção e personalização de mensagens de e-mails) ,
configurado como padrão (Outlook Express, Mozilla Thunderbird, etc.)
Atributo HREF: endereço de e-mail precedido do texto mailto:
Sintase:
<a href="mailto:endreço de e-mail"> texto</a>
Exemplo: <a href="mailto:rmtf.formacao@gmail.com"> rmtf.formacao@gmail.com</a>

HTML:
TABELAS
TABELAS EM HTML
VANTAGENS
Proporcionam melhor estruturação do layout, para disposição de conteúdo
Segmentação da tabela em linhas
Cada linha: constituída de uma ou mais células

Cada célula: possibilidade de conter qualquer elemento, desde um simples texto
ou link até uma outra tabela
<TABLE>: especificação de uma

TH <TD> Titulo Titulo
TR → aaaa aaaa tabela
bbbb bbbb Linhas são indicadas com a tag <TR>
Novas células são indicadas com a
tag <TD>
As colunas de Cabeçalhos de coluna
são indicadas com a tag <TH>
TABELAS EM HTML
Sintaxe: Resultado:
<TABLE BORDER="n">
<TR>
<TD>Célula 1</TD>
<TD>Célula 2</TD>
<TD>Célula 3</TD>
</TR>
<TR>
</TABLE>
TABELAS EM HTML
Outras tags para uso em tabelas
<TH></TH>: comum seu uso para definição de títulos (ou seja, em células presentes na
primeira linha de uma tabela).
Isso não impede de que esta tag seja usada no interior de qualquer linha, no lugar de uma
tag <TD></TD>: diferença básica entre as duas tags se refere ao fato de textos presentes em
tags <TH></TH> estarão sendo exibidos automaticamente em formato negrito.
<CAPTION></CAPTION>: definição de um texto de legenda para a tabela; o texto, a ser

colocado no interior desta tag, será exibido com alinhamento centralizado em relação à
tabela.
Posicionamento da tag: antes ou após uma tag <TR></TR>
É admitida apenas uma ocorrência desta tag;
ocorrências seguintes serão ignoradas.

TABELAS EM HTML
Atributos/propriedades
Atributos usados em conjunto com as tags básicas de estruturação de tabelas
• BORDER – define a espessura do bordo da tabela / limite

• WIDTH – define a largura das células de uma tabela
• HEIGHT – define a altura das células de uma tabela
• CELLSPACING – define o espaçamento entre as células de uma tabela
• CELLPADING - define a espaçamento do texto dentro das células de uma tabela
• ALIGN – alinha horizontalmente uma tabela
• VALIGN – alinha verticalmente o texto de uma tabela
• BGCOLOR – define a cor de fundo de uma célula ou tabela
• BACKGROUND – define a imagem de fundo de uma tabela
• COLSPAN - definição de quantidade de colunas ocupadas por uma célula
• ROWSPAN - definição de quantidade de linhas ocupadas por uma célula
Alguns atributos não são aplicáveis a todas as tags básicas

LISTAS EM HTML
Finalidade: organização de conteúdos de páginas, em forma de resumos ou índices

Possibilidade de inserção de links para seções ou outros recursos web (páginas, arquivos,
websites, etc.)
Tipos de listas
• Lista não numerada
• Lista numeradas
• Lista de definições/descritivas
• Lista intercaladas
LISTAS EM HTML
Lista não numerada
Característica principal: itens da lista precedidos de marcadores
Sintaxe:
<UL TYPE="formato">
<LI>Item 1</LI>
<LI>Item 2</LI>
...
<LI>Item n</LI>
</UL>
Onde
<UL>: tag de início (abertura) da lista não numerada

TYPE: indicativo de tipo de marcador a ser usado em cada item; atributo facultativo
<LI>Conteúdo HTML</LI>: tópico (item) da lista; entre a tag de abertura e a tag de
fim, é admitido a inserção de qualquer conteúdo HTML válido (desde um simples texto
a uma imagem ou um link
</UL>: tag de fim da lista não numerada.
LISTAS EM HTML
Lista não numerada
Listas não ordenadas sem o atributo type
<UL> <!– Inicio -->

<LI>Trompete</LI>
<LI>Trompa</LI>
<LI>Trombone</LI>
</UL> <!– Fim -->
Listas não ordenadas com o atributo type
<UL type="circle"> <!– Inicio -->

<LI><a href="http://www.sapo.pt/">Sapo</a></LI>
<LI><a href="http://www.iol.pt/">IOL</a></LI>
<LI><a href="http://www.Clix.pt/">Clix</a></LI>
<LI><a href="http://www.aeiou.pt/">aeiou</a></LI>
<LI><a
href="http://www.googe.pt/">Google</a></LI>
<LI><a href="http://www.msn.pt/">Portal
MSN</a></LI>
LISTAS EM HTML
Listas ordenadas
Característica principal: itens da lista precedidos de números ou letras
Sintaxe:
<OL TYPE="formato" START="n">
<LI>Item 1</LI>
<LI>Item 2</LI>
...
<LI>Item n</LI>
</OL>
Onde:
<OL>: tag de início (abertura) da lista numerada

TYPE: indicativo de formato de numeração da lista; atributo facultativo
START: indicativo de valor inicial da lista numerada
<LI>Conteúdo HTML</LI>: tópico (item) da lista; entre a tag de abertura e a tag de término,
é admitido a inserção de qualquer conteúdo HTML válido (desde um simples texto a uma
imagem ou um link)
</OL>: tag de término da lista numerada
LISTAS EM HTML
Listas ordenadas
Característica principal: itens da lista precedidos de números ou letras
Atributo TYPE: valores de formato de numeração admitidos
1: lista numérica (por defeito)

A: lista alfabética com letras maiúsculas
a: lista alfabética com letras minúsculas
I: lista numérica com números romanos maiúsculos
i: lista numérica com l números romanos minúsculos
Atributo START: definição do início da numeração
• Especificação de um valor numérico, ainda que a numeração adotada use letras ou

números romanos
LISTAS EM HTML
Listas ordenadas
Código Resultado:
<OL> <!– Inicio--> 1. Tuba
<LI>Tuba</LI> 2. Trombone
<LI>Trombone</LI> 3. Trompa
<LI>Trompa</LI> 4. Trompete
<LI>Trompete</LI>
</OL> <!– Fim -->
LISTAS EM HTML
Listas ordenadas reversas
Em HTML é possível criar listas ordenadas reversamente, ou seja, reversas.
Pelo atributo reverse é possível inverter a ordem da numeração de uma lista ordenada.
Código Resultado:
<OL reversed> <!– Inicio 1. Trompete
-> 2. Trompa
<LI>Tuba</LI> 3. Tuba
<LI>Trombone</LI> 4. Trompete
<LI>Trompa</LI>
<LI>Trompete</LI>
</OL> <!– Fim -->
LISTAS EM HTML
Lista ordenada com inicial
No HTML é possível atribuir um número para o item inicial através do atributo start.
Resultado:
Código
<H4>Do 15º ao
19º</H4>
<OL start="15">
<LI>Fulano de
Tal</LI>
<LI>Fulano de
Tal</LI>
LISTAS EM HTML
Lista ordenada imposta

Em HTML é possível impor um valor de numeração a um item de uma lista
ordenada através do atributo value.
Resultado:
Código
<OL>
<LI>Louis Armstrong - 327
votos</LI>
<LI>Wynton Marsalis - 311
votos</LI>
<LI>Alan Vizzutti - 262 votos
Listas de definições/descritivas
Sintaxe Onde:
<DL> <DL>: tag de início (abertura) da lista
descritiva
<DT>Termo
1</DT>
<DD>Descrição <DT>Conteúdo HTML</DT>: termo referente
1</DD> ao item da lista;
... entre a tag de abertura e a tag de fecho, é
admitido a inserção de qualquer conteúdo
<DT>Termo
HTML válido (desde um simples texto a uma
n</DT>
imagem ou um link
<DD>Descrição
LISTAS EM HTML
Código
<DL> <!– Inicio -->
<DT><STRONG>Adobe</STRONG></DT>
<DD>Tijolo maciço realizado com argila (barro) crú, isto é, não cozido</DD>
<DT><STRONG>Argamassa</STRONG></DT>
<DD>Pasta de cimento e agregados finos usada para assentamento de peças e para revestimentos. Pode e deve
ser usada cal na sua composição</DD>
<DT><STRONG>Betão </STRONG></DT>
<DD>Material de construção composto por cimento, areia, brita e possivelmente adjuvantes. Deve ser
classificado segundo uma das classes de resistência previstas em regulamento próprio</DD>
<DT><STRONG>Cimento </STRONG></DT>
<DD>Pó de cor cinza produzido a partir da moagem do Clínquer, juntamente com gesso. É constituído por
calcário, argila e gesso, entre outros aditivos </DD>
</DL> <!– Fim -->
LISTAS EM HTML
Resultado:
QUEBRAS DE LINHA
Tag: <br/>
Usada para indicar uma quebra de linha no interior de um parágrafo
A quebra de linha ocorrerá sem a necessidade de se iniciar um novo parágrafo
Nenhum acréscimo de espaço extra entre as linhas, como ocorre entre os parágrafos
<p align="center">Um primeiro parágrafo sem quebra de linha</p>
<p align="center">Um segundo parágrafo<br/>com quebra de linha</p>

Blocos de texto
Tag: <pre>
Usado com propósito semelhante ao da tag de parágrafo, com a diferença de

que a formatação usada durante a digitação do texto existente no interior da tag
é mantida pelo navegador, quando da visualização.
Quebras de linhas e tabulação não são ignoradas, se existentes no interior da tag
<pre>
<pre>Texto 1
Texto 2</pre>
Linhas horizontais
Tag: <hr>
Sintaxe:
<HR width="n%" align="posição" size="n“ color="#cor" noshade />
Atributos
WIDTH: largura da linha, em formato absoluto (pixels) ou percentual
da largura útil da página
ALIGN: alinhamento da linha (LEFT, RIGHT ou CENTER)
SIZE: espessura da linha (em pixels)
COLOR: cor da linha
NOSHADE: se informado esse atributo, a linha não estará sombreada (por padrão, a linha é
sombreada)
<hr width="30%" align="right" size="5" color="red“ noshade>

Comentários
conteúdo interpretado como uma anotação
Este tipo de conteúdo não é apresentado graficamente na página, quando de sua
visualização no navegador
Sintaxe
<!–- Comentário de Página -->
Comentários podem usar mais de um linha
Exemplo
<!–- Primeira Linha de Comentário

Segunda Linha de Comentário
-->


Caracteres Especiais
Caracteres Especiais
A Lista completa de caracteres especiais esta disponível no endereço

http://www.w3.org/TR/html4/sgml/entities.html
TAGS DE FORMATAÇÃO DE TEXTO
Tag: <font>
Possibilidade de configuração de vários aspetos das fontes usadas para exibição de textos
• Tipo de fonte
• Tamanho
• Cor
Atributos
FACE: nome da fonte a ser utilizada para exibição do texto
Fontes padrões (na maioria dos navegadores):Arial, Times New Roman, Georgia, Courier, Verdana
SIZE: tamanho da fonte (um valor entre 1 e 3).

O valor padrão, na maioria dos navegadores, é 3
COLOR: cor da fonte a ser utilizada para exibição do texto.

Valor especificado em função do nome da cor (quando se tratar de uma cor básica) ou de um valor
hexadecimal de 6 dígitos
Sintaxe : <FONT FACE="nome" SIZE="n" COLOR="cor">Texto</FONT>

TAGS DE FORMATAÇÃO DE TEXTO
Tag: <font>
Caso a fonte especificada pelo atributo
FACE não esteja disponível para o utilizador aquando do carregamento da página, a

mesma será substituída pela fonte padrão adotada pelo navegador utilizado
Possibilidade de definir mais de uma opção de fonte no atributo FACE separadospor virgula
“,” para separação dos nomes das fontes
A primeira fonte disponível, na relação de fontes especificadas (da esquerda para a direita,
no atributo FACE) será utilizada para exibição do texto
<p align="center"><font face="Tahoma, Geneva, sans-serif">Caso a fonte Tahoma não esteja

disponível em seu computador, o navegador tentará utilizar a fonte Geneva para exibição
deste texto que você está lendo</font></p></b>
Sintaxe<estilo>Texto<estilo>
HTML:
FORMULARIOS
FORMULARIOS EM HTML
Conceito:
Possibilidade de entrada ou seleção de dados por parte do utilizador
Mecanismo de interatividade oferecido aos utilizadores, quando do acesso a websites
Algumas aplicações: Registos, pesquisas, comentários e votações
Campos de formulário: elementos visuais usados com o propósito de inserção ou

seleção de dados
ou conteúdos.
Formulário: é constituído de vários campos de formulário.
Submissão de formulário: envio dos conteúdos dos campos para um agente de

processamento.
Alguns tipos de processamento com os conteúdos submetidos

• Armazenamento em base de dados
• Renderização de novas páginas
• Encaminhamento via e-mail
FORMULARIOS EM HTML
Exemplo
FORMULARIOS EM HTML
TAG <FORM>
Finalidade
Agrupamento de campos de formulários cujos conteúdos serão enviados juntos
Posicionamento, entre a tag de abertura e a tag de término, de outras tags para

definição de campos de formulários
Definição de configurações de envio, como o método HTTP a ser empregado e o

agente de processamento
Sintaxe
<FORM ACTION="agente" METHOD="método">
...
</FORM>
Nenhum efeito visual, quando usada sem a definição, entre a tag de abertura e a
tag de término, de elementos visuais (campos de formulário, textos, etc.).
FORMULARIOS EM HTML
TAG <FORM>
Atributos fundamentais
ACTION: especificação de agente para processamento do conteúdo do formulário, quando

este for submetido.
Agente: desde o endereço de uma outra página projetada especialmente para
recepção e processamento dos dados do formulário até o endereço de um conta
de e-mail.
METHOD: especificação de método HTTP para envio do conteúdo do formulário
Valores admitidos
GET: conteúdos do formulário são anexados à URL (endereço) do agente de
processamento, quando da submissão do formulário.
POST: conteúdos do formulário são incluídos no corpo da requisição HTTP ao agente de

processamento, quando da submissão do formulário.
FORMULARIOS EM HTML
Exemplo
Formulário com submissão de seu conteúdo para a conta de e-mail

rmtf.formacao@gmail.com
Note que, no entanto, não existe especificação de nenhum campo de formulário entre
a tag de abertura e a tag de termino;
<HTML>
<HEAD>
<meta charset=utf-8" />
<TITLE>Exemplo 01</TITLE>
</HEAD>
<BODY>
<FORM method="post" action="mailto: rmtf.formacao@gmail.com">
<P align="center">O conteúdo de qualquer campo de formulário definido dentro deste
formulário será
enviado, via método POST, para a conta de e-mail rmtf.formacao@gmail.com</p>
</FORM>
</BODY>
</HTML>
FORMULARIOS EM HTML
TAG <INPUT>
Finalidade: especificação de campos editáveis para o formulário, com possibilidade de

inserção de
conteúdos (textos, por exemplo) ou seleção de opções.
Sintaxe
<INPUT NAME="nomecampo" TYPE="tipo" />Nome:<INPUT/>
A tag de início/término da definição de um campo de entrada de formulário
NAME: importante atributo para associação do conteúdo do campo a uma chave de

identificação Valor deste atributo: a critério do utilizador.
Quando da submissão de um formulário, o conteúdo de cada campo é enviado em

conjunto com o valor do seu atributo NAME.
TYPE: definição do tipo de campo (responsável pelo aspeto visual e mecanismo de

interatividade do campo com o utilizador)
FORMULARIOS EM HTML
TAG <INPUT>: ATRIBUTO ID
Finalidade: Sever definir uma chave de identificação, para manipulação do campo de

formulário via linguagem de programação script
Exemplo de linguagem de programação script: JAVASCRIPT
Uso facultativo
Atributo ID: normalmente usado em conjunto com o atributo NAME
É comum a atribuição do mesmo valor do atributo NAME ao atributo ID, apesar de não
ser obrigatório
Ainda que ambos os atributos estejam definidos, quando da submissão do formulário, será
examinado o valor do atributo NAME para envio do conteúdo do campo
Aplicação do mesmo raciocínio que se aplica ao atributo NAME: certifique-se de que o

mesmo valor não
esteja sendo usado em mais de um campo de formulário, quando da definição do valor
do atributo ID
FORMULARIOS EM HTML
TAG <INPUT>: ATRIBUTO TYPE
Atributo TYPE: valores admitidos:
• TEXT: campo de texto simples valor padrão, quando não especificado o valor deste
atributo.
• PASSWORD: campo de senha.
Os caracteres inseridos neste tipo de campo são substituídos, para efeito de visualização,
por um caractere pré-definido (o caractere “*”, por exemplo).
• CHECKBOX: campo de múltipla seleção.

• RADIO: campo de seleção única.
• FILE: campo de upload de arquivos.
• HIDDEN: campo oculto.
• SUBMIT: campo clicável (botão); quando do seu acionamento, os conteúdos dos
campos definidos no
formulário são submetidos (enviados) a um agente de um processamento.
• RESET: campo clicável (botão); quando da ativação, são restaurados os valores
(conteúdos) iniciais dos campos definidos no formulário.
• BUTTON: campo clicável (botão); nenhum evento ocorre, quando do seu
acionamento, a menos que o próprio utilizador o especifique.
FORMULARIOS EM HTML
TAG <INPUT>: TYPE “TEXT”
Campo de texto simples, com possibilidade de inserção de caracteres
Sintaxe:
<INPUT NAME="nomecampo" TYPE="text" />
Atributos adicionais:
• SIZE: especificação de valor numérico (baseado em quantidade de caracteres) para

definição do tamanho do campo, quando de sua visualização .
• MAXLENGTH: especificação de quantidade máxima de caracteres admitidos.
• VALUE: especificação do conteúdo inicial (padrão) do campo; caso não ocorra
nenhuma edição no conteúdo do campo após sua visualização, este será o valor a ser
enviado pelo formulário, quando de sua submissão.
• TITLE: especificação de legenda a ser exibida, quando do posicionamento do cursor
do rato sobre o campo.
FORMULARIOS EM HTML
Exemplo : campo com admissão de no máximo 50 caracteres
<form method="post" action="">

Digite seu nome:
<input name="nome" type="text" id="nome" size="50“ maxlength="50" />
</form>
Resultado:
FORMULARIOS EM HTML
Exemplo : definição de conteúdo inicial do campo com o atributo value.

Seu clube desportivo preferido:
<input name="nome" type="text" id="nome“ value="Digite o nome do seu clube"
title="Digite o nome do seu clube" size="50“ maxlength="50" />
</form>
Resultado:
FORMULARIOS EM HTML
TAG <INPUT>: TYPE “PASSWORD”
Campo de senha/passwords
Os caracteres inseridos neste tipo de campo são substituídos, para efeito de visualização,
por um caractere pré-definido (o caractere “*”, por exemplo)
Sintaxe:
<INPUT NAME="nomecampo" TYPE="password" />
Atributos adicionais: os mesmos atributos válidos para campos do tipo texto

• SIZE
• MAXLENGTH
• VALUE
• TITLE
FORMULARIOS EM HTML
Exemplo com do tipo Password

<h3 align="center">Autenticação</h3>
<table width="200" border="1" align="center" cellpadding="10">
<tr>
<td>
Login:
<br/>
<input name="login" type="text" id="login" size="50” maxlength="20" />
<br/>
Senha:
<br/>
<input name="senha" type="password" id="senha" size="50“ maxlength="20"
/>
</td>
</tr>
</table>
</form>
FORMULARIOS EM HTML
Exemplo com do tipo Password

<h3 align="center">Autenticação</h3>
<tr>
<td>
Login:
<br/>
<input name="login" type="text" id="login" size="50” maxlength="20" />
<br/>
Senha:
<br/>
<input name="senha" type="password" id="senha" size="50“ maxlength="20" />
</td>
</tr>
</table>
</form>
FORMULARIOS EM HTML
TAG <INPUT>: TYPE “CHECKBOX”
Campo de múltipla seleção

Ao contrário dos campos do tipo texto ou senha, não há possibilidade de inserção ou edição
de dados (caracteres) neste tipo de campo; apenas a opção de selecioná-lo (“marcá-lo”).
Sintaxe
<INPUT NAME="nomecampo" TYPE="checkbox" />
Agrupamento de campos de múltipla seleção, via atribuição de um mesmo valor para o

atributo NAME destes campos.
Atributos adicionais:
TITLE: especificação de legenda a ser exibida, quando do posicionamento do cursor do mouse
sobre o campo.
VALUE: especificação do conteúdo que será enviado, quando da submissão do formulário
IMPORTANTE: o conteúdo do campo, especificado neste atributo, só será enviado se o campo
for selecionado.
CHECKED: se definido este atributo (com o valor “checked”), o campo fica inicialmente,
selecionado como (“marcado”).
FORMULARIOS EM HTML
TAG <INPUT>: TYPE “CHECKBOX”

<h3 align="center">Aceder ao seu e-mail</h3>
<table width="200" border="1" align="center“ cellpadding="10">
<tr>
<td>
Login<br/>
<input name="login" type="text" id="login" size="50“ maxlength="20" /><br/>
Senha:<br/>
<input name="senha" type="password" id="senha" size="50“ maxlength="20" /><br/>
<input type="checkbox" name="checkbox" id="checkbox" /> Continuar conectado
</td>
</tr>
</table>
</form>
FORMULARIOS EM HTML
TAG <INPUT>: TYPE “RADIO”
Campo de seleção única
Da mesma forma que ocorre com os campos do tipo checkbox, existe apenas a opção de
selecionar (“marcar”)
campos deste tipo.
Agrupamento de campos de seleção única: atribuição de um mesmo valor para o atributo

NAME destes campos.
Caso um campo do grupo for selecionado, qualquer outro campo do grupo que esteja
selecionado deixará de estar selecionado.
Sintaxe
<INPUT NAME="nomecampo" TYPE="radio" />
Atributos adicionais
TITLE: especificação de legenda a ser exibida, quando do posicionamento do cursor do mouse
sobre o campo.
VALUE: especificação do conteúdo que será enviado, quando da submissão do formulário.
IMPORTANTE: o conteúdo do campo, especificado neste atributo, só será enviado se o campo
for selecionado.
CHECKED: se definido este atributo (com o valor “checked”), o campo estará, inicialmente,
selecionado (“marcado”).
FORMULARIOS EM HTML
TAG <INPUT>: TYPE “RADIO”

<h3 align="center">Questionario?</h3>
<p align="center">Qual seu navegador preferido?</p>
<tr>
<td><input name="navegador" type="radio" id="navegador" value="ie"
checked="checked" />Microsoft Edge<br />
<input name="navegador" type="radio" id="navegador" value="firefox" />Mozilla
Firerox<br />
<input name="navegador" type="radio" id="navegador" value="chrome" />Google
Chrome</td>
</tr>
</table>
</form>
FORMULARIOS EM HTML
TAG <INPUT>: TYPE “FILE”
Campo de upload de arquivos
Aspecto visual: campo de texto não editável acompanhado de um botão, quando
ativado abre uma de janela de diálogo para localização de arquivos no computador do
utilizador, ao selecionar o arquivo, é exibido no campo de texto não editável a localização
do arquivo selecionado.
• Envio do conteúdo do arquivo selecionado, quando da submissão do formulário.
• Para que a transferência do arquivo ocorra corretamente, é necessário a especificação
do atributo ENCTYPE com o valor “multipart/form-data” na tag <FORM>.
Sintaxe
<INPUT NAME="nomecampo" TYPE="file" ENCTYPE = “multipart/form-data” />
Atributos adicionais: os mesmos atributos válidos para campos do tipo texto (vida página
12); eles terão efeito prático sobre o campo de texto não editável:
• SIZE
• MAXLENGTH
• VALUE
• TITLE
FORMULARIOS EM HTML
TAG <INPUT>: TYPE “FILE”
<INPUT NAME=“anexo" TYPE="file" ENCTYPE = “multipart/form-data” />

FORMULARIOS EM HTML
TAG <INPUT>: TYPE “HIDDEN”
Campo oculto (não visível)
Comum seu uso para armazenamento de informações de controle, a serem enviadas

quando da submissão
do formulário.
Manipulação destes campos via linguagem de scripts (JAVASCRIPT, por exemplo)
Sintaxe
<INPUT NAME="nomecampo" TYPE="hidden" />
Atributos adicionais.
VALUE: especificação do conteúdo que será enviado, quando da submissão do formulário
FORMULARIOS EM HTML
TAG <INPUT>: TYPE “HIDDEN”

<input name="testarnome" type="hidden" id="testarnome" value="falso" />
Digite seu endereço de e-mail:
<input name="email" type="text" id="email" size="50" maxlength="50" />
</form>
FORMULARIOS EM HTML
TAG <INPUT>: TYPE “SUBMIT”
Campo clicável
Aspeto visual: botão, quando acionado envia os conteúdos dos campos de

formulário
Sintaxe
<INPUT NAME="nomebotão" TYPE="submit" />
TITLE: especificação de legenda a ser exibida, quando do posicionamento do cursor
do mouse sobre o botão.
VALUE: definição do rótulo (texto) do botão.
FORMULARIOS EM HTML
TAG <INPUT>: TYPE “RESET”
Campo clicável
Aspeto visual: botão ,quando ativado o botão: são restaurados os conteúdos originais
dos campos de formulário.
Sintaxe
<INPUT NAME="nomebotão" TYPE="reset" />
TITLE: especificação de legenda a ser exibida, quando do posicionamento do cursor do

mouse sobre o botão.

FORMULARIOS EM HTML
TAG <INPUT>: TYPE “RESET”
TAG <INPUT>: TYPE “SUBMIT”

…
<td nowrap="nowrap">Digite seu nome:</td>
<td><input name="nome" type="text" id="nome" size="50“ maxlength="50" /></td>
</tr>
<tr>
<td nowrap="nowrap">Digite seu endereço de e-mail:</td>
<td><input name="email" type="text" id="email" size="50“ maxlength="50" /></td>
</tr>
<tr>
<td colspan="2" align="center" nowrap="nowrap">
<input title="Clique aqui para limpar os dados" type="reset" name="button" id="button"
value="Limpar" />
<input title="Clique aqui para enviar os dados" type="submit" name="button" id="button"
value="Enviar" />
…
FORMULARIOS EM HTML
TAG <INPUT>: TYPE “BUTTON”
Campo clicável
Aspecto visual: botão
Ao contrário dos campos do tipo “submit” e “reset”, nenhum evento é acionado quando
do clique em
campos deste tipo, a menos que o próprio utilizador os especifique.
Neste caso, requer-se o uso de linguagens de scripts (exemplo: JAVASCRIPT)
Sintaxe
<INPUT NAME="nomebotão" TYPE="button" />
FORMULARIOS EM HTML
TAG <INPUT>: TYPE “BUTTON”
…
<td nowrap="nowrap">Digite seu nome:</td>
<td><input name="nome" type="text" id="nome" size="50" maxlength="50"/></td>
</tr>
<tr>
<td nowrap="nowrap">Digite seu endereço de e-mail:</td>
<td><input name="email" type="text" id="email" size="50“ maxlength="50" /></td>
</tr>
<tr>
<td colspan="2" align="center" nowrap="nowrap"><input type="submit“ name="datahorario"
id="datahorario" value="Data/Horário“ onclick="alert(new Date())" />
<input title="Clique aqui para limpar o formulário" type="reset“ name="reset" id="reset"
value="Limpar" />
<input title="Clique aqui para enviar os dados" type="submit" name="button“ id="button"
value="Enviar" />
…
FORMULARIOS EM HTML
TAG <BUTTON>
Temos mesmos comportamentos observados com campos <INPUT> do tipo “submit”,
“reset” ou “button”
Rótulo: ao invés de ser especificado a partir do atributo VALUE (como ocorre com os
campos <INPUT>, o texto de exibição deve ser posicionado entre a tag de abertura
<BUTTON> e a tag de término </BUTTON>
Sintaxe
<BUTTON>Rótulo</BUTTON>
Atributos
NAME : chave de identificação para o botão.
ID: chave de identificação para o botão.
TYPE: especificação do comportamento do botão, com os seguintes valores admitidos:
“submit”, “reset” e “button”.
Os comportamento designados por cada um desses valores são idênticos aos
observados em campos <INPUT> que apresentam, respetivamente, os mesmos valores
FORMULARIOS EM HTML
TAG <TEXTAREA>
Área de texto
• Possibilidade de inserção de caracteres por parte do utilizador.
• Ao contrário dos campos INPUT do tipo “text”, não há limitação para inserção de linhas
de texto, em função da possibilidade de uso de quebras de linhas
Campos INPUT do tipo “text”: inserção de apenas uma linha de texto
Outra diferença importante: o conteúdo inicial do campo é posicionado entre a tag de
abertura <TEXTAREA> e a tag de término <TEXTAREA>
Em campos INPUT, o conteúdo inicial é determinado a partir do atributo VALUE
Sintaxe
<TEXTAREA>conteúdo</TEXTAREA>
Atributos
NAME: chave de identificação para a área de texto
ID: chave de identificação para a área de texto
COLS: especificação da quantidade de colunas a serem exibidas
ROWS: especificação da quantidade de linhas a serem exibidas
FORMULARIOS EM HTML
TAG <TEXTAREA>
Área de texto
• Possibilidade de inserção de caracteres por parte do utilizador.
• Ao contrário dos campos INPUT do tipo “text”, não há limitação para inserção de linhas
de texto, em função da possibilidade de uso de quebras de linhas
Campos INPUT do tipo “text”: inserção de apenas uma linha de texto
Outra diferença importante: o conteúdo inicial do campo é posicionado entre a tag de
abertura <TEXTAREA> e a tag de término <TEXTAREA>
Em campos INPUT, o conteúdo inicial é determinado a partir do atributo VALUE
Sintaxe
<TEXTAREA>conteúdo</TEXTAREA>
Atributos
NAME: chave de identificação para a área de texto
ID: chave de identificação para a área de texto
COLS: especificação da quantidade de colunas a serem exibidas
ROWS: especificação da quantidade de linhas a serem exibidas
FORMULARIOS EM HTML
TAG <TEXTAREA>
…
<textarea name="mensagem" cols="39" rows="5“ id="mensagem"></textarea>
…
FORMULARIOS EM HTML
TAG <SELECT>
Campo de seleção
Interatividade: seleção de um ou mais itens (opções) a partir de uma relação de itens (lista
de opções)
Sintaxe
<SELECT>
<OPTION>Item 1</OPTION>
<OPTION>Item 2</OPTION>
...
<OPTION>Item n</OPTION>
</SELECT>
onde
<SELECT>: tag de início (abertura) do campo de seleção
<OPTION>Item N</OPTION>: item do campo de seleção;
entre a tag de abertura e a tag de término, posiciona-se um texto descritivo (rótulo), a ser
exibido quando da
visualização do item.
</SELECT>: tag de término (fim) do campo de seleção
FORMULARIOS EM HTML
TAG <SELECT>
Tag <SELECT>: atributos
NAME: chave de identificação para o campo de seleção.

ID: chave de identificação para o campo de seleção.
mouse sobre o campo de seleção.
SIZE: quantidade de itens (opções) visíveis; se a quantidade de itens definidos para o

campo de seleção
for maior que o valor numérico especificado neste atributo, barras de rolagem são
acrescentadas ou
habilitadas automaticamente.
Valor padrão: 1
MULTIPLE: se especificado, com o valor “multiple”, haverá a possibilidade de seleção de
mais de um item, no mesmo campo de seleção.
FORMULARIOS EM HTML
TAG <SELECT>
…
<select>
<option>Chaves</option>
<option>Vila Pouca de Aguiar</option>
<option>Valpaços</option>
<option>Boticas</option>
</select>
…
FRAMES EM HTML
Geralmente frames são usadas para exibir o menu em uma parte e o conteúdo em outra.
Quando alguém clicar em um link do menu, outra página irá abrir a parte do conteúdo.
TAG PARA FRAMES

frameset - tag que estabelece as caracteristicas das frames, as frames individuais serão
definidas entre elas.
frameset cols="#%, *" - "Cols" estabelece o peso que cada frame tem. No exemplo anterior
estabelecemos que a primeira frame (menu) ocuparia 30% da área usada, e nós usamos o
sinal " * " para indicar ao navegador que o resto, no resto da página mostrará o conteúdo.
frame src="" - o endereço dos arquivos HTML que serão mostrados como menu e conteúdo
<frameset border="0" frameborder="0" framespacing="0" rows="20%,*">
<frame src="titulo.html">
<frameset border="0" frameborder="0" framespacing="0"
cols="30%,*">
<frame src="menu.html">
<frame src="conteudo.html">
</frameset>
FRAMES EM HTML
Exemplo com "Frame name" e "Frame target"
<html>
<head>
<base target="content">
</head>
<frameset rows="20%,*">
<frame name="title" src="title.html">
<frameset cols="30%,*">
<frame name="menu" src="menu.html">
<name="content" src="content.html">
</frameset>
</frameset>
</html>
FRAMES EM HTML
Exemplo com Noresize e scrolling
<html>
<head></head>
<frameset border="2" frameborder="1" framespacing="2" rows="20%,*">
<frame src="title.html" noresize scrolling="no">
<frameset border="4" frameborder="1" framespacing="4"

cols="30%,*">
<frame src="menu.html" scrolling="auto" noresize>
<frame src="content.html" scrolling="yes" noresize>
</frameset>
</frameset>
</html>
TAG STYLE
contém informações de estilo para um documento ou uma parte do documento. As
informações de estilo específico estão contidas dentro deste elemento, geralmente no CSS.
ATRIBUTOS
TYPE - Este atributo define a linguagem de estilo como um tipo MIME (charset
não deve ser especificado). ' text/css' presume se este atributo estiver ausente.
MEDIA - Qual o média deve aplicar-se a este estilo. Deve ser uma consulta de
média, consulte http://dev.w3.org/csswg/css3-mediaqueries.
SCOPED - Se este atributo está presente, então o estilo aplica-se apenas á tag
pai. Se está ausente, o estilo aplica-se ao documento inteiro.
TITLE - Especifica os conjuntos de folhas de estilo alternativa.
DISABLE - se definido, desativa (não se aplica) às regras de estilo para a

Document que são especificadas no elemento.
TAG STYLE
exemplos
Uma folha de estilo simples Uma folha de estilos com escopo

<article>
<style type="text/css">
<div> O atributo com escopo permite incluir
body {
elementos de estilo no meio do documento.
color:red;
As regras internas aplicam-se apenas a tag pai.
}
</div>
<p> Este texto deve ser preto. Se estiver vermelho,
p{
seu navegador não suporta o atributo com escopo
color: red;
definido. </ p>
}
<section>
display: block;
<style scoped>
background-color: #999999;
p { color: red; }
</style>
</style>
<p> Isso deve ser vermelho. </p>
</section>
</article>

UFCD0792 Conteudos

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

UFCD0792 Conteudos

Enviado por

Direitos autorais:

Formatos disponíveis

Criação de páginas para a

“Na internet não existe ninguém feio, existe

❑Avaliação. Continua (30%)

❑Estrutura da página HTML

❑Tag para ligação

❑Ligação local com caminhos relativos e absolutos

❑Ligação a outros documentos na Web e a determinados locais

❑Estilos de carateres, carateres especiais e fontes

❑Quebra de linha de texto

❑Imagens externas e de fundo

❑Atributos das imagens

❑Referência das cores, cor de fundo e de texto

❑Preparação das imagens

❑Ficheiros de som e de vídeo

❑Animação através de ficheiros de imagens GIF e JAVA

❑Desenho de páginas web

❑Ligações, imagens fundos e cores

❑Alinhamento de células e tabelas

❑Dimensão das colunas e tabelas

•A quem se destina (público-alvo)?

•Como será produzido?

•Que tecnologia será utilizada na sua construção?

•Onde será colocado?

•Qual o espaço máximo que poderá ocupar?

•Como será atualizado?

•Que elementos vais incluir: texto, imagens, sons, tabelas, fotografias,

•Decidir qual o n.º páginas do site

•Dividir o conteúdo por paginas, ou seja, organizar

•Qual a estrutura das páginas

•Página principal: deve ser apelativa e informativa!

• Atenção: não exagerar na quantidade de informação por página

• Tipo de estrutura de navegação

• Tipos Sites quanto a temática

Criada pelo britânico Tim Berners-Lee, o acrônimo HTML significa HiperText

O HTML é o componente básico da web, ele permite inserir o conteúdo e

Estes podem ser representar palavras, imagens, vídeos,

Quando conectados, formam uma rede de informações que

As páginas HTML são ficheiros de texto que representam tanto o

<title> – define o título;

<p> – Tag para definir um parágrafo;

<section> – define uma seção;

<article> – define um artigo;

<div> – define uma divisão;

<footer> – define um rodapé;

<nav> – define uma área de navegação (como menus);

<details> – Esconde um texto extra até que este seja requisitado.

<ol> – define uma lista ordenada;

<ul> – define uma lista não ordenada;

<li> – define o item de uma lista;

<input> – define os campos do formulário;

<textarea> – define uma área para o usuário digitar um texto;

<button> – define um botão;

<img> – permite inserir uma imagem no seu documento.

O elemento principal dessa grande árvore é sempre o elemento <HTML>

<link rel=”stylesheet” type=”text/css” href=”estilo.css”>

CORPO DE DOCUMENTO /<BODY> :

ASPECTOS VISUAIS GERAIS

ASPECTOS VISUAIS GERAIS

Se for também for especificado o atributo BGCOLOR, este será ignorado

CORPO DE DOCUMENTO /<BODY> :

ASPECTOS VISUAIS GERAIS

Especificação de uma cor de texto padrão para exibição de textos

Cor padrão (quando não especificado): #000000 (cor preta)