Karine Alessandra Córdova

Apresentação em tema: "Karine Alessandra Córdova"— Transcrição da apresentação:

1

2 Karine Alessandra Córdova
Linguagem de Programação Web Karine Alessandra Córdova

3 Tag Marquee Um texto pode entrar na página e percorrê-la da direita para a esquerda ou em sentido contrário, como um letreiro. Isso é obtido usando-se a formatação Marquee. O código é: <marquee>Texto que deve se movimentar</marquee> Esse comando admite atributos de direção e largura do efeito as quais possibilitam várias formas de apresentação. Também pode-se aplicar cores, negrito, italico e alterar a fonte e o seu tamanho.

4 Exemplo 1 Deslocamento da direita para a esquerda: <marquee behavior=scroll>Senai</marquee>

5 Exemplo 2 O atributo behavior="alternate" faz com que o elemento movimentado vá e volte. <marquee behavior="alternate">Senai</marquee> Podem ser utilizadas imagens.

6 Exemplo 3 Interferindo na direção:
a. Da esquerda para a direita. O atributo slide direction="right" faz com que o elemento siga para a direita. <marquee behavior=slide direction=right>Elemento que se movimenta</marquee>

7 Exemplo 4 Da direita para a esquerda. O atributo slide direction="left" faz com que o elemento siga para a esquerda. <marquee behavior=slide direction=left>Elemento que se movimenta</marquee>

8 Interferindo na velocidade
A especificação scrollDelay=um número indica a velocidade da rolagem: quanto menor for o número, mais rapidamente o texto corre. Exemplos 5 e 6: <marquee scrolldelay="300"><img src="teste.jpg" width="200"></marquee> <marquee scrolldelay="50"><img src="teste.jpg" width="200"></marquee>

9 Interferindo no sentido
A especificação direction=up faz com que o texto fique na vertical. Conforme exemplo 7. As opções de direction são: - “up”, de baixo pra cima e - “down” de cima pra baixo.

10 Molduras de imagem Para melhorar ainda mais a apresentação das imagens junto com os textos, foram desenvolvidos atributos de moldura. Estes atributos definem o espaço - vertical e horizontal - deixado entre as imagens e os textos: <IMG SRC="imagem" VSPACE=espaço_vertical> <IMG SRC="imagem" HSPACE=espaço_horizontal> Veja os exemplos 8 e 9

11 Tabelas Títulos, linhas e elementos <CAPTION>...</CAPTION> define o título da tabela <TR>...</TR> delimita uma linha <TH>...</TH> define um cabeçalho para colunas ou linhas (dentro de <TR>) <TD>...</TD> delimita um elemento ou célula (dentro de <TR>)

12 Uma tabela simples: <TABLE BORDER=4>
<CAPTION>Primeiro exemplo</CAPTION> <TR><TH>Coluna 1</TH><TH>Coluna 2</TH></TR> <TR><TD>linha1, coluna 1</TD><TD> linha 1, coluna 2</TD></TR> <TR><TD>linha 2, coluna 1</TD><TD>linha 2, coluna 2</TD></TR> </TABLE>

13 Títulos compreendendo mais de uma coluna ou linha É possível englobar colunas e linhas, através dos atributos COLSPAN (para colunas) e ROWSPAN (para linhas):

14 <TABLE BORDER=1> <TR><TH COLSPAN=2>Colunas 1 e 2</TH></TR> <TR><TD>linha1, coluna 1</TD><TD> linha 1, coluna 2</TD></TR> <TR><TD>linha 2, coluna 1</TD><TD>linha 2, coluna 2</TD></TR> <TR><TH ROWSPAN=3>3 linhas</TH><TD>uma linha</TD></TR> <TR><TD>duas linhas</TD></TR> <TR><TD>três linhas</TD></TR> </TABLE>

15 Neste exemplo, vemos que o cabeçalho Colunas 1 e 2 compreende duas colunas (COLSPAN=2); o cabeçalho 3 linhas compreende, por sua vez, 3 linhas (ROWSPAN=3).

16 Alinhamentos em tabelas
Os alinhamentos padrão em tabelas são: no sentido horizontal: alinhamento à esquerda no sentido vertical: alinhamento no centro da célula As linhas e células podem ter alinhamentos definidos através dos atributos: ALIGN = alin_horizontal VALIGN = alin_vertical

17 Vejamos como esses alinhamentos funcionam nas células: <TD ALIGN=alin_horizontal>Texto da célula</TD> <TD VALIGN=alin_vertical>Texto da célula</TD> Obs.: a tabela acima foi feita especialmente para mostrar as diferenças entre os alinhamentos. Uma tabela comum ajusta o tamanho de suas células ao conteúdo, desta forma:

18 Alinhamentos combinados
Uma mesma célula pode ter atributos ALIGN e VALIGN: <TD ALIGN=alin_horizontal VALIGN=alin_vertical>Texto da célula</TD>

19 Atributos de Largura Uma tabela comum ajusta o tamanho de suas células ao conteúdo. Por exemplo: Para apresentar uma tabela ocupando determinado espaço disponível na linha, usamos o atributo WIDTH. Esse atributo pode ser aplicado também a linhas e células. Essa largura pode ser definida em porcentagem (do espaço disponível): WIDTH=x% ou em pixels: WIDTH=x

20 Ex.1: Tabela ocupando 50% do espaço disponível <TABLE BORDER=1 width=50%>
Ex.2: Tabela ocupando 50% do espaço disponível, com uma coluna de 60% do espaço disponível na tabela

21 Atributos de Espaçamento
Dois atributos permitem o controle de espaçamento em tabelas: CELLPADDING - espaço entre o texto e as bordas da célula CELLSPACING - espaço entre células

22

23 Exercício 1- Crie a seguinte tabela:
COLSPAN (para colunas) e ROWSPAN (para linhas)

24 Acesse o Site do Validador do W3C http://validator. w3
Acesse o Site do Validador do W3C e valide sua página HTML.

25 Trabalho Prático Deverão ser elaborados grupos de 4 pessoas - Desenvolver um site com no mínimo 5 páginas HTML. (Tema Livre) Menu interligando as páginas Layout bonito e agradável Utilizar as tags vistas até o momento. Deverá ser entregue ao professor e apresentado para os colegas. A avaliação será feita durante o desenvolvimento e na apresentação individualmente.