02 - Estrutura básica e Cabeçalhos.

00:54:50
https://www.youtube.com/watch?v=Ud8DlVJ6jF4

摘要

TLDRA aula revisa conceitos fundamentais de HTML, incluindo a definição de hipertexto como uma combinação de diversos meios de comunicação em páginas web. O professor detalha a estrutura básica de uma página HTML, a importância de usar a extensão .html ao salvar arquivos, e como usar tags para cabeçalho e listas. As tags de cabeçalho variam de H1 a H6, onde H1 é o título mais importante. Listas são apresentadas através de listas ordenadas (usando <ol>) e listas não ordenadas (usando <ul>). O uso de atributos, como 'type' para definir o tipo de lista também é discutido. Por fim, a gravação menciona a importância da prática e a realização de atividades práticas para fixação do conteúdo.

心得

  • 📚 Revise a estrutura básica de uma página HTML: <html>, <head>, <body>
  • 🔤 Use tags de cabeçalho de H1 a H6 para definir títulos
  • 🔢 Diferencie entre listas ordenadas (<ol>) e não ordenadas (<ul>)
  • 📝 Salve arquivos HTML com a extensão .html para garantir a formatação correta
  • ⚙️ Atributos em tags fornecem informações adicionais importantes

时间轴

  • 00:00:00 - 00:05:00

    O vídeo começa com uma revisão de conceitos sobre HTML, onde o professor explica o que é HPML e a definição de hipertexto, que envolve não apenas texto, mas diversos meios de comunicação como imagens e vídeos.

  • 00:05:00 - 00:10:00

    A estrutura básica de uma página HTML é discutida, sendo necessário iniciar, por exemplo, com a declaração doctype, juntamente com as tags HTML, incluindo abertura e fechamento, como 'html', 'head' e 'body'.

  • 00:10:00 - 00:15:00

    O professor enfatiza a importância de abrir e fechar corretamente as tags no HTML, assim como a hierarquia das tags de cabeçalho, que vão de H1 a H6, sendo H1 o título mais importante e H6 o menos importante.

  • 00:15:00 - 00:20:00

    Os alunos praticam criando um arquivo HTML, nomeando-o corretamente com a extensão .html e abrindo-o em um navegador, procurando garantir que o arquivo foi salvo corretamente.

  • 00:20:00 - 00:25:00

    A próxima parte da aula aborda a criação de títulos e subtítulos, onde o professor exemplifica como usar as tags de cabeçalho para formatar títulos em uma página, e como os títulos influenciam o layout na web.

  • 00:25:00 - 00:30:00

    O uso de parágrafos é introduzido com a tag P, e o professor apresenta a tag de quebra de linha BR, explicando como cada um deles afeta o comportamento do texto dentro da estrutura HTML.

  • 00:30:00 - 00:35:00

    O vídeo avança para listas, onde são definidas listas desordenadas (UL) e ordenadas (OL), mostrando como criar listas com marcadores e o uso adequado das tags LI para itens individuais.

  • 00:35:00 - 00:40:00

    O professor exemplifica a implementação de listas dentro de uma página HTML, sempre enfatizando a importância de abrir e fechar corretamente as tags, para evitar erros de formatação.

  • 00:40:00 - 00:45:00

    Discussões sobre atributos HTML e como eles fornecem informações adicionais sobre as tags, incluindo o exemplo do atributo 'type' em listas ordenadas para alterar a apresentação dos itens da lista.

  • 00:45:00 - 00:54:50

    A aula conclui com uma breve revisão dos conceitos abordados, incluindo a utilização de tags de cabeçalho, parágrafos, quebras de linha e listas, preparando os alunos para a próxima aula sobre inserção de imagens.

显示更多

思维导图

视频问答

  • O que é hipertexto?

    Hipertexto refere-se a um conjunto de meios de comunicação, incluindo texto, imagens, vídeos, áudios, e animações numa página web.

  • Qual é a estrutura básica de uma página HTML?

    A estrutura básica é composta por tags como <!DOCTYPE html>, <html>, <head>, <title>, e <body>.

  • Como são chamadas as tags em HTML?

    As tags são chamadas de tags de abertura e fechamento, onde cada tag aberta deve ter uma correspondente fechada.

  • Qual é a diferença entre listas ordenadas e não ordenadas?

    Listas ordenadas usam a tag <ol> e são numeradas, enquanto listas não ordenadas usam <ul> e são marcadas com círculos ou quadrados.

  • O que são atributos em HTML?

    Atributos são informações adicionais sobre uma tag, especificadas na tag de abertura.

查看更多视频摘要

即时访问由人工智能支持的免费 YouTube 视频摘要！
字幕
pt
自动滚动:
  • 00:00:02
    E aí
  • 00:00:08
    E aí
  • 00:00:15
    é
  • 00:00:16
    legal pessoal vamos lá
  • 00:00:21
    e vamos começar
  • 00:00:24
    revisão de alguns conceitos da aula
  • 00:00:26
    passada e a gente ia dar continuidade
  • 00:00:27
    tudo bem
  • 00:00:30
    Bom vamos lá é quem lembra o que é HP ml
  • 00:00:39
    hiper Hiper text texto Hum tá certo
  • 00:00:46
    línguas de
  • 00:00:48
    alta ou M
  • 00:00:51
    múltiplos não
  • 00:00:55
    ligar de tarde esperando em cima ó ai
  • 00:00:59
    per chi
  • 00:01:01
    fêmea do que
  • 00:01:03
    marca vídeos marcamp
  • 00:01:08
    lembro L lembrete lembrete linguagem
  • 00:01:13
    isso
  • 00:01:15
    em português traduzido ficaria
  • 00:01:19
    placar de língua
  • 00:01:22
    linguagem de marcação de hipertexto
  • 00:01:26
    perfeito linguagem
  • 00:01:30
    a demarcação
  • 00:01:34
    G1
  • 00:01:37
    o texto
  • 00:01:39
    a beleza Vocês tem ideia do que a
  • 00:01:42
    hipertensão é
  • 00:01:47
    E aí
  • 00:01:49
    não não não não não
  • 00:01:53
    algum palpite é esse texto muito muito
  • 00:01:58
    grande ele é
  • 00:02:00
    e na verdade não é hipertensa o pessoal
  • 00:02:04
    ele tá se referindo a
  • 00:02:07
    diferentes tipos de mídia de meios de
  • 00:02:10
    comunicação não apenas texto
  • 00:02:14
    o presente eu acho que podemos inserir
  • 00:02:17
    em uma página Web texto
  • 00:02:20
    nós sabemos inserir imagens
  • 00:02:25
    os vídeos
  • 00:02:28
    eu vou colocar
  • 00:02:31
    os áudios
  • 00:02:34
    as animações
  • 00:02:36
    enfim é tudo isso esse conjunto de itens
  • 00:02:42
    que nós chamamos de meios de comunicação
  • 00:02:45
    é nós chamamos de hipertexto
  • 00:02:49
    hipertexto é um conjunto aí de meios de
  • 00:02:52
    comunicação
  • 00:02:54
    antigamente as páginas de internet no
  • 00:02:56
    início da informática eram baseadas em
  • 00:02:59
    apenas texto hoje não né hoje nós
  • 00:03:02
    inserimos nas páginas texto imagens
  • 00:03:05
    vídeos áudios animações gráficos Enfim
  • 00:03:09
    uma série de
  • 00:03:11
    informações perfeito
  • 00:03:16
    Olá pessoal vocês estão me ouvindo bem
  • 00:03:19
    Ah sim também tem criar Agora nós
  • 00:03:23
    estamos em
  • 00:03:25
    27 ou agora melhorou em beleza Tá bom
  • 00:03:29
    pessoal é outra coisa que eu quero
  • 00:03:31
    realizar com vocês toda vez que nós
  • 00:03:34
    vamos criar uma página de internet nós
  • 00:03:38
    precisamos digitar a estrutura básica da
  • 00:03:40
    página
  • 00:03:41
    alguém lembra qual é a estrutura básica
  • 00:03:45
    de uma página de internet que pai lá a
  • 00:03:49
    estrutura básica
  • 00:03:51
    bom então toda vez que nós vamos digitar
  • 00:03:56
    tem que ser irão comando da linguagem
  • 00:03:58
    HTML nós temos que inserido Esse comando
  • 00:04:00
    entre o sinal de menor e maior
  • 00:04:04
    certo os comandos no HTML são chamados
  • 00:04:07
    de
  • 00:04:11
    e esfregue pegue o Tag beleza perfeito
  • 00:04:16
    Tá
  • 00:04:18
    qual que é a estrutura básica e vou
  • 00:04:20
    criar uma página Qual que é a estrutura
  • 00:04:22
    básica para criar uma página de internet
  • 00:04:24
    toda vez que foi criar uma página eu
  • 00:04:27
    tenho que digitar essa estrutura básica
  • 00:04:28
    qual que é essa estrutura básica doctype
  • 00:04:32
    o doctype html
  • 00:04:36
    o
  • 00:04:37
    rock Type 1 em
  • 00:04:40
    HTML assim tá faltando alguma coisa ou
  • 00:04:43
    não
  • 00:04:46
    a formação não pode exclamação é certo
  • 00:04:54
    eu acho que no começo no começo ué nome
  • 00:04:58
    aí no começo Olha lá e vou confiar em
  • 00:05:03
    você sem é é mas eu acho que é do meio
  • 00:05:06
    eu meio assim também no começo também O
  • 00:05:10
    mestre Eu também acho que no começo
  • 00:05:12
    vamos lá e o próximo ataque a HTML a
  • 00:05:18
    isso eu tinha falado para vocês o
  • 00:05:20
    seguinte normalmente as tags precisam
  • 00:05:24
    ser abertas e fechadas seu abrir a pega
  • 00:05:28
    HTML eu preciso fechar a tag HTML
  • 00:05:32
    através da Barra Então eu tenho assim
  • 00:05:35
    comando de abertura e um comando de
  • 00:05:38
    fechamento perfeito abre a sessão aqui
  • 00:05:42
    do HTML fechei a sessão de html aqui no
  • 00:05:45
    meio eu vou encher aí todas as tags
  • 00:05:48
    todos os comandos e fazem parte da
  • 00:05:50
    linguagem HTML Qual que é o a próxima
  • 00:05:53
    tag e
  • 00:05:55
    o cabeçalho rede
  • 00:05:58
    isso não é de abertura e Red de
  • 00:06:03
    fechar mexa fechamento eu vejo aqui
  • 00:06:07
    pessoal aqui ó eu vou pressionar a barra
  • 00:06:09
    de espaço uma duas vezes
  • 00:06:13
    é
  • 00:06:14
    isso daqui não tem diferença tá eu
  • 00:06:16
    poderia deixar assim eu só faço isso
  • 00:06:20
    para visualmente eu consegui perceber
  • 00:06:23
    que a tag head por exemplo ela está
  • 00:06:26
    dentro da tag html
  • 00:06:30
    eu vou fazer a mesma coisa aqui ó tem
  • 00:06:33
    uma tag nós devemos colocar dentro da
  • 00:06:35
    tag head Então vou dar duas barras de
  • 00:06:38
    espaço aqui ó esse amore
  • 00:06:42
    Essa é a bar está bem
  • 00:06:45
    com certeza não vai tag triplo Deus tá
  • 00:06:51
    então é isso é preciso abrir e fechar o
  • 00:06:58
    o que eu tenho que colocar print das
  • 00:07:01
    editais de abertura e fechamento
  • 00:07:05
    esse título vai aparecer aonde na página
  • 00:07:10
    inicial
  • 00:07:12
    Prefeito lá na na
  • 00:07:15
    parte superior fora do corpo à tarde
  • 00:07:18
    beleza então vou colocar assim ó
  • 00:07:22
    o primeiro
  • 00:07:25
    a BS achou Pode ser ou não ou não é
  • 00:07:30
    e é cê é louco
  • 00:07:35
    legal e agora qual que é a próxima tag
  • 00:07:38
    Body o corpo agora tinha Bora e agora
  • 00:07:41
    esse é o baile pare seu Abrir até aqui
  • 00:07:45
    vários preciso fechar fechar com
  • 00:07:48
    barramare
  • 00:07:50
    perfeito legal e aqui dentro eu coloco o
  • 00:07:54
    conteúdo que eu quero adicionar na
  • 00:07:57
    página a estrutura base nessa Tá
  • 00:08:02
    certo para que que serve esse doctype
  • 00:08:05
    HTML pessoal para mostrar que é um
  • 00:08:08
    documento do HTML para as quando for
  • 00:08:11
    salvo na verdade não é esse locktype
  • 00:08:14
    aqui quando nós colocamos nós estamos
  • 00:08:17
    indicando
  • 00:08:18
    é que nós estamos utilizando o HTML5 a
  • 00:08:22
    versão 5 do HTML nas outras versões não
  • 00:08:26
    precisava colocar quando eu vi
  • 00:08:31
    tô precisando do HTML5 grande serve para
  • 00:08:34
    indicar a versão do HTML que vai ser
  • 00:08:37
    usado perfeito
  • 00:08:41
    em alguma dúvida em relação à estrutura
  • 00:08:44
    básica penal
  • 00:08:47
    é só aqui tem que tá muito claro para
  • 00:08:51
    vocês assim vamos criar uma página nova
  • 00:08:54
    eu tenho que digitar essa estrutura
  • 00:08:56
    básica
  • 00:08:57
    para quem eu vou até dar um control-x
  • 00:09:01
    aqui ó contra o X para recortar vou
  • 00:09:05
    abrir um arquivo novo
  • 00:09:07
    um control V para colar perfeito o
  • 00:09:12
    eu tenho aqui a estrutura básica E agora
  • 00:09:15
    o que que eu devo fazer eu devo salvar
  • 00:09:18
    como Qual que é a extensão dos arquivos
  • 00:09:22
    HTML
  • 00:09:24
    Então vamos lá ó arquivo salvar Vou
  • 00:09:29
    salvar aqui na área de trabalho
  • 00:09:31
    é o nome do arquivo pode ser qualquer um
  • 00:09:34
    no entanto nós devemos evitar nomes com
  • 00:09:38
    acentuação de ilha normalmente a gente
  • 00:09:41
    coloca sem
  • 00:09:44
    acentuação e caracteres especiais tal
  • 00:09:47
    então vou colocar aqui por exemplo nome
  • 00:09:49
    de Gilberto
  • 00:09:52
    o imaginam
  • 00:09:54
    E no entanto eu preciso salvar como
  • 00:09:58
    ponto o que é html
  • 00:10:02
    html não pode esquecer disso daqui se eu
  • 00:10:05
    deixar assim e salvar ele vai salvar
  • 00:10:08
    como um arquivo de texto do bloco de
  • 00:10:10
    notas Então tem que colocar ponta HTML e
  • 00:10:14
    agora sim salvar e pronto eu tenho
  • 00:10:18
    código fonte da página que nós
  • 00:10:21
    minimizarmos eu tenho a página gerada
  • 00:10:24
    perfeito posso clicar duas vezes e abrir
  • 00:10:28
    ela no navegador Olha lá primeiros nessa
  • 00:10:31
    é show
  • 00:10:33
    Ah e não tem conteúdo nenhum aqui dentro
  • 00:10:35
    por enquanto pode falar eu tenho que
  • 00:10:38
    fazer essa aqui é a minha não tira uma
  • 00:10:40
    página ali ficou em arquivos
  • 00:10:43
    aqui é a régua aqui dos nas pastas peça
  • 00:10:48
    não ficou com o ícone do Google o meu
  • 00:10:51
    dia de outro navegador não eu tenho que
  • 00:10:54
    acessar arquivos para achar
  • 00:10:57
    o meu deu tudo certo aqui
  • 00:11:00
    bom Então na verdade ó
  • 00:11:03
    quer ver deixa eu mostrar uma coisa para
  • 00:11:05
    vocês não sei se é isso que aconteceu
  • 00:11:07
    com o seu tá mas por exemplo fechei o
  • 00:11:10
    bloco de notas eu quero abrir o
  • 00:11:12
    código-fonte de novo
  • 00:11:15
    e eu posso abrir um bloco de notas em
  • 00:11:18
    branco
  • 00:11:21
    aí eu venho aqui no arquivo abrir o que
  • 00:11:25
    eu quero abrir o código-fonte pajem área
  • 00:11:28
    de trabalho tá vendo que não aparece a
  • 00:11:30
    página
  • 00:11:32
    porque porque ele tá mostrando apenas e
  • 00:11:35
    documentos de texto na verdade na área
  • 00:11:37
    de trabalho não tem nenhum documento de
  • 00:11:40
    texto se eu peço para visualizar todos
  • 00:11:42
    os arquivos aí eu consigo ver a página
  • 00:11:45
    de internet você seleciona e consigo
  • 00:11:48
    abrir o código-fonte
  • 00:11:50
    Ah tá então tem esse macetinho ainda é
  • 00:11:54
    e eu posso é se não ficou aparecendo
  • 00:11:57
    como um arquivo como uma página de
  • 00:12:00
    internet para você é muito provável que
  • 00:12:03
    você salvou errado você não salvou como
  • 00:12:05
    ponto html
  • 00:12:07
    Ah tá eu teria que salvar de novo
  • 00:12:12
    a beleza eles mas eu consegui tirar uma
  • 00:12:15
    página estou em branco tipo em branco
  • 00:12:17
    assim
  • 00:12:18
    e quando você abrir o ficou assim no
  • 00:12:21
    navegador sim aí tinha um cabeçalho lá
  • 00:12:24
    que eu escrevi meu nome aí parte assim ó
  • 00:12:26
    eu escrevi algumas coisas
  • 00:12:28
    Ah então acho que deu certo sim mas
  • 00:12:31
    pessoas só não apareci na área de
  • 00:12:33
    trabalho tava arquivos Ah tá é talvez na
  • 00:12:37
    hora de salvar você não escolheu a área
  • 00:12:39
    de trabalho
  • 00:12:40
    selecionou outra passa mas não tem
  • 00:12:43
    problema o importante é salvar como
  • 00:12:46
    ponto HTML tá bom
  • 00:12:49
    beleza pessoal então isso daqui ó nós
  • 00:12:53
    vimos na aula passada
  • 00:12:57
    E aí
  • 00:13:05
    é legal a estrutura básica
  • 00:13:09
    é
  • 00:13:11
    legal então na aula de hoje nós vamos
  • 00:13:14
    continuar desse ponto em diante tá bom
  • 00:13:18
    É nesse slide pessoal eu falo sobre tags
  • 00:13:21
    de cabeçalho ou tags de títulos o que
  • 00:13:25
    que acontece nós podemos criar
  • 00:13:29
    e da nossa página de internet por
  • 00:13:32
    exemplo vamos voltar aqui no
  • 00:13:34
    código-fonte acho que eu fechei né eu
  • 00:13:36
    posso abrir ele é assim também foi feita
  • 00:13:40
    abrir com bloco de notas só que eu tinha
  • 00:13:43
    falado para vocês usarem o Notepad + +
  • 00:13:47
    eu vou começar a utilizar o Notepad + +
  • 00:13:49
    tá bom Ó editar com Notepad + +
  • 00:13:54
    a beleza é a mesma coisa tá bom
  • 00:13:57
    aí aqui no conteúdo pessoal dentro do
  • 00:14:00
    bari vou fazer assim ó vou digitar por
  • 00:14:03
    exemplo
  • 00:14:07
    o desenvolvimento
  • 00:14:08
    [Música]
  • 00:14:11
    quem está errado aqui
  • 00:14:15
    desenvolvimento de sistemas
  • 00:14:22
    o
  • 00:14:23
    Euro pés perfeitos ó
  • 00:14:27
    salvei vamos atualizar a página
  • 00:14:31
    o
  • 00:14:32
    desenvolvimento de sistemas primeiro
  • 00:14:34
    deles certo acho que assim
  • 00:14:37
    desenvolvimento de sistemas aqui eu
  • 00:14:39
    quero deixar ele como um título Como
  • 00:14:42
    assim professor não tô entendendo eu
  • 00:14:44
    quero que essa informação pessoal fique
  • 00:14:47
    Desde da casa vamos imaginar vocês vão
  • 00:14:50
    fazer uma redação no caderno a redação o
  • 00:14:53
    texto normalmente têm título não tem a
  • 00:14:57
    eu quero deixar esse título escrito no
  • 00:14:59
    caderno de Vermelho e o texto eu vou
  • 00:15:01
    escrever de caneta azul É como se eu
  • 00:15:03
    quisesse fazer isso aqui eu quero deixar
  • 00:15:06
    isso como um título
  • 00:15:09
    é certo
  • 00:15:12
    o que é que eu posso fazer para isso
  • 00:15:15
    então eu posso utilizar essas tags de
  • 00:15:18
    cabeçalho
  • 00:15:19
    elas variam do H1 até o h61
  • 00:15:28
    G1
  • 00:15:30
    Olá pessoal eu vou só fechar o microfone
  • 00:15:33
    de vocês em que só que se alguém quiser
  • 00:15:37
    falar alguma coisa tal só abrir e falar
  • 00:15:39
    tá bom
  • 00:15:42
    Oi beleza
  • 00:15:50
    é
  • 00:15:51
    isso então aqui ó essa tag varia do H1
  • 00:15:55
    H3 h11 define o cabeçalho mais
  • 00:15:59
    importante e oh6 define o cabeçalho
  • 00:16:03
    menos importante então por exemplo se eu
  • 00:16:07
    fizer assim ó
  • 00:16:09
    nesse texto desenvolvimento de sistemas
  • 00:16:12
    antes dele eu abri a FEB a Galo
  • 00:16:16
    no final fechar a pegue e apaga um
  • 00:16:21
    o navegador vai reconhecer que isso
  • 00:16:25
    daqui é um título e o título mais
  • 00:16:28
    importante que da página Vamos salvar
  • 00:16:30
    para ver como que vai ficar salvei
  • 00:16:37
    eu atualizei olha lá tá vendo que ele
  • 00:16:40
    ficou com o tamanho maior ele ficou com
  • 00:16:44
    o se vocês observarem ele ficou
  • 00:16:46
    com a próxima informação já veio
  • 00:16:50
    até para baixo porque quando nós
  • 00:16:52
    colocamos uma dessas tags H1 H2 H3
  • 00:16:57
    o navegador entende que isso é um título
  • 00:17:00
    E isso tem que ficar em um parágrafo é
  • 00:17:04
    uma próxima informação já vem para baixo
  • 00:17:06
    automaticamente
  • 00:17:08
    Nossa Professor mais não entendi porque
  • 00:17:12
    tem esse H2 H3 H4
  • 00:17:17
    isso daí pessoal é vamos supor às vezes
  • 00:17:21
    nessa página Eu tenho esse título
  • 00:17:24
    principal Oi e aí depois esse primeiro
  • 00:17:28
    DS por exemplo vamos supor que ele é um
  • 00:17:30
    subtítulo
  • 00:17:32
    de desenvolvimento de sistemas
  • 00:17:35
    Esse é um subtítulo então eu posso
  • 00:17:38
    colocar seu desenvolvimento de sistema é
  • 00:17:42
    o H1 e o primeiro dessa um subtítulo
  • 00:17:45
    então o primeiro DS vai ser o H2
  • 00:17:52
    e já dois
  • 00:17:54
    contra o Oeste para salvar
  • 00:17:58
    eu atualizei pronto se vocês repararem
  • 00:18:02
    Esse aqui é um pouco maior Esse é o
  • 00:18:05
    título principal da tarde esse seria um
  • 00:18:07
    subtítulo
  • 00:18:10
    e eu posso eu vou copiar esse texto
  • 00:18:14
    pessoal ó opa
  • 00:18:18
    e com cruz e
  • 00:18:21
    um control V
  • 00:18:23
    a fazer isso
  • 00:18:26
    José mais ó
  • 00:18:28
    em 3 4 5 e 6
  • 00:18:33
    E aí vamos colocar
  • 00:18:35
    Olá pessoal A princípio eu vou pedir
  • 00:18:37
    para vocês
  • 00:18:39
    fazerem tinha para fazendo aqui eu
  • 00:18:41
    poderia copiar e colar poderia só que
  • 00:18:44
    isso daqui é bom que vocês dígitos vocês
  • 00:18:48
    façam manualmente vocês não copie e cole
  • 00:18:50
    isso ajuda no aprendizado de vocês faz
  • 00:18:54
    manualmente tá tem que copiar e colar
  • 00:18:57
    vai chegar uma hora que vai ficar
  • 00:19:00
    automático aí pode copiar e colar mas
  • 00:19:02
    por enquanto não
  • 00:19:08
    e
  • 00:19:10
    olha lá então esse desenvolvimento de
  • 00:19:13
    sistema vai ser o título principal
  • 00:19:15
    da página esse segundo é um subtítulo do
  • 00:19:21
    primeiro o terceiro é um subtítulo do
  • 00:19:24
    segundo e assim sucessivamente
  • 00:19:27
    o seu atualizar a página agora olha lá
  • 00:19:31
    todos ficaram com no entanto
  • 00:19:35
    esse com tamanho maior porque ela título
  • 00:19:38
    principal esse um pouco menor porque é
  • 00:19:41
    um subtítulo desse tá então se na página
  • 00:19:46
    eu quero atribuir esses níveis de
  • 00:19:49
    hierarquia eu tenho que trabalhar com
  • 00:19:53
    essas tags H1 H2 H3 H4
  • 00:19:57
    h11 é o título principal o título
  • 00:20:01
    principal da página nós usamos a tag H1
  • 00:20:05
    eu abri antes do título e fecha depois
  • 00:20:08
    no final do texto que você quer aplicar
  • 00:20:11
    com título principal
  • 00:20:13
    tá bom
  • 00:20:15
    e olha lá
  • 00:20:18
    Esse é o nós fizemos né esse código e
  • 00:20:21
    girou esse resultado
  • 00:20:25
    eu queria pessoal por exemplo só para
  • 00:20:29
    para ir mostrar para vocês vamos supor
  • 00:20:31
    assim ó vou criar uma página de internet
  • 00:20:34
    Falando sobre
  • 00:20:36
    as Américas então por exemplo poderia
  • 00:20:39
    colocar assim ó
  • 00:20:41
    a América
  • 00:20:44
    o Américas é o que é o título principal
  • 00:20:49
    E aí eu quero falar sobre América
  • 00:20:54
    na América do Sul e América do Norte
  • 00:21:01
    E aí
  • 00:21:06
    como
  • 00:21:10
    é que eu vou fazer aqui ó ó
  • 00:21:14
    a
  • 00:21:15
    América do Norte
  • 00:21:19
    e como salvar me atualizar
  • 00:21:22
    e
  • 00:21:23
    o título principal é América
  • 00:21:28
    América do Sul e América do Norte
  • 00:21:31
    são subitens de Américas então tanto
  • 00:21:36
    América do Sul quanto América do Norte
  • 00:21:39
    eu coloquei o H2 por quê Porque O H2 é
  • 00:21:43
    um subtítulo do H1 E aí aqui dentro por
  • 00:21:47
    exemplo eu posso colocar um parágrafo
  • 00:21:50
    aos abrir um parágrafo
  • 00:21:53
    colocar um texto falando sobre
  • 00:21:58
    a América
  • 00:22:00
    a colocação América
  • 00:22:04
    E aí
  • 00:22:09
    eu pegar qualquer um aqui só para para
  • 00:22:13
    exemplo mesmo tá pessoal
  • 00:22:16
    e
  • 00:22:17
    esse daqui é
  • 00:22:19
    tu
  • 00:22:20
    não comprou você
  • 00:22:22
    é só dentro desse parágrafo
  • 00:22:25
    ou colar
  • 00:22:28
    olá uh
  • 00:22:30
    Jardim que eu abri aqui o parágrafo e
  • 00:22:33
    fechei aqui no final
  • 00:22:36
    em salvar
  • 00:22:39
    Como atualizar tabela bem título
  • 00:22:43
    principal em um parágrafo parágrafo
  • 00:22:47
    falando sobre América aqui eu tenho um
  • 00:22:49
    subtítulo
  • 00:22:51
    e os pesquisar agora América do Sul
  • 00:22:57
    E aí
  • 00:23:03
    e
  • 00:23:04
    vamos dar um chopp cola aqui control c
  • 00:23:07
    control V
  • 00:23:09
    na América do Sul Vamos criar um
  • 00:23:13
    parágrafo
  • 00:23:15
    se abre e fecha parágrafo
  • 00:23:17
    ó e aqui dentro colar o texto referente
  • 00:23:21
    a América do Sul
  • 00:23:23
    Eu salvei atualiza a página pronto
  • 00:23:28
    na América do Norte
  • 00:23:31
    a
  • 00:23:32
    mesma coisa
  • 00:23:43
    a
  • 00:23:45
    compra você
  • 00:23:48
    eu
  • 00:23:49
    abri parágrafo fecha
  • 00:23:54
    eu
  • 00:23:55
    ouvi contra o s para salvar
  • 00:24:00
    atualizar
  • 00:24:02
    pessoal nós poderíamos fazer também
  • 00:24:04
    seguinte por exemplo aqui na América do
  • 00:24:07
    Sul América do Sul
  • 00:24:10
    e me falem um país aí da América do Sul
  • 00:24:15
    um dois três três países da América do
  • 00:24:18
    Sul falem aí por favor
  • 00:24:21
    o Brasil Colômbia Argentina Brasil
  • 00:24:31
    a Colômbia e Argentina
  • 00:24:35
    a beleza salvei atualizei Brasil
  • 00:24:40
    Colômbia Argentina O que que eu quero
  • 00:24:43
    fazer eu quero colocar o Brasil como
  • 00:24:45
    subitem de América do Sul
  • 00:24:48
    e o América do Sul eu utilizei o H1 ou
  • 00:24:52
    H2
  • 00:24:54
    a pagar dois porque ele é um subitem
  • 00:24:57
    genéricas
  • 00:24:59
    E se o Brasil é um subitem de América do
  • 00:25:02
    Sul e não América do Sul Eu usei o H2 no
  • 00:25:06
    Brasil eu tenho que usar o H3
  • 00:25:09
    o Brasil é um sub ipe e América do Sul
  • 00:25:13
    e na verdade eu tenho que fazer isso
  • 00:25:15
    para os outros também
  • 00:25:17
    a Colômbia e Argentina são subitem
  • 00:25:22
    é de América do Sul seu América do Sul e
  • 00:25:26
    H2 os países vão ser o H3
  • 00:25:30
    Ah então tá vendo para eu definir esses
  • 00:25:32
    níveis de hierarquia em que os utilizar
  • 00:25:36
    essas tags tag de título cabeçalho do H1
  • 00:25:41
    até o h-6
  • 00:25:43
    e olha lá tá vendo que já ficou um
  • 00:25:45
    pouquinho menor em relação ao H2
  • 00:25:51
    eu voltar
  • 00:25:52
    o que é América do Norte fala em três
  • 00:25:55
    países daí da América do Norte vamos
  • 00:25:58
    colocar aqui ó
  • 00:25:59
    México Estados Unidos e Canadá
  • 00:26:05
    E aí
  • 00:26:09
    o México
  • 00:26:12
    Estados Unidos
  • 00:26:15
    I e II
  • 00:26:18
    o Canadá
  • 00:26:21
    Ah beleza eu coloquei H3 né ó os países
  • 00:26:25
    H3 por quê Porque eles são subitens do
  • 00:26:29
    H2 anterior que o América do Norte
  • 00:26:35
    e vamos atualizar pronto eu carimbos
  • 00:26:39
    tamanho só esse é o maior
  • 00:26:42
    América do Sul e América do Norte é um
  • 00:26:45
    pouquinho menor do que o América porque
  • 00:26:48
    esses dois são subitens do América
  • 00:26:52
    esses três são subitens subitem desses
  • 00:26:57
    América do Sul e esses três subitem na
  • 00:27:00
    América do Norte
  • 00:27:02
    certo poderíamos continuar aqui ó
  • 00:27:04
    América Central
  • 00:27:05
    colocar
  • 00:27:08
    Cuba Bahamas ifr online
  • 00:27:12
    E para isso Ficou claro aí pessoal
  • 00:27:15
    alguma dúvida e
  • 00:27:17
    não é melhor fácil de cabeça
  • 00:27:21
    tranquilo né é Não entanto se tiver
  • 00:27:25
    alguma dúvida alguma coisa
  • 00:27:27
    E pode perguntar pode falar aí tá bom
  • 00:27:36
    E aí
  • 00:27:37
    a beleza continuando aqui então pessoal
  • 00:27:43
    Olha lá a tag pq Nossa acabamos de
  • 00:27:46
    utilizar né a tag P serve para criar
  • 00:27:49
    parágrafo então toda vez que a gente
  • 00:27:51
    precisar criar um parágrafo Nós temos
  • 00:27:54
    que colocar a tag P deve impedir a
  • 00:27:56
    abertura tag perder fechamento eu até
  • 00:27:59
    mostrei isso para vocês não a passadas
  • 00:28:01
    eu não me engano
  • 00:28:03
    o seguinte ó
  • 00:28:06
    o nome digitar aqui ó
  • 00:28:09
    o fast 1
  • 00:28:12
    the best 2
  • 00:28:17
    e lá contra o Oeste para salvar
  • 00:28:21
    e vamos atualizar a página apareceu uma
  • 00:28:25
    informação na frente da outra o
  • 00:28:27
    navegador não entende que aqui não é
  • 00:28:32
    editor não código-fonte eu pressionei o
  • 00:28:34
    Inter ele não entendi para que fique uma
  • 00:28:38
    informação o teste um e em parágrafo e o
  • 00:28:40
    PS2 e outra parada nós temos que aplicar
  • 00:28:45
    colocar a tag p a tag cria o parágrafo
  • 00:28:48
    lá no marcador e o navegador perdão
  • 00:28:51
    então preciso abrir o p e fechar a pele
  • 00:28:56
    p
  • 00:28:58
    E aí
  • 00:29:06
    já salvei já falei agora sim
  • 00:29:15
    a tag de quebra de linha a tag BR serve
  • 00:29:18
    para gerar uma quebra de linha no
  • 00:29:22
    documento então o BR pessoal ele é um
  • 00:29:26
    pouquinho diferente né da tag P Ele não
  • 00:29:30
    cria parágrafo ele
  • 00:29:32
    o conteúdo vai para a linha de baixo
  • 00:29:35
    como nesse exemplo
  • 00:29:38
    e olha aqui ó nós temos um parágrafo
  • 00:29:44
    nós
  • 00:29:45
    vamos fazer aqui na prática
  • 00:29:48
    nós vamos usar o mesmo exemplo aqui do
  • 00:29:51
    fashion
  • 00:29:52
    o Sérgio não entra aqui
  • 00:29:57
    teste dois salvamos
  • 00:30:02
    e atualizamos olha lá
  • 00:30:04
    bom então na frente do outro ai eu quero
  • 00:30:07
    que vá para a linha de baixo Então eu
  • 00:30:09
    preciso colocar a tag BR
  • 00:30:14
    E se eu coloco 1 BR ele vai escrever no
  • 00:30:18
    navegador peste um
  • 00:30:20
    chegou no comando de quebra de linha
  • 00:30:23
    e ele vai quebrar a linha e esse texto
  • 00:30:26
    vai ficar na linha de baixo
  • 00:30:30
    e olha lá quando Nós criamos um
  • 00:30:32
    parágrafo para cada item fica um espaço
  • 00:30:36
    maior entre o texto e o outro texto
  • 00:30:41
    e quando nós aplicamos a quebra de linha
  • 00:30:44
    ficar junto
  • 00:30:45
    Ah tá bom dúvidas
  • 00:30:53
    tá tranquilo pessoal
  • 00:30:55
    e o senhor você só para tirar um print
  • 00:30:57
    para guardar aqui
  • 00:31:00
    na parte 1
  • 00:31:02
    só pode
  • 00:31:05
    o
  • 00:31:06
    grande segredo frango espécie de
  • 00:31:09
    escrever texto né bem o corpo no corpo a
  • 00:31:14
    não não tem limite não pode ir para
  • 00:31:18
    escrevendo a página só vai aumentando aí
  • 00:31:21
    mas não tem limite não
  • 00:31:23
    Ah tá bom ele vai criando a barra de
  • 00:31:26
    rolagem né
  • 00:31:28
    a empresa e um pouquinho este vai vai
  • 00:31:32
    descendo aqui mas não tenho rinite Não
  • 00:31:37
    beleza
  • 00:31:39
    pessoal agora
  • 00:31:43
    hoje nós vamos fazer o seguinte nós
  • 00:31:45
    vamos criar uma
  • 00:31:49
    a
  • 00:31:50
    lista não-ordenada e uma lista ordenada
  • 00:31:56
    nós vamos colocar esses marcadores
  • 00:32:01
    Oi tudo bem
  • 00:32:03
    e olha lá
  • 00:32:05
    a tag de marcadores
  • 00:32:08
    primeiro eu vou falar da lista
  • 00:32:10
    desordenado a lista desordenada possui
  • 00:32:14
    este nome porque não oferece nenhum tipo
  • 00:32:16
    de ordenação
  • 00:32:17
    mas simplesmente um alinhamento dos
  • 00:32:20
    elementos em forma de lista e gera
  • 00:32:23
    símbolos em formatos de pequenos
  • 00:32:25
    círculos
  • 00:32:28
    a tag o l&l olha criar uma lista
  • 00:32:33
    desordenada devemos utilizar a tag weli
  • 00:32:37
    que serve para indicar que será criada
  • 00:32:40
    uma lista desordenada ela deve ser
  • 00:32:43
    utilizada em conjunto com a tag é lhe
  • 00:32:46
    indico local e deve ser efetivamente
  • 00:32:49
    colocado o marcador
  • 00:32:52
    bom então pessoal quando nós precisamos
  • 00:32:55
    criar uma lista na lista e adicionar
  • 00:32:59
    marcadores as bolinhas os marcadores
  • 00:33:03
    nós temos que fazer isso daqui ó abrir a
  • 00:33:06
    tag ueli
  • 00:33:09
    o e fechar a tag Welly mas o que que
  • 00:33:13
    significa esse o l u l indica aqui nós
  • 00:33:18
    vamos criar uma lista desordenada
  • 00:33:22
    e na lista desordenada uma lista assim ó
  • 00:33:26
    e em os marcadores em forma de símbolo
  • 00:33:31
    e a lista desordenada poderia ser
  • 00:33:33
    utilizado círculos quadradinhos certinha
  • 00:33:37
    20 agora esse tipo de lista aqui ó é uma
  • 00:33:42
    lista ordenada
  • 00:33:44
    e tem uma ordem o Cid certo um dois três
  • 00:33:49
    poderia ser ABC que tem ordem eu não
  • 00:33:55
    utilizo o o l
  • 00:33:58
    o wely ele cria uma lista desordenada
  • 00:34:02
    E aí pessoal para cada item da lista eu
  • 00:34:06
    preciso abrir um l i e fechar 1l
  • 00:34:12
    O Wesley é quem efetivamente vai colocar
  • 00:34:15
    o marcador Olha lá a tag Welly serve
  • 00:34:19
    para indicar o início eo término da
  • 00:34:21
    lista
  • 00:34:22
    Oi joelly
  • 00:34:24
    representa o início e término de cada
  • 00:34:28
    item da lista
  • 00:34:30
    Tá certo então na prática
  • 00:34:37
    Oi ó eu vou fazer aqui em cima
  • 00:34:40
    bom e no começo ó eu quero criar uma
  • 00:34:43
    lista ordenada ou desordenada a eu quero
  • 00:34:47
    criar uma lista desordenada então eu
  • 00:34:50
    abro as pegue weli e fecho
  • 00:34:56
    o estou indicando que eu vou criar uma
  • 00:34:58
    lista desordenada legal Quais são os
  • 00:35:03
    itens dessa lista Aí eu quero que
  • 00:35:05
    apareça por exemplo
  • 00:35:08
    Polo 1
  • 00:35:11
    E aí
  • 00:35:13
    a tocar carrinho
  • 00:35:18
    o carrinho
  • 00:35:21
    E aí boneca
  • 00:35:23
    e pronto eu quero que apareça esses três
  • 00:35:25
    brinquedos aí na lista certo
  • 00:35:29
    chacim dá certo provavelmente não para
  • 00:35:33
    efetivamente aparecer a bolinha os
  • 00:35:36
    marcadores eu tenho que colocar
  • 00:35:40
    a l o l e que em efetivamente vai
  • 00:35:44
    colocar marcador e cada uma das opções
  • 00:35:49
    e não abro o l e fecho ele para cada
  • 00:35:54
    item da lista
  • 00:35:58
    em abril l
  • 00:36:01
    o clash Royale
  • 00:36:04
    e pronto Alba
  • 00:36:08
    E aí
  • 00:36:11
    Oi opa
  • 00:36:13
    eu não salvei salvei
  • 00:36:20
    Eu salvei
  • 00:36:22
    atualizei
  • 00:36:24
    a Tô aqui em cima beleza Olha lá criamos
  • 00:36:29
    aqui uma lista desordenada desordenada
  • 00:36:33
    se eu quiser criar uma lista ordenada
  • 00:36:37
    ordenada
  • 00:36:38
    e basta mudar pessoal aqui ó ao invés de
  • 00:36:42
    usar o wely Eu uso o L
  • 00:36:46
    isso que eu falei para vocês weli já era
  • 00:36:50
    uma lista desordenada e o o l gera uma
  • 00:36:54
    lista ordenada
  • 00:36:56
    e olha lá ó
  • 00:36:59
    é mas vamos deixar aqui por exemplo por
  • 00:37:03
    enquanto o l
  • 00:37:05
    E aí
  • 00:37:09
    o prefeito
  • 00:37:14
    e olha lá criamos aí a lista desordenada
  • 00:37:19
    a lista ordenada e pode ser representada
  • 00:37:22
    por números letras ou algarismos romanos
  • 00:37:26
    Como o próprio nome diz Segue uma ordem
  • 00:37:31
    o
  • 00:37:32
    Wesley nós usamos o l
  • 00:37:35
    Vamos fazer um
  • 00:37:38
    a control c control V
  • 00:37:40
    E outra você
  • 00:37:43
    e o prover então nessa daqui eu vou
  • 00:37:47
    colocar um URL
  • 00:37:54
    já salvei
  • 00:37:57
    eu atualizei
  • 00:37:59
    e
  • 00:38:05
    ficou Claro pessoal
  • 00:38:09
    E se eu pedir para vocês um exercício
  • 00:38:12
    crie uma página de internet e faça uma
  • 00:38:15
    lista desordenada ou faça uma lista
  • 00:38:19
    ordenada vocês conseguiram fazer
  • 00:38:24
    e enfim tranquilo
  • 00:38:27
    tá tranquilo assim tá bom mais ou menos
  • 00:38:32
    mais ou menos
  • 00:38:34
    oi a lista ordenada é qual a ordenada
  • 00:38:40
    essa daqui ó
  • 00:38:42
    Esse é o Hélio que usa o l o l Vamos
  • 00:38:47
    colocar aqui ó vou colocar um título
  • 00:38:50
    aqui ó vou abrir o H1
  • 00:38:53
    e fechar o H1
  • 00:38:58
    a lista Essa de cima que a b desordenada
  • 00:39:08
    Oi e essa daqui usando o o l a lista
  • 00:39:15
    ordenada
  • 00:39:19
    já salvei
  • 00:39:23
    já atualizei Olha lá lista desordenada
  • 00:39:27
    essa EA ordenada é essa a desordenada
  • 00:39:33
    o wely
  • 00:39:35
    e a lista ordenada
  • 00:39:39
    o o l
  • 00:39:46
    Tá certo
  • 00:39:48
    Ah
  • 00:39:49
    entendi obrigado
  • 00:39:51
    pessoal é isso
  • 00:39:54
    e eu abro o o l e fecha o l e aí para
  • 00:39:59
    cada item da lista eu preciso abrir um
  • 00:40:02
    ele e fechar um ele para cada item da
  • 00:40:05
    lista
  • 00:40:06
    ó aí eu não fechei o l i não fechei eu
  • 00:40:12
    só abri
  • 00:40:14
    bom e deu certo até dar certo pessoal
  • 00:40:18
    mas não pode tá
  • 00:40:21
    e tem que abrir e fechar essa é uma
  • 00:40:24
    pegue que ela precisa ser aberto e
  • 00:40:26
    fechado
  • 00:40:27
    e pode ser aqui mais para frente é
  • 00:40:30
    bagunça e o site as informações não tem
  • 00:40:33
    que fazer dessa forma Abril fechou
  • 00:40:39
    E aí beleza
  • 00:40:40
    e agora atributos atributos Preste
  • 00:40:45
    bastante atenção nesse slide pessoal
  • 00:40:47
    e nós vamos usar bastante esses
  • 00:40:50
    atributos é importante que vocês
  • 00:40:52
    entendam O que é
  • 00:40:54
    atributos os atributos
  • 00:40:56
    fornecem informações adicionais sobre
  • 00:41:01
    matag
  • 00:41:02
    ver todas as tags HTML podem ter
  • 00:41:06
    atributos
  • 00:41:07
    tem algumas os atributos são
  • 00:41:09
    obrigatórios
  • 00:41:11
    e em outras não os atributos são sempre
  • 00:41:16
    especificados na pegue Inicial e
  • 00:41:19
    Geralmente vem em pares como
  • 00:41:22
    a name igual zelo valor
  • 00:41:29
    um
  • 00:41:29
    exemplo aqui na tag ou l pessoal nós
  • 00:41:34
    podemos colocar uma informação adicional
  • 00:41:39
    é sobre a tag URL nós podemos utilizar o
  • 00:41:43
    atributo type
  • 00:41:46
    e nós colocamos o nome do atributo igual
  • 00:41:50
    o valor que ele vai receber sempre na
  • 00:41:54
    tag inicial a tag de início a eu posso
  • 00:41:58
    colocar esse atributo na tag de
  • 00:42:01
    fechamento Não não posso tem que ser na
  • 00:42:03
    tag de abertura na inicial
  • 00:42:06
    bom então a por exemplo nós fizemos aqui
  • 00:42:10
    essa lista ordenada certo temos aqui a
  • 00:42:14
    lista ordenada show que eu quero por
  • 00:42:16
    exemplo trocar ao invés de aparecer
  • 00:42:19
    números quero que apareça um letras
  • 00:42:23
    então para isso eu preciso aqui dentro
  • 00:42:26
    do ou é lhe
  • 00:42:28
    indicar o atributo type
  • 00:42:32
    o ou seja o tipo da lista ordenado vai
  • 00:42:38
    ser qual
  • 00:42:39
    há entre "eu vou colocar a letra a
  • 00:42:44
    na rua eu estou indicando que essa lista
  • 00:42:47
    é uma lista ordenada porém o tipo dela é
  • 00:42:51
    igual a a quando eu coloco o tipo igual
  • 00:42:53
    a ela fica uma lista ordenada na entanto
  • 00:42:57
    uma lista alfabética
  • 00:42:58
    Olha lá
  • 00:43:01
    ABC e ficou minusculo Professor normal
  • 00:43:05
    se eu colocar o a maiúsculo
  • 00:43:10
    E aí a lista ordenada vai ficar com
  • 00:43:14
    letras alfabética maiúsculos
  • 00:43:18
    ah ah mas eu quero colocar algarismos
  • 00:43:21
    romanos
  • 00:43:22
    rei é um tipo eu coloco I Se eu colocar
  • 00:43:28
    em músculo
  • 00:43:32
    e aqui vai ficar
  • 00:43:34
    o risco Se eu colocar o i maiúsculo
  • 00:43:38
    e aqui vai ficar mais um G1
  • 00:43:43
    Oi tudo bem
  • 00:43:46
    a
  • 00:43:47
    entender isso então em algumas tags
  • 00:43:51
    pessoal nós temos que informar algumas
  • 00:43:55
    informações adicionais Nós temos que
  • 00:43:57
    colocar alguns atributos a tag ou l ela
  • 00:44:01
    tem o atributo Thai te permite informar
  • 00:44:04
    qual vai ser o tipo do marcador
  • 00:44:08
    e se vai ser alfanumérico você vai ser
  • 00:44:10
    numérico se vai ser em algarismos
  • 00:44:12
    romanos estão os atributos são
  • 00:44:15
    informações adicionais
  • 00:44:17
    e nós podemos é atribuir a uma tag sente
  • 00:44:22
    na tag inicial
  • 00:44:25
    é feito
  • 00:44:31
    E aí
  • 00:44:34
    e olha lá
  • 00:44:36
    e nós fizemos
  • 00:44:40
    E aí
  • 00:44:41
    ó e aqui já é o assunto da próxima aula
  • 00:44:45
    esse tag de imagem nós vamos vou mostrar
  • 00:44:48
    para vocês como colocar imagem na página
  • 00:44:52
    HTML
  • 00:44:53
    então o que que nós iremos hoje
  • 00:44:57
    e fazemos as tags de cabeçalho o título
  • 00:45:02
    e elas variam do H1 até o
  • 00:45:06
    h61h um é utilizado por para o título
  • 00:45:10
    principal e o mais importante o h6por
  • 00:45:13
    título menos importante normalmente numa
  • 00:45:16
    página pessoal nós utilizamos mais o h u
  • 00:45:19
    e o H2 e pode ser que uso H3 Mas
  • 00:45:24
    normalmente a gente não usa todos eles
  • 00:45:26
    em uma única página
  • 00:45:28
    e não precisa utilizar o H1
  • 00:45:33
    e até o h-6 às vezes se precisa utilizar
  • 00:45:35
    só o H1 ou só que eu posso utilizar o H2
  • 00:45:40
    sem utilizar o H1 não é recomendado
  • 00:45:43
    ideal é que utilize primeiro h u depois
  • 00:45:47
    O H2 tomem muito cuidado para não errar
  • 00:45:51
    aqui no código PIN
  • 00:45:54
    e olha aqui ó olhando aqui algumas
  • 00:45:58
    pessoas colocam
  • 00:46:00
    HL não é HL se colocar agarelli não vai
  • 00:46:05
    funcionar
  • 00:46:07
    eu coloquei HL
  • 00:46:11
    o HL aqui no América
  • 00:46:14
    eu vou até Preto lá não ficou mais azul
  • 00:46:17
    se eu colocar HL
  • 00:46:20
    e o Américas aqui é lhe tirou o título
  • 00:46:23
    ficou um texto comum porque porque eu a
  • 00:46:27
    tag o comando correto não é HL ph1
  • 00:46:34
    a pagar um tá bom
  • 00:46:38
    e amigos também a tag p é utilizada para
  • 00:46:43
    criar a
  • 00:46:44
    tag BR é utilizada para dar quebras de
  • 00:46:48
    linha o texto ir para linha de baixo
  • 00:46:52
    os mínimos essas pedras de marcadores
  • 00:46:54
    Vimos que tem como criar lista de
  • 00:47:00
    a lista ordenada para a lista vezes
  • 00:47:05
    ordenada utilizamos o
  • 00:47:07
    ul1 para lista ordenada utilizamos o o l
  • 00:47:16
    nós vimos também que os atributos são
  • 00:47:19
    informações adicionais sobre uma tag
  • 00:47:22
    o
  • 00:47:22
    prefeito pessoal alguma dúvida alguma
  • 00:47:26
    pergunta
  • 00:47:29
    e não para ser inclusive já fui até lá
  • 00:47:31
    17 mil quinhentos anos a falar para tu
  • 00:47:33
    tá bom
  • 00:47:35
    Ó Parabéns aí
  • 00:47:39
    a beleza pessoal então vou fazer o
  • 00:47:42
    seguinte vou encerrar a gravação eu vou
  • 00:47:46
    atribuir uma atividade para vocês essa
  • 00:47:49
    atividade deixa até vir aqui agora antes
  • 00:47:51
    de encerrar Didi
  • 00:47:58
    E aí
  • 00:48:01
    e
  • 00:48:03
    eu deixei ela pronta aqui já
  • 00:48:07
    e olha lá essa atividade de vocês lá
  • 00:48:11
    pack de cabeçalho marcadores e numeração
  • 00:48:16
    a criar as seguintes páginas html no
  • 00:48:20
    computador
  • 00:48:21
    E ai eu não tenho computador professor é
  • 00:48:25
    posso fazer meu celular se conseguir
  • 00:48:27
    fazer no celular pode fazer o problema
  • 00:48:29
    se não o pessoal que que vocês vão fazer
  • 00:48:33
    e vocês podem fazer o código fonte da
  • 00:48:37
    página
  • 00:48:38
    escrita no caderno vocês podem me
  • 00:48:41
    entregar isso aqui ó faz no caderno
  • 00:48:45
    código-fonte e tira uma foto e envia
  • 00:48:47
    aqui no time
  • 00:48:48
    então tem três imagens aqui a são três
  • 00:48:52
    páginas diferentes vocês vão fazer
  • 00:48:56
    é
  • 00:48:58
    uma página de internet
  • 00:49:02
    é
  • 00:49:04
    igualzinha é só
  • 00:49:06
    a tem que ser igual Professor Faz igual
  • 00:49:09
    pessoal os mesmos textos o mesmo
  • 00:49:13
    conteúdo
  • 00:49:14
    crie uma página de internet igual a essa
  • 00:49:18
    e fez deu certo Deu certo vai para a
  • 00:49:20
    próxima
  • 00:49:22
    e olha lá essa daqui tem marcadores
  • 00:49:26
    aqui lista desordenada lista ordenada
  • 00:49:30
    então tem três páginas que vocês vão
  • 00:49:33
    fazer só que depois que vocês fizerem
  • 00:49:34
    essas três pajens serão 3 páginas HTML
  • 00:49:38
    eu quero que vocês salvem essas três
  • 00:49:41
    páginas dentro de uma pasta
  • 00:49:43
    a compact essa pasta e me envia que a
  • 00:49:47
    pasta compactada
  • 00:49:50
    Como que eu faço isso por exemplo eu
  • 00:49:52
    tenho uma página aqui ó só que vocês
  • 00:49:55
    terão 3
  • 00:49:57
    e vocês podem criar uma pasta
  • 00:50:04
    nem parece
  • 00:50:09
    o colocam aqui ó as páginas aqui dentro
  • 00:50:14
    e clica com o botão da direita em cima
  • 00:50:17
    da pasta
  • 00:50:19
    enviar para
  • 00:50:21
    a pasta compactada
  • 00:50:24
    o from aqui ó pasta compactada
  • 00:50:27
    essa pasta compactada é que vocês vão
  • 00:50:30
    anexar no times na hora de enviar essa
  • 00:50:34
    enviar essa parte aqui ó porque daí eu
  • 00:50:37
    consigo descompactar essa pasta e ver
  • 00:50:40
    tudo que tem dentro dela E aí eu não
  • 00:50:44
    preciso ficar baixando
  • 00:50:46
    arquivo por arquivo
  • 00:50:48
    eu baixo uma vez só essa pasta e já
  • 00:50:51
    consigo ter acesso a todos os arquivos é
  • 00:50:53
    um faz um dessa forma compacta na pasta
  • 00:50:56
    botão da direita em cima da pasta enviar
  • 00:50:59
    para a pasta compactada
  • 00:51:01
    Ah tá bom
  • 00:51:03
    as dúvidas ó vou atribuir aqui a tarefa
  • 00:51:07
    para vocês Vocês já vão receber aí a
  • 00:51:10
    notificação
  • 00:51:11
    e já quase vamos começar a fazer tá bom
  • 00:51:19
    a beleza pessoal passa o finalizar aqui
  • 00:51:23
    quem pode
  • 00:51:25
    pode não entendi
  • 00:51:29
    o William Qual que é sua dúvida G1
  • 00:51:34
    G1
  • 00:51:40
    o William tá me ouvindo
  • 00:51:45
    E aí
  • 00:51:50
    E como que envia é que assim eu atribuía
  • 00:51:53
    a tarefa para vocês certo
  • 00:51:56
    então quando vocês entrarem na tarefa
  • 00:51:59
    vai aparecer lá a opção para anexar o
  • 00:52:04
    arquivo atividade
  • 00:52:06
    É
  • 00:52:07
    sério sem problemas sua cidade de novo
  • 00:52:10
    aqui já
  • 00:52:12
    eu vou deletar ser aqui
  • 00:52:19
    é
  • 00:52:21
    isso então você vai fazer o seguinte
  • 00:52:24
    você pode criar uma pasta com a cria uma
  • 00:52:28
    pasta
  • 00:52:29
    E aí
  • 00:52:31
    E
  • 00:52:35
    aí todas as páginas de internet que
  • 00:52:37
    vocês aí você coloca aqui dentro dessa
  • 00:52:41
    pasta
  • 00:52:43
    oi
  • 00:52:43
    para mim aqui tem só uma mas para você
  • 00:52:46
    vai ter 31 e coloca dentro da pasta
  • 00:52:51
    E aí clica com o botão direito em cima
  • 00:52:53
    da pasta
  • 00:52:54
    enviar para com pasta compactada
  • 00:52:58
    e ele gera uma pasta compactada
  • 00:53:01
    aí essa pasta compactada que você vai
  • 00:53:04
    acreditar no times para me enviar eu
  • 00:53:07
    quero facinho pessoal porque mais para
  • 00:53:10
    frente vai ser por exemplo várias
  • 00:53:12
    páginas várias imagens tudo que vem e
  • 00:53:16
    vocês mandam separados sem compactar é
  • 00:53:19
    fica mais trabalhoso às vezes eu tenho
  • 00:53:22
    que baixar 10 arquivos de cada aluno de
  • 00:53:26
    cada aluno e vocês mandam assim
  • 00:53:29
    compactado aí eu baixo um arquivo de
  • 00:53:33
    cada aluno é mais fácil né facilita aqui
  • 00:53:36
    para mim
  • 00:53:37
    o William entendeu Tranquilo então tá
  • 00:53:41
    bom pessoal mais alguma dúvida podemos
  • 00:53:43
    finalizar
  • 00:53:47
    o
  • 00:53:48
    pai de finalizar
  • 00:53:51
    a beleza pessoal qualquer dúvida pode
  • 00:53:54
    mandar no chat aqui nas postagens tá bom
  • 00:54:04
    e aqui eu acho que não vai dar para
  • 00:54:08
    enviar para você desse jeito porque meu
  • 00:54:10
    PC não tem como instalar o teens mas dá
  • 00:54:13
    para fazer atividade dele tem como eu
  • 00:54:15
    tirar uma foto
  • 00:54:17
    e mandar para você ó é se não tiver
  • 00:54:22
    jeito pode mandar foto se não tiver
  • 00:54:25
    jeito se tiver como você me enviar o
  • 00:54:29
    código fonte é melhor Se for mandar foto
  • 00:54:32
    manda a foto do código Fogo porque eu
  • 00:54:35
    vou olhar o código
  • 00:54:37
    ó e vou analisar o código O seu código
  • 00:54:41
    nesse ponto tá errado tá bom
  • 00:54:44
    mas não tem problema não
  • 00:54:46
    a beleza pessoal então eu vou parar aqui
  • 00:54:48
    a gravação
标签
  • HTML
  • hipertexto
  • estrutura básica
  • tags
  • cabeçalhos
  • listas ordenadas
  • listas não ordenadas
  • atributos
  • ensino
  • web design