Curso HTML avançado

Você fará uma breve revisão do que aprendeu no curso de HTML básico, criando a estrutura básica e salvando uma página Web.


Vamos recordar praticando. Abra o Bloco de notas do Windows.	1. No documento em branco que aparece, inicie a estrutura da página Web, digitando a tag <html>. 2. Pressione a tecla Enter para descer à próxima linha; em seguida, digite a tag <head>. Pressione a tecla Enter e digite a tag de fechamento </head>. 3. Para iniciar o corpo de sua página Web, ou seja, a parte visível no browser, pressione a tecla Enter e digite a tag <body>. 4. Na linha de baixo, digite a tag de fechamento </body>. 5. Para encerrar a estrutura básica de uma página Web, pressione a tecla Enter e digite a tag de fechamento da página </html>.
	A estrutura básica ficará assim: <html> <head> </head> <body> </body> </html>
	Em seguida, iremos acrescentar um título e um cabeçalho à página:
	1. Na estrutura básica, criada no Bloco de notas, posicione o cursor após a tag <head>. 2. Digite a tag <title> e, em seguida, digite Minha página Web. Não esqueça de acrescentar a tag de fechamento </title> após o texto. 3. Para acrescentar um texto com uma das seis opções de cabeçalho à página, após a tag <body>, digite a tag <h1> e, logo em seguida, digite: Revisando a estrutura básica de uma página HTML. Cerque o texto, digitando a tag de fechamento </h1>.
	A estrutura digitada no Bloco de notas ficará assim: <html> <head><title>Minha página Web</title> </head> <body><h1>Revisando a estrutura básica de uma página HTML</h1> </body> </html>

	As tags de cabeçalho variam de <h1> a <h6>. O texto inserido entre as tags <title> e </title> aparece na barra de título do browser. Com exceção do título, informações que aparecem entre as tags <head> e </head> não são visualizadas no navegador.

Você fez uma breve revisão do que aprendeu no curso de HTML básico, criou a estrutura básica e salvou uma página Web.

Você abrirá um exemplo de página pessoal e, nos próximos tópicos, incrementará esta página, inserindo tabelas, listas, frames, formulário e links.

Você abriu um exemplo de página pessoal e incrementou esta página, inserindo tabelas, listas, frames, formulário e links.

Você aprenderá como inserir listas ordenadas e não-ordenadas na página pessoal e conhecerá os tipos de cada lista.

As listas constituem uma excelente forma de estruturação de páginas Web.
	Elas podem atuar como menu, sumário ou resumo de um determinado conteúdo.

	Existem basicamente dois tipos de listas: - ordenadas, que numeram a seqüência dos itens; - não-ordenadas, que não numeram os itens; os separam utilizando marcadores.
As listas constituem uma excelente forma de estruturação de páginas Web.
	Elas podem atuar como menu, sumário ou resumo de um determinado conteúdo.

	Existem basicamente dois tipos de listas: - ordenadas, que numeram a seqüência dos itens; - não-ordenadas, que não numeram os itens; os separam utilizando marcadores.

Os itens de uma lista não-ordenada são representados por marcadores especiais quadrados ou circulares.
	O par de tags que envolve uma lista não-ordenada é <ul> e </ul>.
	Antes de iniciar cada item da lista, utilize a tag <li>.
	Sintaxe de uma lista não-ordenada com dois itens: <ul> <li>texto do item <li> texto do próximo item </ul>
	A tag <li> não possui a correspondente de fechamento </li>.
	Vamos inserir na página pessoal uma lista não-ordenada com apenas um item.
	1. Volte ao Bloco de notas e posicione o cursor após a tag </div>. Digite: <ultype="square"> 2. Pressione a tecla Enter e digite <li> 3. Digite: Clique aqui para acessar o meu currículo, entrar em minha página preferida ou enviar-me um e-mail. A página será exibida com frames. 4. Pressione a tecla Enter e finalize a lista não-ordenada, digitando a tag </ul>. 5. Salve a página e a visualize em seu browser. Clique no botão Atualizar do navegador para que a página seja exibida com as últimas alterações.
	Este trecho de sua página ficará assim no Bloco de notas: </div><ul type="square"> <li>Clique aqui para acessar o meu currículo, entrar em minha página preferida ou enviar-me um e-mail. A página será exibida com frames </ul>
	Clique aqui para visualizar o exemplo desta página.
	No decorrer do curso, você acrescentará links a esta página.

	O atributo type define o tipo de marcador que será utilizado. As opções, além de "square", são "circle" e "disc".


