Mdulo 1

Formatao de Textos
Neste captulo, vamos trabalhar com as tags de formatao de textos. Aprenderemos as vrias formas de trabalhar com a esttica da pgina, estilos, pr-formatao de textos e letreiros com movimentos. Se quisermos desenvolver uma pgina com recursos do HTML 4, provvel que no utilizemos as tags normais de formatao, j que essa a funo das folhas de estilo que aprenderemos a criar mais tarde. Existem dois tipos de formatao no HTML: Lgico e fsico. Os efeitos de apresentao na tela so os mesmos: o motivo para a diferenciao entre eles se deve idia bsica da independncia entre especificao e apresentao. A formatao lgica acompanha o significado lgico do texto marcado: um endereo de email, uma citao, etc. Sua apresentao final varia conforme o browser, podendo nos oferecer resultados mais ricos e diversos. A formatao fsica especifica explicitamente o estilo que se quer para o texto: itlico, grifado, etc. A apresentao final deste no sofre grandes variaes. A maioria os desenvolvedores evita a utilizao de formataes lgicas em suas pginas por no ser capaz de manter o controle total sobre elas. Imagine-se projetando por horas um design maravilhoso para seu site e quando voc o coloca no ar, percebe que os seus clientes vem toda aquela formatao de maneira totalmente diferente. Dica: Quando vejamos as CSS (Cascading Style Sheets), ou Folhas de Estilo, prefiraas ao invs das tags de formatao.

Ttulo do Texto (Cabealhos)

Os ttulos so definidos pelas tags <Hn> em que n pode valer n = 1, 2,..., 6. os nmeros de 1 a 6 apresentados nesta tag representam a prioridade do titulo em que, quanto maior o nmero, menor a prioridade ou, para sermos didticos, menos o tamanho. Sintaxe: <H[1..6] ALIGN=[left/right/center]> ttulo </H[1..6]>

Exemplo:

Cujo resultado ser o da figura abaixo:

Cabe destacar algo, que, se no foi visto ainda, um captulo e observao parte sobre acentuao no HTML. No recomendvel que os documentos Web tenham acentos. Ainda que todos os navegadores existentes entendam a presena de um caractere acentuado, existem ocasies em que o texto em HTML pode ficar truncado. Por exemplo, quando algum copia uma pgina web e a envia para outra pessoa por meio de correio eletrnico. Para contornar esse problema, existe uma tabela de cdigos que substituem os acentos. Os navegadores transformam esses cdigos em caracteres acentuados e o documento pode ser transmitido por qualquer meio.

Sugesto: O documento pode ser escrito com os acentos e, antes de ir para o servidor web, pode ser submetido a uma macro de processador de texto (por exemplo, do Word) para substitu-los pelo cdigo correspondente em HTML Veja a tabela de cdigos de acentos: Tabela de acentos:
Abaixo est uma lista dos caracteres especiais da tabela ISO 8859 Latin-1. O uso destes caracteres necessrio para que uma pgina HTML seja exibida corretamente em qualquer computador do mundo.
&AElig; &Aacute; &Acirc; &Agrave; &Aring; &Atilde; &Auml; &Ccedil; &ETH; &Eacute; &Ecirc; &Egrave; &Iacute; &Icirc; &Igrave; &Iuml; &Ntilde; &Ntilde; &Ocirc; &Ograve; &Oslash; &Oslash; &Ouml; &THORN; &Uacute; &Ucirc; &Ugrave; &Uuml; &Yacute; &aacute; &acirc; &aelig; &agrave; &aring; &atilde; &auml; &ccedil; &eacute; &ecirc; &egrave; &eth; &euml; &iacute; &icirc; &igrave; &iuml; &ntilde; &oacute; & < > " &ocirc; &ograve; &otilde; &ouml; &szlig; &thorn; &uacute; &ucirc; &ugrave; &uuml; &yacute; &#161; &#162; &#163; &#165; &#166; &#167; &#168; &#169; / &copy; &#170; &#171; &#173; &#174; / &reg; &#175; &#176; &#177; &#178; &#179; &#180; &#181; &#182; &#183; &#184; &#185; &#186; &#187; &#188; &#189; &#190; &#191; &#215; &#222; &#247; &amp; &lt; &gt; &quot;

Alterao de Fonte
Para alterarmos os atributos da fonte de um texto da home-page, utilizamos a tag <FONT>.

Sintaxe: <FONT SIZE= [tamanho] COLOR=[cor] FACE=[fonte, fonte opcional, ...]> Texto </FONT> Atributos: SIZE Define o tamanho da fonte utilizando um tamanho absoluto ou relativo. O valor
para o tamanho absoluto varia entre 1 e 7(quanto maior o nmero, maior a fonte) e o relativo varia entre -4 e 4 (negativos so valores para fontes menores que o valor padro do navegador e positivos, so maiores).

