TCC_novo

Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original

COLÉGIO TÉCNICO DE INFORMÁTICA
ALEM
“PROGRAMAÇÃO EM HTML”
Estágio realizado na:
Maxcrom Desenvolvimento Tecnológico LTDA ME.
 
 TAINAN SENEDA
RIO CLARO – SP
2011
COLÉGIO TÉCNICO DE INFORMÁTICA
ALEM
“PROGRAMAÇÃO EM HTML”
TAINAN SENEDA
Relatório apresentado como parte
dos requisitos de avaliação do
Curso Técnico em Informática
RIO CLARO – SP
2011
"Acho que certamente tivemos um marco nos anos 1990 com relação ao acesso das massas à Internet. Houve diversos fatores mágicos que se reuniram: a criação do HTML por Tim Berners-Lee, a queda do preço das comunicações, e todos os PCs lá fora que podiam acomodar o programa que a gente escolhesse."
(Bill Gates)
Agradecimentos
Aos profissionais de ensino que estiveram ao nosso lado durante todo
 o desenvolvimento do trabalho de conclusão de curso. Aos meus amigos
que não deixaram faltar alegria durante os anos em que estivemos juntos.
Aos meus pais que me deram força todos os dias para ir à luta e conquistar
mais uma vitória na minha vida. Ao meu orientador Luiz Roberto (Bikudo)
que soube conduzir o projeto de forma eficaz, não medindo esforços para com a turma. Há todos que me ajudaram. Deixo aqui meu agradecimento.
SUMÁRIO
Página
INTRODUÇÃO
CAPÍTULO 1. - Surgimento da Internet 							6
1.1 ARPANET									6
1.2 Como funciona a internet								6
1.3 Word Wide Web									6
1.4 FTP (File Transfer Protocol)							7
CAPÍTULO 2. – Linguagem HTML						 8
	2.1 Comandos HTML – Tags							8
	2.2 Estrutura básica de uma página							 8
	2.3 Tags para formatação da página							11
	2.4 Tags para formatação e estilos de texto						11
	2.5 Tags para formatação da fonte da página na internet				12
	2.6 Imagens em HTML 14
2.7 Links em HTML 16
	2.8 Âncoras 17
	2.9 Montagem de Listas 17
	2.10 Tabelas em HTML 19
2.10.1 Comandos para iniciar linhas e células dentro da tabela. 19
2.10.2 Alterando a largura e a altura da célula 21
2.10.3 Inserindo cor de fundo e separação de células 21
2.10.4 Um pouco mais de tabelas 23
2.10.5 Atributos COLSPAN e ROWSPAN 24
2.10.6 Usando tabelas como molduras 24
2.10.7 Colocando imagem de fundo nas tabelas 25
2.10.8 O atributo RULES 25
CAPÍTULO 3. – Formulários 26
3.1 Atributos para FORM 26
		3.1.1 GET 26
		3.1.2 POST 27
	3.2 INPUT	 27
	3.3 Tipos de elemento TYPE 27
		3.3.1 TYPE=”RADIO” 28
		3.3.2 TYPE=”PASSWORD” 28
		3.3.3 TYPE=”CHECKBOX” 28
		3.3.4 TYPE=”SUBMIT”							29
		3.3.5 TYPE=”RESET”							29
	3.4 TEXTAREA									29
	3.5 SELECT										30
	3.6 Exemplo de um Formulário completo						31
	3.7 Página com todos os temas abordados						33
CAPÍTULO 4. - Projetos desenvolvidos ao longo do estágio				36
CAPÍTULO 5. – Conclusão									39
 CAPÍTULO 6. – Referências Bibliográficas 					40
