Apostila_HTML_CSS_E-Jovem 11
73 pág.

Apostila_HTML_CSS_E-Jovem 11

Disciplina:Análise Textual7.926 materiais281.247 seguidores
Pré-visualização17 páginas
ao desejado. Observe abaixo o código 
e, logo em seguida, como ficou:

Mas o mais comum é que os browsers "entendam" essa formatação como sendo:

Ou seja, como se estivesse faltando uma etiqueta de fechamento de <h2> antes de <h1> 
e faltando uma abertura de <h2> depois do fechamento de <h1>, oferecendo o seguinte 
resultado:

Os editores WYSIWYG naturalmente não permitem o aninhamento de cabeçalhos.

Alinhamento de cabeçalhos

Os cabeçalhos têm atributos de alinhamento:

Como resultado:

1.7.  Fonte <FONT></FONT>

Até agora, construímos uma página relativamente simples. Percebemos então que o texto 
todo ficou de uma cor só até o momento. Mas será que a página só poderá ficar assim? Não 
poderíamos codificar o tipo de fonte, nem o tamanho, muito menos a cor?

Claro que isso é possível! E é para isso que serve a TAG <FONT>

Para utilizar as mudanças acima, devemos complementar a TAG <FONT> com os seus 
atributos, como por exemplo:

Projeto e­Jovem ­ Módulo II: HTML 17

Onde: 

Artibuotos da TAG <FONT>

SIZE
Determina o tamanho da fonte. Esta opção especifica o tamanho da fonte 
utilizada;

FACE
Determina o tipo de fonte que será usado. Se nenhuma fonte for colocada, será 
usada a fonte padrão. Esta opção permite que seja definida uma fonte diferente 
para o texto;

COLOR
Determina a cor da forte. Esta opção especifica a cor do texto. Seu valor pode 
ser especificado pelo código hexadecimal ou, para algumas cores, pelo seu 
nome em inglês (blue, black, white etc.).

Abaixo, vemos a diferença das duas TAGs citadas acima:

Veremos um pouco sobre cada um dos atributos, começando pelo tamanho.

A TAG acima produzirá a palavra “Texto” com o tamanho numero 3(tamanho padrão).

Este comando permite que o autor do documento altere o tamanho das letras em trechos 
específicos de texto. O tamanho básico dos textos é 3 (padrão). Podemos indicar tamanhos 
relativos a esse, por exemplo:

Digite os exemplos e veja a diferença entre eles. 

Para a seleção das fontes, usaremos o atributo FACE:

Digite e veja o resultado. Descubra as outras fontes que existem e faça o texto também.

As cores são introduzidas também através do elemento <FONT> quando queremos que 
alguma parte do texto fique diferente da forma padrão, ou da que foi definida na TAG 
<BODY>. Usa­se também o sistema RGB, para cores (da mesma forma que vimos para 
cores anteriormente), como mostrado no exemplo a seguir:

Assim, um trecho de texto pode ter uma cor diferente da definição geral de cores, feita 
através dos atributos de <BODY>.

Mais exemplos:

Projeto e­Jovem ­ Módulo II: HTML 18

Perceba,   como   foi   dito   anteriormente,   que   tanto   faz   colocar   em   letras  maiúsculas   ou 
minúsculas, pois o navegador vai interpretar corretamente.

1.8.  Estilos de texto

Até agora vimos a estrutura principal do HTML, como modificar a cor de todo o texto, como 
colocar um plano e fundo e como alterar partes do texto, mas e se quisermos colocar, por 
exemplo, uma palavra em negrito e sublinhado, como o título? Sim, isso é possível, por isso 
vamos estudar os estilos.

Estilos Físicos
<B> Negrito
<I> Itálico
<U> Sublinhado. 
<STRIKE> ou 
<S>

Frase riscada.

<BIG> Fonte um pouco maior.
<SMALL> Fonte um pouco menor.
<SUB> Frase em estilo índice, como em H2O, por exemplo.
<SUP> Frase em estilo expoente, como em Km2, por exemplo.

Outras TAGs  de formatação

Temos outras TAGs que, dependendo no Navegador, podem ou não funcionar corretamente:

HTML oferece outras TAGs para formatação:

Outras TAGs de Formatação
<PRE> Apresenta o texto na mesma maneira em que foi digitado, 

mantendo quebras de linha e tabulações
<BLOCKQUOTE> É usado para citações longas

<ADDRESS> Usado para formatar endereços de E­Mail e referências a autores de 
documentos, como por exemplo:

<CODE>. Utilizada para relacionar o código­fonte de programas. Geralmente 
será visualizado em fonte
monoespaçada.

