Você está na página 1de 6

Curso de HTML

CONTATO

(28) 3537-1917
Av. Cel. Antnio Duarte, 131 Centro Iconha, ES CEP: 29280-000 Shopping Kamare, Sala 102 evolucaotreinamentos@hotmail.com

2
INTRODUO A linguagem Html ( Hypertext Markup Language - Linguagem de Marcao de Hipertexto) usada para criar as pginas divulgadas na World Wide Web, o servio mais popular na Internet. com ela que so feitos os hyperlinks que permitem navegar pela Web. CRIANDO A ESTRUTURA DA PGINA 1) Clique em Editar e marque o item Mudana Automtica de linha. 2) Digite o seguinte texto: <html> Todas as pginas Html devem iniciar com essa tag. <head> O cabealho deve ser delimitado pelas tags <head> e </head> <title> ttulo da pgina. Feche com </title>.Exemplo: <title>teste html</title> </head> para fechar o cabealho da pgina <body> Onde deve ficar o corpo da sua pgina. INSERINDO O TTULO 1) Para inserir o ttulo na pgina basta digitar <h1>Minha primeira Pgina </h1> O tamanho vai de <h1> tamanho maior para <h6> tamanho menor. DIGITANDO O CORPO DA PGINA 1) Para inserir um texto na pgina faa como abaixo <p>Texto aqui </p> INSERINDO IMAGENS NA PGINA 1) Para inserir uma imagem na pgina faa como abaixo <img src="brasil.gif" alt=" imagem do Brasil" align=center height=270 width=240> A imagem deve estar na mesma pasta que o arquivo Html. Ou aponte para a pasta certa. Img src referente a imagem que precisar ser indicado sua extenso Gif ou Jpg. Height e Width so as dimenses da figura em pixels. Alt um texto alternativo quando se passa com o mouse sobre a figura. TERMINANDO A PGINA 1) Para fechar o corpo da pgina faa como abaixo: </body> </html> 2) Salve com extenso .html ou .htm . 3) Veja se ficou assim.

3
<html> <head> <title>teste html</title> <head> <body> <h1>Minha primeira Home Page</h1> <p>Pginas Html podem ser criadas em qualquer editor ou processador de texto </p> <img src="brasil.gif" alt="Brasil" align=left height=150 width=120> </body> </html> 4) Veja o resultado teste.htm ALINHANDO TEXTOS E FIGURAS. 1) Para alinhar os textos basta digitar conforme abaixo. <p align="center">texto ou figura alinhado ao centro</p> <p align="right">texto texto ou figura alinhado a direita</p> Caso voc no escolha nenhuma dessas duas tags o alinhamento ser automtico. CRIANDO MARQUEE Marquee faz com que seu texto role de um lado ao outro da pgina, veja abaixo: <h1><marquee> Ttulo </marquee></h1>. ALTERANDO A COR DO TEXTO 1) Para alterar a cor do texto faa como abaixo: <p><font color="red"> texto </font></p>. 2) Tabela de cores abaixo
Branco Preto Azul Amarelo Verde Laranja Vermelho Rosa Cinza Ouro Verde azulado Azul marinho Prata White Black Blue Yellow Green Orange Red Pink Gray Gold Teal Navy Silver

ALTERANDO O FUNDO DA PGINA 1) Veja abaixo com alterar a cor o fundo da pgina <body bgcolor="teal"> . 2) Veja abaixo com colocar uma imagem no fundo da pgina

4
<body background="fundo2.gif"> HYPERLINKS 1) Veja como inserir um hyperlink externo <a href="http://www.redeevolucao.com.br">Rede Evoluo</a>. 2) Veja como inserir um hyperlink interno <a href="tabela.htm">Tabela</a>. 3) Veja como inserir hyperlink em figuras . <a href="mailto:apostilas@yahoo.com "> <img src="email.gif" alt="enviar e- mail" heigth=30 width=30></a> TABELAS 1) Veja abaixo como criar uma tabela. <p align="center">Compre um Produto</p> <table border="2" cellpadding="2" cellspacing="1" width="80%"> <tr> <td width="33%">Produto</td> <td width="33%">Marca</td> <td width="33%">Preo (R$)</td> </tr> <tr> <td width="33%">Delphi 3</td> <td width="33%">Editora Programar</td> <td width="33%">R$ 20, 00 </td> </tr> <tr> <td width="33%">Visual Basic</td> <td width="33%">Editora Sabetudo</td> <td width="33%">R$ 40, 00 </td> </tr> </table>
O que voc precisa saber que, quanto mais voc inserir <td> entre <tr> e </tr> mais partes sua tabela ter. A Tabela comea com <table> e termina com a tag de fechamento</table>. Width faz referncia a largura. Border a borda, se voc no colocar border sua tabela no vai ter bordas. TR significa( Table row), que marca uma linha de tabela. TD( Table Data) que so as clulas para os dados. Os valores em %, indica o tamanho ocupado em cada espao na tabela . Podendo ser um maior e outro menor.

DOWNLOAD 1) Veja como fazer com que o visitante possa baixar um arquivo ou mesmo um programa a partir da sua pgina. <a href="nome.extenso">Baixar</a>

5
Como pode observar a tag para fazer download a mesma que a tag usada para hyperlinks s mudando a extenso, voc pode modificar usando tambm tabelas ou figuras. FRAME 1) Veja como fazer frames em sua pgina, permitindo que voc veja o ndice e o contedo em uma nica pgina. <html> <title>frame</title> <frameset cols="50%,50%"> <frame src="tabela.htm "> <frame src="teste2.htm "> </frameset> </html> FORMULRIOS Um formulrio uma rea que pode conter elementos de formulrio. Os elementos de formulrio so elementos que permitem o usurio entrar informao (como campos de texto, campos de rea de texto, menus drop-down, botes radiais, caixas de seleo, etc.) em um formulrio. CRIANDO FORMULRIOS 1) Veja abaixo como criar um formulrio. <form> <input> <input> </form> CAMPOS DE TEXTO 1) Veja abaixo como inserir campos de texto em seu formulrio <form> Primeiro nome: <input type="text" name="firstname"> <br> ltimo nome: <input type="text" name="lastname"> </form>

BOTES RADIAIS 1) Veja abaixo como inserir Botes Radiais em seu formulrio. <form> <input type="radio" name="sex" value="male"> Masculino <br> <input type="radio" name="sex" value="female"> Feminino </form>

6
CAIXAS DE SELEO 1) Veja abaixo como inserir Caixas de Seleo em seu formulrio <form> <input type="checkbox" name="bike"> Eu tenho uma bicicleta <br> <input type="checkbox" name="car"> Eu tenho um carro </form> O Atributo Ao do Formulrio (Form's Action) e o Boto Enviar (Submit) Quando o usurio clica no boto "Enviar", o contedo do formulrio enviado para outro arquivo. O atributo de ao do formulrio define o nome do arquivo para o qual enviar o contedo. O arquivo definido no atributo action geralmente faz algo com a entrada recebida. <form name="input" action="html_form_action.asp" method="get"> Nome do Usurio: <input type="text" name="user"> <input type="submit" value="Enviar"> </form>