Aula de HTML

Desenvolvimento Web
2 HTML Inserindo objetos

Vinicius A. de Souza
va.vinicius@gmail.com
So Jos dos Campos, 2011.
Desenvolvimento Web
Sumrio
Imagem.................................................................................................................................................3
Links ....................................................................................................................................................5
Links para locais da mesma pgina.................................................................................................6
udio e vdeo.......................................................................................................................................8
Som de fundo...................................................................................................................................8
Player de udio/vdeo.......................................................................................................................8
Atributos da tag <EMBED>............................................................................................................9
Letreiro.................................................................................................................................................9
Principais atributos da tag <MARQUEE>......................................................................................9
Atividade A Marquee com fotos......................................................................................................13
Atividade B - Menu flutuante.............................................................................................................14
Atividade C Desenvolvimemento de site........................................................................................14
Desenvolvimento Web
Imagem
A tag utilizada para inserirmos uma imagem em uma pgina web <IMG>, onde necessitaremos
tambm do atributo SRC para fornecer o endereo (diretrio) da imagem. Sua sintaxe geral :
<IMGSRC=endereodaimagem.extenso></IMG>
No exemplo abaixo, colocamos uma imagem chamada choque.gif na pgina web. Certifique-se
de que esta imagem existe e est localizada no mesmo diretrio que a pgina.
<HTML>
<HEAD>
<TITLE>DesenvolvimentoWeb</TITLE>
</HEAD>
<BODY>
<H2>Colocandoimagem</H2>
<IMGSRC=choque.gif></IMG>
</BODY>
</HTML>
Os atributos que podero ser utilizados junto tag <IMG> so:
a) Alinhamento
<IMGSRC="imagem"ALIGN="alinhamento"></IMG>
Este atributo especifica o tipo de alinhamento entre a imagem e o texto da pgina. As opes de
alinhamento so: LEFT, RIGHT, TOP, TEXTOP, MIDDLE, ABSMIDDLE, BASELINE,
BOTTOM, ABSBOTTOM e CENTER.
b) Borda
<IMGSRC="imagem"BORDER="valor"></IMG>
Este atributo determina a espessura da borda da imagem. No caso de uma imagem sem bordas, este
atributo no precisa ser colocado.
Desenvolvimento Web
c) Altura e largura
<IMGSRC="imagem"WIDTH="largura"HEIGHT="altura"></IMG>
Estes atributos especificam a largura e a altura da imagem. Podem ser dados os valores em pixels ou
serem proporcionais ao tamanho que a figura ocupar na pgina. Uma figura com dimenses
proporcionais s vezes pode aparecer repuxada na pgina.
Exemplos:
<IMGSRC="choque.gif"WIDTH="333"HEIGHT="200"></IMG>
<IMGSRC="choque.gif"WIDTH="100%"HEIGHT="20%"></IMG>
d) Texto explicativo
<IMGSRC="imagem"ALT="textodescritivo"></IMG>
O atributo ALT exibe uma descrio quando o cursor move-se sobre a imagem. Existem usurios
que utilizam navegadores incapazes de exibir imagens ou ajustam o navegador para no carregar
imediatamente s imagens, devido demora no carregamento das pginas. O texto alternativo
possibilita que saibam do que se trata a imagem mesmo antes que sejam carregadas.
e) Espaos vertical e horizontal
<IMGSRC="imagem"VSPACE="valor"HSPACE="valor"></IMG>
Especifica o espao vertical (VSPACE) e o espao horizontal (HSPACE) que pode aparecer entre a
imagem e o texto mais prximo ou at mesmo para outra imagem na linha corrente. O valor dado
em pixels. Exemplos:
<IMGSRC="choque.gif"HSPACE="0"VSPACE="0"></IMG>
<IMGSRC="choque.gif"HSPACE="30"VSPACE="30"></IMG>
Abaixo, mostrado um exemplo de utilizao da imagem. Copie o cdigo abaixo para sua pgina e
aproveite para modificar os atributos da tag IMG, testando novas possibilidades. No se esquea de
configurar corretamente o endereo da imagem que ser inserida.
Desenvolvimento Web
<HTML>
<HEAD>
</HEAD>
<BODY>
<IMGSRC=relogio.jpgALIGN=leftBORDER=3HSPACE=10></IMG>

