Linguagem de Formatação de Hipertexto

Prévia do material em texto

HTML (HIPERTEXT MARKUP LANGUAGE)
Linguagem de Formatação de Hipertexto
	
	O HTML significa HYPERTEXT MARKUP LANGUAGE (Linguagem de Formatação de Hipretexto), que é uma linguagem usada para construção e publicação de páginas na Web.
	
	A linguagem HTML é a junção dos padrões SGML (Standard Generalized Markup Language) e HYTIME (Hypermedia/Time-based). Ele foi projetada para facilitar a criação e visualização das páginas na Internet.
	SGML- É uma linguagem que traduz os comandos para um formato de texto.
	HYTIME- É uma linguagem que se baseia no tempo para áudio e vídeo.
	Um programa HTML nada mais é que um arquivo Texto Simples, que indica o que cada elemento de texto é.
	É a linguagem mais utilizada para publicar informações na internet por meio de uma Home Page.
POR QUE HTML?
	A linguagem HTML baseia-se somente em códigos (comandos) de marcação de texto chamada Tags.
	Com a linguagem HTML é possível criar um site em qualquer editor de texto, já que é o código de linguagem responsável pala formatação e visualização da página, tendo como única exigência salvar o arquivo com extensão (.HTM ou .HTML).
PARA CRIAR UMA HOME PAGE
	Para criar uma home page é necessário um programa de Edição de Texto como por exemplo o Bloco de Notas do windows, no qual serão inseridas as linhas do programa contendo os textos e os comandos especiais (TAGS) da página.
	Ao terminar a criação de um arquivo em formato HTML, ele necessita ser executado. Para isso é necessário um programa de navegação conhecido como Browser. Existem vários programas de navegação, sendo os mais comuns: Microsoft Internet Explorer (Windows) e o Netscape.
	Para desenvolver e fazer uso de um arquivo em formato HTML, não é necessário estar conectado à Internet, ao contrário, você deve criar em seu computador e armazenar em uma pasta exclusiva (diretório) todos os arquivos da Home Page, para poder testá-los e depois transferir para o seu provedor de hospedagem e assim estar disponível para visitas.
	É importante também que se tenha algum programa de edição de Imagem, para poder criar ou alterar imagens que serão utilizadas no site. Os arquivos de desenho devem ser gravados nos formatos: GIF, JPG ou JPEG.
	O gif é o mais utilizado por ocupar menos espaço físico. Porém caso deseje apresentar imagens com maior qualidade é necessário utilizar os formatos JPG ou JPEG.
PLANEJAR HOME PAGE
	Não crie páginas muito extensas, pois geram uma série de inconveniências, como levar muito tempo para serem carregadas e formatadas na tela, podendo inclusive ter seu objetivo distorcido devido a grande quantidade de informações e cansar o usuário que na maioria das vezes desiste.
	Já as pequenas demais não conseguem transmitir a informação, e o usuário terá que abrir páginas e mais páginas para chegar ao fim do assunto e vai acabar desistindo.
	Defina tópicos importantes e crie vínculos com as suas respectivas páginas. Defina o número de páginas e os links para que você não encontre dificuldade e nem se perca.
ESTRUTURA DE UM DOCUMENTO HTML
	Quando o browser acessa um programa, ele procura os comandos especiais denominados TAGS que ficam entre os caracteres “<” (menor que) e “>” (maior que). Ao encontrar esse comando, ele o reconhecerá como um comando de linguagem que será executado, por isso não o exibirá na tela.
	Se um comando for inserido para alterar o tipo de letra e seu tamanho, toda parte do texto que vem imediatamente após o comando inicial será mostrado no Novo Formato até o browser encontrar o comando de finalização.
	Os comandos são conhecidos pelos sinais: “< >” (Inicial)
 					 “</ > (Final) 
	Assim sendo, a sintaxe básica de um comando HTML é
		<Nome da TAG>
		 Texto Marcado pela TAG
		</ Nome da TAG>
	É indiferente se o nome do comando ou seus parâmetros forem escritos em letras maiúsculas ou minúsculas, pois os browsers vão reconhecê-los.
Exemplo: <TITLE> ou <Title> ou <title> ou <tiTLe>
	Mas como outras linguagens só aceitam comandos em letras minúsculas, é melhor digitar os comandos em letras minúsculas.
ESTUTURA HIERÁRQUICA DOS COMANDOS HTML
	A linguagem HTML possui uma estrutura básica (mínima) para seus programas. Ela deve conter alguns comandos básicos que são fundamentais do programa para que um browser o interprete da maneira correta.
Exemplo:
	<HTML>
	 <HEAD>
	 <TITLE> CABEÇALHO
	 </TITLE>
 </HEAD>
						 ESTRUTURA BÁSICA
	 <BODY>
			 CORPO DO
	 </BODY> DOCUMENTO
	</HTML>
	As partes de um programa HTML são: Estrutura Principal, Cabeçalho e o Corpo do Programa, e os comandos que os representam são:
<html> .....</html> - Este comando é a estrutura principal do programa HTML, ele indica o início e o fim do documento. É obrigatório, pois informa ao browser que o documento está escrito na linguagem HTML.
<head>......</head> - Este comando marca a área de cabeçalho . É opcional, pois um programa em HTML funciona sem ele. É conveniente usá-lo, já que é dentro dele que estão contidas as informações de configuração da página e o título.
<title>.....</title> - É o único comando obrigatório da área de cabeçalho, pois contém o título do documento, que aparece na barra de título da janela do browser..
<body> .....</body> - Este bloco de comando marca o corpo do documento. Ele terá toda informação que será formatada e mostrada na tela pelo browser. É um comando obrigatório.
	Agora que já sabemos alguns passos, é hora de começarmos a criar nossas páginas e conhecer alguns comandos necessários para construção de um site.
	Exemplo de uma estrutura Simples de um documento HTML:
Abra o Programa de Texto Bloco de Notas 
 (Iniciar/Programas/Acessórios/Bloco de Notas)
Digite o comando
	<html>
 	<head>
 	 <title>
 	 Título da Página
 	 </title> 
 	</head>
 	<body>
 Corpo da Página		
	</body> 	
	</html>
Salve o arquivo com o nome exemplo.html 
Abra o diretório e clique no ícone exemplo.html.
	Note que ao salvar o arquivo com extensão.html, sua página será aberta com o ícone da internet. 
	Exemplo de como ficará sua página:
Título de Seção ou de Cabeçalho
Dentro das Tags <body> e </body> podem ser definidas seções ou cabeçalhos, por meio das Tags <hn> e </hn> para criar cabeçalho na área de visualização (área de documento do programa de navegação). 
O texto definido entre as tags <hn> e </hn> caracterizam-se por ser linhas de texto com tamanhos especiais. É usado para incluir títulos ou iniciar seções em uma página.
	Existem 6 tamanhos prefixados de cabeçalho, sendo que “n” pode variar de 1 à 6.
	À medida que o número aumenta, o texto diminui e também insere uma linha em branco antes e uma depois do texto.
	O texto será alinhado à esquerda automaticamente (default), mas pode ser modificado pelo parâmetro ALIGN, que aceita os valores:
	<hn align=left>..................</hn> Alinha o cabeçalho à esquerda (default).
	<hn align=center>……….</hn> Alinha o cabeçalho no centro.
	<hn align=right>…………</hn> Alinha o cabeçalho à direita.
	Digite e teste os tamanhos de cabeçalhos.
	
Exemplo de Cabeçalho:
	Exemplo de como ficará sua página:
Comentários
	Qualquer texto escrito dentro da limitação dos marcadores <body> e </body> será exibido em tela, a menos que seja um comentário.
	Comentários são colocados dentro da página entre os marcadores <!-- e -->, servem apenas para documentação, sendo ignorados pelo browser.
Exemplo de Comentário:
Salve com o nome comentario.html
 
Parágrafo
	Para determinar um parágrafo em HTML, utilizam-se as Tags <P> e </P>. A tag <P> é utilizada para definir o início de um novo parágrafo deixando uma linha em branco entre cada parágrafo. Pois o HTML não reconhece as quebras de linhas geradas pela tecla ENTER e os espaços por meiodo teclado.
Exemplo:
	Salve com nome de paragrafo.html
	
	O parágrafo pode ter seu alinhamento alterado, se usar o parâmetro ALIGN. Ele aceita os seguintes valores:
	<p align=left> Alinha o texto pela esquerda (default).
	<p align=center> Alinha o texto no centro.
<p align=right> Alinha o texto pela direita.
<p align=justify> Alinha o texto pelas duas margens (justificado).
Exemplo de Parágrafo Align:
	Salve com o nome de alinhando_paragrafo.html.
Quebra de Linha
	A marcação <br> faz uma quebra de linha sem acrescentar espaço extras entre as linhas. Ela apenas desloca o texto para a próxima linha.
	Salve com o nome de Exemplo quebra_linha.html
Não Quebra de Linha
	Exemplo:
Não Quebra de Linha
Exemplo:
	Salve com o nome de Exemplo não_quebra_linha.html.
