Início
Loja
HTML básico - códigos HTML
Olá, Estou Aqui, Para Mostrar Para Você Códigos HTML Básicos.Antes de tudo, Nosso browser deve reconhecer a linguagem que estamos usando, e a padronização é a seguinte.
- Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
E em segunda mão as metas irão informar ao browser o charset que utilizaremos na programação.
- Código:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Ele precisa interpretar ao navegador o que utilizaremos em nossos projetos..
hoje em dia alguns códigos não estão mais sendo utilizados por nós programadores, o center sempre é esquecido por mim, pois o CSS e CSS3 nos dão a plataforma toda para formatação de caracteres e textos!
Estrutura básica de uma página HTML
Uma página HTML deve manter sempre uma estrutura básica, a partir da qual são inseridos outros elementos com formatações avançadas. A Listagem 1 mostra a estrutura base de toda página HMTL.
Exemplo:
<html>
<head>
<title>Fr3d - Titulo</title>
</head>
<body>
Corpo do documento. Texto, imagens, tabelas, etc.
</body>
</html>
O conteúdo da tag <title>, ou seja, o título da página, será exibido no topo da janela/aba do browser. Quando a página for adicionada aos favoritos, esse título também será sugerido como atalho.
Atributos da tag <body>
Através da tag <body> (corpo) podemos definir propriedades gerais para toda a página. Por exemplo, é possível determinar a cor do plano de fundo da página, ou usar uma imagem para essa função, e a cor dos links em várias situações (visitados, não visitados, clicados).
Os atributos dessa tag são os seguintes:
[ul]
[li]bgcolor: cor do plano de fundo. Deve ser usado o código hexadecimal ou o nome da cor (conforme tabela vista mais adiante), assim como em todos os atributos de cores.[/li]
[li]background: URL de uma imagem para ser usada como plano de fundo.[/li]
[li]link: cor natural dos links, ou seja, enquanto eles ainda não foram clicados (o padrão é azul).[/li]
[li]alink: cor dos links quando são clicados (o padrão é vermelho).[/li]
[li]vlink: cor dos links após serem visitados (o padrão é roxo).[/li]
[li]text: cor do texto da página.[/li]
[/ul]
A listagem a seguir mostra um exemplo de definição de alguns desses atributos.
Listagem 2: Definindo atributos da tag body
Exemplo:
<body text=”black” bgcolor=”blue” link=”yellow”></body>
A Tag Font <font> Define o Texto e a Cor Do Texto
Usando a tag <font> é possível alterar algumas das características primordiais do texto como o tipo da fonte (Arial, Times New Roman, etc), a cor e o tamanho. Essas propriedades são alteradas com a definição dos atributos face, color e size, respectivamente, da tag font.
O código seguinte é um exemplo de uso desses atributos, logo após são apresentados os resultados.
Listagem 5: Uso da tag <font>
Exemplo:
<font face="Arial" size="3" color="blue">Arial 3 Azul</font> <font face="Times" size="4" color="green">Times 4 Verde</font> <font face="Courier" size="5" color="red">Courrier 5 Vermelho</font>
Formatação adicional do texto
Existem algumas tags bastante úteis que permitem aplicar uma formatação a um trecho do texto, apenas adicionando as tags de abertura e fechamento antes e depois do texto a ser formatado, assim como foi visto para a tag <font>.
[li]<b></b>: marca o texto como em negrito (bold).[/li]
[li]<i></i>: marca o texto como em itálico (italics).[/li]
[li]<u></u>: marca um texto como sublinhado (underlined).[/li]
[li]<s></s> ou <strike></strike>: marca um texto como riscado.[/li]
[li]<sub></sub>: marca um texto como subscrito.[/li]
[li]<sup></sup>: marca o texto como sobrescrito.[/li]
[li]<center></center>: centraliza o texto.[/li]
Observação: as tagas marcadas com asterisco (*) foram descontinuadas na versão 5 da HTML, ou seja, seu uso não é mais indicado.
É possível ainda usar essas tags em conjunto, devendo-se apenas manter a ordem de abertura e fechamento, como será mostrado na Listagem 6.
Listagem 6: Usando tags de formatação de texto
Exemplo:
<b>negrito</b> <i>itálico</i> <sub>subscrito</sub> <sup>sobrescrito</sup> <b><i>negrito e itálico</i></b>