A HTML (HyperText Markup Language) uma linguagem de
marcaobaseadaemtextoutilizadaparaescrevermospginas
que sero lidas por navegadores web. Simplificando, uma
linguagemparaescreverpginasweb.Paraescrevermospginas,
necessrioapenasumeditordetexto.

 
<IMGSRC=relogio.jpgALT=TesteWIDTH="300"HEIGHT="200"></IMG>

A HTML (HyperText Markup Language) uma linguagem de
marcaobaseadaemtextoutilizadaparaescrevermospginas
que sero lidas por navegadores web. Simplificando, uma
linguagemparaescreverpginasweb.Paraescrevermospginas,
necessrioapenasumeditordetexto.

</BODY>
</HTML>
Atividade 1: Teste outros valores para os atributos da tag <IMG>.
Links
Um dos principais diferenciais da internet m relao s outras mdias o conceito de hipertexto, ou
seja, possvel criarmos um documento que se vincula a outros documentos por meio de ligaes
especiais chamadas links (ou hiperlinks).
Portanto, possvel criarmos links para pginas do nosso prprio site, pginas externas ao nosso
site ou at mesmo arquivos (que ficaro, neste caso, disponveis para download), alm de um link
para envio de e-mail. Iremos criar um link utilizando a tag <A>, juntamente com o atributo HREF.
<AHREF=endereodapgina>Textoexibido</A>
Desenvolvimento Web
Abaixo, vamos criar trs exemplos de links um externo, outro interno e um link para um arquivo.
O primeiro link nos direciona para o buscador Google. O segundo link abre uma pgina de nosso
prprio site, por isso, assegure-se de que exista uma pgina chamada contato.html no mesmo
diretrio de sua pgina de teste abaixo. O terceiro link criado com o atributo href=mailto..., na
verdade, abre o cliente de e-mail padro do computador do usurio e adiciona ao destinatrio da
mensagem o endereo citado.
<HTML>
<HEAD>
</HEAD>
<BODY>
<AHREF=http://www.google.com>Google</A> 
<AHREF=contato.html>Contato</A> 
<AHREF=Aula2.pdf>DownloaddaAula2</A> 
<AHREF="mailto:va.vinicius@gmail.com">FaleConosco</A>
</BODY>
</HTML>
Observaes: Ao criar um link para um site externo, coloque sempre o endereo completo,
inclusive o protocolo, como por exemplo, http://www.nomedosite.com.br. Ao criar um link para
uma pgina de seu prprio site, verifique em qual diretrio a pgina referenciada se encontra. Por
exemplo, suponha que o arquivo Aula2.pdf do exemplo acima esteja numa pasta chamada arquivos.
Portanto, o link ficaria desta maneira:
<AHREF=arquivos/contato.html>Contato</A>.
Atividade 2: Crie um link para um determinado site a partir de uma imagem (pode ser o logotipo
deste site).
Links para locais da mesma pgina

Existem situaes onde os links podem levar a locais diferentes dentro da mesma pgina onde esto
inseridos. Neste caso, o link conhecido como BOOKMARKS. Alm de se especificar a referncia
ao arquivo destino dentro do marcador ncora, preciso determinar os locais da pgina que serviro
de destino para o link. Isto feito da seguinte maneira:
Cada local destino de um link dentro da pgina recebe um marcador ncora, onde atribudo
um nome a este marcador;
O link que ir levar at este marcador precisa referenci-lo dentro do atributo HREF.
Exemplo: Criando um destino dentro da pgina index.html:
Desenvolvimento Web
<AID="inferior"></A>
Agora criaremos um link para este destino:
<AHREF="index.html#inferior">Cliqueparaverofim</A>
Construa o exemplo abaixo para testar (assegure-se de nomear esta pgina com o nome index.html):
<HTML>
<HEAD>
</HEAD>
<BODY>
<AHREF=index.html#inferior>Fimdotexto</A>

