Aula_4

•

UEPA

0

Cibele Silva

20/05/2021

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Programação I

55.876 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

PROGRAMAÇÃO PARA WEB 
Unidade IV – HTML 
Links e Imagens 
Ms. Thiago Nicolau Conte 
thiagonconte@uepa.br 
Referências Bibliográficas 
• Links ou Hiperlinks: Tornam a navegação entre as páginas 
possível. 
 
• Sintaxe: 
• <A HREF=“[url]” TITLE=“[título]” 
TARGENTE=“[_blank / _top / nome_específico]”> 
texto</A> 
Referências Bibliográficas 
 
• HREF: é nesse atributo que devemos informar o destino 
do link que criamos. 
 
• TITLE: atribui um texto de título ao link 
 
• TARGET: determina uma janela especifica ou frame 
específico para abrir o link 
• _blank (uma nova janela) 
• _self (na própria janela) 
• _top (na janela principal, em caso de frames) 
Referências Bibliográficas 
• Exemplo: 
 
<A HREF=“url” TITLE =“página de teste”> ver página</A> 
Exemplo: 
<A HREF=“http://www.google.com.br”> globo</A> 
vinculo para outro site 
<A HREF="page2.htm">Aqui um link para a pagina 2</a> 
 
 
Referências Bibliográficas 
• Como são os links dentro de uma mesma página? 
<A HREF="#heading1">Link para o cabeçalho 1</a> 
<H1 ID="heading1">Cabeçalho 1</h1> 
 
<HTML> 
 <HEAD> </HEAD> 
 <BODY> 
 <P><A HREF="#heading1">link para cabeçalho1 </A></P> 
 <P><A HREF="#heading2">link para cabeçalho2 </A></P> 
 <H1 ID="heading1">cabeçalho 1</H1> 
 <p>texto texto texto texto</P> 
 <H1 ID="heading2">cabeçalho 2</H1> 
 <p>texto texto texto texto</P> 
 </BODY> 
</HTML> 
Referências Bibliográficas 
• Manipulando Imagens 
• Sintaxe: 
<IMG SRC=“[url da imagem]” TITLE=“[nome imagem]” 
ALIGN=[center / left / right / top / middle / botton]” 
WIDTH=“[largura]” HEIGHT=“[altura]” 
BORDER=“[borda]”> 
Referências Bibliográficas 
• SRC: determina a url da imagem 
• Exemplo: <IMG SRC=“[URL]”> 
 
• ALIGN: define o alinhamento da figura. 
• Exemplo: 
<IMG SRC=“url”> imagem sem alinhamento não arranja o 
texto ao seu lado<BR> 
<HR> 
<IMG SRC=“url” ALIGN=“left”> para corrigir esta 
característica, basta definir o alinhamento.<BR> 
Referências Bibliográficas 
• Exemplo: 
<IMG SRC=“url” ALIGN=“top”> texto no alto<BR> 
<IMG SRC=“url” ALIGN=“middle”>texto no centro<BR> 
<IMG SRC=“url” ALIGN=“center”> se pretendemos alinhar 
imagem no centro, não podemos colocar um texto junto 
 
Referências Bibliográficas 
• WIDTH: determina a largura da imagem em pixel ou em 
porcentagem da área do navegador 
 
• HEIGHT: determina a altura da imagem em pexel ou 
porcentagem 
• Exemplo: 
<IMG SRC=“[url]” WIDTH=“62” HEIGHT=“52”> <BR> 
<IMG SRC=“[url]” WIDTH=“200” HEIGHT=“200”> <BR> 
 
Referências Bibliográficas 
• Border: define uma borda em torno da imagem 
• exemplo: 
<IMG SRC=“url” WIDTH=“32” HEIGHT=“52” 
BORDER=“3”> 
 
Dica para não repetir a imagem de fundo: 
<body background="img/imagem.gif" style="background-
repeat: no-repeat"> 
 
Referências Bibliográficas 
 
• DEITEL, Paul J.; DEITEL, Havey M. Ajax, Rich Internet Applications e 
Desenvlvimento Web para programadores. São Paulo: Person, 2008 
 
• MARCONDES, Christian Alfim. HTML 4.0 Fundamental: A Base da 
Programação para Web. São Paulo: Erica, 2005. 
 
• NIEDERAUER, Juliano. Desenvolvendo Websites com PHP: Aprenda a criar 
Websites dinâmicos e interativos com PHP e banco de dados. São Paulo: Novatec, 2004. 
 
• LEMAY, Laura. Aprenda criar página web com HTML e XHTML em 21 dias. 
São Paulo: Pearson, 2002. 
 
• SILVA, Maurício Samy. Html e css-contrua seu website. Disponível em: <http://pt-
br.html.net>. Acesso em: 10 maio. 2012