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:
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:
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:
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://dfilitto.blog.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://dfilitto.blog.br">Meu Link</a>
O que gera o seguinte resultado:
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#.