O Mundo das Tags HTML


Índice

Como Surgiu o HTML?

O HTML foi criado em 1991, por Tim Berners-Lee, no CERN (European Council for Nuclear Research) na suíça. Inicialmente o HTML foi projetado para interligar instituições de pesquisa próximas, e compartilhar documentos com facilidade. Em 1992, foi liberada a biblioteca de desenvolvimento WWW (World Wide Web), uma rede de alcance mundial, que junto com o HTML proporcionou o uso em escala mundial da WEB.
"O poder da Web está na sua universalidade. O acesso por todas as pessoas, não obstante a sua incapacidade, é um aspecto essencial."

Como Funciona


HTML é uma linguagem de marcação. Estas linguagens são constituídas de códigos que delimitam conteúdos específicos, segundo uma sintaxe própria. O HTML tem códigos para criar paginas na web. Estes códigos que definem o tipo de letra, qual o tamanho, cor, espaçamento, e vários outros aspectos do site. No início era muito complicado aprender HTML, pois eram muitos comandos para fazer algo simples. A cada nova versão, o HTML fica mais fácil de utilizar, e adquire mais funções. Atualmente qualquer pessoa pode acessar a internet a aprender a construir um site básico em questão de horas, seguindo os passos de tutoriais e aprendendo as funções de cada código.

O que são Tags?

As tags são formadas por uma estrutura própria, iniciam com o sinal < “menor que”, em seguida vem o nome daquele elemento e por fim, o sinal “maior que”>. Podem ser dispostas em tags que precisam de fechamento e tags que fecham sozinhas (img). O fechamento de uma tag será definido com uma barra (/), sendo que no caso das tags de auto fechamento, não há necessidade da presença desse caractere.


Tipos de Tags

Os títulos HTML são definidos como tags, sendo títulos, subtitulos , definindo H1 como o título mais importante e H6 o menos importante.

  1. Heading 1

  2. Heading 2

  3. Heading 3

  4. Heading 4

  5. Heading 5
  6. Heading 6

Codigo Utilizado

< P> < ol>

  1. < h1> Heading 1 < /h1>

  2. < h2> Heading 2 < /h2>

  3. < h3> Heading 3 < /h3>

  4. < h4> Heading 4 < /h4>

  5. < h5> Heading 5 < /h5>
  6. < h6> Heading 6 < /h6>
  7. < /P> < /ol>


Tag Parágrafo

Define um Parágrafo na sua página e sua tag é representada da seguinte forma < p> < /p>

Este é um parágrafo.

Este é um parágrafo.

Este é um parágrafo..

Codigo Utilizado

< p> Este é um parágrafo.< /p>

< p>Este é um parágrafo.< /p>

< p>Este é um parágrafo.< /p>


Tag Mark

Como o próprio nome já diz, esse elemento é usado para marcar o texto, ou seja, destacar uma informação importante, sua tag é representada da seguinte fomra < mark> < /mark>

Para que se consiga algo na vida, precisamos de foco

Codigo Utilizado

< p> Para que se consiga algo na vida, precisamos de < mark> foco < /mark>


Tag SMALL

Usada como um texto menor, para definir direitos autorais ou outros comentários secundários, essa tag é representada da seguinte forma < small> < /small>

Exemplo

Este é um texto normal.

Este é um texto menor

Codigo Utilizado

< p>Este é um texto normal. < /p>

< p> < small> Este é um texto menor < /small> < /p>


Tag I

Usada para deixar o texto em formato Itálico, sua tag é representada por < I> < /I>

Exemplo

Este é um texto em formato Itálico.

Este é um texto normal até aqui. Pois agora já é Itálico.

Codigo Utilizado

< i> Este é um texto em formato Itálico. < /i>

< p> Este é um texto normal até aqui. < i>Pois agora já é Itálico.< /i> < /p>


Tag U

Usada para deixar o texto em formato sublinhado ou em outras palavras com um anderlaine abaixo da palavra, sua tag é representada por < u> < /u>

Exemplo

Este é um texto em formato sublinhado.

Codigo Utilizado

< p> < u> Este é um texto em formato sublinhado.< /u> < /p>


Tag STRONG

Usada para deixar o texto em formato Negrito, sua tag é representada por < strong> < /strong>

Exemplo

Este é um texto em formato Negrito.

Codigo Utilizado

< p> < strong> Este é um texto em formato Negrito. < /strong> < /p>


Tags OL e UL

Conhecidas como TAGS Mães, tem como objetivo criar uma lista ordena sendo representada pela tag < ol> < /ol> e uma lista não ordenada sendo representada pela tag < ul> < /ul>

