0:00
Atributos em HTML. Os atributos em HTML
0:02
são especificados usando a sintaxe de
0:04
nome do atributo. Nós temos o nosso
0:06
sinal de atribuição e, por fim, o valor.
0:09
Eles são adicionados dentro da taga, OK?
0:12
das tags da HTML e fornecem informações
0:14
adicionais sobre este mesmo elemento.
0:16
Temos aqui um exemplo onde temos tag
0:18
atributo um igual valor, atributo dois
0:21
igual valor. Depois temos aqui o nosso
0:23
conteúdo e ataque de fechamento. Como
0:25
nós dissemos, as propriedades ou
0:27
atributos, assim também chamado, são
0:29
colocados dentro da tag de abertura. OK?
0:33
Temos aqui um exemplo muito mais eh
0:36
direcionado que temos aqui. OK. Temos
0:37
aqui todo o conjunto que é chamado de
0:39
elemento HTML e temos aqui a nossa tag
0:42
de abertura, OK? Temos a nossa aqui tem
0:45
onde temos classe igual a btn, que é a
0:48
classe é o nome do nosso atributo e o
0:50
valor aqui que ele esse atributo recebeu
0:52
é o btm. E depois temos aqui o conteúdo
0:55
do elemento e por fim temos a TAC de
0:57
fechamento fe alguns elementos HTML
0:59
suportam vários atributos enquanto que
1:01
outros podem apenas tipo suportar alguns
1:04
atributos específicos. Normalmente, isso
1:06
é a forma que atributos HTML são
1:07
representados. Alguns elementos HTML
1:09
suportam vários atributos, enquanto que
1:11
outros podem ter apenas alguns atributos
1:13
específicos. Agora vamos ver algum
1:14
exemplo mais prático para que nós
1:15
possamos entender melhor o que é isso o
1:17
atributo em HTML- o que é que ele
1:20
realmente fornece. Então para nós como
1:22
sempre vamos estar para dentro do nosso
1:23
VS Code. Já temos aqui um exemplo
1:26
simples. Então nós temos aqui um exemplo
1:27
de um código HTML. Vamos fazer o
1:29
seguinte, vamos tentar inserir uma
1:31
imagem aqui nesse mesmo código. Então
1:33
para tal eu irei fazer o seguinte. Eu
1:35
farei o seguinte, OK? Vamos adicionar
1:37
imagem imgas aqui com source dessa forma
1:43
A imagem é uma daquelas tags que só
1:45
existe apenas tag de eh fechamento, OK?
1:47
Ele não tem tipo abertura e fechamento,
1:49
ele é uma tag simples. Essa forma aqui,
1:52
veja aqui, esse essa é a nossa tag,
1:54
certo? Como nós dissemos, e os atributos
1:56
são colocados dentro da taga, OK? Então,
1:58
como a imagem só tem uma única tag,
2:00
vamos considerar que essa aqui é é a
2:02
mesma tag de abertura.
2:04
Aqui temos o source. Source é o caminho,
2:06
OK? Praticamente esse esse RC aqui
2:09
significa source, tipo o caminho onde o
2:12
que eu quero adicionar está localizado.
2:14
Eu tenho essa imagem aqui, eu vou
2:16
inserir essa imagem aqui. Então, nesse
2:18
caso aqui, o nosso atributo seria esse
2:20
senhor aqui, esse SRC, que significa
2:22
source. E o valor será o caminho desta
2:26
minha imagem que eu tenho aqui presente.
2:28
OK? Para tal, eu farei o seguinte, eu
2:30
vou passar aqui a minha imagem, OK? Eu
2:32
vou escrever meu cat aqui a mesma o
2:35
caminho onde está tá isto tá apenas
2:37
catog porque esse meu documento HTML
2:41
está na mesma localidade com a minha
2:43
imagem então nesse caso temos aqui o
2:44
nosso atributo SRC que é o source que é
2:47
o c ok e aqui esse valor aqui da minha
2:52
imagem é que é o valor do nosso
2:56
OK? Então isto aqui eu não preciso dele,
3:01
OK? E aqui no alt eu posso escrever tipo
3:03
algo assim, vamos dizer imagem de cão e
3:06
gato. De cão, de gato e cão, de gato e
3:11
cão. Ok? Então, praticamente esse alfa
3:13
aqui, ele nos diz, tipo, é uma
3:15
informação, é uma pequena informação
3:18
sobre o que é que essa imagem diz, o que
3:20
o que é que essa imagem representa, tá?
3:23
Então esse alt é o atributo ou
3:25
propriedade. E aqui esse valor, essa
3:28
informação que eu passo aqui é o nosso
3:29
valor desse mesmo meu atributo. OK?
3:32
Agora se eu salvar isto aqui, salvei e
3:35
se eu lig aqui no nosso código, nosso
3:37
aqui representar, dá um refresh, aqui
3:40
está a nossa imagem foi representada.
3:42
Então como se trata da imagem, veja, a
3:44
imagem também tem mais outros atributos
3:46
que podem ser inseridas nela. Então,
3:49
alguns atributos que nós podemos inserir
3:51
numa imagem são, além do source, também
3:54
temos o seguinte, OK? Veja, na imagem
3:56
nós podemos alterar a altura, bem como a
3:58
largura de uma imagem. Para tal, eu de
4:01
fazer o seguinte, vamos ver o width
4:02
dessa forma aqui. Wid será igual. Aqui
4:04
eu vou passar algum valor. Temos aqui o
4:06
widh. Como nós dissemos, todos os
4:08
valores de um atributo ou de uma
4:09
propriedade devem sempre ser inseridas
4:11
dentro das aspas simples ou duplas. OK?
4:14
Então, o if aqui eu vou passar o valor
4:16
que eu gostaria. Então vamos lá dizer
4:18
pelo menos 250 de tamanho. Salvei e se
4:21
eu dar aqui um refresh, vamos lá ver,
4:24
estás a ver? Ele reduziu logo a o
4:28
E bem também como podemos alterar a
4:32
Ok, que é senhor aqui. E se eu passar
4:35
aqui, por exemplo, 250 também, OK? Que
4:38
ele vai me apresentar.
4:41
Ele esticou um pouquinho a imagem, mas
4:43
normalmente não é não é muito bom
4:44
mexermos com altura, 1 vezes mexeros
4:46
apenas com a largura. Isso são atributos
4:49
em HTML. Agora veja, os atributos
4:52
normalmente irão variar, vai depender da
4:53
tag. Então, por exemplo, a tag H1 e a
4:56
tag imagem, eles têm diferentes
4:59
atributos. Por exemplo, esse source aqui
5:00
eu não vou colocar no H no H1, ele não
5:03
funciona, OK? Então, independentemente
5:05
da tag, os seus atributos ou as suas
5:06
propriedades também irão variar, pois,
5:09
por exemplo, aqui no HT H1, eu posso
5:11
mudar a cor, posso alterar muita coisa,
5:14
mas já aqui no source não, aqui na
5:15
imagem não, OK? Porque na imagem eu não
5:17
vou alterar a cor da imagem, OK? Mas
5:19
apenas posso manipular o tamanho da
5:20
imagem, oamento da imagem, a posição da
5:22
imagem, assim do género. Agora no H1 eu
5:24
posso alterar o tamanho da letra, a cor
5:26
da letra, então muita coisa, estilo da
5:28
letra, muita coisa também que eu posso
5:29
alterar no H1. O que eu quero dizer na
5:32
realidade é, independentemente da tag,
5:34
as suas propriedades também irão variar.
5:36
Então, mais em frente nós iremos ver
5:38
mais exemplos de propriedades ou de
5:40
atributos e HTML. Quando iremos começar
5:43
com a formatação de texto, aí sim
5:45
poderemos ver mais exemplos de
5:46
atributos. Por enquanto isso nós ficamos
5:49
a saber que os atributos são colocados
5:51
na tag de abertura, OK? E eles são
5:55
normalmente separadas por espaço, OK? é
5:58
que determina, não, esse é o primeiro
5:59
atributo, esse é o segundo atributo,
6:00
esse é o terceiro atributo e assim em
