Tutoriais HTML - Hyper Text Markup Language

Nós criamos esse site para ensinar novos "programadores", mesmo aqueles com uma base fraca, como usar HTML, mas não apenas isso. Nós te convidamos a começar o curso de "programação" imediatamente. Mas primeiro, "o menu"...

Essa série de tutoriais foi feita para te dar alguma experiência, assim que você será capaz de ler e escrever em linguagem HTML, conseguirá salvar documentos e depois disso verá seu trabalho no navegador. Infelizmente essa página não tem uma seção para te ensinar como usar todas as funções básicas de um computador, então nesse ponto você podera pedir ajuda a um amigo: Antes de continuar aprendndo sobre HTML, você deverá:

  • Saber o que é o Bloco de Notas e como utilizá-lo
  • Como abrir um arqueb ivo usando o Internet Explorer (ou qualquer outro navegador, nós recomendamos o Chrome)
  • Saber como fazer e o que representa copiar/colar

* Programação em HTML existe realmente?

Desculpem-nos nos por disapontá-lo, mas programação HTML não existe, porque HTML não é uma linguagem de programação. É uma linguagem de markup. Então isso simplesmente envolve um conteúdo e nada mais.

Rápido guia de referência HTML

Abaixo fizemos uma pequena lista dos códigos HTML mais utilizados. Você pode adicionar essa página aos favoritos para voltar aqui mais facilmente quando você não souber como criar um código HTML ou simplesmente não lembrar.

Elementos - HTML

Os principais elementos HTML são <html>, <head>, <title> e <body>. Abaixo há i, exemplo simples de como construir um site.

html<html>
	<head> 
		<title>Meu primeiro site utilizando código HTML!</title>
	</head> 
	<body> 
		Olá gente! Colocarei aqui os conteúdos da página HTML.
	</body> 
</html>

HTML - Parágrafo

html<p>Isso é um parágrafo HTML simples.</p>
<p align="left">Isso é um parágrafo alinhado à esquerda.</p>

Demo

Isso é um parágrafo HTML simples.

Isso é um parágrafo alinhado à esquerda.

Para alinha um elemento HTML nós usaremos a etiqueta align com os atributos: left, right, center, justify.

HTML - Títulos

html<h1>Isso é uma tag HTML para o maior título</h1>

Outras tags para definir títulos ou cabeçalhos em HTML são: h1, h2, h3, h4, h5, h6. O título definico com h1 é o maior e o definido com h6 é p menor.

HTML - Quebra de Linhas

<br /> é um quebra linhas. O espaço entre "br" e "/" é a diferença entre o HTML 4 e o código XHTML válido.

HTML - Linha horizontal

<hr /> é usado para desenhar uma linha horiyontal. O espaço entre "hr" e "/" é a diferença entre o HTML 4 e o código XHTML válido.

HTML - Listas

Aqui há uma exemplo simples de lista HTML:

html<ol>
	<li>Primeiro elemento HTML na lista</li>
	<li>Segundoo elemento HTML na lista</li>
	<li>Terceiro elemento HTML na lista</li>
</ol>

Acima há um exemplo de lista HTML ordenada. Oitras listas HTML são: desordenada e lista de definições.

HTML - Links

html<a href="http://www.tutorialehtml.com/" title="HTML 5" target="_blank" >Html 5</a>
<a href="#top">Ir para o início</a> (<a name="top"></a>)
<a href="mailto:admin@exemplu.com" >Contate-nos</a>
<a href="http://www.tutorialehtml.com/" title="HTML 5" target="_blank" ><img src="img/html_image.jpg" alt="HTML 5" /></a>

Acima você tem um exemplo de um link HTML normal, um link entre duas seções da mesma página, um link que liga a um e-mail e um link que liga a uma imagem. Apesar de não mais ser usada em HTML, merece menção.

html<base href="http://www.tutorialehtml.com/">