Introdução
1. Surgimento da Internet
A Internet surgiu da necessidade de compartilhamento de dados, uma vez que, durante o período da guerra fria, temendo ataques russos às bases militares, os Estados Unidos criaram o mecanismo de transmissão de dados conhecida como ARPANET. A idéia principal era descentralizar as informações contidas no Pentágono, caso acontecesse um ataque surpresa, ataque esse que deixaria vulnerável ao público todas as informações sigilosas.
1.1 ARPANET
A ARPANET funcionava através de um sistema conhecido como chaveamento de pacotes, que é um sistema de transmissão de dados em rede de computadores no qual as informações são divididas em pequenos pacotes, que por sua vez contêm trecho dos dados, o endereço do destinatário e informações que permitiam a remontagem da mensagem original. O ataque inimigo nunca aconteceu, mas o que o Departamento de Defesa dos Estados Unidos não sabia era que dava início ao maior sistema de comunicação e, em apenas quatro anos, atingiu 50 milhões de pessoas.
1.2 Como funciona a internet
Para que uma rede exista é preciso que muitos computadores possam ser interligados ao mesmo tempo. É preciso instalar em cada computador um dispositivo chamado placa de rede. Ela permitirá que muitos computadores sejam interligados simultaneamente, formando o que se chama de uma rede local, ou LAN (do inglês Local Area Network).
1.3 World Wide Web.
WWW é um serviço baseado em hipertextos (documentos que possuem, dentro de si, conexões com outros documentos) que permite buscar e recuperar informações distribuídas por diversos computadores da rede.
Você pode selecionar uma das palavras que aparece assinalada e ter acesso a um novo documento, associado com o termo selecionado. O novo documento, por sua vez, é outro hipertexto com novas palavras assinaladas.
Assim, como o gopher, o servidor WWW pode interligar-se com diversos outros servidores WWW, possibilitando a navegação em informações disponíveis na rede. Torna-se, assim, irrelevante para o usuário a localização física dos documentos recuperados.
O documento recuperado não precisa ser necessariamente em texto. Também pode conter outros tipos de informação, tais como imagens, gráficos e sons.
1.4 FTP (File Transfer Protocol)
Protocolo de transferência de arquivos é o serviço básico de transferências de arquivos na rede.
Com a devida permissão, é possível copiar um arquivo de um computador à distância para o seu computador ou transferir um arquivo do seu computador para um computador remoto, para tanto, você deve ter permissão de acesso ao computador remoto.
2. Linguagem HTML
HiperText Markup Language é a linguagem de programação usadas para criar uma página Web, que por sua vez será composta de textos e comandos especiais que são chamadas de Tags.
Como em qualquer outra linguagem, o programador deve escrever o código - fonte seguindo as regras de sintaxe da linguagem. Este código – fonte é posteriormente interpretado pelo browser, que se encarregará de executar os comandos ou tags do código para formatar e acessar recursos da Web.
Existem vários programas para editoração HTML, como o Microsoft Front Page, o Dreamweaver do Adobe, NVU e até mesmo o próprio Bloco de Notas (NotePad) do Windows, onde foi feito todos os exemplos de
HTML.
2.1 Comandos HTML – Tags
Os comandos em HTML são chamados de tags, e eles irão dizer ao browser como o texto, a informação e as imagens serão exibidas.
Além de formatação de texto um tag também pode dizer que na verdade um determinado pedaço do texto é um endereço para outra página Web, que será acessado ao dar um click no endereço.
Os tags são identificados por serem envolvidos pelos sinais < > ou </ >. Entre os sinais < > são especificados os TAGS propriamente ditos. No caso de tags que precisem envolver um texto, a sua finalização deverá ser feita usando a barra de divisão "/", indicando que o tag está finalizando a marcação de um texto. Exemplo:
<Nome do tag> Texto </Nome do tag>.
2.2 Estrutura básica de uma página
O tag <HTML> - que será usado em conjunto com seu tag de fechamento < / HTML> e será colocado no início e no final do documento, delimitando a área onde serão colocados os TAGS HTML.
	<HTML>
Pagina da WEB
</HTML>
O tag <HEAD> - que também possui uma tag de fechamento </HEAD>, servirá para delimitar a área do cabeçalho de sua página. O seu uso não é totalmente necessário para a página funcionar.
	<HTML>
<HEAD>
</HEAD>
</HTML>
O tag <TITLE> - é colocada dentro da tag <HEAD> e é utilizada para definir um título que será mostrado na barra de títulos do seu browser.
	<HTML>
<HEAD>
<TITLE>O TÍTULO FICA AQUI! </TITLE>
</HEAD>
</HTML>
A sua página deve ficar assim:
O tag <BODY> </BODY> - serão colocados todos os comandos, textos, imagens, tabelas e hiperlinks da sua página. Será o corpo da sua página.
Exemplo:
	<HTML>
<HEAD>
<TITLE> O TÍTULO FICA AQUI! </TITLE>
</HEAD>
<BODY>
Olá Mundo!
</BODY>
</HTML>
A página fica assim:
Dentro do campo body, você pode definir uma cor (ver 4.5 tags para formatação da fonte da página na internet) de fundo para a página (bgcolor=”cor”), assim como uma imagem que aparecerá como o fundo da página (background=”imagem.extensão”).
Exemplo: 
<BODY BGCOLOR=”#000000”>
 Ou
