SlideShare uma empresa Scribd logo
1 de 39
Baixar para ler offline
HTML
Hiperlinks
Multimédia e Hipermédia
Hiperlink
Palavra
Frase
Imagem
Outro
recurso
Hiperlink
Hiperlink
• Destino de um link
Outro
recurso
URL
endere oç
Hiperlink
• Endereço
protocolo Localiza o doçã server Localiza oçã do recurso no server: //
http www.istec.pt Web/index.html: //
ftp www.istec.pt Web/index.html: //
mailto macribey@istec.pt Subject=assunto: ?
file computador caminho/index.html: //
Hipertexto Links e URLs
• Link - Origem de uma ligação que pode
conter:
– Apontador para novo recurso:
• Novo Documento html ou de outro tipo.
• Novo Endereço URL
• Endereço de E-Mail
Hiperlink
•ELEMENTO <a>
Define uma hiperligação que pode ser utilizada
para aceder a outra página. Exemplo:
<a href=“http://www.istec.pt”>
Ir para o ISTEC
</a>
Hiperlink
•ELEMENTO <a>
Define uma hiperligação que pode ser utilizada
para aceder a outra página. Exemplo:
<a href=“http://www.istec.pt”>
O atributo href indica o
destino da hiperliga o.çã
Hiperlink
•ELEMENTO <a>
Define uma hiperligação que pode ser utilizada
para aceder a outra página. Exemplo:
<a href=“http://www.istec.pt”>
Quando se tratar de aceder a
um novo URL o endere o deç
destino deve ser sempre
precedido de http://
Exerc cioí
Hiperlink
•ELEMENTO <a>
Define uma hiperligação que pode ser utilizada para aceder a um recurso do
mesmo site:
…
<BODY>
…texto…
<P>Poderá encontrar mais conteúdo em <A href=“cap2.html”>Capítulo
2</A>.
Veja também <A href=“../imgs/floresta.gif”>mapa da floresta encantada</A>.
</BODY>
Pressionando o rato sobre estes links os utilizadores podem aceder a estes recursos
– uma imagem, uma p gina html.á
Hiperlink
•ELEMENTO <a>
Define uma hiperligação que pode ser utilizada para aceder a um recurso do
mesmo site:
…
<BODY>
…texto…
<P>Poderá encontrar mais conteúdo em <A href=“cap2.html”>Capítulo 2</A>.
Veja também <A href=“../imgs/floresta.gif”>mapa da floresta encantada</A>.
</BODY>
Quando se trata de recursos locais, basta indicar o nome e as pastas que cont mê
os recursos.
Exerc cioí
Hiperlinks
•ELEMENTO <a>
Links dentro do mesmo documento:
O Destino final de uma hiperligação pode ser um local assinalado
dentro do mesmo documento HTML, esse local designado por
âncora, é identificado também com o elemento <a> mas com o
atributo name.
Hiperlinks
•ELEMENTO <a>
Links dentro do mesmo documento:
Exemplo:
Criar uma tabela de conteúdos para um livro. Cada link acede a um
novo capítulo do livro.
•ELEMENTO <a>
…
<h4><a href="#canto1">Canto I</a></h4>
<h4><a href="#canto2">Canto II</a></h4>
<h4><a href="#canto3">Canto III</a></h4>
<h2><a name="canto1">Canto I</a></h2>
<div>1<br/>
As armas e os barões assinalados,<br/>
Que da ocidental praia Lusitana,<br/>
Por mares nunca de antes navegados,<br/>
Passaram ainda além da Taprobana,<br/>
Em perigos e guerras esforçados,<br/>
Mais do que prometia a força humana,<br/>
E entre gente remota edificaram<br/>
Novo Reino, que tanto sublimaram;<br/>
</div><br/>
…
<h2><a name="canto2">Canto II</a></h2>
<div>2<br/>
<a href=“#canto1>
Canto1
</a>
O s mbolo # indica queí
Se trata de uma hiperliga oçã
para dentro do mesmo
Documento html.
•ELEMENTO <a>
…
<h4><a href="#canto1">Canto I</a></h4>
<h4><a href="#canto2">Canto II</a></h4>
<h4><a href="#canto3">Canto III</a></h4>
<h2><a name="canto1">Canto I</a></h2>
<div>1<br/>
As armas e os barões assinalados,<br/>
Que da ocidental praia Lusitana,<br/>
Por mares nunca de antes navegados,<br/>
Passaram ainda além da Taprobana,<br/>
Em perigos e guerras esforçados,<br/>
Mais do que prometia a força humana,<br/>
E entre gente remota edificaram<br/>
Novo Reino, que tanto sublimaram;<br/>
</div><br/>
…
<h2><a name="canto2">Canto II</a></h2>
<div>2<br/>
<a name=“canto1>
Canto I
</a>
Identifica um potencial ponto
de destino de uma hiperliga o.çã
EXERC CIOÍ
Hiperlink para e-mail
•Definir uma hiperligação que permite enviar um e-mail
<a href=“mailto:destino@correio.pt”>
envia e-mail
</a>
Exerc cioí
Hiperlink para e-mail
•Definir o campo Assunto da mensagem de e-mail:
<a href=“mailto:destino@correio.pt?subject=nova
%20mensagem”>envia e-mail</a>
Exerc cioí
Hiperlink para e-mail
•Definir o conteúdo do Corpo da mensagem de e-mail:
<a href=“mailto:destino@correio.pt?subject=nova
%20mensagem?body=por favor envie uma cópia do
novo contrato”>envia e-mail</a>
Exerc cioí
TabIndex
•Ordem de tabulação
<p>Experimente os nossos <a
href=“bolos.html” tabindex=“3”>deliciosos
bolos</a>.</p>
Exerc cioí
Target
• Utilizado quando se usavam frames
– “_blank” – carrega o conteúdo numa nova janela
– “nome frame” – carrega conteúdo na frame
definida com este nome
Exerc cioí
Hiperlink
• Endereço
protocolo Localiza o do servidorçã Localiza o do recurso no servidorçã: //
http www.istec.pt Web/index.html: //
ftp www.istec.pt Web/index.html: //
mailto macribey@istec.pt Subject=assunto: ?
file computador caminho/index.html: //
Hipertexto Links e URLs
•Link – Para endereço externo:
<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta charset=Latin-1>
</head>
<body>
<P>
Para obter mais informações sobre este produto consulte o site da
<a href=”http://www.microsoft.com”>
Microsoft Corporation.
</a>
</P>
</body>
</html>
Hipertexto Links e URLs
•Link – Para documento externo na mesma pasta:
<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta charset=Latin-1>
</head>
<body>
<p>
Para obter mais informações sobre este produto consulte o site da
<a href=”http://www.microsoft.com”>
Microsoft Corporation.
</a>
</p>
<p>Aceda ao nosso
<a href=“form.htm”>formulário</a>
</p>
…
Hipertexto Links e URLs
Link – Para documento externo numa pasta dentro do local de origem- ficheiro index.html
<p>
Para obter mais informações sobre este produto consulte o site da
<a href=”http://www.microsoft.com”>
Microsoft Corporation.
</a>
</p>
<p>
Aceda ao nosso <a href=“formularios/form1.htm”>
Formulário
</a>
</p>
Pasta x
Index
Pasta
Formularios
form1
Hipertexto Links e URLs
•Link – Para um e-mail
<p>
Para obter mais informações sobre este produto consulte o site da
<a href=”mailto:vsf@istec.pt?subject=assuntoxpto?body=texto da msg”>
Microsoft Corporation.
</a>
</p>
<p>
Aceda ao nosso <a href=“formularios/form1.htm”>formulário</a>
Base
• Define o URL base do documento, a partir do qual são
formados todos os URL relativos que fazem parte do
documento.
<!DOCTYPE html>
<html>
<head>
<base href=http://abc.com/def/>
<!--Em alguns casos a referência aos url ou ficheiros pode precisar de
“”-“http://abc.com/def/”-->
</head>
<body>
<p>Para obter mais informações consulte <a href=ghi/pagina1.html>página1.</a><p>
</body>
</html>
Base
• Define o URL base do documento, a partir do qual
são formados todos os URL relativos que fazem parte
do documento.
<!DOCTYPE html>
<head>
<base href=http://abc.com/def/>
<!--Em alguns casos a referência aos url ou ficheiros pode precisar de
“”-“http://abc.com/def/”-->
</head>
<body>
<p>Para obter mais informações consulte <a
href=ghi/pagina1.html>página1.</a><p>
</body>
</html> O URL definido neste exemplo :é
http://abc.com/def/ghi/pagina1.html
html 5
• 3 Objectivos Principais da na Especificação:
1. Definir alguns comportamentos do browser que
podem ser personalizados
2. Definir o tratamento de erros pela primeira vez
em html
3. Desenvolvimento da linguagem para facilitar a
criação de web applications.
html 5
1. Criar uma nova página de início definindo o
tipo de documento como html 5
<!doctype html>
</html>
html 5
2. Definir o idioma da página utilizado o Atributo
lang do Elemento <html>
<!doctype html>
<html lang=“pt”>
</html>
N o indica aã
codifica oçã
de caracteres
html 5
3. Definir a codificação de caracteres com um
meta tag:
<!doctype html>
<html lang=“pt”>
<head>
<meta charset=ISO-8859-1>
</head>
</html>
html 5
4. Definir um título para a página:
<!doctype html>
<html lang=“pt”>
<head>
<meta charset=ISO-8859-1>
<title>Benvindo ao html</title>
</head>
</html>
Exemplos
•O ELEMENTO TITLE
<!DOCTYPE html>
<html lang="pt">
<head>
<title>Meu documento HTML</title>
</head>
<body>
</body>
</html>
Exemplo - O elemento TITLE
Exemplos
•ESCRERVER DIRECTAMENTE NO BROWSER
<!DOCTYPE html>
<html lang="pt">
<!-- Meramente Indicativo não indica a codificação de caracteres -->
<head>
<meta charset=ISO-8859-1>
<!-- Codificação simplificada de caracteres em Português -->
<title>Benvindo ao HTML</title>
</head>
<body>
Escrever Directamente no browser sem elemento
</body>
</html>
EXEMPLO
•PARÁGRAFOS E COMENTÁRIOS
<!DOCTYPE html>
<html lang="pt">
<!-- Meramente Indicativo não indica a codificação de caracteres -->
<head>
<meta charset=ISO-8859-1>
<!-- Codificação simplificada de caracteres em Português -->
<title>Benvindo ao HTML</title>
</head>
<body>
<!--Estrofe 1, Canto I -->
<p>As armas e os barões assinalados,</p>
<p>Que da ocidental praia Lusitana,</p>
<p>Por mares nunca de antes navegados,</p>
<p>Passaram ainda além da Taprobana,</p>
<p>Em perigos e guerras esforçados,</p>
<p>Mais do que prometia a força humana,</p>
<p>E entre gente remota edificaram</p>
<p>Novo Reino, que tanto sublimaram;</p>
</body>
</html>
Exemplo
•ATRIBUTO TITLE
<!DOCTYPE html>
<html lang="pt">
<!-- Meramente Indicativo não indica a codificação de caracteres -->
<head>
<meta charset=ISO-8859-1>
<!-- Codificação simplificada de caracteres em Português -->
<title>Benvindo ao HTML</title>
</head>
<body>
<!--Estrofe 1, Canto I -->
<p title="E1V1">As armas e os barões assinalados,</p>
<p title="E1V2">Que da ocidental praia Lusitana,</p>
<p title="E1V13">Por mares nunca de antes navegados,</p>
<p>Passaram ainda além da Taprobana,</p>
<p>Em perigos e guerras esforçados,</p>
<p>Mais do que prometia a força humana,</p>
<p>E entre gente remota edificaram</p>
<p>Novo Reino, que tanto sublimaram;</p>
</body>
</html>
Exemplo
•ATRIBUTO ALIGN
<!DOCTYPE html>
<html lang="pt">
<!-- Meramente Indicativo não indica a codificação de caracteres -->
<head>
<meta charset=ISO-8859-1>
<!-- Codificação simplificada de caracteres em Português -->
<title>Benvindo ao HTML</title>
</head>
<body>
<!--Estrofe 1, Canto I -->
<p align="justify">É pouco o que se sabe de Luís Vaz de Camões, e esse pouco é, ainda assim e na
maioria dos casos, duvidoso. (…)</p>
<p title="E1V1" align="center">As armas e os barões assinalados,</p>
<p title="E1V2" align="right">Que da ocidental praia Lusitana,</p>
<p title="E1V13" align="left">Por mares nunca de antes navegados,</p>
<p>Passaram ainda além da Taprobana,</p>
<p>Em perigos e guerras esforçados,</p>
<p>Mais do que prometia a força humana,</p>
<p>E entre gente remota edificaram</p>
<p>Novo Reino, que tanto sublimaram;</p>
Exemplo
•HEADINGS
<!DOCTYPE html> <html lang="pt">
<head>
<meta charset=ISO-8859-1>
<title>Headings de HTML</title>
</head>
<body>
<h1>Cabeçalho de nível 1</h1>
<h2>Cabeçalho de nível 2</h2>
<h3>Cabeçalho de nível 3</h3>
<h4>Cabeçalho de nível 4</h4>
<p>Parágrafo</p>
<h5>Cabeçalho de nível 5</h5>
<h6>Cabeçalho de nível 6</h6>
</body>
</html>
Exemplo
•LINHAS HORIZONTAIS
<!DOCTYPE html> <html lang="pt">
<head>
<meta charset=ISO-8859-1>
<title>Headings de HTML</title>
</head>
<body>
h1>Cabeçalho de nível 1</h1>
<hr>
<h2>Cabeçalho de nível 2</h2>
<hr width=50%>
<h3>Cabeçalho de nível 3</h3>
<hr size=30>
<h4>Cabeçalho de nível 4</h4>
<hr noshade>
<p>Parágrafo</p>
<hr width=50% align=right>
(…)
Exemplo
Exemplos
• Bold, Itálico e Sublinhado
• Quebras de linha
• Exemplo com vários elementos
• Texto semântico
• O elemento <em>
• O elemento <strong>

