INTRODUÇÃO AO DESENVOLVIMENTO WEB

Semana 2 - Aula 3
HTML Parte 2
Agenda
PRINCIPAIS TÓPICOS DISCUTIDOS
NESTA APRESENTAÇÃO

Elementos semânticos em HTML5

Listas
Tabelas
Formulários
Incorporação de mídia: imagens, áudio e vídeo
Elementos Semânticos em HTML5
O que são elementos semânticos ?

Um elemento semântico descreve claramente seu significado tanto para o navegador

quanto para o desenvolvedor.

Exemplos de elementos não semânticos : <div>e <span>- Não diz nada sobre o seu
conteúdo.

Exemplos de elementos semânticos <form> : , <table>, e <article>- Define claramente seu

conteúdo.
Elementos Semânticos em HTML5

Por que elementos semânticos ?

De acordo com o W3C: “Uma Web semântica permite que os dados sejam compartilhados e
reutilizados entre aplicações, empresas e comunidades”.
Elementos Semânticos em HTML5
Muitos sites contêm código HTML como: <div id="nav"> <div class="header">
<div id="footer"> para indicar navegação, cabeçalho e rodapé.

Elementos semânticos: <article> Sem Semântica Com semântica

<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
Elementos Semânticos em HTML5
O elemento <section> define uma seção em um documento. Uma seção é um agrupamento
temático de conteúdo, normalmente com um título.
Exemplos de onde um elemento <section> pode ser usado:

Capítulos
Introdução
Novos itens
Informações de contato
Elementos Semânticos em HTML5
O elemento <article> especifica conteúdo independente. Um article (ou artigo) deve fazer
sentido por si só e deve ser possível distribuí-lo independentemente do resto do site.

Exemplos de onde o <article> elemento pode ser usado:

Postagens no fórum
Postagens no blog
Comentários do usuário

Cartões de produto

Artigos de jornal
Elementos Semânticos em HTML5
O elemento <header> representa um contêiner para conteúdo introdutório ou um conjunto de
links de navegação.

Um <header>elemento normalmente contém:

Um ou mais elementos de título (<h1> - <h6>)

Logotipo ou ícone

Informações de autoria
Elementos Semânticos em HTML5
O elemento <main>representa um contêiner para conteúdo principal de uma página ou seção
de um documento HTML.

Um <main> elemento normalmente contém:

Um ou mais elementos de conteúdo principal, como <article>, <section>, <div>, etc.

Elementos de título que introduzem o conteúdo principal.
Conteúdo significativo e principal da página.
Elementos Semânticos em HTML5
O elemento <footer> define um rodapé para um documento ou seção.

Um elemento <footer> normalmente contém:

informações de autoria
Informações sobre direitos autorais
informações de contato
Mapa do site

voltar ao topo links documentos relacionados

Elementos Semânticos em HTML5

O elemento <nav> define um conjunto de links de navegação.

Observe que NEM todos os links de um documento devem estar dentro de um elemento
<nav>. O elemento <nav> destina-se apenas a grandes blocos de links de navegação.

O elemento <aside> define algum conteúdo além daquele em que está colocado (como uma
barra lateral). O conteúdo de <aside> deve estar indiretamente relacionado ao conteúdo
circundante.
Elementos Semânticos em HTML5

A tag <figure> especifica conteúdo independente, como ilustrações, diagramas, fotos,

listagens de códigos, etc.

A tag <figcaption> define uma legenda para um elemento <figure>. O elemento <figcaption>
pode ser colocado como o primeiro ou o último filho de um elemento <figure>.

O elemento <img> define a imagem/ilustração real.

Listas
As listas HTML permitem que os desenvolvedores da web agrupem um conjunto de itens
relacionados em listas.

Lista não ordenada

Uma lista não ordenada começa com a tag <ul>. Cada item da lista começa com a tag<li>.

Os itens da lista serão marcados com marcadores (pequenos círculos pretos) por padrão:

Lista ordenada
Uma lista ordenada começa com a tag <ol>. Cada item da lista começa com a tag <li>.

Os itens da lista serão marcados com números por padrão:

Listas de Descrição
HTML também oferece suporte a listas de descrição.

Uma lista de descrição é uma lista de termos, com uma descrição de cada termo.

A tag <dl> define a lista de descrição, a tag <dt> define o termo (nome) e a tag <dd>
descreve cada termo:
Tabelas
As tabelas HTML permitem que os desenvolvedores da web organizem os dados em linhas e
colunas.

