Material para estudantes em HTML

O HTML é a base de uma página da Web. Nesta unidade, vamos analisar como criar uma estrutura sólida e significativa para uma página da Web.

Pontos-chave

  • Os estudantes entendem a estrutura de arquivos HTML.
  • Os estudantes sabem usar tags comuns para criar uma página da Web.

O que é HTML?

HTML é a abreviação de HyperText Markup Language. É um código que usamos para:

  • criar documentos armazenados na World Wide Web e exibidos em um navegador.
  • fornecer uma estrutura básica para nossa página da Web, ou seja, o esqueleto dela.
  • garantir o carregamento adequado de texto e imagens para exibição no navegador.

Quando usamos HTML?

Todas as páginas da Web que você vê na Internet são escritas usando código HTML. Botões, imagens, formulários, seções de texto: todos esses são elementos criados com HTML.

Se pensarmos na nossa página da Web como um corpo humano, o HTML é a estrutura óssea. Podemos adicionar pele e roupas ao corpo usando CSS, mas apenas depois que tivermos essa estrutura esquelética.

HTML em ação

No centro do HTML estão os elementos. Os elementos são criados com tags.

A maioria dos elementos tem uma tag de abertura e uma de fechamento:

<!-- opening tag -->
<p>

<!-- closing tag -->
</p>

O conteúdo (texto ou até mesmo outros elementos HTML) que você quer ver na página da Web pode ser colocado entre essas tags, como se estivesse aninhando as camadas de um sanduíche.

<p>The content that you write here will be seen on the web page</p>

<section>
  <p>This text is inside a paragraph within a section.</p>
</section>

Alguns conteúdos HTML são criados com tags de fechamento automático que não precisam de uma tag de fechamento adicional:

<img />
<link />

Apenas uma tag é suficiente, já que o trabalho desse elemento é ocupar um lugar no documento. Ao contrário da maioria dos outros elementos HTML, não é possível aninhar outros elementos ou informações dentro desses elementos de fechamento automático.

Partes de um elemento HTML

Exemplo de HTML

Esse código seria exibido em um navegador e ficaria parecido com a imagem abaixo.

Este Código...

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>HTML Example</title>
</head>
<body>
  <h1>My Day In The Garden</h1>
  <section>
    <h2>Flora</h2>
    <p>I spent the morning drawing some of the daffodils that
    are inbloom.</p>
    <p>I picked a few tulips to put in a vase in the dining
    room.</p>
  </section>
  <section>
    <h2>Fauna</h2>
    <p>Today I spotted that hummingbird again, buzzing around
    the newly blooming tree.</p>
    <img
    src="https://media.gettyimages.com/photos/magentathroated-woodstar-feeding-from-flowers-picture-id853369596"
    alt="hummingbird"/>
  </section>
</body>

... Makes This Web Page

Referência HTML

Enquadramento

Contexto e finalidade

HTML significa Hyper Text Markup Language. É uma maneira de dar significado estrutural ao texto. Isso permite que computadores e programadores determinem facilmente a finalidade de um trecho de texto.

Pense no HTML como o esqueleto de uma página da Web: ele fornece a estrutura e o conteúdo, enquanto o JavaScript e o CSS oferecem a interatividade e o estilo.

Objetivos de aprendizagem

Os estudantes poderão

  • criar um arquivo HTML e abri-lo no editor e no navegador
  • configurar um arquivo HTML com a estrutura adequada
  • listar e usar algumas tags comuns para adicionar estrutura e conteúdo ao site;

Primeiros passos

Enquadramento e finalidade da seção

  • O HTML é gravado em arquivos com uma extensão .html.
  • Você pode dar aos seus arquivos HTML o nome que quiser. No entanto, index.html é o nome mais comum usado para a página de destino, a menos que o desenvolvedor tenha um motivo para configurar o servidor de outra forma.
# creating an html file on the command line
touch index.html
 
# opening your html file in your browser
open index.html

Minidesafios

  1. Crie mais três arquivos HTML com os nomes que quiser.
  2. Abra um dos arquivos no editor de texto e no navegador.

Estrutura de uma página HTML

Enquadramento e finalidade da seção

