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

Sou Mestre em Ciência da Computação pela Universidade Estadual de Maringá – UEM, Pós-Graduado em Redes de Computadores e Comunicação de Dados pela Universidade do Estado do Paraná – UEL, Bacharel em Ciência da Computação pela Universidade do Oeste Paulista – UNOESTE.
Atuo na área acadêmica como professor desde 2006. Além de professor sou desenvolvedor de jogos, palestrante e mantenedor dos sites dfilitto e Make Indie Games.

Adicione um comentário

Clique aqui para enviar um comentário

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 830 outros assinantes







Você gosta de jogar?