e é muito útil quando um desenvolvedor deseja fazer uma página que demonstra códigos, por exemplo. A gura 7 mostra o exemplo de utilização do elemento e a página resultante do código apresentado.



Rede e-Tec Brasil



28



Programação para WEB



 Figura 7 - Exemplo da tag 




Fonte: autor



Para organizar a listagem de elementos em um site pode-se utilizar listas, tanto ordenadas (com numeração) quanto não ordenadas (sem numeração). Este último caso utiliza símbolos para organizar, e todo o processo está no próximo tópico.



2.3 Listas A linguagem HTML oferece aos desenvolvedores vários mecanismos para especicar listas de informações. Todas as listas precisam conter um ou mais elementos de lista, incluindo: • Informações ordenadas • Informações não-ordenadas • Denições Para criar uma lista ordenada, o elemento 
 deve ser utilizado, conforme exemplo na gura 8.



Figura 8 - Exemplo de lista ordenada Fonte: autor



Aula 2 - Linguagem HTML



29



Rede e-Tec Brasil



 Para a criação de uma lista não-ordenada, utiliza-se o elemento 
. A gura 9 apresenta um exemplo do uso desta tag para criar uma lista, e também apresenta um “aninhamento” com outra lista, criando-se assim “sublistas”, ou seja, uma lista dentro da outra.



Figura 9 - Exemplo de lista não-ordenada e aninhada Fonte: autor



Nota-se que, para ambos os tipos de lista, o elemento usado para indicar cada um dos itens da lista é o 
.



Não apenas para elementos ordenados e não-ordenados, a ling uagem HTML oferece mecanismos para tratar de denições, formando assim uma lista de denições. Os elementos utilizados são: • DL: inicia uma lista de denições • DT: termo da lista • DD: denição do termo da lista Uma lista de denições completa pode ser observada no exemplo da gura 10.



Figura 10 - Exemplo de lista de denições Fonte: autor



Rede e-Tec Brasil



30



Programação para WEB



 Modicações no tipo de elementos que são utilizados para identicar itens em listas não-ordenadas (círculos, quadrados e discos) e também em listas ordenadas (alfabético, romano e numérico) podem ser feitas utilizando estilos. Tais modicações serão abordadas no capítulo sobre CSS Outra forma interessante de organizar os elementos em um site é atr avés da utilização de tabelas.



2.4 Tabelas O modelo de tabelas da linguagem HTML permite aos desenvolvedores organizar dados (textos, textos pré-formatados, imagens, ligações, formulários, campos de formulário e até mesmo outras tabelas) em linhas e colunas de células.



CSS: Cascade Style Sheets



ou simplesmente “estilos”, é uma linguagem de folha de estilo utilizada para descrever a semântica da apresentação (o visual e formatação) de um documento escrito em uma linguagem de marcação



A gura 11 apresenta um exemplo de uma tabela contendo três colunas e duas linhas.



Figura 11 - Tabela com células mescladas



Fonte: autor



A estrutura da tabela apresentada na gura 11, que possui quatro linhas e quatro colunas, foi desenvolvida através dos seguintes comandos: • ...: elemento que delimita a tabela. Este elemento possui alguns atributos que conguram a tabela, como segue:



Aula 2 - Linguagem HTML



31



Rede e-Tec Brasil



 – border: este atributo informa a largura da borda da tabela. – summary: atributo que permite ao desenvolvedor informar um texto



que representa o sumário para a tabela, ou seja, seu signicado. Alguns agentes de HTML podem utilizar tal sumário para informações adicionais aos usuários – width: largura da tabela. – cellpadding: espaço (em pixels) entre o conteúdo da célula e a borda – cellspacing: espaço entre as células



• ...: elemento que desenha um título na tabela. Através do exemplo pode-se notar que o título é escrito no topo, antes do início da tabela • ...: elemento que delimita uma linha na tabela • ...: elemento que indica uma célula • ...: tem o mesmo efeito do elemento , porém indica uma célula de título, exibindo o conteúdo centralizado e enfatizado (por padrão) O desenvolvedor sempre deverá seguir a ordem da estrutura acima para se denir uma tabela: células ( ou ) dentro de linhas (). Uma questão interessante que pode ser notada no exemplo da gura 11 é que três células de título estão mescladas, ou seja, duas ocupam duas linhas e uma ocupa duas colunas. Este comportamento é denido através de atributos: •



