VISITATNTES

sexta-feira, 23 de setembro de 2011

Html Básico Parte - 1

APRENDENDO HTML

Um documento simples seria digitado da seguinte maneira:
<HTML>
<HEAD>
<TITLE> Meu documento HTML </TITLE>
</HEAD>
<BODY>
Aqui você coloca os comandos em HTML.
</BODY>
</HTML>


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. 
<H1> Este é o primeiro nível </H1>
<H2> Este é o segundo nível </H2>
<H3> Este é o terceiro nível </H3>
<H4> Este é o quarto nível </H4>
<H5> Este é o quinto nível </H5>
<H6> Este é o sexto nível </H6>


Atributo FACE
Uma evolução que permite a escolha da fonte (tipo de letra) para os textos, a tag é feita assim:
<FONT FACE=fonte_da_letra>Texto</FONT>

Exemplo:
<FONT FACE=Times>Fonte Times New Roman </FONT>Fonte Times New Roman
<FONT FACE=Courier>Fonte Courier New </FONT>Fonte Courier New

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="orange"> A palavra terá a cor laranja </font> 
A palavra terá a cor laranja.

Alinhamento de texto com tag <P>A
Left: Alinhamento à esquerda
Rigth: Alinhamento à direita
Center: Centralizado
ustify: Texto justificado


exemplos:
<p align="left">Texto alinhado à esquerda</p>
<p align="right">Texto alinhado à direita</p>
<p align="center">Texto centralizado</p>
<p align="justify">Texto justificado</p>


Incluindo imagens
A tag para inserir uma imagem em sua página é a seguinte:
Uma tag de imagem com os atributos combinados ficaria assim:
<img src="nome do arquivo de imagem que vai aparecer">

Um exemplo:
<img src="imagem.jpg alt="Aqui aparece o texto alternativo" border=1 width="100"
height="50">

Veja um exemplo de imagem com link:
<A HREF="http://www.seusite.com/pagina"><img src="imagem.jpg" width="100" height="75" alt="Esta imagem tem um link para seu site Home Pages" border="1"></a>

Listas
Listas Ordenadas
<OL>
<LI> Primeiro item de uma lista ordenada
<LI> Segundo item de uma lista ordenada
<LI> Terceiro item de uma lista ordenada
</OL>


Produz o seguinte resultado:
1. Primeiro item de uma lista ordenada
2. Segundo item de uma lista ordenada
3. Terceiro item de uma lista ordenada


Listas sem Ordenação
<UL>
<LI> Primeiro item de uma lista não ordenada
<LI> Segundo item de uma lista não ordenada
<LI> Terceiro item de uma lista não ordenada
</UL>


Produz o seguinte resultado:
  • Primeiro item de uma lista não ordenada 
  • Segundo item de uma lista não ordenada 
  • Terceiro item de uma lista não ordenada
Colocar texto entre duas linhas
<HR WIDTH=100% COLOR="RED">
<CENTER> 
<FONT SIZE="6"COLOR="ORANGE">
<b>ANDRÉ LUIZ</FONT>
</center></b>
<HR WIDTH=100% COLOR="RED"><br>



ANDRÉ LUIZ



Exemplo de lista sem ordenação
<font color='red'>
<font face="monotype corsiva"size="5">
<b>
<ul>
<li>"A cada dia renasce uma nova esperança,</li>
<li>Creio firmemente nas forças que regem o universo,</li>
<li>Pelos meus caminhos eu nunca ando sozinho,</li>
<li>Meu Mestre minha luz sempre vão juntos comigo,</li>
<li>Por isso eu vou sempre a cada dia mais longe,</li>
<li>Graças a Deus."</li></font>
  • "A cada dia renasce uma nova esperança,
  • Creio firmemente nas forças que regem o universo,
  • Pelos meus caminhos eu nunca ando sozinho,
  • Meu Mestre minha luz sempre vão juntos comigo,
  • Por isso eu vou sempre a cada dia mais longe,
  • Graças a Deus."
Marquee com imagem
<marquee><img src="images.jpg"</fonte></marquee>

Marquee com letreiro
 <marquee style="font-family: arial;" slide direction="right">
<FONT SIZE="6"COLOR="RED">JESUS CRISTO JESUS CRISTO JESUS CRISTO JESUS CRISTO</fonte></marquee>


JESUS CRISTO JESUS CRISTO JESUS CRISTO JESUS CRISTO

Tamanho e cores das letras:

Você também pode usar a tag <FONT> para definir o tamanho, bem como sua cor e tipo da fonte.

<FONT FACE> - Define o tipo de letra
<FONT COLOR> - Define a cor da letra
<FONT SIZE> - Define o tamanho da letra

Veja abaixo alguns exemplos:
<FONT FACE="ARIAL" SIZE="1" COLOR="RED">Fica assim</FONT>
<FONT FACE="ARIAL" SIZE="2" COLOR="BLUE">Fica assim</FONT>
<FONT FACE="ARIAL" SIZE="3" COLOR="PURPLE">Fica assim</FONT>
<FONT FACE="TIMES" SIZE="5" COLOR="BLUE">Fica assim</FONT>
* Note que você define com mais precisão o tamanho das letras do que a tag <H>.

Nenhum comentário:

Postar um comentário