Ufcd 9963

UFCD 9963 Edição web
Atualiza-te
Emília Reis
Conteúdo
❑ Noções básicas sobre sítios na Internet
▪ Criação de documentos HTM
❑ Estrutura de uma página
• Hiperligações
▪ Introdução às folhas de estilos
▪ Inserção de imagens
▪ Criação de rollovers
▪ Importação de conteúdos
▪ Camadas
▪ Formulários
▪ Criação de modelos
▪ Elementos multimédia
▪ Publicação e teste do site
Objetivos específicos
❑ Definir uma estrutura coerente para um site multimédia em
HTML.
❑ Reconhecer a necessidade de um layout intuitivo e
ajustável a diferentes condições de visualização.
❑ Utilizar as ferramentas de controlo da estrutura do site,
utilizando um editor WYSIWYG de HTML.
Objetivos específicos
❑ Identificar a sintaxe dum documento HTML.

❑ Utilizar as diferentes formas de estruturação do layout
gráfico de um site.
❑ Introduzir elementos multimédia
❑ Alterar elementos de apresentação (CSS), e respetivas
formas de ligação aos documentos HTML.
Quiz diagnostico
❑ https://quizizz.com/admin/private
Noções básicas sobre sítios na
internet
Criação de documentos HTM
Noções sobre sítios na Internet
❑ Um sítio é um lugar que serve
para algo ou um espaço ocupado
(ou que pode vir a sê-lo).
❑ A noção de Web, por sua vez, faz
referência à Internet, uma rede de
redes que permite a interconexão
de computadores através de um
conjunto de protocolos denominado
TCP/IP.
❑ Um sítio web, por conseguinte, é um espaço virtual na
Internet.
❑ Trata-se de um conjunto de páginas web que são
acessíveis a partir de um mesmo domínio ou subdomínio
da World Wide Web (WWW)
❑ Os sítios web incluem documentos HTML, fotografias,
sons, vídeos, animações Flash e outro tipo de conteúdos
que se podem partilhar em linha.
❑ A URL raiz do sítio web conhece-se pelo nome de
homepage ou página inicial.
❑ O mais habitual é que esta página inicial facilite o
acesso a todas as páginas do sítio através de
hiperligações.
Exemplo:
❑ O sítio web do jornal português Jornal de Notícias
encontra-se no endereço http://www.jn.pt/paginainicial/. Ou
seja, JN.pt é a página inicial do sítio.
❑ A partir desta é possível aceder às restantes páginas
que compõem o sítio, como o suplemento de Desportos
(http://www.jn.pt/paginainicial/desporto/default.aspx) ou de
Economia(http://www.jn.pt/paginainicial/economia/default.a
spx).
❑ A maior parte dos sítios web oferecem os seus

conteúdos de maneira gratuita.
❑ Outros, em contrapartida, cobram uma subscrição e
exigem uma palavra-passe para o seu acesso. Esse é o
caso de muitos sítios pornográficos, de informação bolsista
ou de jogos online, entre outros serviços.
❑ Para aceder a um sítio web é necessário dispor de um

navegador no computador.
❑ Este é um programa informático que possibilita a
visualização da informação contida numa página web.
Conceito de Página web
❑ Conhece-se por página web qualquer documento que

faça parte de um sítio web e que costuma conter ligações
(igualmente chamadas hiperligações ou links) para facilitar
a navegação entre os conteúdos.
❑ As páginas web são desenvolvidas com linguagens de

marcação como o HTML, as quais podem ser
interpretadas pelos navegadores.
❑ Desta forma, as páginas podem apresentar informação
em diferentes formatos (texto, imagens, sons, vídeos,
animações), estar associadas a dados de estilo ou
conter aplicações interativas.
❑ É possível distinguir as páginas web estáticas (cujos

conteúdos são predeterminados) e das páginas web
dinâmicas (que geram conteúdos no momento de
solicitar informação a um servidor da web através de
linguagens interpretadas como JavaScript).
❑ Um conjunto de páginas web,, forma um sítio web.

❑ As páginas costumam estar reunidas sob um domínio
comum para que o sítio em questão seja acessível a partir
de uma mesma direção na Internet.
❑ Existem ainda aqueles que são conhecidos como “mini

sites” que contam apenas com 3 a 5 páginas web.
❑ O objetivo desses sites é apenas divulgar uma marca e
fornecer um canal de contato com os clientes ou mesmo
fazer a venda de algum produto ou serviço.
❑ A imensa totalidade de páginas que formam os sítios

web dão lugar àquilo que se conhece como World Wide
Web, Web, Rede ou, simplesmente, Internet, que é o
universo virtual onde está reunida a informação digital
do ciberespaço (espaço virtual).
Por exemplo:
❑ A NBA.com é o sítio oficial da National Basketball
Association (NBA).
❑ A sua direção ou URL é http://www.nba.com.
❑ Dentro deste mega sítio, existe uma grande quantidade de
páginas web.
Por exemplo:
❑ Cada equipa tem o seu próprio sítio que, por sua vez,
alberga as páginas web de cada um dos jogadores da
liga.
❑ As notícias, as estatísticas e a informação multimídia
também ocupam várias páginas dentro da NBA.com.
❑ As páginas web (também chamada as apenas de páginas

de internet) formam um site e esse site é hospedado
num servidor que é um computador responsável por essa
hospedagem.
❑É assim que funciona a rede de internet, com
computadores interligados em todo o mundo
formando essa rede e hospedando páginas e sites.
❑ Para uma navegação segura (sem risco de ter seus

dados roubados ou seu computador infetado por vírus, por
exemplo), boa parte dos navegadores possui um recurso
que analisa a veracidade de uma página da internet e
certifica-se de que ela seja segura ou não.
❑ Para isso, um site pode ainda contar com um recurso de
segurança chamado de criptografia.
❑ Os chamados mecanismos de busca como o Google e o

Bing, por exemplo, são responsáveis por organizar as
páginas web e fornecer resultados de acordo com o que
os usuários pesquisam.
❑ As páginas são indexadas nesses mecanismos e
quando um usuário pesquisa por “casinha de cachorro”,
então eles apresentam resultados de acordo com o que é
esperado.
❑ Esses mecanismos (ou motores) de busca são

acessados através dos navegadores web.
❑ É possível, por exemplo, fazer essa mesma pesquisa
acima na barra de busca do Google Chrome ou Firefox ou
acessando diretamente o site do navegador.
O que é o HTML?
❑ O HTML (HyperText Markup Language) é um conjunto
estruturado de instruções, conhecidas por etiquetas ou
tags (em inglês), que dizem a um browser como publicar
uma página web, ou seja, o browser interpreta essas
etiquetas e desenha a página no ecrã.
❑ Estes conjuntos de instruções estão agrupados em
ficheiros de tipo texto, isto é, sem qualquer tipo especial
de formatação.
Que editor utilizar?
❑ A forma mais simples, e básica, de fazer programas em
HTML será a utilização de simples editores de texto
como é o caso, por exemplo, do Notepad.
❑ Os utilizadores mais experientes utilizam diversos tipos de
aplicações, para desenvolverem as partes fundamentais
de uma página em HTML.
Que editor utilizar?
❑ Algumas dessas aplicações permitem que numa primeira
fase o programador faça um desenho gráfico daquilo
que pretende e que posteriormente seja gerado, de uma
forma automática, o código HTML correspondente.
Elementos Etiquetas ou tags
4 conceitos
fundamentais
Atributos e valores Aninhamento (Nesting)

Os quatro conceitos fundamentais
❑ Elementos
▪ Todas as páginas de HTML são compostas por elementos.
Um elemento pode ser visto com um contentor em que é
colocada uma secção de uma página web.
▪ Tudo o que estiver dentro desse contentor fica com as
características desse mesmo elemento.
❑ Elementos
▪ Se, por exemplo, se quiser fazer uma tabela toda a
informação referente a essa tabela terá que estar colocado
no interior do elemento <table> </table>.
❑ Etiquetas ou tags
▪ Os termos elemento ou tag, de uma forma errada são
usados indistintamente.
▪ Um elemento é composto por duas etiquetas: uma a
abrir e outra a fechar.
▪ Apesar de no HTML esta distinção não ser muito
importante já no caso do XHTML ela torna-se fundamental.
▪ Todas as tags são construídas da mesma forma.
▪ A etiqueta inicia-se com o sinal de “menor que” (<)
seguido do nome do elemento e termina com o sinal de
▪ “maior que” (>).
▪ A forma da etiqueta para a abertura de um parágrafo é:
<p>.
▪ A tag de terminação diferencia-se apenas por possuir
uma barra (/) antes do nome do elemento: </p>.
▪ O conteúdo fica entre as etiquetas de início e fim:
▪ Alguns elementos não precisam de uma tag de
terminação porque não incluem qualquer tipo de
conteúdo e são por isso denominados elementos vazios.
É assim que, por exemplo, o elemento de quebra de linha
<br> não requer uma etiqueta de terminação.
▪ As tags <h1>, <h2>, <h3>, <h4>, <h5> e <h6> informam o
browser que se trata de um cabeçalho (h vem de
"heading" - cabeçalho ).
▪ sendo <h1> o cabeçalho de primeiro nível é aquele
apresentado com o maior tamanho de texto,
▪ <h2> o cabeçalho de segundo nível é aquele apresentado
com tamanho de texto um pouco menor
▪ <h6> o cabeçalho de sexto nível é aquele apresentado
com o menor tamanho de texto
▪ Exemplo
▪ <h1>Este é um título</h1> <h2>Este é um
subtítulo</h2>
▪ vai ser apresentado no browser, como mostrado a
seguir:
▪ Este é um título
▪ Este é um subtítulo
▪ Exemplo
▪ Para a maioria dos browsers, é indiferente se usa
maiúsculas, minúsculas ou mesmo uma mistura de
ambas.<COMANDO>, <comando> ou <CoMaNdo>,
normalmente tem o mesmo efeito.
▪ No entanto, como uma boa prática, é usar sempre as
minúsculas.
▪ Exemplo
▪ Deve escrever as suas tags num documento HTML.
Um website é constituído por um ou mais documentos
HTML.
▪ Quando navega na Web, abre diferentes documentos
HTML.
❑ Atributos e valores
▪ Um atributo é utilizado para definir as características de
um elemento e é colocado no interior da tag de abertura
do elemento.
▪ Por exemplo, para atribuir a cor a uma palavra utiliza-se o
elemento FONT em conjunto com o atributo COLOR:
<font color=” “>.
▪ O sinal de igual e as aspas são fundamentais pois
atribuem um valor a um atributo.
▪ A utilização de letras minúsculas ou maiúsculas no
nome dos elementos, tags e atributos é indiferente para a
interpretação que os browsers fazem delas.
▪ Por exemplo:
<p>….</p>é a mesma coisa que <P>….</P>.
▪ Se for escrita uma etiqueta que não exista em HTML ou
que um determinado browser não entenda essa etiqueta
será ignorada não produzindo qualquer output.
❑ Aninhamento (Nesting)
▪ Numa página web existem quase sempre múltiplos
elementos que nunca se devem sobrepor.
▪ Os elementos devidamente aninhados são sempre
independentes uns dos outros.
▪ Veja-se o seguinte exemplo em que tudo está arrumado
ou aninhado:
▪ Uma situação em que há sobreposição, isto é, uma falta
de aninhamento:
Estrutura básica de um programa em HTML
❑ <html> </html> Definem o início e o fim do programa
❑ <head> </head> É o cabeçalho do programa e,
normalmente, não aparece na janela web.
❑ <title> </title> Este elemento está aninhado no HEAD e
escreve o título da página na barra de título no cima da
janela do browser.
❑ <body> </body> Contém o conteúdo principal da página
web.
O documento mais simples em HTML, também
conhecido como documento mínimo, terá a seguinte
estrutura:
A ordem de abertura e fecho das tags, como se pode
ver, não é arbitrária e tem uma sequência hierárquica.
Quando se está a escrever um programa muitas vezes
sente-se a necessidade de fazer alguns comentários a
uma parte específica do código, para tal utilizam-se as tags
<!- - e - ->, os comentários não têm qualquer output.
Estrutura de uma página
Hiperligações
❑ O verdadeiro poder da Internet reside no facto de ser
possível estabelecer ligações (links) entre diferentes peças
de informação, formando uma verdadeira teia (web) de
conhecimento. Esses links de um tipo especial designam-
se por hiperligações
Hiperligações
❑ A World Wide Web utiliza um esquema de endereços
conhecido como URLs (Uniform Resource Locators) para
identificar o local de destino de cada hiperligação. Por
vezes estas ligações também são conhecidas por
âncoras.
❑ Sem esta estrutura não se falaria de HTML mas apenas
de TML (Text Markup Language)!
Ligações a ficheiros locais
Todos os documentos numa única pasta
❑ A ligação a um outro documento pode ser feita a um nível
local (no mesmo computador onde se encontra o
programa HTML em questão) pois não é necessário
navegar na Internet para lhe ter acesso.
Todos os documentos numa única pasta
❑ A âncora mais simples é aquela que liga a um documento
situado na mesma pasta do programa HTML em
funcionamento:
<a href=”ficheiro.html”>texto que se refere a esse link</a>
em q a se refere a âncora (anchor, em inglês) e href a referência
de hipertexto (hypertext reference). Os documentos de tipo HTML
podem ter a terminação html ou htm.
Usando uma imagem como uma hiperligação

❑ As imagens podem ser usadas apenas com fins
decorativos mas também com outros objetivos como, por
exemplo, figuras de fundo, marcas de água, botões ou
hiperligações.

❑ Uma imagem pode ser utilizada como uma hiperligação
colocando simplesmente o elemento <img...> entre um
conjunto de etiqueta de âncora. Por exemplo:
<a href="index.htm".>
<img src="elef1.jpg" alt="Ligação a um site sobre elefantes">

❑ Quando se coloca o atributo border=0 porque não se
pretende uma imagem com bordadura, que é colocada,
por defeito, pelo HTML
<a href="index.htm".>
<img src="elef1.jpg" alt="Ligação a um site sobre elefantes"
border=”0”>
Hiperligações
Com os documentos em pastas diferentes
❑ A etiqueta <a…> permite também a ligação a documentos
HTML que estejam localizados em pastas diferentes
daquele que contém a âncora.
Hiperligações
❑ Suponha-se que as imagens, por uma questão de
organização, estão todas armazenadas numa
determinada pasta, então a sintaxe para a hiperligação
passa a ser:
<a href=”imagens/nome da imagem.gif”>esta imagem está
numa pasta abaixo</a>
Hiperligações
❑ Isto significa que a pasta imagens está localizada um nível
abaixo daquele em que está a funcionar o programa
em HTML que contém a âncora.
Hiperligações
❑ Se for necessário fazer referência a documentos que se
situem em pastas a um nível superior àquele em que
está a funcionar o programa em HTML que contém a
âncora, então a sintaxe passa a ser:
<a href=”../imagens/nome da imagem.gif”>esta imagem está
numa pasta acima</a>
Hiperligações
Ligações a documentos localizados na Internet
❑ A ligação a documentos localizados na web vai fazer
recurso da formatação URL da seguinte maneira:
<a href=”URL”>texto que remete para o link</a>
ou, num exemplo específico:
<a href="http://www.uevora.pt"><b>Universidade de
Évora</b></a>
Introdução às folhas de estilo
Uma Folha de Estilo ou "Style Sheet", funciona
basicamente como um "template" que controla a formatação
dos elementos HTML de uma página.
Alterando a formatação atribuída a uma tag HTML, através
da definição de folhas de estilo, que se sobrepõe à
formatação por defeito utilizada pelo browser para essa tag,
é possível modificar toda a aparência de um conjunto de
páginas HTML, ou seja, é possivel modificar todo um “web
site” recorrendo ás Folhas de Estilo.
Do ponto de vista dos autores de páginas HTML, esta
potencialidade oferece, desde logo, algumas vantagens:
❑ A possibilidade de aplicar formatações extra.

❑ Um controlo superior da aparência das páginas.
❑ A personalização rápida de um "Web site" como um todo,
pois é possível modificar a aparência de todo um site sem
a necessidade de editar as páginas HTML.
Paralelamente, a utilização de Folhas de Estilo permite,
entre outras coisas:
❑ Definir margens e especificar tamanhos de letra e cores de
fundo para o texto.
❑ Deixar de utilizar truques para conseguir realizar tarefas
relativamente simples como definir as margens de um
parágrafo.
Paralelamente, a utilização de Folhas de Estilo permite,
entre outras coisas:
❑ Modificar a aparência de uma só página ou de todo um
site sem, para isso, ter de alterar vários elementos HTML
em cada página.
❑ Utilizar classes para definir variações de cada um dos
estilos de formatação definidos.
Uma style sheet pode ser utilizada de quatro formas
distintas, dependendo das necessidades:
❑ Ligando o documento HTML a uma style sheet. Desta
forma é possível alterar a formatação de várias páginas,
modificando apenas um ficheiro.
❑ Inserindo uma style sheet dentro do documento HTML.
Desta forma é possível alterar a formatação de uma
página, modificando apenas algumas das suas linhas.
Uma style sheet pode ser utilizada de quatro formas distintas,
dependendo das necessidades:
❑ Adicionando styles inline ao documento HTML. O que
proporciona uma forma simples de alterar a formatação de
uma só tag, de um grupo de tags ou de um bloco de
informação do documento.
❑ Importando uma style sheet externa.
Sintaxe Básica
❑ Uma style sheet - seja ela utilizada da primeira forma
("Linked Style Sheet") ou na segunda ("Embedded Style
Sheet") - é composta por uma ou mais definições de
estilo.
❑ Uma definição de estilo é, por sua vez, composta pelo
nome de uma tag HTML (qualquer uma), seguida por uma
lista de propriedades para essa tag, dentro de chavetas.
Sintaxe Básica
❑ Cada uma dessas propriedades é identificada pelo seu
nome, seguido de dois-pontos (:) e pelo seu valor.
❑ Na definição de várias propriedades para uma tag, utiliza-
se o ponto-e-vírgula (;) para as separar.
Sintaxe Básica
Por exemplo, a definição seguinte, altere o estilo de texto da
tag H1:
H1 {font-size: 15pt; font-height: bold}
❑ É portanto possível criar definições de formatação para um
número qualquer de elementos HTML e colocar essas
definições num ficheiro separado ou no próprio
documento.
Linked Style Sheets
❑ Ligar um documento a uma style sheet é bastante simples.
Basta criar o ficheiro com as definições de estilo, gravá-lo
com a extensão .CSS e adicionar um link para esse
ficheiro ao documento.
❑ Desta forma, o ficheiro de definições pode ser utilizado
para controlar a formatação de várias páginas HTML.
Linked Style Sheets
❑ Por exemplo, se a style sheet fosse armazenada no
ficheiro "style.css", armazenado na mesma directoria
que o ficheiro HTML, deveria adicionar ao documento o
seguinte código ao documento, dentro da tag HEAD:
<head>
<title>...</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Embedded Style Sheets
❑ Para inserir uma style sheet num documento, utiliza-se a
tag STYLE, dentro da secção HEAD do documento.
❑ Esta tag recebe apenas um parâmetro, o atributo TYPE,
que deve sempre ter o valor "text/css", de forma a que os
browsers que não suportam style sheets ignorem a sua
definição.
Embedded Style Sheets
❑ Logo após esta tag, seguem-se as definições de estilo:
Estilos Inline
❑ Para beneficiar das potencialidades das style sheets em apenas
algumas das tags de um documento, podem utilizar-se os
estilos inline.
❑ As definições inline de estilos afetam apenas ocorrências bem
definidas de uma tag e são especificadas dentro da própria tag,
usando o atributo STYLE:
<p style="margin-left: 0.5in; margin-right: 0.5in">
Apenas este parágrafo é afectado.
</p>
Estilos Inline
❑ Sempre que um estilo inline entrar em conflito com outro
estilo definido numa "linked" ou "embedded" style sheet, a
sua definição prevalecerá para a tag em causa.
Estilos Inline
❑ Para fazer um estilo inline afetar um bloco de tags
consecutivas, deve utilizar-se o a tag DIV:
<div style="font-size: 8pt; color: blue">
<ul>
<li>Azul/8 pontos.
<li>Também.
</ul>
</div>
Estilos Inline
❑ Eis o resultado:
Azul/8 pontos.
Também.
Estilos Inline
❑ Torna-se, no entanto, importante perceber que a utilização
frequente de estilos inline contribui para aumentar a
complexidade do código de uma página, dificultando a sua
revisão.
❑ Importação de Style Sheets
❑ Uma style sheet externa pode também ser importada para um
documento utilizando a propriedade @import:
@import: url(style.css);
Estilos Inline
@import: url(style.css);
❑ Esta tag deve surgir no início de um bloco STYLE ou de
uma "linked style shet", antes de outra qualquer definição.
Todas as regras definidas na style sheet importada serão
aplicadas antes das regras definidas pela style sheet que
contiver a importação.
Agrupamento de Estilos
Para, por exemplo, atribuir a mesma formatação a várias
tags, é permitido agrupar
H1 {font-size: 15pt; font-weight: bold; color=red}
numa só definição:
H1 H2 H3 {font-size: 15pt; font-weight: bold; color=red}
Classes e Ids
❑ Para definir várias formatações alternativas para uma
mesma tag, utilizam-se classes.
❑ Por exemplo, se desejasse utilizar três cores diferentes
para a tag H1, consoante o contexto, teria de definir três
classes dentro da bloco STYLE :
<style>
H1.red {font:15pt/17pt; color:red}
H1.green {font:15pt/17pt; color:green}
H1.blue {font:15pt/17pt; color:blue}
</style>
Classes e Ids
❑ Existe também a possibilidade de partilhar a mesma
classe por vários elementos de HTML diferentes. Nesse
caso, a definição do estilo poderia ser, por exemplo:
<style>
.clsRed {color:red}
</style>
Classes e Ids
❑ É possível atribuir um determinado estilo a uma instância
especifica de um elemento HTML (definida pelo atributo
ID). Para estes casos, o estilo deve ser definido, por
exemplo, da seguinte forma:
<style>
#idPinkP {color:pink}
</style>
Classes e Ids
❑ Alguns exemplos da aplicação destas definições:
<H1 CLASS="red">Heading vermelho</H1>
<H1 CLASS="green">Heading verde</H1>
<P CLASS="clsRed">Parágrafo vermelho</P>
<I CLASS="clsRed">Itálico vermelho</P>
<P ID="idPinkP">Parágrafo cor-de-rosa</P>
Classes e Ids
❑ É importante conhecer a marca (tag) SPAN, pois esta
permite a limitação de uma zona no código bastante útil
para a aplicação de estilos sem afetar a formatação da
restante página.
Por exemplo:
<P><SPAN class=a_classe_a_aplicar>Só este texto será
afetado pela classe</SPAN>este já não</P>
Cascading Style Sheets
A especificação desenvolvida pelo W3C refere-se a
"cascading style sheets" porque, sendo possível utilizar vários
estilos para controlar o layout de uma página, o browser deve
seguir um certo número de regras - a "cascading order" -
para determinar a precedência de cada estilo e resolver
conflitos.
❑ Segundo essa especificação, o autor das páginas pode
utilizar "linked style sheets", "embedded style sheets" e
estilos inline num documento e, mais ainda, o utilizador
pode ter as suas próprias style sheets.
❑ Por exemplo, uma "linked style sheet" definir que a tag P usa
a cor verde, se o bloco STYLE a definir como azul e a style
sheet do utilizador como preto, o browser terá que decidir
qual a cor a utilizar.
❑ O que acontece na realidade se várias style sheets
resultarem em definições conflituosas?
❑ Regra geral, quando o conflito se situa entre as definições
utilizadas pelo autor e pelo leitor da página, é simples. A
ordem de precedência é a seguinte:
❑ Primeiro, as definições do autor da página.
❑ Depois, as definições do utilizador.
❑ Finalmente, os valores por defeito do browser.
❑ Se, por outro lado, o conflito resultar entre os três
métodos que o autor dispõe para definir os estilos, a
precedência será:
❑ Primeiro, as definições inline.

❑ Depois, as definições contidas no bloco STYLE.
❑ Finalmente, as definições da "linked style sheet".
Melhores práticas
❑ Para utilizar convenientemente style sheets nos seus
documentos, há dois pequenos truques que deve conhecer.
❑ O primeiro prende-se com o facto de, actualmente, apenas o
Microsoft Internet Explorer 3.0 e o Netscape Navigator 4.0
suportarem esta tecnologia. E ainda assim de uma forma
algo incompatível entre eles.
Melhores práticas
❑ O segundo está relacionado com um conceito, a que se
chama de herança ( 'inheritance' ), do qual se pode aproveitar
para produzir nas suas páginas um design simples e
consistente.
Páginas para todos os browsers
❑ Sempre que se utilizarem "embedded style sheets" há um
ponto a que se deve prestar uma especial atenção, de
modo a que as definições dos estilos entre as tags STYLE
não sejam interpretadas como texto pelos browsers que
ainda não suportam frames.
Páginas para todos os browsers
❑ Para resolver este problema o bloco STYLE deve ser incluido
dentro de comentários, da seguinte forma:
<style>

</style>
O conceito de Herança
❑ Todas as tags de um documento HTML seguem uma "cadeia
de herança".
❑ Por exemplo, a tag HTML está num nível superior em
relação a BODY , que, por sua vez, está acima de, por
exemplo, TABLE.
❑ A definição de uma style sheet segue um princípio idêntico.
Se, por exemplo, atribuir um estilo à tag BODY, todas as tags
de nível inferior - tais como as de definição de tabelas e
parágrafos - herdam essa definição.
❑ Logo, para definir certas características gerais do layout de
uma página - como, por exemplo, a font a utilizar - deve
atribuir essas propriedades a BODY:
BODY { font: 10pt/11pt Arial, Helvetica; background:
URL(bgcolor.gif); margin-left: 0.5in; margin-right: 0.5in }
Fontes
❑ As folhas de Estilos permitem a definição da várias
propriedades relativas á fonte a utilizar, tal como a definição
de famílias de fontes, o tamanho, o estilo, o espaçamento,...
Fontes
❑ Comandos das fontes:
font-family
font-size
font-style
font-weight
font-variant
podendo ser usado um comando que permite a aplicação de
todos os atributos relativos aos comandos mencionados que é o
comando: font
Fontes
Famílias de fontes:
❑ A definição de uma lista de fontes permite que quando a
página é visualizada, o browser utilizará a uma das fontes
definidas tendo em consideração a ordem.
❑ Esta funcionalidade permite que, quando o browser do
utilizador não suporta a fonte definida em primeiro lugar,
irá verificar se suporta a segunda, caso não se verifique irá
utilizar a terceira.
Fontes
Famílias de fontes:
❑ É boa prática colocar como terceira fonte, uma família
genérica de fontes ( Serif, Sans-serif, Cursive, Fantasy,
Monospace ).
❑ Exemplo deste comando:
font-family: Arial, Helvetica, Sans-serif;
Fontes
Tamanho das fontes:
❑ Este comando permite a definição do tamanho relativo ou
absoluto das fontes utilizadas numa página.
Fontes
Tamanho das fontes:
❑ Os tamanhos absolutos consistem em valores pré definidos e
que são (do mais pequeno para o maior):
xx-small
x-small
small
medium
large
x-large
xx-large
Fontes
Tamanho das fontes:
❑ Podendo também ser introduzido o valor em pontos, cm ou
in. Exemplos:
font-size: 10pt
font-size: xx-small
Fontes
Tamanho das fontes:
❑ Os tamanhos relativos podem ser utilizados várias
vezes de modo a conseguir o incremento (ou decremento)
desejado do tamanho da fonte.
larger
smaller
Fontes
Tamanho das fontes:
❑ Também podem ser utilizadas percentagens para a
definição de um tamanho relativo.
❑ Exemplos:
font-size: larger
font-size: 100%
Fontes
Estilo das fontes:
❑ Este comando define se a fonte terá o estilo
normal
italico
oblique
❑ Aplicação deste comando:
font-style: italic
Fontes
Espessura das fontes:
❑ Este comando tem estabelecidos limites de valores (
entre 100 e 900, com incrementos de 100 ) que aceita.
❑ Este comando também tem valores pré-definidos para
atributos relativos:
bolder
lighter
Fontes
Espessura das fontes:
❑ Este comando também tem valores pré-definidos para
atributos absolutos:
extra-light
light Aplicação do comando é a seguinte:
demi-light
font-weight: bold
medium
demi-bold
bold
extra-bold
Fontes
Variações de fontes:
❑ Este comando é utilizado para selecionar a variação da fonte
utilizada. Os únicos atributos suportados por este comando
são:
small-caps - que mostra as letras maiúsculas com um tamanho
mais pequeno.
normal - não aplica nenhuma variação.
Fontes
O comando font:
❑ Este comando permite a aplicação de todos os estilos
mencionados anteriormente simultaneamente.
❑ Para além disto também aceita um atributo (em conjunto
com o font-size) que define o espaço entre duas linhas, o
'line-height'. Um exemplo da utilização do comando font para
definição do estilo da fonte num parágrafo é:
P { font:italic bold 18pt/24pt "Arial, Helvetica"}
Em que 18pt/24pt significa font-size/line-height.
Decoração de texto
O comando 'text-decoration' permite a definição de efeitos a
aplicar a texto. Os atributos deste comando são:
▪ blink - piscar o texto
▪ line-trough - linha a meio das letras
▪ overline - linha por cima do texto
▪ underline - linha por baixo do texto
▪ none - faz com que o texto não tenha decoração (um exemplo
da aplicação deste estilo é o índice deste módulo, em que o
texto são links e com a aplicação deste estilo, não têm a
tradicional linha na parte inferior)
Um exemplo da aplicação deste comando:
A:link, A:active, A:visited { text-decoration: none }
este exemplo retira a habitual linha dos links em que seja

aplicado este estilo.
Transformação de texto
Este comando determina a transformação a aplicar ao texto
relativamente ao tamanho das letras (maiúsculas ou minúsculas).
Os atributos deste comando são:
• capitalize - capitalização das palavras
• uppercase - tudo em maiúsculas
• lowercase - tudo em minúsculas
• none - não aplica transformações
Exemplo da aplicação deste comando:
text-transform: uppercase;
Espaçamento de palavras
❑ Permite definir o espaço a introduzir entre palavras.
❑ O valor de defeito é 'normal' em que o espaço a utilizar é o valor
de defeito do browser.
❑ O utilizador tem a liberdade de especificar um qualquer valor de
espaçamento nas seguintes unidades:
polegadas (in) centímetros (cm)
milímetros (mm) pontos (pt)
pixels (px) em (em)
picas (pc)
Exemplo: word-spacing: 10pt;
Espaçamento de letras
❑ Este comando tem um funcionamento igual ao espaçamento de
palavras.
Exemplos:
P {letter-spacing: 1px}
Alinhamento vertical
❑ Este comando permite controlar o posicionamento vertical de
texto e imagens. Os atributos aceites por este comando são:
baseline sub super
top text-top middle
bottom text-bottom
Exemplo:
P { vertical-align: text-top }
Alinhamento de texto
❑ Define o alinhamento horizontal do texto inserido num elemento
como por exemplo o parágrafo. Os atributos deste comando
são:
• left - alinhamento á esquerda
• right - alinhamento á direita
• center - alinhamento ao centro
• justify - texto justificado
Exemplo:
DIV { text-align: center }
Identação de texto
❑ O comando 'text-ident' define a identação da primeira linha do
texto inserido bloco (ex. tabela).
❑ O valor pode ser definido em unidades (cm,px,pt,...) ou em
percentagem, relativamente á largura do bloco. O valor de
defeito é 0 (zero), ou seja, não é aplicada identação.
❑ Este comando também aceita valores negativos o que permite
que o texto seja colocado fora do bloco em que está inserido.
Exemplos:
P { text-ident: 1cm }
P { text-ident: -20px }
Margens
❑ As folhas de estilo disponibilizam quatro comandos para
formatação de margens:
margin-top
margin-right
margin-bottom
margin-left
❑ mais o comando 'margin' que permite substituir o uso de todos
os comandos 'margin-xxxx'.
Margens
❑ Os valores das margens são definidos nas unidades, também
podendo ser definidos em termos de percentagem
(relativamente á largura do bloco).
❑ Este comando aceita um atributo 'auto' em define que será o
browser a tentar determinar automaticamente as margens a
utilizar. Tal como o 'text-ident', este comando também aceita
valores negativos.
Exemplos:
BODY { margin-top: 50px }
BODY { margin-top: 50px; margin-bottom: 30px }
BODY { margin: 50px, 5px, 10px, 5px }
Enchimento
❑ Este comando permite definir o espaço entre os contornos de
um elemento e o seu conteúdo. Sendo os comandos:
padding-top
padding-right
padding-bottom
padding-left
Enchimento
❑ bem como o comando 'padding' que substitui os anteriores.
Este comando permite com a utilização de apenas um valor
estabelecer o enchimento, ou seja,
DIV { padding: 10px }
significa que entre o conteúdo desta divisão e os seus contornos
vai existir um espaço de 10 pixels em relação a todos os contornos
(topo, direita, baixo, esquerda ). No entanto também é possível
definir diferentes quantidades de enchimento para um bloco:
DIV { padding: 10px 5px 15px 5px }
Float:
Este comando, que significa 'flutuação', influência o
alinhamento horizontal dos elementos.
Faz com que estes se aproximem das margens do elemento que
os contem, sendo muito utilizado para a formatação de imagens.
Os atributos suportados por este comando são:
• left
• right
• none ( atributo de defeito )
Por exemplo:
IMG { float: right }
Listas
Se for usado simplesmente HTML, o aspeto das listas (<ol> e
<ul>) será sempre bastante limitado aos marcadores
disponibilizados pelo HTML (quadrado, circulo e disco) .
As CSSs permitem que este situação se modifique.
Comandos das listas:
Existem os três seguintes comandos
list-style-image
list-style-position
list-style-type
Listas
Se for usado simplesmente HTML, o aspeto das listas (<ol> e
<ul>) será sempre bastante limitado aos marcadores
disponibilizados pelo HTML (quadrado, circulo e disco) .
As CSSs permitem que este situação se modifique.
Comandos das listas:
Existem os três seguintes comandos
list-style-image
list-style-position
list-style-type
e o que resume os anteriores:
list-style
Inserção dos comandos
Os comandos podem ser colocados individualmente em cada
um dos seguintes elementos <OL>, <UL> e <LI> da seguinte
forma:
STYLE="list-style-image: qualquercoisa"
Ou então no bloco de estilos (inicio da página ou ficheiro
separado) sendo o formato:
<STYLE>
UL {list-style: circle inside lower-alpha}
</STYLE>
Inserção de imagens (List-Sytle-
Image):
❑ Este comando permite o uso de uma imagem exterior como
identificador de lista (bullet).
❑ Este comando tem 2 atributos, um que indica o URL da
imagem a utilizar e outro que indica que não seja usada
nenhuma imagem, "none".
<UL STYLE="list-style-image: url(setafrente.gif)">
<LI> Olá
<LI> Adeus
<LI STYLE="list-style-image: none"> Ainda por aqui
</UL>
Inserção de imagens (List-Sytle-
Image):
❑ o que resulta em:
Olá
Adeus
Ainda por aqui
Neste exemplo é definido que seja usada a imagem 'setafrente.gif'
como identificador dos dois primeiros elementos da lista.
O terceiro elemento apresenta o identificador normal pois o
atributo de imagem foi substituído por "none", ou seja, para não
usar nenhuma imagem.
Posicionamento (List-Sytle-Position):
❑ Este comado tem dois atributos ("inside" e "outside") que
definem o posicionamento do texto relativamente ao
identificador da lista (bullet), quando há uma mudança de linha.
<UL>
<LI> Este é um elemento longo para que o uso deste comado seja
evidente
<LI STYLE="list-style-position: inside"> Este é um elemento longo
para que o uso deste comado seja evidente
<LI STYLE="list-style-position: outside"> Este é um elemento longo
para que o uso deste comado seja evidente
</UL>
Posicionamento (List-Sytle-Position):
▪ Este é um elemento longo para que o uso deste comado seja
evidente
▪ Este é um elemento longo para que o uso deste comado
seja evidente
▪ Este é um elemento longo para que o uso deste comado seja
evidente
Tipo (List-Sytle-Type):
❑ Este comado permite a definição do identificador a usar para
toda a lista ou apenas para um elemento. Começando pelas
listas não ordenadas (<ul>):
<UL STYLE="list-style-type: square">
<LI> item 1
<LI> item 2
<LI> item 3
</UL>
▪ item 1
▪ item 2
▪ item 3
❑ O atributo usado foi o "square"
❑ Existindo mais dois o "circle" e o "disc". Qualquer combinação é
possível, por exemplo:
<UL>
<LI STYLE="list-style-type: circle"> item 1
<LI STYLE="list-style-type: square"> item 2
<LI STYLE="list-style-type: disc"> item 3
</UL>
❑ O que resulta em:
item 1
item 2
item 3
❑ Quanto ás listas ordenadas (<ol>) os atributos disponíveis
são:
decimal: contagem decimal
lower-alpha: letras pequenas
upper-alpha: letras grandes
lower-roman: numeração Romana com letra pequena
upper-roman: numeração Romana com letra grande
❑ Sendo a sua aplicação semelhante á dos estilos das listas
não ordenadas:
<OL>
<LI STYLE="list-style-type: decimal"> item 1
<LI STYLE="list-style-type: lower-alpha"> item 2
<LI STYLE="list-style-type: upper-alpha"> item 3
<LI STYLE="list-style-type: lower-roman"> item 4
<LI STYLE="list-style-type: upper-roman"> item 5
</OL>
1. item 1
b. item 2
C. item 3
iv. item 4
V. item 5
❑ Para simplificação dos comados a escrever pode ser usado o
comando "list-style" seguido dos atributos cuja lista se
pretenda que possua.
❑ Um dos fatores que possibilita isto é de que nenhum dos
atributos que cada comando aceita ser igual, ou seja, para
formatar um lista basta definir uma linha com o comando
"list-style" seguido dos atributos referentes a cada um dos
comando.
❑ Por exemplo:
<OL STYLE="list-style: upper-roman outside">
<LI> item 1
<LI> item 2
<LI> item 3
</OL>
I item 1
II item 2
III item 3
Cores e imagens de fundo
❑ Cor de fundo de uma página:
❑ Para definir a cor de fundo para uma página utilizando os
comandos das Folhas de Estilo basta definir no BODY o
comando 'background-color' seguido da referência á cor que se
pretende utilizar.
BODY {background-color: #FFFFFF;}
❑ Ou em alternativa definir na própria pagina após a tag
BODY:
<body style="background-color:white">
❑ Códigos das cores (nome + valor hexadecimal):
❑ Cor de fundo de texto:
❑ A colocação de cores de fundo para texto pode ser realizada de
dois modos:
1. Atribuir cores de fundo a tags de HTML relativas a
propriedades de texto, como por exemplo ao itálico ou ao bold. O
problema deste método é que, sempre que se pretender colocar
cor de fundo no texto é necessário aplicar uma formatação que
tenha uma cor associada.
Por exemplo:
<STYLE TYPE="text/css">
I {background-color: #ffff00;}
B {background-color: #00ffff;}
</STYLE>
2. O outro método, o mais eficaz, é a definição de classes cujos
comandos são a definição de cores de fundo, as quais podem ser
invocadas para alterar a cor de fundo do texto ( utilizando a tag
<span> ou <font> ) sem influenciar a formatação deste.
Por exemplo:
.blue {background-color: #0000ff;}
</STYLE>
Com a definição de uma classe em que é definida a cor de
fundo é possível aplicar essa cor a uma porção de texto utilizando
a tag FONT
<FONT CLASS="blue">texto</FONT>
ou a tag SPAN
<SPAN CLASS="blue">texto</SPAN>
O resultado é o seguinte:
❑ As Folhas de Estilo também permitem a utilização de imagens
como fundo para texto. Usando a seguinte imagem
❑ e o comando 'background-image' seguido da definição da

localização do ficheiro de imagem, da seguinte forma:
STYLE="background-image: url(imagens/background2.gif)“
É necessário colocar este estilo na tag <P> para que funcione da
seguinte forma:
Imagens como fundo de páginas:
❑ Em HTML simples para definir uma imagem como fundo de
uma página bastava adicionar o comando
BACKGROUND="imagem.gif" ao <BODY> da página.
❑ Utilizando as Folhas de Estilo o comado a utilizar é o
'background-image' seguido do URL da imagem a utilizar.
BODY {background-image: url(imagem.gif); }
</STYLE>
Ou em alternativa definir na própria pagina após a tag BODY:
<body style="background-image: url(imagem.gif)">
❑ Utilizando as Folhas de Estilo o comado a utilizar é o
'background-image' seguido do URL da imagem a utilizar.
BODY {background-image: url(imagem.gif); }
</STYLE>
Ou em alternativa definir na própria pagina após a tag BODY:
<body style="background-image: url(imagem.gif)">
Utilizando a imagem exemplo da aplicação deste estilo terá o
seguinte aspeto:
Repetição de imagens:
❑ Para definir o tipo de repetição da imagem é necessário a
inclusão de um novo comando, 'backgroung-repeat' cuja
aplicação é feita da seguinte forma:
BODY {background-image: url(imagem.gif); background-repeat:
atributo; }
</STYLE>
❑ Os atributos aceites por este novo comando são os
seguintes:
• no-repeat - coloca a imagem apenas uma vez (não repete),
exemplo
❑ Os atributos aceites por este novo comando são os seguintes:
▪ repeat-x - repete a imagem horizontalmente, exemplo
❑ Os atributos aceites por este novo comando são os seguintes:
• repeat-y - repete a imagem verticalmente, exemplo
Posicionamento da imagem de fundo:
❑ Esta funcionalidade apenas se aplica ao Internet Explorer 4.0
(ou melhor) e permite a colocação da imagem de fundo em
coordenadas especificas da página, utilizando o comando:
background-position: ##px ##px;
❑ Também poderão ser utilizadas percentagem na definição da
localização em vez de pixels ( ##% ##% ). A aplicação deste
comado é feito da seguinte forma:
BODY {background-image: url(background.gif); background-
repeat: no-repeat; background-position: 200px 200px;}
</STYLE>
❑ O resultado é o seguinte
❑ Um efeito interessante pode ser obtido se for retirado o
comando 'background-repeat' .
Imagem de fundo fixa:
▪ Uma outra funcionalidade que as Folhas de Estilo permitem é
fixar a imagem de fundo, ou seja, quando o conteúdo de uma
página é maior que a área disponível para a visualizar é
necessário deslocar o conteúdo.
▪ Este comando permite que apenas os elementos definidos no
<BODY> se desloquem e a imagem de fundo permanece fixa.
❑ Sendo o comando:
background-attachment: fixed;
Imagem de fundo fixa:
Mais uma vez, este comando actualmente apenas funciona no
Internet Explorer 4 (ou melhor). Por exemplo:
BODY {background-image: url(background.gif); background-
repeat: no-repeat; background-position: 200px 200px; background-
attachment: fixed;}
</STYLE>;
Posicionamento de imagens:
❑ Para definir a posição de uma imagem utiliza-se como
referência o canto superior esquerdo da imagem. A definição
das coordenadas da imagem são relativas ao limite
esquerdo e superior da página.
❑ Esta nova janela mostrará uma imagem colocada a 180 pixels
da margem esquerda da página e a 50 pixels do topo.
❑ O código que permite este posicionamento é o seguinte:
<IMG src="imagens/feup.jpg" style="left: 180px; top: 50px; position:
absolute" width="56" height="64">
❑ Sendo a explicação:
❑ IMG - tag que define que o elemento é uma imagem
❑ STYLE - define que o que se segue são comados de estilo
❑ POSITION:ABSOLUTE - define que a imagem irá ser colocada
exatamente nas coordenadas definidas. Se texto ou outra
imagem já estiverem nas coordenadas definidas, este novo
elemento irá ser colocado sobre estes.
TOP:50px;LEFT:180px - as coordenadas relativas á página.
WITH="56";HEIGHT="64" - a altura e largura da imagem.
❑ Os outros atributos possíveis para o comando 'position' são:

▪ relative - permite que a posição do elemento seja relativa á sua
posição natural no documento, este atributo pode ser confuso
pelo que é pouco utilizado.
• static - coloca os elementos pela ordem em que são definidos
na página (atributo de defeito)
Molduras
❑ Comandos para as molduras:
▪ As três principais instruções são:
Border-Width
Border-Color
Border-Style
Molduras
▪ A espessura, a cor e o estilo são os três atributos que o
utilizador pode manipular para obter o efeito desejado.
▪ No entanto não é necessário escrever os comandos por inteiro,
bastando escrever 'border' seguido dos atributos, por exemplo
para um bloco de texto:
<P STYLE="border: double #CCFFCC 20px">
Portugal, um jardim
á beira mar plantado
</P>
Molduras
▪ Surge com a moldura:
▪ A explicação da sequência de atributos é a seguinte:

▪ o primeiro é o estilo, o segundo a cor e finalmente a
espessura. No entanto se for preferência do utilizador também
poderão serem escritas as instruções completas: "border-style:
double; border-color: #CCFFCC; border-with: 20px"
Molduras
❑ Inserção dos comandos:
❑ Como sempre as instruções para a colocação de molduras
podem ser colocados diretamente no elemento de HTML (como
no exemplo anterior), ou num bloco de estilos. Sendo o formato:
<STYLE>
P {border-style: ridge}
</STYLE>
Molduras
❑ Inserção dos comandos:
❑ Com este estilo todos os parágrafos irão ter uma moldura igual.
Para a atribuição da mesma moldura a vários elementos de
HTML bastara:
<STYLE>
P, IMG {border-style: ridge}
</STYLE>
❑ Neste caso todos os parágrafos e imagens (tags P e IMG) irão
partilhar o mesmo estilo de molduras.
Molduras
❑ Estilos disponíveis:
❑ Quanto á espessura podem ser utilizados os valores em pixels,
acompanhados de 'px', ou então os atributos pré-definidos:
"thin","medium" e "thick".
Molduras
❑ Quanto aos estilos, existem 8 tipos definidos:
▪ dashed (suportado por browsers para MAC)
▪ dotted (suportado por browsers para MAC)
▪ double
▪ groove
▪ inset
▪ outset
▪ ridge
▪ solid
Molduras
❑ Exemplo da aplicação dos estilos (para um contorno com
espessura de 10px e cor #0000FF) :
Criação de rollovers
O que é um Rollover?
❑ O efeito rollover tem como função trocar uma imagem por
outra quando o usuário passa o rato sobre ela. É conhecido
por ser um recurso que pode incrementar uma página ou um
site de uma forma significativa.
❑ A maneira mais comum de se obter este efeito é através de um
código no JavaScript, ou apenas com CSS (Cascading Style
Sheets).
1º passo: criar uma imagem
❑ Diferença entre o rollover com CSS e o efeito com JavaScript:
ao invés de duas figuras, tem apenas uma, contendo a imagem
nos seus dois estados, que terá a posição alterada quando o
usuário soltar o evento.
❑ Num editor de imagem, cria-se uma em que uma seja
diferente da outra, visto que o efeito rollover funciona assim
que o cursor do rato é posto em cima da imagem que irá
aparecer no site.
2º passo: criar um arquivo HTML
2º passo: criar um arquivo HTML
❑ É importante para exibir a imagem usar um link, pois assim,
garante-se que o usuário com as imagens ou o CSS
desabilitado no navegador consiga aceder ao link sem
problema.
3º passo: criar um arquivo CSS
Com o CSS, transformamos um link em uma imagem:
❑ O atributo loading="lazy" width: 207px; define a largura da
imagem.
❑ No primeiro passo definiu-se os dois estados da imagem
no mesmo arquivo; neste passo, a imagem terá apenas metade
da sua altura, já que a parte de baixo "troca de lugar" com a
parte de cima no momento em que o efeito rollover acontece.
❑ É importante então, medir com atenção o tamanho da imagem
para dividi-la exatamente ao meio, se não, o efeito pode ter
falhas.
❑ O atributo overflow: hidden; define que o link terá exatamente
o tamanho definido, e que qualquer "resto" de imagem é
cortado.
❑ No atributo background: background: url(rollover.gif) top left
no-repeat; é definida a imagem de O atributo display: block;,
que vem logo abaixo, transforma-se no nosso link em um
"bloco", e o text-indent: 10000px; esconde o texto do link.
.
❑ O atributo background-position: bottom left; define que, ao
passar o rato por cima da imagem, ela alinha-se pela base e à
esquerda, exibindo assim a metade de baixo do arquivo.
❑ Depois do código estar criado, salva-se o arquivo CSS.
Formulários
Os formulários HTML são usados para obter os dados
introduzidos pelos utilizadores.
<form>
....
form elements
....
</form>
Formulários
Um formulário comporta vários elementos:
❑ O <input> é o elemento mais importante de um formulário e
pode ser de vários tipos: text, submit e radio
<form name="form1" method="post" action="">

<input type="text" name="nome" id="nome" size="40"
maxlength="40">
</form>
Formulários
<form name="form1" method="post" action="">

<input type="submit" name="enviar" id="enviar" value="Enviar">
</form>
Formulários
Formulários
Exemplo
Formulários
Exemplo
Formulários
Vertical form
Formulários
Vertical form
Formulários
Inline form
Formulários
Inline form
Elementos multimédia
❑ HTML é uma linguagem que nos permite introduzir vários
elementos em nossa página da web usando tags.
▪ <img>
É o mais comum inserir imagens multimídia HTML.
Assim como as outras tags para incorporação de mídia em HTML,
ela possui um atributo src que determina a localização do arquivo
que queremos incorporar. Esta tag também possui o atributo alt .
▪ <imagem>
Representa um contêiner de mídia HTML que fornece várias
fontes ou atributos <source> para o elemento img contido nele. Ou
seja, dentro do container podem existir diferentes versões de uma
imagem ou até mesmo imagens diferentes.
Isso permite que os autores do código indiquem ao navegador
qual imagem usar com base em fatores como densidade de pixels,
tamanho de exibição e formato da imagem.
▪ <figura>
A diferença entre a tag <figure> e a tag <img> é baseada no
elemento <figcaption>.
Este elemento nos permite colocar uma legenda ou legenda
diretamente na figura que queremos inserir. Isso significa que a
figura e o pé andam juntos e fazem parte do mesmo elemento.
Além disso, o <figcaption> em tags HTML pode ser usado com
elementos que não são necessariamente uma imagem.
❑ Incorporar vídeos
▪ Ao inserir esse atributo na tag de mídia HTML, o vídeo iniciará
automaticamente assim que possível, sem pausa para
download.
▪ Em alguns navegadores, a reprodução automática não funciona
sem inserir o atributo <mute>, o que faz com que ele inicie sem
áudio.
❑ Controles
▪ Controls é uma das tags HTML que informa ao navegador para
exibir os controles para o elemento de mídia. Normalmente,
eles são compostos por um botão de reprodução e pausa e um
controle de rolagem para controlar o volume.
❑ Controles
▪ Laço
Se este atributo estiver presente, o navegador procurará uma
maneira de iniciar o vídeo novamente no momento em que o vídeo
terminar.
▪ Largura
É outra das tags HTML ou elementos HTML que definem a largura
da área em que o vídeo é reproduzido.
❑ Inserir áudio
A tag <audio> nos permite inserir áudio em nosso documento
HTML.
Nesse caso, é fundamental colocar o atributo controls para que
possamos ver onde está o áudio na página web. Isso também é
importante para garantir que o navegador possa controlar quando
parar o áudio se quisermos colocar autoplay , com o formulário
para inserir áudio em HTML.
❑ Inserir faixas
❑ A tag <track> dos elementos HTML é usada como um
elemento filho das tags de áudio e vídeo para colocar canais de
texto ou dados temporizados nesses elementos.
❑ Eles são incorporados no formato WebVTT (.vtt) e possuem
dois atributos principais:
Padrão
É outra das tags HTML que define que as legendas ou o conteúdo
dentro da trilha devem estar automaticamente presentes no
elemento, a menos que o navegador escolha o contrário.
Tipo
Define como este elemento deve ser utilizado; se não existir no
código, o navegador assumirá que deve ser usado como legenda
entre os elementos HTML.
Publicação e teste do site
Sites para testar e compartilhar seu código
CodePen https://codepen.io/
Code Sandbox https://codesandbox.io/
Sololearn https://code.sololearn.com/
GitHub Pages https://pages.github.com/

Ufcd 9963

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

Ufcd 9963

Enviado por

Direitos autorais:

Formatos disponíveis

UFCD 9963 Edição web

❑ Identificar a sintaxe dum documento HTML.

❑ A maior parte dos sítios web oferecem os seus

❑ Para aceder a um sítio web é necessário dispor de um

❑ Conhece-se por página web qualquer documento que

❑ As páginas web são desenvolvidas com linguagens de

❑ É possível distinguir as páginas web estáticas (cujos

❑ Um conjunto de páginas web,, forma um sítio web.

❑ Existem ainda aqueles que são conhecidos como “mini

❑ A imensa totalidade de páginas que formam os sítios

❑ As páginas web (também chamada as apenas de páginas

❑ Para uma navegação segura (sem risco de ter seus

❑ Os chamados mecanismos de busca como o Google e o

❑ Esses mecanismos (ou motores) de busca são

Elementos Etiquetas ou tags

Atributos e valores Aninhamento (Nesting)

Usando uma imagem como uma hiperligação

Usando uma imagem como uma hiperligação

Usando uma imagem como uma hiperligação

❑ A possibilidade de aplicar formatações extra.

❑ Primeiro, as definições inline.

este exemplo retira a habitual linha dos links em que seja

❑ e o comando 'background-image' seguido da definição da

❑ Os outros atributos possíveis para o comando 'position' são:

▪ A explicação da sequência de atributos é a seguinte:

<form name="form1" method="post" action="">

<form name="form1" method="post" action="">

Você também pode gostar