Planeta Tutorial
Planeta Tutorial

Ola Visitante, Seja bem vindo(a) ao Planeta Tutorial, esta-mos em construção em breve estaremos prontos para lhe atender e fornecer-lhe tutoriais e dicas diversas para você aprimorar os seus conhecimentos e passar para outros. esperamos que você goste de nosso conteudo e se torne um Membro para poder participar ainda mais de nossas atividades. Vale também ressaltar que, Para você ter acesso aos links por ai , é necessário ser registrado, então se registre .
Se já tem uma conta no forúm,
Logue-se .


Participe do fórum, é rápido e fácil

Planeta Tutorial
Planeta Tutorial

Ola Visitante, Seja bem vindo(a) ao Planeta Tutorial, esta-mos em construção em breve estaremos prontos para lhe atender e fornecer-lhe tutoriais e dicas diversas para você aprimorar os seus conhecimentos e passar para outros. esperamos que você goste de nosso conteudo e se torne um Membro para poder participar ainda mais de nossas atividades. Vale também ressaltar que, Para você ter acesso aos links por ai , é necessário ser registrado, então se registre .
Se já tem uma conta no forúm,
Logue-se .
Planeta Tutorial
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.
Painel de Usuario

Mensagens: 0


Alterar
Ver
Tópicos e mensagens
Menu
Redes Sociais
Procurar
 
 

Resultados por:
 


Rechercher Pesquisa avançada

Translate
Últimos assuntos
» Regras da Área de pedidos
Lição 6: Mais tags HTML EmptyTer 28 Jun 2011 - 17:31 por Admin

» Efeito Glow
Lição 6: Mais tags HTML EmptySeg 27 Jun 2011 - 17:39 por Admin

» Efeito Brilho Suave nas fotos
Lição 6: Mais tags HTML EmptySeg 27 Jun 2011 - 17:33 por Admin

» Arte geométrica com Photoshop
Lição 6: Mais tags HTML EmptySeg 27 Jun 2011 - 17:31 por Admin

» Efeito Varinha Mágica no Photoshop
Lição 6: Mais tags HTML EmptySáb 25 Jun 2011 - 15:20 por konan

» Montagem multicolorida com tintas e efeitos diversos
Lição 6: Mais tags HTML EmptySáb 25 Jun 2011 - 15:18 por konan

» Linhas luminescentes no Photoshop
Lição 6: Mais tags HTML EmptySáb 25 Jun 2011 - 15:17 por konan

» Segredos sobre design de site
Lição 6: Mais tags HTML EmptySex 24 Jun 2011 - 23:00 por konan

» Hardware para iniciantes, parte 5
Lição 6: Mais tags HTML EmptySex 24 Jun 2011 - 22:41 por konan

Estatísticas
Temos 26 usuários registrados
O último membro registrado é kaironborges

Os nossos membros postaram um total de 144 mensagens em 142 assuntos
Radio Jovem Pan
Relogio
março 2024
SegTerQuaQuiSexSábDom
    123
45678910
11121314151617
18192021222324
25262728293031

Calendário Calendário

Visitou

Lição 6: Mais tags HTML

Ir para baixo

Lição 6: Mais tags HTML Empty Lição 6: Mais tags HTML

Mensagem por luan Qui 16 Jun 2011 - 12:09

E aí? Você construiu algumas páginas como sugerimos na lição anterior? Não? Sim? Bem, a seguir um exemplo:
Código:

   <html>
 
     <head>
     <title>Meu website</title>
     </head>
 
     <body>
     <h1>Um cabeçalho</h1>
 
     <p>texto, texto texto, texto</p>
     <h2>Subtítulo</h2>
     <p>texto, texto texto, texto</p>
     </body>
 
    
   </html>
   




E agora?


Agora vamos aprender mais sete tags.
Você já sabe que pode obter negrito com a tag , agora saiba que pode obter itálico - letras inclinadas - com a tag . Já percebeu não é?, "i" vem de "italic".

Exemplo 1:



Código:
<i>Este texto deve ser itálico.</i>





Será renderizado no navegador assim:

Este texto deve ser itálico.



De modo similar você pode fazer seu texto com letra menores usando a tag :

Exemplo 2:




[/code]Este texto deve ser com letras em tamanho small.[/code]







Será renderizado no navegador assim:


Este texto deve ser com letras em tamanho small.



Posso usar várias tags simultaneamente?



Sim você pode usar quantas tags queira desde de que as aninhe convenientemente. Veja como fazer isto no exemplo abaixo:

Exemplo 3:
Para escrever um texto em negrito e itálico faça como mostrado a seguir:



Código:
<b><i>Texto em negrito e itálico.</i></b>






E não assim:



Código:
<b><i>Texto em negrito e itálico.</b></i>






Observe que no primeiro exemplo a primeira tag de abertura corresponde a última tag de fechamento , e o aninhamento está certo. Isto evita confusão para quem escreve o código e para o navegador que lê o código.

Mais tags!


Como foi dito na Lição 4 existem tags que são abertas e fechadas em única tag. Estas tags são comandos isolados, ou seja, não contém nenhum texto dentro delas para poder funcionar. Um exemplo é a tag
que serve para criar uma quebra de linha:

Exemplo 4:



Código:
Um texto<br /> e mais texto em nova linha






Será renderizado no navegador assim:

Um texto


e mais texto em nova linha


Notar que a tag é escrita como se fosse uma mistura de tag de abertura e de fechamento com uma barra "/" no final:
. A princípio podemos escrever também

(sem conteúdo), mas para que complicar?
Outra tag de comando é
que serve para definir uma linha horizontal ("hr" vem "horizontal rule" - régua horizontal ):

Exemplo 5:



Código:
<hr />





Será renderizado no navegador assim:








Exemplo 6:


Código:

   <ul>
     <li>Um item de lista</li>
     <li>Outro item de lista</li>
 
   </ul>
   




Será renderizado no navegador assim:




  • Um item de lista
  • Outro item de lista




Exemplo 7:


Código:

   <ol>
     <li>Primeiro item da lista</li>
     <li>Segundo item da lista</li>
 
   </ol>
   




Será renderizado no navegador assim:



  1. Primeiro item da lista
  2. Segundo item da lista




Uau! Isto é tudo?


Sim,
por enquanto isto é tudo. Aconselhamos, novamente, a fazer seus
próprios experimentos, construindo algumas páginas usando as sete tags
ensinadas nesta lição:


Código:

   <i>Itálico</i>
   <small>Texto tamanho small</small>
 
   <br /> Pula linha
   <hr /> Linha Horizontal
   <blockquote>Indentação</blockquote>
   <ul>Lista</ul>
   <ol>Lista ordenada</ol>
 
   <li>Item de lista</li>
   
luan
luan
Newbie
Newbie

Respeito às regras : Respeito as regras 100%

Mensagens : 18
Reputação : 0
Data de inscrição : 14/06/2011
Idade : 28

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos