Up next in 10
Neste curso de HTML para iniciantes, você vai aprender do zero como criar sites reais com projetos práticos como Currículo Profissional, Portfólio e Menu, entendendo a base essencial para quem quer seguir no desenvolvimento web ou trabalhar com frameworks em Python.
Ao longo do curso, você irá:
- Compreender a base da criação de sites
- Dominar os principais conceitos de HTML
- Criar páginas bem estruturadas e visualmente agradáveis
- Aplicar boas práticas usadas no mercado
- Desenvolver projetos práticos do início ao fim
Este curso é ideal para iniciantes e também para quem deseja reforçar ou organizar seus conhecimentos em desenvolvimento web.
👉 Acompanhe o Curso Completo de HTML
📺 Segue a playlist:
Aula 01 - Instalando o VSCODE :
Aula 02 - Brevemente:
Aula 03 - Brevemente:
Aula 04 - Brevemente:
Aula 05 - Brevemente:
Aula 06 - Brevemente:
Show More Show Less View Video Transcript
0:00
Olá pessoal, sejam bem-vindo de volta ao
0:01
canal aqui falando. Hoje vamos aprender
0:03
um pouquinho sobre tags em HTML. Então o
0:05
que são tags? Veja, tags são elementos
0:07
que indicam ao navegador da web como
0:09
exibir o conteúdo de uma página web. OK?
0:12
Então, e elas servem para que nós
0:13
possamos estruturar o layout de uma
0:16
página, bem como também adicionar texto,
0:18
imagem, links, formulários e outras
0:20
outros tipos de conteúdos necessários
0:22
presente no nosso aplicativos webs. Em
0:25
HTML existem diversos tipos de tags para
0:28
todo tipo de ação que nós gostaríamos de
0:30
realizar, OK? Mas antes de criarmos
0:32
qualquer tag, vamos tentar entender tipo
0:33
a estrutura principal de uma tag HTML.
0:35
Então, por exemplo, aqui temos a tag
0:37
parágrafo, OK? Então a tag parágrafo ela
0:40
é representada pela letra P. Então dessa
0:43
maneira que estamos a ver aqui P e P
0:46
dessa forma. OK? Então qual é a
0:47
diferença B? Nós temos esse simples aqui
0:49
as colchetes. Ele indica que uma tag foi
0:52
aberta, entende? Normalmente quando
0:53
estamos a abrir uma tag, ele começa
0:54
dessa forma aqui. E quando estamos a
0:56
fechar uma tag, é praticamente a mesma
0:58
forma, mas com uma barra ao iniciar. E
1:01
depois colocamos a letra que vem a
1:03
seguir que fecha a tag. Então essa aqui
1:05
é uma tag aberta, tag de abertura. Essa
1:08
aqui é uma tag de fechamento e o
1:10
conteúdo ele fica dentro entre as tags,
1:13
OK? Dessa forma. Então nesse caso aqui o
1:16
que será apresentado será esse senhor
1:18
aqui, meu parágrafo, OK? E as tagas não
1:21
são visíveis no nosso ambiente, OK? Ou
1:24
mel nosso aplicativo web, vamos assim
1:26
dizer, OK? E agora toda completa nós
1:30
chamamos de elemento HTML, por exemplo,
1:33
ataque de a combinação entre ataque de
1:35
abertura e ataque de fechamento. Todo
1:37
ele nós chamamos de elemento HTML, OK?
1:40
Agora o P em si dessa essa aqui é
1:42
representada de tag de abertura. Este é
1:45
chamado de tag de fechamento. Agora todo
1:48
tudo isso aqui é que nós vamos chamar de
1:50
elemento HTML. Agora o conteúdo esse que
1:53
está aqui dentro meu parágrafo, esse
1:55
aqui é o conteúdo. Como temos aqui um
1:56
exemplo, OK? Este é um exemplo de
1:58
parágrafo no HTML. O conteúdo dentro
2:00
desta TA será exibido em palavra avança
2:02
do género. Então isso quer dizer que
2:04
isso aqui, tudo isso aqui é o melhor
2:06
dizer todo este conteúdo aqui é que se
2:07
vai ser apresentado nosso documento
2:10
HTML. Existem diversos tipos de tags,
2:12
como por exemp podemos ver aqui tem eh
2:14
H1 que são tags para título, OK? Então
2:17
esse H1 ele vai até H6 exist
2:24
normalmente são tagos de título ser para
2:26
que nós possamos tipo dar título ao
2:28
nosso conteúdo nas nossas páginas webs.
2:31
Também tem a o P que representa
2:33
parágrafos, tem o img que representa
2:36
imagens, tem o A que representa links,
2:39
tem o L e também o O para as listas que
2:42
são ordenadas e também listas que não
2:43
que são não ordenadas, vamos assim
2:45
dizer. E tem essa, temos também aqui li
2:48
que é para items. OK? Então a tagp
2:50
normalmente ela é usada para parágrafo.
2:52
Para além dessas tags aqui, veja também
2:54
tem mais outra coisa que é bastante
2:56
importante nós sabemos. Veja, existem
2:57
tags conttainers que são tags de
2:59
conteúdo e também tags não contêiners
3:02
que são tags fazas. Ok? Então as tags
3:05
contêiners OK elas possuem uma tag de
3:07
abertura e também uma tag de fechamento
3:10
correspondentemente ok? E o conteúdo
3:11
desejado é colocado entre as duas tags,
3:13
como nós podemos ver aqui, por exemplo,
3:15
title, title. Então aqui abrimos, aqui
3:17
fechamos. H1 aqui abrimos H1 aqui
3:20
fechamos. OK? Então essas são as tags de
3:23
de conteúdo ou as tag conêiner. Agora já
3:25
as tags não contêiner, as tags vazias,
3:27
por exemplo, aqui a tag meta, essa tag
3:29
aqui ele fica no header, ok? E tem aqui
3:33
ataque link, ataque img, ataque impul.
3:36
Essas tags, eles apenas construir uma
3:38
ataque que é ataque de fechamento, ok?
3:40
Não existe ataque de abertura, ele é
3:42
mesmo apenas dessa forma aqui, dessa
3:44
maneira. Então, elas possuam uma tag de
3:45
fechamento correspondentemente. Essas
3:47
tagão usadas para inserir elementos ou
3:49
fornecer informações específicas na
3:52
página. Então, com mais tempo também,
3:54
quando vamos começar falando de cada um
3:57
deles individualmente, tu vais começar
3:59
entendendo o que é que essas tags
4:00
realmente fazem. Então, para nosso
4:02
exemplo aqui, temos aqui esse texto
4:03
aqui, OK? Exemplo de tag, doc, tab. Eu
4:06
vou copiar todo esse exemplo aqui
4:09
e vamos copiar tudo isto e vamos colar o
4:12
nosso viol. Então isso aqui ele de nos
4:14
apresentar algo assim do gênero, que
4:15
bem-vindo à minha página web. Pois aqui
4:18
nós colocamos título, OK? Eh, bem-vindo
4:20
à minha página web, razão pela qual que
4:22
bem-vindo está mais e tem mais um
4:24
highlight que é o título. Então, para
4:26
tal, vamos para melhor compreensão,
4:28
vamos copiar isto. Viremos aqui. OK, vou
4:31
colar e bum, dessa forma aqui. Eh,
4:34
deixa-me só formatar isso que tá muito
4:36
feio. Não gostei. Eu vou selecionar
4:39
tudo. Vou abrir lado direito da mouse.
4:40
Vamos formatar documento, formatar
4:42
selection. Um, ele formatou, organizou
4:44
melhor o código, OK? ou estava muito
4:46
feio. Vamos salvar isso
4:49
agora. Vamos visualizar aquele documento
4:51
no nosso browser. OK? Esse aqui é o
4:53
index. Eh, veremos aqui. Vamos colar,
4:57
abrir aqui. E bom, tá aqui. Bem-vindo à
4:59
minha tag. Essa tag aqui. Vamos abrir
5:02
dessa forma aqui. Vai ser melhor.
5:08
OK, perfeito. Então, estamos aqui assim.
5:10
Então aqui que está mais e negritado é o
5:13
nosso título principal que temos aqui o
5:15
H1, OK? E todos esses aqui são
5:18
parágrafos. Todos estes que estão aqui
5:19
são parágrafos, OK? E fechamos a nossa
5:22
T. Então agora se eu abrir, caso vamos
5:25
lá ver, caso eu abra uma ataque e
5:27
esquece de fechar ataque, vamos lá fazer
5:29
isso. Remover isto. Salvei. Vamos dar um
5:33
refresh. Como podemos ver ele afetou
5:35
todo o documento, OK? Então, a razão
5:37
pela qual que é muito importante que
5:38
quando tu abras uma tag, fecha sempre
5:41
essa tag, então pois tu vais ter tipo
5:44
erro, OK? Então o vai se comportar de
5:46
uma forma bastante estranha que tu não
5:48
vais entender, mas o que realmente está
5:50
acontecendo os parágrafos. Agora se eu
5:53
dar um refresh, como podemos ver nos
5:55
parágrafos, não tem assim muito efeito,
5:57
mas nas tags, OK? As tags H1, H2, é
6:00
muito importante que tu fecha sempre os
6:02
hashtag. Agora vamos copiar isto
6:05
diferença de H1 e H2, tá? OK. E rodei.
6:09
Bom, como estás a ver, o tamanho
6:10
reduziu, então aquilo vai reduzindo até
6:14
ao sexto, OK? Até sexta tag. Então essa
6:17
é a diferenç, por exemplo, aqui isso
6:18
seria o título, isto aqui seria um
6:21
subtítulo e aqui temos o nosso conteúdo,
6:23
OK? Então essa é a forma como tu crias
6:25
as tags em HTML. Existem diversos tipos
6:27
de tags para tarefas específicas. OK?
6:29
Então, se gostaremos de título, vamos
6:31
usar H1, H2, H3, algo assim do género,
6:33
OK? Pode ser título, subtítulo, algo
6:35
assim do género. Para parágrafo, usa-se
6:37
ataque P. E também não se preocupe, quer
6:39
deixar o link na descrição desse mesmo
6:40
vídeo sobre o conteúdo dessa aula, onde
6:42
tu poderás ir mais um pouquinho ao fundo
6:44
sobre as tags em HTML, OK? Então, esse é
6:48
o passo que tu tens que entender sobre
6:49
as tags. Então, existe as tag conteúdo e
6:51
as tags não conteúdos, OK? Não conteúdo,
6:53
que são as tags vazias. Aquelas tags não
6:55
precisam de abertura, apenas possuem
6:57
ataque de fechamento. Agora, as tags
6:59
conteúdos são as tags que possuem
7:00
abertura e fechamento. Então aqui são
7:03
praticamente esse o H1 que é para
7:05
título, o P que é para parágrafo e img
7:08
para imagem e assim em diante. Então com
7:10
tempo vamos fazer uso dessas tags, onde
7:12
tu vais poder lá entender melhor as
7:14
coisas aos poucos. OK? Eu sou João. Se
7:16
gostar da aula já sabe, dá um dá um like
7:19
no link e vejo na próxima aula. Ui,
#Jobs & Education