o que é HTML?

por **dwcarlos** Sex Abr 04, 2014 2:51 am

O que é HTML?

HTML é a sigla em inglês para Hyper Text Markup Language ou seja Linguagem de Marcação de Hipertexto. A grande maioria das páginas da web são feitas a partir do html. Pra "usar" html você precisa ter alguma noção de programação ou usar programas que desenvolvem páginas em html como o dreamweaver da adobe por exemplo. Assim você poderá desenvolver páginas para a internet. Agora, winx não sei o que é mas se for uma página da internet pode tentar a opção "Exibir código fonte" no menu do seu navegador
Tags HTML: são normalmente chamados tags HTML

* HTML tags são palavras-chave cercado por colchetes como <html>
* Tags HTML normalmente vêm em pares como <b> e </ b>
* A primeira tag em um par é a tag de início, a marca é a segunda marca de fim
* Iniciar tags são também chamadas de tags de abertura e fechamento

Quais editores HTML usar.
Para escrever código HTML basta um simples editor de texto como o bloco de notas (notepad). Porém eu recomendo editores mais robustos para facilitar um pouco sua vida. Os principais são es seguintes:
- Sublime Text 2: Considero o melhor editor atualmente. Experimente usar a extensão Zen Coding em conjunto com ele e experimente o máximo da performance ao criar seus arquivos HTML.
- Notepad ++: Outro excelente editor. Possui uma interface simples mas é bem poderoso também.
- Dreamweaver: Um excelente editor para iniciantes. Cuidado com o modo Design. Evite de editar seu HTML por ele pois ele não gera um código muito semântico.
Vou abordar agora as principais tags HTML e explicar um pouco de seu funcionamento.
HTML – <html> </html>
Essa tag é responsável por definir o início de um documento HTML e seu fim. Logo deve ser aberta no início do documento e fechado no seu final.
HEAD – <head></head>
Tag que define o início e o fim do cabeçalho do documento. Abordaremos mais abaixo o que deve ser inserido no cabeçalho.
BODY – <body></body>
Tag onde devem ser inseridos os conteúdos do site que deverão ficar visíveis ao usuários quando a página for renderizada no navegador.
Somente com essas três tags já podemos ter uma estrutura HTML básica. Segue um exemplo.
Cabeçalho <head>
No cabeçalho trazemos informações que serão usadas pelo navegador como:
TITLE – <title>Sou o título da página</title>
Título da página a ser exibido (texto que fica na aba de seu navegador quando uma página esta aberta)
LINK – <link href="" type="" media="" rel="" />
Geralmente usado para selecionar arquivo externo no HTML. Um uso comum dele é para selecionar arquivos CSS (responsáveis por definir a aparência da sua página para o usuário final).

Exemplo:

<html>
<head> cabeçalho do meu site </head>
<title> nome do meu titulo</title>
<body> Corpo do meu Html, onde coloca-se os conteúdos de visualização da página </body>
</html>

Estes são os princípios básicos para o começo de um HTML.

