Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto

Tamanho: px

Começar a partir da página:

Download "Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com"

Luiz Henrique Wilson Salazar Monteiro
8 Há anos
Visualizações:

1 Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto

2 Listas A HTML permite definir três categorias distintas de listas: Ordenadas Sem ordenação Lista de definição 2/28

3 Listas Ordenadas As listas ordenadas são numeradas. Em listas ordenadas o browser se encarrega de colocar os números que referenciam cada lista. Uma lista ordenada deve ser envolvida pelo par <ol>... </ol>. Cada item é identificado por um seqüência inserida automaticamente. 3/28

4 Listas Ordenadas Sintaxe <ol type= tipo start= número inicial > <li> item 1</li> <li> item 2 </li> <li> item n </li> </ol> type: Tipo de seqüência que precede cada item. 1 - algarismos arábicos (default) I/i - algarismos romanos (maiúsculo e minúsculo) A/a - ordem alfabética (maiúsculo e minúsculo) 4/28

5 Listas Ordenadas Exemplo <html> <head><title>lista Numerada</title></head> <body> <h2>exemplo de Lista Numerada</h2> <ol type="1" start="5"> <li>mesas </li> <li>cadeiras </li> <li>sofás </li> </ol> </body> </html> 5/28

6 Listas Sem Ordenação As listas não ordenadas só usam um marcador para cada uma das linhas. Em listas não ordenadas é utilizado algum símbolo gráfico, este tipo de lista será envolvida pelo par <ul>... </ul>. 6/28

7 Listas Sem Ordenação Sintaxe <ul type= tipo > <li> item 1</li> <li> item 2 <li> <li> item n <li> </ul> type: Tipo de sequência que precede cada item. disc - pequeno disco sólido (default) square - quadrado sólido circle - círculo 7/28

8 Listas Sem Ordenação Exemplo <html> <head><title>lista Não Numerada</title></head> <body> <h2>exemplo de Lista Não Numerada</h2> <ul type= disk > <li>mesas</li> <li>cadeiras</li> <li>sofás</li> </ul> </body> </html> 8/28

9 Têm dois níveis de informações: o primeiro é o tópico, em destaque Listas de Definições o segundo, a descrição, aparece deslocado. Sintaxe <dl> <dt> Tópico </dt> <dd> Descrição </dd> <dt> Tópico </dt> </dl> <dd> Descrição </dd> 9/28

10 Listas de Definições Exemplo <html> <head><title>lista de Definições</title></head> <body> <h2>exemplo de Lista de Definições</h2> <dl> <dt>gentle</dt> <dd>dócil, manso, brando, tolerante</dd> <dt>gentleman</dt> <dd>cavalheiro</dd> </dl> </body> </html> 10/28

Definições</h2> <dl> <dt>gentle</dt> <dd>dócil, manso, brando,

11 Listas Intercaladas Os diferentes tipos de listas podem ser intercalados (aninhados), produzindo resultados interessantes. <html> <head> <title>lista de Definições</title> </head> <body> <h2>exemplo de Lista Intercalada</h2> <ol> <li>estados da Região Sul do Brasil <ul> <li>paraná</li> <li>santa Catarina</li> <li>rio Grande do Sul</li> </ul> </li> <li>um estado da região Nordeste <ul> <li>pernambuco</li> </ul> </li> </ol> </html> 11/28

<html> <head> <title>lista de Definições</title> </head> <body> <h2>exemplo de Lista Intercalada</h2> <ol>

12 Exercícios 1) Numerar a lista abaixo, com algarismos romanos. Alface Cebola Tomate 2) Construir um Glossário Primeiro item descrição primeiro item Segundo item descrição segundo item Terceiro item descrição terceiro item 12/28

13 Conceito Links O principal recurso do HTML vem da possibilidade de interligar partes de um texto a outros documentos locais ou remotos. Assim, quebrando a linearidade de uma página HTML e através do link, que se disponibiliza o hipertexto. Tipos de Links Links Locais Links Remotos Links para a Própria Página Links para 13/28

Assim, quebrando a linearidade de uma página HTML e através do link, que se

14 Links Formato <a href= endereço target= _self >Texto/Imagem</a> <a> - Âncora Endereço: pode conter qualquer endereço (URL) como: sites, documentos, imagens ou de destino do Link. target: _blank: A URL alvo abrirá em uma nova janela. _self: A URL alvo abrirá no mesmo frame onde o link foi clicado. _parent: A URL alvo abrirá no frameset pai. _top: A URL alvo abrirá na mesma janela, sem frames. Texto/Imagem - Aparece como o Link no documento corrente. </a> - Final da Âncora 14/28

_self: A URL alvo abrirá no mesmo frame onde o link foi clicado. _parent: A URL alvo abrirá no frameset pai.

15 Links Locais Disponibiliza o documento localizado no mesmo servidor. Exemplo <html> <head> <title>link Local</title> </head> <body> <a href= listas.html target= _blank > Conheça nossos produtos </a> </body> </html> 15/28

16 Links Remotos Disponibiliza o documento localizado na URL especificada. Exemplo <html> <head><title>link Remoto</title></head> <body> <a href= > Mais informações no site da UNIP </a> </body> </html> 16/28

