Curso de HTML/Conteúdo
Origem: Wikilivros, livros abertos por um mundo aberto.
Tal como qualquer linguagem de marcação, a HTML tem marcas ou elementos (conforme nomenclatura oficial do W3C). Os elementos são diferenciados do texto comum por uma marca de início - o "<" e uma marca de final - o ">". Tecnicamente, de acordo com a XML, tudo que está dentro de um "< >" é uma marcação (Markup), e tudo que não está dentro, um texto (CharData).
Podemos vulgarmente classificar os elementos de marcação em dois tipos: os elementos normais e os elementos simples.
Tabela de conteúdo |
[editar] Elementos normais
Chamamos de elementos normais aos elementos de marcação que obrigatoriamente aparecem aos pares, envolvendo um trecho de texto. Sua função é atribuir uma propriedade ao texto envolvido, e somente ao texto envolvido. Sendo assim, nos elementos normais há sempre uma marcação de abertura e uma marcação diferenciada no fechamento.
[editar] Texto em itálico
- Exemplo de texto em itálico:
Tal como a torre pisa <i>estas palavras</i> estão inclinadas.
- Saída:
|
Tal como a torre pisa estas palavras estão inclinadas. |
É possível fazer marcações "em cascata", ou seja, marcar trechos dentro de trechos marcados com outra característica.
[editar] Texto em negrito
- Exemplo de texto sublinhado dentro de texto em negrito.
<b>O Fortuna, velut luna statu variabilis, <u>semper crescis aut decrescis...</u></b>
|
O Fortuna, velut luna statu variabilis, semper crescis aut decrescis... |
[editar] Cruzamento de atributos
Não cruze atributos distintos. Embora o HTML possa ser permissivo quanto a isso, o XHTML já não o é:
- Exemplo de cruzamento de atributos distintos (Não faça isto nos seus projetos)
<b>Cruzamentos entre atributos distintos <i>dá sempre para</b> o torto</i>.
- Saída:
|
Cruzamentos entre atributos distintos dá sempre para o torto. |
[editar] Elementos simples
Os elementos simples são aqueles que se encontram sempre sozinhos, pois a sua função é produzir no texto ou na página alguma exibição especial - ou indicar alguma coisa que não precisa necessariamente ser exibida.
Como não possuem marca de fechamento, os elementos simples são caracterizados por uma barra inclinada / ao final, antes do ">". Quaisquer elementos simples deve ter essa barra, para indicar ao navegador que não é preciso procurar uma marcação de fechamento. (Isso simplifica o processo de exibição da página, em alguns programas.)
[editar] Linha Horizontal
- Exemplo - linha horizontal:
Nome: Alberto<hr />Idade: 46 anos
- Saída
| Nome: Alberto
Idade: 46 anos |
[editar] Mudança de linha
- Exemplo - Mudança de uma linha:
E eu disse que poderia mudar de linha<br />mas ninguém acreditou!
- Saída:
|
E eu disse que poderia mudar de linha |
[editar] Mudança de parágrafo
- Exemplo da mudança de parágrafo:
É recomendável antes de qualquer texto escrever-se <p>, para possibilitar a mudança de parágrafo:
<p>Era uma vez um parágrafo</p><p>Era uma vez outro parágrafo</p> <p>...tantos parágrafos que poderiam existir aqui</p>
- Saída:
|
Era uma vez um parágrafo Era uma vez outro parágrafo ...tantos parágrafos que poderiam existir aqui |
[editar] Estrutura básica
Todo documento HTML obedece a uma estrutura padrão composta por 3 tags ou elementos essenciais e mais alguns atributos.
A estrutura é a seguinte:
<html> <head> <title>Título da Página</title> </head> <body> "Conteúdo da página" </body> </html>
A saída na Janela de um browser seria
[editar] Explicação das tags da estrutura básica
|
Tags <html></html> |
Esta é a tag mais famosa do HTML. Ela inicia e termina todos os documentos HTML que seguem o padrão W3C. Todo o conteúdo que será exibido ou utilizado pela página web deve estar declarado entre elas nas devidas sub-tags.
|
Tags <head></head> |
Mais conhecidas como tags de cabeçalho, elas podem conter as seguintes declarações:
- Do Título da página: <title></title>
- De estilos CSS que a página utilizará: <style></style>
- De scripts JavaScript, VBscript, etc: <script></script>
- De meta dados: <meta>
- De links que permitem a adição de outros conteúdos dependendo do browser sendo utilizado: <link>
|
Tags <title></title> |
São tags utilizadas para definir o título da página. Este título é sempre exibido na Barra de Título do browser.
|
Tags <body></body> |
Definem o local onde deve estar o conteúdo do site e a estrutura na qual ele será exibido. Entre essas tags será incluído o conteúdo da página que poderá ser estruturado através de tabelas ou com o uso de estilos CSS. Podem ser adicionados links que farão a ligação com outras páginas web e utilizados os recursos que foram declarados entre as tags <head></head> (scripts, estilos CSS etc).
