Criando um site – Parte 5

Estamos na 5ª parte do tutorial “Criando um Site” de 15 partes. Um terço da caminhada já foi! Veja os tutoriais anteriores , caso não tenha visto:

Hoje você vai aprender  fazer citações, uma peculiar assinatura e caracteres sobrescritos e subscritos. Um pequeno site estará disponível para download no final do tutorial e conterá tudo o que já foi visto nas quatro partes anteriores. Vamos lá?

Citações

As citações, em HTML, podem ser pequenas (ter uma linha) ou grandes (ter várias linhas). As pequenas são definidas pela tag <cite> e as grandes, pela tag <blockquote>.
Pequenas: São aquelas citações que, como dito, só tem um linha. Elas podem ser usadas para dizer uma frase. Como por exemplo:

<cite>Citação HTML.</cite>

É uma citação curta (tag <cite>) escrito “Citação HTML”. A tag <cite> é um elemento inline, ou seja, não há quebra de linha no navegador se você escrever algo depois, até a tag <br>. (Você já reparou que inline é “na mesma linha” em português). Veja como seria renderizado:

CitaçãoA tag <cite> renderiza o resultado em itálico, comum para citações. Você já viu em alguns livros?
Grandes: São as citações que podem ser definidas em várias linhas. Ela é representada pela tag <blockquote>. Mas essa tag pode ser definida para fazer um poema também. Como por exemplo:

<blockquote>
Citação de várias linhas <br />
Essa é uma linha <br />
Essa é outra linha <br />
</blockquote>

A tag blockquote é um elemento block, ou seja, é um bloco, há quebra de linha automática. (block = bloco em português). Veja como seria renderizado

Exemplo <blockquote>Veja que não é renderizado em itálico.

Você já deve ter percebido que eu citei dois tipos de elementos: inline(mesma linha) e block(quebra de linha automática). Veja quais são inline e quais são block, dos quais já aprendemos

Elementos inline – na mesma linha do texto:

  • <a>
  • <img>
  • <b> / <strong>
  • <i> / <em>
  • <u>
  • <cite>
  • <font>

Elementos block – tratados como bloco:

  • <p>
  • <blockquote>
  • <h1> – <h6>
  • <ul>
  • <ol>
  • <dl>
  • <dd>
  • <dt>
  • <li>
  • <table>

AVISO: Você NÃO pode colocar um elemento block dentro de um inline. Você até pode fazer o contrário, mas não pode colocar elemento block dentro de inline

Na próxima página você vai ver o que são caracteres especiais e como usá-los, e a fazer uma peculiar assinatura.

Anúncios

Publicado em 06/08/2010, em Nível médio, tutoriais e marcado como , , . Adicione o link aos favoritos. 2 Comentários.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: