HTML

HTML (Linguagem de Marcação de Hipertexto) é o código que você usa para

estruturar uma página web e seu conteúdo. Por exemplo, o conteúdo pode ser
estruturado em parágrafos, em uma lista com marcadores ou usando imagens e
tabelas. Como o título sugere, este artigo fornecerá uma compreensão básica do
HTML e suas funções.

Então, o que é HTML?

HTML não é uma linguagem de programação; é uma linguagem de marcação,

usada para definir a estrutura do seu conteúdo. HTML consiste de uma série de
elementos, que você usa para delimitar ou agrupar diferentes partes do
conteúdo para que ele apareça ou atue de determinada maneira. As tags anexas
podem transformar uma palavra ou imagem num hiperlink, pode colocar
palavras em itálico, pode aumentar ou diminuir a fonte e assim por diante. Por
exemplo, veja a seguinte linha de conteúdo:

Meu gatinho é muito mal humorado

Se quiséssemos que a linha permanecesse por si só, poderíamos especificar que

é um parágrafo colocando-a em uma tag de parágrafo:

<p>Meu gatinho é muito mal humorado</p>

As principais partes de um elemento são:

A tag de abertura: Consiste no nome do elemento (no caso, p), envolvido em

parênteses angulares de abertura e fechamento. Isso demonstra onde o
elemento começa, ou onde seu efeito se inicia — nesse caso, onde é o começo
do parágrafo.
1. A tag de fechamento: Isso é a mesma coisa que a tag de abertura,
exceto que inclui uma barra antes do nome do elemento. Isso demonstra
onde o elemento acaba — nesse caso, onde é o fim do parágrafo.
Esquecer de incluir uma tag de fechamento é um dos erros mais comuns
de iniciantes e pode levar a resultados estranhos.
2. O conteúdo: Esse é o conteúdo do elemento, que nesse caso é apenas
texto.
3. O elemento: A tag de abertura, a de fechamento, e o conteúdo formam o
elemento.

Elementos também podem ter atributos, que parecem assim:

Atributos contém informação extra sobre o elemento que você não quer que
apareça no conteúdo real. Aqui, class é o nome do atributo e editor-note é o
valor do atributo. O atributo class permite que você forneça ao elemento um
identificador que possa ser usado posteriormente para aplicar ao elemento
informações de estilo e outras coisas.

Um atributo sempre deve ter:

4. Um espaço entre ele e o nome do elemento (ou o atributo anterior, se o

elemento já tiver um).
5. O nome do atributo, seguido por um sinal de igual.
6. Aspas de abertura e fechamento, envolvendo todo o valor do atributo.

Nota: Valores de atributos simples que não contém espaço em branco ASCII (ou
qualquer um dos caracteres " ' ` = < >) podem permanecer sem aspas, mas é
recomendável colocar em todos os valores de atributos, pois isso torna o código
mais consistente e compreensível.

Aninhando elementos

Você pode colocar elementos dentro de outros elementos também — isso é

chamado de aninhamento. Se quiséssemos afirmar que nosso gato é muito
mal-humorado, poderíamos envolver a palavra "muito" em um elemento
<strong>, o que significa que a palavra deve ser fortemente enfatizada:
 <p>Meu gatinho é <strong>muito</strong> mal humorado.</p>

Você precisa, no entanto, certificar-se de que seus elementos estejam

adequadamente aninhados. No exemplo acima, abrimos primeiro o elemento
<p>, depois o elemento <strong>; portanto, temos que fechar primeiro o
elemento <strong>, depois o elemento <p>. O código abaixo está incorreto:

<p>Meu gatinho é <strong>muito mal humorado.</p></strong>

Os elementos precisam ser abertos e fechados corretamente para que eles

estejam claramente visíveis dentro ou fora um do outro. Se eles se
sobrepuserem conforme mostrado acima, seu navegador tentará adivinhar o que
você estava tentando dizer, o que pode levar a resultados inesperados. Então
não faça isso!

Elementos vazios

Alguns elementos não possuem conteúdo e são chamados de elementos

vazios. Considere o elemento <img> que temos na nossa página HTML:

<img src="imagens/firefox-icon.png" alt="Minha imagem de teste" />

Ele contém dois atributos, mas não há tag </img> de fechamento, e não há
conteúdo interno. Isso acontece porque um elemento de imagem não envolve
conteúdo para ter efeito em si mesmo. Sua proposta é incorporar uma imagem
na página HTML no lugar que o código aparece.

Anatomia de um documento HTML

Isso resume o básico dos elementos HTML individuais, mas eles não são úteis por
si só. Agora vamos ver como elementos individuais são combinados para formar
uma página HTML inteira. Vamos visitar novamente os códigos que colocamos
no exemplo de index.html (que vimos no artigo Lidando com arquivos):

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Minha página de teste</title>
 </head>
<body>
<img src="images/firefox-icon.png" alt="minha página de
teste" />
</body>
</html>

Aqui nós temos:

 <!DOCTYPE html> — o doctype. É a parte inicial obrigatória do documento.

Nas névoas do tempo, quando o HTML era novo (por volta de 1991/2),
doctypes eram criados para agir como links para um conjunto de regras
que a página HTML tinha que seguir para ser considerada um bom HTML,
o que poderia significar checagem automática de erros e outras coisas
úteis. No entanto, atualmente, eles não fazem muito sentido e são
basicamente necessários apenas para garantir que o documento se
comporte corretamente. Isso é tudo que você precisa saber agora.
 <html></html> — o elemento <html>. Esse elemento envolve todo o
conteúdo da página e às vezes é conhecido como o elemento raiz.
 <head></head> — o elemento <head>. Esse elemento age como um
recipiente de tudo o que você deseja incluir em uma página HTML que não
é o conteúdo que você quer mostrar para quem vê sua página. Isso inclui
coisas como palavras-chave e uma descrição que você quer que apareça
nos resultados de busca, CSS para dar estilo ao conteúdo, declarações de
conjuntos de caracteres e etc.
 <meta charset="utf-8"> — esse elemento define o conjunto de
caracteres que seu documento deve usar para o UTF-8, que inclui
praticamente todos os caracteres da grande maioria dos idiomas escritos.
Essencialmente, agora ele pode manipular qualquer conteúdo textual que
você possa colocar. Não há razão para não definir isso e assim pode
ajudar a evitar alguns problemas no futuro.
 <title></title> — o elemento <title>. Ele define o título da sua
página, que é o título que aparece na guia do navegador onde sua página
é carregada. Ele também é usado para descrever a página quando você a
adiciona aos favoritos.
 <body></body> — o elemento <body>. Contém todo o conteúdo que você
quer mostrar ao público que visita sua página, seja texto, imagens, vídeos,
jogos, faixas de áudio reproduzíveis ou qualquer outra coisa.

Imagens

Vamos voltar nossa atenção para o elemento <img> novamente:

<img src="images/firefox-icon.png" alt="Minha imagem de teste" />

Como dissemos antes, isso incorpora uma imagem na nossa página na posição
que aparece. Isso é feito pelo atributo src (source), que contém o caminho para
nosso arquivo de imagem.

Incluímos também um atributo alt (alternative). Neste atributo, você especifica

um texto descritivo para usuários que não podem ver a imagem, possivelmente
devido aos seguintes motivos:

7. Eles são deficientes visuais. Usuários com deficiências visuais

significativas costumam usar ferramentas chamadas leitores de tela para
ler o texto alternativo para eles.
8. Algo deu errado, fazendo com que a imagem não seja exibida. Por
exemplo, tente alterar deliberadamente o caminho dentro do atributo src
para torná-lo incorreto. Se você salvar e recarregar a página, você deve
ver algo assim no lugar da imagem:

As palavras-chave para o texto alternativo são "texto descritivo". O texto

alternativo que você escreve deve fornecer ao leitor informações suficientes
para ter uma boa ideia do que a imagem mostra. Neste exemplo, nosso texto
"Minha imagem teste" não é bom para todos. Uma alternativa muito melhor para
o nosso logotipo do Firefox seria "A logo do Firefox: uma raposa em chamas
envolvendo a Terra."

Tente criar um texto alternativo melhor para sua imagem agora.

Nota: Saiba mais sobre acessibilidade em módulo de aprendizagem sobre

acessibilidade.

Marcando o texto

Essa seção abordará alguns dos elementos HTML essenciais que você usará para
marcar o texto.
Cabeçalhos

Os elementos de cabeçalhos permitem especificar que certas partes do seu

conteúdo são títulos ou subtítulos. Da mesma forma que um livro tem o título
principal e os capítulos possuem títulos e subtítulos, um documento HTML
também tem. HTML contém 6 níveis de título, <h1> - <h6>, embora você
normalmente só use de 3 a 4:

<!-- 4 níveis de título -->

<h1>Meu título principal</h1>
<h2>Meu título de alto nível</h2>
<h3>Meu subtítulo</h3>
<h4>Meu segundo subtítulo</h4>

Nota: Qualquer coisa em HTML entre <!-- e --> é um comentário HTML. O

navegador ignora comentários enquanto renderiza o código. Em outras palavras,
eles não são visíveis na página – apenas no código. Os comentários HTML são
uma forma de escrever notas úteis sobre seu código ou lógica.

Agora tente adicionar um título adequado à sua página HTML logo acima do
elemento <img>.

Nota: você verá que seu título de nível 1 tem um estilo implícito. Não use
elementos de cabeçalho para deixar o texto maior ou em negrito, pois eles são
usados para acessibilidade e outros motivos, como SEO. Tente criar uma
sequência significativa de títulos em suas páginas, sem pular níveis.

Parágrafo

Como explicado acima, os elementos <p> são para conter parágrafos de texto;
você os usará com frequência ao marcar um conteúdo de texto regular:

HTMLCopy to Clipboard
<p>Este é um parágrafo simples</p>

Adicione seu texto de exemplo (você o obteve em Como será o seu site?) Em um
ou alguns parágrafos, colocados diretamente abaixo do seu elemento <img>.
Listas

Muito do conteúdo da web é de listas e o HTML tem elementos especiais para

elas. Listas de marcação sempre consistem em pelo menos 2 elementos. Os
tipos mais comuns de lista são ordenadas e não ordenadas:

9. Listas não ordenadas são para listas onde a ordem dos itens não
importa, como uma lista de compras, por exemplo. Essas são envolvidas
em um elemento <ul>.
10.Listas Ordenadas são para listas onde a ordem dos itens importa, como
uma receita. Essas são envolvidas em um elemento <ol>.

Cada item dentro das listas é posto dentro de um elemento <li> (item de lista).

Por exemplo, se nós quisermos tornar uma parte de um parágrafo numa lista:

<p>
Na Mozilla, somos uma comunidade global de tecnólogos, pensadores
e
construtores trabalhando juntos ...
</p>

Nós podemos fazer assim:

<p>Na Mozilla, somos uma comunidade global de</p>

<ul>
<li>tecnólogos</li>
<li>pensadores</li>
<li>construtores</li>
</ul>

<p>trabalhando juntos ...</p>

Tente adicionar uma lista ordenada ou não ordenada à sua página de exemplo.

Links

Links são muito importantes — eles são o que faz da web ser de fato uma REDE!
Para adicionar um link, precisamos usar um elemento simples — <a> — "a" é a
forma abreviada de "âncora". Para transformar o texto do seu parágrafo em um
link, siga estas etapas:

11.Escolha algum texto. Nós escolhemos o texto "Mozilla Manifesto".

12. Envolva o texto em um elemento <a> , assim:

<a>Mozilla Manifesto</a>

13.Dê ao elemento <a> um atributo href, como mostrado abaixo:

<a href="">Mozilla Manifesto</a>

14.Preencha o valor desse atributo com o endereço da Web que você deseja
vincular o link:
<a href="https://www.mozilla.org/pt-BR/about/manifesto/"
>Mozilla Manifesto</a
>

Você pode obter resultados inesperados se omitir a parte https:// ou o

http://, o chamado protocolo, no começo do endereço web. Então depois de
criar um link, clique nele para ter certeza de que ele está indo para onde você
deseja.

Nota: href pode parecer, numa primeira impressão, uma escolha obscura para
um nome de atributo. Se você está tendo problemas para lembrar do nome,
lembre que significa hypertext reference. (referência em hipertexto)

Adicione um link em sua página agora, se ainda não tiver feito isso.

CSS

CSS (Folha de Estilo em Cascata) é o código que você usa para dar estilo à
sua página Web. CSS básico apresenta tudo que você precisa para
começar. Responderemos a perguntas do tipo: Como mudo meu texto
para preto ou vermelho? Como faço para que meu conteúdo apareça em
determinados lugares na tela? Como decoro minha página com imagens e
cores de fundo?
Então, o que realmente é CSS?

Assim como o HTML, o CSS não é realmente uma linguagem de

programação. Também não é uma linguagem de marcação — é uma
linguagem de folhas de estilos. Isso significa que o CSS permite aplicar
estilos seletivamente a elementos em documentos HTML. Por exemplo,
para selecionar todos os elementos parágrafo de uma página HTML e
tornar o texto dentro deles vermelho, você escreveria este CSS:

e
p {
color: red;
}

Vamos tentar: cole as três linhas de CSS acima em um novo arquivo, no

seu editor de texto, e salve o arquivo como estilo.css na sua pasta
estilos.

Ainda assim, precisamos aplicar o CSS ao seu documento HTML. Do

contrário, o estilo CSS não irá afetar a maneira como o seu navegador
mostra seu documento HTML (se você não estiver acompanhando o nosso
projeto, leia Lidando com arquivos e HTML básico para descobrir o qu
você precisa fazer primeiro).

15. Abra seu arquivo index.html e cole o seguinte código em

algum lugar no cabeçalho, ou seja, entre as tags <head> e </head>:
<link href="estilos/estilo.css" rel="stylesheet" />

16. Salve o arquivo index.html e abra ele no seu navegador.

Você deve ver uma página como essa:
 Se

Toda essa estrutura é chamada de conjunto de regras (mas geralmente

usamos o termo "regra", por ser mais curto). Note os nomes das partes
individuais:

Seletor (Selector)
O nome do elemento HTML no começo do conjunto de regras. Ele
seleciona o(s) elemento(s) a serem estilizados (nesse caso, elementos
<p>). Para dar estilo a um outro elemento, é só mudar o seletor.

Declaração (Declaration)
Uma regra simples como color: red; especificando quais das
propriedades do elemento você quer estilizar.

Propriedades (Property)
Forma pela qual você estiliza um elemento HTML. (Nesse caso, color é
uma propriedade dos elementos <p>.) Em CSS, você escolhe quais
propriedades você deseja afetar com sua regra.

Valor da propriedade (Property value)

À direita da propriedade, depois dos dois pontos, nós temos o valor de
propriedade, que escolhe uma dentre muitas aparências possíveis para
uma determinada propriedade (há muitos valores color(cor) além do
red(vermelho)).

Note outras partes importantes da sintaxe:

 Cada linha de comando deve ser envolvida em chaves ({}).

 Dentro de cada declaração, você deve usar dois pontos (:) para
separar a propriedade de seus valores.
 Dentro de cada conjunto de regras, você deve usar um ponto e
vírgula (;) para separar cada declaração da próxima.

Então para modificar múltiplos valores de propriedades de uma vez, você

deve escrevê-los separados por ponto e vírgula, desse modo:

p {
color: red;
width: 500px;
border: 1px solid black;
}

Selecionando múltiplos elementos

Você também pode selecionar vários tipos de elementos e aplicar um

único conjunto de regras a todos eles. Inclua múltiplos seletores
separados por vírgulas. Por exemplo:

p,
li,
h1 {
color: red;
}
Diferentes tipos de seletores

Há muitos tipos diferentes de seletores. Abaixo, nós mostramos apenas os

seletores de elementos, que selecionam todos os elementos de um
determinado tipo nos documentos HTML. Mas nós podemos fazer seleções
mais específicas que essas. Aqui estão alguns dos tipos mais comuns de
seletores:

Nome do
O que ele seleciona Exemplo
seletor
Seletor de
elemento
(às vezes,
Todos os elementos HTML de
chamado p Seleciona <p>
determinado tipo.
tag ou
seletor de
tipo)
O elemento na página com o
ID específicado. Em uma
determinada página HTML, é
#my-id Seleciona <p
Seletor de uma boa prática usar um
id="my-id"> ou <a
ID elemento por ID (e claro, um
id="my-id">
ID por elemento) mesmo que
seja permitido usar o mesmo
ID para vários elementos.
O(s) elemento(s) na página
com a classe específicada .my-class Seleciona <p
Seletor de
(várias instâncias de classe class="my-class"> e <a
classe
podem aparecer em uma class="my-class">
página).
img[src] Seleciona <img
Seletor de O(s) elemento(s) na página
src="myimage.png"> mas
atributo com o atributo especificado.
não <img>
O(s) elemento(s)
a:hover Seleciona <a>,
Seletor de específicado(s), mas
mas somente quando o
pseudo- somente quando estiver no
mouse está em cima do
classe estado especificado. Ex.:
link.
com o mouse sobre ele.
Fontes e texto

Agora que exploramos algumas noções básicas de CSS, vamos começar a

adicionar mais regras e informações no nosso arquivo estilo.css para
deixar nosso exemplo bonito. Vamos começar fazendo nossas fontes e
textos parecerem um pouco melhores.

17. Primeiro de tudo, volte e encontre a fonte do Google Fonts que

você armazenou em algum lugar seguro. Adicione o elemento
<link> em algum lugar dentro do cabeçalho no index.html
(novamente, em qualquer lugar entre as tags <head> e </ head>).
Será algo parecido com isto:
<link
href="http://fonts.googleapis.com/css?family=Open+Sans"
rel="stylesheet" />

Esse código vincula sua página a uma folha de estilo que baixa a família
de fontes Open Sans junto com sua página web e permite que você a
defina em seus elementos HTML usando sua própria folha de estilos.
18. Em seguida, exclua a regra existente no seu arquivo
estilo.css. Foi um bom teste, mas o texto vermelho não parece
muito bom.
19. Adicione as seguintes linhas em seu lugar, substituindo a linha
do espaço reservado pela linha font-family que você obteve do
Google Fonts. (font-family significa apenas a(s) fonte(s) que você
deseja usar para o seu texto.) Esta regra primeiro define uma fonte
base global e o tamanho da fonte para a página inteira (já que
<html> é o elemento pai de toda a página, e todos os elementos
dentro dele herdam o mesmo font-size e font-family):
html {
font-size: 10px; /* px significa "pixels": o tamanho da
fonte base é agora de 10 pixels */
font-family: "Open Sans", sans-serif; /* este deve ser o
nome da fonte que você obteve no Google Fonts */
}
Nota: Qualquer coisa em um documento CSS entre /* e */ é um
comentário CSS, que o navegador ignora quando renderiza o código.
Este é um lugar para você escrever notas úteis sobre o que você está
fazendo.
20. Agora definiremos tamanhos de fonte para elementos que
contêm texto dentro do corpo HTML (<h1>, <li> e <p>). Também
centralizaremos o texto do nosso cabeçalho e definiremos a altura
da linha e o espaçamento das letras no conteúdo do corpo para
torná-lo um pouco mais legível:
h1 {
font-size: 60px;
text-align: center;
}

p,
li {
font-size: 16px;
line-height: 2;
letter-spacing: 1px;
}

Você pode ajustar esses valores de px para o que você desejar, para
deixar seu design com a aparência que quiser, mas no geral seu design
deve parecer com isso:

Caixas, caixas, é tudo sobre caixas

Uma coisa que você notará sobre escrever CSS é que muito disso é sobre
caixas — indicar seu tamanho, cor, posição, etc. Muitos dos elementos
HTML da sua página podem ser pensados como caixas umas em cima das
outras.

Como esperado, o layout CSS é baseado principalmente no modelo de

caixas. Cada um dos blocks que ocupam espaço na sua página tem
propriedades como essas:

 padding, o espaço ao redor do conteúdo (ex.: ao redor do texto de

um parágrafo).
 border, a linha sólida do lado de fora do padding.
  margin, o espaço externo a um elemento.

Nessa seção nós também vamos usar:

 width (largura de um elemento).

 background-color, a cor atrás do conteúdo de um elemento e do
padding.
 color, a cor do conteúdo de um elemento (geralmente texto).
 text-shadow: cria uma sombra no texto dentro de um elemento.
 display: define a maneira de dispor um elemento (não se preocupe
com isso ainda).

Então, vamos começar e adicionar mais CSS à nossa página! Continue

adicionando essas novas regras à parte inferior da página e não tenha
medo de experimentar alterações nos valores para ver o que aparece.

Mudando a cor da página

html {
background-color: #00539f;
}

Essa regra define uma cor de fundo para toda a página. Mude a cor acima
para a cor que você escolheu ao planejar seu site.

Separando o corpo
body {
width: 600px;
margin: 0 auto;
background-color: #ff9500;
padding: 0 20px 20px 20px;
border: 5px solid black;
}

Agora para o elemento <body>. Há algumas declarações aqui, então

vamos passar por elas uma a uma:

 width: 600px; — Isso força o corpo a ter 600 pixels de largura.

 margin: 0 auto; — Quando você define dois valores em uma
propriedade como margin ou padding, o primeiro valor afeta a
parte superior do elemento e a parte inferior (tornando-os 0 nesse
caso), e no segundo valor os lados esquerdo e direito (aqui, auto é
um valor especial que divide o espaço horizontal uniformemente
entre esquerda e direita). Você também pode utilizar um, três ou
quatro valores, como documentado aqui.
 background-color: #FF9500; — como antes, isso define a cor de
fundo do elemento. Usamos um tipo de laranja avermelhado no
corpo, para opor ao azul escuro no elemento <html>, mas fique à
vontade para ir em frente e experimentar.
 padding: 0 20px 20px 20px; — temos quatro valores definidos no
padding, para criar um pouco de espaço em torno do nosso
conteúdo. Dessa vez, estamos definindo sem padding na parte
superior do corpo, e 20 pixels no lado esquerdo, na parte inferior e
no lado direito. Os valores definem a parte superior, o lado direito, a
parte inferior e o lado esquerdo, nessa ordem. Como com a margin,
você também pode usar um, dois, ou três valores, conforme
documentado na sintaxe do padding.
 border: 5px solid black; — isso simplesmente define uma borda
preta sólida de 5 pixels de largura em todos os lados do corpo.

Posicionando e estilizando o título da nossa página principal

h1 {
margin: 0;
padding: 20px 0;
color: #00539f;
 text-shadow: 3px 3px 1px black;
}

Você deve ter notado que há um espaço horrível no topo do corpo. Isso
acontece porque os browsers aplicam algumas estilizações padrão ao
<h1> (entre outros), mesmo quando você não aplicou nenhum CSS! Isso
pode soar como uma má ideia, mas queremos ter uma legibilidade básica,
mesmo em uma página sem estilos. Para nos livrarmos desse espaço,
sobrescrevemos o estilo padrão, definindo margin: 0;.

Em seguida, definimos o padding das partes superior e inferior do

cabeçalho para 20 pixels e fizemos o texto do cabeçalho da mesma cor
que a cor de fundo do HTML.

Uma propriedade bastante interessante que usaremos aqui é o text-

shadow, que aplica uma sombra ao conteúdo de texto do elemento. Seus
quatro valores são os seguintes:

 O primeiro valor em pixel define o deslocamento horizontal da

sombra do texto — até onde ele se move: um valor negativo deve
movê-la para a esquerda.
 O segundo valor em pixel define o deslocamento vertical da
sombra do texto — o quanto ela se move para baixo, neste
exemplo; um valor negativo deve movê-la para cima.
 O terceiro valor em pixel define o raio de desfoque da sombra —
um valor maior significará uma sombra mais borrada.
 O quarto valor define a cor base da sombra.

De novo, tente experimentar com diferentes valores para ver o que você
pode criar!

Centralizando a imagem
img {
display: block;
margin: 0 auto;
}
Finalmente, centralizaremos a imagem para melhorar a aparência. Nós
poderiamos usar novamente o truque margin: 0 auto que aprendemos
anteriormente para o corpo, mas também precisamos fazer outra coisa. O
elemento <body> é em nível de bloco, o que significa que ocupa espaço
na página e pode ter margens e outros valores de espaçamento aplicados
a ele. Imagens, por outro lado, são elementos em linha, o que significa
que não podem ter margens. Então, para aplicar margens a uma imagem,
temos que dar o comportamento de nível de bloco a imagem usando
display: block;.

Nota: As instruções acima assumem que você está usando uma imagem
menor que a largura definida no corpo (600 pixels). Se sua imagem for
maior, ela irá transbordar o corpo e vazar para o restante da página. Para
corrigir isso, você pode 1) reduzir a largura da imagem usando um editor
gráfico (em inglês) ou 2) dimensionar a imagem usando CSS definindo a
propriedade width no elemento <img> com um valor menor (por exemplo,
400 px;).