17 Links para própria Página São links que são estabelecidos para certas partes de uma mesma página. Deve-se estabelecer dois comandos: o lugar da página para onde se pretende "saltar ponto-destino. No ponto-origem estabelece-se o ponto de destino: <a href="#um">primeiro Lugar </a> O ponto onde você quer saltar é definido da seguinte maneira: <a NAME="um"> Eis aqui o primeiro Lugar </a> NAME é um parâmetro que define um ponto-destino um é o nome que o identifica. Se você esqueceu de definir #um, o salto não acontecerá. 17/28

No ponto-origem estabelece-se o ponto de destino: <a href="#um">primeiro Lugar </a> O ponto onde você quer saltar é definido da

18 Links para própria Página Definição dos pontos de origem: <a href="#um">primeiro ponto de origem!</a> <a href="#dois">segundo ponto de origem!</a> Definição dos pontos de destino: <a NAME="um">Aqui é o primeiro ponto de destino </a> <a NAME= dois">aqui é o segundo ponto de destino </a> Se for clicado no ponto de destino com finalidade de voltar ao ponto de origem não acontecerá nada porque este exemplo não é uma âncora bidirecional. 18/28

</a> Definição dos pontos de destino: <a NAME="um">Aqui é o primeiro ponto de destino </a> <a NAME= dois">aqui

19 Bidirecionais Links para própria Página São links que permite você do ponto de origem ir ao ponto de destino e viceversa Definição dos pontos de origem: <a NAME="PontoUm" href="#um">primeiro ponto de origem!</a> <a NAME="PontoDois" href="#dois">segundo ponto de origem!</a> Definição dos pontos de destino: <a NAME="um href="#pontoum">aqui é o primeiro ponto de destino </a> <a NAME= dois" href="#pontodois">aqui é o segundo ponto de destino </a> 19/28

</a> <a NAME="PontoDois" href="#dois">segundo ponto de origem!

20 Links para um ponto-destino em outra página Se você quiser que a página seja carregada num determinado ponto-destino, forçando o browser ir até este ponto, o código seria da seguinte forma: <a href="página2.htm#dois">esta âncora traz a página dois e, posicionada no segundo item"</a> 20/28

este ponto, o código seria da seguinte forma: <a href="página2.

21 Links para Permite envio de uma mensagem ao usuário especificado em mailto. Exemplo <html> <head> </head> <body> <title> </title> <h2>exemplo de </h2> <a href= > Envie uma mensagem para o Prof. André</a> </body> </html> 21/28

22 Cores dos Links Links Permite alterar as cores dos links para indicar se eles já foram visitados ou não. <body link= cor vlink= cor alink= cor > link: define a cor de um link não visitado vlink: define a cor de um link já visitado alink: define a cor de um link durante o tempo em que o mouse foi clicado e ainda não foi solto. 22/28

23 Links de Imagens Links Permite utilizar uma imagem para especificar o endereço desejado (URL). <html> <head> <title>link de Imagem</title> </head> <body> <h2>exemplo de link de Imagem</h2> <a href= listaint.html ><img src= earth.gif /></a> </body> </html> 23/28

24 Download Links Permite baixar um arquivo (zip, pdf) para o computador cliente. <html> <head> <title>download</title> </head> <body> <h2>exemplo de Download</h2> <br /> <a href= asp.zip">apostila</a> ASP.<br /> <a href= xhtml.zip">apostila XHTML</a> </body> </html> 24/28

25 Imagens Os formatos suportados pelo HTML utilizado para uso em páginas WEB são GIF, JPEG e PNG. <img src= imagem alt= frase border= pixel align= posição height= 75 width= 100 > src: Localização e nome da imagem a ser inserida alt: Frase alternativa a ser exibida border: espessura da borda em volta da imagem align: define o alinhamento da imagem e do texto height: define a altura da imagem width: especifica a largura da imagem 25/28

26 Background Imagens Insere uma imagem como fundo da página Web. <body background= imagem > <html> <head> <title>imagem de Fundo</title> </head> <body background= imagem.gif > <h1 align=center>imagem como background</h1> </body> </html> 26/28

27 Exercícios Construir a seguinte página Currículo Título centralizado, tamanho 7, cor azul. Nome Completo (destaque) Data de Nascimento (destaque) Cidade natal (destaque) Estado civil (destaque) As informações em lista ordenada numérica Saltar uma linha entre título e dados do currículo Inserir um link para enviar um para o seu endereço eletrônico. Inserir uma foto (lado direito, topo da página) 27/28

28 Referências Notas de aula Prof. José Marcos Barbosa da Silveira. Disponível em Acessado em 25/01/2010. Notas de aula Prof. Paulo Roberto Travassos,. Tópicos Avançados em Sistemas. Lemay, Laura. Aprenda a Criar Páginas Web com Html e Xhtml, em 21 dias. Makron Books, Cavalcante, Victor. Web Standards, notas de aula. Zeldman, Jeffrey. Projetando Web Sites Compatíveis, Campus. Valentine, Chelsea. Xhtml, Campus. Silva, Osmar J. HTML 4.0 e XHTML Domínio e Transição, Érica. Macedo, Marcelo da Silva. Construindo Sites Adotando Padrões Web, Ciência Moderna 28/28

Documentos relacionados

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com

Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Frames São janelas que podem conter páginas Web. Uma janela pode ser subdividida em várias subjanelas, cada uma, visualizando