Linha Horizontal
	Utiliza-se a Tag <hr>, também conhecida como linha de separação que atravessa toda a largura da página e na maioria dos browsers se apresenta sombreada
	É usada para criar uma divisão separando tópicos distintos ou entre o título e o texto. Não possui Tag de finalização.
Exemplo:
	Salve com o nome de Exemplo de linha_ horizontal.html
Linha Horizontal Modificada (Width)
	O tamanho da linha Horizontal pode ser modificado pelos parâmetros WIDTH, SIZE e ALIGN.
	WIDTH – Altera a largura horizontal ou comprimento da linha. Seus valores podem ser expressos em pixels (pontos) ou porcentagem.
Exemplo: 
	
	Salve com o nome de Exemplo width.html.
	
Linha Horizontal Modificada (Size)
SIZE – Altera a altura ou espessura da linha e seus valores são expressos em pixels.
Exemplo:
	Salve com o nome de Exemplo Size.html.
Linha Horizontal Modificada (Align)
	ALIGN – Altera o alinhamento horizontal da linha para esquerda, centro ou direita, usando LEFT, CENTER ou RIGHT, porém o alinhamento centralizado é default e não precisa defini-lo.
Exemplo:
	Salve com o nome de Exemplo align.html.
Alterando a Fonte
	Para fazer alteração das fontes de uma página, utiliza-se o comando <BASEFONT> que efetua a alteração padrão de todas as fontes de uma página.
	Os parâmetros que acompanham são: SIZE, COLOR e FACE.
	O comando <BASEFONT> não possui o comando de finalização e vem imediatamente após o comando <BODY>. O comando <BASEFONT> possui a sintaxe:
		<BASEFONT=”.....” FACE= “......” COLOR=”.....” >
Outro comando de alteração de fonte é <FONT> com ele é possível alterar o tamanho, o tipo e a cor da fonte de caracteres individualmente, com uma letra, uma palavra, uma linha ou um parágrafo.
	O parâmetro SIZE - altera o tamanho da fonte. Os valores aceitos vão de 1 até 7. A medida que o número aumenta, o texto também vai aumentando, sendo que 3 é o tamanho padrão (default). 
	Outra maneira é especificar tamanhos relativos. Se um sinal (+) de adição ou (-) de subtração vier antes do número, isto indica que o tamanho da fonte padrão (default) será aumentado ou diminuído, conforme o valor descrito.
Exemplo:
 </font>
 <p>
 
	Salve com o nome de tamanho_fontes.html.
Cor da Fonte
O parâmetro COLOR – modifica a cor do texto. Seu valor pode ser definido de duas formas, com códigos RGB ( red,green,blue) no formato hexadecimal, que representam as cores, ou pelo nome da cor em inglês.
	As cores podem ser representadas como:
	<FONT COLOR=”#FF0000”> OU <FONT COLOR=RED>
	A tabela seguinte relacionada por nomes e códigos RGB mostra as 16 cores padrões, que são reconhecidas por todos os browsers que exibem cores.
	Nome
	Código
	Nome
	Código
	White
	#FFFFFF
	Brown
	#800000 
	Yellow
	#FFFF00
	Lime
	#32CD32
	Red
	#FF0000
	Navy
	#000080 
	Black
	#000000 
	Olive
	#808000
	Blue
	#0000FF 
	Teal
	#008080 
	Cyan
	#00FFFF
	Purple
	#800080 
	Green
	#00FF00
	Silver
	#C0C0C0
	Fuchsia
	#FF00FF
	Cray
	#808080
	O parâmetro FACE - altera o tipo da fonte (tipo de letra) do texto, que pode vir entre aspas, mas também funciona sem elas.
	Ele permite que sejam especificadas varias fontes, porém elas têm que estar separadas por vírgulas. Caso o computador do usuário não possua a primeira opção, ele tentará as outras na ordem seqüencial. Se mesmo assim não encontrar nenhuma, então exibirá o texto na fonte padrão do equipamento.
	Desta forma possui a seguinte sintaxe:
	<fonte face=arial,”times new roman”,”verdana”>
Exemplo:
 Salve com nome de cores_fonte.html.
Cor de Fundo
	Para as páginas ficarem mais atraentes podemos também trocar as cores do fundo da tela.
	 É no comando <BODY> que se dará estas alterações, ele aceita os seguintes parâmetros:
BGCOLOR – determina a cor de fundo da tela.
TEXT – modifica a cor do texto.
LINK – especifica a cor do link.
ALINK - define a cor do link ativado.
VLINK – gera a cor do link visitado.
Exemplo:
 
	
 Salve com nome cor_fundo.html
Formatando Textos
	 Existe uma série de efeitos que sejam aplicados no texto por meios dos comandos de formatação de caracteres. Vamos ver algumas opções.
<B> ...........</B> - Destaca o texto em Negrito.
<I> ............</I> - Exibe o texto em fonte Itálica.
<TT>........</TT> - Formata o texto com fonte de tamanho fixo (máquina de escrever). É útil quando necessário alinhar os textos de uma coluna.
<U>.........</U> - Formata o texto como sublinhado.
<SUB>.....</SUB> - Formata o texto como subscrito.
<SUP>.....</SUP> - Formata o texto como sobrescrito.
Exemplo:
	Salve Como Exemplo Formatando Texto.htm
Deslocamento do Texto
		O comando <MARQUEE> cria um efeito de movimento no texto. Ele possui alguns parâmetros que influenciam no seu efeito final.
BGCOLOR – altera a cor de fundo do MARQUEE.
BEHAVIOR – define como o texto vai se mover na tela Ele permite os seguintes valores:
SCROLL – o texto entra da direita para esquerda ( default). Não para.
SLIDE - o texto entra da direita para esquerda e para no canto esquerdo. Para.
ALTERNATE – o texto bate e volta.
Exemplo:
	
 Salve com o nome de marquee.html
MARQEE DIRECTION
	Especifica a direção em que o texto irá se mover. Permite os valores:
<MARQUEE DIRECTION=LEFT> - o texto vai da direita para esquerda (default).
<MARQUEE DIRECTION=RIGHT> - o texto vai da esquerda para direita.
LOOP – Define o número de movimentos do texto. O valor INFINITE executa o movimento infinitamente.
 <MARQUEE LOOP=5> - o texto vai se mover 5 vezes da direita para esquerda e depois irá sumir.
Exemplo:
 
 Salve com o nome Marquee_direction.html
<MARQUEE WIDTH=50%> - O texto se move, saindo de algum lugar da moldura da tela, dependendo do valor colocado em pixels ou %.
<MARQUEE HEIGHT=40> - Determina a altura da moldura do Marquee.
Exemplo:
	
 Salve com o nome de mMarquee_alt_larg.html.
 <MARQUEE HSPACE=N> - Altera a largura das margens laterais ( o texto some na própria tela).
<MARQUEE VSPACE=N> - Altera o espaço vertical de um Marquee.
<MARQUEE SCROLLAMOUNT=N> - Altera a movimentação em miléssimos de segundo.
<MARQUEE SCROLLDELLAY=N> - Altera o tempo que vai percorrer em miléssimos de segundo.
Exemplo:
 Salve com o nome animacoes_ancora.html.
Texto Pré Formatado
	<PRE>.....</PRE>
	Permite que o texto seja exibido em tela na maneiraexata que foi digitado, respeitando espaços criados pela barra de espaços do teclado e as entradas de parágrafos feitas através da tecla ENTER.
Exemplo:
 Salve como exemplo pre.html.
Listas
	As listas criam uma estrutura padronizada para as informações que tornam as páginas mais atraentes. Existem vários tipos de listas, porém as mais usadas são:
Listas Não Ordenadas - <UL>....</UL> este comando define uma lista não ordenada. Junto com ele será usado o comando <LI>.
Exemplo:
	Salve com o nome de lista_nao_orde.htm.
Caso queira mudar a marcação de uma lista não ordenada, posso usar o comando:
 
 <UL TYPE= 									
			
Listas Ordenadas
	<OL>……..</OL> - cria uma lista ordenada e junto com ele será usado o comando <LI>.
Exemplo:
 
 Salve com o nome lista_ordenada.html
	 Caso queira mudar a marcação da lista ordenada, para Algarismo Romano podemos usar o comando:
 <OL TYPE= 	
Links
LINK nada mais é que a ligação de uma página com outra na internet. 
Para fazer esta ligação precisamos usar o comando <A>, que é a forma reduzida de âncora. 
Os lados de uma ligação de hipertexto são definidos da seguinte maneira : o lado de onde ela parte, é chamado de link e o lado de chegada chama-se âncora.
	<A> ..... </A> Este comando é usado para criar uma ligação de hipertexto (textos ligados entre si). Seus parâmetros são HREF e NAME.
	
