Noticias:
Atualização em 18/02/2012
Cursos:
Veja alguns cursos disponiveis:
- Curso Básico de Html
Parceiros:
Dupla João Silva e Paulinho
Assistec Eletrônica
Curso Básico de Html
Estrutura Básica
- HTML (acrônimo para a expressão inglesa HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web. Documentos HTML podem ser interpretados por navegadores. A tecnologia é fruto do "casamento" dos padrões HyTime e SGML.
- Linguagem visual baseada em códigos chamados tags. Veja o exemplo:
<html>
<head> <title>Curso de Html</title></head>
<body bgcolor="#9b30ff">Corpo da Página </body>
</html>
Copie o código acima e cole no bloco de notas e salve com o nome de exemplo.html em seguida é só dar dois cliques no arquivo e seu navegador mostrara a página.
Descrição das tags:
<html> e </html> - indica ao navegador que é uma página html e também inicia e finaliza a página.
<head> e </head> - cabeçalho, onde também deve se inserir as metas tags para ajudar os mecanismos de busca a encontrar a sua página pelas palavras chaves. Visite o site scripton.com.br e crie grátis as metas tags para seu site.
<title> e </title> - insira entre essas tags o título de seu site e também é o título que o navegador exibe em sua barra.
<body> e </body> - entre essas tags deve ser colocado o conteúdo de seu site.
Observação: não coloque espaço entre < > e por exemplo a palavra html.
Colocando Cor de Fundo
Insira <body bgcolor="#9b30ff"> onde #9b30ff coresponde ao código de cor escolhido para a página. Visite o site: UFPA e escolha a cor para sua página.
Colocando Imagem de Fundo
Insira <body background="imagem.gif"> onde imagem.gif é o nome da imagem e esta deve estar na mesma pasta onde está a página html. Para o caso da imagem estar em outra pasta use <body background="pasta/ nome da imagem.jpg">.
Back ground é um atributo de body.
Os navegadores normalmente só reconhecem as imagens de extensão .gif e .jpeg (jpg).
Colocando uma Imagem na Página
Para colocar uma imagem na página use <img src="nome da imagem.jpg">, isso quando a imagem estiver na mesma pasta das páginas html. Caso esteja em pasta diferente use <img src="pasta/nome da imagem.jpg">.
Colocando Texto em Negrito
Insira entre as tags <body> e </body> o comando <b>texto</b> onde texto é o texto a ser colocado em negrito.
Colocando Texto em Itálico
Insira entre as tags <body> e </body> o comando <i>texto<i> onde texto é o texto a ser colocado em negrito.
Observação: A página principal (home) de seu site deve ser salva com o nome index.html.
Inserção de Parágrafo, Centralização e Quebra de Linha
Insira entre as tags <body> e </body> o comando <p>texto </p> onde texto é o texto a ser colocado no parágrafo.
Do mesmo modo use as tags <div> e </div> para quebrar linhas e centralizar o texto, deve se usar o atributo align com as opções: center, right e left. Ex: <div align="center"> texto </div>.
Utilize <br> para fazer a quebra de linha. Atenção nesse caso NÃO se usa o fechamento </br>.
Tamanho, Tipo e cor da Fonte
Insira entre as tags <body> e </body> o comando <font face=verdana size=2 color= #000000>, onde verdana é o tipo da fonte; 2 é o tamanho da fonte; #000000 define a cor da fonte. Veja na página 2 do curso onde encontrar a tabela de cores.
Criação de Links
As tags <a> e </a> - cria o link entre as páginas e o atributo href indica a página de destino. Ex: <a href="assisteceletronica.net/html1.html"> Curso de Html </a>.Nesse exemplo foi feito um link da página principal da Assistec Eletrônica para o curso de html, repare que a primeira página do curso foi dado o nome de html1 e salvo com a extensão .html.
Cabeçalho
Insira entre as tags <body> e </body> o comando <H1> texto </H1> a tag de cabeçalho varia de 1 a 6.
Marcadores e Numeradores
<LI> Não tem fechamento, determina o início dos marcadores e numeradores, define também cada linha, digite o texto na sua frente.
<OL> Cria a lista numerada, precisa do comando <LI> para finalizar a lista.
</OL>finaliza a lista.
Atributos:
TYPE: valor, sendo:
valor a= minúsculo.
valor A= maiúsculo.
valor I= romano maiúsculo.
valor i= romano minúsculo.
valor 1= números.
START: valor, sendo:
valor E= 5.
valor IV= 4.
valor 10= 10.
Para marcadores não ordenados use <UL> e </UL>, no lugar do OL.
Atributos:
TYPE: valor, sendo;
valor= square - marcador quadrado preenchido.
valor= disc - marcador círculo preenchido.
valor= circle - círculo transparente.
TabelasAgora chegamos ao principal, você devem se dedicar bastante a aprender a lidar com tabelas, pois é com elas que conseguimos alinhar o texto, colocar imagem e links onde queremos em uma página html.
Use se as tags <table> e </table> e os atributos são:
1.Border="valor" - define o contorno.
2.Cellspacing= "valor" - define o espaço horizontal entre as células.
3.Cellpadding= "valor" - define o espaço vertical ( não reflete nas bordas, somente o cellspacing).
4.Width= "valor%" - define a largura da tabela em relação a tela.
5.Height= "valor%" - define a altura da tabela em relação a tela.
6.Bgcolor= "#cor" - define a cor de fundo da tabela.
7.Back ground = "imagem" - define a imagem de fundo da tabela.
Comandos:
1.<caption> e </caption> - usa se para o título e o alinha com o tamanho da tabela.
2.<tr> e </tr> - define o início e o fim de cada linha da tabela.
Atributos:
1.align="valor" - define o alinhamento do texto dentro da tabela. Podendo ser:
Left = esquerda.
Right = direita.
Center = centro.
2.Valign="valor" - define o alinhamento vertical do texto. Podendo ser:
Top = topo.
Middle = no meio.
Botton = no inferior.
3.<th> e </th> - define o cabeçalho da tabela.
Atributos:
1.align="valor" - alinhamento horizontal dentro da célula. ( se já foi feito em tr não precisa fazer aqui. Podendo ser: Left, Right e Center.
2.valign="valor" - define o alinhamento vertical na célula. ( se já foi feito em tr não precisa fazer aqui. Podendo ser: Left, Right e Center.Colspan="valor" - instrui o navegador a unir colunas (mesclar).
Rowspan="valor" - une as linhas.
4.<td> e </td> - define o conteúdo de cada célula da linha da tabela.
Atributos:
1.align="valor" - define o alinhamento horizontal. ( Se já foi feito em tr não precisa fazer aqui. Pode ser: left (esquerda), right (direita), center (centro).
2.valign="valor" - define o alinhamento vertical. ( Se já foi feito em tr não precisa fazer aqui. Pode ser: top (topo), middle (no meio), botton (em baixo).
3.colspan="valor" - une as colunas.
4.rowspan="valor" - une as linhas.
Para a tabela ter uma figura de fundo em uma só celula, insira dentro da tag <td> o atributo back ground="imagem.jpg".
Para colocar outra linha da tabela no sentido horizontal, coloque entre o tr outro td.
Colocando Música no Site
Para colocar somente a música use o comando <bg sound src="musica.mp3" loop="infinite">.
Para colocar música e um player use o comando <embed src="musica.mp3" width="234" height="60" autostart="true" >.
Para os dois casos acima a música está na mesma pasta que a página html.
Para ver como ficou seu site nos navegadores, visite: Browsershots
Formulários
Os comandos para o formulário são:
1.textarea - área onde o usuário digita as linhas de texto.
2.select - opção quadro de rolagem.
3.input - reune informações.
<form> e </form> - os comandos do formulário devem ser inseridos entre essas tags.
Atributos:
1.method="post" - envia cada informação do formulário de forma separada para o URL de destino.
2.action="e-mail" - e-mail ou página que receberá as informações.
O provedor que vai hospedar o site deve informar o código para que o formulário chegue ao seu destino final.
Dica: Para você ver o código fonte de uma página, ou até mesmo copiá-lo, clique com o botão direito em cima da página e depois clique em exibir código fonte, se quizer pode depois salvá-lo.
Divisão da Página em Frames
Frame divide a janela do navegador em quadros e abre uma página diferente em cada frame. Numa página frame não se usa o <body>.O comando frame substitui o body e é de início e fim. Ex: <frame> e </frame>.
<frameset> - cria os frames.
Atributos:
1.cols="n%,m%" - define que divisão é em colunas, onde: n é a ocupação da primeira coluna em relação a tela, e m é a segunda coluna. Os valores também pode ser em pixel.
2.rows="n%,m%" - define que a divisão é em linhas, onde: n é a ocupação da primeira linha em relação a tela, e m é a segunda linha. Os valores também pode ser em pixel.
3.border="n" - define a espessura da borda.
4.<frame> - onde será mostrado o que deve ser carregado em cada divisão do frame. Para cada frame definido como <frameset> é necessário um comando <frame>.
Atributos:
1.src="nome do arquivo" - nome do arquivo que será carregado no frame.
2.name="nome" - nome do frame, útil quando você quizer que um arquivo apareça em um dos frames através de um link.
3.noresize - impossibilita que o usuário redimensione a largura do frame.
4.scrolling="valor" - define quando a barra de rolagem deve aparecer. Sendo: never (nunca), always (sempre), se você não especificar, só aparecerá se nacessário.
5.</frameset> - fecha.Targets - indica ao navegador em qual dos frames a página solicitada; através do link, deverá ser aberta. Deve vir após o comando do link, antecedida de um simples espaço e também acompanhada do nome que você deu a frame. Ex:
<a href="script.html" target="inferior">script</a>.
Onde: script.html é a página que será aberta na parte inferior. Se houver letras maiúsculas no nome do frame, deverá também colocar maiúsculas na target.
Observação: No caso de <noframes> já se usa o body.
Para Enviar Dados do Formulário
Use: <input type="submit" value="Mandar">
Onde, value define o nome do botão.
Para Apagar Dados Preenchidos
Use: <input type="reset value="Apagar">
Onde, value define o nome do botão.
Para Colocar uma Caixa de Seleção
Use: <input type="checkbox" name="dados" value="retorno">
Onde, name é o nome dos dados e value é o valor de retorno para o nome escolhido.
Para Armazenar Dados Confidenciais (Campo de Senha)
Use: <input type="password" name="senha" size="10" maxlenght="6" >.
Onde, name é o nome dos dados, size o tamanho do campo que aparece na tela e maxlenght o tamanho máximo do texto.
Para Armazenar Dados Digitados pelo Usuário
Use:<input type="text" name="email" size="15" maxlenght="35">
Onde, name é o nome dos dados, size o tamanho do campo que aparecerá na tela, e maxlenght a quantidade de caracteres digitados pelo usuário.
Visite o site: sitemaps.com depois de finalizado seu site e crie grátis o sitemap de seu site. Salve o arquivo sitemap no diretório principal de seu site. Ex:www.seusite.com/sitemap.xml. O sitemap ajuda na indexação e busca de seu site.
Para indexar seu site no google visite o site: Google ferramentas para webmasters e clique em adicionar site e siga as instruções e depois envie seu sitemap.
Para indexar no yahoo visite o site: Yahoo e adicione seu site.
E assim chegamos ao final deste curso básico de html, procurei mostrar para vocês os pontos em que mais tive dificuldade e os sites que nos ajudam e muito. Espero que tenham gostado e tenha sido útil.
Marcos Paulo.