SlideShare uma empresa Scribd logo
Linguagem HTML:
   Imagens e Links
 Prof. André Constantino da Silva
Prof. Rodolfo Francisco de Oliveira
               IAM
        1 semestre de 2012


          12 de março de 2012
Aula de Hoje
• Recursos
  – Imagens
  – links entre páginas da Internet
Recursos
• Tudo o que está publicado na Internet é
  considerado um recurso
  – Exemplo: imagens, vídeos, outras páginas


• Cada recurso possui uma URL
  – Uniform Resource Location (localizador padrão de
    recursos)
  – Também conhecido como endereço eletrônico
A Tag <img>
• Criar o seguinte arquivo HTML:
   <html>
       <body>
                  <title>Manipulando Recursos na Internet</title>
       </body>
        <h1>Recursos na Internet</h1>
        Um objeto disponibilizado em uma rede é chamado de recurso. Portanto,
        recurso pode ser uma página HTML, uma imagem, uma impressora e são
        identificados por uma URL.
        <h2>URL</h2>
        URL é a sigla de Uniform Resource Locator, em português Localizador-
        Padrão de Recursos, é o endereço de um recurso disponível em uma rede.
        <p>Exemplo de imagem: <img src="http://bit.ly/GAvd3D"/>
        </body>
   </html>
A Tag <img>
A Tag <img>
• Utilizada para inserir imagem na página
• Atributos:
  – src: indica a URL (endereço) da imagem que deve
    ser mostrada
Atributos de Tags
• São utilizados para fornecer informações
  adicionais a tag
  – Exemplo: cores, alinhamento de texto, tamanho
    de imagem, destino do link, etc
• Notação:
  – <tag atributo=“conteudo”></tag>
• Deve-se usar aspas duplas para limitar o
  conteúdo do atributo
  – Exceção: números e links sem espaços (mas é
    recomendável colocar)
A Tag <img>
• Modificar seu arquivo HTML para:
    <html>
    ...
        <h2>URL</h2>
        URL é a sigla de Uniform Resource Locator, em português
        Localizador-Padrão de Recursos, é o endereço de um recurso
        disponível em uma rede.
        <p>Exemplo de imagem: <img src=“http://bit.ly/GAvd3D”
        alt=“exemplo de imagem” height=“150” width=“120”/>
        </body>
    </html>
A Tag <img>
• Modificar seu arquivo HTML para:
    <html>
    ...
        <h2>URL</h2>
        URL é a sigla de Uniform Resource Locator, em português
        Localizador-Padrão de Recursos, é o endereço de um recurso
        disponível em uma rede.
        <p>Exemplo de imagem: <img src=“http://bit.ly/GAvd3D”
        align=“right” alt=“exemplo de imagem” height=“150”
        width=“120”/>
        </body>
    </html>
Atributos
• A ordem dos atributos não influencia:
  – Exemplo 1:
     <img src=“http://bit.ly/GAvd3D” align=“center”
     alt=“exemplo de imagem” height=“150” width=“120”/>
  – Exemplo 2:
     <img src=“http://bit.ly/GAvd3D” align=“center”
     height=“150” width=“120” alt=“exemplo de imagem” />
  – Exemplo 3:
     <img src=“http://bit.ly/GAvd3D” height=“150”
     align=“center” alt=“exemplo de imagem” width=“120”/>
O atributo align
• Várias tags também possuem o atributo align
  – <img>
  – <p>
  – <h1>
  – <h2>
  – <h3>
  – Entre outras
O atributo align
Testar com as tags <h1>, <h2> e <p>:

• center:

• left:

• right:

• justify:

• Observação: para testar, diminua o tamanho da janela do
  navegador usando o botão Restaurar e movimente as
  bordas da janela do navegador para ver o que acontece.
O atributo align
• center: centraliza o objeto entre as margens.

• left: desliza o objeto para a margem a esquerda. O
  texto subsequente ficará do lado direito.

• right: desliza o objeto para a margem a direita. O texto
  subsequente ficará do lado esquerdo.

• justify: o texto é justificado entre as margens, caso
  necessite, o navegador inclui espaços em branco.
A Tag <a>
• Utilizada para criar links entre as páginas
• Atributos:
  – href: URL que será exibida caso o link seja clicado


• Formato:
<a href=“link_destino”>conteúdo para clicar</a>
A Tag <a>
• Modificar seu arquivo HTML para:
    <html>
    ...
        <p>Exemplo de imagem: <img src=“http://bit.ly/GAvd3D”
        align=“center” alt=“exemplo de imagem” height=“150”
        width=“120”/>
        <p><a href="http://www.google.com">Link para o
        Google</a>
        </body>
    </html>
A Tag <a>
• E se eu quiser uma imagem clicável que vai
  para uma outra página?
A Tag <a>
<html>
...
    <p>Exemplo de imagem: <img src=“http://bit.ly/GAvd3D”
    align=“center” alt=“exemplo de imagem” height=“150”
    width=“120”/>
    <p>Exemplo de imagem com link:
    <a href=“http://www.google.com”>
           <img src=“http://bit.ly/GArEwq” alt=“Ir para o
    Google” height=“100” width=“140”/>
    </a>
    </body>