<BODY BACKGROUND=”imagem.extensão”>
Para salvar uma imagem para a WEB pelo Bloco de Notas, basta clica em Arquivo > Salvar Como > Definir um nome seguido da extensão obrigatória .htm ou .html (exemplo: pagina_da_web.html).
Tags para formatação da página
<H1></H1> - O tag <H> cria uma espécie de cabeçalho no documento, ela pode variar de tamanho, que vai de 1 a 6, sendo 1 o maior tamanho e 6 o menor;
<CENTER></CENTER> - O tag <CENTER> é utilizada para centralizar um texto. Exemplo: <CENTER>Essa frase está centralizada na página</CENTER>;
<P></P> - Os editores de HTML, não reconhecem o fim de um parágrafo, portanto é necessária a utilização do tag <P> para definir que ali termina o parágrafo;
<BR></BR> - Enquanto o tag <P> tem a função de determinar o fim de um parágrafo, o tag <BR> determina que a linha termina ali, e força o texto a pular para a próxima linha;
<HR></HR> - O tag <HR> cria uma linha horizontal que é utilizada para dar destaque a títulos ou para gerar a sensação de quebra entre um item de informação e outro.
2.4 Tags para formatação e estilos de texto
Assim como no editor de textos, você pode criar uma série de efeitos no texto, alterando a forma ou o tipo de fonte. Todos esses TAGS de formatação e estilo de texto devem ter seu tag de fechamento, pois senão se espalhará em toda sua página e não só onde você escolheu.
Tag <B>TEXTO </B> - o texto fica em negrito (ex: TEXTO).
Tag <I>TEXTO</I> - o texto fica em itálico (ex: TEXTO).
Tag <U>TEXTO</U> - o texto fica sublinhado (ex: TEXTO)
Existe também o tag de formatação de texto <MARQUEE> </MARQUEE> que cria um letreiro que fica passando na tela dos browsers. E o tag <BLINK> </BLINK> que cria um efeito de “pisca-pisca” no texto. Vale ressaltar que nem todos os navegadores possuem interação com esses tags, portando seu funcionamento no browser pode ser duvidoso.
2.5Tags para formatação da fonte da página na internet
Para definir as fontes que a página de internet trará consigo, é utilizado o tag <FONT> com seus completos de fonte da letra, cor e tamanho, respectivamente representado por: FACE, COLOR e SIZE.
<FONT FACE= “fonte” > o tag “font face” irá definir que tipo de fonte que seu texto irá utilizar. É sempre bom usar fontes simples, pois o outro computador que estiver acessando sua página de web precisa ter instalada a fonte que você utilizou no tag, portanto é sempre aconselhável utilizar as fontes “ARIAL” e “TIMES NEW ROMAN”.
<FONT SIZE= “1 a 9” > o tag font acompanhado de “size” definirá do tamanho da fonte, esse tamanho pode variar de 1 a 9, sendo um a menor e nove a maior. Sempre é bom seguir o padrão de hipertexto, não excedendo o tamanho da fonte de 1 a 6.
<FONT COLOR= ”sigla da cor” > o tag “font color” define a cor que a fonte aparecerá na página da web. As cores seguem o padrão RGB, sendo a cor preta padrão para os sites. Para deixar o texto com cores diferentes são utilizados os códigos referentes a cada cor de acorda com a tabela de base a seguir:
Tabela de cores padrão:
	Branco
RGB="#FFFFFF"
	Vermelho
RGB="#FF0000"
	Verde
RGB="#33ff33"
	Azul
RGB=#0000FF
	Rosa
RGB=#FF00FF
	Ciano
RGB=#00FFFF
	Preto
RGB=#000000Y
	Amarelo
RGB=#FFFF00
As cores branco, vermelho, verde, azul, rosa, ciano, preto e amarelo são cores padrão de formatação, porém existem outras tabelas de cores com diferentes tonalidades que podem ser encontradas facilmente em qualquer site de pesquisa.
Você não precisa criar um tag <FONT> toda vez que quiser selecionar uma fonte, um tamanho e uma cor pro seu texto. Os três elementos podem ser acoplados dentro do próprio tag <FONT>. Vale lembrar que como todos os tags, a <FONT> deve ser fechada após finalizar o texto editado, senão todo o resto do texto ficará com aquela formatação.
Exemplo:
	<HTML>
<HEAD>
<TITLE> O TÍTULO FICA AQUI </TITLE>
</HEAD>
<BODY BGCOLOR=”#000000”>
<FONT FACE=”Comic Sans MC” COLOR=”#FF0000” SIZE=”8”>
<B><U><I> Olá Mundo! </B></U></I>
</FONT>
</BODY> </HTML>
A página da web fica assim:
2.6 
2.6 Imagens em HTML
Incluir uma imagem na sua página é bem simples. Só se exige apenas que você tenha disponível a imagem que será exibida, e que ela esteja em um dos formatos aceitos pelo browser. O formato mais usado e aceito pela WEB é o formato GIF. Esse formato, é uma abreviação de Graphics Interchange Format e pode ser usado em diferentes plataformas de hardware , tais como o PC e o Machintosh. Se comparado com o formato padrão do Windows ( BMP – Bitmaps, também aceito pelos browsers ) , ele gera arquivos de tamanho bem menor. Outro formato bastante usado na WEB ó o JPEG (Joint Photographic Engineering Group ). Ele consegue reduzir o tamanho de uma imagem em até dez vezes. Procure não encher sua página de imagens, pois, lembre- se de que, ao usar a rede para transmitir suas páginas e suas imagens, a velocidade de transmissão é muito reduzida, girando em torno de 1 KB por segundo ou, dependendo do tráfego, ela cai ainda mais. Portanto, uma imagem de 100 KB pode levar vários minutos para ser exibida. Tente usar imagens pequenas, com a resolução de 78 pixels por polegada, que é a resolução usada no padrão VGA e SVGA da maioria dos usuários. No caso de fotos, tente usar 256 cores se a qualidade não ficar muito comprometida.
<IMG SRC> o tag img src é utilizado para inserir uma imagem no corpo do texto.
Essa imagem pode estar em qualquer lugar do computador, assim como na internet. Mas se ela não estiver no mesmo diretório que o arquivo HTML, você precisa direcionar o código para que a web busque e chegue na imagem a ser exibida. Exemplo:
<IMG SRC=”imagem.extensão*”> para quando a imagem estiver no mesmo diretório que o arquivo em HTML.
<IMG SRC=” C://.../.../.../imagem.extensão*”> para quando a imagem estiver em outro diretório e o site precise buscar essa imagem no computador.
*.extensão: é a extensão que a imagem está, podendo ser de várias extensões, porém as mais utilizadas para web são:
.jpg, .gif, .bitmap. 
Alinhamento de imagem: há vários tipos de alinhamentos de imagem. As mais relevantes são:
<IMG SRC = "imagem.GIF" ALIGN="TOP"> Alinha a imagem por cima do texto;
<IMG SRC = "imagem.GIF" ALIGN="MIDDLE"> Alinha a imagem pelo meio do texto;
<IMG SRC = "imagem.GIF" ALIGN="BOTTOM"> Alinha a imagem pelo fundo do texto;
<IMG SRC = "imagem.GIF" ALIGN="LEFT"> Alinha a imagem à esquerda da página;
<IMG SRC = "imagem.GIF" ALIGN="RIGHT">Alinha a imagem à direita da página.
Além do complemento ALIGN, podemos também utilizar o complemento ALT, que cria um pequeno texto explicativo que aparece abaixo da seta do mouse, quando este pára sobre a figura. Exemplo:
<IMG SRC = "imagem.GIF " ALIGN = "LEFT " ALT= "explicação da imagem">
Tamanho da imagem: para você definir os comprimentos de largura e altura da imagem, utiliza-se dos complementos WIDHT e HEIGHT seguidos do número de pixels que essa imagem vai ter.
Exemplo da página:
	<HTML>
