página inicial - texto
 
página inicial
 
Capítulos
1. introdução ao html
2. estrutura básica
3. texto
4. imagens
5. links
6. tabelas
7. cores
8. frame
9. formulário
10. glossário
 
Criadores
Fábio Azevedo, 28 anos, paulistano, webmaster. Veja mais.
 
Felipe Braga de Oliveira, 26 anos, paulistano, contador. Veja mais.
 
Luisa Haddad, 22 anos, paulista, webdesigner.
 
Ludmila Simões, 28 anos, jacareiense, webdesigner. Veja mais.
 
Objetivo
Este projeto foi desenvolvido como atividade curricular da materia 'Fundamentos Web' do primeiro semestre do curso de graduação 'Sistemas para internet / Desenvolvimento web' da faculdade de tecnologia IBTA.
 
Desenvolvimento
Utilizamos como ferramenta para a construção deste site o Dreamweaver. Este site foi desenvolvido totalmente em HTML como sendo um dos pré-requisitos para este trabalho.
 
 
3. texto
Assim como em um editor de texto, em html você também poderá formatar o texto.


alinhar big formatando fonte
negrito small tamanho da fonte
itálico cabeçalhos tipo de fonte
sublinhado quebra de linha cor da fonte
sobrescrito parágrafo lista ordenada
subrescrito linha horizontal lista não ordenada
monoespaço recuo lista de definição



alinhar
Em alinhamento de textos podemos ultilizar a teg <div> juntamente com o atributo ALIGN e os valores LEFT (esquerda), CENTER (centralizado), RIGHT (direita) e JUSTIFY (justificado).


alinhar a esquerda
  <div align="left"></div>

exemplo:
  <div align="left">Este texto esta alinhado a esquerda!</div>  
 
Este texto esta alinhado a esquerda!
 


alinhar ao centro

  <div align="center"></div>

exemplo:
  <div align="center">Este texto esta centralizado!</div>  
 
Este texto esta centralizado!
 


alinhar a direita

  <div align="right"></div>

exemplo:
  <div align="right">Este texto esta alinhado a direita!</div>  
 
Este texto esta alinhado a direita!
 


alinhar a esquerda e a direita

  <div align="justify"></div>

exemplo:
  <div align="justify">Este texto esta justificado!</div>  
 
Este texto esta justificado! Este texto esta justificado! Este texto esta justificado! Este texto esta justificado! Este texto esta justificado! Este texto esta justificado! Este texto esta justificado!
 

  topo



negrito
Deixa o texto em negrito.

  <b></b>

exemplo:
  <b>Este texto aparecera em negrito!</b>  
  Este texto aparecera em negrito!  

  topo



itálico
Atribui o efeito itálico no texto.

  <i></i>

exemplo:
  <i>Este texto aparecera em itálico!</i>  
  Este texto aparecera em itálico!  

  topo



sublinhado
Atribui o efeito sublinhado.

  <u></u>

exemplo:
  <u>Este texto aparecera sublinhado!</u>  
  Este texto aparecera em sublinhado!  

  topo



sobrescrito
Eleva o texto e diminui se corpo.

  <sup></sup>

exemplo:
  <sup>Este texto aparecera sobrescrito!</sup>  
  Este texto aparecera sobrescrito!  

  topo



subrescrito
Rebaixa o texto e diminui se corpo.

  <sub></sub>

exemplo:
  <sub>Este texto aparecera subrescrito!</sub>  
  Este texto aparecera subrescrito!  

  topo



monoespaço
Deixa o texto com espaçamento regular.

  <tt></tt>

exemplo:
  <tt>Este texto aparecera com espaços iguais!</tt>  
  Este texto aparecera com espaços iguais!  

  topo



big
Aumenta a fonte e aplica negrito.

  <big></big>

exemplo:
  <big>Este texto aparecera com efeito big!</big>  
  Este texto aparecera com efeito big!  

  topo



small
Reduz a fonte.

  <small></small>

exemplo:
  <small>Este texto aparecera com efeito small!</small>  
  Este texto aparecera com efeito small!  

  topo



cabeçalhos
A tag cabeçalho é usada para dividir seções do texto, como capítulos de um livro. Podemo usar a tag H1 a H6, respectivamente o tamanho maior para o menor e atribui o efeito negrito.


tamanho 1

  <h1></h1>

exemplo:
  <h1>Tamanho 1</h1>  
 

Tamanho 1
 


tamanho 2

  <h2></h2>

exemplo:
  <h2>Tamanho 2</h2>  
 

Tamanho 2
 


tamanho 3
  <h3></h3>

exemplo:
  <h3>Tamanho 3</h3>  
 

Tamanho 3
 


tamanho 4

  <h4></h4>

exemplo:
  <h4>Tamanho 4</h4>  
 

Tamanho 4
 


tamanho 5

  <h5></h5>

exemplo:
  <h5>Tamanho 5</h5>  
 
Tamanho 5
 


tamanho 6

  <h6></h6>