Um documento HTML sempre começa com a mesma estrutura:

  • A tag DOCTYPE é especial e não é fechada. Ela também é a única tag que pode ter valores não alfanuméricos (letras/números).
  • O <head> contém informações sobre seu site, mas não o conteúdo real que vai aparecer na página.
  • O <body> contém todo o conteúdo da página que vai aparecer na tela.
  • As tags que você vai usar para criar a estrutura da página precisam ser colocadas entre as tags <body>.
  • Entre as tags de abertura e fechamento, inserimos o texto ou "conteúdo" do elemento. O resultado final seria assim: <example-tag>Content Goes in here</example-tag>. As tags também podem ser colocadas dentro de outras tags.
  • Ao colocar uma tag dentro de outra tag, adicione um recuo na nova tag para mostrar que ela é uma filha da tag mãe.

Vocabulário

  • Elementos: itens (como imagens, parágrafos e cabeçalhos) criados com código HTML.
  • Tags: partes de código que indicam onde determinados elementos começam e terminam.
  • child: elementos contidos DENTRO de outros elementos.
  • parent: elementos que CONTÊM outros elementos.

Exemplos de HTML

Observação : o exemplo a seguir é apenas para referência. Não é necessário entender tudo de imediato, mas é bom ver como um HTML bem formatado pode ser.

<!-- Standard tag setup of an HTML document  -->
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Practice Website</title>
</head>
<body>
  <h1>My first website</h1>
  <section>
    <h2>Information about me</h2>
    <p>I am coding out my first website. This is a paragraph
    that I would write with information about my
    interests.</p>
  </section>
  <section>
    <h2>Things that I've learned in class</h2>
    <ul>
      <li>Command Line</li>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </section>
</body>
 
<!-- Nested elements  -->
<section>
  <p>I am the text that will show up on your website.</p>
</section>
<!-- The <section> is the parent element -->
<!-- The <p> is the child element -->

Minidesafios

  1. Abra um dos arquivos criados e adicione a estrutura básica de tags HTML.
  2. Configure o corpo do HTML para mostrar sua árvore genealógica (ou a de outra pessoa). Use uma tag section para manter um grupo familiar. Use uma tag p para armazenar um membro da família. As famílias são complicadas, mas um exemplo pode ser:
<section>Jetson Family
  <div>George and Jane
    <p>Judy</p>
    <p>Elroy</p>
  </div>
  <p>Rosie the robot</p>
  <p>Astro the dog</p>
</section>

<!-- In this example, Judy and Elroy are the children of Jane and George. -->

Tags comuns

Enquadramento e finalidade da seção

Em geral, não criamos nossos próprios tipos de elementos. Em vez disso, há um conjunto de elementos predefinidos com funcionalidades já associadas a eles.

Consulte a referência HTML para ver exemplos de blocos de código

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Practice Website</title>
</head>
<body>
  <h1>My first website</h1>
  <br>
  <img
  src="https://media.gettyimages.com/photos/portrait-of-kitten-against-colored-background-picture-id903869076"
  alt="kitten with blue background">
  <hr>
  <section>
    <h2>Information about me</h2>
    <p>I am coding out my first website. This is a paragraph
    that I would write with information about my interests.</p>
    <h3>My favorite websites</h3>
      <ul>
        <li><a href="www.google.com">Google</a></li>
      </ul>
    <h3>My favorite books</h3>
      <section>
        <h4>Non-Fiction</h4>
        <ol>
          <li>Eloquent Javascript</li>
        </ol>
      </section>
      <section>
        <h4>Fiction</h4>
        <ol>
          <li>Hitchhiker's Guide to the Galaxy</li>
        </ol>
      </section>
  </section>
  <hr>
  <section>
    <h2>Things that I've learned in class</h2>
    <ul>
      <li>Command Line</li>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </section>
</body>

