•  
     

[Tutorial] HTML > parte2 formatação

F O R M A T A Ç Ã O D E T E X T O S

<font></font> forma geral:
<font face=verdana size=2 color=000000>
texto em Verdana tamanho 2, cor preta
</font>
<font face=arial size=2 color=000000>
texto em Arial tamanho 2, cor preta
</font>

Todo texto dentro da tag recebe o formato especificado na propriedade face e o tamanho
especificado em size. Para dar cor à fonte informe o código da cor desejada na propriedade color.
Caso esteja planejando criar um website escolha sempre uma fonte padrao:
Times New Roman, Verdana, Arial, Courier New, Comic Sans, Tahoma..

A página HTML é executada no computador do usuário, a apresentação do conteúdo depende da
configuração do sistema operacional e do navegador utilizado.
Por precaução configure com mais de uma fonte:
<font face="verdana, arial, helvetica" size=2 color=000000>
texto em verdana ou arial ou helvetica tamanho 2, cor preta
</font>


Se o navegador não encontrar a fonte verdana o formato atribuído vai ser arial, senão, helvetica. Se os 3 casos forem falsos, o browser assumirá o formato padrão "Times New Roman".
O que acontece se for especificada uma fonte inexistente?
<font face=inexistente size=2>
texto em inexistente tamanho 2
</font>


<i></i> itálico:
<i><font face=verdana size=2>
texto em Verdana tamanho 2, tipo itálico
</font></i>


<b></b> negrito:
<b><font face=verdana size=2>
texto em Verdana tamanho 2, tipo negrito
</font></b>
<strong><font face=verdana size=2>
texto em Verdana tamanho 2, tipo negrito
</font></strong>


<big></big> grande:
<font face=verdana size=2>
<big>
texto em Verdana tamanho 2, tipo grande
</big>
</font>


<small></small> fino:
<font face=verdana size=2>
<small>
texto em Verdana tamanho 2, tipo fino
</small>
</font>


<em></em> Define texto enfatizado. (escrita com caracteres itálicos)

<blink> Texto pulsante

Exemplo de formatação:
Comando:

<html>
<head>
<title>Exemplo</title>
</head>
<body>
<b>Isto é texto em negrito</b> <br>
<strong>Isto é texto forte</strong> <br>
<big>Isto é texto maior</big> <br>
<em>Isto é texto enfatizado</em> <br>
<i>Isto é texto itálico</i> <br>
<small>Isto é texto mais pequeno</small> <br>
Este texto contém uma parte alinhada mais <sub>abaixo</sub> <br>
Este texto contém uma parte alinhada mais <sup>acima</sup>
</body>
</html>
Imagem

<u></u> underline:
<font face=verdana size=2>
<u>
texto em Verdana tamanho 2, tipo sublinhado
</u>
</font>


<li></li> marcadores:
<font face=verdana size=2>
<li>
texto em Verdana tamanho 2, tipo marcado
</li>
<li>
texto em Verdana tamanho 2, tipo marcado
</li>
</font>


<sup></sup> superescrito:
<font face=verdana size=2>
texto em Verdana tamanho 2, tipo
<sup>
superescrito
</sup>
</font>


<sub></sub> subescrito:
<font face=verdana size=2>
texto em Verdana tamanho 2, tipo
<sub>
subescrito
</sub>
</font>


<br> quebrando linhas:
<font face=verdana size=2>
texto em Verdana tamanho 2, tipo<br>
texto em Verdana tamanho 2, tipo<br>
texto em Verdana tamanho 2, tipo<br>
texto em Verdana tamanho 2, tipo<br>
texto em Verdana tamanho 2, tipo<br>
</font>


<p></p> pulando linhas:
<font face=verdana size=2>
texto em Verdana tamanho 2, tipo<p>
texto em Verdana tamanho 2, tipo<p>
texto em Verdana tamanho 2, tipo<p>
texto em Verdana tamanho 2, tipo<p>
texto em Verdana tamanho 2, tipo<p>
</font>


<pre></pre> preformatação:
O texto é exibido exatamente como foi disposto no código HTML, cada ENTER equivale à um
<br>, espaços em branco também são válidos
<pre>
<font face=verdana size=2>
t e x t o e m V e r d a n a t a m a n h o 2, t i p o p r e f o r m a t a d o
</font>
</pre>
<pre>
<font face=verdana size=2>
t e x t o e m
V e r d a n a
t a m a n h o 2,
t i p o p r e f o r m a t a d o
</font>
</pre>


<hr> linha:
<hr size=8>
<font face=verdana size=2>
texto em Verdana tamanho 2, delimitado por uma linha
</font>
<hr>
<font face=verdana size=2>
texto em Verdana tamanho 2, delimitado por uma linha
</font>
<hr size=8 width=200>
<font face=verdana size=2>
texto em Verdana tamanho 2, delimitado por uma linha
</font>
<hr color=ff0000>


