DEV Community: Fabricio-valadares

Tags HTML para utilização em textos.

Fabricio-valadares — Sat, 23 Jan 2021 14:41:41 +0000

Nesse artigo vamos ver as principais tags que usamos dentro do HTML para a formatação dos textos, então sem enrolação vamos nessa!

Tags que serão apresentadas.

<h1>h1: utilização</h1>
<h2>h2: utilização</h2>
<h3>h3: utilização</h3>
<h4>h4: utilização</h4>
<h5>h5: utilização</h5>
<h6>h6: utilização</h6>

<p>p: utilização</p>

<strong>strong: utilização</strong><br/>

<cite>cite: utilização</cite><br/>

<pre>pre: utilização</pre><br/>

<i>i: utilização</i><br/>

<u>u: utilização</u><br/>

<b>b: utilização</b><br/>

<em>em: utilização</em><br/>

Antes de explicar cada uma das tag, quero falar primeiro da tag <br>, pois ela aparece na frente de algumas tag que vamos estudar, pois então, a tag <br/> tem o papel de quebra a linha, portanto quando você utiliza a tag ela quebra o conteúdo que esta na frente dela para linha de baixo.

Utilização da tag `<h1></h1> ... <h6></h6>`

<h1>h1: utilização</h1>
<h2>h2: utilização</h2>
<h3>h3: utilização</h3>
<h4>h4: utilização</h4>
<h5>h5: utilização</h5>
<h6>h6: utilização</h6>

A tag <h1></h1> até <h6></h6> tem o papel de representa os títulos da pagina, mas dando um aviso essas tag são muitas das vezes diferenciados pelo seu tamanho, mas essas tag tem o objetivo de organizar a relação de autoridade entre os títulos e não somente ter um tamanho diferente.

Utilização da tag `<p></p>`

<p>p: utilização</p>

A tag <p></p> tem o objetivo de especificar um paragrafo dentro de um texto, com certeza e uma tag que será bastante usada.

Utilização da tag `<strong></strong>`

<strong>strong: utilização</strong>

A tag <strong></strong> deixa o conteúdo que esta dentro dele em negrito, mais esta tag tem o foco em dar importância para uma palavra ou frase.

Utilização da tag `<cite></cite>`

<cite>cite: utilização</cite>

A tag deixa o texto que está dentro dela em itálico, mas ela tem o foco em deixar uma frase ou palavra como citação, portanto ela e mais usada para destacar uma citação.

Utilização da tag `<pre></pre>`

<pre>
      Olha como
    o texto fica,
    ele esta do mesmo
        jeito que formatei
</pre>

A tag <pre></pre> tem como foco apresentar na tela um texto pré-formatado, portanto ele é mais usado para poemas, entre outras, sendo que a fonte do texto fica mono-espaçada.

Utilização da tag `<i></i>`

<i>i: utilização</i>

A tag <i></i> deixa o texto que esta dentro dela em itálico.

Utilização da tag `<u></u>`

<u>u: utilização</u>

A tag <u></u> deixa o texto dentro dela em sublinhado.

Utilização da tag `<b></b>`

<b>b: utilização</b>

A tag <b></b> deixa seu texto em negrito.

Utilização da tag `<em></em>`

<em>em: utilização</em>

A tag <em></em> deixa o texto que esta dentro dela em itálico.

Conclusão:

Obrigado por ler até aqui, espero ter ajudado você

Ahh, deixa um comentário para mim.

TAGs importantes para estruturar um pagina HTML.

Fabricio-valadares — Thu, 21 Jan 2021 20:03:52 +0000

Hoje vamos ver algumas Tags que server para estruturar melhor nosso HTML, elas geralmente e usada para guiar onde vai ficar o cabeçalho do nosso site, onde vai ficar o conteúdo principal, e onde vai fica o rodapé de nosso site.

Mas antes de estuda as Tags quero falar que visualmente elas não afeta em nada a interface, mas essas Tags têm um peso semântico para os navegadores, por isso e importante usar elas em nossa aplicação.

TAGs que vamos estudar:

<header></header>
<aside></aside>
<main></main>
<footer></footer>

Para que serve a TAG `<header></header>` no Html:

<header></header>

A Tag header serve para indicar para os navegadores onde está o cabeçalho do nosso site, uma parte muito importante de nosso site, então quando fomos criar um cabeçalho em nossa aplicação devemos pensar em usar a Tag header.

Para que serve a TAG `<aside></aside>` no Html:

<aside></aside>