Minidesafios

  1. Revise todo o conteúdo acima para refletir SEUS interesses.
  2. Em um dos outros arquivos HTML em branco que você criou no início da lição, imagine que está preparando um artigo de notícias com título, cabeçalhos e subtítulos. Não consegue pensar em conteúdo? Escreva sobre um dia em que você estava viajando. Pense em miniviagens que você fez, lugares que visitou, comidas que comeu.
  3. Use as tags relevantes e adicione conteúdo para que seu artigo de notícias apareça no site.
  4. Verifique se o conteúdo está aparecendo no navegador.
  5. ESTENDER: crie um formulário para que alguém possa enviar um comentário sobre seu artigo. Embora ainda não funcione (não está conectado ao JavaScript), criar esse formulário em HTML mostra a primeira etapa de como criar um formulário funcional.

Contexto

HTML é a linguagem do conteúdo na World Wide Web.

Você vai usar a linha de comando para navegar até os arquivos HTML e abri-los. Seus arquivos HTML serão aumentados com estilos CSS e comportamento gravados usando scripts JavaScript, que são compostos de várias funções. Os arquivos HTML também serão modelos usados pelo Google App Engine e preenchidos com um banco de dados.

HTML em ação

Introdução ao HTML

O HTML é gravado em arquivos com uma extensão .html.

Como ver sua página

Para visualizar um arquivo HTML em um Mac: na linha de comando, navegue até a pasta com sua página HTML e digite open filename, substituindo "filename" pelo nome do seu arquivo HTML.

Sintaxe geral

<tag>
  Content
</tag>

Elementos aninhados

Os elementos HTML podem ser colocados dentro de outros elementos:

 <parent>
    <child>
      This content is inside of the child tag, which is inside of
      the parent tag. Keep an eye on indentation to see which is
      the parent and which is the child!
    </child>
  </parent>

Estrutura de uma página HTML

Todas as páginas da Web têm a mesma estrutura básica. Esta é a aparência dela:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>
  • O <head> contém informações sobre seu site, mas não o conteúdo real que vai aparecer na página. Pense nele como o "cérebro" da sua página da Web.
  • O <body> contém todo o conteúdo da página que vai aparecer na tela.

Elementos comuns

Use esses elementos comuns nas tags <body> e </body> para adicionar conteúdo a uma página.

Parágrafo

Para criar um parágrafo, use as tags de abertura e fechamento p:

<p>
  This is a paragraph about how great polar bears are. Aren't they just the best?
</p>

Comentar

Use comentários para facilitar a leitura do código sem afetar o HTML renderizado final.

<!-- This is a comment. It lives in the code as a note to yourself or
  to other developers, but is hidden when the HTML is rendered in the
  browser. -->

Títulos

<!-- Different levels of headings. Use these for structuring
your page. <h1> is most important heading while <h6> is the
least important heading. -->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

Genérico <div>

<div> The DIV tag exists to make "dividers" to keep your page
organized. Group other similar or related elements inside these.</div>

Listas

Listas de itens de lista, <li>, são envolvidas com uma tag de lista não ordenada, <ul>, ou uma tag de lista ordenada, <ol>.

<!-- An unordered list - this will default to a bulleted list. -->
<ul>
  <li>first list item</li>
  <li>second list item</li>
</ul>
 
<!-- An ordered list - this will default to a numbered list. -->
<ol>
  <li>first list item</li>
  <li>second list item</li>
</ol>

Imagem

A tag <img> exige que o endereço da imagem seja especificado usando o atributo src, e o atributo opcional alt é usado para acessibilidade, incluindo leitores de tela.

<!-- Image hosted elsewhere on the web -->
<img
 src="https://some.hostingsite.com/portrait-of-kitten-in-blue"
 alt="kitten with blue background">

<!-- Image hosted on your own site -->
<img src="img/kitten-blue-background.jpg" alt="Kitten in a donut">

Para um hiperlink, a tag <a> exige que o endereço do destino do hiperlink seja especificado usando o atributo href.

<!-- External link  -->
<a href="https://www.google.com"></a>

<!-- Local link -->
<a href="footer.html"></a>

Régua horizontal

<!-- This self-closing tag creates a line across your web page. -->
<hr>

Intervalo

<!-- This self-closing tag creates a line break between elements. -->
<br>

Formulário

