Iniciando um documento
Todo documento html fica contido entre os TAGs <HTML> e </HTML>.
Uma pagina html possui três partes básicas: estrutura principal,um cabeçalho e um corpo da pagina.
Possui uma estrutura dividida em 4 TAGs básicas:
<HTML> ... </HTML> São usados para delimitar os comandos HTML, indicam o inicio e o fim de um documento
<HEAD> ... </HEAD> Usado para indicar parâmetros de configuração do documento, também utilizado para exibir o titulo na barra de títulos do browser
<TITLE> ... </TITLE> Indica o titulo do documento para o browser.Esta TAG deve estar sempre dentro dos TAGs <HEAD> </HEAD>
<BODY> ... </BODY> Envolvem a seção de corpo do documento.Aqui fica o conteúdo principal da Home Page
TAGs unicas em html
Abaixo vou mostrar algumas TAGs principais e mais usadas em html
<br> Essa TAG é usada para quebra de linhas
<center> usado para alinhar títulos e subtitulos ao centro da página
Trabalhando com textos
Agora veremos algumas TAGs para e dição de textos:
<B></B> Aplica o estilo negrito ao texto
<I></I> Aplica o estilo itálico ao texto
<U></U> Aplica o estilo sublinhado ao texto
<SUP></SUP> Faz com que o texto fique sobrescrito
<SUB></SUB> Faz com que o texto fique subscrito
<PRE></PRE> Utiliza a pré formatação,ou seja, deixa o texto da maneira em que foi digitado
Agora que você já sabe algumas TAGs vamos aprender a como usa-las:
Crie um arquivo do Bloco de notas e salve como teste.html como nos mostra o video:
Agora que você ja criou o arquivo vamos começar a editá-lo;como vimos anteriormente os documentos html's sempre começam e terminam com as TAGs <HTML> </HTML> que significa inicio e fim.
<html>
</html>
Agora dentro dessas tags vamos atribuir um titulo ao documento usando as TAGs <TITLE> </TITLE>.
<html>
<title>
Cadastro de clientes
</title>
</html>
Precisamos abrir nosso projeto pelo navegador para testarmos; para isso precisamos do endereço do arquivo (para colarmos na caixa de pesquisa do navegador),para obter o endereço do arquivo faça o que mostra o vídeo abaixo :
Como podemos ver, nosso titulo já apareceu na aba da pagina,vamos começar a editar nossa pagina e criar o formulário para o cadastro de clientes.
De inicio vamos dar o titulo que ficara na pagina agora,vou incrementar um pouco usando uma "barra de fundo" para esse título:
<html>
<title>
Cadastro de clientes
</title>
<div align="center">
<div align="center">
<TABLE BORDER=1 BGCOLOR="blue" width="30%" >
<TH ><font color="white">Cadastro de clientes</font></TH>
</TABLE>
</html>
A cada código que você acrescentar a sua script vá salvando e atualizando o navegador para ver como esta ficando.Como estamos iniciando vamos fazer um formulário de cadastro bem simples usando apenas os seguintes dados: nome e e-mail.
<html>
<title>
Cadastro de clientes
</title>
<div align="center">
<div align="center">
<TABLE BORDER=1 BGCOLOR="blue" width="30%" >
<TH ><font color="white">Cadastro de clientes</font></TH>
</TABLE>
<FORM NAME="form_conselho" METHOD="POST">
</div>
</div>
<h4 align="center">Dados pessoais</h4>
<div align="center">
<table width="28%">
<tr>
<td width="5%"><font size="3" face="arial"> Nome</font></td>
<td><input type="text" name="Name" size="30"></td>
</tr>
<tr>
<td width="5%"><font size="3" face="arial"> Email</font></td>
<td><input type="text" name="email" size="30"></td>
</tr>
</table>
</html>
Agora nosso formulário esta quase pronto, precisamos apenas adicionar dois botoes, um para cadastrar e outro pra cancelar, vamos inserir os seguintes códigos a nossa script:
<button>Cadastrar
<button>Cancelar
Entao, ficara assim:
<html>
<title>
Cadastro de clientes
</title>
<div align="center">
<div align="center">
<TABLE BORDER=1 BGCOLOR="blue" width="30%" >
<TH ><font color="white">Cadastro de clientes</font></TH>
</TABLE>
<FORM NAME="form_conselho" METHOD="POST">
</div>
</div>
<h4 align="center">Dados pessoais</h4>
<div align="center">
<table width="28%">
<tr>
<td width="5%"><font size="3" face="arial"> Nome</font></td>
<td><input type="text" name="Name" size="30"></td>
</tr>
<tr>
<td width="5%"><font size="3" face="arial"> Email</font></td>
<td><input type="text" name="email" size="30"></td>
</tr>
</table>
<button>Cadastrar
<button>Cancelar
</html>
*obs. apenas coloquei na cor vermelha para destacar
Se você digitou todos os códigos corretamente o formulário ficara assim:
Nosso formulário de cadastro simples esta pronto , isso foi so uma demonstração,agora use sua criatividade e vá muito alem...
Nao se esqueca apenas criamos o formulario; para salvar os dados digitados nas caixas de textos precisamos de uma conexao com um banco de dados; isso ensinarei em um dos proximos tutoriais.
ResponderExcluir