Nota: Não se preocupe se você ainda não entender display: block; ou

a distinção entre em nível de bloco / em linha. Você entenderá ao estudar
CSS com mais profundidade. Você pode descobrir mais sobre os
diferentes valores de exibição disponíveis em nossa página de referência
sobre display.

Seletores de atributos

Este grupo de seletores oferece diferentes maneiras de selecionar

elementos com base na presença de um determinado atributo em um
elemento:

a[title] {
}

Ou até mesmo faça uma seleção com base na presença de um atributo

com um valor específico:

a[href="https://example.com"]
{
}
Pseudo classes e pseudo-elementos

Este grupo de seletores inclui pseudo classes, que definem o estilo de

certos estados de um elemento. A :hoverpseudoclasse, por exemplo,
seleciona um elemento apenas quando ele está sendo passado pelo
ponteiro do mouse:

a:hover {
}

Seletores de tipo, classe e ID

Este grupo inclui seletores que têm como alvo um elemento HTML, como
um <h1>.

h1 {
}

Também inclui seletores que direcionam uma classe:

O seletor de classe começa com um caractere de ponto (.). Ele

selecionará tudo no documento com essa classe aplicada a ele.

.box {
}

ou um ID:

Um seletor de ID começa com um # em vez de um caractere de ponto,