exemplo:
  <h6>Tamanho 6</h6>  
 
Tamanho 6
 

  topo



quebra de linha
A etiqueta <BR> serve para quebrar ("BReak") a linha de texto. Aplique-a quando quiser forçar uma quebra ou quando quiser dar espaços extras entre parágrafos.

  <br>

exemplo:
  Este texto aparecera com <br> uma quebra de linha!  
  Este texto aparecera com
uma quebra de linha!		  

  topo



parágrafo
Um parágrafo é delimitado no início e no fim por <P> e </P>, respectivamente, e pode ser alinhado à esquerda, à direita ou centralizado. A marca de fechamento desta tag em particular pode estar presente ou não.

  <p></p>

exemplo:
  <p>Este texto aparecera em um parágrafo!</p>
<p>Este texto aparecera em um parágrafo!</p>		  
 

Este texto aparecera em um parágrafo! Este texto aparecera em um parágrafo! Este texto aparecera em um parágrafo!

Este texto aparecera em um parágrafo! Este texto aparecera em um parágrafo! Este texto aparecera em um parágrafo!
 


alinhado a esquerda

  <p align="left"></p>

exemplo:
  Alinhar esquerda:
<p align="left">Este texto aparecera em um parágrafo!</p> 		 
 

Este texto aparecera em um parágrafo! Este texto aparecera em um parágrafo! Este texto aparecera em um parágrafo!
 


alinhado ao centro

  <p align="center"></p>

exemplo:
  Alinhar centro:
<p align="center">Este texto aparecera em um parágrafo!</p> 		 
 

Este texto aparecera em um parágrafo! Este texto aparecera em um parágrafo! Este texto aparecera em um parágrafo!
 


alinhado a direita

  <p align="right"></p>

exemplo:
  Alinhar direita:
<p align="right">Este texto aparecera em um parágrafo!</p> 		 
 

Este texto aparecera em um parágrafo! Este texto aparecera em um parágrafo! Este texto aparecera em um parágrafo!
 

  topo



linha horizontal
Desenha uma linha horizontal, geralmente usada para separar visualmente as seções da página da web.

  <hr>
<size=>
<width=>
<align=> (opções disponivel: left, center, right)

exemplo:
  <hr>  
 
 

exemplo:
  <hr size=8 width=80%>  
 
 

exemplo:
  Linha alinhada a esquerda:
<hr size=2 width=80% align=left>		  
 
 

exemplo:
  Linha alinhada ao centro:
<hr size=2 width=80% align=center>		  
 
 

exemplo:
  Linha alinhada a direita:
<hr size=2 width=80% align=right>		  
 
 

  topo



recuo
Destaca um bloco de texto citado de outra fonte, por meio de endentação à esquerda e à direita.

  <blockquote></blockquote>

exemplo:
  <blockquote>Este texto aparecera com recuo!</blockquote>  
 
Este texto aparecera com recuo! Este texto aparecera com recuo! Este texto aparecera com recuo! Este texto aparecera com recuo! Este texto aparecera com recuo!
 

  topo



formatando fonte
Para fazer alterações no tamanho, tipo e cor da fonte de seu texto você utilizará a tag Fonte <font></font> que é do tipo contêiner.

  <font size="" face="" color=""></font>

  topo



tamanho da fonte
O tamanho Size especifica o tamanho da fonte utilizada. Os valores permitidos vão de um, o menor, a sete, o maior.

  <font size=""></font>


tamanho 1

exemplo:
  <font size="1">Fonte de tamanho 1!</font>  
 
Fonte de tamanho 1!
 


tamanho 2

exemplo:
  <font size="2">Fonte de tamanho 2!</font>  
 
Fonte de tamanho 2!
 


tamanho 3

exemplo:
  <font size="3">Fonte de tamanho 3!</font>  
 
Fonte de tamanho 3!
 


tamanho 4

exemplo:
  <font size="5">Fonte de tamanho 4!</font>  
 
Fonte de tamanho 4!
 


tamanho 5

exemplo:
  <font size="5">Fonte de tamanho 5!</font>  
 
Fonte de tamanho 5!
 


tamanho 6

exemplo:
  <font size="5">Fonte de tamanho 6!</font>  
 
Fonte de tamanho 6!
 


tamanho 7

exemplo:
  <font size="7">Fonte de tamanho 7!</font>  
 
Fonte de tamanho 7!
 

  topo



tipo de fonte
Esse parâmetro permite que seja escolhida uma fonte diferente para o texto. Podem ser especificadas várias fontes, de maneira que, se o sistema não possuir uma determinada fonte ele irá utilizar outra. Se não forem encontradas as fontes especificadas, então, o texto será apresentado na fonte padrão. O ideal é sempre utilizar mais de um tipo de fonte.

  <font face=""></font>


fonte arial

exemplo:
  <font face="Arial, Helvetica, sans-serif">Este texto utilizando fonte Arial!</font>  
 
Este texto utilizando fonte Arial!
 


fonte times new roman