Base href foi removido das tags indexadoras HTML 5.

HTML - Imagens

html<img src="img//html_image.jpg" alt="Html Image" width="100" height="50"  align="center" />

É recomendado alinhar imagens usando CSS. Isso transformaria o código HTML aciema em:

html<img src="img//html_image.jpg" alt="Html Image" style="width:100px; height:50px; margin:auto;" />

HTML - Formulários

Isso é apenas um exemplo de código HTML usado para criar formulários. É o que o usuário poderia usar para adicionar informação. Mas para processar tal informação você precisara de um arquivo php (por exemplo), que envia a informação para o banco de dados, e-mail, correios, etc.

html<form method="post" name="formulario" action="process.php">
	<!--os campos de textos usados para introduzir a informação-->
	<input type="submit" value="Send">
	<input type="reset" value="Delete" />
</form>

HTML - Campos de Texto

Abaixo há alguns exemplos de arquivos de texto em HTML.

html<input type="text" size="10" maxlength="40" name="name"> --> campo de texto normal
<input type="password" size="10" maxlength="10" name="pass"> --> campo de senha
<input type="radio" name="color" value="red"> --> botão de opção
<input type="checkbox" name="check" value="yes"> --> caixa de seleção
<select name="select">  --> simple select list / lista suspensa
   <option>Html 4.1</option> 
   <option>Html 5</option> 
</select>

HTML - Tabela

A estrutura básica de uma tabela em HTML é a seguinte:

html<table>
   <tr> 
      <th>Coluna 1</th>
      <th>Coluna 2</th>
   </tr>
   <tr>
      <td>Fila 1 Celda 1</td>
      <td>Fila 1 Celda 2</td>
   </tr>
   <tr>
      <td>Fila 2 Celda 1</td>
      <td>Fila 2 Celda 2</td>
   </tr>
</table>

Html - Web Colors

Web Colors são usados para colocar cor ao fundo. Aqui tenho alguns exemplos de como usá-los:

html<body bgcolor="#efefef">
<div bgcolor="#888888">
<table bgcolor="#000000"> - etc.

Html - Background

Para adicionar uma imagem ao fundo use o seguinte código HTML.

html<table background="img/pattern.jpg">

HTML - Comentários

html<!-- Este é um simples comentário HTML-->

Html - Embed (Música e Som)

Para inserir música ou som ao documento HTML use a tag embeb como no exemplo

html<embed src="example.mp3" hidden="false" autostart="false" loop="false" volume="60" width="144" height="60" />

Html - Objeto (Video)

Para inserir um video em um documento HTML use a tag embeb, como a seguir:

html<object width="425" height="344">
	<param name="movie" value="http://www.youtube.com/v/wViILXQfX7Y&hl=en&fs=1"></param>
	<param name="allowFullScreen" value="true"></param>
	
	<embed src="http://www.youtube.com/v/wViILXQfX7Y&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344">
</embed>
</object>

HTML - Negrito

html<b>Texto HTML em negrito</b>
<strong>Texto forte em HTML</strong>

HTML - Cursivo

html<i>Italico</i>
<em>Enfatizado</em>

HTML - Subscript, Superscript, Striketrough

Expoente, indice e texto cortado. Apesar de não ser muito utilizado, vale a pena ser mencionado.

html<sub>Indice!</sub>
<sup>Expoente</sup>
<del>Texto cortado</del>

HTML - Uploading e Campos Escondidos

O formulário a baixo é usado para fazer upload de arquivos para o servidor. Nçao se esqueça que isso é apenas parte do HTML. Para fazê-lo funcional você deveria processá-lo utilizado pho, asp ou qualquer outra Linguagem de Servidor.

html<form method="post" action="process.php"> 
	<input type="hidden" name="MAX_FILE_SIZE" value="500" /> 
	<input type="file" />
	<input type="submit" value="Upload">
	<input type="reset" value="Reset" />
</form>