<HEAD>
<TITLE>O TÍTULO FICA AQUI</TITLE>
</HEAD>
<BODY> <IMG SRC=”computador.gif” ALIGN=”RIGHT” HEIGHT=”165” WIDHT=”80”> </BODY></HTML>
A página da web deve ficar assim:
2.7 Links em HTML
As páginas de HTML estão sempre carregas de hiperlinks que te levam direto pro objeto de procura desejado, tornando a pesquisa mais fácil e simplificada para o usuário da internet. 
O uso de hipertexto também facilita a criação de documentos extensos cujas seções ou tópicos podem ser rapidamente acessados por meio dos links. Imagine que você crie uma página sobre determinado assunto em vários tópicos abordados. Assim como em um livro você cria todo o texto do documento e depois cria, no início, um sumário indicando os tópicos do documento. Se quiser acessar diretamente o texto de um tópico, basta dar um clique sobre o item do tópico no sumário e ele será imediatamente exibido.
Um link é reconhecido em uma página por estar em cor normalmente diferente do resto do texto e, ao passar com o mouse sobre esse texto o cursor muda para uma mão apontando para o link. 
Para colocar um hiperlink no código de HTML utilizamos do tag <A HREF=”link”> e do tag </A> para finalizar um link. Veja no exemplo:
<A HREF=”http://www.paginadeteste.com.br”> Clique aqui para a acessar a página de teste </A>
A página somente exibirá a frase “Clique aqui para acessar a página de teste” no navegador e, quando o usuário passar o mouse sobre o link, o cursor muda para uma mão que indica um hiperlink no texto.
2.8 Âncoras
Uma âncora é um ponto de referência ou endereço que será acessado por um link. Uma âncora é usada dentro do documento para marcar o início de uma seção do documento.
Suponha que seu texto seja muito grande, o que tornaria trabalhoso para quem estiver vendo a página conseguir se movimentar entre um tópico e outro. Então faça o seguinte: Nomeie um pedaço da sua página através do tag:
<A NAME="NOME "> Texto </A>
Depois disso escreva o pedaço que você quer associar a esse Nome. Agora crie um link para chegar até esse pedaço , usando o tag :
<A HREF="#NOME">Clique Aqui</A>
Pronto! Ao clicar na mensagem "Clique Aqui" de sua página, o usuário irá até o pedaço que você nomeou.
2.9 Montagem de Listas
	Listas já foram muito importantes na confecção de páginas HTML, mas hoje poucos sites usam este recurso.
A idéia é a de criar uma seqüência de informações de forma ordenada (numeradas uma a uma) ou desordenada (sem numeração).
Exemplos:
Lista ordenada:
1. Não diga o que fazer, mas sim como fazer
2. Faça tudo com boa vontade
3. Quando quiser ouvir respostas agradáveis, comece você dizendo coisas agradáveis
Lista desordenada:
 Acredite em você
