Html básico etiquetas ou tags

Html básico etiquetas ou tags

HTML Etiquetas

Todo documento HTML apresenta etiquetas, esses elementos são os comandos de formatação da linguagem. A maioria das etiquetas tem sua correspondente de fechamento:
<etiqueta>...</etiqueta>
Isso é necessário porque as etiquetas servem para definir a formatação de uma porção do documento, e assim marcamos onde começa e termina o texto ou função com a formatação especificada por ela. Alguns elementos são chamados “vazios”, pois não marcam uma região de texto, apenas inserem algum elemento no documento:
<etiqueta>
Uma etiqueta é formada por comandos, atributos e valores. Os atributos modificam os resultados padrões dos comandos e os valores caracterizam essa mudança. Exemplo:
<HR color="red">
No qual:
  • HR = comando que desenha uma barra horizontal
  • color = atributo que especifica a cor da barra
  • red = valor do atributo color, que é a cor da barra que será desenhada
Cada comando tem seus atributos possíveis e seus valores. Um exemplo, é o atributo size que pode ser usado com o comando FONT, com o HR mas que não pode ser usado com o comando BODY. Isso quer dizer que devemos saber exatamente quais os atributos e valores possíveis para cada comando.
De uma maneira geral o HTML é um poderoso recurso, sendo uma linguagem de marcação muito simples e acessível voltada para a produção e compartilhamento de documentos e imagens.

Como visto no último artigo de introdução sobre o html, uma página html tem a seguinte estrutura:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
  <head>
    <title>Título da sua página</title>
  </head>
  <body>
    aqui fica o conteúdo da sua página,
    texto,imagem,links),...
  </body>
</html>
E como dito antes as etiquetas HTML não são sensíveis à caixa, portanto tanto faz escrever <HTML>, <Html>, <html> ou <HtMl>.

As etiquetas básicas de HTML, cuja presença é altamente recomendada nas páginas são:
  • <html>: define o início de um documento HTML e indica ao navegador que todo conteúdo posterior deve ser tratado como uma série de códigos HTML.
  • <head>: define o cabeçalho de um documento HTML, que traz informações sobre o documento que está sendo aberto.
  • <body>: define o conteúdo principal, o corpo do documento. Esta é a parte do documento HTML que é exibida no navegador. No corpo podem-se definir propriedades comuns a toda a página, como cor de fundo, margens, e outras formatações.

HTML - Cabeçalho

Dentro do cabeçalho ou <head> podemos encontrar os seguintes comandos:
  • <title>: define o título da página, que é exibido na barra de título dos navegadores, aconselhável que seja o nome de seu site.
  • <style>: define formatação em CSS, pode-se inserir uma lista de classes para dar características.
  • <script>: define programação de certas funções em página com scripts, podendo adicionar funções de JavaScript.
  • <link>: define ligações da página com outros arquivos como feeds, CSS, scripts, etc. Normalmente redireciona para páginas de CSS e Javascript dentro do projeto.
  • <meta>: define propriedades da página, como codificação de caracteres, descrição da página, autor, etc. São meta informações sobre documento. Tais campos são muitos usados por mecanismos de busca(como o Google) para obterem mais informações sobre o documento, a fim de classificá-lo melhor. Por exemplo, pode-se adicionar o código: <meta name="description" content="descrição da sua página" /> no documento HTML para indicar ao motor de busca que texto de descrição apresentar junto com a ligação para o documento. Para o sistema Google, comandos meta como keywords por exemplo não são utilizadas para indexar páginas. Apenas <title> e a meta <description> são usadas para descrever a página indexada.
Uma dica para <meta>: 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
Pois indica o tipo de lingua que está sendo utilizada, e evita que sua página html
tenha caracteres corrompidos, pois quando não é feita esta colocação, todos os 
caracteres especiais ficam deformados e com defeito.

    Obs: as etiquetas <style> e <script> servem tanto para delimitar o espaço usados pelos códigos na página quanto para invocar códigos existentes em outros arquivos externos.

    HTML - Body ou corpo da página

    Dentro do corpo podemos encontrar outras várias etiquetas que irão moldar a página, é nesta área da página html que todo seu conteúdo ficará. Dentro do body ou corpo, é onde fica o conteúdo visível de sua página.
    Ex.:
    • <h1>, <h2>,... <h6>: cabeçalhos e títulos no documento em diversos tamanhos. (quanto menor for o número, maior sera o tamanho da letra).
    • <p>: novo parágrafo
    • <br>: quebra de linha.
    • <table>: cria uma tabela (linhas são criadas com <TR> e novas células com <TD>. Já os cabeçalhos de coluna são criados com a etiqueta <TH>).
    • <div>: determina uma divisão na página a qual pode possuir variadas formatações. (Uma div pode ser criada dentro do cabeçalho da região <style> mas não é interessante no momento, somente mais a frente em nosso estudo).
    • <font>: altera a formatação (fonte, cor e tamanho) de um trecho do texto. ex.: <font size="12></font> | <font color="#fff"></font>.
    • <b>, <i>, <u> e <s>: negrito, itálico, sublinhado e riscado, respectivamente.
    • <img>: imagem, nesta etiqueta é necessário fornecer o link da imagem. Ex.: <img href="www.teste.com/imeg.jpg"></img>
    • <a>: hiper-ligação para um outro local, seja uma página, um e-mail ou outro serviço. Ex.:  <a href="ht­tp://kassioromulo.org/">Clique aqui e confira noticias</a> ou <a name="nome">texto</a>
    • <textarea>: caixa de texto (com mais de uma linha); estas caixas de texto são muito usadas em blogs, elas podem ser auto selecionáveis e conter outros códigos a serem distribuídos

    Font: Wikipédia.org