Um <form> é usado para coletar informações de um usuário. Para que um <form> funcione, ele precisa enviar os dados coletados para algum lugar para serem processados ou tratados. Portanto, <form> geralmente exige atributos adicionais:

  • action: o destino dos dados do formulário quando ele é enviado.
  • method: indica se os dados devem ser processados usando um tipo de solicitação GET ou POST.
<!-- a form that will send data to process.php via POST request -->
<form action="/process.php" method="post">

</form>

Entrada

<input> é o elemento usado por um <form> para coletar informações.

Um elemento <input> também costuma ter um atributo name usado por bancos de dados para identificar o campo a que os dados enviados pertencem.

<form>
    <!-- a text box with the helper text "Full Name" -->
    <input type="text" name="fullName" placeholder="Full Name">
</form>

O elemento <input> é muito versátil: ao especificar o atributo type, ele pode ser renderizado como um campo de texto, um seletor de data no estilo calendário, um botão de opção, um menu suspenso e muito mais. Consulte documentação externa para ver uma lista mais completa.

Dicas e sugestões

  • Para saber quais tags HTML estão disponíveis, inspecione o código das páginas da Web e veja quais tags outros desenvolvedores usaram para adicionar algo a uma página.
  • Se você não encontrar o que quer adicionar, consulte a documentação para desenvolvedores. Confira algumas listas de todos os elementos HTML possíveis: https://www.w3schools.com/Tags/, https://developer.mozilla.org/en-US/docs/Web/HTML/Element, http://html-css-js.com/html/tags/
  • Ao escrever HTML, para elementos que precisam de uma tag de abertura e uma de fechamento, é melhor abrir e fechar a tag primeiro antes de adicionar conteúdo entre elas. Assim, você não terá tags soltas.
  • Para visualizar melhor a natureza aninhada dos elementos HTML no seu código, adicione recuo aos elementos que estão dentro de outros elementos. Isso ajuda você a reconhecer rapidamente a estrutura do conteúdo HTML.
  • Use muitos comentários! Isso vai ajudar você a resolver problemas no seu código e também outras pessoas quando você pedir que ele seja revisado.
  • Recursos na Web, como html5boilerplate.com, podem ajudar você a começar a escrever HTML rapidamente.

Resumo das práticas recomendadas

  • As informações sobre uma página da Web ficam no <head> de um documento HTML: título, metadados, links para estilos etc.
  • As informações em uma página da Web ficam no <body> de um documento HTML.
  • Há muitos elementos que os desenvolvedores podem usar para criar o conteúdo de um documento HTML, incluindo: <p>, <h1>-<h6>, <div>, <li>, <img>, <a>, <hr>, <br>, <!-- --> e muito mais.
  • Alguns elementos exigem uma tag de abertura e uma de fechamento: <p></p>.
  • Outros elementos são de fechamento automático, então só precisam de uma tag de abertura: <img>.
  • As tags podem incluir atributos (src, alt, id etc.) que fornecem mais informações sobre como um elemento deve se comportar: <img src="filename.png" alt="description">.
  • Os comentários, <!-- -->, fornecem notas aos desenvolvedores que são úteis para entender o que as seções de uma página da Web fazem.
  • Use as ferramentas para desenvolvedores integradas no navegador para inspecionar o código HTML das páginas da Web e examinar como elas foram criadas.

Pergunta 1

Qual dos seguintes elementos é um elemento filho? (ignore os elementos body/html para fins deste exercício)

<h1>
  Welcome to the site!
</h1>
<p>
  Go to <a href="https://www.google.com">Google!</a>
</p>
  1. h1
  2. p
  3. a
  4. h1 e p

Pergunta 2

Em um documento HTML, __ vai no elemento <head> e __ vai no elemento <body>.

  1. estrutura, metadados
  2. metadados, estrutura
  3. cabeçalhos, conteúdo menor
  4. o cabeçalho e o conteúdo principal do site

Pergunta 3

Quais das opções a seguir não são bons motivos para adicionar recuo a elementos aninhados?

  1. O recuo facilita a identificação dos elementos contidos em outros.
  2. O recuo facilita a leitura da estrutura da página da Web para os humanos.
  3. O recuo facilita a leitura da estrutura da página da Web por bots/mecanismos de pesquisa.
  4. O recuo facilita a identificação de elementos irmãos

