Web Master – Módulo HTML

Curso de Web Master

HTML – 3ª Aula
 Web Master – Módulo HTML

Construindo Tabelas

A TAG <TABLE>  é utilizada para a representação de dados tabulares.

A estrutura e o conteúdo da tabela devem ficar dentro das TAGs
<TABLE> </TABLE>
A TAG <TH> é usada para especificar as células de cabeçalho da
tabela. Essas células são diferentes das outras, pois seu conteúdo
aparece geralmente em negrito.
A TAG <TR> indica o início e o fim de uma linha na tabela
A TAG <TD> especifica a células de dados de uma tabela. Por se tratar
de dados comuns (e não cabeçalhos), essas células possuem seu
conteúdo escrito em fonte normal, sem nenhum destaque e
alinhamento à esquerda
 Web Master – Módulo HTML

Construindo Tabelas (Exemplo)

<TABLE>
<CAPTION> Nota da primeira avaliação </CAPTION>
<TR>
<TH>Alunos</TH>
<TH>Eduardo</TH>
<TH>Ana Lúcia</TH>
</TR>
<TR>
<TD>Notas</TD>
<TD>8,0</TD>
<TD>9.3<TD>
</TR>
<TR>
<TD>No de Inscrição</TD>
<TD>376234809</TD>
<TD>387349048</TD>
</TR>
</TABLE>
 Web Master – Módulo HTML

Atributos para tabelas

BORDER Um atributo opcional para ser usado com TABLE é o
atributo BORDER. Se ele estiver presente, a tabela
será formatada com linhas de borda
ALIGN  Este atributo pode ser aplicado a TH, TD ou TR e
controla o alinhamento do texto dentro de uma
célula, com relação as bordas laterais
VALIGN Pode ser aplicado a TH e TD e define o alinhamento
do texto em relação às bordas superior e inferior.
WIDHT Responsável pelo tamanho da tabela
CELLSPACING Responsável pela espessura da linha da tabela
CELLPADDING Responsável pela margem dentro da célula
COLSPAN Usado só no TD e no TH. Responsável pelo
agrupamento em colunas na tabela
ROWSPAN Usado só no TD e no TH. Responsável pelo
agrupamento em linhas na tabela
 Web Master – Módulo HTML

Atributos para tabelas – Exemplo

<TABLE WIDTH="70%" BORDER="1" CELLSPACING="10" CELLPADDING="5">
<TR>
<TD COLSPAN="2">CELULA 1 </TD>
<TD>CELULA 2 </TD>
</TR> CELULA 1 CELULA 2
<TR>
<TD>CELULA 3 </TD> CELULA 3 CELULA 4 CELULA 5
<TD>CELULA 4 </TD>
<TD>CELULA 5 </TD> CELULA 6 CELULA 7 CELULA 8
</TR>
<TR> CELULA 9 CELULA 10
<TD>CELULA 6 </TD>
<TD>CELULA 7 </TD>
<TD ROWSPAN="2">CELULA 8 </TD>
</TR>
<TR>
<TD>CELULA 9 </TD>
<TD>CELULA 10 </TD>
</TR>
</TABLE>
 Web Master – Módulo HTML

Exercício

TÍTULO DA TABELA

COLUNA 1 COLUNA 2

VALOR 1 VALOR 2 VALOR 3 VALOR 4

VALOR 5 VALOR 6 VALOR 7 VALOR 8

 Web Master – Módulo HTML
Exercício – Solução
<TABLE >
<TR>
<TD COLSPAN="4"><CENTER>TITULO DA TABELA </CENTER></TD>
</TR>
<TR>
<TD COLSPAN="2"><P ALIGN="CENTER">COLUNA 1</P> </TD>
<TD COLSPAN="2" ALIGN="CENTER">COLUNA 2 </TD>
</TR>
<TR>
<TD>VALOR 1 </TD>
<TD>VALOR 2 </TD>
<TD>VALOR 3 </TD>
<TD>VALOR 4 </TD>
</TR>
<TR>
<TD>VALOR 5 </TD>
<TD>VALOR 6 </TD>
<TD>VALOR 7 </TD>
<TD>VALOR 8 </TD>
</TR>
 Web Master – Módulo HTML
Exercício
TÍTULO DA TABELA

VALOR 1 VALOR 2 VALOR 3 VALOR 4

VALOR 5 VALOR 6 VALOR 7

VALOR 8 VALOR 9 VALOR 10 VALOR 11

VALOR 12 VALOR 13 VALOR 14

