HTML5 - 02 Tags de parágrafo, quebras de linhas, destacando trechos e texto e uso de CSS no seu HTML
Chegou a hora de começarmos a trabalhar nosso HTML com uma as tags mais utilizadas e além disso tornar tudo mais colorido e bonito fazendo uso das folhas de estilo (CSS). Se ainda não viu o ultimo artigo HTML5 - 01 veja e conheça como é a estrutura básica de uma página web.
As tags desse artigo são: br, p, strong e em.
A primeira coisa a saber, é que criar um novo parágrafo é algo totalmente diferente de dar uma quebra de linha <br> (break line). Um novo parágrafo é o inicio de uma nova sentença em um texto, uma quebra de linha pode ocorrer dentro da sentença quando se tem o objetivo de fazer com que o texto ocupe menos espaço horizontalmente.
Para a tag <p> que é utilizada para determinar os parágrafos temos a finalização </p> no fim do parágrafo.
Exemplo:
<p> Minha sentença ficará dentro das tags e aqui estamos vendo como isso ocorre </p>
Exemplo dentro de uma página HTML:
<!DOCTYPE html>
<html>
<head>
<title>Título da página</title>
</head>
<body>
<p>
O HTML é utilizado para criar páginas web e ele vem evoluindo conforme as necessidades e novas formas de navegar na internet e as novas formas de se conectar a internet.
</p>
<p>
O mundo de informações online faz com que as pessoas estejam constantemente conectadas e que todos queiram acessar essas informações de forma cada vez mais rápida. O HTML precisa ser eficiente e eficaz e também precisa trazer resultados cada vez mais bonitos e eficazes para atender essas novas necessidades.
</p>
</body>
</html>
Como vimos no código acima os parágrafos podem e devem organizar as sentenças de um texto, assim como fazemos quando escrevemos uma redação, dividindo o texto em parágrafos.
Já na quebra de linha utilizamos o <br>
Exemplo:
Esse texto ficara na linha de cima
<br> esse texto a frente da tag br ficará na linha abaixo
no html fica:
<!DOCTYPE html>
<html>
<head>
<title>Título da página</title>
</head>
<body>
Agora vamos praticar...
Esse texto foi escrito na linha abaixo
Esse texto esta na terceira linha
<br> agora utilizei o br
</body>
</html>
Realizando esse código podemos ver o seguinte resultado:
Como visto no exemplo acima a quebra de linha só acontece com o uso da tag <br>. Mesmo pulando de linha com a tecla enter no teclado na hora de escrever o código, mesmo assim a linha 1 e a segunda linha ficam na mesma linha quando visualiza-se o resultado no navegador.
Agora vamos utilizar a quebra de linha e o parágrafo no mesmo arquivo:
Código:
<!DOCTYPE html>
<html>
<head>
<title>Título da página</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
Esse texto foi escrito na linha 1
Esse texto esta na segunda linha
<br> agora utilizei o br
<p>
Esse é uma parágrafo escrito com a tag p do HTML e agora podemos ver o efeito do parágrafo e da quebra de linhas juntos no mesmo arquivo.
</p>
</body>
</html>
Resultado:
<strong> - tag para destacar um trecho de um texto tornando o mesmo com aspecto em negrito, essa tag também necessita ser finalizada.
Exemplo:
<p> Esse é um parágrafo escrito com a tag p do <strong> HTML </strong> e agora podemos ver o efeito do parágrafo e da quebra de linhas juntos no mesmo arquivo. 
Diferenças entre <strong> e <b>
A tag strong veio com objetivo de realmente destacar um texto ou trecho de um texto. A tag <b> era utilizada apenas para deixar um texto ou trecho de texto em negrito e foi descontinuada no HTML5, isso porque a tag strong foi julgada como mais semântica para a necessidade de destacar textos e o mais importante é que esta tag <strong> consegue indicar para os buscadores que esta parte do texto é mais importante (mais um ponto para o SEO).
<em> - a tag em é para texto enfatizado e gera um efeito de texto em itálico, essa tag também precisa ser finalizada.
Exemplo:
<p> Esse é um <em> parágrafo</em> escrito com a tag p do <strong>HTML </strong></p>E agora podemos ver o efeito do parágrafo e da quebra de linhas juntos no mesmo arquivo.
a palavra "parágrafo" esta na tag <em> e a palavra "HTML" esta em <strong>.
Conhecendo as folhas de estilo
No HTML algumas tags sevem como "caixas" que envolvem os conteúdos e que podemos utiliza-las como parâmetro para que o CSS formate apenas uma parte do conteúdo de uma pagina web(<p></p> ou <body></body>, outras tags são para inserção de elementos na página como imagens ou outros elementos, também podemos utilizar essas tags como parâmetros para criar um efeito nesse elemento.
Veremos na prática como isso funciona.
Incorporado à página, a forma mais indicada para se trabalhar com o CSS na própria página, seria utiliza-lo dentro da tag <HEAD></HEAD>, iremos declarar uma tag style no head e dentro do style ficará nossas formatações.
O uso da tag Style dentro do head torna mais fácil localizar os estilos para alterar seus ajustes facilitando a manutenção, caso seja necessário realizar manutenção. Mas veremos que há como trabalhar com o CSS em arquivo externo e isso facilita ainda mais as manutenções desses estilos.
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Título da página</title>
<style>
em{color: red;background-color:green}
strong{color: blue;}
</style>
</head>
<body>
<p>
Estou <em>treinando</em> meus conhecimentos em <strong>HTML</strong> e CSS.
</p>
</body>
</html>
No exemplo acima temos uma tag Style que utiliza-se das tags em e strong para passar um ajuste na cor da fonte. O código fica assim: Parâmetro{ ajustes:valor; }
Sempre entre os sinais {} ficaram os ajustes, se for necessário passa-se um valor após o sinal de dois pontos. O ponto e virgula; é utilizado para separar um ajuste de outro ajuste se for necessário passar mais de um ajuste para o mesmo parâmetro.
em{color: red; } em{color:red; background-color:green}
No caso desse exemplo Color é a cor da fonte e Background-color é a cor de fundo.
Resultado:
Tente colocar a palavra CSS em Strong e veja que o mesmo efeito da palavra HTML será aplicada à palavra CSS.
Como vimos a barra de títulos apresenta erros pois algumas palavras nela possuem acentos, vamos ver como resolver isso com a tag meta no próximo artigo. Até lá!
Nenhum comentário:
Postar um comentário