</html>
Linkando Páginas de Mesmo Servidor
• Quando linkamos páginas do mesmo servidor
  não é bom colocarmos a URL completa no
  atributo href
  – Quando mudamos o endereço do servidor, temos
    que mudar todas as páginas!
  – Solução: caminho relativo
Linkando Páginas de Mesmo Servidor
• Considere a seguinte estrutura de diretório no
  servidor:
Index.html
<html>
     <title>Índice</title>
     <body>
            <h1>Index</h1>
            <a href=“___________">O Autor</a>
     </body>
</html>
Index.html
<html>
     <title>Índice</title>
     <body>
            <h1>Index</h1>
            <a href="sobreAutor.html">O Autor</a>
     </body>
</html>
Linkando Páginas de Mesmo Servidor
• Considere a seguinte estrutura de diretório no
  servidor:
Index.html
<html>
     <title>Índice</title>
     <body>
            <h1>Index</h1>
            <a href="sobreAutor.html">O Autor</a>
            <p><a href=“_____________">IAM</a>
     </body>
</html>
Index.html
<html>
     <title>Índice</title>
     <body>
            <h1>Index</h1>
            <a href="sobreAutor.html">O Autor</a>
            <p><a href="IAM/ocurso.html">IAM</a>
     </body>
</html>
IAM/ocurso.html
<html>
     <title>Descrição do Curso de IAM</title>

     <body>
          <h1>O Curso de IAM</h1>
          <a href=“___________">Voltar</a>
     </body>
</html>
IAM/ocurso.html
<html>
     <title>Descrição do Curso de IAM</title>

     <body>
          <h1>O Curso de IAM</h1>
          <a href=“../index.html">Voltar</a>
     </body>
</html>
Próxima Aula
• Criação de Formulários

Mais conteúdo relacionado

Mais procurados

Introdução ao HTML e CSS
Introdução ao HTML e CSSIntrodução ao HTML e CSS
Introdução ao HTML e CSS
Sérgio Souza Costa
 
Introdução a HTML, CSS, JS, Ajax
Introdução a HTML, CSS, JS, AjaxIntrodução a HTML, CSS, JS, Ajax
Introdução a HTML, CSS, JS, Ajax
Gabriel Kamimura Yano
 
Html
HtmlHtml
Aula01-JavaScript
Aula01-JavaScriptAula01-JavaScript
Aula01-JavaScript
Jorge Ávila Miranda
 
01 Introdução à programação web
01 Introdução à programação web01 Introdução à programação web
01 Introdução à programação web
Centro Paula Souza
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
Victor Adriel Oliveira
 
Curso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTMLCurso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTML
Rodrigo Bueno Santa Maria, BS, MBA
 
Curso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSSCurso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSS
Rodrigo Bueno Santa Maria, BS, MBA
 
Introdução a programação para a Internet
Introdução a programação para a InternetIntrodução a programação para a Internet
Introdução a programação para a Internet
Leonardo Soares
 
13 Java Script - Validação de formulário
13 Java Script  - Validação de formulário13 Java Script  - Validação de formulário
13 Java Script - Validação de formulário
Centro Paula Souza
 
10 Java Script - Exemplos práticos
10 Java Script - Exemplos práticos10 Java Script - Exemplos práticos
10 Java Script - Exemplos práticos
Centro Paula Souza
 
Aula 1 linguagem html (1)
Aula 1   linguagem html (1)Aula 1   linguagem html (1)
Aula 1 linguagem html (1)
Kaoru Hatake
 
Introdução ao HTML
Introdução ao HTMLIntrodução ao HTML
Introdução ao HTML
Vinícius Roggério da Rocha
 
Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)
Bruno Grange
 
Formulário HTML
Formulário HTMLFormulário HTML
Formulário HTML
Evandro Manara Miletto
 
Introdução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento WebIntrodução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento Web
Anderson Luís Furlan
 
Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSS
ledsifes
 
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScriptCurso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Rodrigo Bueno Santa Maria, BS, MBA
 
Curso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicosCurso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicos
Tiago Antônio da Silva
 
Aula 1 - Programação Dinâmica para Web
Aula 1 - Programação Dinâmica para WebAula 1 - Programação Dinâmica para Web
Aula 1 - Programação Dinâmica para Web
Daniel Brandão
 

Mais procurados (20)

Introdução ao HTML e CSS
Introdução ao HTML e CSSIntrodução ao HTML e CSS
Introdução ao HTML e CSS
 
Introdução a HTML, CSS, JS, Ajax
Introdução a HTML, CSS, JS, AjaxIntrodução a HTML, CSS, JS, Ajax
Introdução a HTML, CSS, JS, Ajax
 
Html
HtmlHtml
Html
 
Aula01-JavaScript
Aula01-JavaScriptAula01-JavaScript
Aula01-JavaScript
 
01 Introdução à programação web
01 Introdução à programação web01 Introdução à programação web
01 Introdução à programação web
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
 
Curso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTMLCurso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTML
 
Curso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSSCurso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSS
 
Introdução a programação para a Internet
Introdução a programação para a InternetIntrodução a programação para a Internet
Introdução a programação para a Internet
 
13 Java Script - Validação de formulário
13 Java Script  - Validação de formulário13 Java Script  - Validação de formulário
13 Java Script - Validação de formulário
 