Mais conteúdo relacionado

Destaque

Fashion Trends News 1ºBimestre.2012
Fashion Trends News 1ºBimestre.2012Fashion Trends News 1ºBimestre.2012
Fashion Trends News 1ºBimestre.2012josegiordano
 
PED - Pesquisa de Emprego e Desemprego - REGIÃO METROPOLITANA DE PORTO ALEGRE...
PED - Pesquisa de Emprego e Desemprego - REGIÃO METROPOLITANA DE PORTO ALEGRE...PED - Pesquisa de Emprego e Desemprego - REGIÃO METROPOLITANA DE PORTO ALEGRE...
PED - Pesquisa de Emprego e Desemprego - REGIÃO METROPOLITANA DE PORTO ALEGRE...Fundação de Economia e Estatística
 
Poluição das águas 2011
Poluição das águas 2011Poluição das águas 2011
Poluição das águas 2011Anguera Online
 
informática na educação na disciplina de porturguês
informática na educação na disciplina de porturguêsinformática na educação na disciplina de porturguês
informática na educação na disciplina de porturguêsVictor Hugo Barbosa Cipriano
 
Que Importa
Que ImportaQue Importa
Que ImportaJNR
 
Que importa (1)
Que importa (1)Que importa (1)
Que importa (1)Bernardita
 
