Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • 03 Boilerplate HTML - O Projeto Odin

    Enviado por

    Aline Lopes Padalecki
    3 visualizações9 páginas

    Título original

    03 Boilerplate HTML _ 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
    3 visualizações9 páginas

    03 Boilerplate HTML - 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 9

    HTML Boilerplate

    Curso de Fundamentos

    Introdução
    Todos os documentos HTML têm a mesma estrutura
    básica ou clichê que precisa estar em vigor antes que
    qualquer coisa útil possa ser feita. Nesta lição, vamos
    explorar as diferentes partes deste boilerplate e ver
    como tudo se encaixa.

    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 escrever o boilerplate básico para um


    documento HTML

    Como abrir documentos HTML no seu navegador

    Criando um arquivo HTML

    Para demonstrar um boilerplate HTML, primeiro


    precisamos de um arquivo HTML para trabalhar.

    Crie uma nova pasta no seu computador e nomeie-a .


    Dentro dessa pasta, crie um novo arquivo e nomeie-
    o. html-boilerplate index.html

    Você provavelmente já está familiarizado com muitos


    tipos diferentes de arquivos, por exemplo, arquivos doc,
    pdf e image.

    Para que o computador saiba que queremos criar um


    arquivo HTML, precisamos anexar o nome do arquivo
    com a extensão, como fizemos ao criar o
    arquivo. .html index.html
    Vale a pena notar que nomeamos nosso arquivo HTML
    . Devemos sempre nomear o arquivo HTML que
    conterá a página inicial de nossos sites. Isso ocorre
    porque os servidores da web procurarão, por padrão,
    uma página .html índice quando os usuários chegarem
    aos nossos sites - e não ter um causará grandes
    problemas. index index.html

    O DOCTYPE

    Cada página HTML começa com uma declaração


    doctype. O objetivo do doctype é informar ao navegador
    qual versão do HTML ele deve usar para renderizar o
    documento. A versão mais recente do HTML é HTML5,
    e o doctype para essa versão é simplesmente .
    <!DOCTYPE html>

    Os doctypes para versões mais antigas do HTML eram


    um pouco mais complicados. Por exemplo, esta é a
    declaração doctype para HTML4:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

    No entanto, provavelmente nunca mais vamos querer


    usar uma versão mais antiga do HTML e, portanto,
    sempre usaremos o . <!DOCTYPE html>

    Abra o arquivo criado anteriormente no editor de texto e


    adicione à primeira linha. index.html <!DOCTYPE html>

    Elemento HTML

    Depois de declararmos o doctype, precisamos fornecer


    um elemento. Isso é o que é conhecido como o
    elemento raiz do documento, o que significa que todos
    os outros elementos no documento serão descendentes
    dele. <html>
    Isso se torna mais importante mais tarde, quando
    aprendemos sobre como manipular HTML com
    JavaScript. Por enquanto, basta saber que o elemento
    HTML deve ser incluído em todos os documentos
    HTML.

    De volta ao arquivo, vamos adicionar o elemento


    digitando suas tags de abertura e fechamento,
    assim: index.html <html>

    <!DOCTYPE html>
    <html lang="en">
    </html>

    O que é o atributo lang?

    lang Especifica o idioma do conteúdo de texto nesse

    elemento. Esse atributo é usado principalmente para


    melhorar a acessibilidade da página da Web. Permite
    que tecnologias assistivas, por exemplo, leitores de
    tela, se adaptem de acordo com o idioma e invoquem a
    pronúncia correta.

    Elemento Head

    O elemento é onde colocamos meta-informações


    importantes sobre nossas páginas da Web e coisas
    necessárias para que nossas páginas da Web sejam
    renderizadas corretamente no navegador. Dentro do
    , não devemos usar nenhum elemento que exiba
    conteúdo na página da Web. <head> <head>

    O elemento meta charset

    Devemos sempre ter a meta tag para a codificação do


    conjunto de caracteres da página da Web no elemento
    head: . <meta charset="utf-8">
    Definir a codificação é muito importante porque garante
    que a página da Web exibirá símbolos especiais e
    caracteres de diferentes idiomas corretamente no
    navegador.

    Elemento Title

    Outro elemento que devemos sempre incluir no


    cabeçalho de um documento HTML é o elemento title:

    <title>My First Webpage</title>

    O elemento title é usado para dar às páginas da Web


    um título legível por humanos que é exibido na guia do
    navegador da nossa página da Web.

    Se não incluíssemos um elemento title, o título da


    página da Web teria como padrão seu nome de
    arquivo. No nosso caso, isso seria , o que não é muito
    significativo para os usuários; Isso tornaria muito difícil
    encontrar nossa página se o usuário tiver muitas abas
    do navegador abertas. index.html

    Há muito mais elementos que podem ir dentro do


    cabeçalho de um documento HTML. No entanto, por
    enquanto, é crucial saber sobre os dois elementos que
    abordamos aqui. Vamos introduzir mais elementos que
    vão para a cabeça ao longo do resto do currículo.

    De volta ao nosso arquivo, vamos adicionar um


    elemento head com um elemento meta charset e um
    título dentro dele. O elemento head vai dentro do
    elemento HTML e deve ser sempre o primeiro elemento
    sob a tag de abertura: index.html <html>

    <!DOCTYPE html>

    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>My First Webpage</title>
    </head>
    </html>

    Elemento do corpo

    O elemento final necessário para completar o


    boilerplate HTML é o elemento . É para lá que vai todo
    o conteúdo que será exibido aos usuários - o texto,
    imagens, listas, links e assim por diante. <body>

    Para concluir o boilerplate, adicione um elemento body


    ao arquivo. O elemento body também vai dentro do
    elemento HTML e está sempre abaixo do elemento
    head, assim: index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>My First Webpage</title>
    </head>

    <body>
    </body>
    </html>

    Exibindo arquivos HTML no navegador


    O clichê HTML no arquivo está completo neste ponto,
    mas como visualizá-lo no navegador? Existem algumas
    opções diferentes: index.html

    Uma nota: A fim de evitar ramificar as instruções de


    nossa lição para acomodar todas as diferenças entre
    os navegadores, vamos usar o Google Chrome
    como nosso navegador principal para o restante
    deste curso. Todas as referências ao navegador
    pertencerão especificamente ao Google Chrome.
    Sugerimos que você use o Google Chrome para
    todos os seus testes daqui para frente.

    1. Você pode arrastar e soltar um arquivo HTML do


    editor de texto na barra de endereços do
    navegador.

    2. Você pode encontrar o arquivo HTML em seu


    sistema de arquivos e, em seguida, clique duas
    vezes nele. Isso abrirá o arquivo no navegador
    padrão que seu sistema usa.

    3. Você pode usar o terminal para abrir o arquivo em


    seu navegador.

    Ubuntu - Navegue até o diretório que contém


    o arquivo e digite google-chrome index.html

    macOS - Navegue até o diretório que contém o


    arquivo e digite open ./index.html

    Usando um dos métodos acima, abra o arquivo .html


    índice no qual estamos trabalhando. Você notará que a
    tela está em branco. Isso porque não temos nada em
    nosso corpo para exibir.

    De volta ao arquivo, vamos adicionar um título (mais


    sobre eles mais tarde) ao corpo e salvar o
    arquivo: index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>My First Webpage</title>
    </head>
    <body>
    <h1>Hello World!</h1>
    </body>
    </html>

    Now, if you refresh the page in the browser, you should


    see the changes take effect, and the heading “Hello
    World!” will be displayed.

    VSCode shortcut
    VSCode has a built-in shortcut you can use for
    generating all the boilerplate in one go. Please note that
    this shortcut only works while editing a file with the
    ‘.html’ extension or a text file with the HTML language
    already selected. To trigger the shortcut, delete
    everything in the file and just enter on the first line. This
    will bring up a couple of options. Press the key to
    choose the first one, and voila, you should have all the
    boilerplate populated for you. index.html ! Enter

    But it’s still good to know how to write the boilerplate


    yourself in case you find yourself using a text editor like
    notepad (heaven forbid) which doesn’t have this
    shortcut. Try not to use the shortcut in your first few
    HTML projects, so you can build some muscle memory
    for writing the boilerplate code.

    Assignment

    1. Watch and follow along to Kevin Powell’s


    brilliant Building Your First Web Page video

    2. Build some muscle memory by deleting the


    contents of the file and trying to write out all
    the boilerplate again from memory. Don’t
    worry if you have to peek at the lesson
    content the first few times if you get stuck.
    Just keep going until you can do it a couple
    of times from memory. index.html

    3. Run your boilerplate through the W3 HTML


    validator or alternatively this HTML validator.
    Validators ensure your markup is correct and
    are an excellent learning tool, as they
    provide feedback on syntax errors you may
    be making often and aren’t aware of, such
    as missing closing tags and extra spaces in
    your HTML.

    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.

    Qual é o objetivo da declaração doctype?

    O que é o elemento HTML?

    Qual é a finalidade do elemento cabeça?

    Qual a finalidade do elemento corpo?

    Recursos adicionais
    Esta seção contém links úteis para conteúdo
    relacionado. Não é obrigatório, então considere-o
    suplementar.

    Leia este artigo sobre quais conjuntos de


    caracteres você deve usar com suas páginas
    HTML.

    Outra opção para abrir suas páginas HTML no


    navegador é usar a extensão de servidor ao
    vivo com o VSCode. Isso abrirá o documento
    HTML e o atualizará automaticamente sempre que
    você salvar o documento. No entanto,
    recomendamos não usar essa extensão e, em vez
    disso, fazê-lo à moda antiga, abrindo a página e
    atualizando a página manualmente no navegador
    para seus primeiros projetos HTML. Dessa forma,
    você pode se acostumar com esse processo e não
    se tornará dependente de extensões
    imediatamente. Uma razão é que pode haver
    diferenças sutis ao usar extensões. Por exemplo, o
    servidor ativo sempre usará a codificação de
    caracteres UTF-8 e não o valor definido em seu
    atributo. Isso pode potencialmente ocultar alguns
    caracteres em seu site, pois eles não serão
    codificados da maneira esperada. meta-charset

    Se desejar, você pode adicionar o atributo a


    elementos individuais em toda a página da Web.
    Leia este documento para entender melhor o
    atributo. lang lang

    Você também pode gostar