mas é usado da mesma forma que um seletor de classe. No entanto, um
ID pode ser usado apenas uma vez por página e os elementos podem ter
apenas um único valor id aplicado a eles.

#unique {
}
Combinadores

O grupo final de seletores combina outros seletores para direcionar os

elementos em nossos documentos. O seguinte, por exemplo, seleciona
parágrafos que são filhos diretos de <article>elementos usando o
combinador filho ( >):

article > p {
}

<input>

O elemento HTML <input> é usado para criar controles interativos para

formulários baseados na web para receber dados do usuário. A semântica
de um <input> varia consideravelmente dependendo do valor de seu
atributo type.

Atributos

Este elemento inclui os atributos globais.

type
O tipo de controle a ser exibido. O tipo padrão é text, se este atributo não
for especificado. Os valores possíveis são:

button: Um botão sem comportamento padrão.

checkbox: Uma caixa de marcação. Você deve usar o atributo value para
definir o valor enviado por este item. Use o atributo checked para indicar
se o item está selecionado por padrão. Você também pode usar o atributo
indeterminate para indicar que a caixa de marcação está em um estado
indeterminado (na maioria das plataformas, isso desenha uma linha
horizontal cortando a caixa).

color: Um controle para especificar cores. A interface de um seletor de

cores não tem nenhuma funcionalidade obrigatória a não ser aceitar cores
simples em texto (mais informações — em inglês).

date: Um controle para inserir uma data (ano, mês e dia, sem horário).
datetime: Um controle para inserir data e horário (hora, minuto, segundo
e fração de segundo) baseado no fuso horário UTC.

datetime-local: Um controle para inserir data e horário, sem fuso

horário.

email: Um campo para editar um endereço de e-mail. O valor do campo é

validado para estar vazio ou ter um único endereço de e-mail válido antes
de ser enviado. As pseudoclasses CSS :valid e :invalid são aplicadas
apropriadamente.

file: Um controle que permite ao usuário selecionar um arquivo. Use o

atributoaccept para definir os tipos de arquivo que o controle pode
selecionar.

hidden: Um controle que não é exibido mas cujo valor é enviado ao

servidor.

image: Um botão gráfico para enviar o formulário. Você deve usar o

atributo src para definir a fonte da imagem e o atributo alt para definir
um texto alternativo. Você pode usar os atributos height e width para
definir o tamanho da imagem em pixels.

month: Um controle para inserir mês e ano, sem fuso horário.

number: Um controle para inserir um número de ponto flutuante.

password: Um campo de texto com uma só linha cujo valor é obscurecido.

Use o atributo maxlength para especificar o comprimento máximo do
valor que pode ser inserido.

radio: Um botão de escolha. Você deve usar o atributo value para definir
o valor a ser enviado por este item. Use o atributo checked para indicar
se este item deve estar selecionado por padrão. Botões de escolha que
têm o mesmo valor para o atributo name estão no mesmo "grupo de
botões de escolha"; apenas um botão de escolha no grupo pode estar
selecionado de cada vez..

