Escola Secundária c/ 3ºCEB de Ponte de Sor MÓDULO 2: Linguagem de Programaç
Programação I (HTML)
Curso Profissional Té
Técnico de Multimé
Multimédia Conteúdos
> Construção base de páginas web.
Sistemas de Informação > Estrutura de páginas web.
> Etiquetas comuns de páginas web.
> Hiperligações.
MÓDULO 2 - Linguagem de Programação I
> Integração de imagens.
(HTML)
> Propriedades e formatação de páginas web.
<html>
<head> > Utilização e formatação de tabelas.
<title>Título da Página</title>
</head> > Utilização de frames e iframes.
<body>
... > Utilização de formulários.
....
.............
Texto, links e imagens a publicar.
> Conceitos de eventos e javascript aplicados a páginas web.
.............
.... > Utilização de cascading style sheets.
...
</body> > Publicação de sites e gestão de conteúdos.
</html>
1 2
Carga Horária: 30 Horas 40 TL de 45min
O que é o HTML (Hyper Text Markup Language)? Construção base de páginas web
HTML (Hyper Text Markup Language) As páginas web são construídas a partir de um vulgar editor
de texto (Bloco de Notas)
HTML é uma linguagem que permite criar páginas web.
Esta linguagem é constituída por um conjunto de etiquetas O ficheiro onde é incluído o código HTML é um arquivo de
(tags em inglês) que delimitam determinadas áreas da texto e deve ser gravado com a extensão .html ou .htm
página, que se chamam elementos. (Exemplo: [Link])
As etiquetas funcionam normalmente aos pares existindo
Posteriormente basta abrir a partir do Internet Explorer, o
uma etiqueta de abertura ou de início antes do elemento,
e uma etiqueta de fecho ou de fim depois do elemento. Firefox ou outro browser
3 4
Estrutura de páginas web Etiquetas (tag) comuns de páginas web
Uma página básica HTML deve ter pelo menos a seguinte
estrutura de comandos: A tag é iniciada pelo símbolo "<" e terminada pelo símbolo ">“
<html>
<head>
Entre cada símbolo é inserido uma instrução de comando
<title>Título da Página</title>
</head>
A tag de fim tem sempre uma barra "/" depois do símbolo "<“
<body>
...
.... A primeira tag a abrir é a última a fechar.
.............
Texto, links e imagens a publicar.
.............
....
...
</body> 5 6
</html>
Etiquetas (tag) comuns de páginas web Etiquetas - Títulos
<html> Identifica títulos, usados para dividir secções do texto. Existem
<head> <html> e </html>: abrem e
<title>Título da Página</title>
6 níveis de títulos. São numerados de h1 a h6, que são exibidos
</head> fecham uma página HTML; em fonte maior que a fonte normal. Os marcadores de título
<body> podem ser alinhados.
... <head> e </head>: marcam o
....
............. início e o fim da secção de Exemplo:
Texto, links e imagens a publicar. <html>
.............
cabeçalho;
.... <title> e </title>: marcam o <head>
... <title> Títulos </title>
</body> início e o fim da definição do título
</html> </head>
da página HTML; <body>
<h1> Aqui vai o título 1</h1>
<body> e </body>: marcam o início e o fim do corpo da <h2> Aqui vai o título 2</h2>
página, onde consta todo o conteúdo da página HTML, desta <h3> Aqui vai o título 3</h3>
secção fazem parte textos, figuras, tabelas, imagens e links <h4> Aqui vai o título 4</h4>
<h5> Aqui vai o título 5</h5>
para outras páginas e/ou documentos em HTML.
<h6> Aqui vai o título 6</h6>
7 </body> 8
</html>
Etiquetas – Parágrafo & Quebra Linha Etiquetas – Linhas Horizontais
<p> texto </p> Delimita um parágrafo. <hr> Utilizada para dar destaque a títulos.
É possível omitir o elemento de fim </p> sem que isto cause O marcador <hr> (Horizontal Line) pode ser utilizado com ou
problemas. O resultado é uma linha em branco antes do início sem parâmetros. O comprimento da linha width pode ser a
do parágrafo. largura exacta da linha ou uma percentagem da largura da tela.
A tag <p> possui um atributo opcional o ALIGN que serve O padrão para a linha é de uma linha sombreada. No caso de
não desejar uma linha sombreada é necessário acrescentar o
para configurar o alinhamento do parágrafo. Este atríbuto pode
atributo noshade ao final dos atributos do marcador <hr>
conter valores como LEFT, CENTER, RIGHT e JUSTIFY que
significam respectivamente esquerda, centro, direita e <hr size="espessura da linha em pixels“ width="comprimento da
justificado. linha“ align="alinhamento da linha">
Exemplo:
<br> Marcador utilizado para separar uma linha da outra <hr width="200" size="4">
sem um espaço em branco entre as duas. É importante <hr width="50%" align="left">
observar que o marcador <br> deve vir no final da linha que se <hr size="8" color="#00FF00" align="right" noshade>
quer separar.
9 10
Etiquetas – Listas Etiquetas – Listas
Listas Ordenadas Listas Desordenadas
<ol> <ul>
<li> Lista Ordenada </li> <li> Lista Desordenada </li>
</ol> </ul>
A tag <ol> tem como atributo type pode ter os valores “A" , A tag <ul> tem como atributo type pode ter os valores
“a”, “I”, “i”, “1”, … "DISC" , "CIRCLE" ou "SQUARE"
Caso não especifique o type, será colocado automaticamente Caso não especifique o type, será colocado automaticamente o
a numeração 1, 2, …. símbolo "DISC". O "DISC" será uma bolinha preta, o "CIRCLE"
será uma bolinha sem preenchimento e o "SQUARE" será um
Exemplo: quadradinho preto.
<ol type=“A”> Exemplo:
<li> Curitiba </li> <ul type=“disc”>
<li> São Paulo </li> <li> Curitiba </li>
<li> Rio de Janeiro </li> <li> São Paulo </li>
</ol> 11 <li> Rio de Janeiro </li> 12
</ul>
Etiquetas – Listas Etiquetas – “body”
Listas de Definição <body bgcolor="cor">
<dl> Determina a cor do fundo da página. O valor a ser entrado pode
<dt> Lista de Definição </dt> ser uma constante (nome em inglês da cor) ou um número
</dl> hexadecimal (#xxxxxx) correspondente aos valores RGB da cor.
Exemplo: Exemplo:
<dl> <body bgcolor="red">
<body bgcolor="#996633">
<dt> Banana </dt>
<dd>Banana Maçã </dd>
<dd>Banana Nanica </dd> <body background="URL DA IMAGEM">
<dt> Mamão </dt>
<dd>Mamão Papaia </dt> Determina a imagem utilizada para preencher o fundo da tela.
</dl>
Exemplo:
<body background="[Link]">
13
<body background="[Link]"> 14
Etiquetas – “body” Etiquetas de Formatação de Texto
<body text="cor" link="cor" vlink="cor" alink="cor"> <font face="nome da fonte" size="tamanho da fonte"
color="cor da fonte"></font>
Estes atributos determinam as cores para o texto geral da página
(text), Links não visitados (link), Links já visitados (vlink) e o Aplica formatações no que diz respeito ao tipo de letra,
Link no momento que ele é activado (alink). As cores devem ser tamanho e cor do texto, sendo que não há necessidade da
dadas preferencialmente em valores hexadecimais. utilização de todos os atributos juntos.
Exemplo: face: Configura a fonte (tipo de letra) usada.
<body bgcolor="#000000" link="#ffff00" vlink="#ff00ff" size: Configura o tamanho da fonte.
alink="#00ff00"> color: Configura a cor usada para a fonte.
Embora não seja necessário mudar estas cores, existem casos
onde a alteração das cores dos Links da página acaba sendo
necessária, como, por exemplo, se o fundo da página for azul.
15 16
Etiquetas - Formatação Etiquetas – Inserir Imagens
<html> Para inserir imagens numa página HTML, usa-se o marcador
<img> dentro das delimitações do <body>.
<head>
<title> FORMATAÇÃO </title> O marcador <img> tem como principal atributo o src:
</head> <img src="IMAGEM">
<body>
<b> Texto em Negrito </b><br> A imagem a ser inserida na página é um ficheiro que deve estar
<big> Texto em Fonte Maior </big><br> no formato GIF ou JPG, mas isso não quer dizer que não possa
<blink> Exibe Texto Piscando </blink> <br> ter outros formatos como PNG, BMP, e outros.
<i> Texto em Itálico </i><br>
A sigla SRC é a abreviação de Source, que em inglês quer dizer
<u> Exibe o Texto Sublinhado </U><br>
origem. Daí a necessidade de se colocar o caminho correcto do
<small> Texto em Fonte Menor </small><br> ficheiro.
<strike> Texto Riscado </strike><br>
<sub> Texto em Subscrito </sub><br> É interessante colocar as imagens numa pasta, para facilitar a
<sup> Texto Sobrescrito </sup><br> manutenção dos arquivos.
<st> Exibe o Texto Usando Fonte em Tamanho Fixo</tt>
</body> 17 Exemplo: 18
</html> <img src="[Link]">
Etiquetas – Inserir Imagens Etiquetas – Inserir Imagens
<img src="IMAGEM" align="alinhamento"> <img src="IMAGEM" width="LARGURA" height="ALTURA">
Este atributo especifica o tipo de alinhamento entre a imagem e Estes atributos especificam a largura e a altura da imagem. Os
o texto da página. As opções de alinhamento são: left, right, valores podem ser em pixels ou serem proporcionais ao tamanho
top, textop, middle, absmiddle, baseline, bottom, que a figura ocupara na pagina.
absbottom e center.
Exemplos:
Exemplos: <img src="[Link]" width="333" height="200">
<img src="IMAGEM" align="center"> <img src="[Link]" width="100%" height="20%">
<img src="IMAGEM" align="top">
<img src="IMAGEM" alt="TEXTO DESCRITIVO">
<img src="IMAGEM" border=“valor">
O atributo ALT exibe uma descrição quando o cursor move-se
sobre a imagem.
Este atributo determina a espessura da borda da imagem. No
O texto alternativo possibilita aos utilizadores que se trata de uma
caso de uma imagem sem bordas, este atributo não precisa ser
imagem antes dela ser carregada.
citado.
Exemplos:
Exemplos:
<img src="[Link]" border="10"> 19 20
<img src="[Link]" alt="Foto de uma casa">
<img src="[Link]" border="0">
Etiquetas - Hiperligações Etiquetas - Hiperligações
Em HTML para criar hiperligações utiliza-se a etiqueta (tag) <a href="[Link] Fale Conosco </a> link
Âncora de hipertexto, representado por <a></a>. para email.
Se o documento estiver no mesma pasta, basta indicar o nome
Dentro deste marcador é preciso colocar a referência do ficheiro
do ficheiro.
de destino, que se dá através do atributo href.
<a href="[Link]"> Localização </a>
Exemplo: Se o documento estiver numa subpasta diferente de onde esta o
<a href="referência ao ficheiro destino"> texto ou ficheiro que contém o link, e preciso indicá-lo.
imagem origem </a> Exemplo:
<a href="clientes/[Link]"> Localização </a>
<a href="[Link]">Clique aqui</a> link para outra Se o documento estiver numa pasta fora da actual. Vai ser
página no mesmo site. preciso retroceder a indicação, para isso usa-se o ../ (dois ponto
e barra).
<a href="[Link]"><img src="[Link]" border="0"> Exemplo:
</a> link a partir de uma imagem. <a href="../[Link]"> Localização </a>
Pode se usar o ../ (dois ponto e barra) quantas vezes for
<a href="[Link]">Clique para baixar</a> link para fazer
necessário. Ficando assim: “../../../arquivo”
download de um ficheiro. 21 22
Etiquetas - Hiperligações Etiquetas - Hiperligações
BOOKMARKS - links que permitem aceder a locais diferentes Exemplo:
dentro da mesma página.
<a name="inicio"></a>
<p align="center">
O atributo name usa-se para dar um número único à âncora. Este <font face="Arial" size=7 color="#FF9966"> <b> ClipArt
nome serve para marcar o lugar em que a âncora se encontra e </b></font>
tornar possível saltar directamente para esse local a partir de <p>
<font face="Arial" size=3 color="#000000"> <a href="#animais">
outros documentos ou de outros pontos do mesmo documento
Animais </a> <br> <a href="#meninas"> Meninas </a> <br> <a
sem que o utilizador tenha de se deslocar na página. href="#diversos"> Diversos </a> </font>
<p>
Sintaxe: <hr>
<h2 align="center"> <a name="animais"> Animais </a> </h2>
<a name=“topo”> Menu </a>
<p>
<img src="..\Links\Imagens\[Link]">
Depois de darmos um nome a um local do documento podemos <p>
ligar directamente a esse nome. <img src="..\Links\Imagens\[Link]">
<p>
<img src="..\Links\Imagens\[Link]">
Sintaxe: <p>
<a href=“#topo”> Topo </a> <h4 align="center"> <a href="#inicio"> TOPO </a> </h4>
23 24
Etiquetas - Hiperligações Etiquetas – Inserir elementos multimédia
Gifs Animados
O atributo target permite-nos abrir a ligação numa janela ou
moldura (frame) diferente daquela em que foi feito o clique. Sintaxe:
<img src=“nome do ficheiro do gif animado”>
Os valores padrão são:
Áudio (midi, wav e mps)
_blank (uma nova janela)
Sintaxe:
_self (própria janela)
<embed src=“nome do ficheiro de música” autostart=true
_top (na janela principal do browser, em caso de frames) hidden=false loop=false width=145 height=55 align=“center>
</embed>
_parent (só para ligações que estão numa moldura, ou
Som de fundo da página:
“frame”) a ligação abre-se no documento que contém a
moldura (que terá sido criada através de um <frame> <bgsound src=“nome do ficheiro de música” loop=1>
ou de um <iframe>) ( Se o loop=-1 ou infinite o som não pára)
<a href= =“nome do ficheiro de música”> Texto </a>
25 26
Etiquetas – Inserir elementos multimédia Etiquetas - Tabelas
Vídeo (avi, mov e mpeg)
Tags usadas na composição das tabelas:
Sintaxe:
<table> para iniciar e </table> para fechar a tabela;
<embed src=“nome do ficheiro de vídeo” autostart=false <tr> para iniciar e </tr> para findar uma linha;
loop=false align=“center> <th> para começar e </th> encerrar uma célula;
</embed> <td> para iniciar e </td> para fechar uma célula;
<a href= =“nome do ficheiro de vídeo”> Texto </a> Sintaxe Básica:
Marquee <table>
Permite que um texto passe continuamente de um lado para o outro da tela. <tr>
<td>linha1</td><td>célula2</td><td>célula3</td>
Sintaxe: </tr>
<marquee> este é o letreiro</marquee> <tr>
Tem como principal atributo behavior com as seguintes opções “scroll”, “slide”
<th>linha2</th><th>célula2</th><th>célula3</th>
e “alternate”. </tr>
27 </table> 28
Etiquetas - Formulários Etiquetas – Frames e iframes
Formulários servem para recolher dados introduzidos pelos As Frames são divisões da tela do browser, onde é possível
utilizadores e enviá-los para processamento no servidor. apresentar várias páginas web distintas na mesma janela do
browser.
A utilização de frames tem com vantagem permitir trabalhar
Um formulário HTML é uma pagina Web que contém, além de
com vários documentos independentes dentro da mesma janela
texto, elementos especiais chamados controles, representados
do browser.
por caixas de checagem, botões, caixas de selecção, campos
Como alternativa às molduras podem ser utilizadas tabelas.
de textos, etc.
A utilização de Frames na linguagem HTML e feita através dos
marcadores <frameset>, </frameset> e <frame>. A página
A tag usada é: <form></form>
onde o frameset e codificado não leva o marcador <body> e
tem a finalidade de definir o layout a ser apresentado pelos
Sintaxe: Frames.
<form name=“nome formulário” method=“get ou post” Num frameset os atributos rows e cols definem,
action=“url” enctype=“tipo”> </form> respectivamente, o número de subespaços horizontais e
verticais que podem ser utilizados para criar efeitos de grade.
29 30
Etiquetas – Frames e iframes Etiquetas – Frames e iframes
Criar janelas dispostas na vertical
Sintaxe:
<frameset rows=“[frame1,frame2]” cols=“[frame1,frame2]”
border=“[espessura]” bordercolor=“[cor]” frameborder=“[yes/no]”>
<frame src=“[url]” name=“[nome]” norsize
marginwidth=“[Margem lateral]”
marginheight=“[Margem vertical]”
scrolling=“[yes/no/auto]”
Criar janelas dispostas na horizontal
</frameset>
A tag iframe insere uma subjanela, ou moldura, dentro de uma
página da web (“inline frame”). A nova moldura contém a sua própria
página e assemelha-se a uma moldura (“frame”), mas está dentro de
uma página normal (no meio dos seus conteúdos) em vez de estar
num frameset.
31 32
Etiquetas – Frames e iframes Introdução às Cascaded Style Sheets (CSS)
(Folha de Estilo em Cascata)
Criar janelas dispostas na horizontal e na vertical
As Cascaded Style Sheets (CSS), Folhas de Estilo em Cascata
definem a aparência e a formatação do conteúdo em páginas web
e permitem um maior controlo sobre o modo como o conteúdo é
apresentado nos browsers.
As CSS foram criadas com três possibilidades diferentes: externas,
internas e locais.
Criar uma inline frame dentro de uma página
É recomendado apenas a utilização das externas e internas.
33 34
Introdução às Cascaded Style Sheets (CSS) Introdução às Cascaded Style Sheets (CSS)
(Folha de Estilo em Cascata) (Folha de Estilo em Cascata)
Externamente (numa folha de estilos externa) Internamente (numa folha de estilos interna)
Uma folha de estilo externa é criada externamente ao documento HTML. Uma folha de estilo interna corresponde à definição de um conjunto
Assim, é criado um outro documento apenas com a lista dos estilos que de estilos a aplicar internamente apenas a um documento.
se pretende e é gravado com a extensão .css. Para aplicar os estilos é necessário defini-los, em cada documento
Posteriormente, pode ser integrado em vários documentos HTML através HTML, entre as tags <style> e </style>. Estas tags deverão,
da tag <link>, que deverá ser colocada dentro do cabeçalho, ou seja também, ser colocadas dentro das tags <head> e </head>.
dentro das tags <head> e </head>.
Sintaxe:
Sintaxe: <head>
<head> <style type=“text/css”>
<link rel=“stylesheet” type=“text/css” href=“[Link]”> ...
</head> </style>
</head>
35 36
Introdução às Cascaded Style Sheets (CSS) Introdução às Cascaded Style Sheets (CSS)
(Folha de Estilo em Cascata) (Folha de Estilo em Cascata)
Identificadores
Sintaxe usada nas folhas de estilo
Um selector identificador (id) permite definir um estilo, que pode ser
Um estilo CSS é composto por três partes, isto é um selector, uma directamente associado a um elemento de uma tag. Por sua vez, o
propriedade e um valor. atributo id, só pode ser especificado uma única vez numa dada tag. Os
nomes dos identificadores são precedidos pelo carácter #.
selector { propriedade: valor;}
Sintaxe:
selector {
identificador_do_elemento#selector_identificador{propriedade:valor;}
propriedade: valor;
propriedade: valor; <identificador_do_elemento id=“selector_identificador”>
}
Classes
selector1, selector2, selector3 { propriedade: valor;}
Através dos selctores de classe (class) é possível definir vários estilos,
que podem ser directamente associados ao mesmo elemento.
Comentários: Sintaxe:
/* texto de um comentário */
identificador_do_elemento.identificador_de_classe{propriedade:valor;}
37 <identificador_do_elemento class=“identificador_de_classe”> 38
Promoção do Web Site Publicação de Sites e Gestão de Conteúdos
A forma mais simples de promover um site é inscrevê-lo num motor Para publicar os sites normalmente utiliza-se o software mais
de busca que o indexará para futuras procuras. popular WS_FTP Profissional que permite transferir arquivos com
Para facilitar a pesquisa aos motores de busca, o melhor é colocar velocidade rápida, segurança e economizando tempo.
alguma informação no documento HTML dentro da tag <head>. Esta
informação deverá estar dentro da tag <meta>, que serve para Demonstração:
definir os atributos identificadores do site, como por exemplo o autor [Link]
da página.
Sintaxe:
<meta name=“autor” content=“valor do atributo”>
(determina o conteúdo do identificador)
39 40