terça-feira, 2 de agosto de 2011

Aula 4

Cabeçalhos e titulos

Os cabeçalhos e titulos são usados para dividir seções do texto, pois permite tembém saber em que ponto do site ele se encontra ou de qual assunto a página trata.
Existem 6 tipos de cabeçalhos que começa com H1 e termina com H6, sendo H1 o maior e H6  o menor.

Faça o exemplo abaixo para testar esse topico:

-Abra o bloco de notas e digite o codigo abaixo:

<html>
<head>
<title>Cabeçalhos</title>
<body>
<h1>Cabeçalho com tamanho 1</h1>
<h2>Cabeçalho com tamanho 2</h2>
<h3>Cabeçalho com tamanho 3</h3>
<h4>Cabeçalho com tamanho 4</h4>
<h5>Cabeçalho com tamanho 5</h5>
</body>
</html>

-Salve seu trabalho: Clique no menu arquivo e escolha a opcao salvar como, na caixa nome de arquivo, digite: cabeçalho.html , escolha a pasta meus documentos e clique em salvar.
-Minimize a tela do bloco de notas
-Abra o internet explorer
-Cliqie no menu arquivo, escolha a opcao abrir
-Clique no botao procurar. Ache a pasta meus documentos e dê um duplo clique no arquivo: cabeçalho.html
-Visualize como ficou sua página.
-Feche o internet explorer
-Feche o bloco de notas.


Parágrafos

Existem dois tipos de parágrafos, são eles <p> e <br>
O comando <p> é utilizado para definir o inicio de um novo paragrafo, deixando um espaçamento em branco entra cada paragrafo.
O comando <br> é utilizado como quebra de linha, quando colocado no texto ele joga automaticamente o texto a sua frente para uma linha abaixo colada com a linha de cima.
Faça o exemplo abaixo para testar esse topico:

-Abra o bloco de notas
-Digite esse codigo:

<html>
<head>
<title>Parágrafos</title>
<body>
<p>Este é um exemplo de paragrafação ''P''</p>
<p>ele insere uma linha entre os escritos</p>
Este é um exemplo de paragrafação ''BR''<br>
Ele insere uma quebra de linha e joga o texto colado a linha de cima<br>
</body>
</html>

-Salve seu trabalho: Clique no menu arquivo e escolha a opcao salvar como, na caixa nome do arquivo, digite: paragrafo.html , escolha a pasta meus documentos e clique em salvar
-Minimize a tela do bloco de notas
-Abra o internet explorer
-Clique no menu arquivo, escolha a opcao abrir
-Clique no botao procurar, ache a pasta meus documentos e dê um duplo clique no arquivo: paragrafo.html .
-Observe a página criada.
-Feche o internet explorer e o bloco de notas


Linha horizontal
A linha horizontal é um atributo que inseri uma linha para dividir o texto, separando diferentes tipos de informações. Ela é representada pelo código <hr> . A linha horizontal tem as propriedades: altura (size), largura (width) e alinhamento (align)

Faça o exemplo abaixo para testar esse topico:
-Abra o bloco de notas
-Digite esse codigo:

<html>
<head>
<title>Linha horizontal</title>
</head>
<body>
Linha horizontal
<hr>
<center>
Linha tamanho fixo
<hr size=3 width=130>
Linha de tamanho proporcional
<hrwidth=50%>
</center>
</body>
</html>

-Salve seu trabalho: clique no menu arquivo e escolha a opcao salvar como, na caixa nome do arquivo digite: linha.html ,escolha a pasta meus documentos, clique em salvar.
-Minimize a tela do bloco de notas
-Abra o internet explorer
-Clique no menu arquivo, escolha a opcao abrir
-Clique no botao procurar, ache a pasta meus documentos e dê um duplo clique no arquivo: linha.html .
-Observe a pagina criada
-Feche o internet explorer e o bloco de notas


Aparência de textos
É perfeitamente possivel formatar um determinado texto, dando-lhe um aparencia distinta dos demais. Há marcadores especificos que aplicam uma formatacao padrao e tambem uma formatacao personalizada.

A seguir, veja os principais marcadores para uma formataçao personalizada:

<b>   Texto negrito
<big>   Texto grande
<em>   Texto enfatizado
<i>   Texto italico
<small>   Texto pequeno
<strong>   Texto forte
<sub>   Texto subscrito
<sup>   Texto sobrescrito
<tt>   Texto tipo maquina de escrever
<u>   Texto sublinhado
<strike> Texto riscado


Faça o exemplo abaixo para testar esse topico:

-Abra o bloco de notas e digite o código abaixo:

<html>
<head>
<title>Aparencia de textos</title>
</head>
<body>
<p>Texto sem formato (normal)</p>
<p><b>Texto em negrito</b></p>
<p><big>Texto em tamanho grande</big></p>
<p><em>Texto enfatizado</em></p>
<p><i>Texto em itálico</i></p>
<p><small>Texto em tamanho pequeno</em></small>
<p><strong>Texto em formato forte</strong></p>
<p>Texto subscrito: H<sub>2</sub>O</p>
<p>Texto sobrescrito: 10<sup>4</sup></p>
<p><tt>Texto tipo maquina de escrever
<p><u>Texto sublinhado</u></p>
<p><strike>Texto Riscado</strike></p>
</body>
</html>

-Salve seu trabalho, com o nome de arquivo: aparencia.html na pasta meus documentos
-Abra o internet explorer, clique no menu arquivo, abrir
-Clique no botao procurar e selecione a pagina aparencia.html
-Visualize sua página.

Nenhum comentário:

Postar um comentário