Curso de HTML Completo: Aula 05 - Elementos de Citação

00:11:55
https://www.youtube.com/watch?v=bzWtE7GFi0Y

概要

TLDRNeste vídeo, o instrutor mostra como usar várias tags de citação em HTML, como 'abbr' para abreviações, 'address' para endereços, 'cite' para títulos de obras, 'q' para citações curtas, 'blockquote' para citações longas e 'bdi' para inverter a direção do texto. Cada tag é explicada com exemplos práticos para ilustrar seu uso e importância, especialmente em relação à SEO e organização do conteúdo.

収穫

  • 💡 Aprenda sobre a tag 'abbr' para abreviações.
  • 🏠 A tag 'address' é para indicar endereços.
  • 📖 Use 'cite' para títulos de obras literárias.
  • 💬 A tag 'q' serve para citações curtas.
  • 📝 'blockquote' destaca trechos de texto.
  • ↔️ A tag 'bdi' inverte a direção do texto.

タイムライン

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

    Neste primeiro trecho, o instrutor explora as tags de citação no HTML, enfatizando a importância de usar elementos de citação para melhorar a clareza e a compreensão do texto. Ele utiliza exemplos práticos, como a tag 'abbr' para abreviações, explicando como ela pode ser usada para inserir descrições que aparecem quando o usuário passa o mouse sobre a abreviação, como no caso de 'HTML' e 'WWW'. Além disso, menciona a tag 'address' para indicar endereços, que podem ser físicos ou relacionados a URLs, e a tag 'cite' para referenciar títulos de obras como filmes e livros.

  • 00:05:00 - 00:11:55

    No segundo trecho, o instrutor continua a detalhar o uso da tag 'blockquote' para destacar trechos importantes de um texto, explicando que essa técnica é frequentemente utilizada em artigos e notícias. Ele também demonstra a tag 'bdi', que permite inverter a direção do texto, útil para idiomas que são lidos da direita para a esquerda. O instrutor finaliza o segmento revisando as tags discutidas, encorajando os alunos a praticarem o uso dessas ferramentas em seus próprios projetos, destacando a importância de cada uma delas na criação de conteúdo digital.

マインドマップ

ビデオQ&A

  • O que é a tag 'abbr'?

    A tag 'abbr' é usada para abreviações e pode incluir a propriedade 'title' para explicar o significado da abreviação.

  • Qual a função da tag 'address'?

    A tag 'address' é utilizada para indicar um endereço, que pode ser físico, URL ou e-mail.

  • Para que serve a tag 'cite'?

    A tag 'cite' é utilizada para destacar o título de uma obra, como livros ou filmes.

  • Como usar a tag 'q'?

    A tag 'q' é utilizada para citações curtas, geralmente entre aspas.

  • O que é a tag 'blockquote'?

    A tag 'blockquote' é usada para destacar trechos maiores de texto, geralmente citados de outra fonte.

  • Qual a utilidade da tag 'bdi'?

    A tag 'bdi' inverte a direção do texto e é útil para idiomas que são lidos da direita para a esquerda.

ビデオをもっと見る