Pergunta 4

Qual das opções a seguir é um atributo do elemento HTML?

<div class="sidebar">Sidebar goes here!</div>
  1. div
  2. class
  3. barra lateral
  4. A barra lateral aparece aqui!

Pergunta 5

Quantos atributos o seguinte elemento HTML tem?

<input type="text" placeholder="username" name="username" />
  1. 0
  2. 1
  3. 2
  4. 3

Pergunta 6

No snippet HTML a seguir que demonstra uma relação, qual elemento é um elemento pai?

<p>
        <b>Pomp</b> and <i>Circumstance</i>
</p>
  1. <p>
  2. <b>
  3. <i>

Pergunta 7

Quantos dos elementos no snippet HTML a seguir são filhos de um elemento pai?

Não conte os elementos de encapsulamento <body> ou <html>.

<div>
  <h1>Buster's site</h1>
  <p>Buster is my dog.  He is a <i>very good dog</i>.  He is a
  Labrador retriever.  Read more about it
  <a href="https://dogtime.com/dog-breeds/labrador-retriever">
    here</a>.
  <p>
</div>
  1. 1
  2. 2
  3. 3
  4. 4

Pergunta 8

Embora alguns navegadores renderizem o snippet de HTML a seguir corretamente, o que há de errado com ele?

<img src=puppies.png width=400 />
  1. Não tem uma tag de fechamento
  2. Os valores dos atributos precisam estar entre aspas
  3. Ao fornecer o atributo width, também é necessário informar o atributo height.
  4. Está faltando um atributo obrigatório

Pergunta 1

Qual dos seguintes elementos é um elemento filho? (ignore os elementos body/html para fins deste exercício)

<h1>
  Welcome to the site!
</h1>
<p>
  Go to <a href="https://www.google.com">Google!</a>
</p>

O elemento a é um elemento filho porque está contido em outro elemento.

Pergunta 2

Em um documento HTML, __ vai no elemento <head> e __ vai no elemento <body>.

Os metadados ficam no elemento <head> e a estrutura no elemento <body>. Nada no elemento <head> vai ficar visível na página da Web.

Pergunta 3

Quais das opções a seguir não são bons motivos para adicionar recuo a elementos aninhados?

O recuo não facilita a leitura da estrutura da página da Web por bots/mecanismos de pesquisa. Quando um bot lê um site, ele consegue ler o código HTML mesmo que esteja tudo em uma linha.

Pergunta 4

Qual das opções a seguir é um atributo do elemento HTML?

<div class="sidebar">Sidebar goes here!</div>

class é o atributo. Os atributos ficam dentro de um elemento HTML e geralmente têm (mas não precisam ter) um valor.

Pergunta 5

Quantos atributos o seguinte elemento HTML tem?

<input type="text" placeholder="username" name="username" />

O elemento input acima tem três atributos: type, placeholder e name.

Pergunta 6

No snippet HTML a seguir que demonstra uma relação, qual elemento é um elemento pai?

<p>
        <b>Pomp</b> and <i>Circumstance</i>
</p>

<p> é um elemento pai porque contém outros elementos.

Pergunta 7

Quantos dos elementos no snippet HTML a seguir são filhos de um elemento pai?

Não conte os elementos de encapsulamento <body> ou <html>.

<div>
  <h1>Buster's site</h1>
  <p>Buster is my dog.  He is a <i>very good dog</i>.  He is a
  Labrador retriever.  Read more about it
  <a href="https://dogtime.com/dog-breeds/labrador-retriever">
    here</a>.
  <p>
</div>

Há quatro elementos filhos no snippet, basicamente qualquer elemento que tenha um pai acima dele, exceto o elemento <div>: <h1>, <p>, <i>, <a>.

Pergunta 8

Embora alguns navegadores renderizem o snippet de HTML a seguir corretamente, o que há de errado com ele?

<img src=puppies.png width=400 />

Os valores dos atributos precisam estar entre aspas. <img /> é uma tag de fechamento automático e não tem atributos obrigatórios. É possível ter width sem height e vice-versa.