Informativo Quilombo - Primeiro Trimestre de 2012
Informativo Quilombo - Primeiro Trimestre de 2012Informativo Quilombo - Primeiro Trimestre de 2012
Informativo Quilombo - Primeiro Trimestre de 2012Marcelo Moretti
 
Decisiones estratégicas para el éxito para tu modern app
Decisiones estratégicas para el éxito para tu modern appDecisiones estratégicas para el éxito para tu modern app
Decisiones estratégicas para el éxito para tu modern appRaona
 
Reclamacoes
ReclamacoesReclamacoes
ReclamacoesJNR
 
Apres Cargas Resumo
Apres Cargas ResumoApres Cargas Resumo
Apres Cargas Resumoosw.rossetto
 
Presentation bootcamp informativo turma 6
Presentation bootcamp informativo  turma 6Presentation bootcamp informativo  turma 6
Presentation bootcamp informativo turma 6Vitor Pires
 

Destaque (18)

NuGet no Contexto Empresarial
NuGet no Contexto EmpresarialNuGet no Contexto Empresarial
NuGet no Contexto Empresarial
 
Fashion Trends News 1ºBimestre.2012
Fashion Trends News 1ºBimestre.2012Fashion Trends News 1ºBimestre.2012
Fashion Trends News 1ºBimestre.2012
 
PED - Pesquisa de Emprego e Desemprego - REGIÃO METROPOLITANA DE PORTO ALEGRE...
PED - Pesquisa de Emprego e Desemprego - REGIÃO METROPOLITANA DE PORTO ALEGRE...PED - Pesquisa de Emprego e Desemprego - REGIÃO METROPOLITANA DE PORTO ALEGRE...
PED - Pesquisa de Emprego e Desemprego - REGIÃO METROPOLITANA DE PORTO ALEGRE...
 
Poluição das águas 2011
Poluição das águas 2011Poluição das águas 2011
Poluição das águas 2011
 
informática na educação na disciplina de porturguês
informática na educação na disciplina de porturguêsinformática na educação na disciplina de porturguês
informática na educação na disciplina de porturguês
 