AIを活用したYouTubeの無料動画要約に即アクセス！
字幕
pt
オートスクロール:
  • 00:00:01
    E aí
  • 00:00:05
    e
  • 00:00:05
    continuando na sala aqui pessoal nós
  • 00:00:08
    vamos conhecer agora tags de citação
  • 00:00:11
    elementos de citação o que que são essas
  • 00:00:14
    esses elementos de citação são os tags
  • 00:00:17
    que a gente usa principalmente sobre
  • 00:00:19
    texto por exemplo quando você tá falando
  • 00:00:21
    de uma pessoa quando você encontra uma
  • 00:00:24
    abreviação quando alguma coisa uma
  • 00:00:26
    pessoa fala algo e você quer colocar
  • 00:00:27
    aquilo entre astros como se fosse assim
  • 00:00:29
    ah o que aquela pessoa falou sabe a
  • 00:00:32
    gente precisa Isso usar isso nos nossos
  • 00:00:35
    textos tão é quando a mostrar aqui vocês
  • 00:00:38
    vão entender por exemplo uma tag que a
  • 00:00:40
    gente usa é a abreviatura então a gente
  • 00:00:43
    eu posso colocar uma tag P aqui e vou eu
  • 00:00:46
    vou até fazer o seguinte eu vou apagar
  • 00:00:48
    toda essa bagunça aqui que a gente
  • 00:00:49
    deixou na aula passada vou apagar tudo
  • 00:00:51
    aqui
  • 00:00:52
    em São Paulo limpamos aqui vou fazer
  • 00:00:55
    aqui um
  • 00:00:57
    o H1 já para gente usar o que a gente
  • 00:01:00
    aprendeu que é título um e eu vou
  • 00:01:02
    colocar aqui elementos de citação
  • 00:01:06
    elementos de situação certo e aqui eu
  • 00:01:09
    vou fazer um parágrafo
  • 00:01:11
    estamos aprendendo
  • 00:01:15
    HTML certo
  • 00:01:18
    em Ok e se HTML é uma sigla concorda ela
  • 00:01:23
    ele é uma sigla e talvez a pessoa que
  • 00:01:25
    está lendo isso aqui não saiba o que
  • 00:01:26
    quer dizer HTML então você pode usar uma
  • 00:01:29
    tag para abreviações que seria a tag
  • 00:01:32
    abbr
  • 00:01:34
    abbr e coloca aqui
  • 00:01:40
    é o HTML entre essa tag abbr que é uma
  • 00:01:43
    abreviação certo aparentemente não
  • 00:01:46
    aconteceu nada mas dentro aqui do abbr a
  • 00:01:49
    gente pode colocar uma propriedade que
  • 00:01:51
    vai explicar o que que é essa
  • 00:01:53
    abreviatura que a propriedade título
  • 00:01:56
    sente dessa propriedade título aqui que
  • 00:01:59
    é título eu poderia colocar hiper text
  • 00:02:03
    markup language que é o significado aqui
  • 00:02:07
    de html certo agora olha que que
  • 00:02:09
    acontece quando eu coloco essa esse
  • 00:02:11
    atributo título dentro da minha tag abbr
  • 00:02:13
    ficou uns pontinhos aqui embaixo
  • 00:02:15
    Simulator passar o mouse em cima olha só
  • 00:02:17
    que legal ele vai dar um balãozinho
  • 00:02:19
    dizendo hiper text markup language ele
  • 00:02:22
    dá uma explicação sobre aquela
  • 00:02:24
    abreviatura legal se não sei o que é
  • 00:02:27
    muito legal para você fazer a
  • 00:02:30
    explicações né então eu vou fazer uma
  • 00:02:32
    outra aqui ó se você conhece Opa Você
  • 00:02:38
    conhece a o início de um site com
  • 00:02:45
    e aqui dentro eu vou colocar www assim
  • 00:02:49
    você conhece o início de um site com www
  • 00:02:52
    certo aqui a gente pode colocar assim ó
  • 00:02:55
    world wide web internet a rede mundial
  • 00:03:01
    de computadores né
  • 00:03:03
    www quando a pessoa passa o mouse em
  • 00:03:05
    cima world wide web o significado de www
  • 00:03:08
    essa tag abbr aqui é bem legal para a
  • 00:03:11
    gente colocar nos nossos textos de
  • 00:03:14
    abreviação você usar até de certa no
  • 00:03:16
    lugar certo dentro do texto do seu site
  • 00:03:18
    é fundamental pessoa fundamental para o
  • 00:03:22
    funcionamento de mecanismos de busca que
  • 00:03:25
    é o search Engine optimization
  • 00:03:28
    quer os motorzinhos lá do Google leia o
  • 00:03:31
    teu site sabendo que ele se trata então
  • 00:03:33
    aí a usar essas tags de forma correta
  • 00:03:36
    certo outra técnica a gente pode usar Eu
  • 00:03:39
    particularmente não uso muito mais seria
  • 00:03:41
    certo a gente utilizar ele é a tag
  • 00:03:43
    address address paciência escreve
  • 00:03:47
    address address quer dizer endereço
  • 00:03:49
    então eu poderia colocar assim ó
  • 00:03:52
    e por exemplo p e parágrafo colocar aqui
  • 00:03:55
    Dimitri
  • 00:03:58
    ó e aqui dentro de endereço eu posso
  • 00:04:01
    colocar o show pegar aqui esse address
  • 00:04:03
    colocar aqui dentro do parágrafo né só
  • 00:04:06
    tag e aqui eu posso colocar assim ó a
  • 00:04:09
    rua do
  • 00:04:11
    exemplo um dois três centro cidade
  • 00:04:18
    e ele vai ficar como Itálico geralmente
  • 00:04:21
    o navegador ele renderiza como Itálico
  • 00:04:23
    mas ele vai entender que eu tô falando
  • 00:04:24
    aqui de um endereço certo esse endereço
  • 00:04:28
    aqui não necessariamente precisa ser o
  • 00:04:29
    endereço físico da pessoa pode ser uma
  • 00:04:31
    url endereço de e-mail URL endereço
  • 00:04:34
    físico o número de telefone uma coisa de
  • 00:04:37
    mídia social você pode usar para essas
  • 00:04:39
    finalidades aí essa questão do da tag
  • 00:04:42
    ADR esta que a tag de endereço
  • 00:04:44
    ainda outra que a gente tem é a tag City
  • 00:04:49
    a senhora não é site é City Kansas City
  • 00:04:53
    e o que que essa tag essa tag ela quer
  • 00:04:56
    dizer um título de uma obra então por
  • 00:04:59
    exemplo assim de um filme de um poema de
  • 00:05:01
    um livro então por exemplo assim o filme
  • 00:05:04
    e aqui dentro coloca assim Titanic
  • 00:05:10
    e com Leonardo
  • 00:05:13
    é de Caprio
  • 00:05:16
    E aí
  • 00:05:19
    Tá certo Deixa eu botar isso aqui dentro
  • 00:05:21
    de parágrafo
  • 00:05:23
    bom então esse City é como se fosse
  • 00:05:25
    assim uma obra certa aqui fica também
  • 00:05:27
    como Itálico resultado vai se entende
  • 00:05:30
    que isso aqui tá se falando de uma obra
  • 00:05:32
    geralmente obra literária filme livro
  • 00:05:34
    você pode colocar dentro desse sítio
  • 00:05:37
    aqui que é indicando o título de uma
  • 00:05:40
    obra certo aí se você quer que falar por
  • 00:05:44
    exemplo assim ó o quê que o Leonardo de
  • 00:05:46
    Castro ele falou no filme tipo uma
  • 00:05:49
    citação literal do que que ele falou na
  • 00:05:52
    a Leonardo DiCaprio falou naquela cena
  • 00:05:55
    tal coisa você pode usar a tag que por
  • 00:05:59
    exemplo assim ó ó E ele
  • 00:06:02
    disse: Aí usa a tag que é uma situação
  • 00:06:05
    curta do que ele falou Rose
  • 00:06:08
    porque eu não
  • 00:06:12
    eu
  • 00:06:13
    consigo subir
  • 00:06:16
    nessa porta cabe nós dois tranquilo
  • 00:06:24
    o parque não falou isso né mas só para a
  • 00:06:26
    gente entender olha só ele coloca entre
  • 00:06:29
    aspas e aqui pessoal olha só ele coloca
  • 00:06:32
    entre as porque ele entende que isso
  • 00:06:33
    aqui é uma situação do que o Leonardo
  • 00:06:37
    DiCaprio falou na cena do filme
  • 00:06:40
    supostamente né então o meu navegador
  • 00:06:42
    lendo esse texto ele entenderia que tava
  • 00:06:44
    falando do filme Titanic e também a
  • 00:06:47
    situação do que ele falou certo Então
  • 00:06:50
    essa é a tag que que é para citações
  • 00:06:53
    curtas de definir uma citação curta
  • 00:06:56
    geralmente coloca entre aspas o que a
  • 00:06:59
    pessoa falou certo a gente também pode
  • 00:07:01
    usar esse daqui ainda outro elemento que
  • 00:07:04
    a gente usa bastante nessa sessão de
  • 00:07:07
    situações é o blockquote que é um trecho
  • 00:07:12
    destacado de algum artigo por exemplo no
  • 00:07:14
    G1 às vezes eles colocam assim não sei
  • 00:07:17
    se eu já vi uma notícia no site do G1
  • 00:07:19
    coloca um dos itens como sendo mais está
  • 00:07:22
    casa vou copiar se você quiser fazer um
  • 00:07:26
    lar Y aqui então p
  • 00:07:29
    Lauren para botar um texto qualquer Vou
  • 00:07:33
    colocar aqui uns parágrafos para supor
  • 00:07:35
    que a gente colocou aqui um pouco de
  • 00:07:37
    conteúdo e aí eu quero dizer que um
  • 00:07:40
    desses trechos tem um destaque especial
  • 00:07:42
    por exemplo
  • 00:07:44
    e ela com certeza
  • 00:07:47
    conseguiria ajudar o Jaque já que nós
  • 00:07:51
    estamos falando de Titanic aqui né então
  • 00:07:54
    a gente poderia colocar aqui ó essa
  • 00:07:55
    técnica para dar destacar um trecho do
  • 00:07:57
    texto que seria o Block out
  • 00:08:02
    O que é uma situação também de um trecho
  • 00:08:05
    mas geralmente do próprio texto que você
  • 00:08:07
    tá fazendo então eu poderia pegar aqui
  • 00:08:09
    agora ela com certeza
  • 00:08:10
    conseguiria ajudar o Jack
  • 00:08:13
    o e salvo e aí ó ele fica assim mais
  • 00:08:17
    para dentro tá vendo ele dá uma margem
  • 00:08:19
    isinha porque é como se fosse um
  • 00:08:20
    destaque desse trecho que tá mais aqui
  • 00:08:23
    para cima geralmente esse coloco antes
  • 00:08:25
    do texto para criar uma expectativa e
  • 00:08:27
    tudo mais a gente usa esse daqui que
  • 00:08:29
    também é o bloco Alt certo pessoal então
  • 00:08:33
    esses são alguns exemplos de tags de
  • 00:08:36
    citação a uma outra que eu tô esquecendo
  • 00:08:38
    que é bem legalzinha também pessoal é a
  • 00:08:41
    Bíblia
  • 00:08:42
    deixa eu mostrar para vocês eu vou
  • 00:08:44
    colocar nesse daqui mesmo a que é esse
  • 00:08:47
    lado Y que tá por último na último
  • 00:08:49
    parágrafo essa bebê é uma tag
  • 00:08:52
    bidirecional que é para você inverter o
  • 00:08:55
    seu texto para ele ficar por exemplo da
  • 00:08:58
    esquerda para direita Então você coloca
  • 00:08:59
    aqui dentro desse bebê ó a direção pode
  • 00:09:02
    ir que é de direção e você coloca tem
  • 00:09:06
    duas opções ltr que left right e quer
  • 00:09:09
    dizer da esquerda para direita ou rtl
  • 00:09:12
    quer dar direita para aí a
  • 00:09:14
    rpl olha só que que vai acontecer salvei
  • 00:09:17
    ele inverteu a ordem do meu texto ficou
  • 00:09:20
    de trás para frente dá uma olhada aqui ó
  • 00:09:21
    então eu vou fazer aqui só para vocês
  • 00:09:24
    ver ó
  • 00:09:25
    o Dimitri
  • 00:09:27
    e ele fica intimide como se tivesse
  • 00:09:30
    espelhado de trás para frente em
  • 00:09:32
    idiomas árabes né geralmente a gente usa
  • 00:09:36
    ou japonês idiomas a orientais a gente
  • 00:09:40
    lê sempre da direita para esquerda Então
  • 00:09:42
    se usa muito esse bebê de
  • 00:09:44
    rpl da direita para esquerda o padrão se
  • 00:09:47
    eu não tivesse deixar nenhuma tributo
  • 00:09:49
    aqui ó eu não deixar é anormal é da
  • 00:09:51
    esquerda para direita o padrão ocidental
  • 00:09:53
    eu só quero da direita para esquerda põe
  • 00:09:55
    rtl e ele deixa de trás para frente Opa
  • 00:09:59
    de trás para frente Beleza então esses
  • 00:10:02
    são alguns algumas tags que são
  • 00:10:05
    elementos de citação destaque maior
  • 00:10:07
    poderia que é muito show de bola essa
  • 00:10:08
    questão aqui da abreviatura né então a
  • 00:10:11
    gente viu aqui vamos relembrar a gente
  • 00:10:13
    viu aqui o abbr que abreviatura que
  • 00:10:16
    precisa da propriedade detalhe tô para
  • 00:10:18
    dizer qual que é a abreviatura quando
  • 00:10:20
    passa o mouse em cima certo a gente viu
  • 00:10:23
    também a propriedade address que é de
  • 00:10:26
    endereço que pode o endereço 15 para o
  • 00:10:29
    e-mail o endereço de um site URL também
  • 00:10:33
    o City né que é com s t e não é de
  • 00:10:37
    cidade nem de site eu não sei comprando
  • 00:10:39
    esse direito e não vou falar City que é
  • 00:10:41
    uma obra literária tá um livro Uma
  • 00:10:44
    pessoa organização Uma coisa assim que
  • 00:10:46
    você queira destacar vemos a tag que que
  • 00:10:49
    é uma citação curta do que alguém falou
  • 00:10:53
    da por exemplo aqui ao Jack falando né
  • 00:10:55
    Rose porque eu não consigo subir nessa
  • 00:10:57
    porta cabe nós dois tranquilo e também
  • 00:11:01
    nós vimos aqui o blowout que seria uma
  • 00:11:04
    citação de uma parte do texto para dar
  • 00:11:06
    um destaque por último bebê com a
  • 00:11:08
    propriedade de ir que você pode definir
  • 00:11:10
    que é da direita para a esquerda para
  • 00:11:12
    ficar invertido o texto beleza pessoal
  • 00:11:15
    Vai praticando vai colocando essas tags
  • 00:11:18
    aí a medida que você vai aprendendo
  • 00:11:20
    vendo funcionamento dela vai tentando
  • 00:11:22
    memorizar isso que você vai sempre
  • 00:11:25
    precisar medida que você for fazendo os
  • 00:11:27
    seus com e na parte de criação de
  • 00:11:29
    conteúdo do seu site Beleza forte abraço
  • 00:11:31
    e até a próxima aula Espero que você
  • 00:11:35
    tenha gostado dessa aula se você gostou
  • 00:11:37
    deixa aquele seu like continua
  • 00:11:39
    assistindo esse curso clicando aqui num
  • 00:11:42
    desses vídeos que vai estar aqui na tela
  • 00:11:43
    para você continuar assistindo a
  • 00:11:46
    Playlist e vendas outras aulas desse
  • 00:11:48
    curso se inscreve no canal se não for
  • 00:11:50
    escrito e até a próxima aula valeu
タグ
  • HTML
  • citação
  • tags
  • abbr
  • address
  • cite
  • q
  • blockquote
  • bdi
  • SEO