<STRONG> Utilizada para dar ênfase especial a um trecho de texto. 
Geralmente será visualizado em fonte

<DFN> Utilizada para destacar um definição. Geralmente será visualizado 
em fonte  itálica.

<EM> Utilizado para sublinhar parte do texto
<CENTER> Utilizada para centralizar um texto na tela.

A   TAG  <PRE>   permite   criar   textos   pré­formatados,   semelhantes   aos   produzidos   em 
editores   de   texto.   Espaços   em   branco,   marcas   de   tabulação   e   quebras   de   linha   são 
reconhecidos e colocados nos respectivos pontos de inserção. Textos pré­formatados são 
representados pela fonte mono espaçada, definida pelo usuário.

Uma  vez   que  <PRE> mantém o   texto  original,   não   se  deve   forçar   espaços   com essa 
marcação dentro de outra marcação que já apresente tabulações e espaços específicos.

Dentro de um texto pré­formatado:

Projeto e­Jovem ­ Módulo II: HTML 19

• É   permitido   utilizar   links   e  âncoras.   Entretanto,   não   existe   certeza   de   como   o 
browser interpretará essas marcações.

• A TAG <P> não deve ser utilizado.

• Não devem ser usados outros comandos de formatação, tais como os de listas e de 
cabeçalhos.

Observe abaixo:

Que resultaria na seguinte representação na tela:

A Tag <ADDRESS> formata informações, tais como: o endereço, a assinatura e a autoria 
de  quem publicou  a  página.  Normalmente,   estes  dados   são  colocados  no   final  de  um 
documento e, geralmente, serão visualizados em itálico. Exemplo:

O resultado seria:

Projeto e­Jovem ­ Módulo II: HTML 20

Exercício 5: 
Produza uma página utilizando os conhecimentos adquiridos até agora.  Faça uma página 
com se fosse um currículo seu, colocando alguns dados pessoais:  o que gosta (Tipo de 
música, por exemplo). Chame­a de “meus_dados.html”.

1.9.  Parágrafo <P>

Para separar blocos de texto, usamos o elemento <P>, por exemplo:

que produz o seguinte:

Combinando parágrafos e quebras de linhas (Veremos em breve), temos por exemplo:

O resultado da marcação acima é:

A TAG <P> tem atributo de alinhamento semelhante aos cabeçalhos, como nos exemplos a 
seguir:

               

Como vimos anteriormente, podemos também alinhar à  esquerda (align=left), que já  é 
padrão e também à direita (align=right).

Exercício 6: 

Pegue a página“meus_dados.html”e implemente com estes conhecimentos de parágrafos. 
Salve a página, antes de modificar, como “meus_dados_modificados.html”

Projeto e­Jovem ­ Módulo II: HTML 21

1.10.  Quebra de linha <BR>

Quando queremos mudar de linha, usamos o elemento <BR>. Isso só é necessário quando 
queremos uma quebra de linha em determinado ponto, pois os browsers já  quebram as 
linhas automaticamente para apresentar os textos.

Com sucessivos <BR>, podemos inserir diversas linhas em branco nos documentos. Esse 
elemento   tem   um   atributo   especial,   que   será   apresentado   no   item   sobre   inserção   de 
imagens.

1.11.  Linhas horizontais <HR>

A   TAG   <HR>   insere   uma   linha   horizontal   que   tem   diversos   atributos,   oferecendo 
resultados diversos.

Exercício 7: 

Para   exercitar,   através   do   “meus_dados_modificados.html”,   implemente   as   linhas 
horizontais da melhor forma possível.            

1.12.  HiperTexto (Hyperlink)<A>

Agora, teremos a oportunidade de interligar todas as nossas páginas através dos hyperlinks.

Com HTML é possível fazermos ligações de uma região de texto (ou imagem) a um outro 
documento (ou a outra parte do próprio documento). Você já deve ter visto em alguma 
página internet exemplos dessas ligações: o browser destaca essas regiões e imagens do 
texto,   indicando que são  ligações de hipertexto  ­   também chamadas hypertext   links ou 
hiperlinks, ou simplesmente links, onde normalmente, o mouse vira uma “mãozinha” e, ao 
clicar “chamamos” (abrimos) um outro documento, página web ou figura por exemplo.

Para inserir um link em um documento, utilizamos a etiqueta <A>, da seguinte forma:

Onde:

• arquivo_destino    → é o endereço do documento de destino, da página ou imagem 
que queremos abrir.

• âncora   → é  o texto ou imagem que servirá  de