Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com
Listas A HTML permite definir três categorias distintas de listas: Ordenadas Sem ordenação Lista de definição 2/28
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
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
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
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
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
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
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
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
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
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
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 E-Mail 13/28
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 e-mail 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
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
Links Remotos Disponibiliza o documento localizado na URL especificada. Exemplo <html> <head><title>link Remoto</title></head> <body> <a href= http://www.unip.br > Mais informações no site da UNIP </a> </body> </html> 16/28
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
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
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
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
Links para E-mail Permite envio de uma mensagem ao usuário especificado em mailto. Exemplo <html> <head> </head> <body> <title>e-mail</title> <h2>exemplo de E-mail</h2> <a href= mailto:andre_unip@kusumoto.com.br?subject=daw2010 > Envie uma mensagem para o Prof. André</a> </body> </html> 21/28
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
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
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
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
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
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) E-mail 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 e-mail para o seu endereço eletrônico. Inserir uma foto (lado direito, topo da página) 27/28
Referências Notas de aula Prof. José Marcos Barbosa da Silveira. Disponível em http://www.profmarcos.cjb.net. 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, 2002. 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 1.0 - Domínio e Transição, Érica. Macedo, Marcelo da Silva. Construindo Sites Adotando Padrões Web, Ciência Moderna 28/28