HTML - Parte 3 - Final, Notas de estudo de Matemática

Baixe HTML - Parte 3 - Final e outras Notas de estudo em PDF para Matemática, somente na Docsity!

3 – HTML – Tabelas, frames e formulário

Vinicius A. de Souza [email protected]

Sumário

• Tabelas..................................................................................................................................................
  • Principais atributos das tabelas........................................................................................................
  • Principais atributos de uma célula.
• Frames................................................................................................................................................
  • Principais atributos do marcador
  • Principais atributos do marcador ................................................................................
  • Frames Aninhados
• Atividade 1: Controlando a área de destino das páginas exibidas em um FRAMESET
• Iframes................................................................................................................................................
• Formulários.........................................................................................................................................
  • Principais atributos do marcador ..................................................................................
  • Controles de formulário.................................................................................................................
• Exercicios...........................................................................................................................................

Principais atributos das tabelas

a) Borda

Especifica a espessura da borda da tabela. Se você quiser deixar a tabela sem bordas, não é necessário informar este atributo. b) Largura e altura

Estes atributos indicam o tamanho da tabela. Podemos configurar valores absolutos ou relativos, sendo que os valores relativos vão ocupar uma determinada porcentagem da página exibida. Veja o exemplo abaixo:

Desenvolvimento Web

c) Alinhamento

Assim como já estamos acostumados, o atributo ALIGN especifica a posição da tabela, que pode ser LEFT, RIGHT ou CENTER. d) Cores da borda e da tabela

As cores da borda e da tabela como um todo podem ser especificas, respectivamente, pelos atributos BORDERCOLOR e BGCOLOR. Como também já estamos acostumados, os atributos de cores podem ser informados utilizando o nome da cor em inglês ou o código hexadecimal da cor desejada. Veja o exemplo abaixo:

Desenvolvimento Web

Primeira coluna Segunda coluna Terceira coluna

Primeira coluna Segunda coluna Terceira coluna

Atividade: Teste outros valores para os atributos ALIGN, BORDERCOLOR e BGCOLOR.

f) Imagem de fundo

Especifica a imagem de fundo da tabela.

Principais atributos de uma célula.

Com exceção dos atributos BORDER, CELLPACING e CELLPADDING que são exclusivos da tabela, cada célula possui os mesmos atributos da tabela como: BGCOLOR, BACKGROUND, WIDTH, HEIGHT, e outros. Além disso, cada célula pode ter seu conteúdo alinhado horizontalmente e verticalmente. Exemplos:

Veja o exemplo abaixo:

Desenvolvimento Web

Primeira coluna Segunda coluna Terceira coluna

Primeira coluna Segunda coluna Terceira coluna

Alinhamento Podemos configurar tanto o alinhamento vertical quanto horizontal do texto dentro da célula. Para isto, usamos, respectivamente, os atributos ALIGN e VALIGN:

Para o alinhamento horizontal, os valores podem ser LEFT, RIGHT ou CENTER. Para o alinhamento na vertical: Valores podem ser TOP (topo da célula), MIDDLE (região mediana da célula), BASELINE, (alinha a linha de base do texto da célula com o texto da linha) ou BOTTOM (alinha o conteúdo da célula com a região inferior da célula). Exemplo:

Desenvolvimento Web

Primeira coluna Segunda coluna Terceira coluna

Mesclagem de células Uma utilização bastante interessanta para as tabelas é na criação do layout da página. Neste caso, é possível que algumas células de uma tabela precisam ser unidas, ou quebradas ao meio. Para isso utiliza-se o atributo SPAN. Para unir linhas se usa ROWSPAN e para unir colunas utiliza-se COLSPAN.

Exemplo 2 : Vamos criar uma tabela com o seguinte formato:

Desenvolvimento Web

Exemplo do uso do ROWSPAN Teste

Teste

Frames

Os Frames são divisões da tela do browser. Com isso, torna-se 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. É 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.

A utilização de Frames na linguagem HTML é feita através dos marcadores . A página onde o FRAMESET é codificado não leva o marcador e tem a finalidade de definir o layout a ser apresentado pelos Frames. Em um FRAMESET os atributos ROWS e COLS definem, respectivamente, o número de subespaços horizontais e verticais que podem ser utilizados para criar efeitos de grade. Se o atributo ROWS não é utilizado, cada coluna ocupará todo o comprimento da página ao passo que se o atributo COLS não for utilizado, cada linha estende-se ocupando a largura total da página. Frames são criados da esquerda para direita, em se tratando de colunas, e de cima para baixo em se tratando de linhas. Quando os dois atributos são especificados, repartições são criadas da esquerda para direita na primeira linha, e da esquerda para direita na segunda linha. Exemplo: Vamos cria uma página com duas divisões igualitárias:

Desenvolvimento Web

Principais atributos do marcador

a) ROWS

Especifica a disposição dos frames horizontais. Os valores são separados por vírgulas e podem ser dados em pixels ou porcentagem (%). O valor padrão é 100%, representando uma linha. b) COLS

Especifica a disposição dos frames verticais. Os valores são separados por vírgulas e podem ser dados em pixels ou porcentagem (%). O valor padrão é 100%, representando uma coluna.

e) SCROLLING