Obs.: Navegadores diferentes tm tamanhos default (padro) do texto diferentes Alm disso, o prprio usurio pode alterar o valor default do eu browser nas configuraes do prprio browser. FACE Define o tipo de texto. FACE o nome da fonte que a tag vai representar.
Voc pode definir mais de uma fonte para o mesmo texto. As fontes devem ser separadas por vrgula e o browser procura na ordem qual delas ele possui no computador do cliente para representar.

Obs.: Escolha fontes comuns que existam em quase todos os computadores e sempre oferea mais de uma opo de fonte. Lembre-se de que se escolher uma que no existe no computador do usurio, ser apresentada a fontepadro. COLOR Define a cor da fonte do texto. Essa cor pode ser definida por seu nome em ingls (blue, red, yellow e assim por diante) ou por seu cdigo hexadecimal em RGB, precedido pela cerquilha (ou seja, o smbolo #).

Como funciona a paleta de cores do Navegador

Os browsers adotaram o padro de cores RGB (Red,Green, Blue) para trabalhar com as cores em uma pgina web. Todos os monitores coloridos usam esse padro, ao contrrio das impressoras, que usam o formato CMYK. Os valores so distribudos com dois caracteres para cada cor, na mesma ordem apresentada acima. Ela pode variar entre 00 e FF para cada uma, totalizando 256 tons de cores para podermos misturar. Quanto maior o valor que atribuirmos, mais clara ficar a cor. Exemplos: #FF0000 Vermelho-puro #00FF00 Verde-puro #FFCCCC Vermelho bem claro. Observar que para clarear o vermelho-puro, os valores de verde e de azul foram aumentados. #FFFFFF Branco

Mais informaes sobre cores podem ser vistas no arquivo paleta de cores.doc que podem baixar e imprimir.

Pr-Formatao
A marcao <PRE> (abreviao de preformatted) delimita uma rea de texto em que espaos, novas linhas e tabulaes so mantidos. Ou seja, o texto vai ser apresentado da mesma e exata forma como foi digitado, mesmo que no haja marcaes do HTML. uma forma de preservar o formato de um texto. As tags HTML continuam valendo dentro da tag <PRE>. Esse recurso excelente para exemplos de cdigo e extratos bancrios. Exemplo:

Cujo resultado ser:

Formataes Lgicas
<CITE> <CODE> <DFN> <EM> <KBD> Para ttulos de livros, filmes e citaes curtas. Para indicar trechos de cdigos de programas. Indica definio de uma palavra; em gral apresenta o texto em itlico. nfase, tambm apresentado normalmente em itlico. Indica uma entrada via teclado.

<SAMP> <STRONG> <VAR>

Indica um exemplo. Forte nfase, mostrado normalmente em negrito. Indica varivel ou valores que o usurio deve escrever, geralmente mostrado em itlico. <ADDRESS> Assinatura da pgina, ele quebra a linha e apresenta-se em itlico.

Estilos Fsicos
<B> <I> <TT> <U> <STRIKE> ou <S> <BIG> <SMALL> <SUB> <SUP> Negrito (em alguns browsers, pode aparecer sublinhado). Itlico (em alguns browsers, caracteres apensa inclinados). Tipo teletype fonte de espaamento fixo. Sublinhado; deve ser usado com cuidado, pois pode ser confundida com a apresentao de links. Frase riscada Fonte um pouco maior Fonte um pouco menor Subscrito, o texto fica um pouco abaixo da linha normal e um pouco menor. Sobrescrito, o texto fica um pouco acima da linha normal e um pouco menor.

Letreiros Animados (Marquees)

possvel obter o efeito animado de texto por meio da tag <MARQUEE>. Com essa tag, o texto pode se mover de um lado para outro da sua pgina, como se escorregasse por ela.

Sintaxe:
<MARQUEE BEHAVIOR=[scroll/slide/alternate] DIRECTION=[left/right] LOOP=[1..n/infinite] ALIGN=[left/right/center] BGCOLOR=[cor] SCROLLAMOUNT=[espao] SCROLLDELAY=[tempo] HEIGHT=[altura] WIDTH=[largura] HSPACE=[espaamento horizontal] VSPACE=[espaamento vertical]> {Letreiro} </MARQUEE> O maior problema desse efeito que ele s visto por alguns browsers.

Atributos BEHAVIOR Define como o letreiro vai deslizar na tela. Podem ser atribudos trs
valores: SCROLL o letreiro continua rodando continuamente em um mesmo sentido. SLIDE O letreiro parte de um ponto da tela, vai at o outro e pra, quando chegar ao final de seu percurso. ALTERNATE Ele desliza at o outro lado da tela, mas quando chega l, o letreiro volta pela tela novamente, indo e voltando.

DIRECTION Define a posio em que o texto vai deslizar, podendo ser left, right ou
top (de baixo para cima) ou finalmente bottom (de cima para baixo).

Funciona esse atributo, com top e bottom apenas em algumas verses do Internet Explorer.

LOOP Determina quantas vezes o texto deslizar pela tela. Caso queira deslizar
infinitamente o letreiro pela tela, utilize o valor infinite ou simplesmente no insira o atributo LOOP.

HEIGHT e WIDTH Definem, respectivamente, a largura e a altura da tela. Seus valores podem ser apresentados de duas formas: pelo nmero de pixels, ou pela porcentagem de visualizao na tela. HSPACE e VSPACE Determinam o espao em pixels que deve ficar livre em torno do letreiro. HSPACE representa o espao horizontal (aos lados) e VSPACE, o espao vertical (acima e abaixo). BGCOLOR Define a cor de fundo da rea do letreiro. SCROLLAMOUNT e SCROLLDELAY Podemos, com esses dois atributos,
controlar a velocidade do letreiro. O SCROLLDELAY define o tempo, em milissegundos, que o letreiro vai demorar em cada um dos quadros, e o SCROLLAMOUNT define a quantidade de pixels que ele vai percorrer em cada quadro.

Exemplo:
<MARQUEE BEHAVIOR=alternate DIRECTION=right LOOP=3 HEIGHT=10% WIDTH=40% HSPACE=10 VSPACE=20 BGCOLOR=#CCFFCC SCROLLAMOUNT=5 SCROLLDELAY=100>

Pargrafos e Listas
Pargrafo
A tag <P> serve para indicar o incio de um novo pargrafo. Com ela, voc pode definir onde inicia e onde termina cada pargrafo de sua pgina. Se a tag <P> for colocada antes de um ttulo (<H1>, por exemplo), a marca de pargrafo ignorada. Nesse caso o prprio ttulo se encarrega de colocar o espao necessrio.

Sintaxe: <P ALIGN= [left/right/center]> texto </P> Dica: muito importante que voc delimite os pargrafos de sua pgina em vez de
separ-los por tags <BR>. Primeiro, porque fica fcil controlar a organizao de suas pginas e segundo porque se voc estiver interessado em utilizar algumas funes do DHTML, precisar de tags contineres (aquelas que possuem abertura e fechamento).

Bloco de Texto
A tag <BLOCKQUOTE> determina um pargrafo recuado tanto do lado esquerdo quanto do lado direito.

Esse recuo utilizado normalmente para indicar citaes ou comentrios, bem como trechos de destaque. Exemplo:

E o resultado ser:

Diviso de Texto
As divises de texto definem onde o texto deve se dividir e podem tambm definir o alinhamento de um pargrafo ou bloco de texto. A tag <DIV> tambm utilizada como diviso de camadas em DHMTL. Sintaxe: <DIV ALIGN=[left/right/center]> [texto] </DIV>

Listas
As listas so formataes muito utilizadas em paginas web, pois uma forma clara de distino de dados. Alm de ser extremamente atraente, uma lista bem-formatada de fcil pesquisa tambm. As listas podem ser divididas em trs tipos:

 Lista de definio Lista no-ordenada Lista ordenada As listas mais comuns so as ordenadas e no-ordenadas, por apresentarem smbolos em seus itens. Esses smbolos enriquecem a esttica da pgina. Essas listas podem ser utilizadas em conjunto.

Listas de Definio (Definition List)

Tambm so chamadas de listas de glossrio, sendo utilizadas para definir termos, criar textos explicativos, organizando o texto em tpicos e sub-tpicos (ou termos e definio de termo). As tags <DL> e </DL> so combinadas com as tags <DT> para termos (Term) e <DD> para definies do termo apresentado (definition). Sintaxe: <DL><!-- inicio da lista de definio --> <DT> [termo a ser definido] <DD> [definio] </DL><!-- fim da lista de definio --> Exemplo:

Resultado:

Lista No-Ordenada (Lista com Marcadores)

Nesta lista o browser adiciona um smbolo ou marcador ao lado do item. Seus marcadores podem ser controlados e podemos aninhar varias listas. Alm das tags <UL> e </UL> que marcam o incio e o fim da lista, para cada item da lista Sintaxe: <UL TYPE=[disc/circle/square]><!-- incio da ordenada --> <LI TYPE=[disc/circle/square]>[Item da lista] </UL><!-- fim da lista --> lista no-

Exemplo de Aplicao:

Cujo resultado o seguinte:

Outro exemplo:

Cujo resultado ser:

Listas Ordenadas (Ordered Lists)

So aquelas que definem uma ordem para seus dados. Essa definio pode ser arbica, romana, ordenada por letras maisculas ou minsculas. Com isso, possvel estabelecer uma seqncia lgica para a sua lista. Sintaxe: <OL TYPE=[1/I/i/A/a] START=[incio]><!-- incio da ordenada --> <LI TYPE=[1/I/i/A/a] VALUE=[nmero]>[Item da Lista] </OL> <!-- fim da lista --> lista

O resultado ser o seguinte:

Linhas Horizontais (Horizontal Rule)

As linhas da HTML so extremamente atraentes e utilizadas para a diviso de assuntos ou partes de um assunto. A tag <HR> cria uma linha horizontal em alto relevo e de ponta a ponta da pgina. Sintaxe: <HR WIDTH=largura SIZE=[espessura] ALIGN=[left/right/center] NOSHADE COLOR=[cor]>

Exemplo:

E o resultado ser: