Tecnologias Web Prof. Msc. Juliano Gomes Weber Tecnologias Web Notas de Aula – Aula 03 1º Semestre - 2011 UNIJUÍ

Apresentação em tema: "Tecnologias Web Prof. Msc. Juliano Gomes Weber Tecnologias Web Notas de Aula – Aula 03 1º Semestre - 2011 UNIJUÍ"— Transcrição da apresentação:

1 Tecnologias Web jgw@unijui.edu.br Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Tecnologias Web Notas de Aula – Aula 03 1º Semestre - 2011 UNIJUÍ – DETEC – Ciência da Computação

2 O que vimos até então? O que vimos nas duas primeiras aulas? -

3 Gerenciadores de domínios internacionais Registro.br registra domínios nacionais.br... E para registrar um domínio.com sem precisar de um intermediário? IPOWE GODADDY

4 Continuação do html...

5 Links Referencia-se a outros recursos tais como: outra página html, arquivos, imagens etc. Texto ou Imagens podem atuar como hyperlink. UNIVERSIDADE REGIONAL DO NOROESTE DO ESTADO DO RIO GRANDE DO SUL "http://www.unijui.edu.br Prof. Juliano Problema deste comando?

6 6 Tag texto/imagem A âncora de um link pode ser uma imagem ( ) Ligando Documentos Semelhantes a apontadores Considerados a alma da Internet Links

7 7 Links Internos São utilizados para indexar documentos Muito utilizados Pode-se criar links para o interior de outros documentos Âncora:... Destino:... Exemplo 1: Indice Introducao HTML-Tabelas Usando Links... Introducao

8 8 Links Internos Exemplo 2: Veja o nosso tutorial HTML Representação Gráfica do Exemplo 1:

9 9 Links Internos Representação Gráfica do Exemplo 2:

10 Linha Separadora <HR COLOR="RED" SIZE="3"

11 Comentários (IMPORTANTÍSSIMO) - Fornece informação sobre o código do documento mas não tem qualquer efeito em termos de formatação/estruturação - - Serve apenas para dar informação acerca do conteúdo do código - Sintaxe : <Tag Inicial <! - -

12 Comentários

13 Exercício Crie 5 páginas html, totalmente linkáveis entre si. O assunto das páginas pode ser o seu hobby ou a seu gosto; Postar na hospedagem hdfree que você criou;

14 Listas Ordenadas Desordenada Definição

15 Listas Ordenadas Item 1 Item 2 Desordenada Definição

16 Listas Ordenadas Desordenada Item 1 Item 2 Definição

17 Listas Ordenadas Desordenada Definição Item 1 Item 2

18 Listas Sub-item Item 1 Item 1.1 Item 1.2

19 Imagens

20 Imagens

21 Imagens Atributos de IMG Atributo: SRC Explicação: Obrigatório, indica a URL da imagem a ser exibida. Podem ser usadas URL absoluto (http://www.xyz.com.br/images/imagem.gif) ou URL relativo (/images/imagem.gif) Exemplo: Atributo: ALT Explicação: Indica um texto asociado à imagem. Quando a imagem não puder ser exibida, o texto é exibido em seu lugar. Este texto também é exibido quando o cursor fica parado sobre a imagem. Exemplo:

22 Imagens Atributo: ALIGN Explicação: Determina o alinhamento da imagem em relação ao texto existente na mesma linha. Os valores válidos são "TOP", "MIDDLE", "BOTTOM","LEFT" e "RIGHT". Exemplo: Atributo: WIDTH Explicação: Determina a largura, em pixels, da imagem. Exemplo: Atributo: HEIGHT Explicação: Determina a altura, em pixels, da imagem. Exemplo:

23 Imagens Atributo: BORDER Explicação: Determina a largura, em pixels, da imagem. Exemplo: Atributo: HSPACE Explicação: Determina a quantidade de espaço deixado em branco aos lados da imagem, de forma que ela não fique demasiadamente próxima dos outros elementos da página. Exemplo: Atributo: VSPACE Explicação: Determina a quantidade de espaço deixado em branco acima e abaixo da imagem. Exemplo:

24 Imagens Três formatos mais populares: Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Portable Network Graphics (PNG) Atributos: src – Caminho(path) da Imagem. align – Alinhamento da Imagem border – Borda da Imagem alt – Texto da Imagem height – Altura da Imagem width – Largura da Imagem

25 Atividade de pesquisa e implementação De forma individual, faça uma pesquisa sobre a tag FRAME. Elabore um pequeno texto explicativo sobre o uso destas tags; Desenvolva um exemplo;