Os itens de uma lista ordenada são numerados ou seqüenciados alfabeticamente.	A tag <ol> define uma lista ordenada. Os itens de uma lista ordenada também são representados pela tag <li>. A sintaxe de uma lista ordenada com dois itens é: <ol> <li>texto do item <li>texto do próximo item </ol>
	Assim como nas listas não-ordenadas, aqui você também pode utilizar o atributo type. A sintaxe é: type="valor".
	Os valores que podem ser atribuídos ao type, no caso de uma lista ordenada são: 1. Type="1" - cria uma lista numérica (como é o padrão, não precisa ser especificado). 2. Type="I" - cria uma lista com numerais romanos maiúsculos. 3. Type="i" - cria uma lista com numerais romanos minúsculos. 4. Type="A" - cria uma lista alfabética com letras maiúsculas. 5. Type="a" - cria uma lista alfabética com letras minúsculas.
	Outro atributo da tag <ol> é o start. Você pode definir um valor para iniciar a contagem da lista. Exemplo: <ol type="a" start="3"> <li>texto do item </ol> No caso de uma lista numérica, o número inicial da lista será o número atribuído a start. Se for uma lista em ordem alfabética, o valor de start atribuirá a letra correspondente, definindo 1=a, 2=b e assim por diante.
	Vamos continuar trabalhando no arquivo pagina_pessoal.html, no Bloco de notas. O cursor estará posicionado após a tag </ul>. Pressione a tecla Enter para iniciar uma nova linha. Em seguida, digite: Se preferir, clique em um dos itens abaixo para acessar as informações: <ol type="a"> <li>Currículo <li>Página do EstudeGratis </ol>
	Clique aqui para visualizar o exemplo desta página.

	Salve o arquivo no Bloco de notas e atualize-o no browser.

Você aprendeu como inserir listas ordenadas e não-ordenadas na página pessoal e conheceu os tipos de cada lista.

Você aprenderá o que é uma tabela, como criá-la e conhecerá seus atributos.

Os principais atributos são:

1. Border - atributo da tag <table>. Se não for especificada, as células serão construídas com uma linha fina. O valor zero faz com que a tabela não possua borda e quanto maior o valor, mais grossa é a borda.
Sintaxe: Border="valor"

2. Align - alinha o texto dentro das linhas ou células. As opções são Left, Center e Right (o padrão é Left, ou seja, se você não utilizar este atributo, o texto será automaticamente alinhado à esquerda).
Sintaxe: Align="padrão de alinhamento"

3. Valign - alinha o texto verticalmente na linha ou célula. As opções são Top, Middle, Bottom e Baseline (o padrão é Middle).
Sintaxe: Valign="padrão de alinhamento"

4. Cellspacing - permite que você defina um espaçamento entre as células. O valor será aplicado em pixels.
Sintaxe: Cellspacing="número de pixels"

5. Cellpading - define o espaçamento entre as colunas e linhas da tabela. O valor também será aplicado em pixels.
Sintaxe: Cellpading="número de pixels"

6. Colspan - determina quantas colunas uma célula deve ocupar (o padrão é ocupar apenas uma coluna).
Sintaxe: Colspan="número de colunas"

7. Rowspan - determina quantas linhas da tabela uma célula deve ocupar (o padrão é ocupar apenas uma linha).
Sintaxe: Rowspan="número de linhas"

8. Nowrap - não permite que o texto em uma célula seja quebrado ao atingir o tamanho máximo da célula. Este comando prolonga o tamanho da célula para acomodar o texto.

Agora que você aprendeu os principais atributos de uma tabela ficará bem mais fácil construir uma.

