Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • 04 Trabalhando Com Texto - O Projeto Odin

    Enviado por

    Aline Lopes Padalecki
    5 visualizações6 páginas

    Título original

    04 Trabalhando com texto _ O Projeto Odin

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    5 visualizações6 páginas

    04 Trabalhando Com Texto - O Projeto Odin

    Enviado por

    Aline Lopes Padalecki

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 6

    Trabalhando com texto

    Curso de Fundamentos

    Introdução
    A maioria do conteúdo na web é baseada em texto,
    então você precisará trabalhar com elementos de texto
    HTML um pouco.

    Nesta lição, aprenderemos sobre os elementos


    baseados em texto que você provavelmente usará
    mais.

    Visão geral da lição

    Esta seção contém uma visão geral dos tópicos que


    você aprenderá nesta lição.

    Como criar parágrafos

    Como criar títulos

    Como criar texto em negrito

    Como criar texto em itálico

    As relações entre elementos aninhados

    Como criar comentários HTML

    Parágrafos
    O que você esperaria que o texto a seguir gerasse em
    uma página HTML?

    <body>
    Lorem ipsum dolor sit amet, consectetur ad
    incididunt ut labore et dolore magna aliqu

    Ut enim ad minim veniam, quis nostrud exer


    nisi ut aliquip ex ea commodo consequat.
    </body>

    Parece dois parágrafos de texto e, portanto, você pode


    esperar que ele seja exibido dessa maneira. No
    entanto, esse não é o caso, como você pode ver na
    saída abaixo:

    Quando o navegador encontrar novas linhas como essa


    em seu HTML, ele as compactará em um único espaço.
    O resultado dessa compactação é que todo o texto é
    agrupado em uma longa linha.

    Se quisermos criar parágrafos em HTML, precisamos


    usar o elemento paragraph, que adicionará uma nova
    linha após cada um de nossos parágrafos. Um
    elemento de parágrafo é definido quebrando o
    conteúdo do texto com uma marca . <p>

    Alterar nosso exemplo de antes para usar elementos de


    parágrafo corrige o problema:

    Títulos

    Os títulos são diferentes de outros elementos de texto


    HTML: eles são exibidos maiores e mais ousados do
    que outro texto para significar que são títulos.

    Existem 6 níveis diferentes de títulos a partir de < h1> a


    <h6> . O número dentro de uma tag de título
    representa o nível desse título. A maior e mais
    importante rubrica é h1, enquanto h6 é a menor rubrica
    no nível mais baixo.

    Os títulos são definidos como parágrafos. Por exemplo,


    para criar um título h1, quebramos o texto do título em
    uma tag . <h1>
    Usar o nível correto de título é importante, pois os
    níveis fornecem uma hierarquia ao conteúdo. Um título
    h1 deve sempre ser usado para o título da página geral,
    e os títulos de nível inferior devem ser usados como
    títulos para o conteúdo em seções menores da página.

    Strong element

    The element makes text bold. It also semantically marks


    text as important; this affects tools, like screen readers,
    that users with visual impairments will rely on to use
    your website. The tone of voice on some screen readers
    will change to communicate the importance of the text
    within a strong element. To define a strong element we
    wrap text content in a tag. <strong> <strong>

    You can use strong on its own:

    But you will probably find yourself using the strong


    element much more in combination with other text
    elements, like this:

    Sometimes you will want to make text bold without


    giving it an important meaning. You’ll learn how to do
    that in the CSS lessons later in the curriculum.

    Em element
    The element makes text italic. It also semantically
    places emphasis on the text, which again may affect
    things like screen readers. To define an emphasised
    element we wrap text content in a tag. <em> <em>

    To use on its own: <em>

    Again, like the strong element, you will find yourself


    mostly using the element with other text elements: <em>

    Aninhamento e recuo
    Você deve ter notado que em todos os exemplos desta
    lição recuamos quaisquer elementos que estejam
    dentro de outros elementos. Isso é conhecido como
    elementos de aninhamento.

    Quando aninhamos elementos em outros elementos,


    criamos uma relação pai e filho entre eles. Os
    elementos aninhados são os filhos e o elemento em
    que eles estão aninhados é o pai.

    No exemplo a seguir, o elemento body é o pai e o


    parágrafo é o filho:

    Assim como nas relações humanas, os elementos pai


    HTML podem ter muitos filhos. Elementos no mesmo
    nível de nidificação são considerados irmãos.

    Por exemplo, os dois parágrafos no código a seguir são


    irmãos, já que ambos são filhos da marca body e estão
    no mesmo nível de aninhamento um do outro:

    Usamos recuo para tornar o nível de aninhamento claro


    e legível para nós e outros desenvolvedores que
    trabalharão com nosso HTML no futuro. Recomenda-se
    recuar quaisquer elementos filho por dois espaços.

    As relações pai, filho e irmão entre elementos se


    tornarão muito mais importantes mais tarde, quando
    começarmos a estilizar nosso HTML com CSS e
    adicionar comportamento com JavaScript. Por
    enquanto, no entanto, é apenas importante saber a
    distinção entre como os elementos estão relacionados
    e a terminologia usada para descrever suas relações.

    Comentários HTML

    Comentários HTML não são visíveis para o navegador;


    Eles nos permitem comentar sobre nosso código para
    que outros desenvolvedores ou nossos futuros eus
    possam lê-los e obter algum contexto sobre algo que
    pode não estar claro no código.

    Escrever um comentário HTML é simples: nós apenas


    incluímos o comentário com e tags. Por exemplo: <!--
    -->

    Atalho de teclado do VSCode

    Se você achar cansativo digitar a sintaxe de


    comentários, o atalho a seguir ajudará você a criar
    rapidamente um novo comentário, converter
    qualquer linha em um comentário ou cancelar o
    comentário de qualquer linha:

    Usuários de Mac: Cmd + /

    Usuários de Windows e Linux: Ctrl + /

    Designação

    1. Assista ao vídeo de Kevin Powell


    sobre parágrafos e títulos em HTML

    2. Assista ao vídeo HTML Bold e Italic Text


    de Kevin Powell

    3. Para obter alguma prática trabalhando com


    texto em HTML, crie uma página de artigo
    de blog simples que usa títulos diferentes,
    usa parágrafos e tem algum texto nos
    parágrafos em negrito e itálico. Você pode
    usar o Lorem Ipsum para gerar texto fictício,
    no lugar de texto real à medida que constrói
    seus sites. VS Code inclui um atalho para
    gerar lorem ipsum para você. Para acionar o
    atalho, digite na linha onde deseja o texto
    fictício, pressione a tecla e, pronto, você
    gerou texto fictício sem
    problemas. lorem Enter

    Verificação de conhecimento
    Esta seção contém perguntas para você verificar sua
    compreensão desta lição por conta própria. Se você
    estiver tendo problemas para responder a uma
    pergunta, clique nela e revise o material ao qual ela
    está vinculada.

    Como criar um parágrafo em HTML?

    Como criar um título em HTML?

    Quantos níveis diferentes de títulos existem e qual


    é a diferença entre eles?

    Qual elemento você deve usar para tornar o texto


    em negrito e importante?

    Qual elemento você deve usar para colocar o texto


    em itálico para dar ênfase a ele?

    Que relação tem um elemento com quaisquer


    elementos aninhados dentro dele?

    Que relação têm dois elementos se estiverem no


    mesmo nível de nidificação?

    Como você cria comentários HTML?

    Recursos adicionais

    Esta seção contém links úteis para conteúdo


    relacionado. Não é obrigatório, então considere-o
    suplementar.

    A diferença semântica entre as tags <strong> e


    <b> ou <em> e <i> e quando usá-las.

    Um artigo interativo de formatação de texto HTML

    Você também pode gostar