CSS Desenvolvimento HTML Vídeo aulas

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#.

Danilo Filitto

Danilo Filitto

Mestre em Ciência da Computação pela UEM, Pós-Graduado em Redes de Computadores e Comunicação de Dados pela UEL, Bacharel em Ciência da Computação pela UNOESTE.

Adicione um comentário

Clique aqui para enviar um comentário

Área do assinante

Assinar Blog por Email

Digite seu endereço de email para assinar este blog e receber notificações de novas publicações por email.

Junte-se a 842 outros assinantes







Você gosta de jogar?