.
Neste tópico você criará uma tabela	1. No Bloco de notas, crie um novo documento e digite a estrutura básica. Salve-o com o nome menu_principal.html, na pasta curso_de_html_avancado. Esta página ficará pronta para ser inserida em uma frame, recurso que você aprenderá em breve. 2. Acrescente o atributo bgcolor="#FFFFEE" dentro da tag <body> para adicionar uma cor de fundo à página. Deverá ficar assim: <body bgcolor="#FFFFEE"> 3. Pressione a tecla Enter e digite: <h1><font face="Arial" size="6">Menu Principal</font></h1>
	Você criará uma tabela com borda e alinhamento de textos ao centro. Só para lembrar, as tags que definem uma tabela são <table> e </table>. À tag <table> acrescentaremos alguns atributos. Pressione a tecla Enter; em seguida, digite: <table align="center" border="2"> Com estes comandos, a tabela ficará centralizada na página e terá uma borda padrão "2". Pressione a tecla Enter.
	Digite : <tr>. O par de tags <tr> e </tr> define uma linha na tabela. Após definir a linha, você acrescentará células à linha criada. As tags que criam células são <td> e </td>.
	Você criará uma tabela com uma lista ordenada de links.
	Pressione a tecla Enter para mudar de linha no documento do Bloco de notas. Digite a tag de célula <td>. Pressione novamente a tecla Enter.
	Digite: <ol> <li>Meu currículo <li>Links interessantes </ol> </td> Com a tag </td> você fecha a célula. A seguir, criaremos uma nova célula. Como não fechamos o comando de criação de linha, a próxima célula fará parte da mesma linha.
	Pressione a tecla Enter e digite: <td> <ol start="3"> <li>Meus hobbies <li>Fale comigo </ol> </td> </tr> </table>
	O atributo start = "3" indica que a lista será ordenada a partir do número três, ou seja, você terá uma tabela com uma linha e duas células, sendo que a lista da célula à esquerda é numerada a partir de um, enquanto a lista da célula à direita é numerada a partir de três. A tag </tr> fecha a linha da tabela, enquanto a tag </table> indica o fechamento da tabela inteira.
	Alinhe o título da página, digitando, no arquivo do Bloco de notas, a tag <center> antes da expressão "Menu Principal" e fechando o comando com a tag </center>, digitando-a após a expressão. Ficará assim: <center>Menu Principal</center>
	Salve este arquivo e o abra no navegador.
	Clique aqui para visualizar o exemplo desta página.

	Quando você cria células em uma linha, está definindo o número de colunas.

Você aprenderá o que é frame e como funciona a arquitetura de uma página com frames; conhecerá os atributos e, ao final, construirá uma página com frames.

As frames permitem que duas ou mais páginas HTML sejam visualizadas simultaneamente no browser.

A janela principal pode conter várias frames, ou molduras, de forma que certas regiões da janela do browser exibam conteúdos diferentes.

Antes de mais nada, é necessário que você conheça a arquitetura de uma página com frames.

doc1.html

doc2.html

doc1.html

frame.html

doc2.html

Para se criar uma página com duas frames, é necessário criar três arquivos HTML. No esquema acima, as páginas doc1.html e doc2.html são as páginas de conteúdo, enquanto que frame.html é a página que orienta a divisão da tela do navegador em duas janelas.

As páginas que utilizam frames usam as tags <frameset> e </frameset> no lugar das tags <body> e </body>. Dentro das tags <frameset> e </frameset> você insere informações gerais sobre as frames, como localização ou quantidades de frames na página. Para especificar as características de cada frame isoladamente, você utilizará as tags <frame> e </frame>.


As frames são janelas que podem conter páginas Web. Uma página pode conter subdivisões permitindo a visualização de páginas diferentes em cada subdivisão.	Agora que você já criou a página menu_principal.html no tópico anterior, vamos utilizá-la em nossa nova página frame.
	1. No Bloco de notas, crie um novo documento e digite a estrutura básica; porém, no lugar da tag <body>, digite a tag <frameset>. Faça o mesmo com a tag </body>: troque-a pela tag </frameset>. 2. Após isso, digite o comando cols="50%,50%" dentro da tag <frameset>. Este comando dividirá a página em duas colunas de mesmo tamanho. Os atributos que definem as linhas e colunas da frame são: a) Rows="valor". Divide a janela em frames horizontais; os valores podem ser atribuídos em porcentagem ou pixels. b) Cols="valor". Divide a janela em frames verticais; os valores podem ser atribuídos em porcentagem ou pixels. Posicione o cursor do mouse após o comando <frameset cols="50%,50%"> e pressione a tecla Enter. Digite os comandos a seguir: <frame src="menu_principal.html"> <frame src=".html" name="nome"> Estes comandos se referem a frames individuais. Salve o arquivo com o nome frame.html. A estrutura ficará assim: <html> <head> </head> <frameset cols="50%, 50%"> <frame src="menu_principal.html"> <frame src=".html" name="nome"> </frameset> </html>
	Visualize este documento em seu browser e note que a tela foi dividida ao meio, onde em seu lado esquerdo aparece o conteúdo da página menu_principal.html e no lado direito é exibida a tela padrão do browser, informando que não será possível a exibição da página, pois nenhum arquivo foi inserido no atributo src da segunda tag <frame>.
	Agora que estruturamos a página frame.html, vamos criar uma nova página e inseri-la no lado direito da frame.
	Crie a estrutura básica HTML em um novo documento no Bloco de notas e insira o seguinte texto no centro da página: Bem-vindo à minha página pessoal com frames. Para navegar, clique sobre os links relacionados na página Menu Principal. Veja como ficará: <body><center>Bem-vindo à minha página pessoal com frames. Para navegar, clique sobre os links relacionados na página Menu Principal.</center> </body>. Salve esta página como bemvindo.html.
	Abra novamente o documento frame.html no Bloco de notas. Na segunda tag <frame>, que só possui a indicação ".html" no lugar do arquivo, insira os dados para os atributos "src" e "name". Em "src", digite o nome da página que você acabou de criar: bemvindo.html e em name, digite atual.
	Salve este documento e, em seguida, o visualize em seu browser. Agora, o lado direito exibe a página bemvindo.html criada por você.
	Clique aqui para visualizar o exemplo desta página.
	Todos os links que forem criados no arquivo menu_principal.html terão seus conteúdos exibidos na frame do lado direito. Para que você possa visualizar as suas páginas corretamente, você deve criá-las antes, partindo da estrutura básica HTML e salvando com a extensão .html.
	Crie as páginas Meu currículo, Links interessantes e Meus hobbies e salve-as como curriculo.html, links.html e hobbies.html, respectivamente, na pasta curso_de_html_avancado. Como exercício, monte o conteúdo destas páginas, utilizando tudo o que aprendeu até aqui. No próximo tópico, criaremos a página Fale comigo.
	Após criar as páginas relacionadas na página Menu Principal, você deve criar os links que exibirão estas páginas na frame do lado direito.
	Abra a página menu_principal.html no Bloco de notas; insira o comando <a href="curriculo.html" target="atual"> no primeiro item da lista, antes da expressão Meu currículo. Após o texto, digite a tag de fechamento </a>. Pronto! Criamos um link para ser acessado da nossa página com frames. Quando você abrir ou atualizar a página frame.html, o item Meu currículo da tabela será exibido como link. Clicando sobre ele, o conteúdo do currículo que você criou será exibido na janela à direita.
	O atributo target informa em qual frame será exibido o conteúdo do link em que você clicou.
	No item Links interessantes, do arquivo menu_principal.html, defina o link para a página links.html. O comando ficará assim: <a href="links.html" target="atual">Links interessantes</a> Note que agora o link aponta para uma nova página, porém o target é o mesmo. Isto significa que a página links.html será aberta na mesma frame das páginas bemvindo.html ou curriculo.html.
	Salve o documento e o visualize no navegador. Você verá os dois primeiros itens da lista marcados como links. Clicando sobre eles, poderá visualizar o conteúdo de cada página na frame à direita.
	Deixamos para você definir o link para a página hobbies.html.

	Veja abaixo outros valores possíveis do atributo target: · _blank - faz com que o browser abra uma janela nova e sem título. · _self - apresenta o documento na mesma janela em que a sua URL foi chamada. · _parent - carrega o documento na janela que chamou a janela do link. · _top - carrega o link na janela principal do browser. O termo janela está sendo utilizado com o significado de região ou frame.

Você aprendeu o que é frame e como funciona a arquitetura de uma página com frames; conheceu os atributos e construiu uma página com frames.

Você aprenderá o que é um formulário e para que serve; verá, também, seus atributos e comandos.

CGI é uma abreviação de Common Gateway Interface, um protocolo que permite criar páginas Web dinâmicas baseado nas informações de um formulário HTML.

