Press enter to see results or esc to cancel.

HTML Básico – Post 4 – Inserindo Texto

Vou escrever um pouco sobre como inserimos texto em nossa página, por enquanto tudo da mesmo cor, em outro post vamos trabalhar mais com o layout da página.

Observe o código abaixo e leia as explicações seguintes.

 


<!doctype html>
<html lang="pt">
<head>
 <meta charset="UTF-8" />
 <title>Título da sua página</title>
</head>
<body>
    <section>
        <p>Este texto utiliza a tag de parágrafo</p>

        <p><em>Este texto utiliza a tag para itálico </em></p>

        <p><strong>Este texto utiliza a tag para negrito</strong></p>

        <p><mark>Este texto utiliza a tag para marcação</mark></p>

        <h1>Este texto utiliza heading 1</h1>
        <h2>Este texto utiliza heading 2</h2>
        <h3>Este texto utiliza heading 3</h3>
        <h4>Este texto utiliza heading 4</h4>
        <h5>TEste texto utiliza heading 5</h5>
        <h6>Este texto utiliza heading 6</h6>
    </section>
</body>
</html>

Na linha 9 temos a tag <p> que indica marcação de parágrafo. Esta tag nos auxília na criação de parágrafos pois criar automaticamente espaços entre o texto inserido. Dando a senssação de unidade ao texto. Como se estivessemos separando em blocos, muito útil para criação de parágrafos. Sua utilidade principal será mostrada mais adiante em outro post, onde iremos alterar as propriedades padrão das tags, daí veremos como a tag <p> irá nos auxiliar.

Na linha 11 temos a tag <em>, veja como esta tag está cercada pela tag <p>, fiz isto de propósitvo, para criar espaço entre as linhas e separar os textos que são de tópicos diferente, sinta-se livre para coloar uma tag “dentro da outra”, muitas funcionam desta forma, falaremos mais sobre isso no futuro. Bem, a tag <em> nos cria o estilo itálico, sempre que precisar utilizar este estilo coloque a palavra ou o texto que deseja utilizar entre as tags <em></em>, lembre-se de abrir e fechar as tags de seu código.

Na linha 13 utilizamos a tag <strong> onde deixamos o texto em negrito, segue o mesmo conceito da tag para efeito itálico, coloque o texto desejado entre as tags <em></em>, abrindo e fechando.

Na linha 15 temos a tag <mark>, utilizada para marcações no texto como um marca-texto que usamos para destacar informações em livros e anotações, segue tambpem o mesmo conceito apresentado anteriormente, coloque o texto entre as tags <mark></mark>.
Entre as linhas 17 e 22 temos uma tag muito interessante, ela tem o poder de alterar não só o estilo do texto, deixando-o negrito, mas também altera seu tamanho. As tags <h1>, <h2>, <h3>, <h4>, <h5> e <h6> estão em ordem decrescente, ou seja o tamanho do texto diminui conforme o numero varia de 1 a 6. Esta tag segue o mesmo conceito das outras tags apresentadas anteriormente.

Com estas tags você já será capaz de criar algum conteúdo para a sua página. Treine o que aprendemos hoje, e aguarde os próximos posts.

Tweet about this on TwitterShare on FacebookShare on LinkedInEmail this to someone
Comments

Leave a Comment