Exercício 3 – TAGS DE ALINHAMENTO
Assim, como num documento comum, há necessidade de melhorar a aparência do
documento, e a primeira providência a tomar é cuidar do alinhamento do texto. O
Alinhamento padrão que vem configurado nos navegadores, é a esquerda. Para entender isto, digite a listagem 1.4, e salve como exemplo3.html, e acompanhe o
conceito de tag que marcam o alinhamento dos títulos e paragráfos nas páginas.
Listagem 1.4
<html>
<head>
<title>Tags para Alinhamentos</title>
</head>
<body>
<h4 align=center>Título Centralizado</h4>
<h4 align=right>Título À Direita</h4>
<h4 align=left> Título À Esquerda<h4>
<hr>
<p align=center> Parágrafo ao Centro
<p align=right>Parágrafo a direita
<p align=left>Paragráfo a esquerda
<p align=justify>Este é um texto
justificado. Na linguagem HTML temos vários tipos de
alinhamentos que você poderá aplicar em sua página.
Nesta parte do livro,veremos como alinhar linhas,
parágrafos e cabeçalhos.
<br>
<br>
<hr width=50% align=center>
<blockquote>Texto com mais
margem</blockquote>
<blockquote><blockquote>Tem com mais margem
ainda</blockquote></blockquote>
</body>
</html>
Fim da Listagem 1.4
CONCEITO DOS TAGS USADOS NESTE EXERCÍCIO
| TAG |
O QUE FAZ |
| <center> |
Alinha o trecho (texto, imagem ou tabela ao centro> |
align=center,
right, left ou
justify |
Atribuídos dentro do tag <p> que marca o início de um parágrafo
modificam o alinhamento do título.
Center= alinha ao centro
Right = alinha a direita
Left = alinha a esquerda
Justify = faz a justificação do parágrafo. |
| <blockquote> |
Adiciona uma margem de cerca de um centímetro |
| <hr> |
Atributos
Size = define a altura da linha. Exemplo: <hr size=50>
Width = define a largura da linha horizontal.
Exemplo: <hr width=200>ou <hr width=50%>
Noshade = desenha a linha sem a sombra para dar o efeito de três
dimensões. Exemplo: <hr noshade> |
Exercício 4 – FORMATAÇÃO DE ESTILOS
Muito bem caro estudante, perceba que a cada exemplo sua página vai melhorando
ainda mais sua aparência. Neste exemplo trabalharemos com a formatação das letras
bem como cor, tamanho de fonte, estilo, e etc..
Bem, preparado?
Vamos lá novamente para mais um estudo!
Para entender isto, digite a listagem 1.5, e salve como exemplo4.html,
Listagem 1.5
<html>
<head>
<title>Formatando Estilos</title>
</head>
<body>
<center>Mudando o Estilo dos Caracteres</center>
<p>
<b>Texto em Negrito</b><br>
<i>Texto em Itálico</i><br>
<u>Texto sublinhado</u><br>
<tt>Texto Monoespaçado</tt><br>
<br><font color=red>Texto em Vermelho</font>
<br><font size=5>Texto em Tamanho 5</font>
<br><font face=verdana>Texto com a letra
Verdana</font>
<br><font face=arial black>Você pode fazer
combinações</font>
<br><center>
<font color=blue face=verdana size=5><b>Editora
Érica</b></font></center>
<br>Você poderá os atributos para cada tipo de
letra!
<br>
<font color=blue size=6>E</font><font color=red
size=4>ditora Érica</font>
<br>
<pre>
Estamos progredindo
no curso de HTML.
Este tag permite que todos os espaços
feitos no código fonte
sejam respeitados. Certo?
</pre>
</body>
</html>
Fim da Listagem 1.5
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereço
digite C:\Meus documentos\exemplo4.html. Veja a figura 1.5
