Surcape -
Redes Sociais:

Você não está conectado. Conecte-se ou registre-se

Tutorial HTML

Mensagem - Página 1 de 1

1Tutorial HTML Empty Tutorial HTML Seg Nov 02, 2015 6:25 pm

MzS

MzSMembro Ativo
Olá, estou aqui para mostrar à vocês 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">[size=11][/size]
<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:

Código:
<html> 
<head> 
<title>Surcape</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:






  • 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]


  • background: URL de uma imagem para ser usada como plano de fundo.[/li]


  • link: cor natural dos links, ou seja, enquanto eles ainda não foram clicados (o padrão é azul).[/li]


  • alink: cor dos links quando são clicados (o padrão é vermelho).[/li]


  • vlink: cor dos links após serem visitados (o padrão é roxo).[/li]


  • text: cor do texto da página.[/li]



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:


Código:
<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>.



<b></b>: marca o texto como em negrito (bold).[/li]

[*]

<i></i>: marca o texto como em itálico (italics).[/li]

[*]

<u></u>: marca um texto como sublinhado (underlined).[/li]

[*]

<s></s> ou <strike></strike>: marca um texto como riscado.[/li]

[*]

<sub></sub>: marca um texto como subscrito.[/li]

[*]

<sup></sup>: marca o texto como sobrescrito.[/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:


Código:
<b>negrito</b> <i>itálico</i> <sub>subscrito</sub> <sup>sobrescrito</sup> <b><i>negrito e itálico</i></b>

2Tutorial HTML Empty Re: Tutorial HTML Seg Nov 02, 2015 6:40 pm

SouthPark

SouthParkParticipativo
Ótimo Tutorial
Obrigado por Compartilhar

3Tutorial HTML Empty Re: Tutorial HTML Seg Nov 02, 2015 6:43 pm

Coiouy

CoiouyParticipativo
Belo tutorial

Conteúdo patrocinado

Mensagem - Página 1 de 1

Permissões neste sub-fórum
Não podes responder a tópicos