HTML5 & CSS3 – 02 Tags para Links, Parágrafos e Cabeçalhos

HTML5 e CSS3 curso completo

O post HTML5 & CSS3 – 02 Tags para Links, Parágrafos e Cabeçalhos faz parte do curso completo HTML5 & CSS3 que tem como objetivo demonstrar como implementar páginas WEB utilizando o HTML5 e o CSS3. Serão apresentadas as principais tags HTML responsáveis por incluir objetos como imagens, links, títulos e tabelas. Também será demonstrado como formatar os elementos presentes em uma página HTML utilizando o CSS3.

Caso você tenha perdido a aula anterior acesse o post – HTML5 & CSS3 – 01 Estrutura básica de uma página HTML

HTML5 & CSS3 – 02 Tags para Links, parágrafos e cabeçalhos

A aula apresenta as tags utilizadas para criar links, parágrafos e cabeçalhos. Aplica na pagina Alô Mundo as tags apresentadas.

Cabeçalho

A linguagem HTML permite adicionar cabeçalhos (ou títulos) no corpo da página, diferenciando-os do restante do texto pelo tamanho da fonte. Para isso existem as tags “h”, que possuem seis níveis, de 1 a 6. A seguir tem-se um exemplo de utilização dos seis níveis de cabeçalho.

Exemplo: Utilizando cabeçalhos

<h2>Título de nível 2</h2>
<h3>Título de nível 3</h3>
<h4>Título de nível 4</h4>
<h5>Título de nível 5</h5>
<h6>Título de nível 6</h6>

Cabeçalhos visualizados no browse:

html

Parágrafos e quebras de linha

Geralmente, quando escrevemos textos mais extensos, é preciso dividi-los em parágrafos, de forma a separar e organizar melhor as informações. Durante a codificação (“escrita” do código) de uma página HTML, podemos usar a tecla Enter para organizar o texto no editor, mas essas quebras de linha não serão interpretadas pelo navegador. Para isso é preciso utilizar as devidas tags <br /> para quebrar a linha e passar para a linha de baixou, ou <p></p> para definir um parágrafo.

Por questão de organização do código, é indicado usar a definição correta de parágrafos no lugar das quebras de linha.

Por exemplo, a listagem a seguir mostra um texto extenso com várias quebras de linha onde deveriam haver divisões de parágrafos. Em seguida é mostrada a forma correta de estruturar o código para o mesmo texto.

Texto com várias quebras de linha:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida sagittis porta. In feugiat porta erat. Quisque tempor dictum mauris. <br/> Donec vestibulum lacus eget odio fermentum viverra. Pellentesque hendrerit pulvinar venenatis. Donec ut odio vel velit iaculis hendrerit. Sed pharetra augue eget ipsum faucibus lobortis. <br/> Fusce quis magna ante, sed tempus lorem. Sed lacus ipsum, tempus ac aliquet a, dignissim in neque. Praesent sed lorem id augue dignissim lacinia.

Texto visualizados no browse:

html 3

Texto com vários parágrafos:

p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida sagittis porta. In feugiat porta erat. Quisque tempor dictum mauris.</p> <p>Donec vestibulum lacus eget odio fermentum viverra. Pellentesque hendrerit pulvinar venenatis. Donec ut odio vel velit iaculis hendrerit. Sed pharetra augue eget ipsum faucibus lobortis.</p> <p>Fusce quis magna ante, sed tempus lorem. Sed lacus ipsum, tempus ac aliquet a, dignissim in neque. Praesent sed lorem id augue dignissim lacinia.</p>

Texto visualizados no browse:

html5

Links

Como em toda página web, podemos precisar inserir links para outras páginas, para downloads, e-mails, etc. A HTML possui uma tag chamada âncora (anchor, em inglês) representada por <a> que nos permite criar links facilmente, apenas definindo seu atributo “href” com o endereço para o qual o usuário deve ser redirecionado.

A sintaxe básica da tag <a> é apresentada na listagem a seguir, onde criamos um link para o endereço “https://www.dfilitto.com.br” com o texto “Meu Link”, onde o usuário pode clicar para ser redirecionado.

Sintaxe de criação de links:

<a href="www.meusite.com.br">Meu Link</a> <a href="arquivo.zip">Baixar Arquivo
<a href="https://www.dfilitto.com.br">Meu Link</a>

O que gera o seguinte resultado:

html 6

Assista a próxima aula acessando o post – HTML5 & CSS3 – 03 Tag para imagens

Acesse nosso canal no YouTube para visualizar outros vídeos sobre programação, como por exemplo Python, Java e Desenvolvimento de sistemas comerciais utilizando a linguagem C#.

1 Comment on "HTML5 & CSS3 – 02 Tags para Links, Parágrafos e Cabeçalhos"

  1. Vc Está de parabéns esta tirando todas minhas duvidas

    um abraço.

Leave a comment

Your email address will not be published.