[Curso HTML] Aula 02: TAGS e Atributos

Olá, bem vindo a segunda aula do curso. Nela falarei sobre os comandos HTML. As tags e os atributos.

<post>

O que são TAGS?

As tags são os comandos que utilizamos para criação da página HTML. Existem tags para cada função em uma página, como por exemplo: para inserir imagens, formatar texto, inserir tabelas e outros.

E o que são os atributos?

Os atributos são as instruções passadas para as tags que dizem a ela o que deve fazer. Um exemplo temos uma tag para formatar uma palavra que é a tag FONT, nós queremos deixar a palavra na cor vermelha, mas a tag FONT sozinha não é suficiente para dizer que a palavra terá a cor vermelha, ai que entra o atributo, é ele que vai dizer que a cor será vermelha. Mostrarei mais a frente como.

Formato de uma tag

As tags tem um formato básico de abertura e fechamento, exceto algumas. Vejamos no exemplo abaixo:

< tag> espaço entre a abertura e o fechamento da tag</ tag>

Nesse exemplo escrevemos o procedimento de abertura e fechamento da tag. Note que as tags são envolvidas pelos sinais de “<” e “>”, entre eles colocamos o nome da tag, ficando “<tag>”, formando a abertura da tag.

Entre a abertura e o fechamento da tag, estará as instruções que serão afetadas pela função da tag. E logo em seguida o fechamento da tag, envolvida entre os sinais “</” e “>”, entre ele colocamos o nome da tag ficando “</tag>”, formando o fechamento da tag.

Há também tags que não exigem o fechamento da mesma, ficando somente como abertura, conforme o exemplo abaixo:

< tag>

Exemplo definindo a cor da palavra para vermelho

Agora vamos ao exemplo citado anteriormente, segue o exemplo:

Código:

<font color=”red”> Palavra 1 </font> Palavra2

Saída:

Palavra 1 Palavra 2

Neste exemplo podemos verificar a definição da “Palavra 1” para a cor vermelha. Isso acontece porque a palavra está entre o início e o fim da tag FONT. Note também que somente a “Palavra 1” está em vermelho, enquanto a “Palavra 2” continua em preto, isso acontece porque somente a “Palavra 1” está entre a tag FONT, sendo assim só ela será formatada com a cor vermelha, e tudo que estiver fora da tag FONT não será da cor vermelha.

Utilizando os atributos

Como falado anteriormente são os atributos que dizem a tag que função ela deve executar. Como visto no exemplo anterior o atributo da tag FONT era “color=”red” “, pois ele que dizia a tag FONT que a “Palavra 1” seria na cor vermelha(em inglês).

Formato dos atributos

Os atributos possuem o seguinte formato:

atributo=”valor”

Neste exemplo podemos verificar que, primeiro definimos qual é o atributo sucedido do sinal de “=”e “valor”. Devemos inserir os atributos antes do sinal “>” da abertura da tag, como mostrado a seguir:

<tag atributo=”valor”> espaço entre as tags</tag>

Como visto anteriormente no exemplo da tag FONT, o atributo definido é o “color” que define a cor da fonte e o valor do mesmo é “red”(vermelho), que poderia ser “blue”,”yellow”,”green” ou outra cor qualquer escrito em inglês ou o código hexadecimal. Outro exemplo:

Código:

<font color=”green”><b>Palavra 1</b></font><u>Palavra 2</u>

Saída:

Palavra 1 Palavra 2

</post>

Aqui terminamos a segunda aula. Espero que tenham gostado e até o próximo post, onde abordarei as primeiras tags HTML.