HTML AVANÇADO

Prévia do material em texto

HTML AVANÇADO 
1 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
HTML AVANÇADO 
2 
 
Menu 
 
APRESENTAÇÃO ............................................................................................................................. 4 
Introdução ao módulo ................................................................................................................... 4 
Por que utilizer tabelas em HTML ................................................................................................. 5 
Criando uma Tabela ...................................................................................................................... 5 
Atributos da tag ............................................................................................................................. 6 
Atributo Border ............................................................................................................................. 6 
Atributo BGCOLOR ........................................................................................................................ 7 
GIAtributo BACKGROUND ............................................................................................................. 7 
Atributos Width e Height .............................................................................................................. 8 
Atributo ALIGN .............................................................................................................................. 8 
Cellspacing ................................................................................................................................... 10 
Atributos da tag TD ..................................................................................................................... 11 
O que é formulário ...................................................................................................................... 12 
Criando um formulário ................................................................................................................ 12 
Atributo METHOD ....................................................................................................................... 13 
Objeto do formulário .................................................................................................................. 13 
Tag INPUT e seus Atributos ......................................................................................................... 14 
Os possiveis valores de TYPE ....................................................................................................... 14 
Inserindo um campo texto .......................................................................................................... 15 
Atributo Value ............................................................................................................................. 15 
Inserindo um campo de senha .................................................................................................... 16 
Inserindo botões de escolha única .............................................................................................. 17 
Inserindo botões de múltipla escolha ......................................................................................... 18 
Inserindo uma area de texto ....................................................................................................... 19 
Botões SUBMIT e RESET .............................................................................................................. 20 
Inserindo um campo oculto ........................................................................................................ 21 
Lista de opções ou menu? ........................................................................................................... 22 
Lista de opções e menu ............................................................................................................... 22 
Lista de Opções ....................................................................................................................... 22 
Menu ....................................................................................................................................... 23 
Exercicio ...................................................................................................................................... 23 
Modulo 3 – Criando e formatando frames ................................................................................. 24 
Tag FRAMSET ............................................................................................................................... 24 
A Tag Frame ................................................................................................................................. 25 
HTML AVANÇADO 
3 
 
O atributo Name ......................................................................................................................... 25 
Apontando um Frame ................................................................................................................. 26 
Modulo 04 – Incrementando a pagina web ................................................................................ 26 
A tag META e seus atributos ....................................................................................................... 26 
O Atributo Content ...................................................................................................................... 27 
Exercício resolvido ....................................................................................................................... 28 
Resumo ........................................................................................................................................ 28 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
HTML AVANÇADO 
4 
 
 
APRESENTAÇÃO 
 
Introdução ao módulo 
 
 
 
 
 
 
 
HTML AVANÇADO 
5 
 
 
 
Por que utilizer tabelas em HTML 
 
Criando uma Tabela 
 
 
 
 
 
 
RESULTADO 
 
 
 
 
 
 
HTML AVANÇADO 
6 
 
 
Atributos da tag 
 
Atributo Border 
 
 
 
<HTML> 
 <HEAD> 
 <TITLE>Criando tabela</TITLE> 
 </HEAD> 
 
<BODY> 
<TABLE BORDER="1"> 
 <TR> 
 <TD> NOME </TD> 
 <TD> SOBRENOME </TD> 
 <TR> 
 <TD> Anna </TD> 
 <TD> Santos </TD> 
 <TR> 
 <TD> Vanessa </TD> 
 <TD> Medeiros </TD> 
 </TABLE> 
</BODY> 
</HTML> 
 
 
 
 
 
<HTML> 
 <HEAD> 
 <TITLE>Criando tabela</TITLE> 
 </HEAD> 
 
<BODY> 
<TABLE BORDER="1" BORDERCOLOR="FF6600"> 
 <TR> 
 <TD> NOME </TD> 
 <TD> SOBRENOME </TD> 
 <TR> 
 <TD> Anna </TD> 
 <TD> Santos </TD> 
 <TR> 
 <TD> Vanessa </TD> 
 <TD> Medeiros </TD> 
 </TABLE> 
</BODY> 
</HTML> 
 
 
 
 
 
HTML AVANÇADO 
7 
 
Atributo BGCOLOR 
 
 
 
<HTML> 
 <HEAD> 
 <TITLE>Criando tabela</TITLE> 
 </HEAD> 
 
<BODY> 
<TABLE BORDER="1" BORDERCOLOR="FF6600" BGCOLOR="CCFFFF"> 
 <TR> 
 <TD> NOME </TD> 
 <TD> SOBRENOME </TD> 
 <TR> 
 <TD> Anna </TD> 
 <TD> Santos </TD> 
 <TR> 
 <TD> Vanessa </TD> 
 <TD> Medeiros </TD> 
 </TABLE> 
</BODY> 
</HTML> 
 
 
 
 
 
<HTML> 
 <HEAD> 
 <TITLE>Criando tabela</TITLE> 
 </HEAD> 
 