Pare de reclamar
Aja e faça corretamente
Para criar uma lista numerada, também conhecida como ordenada, utiliza-se do tag <OL> para início e </OL> para fim. Para determinar o início de uma marcação o tag utilizado é <LI>, tanto pra listas ordenadas quanto para as desordenadas. Veja no exemplo:
<OL>
<LI> Não diga o que fazer, mas sim como fazer
<LI> Faça tudo com boa vontade
<LI> Quando quiser ouvir respostas agradáveis, comece você dizendo coisas agradáveis
</OL>
Para que a lista seja desordenada, ou seja, marcada por bolinhas ao invés de números, é utilizado o tag <UL> para iniciar uma lista e </UL> para finalizá-la. Veja o exemplo:
<UL>
<LI> Acredite em você
<LI> Pare de reclamar
<LI> Aja e faça corretamente
</UL>
Depois que você salvar a página da web, o resultado das listas deve ser:
Todos os campos das listas podem ser alinhados e formatados, ou seja, mudar cor de letra, tamanho, fonte, entre outros parâmetros.
2.10 Tabelas em HTML
As tabelas em HTML assumem muito mais do que a função de criar linhas e células para dividir dados. A maioria dos web sites atuais utilizam da tabela, pois elas proporcionam um alinhamento melhor para textos, imagens e links do que simplesmente o tag <DIV>, com esses alinhamentos pôde-se criar uma maior harmonia com o usuário, além do aspecto mais profissional. Nas células da tabela, você pode inserir desde frases curtas até figuras grandes. O tag para representar a tabela no código HTML é o <TABLE> e </TABLE>. Dentro do campo “table” você pode definir parâmetros de tamanho da tabela, bordas, cor de fundo da tabela, imagem de fundo ou até mesmo distanciamento entre as células da tabela.
2.10.1 Comandos para iniciar linhas e células dentro da tabela.
Já foi dito que para iniciar uma tabela utiliza-se do campo <TABLE>, porém para definir o início de uma linha o tag usado é o <TR> e para célula (também conhecida como coluna) <TD>. Todos são encerrados com </TR> e </TD> respectivamente.
Acompanhe um exemplo para criar uma tabela de 3x2, ou seja, 3 colunas e 2 linhas:
	<HTML>
<HEAD>
<TITLE>O TÍTULO FICA AQUI!</TITLE>
<BODY>
<TABLE BORDER=”2”>
<TR>
<TD> PRIMEIRA COLUNA</TD>
<TD>SEGUNDA COLUNA</TD> 2x para inserir 2 linhas e 3 colunas.
<TD>TERCEIRA COLUNA</TD>
</TR>
</TABLE>
<BODY>
</HTML>
A página da web deve ficar assim:
2.10.2 Alterando a largura e a altura da célula
Para alterar a largura é só acrescentar WIDHT dentro do tag <TD>. O parâmetro WIDHT recebe dois tipos de valores em porcentagem ou em pixels como no exemplo:
<TABLE BORDER=”0” > (tabela sem borda)
<TR>
<TD WIDHT= “100” > Célula com largura do tamanho de 100 pixels. </TD>
</TR>
</TABLE>	
 
 Para alterar, além da largura, a altura da célula é só acrescentar o campo HEIGHT dentro do tag <TD>. No mesmo modo que o campo parâmetro WIDHT, o HEIGHT também pode receber dois valores: em porcentagem ou em pixels. Exemplo:
<TABLE BORDER=”0” > 
<TR>
<TD HEIGHT=”50” > Célula com altura do tamanho de 50 pixels. </TD>
</TR>
</TABLE>
 Dentro do tag <TD> também podemos definir o alinhamento do conteúdo da célula no meio da mesma. Esse alinhamento é feito através do campo VALIGN=”tipo de centralização”. Exemplo:
<TD VALIGN=”MIDDLE”> Esta frase ficará no meio da célula </TD>
 Vale lembrar que você não fecha um campo com </VALIGN=”MIDDLE> pois ele está em conjunto com o campo <TD> e ambos são fechados com o </TD>.
2.10.3 Inserindo cor de fundo e separação de células
 Outro atributo que podemos ter nas tabelas é mudar a sua cor de fundo, isto se torna particularmente útil quando se quer dar destaque a uma célula em especial. Para colocar uma cor de fundo em uma célula basta acrescentar no tag <TD> o campo BGCOLOR=”a cor desejada”. Exemplo:
<TD BGCOLOR=”FF0000”> O fundo ficará vermelho </TD>
	Mais um atributo que pode ser colocado no tag <TABLE> é o CELLSPACING, que determina os espaços entre as células, sendo CELLSPACING=”0” entendido como sem espaço algum na célula. Exemplo:
<TABLE BORDER=”2” CELLSPACING=”3”></TABLE>
Ainda dentro do <TABLE> podemos utilizar o campo CELLPADDING que inclui ou exclui espaços dentro das células, deixando seus textos ou imagens menos comprimidos.
Veja um exemplo de aplicação dos três tipos de parâmetros na tabela:
	<HTML>