O Mercosul potencializa o Brasil - André Reis
O Mercosul potencializa o Brasil - André ReisO Mercosul potencializa o Brasil - André Reis
O Mercosul potencializa o Brasil - André Reis
 
Apresentação1
Apresentação1Apresentação1
Apresentação1
 
Marmato
MarmatoMarmato
Marmato
 
Que Importa
Que ImportaQue Importa
Que Importa
 
Que importa (1)
Que importa (1)Que importa (1)
Que importa (1)
 
Informativo Quilombo - Primeiro Trimestre de 2012
Informativo Quilombo - Primeiro Trimestre de 2012Informativo Quilombo - Primeiro Trimestre de 2012
Informativo Quilombo - Primeiro Trimestre de 2012
 
Tarea 3
Tarea 3Tarea 3
Tarea 3
 
Decisiones estratégicas para el éxito para tu modern app
Decisiones estratégicas para el éxito para tu modern appDecisiones estratégicas para el éxito para tu modern app
Decisiones estratégicas para el éxito para tu modern app
 
Reclamacoes
ReclamacoesReclamacoes
Reclamacoes
 
Apres Cargas Resumo
Apres Cargas ResumoApres Cargas Resumo
Apres Cargas Resumo
 
A globalização
A globalização A globalização
A globalização
 
Presentation bootcamp informativo turma 6
Presentation bootcamp informativo  turma 6Presentation bootcamp informativo  turma 6
Presentation bootcamp informativo turma 6
 
Cobit
CobitCobit
Cobit
 

Semelhante a 03 h iperlinks

Semelhante a 03 h iperlinks (20)

Desenvolvimento para a Internet - Aula 04
Desenvolvimento para a Internet - Aula 04Desenvolvimento para a Internet - Aula 04
Desenvolvimento para a Internet - Aula 04
 
HTML5 - Tags semânticas
HTML5 - Tags semânticasHTML5 - Tags semânticas
HTML5 - Tags semânticas
 
Introdução ao HTML e CSS
Introdução ao HTML e CSSIntrodução ao HTML e CSS
Introdução ao HTML e CSS
 
HTML Básico
HTML BásicoHTML Básico
HTML Básico
 
Curso HTML módulo 2
Curso HTML módulo 2Curso HTML módulo 2
Curso HTML módulo 2
 
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
 
XHTML Básico
XHTML BásicoXHTML Básico
XHTML Básico
 
Aplicativo aula04
Aplicativo aula04Aplicativo aula04
Aplicativo aula04
 
Php aula1
Php aula1Php aula1
Php aula1
 
Desevolvimento Web Client-side - HTML
Desevolvimento Web Client-side - HTMLDesevolvimento Web Client-side - HTML
Desevolvimento Web Client-side - HTML
 
Html5 em 15 minutos
Html5 em 15 minutosHtml5 em 15 minutos
Html5 em 15 minutos
 
HTML + CSS
HTML + CSSHTML + CSS
HTML + CSS
 
00 a linguagem html
00 a linguagem html00 a linguagem html
00 a linguagem html
 
Introdução ao HTML 5 do Básico ao avançado
Introdução ao HTML 5 do Básico ao avançadoIntrodução ao HTML 5 do Básico ao avançado
Introdução ao HTML 5 do Básico ao avançado
 
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTMLCurso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTML
 
Programacao para Web I 03 HTML
Programacao para Web I 03 HTMLProgramacao para Web I 03 HTML
Programacao para Web I 03 HTML
 
Aula 1 linguagem html (1)
Aula 1   linguagem html (1)Aula 1   linguagem html (1)
Aula 1 linguagem html (1)
 
Iniciação em HTML
Iniciação em HTMLIniciação em HTML
Iniciação em HTML
 
Introdução de web
Introdução de webIntrodução de web
Introdução de web
 
HTML
HTMLHTML
HTML
 

Mais de Vasco Ferreira

04 03 exercício bikes - escolher elementos
04 03 exercício bikes - escolher elementos04 03 exercício bikes - escolher elementos
04 03 exercício bikes - escolher elementosVasco Ferreira
 
04 01 estrutura de um documento
04 01 estrutura de um documento04 01 estrutura de um documento
04 01 estrutura de um documentoVasco Ferreira
 
02 a formatação de texto em HTML
02 a formatação de texto em HTML02 a formatação de texto em HTML
02 a formatação de texto em HTMLVasco Ferreira
 
ISCIA - Trabalho de Grupo 1
ISCIA - Trabalho de Grupo 1ISCIA - Trabalho de Grupo 1
ISCIA - Trabalho de Grupo 1Vasco Ferreira
 

Mais de Vasco Ferreira (8)

05 01 tabelas2
05 01 tabelas205 01 tabelas2
05 01 tabelas2
 
05 01 tabelas
05 01 tabelas05 01 tabelas
05 01 tabelas
 
04 03 exercício bikes - escolher elementos
04 03 exercício bikes - escolher elementos04 03 exercício bikes - escolher elementos
04 03 exercício bikes - escolher elementos
 
04 02 novos elementos
04 02 novos elementos04 02 novos elementos
04 02 novos elementos
 
04 01 estrutura de um documento
04 01 estrutura de um documento04 01 estrutura de um documento
04 01 estrutura de um documento
 
02 a formatação de texto em HTML
02 a formatação de texto em HTML02 a formatação de texto em HTML
02 a formatação de texto em HTML
 
Iscia tg2
Iscia tg2Iscia tg2
Iscia tg2
 
ISCIA - Trabalho de Grupo 1
ISCIA - Trabalho de Grupo 1ISCIA - Trabalho de Grupo 1
ISCIA - Trabalho de Grupo 1
 

Último

Apresente de forma sucinta as atividades realizadas ao longo do semestre, con...
Apresente de forma sucinta as atividades realizadas ao longo do semestre, con...Apresente de forma sucinta as atividades realizadas ao longo do semestre, con...
Apresente de forma sucinta as atividades realizadas ao longo do semestre, con...Colaborar Educacional
 
