::..Conexão D2S..::



Seja bem vindos ao ConexãoD2S,


Cadastre-se no fórum e tenha benefícios:


*Baixe músicas, jogos, vídeos;
*Faça perguntas, tire suas dúvidas;
*Entre em nosso Xat;
*Crie tópicos, converse direto com o Admin;
*Leia tutoriais completos



Cadastre-se e faça parte da equipe CD2S
Tudo gratuito!
Sign Up NowFAQ
Signup Now
Esta afim fazer uma postagem iniciar um novo tópico e ou interagir com outros
membros deste conselho, você precisa criar uma conta primeiro.
Se esta é sua primeira visita, não se esqueça de verificar o FAQ clicando no link acima. Você pode ter que registrar antes que você possa postar: clique no link de registro para prosseguir. Para começar a ver as mensagens, selecione o fórum que pretende visitar da seleção abaixo.

Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir em baixo Mensagem [Página 1 de 1]

#1 Aula completa [Aprenda HTML P.4] em Seg Maio 21, 2012 9:14 am

Lição 5: O que você já aprendeu?

Comece sempre com o template básico que construímos na lição anterior:

Código:
<html>
 
     <head>
       <title></title>
     </head>
 
     <body>
     </body>
 
   </html>

Coloque sempre o título do seu documento na seção head: <title>Título da sua página</title>. Ver na figura abaixo como o título aparece no topo superior esquerdo do navegador:


O título é muito importante porque é usado pelos mecanismos de busca (tais como o Google) para indexar seu website como mostrado a seguir para o site CSS para Web Design:


Na seção body você escreve o conteúdo da sua página. Você conhece algumas das mais importantes tags:

Código:
<p>É usado para parágraos.</p>
   <b>Torna o texto negrito.</b>
 
   <h1>Cabeçalho</h1>
   <h2>Subtítulo</h2>
   <h3>Sub-subtítulo</h3>

Lembre-se, o único caminho para aprender HTML é por ensaio e erro. Mas, não se preocupe, você não destruirá seu computador e nem a Internet. Então, faça seus experimentos e testes - esta é a melhor maneira de ganhar experiência.

O que significa isto?

Ninguém se tornará um bom criador de websites aprendendo os exemplos contidos neste tutorial. O que você aprenderá neste tutorial é simplesmente o básico para criação - para se tornar um bom desenvolvedor você deverá descobrir caminhos por si mesmo em maneiras criativas.

Então mãos à obra. Comece suas experiências com tudo que você aprendeu até agora.

O que fazer agora?

Tente criar algumas páginas. Por exemplo, construa uma página com um título, um cabeçalho, algum texto, um subtítulo e mais algum texto. Não há nada contra fazer uma consulta no tutorial para construir as páginas, ou seja, a "cola" é permitida. Porém, mais a frente, tente criar sem consultar - "cola" não permitida.

Lição 6: Mais tags HTML

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 <b>, agora saiba que pode obter itálico - letras inclinadas - com a tag <i>. 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 <small>:

Exemplo 2:

Código:
<small>Este texto deve ser com letras em tamanho small.</small>

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 <b> corresponde a última tag de fechamento </b>, 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 <br /> 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: <br />. A princípio podemos escrever também <br></br> (sem conteúdo), mas para que complicar?

Outra tag de comando é <hr /> 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>

Ver perfil do usuário http://conexaod2s.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum


Ganhadores da SOTW
Small BannerSmall BannerSmall BannerSmall BannerSmall BannerBig Banner
PurevB Banner Placeholder