Para um link abrir outra página, é preciso informar o endereço da página. É o comando HREF que exige o endereço de destino (URL).
Sintaxe do comando <A HREF= “URL” >TEXTO</A>.
<A HREF=”URL”> - âncora de partida, que se refere ao hipertexto a ser localizado por meio do endereço fornecido pela URL.
TEXTO - Aparece na página em destaque (sublinhado e na cor azul), indica que é um link. Quando o usuário der um clique com o ponteiro do mouse sobre ele, imediatamente será levada a página de destino (do endereço informado).
</A> - Finaliza o comando. Caso esqueça-se de fechar o link vai se estender por toda o texto.
Lembra o exercício Cores.htm. Você percebeu que algumas linhas já estão com o link feito. Só que clicando nesses textos, o seu navegador envia uma mensagem de erro. Isso ocorre porque as âncoras de chegada deles, ainda não estão feitas. Portanto vamos criar essas páginas e fazer o teste. Mas antes disso os links podem ser feitos de duas maneiras: Links Relativos / Links Absolutos.
Links Relativos
	São links que tem relação direta com o diretório raiz da Home Page, quer dizer que os arquivos estão na mesma pasta. E para acessá-lo só é preciso informar o nome do arquivo.
Exemplo:
	Abra o Exemplo cor_fundo.htm, exiba o código fonte e coloque o endereço no Link Páginas com Animações de forma que fique da seguinte maneira:
	 <A HREF=animacoes_ancora..html> 
 Salve e Atualize. 
Agora clique no link Páginas com Animações e veja a Âncora acontecer.
Links Absolutos
 Este tipo de link permite acesso a qualquer página ou arquivo existente em outro diretório ou na internet, que pode estar em qualquer parte do planeta.
 Para este tipo de acesso é preciso uma URL absoluta, que não dependa da página atual.
 Sintaxe básica: <A HREF=”http://www.xxxxxx.com.br>
Links para dentro da própria página
	Quando um documento tem tópicos importantes, ou é muito extenso dentro da mesma página, é preciso criar uma âncora para acessar esses trechos. 
	Essa âncora deve vir no início de cada assunto, para que o link de referência o localize.
	A sintaxe do link de referência para um trecho de um documento deve conter o caractere especial # (tralha), seguido do endereço (URL) da âncora de chegada.
		<A HREF=”TOPO”>VOLTAR PARA O INÍCIO</A>
Âncora de Chegada
	Name – Quando a âncora vier acompanhada deste parâmetro, na verdade ela está indicando o ponto de chegada (URL que foi referenciada no link), que é o endereço de um trecho (tópico) de um documento.
Sintaxe do documento:
 <A NAME=”URL”>..............</A>
<A NAME=”URL”> - Âncora de chegada. Colocada em um lugar estratégico no texto, para indicar onde o assunto inicia. É conhecida pelo link por ter a mesma URL. Será conhecida imediatamente pelo sistema e apresentada pelo browser.
Exemplo de âncora de chegada: <A NAME=”TOPO”>
Link especial: "mailto"
	Existe um tipo de link chamado de "mailto:". Se, quando o link for definido, o protocolo utilizado for "mailto:" ao invés de "http://", o link abrirá uma janela especial para que se possa enviar um e-mail (correio eletrônico) para o endereço específico.
Exemplo:
Mande um<a href="mailto:catarina.barbosa@docente.estacio.br">e-mail</a>paraProfª Catarina Peres.
Salve com nome de e-mail.html
Imagem
	É muito simples inserir imagens em uma página HTML. Sendo assim sua página ganhará certa estética. Porém tomem muito cuidado na hora de inserir imagens, pois elas influenciam e muito no carregamento da sua página.
Os formatos aceitos são:
BMP – não é aceito por ser muito grande, leva muito tempo para carregar.
GIF – É o mais aceito pela maioria dos browsers.
JPG – Tem boa qualidade de imagem, seu tamanho é menor que o gif, por isso vem tomando seu lugar.
JPEG – Não é aceito pela maioria dos browsers e seu uso pode prejudicar o resultado final da página.
<IMG> - É a tag da linguagem HTML que permite incluir uma imagem na página, mas precisa do parâmetro SRC para identificar o local em que a imagem se encontra. 
<IMG SRC=”imagem”> - A palavra SRC é a abreviação de SOURCE que em inglês significa “origem”. Daí a necessidade de se colocar o caminho correto do arquivo.
Se a imagem estiver no mesmo diretório, basta usar o seu nome; caso contrário, é preciso usar o endereço completo.
Exemplo:
<IMG SRC=”gato.gif”> - a figura está no mesmo diretório.
<IMG SRC=”imagens/gato.gif”> - a figura está dentro da pasta imagens.
<IMG SRC=”http://www.imagens.com.br/imagens/gato.gif”> - a figura está na internet no diretório imagens.
 Salve com o nome de imagem.html
Parâmetros de Imagem
		
		O comando <IMG> trabalha com alguns parâmetros opcionais, que melhoram em muito a estética da imagem na página. Esses parâmetros são:
Border – altera a largura da borda da imagem. Seus valores são expressos em pixels. Caso você precise retirar a borda, use o valor zero.
	Broder=10 ou Border=0
Exemplo:
	Salve com o nome borda.html.
WIDTH – Permite alterar a largura da Imagem, seus valores são expressos em pixels ou porcentagem.
HEIGHT - Permite alterar a altura da Imagem, seus valores são expressos em pixels ou porcentagem.
	Salve como nome Tamanho_Imagem.html
HSPACE – Cria um espaço em branco nas laterais (esquerda e direita) da imagem, evitando assim que o texto fique encostado na figura, seus valores podem ser em pixels ou porcentagem.
VSPACE - Cria um espaço em branco na parte superior e inferior da imagem, evitando assim que o texto fique encostado na figura, seus valores podem ser em pixels ou porcentagem.
ALT – Usado para inserir um texto, que aparece quando o cursor do mouse aponta a figura. Deve vir entre aspas (“ “). 
Exemplo:
 Salve com o nome margens.html
ALING – Permite o alinhamento entre a imagem e o texto da página.
LEFT – Alinha a imagem à esquerda do texto.
RIGHT – Alinha a imagem à direita do texto.
TOP – Alinha a parte superior da imagem com a linha do texto.
MIDDLE – Alinha o meioda imagem com a linha do texto.
BOTTOM – Alinha a parte inferior da imagem coma linha do texto.
Exemplo:
	
		Salve com o nome alinhamento_esq.html
	Troque a linha do comando da Imagem para RIGHT e veja a diferente posição da figura com o texto.
<img src="gato.gif" border=1 width=200 height=200 align=right hspace=20>
TOP/MIDDLE/BOTTOM
	Salve imagem_alinhada.html
Colocando uma Imagem no Fundo da Página
	Para se colocar uma imagem como fundo de página basta colocar dentro do comando BODY o parâmetro <BACKGROUND>, recebendo o nome da imagem, assim a imagem será repetida por toda a página.
Exemplo:
	Salve com o nome imagem_fundo.html
Imagens com Links
 	Para usar uma imagem como link, é só definir o comando para criar imagens entre as tags de início e fim de criação de link.
Exemplo:
	Salve Imagem link.html
Tabela
	Permite organizar as informações de maneira padronizada. Nela podem ser inseridos textos, imagens, links, até tabelas dentro de tabelas e ainda incluir bordas e definir mais de uma coluna.
	Uma tabela é formada por um conjunto de linhas e colunas, e o encontro delas é denominado célula.
	Para se definir uma tabela utilizam a Tag <TABLE>.....</TABLE>, as quais delimitam o início e o fim de uma tabela.Este comando tem como padrão (default) criar uma tabela sem bordas. 
	<TABLE> Indica o início da tabela
		<TR> Indica o início de uma nova linha na tabela
		<TD> Indica uma coluna na tabela
 		</TD> Indica o final daquela coluna na tabela
 		</TR> Indica o final da linha na tabela
	</TABLE> Indica o final da Tabela
<TH>....</TH>- Comando que define o conteúdo da célula como título. O texto será formatado em Negrito e Centralizado.
	<caption>...</caption> - Define um título (legenda) para a tabela.
Exemplo:
	
	Salve como nome tabela.html
Trabalhando com Parâmetros
	Caso queira colocar borda na tabela é preciso colocar o atributo BORDER.
 <TABLE BORDER=20> Borda de fora fica mais grossa
 <TABLE BORDERCOLOR=RED> Altera a cor da borda
 
<TABLE ALIGN = 
		 
<TABLE WIDTH=> - Define a LARGURA da tabela em relação a largura da tela. Seus valores podem ser expressos em pixels ou em porcentagem da tela.
<TABLE HEIGHT=> - Define a ALTURA da tabela. Seus valores podem ser expressos em pixels ou em porcentagem da tela.
Exemplo:
 Utilize o exemplo Tabela.htm e faça as alterações.
	<table border=10 bordercolor=red align=center width=300 height=200>
	Salve como Exemplo tabela_mod.html
<TABLE BGCOLOR=BLUE> - Determina a cor de fundo na tabela.
<TABLE BACKGROUND=”NOME DA IMAGEM.EXTENSÂO”> - Insere uma imagem como fundo na tabela.
 Salve como tabela_imagem_fundo.html