<HEAD>
<TITLE> O TÍTULO
FICA AQUI!</TITLE>
</HEAD>
<TABLE BORDER=”3” CELLSPACING=”0” CELLPADDING=”0”>
<TR>
<TD WIDHT=”100” HEIGHT=”50” BGCOLOR=”FF0000” VALIGN=”MIDDLE”>
PRIMEIRA CÉLULA </TD>
<TD WIDHT=”100” HEIGHT=”50” BGCOLOR=”00FF00”>
SEGUNDA CÉLULA</TD>
</TR>
<TR>
<TD>PRIMEIRA CÉLULA</TD>
<TD>SEGUNDA CÉLULA</TD>
</TR>
</BODY></HTML>
A página da web vai ficar assim:
2.10.4 Um pouco mais de tabelas
Atributo <TH> - Esse tag insere um cabeçalho dentro da célula. A única diferença do tag <TH> e o tag <TD> é que no TH o conteúdo exibido estará em negrito. Exemplo:
<TH> o texto ficará em negrito. </TH>
Atributo <CAPTION> - Exibe um texto centralizado em relação à tabela, como se fosse uma legenda. Exemplo:
<CAPTION> LEGENDA </CAPTION>
2.10.5 Atributos COLSPAN e ROWSPAN
 O atributo COLSPAN é inserido dentro do campo <TD> e este parâmetro tem a finalidade de dizer que sob a célula onde ele foi introduzido podemos ter certo número de colunas. Exemplo:
<TD COLSPAN= “2”> Exemplo de uso de colspan</TD>
Mas se quisermos definir uma única célula ocupando uma coluna inteira, utilizamos o atributo ROWSPAN. Exemplo:
<TD ROWSPAN= “2”> Exemplo de uso de rowspan</TD>
Para melhor utilizar estes parâmetros e ver como eles funcionam você deve fazer a sua própria tabela, pois somente desta forma você conseguirá fixar o uso destes parâmetros.
2.10.6 Usando tabelas como molduras
Outro uso bastante interessante nas tabelas é como moldura, geralmente de imagens. Para isso basta acrescentar no tag <TABLE BORDER> um valor grande borda. Exemplo:
<TABLE BORDER=”5”> 
<TR>
<TD><IMG SRC=”figura.extensão”></TD>
</TR>
</TABLE>
 Para usar deste argumento é sempre bom tem uma noção de aparência, pois nem sempre uma moldura na figura defini um bom layout da página.
2.10.7 Colocando imagem de fundo nas tabelas
 O que acabamos de ver é como colocar uma imagem dentro de uma célula. O próximo passo é colocar uma imagem que ocupe toda a tabela. As linhas e colunas, assim como todas as informações inseridas na tabela vão sobrepor à imagem de fundo. O método é muito semelhante ao BACKGROUND no tag <BODY>, a única mudança é que a imagem fica dentro do campo <TABLE>. Veja um exemplo:
<TABLE BACKGROUND=”imagem.extensão” BODER=”5”>
</TABLE>
2.10.8 O atributo RULES
Para escolher as linhas internas que serão mostradas dentro da tabela, usamos o atributo RULES, dentro da tag <TABLE>. Os complementos desse atributo são:
 none: nenhuma linha interna;
rows: para as linhas horizontais entre cada linha da tabela;
cols: para as linhas verticais entre cada coluna da tabela;
groups: para linhas entre grupos de colunas e seções horizontais, definidas por tags especiais como COLGROUP e THEAD;
 all: para mostrar todas as linhas entre cada coluna e linha na tabela ( default ).
Veja uma tabela com todas as linhas internas (default) :
<TABLE BORDER RULES=all>
Outro exemplo sem as linhas internas:
<TABLE BORDER RULES=none>
Outro exemplo usando o complemento ROWS:
<TABLE BORDER RULES=rows>
O último exemplo usará o complemento COLS:
<TABLE BORDER RULES=cols>
3. Formulários
A linguagem HTML também permite que o usuário interaja com o servidor, preenchendo campos, clicando em botões e passando informações.
	O elemento <FORM> é justamente o responsável por tal interação. Ele permite um ambiente agradável e familiar para coletar dados do usuário através da criação de formulários com janelas de entradas e textos e botões.
3.1 Atributos para FORM
	O elemento FORM pode conter dois atributos que determinaram para onde será mandada a entrada dos dados. São eles:
3.1.1 GET
	Os dados entrados fazem parte do URL associado a consulta enviado para o servidor e suporta até 123 caracteres.
3.1.2 POST
	É o mais utilizado, pois envia cada informação de forma separada da URL. Com esse método POST os dados entrados fazem parte do corpo da mensagem enviada para o servidor.
3.2 INPUT
	O tag <INPUT> especifica uma variedade de campos editáveis dentro de um formulário. Ele pode receber diversos atributos que definem o tipo de mecanismo de entrada (botões, janelas de texto etc.). O atributo mais importante do INPUT é o NAME. Ele associa o valor de entrada do elemento. Outro atributo importante é o TYPE. Ele determina o campo de entrada de dados. Para facilitar, veja como se usa estes atributos:
<FORM>
<INPUT TYPE= ”text” NAME= ”nome”>	 
</FORM>
	Outro comando importante é o VALUE. Ele permite acrescentar uma palavra dentro do campo que aparecerá na tela. Exemplo:
