MÓDULO 2: Linha Horizontal <hr />. Quebra de linha: <br />.
Parágrafos <p>. Cabeçalho: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.
Comentário: <!-- -->. Atributos comuns.
Tags
• <p></p> - indica um bloco de texto como um parágrafo; uma quebra de linha ocorre antes e depois do aparecimento dessas tags;
o <p align="center"></p> - alinha no centro; o <p align="right"></p> - alinha à direita;
o <p align="left"></p> - ( default ) - alinha à esquerda.
• <h1></h1> .. <h6></h6> - identificam os seis níveis de títulos que podem ser usados em um documento. Cada um dos níveis possui determinada formatação. É adicionada de forma automática uma linha em branco antes e depois de um cabeçalho.
o Contém o atributo align. • <br /> - salto de linha.
• <!-- --> - para escrever um comentário; que não aparece na página.
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3org/1999/xhtml">
<head> <title>Exemplo – 02a</title> </head>
<!-- Programa para exemplificar o uso dos níveis de cabeçalhos--> <body> <h1>Cabeçalho - nível 1</h1> <h2>Cabeçalho - nível 2</h2> <h3>Cabeçalho - nível 3</h3> <h4>Cabeçalho - nível 4</h4> <h5>Cabeçalho - nível 5</h5> <h6>Cabeçalho - nível 6</h6> </body> </html>
Cabeçalho - nível 1
Cabeçalho - nível 2
Cabeçalho - nível 3
• <hr /> - insere uma linha horizontal.
o <hr size="7" /> - insere uma linha de largura 7 (pixels);
o <hr width="50%" /> - insere uma linha que ocupa 50% do espaço horizontal disponível;
o <hr size="70" width="2" align="left" /> - insere uma linha de largura 70 (pixels), comprimento 2 (pixels), alinhada à esquerda;
o <hr width="30%" align="center" noshade /> - insere uma linha de comprimento 30% (do espaço horizontal disponível), alinhada ao centro, sem efeito tridimensional.
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3org/1999/xhtml"> <head> <title>Exemplo – 02b</title> </head> <body> <hr size="7" /> <br />
linha de largura 7 (pixels)<br /> <hr width="50%" /> <br />
linha que ocupa 50% do espaço horizontal disponível<br /> <hr size="70" width="2" align="left" /> <br />
linha de largura 70 (pixels), comprimento 2 (pixels), alinhada à esquerda<br />
<hr width="30%" align="center" noshade /> <br />
linha de comprimento 30% (do espaço horizontal disponível), alinhada ao meio, sem efeito tridimensional<br />
</body> </html>
Entidade
• É uma unidade de armazenamento virtual identificada por uma abreviação (referência), que quando chamada é expandida, exibindo determinados dados;
• Usadas para representar caracteres não ASCII;
• Para representar um modo alternativo à certos caracteres reservados como:
<
,>
e"
; • Deve possuir um nome único;• Deve terminar com um ponto-e-vírgula; • Existem dois tipos:
o Entidades nomeadas1: conjunto de letras para representar determinado caractere; -
começa com o caractere
&
;o Entidades numéricas: números para representar um caractere; - começa com os símbolos
&#
;• Lista de entidades e seus códigos:
"
" "¾
¾ ¾ß
ß ß&
& &¿
¿ ¿à
à à<
< <À
À Àá
á á>
> >Á
Á Áâ
â â  
Â
 Âã