<TABLE CELLSPACING=> - Cria o espaço entre as células, seu valor é expresso em pixels.
	Utilize o exemplo Tabela Mod.htm e mude a linha para:
	<table align=center border=2 background="textura.jpg" bordercolor=blue height=30% width=75% cellspacing=15>
	
 Salve como cellspacing.html.
<TABLE CELLPADDING=> - Cria as margens dentro das células entre a borda e seu conteúdo.
	<table align=center border=2 background="textura.jpg" bordercolor=blue height=30% width=75% cellpadding=15>
 Salve como cellpadding.html
Mesclando Células
	Existem casos de layout da página onde algumas células de uma tabela precisam ser unidas, outras quebradas ao meio. Para isso utiliza-se o atributo SPAN, sendo que para unir linhas utiliza-se ROWSPAN e para unir colunas utiliza-se COLSPAN.
Exemplo ROWSPAN:
 Salve como exemplo rowspan.html
Exemplo COLSPAN:
 
	Salve como Exemplo colspan.html.
Atributo: RULES
	Indicam quais linhas internas a tabela deve apresentar. 
	Pode assumir os valores: "ROWS (somente as linhas horizontais)", "COLS (somente as linhas verticais)", "NONE (nenhuma)" e "ALL (todas)".
Exemplo:
<table border bgcolor="yellow" rules="rows">
Atributo: FRAME
	Indica quais bordas externas a tabela deve apresentar. 
	Pode assumir os valores: "VOID (nenhuma)", "ABOVE (topo da tabela)", "BELOW (base da tabela)", "HSIDES (topo e base da tabela)", "LHS (lado direito da tabela)", "VSIDES (esquerda e direita da tabela)" e "BOX (todas)".
Exemplo:
<table border bgcolor="yellow" frame="below">
	Todos os atributos de uma tabela são opcionais. Uma tabela padrão não possui bordas e sua altura e largura são as mínimas necessárias para suportar seu conteúdo.
Formulários
	Formulários são de grande utilidade para a Web, pois permite a interatividade entre o usuário, a pessoa que visualiza as páginas e o Servidor Web. Assim, através da Web, se pode ler e gravar informações em Banco de Dados, gerando enormes possibilidades de uso para a Internet, como por exemplo, a de um serviço de venda. Formulários também podem ser gerados para a navegação entre páginas e Sites na
Web.
	Um formulário HTML é uma página web que contém além de textos, elementos especiais chamados controles, representados por caixas de checagem, botões tipo rádio, caixa de seleção, campos de textos, etc.
	O usuário preenche os campos do formulário, e em seguida todas as informações fornecidas são enviadas a um programa para processar esses dados.
	O marcador responsável para o formulário é o:
 	<FORM>.......................</FORM>
Exemplo:
O Marcador FORM e seus principais Atributos
<FORM NAME=”NOME DO FORMULÁRIO” METHOD=”VALOR ACTION=”TRATADOR DO FORMULÁRIO>
	Todos os elementos do formulário devem vir entre aspas.
NAME – Nome do formulário usado para validação de dados.
METHOD – Método que define como os dados serão transmitidos para o programa que irá processá-lo. Os métodos têm os valores:
 GET-Indica como os dados serão passados pelo script.
 POST - Envia os dados para entrada padrão do sistema operacional.
ACTION – Indica o endereço do programa que receberá os dados do formulário.
Exemplo: 
 <FORM NAME=MALA_DIRETA” METHOD=”POST” ACTION=”PROGRAMA.ASP”>
Marcadores Relativos ao campo de um Formulário
<INPUT TYPE=”TIPO” NAME=”NOME” VALUE=”VALOR” SIZE=”TAMANHO EM PIXELS” MAXLENGTH=”TAMANHO MÁXIMO EM PIXELS”>
INPUT – Cria um campo de entrada de dados.
TYPE – Tipo de elemento a ser inserido no formulário.
NAME – Nome do elemento.
VALUE – Valor que pode ser pré definido para o campo.
MAXLENGTH – Comprimento máximo de caracteres do nome a ser digitado.
CHECKED – Em caso de caixa de checagem, pré-define como checada.
SIZE – Tamanho do campo.
Caixa de Texto
<INPUT TYPE=”TEXT” NAME=... VALUE=... SIZE=... MAXLENGTH=...>
	O valor TEXT (texto) no atributo TYPE indica que o campo será de texto, ou seja, um campo onde o usuário poderá entrar com dados.
Exemplo:
	
	Salve com nome caixa_texto.html
Senha
<INPUT TYPE=”PASSWORD” NAME=... VALUE=... SIZE=... MAXLENGTH=...>
	Para o valor PASSWORD (senha) no atributo TYPE aplicam-se todos os atributos do tipo TEXT exceto que todas as letras digitadas aparecem como um asterístico “*”.
Exemplo:
	Salve com nome password.html
Caixa De Texto Com Várias Linhas
<TEXTAREA NAME=”NOME” ROWS=”NÚMERO DE LINHAS” COLS=”NÚMERO DE COLUNAS”>.................</TEXTAREA>
	O marcador TEXTAREA (área de texto), permite definir um campo de texto9 com várias linhas.
ROWS: Define o número de linhas da caixa de texto.
COLS: Define quantos caracteres (colunas) cada linha possui.
NAME: Define o nome da caixa de texto.
Exemplo:
Caixa de Combinação (Combo Box)
<SELECT NAME=”NOME” SIZE=”QUANTIDADE DE OPÇÕES VISÍVEIS”>
	<OPTIONVALUE=”VALOR”>TEXTO A APARECER</OPTION>
	<OPTION VALUE=”VALOR”>TEXTO A APARECER</OPTION>
</SELECT>
	O marcador SELECT permite a criação de uma lista de opções a serem escolhidas pelo usuário.
NAME: Nome da lista de opções.
SIZE: Define o número de opções a serem exibidas simultaneamente na tela. Se o valor omitido ou igual a 1, é exibida uma opção por vez.
OPTION: Define cada opção a ser exibida pela lista.
VALUE: Determina o valor de cada opção.
Exemplo:
	
Caixa de Listagem (List Box)
	Permite que na tela apareça uma lista com mais de uma opção, embora o usuário possa escolher somente uma.
	A criação da caixa de listagem é idêntica a caixa de combinação, com exceção do atributo SIZE que deve ter o valor maior que um, determinando o número de opções a aparecerem em tela.
	Então mude o size para size=”6”, e veja que agora aparecerão as 6 opções para que seja selecionada apenas 1.	
	
Caixa de Listagem com Múltipla Seleção
	Permite que na tela apareça uma lista com mais de uma opção, podendo o usuário escolher mais de uma.
	A criação de caixa de listagem com múltipla seleção é idêntica à criação de caixa de listagem, com exceção do atributo MULTIPLE que deve ser acrescido.
	Acrescente o atributo MULTIPLE no comando SELECT.
Exemplo:
<SELECT NAME="INTERESSE" SIZE="6" MULTIPLE>
	Não se esqueça de pressionar a tecla “SHIFT ou CTRL + MOUSE” para selecionar as opções. 
Caixa de Checagem
<INPUT TYPE=”CHECKBOX” NAME=”NOME DA CAIXA DE CHECAGEM” VALUE=”VALOR DO CAMPO” CHECKED=”CAIXA SELECIONADA”>
NAME: Nome da caixa de checagem.
VALUE: Determina o valor do campo, que será passado ao programa interpretador do formulário.
CHECKED: Atributo opcional que pode ser utilizado quando se deseja que a opção já apareça selecionada na página.
Exemplo: 
	Caso queira que alguma caixa de checagem esteja selecionada, basta acrescentar o atributo CHECKED dentro de alguma linha.
Exemplo:
<INPUT TYPE=CHECKBOX NAME="CAIXA5" VALUE="TODOS" CHECKED >
Botão Escolha
	O valor RADIO no atributo TYPE define um botão. Na prática os botões de escolha , parecem em grupos e podem permitir que apenas uma opção seja escolhida dentre as existentes (exclusão mútua).
<INPUT TYPE=RADIO NAME= “NOME DO BOTÃO” VALUE=”VALOR DO CAMPO” CHECKED=”OPÇÃO APAREÇA SELECIONADA”>
NAME: Define o nome do botão de escolha. No caso de botões de escolha com exclusão mútua, cada botão do grupo deverá utilizar um mesmo nome.
VALUE: Contém o valor do campo, que será passado ao grupo interpretador do formulário.
CHECKED: Atributo opcional que pode ser utilizado quando se deseja que a opção já apareça selecionada na página.
Exemplo sem exclusão mútua:
Exemplo com exclusão mútua:
Botão Limpa / Cancela
<INPUT TYPE=”RESET” VALUE=”TEXTO QUE APARECE NO BOTÃO”>
	O valor RESET no atributo TYPE define um botão que limpa todos os campos, devolvendo os mesmos valores de quando a página foi carregada.
	No atributo VALUE, pode-se definir o que estará escrito no botão. Caso nenhum valor seja definido, aparecerá somente “RESET”.