A tag <table> define uma tabela HTML

Uma tabela em HTML consiste em células de tabela dentro de linhas e colunas.

Cada célula da tabela é definida por uma tag <td> (td significa dados da tabela).

Cada linha da tabela começa com um <tr> e termina com uma </tr> (tr significa linha da
tabela).

Às vezes você deseja que suas células sejam células de cabeçalho de tabela. Nesses casos,
use a tag <th> em vez da tag <td> (th significa cabeçalho da tabela).
Formulário
Um formulário HTML é usado para coletar a entrada do usuário. A entrada do usuário é
geralmente enviada a um servidor para processamento.

O elemento HTML <form> é usado para criar um formulário HTML para entrada do usuário

O elemento <form> é um contêiner para diferentes tipos de elementos de entrada, como:

campos de texto, caixas de seleção, botões de opção, botões de envio, etc.
Formulário
O elemento HTML <input> é o elemento de formulário mais usado.

Um elemento <input> pode ser exibido de várias maneiras, dependendo do type atributo.

aqui estão alguns exemplos:

<input type="text"> Exibe um campo de entrada de texto de linha única

<input type="radio"> Exibe um botão de opção (para selecionar uma das muitas opções)

<input type="checkbox"> Exibe uma caixa de seleção (para selecionar zero ou mais dentre muitas opções)

<input type="submit> Exibe um botão enviar (para enviar o formulário)

<input type="button"> Exibe um botão clicável

Formulário
A tag <label> define um rótulo para muitos elementos do formulário.

O elemento <label> é útil para usuários de leitores de tela, porque o leitor de tela lerá o
rótulo em voz alta quando o usuário focar no elemento de entrada.

O elemento <label> também ajuda usuários que têm dificuldade em clicar em regiões muito
pequenas (como botões de opção ou caixas de seleção) - porque quando o usuário clica no
texto dentro do <label>elemento, ele alterna o botão de opção/caixa de seleção.

O atrbituo “for” da tag <label> deve ser igual ao atributo id do elemento <input> para uni-
los.
Atributos do Formulário

O atributo action define a ação a ser executada quando o formulário for enviado.

Normalmente, os dados do formulário são enviados para um arquivo no servidor quando o

usuário clica no botão enviar.

O atributo method especifica o método HTTP a ser usado ao enviar os dados do formulário.

Os dados do formulário podem ser enviados como variáveis ​de URL (com method="get") ou
como pós-transação HTTP (com method="post").

O método HTTP padrão ao enviar dados de formulário é GET.

Atributos do Formulário
Notas sobre GET:

Acrescenta os dados do formulário ao URL, em pares nome/valor

NUNCA use GET para enviar dados confidenciais! (os dados do formulário enviado ficam visíveis no URL!)
O comprimento de um URL é limitado (2.048 caracteres)
Útil para envios de formulários onde um usuário deseja marcar o resultado
GET é bom para dados não seguros, como strings de consulta no Google

Notas sobre POST:

