Ir para conteúdo
Faça parte da equipe! (2024) ×

html Criando um site HTML (COMANDOS BASICO)

TheScription2016

Por ,
em Desenvolvimento Web

 Compartilhar

Posts Recomendados

Participativo

TheScription2016 45

Postado
Denunciar
Postado

Introdução ao HTML

 

Todo documento HTML é composto de Tags. Este é o nome dados aos comandos HTML. Você deve começar sua página com a tag <HTML>, na primeira linha do código, e terminar com </HTML> na última linha do documento. Perceba que a barra "/" sinaliza o fechamento da tag. Este fechamento é necessário para que ela possa ser interpretada pelo navegador. A estrutura das tags é formada por:

 

<xxx>: Este é o inicio da tag;*

</xxx>: Este é o fechamento da tag para que ela possa funcionar.**

 

* xxx é apenas uma representação de uma tag, não é uma tag HTML.

** Algumas tags não necessitam do fechamento. Neste caso você será avisado.

 

Entre o início da tag e o seu fechamento ficam os textos, parâmetros, atributos e até outras tags que vão formando a sua página. Se você não fechar corretamente as tags, a página não irá ser mostrada direito ou nem mesmo irá aparecer.

 

Após iniciar o documento com a tag <HTML> você deve incluir o cabeçalho que é feito com as tags <HEAD> </HEAD>. E também um título usando o par <TITLE> ... </TITLE>. Geralmente, o título não é mostrado na página, porém os navegadores o utilizam para entitular a janela de visualização. Coloque um título bem claro e explicativo para seus documentos.

 

- A tag <BODY>

 

O "corpo" do documento deve ser demarcado pelo par <BODY> ... </BODY>. Nesta parte do documento serão colocados todos os comandos para apresentação de uma página HTML. Entre as tags <BODY> e </BODY> é que você vai colocar todos os códigos para sua página.

 

Um documento simples seria digitado da seguinte maneira:

É necessário se cadastrar para acessar o conteúdo.

Os espaços em branco são ignorados quando o navegador "lê" o código. Assim o código acima poderia ser escrito da seguinte forma:

 

É necessário se cadastrar para acessar o conteúdo.

A vantagem é que isto economiza espaço em disco, mas é uma maneira muito confusa e relaxada de programar. Acostume-se a organizar seus programas para poder entendê-los posteriormente.

 

- Atributos do <BODY>

 

Através de atributos de <BODY>, podemos definir cores para os textos, links e para o fundo das páginas, bem como uma imagem de fundo (papel de parede da página):

É necessário se cadastrar para acessar o conteúdo.

Onde:

 

- BGCOLOR

Cor de fundo (padrão: cinza ou branco)

 

- TEXT

Cor dos textos da página (padrão: preto)

 

- LINK

Cor dos links (padrão: azul)

 

- ALINK

Cor dos links, quando acionados (padrão: vermelho)

 

- VLINK

Cor dos links, depois de visitados (padrão: azul escuro ou roxo)

 

- BACKGROUND

Imagem de fundo. Saiba como colocar uma imagem de fundo clicando aqui.

 

Em "cor", você pode colocar os valores de cores em inglês como:

 

Preto = black

Branco = white

Azul = blue

Amarelo = yellow

Vermelho = red

 

Você também pode usar o valor hexadecimal de cores ou "RRGGBB", que é a forma mais comum de definir cores usadas na Internet.. Com isso você pode colocar em sua página outras cores diferentes, como um azul-claro. Para isso você deve ter o código das cores, e no lugar de escrever o nome da cor em inglês, você coloca o valor da cor

 

Algumas cores disponíveis RRGGBB (hexadecimal):

É necessário se cadastrar para acessar o conteúdo.

Agora que você já aprendeu como é o arquivo HTML básico , pode começar a ver tags. Elas ficam após o comando <BODY> , no meio do seu texto. Após <BODY> você já pode começar a escrever o que quiser. Há duas formas de formatar o seu texto:

 

- Tags de título <H> - "Headings"

 

Com elas você pode apenas definir o tamanho das letras, mas não o tipo de fontes. Veja agora como ficam as tags "headings" para cabeçalhos que vão do tamanho 1 até 6.

É necessário se cadastrar para acessar o conteúdo.

 

- Tag <FONT>

 