<marquee></marquee> texto em movimento:
<marquee>
<font face=verdana size=2>
texto em movimento contínuo
</font>
</marquee>
<marquee BEHAVIOR=SCROLL WIDTH=200 bgcolor="000000">
<font face=verdana size=2 color=ffffff>
texto em movimento contínuo com largura definida e cor de fundo preto
</font>
</marquee>
<marquee BEHAVIOR=SCROLL WIDTH=200 bgcolor="000000" scrolldelay="15"
scrollamount="4">
<font face=verdana size=2 color=ffffff>
texto em movimento contínuo com velocidade 15
</font>
</marquee>
<marquee BEHAVIOR=SLIDE WIDTH=400 bgcolor="000000" scrolldelay="15"
scrollamount="4" DIRECTION=RIGHT>
<font face=verdana size=2 color=ffff00>
texto em movimento tipo slide para direita
</font>
</marquee>
<marquee BEHAVIOR=SLIDE WIDTH=400 bgcolor="ffffff" scrolldelay="15" scrollamount="1"
DIRECTION=RIGHT>
<img src=imagens/computador.gif border=0>
</marquee>
<marquee BEHAVIOR=SCROLL WIDTH=100% bgcolor="ffffff" scrolldelay="15"
scrollamount="10" loop=2>
<img src=imagens/navio.gif border=0>
</marquee>
<marquee BEHAVIOR=ALTERNATE WIDTH=500 bgcolor="000000" scrolldelay="15"
scrollamount="4" loop="6">
<font face=verdana size=2 color=ffff00>
texto em movimento alternado com 6 toques
</font>
</marquee>


&nbsp; espaços:
H &nbsp; T &nbsp; M &nbsp; L
use quando precisar aumentar o espaço entre letras ou palavras, é muito usado por ser simples e
prático, pode-se usar estilos CSS para isso mas alguns browsers ainda não reconhecem arquivos
CSS.

H Y P E R L I N K S

<a></a> link relativo:
<a href=aboutblank><font face=verdana size=2>
link relativo
</font></a>

Links relativos apontam um link para um arquivo ou página local, aboutblank é uma página
fantasma do HTML
Experimente trocar por c:\
É possível utilizar links para a mesma página sem presisar recarregá-la, um dia você vai achar isso
de grande utilidade:
<html><head><title>Tutorial HTML</title></head>
<body><center>
<a name=voltar></a>
<a href=#01>01</a><br>
<a href=#02>02</a><br>
<a href=#03>03</a><br>
<a href=#04>04</a><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name=01></a>01<br>
<a href=#voltar>voltar</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name=02></a>02<br>
<a href=#voltar>voltar</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name=03></a>03<br>
<a href=#voltar>voltar</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name=04></a>04<br>
<a href=#voltar>voltar</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</center><body></html>


<a></a> link absoluto:
<a href=http://www.superdownloads.com.br><font face=verdana size=2>
link absoluto
</font></a>

Link Absoluto redireciona o navegador para um caminho real completo.
http://www.superdownloads.com.br
http://www.google.com.br
http://www.imasters.com.br
http://www.microsoft.com.br
http://javascript.internet.com
...
para criar um link daqueles que ao clicar é baixado um arquivo apenas coloque o caminho relativo
ou absoluto do arquivo.
<a href=programas/EditPad.exe><font face=verdana size=2>
EditPad
</font></a>
<a href=http://www.hinom.pop.com.br/progamas/html2.zip><font face=verdana size=2>
TUTORIAL HTML
</font></a>


target nova janela:
É muito usado em frames e em páginas contém iframes
<a href=aboutblank target=nome_qualquer><font face=verdana size=2>
nova janela
</font></a>


I M A G E N S

<img></img> forma geral:
<img src=imagens/hinomcjbnet.gif width=350 height=125 border=0 galery=no>
src: define o caminho da imagem, pode ser um caminho relativo ou absoluto (.gif, .jpg, .jpeg, .png, .bmp)
width: define a largura da imagem (em pixels)
height: define a altura da imagem (em pixels)
border: define a expessura da borda, sempre aparece quando a imagem está dentro da tag <a></a>
galery: o valor "no" indica ao browser (IE6+) para que não mostre um pequeno menu de opções sempre que o usuário passar o mouse sobre um imagem
<a href=aboutblank>
<img src=imagens/hinomcjbnet.gif width=350 height=125 border=0>
</a>
<a href=aboutblank>
<img src=imagens/hinomcjbnet.gif width=350 height=125>
</a>


Exemplo de imagem num site:
Comando:

<html>
<head>
<title> Tutorial imagem no site </title
</head>
<body>
<img src="avatarjacknaruto.png" width="350" height="350">
</body>
</html>

Imagem

Tutorial parte 1 > http://www.acemprol.com/viewtopic.php?f=16&t=17033


Fonte principal: http://paraiso.etfto.gov.br
Modificado por : [J]ack
 
Atualizado: com imagem
 
CRT C CRT V ?
 
É ruim hein. Olha lá no site ali na fonte. Tem bastante modificação no tut. Eu modifico pra uma forma que eu possa passar e entender melhor.