Tutorial HTML Part2

Documentos HTML são definidos por elementos HTML.

Elementos HTML
Um elemento HTML é tudo da marca de início para a marca final:

Start tag *Element contentEnd tag *
<p>This is a paragraph</p>
<a href="default.htm">This is a link</a>
<br>
* A marca de início é muitas vezes chamado de tag de abertura . A marca final é muitas vezes chamado de tag de fechamento .


Sintaxe de elemento HTML
Um elemento HTML começa com a tag / abertura marca de início
Um elemento HTML termina com uma tag / tag de fechamento final
O conteúdo do elemento é tudo entre o início eo fim da tag
Alguns elementos HTML têm conteúdo vazio
Os elementos vazios são fechados na marca de início
A maioria dos elementos HTML podem ter atributos
Dica: Você vai aprender sobre os atributos no próximo capítulo deste tutorial.

Elementos HTML aninhadas
A maioria dos elementos HTML podem ser aninhados (pode conter outros elementos HTML).

Documentos HTML consistem em elementos HTML aninhadas.

Exemplo de documento HTML
<!DOCTYPE html>
  <html>

    <body>
        <p>This is my first paragraph.</p>
   </body>

  </html>
O exemplo acima contém três elementos HTML.

Exemplo HTML Explicado
O elemento <p>:

<p>This is my first paragraph.</p>
O elemento <p> define um parágrafo no documento HTML. 
O elemento tem um <p> tag inicial e uma tag final </ p>. 
O conteúdo do elemento é: Este é o meu primeiro parágrafo.

O elemento <body>:

<body>
<p>This is my first paragraph.</p>
</body>
O elemento <body> define o corpo do documento HTML. 
O elemento tem um <body> tag inicial e uma tag final </ body>. 
The conteúdo do elemento é outro elemento HTML (elemento AP).

O elemento <html>:

   <html>

       <body>
          <p>This is my first paragraph.</p>
      </body>

  </html>
O elemento <html> define todo o documento HTML. 
O elemento tem uma marca de início <html> e uma tag final </ html>. 
O conteúdo do elemento é outro elemento HTML (a elemento do corpo).

Não se esqueça do Tag End
Alguns elementos HTML podem ser exibidos corretamente, mesmo se você esquecer a tag end:

<p>This is a paragraph
<p>This is a paragraph
O exemplo acima funciona na maioria dos navegadores, pois a tag de fechamento é considerado opcional.

Nunca confie nisso. Muitos elementos HTML irá produzir resultados inesperados e / ou erros se você esquecer a tag final.

Elementos HTML vazias
Elementos HTML sem conteúdo são chamados de elementos vazios.

<br> é um elemento vazio, sem uma tag de fechamento (o tag <br> define uma quebra de linha).

*Dica: Em XHTML, todos os elementos devem ser fechados. Adicionando uma barra dentro da tag de início, como <br />, é a maneira correta de fechar elementos vazios em XHTML (e XML).

HTML Dica: Use minúsculas Marcações
Tags HTML não são sensíveis à caixa: <P> significa o mesmo que <p>. Muitos sites usam tags HTML maiúsculas.


Usar tags minúsculas porque o World Wide Web Consortium (W3C) recomenda minúsculas em HTML 4, e exige etiquetas minúsculas em XHTML.

Atributos fornecem informações adicionais sobre elementos HTML.

Atributos HTML
Elementos HTML podem ter atributos
Atributos fornecem informações adicionais sobre um elemento
Os atributos são sempre fixados no início da tag
Atributos vêm em pares nome / valor, como: name = "valor"
Atributo Exemplo
Links em HTML são definidas com a tag <a>. O endereço do link é especificado no atributo href :

Ex:

<!DOCTYPE html>
  <html>
    <body>

     <a href="http://www.omegapontocom.blogspot.com.br">
     This is a link</a>

    </body>
  </html>

Citação sempre Valores de Atributo
Os valores dos atributos devem sempre estar entre aspas.

Aspas duplas estilo são os mais comuns, mas aspas estilo único também são permitidos.

** Dica: Em alguns casos raros, quando o próprio valor do atributo contém citações, é necessário usar aspas simples: name = "shotgun" John Nelson '


HTML Dica: Use minúsculas Atributos
Os nomes dos atributos e valores de atributos são case-insensitive.

No entanto, o World Wide Web Consortium (W3C) recomenda atributos minúsculas / valores de atributos em sua 4 recomendação HTML.

As versões mais recentes de (X) HTML exigirá atributos minúsculas.

HTML Atributos de Referência
A lista completa dos atributos legais para cada elemento HTML está listada em nosso: Referência Tag HTML .


Abaixo está uma lista de alguns dos atributos que podem ser usados ​​em qualquer elemento HTML:


AttributeDescription
classSpecifies one or more classnames for an element (refers to a class in a style sheet)
idSpecifies a unique id for an element
styleSpecifies an inline CSS style for an element
titleSpecifies extra information about an element (displayed as a tool tip)
Para mais informações sobre atributos globais: Em breve nova página c/ atributos