Acrescenta os dados do formulário ao corpo da solicitação HTTP (os dados do formulário enviado não são
mostrados na URL)
POST não tem limitações de tamanho e pode ser usado para enviar grandes quantidades de dados.
Os envios de formulários com POST não podem ser marcados como favoritos
Elementos do Formulário
<input> - Define um controle de entrada.
<label> - Define um rótulo para um elemento <input>.
<select> - Define uma lista suspensa.
<textarea> - Define um controle de entrada multilinha (área de texto).
<button> - Define um botão clicável.
<fieldset> - Agrupa elementos relacionados em um formulário .
<legend> - Define uma legenda para um elemento <fieldset>.
<datalist> - Especifica uma lista de opções predefinidas para controles de entrada.
<output> - Define o resultado de um cálculo.
<option> - Define uma opção em uma lista suspensa.
<optgroup> - Define um grupo de opções relacionadas em uma lista suspensa.
Entradas de um Formulário
<input type="button"> - Define um botão.
<input type="checkbox"> - Define uma caixa de seleção.
<input type="color"> - Define um campo de entrada para a escolha de uma cor.
<input type="date"> - Define um campo de entrada para a escolha de uma data.
<input type="datetime-local"> - Define um campo de entrada de data e hora.
<input type="email"> - Define um campo de entrada para um e-mail.
<input type="file"> - Define um campo de seleção para a escolha de um arquivo.
<input type="hidden"> - Define um campo de entrada oculto, não visível ao usuário.
<input type="image"> - Define uma imagem como botão de envio.
<input type="month"> - Define um campo para a escolha de um mês e ano.
<input type="number"> - Define um campo de entrada numérico.
Entradas de um Formulário
<input type="password"> - Define um campo de senha.
<input type="radio"> - Define um botão de opção.
<input type="range"> - Define um intervalo.
<input type="reset"> - Define um botão de redefinição.
<input type="search"> - Define um campo de pesquisa.
<input type="submit"> - Define um botão para enviar os dados do formulário.
<input type="tel"> - Define uma campo de entrada para um número de telefone.
<input type="text"> - Define um campo de entrada de texto de linha única.
<input type="time"> - Define um campo de entrada para a escolha de um horário.
<input type="url"> - Define um campo de entrada para a escolha de uma URL.
<input type="week"> - Define um campo de entrada para a escolha de semana e ano.
Atributos de Entrada
value - Especifica um valor inicial para um campo de entrada.
readonly - Especifica que um campo de entrada é somente de leitura.
disabled - Especifica que um campo de entrada deve ser desabilitado.
size - Especifica a largura visível, em caracteres, de um campo de entrada.
maxlenght - Especifica o número máximo de caracteres permitidos em um campo de
entrada
min e max - Especificam os valores mínimo e máximo para um campo de entrada.
multiple - Especifica que o usário pode inserir mais de um valor em um campo de entrada
pattern - Especifica uma expressão regular com a qual o valor do campo de entrada é
verificado quando o formulário é enviado.
placeholder - Especifica uma dica curta que descreve o valor esperado de um campo de
entrada
Atributos de Entrada
required - Especifica que um campo de entrada deve ser preenchido antes de enviar o
formulário.

set - Especifica os intervalos numéricos para um campo de entrada.

autofocus - Especifica que um campo de entrada deve receber foco automaticamente

quando a página for carregada.

height e width - Especificam a altura e a largura de um elemento <input type=”image”>.

list - Refere-se a um elemento <datalist> que contém opções predefinidas para um

elemento <input>

autocomplete - Especifica se um formulário ou campo de entrda deve ter o preenchimento

automático.
Imagens
A tag HTML <img> é usada para incorporar uma imagem em uma página da web.

A tag <img> é vazia, contém apenas atributos e não possui tag de fechamento.

A tag <img> tem dois atributos obrigatórios:

src - Especifica o caminho para a imagem

alt - Especifica um texto alternativo para a imagem

Os atributos width e height sempre definem a largura e a altura da imagem em pixels.

Para usar uma imagem como link, coloque a tag <img> dentro da tag <a>.
Formatos de Imagens
APNG (Animated Portable Network Graphics). Extensão: .apng

GIF (Graphics Interchange Format). Extensão: .gif

ICO (Microsoft Icon). Extensão: .ico, .cur

JPEG (Joint Photographic Expert Group image). Extensão: .jpg, .jpeg, .jfif, .pjpeg, .pjp

PNG (Portable Network Graphics). Extensão: .png

SVG (Scalable Vector Graphics). Extensão: .svg

Favicon
Um favicon é uma pequena imagem exibida ao lado do título da página na guia do
navegador.

Use o elemento <link> HTML para inserir um favicon

Dica: Um favicon é uma imagem pequena, portanto deve ser uma imagem simples com alto
contraste.

Links úteis:
https://www.favicon.cc/
https://favicon.io/
https://icons8.com.br/
Áudio

O elemento HTML <audio> é usado para reproduzir um arquivo de áudio em uma página da
web.

O atributo controls adiciona controles de áudio, como reproduzir, pausar e volume.

O elemento <source> permite que você especifique arquivos de áudio alternativos que o
navegador pode escolher. O navegador usará o primeiro formato reconhecido.

Para iniciar um arquivo de áudio automaticamente, use o atributo autoplay.

Vídeo

O elemento HTML <video> é usado para mostrar um vídeo em uma página da web.

O atributo controls adiciona controles de vídeo, como reproduzir, pausar e volume.

É uma boa ideia sempre incluir atributos width e height. Se a altura e a largura não
estiverem definidas, a página poderá piscar enquanto o vídeo é carregado.

O elemento <source> permite que você especifique arquivos de vídeo alternativos que o
navegador pode escolher. O navegador usará o primeiro formato reconhecido.