Poder do convencimento,........... .
Poder do convencimento,...........         .Poder do convencimento,...........         .
Poder do convencimento,........... .WAGNERJESUSDACUNHA
 
Aula 6 - O Imperialismo e seu discurso civilizatório.pptx
Aula 6 - O Imperialismo e seu discurso civilizatório.pptxAula 6 - O Imperialismo e seu discurso civilizatório.pptx
Aula 6 - O Imperialismo e seu discurso civilizatório.pptxMarceloDosSantosSoar3
 
Caça palavras - BULLYING
Caça palavras  -  BULLYING  Caça palavras  -  BULLYING
Caça palavras - BULLYING Mary Alvarenga
 
Trabalho DAC História 25 de Abril de 1974
Trabalho DAC História 25 de Abril de 1974Trabalho DAC História 25 de Abril de 1974
Trabalho DAC História 25 de Abril de 1974AnaRitaFreitas7
 
ARTE BARROCA E ROCOCO BRASILEIRO-min.pdf
ARTE BARROCA E ROCOCO BRASILEIRO-min.pdfARTE BARROCA E ROCOCO BRASILEIRO-min.pdf
ARTE BARROCA E ROCOCO BRASILEIRO-min.pdfItaloAtsoc
 
A CONCEPÇÃO FILO/SOCIOLÓGICA DE KARL MARX
A CONCEPÇÃO FILO/SOCIOLÓGICA DE KARL MARXA CONCEPÇÃO FILO/SOCIOLÓGICA DE KARL MARX
A CONCEPÇÃO FILO/SOCIOLÓGICA DE KARL MARXHisrelBlog
 
Depende De Nós! José Ernesto Ferraresso.ppsx
Depende De Nós! José Ernesto Ferraresso.ppsxDepende De Nós! José Ernesto Ferraresso.ppsx
Depende De Nós! José Ernesto Ferraresso.ppsxLuzia Gabriele
 
Apresentação sobrea dengue educação.pptx
Apresentação sobrea dengue educação.pptxApresentação sobrea dengue educação.pptx
Apresentação sobrea dengue educação.pptxtaloAugusto8
 
Cruzadinha da dengue - Mosquito Aedes aegypti
Cruzadinha da dengue - Mosquito Aedes aegyptiCruzadinha da dengue - Mosquito Aedes aegypti
Cruzadinha da dengue - Mosquito Aedes aegyptiMary Alvarenga
 
A Congregação de Jesus e Maria, conhecida também como os Eudistas, foi fundad...
A Congregação de Jesus e Maria, conhecida também como os Eudistas, foi fundad...A Congregação de Jesus e Maria, conhecida também como os Eudistas, foi fundad...
A Congregação de Jesus e Maria, conhecida também como os Eudistas, foi fundad...Unidad de Espiritualidad Eudista
 
arte retrato de um povo - Expressão Cultural e Identidade Nacional
arte retrato de um povo - Expressão Cultural e Identidade Nacionalarte retrato de um povo - Expressão Cultural e Identidade Nacional
arte retrato de um povo - Expressão Cultural e Identidade Nacionalidicacia
 
Atividade de matemática para simulado de 2024
Atividade de matemática para simulado de 2024Atividade de matemática para simulado de 2024
Atividade de matemática para simulado de 2024gilmaraoliveira0612
 
Treinamento de Avaliação de Desempenho HBB
Treinamento de Avaliação de Desempenho HBBTreinamento de Avaliação de Desempenho HBB
Treinamento de Avaliação de Desempenho HBBDiegoFelicioTexeira
 
PROJETO DE EXTENSÃO - SEGURANÇA, INOVAÇÃO E SUSTENTABILIDADE PARA O BEM COMUM...
PROJETO DE EXTENSÃO - SEGURANÇA, INOVAÇÃO E SUSTENTABILIDADE PARA O BEM COMUM...PROJETO DE EXTENSÃO - SEGURANÇA, INOVAÇÃO E SUSTENTABILIDADE PARA O BEM COMUM...
PROJETO DE EXTENSÃO - SEGURANÇA, INOVAÇÃO E SUSTENTABILIDADE PARA O BEM COMUM...Colaborar Educacional
 

Último (20)

Abordagem 2. Análise temática (Severino, 2013)_PdfToPowerPoint.pdf
Abordagem 2. Análise temática (Severino, 2013)_PdfToPowerPoint.pdfAbordagem 2. Análise temática (Severino, 2013)_PdfToPowerPoint.pdf
Abordagem 2. Análise temática (Severino, 2013)_PdfToPowerPoint.pdf
 
Apresente de forma sucinta as atividades realizadas ao longo do semestre, con...
Apresente de forma sucinta as atividades realizadas ao longo do semestre, con...Apresente de forma sucinta as atividades realizadas ao longo do semestre, con...
Apresente de forma sucinta as atividades realizadas ao longo do semestre, con...
 
Boletim informativo Contacto - março 2024
Boletim informativo Contacto - março 2024Boletim informativo Contacto - março 2024
Boletim informativo Contacto - março 2024
 
Poder do convencimento,........... .
Poder do convencimento,...........         .Poder do convencimento,...........         .
Poder do convencimento,........... .
 
Aula 6 - O Imperialismo e seu discurso civilizatório.pptx
Aula 6 - O Imperialismo e seu discurso civilizatório.pptxAula 6 - O Imperialismo e seu discurso civilizatório.pptx
Aula 6 - O Imperialismo e seu discurso civilizatório.pptx
 
Abordagem 1. Análise textual (Severino, 2013).pdf
Abordagem 1. Análise textual (Severino, 2013).pdfAbordagem 1. Análise textual (Severino, 2013).pdf
Abordagem 1. Análise textual (Severino, 2013).pdf
 
Caça palavras - BULLYING
Caça palavras  -  BULLYING  Caça palavras  -  BULLYING
Caça palavras - BULLYING
 
