02 - Estrutura básica e Cabeçalhos.

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

Ringkasan

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.

Takeaways

  • 📚 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

Garis waktu

  • 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.

Tampilkan lebih banyak

Peta Pikiran

Video Tanya Jawab

  • 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.

Lihat lebih banyak ringkasan video

Dapatkan akses instan ke ringkasan video YouTube gratis yang didukung oleh AI!
Teks
pt
Gulir Otomatis:
  • 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
  • 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
Tags
  • HTML
  • hipertexto
  • estrutura básica
  • tags
  • cabeçalhos
  • listas ordenadas
  • listas não ordenadas
  • atributos
  • ensino
  • web design