VALOR 15 VALOR 16 VALOR 17 VALOR 18

VALOR 19 VALOR 20
 Web Master – Módulo HTML

Exercício – Solução <TR>

<TD>VALOR 12 </TD>
<TABLE BORDER="1"> <TD>VALOR 13 </TD>
<TR> <TD>VALOR 14 </TD>
<TD COLSPAN="4">TITULO DA TABELA </TR>
</TD> <TR>
</TR> <TD>VALOR 15 </TD>
<TR> <TD ROWSPAN="2">VALOR 16 </TD>
<TD ROWSPAN="2">VALOR 1 </TD> <TD>VALOR 17 </TD>
<TD>VALOR 2 </TD> <TD ROWSPAN="2">VALOR 18 </TD>
<TD>VALOR 3 </TD> </TR>
<TD>VALOR 4 </TD> <TR>
</TR> <TD>VALOR 19 </TD>
<TR> <TD>VALOR 20 </TD>
<TD>VALOR 5 </TD> </TR>
<TD>VALOR 6 </TD> </TABLE>
<TD>VALOR 7 </TD>
</TR>
<TR>
<TD>VALOR 8 </TD>
<TD>VALOR 9 </TD>
<TD>VALOR 10 </TD>
<TD ROWSPAN="2">VALOR 11 </TD>
</TR>
 Web Master – Módulo HTML
Formulários
A linguagem HTML também permite que o cliente (navegador) interaja com
o servidor, preenchendo campos, clicando em botões e passando
informações.
O elemento FORM, da linguagem HTML, é justamente o responsável por tal
interação. Ele provê uma maneira agradável e familiar para coletar dados
do usuário através da criação de formulários com janelas de entrada de
textos, botões, etc.
Para fazer formulário, você tem que colocar as TAGs <FORM> </FORM>.
Todos os outros comandos, devem ficar dentro dessas TAGs
Exemplo
<FORM NAME="CADASTRO" METHOD=“POST" ACTION="PAGINA1.HTML">
[OBJETOS]
</FORM>
 Web Master – Módulo HTML

A TAG <INPUT>
Ela especifica uma variedade de campos editáveis dentro de um
formulário.
Ela pode receber diversos atributos que definem o tipo de mecanismo
de entrada (botões, janelas de texto, etc.), o nome da variável
associada com o dado da entrada, o alinhamento e o campo do valor
mostrado.
O atributo mais importante do INPUT é o NAME. Ele associa o valor da
entrada do elemento.
 Web Master – Módulo HTML

Campo de texto
Ele determina o campo de entradas de dados
<INPUT TYPE="TEXT" NAME="NOME“ />
Para mudar o tamanho, da janela padrão, você tem que colocar o
comando SIZE
<INPUT TYPE"TEXT" NAME="NOME" SIZE= "8" />
Outro comando importante é o VALUE. Ele acrescenta uma palavra
digitada no comando à janela
<INPUT TYPE"TEXT" NAME="NOME" SIZE="8" VALUE="TEXTO" />
Para restringir a quantidade de caracteres a ser utilizado deve-se usar
o atributo MAXLENGTH
<INPUT TYPE"TEXT" NAME="NOME" SIZE="8" VALUE="TEXTO"
MAXLENGTH=“10" />
 Web Master – Módulo HTML

Campo de password
Para ser um campo de senha, que quando digitado, apareça o símbolo
"*", ao invés das letras, você deve escrever o seguinte
<INPUT TYPE="PASSWORD" NAME="NOME" SIZE= "8" />
Campo de rádio
Quando o usuário deve escolher uma resposta em uma única
alternativa, de um conjunto, utiliza-se o RADIO Buttons
É preciso que todos os rádios buttons pertençam a um mesmo grupo,
ou seja, referentes a mesma pergunta, tenham o mesmo atributo NAME
<INPUT TYPE="RADIO" NAME="SEXO" VALUE="M“ />MASCULINO
<INPUT TYPE="RADIO" NAME="SEXO" VALUE="F“ />FEMININO
<HR />
<INPUT TYPE="RADIO" NAME="ESTADOCIVIL" VALUE="S“ />SOLTEIRO
<INPUT TYPE="RADIO" NAME="ESTADOCIVIL" VALUE="C“ />CASADO
<INPUT TYPE="RADIO" NAME="ESTADOCIVIL" VALUE="D“ />DIVORCIADO
<INPUT TYPE="RADIO" NAME="ESTADOCIVIL" VALUE="V“ />VIÚVO
 Web Master – Módulo HTML