colspan = “x”: indica que esta célula ocupará o mesmo espaço que “x”



colunas. •



rowspan = “y”: informa à célula que a mesma deverá ocupar o espaço



de “y” linhas. O desenvolvedor pode, ainda, denir alguns agrupamentos tanto para linhas como para colunas, melhorando assim a apresentação e a manipulação perante alguns programas. As seções seguintes apresentam tais tópicos.



Rede e-Tec Brasil



32



Programação para WEB



 A parte interessante da WEB é que um conteúdo pode estar ligado a outro de uma forma super fácil: através de âncoras e ligações (links). Um texto, uma imagem ou mesmo um lme pode fazer este papel de ligação, e a próxima seção indica como!



2.5 Links: âncoras e ligações A linguagem HTML foi criada principalmente para atender ao propósito de difundir a WEB que introduziu um novo conceito: documentos interativos e com hipertextos. Esta seção introduz o conceito de link (hiperlink, link WEB, ligação), que é o construtor básico de documentos hipertexto. Um link  (ligação) é uma conexão de um recurso WEB para outro. Um link   tem dois pontos, chamados de âncoras, e uma direção. Inicia na âncora “fonte” e aponta (termina) na âncora “destino”, a qual pode ser qualquer recurso WEB (imagens, clipes de vídeos, pedaços de som, programas, outro HTML, etc.).



O termo hipertexto foi criado por Theodore Nelson, na década de sessenta, e pode ser definido como um dos paradigmas básicos em que a teia mundial se baseia. Ele é uma espécie de texto multidimensional em que numa página trechos de texto se intercalam com referências a outras páginas.



para conhecer mais sobre hipertexto acesse: http://www. ime.usp.br/~is/abc/abc/ node9.html



O elemento  é utilizado para se construir elos de ligação. O exemplo do Quadro 6 apresenta um link  para a página do Google. 1 Acessar página do GOOGLE



Quadro 6 - Exemplo de âncora utilizando atag  Fonte: autor



A ligação entre a âncora e a página do Google (quadro 6) é feita pelo atributo href  (Hiperlink Reference). O usuário verá, na página a ser renderizada pelo navegador, a frase “Acessar página do Google”, normalmente sublinhada. Ao clicar sobre a frase, a página será redirecionada para o site do Google. Existe a possibilidade de apontar onde a página deve abrir. Este procedimento é representado pelo atributo target , que tem um exemplo no quadro 7. 1.Acessar página do GOOGLE



Quadro 7 - Utilização do atributo target em uma âncora com link



Fonte: autor



No exemplo, o atributo target fará com que o arquivo inicial.html abra em um nova janela, ou “em branco”. As possibilidades para o atributo target são:



Aula 2 - Linguagem HTML



33



Rede e-Tec Brasil



 • _blank: nova janela • _self: própria janela (atual) • _parent:  janela “pai”, ou seja, aquela de onde a página atual foi chamada •



nome_do_frame: quando trabalhando com frames, o usuário poderá



identicar em qual frame o recurso deverá ser aberto. O desenvolvedor pode, ainda, fazer uma referência completa a outra página, identicando qual seção deverá ser acessada. O exemplo do quadro 8 indica tal correspondência. 1.



Denição de Xícara



Quadro 8 - Ligação com outra página e seção utilizando # Fonte: autor



O exemplo indica que, ao clicar em “Denição de Xícara” o usuário será redirecionado ao site www.dicionario.com  na seção “ xícara” diretamente, sendo que a página será apresentada em uma nova janela. O atributo title presente no exemplo indica um hint   (dica) que aparecerá na tela quando o usuário passar o mouse sobre o link . Não apenas textos podem ser utilizados como referências visuais para ligações. Elementos como guras, divisões e outros objetos visuais podem ser utilizados para servir de referência a hyperlinks. Quão chata seria a internet se tivéssemos apenas textos para expor os conteúdos. É por isso que as imagens são tão importantes para a elaboração de qualquer conteúdo na WEB.



2.6 Inserção de imagens As características multimídia da linguagem HTML permitem aos desenvolvedores a inclusão de imagens, vídeos, applets (programas que são automaticamente baixados e executados na máquina do usuário) e outros documentos HTML nas páginas.



Rede e-Tec Brasil



34



Programação para WEB



 Para inserir imagens, o desenvolvedor pode utilizar a tag