AHTML(HyperTextMarkupLanguage)umalinguagemde
marcaobaseadaemtextoutilizadaparaescrevermos
pginas queserolidaspornavegadoresweb.
Simplificando,uma
linguagemparaescreverpginas
web.Paraescrevermospginas,
necessrioapenasum
editordetexto.

 
 

AHTML(HyperTextMarkupLanguage)umalinguagemde
marcaobaseadaemtextoutilizadaparaescrevermos
pginas queserolidaspornavegadoresweb.
Simplificando,uma
linguagemparaescreverpginas
web.Paraescrevermospginas,
necessrioapenasum
editordetexto.

<AID=inferior></A>
<Ahref=#>Iniciodotexto</A>
</BODY>
</HTML>
Desenvolvimento Web
udio e vdeo
O usurio somente poder ouvir som em uma pgina se seu browser possuir recursos necessrios
execuo do respectivo formato de arquivo. Os arquivos MIDI e WAV geralmente so suportados
pelos browsers. J os arquivos em formato MP3 e o Real udio requerem instalao, de plug-in,
caso o browser no possua.
Uma pgina que contenha arquivos de som precisa ficar hospedada em um servidor devidamente
configurado para aceitar tais arquivos. Caso contrrio, quando o usurio clicar em links de acesso
aos arquivos sonoros ser exibida uma pgina contendo uma srie de caracteres estranhos. O
mesmo ocorre para os videos.
Som de fundo
Para colocar um som de fundo em sua pgina, use a tag <BGSOUND> dentro da tag <HEAD> ou
da tag <BODY>, como mostra o exemplo abaixo.
<html>
<head>
<title>Somdefundo</title>
<BGSOUNDSRC="musica.wma"LOOP="1">
</head>
<body>
Escuteamsicadefundo!!!
</body>
</html>
Observao: O atributo LOOP=-1 indica que o som ficar executando indefinidamente.
Player de udio/vdeo
Para inserir um player de msica ou vdeo em sua pgina html, use a tag <EMBED> juntamente
com o atributo SRC, que receber o endereo do arquivo.
<EMBEDSRC="arquivodesom/video"WIDTH="valor"HEIGHT="valor"
AUTOSTART="true/false"LOOP="opo">
Veja o exemplo abaixo:
Desenvolvimento Web
<HTML>
<HEAD><TITLE>Desenvolvimentoweb</TITLE>
</HEAD>
<BODY>
Escuteamusica
<EMBEDSRC="musica.mp3"WIDTH="400"HEIGTH="450"
AUTOSTART="true"LOOP="true">
Vejaovideo
<EMBEDSRC="video.ogv"WIDTH="400"HEIGTH="450"
AUTOSTART="true"LOOP="true">
</BODY>
</HTML>
Atributos da tag <EMBED>
SRC : Serve para especificar o endereo do vdeo.

WIDTH e HEIGHT : Servem para especificar respectivamente a Largura e Altura do quadro
onde o vdeo vai aparecer.
AUTOSTART : Serve para escolher se o vdeo vai comear a reproduzir quando a pgina for
carregada (AUTOSTART=TRUE) ou quando o usurio clicar no boto Executar
(AUTOSTART=FALSE).
LOOP: Serve para especificar se o vdeo vai fica repetindo ou no. TRUE faz com que o
vdeo reproduza infinitamente, FALSE faz com que o vdeo s seja reproduzido uma vez e
depois se o usurio quiser rever o vdeo ele vai ter que pressionar o boto Executar.
Letreiro
Existe uma tag chamada <MARQUEE>, que permite que um trecho passe continuamente de um
lado para o outro da tela. Esta tag bastante interessante, pois podemos us-la tanto com texto
quanto como fotos.
<MARQUEE>Textoaservirdeletreiro</MARQUEE>
Principais atributos da tag <MARQUEE>

a) BEHAVIOR
<MARQUEEBEHAVIOR="comportamentodotexto">Texto</MARQUEE>
Desenvolvimento Web
Especifica o tipo de movimento que ser usado para animar o texto do letreiro. As opes de
movimento so:
SCROLL: Permite ao texto passar continuamente pelo letreiro na direo especificada,