<INPUT TYPE=”text” NAME=”nome” VALUE=”Insira seu nome aqui”>
Observe como ficaria:
3.3 Tipos de elemento TYPE
Existem vários elementos para completar o TYPE. Você pode fazer um capo que aceita apenas senhas e que é representado por “***”, campos de seleção, áreas para comentários, entre outros.
3.3.1 TYPE=”RADIO”	
Quando o usuário deve escolher uma resposta única para algumas alternativas, utiliza-se do RADIO. Um exemplo típico do uso de tais botões é quando a resposta só pode ser SIM ou NÃO. Exemplo:
Você gostou desse exemplo?
<INPUT TYPE=”RADIO” NAME=”SIM”> Sim! 
<INPUT TYPE=”RADIO” NAME=”NÃO”> Não!
3.3.2 TYPE=”PASSWORD”
	Esse comando é utilizado para fazer um campo de senhas. O campo fica marcado por “***” e o que é inserido nele não fica à mostra. Exemplo:
Digite sua senha:
<INPUT TYPE= “PASSWORD” NAME=”senha” VALUE=”**********”>
3.3.3 TYPE=”CHECKBOX”
Esse comando permite que um ou mais respostas sejam selecionadas. Exemplo:
Qual é o melhor navegador?
<INPUT TYPE=”CHECKBOX” NAME=”Mozilla” VALUE=”mozilla”>Mozilla Firefox
<INPUT TYPE=”CHECKBOX” NAME=”Chrome” VALUE=”chrome”>Google Chrome
<INPUT TYPE=”CHECKBOX” NAME=”Explorer” VALUE=”explorer”>Internet Explorer
3.3.4 TYPE=”SUBMIT”
	Esse é o botão que submete a entrada dos dados, ou seja, envia-os para o script que vai tratá-los. Exemplo:
<INPUT TYPE=”SUBIMIT” VALUE=”Enviar”>
O botão fica assim:
3.3.5 TYPE=”RESET”
	Se você quiser apagar todas as informações inseridas no formulário, é só clicar no botão de reset, que apaga todos os campos que foram inseridos alguma informação. Veja um Exemplo:
<INPUT TYPE=”RESET” VALUE=” Apagar”>
O botão vai ficar assim:
3.4 TEXTAREA
	Para se limitar o tamanho do campo mostrado na tela, faz-se o uso dos atributos COLS e ROWS que representam, respectivamente, o número de colunas e de linhas que deseja mostrar ao usuário. O atributo NAME é obrigatório, e especifica o nome da variável, que será associada à entrada do usuário. O atributo VALUE não é aceito nesse tag, mas você pode colocar um texto dessa maneira:
<TEXTAREA NAME=”Comentário” COLS=”40” ROWS=”6”>Faça um comentário...</TEXTAREA> 
A caixa fica assim:
3.5 SELECT
	Permite definir uma lista de opções, com barra de rolagem ou fixa na tela do navegador. É um tag que deve ser iniciado com <SELECT> e finalizado com </SELECT>.
	Para cada opção de dentro da lista, você deve usar o tag <OPTION> seguido de VALUE e </OPTION> para finalizar aquela opção. Exemplo:
Qual meio de transporte você prefere?
<SELECT NAME=”lista” >
<OPTION VALUE=”carro”> Carro</OPTION>
<OPTION VALUE=”moto”>Moto</OPTION>
<OPTION VALUE=”caminhão”>Caminhão</OPTION>
<OPTION VALUE=”bicicleta”> Bicicleta</OPTION>
</SELECT>
Se você quiser que a lista apareça já aberta na página do navegador, basta inserir MULTIPLE depois de <SELECT>. 
	O parâmetro SELECTED indica qual das opções da lista aparecerá pré-selecionada na página.
3.6 Exemplo de um Formulário completo
	<html>
<head>
<title>Formulário</title>
</head>
<body>
<form method="post">
Nome:<input type="text" name="nome"><br><br>
Essa explicação foi útil?<br>
<input type="radio" name="sim"> Sim!<br>
<input type="radio" name="não"> Não!<br><br>
Como você classificaria o nível dessa apostila?<br>
<select name="nivel">
<option value="excelente">Excelente</option>
<option value="bom">Bom</option>
<option value="razoável">Razoável</option>
<option value="ruim">Ruim</option>
<option value="péssimo">Péssimo</option>
</select><br><br>
O que você acha que precisa ser acrescentado na apostila?<br>
<input type="checkbox" name="textos">Textos<br>
<input type="checkbox" name="imagens">Imagens<br>
<input type="checkbox" name="explicação">Explicação<br>
<input type="checkbox" name="detalhes">Detalhes<br>
<input type="checkbox" name="exemplo">Exemplos<br>
<input type="checkbox" name="nada">Nada<br><br>
<textarea name="comentário" cols="40" rows="6">Deixe um comentário ou faça uma sugestão...</textarea><br><br>
Digite sua senha: <input type="password" name="senha" value="**********"><br><br>
<input type="submit" value="Enviar">
<input type="reset" value="Apagar">
</form>
</body>
</html>
	
O formulário fica assim:
3.7 Página com todos os temas abordados
	
Confira um código utilizando todos os temas abordados durante o desenvolvimento da apostila.
	<html>