10 Java Script - Exemplos práticos
10 Java Script - Exemplos práticos10 Java Script - Exemplos práticos
10 Java Script - Exemplos práticos
 
Aula 1 linguagem html (1)
Aula 1   linguagem html (1)Aula 1   linguagem html (1)
Aula 1 linguagem html (1)
 
Introdução ao HTML
Introdução ao HTMLIntrodução ao HTML
Introdução ao HTML
 
Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)
 
Formulário HTML
Formulário HTMLFormulário HTML
Formulário HTML
 
Introdução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento WebIntrodução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento Web
 
Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSS
 
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScriptCurso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
 
Curso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicosCurso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicos
 
Aula 1 - Programação Dinâmica para Web
Aula 1 - Programação Dinâmica para WebAula 1 - Programação Dinâmica para Web
Aula 1 - Programação Dinâmica para Web
 

Destaque

Aula 09 10 e 11 imagens e edição de imagens
Aula 09 10 e 11 imagens e edição de imagensAula 09 10 e 11 imagens e edição de imagens
Aula 09 10 e 11 imagens e edição de imagens
Jolvani Morgan
 
Tags HTML
Tags HTMLTags HTML
Tags HTML
Romario Moreira
 
HTML Básico
HTML BásicoHTML Básico
Html 5 e Css3
Html 5 e Css3Html 5 e Css3
Html 5 e Css3
Faculdade São Lucas
 
HTML, CSS & Style Guides
HTML, CSS & Style GuidesHTML, CSS & Style Guides
HTML, CSS & Style Guides
Bruno Trecenti
 
HTML/CSS Patterns
HTML/CSS PatternsHTML/CSS Patterns
HTML/CSS Patterns
Leonardo Quixada
 
Aula 5 -Avaliação de interfaces de usuário - testes com usuários
Aula 5 -Avaliação de interfaces de usuário - testes com usuáriosAula 5 -Avaliação de interfaces de usuário - testes com usuários
Aula 5 -Avaliação de interfaces de usuário - testes com usuários
André Constantino da Silva
 
Introdução a HTML5
Introdução a HTML5Introdução a HTML5
Introdução a HTML5
Salvador Torres
 
Desenvolvimento-web-com-html-css-e-javascript
Desenvolvimento-web-com-html-css-e-javascriptDesenvolvimento-web-com-html-css-e-javascript
Desenvolvimento-web-com-html-css-e-javascript
Manuel Fernando
 
Aula 6 - Design e Processo de Design de Interfaces de Usuário
Aula 6 - Design e Processo de Design de Interfaces de UsuárioAula 6 - Design e Processo de Design de Interfaces de Usuário
Aula 6 - Design e Processo de Design de Interfaces de Usuário
André Constantino da Silva
 
A verdadeira semântica do HTML
A verdadeira semântica do HTMLA verdadeira semântica do HTML
A verdadeira semântica do HTML
Diego Eis
 
Elementos HTML e Autoridade de Página - Aula 2 - Curso de SEO #OpenSEO
Elementos HTML e Autoridade de Página - Aula 2 - Curso de SEO #OpenSEOElementos HTML e Autoridade de Página - Aula 2 - Curso de SEO #OpenSEO
Elementos HTML e Autoridade de Página - Aula 2 - Curso de SEO #OpenSEO
Diego Ivo
 
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Renato Bongiorno Bonfanti
 
Introdução ao TelEduc
Introdução ao TelEducIntrodução ao TelEduc
Introdução ao TelEduc
André Constantino da Silva
 
HTML Principios Básicos
HTML Principios BásicosHTML Principios Básicos
HTML Principios Básicos
Mayza de Oliveira
 
HTML Básico
HTML BásicoHTML Básico
HTML Básico
Daniel Arndt Alves
 

Destaque (16)

Aula 09 10 e 11 imagens e edição de imagens
Aula 09 10 e 11 imagens e edição de imagensAula 09 10 e 11 imagens e edição de imagens
Aula 09 10 e 11 imagens e edição de imagens
 
Tags HTML
Tags HTMLTags HTML
Tags HTML
 
HTML Básico
HTML BásicoHTML Básico
HTML Básico
 
Html 5 e Css3
Html 5 e Css3Html 5 e Css3
Html 5 e Css3
 
HTML, CSS & Style Guides
HTML, CSS & Style GuidesHTML, CSS & Style Guides
HTML, CSS & Style Guides
 
HTML/CSS Patterns
HTML/CSS PatternsHTML/CSS Patterns
HTML/CSS Patterns
 
Aula 5 -Avaliação de interfaces de usuário - testes com usuários
Aula 5 -Avaliação de interfaces de usuário - testes com usuáriosAula 5 -Avaliação de interfaces de usuário - testes com usuários
Aula 5 -Avaliação de interfaces de usuário - testes com usuários
 
Introdução a HTML5
Introdução a HTML5Introdução a HTML5
Introdução a HTML5
 
Desenvolvimento-web-com-html-css-e-javascript
Desenvolvimento-web-com-html-css-e-javascriptDesenvolvimento-web-com-html-css-e-javascript
Desenvolvimento-web-com-html-css-e-javascript
 
