Apostila_HTML_CSS_E-Jovem 11
73 pág.

Apostila_HTML_CSS_E-Jovem 11


DisciplinaLógica I9.963 materiais142.168 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 \u201cTexto\u201d 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
\u2022 É   permitido   utilizar   links   e  âncoras.   Entretanto,   não   existe   certeza   de   como   o 
browser interpretará essas marcações.
\u2022 A TAG <P> não deve ser utilizado.
\u2022 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 \u201cmeus_dados.html\u201d.
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\u201cmeus_dados.html\u201de implemente com estes conhecimentos de parágrafos. 
Salve a página, antes de modificar, como \u201cmeus_dados_modificados.html\u201d
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   \u201cmeus_dados_modificados.html\u201d,   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 \u201cmãozinha\u201d e, ao 
clicar \u201cchamamos\u201d (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:
\u2022 arquivo_destino    \u2192 é o endereço do documento de destino, da página ou imagem 
que queremos abrir.
\u2022 âncora   \u2192 é  o texto ou imagem que servirá  de