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

Apresentação em tema: "Tecnologias Web Prof. Msc. Juliano Gomes Weber Tecnologias Web Notas de Aula – Aula 04 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 04 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 Lembrem-se.. Já estudamos como fazer Parágrafos Formatação de texto links

4 FTP – Vamos utilizar? http://downloads.sourceforge.net/filezilla/FileZilla _3.3.5.1_win32.zip http://downloads.sourceforge.net/filezilla/FileZilla _3.3.5.1_win32.zip

5

6 Continuando com o html...

7 Atributos de BODY Atributo: BACKGROUND Explica ç ão: Define uma imagem que ser á utilizada como "fundo" da p á gina. Caso a imagem tenha um tamanho inferior ao da p á gina ela ser á repetida diversas vezes de forma a cobrir o fundo do documento Exemplo:...diversos TAGs, textos etc... Atributo: BGCOLOR Explica ç ão: Define a cor de fundo da p á gina Exemplo: Atributo: TEXT Explica ç ão: Define a cor do texto da p á gina Exemplo:

8 Atributos de BODY Atributo: LINK Explica ç ão: Define a cor dos links ainda não visitados Exemplo: Atributo: VLINK Explica ç ão: Define a cor dos links j á visitados nos ú ltimos x dias onde x é um valor definido pelo usu á rio em seu browser. Exemplo: Atributo: ALINK Explica ç ão: Define a cor dos links no instante em que são clicados pelo usu á rio. Exemplo: Atributo: BGPROPERTIES (Microsoft Internet Explorer) Explica ç ão: Deve ter o valor "fixed". Indica que o fundo da p á gina é fixo, isto é, não "rola" junto com o conte ú do da p á gina. Exemplo:

9 Atributos de BODY Atributo: LEFTMARGIN (Microsoft Internet Explorer) Explicação: Especifica uma quantidade de espaço (em pixels) a ser deixada como margem esquerda do documento. Exemplo: Atributo: TOPMARGIN (Microsoft Internet Explorer) Explicação: Especifica uma quantidade de espaço (em pixels) a ser deixada como margem superior do documento. Exemplo: Exemplo completo do Elemento BODY com todos os seus Atributos: Aula de Desenvolvimento Web Oi! Eu sou um link!

10 SUB... Atributo: Não possui atributos Explicação: Indica que o texto deve ser apresentado em subscrito. Exemplo: Este texto está subscrito Visualização pelo Browser: Este texto está subscrito SUP... Atributo: Não possui atributos Explicação: Indica que o texto deve ser apresentado em sobrescrito. Exemplo: Este texto está subrescrito Visualização pelo Browser: Este texto está subrescrito Outros comandos....

11 Listas Ordenadas Desordenada

12 Listas Ordenadas OL... Explica ç ão: Indica o in í cio e o final de uma lista ordenada (numerada). Exemplo: Introdu ç ão a Web HTML CSS JavaScript Visualiza ç ão pelo Browser: 1. Introdu ç ão a Web 2. HTML 3. CSS 4. JavaScript Atributos de OL

13 Atributo: START Explica ç ão: Especifica o n ú mero do primeiro elemento da lista. Exemplo: Introdu ç ão a Web HTML CSS JavaScript Visualiza ç ão pelo Browser: 10. Introdu ç ão a Web 11. HTML 12. CSS 13. JavaScript

14 Exemplo: Introdu ç ão a Web HTML CSS JavaScript Visualiza ç ão pelo Browser: Introdu ç ão a Web HTML CSS 16. JavaScript Nota: Este TAG deve estar presente somente na á rea de influência dos TAGs (Listas Ordenadas) ou (Listas Não Ordenadas). O texto presente em cada item da lista pode ser formatado normalmente. No entanto, não são permitidos "headers" (H1, H2, H3 etc.).

15 Atributo: TYPE Explica ç ão: Define o tipo de numera ç ão empregada na lista. Pode assumir os valores "1 (1, 2, 3, 4, etc), "I" (I, II, III, IV, etc), "i" (i, ii, iii, iv, etc), "A" (A,B,..., Z) ou "a" (a, b,..., z). Exemplo: Introdu ç ão a Web HTML CSS JavaScript Visualização pelo Browser: A. Introdução a Web B. HTML C. CSS D. JavaScript

16 Listas Não ordenadas UL... Explica ç ão: Indica o in í cio e o final de uma lista não numerada Exemplo: Introdu ç ão a Web HTML CSS JavaScript Visualiza ç ão pelo Browser: Introdu ç ão a Web HTML CSS JavaScript

17 Atributo de UL Atributo: TYPE Explica ç ão: Indica qual o s í mbolo deve ser usado para demarcar cada elemento da lista. Pode ser os valores "disc" (), "circle" () ou "square"( ). Exemplo: Introdução a Web HTML CSS JavaScript Visualização pelo Browser: Introdução a Web HTML CSS JavaScript

18 Exercício Desenvolver uma página, onde a mesma deverá se comportar como o índice de um livro Todos os sub-níveis do índice deverão ser linkáveis para localizações no mesmo texto;

19 Tabelas Assim como as listas, no HTML existem elementos específicos para a criação e formatação de tabelas. O recurso de tabelas é muito interessante e muito usado nas páginas Web. O conceito é o mesmo conhecido usualmente: ela tem linhas e colunas, e na interseção delas estão as células.

20 Tabelas Na linguagem HTML você pode inserir nas células tudo o que normalmente faz parte do corpo de um documento, como textos, links, imagens, listas e até outras tabelas.

21 Tabelas TABLE... Explicação: Indica o início e o final de uma determinada tabela. Todas as demais marcas referentes a tabelas - linhas e células - somente serão consideradas se incluidas entre e. Texto A Texto B

22 Tabelas Atributos de TABLE Atributo: BORDER Explicação: Se presente, a tabela apresenta bordas. Se for atributo o valor 0 (zero), não somente a tabela não apresentará bordas, como o espaço usualmente reservado para bordas será liberado, permitindo a confecção de tabelas mais compactas. Exemplo:

23 Tabelas Atributos de TABLE Atributo: CELLSPACING Explicação: Indica quanto espaço, em pixels, deve ser inserido entre as células da tabela. Exemplo:

24 ZZZ Atributo: CELLPADDING Explicação: Indica quanto espaço, em pixels, deve ser inserido entre as bordas das células e seu conteúdo. Exemplo:

25 Tabelas Atributo: WIDTH Explicação: Indica a largura da tabela. Usa-se como medida o número de pixels desejado ou uma porcentagem da largura do documento. Exemplo: Atributo: ALIGN Explicação: Indica a posição da tabela no documento. Pode assumir os valores "LEFT" ou "RIGHT", indicando, respectivamente, que a tabela deve estar a esquerda ou a direita do documento, e com o texto "fluindo" à sua volta. Exemplo:

26 Tabelas Atributo: BACKGROUND Explicação: Especifica uma imagem que será utilizada como "background" da tabela. A imagem será "TILED", isto é, repetida de forma a cobrir todo o fundo da tabela. Exemplo: Atributo: BGCOLOR Explicação: Especifica uma cor de fundo para a tabela. Exemplo:

27 Tabelas Atributo: BORDERCOLOR Explicação: Especifica uma cor para as bordas da tabela. Exemplo: Atributo: BORDERCOLORLIGHT Explicação: Especifica uma das cores utilizadas para desenhar a borda com efeito tridimensional da tabela. Exemplo:

28 Tabelas Atributo: BORDERCOLORDARK Explicação: Especifica uma das cores utilizadas para desenhar a borda com efeito tridimensional da tabela. Exemplo: Atributo: RULES Explicação: Indica quais linhas internas a tabela deve apresentar. Pode assumir os valores: "ROWS (somente as linhas horizontais)", "COLS (somente as linhas verticais)", "NONE (nenhuma)" e "ALL (todas)". Exemplo:

29 Tabelas Todos os atributos de uma tabela são opcionais. Uma tabela padrão não possui bordas e sua altura e largura são as mínimas necessárias para suportar seu conteúdo.

30 Tabelas TR... Explicação: Indica o início e o final de uma determinada linha da tabela (Table Row). Uma linha é composta de elementos. Exemplo: Texto A Texto B.

31 Tabelas Atributos de TR Atributo: BGCOLOR Explicação: Define a cor de fundo de uma linha da tabela. Exemplo: Texto A Texto B

32 Tabelas TD... Explicação: Indica um elemento (célula) da tabela, vindo do inglês "Table Data". Os elementos contém os dados da tabela, sejam eles texto, links, imagens, etc. Exemplo: Texto A Texto B.

33 Tabelas Atributos de TD Atributo: ALIGN Explicação: Define se o conteúdo da célula estará alinhado a esquerda ("LEFT"), centralizado ("CENTER") ou a direita ("RIGHT"). Se omitido, o alinhamento fica à esquerda. Exemplo: Texto A Texto B

34 Tabelas - Atributos de TD Atributo: VALIGN Explicação: Define se o conteúdo da célula estará alinhado com seu topo ("TOP"), centralizado ("MIDDLE") ou com sua base ("BOTTOM"). Se omitido o alinhamento fica ao meio. Exemplo: Texto A Texto B

35 Tabelas - Atributos de TD Atributo: WIDTH Explicação: Define a largura da célula. Pode ser expressa em pixels ou como uma porcentagem da largura total da tabela. Exemplo: Texto A Texto B

36 Tabelas - Atributos de TD Atributo: COLSPAN Explicação: Indica quantas "células de largura" (colunas) a respectiva célula deve ocupar. Exemplo: Texto A Texto B

37 Tabelas - Atributos de TD Atributo: ROWSPAN Explica ç ão: Indica quantas "c é lulas de altura" (linhas) a respectiva c é lula deve ocupar. Exemplo: Texto A Texto B Texto C

38 Tabelas - Atributos de TD Atributo: BACKGROUND Explicação: Define uma imagem como fundo de uma célula. Exemplo: Texto A Texto B Texto C

39 Tabelas - Atributos de TD Atributo: BGCOLOR Explicação: Define a cor de fundo de uma determinada célula. Exemplo: Texto A Texto B Texto C

40 Tabelas CAPTION... Explicação: Define um título (legenda) para a tabela. Exemplo: Título da Tabela Texto A Texto B

41 Atributos de CAPTION Atributo: ALIGN Explica ç ão: Indica se o t í tulo (legenda) deve ficar acima ou abaixo da tabela. Deve possuir o valor "TOP" ou "BOTTOM". Exemplo: T í tulo da Tabela Texto A Texto B O t í tulo não é exibido "dentro" da tabela (visualmente). O TAG "CAPTION" deve estar contido entre os TAGs de abertura e fechamento da tabela, no entanto, fora de qualquer linha. Tabela

42 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;