HTML - SEGUNDA PARTE [final]
Autor: Guilherme Henrique O. Ramos | Publicado: 2009-07-23T12:51:00-03:00

HTML segunda parte.-------------------E ae pessoal, trazendo aqui pra vocês a segunda partede HTML!hoje a gente vai aprender sobre as tags IMG e DIVtambém vou explicar um pouquinho mais sobre elas, e relembrar as outras tags.PS.: vou evitar colocar as tags dentro de '> e <' porque o blog não aceita então vou fazer com [ e ] assim quando tiver os cochetes vocês ja sabem pelo o que substituir.bom então vamos lá...[table][tr] [td][/td][/tr][/table]mas nós ja vimos isso, não? :Osim, mas eu deixei passar algo MUITO importante na outra explicaçãoo COLSPAN e o ROWSPAN...mas WTF is this?colspan e rowspan servem para JUNTAR/MESCLAR as células da tabela,no caso para você fazer um banner num site de 800x600 com 5 colunas e umas 10 linhaspor exemplo, como você colocaria um banner de 800x150 dentro de UMA coluninhasem estourar o layout ? só mesmo mesclando as células,e pra isso a gente usa esses ATRIBUTOS da seguinte forma...caso você tenha feito 5 colunas, ao usar o COLSPAN você cria somente UMA colunacaso queira juntar todas, e digita o numero de colunas que você criou para o siteno nosso caso, 5 colunas...[table width="800" height="600" border="0"][tr] [td COLSPAN="5"][/td][/tr][tr] [td][/td] [td][/td] [td][/td] [td][/td] [td][/td][/tr][/table]eu fiz somente 2 linhas para dar um exemplo...mas você pode fazer com quantas quisere o ROWSPAN seria pra juntarmos LINHAS, caso queira colocar um Banner VERTICAL[table][tr]  [td ROWSPAN="2"][/td]  [td][/td]  [td][/td]  [td][/td]  [td][/td][/tr][tr]  [td][/td]  [td][/td]  [td][/td]  [td][/td][/tr][/table]NESSE caso, que seria o ROWSPAN, estamos mesclando LINHAS ou blocos, portanto, só precisamos fazer uma COLUNA a MENOS na próxima TR, que seria a linha que foi mesclada, como vocês podem ver na primeira TR temos 5 colunas e uma delas com o atributo ROWSPAN="2", mesclando assim somente 2 linhas, a primeira e a segunda, e a segunda TR temos somente 4 colunas, sem a necessidade de executar o atributo novamente!isso é bastante util, caso você vá fazer sites, com tabelas, caso seja iniciante,e queira colocar um banner sem muita complicação, isso ajuda bastante...enfim, prosseguindo...IMAGENS!tag [img][/img]essa tag, como vocês ja devem imaginar, tem como objetivo de mostrar imagens, não como link, mas no formato natural da mesma...exemplo: Banners, logomarcas, marcadores, etc.dai vocês me perguntam, como vocês fariam pra colocar as imagens dentro do site?como eu ja ensinei no caso acima, esse comando é MUITO bem utilizado em 'combo' com o COLSPANum exemplo, caso queira colocar um banner de 800x150 num site de 800x600, pode sero seguinte...[table width="800" height="600" border="0"][tr] [td COLSPAN="5"][IMG SRC="diretorio/img.JPG" WIDTH="800" HEIGHT="150"][/IMG][/td][/tr][tr] [td][/td] [td][/td] [td][/td] [td][/td] [td][/td][/tr][/table]a tag img vem como atributo o SRC que 'puxa' a imagem do diretório desejado!mas porque eu coloquei diretório?você não é obrigado a colocar a imagem dentro de um diretório, PORÉM, é recomendado, pela organização e fácil visualização da imagem, dependendo do seu site, você vai precisar ter uma pasta só para imagens, botões, algumas vezes até para texto... sim acredite, até pra texto...*eu coloquei img.JPG mas não necessáriamente o seu banner TEM que ser em JPG pode ser qualquer outro formato, desde que não seja PSD...WIDTH="800" - Largura do bannerHEIGHT="150" - Altura do bannereu tenho que regular altura e largura? mimimi...sim, tem, caso contrário, dê adeus ao seu layout de 800x600, ou ele estoura, ou ele encolhe se não tiver conteúdo...-------------------------------------------------------tag [DIV][/DIV]pra que as tags "div" servem?bom, eu não as uso muito, mais...a não ser que eu vá mexer em algum CSS que precise de classe etc (não vou explicar CSS, não agora, portanto as tags DIV não vão ser tão importantes assim)porém, quando eu as usava em algum site que eu tenha feito em HTML, eu utilizava mais para ALINHAMENTO tanto de texto, quanto de imagens,um exemplo legal, é um texto que você queira que fique exatamente no meio do site, que muitas vezes ele vai pra esquerda, vai pra direita, mas nunca fica no meio, e isso é chato demais.[html] [head]   [title]teste[/title] [/head] [body]   [table width="800" height="600" border="0"]     [tr]       [td COLSPAN="5"][/td]     [/tr]     [tr]       [td][/td]       [td colspan="3" rowspan="2"][div align="center"]Texto de teste, pro blog, sem ficar pra esquerda e muito menos pra direita[/div][/td]       [td][/td]    [/tr]    [tr]       [td][/td]       [td][/td]   [/table] [/body][/html]nesse caso, o texto ficaria totalmente centralizado de acordo com a sua página!as divs tem 2 tipos de alinhamento, o que eu ja mostrei pra vocês, e o alinhamento vertical,VALIGN="top"vALIGN="middle"vALIGN="bottom"topo, meio e rodapénem é muito utilizado, porque geralmente os textos inseridos no próprio HTML ja ficam no topo, a não ser que você queira um texto no meio da tela, você utilizará um "vAlign"-----------------------------------------------------------------------dicas de tagsAs tags tem um fechamento específicovocê fecha as tags em ordem contrária à abertura,exemplo.a própria estrutura do htmlperceba que o [html] é a primeira tag a ser aberta e a ultima a ser fechada [/html]acho que não é necessário maiores explicações, não é? ;Pmas nós temos casos à parte dentro do html, como as divs, que você pode abrir e fechar no meio de uma coluna numa tabela, mas sempre fechando sem deixar tag aberta dentro da mesma... exemplo[div][font]mimimimimimi[/div][/font] - ERRADO[div][font]mimimimimimi[/font][/div] - Certo[font][div]mimimimimimi[/div][/font] - Certoexplicado?então é isso, breve eu volto com mais coisas pra vocês ;De...THAT'S THE WAY! MAN!