DESENVOLVIMENTO EM AMBIENTES WEB

Tags de Estilo Físico:

• São TAGs que alteram o estilo de

apresentação do texto: negrito,
itálico, monoespaçado, etc.
1

Prof. Samuel Rodrigues

DESENVOLVIMENTO EM AMBIENTES WEB
Tags de Estilo Físico:
• <b> Negrito;
• <i> Itálico;
• <tt> Monoespaçado (máquina de escrever);
• <big> Aumenta o tamanho da fonte;
• <small> Diminui o tamanho da fonte;
• <sub> Subscrito;
• <sup> Sobrescrito.
• <u> Sublinhado; 2
• <s> Tracejado.
Prof. Samuel Rodrigues
DESENVOLVIMENTO EM AMBIENTES WEB

Tags de Estilo Lógico:

• São TAGs que descrevem o

significado de seu conteúdo, porém
não especificam a forma como o
texto deverá ser apresentado. 3

Prof. Samuel Rodrigues

DESENVOLVIMENTO EM AMBIENTES WEB
Tags de Estilo Lógico:
• <em> Enfatizar;
• <strong> Mais enfatizado que <em>;
• <code> Identifica amostra de código e exibe
em fonte de extensão fixa.
Ex.: <p><code>#include“io.h”</code></p>
• <samp> Identifica texto de extensão fixa, como
<code>, porém não usada para identificação de
código.
Ex.: <p>Acesse <samp>http://www.w3c.org</samp></p> 4

Prof. Samuel Rodrigues

DESENVOLVIMENTO EM AMBIENTES WEB
Tags de Estilo Lógico:
• <dfn> Indica uma definição.
Ex.: <p>Tags de identificação de texto, que não possuem padrão fixo de
apresentação, são chamadas de <dfn>Tags de Estilos Lógicos</dfn></p>
• <cite> Indica citação.
Ex.: <p>Web Standards é o futuro da Web <cite> (alguém,200x)</cite></p>

Prof. Samuel Rodrigues

DESENVOLVIMENTO EM AMBIENTES WEB
Texto Pré-Formatado:
•Por padrão, o texto de um arquivo XHTML só
sofre alterações através de tags, porém a tag <pre>
é uma exceção à regra.
•Com o uso da tag <pre> é possível fazer com que
o XHTML respeite os espaços em branco
colocados no texto.
•Esta tag é muito útil para exibir código de
6
programação ou para representar tabelas simples.
Prof. Samuel Rodrigues
DESENVOLVIMENTO EM AMBIENTES WEB
Réguas Horizontais:
• A tag <hr> não possui tag de fechamento, assim
como <br />. Sendo assim, usa-se <hr />.
• Atributos
• size – indica a largura da régua, em pixels. O menor
valor é 2 (padrão);
• width – indica largura horizontal da régua, que pode
ser em pixels ou porcentagem proporcional à largura
do navegador;
• align – identifica o alinhamento da régua: center
(padrão), left ou right; 7
• noshade – informa ao browser que a régua não deve
ter o sombreamento tridimensional. Prof. Samuel Rodrigues
DESENVOLVIMENTO EM AMBIENTES WEB
Réguas Horizontais - Exemplos:
•<hr size=“2” width=“100px” align=“left” />
•<hr size=“8” width=“25%” align=“center” />
•<hr />
•<hr align=“center” size=“4” width=“300” noshade=“noshade” />

Prof. Samuel Rodrigues

DESENVOLVIMENTO EM AMBIENTES WEB
Tags de Lista:
• As tags de lista são muito usadas e se dividem em
três tipos:

• Listas Ordenadas – se apresentam classificadas,

normalmente, com números;
• Listas não ordenadas – apresentam símbolos e não são
classificadas;
• Listas de Glossário – cada item da lista tem um termo
e uma definição.
9

Prof. Samuel Rodrigues

DESENVOLVIMENTO EM AMBIENTES WEB
Tags de Lista - Ordenadas:
• A tag que indica uma lista ordenada é a <ol>
(Ordered List). Cada item de uma lista classificada de
ser identificado pela tag <li> e, geralmente, será
numerado sequencialmente. O formato da lista é
definido pelo atributo TYPE que pode ser:1AaIi
• 1: lista numerada;
• A: lista com letras maiúsculas;
• a: lista com letras minúsculas;
• I: lista com algarismos romanos usando caracteres
maiúsculos
• i: lista com algarismos romanos usando caracteres 10

minúsculos
Prof. Samuel Rodrigues
DESENVOLVIMENTO EM AMBIENTES WEB
Tags de Lista – Ordenadas:

<p>Instalação do Windows</p>
<ol>
<li>Coloque o CD no drive durante o boot</li>
<li>Leia o contrato e clique em NEXT</li>
<li>Informe seus dados pessoais</li>
<li>Aguarde a Instalação</li>
</ol>

11

Prof. Samuel Rodrigues

DESENVOLVIMENTO EM AMBIENTES WEB
Tags de Lista – Não Ordenadas:
• A tag que indica uma lista não ordenada é a <ul>.
Cada item de uma lista não ordenada também deve ser
identificado pela tag <li>, como ocorre nas listas
<ol>. O formato da lista é definido pelo atributo
TYPE que pode ser: circle: círculo, square: quadrado,
disc: disco.
<p>Meus esportes preferidos:</p>
<ul>
<li>Ciclismo</li>
<li>Futebol</li> 12
<li>Natação</li>
</ul> Prof. Samuel Rodrigues
DESENVOLVIMENTO EM AMBIENTES WEB
Tags de Lista – Glossário:
• As listas de glossário são diferentes das que vimos
anteriormente, pois cada item da lista deve estar associado
a um termo (<dt>) e possuir uma definição (<dd>). Listas
de glossário são delimitadas pela tag <dl>.
<dl>
<dt>PHP</dt>
<dd>Linguagem de programação que oferece mais
flexibilidade aos sistemas da Web</dd>
<dt>XHTML</dt>
<dd>Linguagem de programação voltada para Web</dd>
</dl> 13

Prof. Samuel Rodrigues

DESENVOLVIMENTO EM AMBIENTES WEB
Aninhando Listas:
• Listas aninhadas são usadas para exibir uma hierarquia
de índices ou menus.
<ol>
<li>WWW</li>
<li>Iniciando o HTML</li>
<ul>
<li>O que é HTML?</li>
<li>Como escrever em HTML?</li>
</ul>
<li>Links</li>
</ol>
14

Prof. Samuel Rodrigues

DESENVOLVIMENTO EM AMBIENTES WEB
Exercício

• Crie uma pagina que resulte na saída exibida a

seguir.

• Mostrar página no browser

15

Prof. Samuel Rodrigues