Determina a presença ou ausência de barras de rolagem junto àquela área do FRAMESET. Os valores podem ser: AUTO, YES, NO. Veja o significado de cada um.

• AUTO: Oferece barras de rolagem caso sejam necessárias. Valor padrão.
• YES: Sempre oferece barras de rolagem para este frame mesmo que ele não precise.
• NO: Não oferece barras de rolagem para o frame mesmo que ele precise. Exemplo:

f) FRAMEBORDER

Desenha um separador entre o frame e cada frame junto. Os valores 0 ou NO não desenham nenhum separador entre estes frame. 1 ou YES desenha um separador. Exemplo:

g) MARGINWIDTH

Especifica a quantidade de espaço a ser deixado entre o conteúdo do frame e suas margens esquerda e direita. O valor precisa ser maior ou igual a 1 pixel e o padrão depende do browser utilizado. Exemplo:

h) MARGINHEIGHT

Especifica a quantidade de espaço a ser deixado entre o conteúdo do frame e suas margens superior e inferior. O valor precisa ser maior ou igual a 1 pixel e o padrão depende do browser utilizado. Exemplo:

i) NOFRAMES

Existe alguns browsers que não reconhecem o marcador então, para estes casos, é necessário colocar o marcador . O marcador determina qual conteúdo será exibido em caso de browsers que não suportem FRAMESETS ou que não estejam configurados para exibi-los. É utilizado dentro das delimitações do Exemplo:

Desenvolvimento Web

Clique aqui para ver uma versão do documento que não utiliza Frames.

Obs: Se seu browser reconhece o marcador você não conseguira ver o marcador entrando em ação! Pois para ver precisaria usar um browser que não reconheça o marcador.

Frames Aninhados

FRAMESETS podem encontrar-se aninhados em qualquer nível. O exemplo a seguir faz um FRAMESET que divide o espaço disponível em três colunas iguais. No espaço reservado à Segunda coluna a área é dividida em duas linhas de alturas diferentes.

a) Criação da home-page Vamos criar a página principal do site. Salve-a com o nome home.html:

Desenvolvimento Web

Bem Vindo ao nosso Website!

Esta página foi criada por Vinicius A. de Souza.

Última atualização: 30/04/2001

b) Criação do menu Criaremos agora a página que conterá os links para as outras páginas do nosso site. Salve esta página com o nome menu.html:

Desenvolvimento Web

Menu principal

Google

GMail

Home

c) Criação da página com o frame Criaremos agora uma página com dois frames. Salve esta página com o nome index.html:

Desenvolvimento Web

Agora, abra a página index.html criada e verifique seu funcionamento.

Iframes

O iframe é um recurso que possibilita criar uma janela onde você quiser para colocar uma página HTML. Para isto, basta você colocar o seguinte código aonde deseja que a janela do Iframe apareça:

onde:

• NAME: é o nome da janela, ele será usado caso você queira criar links que abram dentro do iframe, é o valor do TARGET.
• SRC: é a página que será aberta dentro do iframe.
• FRAMEBORDER: borda do frame.
• WIDTH e HEIGHT: largura e altura do iframe, respectivamente.
• SCROLLING: barra de rolagem.

• NAME: Especifica o nome do formulário. Útil em casos de validação dos campos, por exemplo, quando se utiliza uma linguagem de scripts como JavaScript.
• METHOD: Método que define como os dados serão transmitidos para o programa que irá processa-los. Devem ter valores GET ou POST, sendo que a diferença entre estes dois valores está no modo como os dados são empacotados. Normalmente o programa queserá utilizado para processar o formulário já especifica o valor para o atributo METHOD.
• ACTION: Indica o endereço do programa que receberá os dados do formulário. Por exemplo, poderemos utilizar a linguagem PHP para processar os dados. Exemplo:

Controles de formulário

Os campos de formulário são diferenciados pelo seu tipo. De maneira geral, nós podemos inserir um novo control através da tag:

• INPUT: Especifica um campo de entrada de dados.
• TYPE: Atributo mais importante do marcador por definir o tipo de elemento a serinserido no formulário.
• NAME: Nome do elemento, Útil em casos de validação de campos, por exemplo, quando se usa uma linguagem de scripts como JavaScript.
• VALUE: Valor que pode ser predefinido para o campo.
• MAXLENGHT: Comprimento máximo do campo.
• CHECKED: Em casos de caixas de checagem, predefine como checada. a) Caixa de texto O valor TEXT no atributo TYPE de um INPUT indica que o campo será de texto, ou seja, um campo onde o usuário poderá entrar com dados. O atributo VALUE, neste caso, pode ser usado para determinar um valor prévio para o campo, que será exibido quando a página for carregada.

Desenvolvimento Web

Formulario

Entre com seu nome:

O atributo SIZE configura o tamanho do campo e é baseado no número de caracteres. Este valor não limita o tamanho do campo, somente define o tamanho em que será mostrado na página. Quem define o número maximo de caracteres que podem ser digitados é o atributo MAXLENGHT, que é opcional. Exemplo:

Desenvolvimento Web

Formulario

Entre com seu nome:

b) Formulário com Senha

Para o valor PASSWORD (senha) no atributo TYPE aplicam-se todos os atributos do tipo TEXT exceto que todas as letras digitadas aparem com um asterisco.