Abordagem 3. Análise interpretativa (Severino, 2013)_PdfToPowerPoint.pdf
Abordagem 3. Análise interpretativa (Severino, 2013)_PdfToPowerPoint.pdfAbordagem 3. Análise interpretativa (Severino, 2013)_PdfToPowerPoint.pdf
Abordagem 3. Análise interpretativa (Severino, 2013)_PdfToPowerPoint.pdf
 
Trabalho DAC História 25 de Abril de 1974
Trabalho DAC História 25 de Abril de 1974Trabalho DAC História 25 de Abril de 1974
Trabalho DAC História 25 de Abril de 1974
 
ARTE BARROCA E ROCOCO BRASILEIRO-min.pdf
ARTE BARROCA E ROCOCO BRASILEIRO-min.pdfARTE BARROCA E ROCOCO BRASILEIRO-min.pdf
ARTE BARROCA E ROCOCO BRASILEIRO-min.pdf
 
A CONCEPÇÃO FILO/SOCIOLÓGICA DE KARL MARX
A CONCEPÇÃO FILO/SOCIOLÓGICA DE KARL MARXA CONCEPÇÃO FILO/SOCIOLÓGICA DE KARL MARX
A CONCEPÇÃO FILO/SOCIOLÓGICA DE KARL MARX
 