.
Em todo formulário você encontra campos para adicionar textos ou para selecionar itens. Além disso, você também encontra opções para enviar ou para limpar as informações de um formulário. Você conhecerá agora como criar estes elementos	Os elementos mais importantes são: Text boxes, Check boxes, Option (Radio) buttons, Submit e Reset.
	Estes elementos são inseridos no atributo Type da tag <input>. O comando <input> define um campo de entrada para o usuário inserir as informações. Cada campo do formulário atribui o seu conteúdo a uma variável.
	Os comandos que criam os elementos são: <input type="text"> <input type="password"> <input type="radio"> <input type="checkbox"> <imput type="reset"> <input type="submit"> <input type="button">
	Vamos criar uma página utilizando todos estes elementos. (Os comentários em preto não fazem parte do código da página. Não os digite).O título da página será: teste de formulários.O nome do arquivo será: meu_formulario.html. Crie um novo documento no Bloco de notas e digite: (somente o que está em vermelho) <html> <head> <title>teste de formulário</title> </head> <body> <form> Digite o nome: <input type="text" size="10" name="nome" maxlength="10"> O comando type= "text" faz com que o campo criado seja utilizado para a inserção de texto. O comando size define o número de caracteres que você deseja que a caixa comporte. É possível digitar textos maiores, mas você só poderá visualizar a quantidade de caracteres definida. O comando maxlength, por sua vez, define o tamanho máximo do texto em caracteres. No nosso exemplo, não será possível digitar mais do que dez caracteres. Digite a senha (até seis caracteres): <input type="password" size="6" name="senha" maxlength="6"><p> O type="password" faz com que os caracteres digitados sejam visualizados como asteriscos (). Estado civil: <input type="radio" name="estcivil" value="solteiro" checked>Solteiro(a) O type= "radio" cria um botão circular que pode ser marcado ou desmarcado. O padrão é o botão aparecer desmarcado, porém o comando checked* faz com que ele seja marcado. <input type="radio" name="estcivil" value="casado">Casado(a) O comando radio é utilizado em alternativas que comportem uma única opção correta. A partir do momento em que você escolhe uma outra alternativa, a anterior é desmarcada. <input type="radio" name="estcivil" value="divorciado">Divorciado(a) <input type="radio" name="estcivil" value="viuvo">Viúvo(a) <p>Disponibilidade de horário: <p>Manhã<input type="checkbox" name="horário" value="manha"> Utilize o comando type="checkbox" para criar alternativas que permitam a escolha de mais do que uma opção. <p>Tarde<input type= "checkbox" name= "horário" value="tarde"> <p>Noite<input type= "checkbox" name= "horário" value="noite"> <p><input type= "reset" value="Apagar dados"> <p><input type= "submit" value="Enviar dados"> Complete a estrutura da página digitando as tags de fechamento: </form> </body> </html>
	Salve esta página e a visualize em seu navegador. Preencha os campos e clique sobre os botões criados para testá-los. O nome da página é meu_formulario.html.
	O comando<input type="button"> cria um botão. Com o atributo value, você pode atribuir um texto a este botão. Aparentemente, este botão não tem utilidade, mas você pode associá-lo a scripts. Não abordaremos scripts neste curso.

	É oportuna uma explicação um pouco mais detalhada a respeito da variável Name. Name="nome": você deve especificar o nome da variável que receberá o conteúdo de um campo definido pela tag <input> Exemplo: Digite o seu cargo: <input type="text" name="cargo"> Este comando está criando um campo de texto após a frase Digite o seu cargo. As informações digitadas neste campo serão atribuídas à variável cargo. Entenda o seguinte: a palavra "cargo" não aparece na página que você está criando, mas a informação atribuída ao campo será "entendida" pelo servidor como sendo a informação do cargo da pessoa que está preenchendo o formulário.


	A página com o formulário será acessada a partir da página frame.html, no item Fale comigo da tabela.
	Crie uma nova página com uma estrutura básica HTML e salve-a como envio_de_email.html na pasta curso_de_html_avancado.