Aula 6 - Design e Processo de Design de Interfaces de Usuário
Aula 6 - Design e Processo de Design de Interfaces de UsuárioAula 6 - Design e Processo de Design de Interfaces de Usuário
Aula 6 - Design e Processo de Design de Interfaces de Usuário
 
A verdadeira semântica do HTML
A verdadeira semântica do HTMLA verdadeira semântica do HTML
A verdadeira semântica do HTML
 
Elementos HTML e Autoridade de Página - Aula 2 - Curso de SEO #OpenSEO
Elementos HTML e Autoridade de Página - Aula 2 - Curso de SEO #OpenSEOElementos HTML e Autoridade de Página - Aula 2 - Curso de SEO #OpenSEO
Elementos HTML e Autoridade de Página - Aula 2 - Curso de SEO #OpenSEO
 
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
 
Introdução ao TelEduc
Introdução ao TelEducIntrodução ao TelEduc
Introdução ao TelEduc
 
HTML Principios Básicos
HTML Principios BásicosHTML Principios Básicos
HTML Principios Básicos
 
HTML Básico
HTML BásicoHTML Básico
HTML Básico
 

Semelhante a Aula 4 – Linguagem HTML - Imagens e links

HTML + CSS
HTML + CSSHTML + CSS
HTML + CSS
Pedro Gaspar
 
XHTML Básico
XHTML BásicoXHTML Básico
XHTML Básico
Ester Razzo Fischer
 
O que todos os developers devem saber sobre seo
O que todos os developers devem saber sobre seoO que todos os developers devem saber sobre seo
O que todos os developers devem saber sobre seo
introfini
 
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
LuisFalco8
 
Mini Curso - jQuery - FMU
Mini Curso - jQuery - FMUMini Curso - jQuery - FMU
Mini Curso - jQuery - FMU
Thiago Ericson
 
