SUA PRIMEIRA PÁGINA
Podemos já com estes conhecimentos, e mais algum outro, criar nossa primeira página. Para isso, abra
seu editor de textos e, copie e cole o seginte texto em um novo documento:
<html>
<head>
<title>Cozinha Para Todos</title>
</head>
<body>
<p><b>Bem-vindo,</b></p>
<p>Você está na página<b>Comida para todos</b>.</p>
<p>Aqui você aprenderá receitas fáceis e deliciosas.</p>
</body>
</html>
Agora salve este arquivo com extensão .html ou .htm em seu disco rígido. Para isso, acessamos no menu "Arquivo" e selecionamos a opção "Salvar como". Na janela escolhemos o diretório onde desejamos salvá-lo e colocaremos um nome para ele, como por exemplo: minha_página.html.
FORMATO DE PARÁGRAFOS EM HTML
Nos artigos anteriores apresentamos a título de exemplo, algumas etiquetas que permitem dar formato ao nosso texto. Neste capítulo veremos com mais detalhe, as etiquetas mais amplamente utilizadas e exemplificaremos algumas delas posteriormente.
Formatar um texto passa por tarefas tão evidentes como definir os parágrafos, justificá-los, introduzir
marcadores, numerações, ou pôr em negrito, itálico, etc.
Vimos que para definir os parágrafos utilizamos a etiqueta <p> que introduz um salto e deixa uma linha
em branco antes de continuar com o resto do documento.
Podemos também utilizar a etiqueta <br>, da qual não existe seu fechamento correspondente (</br>),
para realizar um simples enter, com o que não deixamos uma linha em branco, e sim, somente mudamos de linha.
Exemplo prático:
Para praticar um pouco o que acabamos de ver, vamos propor um exercício que se pode resolver no seu computador. Simplesmente queremos construir uma página que tenha, por esta ordem:
2 parágrafos centralizados
3 parágrafos à direita
Um salto triplo de linha
1 parágrafo alinhado à esquerda
Não vamos escrever nesta ocasião o código fonte do exercício. Podemos vê-lo em funcionamento em
nosso navegador e na janela podemos obter o código fonte selecionando no menu Exibir a opção Código fonte.
CABEÇALHOS
Existem outras etiquetas para definir parágrafos especiais, formatados como títulos. São os cabeçalhos
ou Header em inglês. Como dissemos, são etiquetas que formatam o texto como um título, para o qual
atribuem um tamanho maior de letra e colocam o texto em negrita.
Existem vários tipos de cabeçalhos que se diferenciam no tamanho da letra que utilizam. A etiqueta em
concreto é a <h1>, para os cabeçalhos maiores, <h2> para os de segundo nível e assim, até <h6> que é
o cabeçalho menor.
Os cabeçalhos implicam também uma separação em parágrafos, portanto, tudo o que for escrito dentro
de <h1> e </h1> (ou qualquer outro cabeçalho) será colocado em um parágrafo independente.
Podemos ver como se apresentam alguns cabeçalhos a seguir:
<h1>Cabeçalho de nível 1</h1>
Será visto dessa maneira na página:
Cabeçalho de nível 1
Os cabeçalhos, como outras etiquetas de html, suportam o atributo align. Vejamos um exemplo de
cabeçalho de nível 2 alinhado ao centro:
<h2 align="center">Cabeçalho de nível 2</h2>
Será visto dessa maneira na página:
Cabeçalho de nível 2
Outro exercício interessante é construir uma página web que contenha todos os cabeçalhos possíveis.
Pode-se ver a seguir:
<html>
<head>
<title>Todos os cabeçalhos</title>
</head>
<body>
<h1>Cabeçalho de nível 1</h1>
<h2>Cabeçalho de nível 2</h2>
<h3>Cabeçalho de nível 3</h3>
<h4>Cabeçalho de nível 4</h4>
<h5>Cabeçalho de nível 5</h5>
<h6>Cabeçalho de nível 6</h6>
</body>
</html>
Nenhum comentário:
Postar um comentário