|
|
|
|
 |
 |
 |
 |
|
 |
 |
|||
|
 Curso HTML Módulo 01 - Módulo 02 - Módulo 03 - Módulo 04 - Módulo 05
MÓDULO 04 - Curso de HTMLTabelas Iniciando mais um pouco do nosso mísero conhecimento a respeito de HTML. Na aula passada terminamos trabalhando com background. Certo? Revisando: <HTML> <HEAD> <TITLE>Bem-vindo ao mundo do web designer</TITLE> </HEAD> <BODY BACKGROUND="nomedatextura" BGPROPERTIES="fixed" BGCOLOR="pink" TEXT="red" LINK="black" VLINK="white">Aqui vc vai realizar toda a sua imaginação e seu talento em diagramar páginas para a internet, com a fonte padrão. <P> <FONT size=1 color=lime face=arial, verdana, sans-serif> Aqui está a sua nova Fonte</FONT></P> Até agora <B> vc</B> aprendeu:<BR><OL> <LI> Arquivo HTML = nome.html e index.html para a 1<SUP>a</SUP> página<LI> A compor o corpo de um texto<LI> A trabalhar com diversas <U>fontes</U><LI> A alinhar um texto<LI> A usar marcadores de textos<LI> Usar LINKS e imagens<LI> Background</OL> <A HREF=http://www.milpaginas.itgo.com>Mil Páginas</A> <IMG SRC="imagem.gif" width=40 height=40 border=0 alt="clique aqui"> </A> </BODY> </HTML> Bem... hoje começaremos com um recurso que será extremamente usado durante a diagramação de páginas: a TABELA. Um bom editor irá produzir para vc uma tabela em poucos segundos, mas para realmente diagramá-la com criatividade vc precisará ter uma preocupação um pouco maior. O TAG da tabela é <TABLE></TABLE>; Cada linha da tabela é formada pelo TAG <TR></TR>; Cada coluna da tabela é forma pelo TAG <TD></TD> Portanto, uma tabela com duas linhas e três colunas será formado pelo aninhamento destes TAGs, exemplo: <TABLE> <TR> <TD>Aqui é a primeira coluna, da primeira linha </TD> <TD>Aqui é a Segunda coluna, da primeira linha </TD> <TD>Aqui é a terceira coluna, da primeira linha </TD> <TR> <TD>Aqui é a primeira coluna, da segunda linha </TD> <TD>Aqui é a segunda coluna, da segunda linha </TD> <TD>Aqui é a terceira coluna, da segunda linha </TD> </TR> </TABLE> Os atributos da tabela são os seguintes: border= espessura da bordar, que pode ser: 0,1,2,3... width= indica o comprimento da tabela em relação à página, medido em percentual, ex.20% da página. bgcolor=indica a cor do fundo da tabela. background= indica o fundo (imagem) da tabela align= indica o alinhamento da tabela, que pode ser: center, left, right. cellspacing= indica o espaço entre as células: 1,2,3,4... cellpadding= indica o espaço entre os dados e a borda da célula: 1, 2, 3, 4... Esse atributos, quanto usados, devem estar próximo ao TAG <TABLE>, pois pertence ao aspecto geral da tabela. Exemplo: <TABLE width=50% border=0 bgcolor=#FFFFFF align=center cellspacing=2 cellpadding=2> <TR> <TD> </TD> </TR> </TABLE> Porém, alguns deles podem ser atributos de coluna, como: width= que pode ser usado para determina a largura das colunas, exemplo: <TD width=20%> primeira coluna <TD width=80%>Segunda coluna; Note: que o width especificado na coluna se refere ao uso do WIDTH usado no TAG TABLE, no exemplo acima 50%, logo o 20% da primeira coluna é referente aos 50%. OK. Não? Então tente isto: <TABLE width=50% border=1 bgcolor=#FFFFFF align=center cellspacing=2 cellpadding=2> <TR> <TD width=20%>email: </TD width=80%>tacoataco@ig.com.br </TR> </TABLE> Outros atributos usado como TAG <TD>: aling= alinhamento dos dados dentro da coluna: center, left,right valign= alinhamento vertical dos dados dentro da coluna: top, middle, bottom ou baseline Um recurso comum para os diagramadores é usar uma tabela dentro de outra para colocar imagem ao lado de texto: Verifique do que eu estou falando no site http://portaldesconhecido.itgo.com/roswell.htmlO truque é simples, basta vc diagramar a segunda tabela menor na área de utilização da página do que a tabela principal. Exemplo: <TABLE width=100% border=0 bgcolor=#FFFFFF align=center cellspacing=2 cellpadding=2> <TR> <TD>Aqui vai o texto, quando vc achar que se faz necessário use a segunda tabela: <TABLE width=50% border=0 bgcolor=#FFFFFF align=rigth cellspacing=2 cellpadding=2> <TR> <TD>Aqui vai a imagem <IMG SRC>/lembre-se: a foto tem de ser menor que a área que o texto ocupa.... </TD> </TR> </TABLE> Aqui continua o texto ....
</TD> </TR> </TABLE> A tabela pode trazer um pouco de complicação para quem está aprendendo, por isso tenha paciência e treine bastante. Porfirio Amarilla - webdesigner
|
|||
|
|||||||||
- HTML