Exemplo:
Botão Submit
	<INPUT TYPE=”SUBMIT NAME”NOME “ RESET” VALUE=”TEXTO QUE APARECE NO BOTÃO”>
	O valor SUBMIT no atributo TYPE define um botão que aciona o envio das informações preenchidas no formulário ao programa interpretador.
	No atributo VALUE, defini o que estará escrito no botão. Caso nenhum valor seja definido, aparecerá somente “SUBMIT”.
Exemplo:
Frames
	O FRAME divide a janela do BROWSER em várias áreas, cada uma podendo exibir uma página diferente.
	A utilização de FRAMES na linguagem HTML é feita através do par de marcadores:
<FRAMESET>......</FRAMESET>
	A página onde o FRAMESET é codificado não leva o marcador BODY e tem a finalidade de definir o layout apresentado pelos frames.
	Em um FRAMESET os atributos ROWS e COLS definem, respectivamente, o número de subespaços horizontais e verticais que podem ser utilizados para criar um efeito de grade.
	Se o atributo ROWS não é utilizado cada coluna passa a tomar todo o comprimento da página ao passo que o atributo COLS não for utilizado, cada linha estende-se ocupando a largura total da página.
	Se nem o atributo ROWS nem o atributo COLS forem setados, o frame ocupará exatamente todo o tamanho da página.
	FRAMES são criados da esquerda para a direita, em se tratando de colunas, e de cima para baixo em se tratando de linhas. Quando os dois atributos são especificados, repartições são criadas da esquerda para a direita na principal linha, da esquerda para a direita na segunda linha, etc.
Principais atributos do marcador <FRAMESET>
<FRAMESET ROWS=”área”>
	Especifica a disposição dos frames horizontais. Os valores são separados por vírgulas e podem ser dados em pixel, percentagem ou comprimentos relativos. O valor padrão é 100%, representando uma linha.
<FRAMESET COLS= “valor”>
	Especifica a disposição dos frames verticais. Os valores são separados por vírgulas e podem ser dados em pixel, percentagem ou comprimentos relativos. O valor padrão é 100%, representando uma coluna.
<FRAMESET framespacing="valor">
	Especifica o espaçamento entre frames. O valor é dado em pixels e depende do browser utilizado. O valor possibilita que não haja espaço entre os frames. 
Exemplos: 
 		O exemplo a seguir divide a tela em duas porções verticais, ocupando cada uma 50% do espaço. 
 
	Não se esqueça de criar as páginas p1.html e p2.html, para que apareçam no FRAME.
O marcador <FRAME>
	 O marcador <FRAME> não necessita ser fechado pelo marcador </FRAME> e deve ser utilizado dentro de eliminações do marcador <FRAMESET>. 
 	O número de marcadores <FRAME> vai depender do número de linhas e colunas especificado pelo FRAMESET.
	Em um FRAMESET que defina 2 colunas, serão necessários dois marcadores <FRAME>, cada um apontando para uma página a ser exibida na área dividida da janela. 
Principais atributos do marcador <FRAME>
<FRAME SRC= “página_destino">
	Especifica a página a ser exibida pelo frame.
Exemplo: 
 <frame src= “topicos.html">
<FRAME NAME="nome_do_frame">
	Especifica o nome do frame. Este atributo tem grande importância pelo fato de toda a navegação entre frames está baseada no nome de cada frame. 	. 
Exemplo: 
	<frame src="topicos.htm" name="principal">
<FRAME NORESIZE>
	Quando utilizado, este atributo booleano não permite que na janela do navegador a área do frame seja redimensionada.
Exemplo: 
	<frame src="topicos.htm" NORESIZE>
<FRAME SCROLLlNG="valor">
	Determina a presença ou ausência de barras de rolagem junto aquela área do FRAMESET. Os valores podem ser: auto: oferece barras de rol agem caso sejam necessárias. Valor padrão: 
Yes: sempre oferece barras de rol agem para este frame. 
No: não oferece barras de rolagem para este frame, mesmo que sejam necessárias. 
 
Exemplo: 
	<frame src="topicos.htm" SCROLLING="auto"> 
<FRAME FRAMEBORDER="valor">
	Desenha um separador entre o frame e cada frame adjunto. Os valores podem ser: 
0 (zero) ou "no": não desenha um separador entre este frame e cada frame adjunto
1 ou "Yes": desenha um separador entre o frame e cada frame adjunto. Valor padrão
Exemplo: 
	<frame src="topicos.htm" FRAMEBORDER="0"> 
<FRAME MARGINWIDTH="valor_em_pixels"> 
	Especifica a quantidade de espaço a ser deixado entre o conteúdo do frame e suas margens esquerdas e direitas o valor precisa ser maior ou igual a 1 pixel e o padrão depende do browser utilizado.
Exemplo:
<frame src="topicos.htm”MARGINWIDTH="1"> 
<FRAME MARGINHEIGHT="valor_em_pixels"> 
	Especifica a quantidade de espaço a ser deixado entre o conteúdo do frame e suas margens superior e inferior o valorprecisa ser maior ou igual a 1 pixel e o padrão depende do browser utilizado.
Exemplo:
<frame src="topicos.htm”MARGINHEIGHT="3"> 
Definindo páginas alternativas para browsers que não reconheçam FRAMES <NOFRAMES> Conteúdo a ser exibido </NOFRAMES>
	O marcador <NOFRAMES> determina quaJ conteúdo será exibido em caso de browsers que não suporteI framesets ou que não estejam configurados para exibi-Jos. 
É utilizado dentro das delimitações do marcador <FRAMESET>. 
Exemplo: 
Frames aninhados
	FRAMESETS podem encontrar-se aninhados em qualquer nível. 
 O exemplo a seguir traz um FRAMESET que divide o espaço disponível em três colunas iguais. No espaço reservado da segunda coluna a área é dividida em duas linhas de alturas diferentes.
Exemplo:
Controlando a área de destino das páginas exibidas em um frameset
	Uma vez que a janela do browser foi dividida em várias áreas, como conseguir que determinada página apareça em uma determinada região do frameset? 
	Este direcionamento de links para determinadas áreas de um frameset é feito através do atributo TARGET, presente no marcador âncora <A HREF></A>. 
<A HREF=”NOME DA PÁGINA" TARGET=”NOME DO FRAME">ORIGEM DO LINK</A> 
Exemplo:
Exemplo de uso de links com FRAMES
Frame da direita recebendo o destino do link
	Se na página da esquerda o link não tivesse com o atributo TARGET direcionado para a região ao lado (chamado DIREITA no FRAMESET), ao clicar sobre o link da página, seria aberta a página em cima dela mesma.
Inserindo Som
	Os tipos de formato de som, mais conhecidos na internet são:
WAV – Permite o uso de instrumentos e voz. Tem som de boa qualidade, porém seu tamanho é grande. Ele é padrão do Windows.
AU – Aceita uso de instrumento e voz.É facilmente encontrado na web e compatível com a maioria dos browsers. É padrão da plataforma Unix.
MIDI – Usado para instrumentos musicais. Por ser produzido por um instrumento eletrônico, não permite o uso de voz. Tem boa qualidade de som e seu tamanho é reduzido. Muito encontrado na internet.
MP3 – São os mais encontrados e difundidos na web, devido a sua excelente qualidade e pequeno tamanho. Aceita o uso de instrumento e voz.
	Para inserir som no fundo da página usamos: <BGSOUND>
	Os parâmetros que fazem parte desse comando são:
SRC: Indica o endereço (URL) do arquivo de som
LOOP: Permite definir quantas vezes o arquivo será lido. O padrão é tocar a música uma única vez. Seus valores são em pixels, mas aceita também o valor INFINITE.
<BGSOUND=”NOME DA MÚSICA..MP3” LOOP=INFINITE>
Este comando deve ser incluído logo após a tag <BODY>
Para interromper a música deve pressionar a tecla ESC.
<EMBED> - Este comando também inclui um som de fundo. Ele inclui um painel de controle de som exatamente onde foi, incluído o comando na página. Isso dará ao usuário a possibilidade de interferir no som (dar, pausar, parar ou reiniciar), sempre que desejar.
<EMBED> Permite alguns parâmetros que podem alterá-lo. Os parâmetros são:
LOOP – Aqui ele permite somente duas condições para apresentar a música.
FALSE – Toca uma única vez. Esse é o padrão.
TRUE – Esse valor, o arquivo vai tocar sem parar.
HIDDEN – Este parâmetro permitirá ocultar ou não o controlador de som. Seus valores são:
FALSE – O controlador permanecerá visível, sendo ele o default
TRUE – Nesse caso o controlador ficará oculto. 
WIDHT – Modifica a largura do controlador. Aceita valores em pixels.
HEIGHT - Modifica a altura do controlador. Aceita valores em pixels.
	Caso os parâmetros WIDTH e HEIGTH tenham valor zero (0), o controlador de som desaparecerá.
 