<head>
<title>O TÍTULO FICA AQUI!</title>
</head>
<body background="fundo_azul.jpg">
<h1><center><font color="#00ff00" face="Comic Sans MC" size="4">Essa frase está <u>centralizada</u> na <i>página</i>
</font></center></h1><p>
<font color="#ff0000"><b>A frase está no meio do texto, através do alinhamento MIDDLE</b></font>
<img src=”html-logo.jpg" widht="150" height="80" align="middle">
<p>
<font color="#00ff00">Exemplo com Links:<br></font>
<font size="3">Para acessar o site do Google <a href="http://www.google.com.br">clique aqui.</a></font><p>
<font color="#00ff000">Exemplos de Listas:</font>
<OL>
<LI> Não diga o que fazer, mas sim como fazer
<LI> Faça tudo com boa vontade
<LI> Quando quiser ouvir respostas agradáveis, comece você dizendo coisas agradáveis
</OL>
<UL>
<LI> Acredite em você
<LI> Pare de reclamar
<LI> Aja e faça corretamente
</UL><p>
<font color="00ff00">Exemplo de Tabelas:</font>
<TABLE BORDER="2" bordercolor="#0000ff" cellspacing="0" cellpadding="3" bgcolor="#00ffff">
<TR>
<TH>PRIMEIRA COLUNA</TH>
<TH>SEGUNDA COLUNA</TH> 
<TH>TERCEIRA COLUNA</TH>
</TR>
<TR>
<TD>PRIMEIRA COLUNA</TD>
<TD bgcolor="#ffff00">SEGUNDA COLUNA</TD> 
<TD>TERCEIRA COLUNA</TD>
</TR>
<TR>
<TD>PRIMEIRA COLUNA</TD>
<TD>SEGUNDA COLUNA</TD> 
<TD>TERCEIRA COLUNA</TD>
</TR>
</body>
</html>
	Observe que na tabela a primeira linha inteira está definida como cabeçalho, através do complemente <TH> e que na segunda linha da segunda coluna a cor de fundo da célula foi alterada para amarelo. A cor de fundo da tabela também foi alterada para ciano.
Um detalhe importante é que não importa se você escrever os tags todas em letras maiúsculas ou minúsculas, o importante é o código estar funcionando perfeitamente.
Depois de salvar os arquivos, sua página deve ficar assim:
4. Projetos desenvolvidos ao longo do estágio
[
Acesso dia 
11/11/2011
]
Esse é o layout de um dos projetos que foram desenvolvidos durante o período de estágio.
O conceito utilizado é o mini-site, novo designer, especialmente programado para anúncios e venda de produtos.
A estrutura do site é composta por tabelas, onde imagens, textos e links estão alinhados dentro das células, dando ao site um aspecto mais profissional. Todas as imagens são tratadas no Photoshop, programa de edição de imagens do Adobe. Os links estão direcionados para o site de compra e venda de produtos Mercado Livre e, o site está hospedado sob o domínio da Macrom Desenvolvimento Tecnológico LTDA ME.
Mais projetos podem ser visto em http://www.maxcrom.com.br/facas e http://www.maxcrom.com.br/montevino. 
5. Conclusão
	A internet surgiu de uma forma de proteção norte-americana, em pouco tempo tomou grande espaço no cenário mundial. Hoje, são raras as pessoas que nunca tiveram acesso a um computador ou que nunca visitaram o mundo fascinante da informática.
O HTML foi inventado a partir da necessidade de trafegar textos em rede e era de uso exclusivo das universidades. Nos tempos atuais ele passou a ser o elemento básico para criação de páginas da web.
O volume de informações no mundo do desenvolvimento Web é extremamente grande, e dificilmente uma pessoa domina todos os aspectos e particularidades. Por isso é bastante comum ouvirmos termos como “Webdesigner” e “Programador Web”. Os Webdesigners geralmente dominam a arte da criação de layouts, interfaces com o usuário, tipografia, CSS e programas de edição de imagens. Os Programadores Web por sua vez são responsáveis pela estruturação dos códigos das páginas, pela programação das Linguagens de Servidor e Navegador e pela criação de banco de dados.
	Qualquer pessoa que se interesse pelo tema e possua uma boa apostila de explicação pode escrever códigos HTML. E o trabalho desenvolvido abordou os temas e os tags básicos e principais para criação de uma página. Elementos essenciais como tabelas, formulários, edição de font, cor, imagem e links foram explicados em detalhes para proporcionar maior interatividade entre o usuário e os códigos de programação. A linguagem abordada foi de fácil compreensão para qualquer pessoa, mesmo que ela seja leiga em programar websites. 
	Com um pouco de conhecimento e muita criatividade, você pode montar grandes sites e, quem sabe hospedá-los nas internet e até mesmo ganhar dinheiro com isso. Basta ser paciente, atencioso e muito criativo. 
6. Referências Bibliográficas
http://ainanas.com/must-see/tecnologia-must-see/como-comecou-a-internet/ 
http://www.xsilverx.com/
http://internetnobrasil.com/a-historia-da-internet
https://sites.google.com/site/historiasobreossitesdebusca/www-world-wide-web
http://pt.wikipedia.org/wiki/Internet
http://www.w3schools.com/html/
http://www.codigofonte.net/
MATIAS, Carlos. Apostila de HTML (básica)
SILVA, Matheus Luis. Apostila de HTML e CSS.