Aulas
Disciplinas

Cursos / Informática para Internet / Desenvolvimento Front-end I / Aula

arrow_back Aula 03 - Títulos, Parágrafos, Links e Imagens

Títulos e Parágrafos

Títulos

Os títulos no HTML são utilizados para dividir o documento HTML em seções. O HTML permite organizar o conteúdo em até seis níveis.

O trecho do código abaixo mostra como utilizar as tags de título que vão desde a tag h1 até a tag h6. 

<!DOCTYPE html>
<html>
<head>
    <title>Aula 03</title>
</head>
<body>
    <h1>Título 1 </h1>
    <h2>Título 2</h2>
    <h3>Título 3</h3>
    <h4>Título 4</h4>
    <h5>Título 5</h5>
    <h6>Título 6</h6>
</body>
</html>

É importante utilizar os títulos de forma semanticamente correta. Ou seja, o título principal do seu site deve estar na tag h1. Caso deseje alterar a aparência como, por exemplo, por um título menor, utilize o CSS. Com isso, você manterá a consistência da informação, fazendo com que seu site seja corretamente interpretado por sistemas externos.

Estilizando títulos

Para alterar o estilo de todos os títulos (h1), você pode criar um código CSS utilizando o seletor de tag, conforme exemplo abaixo:

h1 {
    font-size: 50px;
    color: green;
    font-family: Arial, Helvetica, sans-serif;
}

No exemplo acima, todas as tags h1 terão sua aparência alterada para fonte de tamanho 50px, cor verde e família de fonte Arial, Helvetica, sans-serif.

Parágrafos

Para criar um parágrafo em HTML, deve-se utilizar a tag "p". Essa tag cria um parágrafo no documento criando uma visualização padrão em que os parágrafos são separados por quebra de linha.

O código abaixo mostra um exemplo da criação de alguns parágrafos.

<!DOCTYPE html>
<html>
<head>
    <title>Aula 03</title>
</head>
<body>

<h1>Título 1</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
Assumenda unde qui earum aliquid adipisci voluptatibus nulla eligendi 
ad rem dicta quis temporibus at libero porro aspernatur, 
reiciendis ipsam? Qui, ducimus.</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
Assumenda unde qui earum aliquid adipisci voluptatibus nulla eligendi 
ad rem dicta quis temporibus at libero porro aspernatur, 
reiciendis ipsam? Qui, ducimus.</p>

</body>
</html>

Estilizando parágrafos

A estilização dos parágrafos segue a mesma forma da estilização dos títulos. Devemos criar um código CSS que selecione os parágrafos e aplique uma transformação na sua aparência.

O código abaixo mostra exemplo de CSS para alterar o padrão de fonte utilizado.

p {
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  font-style: italic;
  font-weight: bold;
}

Versão 5.3 - Todos os Direitos reservados