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.
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).
Ex:
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>
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.
<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>
.
<p></p>– O P é utilizado para definir um parágrafo.
<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.
<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>.
<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.
<u></u>– A tag U é usada para sublinhar um termo
.
<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.
<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.
<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
.
<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.
<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.
Resultado do corpor de uma pagina HTML:
<!DOCTYPE html>
<html>
<head>
<!--conteudo do head-->
</head>
<body>
<!--conteudo do body-->
</body>
</html>
O <!DOCTYPE html> inserido antes da tag <html> no exemplo anterior é para especificar para o navegador o tipo de página HTML que ele vai renderizar. Existem diferentes tipos de HTML usados atualmente porém os mais usados são o HTML 5, cujo doctype especificado é o que eu utilizei no exemplo, o HTML 4.1 e o XHTML.
{ creds } - Se for util, de like! Continuo com o básico do HTML depois CSS e um pouco de javascript ;)