- Você pode também usar as tags de fonte no lugar das tags de "headings". Este tipo de tag é a mais usada, pois você pode definir mais facilmente o tamanho do texto e fonte que você deseja, e personalizar ainda mais a sua página. A tag é <FONT>, e dentro dela você pode definir vários parâmetros, como cor, tamanho e tipo de letra. Veja agora como usar as tags de fontes:

 

- Atributo FACE

 

- FACE:

Uma evolução que permite a escolha da fonte (tipo de letra) para os textos, a tag é feita assim:

É necessário se cadastrar para acessar o conteúdo.

Exemplo:

 

<FONT FACE=Times>Fonte Times New Roman </FONT>

Fonte Times New Roman

 

<FONT FACE=Arial>Fonte Arial </FONT>

Fonte Arial

 

<FONT FACE=Courier>Fonte Courier New </FONT>

Fonte Courier New

 

- Atributo COLOR e SIZE

 

- COLOR e SIZE:

Atributos cor e tamanho:

 

<font size="3"> A palavra terá o tamanho 3</font>

A palavra terá o tamanho 3

 

<font color="red"> A palavra terá a cor vermelha </font>

A palavra terá a cor vermelha.

 

Podemos também combinar as tags acima:

 

<font face="Arial" size="2" color="red">Palavra com tamanho 3 e em vermelho </font>

 

O resultado final será:

Palavra com tamanho 3 e em vermelho

Formatando textos

 

Você pode formatar o texto, colocando-o em negrito, itálico, sublinhado e centralizado. Assim:

 

- Tags <B> , <U> , <I> e <CENTER>

<B> Texto </B> - Texto fica em Negrito.

<U> Texto </U> - Texto Sublinhado.

<I> Texto </I> - Texto em Itálico.

 

<CENTER> Texto </CENTER> Texto centralizado.

 

Os códigos também podem ser escritos uns sobre os outros, acumulando seus efeitos, como por exemplo:

 

<CENTER><B><U>Teste 1</U> <I>e</I> Teste 2</B></CENTER>

 

- Tag <P> - Parágrafos:

 

Em HTML são necessários comandos para definir parágrafos. Não basta você simplesmente pressionar "ENTER" para que a linha vá para baixo, como em editores de texto comuns. Você terá que colocar uma tag para um parágrafo ou para uma linha nova.

 

Para fazer um parágrafo novo, basta colocar a tag <P>. Por exemplo, escreva no editor o seguinte, deste jeito:

 

Parágrafo 1<P>Parágrafo 2.

 

O resultado será este:

 

Parágrafo 1

 

Parágrafo 2

 

- Tag <BR> - Linhas

 

Como você pode ver, o navegador mesmo faz um parágrafo novo cada vez que você coloca esta tag. Caso você queira simplesmente mudar de linha, ao invés de mudar de parágrafo, coloque a tag <BR>. Por exemplo, escreva:

 

Parágrafo 1<BR>Linha 1<P>Parágrafo 2<BR>Linha 2.

O resultado será este:

 

Parágrafo 1

Linha 1

 

Parágrafo 2

Linha 2

  • Curtir 2

"O verdadeiro hacker não se autodenomina com este título, ele é denominado."

UhkocKg.gif

ﾠﾠTroféus e Medalhasﾠﾠ
Link para o comentário
Compartilhar em outros sites
  • 2 meses depois...
  • 2 semanas atrás...
Novato

Josh Nickolas 0

Postado
Denunciar
Postado

vale lembrar que esse é o XHTML, que foi ultrapassado em 2010. tags como <font> não são suportadas no HTML5!

 

vale também ressaltar que o XHTML necessita a tag de declaração <!doctype>:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

e o atributo xmlns na tag <html>:

 

<html xmlns="http://www.w3.org/1999/xhtml">

PARTY HARD

ﾠﾠTroféus e Medalhasﾠﾠ
Link para o comentário
Compartilhar em outros sites
Este tópico está impedido de receber novos posts.
 Compartilhar
Ir para a lista de tópicos
×
×
  • Criar Novo...

Informação Importante

Nós fazemos uso de cookies no seu dispositivo para ajudar a tornar este site melhor. Você pode ajustar suas configurações de cookies , caso contrário, vamos supor que você está bem para continuar.

 Accept Cookies  Reject Cookies