A tag aside mostrar para nosso navegador que temos um menu lateral em nosso site, então a tag aside e usada meio que para incluir um cabeçalho lateral, hoje os menus laterais não e tão usados, mas e importante saber essa Tag.

Para que serve a TAG `<main></main>` no Html:

<main></main>

A tag main diz para os navegadores onde está o conteúdo principal de nossa aplicação, portanto quando fomos criar nosso site devemos ter claro qual e o assunto principal para que assim possamos da destaque nele.

Para que serve a TAG `<footer></footer>` no Html:

<footer></footer>

A tag footer diz respeito ao rodapé de nosso site, então quando quisermos criar um rodapé para nossa aplicação e importante usar a tag footer.

Conclusão:

Obrigado por ler esse artigo até aqui, espero ter acrescentado algo em seu conhecimento e em sua jornada como programador.

Ahhh, me deixe um comentário aqui.

Estrutura básica de uma pagina HTML.

Fabricio-valadares — Thu, 21 Jan 2021 19:07:08 +0000

A estrutura básica de uma pagina HTML tem como foco, forma um alicerce para a construção de uma pagina.

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exercícios</title>
</head>
<body>

</body>
</html>

O código acima mostra a base de uma pagina HTML pronta para ser desenvolvida, mas por recurso didático vamos construir linha por linha, explicando a função de cada elemento do HTML, para que assim possamos ter um bom alicerce para crescermos dentro da programação.

A função de cada linha:

<!DOCTYPE html>

O <!DOCTYPE html> diz para os navegadores que pretendemos escrever uma pagina em HTML de acordo com as especificações, sendo que o DOCTYPE não é uma tag do HTML, mas sim um tipo de palavra-chave.

<!DOCTYPE html>
<html lang="pt-br">
</html>

A tag <html></html> e o elemento onde toda a pagina será desenvolvida,
sendo que ela recebe um atributo chamado lang="pt-br" que defini o idioma principal da pagina.

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exercícios</title>
</head>
</html>

A tag <head></head> e o elemento que compõem a cabeça da pagina, ela não será renderizada na tela pelo navegador, pois tem como papel principal ser uma tag de metadados, entre as tags mais usadas dentro do <head></head> estão: <link>, <meta> entre outras.

A primeira tag <meta> que aparece no código está tendo a função de falar para o navegador quais os símbolos, caracteres entre outros, que podem ser utilizadas na tela.

O segundo <meta> que aparece está dizendo para o navegador se comporta de acordo com o tamanho da tela que está acessando a pagina, trazendo assim para o usurário uma melhor forma de ver o conteúdo da pagina.

E por ultimo a tag <title></title> diz respeito ao titulo da pagina, o nome que aparece da pagina do navegador.

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exercícios</title>
</head>
<body>

</body>
</html>

A ultima tag que aparece na base de uma pagina HTML e a <body></body> que e o corpo da pagina, tudo que for escrito dentro dessa tag aparecerá no navegador, portanto e onde vai todo o conteúdo da pagina.

Conclusão:

Espero ter ajudado você que gastou seu tempo lendo, muito obrigado pela sua atenção.

E por ultimo deixe um comentário para mim ler.

DEV Community: Fabricio-valadares

Tags HTML para utilização em textos.

Tags que serão apresentadas.

Utilização da tag <h1></h1> ... <h6></h6>

Utilização da tag <p></p>

Utilização da tag <strong></strong>

Utilização da tag <cite></cite>

Utilização da tag <pre></pre>

Utilização da tag <i></i>

Utilização da tag <u></u>

Utilização da tag <b></b>

Utilização da tag <em></em>

Conclusão:

TAGs importantes para estruturar um pagina HTML.

TAGs que vamos estudar:

Para que serve a TAG <header></header> no Html:

Para que serve a TAG <aside></aside> no Html:

Para que serve a TAG <main></main> no Html:

Para que serve a TAG <footer></footer> no Html:

Conclusão:

Estrutura básica de uma pagina HTML.

A função de cada linha:

Conclusão:

Utilização da tag `<h1></h1> ... <h6></h6>`

Utilização da tag `<p></p>`

Utilização da tag `<strong></strong>`

Utilização da tag `<cite></cite>`

Utilização da tag `<pre></pre>`

Utilização da tag `<i></i>`

Utilização da tag `<u></u>`

Utilização da tag `<b></b>`

Utilização da tag `<em></em>`

Para que serve a TAG `<header></header>` no Html:

Para que serve a TAG `<aside></aside>` no Html:

Para que serve a TAG `<main></main>` no Html:

Para que serve a TAG `<footer></footer>` no Html: