Tudo sobre HTML 35
Pré-visualização6 páginas
estáticas não são capazes de transmitir. Suas extensões são geralmente .mpg, .mov, .avi. É interessante utilizar informações sobre o formato e o tamanho do arquivo de mídia externo A tag <IMG> possui atributos que permitem a execução in-line de arquivos de som e vídeo. O atributo DYNSRC (para IE) inclui arquivos de vídeo: <IMG DYNSRC="arquivo.avi SRC="arquivo.gif ALT="[a arquivo]">. Letreiros Em HTML é possível a criação de letriros, ou seja, uma linha rolável que se moverá de um lado ao outro da página da Web. Para que este efeito seja possível basta alocar o texto que se deseja transformar em letreiro entre as tags de abertura e fechamento <MARQUEE> texto </MARQUEE>. Esta tag possui vários atributos: Atributo Utilização BEHAVIOR 1. SCROOL 2. SLIPE 3. ALTERNATE 1. Rola de um lado ao outro da tela e até desaparecer. 2. Rola o letreiro da direita para esquerda e para. 3. Faz o letreiro saltar de um lado da tela para outro. DIRECTION (somente se o letreiro for SCROOL) 1. Move o letreiro da esquerda para direita. 2. Move o letreiro da direita para 1. LEFT 2. RIGHT esquerda. LOOP Define o número de vezes que o letreiro ralará na tela. SCROLLAMOUNT Define o número de pixel para locação do letreiro. SCROLLDELAY Define o tempo da animação em milessegundos. BGCOLOR Define a cor de fundo da caixa que delimita o letreiro. HEIGHT Define a altura da caixa que delimita o letreiro. WIDTH Define a largura da caixa que delimita o letreiro. HSPACE Define o espaço entre as bordas esquerda e direita e o texto. VSPACE Define o espaço entre as bordas inferior e superior e o texto. ALIGN \uf0b7 TOP \uf0b7 MIDDLE \uf0b7 BOTTOM Define o alinhamento do letreiro com relação ao texto. Listas As lista são utilizadas para organizar o texto quando necessário uma relação de itens ordenados ou não. A HTML define 3 tipos de listas: \uf0b7 Listas Ordenadas ou Numeradas - essas listas são delimitadas pelas tags <OL>(inicializa uma lista) ... </OL>(finaliza uma lista) e cada item desta lista começa com a tag <LI>(sem o fechamento). São aquelas que possui um número. O atributo TYPE define o tipo de numeração da lista. Assim, A (letras maiúsculas), a (letras minúsculas), I (algarismos romanos) e 1 (números arábicos). Exemplo: Código Saída no Browser <OL> <LI>item 1 <LI>item 2 </OL> 1. item 1 2. item 2 \uf0b7 Lista Não-Ordenadas ou com Marcadores - são aquelas que os itens são marcadores ou outros símbolos. Estas listas são indicadas pelas tags </UL> ... </UL>. Os elementos dessa lista também são separados por </LI>. Nesta lista o atributo TYPE define o tipo de marcadores de cada uma delas. Assim, disk (marcador preenchido), square (quadrado), circle (marcador vazado). Exemplo: Código Saída no Browser <UL> <LI>item 1 <LI>item 2 </UL> o item 1 o item 2 \uf0b7 Listas de Definição ou de Glosários - são aquelas em que cada item tem dois componetes, um termo e uma definição. Estas listas são indicadas pelas tags <DL> ... </DL>. As tags <DT> e <DD>, unidirecionadas, respectivamente, indicam o termo a ser definido e a definição desse mesmo termo. Exemplo: Código Saída no Browser <DL> <DT>item 1 <DD>item 2 <DD>item 3 </DL> item 1 item 2 item 3 Tabelas As tabelas são usadas para organizar o conteúdo de uma página, ou seja, imagens em linhas e colunas. Com tag <TABLE> conteúdo da tabela </TABLE> indicamos que se trata de uma tabela. \uf0b7 <CAPTION> ... </CAPTION> - para acrescentar um título na tabela. \uf0b7 <TR> ... </TR> - para informar onde começa (<TR>) e onde termina (</TR>) cada linha da tabela. \uf0b7 <TH> ... </TH> ou <TD> ... </TD> - para identificar o início e o fim de cada célula. A diferença entre <TH> e <TD> é que o conteudo da célula da tag <TH> é escrita em negrito e centralizada. Agora já podemosfazer uma tabela com estes comandos, que ficaria assim: Tabela célula 1 célula 2 célula 3 célula 4 Os comandos da tabela acima seria assim: <TABLE> <CAPTION> Tabela </CAPTION> <TR> <TH> célula 1 </TH> <TH> célula 2 </TH> </TR> <TR> <TD> célula 3 </TD> <TD> célula 4 </TD> </TR> </TABLE> Atributos para a tag <TABLE>: \uf0b7 BORDER - define a espessura da borda; \uf0b7 WIDTH - define a largura da tabela, pode ser definida em % ou valor absoluto (com números); \uf0b7 ALIGN - alinhamento horizontal (Right, Center, Left); \uf0b7 BGCOLOR - para alterar a cor de fundo; \uf0b7 BACKGROUND - permite colocar uma imagem no fundo; \uf0b7 CELLSPACING - define o espaço existente entre as células da tabela; \uf0b7 CELLPADDING - define o espaço existente entre as bordas da célula e seu conteúdo; \uf0b7 BORDERCOLOR - usado para alterar a cor da borda. Atributos para as tags <TD> e <TH>: \uf0b7 COLSPAN - especifica quantas colunas da tabela a célula vai ocupar; \uf0b7 ROWSPAN - especifica quantas linhas da tabela a célula vai ocupar; \uf0b7 WIDTH - define a largura de cada célula, pode ser definida em % ou valor absoluto (com números); \uf0b7 HEIGHT - define a altura de cada célula, pode ser definida em % ou valor absoluto (com números); \uf0b7 ALIGN - alinhamento horizontal (Right, Center, Left); \uf0b7 VALIGN - alinhamento vertical (Top, Middle, Bottom); \uf0b7 BGCOLOR - alterar a cor de fundo desse elemento. Uma tabela usando alguns elementos destes ficaria assim: célula 1 célula 2 célula 3 célula 4 Códigos da tabela acima; <TABLE BORDER=1 BORDERCOLOR=#ffcc00 BGCOLOR=#6666ff CELLSPACING=2 CELLPADDING=10 ALIGN=center> <TR> <TD COLSPAN=2>célula 1</TD> <TD ROWSPAN=2>célula 2</TD> </TR> <TR> <TD>célula 3</TD> <TD>célula 4</TD> </TR> </TABLE> Frames Os frames permitem a divisão da tela em diferentes regiões onde pode-se apresentar diferentes páginas. Isso possibilita, por exemplo, que se determine a área da tela para ser a página principal e outras áreas para menus ou links. A tag <FRAMESET> cria um documento de definição de frames, que é onde será criado o layout de cada frame e indicado o nome dos documentos que serão apresentados. Essa tag substitui a tag <BODY> quando for utilizada. Deve-se definir um dos dois atributos a tag <FRAMESET> para se ter o layout desejado: COLS e ROWS. Com o atributo COLS indicamos quantas colunas teremos na página - <FRAMESET COLS="lagura_coluna, largura_coluna, *"> (a largura podde ser definida em porcentagem (%) ou em valor absoluto) - Assim, divide-se quantos frames foram indicados e pelo * (asterístico), definimos que o frame ocupará todo o espaço restante da tela. O atributo ROWS define quantas linhas a frame será dividida - <FRAMESET ROWS="50%, 50%"> - definimos que a página será dividida em 2 frames horizontais. O atributo SRC indica qual página será chamada em cada frame criado e o atributo NAME atribui o nome a esse frame. Existem ainda outros atributos que estão relacionados abaixo: Atributos Utilização MARGINWIDTH Determina as margens esquerda e direita do frame. MARGINHIGHT Determina as margens superior e inferior do frame. SCROLLING = YES, NO ou AUTO Configura a barra de rolagem, podendo aparecer ou não. Pode ainda, aparecer somente quando o texto ultrapassar o tamanho da célula (AUTO). NORESIZE Impede que as barras que delimitam os frames sejam redimensionados. O código de um documento HTML contendo frames ficaria assim: <HTML> <HEAD> <TITLE> Título da Página </TITLE> </HEAD> <FRAMESET COLS="200, *"> <FRAME SCR="página que ficará no 1ª frame" NAME="nome do 1ª frame"> <FRAME SCR="página que ficará no 2ª frame" NAME="nome do 2ª frame"> </FRAMESET> </HTML> A tag <NOFRAME> ... </NOFRAME> coloca o código que substituirá a página caso o Browser não dê o suporte ao recurso de frames. Caso o Browser entenda frames, tudo que estiver entre tag de abertura e fechamento <NOFRAME> ... </NOFRAME> será ignorado e o