<BODY> 
 <TABLE BORDER="3" BORDERCOLOR="FF6600"> 
 <TR BGCOLOR="CCFFFF"> 
 <TD> NOME </TD> 
 <TD> SOBRENOME </TD> 
 <TR> 
 <TD> Anna </TD> 
 <TD> Santos </TD> 
 <TR> 
 <TD> Vanessa </TD> 
 <TD BGCOLOR="CCFFFF"> Medeiros 
</TD> 
 </TABLE> 
</BODY> 
</HTML> 
 
 
 
GIAtributo BACKGROUND 
 
 
<HTML> 
 <HEAD><TITLE>Criando tabela</TITLE> 
 </HEAD> 
 
<BODY> 
 <TABLE BORDER="3" BORDERCOLOR="000066" BACKGROUND="Yasmin - foto da 
abb.jpg"> 
 <TR> 
 <TD><B>NOME </B></TD> 
 <TD><B>SOBRENOME </B></TD> 
 <TR> 
 <TD> Anna </TD> 
 <TD> Santos </TD> 
 <TR> 
 <TD> Vanessa </TD> 
 <TD> Medeiros </TD> 
 </TABLE> 
 <TABLE BACKGROUND="Yasmin - foto da abb.jpg"> 
 <TR> 
 <TD><B>NOME </B></TD> 
 <TD><B>SOBRENOME </B></TD> 
 <TR> 
 <TD> Anna </TD> 
 <TD> Santos </TD> 
 <TR> 
 <TD> Vanessa </TD> 
 <TD> Medeiros </TD> 
 </TABLE> 
</BODY> 
</HTML> 
 
HTML AVANÇADO 
8 
 
Atributos Width e Height 
 
 
 
<HTML> 
<HEAD> 
<TITLE>Criando tabela</TITLE> 
</HEAD> 
 
<BODY> 
<TABLE width="300" HEIGHT= "20%" BORDER="3"> 
<TR BGCOLOR=#E0EEEE> 
<TD><FONT FACE="Comic Sans MS"> <B> NOME </B></TD> 
<TD><FONT FACE="Comic Sans MS"> <B>SOBRENOME </B></TD> 
<TR> 
<TD><FONT FACE="Calibri">Anna</FONT></TD> 
<TD><FONT FACE="Calibri">Santos</FONT></TD> 
<TR BGCOLOR=#E0EEEE> 
<TD><FONT FACE="Calibri">Vanessa</FONT></TD> 
<TD><FONT FACE="Calibri">Medeiros </FONT></TD> 
</TABLE> 
 
</BODY> 
</HTML> 
 
 
 
 
 
 
 
 
 
 
Atributo ALIGN 
 
 
 
HTML AVANÇADO 
9 
 
 
 
 
 
 
 
HTML AVANÇADO 
10 
 
Cellspacing 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
HTML AVANÇADO 
11 
 
Atributos da tag TD 
 
 
HTML AVANÇADO 
12 
 
 
O que é formulário 
 
 
 
Criando um formulário 
Atributo ACTION 
 
HTML AVANÇADO 
13 
 
 
Atributo METHOD 
 
 
 
 
 
Objeto do formulário 
 
 
 
HTML AVANÇADO 
14 
 
 
Tag INPUT e seus Atributos 
 
 
 
Os possiveis valores de TYPE 
 
 
 
 
HTML AVANÇADO 
15 
 
 
 
Inserindo um campo texto 
 
 
Atributo Value 
 
 
 
 
 
 
 
 
 
HTML AVANÇADO 
16 
 
Inserindo um campo de senha 
 
 
 
 
 
HTML AVANÇADO 
17 
 
Inserindo botões de escolha única 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
HTML AVANÇADO 
18 
 
Inserindo botões de múltipla escolha 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
HTML AVANÇADO 
19 
 
Inserindo uma area de texto 
 
 
 
 
 
 
 
 
 
 
 
HTML AVANÇADO 
20 
 
 
Botões SUBMIT e RESET 
 
 
 
 
 
 
 
 
 
 
 
HTML AVANÇADO 
21 
 
 
Inserindo um campo oculto 
 
 
 
 
 
 
 
 
 
HTML AVANÇADO 
22 
 
 
Lista de opções ou menu? 
 
 
 
Lista de opções e menu 
Lista de Opções 
 
 
 
 
 
 
 
 
 
HTML AVANÇADO 
23 
 
Menu 
 
 
 
 
 
 
 
 
 
 
 
 
Exercicio 
 
 
 
HTML AVANÇADO 
24 
 
 
 
Modulo 3 – Criando e formatando frames 
Tag FRAMSET 
 
 
 
 
HTML AVANÇADO 
25 
 
 
 
A Tag Frame 
 
O atributo Name 
 
 
 
 
HTML AVANÇADO 
26 
 
Apontando um Frame 
 
Modulo 04 – Incrementando a pagina web 
 
A tag META e seus atributos 
 
 
 
 
HTML AVANÇADO 
27 
 
O Atributo Content 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
HTML AVANÇADO 
28 
 
Exercício resolvido 
 
 
Exercicio.zip
 
 
Resumo 
 
 
 
 
 
 
 
 
 
HTML AVANÇADO 
29 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
HTML AVANÇADO 
30