ã ã¡
¡ ¡Ã
à Ãä
ä ä¢
¢ ¢Ä
Ä Äå
å å£
£ £Å
Å Åæ
æ æ¤
¤ ¤Æ
Æ Æç
ç ç¥
¥ ¥Ç
Ç Çè
è è¦
¦ ¦È
È Èé
é é§
§ §É
É Éê
ê ê¨
¨ ¨Ê
Ê Êë
ë ë©
© ©Ë
Ë Ëì
ì ìª
ª ªÌ
Ì Ìí
í í«
« «Í
Í Íî
î î¬
¬ ¬Î
Î Îï
ï ï±
± ±Ò
Ò Òó
ó ó²
² ²Ó
Ó Óô
ô ô³
³ ³Ô
Ô Ôõ
õ õ´
´ ´Õ
Õ Õö
ö öµ
µ µÖ
Ö Ö÷
÷ ÷¶
¶ ¶×
× ×Ø
ø ø·
· ·Ø
Ø Øù
ù ù¸
¸ ¸Ù
Ù Ùú
ú ú¹
¹ ¹Ú
Ú Úû
û ûº
º ºÛ
Û Ûü
ü ü»
» »Ü
Ü Üý
ý ý¼
¼ ¼Ý
Ý ÝÞ
þ þ½
½ ½Þ
Þ Þÿ
ÿ ÿ2ª Lista de Exercícios
1. Indique o código de cada uma das entidades abaixo:
à <
ê >
í ÷
õ "
Ç ©
ü £
É ®
Ã
& 2 ª2. Fazer documentos XHTML que apresente as seguintes janelas: a)
Enumeram-se várias e efetivas vantagens de se usar XHTML nos novos documentos web produzidos ou migrar os documentos atuais escritos em HTML.
E, dentre elas destaca-se em primeiro plano a compatibilidade da linguagem XHTML com as futuras aplicações de usuários, garantindo desde já que as criações XHTML conservar-se-ão estáveis por longos anos.
b)
XHTML
XHTML é uma linguagem de marcação bastante familiar para quem conhece HTML e a transformação de um documento existente de HTML para XHTML é uma tarefa bem simples.
c)
Índice
1. Noções básicas
1.1. Sobre a "World Wide Web"
1.2. O que é preciso para criar páginas para a Web?
1.3. A sua primeira página escrita em HTML
2. Elementos e atributos
2.1. Elementos
2.2. Atributos
d)
Máximas
"O insucesso é apenas uma oportunidade para recomeçar de novo com mais inteligência." Henry Ford "O difícil, vocês sabem, não é fácil..."
Frases exemplificando o uso de entidades
O volume daquela caixa é de 3.000m³.
Foram gastos £1,500 em despesas com o pessoal;
sendo que ¾ deste valor com alimentação e hospedagem. O 1º colocado da competição foi o BRASIL.
MÓDULO 3: Incrementação de texto: Formatar texto: <font>,
<address>, <del>, <ins>, <pre>. Estilo físico: <b>, <u>, <i>,
<sub>, <sup>, <tt>, <s>, <big>, <small>. Estilo lógico: <em>,
<strong>, <kbd>, <samp>, <code>, <var>, <cite>, <dfn>,
<acronym>.
Formatar texto
• <font> </font> - define as características de uma fonte.
o <font face="Arial"> </font> - define o tipo da fonte; o <font size="10"> </font> - define o tamanho da letra; o <font color="blue"> </font> - define a cor do texto;
• <address> - texto para assinatura que geralmente aparecem na parte inferior da página Web e são usadas para indicar quem escreveu, quem deve ser contactado para maiores informações, a data e quaisquer informações de direitos autorais;
• <del> - texto apagado; • <ins> - texto inserido;
• <pre> - texto inserido é pré-formatado, ou seja, é mantida a formatação original, incluindo os espaços em branco e as quebras de linha;
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3org/1999/xhtml"> <head> <title>Exemplo – 03a</title> </head> <body>
<font face="Arial" size="6" color="red">Arial - 6 - Vermelho</font><br /> <font face="Times" size="8" color="blue">Times - 8 - Azul</font><br /> Uma dúzia são: <del>18</del> <ins>12</ins> unidades.<br />
<pre>Texto pré-formatado, onde
todos os espaços são mantidos inclusive o salto de linha.</pre> <hr size=4 />
<address>
Gilene Borges Gomes: gilene@gomeshp.com<br /> http://www.gomeshp.com<br /> Última revisão: 19 - Fev - 2007.<br />
</address> </body> </html>
Estilo Físico
• <b> - texto escrito em negrito; • <u> - texto sublinhado2;
• <i> - texto escrito em itálico;
• <sub> - texto em estilo índice, como em H2O; • <sup> - texto em estilo expoente, como em m3; • <tt> - texto monoespaçado;
• <strike> ou <s> - texto riscado; • <big> - texto com letra maior; • <small> - texto com letra menor;
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3org/1999/xhtml"> <head> <title>Exemplo – 03b</title> </head> <body> <h1>Estilo Físico</h1><br />
<b>texto escrito em negrito;</b><br /> <u>texto sublinhado;</u><br />
<i>texto escrito em itálico;</i><br /> <tt>texto monoespaçado;</tt><br /> <strike>texto riscado;</strike><br /> <big>texto com letra maior;</big><br /> <small>texto com letra menor;</small><br />
texto em estilo índice, como em H<sub>2</sub>O;<br /> texto em estilo expoente, como em m<sup>3</sup>.<br /> </body>
</html>
Estilo Lógico
• <em> - texto enfatizado, geralmente em itálico;
• <strong> - texto mais enfatizado do que a tag <em>, geralmente em negrito; • <kbd> - texto inserido é para ser digitado pelo teclado;
• <samp> - texto pode ser uma saída de programa ou outra fonte de dados; • <code> - texto é código-fonte de alguma linguagem de programação; • <var> - texto que representa uma variável;
• <cite> - citação;
• <dfn> - definição de um termo;
• <acronym> - define um acrônimo; o seu conteúdo é mostrado quando o ponteiro do mouse pára sobre o elemento;
o <acronym title="World Wide Web">WWW</acronym>.
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3org/1999/xhtml"> <head> <title>Exemplo - 03c</title> </head> <body>
<h1>Estilo Lógico</h1><br />
<em>texto enfatizado (itálico);</em><br />
<strong>texto enfatizado (negrito);</strong><br />
texto a ser inserido com o teclado (<kbd>ENTER</kbd>);<br /> <samp>saída de programa ou outra fonte;</samp><br />
O comando em Pascal <code>i := 1;</code><br /> atribui o valor um a variável <var>i</var>.<br />
A arte de vencer se aprende nas derrotas.<cite> Simon Bolívar</cite>.<br />
Estilos que são nomeados depois que foram realmente usados são chamados de <dfn>estilos lógicos</dfn>.<br />
<acronym title="World Wide Web">WWW</acronym><br /> </body>