Agora que você conhece a maioria dos atributos e elementos, vamos criar um formulário que terá como função o envio de e-mail.	Vamos inserir um texto simples, apenas informando o que o usuário deve fazer na página. Após a tag <body>, digite: <center><h3>Para enviar um e-mail preencha o formulário e clique em <b>Enviar</b>.</h3></center>

	Agora começaremos a construir a estrutura do formulário. Pressione a tecla Enter e digite: <form method="post" action="mailto:nome@provedor.com.br" name="email enviado do site" enctype="text/plain"> Note que iniciamos o formulário definindo seus atributos.

	Depois de criada a estrutura inicial do formulário, vamos inserir os campos que o formarão. Começaremos com o campo Nome. Digite: <p>Nome: <input type="text" name="nome" maxlength="30" size="30"></p> Este é o primeiro campo do formulário.

	Pressione a tecla Enter para inserir o campo e-mail. Digite: <p> Digite o seu e-mail aqui: <input type="text" name="email" size="40" maxlength="30"></p>

	Pressione a tecla Enter e vamos inserir as opções de idade. É evidente que uma pessoa só pode fazer parte de uma das faixas etárias, portanto, usaremos os radio buttons. Digite: <p>Idade: <input type="radio" name="radiobutton" value="ate40">um a 40 anos <input type="radio" name="radiobutton" value="pos40">mais de 40 anos</p>
	Agora que já definimos os campos de preenchimento, devemos criar um campo para que o usuário possa digitar a mensagem.

	Pressione a tecla Enter e em seguida, digite: <center>Digite sua mensagem aqui:<br> <textarea name="textarea" cols="50" rows="15"></textarea><br> Definimos o tamanho do campo inserindo os atributos cols e rows (estes valores correspondem a caracteres).

	Está faltando criar um botão para enviar os dados do formulário. Os comandos que definem o botão são: <a href="obrigado.html"><input type="Submit" value="Enviar"></a></center> Observe que você acabou de digitar um comando que cria o botão para enviar a mensagem e este botão está envolvido por um comando de link que enviará o usuário para uma página chamada obrigado.html. Crie esta página e salve-a na pasta curso_de_html_avancado.
	Finalize o formulário digitando a tag </form> após o comando </center>. Salve o arquivo.
	O e-mail será enviado para o e-mail definido no início do formulário. Não se esqueça de alterar o e-mail seunome@provedor.com.br para o seu e-mail.
	Clique aqui para visualizar o exemplo desta página. O envio de e-mail deste exemplo está desabilitado pois o e-mail de destino é fictício. Para ele funcionar, troque a linha <form name=""> por <form method="post" action="mailto:nome@provedor.com.br" name="e-mail enviado do site" enctype="text/plain">, alterando o e-mail acima para o seu. Note que em algumas versões dos navegadores este comando poderá não funcionar. Se isto acontecer, você receberá e-mails em branco, sem nenhuma informação.

	Para receber e-mails dos usuários da sua página sem usar formulários, você pode utilizar a tag <mailto>. A sintaxe é: <a href= "mailto:seu endereço de e-mail">texto</a> Exemplo: <a href= "mailto:cicrano@provedor.com.br">Clique aqui para enviar um e-mail.</a> Este comando abrirá o programa de correio do usuário e preencherá automaticamente o campo destinado ao endereço eletrônico com o seu endereço de e-mail.


Todas as páginas do curso de HTML foram criadas. No entanto, para que você possa navegar entre elas é necessário vinculá-las.	No Bloco de notas, abra o arquivo pagina_pessoal.html. Na frase Clique aqui para acessar o meu currículo, entrar em minha página preferida ou enviar-me um e-mail e, antes da palavra aqui, digite o comando <a href= "frame.html">. Cerque a palavra aqui digitando, após ela, a tag de fechamento </a>. Clique<a href="frame.html">aqui</a>para acessar o meu currículo, entrar em minha página preferida ou enviar-me um e-mail. A página será exibida com frames. Será criado um link a partir da palavra, apontando para o arquivo frame.html. Faça o mesmo com os itens Currículo e Página do EstudeGratis. Veja como ficarão estas linhas: <li><a href= "curriculo.html">Currículo</a> <li><a href= "http://www.estudegratis.com.br">Página do EstudeGratis</a> Salve a página e a visualize no navegador.
	Para a navegação ficar mais confortável, iremos inserir links para retornar à página principal nas páginas menu_principal.html e curriculo.html. O comando é o seguinte: <p><a href="pagina_pessoal.html" target="_parent">Retornar à página principal</a></p> O atributo target="_parent" impede que a página principal seja carregada em uma das frames. Digite o comando antes da tag </body> das páginas citadas e salve os arquivos.
	Como exercício, faça o vínculo do item Fale comigo do menu principal à página envio_de_email.html, não se esquecendo de que a referida página tem de ser carregada na frame à direita (atual).

	Você acaba de concluir o curso de HTML avançado. Navegue pelas páginas criadas por você durante o curso e elabore muitas outras. Os recursos explicados neste curso são profissionais e você está apto a construir páginas de qualidade. Continue acompanhando nossos cursos. Até o próximo.