Nessa linha, definimos que arquivo a ser utilizado na página é do tipo CSS, para ser renderizado em telas (Monitores, TV's, smartphones…)
METATAGS – code><meta name="" content="" />
Metatags tem uma infinidade de funções que não irei citar aqui, porém nesse link existem mais informações sobre todas elas, http://www.w3.org/TR/html401/struct/global.html#h-7.4.4.
Atualmente só costumo utilizar duas. Uma para referenciar para os buscadores um breve resumo sobre a página, chamada DESCRIPTION. O seu uso é basicamente da seguinte forma:
<meta name="description" content="Aqui entra o resumo sobre a página. É recomendável que você não ultrapasse 160 caracteres nesse texto" />
E a metatag CHARSET. Com ela você define que tipo de codificação que o seu texto vai usar ao ser renderizado pelo navegador. Recomendo utilizar o utf-8 mesmo. Porém existem casos onde é preciso usar uma diferente. Existem duas formas de usar o charset. Uma para HTML 5 e uma para os demais. Seguem os exemplos:
HTML 5: <code><meta charset="utf-8" /></code>
Demais: <code><meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ /></code>
Novamente, recomendo utilizar a marcação do HTML 5 por ser mais enxuta.
Existe ainda a tag <script> que é chamada no cabeçalho por alguns desenvolvedores, porém, prefiro chama-la no final do <body> para não atrapalhar no carregamento dos demais componentes de suas página.
Segue uma exemplo de um cabeçalho:
1
2
3
4
5
6
7
<html>
<head>
<title>Título da página</title>
<meta charset="utf-8" />
<meta name="description" content="Breve resumo sobre o conteúdo desta página" />
<link href="estilo.css" rel="stylesheet" type="text/css" />
</head>
</html>

Algumas Tags do Body - Corpo do site

<h1></h1>– O H1 é utilizado para marcar um título. Você pode utilizar diversos níveis de relevância, para isso basta mudar o número na tag. As heading tags como são chamadas, vão de 1 á 6. Ou seja, você pode ter um<h1></h1> <h2></h2> … <h6></h6>. É recomendável por questões de otimização e semântica que você utilize apenas um <h1>, que seria o título da página como um todo, e que posicione ele o quanto antes no <body>. Porém as demais tags de título podem ser usadas conforme a necessidade.
Ex:
1
<h1>Sou um título relevante</h1>
<p></p>– O P é utilizado para definir um parágrafo.
Ex:
1
<p>Sou um elemento de parágrafo</p>
<span></span>– SPAN é uma tag inline usada para marcar um trecho de texto. Ele é frequentemente usado para personalizar um trecho de texto em um paragráfo via css, já que naturalmente não altera nada no HTML.
Ex:
1
<p>Sou um<span>pequeno parágrafo</span></p>
<Strong></Strong>– O STRONG é utilizado para deixar um texto em negrito. A tag <b></b> tem um comportamento semelhante porém a W3C recomenda utilizar o <Strong>.
Ex:
1
<p>O trecho a seguir está em<b>negrito</b></p>
<em></em>– A tag EM é utilizada para deixar um elemento em itálico. A tag <i> foi utilizada durante muito tempo para isso porém a W3C recomenda que utilize o <em> mesmo.
Ex:
1
<p>O trecho a seguir está em<em>itálico</em></p>
<u></u>– A tag U é usada para sublinhar um termo.
Ex:
1
<p>Pequeno texto com trecho<u>sublinhado</u></p>
<br />– A tag BR é utilizada para definir uma quebra de linha. Seu uso deve ser cauteloso. Evite usar muitos BR's em casos onde deveriam existir paragráfos.
Ex:
1
2
<p>Primeira linha<br />
segunda linha</p>
<ul></ul> – <ol></ol> – <li></li>– Os elementos UL e OL são usados para iniciar uma lista, sendo o <ul> para uma sem ordenação numérica e o <ol> para uma com ordenação numérica. Os elementos dentro dessa lista devem ser marcados com a tag LI.
Ex:
1
2
3
4
<ul>
<li>Sou um elemento de uma lista</li>
<li>Sou outro elemento dentro da lista</li>
</ul>
<a></a>– O A é um elemento responsável por "linkar" páginas/arquivos na sua página. Através do atributo href você pode especificar aonde está a página/arquivo a ser linkado na página.
Ex:
1
2
<a href="clientes.html">Página de clientes</a>
<a href="currículo.pdf">Curriculo</a>
Link externo:
1
<a href=http://www.siteexterno.com>Site externo sendo linkado</a>

<img /> – A tag IMG é usada para renderizar uma imagem no site. É necessário que o campo src seja preenchido com o caminho para a imagem. Os campos width e height devem ser preenchidos com a largura e a altura da imagem em pixels, é muito importante que esse campo esteja sempre preenchido para evitar que o navegador tenha que calcular sozinho o tamanho da imagem. O campo alt, deve conter uma pequena descrição da imagem para o caso do navegador não conseguir reproduzir a imagem e por questões de acessibilidade para leitores de tela usados por cegos.
Ex:
1
<img src="imagem.jpg" width="50" height="50" alt="Descrição da imagem" />
<div></div>– O DIV é uma tag de bloco, usado para agrupar elementos semelhantes. Um uso comum dele é para categorizar o cabeçalho (Header) da página, o conteúdo (content) e o rodapé (footer). É muito utilizado para auxiliar na personalização do site através do Css.
Ex:
1
2
3
4
<div>
<h2>Título relevante</h2>
<p>Texto do bloco</p>
<img src="alerta.jpg" width="10" height="7" alt="alerta" /></div>
<table></table> – <td></td> – <tr></tr> – A tag TABLE é usada para dermacar uma tabela. As linhas são marcadas com a tag TR enquanto as colunas ficam com a tag TD. É possível agrupar colunas com o atributo colspan e linhas com o atributo rowspan. Um <td colspan="2"></td> significa que aquela coluna vai ocupar o espaço de duas colunas.
Ex: Tabela 2×2
1
2
3
4
5
6
7
8
9
10
<table>
<tr>
<td>Primeira coluna da primeira linha</td>
<td>Segunda coluna da primeira linha</td>
</tr>
<tr>
<td>Primeira coluna da segunda linha</td>
<td>Segunda coluna da segunda linha</td>
</tr>
</table>
<form></form>– A tag FORM serve para demarcar a área de um formulário. No caso do form abordarei as tags utilizadas por ele em grupos diferentes pois são muitos. A tag form tem o atributo action, que determina qual ação vai ser executada quando ele for submetido.
Ex:
1
2
<form action="envioFormulario.php">
</form>
<input />– A tag INPUT pode adquirir características especificas de acordo com o atributo type que ele receber.
Ex:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<input type="text" value="Digite aqui" />

<input type="submit" />

<input type="file" />

<input type="radio" type="grupo" />

<input type="checkbox" />

<textarea></textarea>– A tag TEXTAREA tem um comportamento semelhante ao do input text, porém ele é destinado a textos maiores.
Ex:
1
<textarea></textarea>
<label></label>– A tag LABEL permite que você atribua uma legenda a um campo do seu formulário. Existem duas formas de usa-la:
Ex:
1-
1
2
3
<label>Sou uma legenda
<input type="text" />
</label>

2 -
1
2
<label for="campo">Sou uma legenda</label>
<input type="text" id="campo" />

Seg	Ter	Qua	Qui	Sex	Sáb	Dom
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30