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á:
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.
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.
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<p>Isso é um parágrafo HTML simples.</p>
<p align="left">Isso é um parágrafo alinhado à esquerda.</p>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<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.
<br /> é um quebra linhas. O espaço entre "br" e "/" é a diferença entre o HTML 4 e o código XHTML válido.
<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.
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<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<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;" />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>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>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>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.Para adicionar uma imagem ao fundo use o seguinte código HTML.
html<table background="img/pattern.jpg">html<!-- Este é um simples comentário HTML-->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" />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<b>Texto HTML em negrito</b>
<strong>Texto forte em HTML</strong>html<i>Italico</i>
<em>Enfatizado</em>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>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>