Um exemplo é a lista composta abaixo: O que resulta em: 1.17.2. Listas nãonumeradas São equivalentes às listas com marcadores do MSWord, por exemplo: Projeto eJovem Módulo II: HTML 32 A diferença entre o resultado da marcação HTML e do Word está na mudança dos marcadores, assinalando os diversos níveis de listas compostas: Resulta em: 1.17.3. Listas Numeradas Resulta em: Estas listas não apresentam numeração em formato 1.1, 1.2, etc. Quando compostas, apresentamse da seguinte forma: 1. Documentos básicos 2. Documentos avançados 1. formulários 1. CGI 2. contadores 3. relógios 2. Detalhes sobre imagens Porém, através do atributo TYPE (HTML 3.2), podese lidar com a numeração dos itens: Resulta em: Projeto eJovem Módulo II: HTML 33 Ainda segundo HTML 3.2, o atributo START pode indicar o início da numeração da lista: Resulta em: 1.17.4. Listas e sublistas As listas podem ser aninhadas. Por exemplo: Resulta em: 1.18. Frames (Molduras) Os frames são divisões da tela do browser em diversas telas (ou “quadros”). Com isso, tornase possível apresentar mais de uma página por vez: por exemplo, um índice principal em uma parte pequena da tela, e os textos relacionados ao índice em outra parte (menus). É muito fácil colocar frames em páginas, porém, nem todos os usuários gostam deles, pois nem sempre a navegação é fácil, além de problemas para a impressão e a marcação dos documentos interiores aos frames nos bookmarks. A alternativa natural para os frames são as tabelas. Uma página com frames tem um texto fonte semelhante a: Projeto eJovem Módulo II: HTML 34 A parte FRAMESET define a divisão da página em “quadros”. Neste exemplo, a página será dividida em duas colunas, sendo a primeira com 20% do tamanho da tela, e a segunda coluna com os restantes 80% da tela. Dentro da formatação de FRAMESET, temos os FRAME SRC, que são referências às páginas que serão mostradas nos frames definidos. Assim, no código acima vemos que a página indice1.html será mostrada na primeira coluna (que ocupará 20% da tela), e a página apresenta.html será mostrada na segunda (ocupando 80% da tela). A formatação de frames inclui também uma parte NOFRAME, que é mostrada normalmente pelos browsers que não suportam sua apresentação. 1.19. Áudio e Vídeo O uso de áudio e vídeo na Internet vem ganhando muito destaque nos últimos anos, e é bom saber como usar bem estas mídias. Áudio e vídeo são classificados como "mídias contínuas", pois são geradas segundo determinadas taxas, devendo ser reproduzidas nessa mesma taxa, para evitar distorções. Quanto mais informações de uma seqüência de áudio ou vídeo digital são armazenadas, melhor a qualidade do áudio ou vídeo reproduzido. Isso implica, logicamente, no fato de arquivos de áudio e vídeo serem geralmente muito grandes, o que torna inviável o uso mais freqüente dessas mídias em páginas Web. Além de procurarmos lidar sempre com pequenos trechos de áudio e vídeo, podemos explorar tecnologias recentes que permitem a transmissão em tempo real. 1.19.1. Áudio Há duas maneiras de inserir som em uma página: <EMBED SRC="arquivo_de_som.extensão"> <BGSOUND SRC=" arquivo_de_som.extensão "> Na primeira opção, insere o arquivo de som como objeto. Na segunda, faz com que o som seja inserido como som de fundo ou 'trilha sonora' de uma página. Esta formatação só funciona no Internet Explorer. Essas formatações, porém, não farão efeito algum quando o browser não estiver configurado para "executar" o arquivo de som por meio de um plugin adequado, ou se o computador em que estiver carregada a página não tiver instalada uma placa de som. 1.19.1.1. Tipos de arquivo de áudio Os tipos de arquivo de áudio são escolhidos: segundo o tipo de áudio (voz, sons, música), a aplicação desse áudio e a qualidade de reprodução desejada. Aqui serão apresentados apenas os tipos mais comuns: • AU (Sun Audio): usado pelas estações de trabalho da Sun Microsystems. • AIFF: usado geralmente em máquinas Macintosh e Silicon Graphics. Projeto eJovem Módulo II: HTML 35 • RIFF (Resource Interchange File Format): pode conter muitos tipos diferentes de dados, incluindo áudio digital (WAV) e MIDI. Geralmente, os "arquivos MIDI" do Microsoft Windows estão, na realidade, em formato RIFF e não MIDI. • WAV (Wave): é um subconjunto da especificação RIFF. • AVI (Audio Video Interleave): formato Microsoft. • MPEG (Motion Pictures Expert Group): o padrão MPEG3 (conhecido por MP3) é o padrão de compressão de áudio mais popular atualmente. • MIDI (Musical Instrument Digital Interface): não é exatamente um formato de áudio, mas de representação de música. Um arquivo MIDI armazena informações sobre cada nota e instrumento e, a partir dessas informações, um sintetizador reproduz os sons. Por isso, uma música instrumental em MIDI geralmente produzirá um arquivo muito menor do que a mesma música em Wave, ou qualquer outro formato. 1.19.2. Vídeo A inserção de vídeo depende bastante do tipo de arquivo de vídeo que temos para inserir em uma página. De maneira geral, esta formatação pode servir para a inserção de um arquivo QuickTime: <EMBED SRC="arquivo_de_video.extensão"> Uma formatação mais completa inclui a indicação do plugin e controles da reprodução do vídeo. 1.20. Outros 1.20.1. Blink A formatação <BLINK> Frase </BLINK> foi uma das primeiras inovações introduzidas pelo Netscape. O perigo de se usar o BLINK é que, se sua página já apresenta cores, desenhos, cabeçalhos, todos efeitos que chamam a atenção do leitor, o BLINK será um fator ainda mais chamativo, o que causa um efeito final cansativo e confuso. Evite usar o BLINK. É possível substituir esse recurso por outros efeitos de JavaScript. Felizmente, são poucos os browsers que mostram o efeito dessa formatação. O Internet Explorer é um dos browsers que não consideram o BLINK. Ao usar o BLINK, apliqueo somente em pequenos detalhes (palavras ou flechinhas), nunca em grande quantidade, muito menos em frases inteiras ou cabeçalhos. 1.20.2. Marquee É possível obter o efeito de animação de texto, através desta TAG. <MARQUEE BEHAVIOR=efeito> Texto </MARQUEE> Projeto eJovem Módulo II: HTML 36 Atributos de largura e direção do efeito permitem diversas apresentações diferentes, por exemplo: <MARQUEE BEHAVIOR=SCROLL WIDTH=30%> Texto </MARQUEE> <MARQUEE BEHAVIOR=SLIDE DIRECTION=RIGHT> Texto </MARQUEE> <MARQUEE BEHAVIOR=SLIDE DIRECTION=LEFT> Texto </MARQUEE> Atenção: O efeito Marquee só é executado no Internet Explorer e em versões recentes do Netscape, e de maneiras diferentes. Projeto eJovem Módulo II: CSS 37 Capítulo 2. CSS 2.1. Introdução ao CSS CSS é a sigla para Cascading Style Sheets que foi traduzido, em português, para folhas de estilo em cascata, que significam um documento onde são definidas regras de formatação ou de estilos a serem aplicadas aos elementos estruturais de marcação. A finalidade das CSS é a de retirar do HTML toda e qualquer declaração que vise a formatação, ou seja, a apresentação do documento. Isto significa dizer que TAGS do tipo <font>, <bold> , <b>, <em> <i>....etc, bem como o uso de colunas e linhas de tabelas para obtenção de espaçamentos não são admitidos ou, se admitidos, com restrições em um projeto Web com CSS. As TAGS <strong> e <em> devem ser usadas em substituição à <b> e <i>, se a sua intenção é a de contemplar estas tecnologias. Contudo, embora o suporte para elas deva continuar ainda por muito tempo, nada aponta para uma revitalização de <b> e <i>. Pelo contrário, as evidências a esta época indicam que elas sejam banidas a partir do 2.0. Devese usar o CSS porque permite que você