exemplo:
  <font face="Times New Roman, Times, serif">Este texto utilizando fonte Times New Roman!</font>  
 
Este texto utilizando fonte Times New Roman!
 


fonte verdana

exemplo:
  <font face="Verdana, Arial, Helvetica, sans-serif">Este texto utilizando fonte Verdana!</font>  
 
Este texto utilizando fonte Verdana!
 


fonte georgia

exemplo:
  <font face="Georgia, Times New Roman, Times, serif">Este texto utilizando fonte Georgia!</font>  
 
Este texto utilizando fonte Georgia!
 


fonte courier

exemplo:
  <font face="Courier New, Courier, monospace">Este texto utilizando fonte Courier!</font>  
 
Este texto utilizando fonte Courier!
 

  topo



cor na fonte
Este parâmetro especifica a cor do texto. Seu valor será especificado no formato hexadecimal, RGB ou através de um nome predefinido de cores.

Veja mais informações sobre cores clicando aqui.

  <font color=""></font>


cor azul

exemplo:
  <font color="#000099">Este texto está em azul!</font>  
 
Este texto está em azul!
 


cor vermelho

exemplo:
  <font color="#CC0000">Este texto está em vermelho!</font>  
 
Este texto está em vermelho!
 


cor verde

exemplo:
  <font color="green">Este texto está em verde!</font>  
 
Este texto está em verde!
 

  topo



lista ordenada
As listas ordenadas são utilizadas para exibir uma relação de itens numerados, organizados por seqüência ou ordem de imporância.

  <ol></ol>
<li></li>
<type="">(tipos disponíveis: A,a,I,i,1)
<start=>

exemplo:
  <ol>
<li>Elemento 1</li>
<li>Elemento 2
<ol>
<li>Elemento 2.1</li>
</ol>
</li>
</ol>		  
 
  1. Elemento 1
  2. Elemento 2
    1. Elemento 2.1
 

exemplo:
  <ol type="A" start=4>
<li>Elemento 1</li>
<li>Elemento 2
<ol type="a" start=1>
<li>Elemento 2.1</li>
</ol>
</li>
</ol>		  
 
  1. Elemento 1
  2. Elemento 2
    1. Elemento 2.1
 

  topo



lista não-ordenada
As listas não-ordenadas são aquelas em que os elementos podem ser apresentados em qualquer ordem.

  <ul></ul>
<li></li>
<type=""> (tipos disponíveis: circle, disc, square)

exemplo:
  <ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>		  
 
  • Elemento 1
  • Elemento 2
  • Elemento 3
 

exemplo:
  <ul type="disc">
<li>Elemento 1</li>
<li>Elemento 2
<ul>
<li>Elemento 2.1</li>
<li>Elemento 2.2
<ul>
<li>Elemento 2.2.1</li>
</ul>
</li>
</ul>
</li>
<li>Elemento 3</li>
<li>Elemento 4 </li>
</ul>		  
 
  • Elemento 1
  • Elemento 2
    • Elemento 2.1
    • Elemento 2.2
      • Elemento 2.2.1
  • Elemento 3
  • Elemento 4
 

exemplo:
  <ul type="circle">
<li>Elemento 1</li>
<li>Elemento 2
<ul>
<li>Elemento 2.1</li>
<li>Elemento 2.2
<ul>
<li>Elemento 2.2.1</li>
</ul>
</li>
</ul>
</li>
<li>Elemento 3</li>
<li>Elemento 4 </li>
</ul>		  
 
  • Elemento 1
  • Elemento 2
    • Elemento 2.1
    • Elemento 2.2
      • Elemento 2.2.1
  • Elemento 3
  • Elemento 4
 

exemplo:
  <ul type="square">
<li>Elemento 1</li>
<li>Elemento 2
<ul>
<li>Elemento 2.1</li>
<li>Elemento 2.2
<ul>
<li>Elemento 2.2.1</li>
</ul>
</li>
</ul>
</li>
<li>Elemento 3</li>
<li>Elemento 4 </li>
</ul>		  
 
  • Elemento 1
  • Elemento 2
    • Elemento 2.1
    • Elemento 2.2
      • Elemento 2.2.1
  • Elemento 3
  • Elemento 4
 

  topo



lista de definição
As listas de definição consistem de uma lista de termos com as respectivas descrições, deslocadas para a direita em relação aos termos.

  <dl></dl>
<dt></dt>
<dd></dd>

exemplo:
  <dl>
<dt>Aqui vai o título 1</dt>
<dd>Elemento 1 Elemento 1</dd>
<dd>Elemento 2 Elemento 2</dd>
<dt>Aqui vai o título 2</dt>
<dd>Elemento 1 Elemento 1</dd>
<dd>Elemento 2 Elemento 2</dd>
</dl>		  
 
Aqui vai o título 1
Elemento 1 Elemento 1
Elemento 2 Elemento 2
Aqui vai o título 2
Elemento 1 Elemento 1
Elemento 2 Elemento 2
 

  topo
 
  © 2008 aprendahtml.com.br Todos os direitos reservados.