Abordagens 4 (Problematização) e 5 (Síntese pessoal) do texto de Severino (20...
Abordagens 4 (Problematização) e 5 (Síntese pessoal) do texto de Severino (20...Abordagens 4 (Problematização) e 5 (Síntese pessoal) do texto de Severino (20...
Abordagens 4 (Problematização) e 5 (Síntese pessoal) do texto de Severino (20...
 
Depende De Nós! José Ernesto Ferraresso.ppsx
Depende De Nós! José Ernesto Ferraresso.ppsxDepende De Nós! José Ernesto Ferraresso.ppsx
Depende De Nós! José Ernesto Ferraresso.ppsx
 
Apresentação sobrea dengue educação.pptx
Apresentação sobrea dengue educação.pptxApresentação sobrea dengue educação.pptx
Apresentação sobrea dengue educação.pptx
 
Cruzadinha da dengue - Mosquito Aedes aegypti
Cruzadinha da dengue - Mosquito Aedes aegyptiCruzadinha da dengue - Mosquito Aedes aegypti
Cruzadinha da dengue - Mosquito Aedes aegypti
 
A Congregação de Jesus e Maria, conhecida também como os Eudistas, foi fundad...
A Congregação de Jesus e Maria, conhecida também como os Eudistas, foi fundad...A Congregação de Jesus e Maria, conhecida também como os Eudistas, foi fundad...
A Congregação de Jesus e Maria, conhecida também como os Eudistas, foi fundad...
 
arte retrato de um povo - Expressão Cultural e Identidade Nacional
arte retrato de um povo - Expressão Cultural e Identidade Nacionalarte retrato de um povo - Expressão Cultural e Identidade Nacional
arte retrato de um povo - Expressão Cultural e Identidade Nacional
 
Atividade de matemática para simulado de 2024
Atividade de matemática para simulado de 2024Atividade de matemática para simulado de 2024
Atividade de matemática para simulado de 2024
 
Treinamento de Avaliação de Desempenho HBB
Treinamento de Avaliação de Desempenho HBBTreinamento de Avaliação de Desempenho HBB
Treinamento de Avaliação de Desempenho HBB
 
PROJETO DE EXTENSÃO - SEGURANÇA, INOVAÇÃO E SUSTENTABILIDADE PARA O BEM COMUM...
PROJETO DE EXTENSÃO - SEGURANÇA, INOVAÇÃO E SUSTENTABILIDADE PARA O BEM COMUM...PROJETO DE EXTENSÃO - SEGURANÇA, INOVAÇÃO E SUSTENTABILIDADE PARA O BEM COMUM...
PROJETO DE EXTENSÃO - SEGURANÇA, INOVAÇÃO E SUSTENTABILIDADE PARA O BEM COMUM...
 

03 h iperlinks

  • 3. Hiperlink • Destino de um link Outro recurso URL endere oç
  • 4. Hiperlink • Endereço protocolo Localiza o doçã server Localiza oçã do recurso no server: // http www.istec.pt Web/index.html: // ftp www.istec.pt Web/index.html: // mailto macribey@istec.pt Subject=assunto: ? file computador caminho/index.html: //
  • 5. Hipertexto Links e URLs • Link - Origem de uma ligação que pode conter: – Apontador para novo recurso: • Novo Documento html ou de outro tipo. • Novo Endereço URL • Endereço de E-Mail
  • 6. Hiperlink •ELEMENTO <a> Define uma hiperligação que pode ser utilizada para aceder a outra página. Exemplo: <a href=“http://www.istec.pt”> Ir para o ISTEC </a>
  • 7. Hiperlink •ELEMENTO <a> Define uma hiperligação que pode ser utilizada para aceder a outra página. Exemplo: <a href=“http://www.istec.pt”> O atributo href indica o destino da hiperliga o.çã
  • 8. Hiperlink •ELEMENTO <a> Define uma hiperligação que pode ser utilizada para aceder a outra página. Exemplo: <a href=“http://www.istec.pt”> Quando se tratar de aceder a um novo URL o endere o deç destino deve ser sempre precedido de http:// Exerc cioí
  • 9. Hiperlink •ELEMENTO <a> Define uma hiperligação que pode ser utilizada para aceder a um recurso do mesmo site: … <BODY> …texto… <P>Poderá encontrar mais conteúdo em <A href=“cap2.html”>Capítulo 2</A>. Veja também <A href=“../imgs/floresta.gif”>mapa da floresta encantada</A>. </BODY> Pressionando o rato sobre estes links os utilizadores podem aceder a estes recursos – uma imagem, uma p gina html.á
  • 10. Hiperlink •ELEMENTO <a> Define uma hiperligação que pode ser utilizada para aceder a um recurso do mesmo site: … <BODY> …texto… <P>Poderá encontrar mais conteúdo em <A href=“cap2.html”>Capítulo 2</A>. Veja também <A href=“../imgs/floresta.gif”>mapa da floresta encantada</A>. </BODY> Quando se trata de recursos locais, basta indicar o nome e as pastas que cont mê os recursos. Exerc cioí
  • 11. Hiperlinks •ELEMENTO <a> Links dentro do mesmo documento: O Destino final de uma hiperligação pode ser um local assinalado dentro do mesmo documento HTML, esse local designado por âncora, é identificado também com o elemento <a> mas com o atributo name.
  • 12. Hiperlinks •ELEMENTO <a> Links dentro do mesmo documento: Exemplo: Criar uma tabela de conteúdos para um livro. Cada link acede a um novo capítulo do livro.
  • 13. •ELEMENTO <a> … <h4><a href="#canto1">Canto I</a></h4> <h4><a href="#canto2">Canto II</a></h4> <h4><a href="#canto3">Canto III</a></h4> <h2><a name="canto1">Canto I</a></h2> <div>1<br/> As armas e os barões assinalados,<br/> Que da ocidental praia Lusitana,<br/> Por mares nunca de antes navegados,<br/> Passaram ainda além da Taprobana,<br/> Em perigos e guerras esforçados,<br/> Mais do que prometia a força humana,<br/> E entre gente remota edificaram<br/> Novo Reino, que tanto sublimaram;<br/> </div><br/> … <h2><a name="canto2">Canto II</a></h2> <div>2<br/> <a href=“#canto1> Canto1 </a> O s mbolo # indica queí Se trata de uma hiperliga oçã para dentro do mesmo Documento html.
  • 14. •ELEMENTO <a> … <h4><a href="#canto1">Canto I</a></h4> <h4><a href="#canto2">Canto II</a></h4> <h4><a href="#canto3">Canto III</a></h4> <h2><a name="canto1">Canto I</a></h2> <div>1<br/> As armas e os barões assinalados,<br/> Que da ocidental praia Lusitana,<br/> Por mares nunca de antes navegados,<br/> Passaram ainda além da Taprobana,<br/> Em perigos e guerras esforçados,<br/> Mais do que prometia a força humana,<br/> E entre gente remota edificaram<br/> Novo Reino, que tanto sublimaram;<br/> </div><br/> … <h2><a name="canto2">Canto II</a></h2> <div>2<br/> <a name=“canto1> Canto I </a> Identifica um potencial ponto de destino de uma hiperliga o.çã EXERC CIOÍ
  • 15. Hiperlink para e-mail •Definir uma hiperligação que permite enviar um e-mail <a href=“mailto:destino@correio.pt”> envia e-mail </a> Exerc cioí
  • 16. Hiperlink para e-mail •Definir o campo Assunto da mensagem de e-mail: <a href=“mailto:destino@correio.pt?subject=nova %20mensagem”>envia e-mail</a> Exerc cioí
  • 17. Hiperlink para e-mail •Definir o conteúdo do Corpo da mensagem de e-mail: <a href=“mailto:destino@correio.pt?subject=nova %20mensagem?body=por favor envie uma cópia do novo contrato”>envia e-mail</a> Exerc cioí
  • 18. TabIndex •Ordem de tabulação <p>Experimente os nossos <a href=“bolos.html” tabindex=“3”>deliciosos bolos</a>.</p> Exerc cioí
  • 19. Target • Utilizado quando se usavam frames – “_blank” – carrega o conteúdo numa nova janela – “nome frame” – carrega conteúdo na frame definida com este nome Exerc cioí
  • 20. Hiperlink • Endereço protocolo Localiza o do servidorçã Localiza o do recurso no servidorçã: // http www.istec.pt Web/index.html: // ftp www.istec.pt Web/index.html: // mailto macribey@istec.pt Subject=assunto: ? file computador caminho/index.html: //
  • 21. Hipertexto Links e URLs •Link – Para endereço externo: <!DOCTYPE html> <html lang=“pt”> <head> <meta charset=Latin-1> </head> <body> <P> Para obter mais informações sobre este produto consulte o site da <a href=”http://www.microsoft.com”> Microsoft Corporation. </a> </P> </body> </html>
  • 22. Hipertexto Links e URLs •Link – Para documento externo na mesma pasta: <!DOCTYPE html> <html lang=“pt”> <head> <meta charset=Latin-1> </head> <body> <p> Para obter mais informações sobre este produto consulte o site da <a href=”http://www.microsoft.com”> Microsoft Corporation. </a> </p> <p>Aceda ao nosso <a href=“form.htm”>formulário</a> </p> …
  • 23. Hipertexto Links e URLs Link – Para documento externo numa pasta dentro do local de origem- ficheiro index.html <p> Para obter mais informações sobre este produto consulte o site da <a href=”http://www.microsoft.com”> Microsoft Corporation. </a> </p> <p> Aceda ao nosso <a href=“formularios/form1.htm”> Formulário </a> </p> Pasta x Index Pasta Formularios form1
  • 24. Hipertexto Links e URLs •Link – Para um e-mail <p> Para obter mais informações sobre este produto consulte o site da <a href=”mailto:vsf@istec.pt?subject=assuntoxpto?body=texto da msg”> Microsoft Corporation. </a> </p> <p> Aceda ao nosso <a href=“formularios/form1.htm”>formulário</a>
  • 25. Base • Define o URL base do documento, a partir do qual são formados todos os URL relativos que fazem parte do documento. <!DOCTYPE html> <html> <head> <base href=http://abc.com/def/> <!--Em alguns casos a referência aos url ou ficheiros pode precisar de “”-“http://abc.com/def/”--> </head> <body> <p>Para obter mais informações consulte <a href=ghi/pagina1.html>página1.</a><p> </body> </html>
  • 26. Base • Define o URL base do documento, a partir do qual são formados todos os URL relativos que fazem parte do documento. <!DOCTYPE html> <head> <base href=http://abc.com/def/> <!--Em alguns casos a referência aos url ou ficheiros pode precisar de “”-“http://abc.com/def/”--> </head> <body> <p>Para obter mais informações consulte <a href=ghi/pagina1.html>página1.</a><p> </body> </html> O URL definido neste exemplo :é http://abc.com/def/ghi/pagina1.html
  • 27. html 5 • 3 Objectivos Principais da na Especificação: 1. Definir alguns comportamentos do browser que podem ser personalizados 2. Definir o tratamento de erros pela primeira vez em html 3. Desenvolvimento da linguagem para facilitar a criação de web applications.
  • 28. html 5 1. Criar uma nova página de início definindo o tipo de documento como html 5 <!doctype html> </html>
  • 29. html 5 2. Definir o idioma da página utilizado o Atributo lang do Elemento <html> <!doctype html> <html lang=“pt”> </html> N o indica aã codifica oçã de caracteres
  • 30. html 5 3. Definir a codificação de caracteres com um meta tag: <!doctype html> <html lang=“pt”> <head> <meta charset=ISO-8859-1> </head> </html>
  • 31. html 5 4. Definir um título para a página: <!doctype html> <html lang=“pt”> <head> <meta charset=ISO-8859-1> <title>Benvindo ao html</title> </head> </html>
  • 32. Exemplos •O ELEMENTO TITLE <!DOCTYPE html> <html lang="pt"> <head> <title>Meu documento HTML</title> </head> <body> </body> </html> Exemplo - O elemento TITLE
  • 33. Exemplos •ESCRERVER DIRECTAMENTE NO BROWSER <!DOCTYPE html> <html lang="pt"> <!-- Meramente Indicativo não indica a codificação de caracteres --> <head> <meta charset=ISO-8859-1> <!-- Codificação simplificada de caracteres em Português --> <title>Benvindo ao HTML</title> </head> <body> Escrever Directamente no browser sem elemento </body> </html> EXEMPLO
  • 34. •PARÁGRAFOS E COMENTÁRIOS <!DOCTYPE html> <html lang="pt"> <!-- Meramente Indicativo não indica a codificação de caracteres --> <head> <meta charset=ISO-8859-1> <!-- Codificação simplificada de caracteres em Português --> <title>Benvindo ao HTML</title> </head> <body> <!--Estrofe 1, Canto I --> <p>As armas e os barões assinalados,</p> <p>Que da ocidental praia Lusitana,</p> <p>Por mares nunca de antes navegados,</p> <p>Passaram ainda além da Taprobana,</p> <p>Em perigos e guerras esforçados,</p> <p>Mais do que prometia a força humana,</p> <p>E entre gente remota edificaram</p> <p>Novo Reino, que tanto sublimaram;</p> </body> </html> Exemplo
  • 35. •ATRIBUTO TITLE <!DOCTYPE html> <html lang="pt"> <!-- Meramente Indicativo não indica a codificação de caracteres --> <head> <meta charset=ISO-8859-1> <!-- Codificação simplificada de caracteres em Português --> <title>Benvindo ao HTML</title> </head> <body> <!--Estrofe 1, Canto I --> <p title="E1V1">As armas e os barões assinalados,</p> <p title="E1V2">Que da ocidental praia Lusitana,</p> <p title="E1V13">Por mares nunca de antes navegados,</p> <p>Passaram ainda além da Taprobana,</p> <p>Em perigos e guerras esforçados,</p> <p>Mais do que prometia a força humana,</p> <p>E entre gente remota edificaram</p> <p>Novo Reino, que tanto sublimaram;</p> </body> </html> Exemplo
  • 36. •ATRIBUTO ALIGN <!DOCTYPE html> <html lang="pt"> <!-- Meramente Indicativo não indica a codificação de caracteres --> <head> <meta charset=ISO-8859-1> <!-- Codificação simplificada de caracteres em Português --> <title>Benvindo ao HTML</title> </head> <body> <!--Estrofe 1, Canto I --> <p align="justify">É pouco o que se sabe de Luís Vaz de Camões, e esse pouco é, ainda assim e na maioria dos casos, duvidoso. (…)</p> <p title="E1V1" align="center">As armas e os barões assinalados,</p> <p title="E1V2" align="right">Que da ocidental praia Lusitana,</p> <p title="E1V13" align="left">Por mares nunca de antes navegados,</p> <p>Passaram ainda além da Taprobana,</p> <p>Em perigos e guerras esforçados,</p> <p>Mais do que prometia a força humana,</p> <p>E entre gente remota edificaram</p> <p>Novo Reino, que tanto sublimaram;</p> Exemplo
  • 37. •HEADINGS <!DOCTYPE html> <html lang="pt"> <head> <meta charset=ISO-8859-1> <title>Headings de HTML</title> </head> <body> <h1>Cabeçalho de nível 1</h1> <h2>Cabeçalho de nível 2</h2> <h3>Cabeçalho de nível 3</h3> <h4>Cabeçalho de nível 4</h4> <p>Parágrafo</p> <h5>Cabeçalho de nível 5</h5> <h6>Cabeçalho de nível 6</h6> </body> </html> Exemplo
  • 38. •LINHAS HORIZONTAIS <!DOCTYPE html> <html lang="pt"> <head> <meta charset=ISO-8859-1> <title>Headings de HTML</title> </head> <body> h1>Cabeçalho de nível 1</h1> <hr> <h2>Cabeçalho de nível 2</h2> <hr width=50%> <h3>Cabeçalho de nível 3</h3> <hr size=30> <h4>Cabeçalho de nível 4</h4> <hr noshade> <p>Parágrafo</p> <hr width=50% align=right> (…) Exemplo
  • 39. Exemplos • Bold, Itálico e Sublinhado • Quebras de linha • Exemplo com vários elementos • Texto semântico • O elemento <em> • O elemento <strong>