Mostrando postagens com marcador HTML. Mostrar todas as postagens
Mostrando postagens com marcador HTML. Mostrar todas as postagens

terça-feira, 6 de dezembro de 2011

4

Atributos da tag IMG - HTML

ALT
 Indica um texto alternativo, descrevendo brevemente a imagem, que é apresentado no lugar da imagem nos browsers texto, ou quando se desabilita o carregamento de imagens em browsers gráficos. É recomendável que esteja sempre presente. Também aparecerá ao “passar o mouse sobre a imagem”.


Vamos ao exemplo:



HTML>
  <HEAD><TITLE> Minha página. </TITLE></HEAD>
  <BODY>
   
    <IMG SRC="URL_imagem" ALT="descrição_da_imagem">
    
       EXEMPLO: <IMG SRC="mar.gif" ALT="Lindo!">



  </BODY>
</HTML>




WIDTH e HEIGHT


Atributos de dimensão da imagem.


EXEMPLO:



HTML>
  <HEAD><TITLE> Minha página. </TITLE></HEAD>
  <BODY>
   
    <IMG SRC="URL_imagem" ALT="descrição" WIDTH="largura" HEIGHT="altura">
    
       EXEMPLO: <IMG SRC="mar.gif" ALT="Lindo!" WIDTH="6" HEIGHT="4">



  </BODY>
</HTML>




Alinhamento



HTML>
  <HEAD><TITLE> Minha página. </TITLE></HEAD>
  <BODY>
   
    <IMG SRC="imagem.extensão" ALT="descrição" ALIGN="alinhamento_desejado">
    
  </BODY>
</HTML>





NOTAS:



ALIGN=TOP
Alinha o texto adjacente com o topo da imagem, embora com linhas compridas o resultado não seja muito bom.


ALIGN=MIDDLE
Alinha o texto adjacente com o meio da imagem, embora com linhas compridas o resultado não seja muito bom.


ALIGN=BOTTOM
Alinha o texto adjacente com a parte de baixo da imagem (default).


ALIGN=RIGHT
Alinha imagem à direita, e tudo o que houver ao redor (texto, outras imagens) a partir do topo da imagem.


ALIGN=LEFT
Alinha imagem à esquerda, e tudo o que houver ao redor (texto, outras imagens) a partir do topo da imagem.






Molduras de Imagem



Para melhorar ainda mais a apresentação das imagens junto com os textos, foram desenvolvidos atributos de moldura. Estes atributos definem o espaço - vertical e horizontal - deixado entre as imagens e os textos circundantes.




HTML>
  <HEAD><TITLE> Minha página. </TITLE></HEAD>
  <BODY>
   
    <IMG SRC="imagem.extensão" VSPACE="espaço_vertical">
    <IMG SRC=" imagem.extensão" HSPACE="espaço_horizontal">
    
  </BODY>
</HTML>

sábado, 3 de dezembro de 2011

0

Alinhamento - HTML

Acrescentando alinhamento centralizado:


<HTML>
  <HEAD><TITLE> Minha página. </TITLE></HEAD>
  <BODY>
   
    <P align="center" >Corpo da sua página</P>
  
     
  </BODY>
</HTML>




Acrescentando alinhamento à direita:


<HTML>
  <HEAD><TITLE> Minha página. </TITLE></HEAD>
  <BODY>
   
    <P align="right"> Corpo da sua página</P>
  
     
  </BODY>
</HTML>




Acrescentando alinhamento à esquerda (PADRÃO) :


<HTML>
  <HEAD><TITLE> Minha página. </TITLE></HEAD>
  <BODY>
   
    <P align="left" >Corpo da sua página</P>
  
     
  </BODY>
</HTML>




  NOTAS:


No caso do alinhamento à esquerda não é preciso usar os comandos, pois já é de padrão do browser alinhar à esquerda.
0

Atributos da tag BODY - HTML

<HTML>
  <HEAD><TITLE> Minha página. </TITLE></HEAD>
  <BODY BGCOLOR="hexadecimal" LINK="hexadecimal" ALINK="hexadecimal"  VLINK="hexadecimal">
   
     Corpo da sua página
  
  </BODY>
</HTML>




  NOTAS:



BGCOLOR: Background Color, ou seja, cor de fundo da página. Quando não é indicada a cor de
fundo, o browser irá mostrar uma cor padrão, geralmente cinza ou branco.


HEXADECIMAL: Forma em que as cores devem ser colocadas.


LINK: Cor dos links (padrão: azul).


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


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