Título da Página
<html>
 <head>
 <title>
 Exemplo de Cabeçalhos
 </title> 
 </head>
 <body>
 Na medida em que o valor do cabeçalho aumenta, o texto diminui.		
	 <h1>
		Cabeçalho H1
	 </h1>	 
 <h2>
		Cabeçalho H2
	 </h2>
	 <h3>
		Cabeçalho H3
	 </h3>
	 <h4>
		Cabeçalho H4
	 </h4>
	 <h5>
		Cabeçalho H5
	 </h5>
	 <H6>
		Cabeçalho H6
	 </h6>
 <h2 align=left>
	 Título alinhado à esquerda
	 </h2>
 <h2 align=center> 
 Título alinhado no centro
 </h2>
 <h2 align=right>
 Título alinhado à direita 
	 </h2>
 </body> 	
</html>
Salve o arquivo com o nome de Cabeçalho.htm.
<html>
<head>
<title>Comentário</title>
</head>
<body>
 Testando o texto.<br >
 Agora para ver se esta frase aparece.<br >
 <!--Não quero que este comentário apareça. Estou apenas comentando. -->
 Esta linha pode aparecer.
</body>
</html>
<html>
 <head>
	<title>
	 Exemplo Parágrafo
	</title>
 </head>
 <body>
	<h1> Utilizando P</h1>
 Vamos separar esta sentença com marcação de parágrafo.
	<p>
	 Para verificar a diferença.
	</p>
 </body>
</html> 
Barra de rolagem ativada automaticamente
<html>
<head>
<title>Alinhamento de Parágrafo</title>
</head>
	<body>
	 <h1>
 <p align=left>Utilizando P</p>
	 <p align=center>Utilizando P</p>
	 <p align=right>Utilizando P</p>
 </h1>
</body>
<html>
<html>
 <head>
 <title>
 Exemplo de Quebra de Linha
 </title> 
 </head>
 <body>
	<h1>Utilizando BR</h1>
	Diferença quando separamos duas linhas utilizando<br>
	a marcação de quebra de linha<br>
	Realmente passa a existir na linha debaixo<br>
	Quebrando as linhas<br>
	Deu para notar?
 </body>
</html>	 
<html>
 <head>
 <title>
 Exemplo de Não Quebra de Linha
 </title> 
 </head>
 <body>
	<nobr>
	A tag NOBR é usada quando um texto não puder ser quebrado, ficando o texto na mesma linha, e se exceder à tela o browser ativa automaticamente a barra de rolagem.
	</nobr>
 </body>
</html>
<html>
 <head>
 <title>
 Exemplo de Linha Horizontal
 </title>
 </head>
 <body>
 <h1 align=center>
 Linha Horizontal
 </h1>
 <hr>
 </body>
</html>
<html>
 <head>
 <title>
 Exemplo de Linha Horizontal Modificada Size
 <title>
 </head> 
 <body>
 <h2 align=center>
 Linha Horizontal Modificada
 </h2>
 <h4>
	 Linha Horizontal com altura igual a 15 pixels (size=15)
 </h4>
 <hr color=blue size=15>
 <h4>
	 Linha Horizontal com altura igual a 30 pixels (size=30)
 </h4>
 <hr color=yellow size=30>
 <h4>
	 Linha Horizontal com altura igual a 25 pixels e largura igual a 5 pixels (size=25 e width=5)
 </h4>
	<hr color=red size=25 e width=5>
 <h4>
	 Linha Horizontal com altura igual a 30 pixels e largura igual a 15 pixels (size=30 e width=15)
 </h4>
	<hr color=green size=30 e width=15>
 </body>
</html>
 <html>
 <head>
 <title>
 Exemplo de Linha Horizontal Modificada Width
 </title>
 </head> 
 <body>
 <h2 align=center>
 Linha Horizontal Modificada
 </h2>
 <h4>
	 Linha Horizontal com largura igual a 250 pixels (WIDTH=250)
 </h4>
 <hr color=blue width=250>
 <h4>
	 Linha Horizontal com largura igual a 50% por cento da tela (WIDTH=50%)
 </h4>
	<hr color=red width=50%>
 <h4>
	 Linha Horizontal com largura igual a 80% por cento da tela (WIDTH=80%)
 </h4>
	<hr color=green width=80%>
 </body>
</html>
<html>
 <head>
 <title>
 cursos 
 </title>
 </head> 
 <body>
 <h2 align=center>
 Conheça os Nossos Cursos:</h2>
 <h4 align=center> 
 Curso de Programação para Internet
 </h4> 
 <hr color=green width=50%>
 <h4 align=left>
 Operador deSoftware</h4>
 <hr color=blue width=50% size=5 align=left>
 <h4 align=right>
 Web Designer
 </h4>
 <hr color=yellow width=50% size=4 align=right> 
 <h4 align=center>
 Capacitação Profissional em HTML
 </h4>
 <hr color=red width=50% size=3 align=center> 	 
 </body>
</html>
<html>
 <head>
 <title>
 Exemplo de Tamanho de Fontes
 </title>
 </head>
 <body>
 <font size=7>
 Tamanho da Fonte = 7
 </font>
	<br>
 <font size=6>
 Tamanho da Fonte = 6
 </font>
 <p> 
 <font size=5>
 Tamanho da Fonte = 5
 </font>
 <p> 
 <font size=4>
 Tamanho da Fonte = 4
 </font>
 <p> 
 <font size=3>
 Tamanho da Fonte = 3
 </font>
 <p> 
 <font size=2>
 Tamanho da Fonte = 2
 </font>
 <p> 
 <font size=1>
 Tamanho da Fonte = 1
<font size=+1>
 Tamanho da Fonte =+1; Tamanho da Fonte= 4 
 </font>
 <p>
	 Nota: O tamanho da fonte será aplicado na fonte padrão e não na fonte parcial, mesmo que foi definido dentro dela.
 <p>
	<font size=+2>
 Tamanho da Fonte= +2 (Padrão é 3) Fonte Final=5
	</font>
 </body>
</html>
<html>
 <head>
 <title>
 Seja um Profissional de HTML Desejado pelo Mercado 
 </title>
 </head>
 <body>
 <basefont color=red >
 <h1 align=center>
 Use a sua Imaginação:
 </H1>
 <font face=arial,"comic sans ms" size=5 font color=blue>
 Faça Páginas Alegres 
 <p><font color=lime>
 Faça Páginas Com Inovações
 </p>
 <p><font color=yellow>
 Seja Diferente, pois você é capaz
 </p>
 <font face=symbol>
 <p align=center >
 <font color=red>f
 <font color=green>i
 <font color=blue>m
 </font>
 </body>
<html>
<html>
 <head>
 <title>
 Seja um Profissional Desejado pelo Mercado 
 </title>
 </head>
 <body bgcolor=black text=white link=red alink=yellow vlink=lime>
 <basefont size=4>
 <h2 align=center>
 Faça Escolha de uma de nossas páginas:
 </h2>
 Escolha sua Opção:
 <p>
 <a href=animaçõesancora.htm>
 Páginas com Animações 
 </a></p> 
 
<p>
 <a href=fixas.htm>
 Páginas com Imagens Fixas
 </a>
 </p>
 <p>
 <a href=vendas.htm>
 Páginas com Imagem de Fundo
 </a>
 </p>
 <p>
 <h4 align=center>
 O sucesso depende da sua escolha 
 </h4>
 </p>
 </body>
<html>
<html>
 <head>
 <title>
 Efeitos em Textos
 </title>
 </head>
 <body> 
 <h2 align=center ><u>
 <font color=”#FF0000”>
 Exemplos de Efeitos no Texto
 </font></u>
 </h2>
 <b>
 Texto em Negrito (B)
 </b><br>
 <i>
 Texto em Itálico (I)
 </i><br>
 <tt>
 Texto em Tamanho Fixo (TT)
 </tt><br>
 <u>
 Texto Sublinhado (U)
 </u><br>
 H
 <sub>
 2
 </sub>	
 O<br>
 KM
 <sup>
 2
 </sup> 
 <body>
<html>
<html>
 <head>
 <title>
 Exemplo de Marquee
 </title>
 </head> 
 <body bgcolor=”#FFFF00”>
 <h2 align=center>
 <font color=”#0000FF”>
 Exemplo De Textos Em Deslocamento
 </font></h2>
 <br><br><br> 
 
<h2>
 <marquee behavior=scroll>Behavior=Scroll</marquee><br><br>
 <marquee behavior=slide>
 <font color=”#FF0000”>Behavior=Slide</font></marquee><br><br>
 <marquee behavior=alternate>
 <font color=”#00FF00”>behavior=alternate</font></marquee>
 </h2>
 </body>
</html>
<html>
 <head>
 <title>
 EXEMPLO DIRECTION
 </title>
 <head>
 <body bgcolor="#FF0000">
 <h2 align="center">
 <font color=blue>
 EXEMPLO DE DIREÇÃO PARA ONDE O TEXTO IRÁ SE MOVER 
 </font>
 </h2>
 <marquee direction="left">MARQUEE DIRECTION=LEFT</marquee><p><br>
 <marquee direction="right">MARQUEE DIRECTION=RIGHT</marquee><p><br>
 <marquee loop=2>MARQUEE LOOP</marquee>
 </body>