Você aprendeu o que é um formulário e para que serve; viu, também, seus atributos e comandos.

Você precisa baixar dois arquivos, necessários para acompanhar melhor o desenvolvimento do curso. São arquivos pequenos e serão transferidos rapidamente.
	Clique com o botão direito do mouse no ícone ao lado e escolha "Salvar destino como...", para fazer o download do arquivo pagina_pessoal.txt que contém os comandos HTML	Clique com o botão direito do mouse
	Clique com o botão direito do mouse no ícone ao lado e escolha "Salvar destino como..." para baixar o arquivo foto.gif, que é a ilustração utilizada na página pessoal.	Clique com o botão direito do mouse
	Em qualquer um dos links que você clicar será aberta a caixa de diálogo Download de arquivo. Acompanhe, abaixo, o procedimento correto a ser seguido.
	1. Escolha a opção Salvar este arquivo em disco e clique em . 2. Na caixa de diálogo Salvar como, localize e abra a pasta curso_de_html_avancado. Pressione o botão .

As tabelas têm estruturas parecidas com as planilhas eletrônicas, ou seja, são formadas por células. As células, por sua vez, são delimitadas por linhas e colunas.
		A célula pode conter textos, imagens, links, etc. Enfim, quase tudo o que uma página HTML pode ter.
Utilize os atributos para incrementar suas tabelas.
		As tabelas são muito utilizadas na criação de páginas Web, pois facilitam a organização de textos extensos e a inclusão de imagens.

É obrigatório salvar a página no formato HTML para que você possa visualizá-la em um browser.
	1. No documento que você acabou de criar no Bloco de notas, clique no menu e clique em . 2. Aparecerá a caixa de diálogo Salvar como. Clique no ícone Criar nova pasta. Surgirá um ícone de pasta com um campo aberto para que você dê um nome a ela. Neste campo, digite: curso_de_html_avancado (não utilize ç em nomes de pastas ou arquivos). 3. Pressione a tecla Enter para confirmar o nome. 4. Clique no botão e, no campo Nome do arquivo, digite estrutura.html. Clique no botão .

	Neste curso, os termos "página HTML" e "página Web" serão tratados como sinônimos.


	Uma janela mostrará a evolução do download. Após o término da operação, o arquivo estará disponível na pasta escolhida. Salve, desta maneira, os dois arquivos.

Você abrirá agora um exemplo de página pessoal que será incrementada nos próximos tópicos.

	1. Abra o Bloco de notas do Windows; em seguida, abra o arquivo pagina_pessoal.txt, localizado na pasta curso_de_html_avancado. 2. Clique no menu e clique em . 3. No campo Nome do arquivo da caixa de diálogo Salvar como, digite pagina_pessoal.html (não utilize acentos em nomes de arquivos ou pastas e nem deixe espaços entre as palavras). 4. Clique no botão . 5. Abra o arquivo pagina_pessoal.html no navegador para visualizá-lo.


	É necessário salvar o arquivo como .htm ou .html para abri-lo no browser.


	As tags para a criação de tabelas são <table> e </table>. Entre estes comandos entram todos os outros referentes à tabela que você está criando.

Um formulário tem como finalidade a troca de informações entre cliente e usuário. Por meio de um formulário, o usuário pode interagir com o servidor enviando informações e obtendo um retorno após o processamento destas informações. Um exemplo de formulário: agências de empregos virtuais costumam utilizá-los para que você os preencha e envie suas informações.

	Neste curso, criaremos um formulário para envio de e-mail.

Antes de começar a criar, conheça os atributos que formam e incrementam um formulário.
	As tags para criar um formulário são <form> e </form>. Os atributos do formulário são inseridos dentro da tag <form>.
	Os principais atributos da tag <form> são: Action="URL": este atributo especifica o local (URL) do servidor para que, após o preenchimento do formulário, ele seja processado pelo programa CGI localizado neste servidor. Method="Get" ou "Post": após definir para onde vai o formulário, você pode definir como ele chegará. Get envia as informações do formulário anexadas ao URL, enquanto Post envia as informações imediatamente após o URL. O padrão é POST.

É obrigatório salvar a página no formato HTML para que você possa visualizá-la em um browser.