Ligações - O famoso LINK - HTML

<HTML>
  <HEAD><TITLE> Minha página. </TITLE></HEAD>
  <BODY>
   
     Corpo da sua página<br>
  <A HREF = "arquivo_destino"> âncora </A>
     
  </BODY>
</HTML>


  NOTAS:

 arquivo_destino: é o endereço do documento de destino, da página ou imagem a qual queremos abrir.

 âncora: é o texto ou imagem que servirá de ligação hipertexto do documento sendo apresentado para o
documento de destino.

0

Níveis de Cabeçalhos - HTML

Como montar seu código usando os Headings:


<HTML>
  <HEAD><TITLE> Minha página. </TITLE></HEAD>
  <BODY>
  
  <H1> Este é um cabeçalho de nível 1 </H1> <H2> Este é um cabeçalho de nível 2 </H2>
  <H3> Este é um cabeçalho de nível 3 </H3> <H4> Este é um cabeçalho de nível 4 </H4>
  <H5> Este é um cabeçalho de nível 5 </H5> <H6> Este é um cabeçalho de nível 6 </H6>
  
  </BODY>
</HTML>


Esses cabeçalhos são mostrados no browser da seguinte forma:



Este é um cabeçalho de nível 1





Este é um cabeçalho de nível 2





Este é um cabeçalho de nível 3





Este é um cabeçalho de nível 4





Este é um cabeçalho de nível 5




Este é um cabeçalho de nível 6 


0

Fonte, tamanho, cor - HTML

Agora vamos aprender a modificar a fonte:

Acrescentando a fonte:


<HTML>
  <HEAD><TITLE> Minha pagina </TITLE></HEAD>
  <BODY><FONT face="Comic Sans MS">

  <P> Canção de exílio <br></P>

  <P>Minha terra tem palmeiras,<br>
  Onde canta o Sabiá;<br>
  As aves, que aqui gorjeiam,<br>
  Não gorjeiam como lá.<br></P></FONT>

  </BODY>
</HTML>

Observe a parte em vermelho!

Agora mudando o tamanho:


<HTML>
  <HEAD><TITLE> Minha página. </TITLE></HEAD>
  <BODY><FONT face="Comic Sans MS" size="5">

  <P>Canção de exílio.</P>
  <P>Minha terra tem palmeiras,<br>
  Onde canta o Sabiá;<br>
  As aves, que aqui gorjeiam,<br>
  Não gorjeiam como lá.<br></P></FONT>
  </BODY>
</HTML>


* Os valores da fonte variam de 1 à 10, não passa disso*

Agora como colocar cor:

<HTML>
  <HEAD><TITLE> Minha página. </TITLE></HEAD>
  <BODY><FONT face="Comic Sans MS" size="5" color="FA8072">


  <P>Canção de exílio.</P>
  <P>Minha terra tem palmeiras,<br>
  Onde canta o Sabiá;<br>
  As aves, que aqui gorjeiam,<br>
  Não gorjeiam como lá.<br></P></FONT>
  </BODY>
</HTML>


Os valores da cor tem que ser em hexadecimal, você pode encontrar uma tabela aqui.


Extras:


<I> Itálico, necessitam fechar a TAG </I>

<U> Sublinhado </U>

<B> Negrito </B>

<S> Tachado </S>

Resultado do que aprendemos:


Canção de exílio.
Minha terra tem palmeiras,
Onde canta o Sabiá;
As aves, que aqui gorjeiam,
Não gorjeiam como lá.
0

Parágrafo e Quebra de Linha - HTML

Para iniciar, pegue o básico:



<HTML>
  <HEAD><TITLE> Canção de Exílio </TITLE></HEAD>
  <BODY>

  <P>Minha terra tem palmeiras,<br>
  Onde canta o Sabiá;<br>
  As aves, que aqui gorjeiam,<br>
  Não gorjeiam como lá.<br></P>

  </BODY>
</HTML>




Lembrando que:
<br> Quebra de linha
<P> Parágrafo


Na quebra de linha não existe necessidade em fechá-la, já no parágrafo é preciso usar </P>


Uma forma de testa seu trabalho é abrir o bloco de notas, digitar e salvar como "nomedoarquivo.htm" é muito importante colocar HTM!



0

Montando seu código HTML

Antes de tudo seu código deverá ser assim: (O BÁSICO)

<HTML>
  <HEAD><TITLE> Título de sua página. </TITLE></HEAD>
  <BODY>

  Aqui fica o corpo da sua página.

  </BODY>
</HTML>