Exemplo de Lista Ordenada

  1. Coffee
  2. Pao
  3. Milk

Perceba que tag da vida a uma lista numérica ordenando-a em 1 2 3 e assim em diante.

Codigo Utilizado OL

< p>

    < ol>
  1. < li> Coffee < /li>
  2. < li>pao < /li>
  3. < li>Milk < /li>
  4. < /ol>
< /p>

Exemplo de Lista Não Ordenada

Na lista não ordenada cria-se uma especie de lista em tópicos em forma de marcadores.

Codigo Utilizado

< p>

< /p>


Tag LI

Conhecida como TAG FILHA, usada dentro de listas ordenadas e nao ordenadas, essa tag define um item em listas < li> < /li>

Exemplo

  1. Coffee
  2. Pao
  3. Milk

Codigo Utilizado

  • < li> Coffee < /li>
  • < li> Pao < /li>
  • < li> Milk < /li>

  • Tag A

    Usada para criar um hiperlink, vinculando assim, uma página a outra. Mas precisamos lembrar que essa tag precisa estar vinculada a um atributo chamado href, pois ele é quem indica o destino do link.

    Exemplo de HiperLink

    Visite o site da Dio para cursos em linguagens de Programação

    Codigo Utilizado

    < a href="https://web.dio.me"> Visite o site da Dio para cursos em linguagens de Programação < /a>


    Tag HR

    Define uma mudança de tópico em uma pagina HTML, como se tivesse uma quebra de linha na horizontal.

    Exemplo

    HTML é uma linguagem de marcaçao de Texto
    CSS é uma linguegem que descreve como os elementos de HTML devem ser exibidos na tela
    JavaScript é a linguagem de programação do HTML e da Web. JavaScript pode alterar o conteúdo HTML e os valores de atributo. JavaScript pode alterar CSS. JavaScript pode ocultar e mostrar elementos HTML e muito mais.

    Codigo Utilizado

    < p> HTML é uma linguagem de marcaçao de Texto < /p> < hr>


    < p> CSS é uma linguagem que descreve como os elementos de HTML devem ser exibidos na tela < /p> < hr>


    < p> JavaScript é a linguagem de programação do HTML e da Web. JavaScript pode alterar o conteúdo HTML e os valores de atributo. JavaScript pode alterar CSS. JavaScript pode ocultar e mostrar elementos HTML e muito mais.< hr> < /p>


    Tag SUB E SUP

    Usadas para definir textos subrescrito e sobrescrito que podem ser usados para notas de rodapé

    Exemplo

    Este texto contém textos subsescrito

    Este texto contém textos sobrescrito

    Codigo Utilizado

    < p> Este texto contém textos < sub> subsescrito < /sub> < /p>

    < p> Este texto contém textos < sup> sobrescrito < /sup> < /p>


    Tag BLOCKQUOTE

    Usada para citacões

    Exemplo

    como dizia Steve jobs:
    "Você pode encarar um erro como uma besteira a ser esquecida ou como um resultado que aponta uma nova direção".

    Codigo Utilizado

    como dizia Steve jobs:
    < blockquote>"Você pode encarar um erro como uma besteira a ser esquecida ou como um resultado que aponta uma nova direção".< /blockquote>

    Tags Sugeridas para Conhecimento

    Tag Font

    Consiste em definir o tamanho e a cor da fonte de um texto.

    Exemplo

    Este é um texto com cor vermelha.

    Este é um texto com fonte Courier New.

    Código Utilizado

    < p style="color:red">Este é um texto com cor vermelha.< /p>

    < p style="font-family:'Courier New'"> Este é um texto com fonte Courier New.< /p>

    Tag Del

    Consiste em definir um texto que foi excluído.

    Exemplo

    Minha cor favorita é rosa lilas!

    Porém é muito importante que ao utilizá-la, seja também empregada a Tag INS para haver destaque no novo texto corrigido, já que essa tag tem a função de marcar o texto inserido.

    Codigo Utilizado

    < p> Minha cor favorita é < del> rosa < /del> < ins>lilas< /ins> ! < /p>

    Tag ABBR

    Consiste em definir uma abreviação em um texto.

    Exemplo

    A OMS foi fundada 1948.

    Codigo Utilizado

    < abbr title="Organização Mundial da Saude"> A OMS < /abbr> foi fundada 1948.

    Perceba que a tag é usada com o atributo title, que tem a função por um título, para que quando o usuário passar o mouse em cima da abreviação OMS ele possa vê o significado da sigla.


    Referencias

    https://www.w3schools.com/html/html_headings.asp

    https://www.infoescola.com/informatica/html/#>