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
Bem-vindo de volta à segunda aula de
0:01
HTML. Então, já terminamos a
0:03
configuração do nosso ambiente de
0:04
trabalho. Agora vamos entender realmente
0:07
o que HTML.
0:10
Como diz aqui na nossa definição, HTML é
0:12
uma linguagem de marcação usada para
0:14
criar páginas web, OK? E ele serve para
0:18
que possa estruturar o conteúdo de uma
0:19
página web usando tags para marcar
0:21
elementos como cabeçalho, parágrafo,
0:24
imagem e links presentes no nosso
0:26
documento web. Então pensa HTML como se
0:28
fosse um documento OR, OK? Onde tu tens
0:30
o cabeçalho, tens o corpo e depois por
0:33
fim mais abaixo temos o nosso rodap. A
0:35
mesma coisa também funciona é um
0:36
documento HTML. Então veja essa página
0:39
aqui que nós um dos nossos eh projetos
0:41
que iremos fazer. Temos aqui o nosso
0:43
cabeçalho onde tem esse navegador aqui,
0:46
tudo isso aqui. Temos aqui o nosso corpo
0:51
e por fim temos aqui o fim, o que? que é
0:53
o nosso praticamento rodapé. Então essa
0:55
é a forma como eu organizei esse
0:57
documento, OK? Mas aqui no HTML, quando
0:59
estamos a falar o nosso cabeçalho,
1:01
estamos a nos referir de da eh da sua
1:05
estrutura, OK? De um documento HTML, pôs
1:08
o cabeçalho aqui iremos explicar mais um
1:09
pouquinho em frente, ok? Então alguns
1:11
topos que bas nós vamos tratar nesse
1:12
mesmo curso é o que são tagos em HTML, o
1:15
que são atributos em HTML, o que são
1:17
elementos em HTML. Veja, veja, o
1:19
documento HTML é composto de várias
1:21
partes que incluem declaração do tipo de
1:24
documento como a sessão head e a sessão
1:26
B. Então, essas duas sessões são as
1:28
sessões mais importantes. Depois tem
1:30
aqui a cabeça, OK? Então, a cabeça, os
1:33
visitantes podem ver as ações, OK? Mas
1:34
não podem ver os seus pensamentos. A
1:36
mesma coisa como nós ser humanos, nós
1:38
temos a nossa cabeça, dentro da cabeça
1:39
tem um cérebro, OK? As pessoas não podem
1:41
ver o meu cérebro, OK? Mas eles podem
1:43
ver as ações que são realizadas pelo meu
1:45
cérebro, OK? como por exemplo a opção
1:47
falar e eu falo devido ao meu cab, não
1:50
sei se essa definição está certa ou quê,
1:51
mas eu penso e logo falo, consigo falar
1:54
o que eu penso, algo assim do género e
1:56
depois também tem o meu corpo, o meu
1:58
corpo tem também outras funcionalidades
2:00
que ajudam a mover o braço, a perna,
2:02
tudo assim, todo, tudo está conectado
2:03
entre eles. Então, como nós dizemos, OK?
2:06
Na cabeça fiquem algumas informações que
2:09
ajudam com que nosso documento HTML
2:11
possa trabalhar normalmente, OK? Como
2:13
por exemplo, o título do documento fica
2:15
aqui dentro da nossa cabeça. Então a
2:17
cabeça ou melhor dizer o cabeçalho um
2:18
documento HTML é indicada pelas tags
2:21
header que temos aqui. Aqui ele começa
2:23
aqui e termina aqui. Então essa barra
2:25
que indica que ataque termina aqui é uma
2:27
é uma ataque de fechamento praticamente,
2:29
OK? E temos aqui o título dentro da da
2:32
tag header. Mesma coisa aqui. Ok? Então
2:35
por exemplo aqui onde tá escrito João
2:36
Fot Mand. Então isso aqui tá dentro da
2:39
tag header. Ok? Se eu inspecionar isso
2:41
aqui, esse aqui é o documento, tal
2:43
documento, nós vemos aqui na tag header,
2:46
tem aqui o header, aqui temos o nome
2:49
João Futuana, que é o título desse
2:51
documento, HTML, esse título desse
2:53
documento aqui, HTML, que tá toda essa
2:55
informação aqui presente na no header
2:58
não será exibida no nosso no nosso
3:00
documento HTML, como nós podemos ver
3:01
aqui. Aqui tem, por exemplo, tem meta,
3:04
tem link, tem ícon, fontes, algumas.
3:07
Então, toda essa informação aqui não
3:08
será exibida aqui no nosso documento
3:10
HTML, ou melhor dizer, não será exibida
3:12
no nosso corpo de HTML. OK? Agora, o que
3:16
isso corpo? OK, temos aqui o bom. Então,
3:18
qualquer coisa que você queira que seja
3:20
visível deve estar no corpo. Então, aqui
3:23
temos attack b que significa corpo, é
3:26
que dentro dela é nós vamos colocar toda
3:29
a informação que será visível no nosso
3:31
documento HTML. Toda essa informação
3:34
aqui está dentro do B. Então, se nós
3:36
vios aqui, por exemplo, tem aqui o B,
3:38
ele começou aqui, tem aqui header, OK?
3:41
Tem João Fut Moanda, depois tem início
3:43
sobre projeto, habilidade contactos. Nós
3:45
vemos aqui nosso documento tem João
3:46
Futanda, início sobre projetos,
3:48
habilidades contactos, tá ver? Toda essa
3:51
informação aqui, ele está dentro do
3:53
ataque P. Tem mais outras informações,
3:55
por exemplo, aqui. Olá, eu sou João
3:56
Fotimanda, desenvolvedor web, alguma
3:58
coisa do género. Nós vemos aqui, temos
4:00
aqui o nosso main, OK? Seção hero tem
4:03
João Fotimanda, depois olá eu sou João
4:06
Fotimanda. OK, crieio, eh, crio
4:09
experiências web com cores limpa, não
4:11
sei do género. Toda essa informação tá
4:12
aqui. Olá, sou João Fando, do web, criei
4:15
não sei quê, desenho, tá ver? Toda essa
4:17
informação aqui, tudo que está aqui, ele
4:19
está dentro da ataque B, OK? É como se
4:21
fosse algumas estruturas, algumas
4:23
camadas, OK? Então tem dentro da tag
4:25
também podem ter outras tags. Essas
4:27
outras tags nos ajuda com que nós
4:28
possamos estruturar melhor os nossos
4:31
documentos, OK? Tipo, para que nós
4:32
possamos organizar melhor, como por
4:34
exemplo cabeçalho e o corpo e o rodapé.
4:37
Então cabeçal temos esse header aqui.
4:40
Cuidado, não confunda esse header com
4:42
esse header, OK? Esse header aqui é é um
4:45
ataque que nos ajuda nós a organizarmos
4:47
melhores informações que estão dentro do
4:49
body, ok? Agora esse red aqui é mesmo
4:51
cabeça, OK? Tipo acima, tá no top. Esse
4:54
head com esse header é diferente. Então
4:57
assim é uma estrutura de um documento
4:59
HTML. OK. Temos o head, tá aqui e temos
5:02
o B. Então para melhores entender, vamos
5:04
ver o modo que pe aqui. Primeiro temos a
5:08
tag HTML. Então identifica o documento
5:11
como é HTML. Essa tag aqui, essas duas
5:13
tags, ele identifica esse todo documento
5:15
como um documento HTML. Nós vemos aqui
5:18
também no nosso exemplo, tá aqui para
5:19
cima, estás a ver? tem HTML. Então esse
5:23
HTML ele começa aqui e termina até aqui.
5:25
Então tudo fica dentro desse ataque.
5:28
Isso aqui é que indica que não. Esse
5:30
aqui é um documento HTML. OK. Depois
5:32
temos o segundo. Temos a cabeça fornece
5:34
informações sobre o documento. Temos
5:35
aqui é o nosso R, OK? Ele oferece
5:38
informações sobre o nosso documento. Uma
5:40
das informações, como por exemplo título
5:42
da página, que é título da página. Se
5:43
nós vios aqui o nosso título da página
5:47
aqui o nosso título da página é senhor
5:48
aqui João Fut manda portfólio. Então
5:51
esse é o nosso título da página, OK? A
5:53
mesma coisa que nós temos aqui é desde a
5:56
cabeça fornece informações sobre o
5:57
documento.
5:59
Então esse nosso documento aqui, se nós
6:01
vemos aqui na cabeça, vamos lá ver onde
6:04
está o título ou aqui. Título João
6:06
Futanda porfólio. Mesma coisa que temos
6:07
aqui nesse documento, João Futanda
6:09
Portifólio, certo?
6:11
Depois temos número três, é necessário
6:13
um título descritivo. Então é um título
6:15
praticamente esse aqui que nos diz aqui
6:17
que apresenta essa informação. E por fim
6:19
quarto o corte contém o conteúdo exibido
6:22
no navegador. Então todo esse conteúdo
6:24
aqui que está a ser exibido aqui no
6:25
nosso navegador tá dentro do nosso board
6:28
por isso por essa informação. OK? Agora
6:30
vamos estar no nosso eh vs code onde
6:33
vamos criar nossa primeira estrutura de
6:35
um documento HTML. Uma vez aqui para que
6:37
nós possamos criar uma estrutura de um
6:39
HTML, nós não precisamos saber o corpo
6:41
do zero a nossa não. O bom do pode é que
6:44
ele já tem algumas apropriações que nos
6:45
ajuda a nós criarmos uma estrutura. Isso
6:47
nós escrevemos e ele vai nos fazer a
6:49
estrutura. OK? A primeira é essa aqui.
6:51
Se tu escreveres do como podes ver aqui,
6:53
tá bem? E em abbreviation ok? Se tu
6:56
deres enter, ele te traz uma estrutura
6:59
HTML, OK? Mas essa estrutura não tá
7:00
completa pois falta uma coisa por cima.
7:03
Também podemos utilizar não faz mal, mas
7:05
não tá completa. Vamos remover isso.
7:07
Agora se tu escreveres também HTML,
7:09
dessa forma aqui tem várias estruturas
7:11
que ele te dá. OK. Para nós queremos
7:12
essa aqui, se eu clicar nele, estás a
7:14
ver? Me deu também uma outra outra
7:16
estrutura que é parecida com aqui que
7:17
tivemos anteriormente. OK. Mas o que
7:19
muda aqui esse senhor aqui é doc type.
7:22
Veja, o doc type é muito importante que
7:23
tu coloques em seus documentos HTML,
7:25
pois ele indica que essa página é uma
7:28
página HTML, porque além de HTML também
7:32
existem mais outras estruturas de
7:33
marcação, outras linguagens de marcação.
7:36
É por isso que é muito importante que tu
7:37
coloca isso do top.
7:39
Agora aqui onde temos HTML lang igual,
7:42
esse LAN indica que esse documento aqui,
7:45
a informação que está presente aqui está
7:46
escrita em inglês. OK? Então, nós
7:49
podemos mudar isso aqui, por exemplo,
7:50
para PT, eh, traço. Nós colocamos BR,
7:54
significa português Brasil. Se nós
7:56
colocamos PTPT dessa forma aqui,
7:59
significa português Portugal. OK?
8:00
Infelizmente para nós angolanos não
8:02
temos PTAo. Embora acho que deve ter
8:05
algumas versões que já tem mais atual
8:08
utiliza mais PTPT ou PTBR. OK, mas eu
8:11
prefiro manter PTPT. Ok, perfeito. E
8:14
aqui esse Lang indica que toda agora
8:16
dessa forma que está indicar que toda a
8:18
informação presente nesse documento HTML
8:21
é eh português. OK, perfeito. Então
8:25
temos aqui o nosso header e onde tem o
8:28
vídeo e temos o B. Então dessa forma
8:29
aqui já criamos a nossa primeira
8:31
estrutura básica de um documento HTML.
8:34
OK? Na próxima, então isso quer dizer
8:36
que na próxima aula vamos falar sobre TS
8:38
e mais outras coisas importantes sobre
8:40
HTML. OK? Então vamos ficar por aqui. Eu
8:42
sou João, se gostaste do vídeo, já sabe,
8:43
dá um like no vídeo e vejo na próxima
8:45
aula, OK?
#Jobs & Education