Os títulos são importantes em documentos HTML.

Títulos HTML
Os títulos são definidas com a <h1> a tags <h6>.

<h1> define o título mais importante. <h6> define o título menos importante.

Ex:

<!DOCTYPE html>
  <html>
   <body>

   <h1>This is heading 1</h1>
   <h2>This is heading 2</h2>
   <h3>This is heading 3</h3>
   <h4>This is heading 4</h4>
   <h5>This is heading 5</h5>
   <h6>This is heading 6</h6>

   </body>
  </html>

Nota: Navegadores adicionar automaticamente um espaço vazio (a margem), antes e depois de cada título.

Os títulos são importantes
Use títulos HTML apenas para títulos. Não use títulos para tornar o texto BIG ou negrito .

Os motores de busca utilizar seus títulos para indexar a estrutura eo conteúdo de suas páginas web.

Como os usuários podem folhear suas páginas, seus títulos, é importante o uso de títulos para mostrar a estrutura do documento.

H1 posições devem ser utilizados como principais posições, seguido por posições H2, então as posições menos importantes H3, e assim por diante.

Linhas HTML
A tag <hr> cria uma linha horizontal em uma página HTML. hr O elemento pode ser usado para separar o conteúdo:

Ex:

<!DOCTYPE html>
  <html>
    <body>
       <p>The hr tag defines a horizontal rule:</p>
        <hr>
       <p>This is a paragraph.</p>
        <hr>
       <p>This is a paragraph.</p>
        <hr>
       <p>This is a paragraph.</p>
    </body>
  </html>

Comentários HTML
Os comentários podem ser inseridos no código HTML para torná-lo mais legível e compreensível. Os comentários são ignorados pelo navegador e não são exibidos.

Os comentários são escritos assim:

Ex:

<!DOCTYPE html>
  <html>
    <body>

      <!--This comment will not be displayed-->
       <p>This is a regular paragraph</p>

    </body>
  </html>

Nota: Há um ponto de exclamação após o parêntese de abertura, mas não antes do colchete de fechamento.

HTML Dica - Como Exibir código fonte HTML
Você já viu uma página da Web e se perguntou "Hey! Como eles fizeram isso?"

Para descobrir, clique com botão direito na página e selecione "View Source" (IE) ou "View Page Source" 
(Firefox) ou similar para outros navegadores. Isto irá abrir uma janela contendo o código HTML da página.

HTML Tag Reference

Referência tag 'W3Schools contém informações adicionais sobre essas marcas e seus atributos.
Você vai aprender mais sobre HTML tags e atributos nos próximos capítulos deste tutorial.
TagDescription
<html>Defines an HTML document
<body>Defines the document's body
<h1> to <h6>Defines HTML headings
<hr>Defines a horizontal line
<!-->Defines a comment

Documentos HTML são divididos em parágrafos.

Parágrafos em HTML
Parágrafos são definidos com a tag <p>.

Ex:

<!DOCTYPE html>
  <html>
   <body>

    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>

   </body>
  </html>
Nota: Navegadores adicionar automaticamente uma linha em branco antes e depois de um parágrafo.

Não se esqueça do Tag End
A maioria dos navegadores irá exibir HTML corretamente, mesmo se você esquecer a tag end:

Ex:

<!DOCTYPE html>
   <html>
    <body>

     <p>This is a paragraph.
     <p>This is a paragraph.
     <p>This is a paragraph.

   <p>Don't forget to close your HTML tags!</p>

    </body>
  </html>

O exemplo acima irá funcionar na maioria dos navegadores, mas não confie nele. Esquecendo a tag final pode produzir resultados inesperados ou erros.

Nota: futura versão do HTML não vai permitir que você pule tags de fim.

Quebras de linha HTML
Use a tag <br> se você quiser uma quebra de linha (uma nova linha) sem iniciar um novo parágrafo:

Ex:

<!DOCTYPE html>
  <html>
   <body>

       <p>This is<br>a para<br>graph with line breaks</p>

   </body>
  </html>


O elemento <br> é um elemento HTML vazio. Ela não tem tag final.

Saída HTML - Dicas Úteis
Você não pode ter certeza de como HTML será exibido. Grandes ou pequenas telas e janelas redimensionadas irá criar resultados diferentes.

Com HTML, você não pode alterar a saída, adicionando espaços extras ou linhas extras em seu código HTML.

O navegador irá remover os espaços extras e linhas extras quando a página é exibida. Qualquer número de linhas contam como uma linha, 
e qualquer número de espaços contam como um espaço.

(O exemplo demonstra alguns problemas de formatação HTML)

HTML Tag Reference

Referência tag 'OmegaShare contém informações adicionais sobre os elementos HTML e seus atributos.
TagDescription
<p>Defines a paragraph
<br>Inserts a single line break