Baixe o app para aproveitar ainda mais
Prévia do material em texto
Apresentação Bem-vindo ao curso de HTML - Avançado. O objetivo deste curso é dar continuidade aos conhecimentos que você adquiriu no curso de HTML - Básico ou aos que você já possua sobre essa linguagem de marcação, que é a mais utilizada para criar páginas web. Neste curso, você aprenderá a incluir tabelas, formulários e frames em sua página web, usando o HTML. Serão abordados temas como: • Criar e formatar uma tabela; • Criar formulários com campos de entrada de dados; • Documentar página web; • Criar e formular frames . Estrutura do curso O curso de HTML - Avançado está dividido em quatro módulos, organzados da seguinte forma: • Módulo 01- Criando e formatando tabelas; • Módulo 02-Criando e formatando formulários; • Módulo 03-Criando e formatando frames; • Módulo 04-Incrementando a página web. Ao término do curso, você deverá realizar a avaliação, para verificar a sua compreensão sobre os assuntos abordados. Caso seu desempenho seja igual ou superior a 70% você será aprovado e poderá imprimir o certificado de conclusão do curso. Observe estas dicas para que você possa obter um melhor aproveitamento do curso: • Verifique as informações sobre as datas de início e término do curso; • Você poderá fazer o curso em qualquer dispositivo com acesso a internet; • Planeje seu tempo, de modo que possa acessar todo o conteúdo antes da data prevista para o término do curso; • Faça os exercícios propostos. Introdução ao módulo Neste módulo, você conhecerá as tags e os atributos necessários para a criação de tabelas. Os tópicos a serem estudados são: • Qual a função da tabela; • Como inserir linhas e colunas na tabela; • Atributos de formatação e alinhamento da tabela. Por que utilizar tabelas em HTML? Tabelas são muito úteis para a organização dos dados e das imagens em páginas web, pois possibilitam um alinhamento que seria difícil de conseguir com simples comandos. Uma tabela é constituída de linhas e colunas, que podem, ou não, conter dados. Vamos iniciar criando uma tabela simples. Depois, veremos maneiras de adicionar algumas características à tabela, como título, borda e largura. As tabelas podem conter textos, listas, imagens e, inclusive, outras tabelas. Criando uma tabela A tag utilizada para criar uma tabela é a <TABLE></TABLE>. No HTML as tabelas são criadas apenas com linhas e não colunas, diferente das criadas, por exemplo, no Word. Dessa forma, além da tag <TABLE>, são necessárias mais duas tags para a construção da tabela: • <TR> - responsável por criar as linhas; • <TD> </TD> - responsável por criar as células. Observe, a baixo, como criar uma tabela simples. Em seguida, clique no botão para visualizar o resultado na página web. Código HTML: <html> <head><title>Criando tabelas</title> </head> <body> <table> <tr> <td> nome</td> <td>Sobrenome</td> <tr> <td>Anna</td> <td>Santos</td> <tr> <td>vanessa</td> <td>Medeiros</td> </table> </body> </html> Atributos da tag A tag <TABLE> possui vários atributos que permitem, entre outros aspectos, controlar: • O alinhamento da tabela na página; • O alinhamento dos dados nas células; • A largura e cor da borda; • As dimensões da tabela. Você verá, nas próximas telas, esses atributos. Atributo BORDER Para criar um efeito que facilite a visualização da tabela, você pode inserir uma borda. Neste caso, você utilizará o atributo BORDER. A espessura da borda é definida em pixels. A sintaxe fica assim: <table border="número de pixels"> Você também pode inserir uma borda colorida. Neste caso, o atributo a ser utilizado é o BORDERCOLOR. A sintaxe fica assim: <TABLE BORDERCOLOR = "cor"> Dica: As cores são as mesmas que você viu no curso de HTML Básico. <html> <head><title>Inserindo borda colorida</title> </head> <body> <table border="3" bordecolor="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> Atributo BGCOLOR O atributo BGCOLOR permite a você definir uma cor de fundo para a tabela toda, quando usada na tag <TABLE>. Pode ou não ser utilizado com os atributos BORDER e BORDERCOLOR. A sintaxe fica assim: <TABLE BGCOLOR ="cor" Código HTML: <HTML> <HEAD> <TITLE>Cor de fundo na linha/célula</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> Atributo BACKGROUND O atributo BACKGROUND permite a você definir uma imagem de fundo em uma tabela. A imagem é carregada em seu tamanho normal e é distribuída em pequenas partes, até preencher o conteúdo da tabela. A sintaxe fica assim: <TABLE BACKGROUND= "imagem"> Lembre-se! O nome do arquivo da imagem precisa ser indicado com a respectiva extensão. Atributos WIDTH e HEIGHT Os atributos WIDTH e HEIGHT são utilizados para definir a largura e altura da tabela em pixels ou porcentagem, uma vez que, por padrão, a célula da tabela assume o tamanho do maior dado inserido: • WIDTH - define a largura; • HEIGHT - define a altura. A sintaxe fica assim: <TABLE WIDTH="valor" HEIGHT="valor"> Os atributos width e height também podem ser utilizados para alterar a altura e largura das células. Se os valores definidos nestes atributos forem menores que o espaço necessário para visualização dos dados da tabela, o navegador os ignora para garantir a apresentação adequada dos dados. Observe, neste exemplo, que a largura da tabela foi definida em 300 pixels (WIDTH="300") e sua altura ocupará 20% (HEIGHT="20%") da altura do navegador. <HTML><HEAD> <TITLE>Definindo dimensão da tabela</TITLE> </HEAD> <BODY> <TABLE WIDTH="300" HEIGHT="20%" BORDER="2"><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 O atributo ALIGN altera o alinhamento da tabela em relação à página web. A sintaxe fica assim: <TABLE ALIGN = "alinhamento">. O alinhamento pode ser: left Alinha a tabela à esquerda (padrão). A sntaxe é a seguinte: <table align="left"> tabela.</table> Codigo HTML: <html> <body> <table border="2" align="left"> <tr bgcolor=#EOEEEE> <TD>Nome</td><td>Santos</td> <tr> <td>Anna</td><td>Santos</td> </table> </body> </html> Center Alinha a tabela ao centro. A sintaxe é a seguinte: <table align="center">tabela</table> Codigo HTML: <html> <body> <table border="2" align="center"> <tr bgcolor=#EOEEEE> <TD>Nome</td><td>Santos</td> <tr> <td>Anna</td><td>Santos</td> Right Alinha a tabela a direita. A sintaxe é a seguinte: <table align="right">tabela</table> Codigo HTML: <html> <body> <table border="2" align="right"> <tr bgcolor=#EOEEEE> <TD>Nome</td><td>Santos</td> <tr> <td>Anna</td><td>Santos</td> Cellspacing O atributo CELLSPACING especifica o espaço entre a borda da tabela e as células, sempre em pixels. A sintaxe fica assim: <TABLE CELLSPACING = "valor"> Observe, no exemplo abaixo, a tabela antes e depois da aplicação do atributo CELLSPACING Código HTML: <html> <body> <table border="2" align="left"> <HTML><HEAD> <TITLE>Alterando espaçamentos</TITLE> </HEAD> <BODY> <TABLE WIDTH="300" HEIGHT="25%" BORDER="4" CELLSPACING="10"><TR BGCOLOR= #E0F8E0><TDALIGN="center" VALIGN ="center" HEIGHT="40" COLSPAN="2"><FONT FACE= "Comic Sans MS"><B>CADASTRO DE CLIENTES</B></TD><TR BGCOLOR= #E0EEEE><TD><FONT FACE= "Calibri"><B>Nome</B></TD><TD><FONT FACE= "Calibri"><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> Cellpadding Já o atributo CELLPADDING especifica o espaço entre os dados e a borda de uma célula, sempre em pixels. A sintaxe fica assim: <TABLE CELLPADDING = "valor"> Observe, no exemplo abaixo, a tabela antes e depois da aplicação do atributo CELLPADDING . Codigo HTML: <HTML><HEAD> <TITLE>Alterando espaçamentos</TITLE> </HEAD> <BODY> <TABLE WIDTH="300" HEIGHT="25%" BORDER="4" CELLSPACING="10" CELLPADDING="7"><TR BGCOLOR= #E0F8E0><TD ALIGN="center" VALIGN ="center" HEIGHT="40" COLSPAN="2"><FONT FACE= "Comic Sans MS"><B>CADASTRO DE CLIENTES</B></TD><TR BGCOLOR= #E0EEEE><TD><FONT FACE= "Calibri"><B>Nome</B></TD><TD><FONT FACE= "Calibri"><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> Atributos da tag TD Agora, vamos analisar os atributos da tag TD. Podemos mudar as propriedades das células utilizando os seguintes atributos: Align Além de alinhar a tabela em relação à página web, o atributo ALIGN alinha horizontalmente os dados de uma célula.Seu valor pode ser especificado como: LEFT( alinha os dados à esquerda), RIGHT ( alinha os dados a direita ) e CENTER ( Centraliza os dados na célula ). A sintaxe fica assim: <td align="alinhamento"> código HTML: <table width="300" height="200" border="2"> <tr bgcolor=#EOEEEE> <td align="left"><b>nome</b></td> <tr> <td align="center">Anna</td> <td align="right">Santos</td> </table> Valign Para alinhar os dados de uma célula verticalmente, você utiliza o atributo VALIGN. Este atributo é útil quando a altura das células foi aumentada. Os valores para este atributo são: TOP (alinha os dados com a parte superior da célula).BOTTOM(alinha os dados com a parte inferior) e CENTER (Centraliza verticalmente os dados) A sintaxe fica assim: <td valign="alinhamento"> Código HTML: <Table width="300" height="200" border="2"> <tr bgcolor=#EOEEEEE> <td valign="bottom" height="30">Nome</td> <td valign="top" height="30">Sobrenome</td> <tr> <td valign="center" height="30">Anna</td> <td valign="center" height="30">Santos</td> </table> Colspan O atributo COLSPAN é utilizado para mesclar uma célula em mais de uma coluna. Este atributo é muito utilizado quando a tabela possui um título ou conteúdo que sem ele ficaria alinhado apenas na primeira célula. O valor para este atributo deve ser especificado em números. A sintaxe fica assim: <td colspan="número"> Código em HTML: <table width="300" height="200" border="2"> <TR bgcolor=#EOEEEE> <td colspan="2"><b>dados</b></td> <tr> <td>Anna</td> <td>Santos</td> </table> Rowspan O atributo Rowspan é utilizado para mesclar uma célula em mais de uma linha. Este atributo é uito utilizado quando a tabela possui dados classificados por tipo, categoria etc. Sem ele, o texto ficaria alinhado apenas na primeira célula. O valor para este atributo deve ser especificado em números. A sintaxe fica assim: <td Rowspan="número"> Código em HTML: <table width="300" height="200" border="2"> <tr bgcolor=#E)EEEE> <td><b>nome</b></td> <td><b>sobrenome</b></td> <tr> <td>Anna</td> <td rowspan="2">Santos</td> <tr> <td>Vanessa</td> </table>
Compartilhar