</html>
O texto se desloca da direita para esquerda.
O texto se desloca da esquerda para direita.
O texto irá passar apenas 2 vezes.
<html>
 <head>
 <title>
 EXEMPLO DIRECTION
 </title>
 <head>
 <body bgcolor=red>
 <h2 align=center>
 <font color=blue>
 EXEMPLO DE DIREÇÃO PARA ONDE O TEXTO IRÁ SE MOVER 
 </font>
 </h2>
 <marquee width=50%>MARQUEE WIDTH 50%</marquee><p><br>
 <marquee height=100%>MARQUEE HEIGHT=100</marquee><p><br>
 </body>
</html> 
<html>
 <head>
 <title>
 EXEMPLO DIRECTION
 </title>
 </head>
 <body bgcolor=#0000FF>
 <h2 align=center>
 <font color=#FF0000>
 EXEMPLO DE DIREÇÃO PARA ONDE O TEXTO IRÁ SE MOVER 
 </font>
 </h2>
 <font color=#FFFFFF>
 <marquee hspace=300>MARQUEE HSPACE=300</marquee><p><br>
 <marquee vspace=30>MARQUEE VSPACE=30</marquee><p><br>
 <marquee scrollamount=100>SCROLLAMOUNT=100</marquee><p><br>
 <marquee scrolldelay=100>SCROLLDELAY=100</marquee>
 </font>
 </body>
</html>
<html>
<head>
<title>Exemplo PRE</title>
</head>
<body>
<h2>Faculdade Estácio de Sá</h2>
<pre>
	---------------------------------------------------------------------------------------------------------------------
	---------------------------------------------------------------------------------------------------------------------
	---------------------------------------------------------------------------------------------------------------------
<b><u>CURSOS</b></u>		<b><u>DESCRIÇÃO</b></u>
<b>Internet</b>	 Cursos Voltados para Html
<b>Algoritmo</b>	 Linguagem de Programação
<b>Linux</b>			Sistema Operacional
	---------------------------------------------------------------------------------------------------------------------
	------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
</pre>
</body>
</html>
<html>
 <head>
 <title>
 Exemplo de Lista não Ordenada
 </title>
 </head>
 <body bgcolor=beige text=blue>
 <h2>
 Materiais Didáticos do Curso de Operador
 </h2> 
 <ul>
 <li>Windows</li>
 <li>Word</li>
 <li>Power Point</li>
 <li>Excel</li>
 <li>Frontpage</li>
 </ul>
 </body>
</html>
DISC (default)
SQUARE
CIRCLE 
Corpo da
Página
I - Algarismo Romano Maiúsculo
i – Algarismo Romano minúsculo
Start = Número – começando a partir do número que escolher.
<html>
 <head>
 <title>
 Exemplo de Listas Ordenadas
 </title>
 </head>
 <body bgcolor=beige text=blue> 
 <h2><b>
 Materiais Didáticos do Curso de Operador
 </h2></b> 
 <OL>
 <li>Windows </li>
 <li>Word</li>
 <li>Power Point</li>
 <li>Excel</li>
 <li>FrontPage</li>
 </ol>
 </body>
</html>
<html>
 <head>
 <title>
 Exemplo de Link na mesma Página
 </title>
 </head>
<body bgcolor="#000000" text=white>
<a name="protocolo">
<center><a href="#final">Ir Final Página</a></center>
<h1 align=center>Protocolos</h1> 
<h3 align=center>Protocolo</h3>
<p align=justifY>Em sentido restrito, Protocolo significa, algo que se pré-dispõe a por algo pronto a ser utilizado,através de recursos a ele atribuídos, ou ainda, é a padronização de leis e procedimentos que são dispostos a execução de uma determinada tarefa.
Na comunicação de dados e na interligação em rede, protocolo é um padrão que especifica o formato 
de dados e as regras a serem seguidas. Sem protocolos, uma rede não funciona. Um protocolo 
especifica como um programa deve preparar os dados para serem enviados para o estado seguinte do 
processo de comunicação.
Protocolo na informática é o termo dito um conjuto de informações ou dados passam por um preparo 
para serem repassados a outros programas.</p>
<h3 align=center>HTTP</h3> 
<p align=justifY>HTTP significa HyperText Transfer Protocol (Protocolo de Transferência de Hipertexto) e é um protocolo da camada de "Aplicação" do modelo OSI, utilizado para transferência de dados na World Wide Web.</p>
<h3 align=center>Telnet</h3>
<p align=justifY>É um protocolo cliente-servidor de comunicações usado para permitir a comunicação entre computadores ligados numa rede (exemplos:rede Local/LAN,Internet), baseado em TCP.</p>
<h3 align=center>FTP</h3>
<p align=justifY>FTP significa File Transfer Protocol (Protocolo de Transferência de Arquivos), e é 	uma forma bastante rápida e versátil de transferir arquivos (também conhecidos como ficheiros), sendo uma das mais usadas na internet.</p>
<h3 align=center>SMTP</h3>
<p align=justifY>É um protocolo relativamente simples, baseado em texto simples, em que um ou vários destinatários de uma mensagem são especificados (e, na maioria dos casos, validados), sendo depois a mensagem transferida.</p>
 
<h3 align=center>POP3</h3>
<p align=justifY>O Post Office Protocol (POP3) é um protocolo utilizado no acesso remoto a uma caixa de correio eletrônico. </p>
<center><a href="#protocolo">Voltar Início da Página</a></center>
<a name="final">
 
</body>
</html>
<html>
 <head>
 <title>
 Exemplo de Link na mesma Página
 </title>
 </head>
 <body bgcolor="#000000" text="#FFFFFF">
 Mande um<a href="mailto:catarina.barbosa@docente.estacio.br">
 e-mail </a> paraProfª Catarina Peres.
</body>
</html>
<html>
 <head>
 <title>
 Trabalhando com Imagens
 </title>
 </head>
 <body>
 <h2 align=center>Trabalhando com Imagem</h2>		
 <img src="gato.gif" >
 </body>
</html>
<html>
 <head>
 <title>
 Imagem 
 </title>
 </head>
 <body>
 <h1 align=center><font color="#ff0000">Imagem com bordas</font></h1>
 <center>
 <img src="gato.gif" border=0>
 <img src="gato.gif" border=10>
 <img src="gato.gif" border=20>
 <img src="gato.gif" border=50>
 </center>
 </body>
</html>
BORDA=0
BORDA=5
BORDA=20
BORDA=50
<html>
 <head>
 <title>
 Trabalhando com Imagens
 </title>
 </head>
 <body>	
 <img src="gato.gif"border=5 width=200 height=200>
 <img src="gato.gif"border=5 width=20% height=20%>
 <img src="gato.gif"border=1>
 </body>
<html>
<html>
 <head>
 <title>
 Trabalhando com Imagens
 </title>
 </head>
 <body>
 Exemplo de Imagens sem Parâmetros
 <font color=white>...............................</font>
 Exemplo com Margens Laterais - HSPACE<br>
 MARGEM<img src="gato.gif" border=1 width=150 height=150 alt="Gato">PADRÃO
 <font color=white>........</font>
 MARGENS<img src="gato.gif" border=1 width=150 height=150 alt="Gato" hspace=30>LATERAIS
 <br>
 <br>
Exemplo com Margens Verticais - VSPACE
<font color=white>........</font>
<br>
MARGEM	<img src="gato.gif" border=1 width=150 height=150 vspace=40 alt="Gato">VERTICAL
</body>
<html>
<html>
 <head>
	 <title>Imagem Alinhada à Esquerda do Texto</title>
 </head>
 <body> 
 <h2 align=center>Imagem Alinhada à Esquerda do Texto</h2>
 <img src="cavalo.gif" border=1 width=200 height=200 align=left hspace=20>
 <font color=blue>
	 <p align=justify> Para criar uma home page é necessário um programa de Edição de Texto como por exemplo o Bloco de Notas do windows, no qual serão inseridas as linhas do programa contendo os textos e os comandos especiais (TAGS) da página.</p>
	<p align=justify> Ao terminar a criação de um arquivo em formato HTML, ele necessita ser executado. Para isso é necessário um programa de navegação conhecido como Browser. Existem vários programas de navegação, sendo os mais comuns: Microsoft Internet Explorer (windows) e o Netscape.</p>
	<p align=justify> Para desenvolver e fazer uso de um arquivo em formato HTML, não é necessário estar conectado à Internet, ao contrário, você deve criar em seu computador e armazenar em uma pasta exclusiva (diretório) todos os arquivos da Home Page, para poder testá-los e depois transferir para o seu provedor de hospedagem e assim estar disponível para visitas.</p>
</body>
</html>
<html>
 <head>
 <title>
 IMAGEM ALINHADA NA LINHA
 </title>
 </head>
 <body>
 	IMAGEM ALINHADA<img src="gato.gif" align=top>PELA PARTE SUPERIOR DA IMAGEM COM A LINHA DE TEXTO.
 <br>
 <br>
 <br>
	IMAGEM ALINHADA<img src=" gato.gif" align=middle>AO MEIO COM A LINHA DO TEXTO.
 <br>
 <br>
 <br>
	 IMAGEM ALINHADA<img src=" gato.gif" align=bottom>A PARTE INFERIOR DA IMAGEM COM A LINHA DE TEXTO.
 <br>
 <br>
 <br>