Campo CheckBox
O tipo CHECKBOX provê outros botões através dos quais mais de uma
alternativa, pode ser escolhida

<INPUT TYPE="CHECKBOX" NAME="NETSCAPE" VALUE="NET“

/>NETSCAPE
<INPUT TYPE="CHECKBOX" NAME="EXPLORER" VALUE="EXP“
/>INTERNET EXPLORER
<INPUT TYPE="CHECKBOX" NAME="MOSAIC" VALUE="MOS“ />MOSAIC
<INPUT TYPE="CHECKBOX" NAME="HOT JAVA" VALUE="HOT“ /> HOT
JAVA
Campo OCULTOS
O campo HIDDEN é um item de formulário oculto, ao qual o usuário
não vê mais o mesmo é enviado quando o formulário é submetido
<INPUT TYPE=“HIDDEN” NAME=“CAMPO OCULTO” VALUE=“TESTE” />
 Web Master – Módulo HTML

Botão SUBMIT
O tipo CHECKBOX provê outros botões através dos quais mais de uma
alternativa, pode ser escolhida

<INPUT TYPE="SUBMIT" VALUE="ENVIAR“ />

Botão RESET
No caso dos botões RESET, quando o botão é clicado, ele
automaticamente limpa todos os campos já preenchidos no formulário,
voltando à situação inicial

<INPUT TYPE="RESET" VALUE="LIMPAR“ />

 Web Master – Módulo HTML

Campo SELECT
Apresenta uma lista de valores em um menu suspenso. Ótimo para
criar escolhas que o usuário seleciona sem precisar digitar.

<SELECT NAME=“SABOR” SIZE=“4”>

<OPTION VALUE=“ABACAXI”>ABACAXI</OPTION>
<OPTION VALUE=“MORANGO”> MORANGO </OPTION>
<OPTION VALUE=“CHOCOLATE”>CHOCOLATEI</OPTION>
<OPTION VALUE=“CREME”>CREME</OPTION>
<OPTION VALUE=“UVA”>UVA</OPTION>
</SELECT>

Atributo SELECTED
Também é possível estabelecer uma escolha padrão, atraves do
atributo SELECTED

<OPTION VALUE=“UVA” SELECTED=“SELECTED”>UVA </OPTION>

 Web Master – Módulo HTML

Campo TEXTAREA
Abre uma área para entrada de texto, de acordo com atributos para
número de colunas, linha, e –se for o caso – um valor inicial. É um
campo onde as pessoas poderão digitar mais texto do que nos campos
de texto do tipo INPUT. Se o usuário digitar mais linhas do que o
especificado surgirá uma barra de rolagem.

<TEXTAREA COLS=“40” ROWS=“5” NAME=“COMENTARIO”>

DEIXE SEU COMENTÁRIO
</TEXTAREA>
Web Master – Módulo HTML
 Web Master – Módulo HTML
<form id="cadastro" name="form1" method="post" <tr>
action=""> <td>Navegador que utiliza </td>
<table width="70%" border="1" cellspacing="0" <td><input name="navegador" type="checkbox"
cellpadding="5"> id="navegador" value="ie" />
<tr> Internet Explorer<br />
<td>Nome</td> <input name="navegador" type="checkbox"
<td><input type="text" name="nome" /></td> id="navegador" value="ff" />
</tr> FireFox<br />
<tr> <input name="navegador" type="checkbox"
<td>E-mail</td> id="navegador" value="opera" />
<td><input type="text" name="email" /></td> Opera<br />
</tr> <input name="navegador" type="checkbox"
<tr> id="navegador" value="crome" />
<td>Senha</td> Crome</td>
<td><input type="password" name="senha" </tr>
/></td> <tr>
</tr> <td>Comentario</td>
<tr> <td><textarea name="comentario" cols="50"
<td>Sexo</td> rows="10"></textarea></td>
<td><input name="sexo" type="radio" </tr>
value="m" /> <tr>
Masculino <td><input type="submit" name="enviar"
<input name="sexo" type="radio" value="f" /> value="Enviar" /></td>
Feminino</td> <td><input type="reset" name="limpar"
</tr> value="Limpar" /></td>
<tr> </tr>
<td>Estado Civ&iacute;l </td> </table>
<td><select name="estadocivil"> </form>
<option value="s"
selected="selected">Solteiro</option>
<option value="c">Casado</option>
<option value="v">Viuvo</option>
FIM