entrando por um lado e saindo pelo outro.
SLIDE: Permite ao texto passar por um dos cantos do letreiro, parando ao chegar no canto
oposto e permanecendo na tela.
ALTERNATE: Permite ao texto passar de um lado a outro das extremidades do letreiro,
permanecendo na tela o tempo todo.
Exemplo:
<HTML>
</HEAD>
<BODY>
<MARQUEEBEHAVIOR="SCROLL">Desenv.Web</MARQUEE>
<MARQUEEBEHAVIOR="SLIDE">Desenv.Web</MARQUEE>
<MARQUEEBEHAVIOR="ALTERNATE">Desenv.Web</MARQUEE>
</BODY>
</HTML>
b) BGCOLOR
<MARQUEEBGCOLOR="#XXXXXX">texto</MARQUEE>
Simplesmente especifica a cor de fundo do letreiro. Obedece s mesmas configuraes para cor, ou
seja, voc pode usar o nome da cor em ingls ou o seu cdigo hexadecimal.
c) DIRECTION
<MARQUEEDIRECTION="direo>texto</MARQUEE>
Especifica a direo na qual o texto ir se mover. As opes so:
LEFT: O texto se move do canto direito para o esquerdo.

RIGHT: O texto se move do canto esquerdo par o direito.
DOWN: O texto se move de cima para baixo.
UP: O texto se move de baixo para cima.
Exemplo:
10
Desenvolvimento Web
<HTML>
<HEAD>
<TITLE>Desenvolvimentoweb</TITLE>
</HEAD>
<BODY>
<MARQUEEDIRECTION="LEFT">Desenv.Web</MARQUEE>
<MARQUEEDIRECTION="RIGHT">Desenv.Web</MARQUEE>
<MARQUEEDIRECTION="DOWN">Desenv.Web</MARQUEE>
<MARQUEEDIRECTION="UP">Desenv.Web</MARQUEE>
</BODY>
</HTML>
d) HEIGHT e WIDTH
<MARQUEEHEIGHT="valor"WIDTH=valor>texto</MARQUEE>
Especificam, respectivamente, a altura e a largura do letreiro. O valor pode ser dado em pixels ou
em relao altura da janela em que a pgina ser exibida.
Exemplo:
<HTML>
</HEAD>
<BODY>
<MARQUEEWIDTH=200>Letreiro</MARQUEE>
<MARQUEEDIRECTION=UPHEIGHT=200>Letreiro</MARQUEE>
</BODY>
</HTML>
e) HSPACE e VSPACE
<MARQUEEHSPACE="valor"VSPACE=valor>texto</MARQUEE>
Definem, respectivamente, as margens direita e esquerda do letreiro e acima e abaixo do letreiro.
Exemplo:
11
Desenvolvimento Web
<HTML>
</HEAD>
<BODY>
<MARQUEEHSPACE="50">Letreiro</MARQUEE>
<MARQUEEDIRECTION="UP"VSPACE="50">Letreiro</MARQUEE>
</BODY>
</HTML>
f) LOOP
<MARQUEELOOP="nmerodevezes">texto</MARQUEE>
Especifica quantas vezes o texto ir cruzar o letreiro. Se este atributo no for mencionado ou se o
numero de vezes for igual INFINITE, o texto ir se mover em repetio constante pelo letreiro.
g) SCROLLMOUNT
<MARQUEESCROLLAMOUNT="valor">texto</MARQUEE>
Controla a velocidade do texto, definem o nmero de pixels entre cada redesenho do texto. O valor
a ser entrado em pixels representa a quantia de pixels que separa cada redesenho. Desta forma,
quanto maior for o valor, mais rpido ser o movimento do texto.
Exemplo:
<HTML>
</HEAD>
<BODY>
<MARQUEELOOP="5"SCROLLAMOUNT="50">Letreiro</MARQUEE>
</BODY>
</HTML>
Atividade 3: Teste outros valores para os atributos da tag <MARQUEE>.
12
Desenvolvimento Web
Atividade A Marquee com fotos