</body>
</html>
<html>
 <head>
 <title> Exemplo de Imagem como papel de parede</title>
 </head>
 <body background="textura.jpg" text="#FFFFFF">
 <h1 align=center>Imagem de Fundo</h1>
 </body>
</html>
<html>
<head>
<title>Imagem Link</title>
</head>
<body bgcolor=yellow>
<h2 align=center>Clique na Imagem</h2>
<center>
<a href=" imagem_fundo.html"><img src="gato.gif"></a>
</body>
</html>
<html>
 <head>
 <title>TrabalhandoCom Tabelas</title>
 </head>
 <body>
 <table border=1>
<caption>TABELA</caption>
<tr>
 <th>Primeira Coluna</th>
 <th>Segunda Coluna</th>
 <th>Terceira Coluna</th>
</tr>
<tr>
 <td>Primeira Coluna</td>
 <td>Segunda Coluna</td>
 <td>Terceira Coluna</td>
</tr>
<tr>
 <td>Primeira Coluna</td>
 <td>Segunda Coluna</td>
 <td>Terceira Coluna</td>
</tr>
</table>	
</body>
</html>
LEFT 
CENTER
RIGHT
Determina o alinhamento da tabela na Página
<html>
 <head>
 <title>
 Utilizando as Tags Border e Bodercolor
 </title>
 </head>
 <body text="#FFFFFF"> 
 <table align=center border=2 background="textura.jpg" bordercolor=blue height=30% width=75%>
 <caption><font color="#*800000">
 Utilizando Imagem de Fundo e Borda Colorida</font>
 </caption>
 <tr align=center>
 <th>Pedagogico</th>
 <th>Marketing</th>
 <th>Suporte</th>
 </tr>
<tr align=center>
 <td>Apostilas</td>
 <td>Vendas</td>
 <td>Sistema de Gerenciamento</td>
</tr>
 
 
<tr align=center>
 <td>Exercícios Extras</td>
 <td>Propaganda</td>
 <td>Treinamento do Sistema</td>
 </tr>
<tr align=center>
 <td>Exercícios Extras</td>
 <td>Propaganda</td>
 <td>Treinamento do Sistema</td>
</tr>
</table>	
</body>
</html>
<html>
 <head>
 <title> EXEMPLO DE ROWSPAN</title>
 </head>
 <body>
 <table border=1 width=100%>
 <tr>
 <td width=33%>&nbsp;</td>
 <td width=33%>&nbsp;</td>
 <td width=34%>&nbsp;</td>
 </tr>
 <tr>
 <td width=33%>&nbsp;</td>
 <td width=33% rowspan="2">Estas duas linhas foram unidas.</td>
 <td width=34%>&nbsp;</td>
 </tr>
 <tr>
 <td width=33%>&nbsp;</td>
 <td width=34%>&nbsp;</td>
 </tr>
 
 
<tr>
 <td width=33%>&nbsp;</td>
 <td width=33%>&nbsp;</td>
 <td width=34%>&nbsp;</td>
</tr>
</table>
</body>
</html>
<html>
 <head>
 <title>Exemplo De Colspan</title>
</head>
<body>
 <table border=1 width=100%>
 <tr>
 <td width=33%>&nbsp;</td>
 <td width=33%>&nbsp;</td>
 <td width=34%>&nbsp;</td>
 </tr>
 <tr>
 <td width=66% colspan="2">Estas duas colunas foram mescladas.</td>
 <td width=34%>&nbsp;</td>
 </tr>
 <tr>
 <td width=33%>&nbsp;</td>
 <td width=33%>&nbsp;</td>
 <td width=34%>&nbsp;</td>
 </tr>
<tr>
 <td width=33%>&nbsp;</td>
 <td width=33%>&nbsp;</td>
 <td width=34%>&nbsp;</td>
 </tr>
 </table>
 </body>
</html>
<html>
<head>
<title>Formulário</title>
</head>
<body>
<form>
 Aqui irão entrar os comandos do Formulário
</form>
</html>
<html>
<head>
 <title>Exemplo de Formulário</title>
</head>
 <body>
 <form>
 <p>Entre com seu nome: <input type=”text” name=”nome” value="Digite 	 seu nome aqui" 	size="80" maxlength="20"></p>
 </form>
 </body>
</html>
<html>
<head>
 <title>Exemplo de Formulário</title>
</head>
 <body>
 <form>
 <p>Digite sua senha: <input type="password" name="senha" size="8"></p>
 </form>
 </body>
</html>
<html>
<head>
 <title>Exemplo de Formulário</title>
</head>
 <body>
 <form>
 <p>Entre com o seu comentário: </p>
 <textarea name="comentário" rows="3" cols="20"S></textarea>
 </form>
 </body>
</html>
<html>
<head>
 <title>Exemplo de Formulário</title>
</head>
 <body>
 <form>
 <select name="interesse" size="6">
	<option value="vazio">Escolha a área de Interesse</option>
	<option value="usuarios">Curso para Usuários</option>
	<option value="inicia">Curso para Iniciantes</option>
	<option value="html">Curso de HTML</option>
	<option value="java">Curso de Java</option>
	<option value="todos">Todos os Cursos</option>
 </select>
 </form>
 </body>
</html>
<html>
<head>
 <title>Exemplo de Formulário</title>
</head>
 <body>
 <form>
 <p>Escolha a área de Interesse: </p>
 <br><input type=”checkbox” name="caixa1" value="usuarios">Curso para Usuários
	<br><input type=”checkbox name”="caixa2" value="inicia">Curso para Iniciantes
	<br><input type=”checkbox name”="caixa3" value="html">Curso de HTML
	<br><input type=”checkbox name”="caixa4" value="java">Curso de Java
	<br><input type=”checkbox name”="caixa5" value="todos">Todos os Cursos
 </form>
 </body>
</html>
<html>
<head>
 <title>Exemplo de Formulário</title>
</head>
 <body>
 <form>
 <p>Escolha a área de Interesse: </p>
	<br><input type="radio" name="radio1" value="usuarios">Curso para Usuários
	<br><input type="radio" name="radio2" value="inicia">Curso para Iniciantes
	<br><input type="radio" name="radio3" value="html">Curso de HTML
	<br><input type="radio" name="radio4" value="java">Curso de Java
	<br><input type="radio" name="radio5" value="todos">Todos os Cursos
 </form>
 </body>
</html>
<html>
<head>
 <title>Exemplo de Formulário</title>
</head>
 <body>
 <form>
 <p>Escolha a área de Interesse: </p>
	<br><input type="radio" name="radio1" value="usuarios">Curso para Usuários
	<br><input type="radio" name="radio1" value="inicia">Curso para Iniciantes
	<br><input type="radio" name="radio1" value="html">Curso de HTML
	<br><input type="radio" name="radio1" value="java">Curso de Java
	<br><input type="radio" name="radio1" value="todos">Todos os Cursos
 </form>
 </body>
</html>
<html>
<head>
 <title>Exemplo de Formulário</title>
</head>
 <body>
 <form>
 <p>Entre com o seu nome: <input type="text"></p>
 <input type="reset" value="Apagar"> 		
 </form>
 </body>
</html>
<html>
<head>
 <title>Exemplo de Formulário</title>
</head>
 <body>
 <form>
 <p>Entre com o seu nome: <input type="text"></p>
 <input type="reset" value="Apagar"> 
 <input type="submit" name="botao" value="Enviar"> 		
 </form>
 </body>
</html>
 <html>
<head>
<title>frames</title>
</head>
<frameset cols= “50%,50%"> 
 <frame src="pl.htm"> 
 <frame src="p2.htm"> 
</frameset> 
 </html> 
<html> 
<head> 
 <title>frames</title> 
</head> 	 
<frameset rows="30%,40%, 30%"> 
 <frame src="p1.htm"> 
 <frame src="p2.htm"> 
 <frame src="p3.htm"> 
 <nofranes> 
 <p><a href="noframes.htm">clique aqui </a>para ver urna versão do documento que não utiliza frames</p> 
 </noframes> 
</frameset> 
</html> 
<html>
<head>
<title>frames</title>
</head>
<frameset cols="33%,33%,34%"> 
 <frame src="p1.html">
 <frameset rows="30%,70%">
 <frame src="p2.html">
 <frame src="p3.html">
 </frameset> 
 <frame src="p4.html">
</frameset>
</html>
<html>
<head>
 <title>frames</title>
</head>
<frameset cols= “50%,50%"> 
 <frame src="pla.html" name=”esquerda”> 
 <frame src="p2.html" name=”direita> 
</frameset> 
</html> 
<html>
<head>
 <title>Exemplo de Frame</title>
</head>
 <body bgcolor="0000FF" link="#FFFF00">
 <h2 align=center>Esta é uma Página</h2>
 <p><a href="p1a.html" target="direita">Clique aqui </a>para vê-la abrir do outro lado.</p>
</body>
</html>
�PAGE �
�PAGE �61