range: Um controle para inserir um número cujo valor exato não é

importante. Este tipo de controle usa os seguintes valores padrão se os
atributos correspondentes não forem especificados:

min: 0

max: 100
value: min + (max-min)/2, ou min se max for menos que min

step: 1

reset: Um botão que faz o conteúdo do formulário voltar a ter seus

valores padrão.

search: Um campo de texto com uma só linha para digitar termos de

busca; quebras de linha são automaticamente removidas do valor
entrado.

submit: Um botão que envia o formulário.

tel: Um controle para inserir um número de telefone; quebras de linha

são automaticamente removidas do valor entrado, mas nenhuma outra
sintaxe é imposta. Você pode usar atributos como pattern e maxlength
para restringir os valores inseridos no controle. As pseudoclasses CSS
:valid e :invalid são aplicadas apropriadamente.

text: Um campo de texto com uma só linha; quebras de linha são

automaticamente removidas do valor entrado.

time: Um controle para inserir um horário sem fuso horário.

url: Um campo para editar uma URL. O valor inserido é validado para ser
vazio ou uma URL absoluta válida antes de ser enviado. Quebras de linha
e espaços em branco antes e após o valor inserido são automaticamente
removidos. Você pode usar atributos como pattern e maxlength para
restringir os valores inseridos no controle. As pseudoclasses CSS :valid e
:invalid são aplicadas apropriadamente.

week: Um controle para inserir uma data consistindo de ano da semana e

número da semana sem fuso horário.