Podemos utilizar a tag <MARQUEE> para fazer, por exemplo, um "SlideShow". O
procedimento o mesmo que com texto. S que agora vamos fazer o MARQUEE parar
quando passar o mouse por cima, e quando tirar de cima ele voltar a andar. Veja que fcil,
basta colocar os atributo onmouseover="this.stop()" onmouseout="this.start()" dentro do
marcador <MARQUEE>
Exemplo:
<MARQUEE onmouseover="this.stop()" onmouseout="this.start()"
WIDTH="200">
Antes ns colocvamos um texto dentro das delimitaes do marcador, mas agora ns
vamos colocar fotos usando marcadores <IMG>.
Veja como fica:
<HTML>
</HEAD>
<BODY>
<MARQUEEonmouseover="this.stop()"
onmouseout="this.start()"WIDTH="200"
direction="down">
<IMGWIDTH="150"HEIGHT="120"SRC="foto1.jpg"> 
<IMGWIDTH="150"HEIGHT="120"SRC="foto5.jpg">
</MARQUEE>
</BODY>
</HTML>
Neste pequeno slide feito a em cima foram colocados 5 fotos, e elas esto uma em
baixo da outra, por isso a necessidade do marcador , caso no seja colocado s
fotos iro ficar uma do lado da outra.
A largura do MARQUEE de 200 pixels. Repare que foi colocado tambm o atributo
DIRECTION="DOWN" para que as fotos deslizem de cima para baixo na vertical. Em vez
de ser de um lado pro outro, na horizontal. Neste exemplo foi usado fotos, mas tudo que
colocar dentro dos marcadores <MARQUEE> ser "arrastado" por ele. Qualquer marcador,
como Tabelas, Vdeos, Listas, etc.
13
Desenvolvimento Web
Atividade B - Menu flutuante

Agora que voc aprendeu a utilizar o marquee, crie um menu flutuante, isto , coloque imagens no
marque, sendo que cada imagem um link para uma pgina diferente. Modifique o atributo
DIRECTION da tag MARQUEE para right, de forma que o menu deslize da esquerda para a
direita.
Atividade C Desenvolvimemento de site

Crie um site sobre um tema de sua preferncia utilizando o layout abaixo. Tente utilizar todos os
conceitos aprendidos nas aulas. Crie quatro pginas html:
1.
2.
3.
4.
index.html (dever conter informaes iniciais do site)

tags.html (dever conter um resumo sobre o html e as tags verificas nesta aula e links)
videos.html (dever inserir videos relacionados ao assunto. Utilize o youtube)
apostilas.html (dever conter links para download das apostilas de aula)
Algumas sugestes:
Crie um menu esttico com links para as pginas

Adicione uma imagem na mesma linha do nome do site e adicione um link a esta imagem
para o site da escola
Crie um letreiro no fim da pgina com o nome do autor do site
Nome do site
Home --- HTML --- Vdeos --- Apostilas
Adicione aqui contedo
Crie aqui um letreiro
14

Aula de HTML

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Aula de HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

Desenvolvimento Web

2 HTML Inserindo objetos

So Jos dos Campos, 2011.

So Jos dos Campos, 2011.

So Jos dos Campos, 2011.

So Jos dos Campos, 2011.

So Jos dos Campos, 2011.

Links para locais da mesma pgina

Exemplo: Criando um destino dentro da pgina index.html:

So Jos dos Campos, 2011.

So Jos dos Campos, 2011.

So Jos dos Campos, 2011.

Atributos da tag <EMBED>

SRC : Serve para especificar o endereo do vdeo.

Principais atributos da tag <MARQUEE>

So Jos dos Campos, 2011.

SCROLL: Permite ao texto passar continuamente pelo letreiro na direo especificada,

LEFT: O texto se move do canto direito para o esquerdo.

So Jos dos Campos, 2011.

So Jos dos Campos, 2011.

So Jos dos Campos, 2011.

Atividade A Marquee com fotos

So Jos dos Campos, 2011.

Atividade B - Menu flutuante

Atividade C Desenvolvimemento de site

index.html (dever conter informaes iniciais do site)

Crie um menu esttico com links para as pginas

Adicione aqui contedo

Crie aqui um letreiro

So Jos dos Campos, 2011.

Anda mungkin juga menyukai