SEO para WordPress - Semana de Comunicação Universidade Veiga de Almeida (Sec...
SEO para WordPress - Semana de Comunicação Universidade Veiga de Almeida (Sec...SEO para WordPress - Semana de Comunicação Universidade Veiga de Almeida (Sec...
SEO para WordPress - Semana de Comunicação Universidade Veiga de Almeida (Sec...
Guga Alves
 
WebDesign - Aula05 - Links.pptx
WebDesign - Aula05 - Links.pptxWebDesign - Aula05 - Links.pptx
WebDesign - Aula05 - Links.pptx
GabrielaMota46
 
Css
Css   Css
Aula 02 - Font End
Aula 02 - Font EndAula 02 - Font End
Aula 02 - Font End
mvcbotelho
 
Elemento ancora
Elemento ancoraElemento ancora
Elemento ancora
Denise Lima
 
Recursos de seo
Recursos de seoRecursos de seo
Recursos de seo
Plataforma CORE
 
Curso HTML módulo 2
Curso HTML módulo 2Curso HTML módulo 2
Curso HTML módulo 2
Michel Bernardes de Jesus
 
CHECKLIST DE SEO ONPAGE - Mario Melo
CHECKLIST DE SEO ONPAGE - Mario MeloCHECKLIST DE SEO ONPAGE - Mario Melo
CHECKLIST DE SEO ONPAGE - Mario Melo
Mario Melo
 
Desenvolvimento para a Internet - Aula 04
Desenvolvimento para a Internet - Aula 04Desenvolvimento para a Internet - Aula 04
Desenvolvimento para a Internet - Aula 04
Leandro Rezende
 
Core Web Vitals - Técnicas de Performance Web pra Javascript
Core Web Vitals - Técnicas de Performance Web pra Javascript Core Web Vitals - Técnicas de Performance Web pra Javascript
Core Web Vitals - Técnicas de Performance Web pra Javascript
CamiloMicheletto1
 
04 02 novos elementos
04 02 novos elementos04 02 novos elementos
04 02 novos elementos
Vasco Ferreira
 
Curso de Java (Parte 6) Introdução a Front-end
Curso de Java (Parte 6) Introdução a Front-endCurso de Java (Parte 6) Introdução a Front-end
Curso de Java (Parte 6) Introdução a Front-end
Mario Sergio
 
internet_e_o_html.pdf
internet_e_o_html.pdfinternet_e_o_html.pdf
internet_e_o_html.pdf
asastm2015
 
Jquery Mobile
Jquery MobileJquery Mobile
Jquery Mobile
Rafael Reis
 
Técnicas e processos - HTML / CSS - aula 3
Técnicas e processos - HTML / CSS - aula 3Técnicas e processos - HTML / CSS - aula 3
Técnicas e processos - HTML / CSS - aula 3
Ritielle de Souza
 

Semelhante a Aula 4 – Linguagem HTML - Imagens e links (20)

HTML + CSS
HTML + CSSHTML + CSS
HTML + CSS
 
XHTML Básico
XHTML BásicoXHTML Básico
XHTML Básico
 
O que todos os developers devem saber sobre seo
O que todos os developers devem saber sobre seoO que todos os developers devem saber sobre seo
O que todos os developers devem saber sobre seo
 
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
 
Mini Curso - jQuery - FMU
Mini Curso - jQuery - FMUMini Curso - jQuery - FMU
Mini Curso - jQuery - FMU
 
SEO para WordPress - Semana de Comunicação Universidade Veiga de Almeida (Sec...
SEO para WordPress - Semana de Comunicação Universidade Veiga de Almeida (Sec...SEO para WordPress - Semana de Comunicação Universidade Veiga de Almeida (Sec...
SEO para WordPress - Semana de Comunicação Universidade Veiga de Almeida (Sec...
 
WebDesign - Aula05 - Links.pptx
WebDesign - Aula05 - Links.pptxWebDesign - Aula05 - Links.pptx
WebDesign - Aula05 - Links.pptx
 
Css
Css   Css
Css
 
Aula 02 - Font End
Aula 02 - Font EndAula 02 - Font End
Aula 02 - Font End
 
Elemento ancora
Elemento ancoraElemento ancora
Elemento ancora
 
Recursos de seo
Recursos de seoRecursos de seo
Recursos de seo
 
Curso HTML módulo 2
Curso HTML módulo 2Curso HTML módulo 2
Curso HTML módulo 2
 
CHECKLIST DE SEO ONPAGE - Mario Melo
CHECKLIST DE SEO ONPAGE - Mario MeloCHECKLIST DE SEO ONPAGE - Mario Melo
CHECKLIST DE SEO ONPAGE - Mario Melo
 
Desenvolvimento para a Internet - Aula 04
Desenvolvimento para a Internet - Aula 04Desenvolvimento para a Internet - Aula 04
Desenvolvimento para a Internet - Aula 04
 
Core Web Vitals - Técnicas de Performance Web pra Javascript
Core Web Vitals - Técnicas de Performance Web pra Javascript Core Web Vitals - Técnicas de Performance Web pra Javascript
Core Web Vitals - Técnicas de Performance Web pra Javascript
 
04 02 novos elementos
04 02 novos elementos04 02 novos elementos
04 02 novos elementos
 
Curso de Java (Parte 6) Introdução a Front-end
Curso de Java (Parte 6) Introdução a Front-endCurso de Java (Parte 6) Introdução a Front-end
Curso de Java (Parte 6) Introdução a Front-end
 
internet_e_o_html.pdf
internet_e_o_html.pdfinternet_e_o_html.pdf
internet_e_o_html.pdf
 
Jquery Mobile
Jquery MobileJquery Mobile
Jquery Mobile
 
Técnicas e processos - HTML / CSS - aula 3
Técnicas e processos - HTML / CSS - aula 3Técnicas e processos - HTML / CSS - aula 3
Técnicas e processos - HTML / CSS - aula 3
 

Mais de André Constantino da Silva

Mouse+Teclado x Toque+Caneta: as modalidades de interação em contextos educac...
Mouse+Teclado x Toque+Caneta: as modalidades de interação em contextos educac...Mouse+Teclado x Toque+Caneta: as modalidades de interação em contextos educac...
Mouse+Teclado x Toque+Caneta: as modalidades de interação em contextos educac...
André Constantino da Silva
 
Aula sobre texto academico - elaboração do desenvolvimento
Aula sobre texto academico - elaboração do desenvolvimentoAula sobre texto academico - elaboração do desenvolvimento
Aula sobre texto academico - elaboração do desenvolvimento
André Constantino da Silva
 
Como fazer citações e referências bibliográficas
Como fazer citações e referências bibliográficasComo fazer citações e referências bibliográficas
Como fazer citações e referências bibliográficas
André Constantino da Silva
 
Aula 4 - Avaliação de Interface - Parte 1
Aula 4 -  Avaliação de Interface - Parte 1Aula 4 -  Avaliação de Interface - Parte 1
Aula 4 - Avaliação de Interface - Parte 1
André Constantino da Silva
 
Aula 3 - Fatores Humanos
Aula 3 - Fatores HumanosAula 3 - Fatores Humanos
Aula 3 - Fatores Humanos
André Constantino da Silva
 
Aula 2 - A área de IHC
Aula 2 - A área de IHCAula 2 - A área de IHC
Aula 2 - A área de IHC
André Constantino da Silva
 
Aula 1 - Apresentação da Disciplina
Aula 1 - Apresentação da DisciplinaAula 1 - Apresentação da Disciplina
Aula 1 - Apresentação da Disciplina
André Constantino da Silva
 
Introdução ao ambiente virtual de aprendizagem TelEduc
Introdução ao ambiente virtual de aprendizagem TelEducIntrodução ao ambiente virtual de aprendizagem TelEduc
Introdução ao ambiente virtual de aprendizagem TelEduc
André Constantino da Silva
 
Aula 5 - Fatores Humanos - Parte 2 - Disciplina de IHC
Aula 5 - Fatores Humanos - Parte 2 - Disciplina de IHCAula 5 - Fatores Humanos - Parte 2 - Disciplina de IHC
Aula 5 - Fatores Humanos - Parte 2 - Disciplina de IHC
André Constantino da Silva
 
Aula 4 Fatores Humanos - parte 1 - Disciplina de IHC
Aula 4   Fatores Humanos - parte 1 - Disciplina de IHCAula 4   Fatores Humanos - parte 1 - Disciplina de IHC
Aula 4 Fatores Humanos - parte 1 - Disciplina de IHC
André Constantino da Silva
 
Aula 3 – A áera de IHC
Aula 3 – A áera de IHCAula 3 – A áera de IHC
Aula 3 – A áera de IHC
André Constantino da Silva
 
InkBlog: A Pen-Based Blog Tool for e-Learning Environments
InkBlog: A Pen-Based Blog Tool for e-Learning EnvironmentsInkBlog: A Pen-Based Blog Tool for e-Learning Environments
InkBlog: A Pen-Based Blog Tool for e-Learning Environments
André Constantino da Silva
 
Aula 3
Aula 3Aula 3
Aula 2 final
Aula 2 finalAula 2 final
Aula 1 final
Aula 1 finalAula 1 final
Aula 10 - Comando de Decisão Múltipla e Comandos de Repetição
Aula 10 - Comando de Decisão Múltipla e Comandos de RepetiçãoAula 10 - Comando de Decisão Múltipla e Comandos de Repetição
Aula 10 - Comando de Decisão Múltipla e Comandos de Repetição
André Constantino da Silva
 
Aula 9 - Resultado Operandos Matemáticos, Operadores Aritmeticos, Relacionais...
Aula 9 - Resultado Operandos Matemáticos, Operadores Aritmeticos, Relacionais...Aula 9 - Resultado Operandos Matemáticos, Operadores Aritmeticos, Relacionais...
Aula 9 - Resultado Operandos Matemáticos, Operadores Aritmeticos, Relacionais...
André Constantino da Silva
 
Aula 6 – linguagem HTML - Endereço absoluto e relativo
Aula 6 – linguagem HTML - Endereço absoluto e relativoAula 6 – linguagem HTML - Endereço absoluto e relativo
Aula 6 – linguagem HTML - Endereço absoluto e relativo
André Constantino da Silva
 
Aula 7 – linguagem HTML - Frames
Aula 7 – linguagem HTML - FramesAula 7 – linguagem HTML - Frames
Aula 7 – linguagem HTML - Frames
André Constantino da Silva
 
Aula 8 - Lógica de Programação - Variáveis, Tipos de dados e Operadores
Aula 8 - Lógica de Programação - Variáveis, Tipos de dados e OperadoresAula 8 - Lógica de Programação - Variáveis, Tipos de dados e Operadores
Aula 8 - Lógica de Programação - Variáveis, Tipos de dados e Operadores
André Constantino da Silva
 

Mais de André Constantino da Silva (20)

Mouse+Teclado x Toque+Caneta: as modalidades de interação em contextos educac...
Mouse+Teclado x Toque+Caneta: as modalidades de interação em contextos educac...Mouse+Teclado x Toque+Caneta: as modalidades de interação em contextos educac...
Mouse+Teclado x Toque+Caneta: as modalidades de interação em contextos educac...
 
Aula sobre texto academico - elaboração do desenvolvimento
Aula sobre texto academico - elaboração do desenvolvimentoAula sobre texto academico - elaboração do desenvolvimento
Aula sobre texto academico - elaboração do desenvolvimento
 
Como fazer citações e referências bibliográficas
Como fazer citações e referências bibliográficasComo fazer citações e referências bibliográficas
Como fazer citações e referências bibliográficas
 
Aula 4 - Avaliação de Interface - Parte 1
Aula 4 -  Avaliação de Interface - Parte 1Aula 4 -  Avaliação de Interface - Parte 1
Aula 4 - Avaliação de Interface - Parte 1
 
Aula 3 - Fatores Humanos
Aula 3 - Fatores HumanosAula 3 - Fatores Humanos
Aula 3 - Fatores Humanos
 
Aula 2 - A área de IHC
Aula 2 - A área de IHCAula 2 - A área de IHC
Aula 2 - A área de IHC
 
Aula 1 - Apresentação da Disciplina
Aula 1 - Apresentação da DisciplinaAula 1 - Apresentação da Disciplina
Aula 1 - Apresentação da Disciplina
 
Introdução ao ambiente virtual de aprendizagem TelEduc
Introdução ao ambiente virtual de aprendizagem TelEducIntrodução ao ambiente virtual de aprendizagem TelEduc
Introdução ao ambiente virtual de aprendizagem TelEduc
 
Aula 5 - Fatores Humanos - Parte 2 - Disciplina de IHC
Aula 5 - Fatores Humanos - Parte 2 - Disciplina de IHCAula 5 - Fatores Humanos - Parte 2 - Disciplina de IHC
Aula 5 - Fatores Humanos - Parte 2 - Disciplina de IHC
 
Aula 4 Fatores Humanos - parte 1 - Disciplina de IHC
Aula 4   Fatores Humanos - parte 1 - Disciplina de IHCAula 4   Fatores Humanos - parte 1 - Disciplina de IHC
Aula 4 Fatores Humanos - parte 1 - Disciplina de IHC
 
Aula 3 – A áera de IHC
Aula 3 – A áera de IHCAula 3 – A áera de IHC
Aula 3 – A áera de IHC
 
InkBlog: A Pen-Based Blog Tool for e-Learning Environments
InkBlog: A Pen-Based Blog Tool for e-Learning EnvironmentsInkBlog: A Pen-Based Blog Tool for e-Learning Environments
InkBlog: A Pen-Based Blog Tool for e-Learning Environments
 
Aula 3
Aula 3Aula 3
Aula 3
 
Aula 2 final
Aula 2 finalAula 2 final
Aula 2 final
 
Aula 1 final
Aula 1 finalAula 1 final
Aula 1 final
 
Aula 10 - Comando de Decisão Múltipla e Comandos de Repetição
Aula 10 - Comando de Decisão Múltipla e Comandos de RepetiçãoAula 10 - Comando de Decisão Múltipla e Comandos de Repetição
Aula 10 - Comando de Decisão Múltipla e Comandos de Repetição
 
Aula 9 - Resultado Operandos Matemáticos, Operadores Aritmeticos, Relacionais...
Aula 9 - Resultado Operandos Matemáticos, Operadores Aritmeticos, Relacionais...Aula 9 - Resultado Operandos Matemáticos, Operadores Aritmeticos, Relacionais...
Aula 9 - Resultado Operandos Matemáticos, Operadores Aritmeticos, Relacionais...
 
Aula 6 – linguagem HTML - Endereço absoluto e relativo
Aula 6 – linguagem HTML - Endereço absoluto e relativoAula 6 – linguagem HTML - Endereço absoluto e relativo
Aula 6 – linguagem HTML - Endereço absoluto e relativo
 
Aula 7 – linguagem HTML - Frames
Aula 7 – linguagem HTML - FramesAula 7 – linguagem HTML - Frames
Aula 7 – linguagem HTML - Frames
 
Aula 8 - Lógica de Programação - Variáveis, Tipos de dados e Operadores
Aula 8 - Lógica de Programação - Variáveis, Tipos de dados e OperadoresAula 8 - Lógica de Programação - Variáveis, Tipos de dados e Operadores
Aula 8 - Lógica de Programação - Variáveis, Tipos de dados e Operadores
 

Último

TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdfTOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
Momento da Informática
 
ATIVIDADE 1 - ADSIS - ESTRUTURA DE DADOS II - 52_2024.docx
ATIVIDADE 1 - ADSIS - ESTRUTURA DE DADOS II - 52_2024.docxATIVIDADE 1 - ADSIS - ESTRUTURA DE DADOS II - 52_2024.docx
ATIVIDADE 1 - ADSIS - ESTRUTURA DE DADOS II - 52_2024.docx
2m Assessoria
 
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdfEscola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Gabriel de Mattos Faustino
 
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
Faga1939
 
Manual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdfManual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdf
WELITONNOGUEIRA3
 
História da Rádio- 1936-1970 século XIX .2.pptx
História da Rádio- 1936-1970 século XIX   .2.pptxHistória da Rádio- 1936-1970 século XIX   .2.pptx
História da Rádio- 1936-1970 século XIX .2.pptx
TomasSousa7
 
Segurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas PráticasSegurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas Práticas
Danilo Pinotti
 
DESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdf
DESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdfDESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdf
DESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdf
Momento da Informática
 
Certificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdfCertificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdf
joaovmp3
 
Logica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptxLogica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptx
Momento da Informática
 

Último (10)

TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdfTOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
 
ATIVIDADE 1 - ADSIS - ESTRUTURA DE DADOS II - 52_2024.docx
ATIVIDADE 1 - ADSIS - ESTRUTURA DE DADOS II - 52_2024.docxATIVIDADE 1 - ADSIS - ESTRUTURA DE DADOS II - 52_2024.docx
ATIVIDADE 1 - ADSIS - ESTRUTURA DE DADOS II - 52_2024.docx
 
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdfEscola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
 
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
 
Manual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdfManual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdf
 
História da Rádio- 1936-1970 século XIX .2.pptx
História da Rádio- 1936-1970 século XIX   .2.pptxHistória da Rádio- 1936-1970 século XIX   .2.pptx
História da Rádio- 1936-1970 século XIX .2.pptx
 
Segurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas PráticasSegurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas Práticas
 
DESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdf
DESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdfDESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdf
DESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdf
 
Certificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdfCertificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdf
 
Logica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptxLogica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptx
 

Aula 4 – Linguagem HTML - Imagens e links

  • 1. Linguagem HTML: Imagens e Links Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 12 de março de 2012
  • 2. Aula de Hoje • Recursos – Imagens – links entre páginas da Internet
  • 3. Recursos • Tudo o que está publicado na Internet é considerado um recurso – Exemplo: imagens, vídeos, outras páginas • Cada recurso possui uma URL – Uniform Resource Location (localizador padrão de recursos) – Também conhecido como endereço eletrônico
  • 4. A Tag <img> • Criar o seguinte arquivo HTML: <html> <body> <title>Manipulando Recursos na Internet</title> </body> <h1>Recursos na Internet</h1> Um objeto disponibilizado em uma rede é chamado de recurso. Portanto, recurso pode ser uma página HTML, uma imagem, uma impressora e são identificados por uma URL. <h2>URL</h2> URL é a sigla de Uniform Resource Locator, em português Localizador- Padrão de Recursos, é o endereço de um recurso disponível em uma rede. <p>Exemplo de imagem: <img src="http://bit.ly/GAvd3D"/> </body> </html>
  • 6. A Tag <img> • Utilizada para inserir imagem na página • Atributos: – src: indica a URL (endereço) da imagem que deve ser mostrada
  • 7. Atributos de Tags • São utilizados para fornecer informações adicionais a tag – Exemplo: cores, alinhamento de texto, tamanho de imagem, destino do link, etc • Notação: – <tag atributo=“conteudo”></tag> • Deve-se usar aspas duplas para limitar o conteúdo do atributo – Exceção: números e links sem espaços (mas é recomendável colocar)
  • 8. A Tag <img> • Modificar seu arquivo HTML para: <html> ... <h2>URL</h2> URL é a sigla de Uniform Resource Locator, em português Localizador-Padrão de Recursos, é o endereço de um recurso disponível em uma rede. <p>Exemplo de imagem: <img src=“http://bit.ly/GAvd3D” alt=“exemplo de imagem” height=“150” width=“120”/> </body> </html>
  • 9. A Tag <img> • Modificar seu arquivo HTML para: <html> ... <h2>URL</h2> URL é a sigla de Uniform Resource Locator, em português Localizador-Padrão de Recursos, é o endereço de um recurso disponível em uma rede. <p>Exemplo de imagem: <img src=“http://bit.ly/GAvd3D” align=“right” alt=“exemplo de imagem” height=“150” width=“120”/> </body> </html>
  • 10. Atributos • A ordem dos atributos não influencia: – Exemplo 1: <img src=“http://bit.ly/GAvd3D” align=“center” alt=“exemplo de imagem” height=“150” width=“120”/> – Exemplo 2: <img src=“http://bit.ly/GAvd3D” align=“center” height=“150” width=“120” alt=“exemplo de imagem” /> – Exemplo 3: <img src=“http://bit.ly/GAvd3D” height=“150” align=“center” alt=“exemplo de imagem” width=“120”/>
  • 11. O atributo align • Várias tags também possuem o atributo align – <img> – <p> – <h1> – <h2> – <h3> – Entre outras
  • 12. O atributo align Testar com as tags <h1>, <h2> e <p>: • center: • left: • right: • justify: • Observação: para testar, diminua o tamanho da janela do navegador usando o botão Restaurar e movimente as bordas da janela do navegador para ver o que acontece.
  • 13. O atributo align • center: centraliza o objeto entre as margens. • left: desliza o objeto para a margem a esquerda. O texto subsequente ficará do lado direito. • right: desliza o objeto para a margem a direita. O texto subsequente ficará do lado esquerdo. • justify: o texto é justificado entre as margens, caso necessite, o navegador inclui espaços em branco.
  • 14. A Tag <a> • Utilizada para criar links entre as páginas • Atributos: – href: URL que será exibida caso o link seja clicado • Formato: <a href=“link_destino”>conteúdo para clicar</a>
  • 15. A Tag <a> • Modificar seu arquivo HTML para: <html> ... <p>Exemplo de imagem: <img src=“http://bit.ly/GAvd3D” align=“center” alt=“exemplo de imagem” height=“150” width=“120”/> <p><a href="http://www.google.com">Link para o Google</a> </body> </html>
  • 16. A Tag <a> • E se eu quiser uma imagem clicável que vai para uma outra página?
  • 17. A Tag <a> <html> ... <p>Exemplo de imagem: <img src=“http://bit.ly/GAvd3D” align=“center” alt=“exemplo de imagem” height=“150” width=“120”/> <p>Exemplo de imagem com link: <a href=“http://www.google.com”> <img src=“http://bit.ly/GArEwq” alt=“Ir para o Google” height=“100” width=“140”/> </a> </body> </html>
  • 18. Linkando Páginas de Mesmo Servidor • Quando linkamos páginas do mesmo servidor não é bom colocarmos a URL completa no atributo href – Quando mudamos o endereço do servidor, temos que mudar todas as páginas! – Solução: caminho relativo
  • 19. Linkando Páginas de Mesmo Servidor • Considere a seguinte estrutura de diretório no servidor:
  • 20. Index.html <html> <title>Índice</title> <body> <h1>Index</h1> <a href=“___________">O Autor</a> </body> </html>
  • 21. Index.html <html> <title>Índice</title> <body> <h1>Index</h1> <a href="sobreAutor.html">O Autor</a> </body> </html>
  • 22. Linkando Páginas de Mesmo Servidor • Considere a seguinte estrutura de diretório no servidor:
  • 23. Index.html <html> <title>Índice</title> <body> <h1>Index</h1> <a href="sobreAutor.html">O Autor</a> <p><a href=“_____________">IAM</a> </body> </html>
  • 24. Index.html <html> <title>Índice</title> <body> <h1>Index</h1> <a href="sobreAutor.html">O Autor</a> <p><a href="IAM/ocurso.html">IAM</a> </body> </html>
  • 25. IAM/ocurso.html <html> <title>Descrição do Curso de IAM</title> <body> <h1>O Curso de IAM</h1> <a href=“___________">Voltar</a> </body> </html>
  • 26. IAM/ocurso.html <html> <title>Descrição do Curso de IAM</title> <body> <h1>O Curso de IAM</h1> <a href=“../index.html">Voltar</a> </body> </html>
  • 27. Próxima Aula • Criação de Formulários