Introdução ao HTML: Estrutura e Elementos
Traduzido por
ScribdTranslationsIntrodução ao HTML: Estrutura e Elementos
Traduzido por
ScribdTranslationsHTML é a linguagem de marcação padrão para criar páginas da Web.
O que é HTML?
HTML significa Linguagem de Marcação de Hipertexto
HTML é a linguagem de marcação padrão para criar páginas da Web
HTML descreve a estrutura de uma página da Web
HTML consiste em uma série de elementos
HTML elements tell the browser how to display the content
Os elementos HTML rotulam peças de conteúdo, como 'isto é um cabeçalho'
"this is a paragraph", "this is a link", etc.
Um Documento HTML Simples
Exemplo
<!DOCTYPEhtml>
<html>
<cabeça>
<ttle>Page Title</ttle>
</head>
<body>
<h1>Meu Primeiro Título</h1>
<p>Meu primeiro parágrafo.</p>
</corpo>
</html>
Tente você mesmo »
Exemplo Explicado
O<!DOCTYPE html>declaração define que este documento é
um documento HTML5
O elemento <html> é o elemento raiz de uma página HTML
O elemento <head> contém informações meta sobre o HTML
página
O elemento <ttle> especifica o título da página HTML (que é
mostrado na barra de título do navegador ou na aba da página
O elemento <body> define o corpo do documento, e é um
container para todo o conteúdo visível, como títulos,
parágrafos, imagens, hiperlinks, tabelas, listas, etc.
O elemento<h1>define um grande cabeçalho
O elemento <p> define um parágrafo
O que é um Elemento HTML?
Um elemento HTML é definido por uma tag de início, algum conteúdo e uma tag de fim.
tag:
<tagname>Content goes here...</tagname>
O HTMLelement é tudo desde a tag de início até a tag de fim:
<h1>Meu Primeiro Cabeçalho</h1>
<p>Meu primeiro parágrafo.</p>
Início da tag Conteúdo do elemento Tag de fechamento
<h1> </h1> Meu Primeiro Título </h1>
<p> Meu primeiro parágrafo. </p>
<br> nenhum nenhum
Nota: Alguns elementos HTML não têm conteúdo (como o elemento <br>).
Esses elementos são chamados de elementos vazios. Elementos vazios não
tenha uma tag de fechamento!
Navegadores Web
O propósito de um navegador web (Chrome, Edge, Firefox, Safari) é ler
documentos HTML e exibí-los corretamente.
Um navegador não exibe as tags HTML, mas as usa para determinar
como exibir o documento:
Estrutura da Página HTML
Abaixo está uma visualização da estrutura de uma página HTML:
<html>
<head>
<ttle>Pagettle</ttle>
</head>
<body>
<h1>Este é um título</h1>
<p>Este é um parágrafo.</p>
<p>Este é outro parágrafo.</p>
</body>
</html>
Nota: O conteúdo dentro da seção <body> (a área branca acima) irá
ser exibido em um navegador. O conteúdo dentro do elemento <ttle> vai
ser mostrado na barra de título do navegador ou na guia da página.
História do HTML
Desde os primórdios da World Wide Web, houve muitos
versões do HTML:
Ano Versão
1989 Tim Berners-Lee inventou a www
1991 Tim Berners-Lee inventou o HTML
1993 Dave Ragget redigiu HTML+
1995 O Grupo de Trabalho HTML definiu HTML 2.0
1997 Recomendação W3C: HTML 3.2
1999 Recomendação W3C: HTML 4.01
2000 Recomendação W3C: XHTML 1.0
2008 WHATWG HTML5 Primeiro Rascunho Público
2012 Padrão Vivo HTML5 do WHATWG
2014 Recomendação W3Ctem: HTML5
2016 Recomendação de Candidato W3C: HTML 5.1
2017 Recomendação W3Ctem: HTML5.1 2ª Ediçãotem
2017 Recomendação W3Ctem: HTML5.2
Este tutorial segue o padrão HTML5 mais recente.
Editores de HTML
❮ AnteriorPróximo❯
Um editor de texto simples é tudo que você precisa para aprender HTML.
Aprenda HTML Usando o Notepad ou TextEdit
Páginas da web podem ser criadas e modificadas usando HTML profissional
editores.
No entanto, para aprender HTML, recomendamos um editor de texto simples como
Bloco de Notas (PC) ou TextEdit (Mac).
Acreditamos que usar um editor de texto simples é uma boa maneira de aprender
HTML.
Siga os passos abaixo para criar sua primeira página da web com o Bloco de Notas ou
TextEdit.
Step 1: Open Notepad (PC)
Windows 8 ou posterior:
Abra a Tela Inicial (o símbolo da janela no canto inferior esquerdo do seu
tela). TipoBloco de Notas.
Windows 7 ou anterior:
Iniciar > Programas > Acessórios > Bloco de Notas
Passo 1: Abra o TextEdit (Mac)
OpenFinder > Aplicativos > TextEdit
Também mude algumas preferências para que o aplicativo salve arquivos
corretamente. Em Preferências > Formato > escolha "Texto Simples"
Então, em 'Abrir e Salvar', marque a caixa que diz 'Exibir HTML'
arquivos como código HTML em vez de texto formatado.
Então abra um novo documento para colocar o código.
Passo 2: Escreva algum HTML
Escreva ou copie o seguinte código HTML no Bloco de Notas:
<!DOCTYPE html>
<html>
<corpo>
<h1>Meu Primeiro Cabeçalho</h1>
<p>Meu primeiro parágrafo.</p>
</body>
</html>
Etapa 3: Salvar a Página HTML
Salve o arquivo no seu computador. Selecione Arquivo > Salvar como no Bloco de Notas
menu.
Nomeie o arquivo "[Link]" e defina a codificação para UTF-8 (que é o
codificação preferida para arquivos HTML).
Dica: Você pode usar .htm ou .html como extensão de arquivo. Não há
diferença, fica a seu critério.
Passo 4: Visualize a Página HTML em Seu Navegador
Abra o arquivo HTML salvo no seu navegador favorito (clique duas vezes no)
arquivo, ou clique com o botão direito - e escolha "Abrir com".
The result will look much like this:
Editor Online W3Schools - "Experimente Você Mesmo"
Com nosso editor online gratuito, você pode editar o código HTML e visualizar o
resultado no seu navegador.
É a ferramenta perfeita quando você quer testar código rapidamente. Também tem cor
programação e a capacidade de salvar e compartilhar código com outros:
Exemplo
<!DOCTYPEhtml>
<html>
<cabeça>
<ttle>Page Title</ttle>
</head>
<body>
<h1>Este é um Cabeçalho</h1>
<p>Este é um parágrafo.</p>
</body>
</html>
Exemplos Básicos de HTML
❮ AnteriorPróximo❯
Neste capítulo, mostraremos alguns exemplos básicos de HTML.
Não se preocupe se usarmos tags que você ainda não aprendeu.
Documentos HTML
Todos os documentos HTML devem começar com uma declaração do tipo de documento:<!
DOCTYPE html>.
O documento HTML em si começa com <html> e termina com </html>.
A parte visível do documento HTML é
entre<body>e</body>.
Exemplo
<!DOCTYPEhtml>
<html>
<body>
<h1>Meu Primeiro Cabeçalho</h1>
<p>Meu primeiro parágrafo.</p>
</body>
</html>
Experimente você mesmo »
A Declaração <!DOCTYPE>
A declaração <!DOCTYPE> representa o tipo do documento e ajuda
navegadores para exibir páginas da web corretamente.
Deve aparecer apenas uma vez, no topo da página (antes de qualquer HTML
tags).
A declaração <!DOCTYPE> não é sensível a maiúsculas.
A declaração <!DOCTYPE> para HTML5 é:
<!DOCTYPEhtml>
Cabeçalhos HTML
Os cabeçalhos HTML são definidos com as tags <h1> a <h6>.
<h1>defines the most important heading.<h6>defines the least
título importante:
Exemplo
<h1>Este é o cabeçalho 1</h1>
<h2>Este é o cabeçalho 2</h2>
<h3>Este é o cabeçalho 3</h3>
Experimente você mesmo »
Parágrafos HTML
Os parágrafos HTML são definidos com a <p> tag:
Exemplo
<p>Este é um parágrafo.</p>
<p>Este é outro parágrafo.</p>
Experimente você mesmo »
Links HTML
Os links HTML são definidos com a <a> tag:
Exemplo
<ahref="htps://[Link]">Este é um link</a>
Experimente você mesmo »
O destino do link é especificado no atributo href.
Os atributos são usados para fornecer informações adicionais sobre HTML
elementos.
Você aprenderá mais sobre atributos em um capítulo posterior.
Imagens HTML
Imagens HTML são definidas com a tag <img>.
The source file (src), alternatve text (alt),width, andheightare
fornecido como atributos:
Exemplo
<img src="[Link]" alt="[Link]" width="104" height="1
42">
Tente você mesmo »
Como visualizar o código-fonte HTML?
Você já viu uma página da Web e se perguntou "Ei! Como eles fizeram isso?"
isso?
Ver Código-Fonte HTML:
Clique com o botão direito em uma página HTML e selecione 'Ver Código-Fonte da Página' (no Chrome)
ou "Ver Fonte" (no Edge), ou similar em outros navegadores. Isso abrirá um
janela contendo o código fonte HTML da página.
Inspecionar um Elemento HTML:
Clique com o botão direito do mouse em um elemento (ou em uma área em branco) e escolha "Inspecionar" ou
"Inspecionar Elemento" para ver de que elementos são compostos (você verá
tanto o HTML quanto o CSS). Você também pode editar o HTML ou CSS na-
Role na seção de Elementos ou Estilos que se abre.
HTML Elements
❮ AnteriorPróximo❯
Um elemento HTML é definido por uma tag de início, algum conteúdo e uma tag de fim
etiqueta.
Elementos HTML
O HTMLelement é tudo desde a tag de início até a tag de fim:
<tagname>Content goes here...</tagname>
Exemplos de alguns elementos HTML:
<h1>Meu Primeiro Título</h1>
<p>Meu primeiro parágrafo.</p>
Início da tag Conteúdo do elemento Tag de encerramento
<h1> Meu Primeiro Título </h1>
<p> </p> Meu primeiro parágrafo. </p>
<br> nenhum nenhum
Nota: Alguns elementos HTML não têm conteúdo (como o elemento <br>).
Esses elementos são chamados de elementos vazios. Elementos vazios não
tenha uma tag de fim!
Elementos HTML Aninhados
Os elementos HTML podem ser aninhados (isso significa que os elementos podem conter
outros elementos).
Todos os documentos HTML consistem em elementos HTML aninhados.
O seguinte exemplo contém quatro elementos HTML
(<html>,<body>,<h1>and<p>):
Exemplo
<!DOCTYPEhtml>
<html>
<body>
<h1>Meu Primeiro Título</h1>
<p>Meu primeiro parágrafo.</p>
</corpo>
</html>
Tente você mesmo »
Exemplo Explicado
O elemento <html> é o elemento raiz e define todo o HTML
documento.
Tem uma tag de início <html> e uma tag de fim </html>.
Então, dentro do elemento <html> há um elemento <body>:
<corpo>
<h1>Meu Primeiro Título</h1>
<p>Meu primeiro parágrafo.</p>
</corpo>
O elemento <body> define o corpo do documento.
Ela tem uma tag de início <body> e uma tag de fim </body>.
Então, dentro do elemento <body> existem outros dois
elements:<h1>and<p>:
<h1>Meu Primeiro Cabeçalho</h1>
<p>Meu primeiro parágrafo.</p>
O elemento <h1> define um cabeçalho.
Tem uma tag de início <h1> e uma tag de fim </h1>:
<h1>Meu Primeiro Título</h1>
O elemento <p> define um parágrafo.
Tem uma tag de início<p>e uma tag de fim</p>:
<p>Meu primeiro parágrafo.</p>
Nunca pule a tag de fechamento
Alguns elementos HTML serão exibidos corretamente, mesmo que você esqueça o final
tag:
Exemplo
<html>
<body>
<p>Este é um parágrafo</p>
<p>Este é um parágrafo
</body>
</html>
Experimente você mesmo »
No entanto, nunca confie nisso! Resultados inesperados e erros podem ocorrer
se você esquecer a tag de fechamento!
Elementos HTML Vazios
Elementos HTML sem conteúdo são chamados de elementos vazios.
A<br>tag define uma quebra de linha e é um elemento vazio sem um
closing tag:
Exemplo
<p>Este é um<br>parágrafo com uma quebra de linha.</p>
Experimente você mesmo »
HTML não é sensível a maiúsculas e minúsculas
As tags HTML não são sensíveis a maiúsculas: <P> significa o mesmo que <p>.
O padrão HTML não requer tags em minúsculas, mas
W3C recomenda letras minúsculas em HTML, e exige letras minúsculas para
tipos de documento mais restritivos como XHTML.
No W3Schools, sempre usamos nomes de tags em letras minúsculas.
Referência de Tags HTML
A referência de tags do W3Schools contém informações adicionais sobre estes
tags e seus atributos.
Etiqueta Descripton
<html> Define a raiz de um documento HTML
<body> Define o corpo do documento
<h1> to <h6> Define cabeçalhos HTML
Para uma lista completa de todas as tags HTML disponíveis, visite nossoEtiqueta HTML
Referência.
Atributos HTML
❮ AnteriorPróximo❯
Os atributos HTML fornecem informações adicionais sobre os elementos HTML.
Atributos HTML
Todos os elementos HTML podem ter atributos
Atributos fornecem informações adicionais sobre elementos
Os atributos são sempre especificados na tag de início.
Os atributos geralmente vêm em pares nome/valor, como: nome="valor"
O atributo href
A tag <a> define um hiperlink. O atributo href especifica a URL de
a página para a qual o link leva:
Example
<a href="[Link] o W3Schools</a>
Experimente você mesmo »
Você aprenderá mais sobre links em nossoCapítulo de Links HTML.
O atributo src
A tag <img> é usada para incorporar uma imagem em uma página HTML.
O atributo src especifica o caminho para a imagem a ser exibida:
Example
<img src="img_girl.jpg">
Experimente você mesmo »
Existem duas maneiras de especificar a URL no atributo src:
1. URL absoluta - Links para uma imagem externa que está hospedada em outro
site da web. Exemplo:
src="htps://[Link]/images/img_girl.jpg".
Notas: Imagens externas podem estar sob copyright. Se você não receber
permissão para usá-lo, você pode estar violando as leis de direitos autorais. Em
além disso, você não pode controlar imagens externas; elas podem de repente ser
removido ou alterado.
2. URL relativa - Links para uma imagem que está hospedada dentro do site.
Aqui, a URL não inclui o nome do domínio. Se a URL começar
sem uma barra, será relativo à página atual. Exemplo:
src="img_girl.jpg". Se a URL começar com uma barra, será relativa a
o domínio. Exemplo: src="/imagens/img_girl.jpg".
Dica: É quase sempre melhor usar URLs relativas. Elas não quebrarão se
você muda de domínio.
Os Atributos de largura e altura
A tag <img> também deve conter os atributos width e height.
que especifica a largura e a altura da imagem (em pixels):
Exemplo
<imgsrc="img_girl.jpg"width="500"height="600">
Experimente você mesmo »
O atributo alt
O atributo requiredaltatribute para a tag <img> especifica um texto alternativo
para uma imagem, se a imagem por algum motivo não puder ser exibida. Isso
pode ser devido a uma conexão lenta, ou a um erro no atributo src, ou se o
usuário utiliza um leitor de tela.
Exemplo
<imgsrc="img_girl.jpg"alt="Girl with a jacket">
Tente você mesmo »
Exemplo
Veja o que acontece se tentarmos exibir uma imagem que não existe:
<imgsrc="img_typo.jpg"alt="Girl with a jacket">
Experimente você mesmo »
Você aprenderá mais sobre imagens em nossoHTML Images chapter.
O Atributo de Estilo
Atributo de estilo é usado para adicionar estilos a um elemento, como cor,
fonte, tamanho e mais.
Exemplo
<p style="color:red;">Este é um parágrafo vermelho.</p>
Tente você mesmo »
Você aprenderá mais sobre estilos em nossoCapítulo de Estilos HTML.
O atributo lang
Você deve sempre incluir o atributo lang dentro da tag <html>, para
declare o idioma da página da Web. Isso serve para ajudar na pesquisa
motores e navegadores.
O seguinte exemplo especifica o inglês como o idioma:
<!DOCTYPE html>
<htmllang="pt">
<body>
...
</body>
</html>
Os códigos de país também podem ser adicionados ao código de língua em
oatributolinguístico. Assim, os dois primeiros caracteres definem a língua de
a página HTML, e os últimos dois caracteres definem o país.
O seguinte exemplo especifica o inglês como o idioma e os Estados Unidos
Estados como o país:
<!DOCTYPE html>
<htmllang="pt-BR">
<body>
...
</body>
</html>
Você pode ver todos os códigos de idiomas em nossoCódigo de Linguagem HTML
Referência.
Atributo Thettle
O atributo de título define algumas informações extras sobre um elemento.
O valor do atributo atitle será exibido como uma dica quando você
passe o mouse sobre o elemento:
Example
Este é um parágrafo.
Experimente você mesmo »
Sugerimos: Use sempre atributos em letras minúsculas
O padrão HTML não exige nomes de atributos em minúsculas.
O atributo thettle (e todos os outros atributos) pode ser escrito com
maiúsculas ou minúsculas como likettleouTÍTULO.
No entanto, o W3C recomenda atributos em letras minúsculas no HTML,
e exige atributos em minúsculas para tipos de documentos mais rigorosos como
XHTML.
No W3Schools, nós sempre usamos nomes de atributos em letras minúsculas.
Sugerimos: Sempre Quotar Valores de Atributo
O padrão HTML não exige aspas em torno dos valores dos atributos.
No entanto, o W3C recomenda aspas em HTML e exige aspas para
tipos de documento mais restritos como XHTML.
Bom:
<ahref="htps://[Link]/html/">Visite nosso HTML
tutorial</a>
Ruim:
<ahref=htps://[Link]/html/>Visite nosso HTML
tutorial</a>
Às vezes você tem que usar aspas. Este exemplo não vai exibir o
atributo de título corretamente, porque contém um espaço:
Exemplo
<pttle=AboutW3Schools>
Experimente você mesmo »
No W3Schools, sempre usamos aspas em torno dos valores de atributos.
Aspas Simples ou Duplas?
As aspas duplas em torno dos valores de atributos são as mais comuns em HTML,
mas aspas simples também podem ser usadas.
Em algumas situações, quando o valor do atributo em si contém duplo
citações, é necessário usar aspas simples:
<pttle='John "ShotGun" Nelson'>
Ou vice-versa:
<pttle="John 'ShotGun' Nelson">
Experimente você mesmo »
Resumo do Capítulo
Todos os elementos HTML podem ter atributos
O atributo href de <a> especifica a URL da página que o link
vai para
O atributo src de <img> especifica o caminho para a imagem a ser
exibido
Os atributos width e height de <img> fornecem informações de tamanho
for images
O atributo alt de <img> fornece um texto alternativo para uma imagem
O atributo style é usado para adicionar estilos a um elemento, como
cor, fonte, tamanho e mais
O atributo lang do <html> define a língua do
Página da web
O atributo Thettleatribute define algumas informações extras sobre um
elemento
Cabeçalhos HTML
❮ AnteriorPróximo❯
Os cabeçalhos HTML são títulos ou subtítulos que você deseja exibir em um
página da web.
Exemplo
Cabeçalho 1
Cabeçalho 2
Cabeçalho 3
Cabeçalho 4
Cabeçalho 5
Cabeçalho 6
Tente você mesmo »
Cabeçalhos HTML
Os cabeçalhos HTML são definidos com as tags <h1> a <h6>.
<h1>define o cabeçalho mais importante.<h6>define o menos importante
título importante.
Example
<h1>Título 1</h1>
<h2>Cabeçalho 2</h2>
<h3>Cabeçalho 3</h3>
<h4>Cabeçalho 4</h4>
<h5>Cabeçalho 5</h5>
<h6>Cabeçalho 6</h6>
Experimente você mesmo »
Nota: Os navegadores adicionam automaticamente um espaço em branco (uma margem) antes
e após um título.
Os Títulos São Importantes
Os motores de busca usam os cabeçalhos para indexar a estrutura e o conteúdo de
suas páginas da web.
Os usuários costumam percorrer uma página por seus cabeçalhos. É importante usar cabeçalhos.
para mostrar a estrutura do documento.
<h1>os títulos devem ser usados para os títulos principais, seguidos
por<h2>títulos, depois os menos importantes<h3>, e assim por diante.
Nota: Use títulos HTML apenas para títulos. Não use títulos para
faça textoGRANDEouemnegrito.
Títulos Maiores
Cada cabeçalho HTML tem um tamanho padrão. No entanto, você pode especificar o
tamanho para qualquer cabeçalho com o atributo de estilo, usando o CSSfont-
sizeproperty:
Exemplo
<h1 style="font-size:60px;">Cabeçalho 1</h1>
Experimente você mesmo »
Teste-se com exercícios
Referência de Tags HTML
A referência de tags do W3Schools contém informações adicionais sobre estes.
tags and their atributes.
Etiqueta Descripton
<html> Define a raiz de um documento HTML
<body> Define o corpo do documento
<h1> to <h6> Define cabeçalhos HTML
Para uma lista completa de todas as tags HTML disponíveis, visite nossoTag HTML
Referência.
Parágrafos HTML
❮ AnteriorPróximo❯
Um parágrafo sempre começa em uma nova linha e geralmente é um bloco de texto.
Parágrafos HTML
O elemento HTML <p> define um parágrafo.
Um parágrafo sempre começa em uma nova linha, e os navegadores automaticamente
adicione um espaço em branco (uma margem) antes e depois de um parágrafo.
Exemplo
<p>Este é um parágrafo.</p>
<p>Este é outro parágrafo.</p>
Tente você mesmo »
Exibição HTML
Você não pode ter certeza de como o HTML será exibido.
Tela grande ou pequena, e janelas redimensionadas criarão diferentes
resultados.
Com HTML, você não pode mudar a exibição adicionando espaços extras ou
linhas extras no seu código HTML.
O navegador removerá automaticamente quaisquer espaços e linhas extras quando
a página é exibida:
Exemplo
<p>
Este parágrafo
contém muitas linhas
no código-fonte,
mas o navegador
ignora isso.
</p>
<p>
Este parágrafo
contém muitos espaços
na fonte código
mas o navegador
ignora isso.
</p>
Experimente você mesmo »
Regras Horizontais HTML
A tag <hr> define uma quebra temática em uma página HTML e é mais
geralmente exibido como uma linha horizontal.
O elemento <hr> é usado para separar conteúdo (ou definir uma mudança) em um
HTML page:
Exemplo
<h1>Este é o cabeçalho 1</h1>
<p>Este é um texto.</p>
<hr>
<h2>Este é o cabeçalho 2</h2>
<p>Este é um outro texto.</p>
<hr>
Experimente você mesmo »
A tag <hr> é uma tag vazia, o que significa que não possui uma tag de fechamento.
Quebras de Linha HTML
O elemento HTML<br>define uma quebra de linha.
Use<br>se você quiser uma quebra de linha (um nova linha) sem começar um novo
paragraph:
Exemplo
<p>Este é<br>um parágrafo<br>com quebras de linha.</p>
Experimente você mesmo »
A<br>tag é uma tag vazia, o que significa que não possui uma tag de fechamento.
O Problema do Poema
Este poema será exibido em uma única linha:
Exemplo
<p>
Minha Bonnie está sobre o oceano.
Minha Bonnie está além do mar.
Minha Bonnie está além do oceano.
Oh, traga minha Bonnie de volta para mim.
</p>
Experimente você mesmo »
Solução - O Elemento HTML <pre>
O elemento HTML <pre> define texto pré-formatado.
O texto dentro de um elemento <pre> é exibido em uma fonte de largura fixa
(geralmente Courier), e preserva tanto os espaços quanto as quebras de linha:
Exemplo
<pre>
Minha Bonnie está além do oceano.
Minha Bonnie está além do mar.
Minha Bonnie está além do oceano.
Oh, traga minha Bonnie de volta para mim.
</pre>
Estilos HTML
❮ AnteriorPróximo❯
O atributo HTMLstyle é usado para adicionar estilos a um elemento, como
cor, fonte, tamanho e mais.
Exemplo
Eu sou Vermelho
Eu sou Azul
Eu sou grande
Experimente você mesmo »
O Atributo de Estilo HTML
Definir o estilo de um elemento HTML pode ser feito com
oatributodestilo.
O atributo style do HTML tem a seguinte sintaxe:
<tagnamestyle="property:value;">
A propriedade é uma propriedade CSS. O valor é um valor CSS.
Você aprenderá mais sobre CSS mais tarde neste tutorial.
Cor de Fundo
A propriedade background-color do CSS define a cor de fundo para um
Elemento HTML.
Exemplo
Defina a cor de fundo de uma página como azul bebê:
<bodystyle="background-color:powderblue;">
<h1>Este é um cabeçalho</h1>
<p>Este é um parágrafo.</p>
</corpo>
Experimente você mesmo »
Exemplo
Defina a cor de fundo para dois elementos diferentes:
<corpo>
<h1 style="background-color:powderblue;">Isto é um cabeçalho</h1>
<p style="background-color:tomato;">Este é um parágrafo.</p>
</body>
Experimente você mesmo »
Cor do Texto
A propriedade CSS color define a cor do texto para um elemento HTML:
Exemplo
<h1 style="color:blue;">Este é um cabeçalho</h1>
<p style="color:red;">Este é um parágrafo.</p>
Experimente Você Mesmo »
Fontes
A propriedade CSS font-family define a fonte a ser usada para um HTML
element:
Exemplo
<h1 style="font-family:verdana;">Este é um cabeçalho</h1>
<pstyle="font-family:courier;">This is a paragraph.</p>
Tente você mesmo »
Text Size
The CSSfont-sizeproperty defines the text size for an HTML element:
Exemplo
<h1 style="font-size:300%;">Este é um cabeçalho</h1>
<p style="font-size:160%;">Este é um parágrafo.</p>
Experimente você mesmo »
Alinhamento de Texto
A propriedade CSS text-align define o alinhamento horizontal do texto para um
HTML element:
Exemplo
<h1 style="text-align:center;">Título Centralizado</h1>
<p style="text-align:center;">Parágrafo centralizado.</p>
Resumo do Capítulo
Use o atributo de estilo para estilizar elementos HTML
Use a cor de fundo para a cor de fundo
Use cor para cores de texto
Use a fonte tipográfica para fontes de texto
Use tamanho de fonte para tamanhos de texto
Use o text-align para alinhamento de texto
Formatação de Texto em HTML
❮ Previous Next ❯
HTML contém vários elementos para definir texto com um especial
significado.
Exemplo
Este texto está em negrito
Este texto está em itálico
Isto ésubscritoesobrescrito
Tente você mesmo »
Elementos de Formatação HTML
Formatng elements were designed to display special types of text:
<b>- Texto em negrito
<strong>- Texto importante</strong>
<i>- Texto em itálico
<em>- Texto enfatizado
- Texto marcado
<small>- Texto menor
- Texto excluído
<ins>- Texto inserido
<sub>- Texto em subscrito
<sup>- Texto em sobrescrito
Elementos HTML <b> e <strong>
O elemento HTML<b>define texto em negrito, sem qualquer extra
importância.
Exemplo
<b>Este texto está em negrito</b>
Tente você mesmo »
O elemento <strong>define texto com forte importância.
o conteúdo interno é tipicamente exibido em negrito.
Exemplo
<strong>Este texto é importante!</strong>
Experimente você mesmo »
Elementos HTML <i> e <em>
O elemento HTML<i>define uma parte do texto em uma voz alternada ou
humor. O conteúdo interno geralmente é exibido em itálico.
Dica: A<i>tag é frequentemente usada para indicar um termo técnico, uma frase de
outra língua, um pensamento, um nome de navio, etc.
Exemplo
<i>Este texto está em itálico</i>
Experimente você mesmo »
O elemento HTML <em>define texto enfatizado. O conteúdo dentro é
geralmente exibido em itálico.
Dica: Um leitor de tela pronunciará as palavras em<em>com um
ênfase, usando stress verbal.
Exemplo
<em>Este texto está enfatizado</em>
Tente você mesmo »
Elemento HTML <small>
O elemento HTML<small>define um texto menor:
Exemplo
<small>Este é um texto menor.</small>
Experimente você mesmo »
Elemento <mark> HTML
O elemento HTML <mark> define texto que deve ser destacado ou
highlighted:
Exemplo
<p>Não se esqueça de comprar<mark>leite</mark>hoje.</p>
Tente você mesmo »
Elemento HTML <del>
O elemento HTML <del> define texto que foi excluído de um
documento. Os navegadores geralmente riscam um risco através do texto deletado:
Exemplo
<p>Minha cor favorita é<del>azul</del>vermelho.</p>
Experimente Você Mesmo »
Elemento HTML <ins>
O elemento HTML <ins> define um texto que foi inserido em um
documento. Os navegadores geralmente sublinham o texto inserido:
Exemplo
<p>Minha cor favorita é<del>azul</del> <ins>vermelho</ins>.</p>
Experimente você mesmo »
Elemento HTML <sub>
O elemento HTML<sub>define texto subscrito. O texto subscrito aparece
meio caractere abaixo da linha normal, e às vezes é renderizado em uma
fonte menor. Texto subscrito pode ser usado para fórmulas químicas, como H2O:
Exemplo
<p>Este é<sub>subscrito</sub>texto.</p>
Experimente você mesmo »
Elemento HTML <sup>
O elemento HTML<sup> define texto em sobrescrito. Texto em sobrescrito
aparece meio caráter acima da linha normal, e às vezes
renderizado em uma fonte menor. O texto sobrescrito pode ser usado para notas de rodapé,
como WWWUm:
Exemplo
<p>This is<sup>superscripted</sup>text.</p>
Experimente você mesmo »
Exercícios de HTML
Teste-se com Exercícios
Exercise:
Adicione uma importância extra à palavra "degradação" no parágrafo abaixo.
<p>
A missão do WWF é parar o degradação do nosso planeta
ambiente natural.
</p>
Enviar Resposta »
Comece o Exercício
Elementos de Formatação de Texto HTML
Etiqueta Descrição
<b> Define texto em negrito
<em> Define texto enfatizado
<i> Define uma parte do texto em uma voz ou humor alternativo
<small> </small>
Define texto menor
<strong> </strong>
Define texto importante
<sub> Define texto subscrito
<sup> Define texto sobrescrito
<ins> Define texto inserido
<del> Define texto excluído
<mark> Define texto marcado/destaque
Para uma lista completa de todas as tags HTML disponíveis, visite nossoTag HTML
Referência.
Elementos de Citação e Citação em HTML
❮ AnteriorPróximo❯
Neste capítulo, vamos passar por
o<blockquote>,<q>,<abbr>,<address>,<cite>, e<bdo>HTML
elementos.
Exemplo
Aqui está uma citação do site do WWF:
For nearly 60 years, WWF has been protectng the future of nature. The
A principal organização de conservação do mundo, o WWF atua em 100 países.
e é apoiado por mais de um milhão de membros nos Estados Unidos
Estados e cerca de cinco milhões globalmente.
Experimente Você Mesmo »
HTML <blockquote> para Citações
O elemento HTML <blockquote> define uma seção que é citada de
outra fonte.
Os navegadores geralmente recuam elementos <blockquote>.
Exemplo
<p>Aqui está uma citação do site do WWF:</p>
<blockquotecite="htp://[Link]/who/[Link]">
Por 50 anos, o WWF tem protegido o futuro da natureza.
A principal organização de conservação do mundo,
O WWF atua em 100 países e é apoiado por
1,2 milhões de membros nos Estados Unidos e
perto de 5 milhões globalmente.
</blockquote>
Experimente você mesmo »
HTML <q> para Citações Curtas
A tag HTML <q> define uma citação curta.
Os navegadores normalmente inserem aspas em torno da citação.
Exemplo
<p>WWF's goal is to:<q>Build a future where people live in harmony
com a natureza.
Experimente você mesmo »
HTML <abbr> para Abreviações
A tag HTML <abbr> define uma abreviação ou um acrônimo, como
"HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM".
Marcação de abreviações pode fornecer informações úteis para navegadores.
sistemas de tradução e motores de busca.
Dica: Use o atributo globalttle para mostrar a descrição para o
abreviação/acrônimo quando você passar o mouse sobre o elemento.
Exemplo
<p>A<abbr title="Organização Mundial da Saúde">OMS</abbr> foi
fundada em 1948.
Tente você mesmo »
HTML <address> para Informações de Contato
A tag <address> do HTML define as informações de contato para o
autor/proprietário de um documento ou artigo.
As informações de contato podem ser um endereço de e-mail, URL, físico
endereço, número de telefone, conta de mídia social, etc.
O texto no elemento <address> geralmente é exibido em itálico, e
os navegadores sempre adicionarão uma quebra de linha antes e depois
o elemento <address>.
Exemplo
<address>
Escrito por John Doe.
Visite-nos em:
[Link]<br>
Caixa 564, Disneyland
EUA
</endereço>
Tente por si mesmo »
HTML <cite> para Título da Obra
A tag HTML <cite> define o título de uma obra criativa (por exemplo, um livro, um
poema, uma canção, um filme, uma pintura, uma escultura, etc.
Nota: O nome de uma pessoa não é o título de uma obra.
O texto no elemento <cite> geralmente é renderizado em itálico.
Exemplo
<p><cite>The Scream</cite>by Edvard Munch. Painted in 1893.</p>
Experimente você mesmo »
HTML <bdo> para Sobrescrita Bidirecional
BDO significa Sobrecarga Bi-Direcional.
The HTML<bdo>tag is used to override the current text directon:
Exemplo
Este texto será escrito da direita para a esquerda
Experimente você mesmo »
Exercícios de HTML
Teste-se com Exercícios
Exercício:
Use um elemento HTML para adicionar aspas em volta das letras "legal".
<p>
Eu estou tão legal .
</p>
Enviar Resposta »
Iniciar o Exercício
Elementos de Citação e Citação em HTML
Etiqueta Descripton
<abbr> Define uma abreviação ou acrônimo
<address> Define informações de contato para o autor/proprietário de um
documento
<bdo> Define a direção do texto
<blockquoteDefine uma seção que é citada de outra fonte
>
<cite> Define o título de uma obra
Define uma citação curta em linha
Para uma lista completa de todas as tags HTML disponíveis, visite nossoTag HTML
Referência.
Comentários HTML
❮ AnteriorPróximo❯
Comentários HTML não são exibidos no navegador, mas podem ajudar
documente seu código fonte HTML.
Tags de Comentário HTML
Você pode adicionar comentários ao seu código fonte HTML usando o seguinte
syntax:
<!-- Escreva seus comentários aqui -->
Observe que há um ponto de exclamação (!) na tag de início, mas não há na
a tag de fechamento.
Nota: Os comentários não são exibidos pelo navegador, mas podem ajudar.
documente seu código fonte HTML.
Com comentários, você pode colocar notificações e lembretes em seu
Código HTML:
Exemplo
<!-- Este é um comentário -->
<p>Este é um parágrafo.</p>
<!-- Lembre-se de adicionar mais informações aqui -->
Experimente você mesmo »
Os comentários também são ótimos para depurar HTML, porque você pode
comentar linhas de código HTML, uma por vez, para procurar erros:
Exemplo
<!-- Não exiba esta imagem no momento -->
<img border="0" src="pic_trulli.jpg" alt="Trulli">
-->
Cores HTML
❮ AnteriorPróximo❯
As cores HTML são especificadas com nomes de cores predefinidos, ou com RGB,
Valores HEX, HSL, RGBA ou HSLA.
Color Names
Em HTML, uma cor pode ser especificada usando um nome de cor:
Tomate
Laranja
Azul Dodger
Verde Médio do Mar
Cinza
Azul Ardósia
Violeta
CinzaClaro
Tente você mesmo »
HTML suporta140 standard color names.
Background Color
Você pode definir a cor de fundo para elementos HTML:
Olá Mundo
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismodtncidunt ut laoreet dolore magna aliquam
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci taton
ullamcorper suscipit loborts nisl ut aliquip ex ea commodo consequat.
Exemplo
<h1 style="background-color:DodgerBlue;">Olá Mundo</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
Experimente você mesmo »
Cor do texto
Você pode definir a cor do texto:
Olá Mundo
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismodtncidunt ut laoreet dolore magna aliquam
erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci taton ullamcorper
suscipit loborts nisl ut aliquip ex ea commodo consequat.
Exemplo
<h1 style="color:Tomato;">Olá Mundo</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Experimente você mesmo »
Border Color
Você pode definir a cor das bordas:
Olá Mundo
Olá Mundo
Olá Mundo
Exemplo
<h1 style="border:2px solid Tomato;">Olá Mundo</h1>
<h1 style="border:2px solid DodgerBlue;">Olá Mundo</h1>
<h1 style="border:2px solid Violet;">Olá Mundo</h1>
Experimente você mesmo »
Valores de Cor
No HTML, as cores também podem ser especificadas usando valores RGB, valores HEX, HSL
valores, valores RGBA e valores HSLA.
Os seguintes três elementos <div> têm sua cor de fundo definida
com valores RGB, HEX e HSL:
rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)
Os seguintes dois elementos <div> têm sua cor de fundo definida com
Valores RGBA e HSLA, que adicionam um canal Alpha à cor (aqui
temos 50% de transparência):
rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)
Exemplo
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
Experimente Você Mesmo »
Estilos HTML - CSS
❮ AnteriorPróximo❯
CSS significa Folhas de Estilo em Cascata.
CSS economiza muito trabalho. Ele pode controlar o layout de várias páginas da web.
tudo de uma vez.
CSS = Styles and Colors
M a n i p u l a r T e x t o
C o r e s , Caixas
O que é CSS?
Folhas de Estilo em Cascata (CSS) são usadas para formatar o layout de uma página da web.
Com CSS, você pode controlar a cor, a fonte, o tamanho do texto e o espaçamento
between elements, how elements are positoned and laid out, what
imagens de fundo ou cores de fundo devem ser usadas, diferentes
exibições para diferentes dispositivos e tamanhos de tela, e muito mais!
Dica: A palavra 'cascading' significa que um estilo aplicado a um elemento pai
também se aplicará a todos os elementos filhos dentro do pai. Então, se você definir
a cor do texto do corpo para "azul", todos os títulos, parágrafos e outros
elementos de texto dentro do corpo também receberão a mesma cor (a menos que você
especifique algo mais)!
Usando CSS
O CSS pode ser adicionado a documentos HTML de 3 maneiras:
Em linha - usando o atributo de estilo dentro dos elementos HTML
Interno - usando um elemento <style> na seção <head>
Externo - utilizando um elemento <link> para vincular a um arquivo CSS externo
A maneira mais comum de adicionar CSS é manter os estilos em um CSS externo.
arquivos. No entanto, neste tutorial usaremos estilos inline e internos,
porque isso é mais fácil de demonstrar e mais fácil para você experimentar
você mesmo.
CSS em linha
Um CSS inline é usado para aplicar um estilo único a um único elemento HTML.
Um CSS inline usa o atributo style de um elemento HTML.
O exemplo a seguir define a cor do texto do elemento <h1> para azul,
e a cor do texto do elemento <p> para vermelho:
Exemplo
<h1 style="color:blue;">Um Cabeçalho Azul</h1>
<p style="color:red;">Um parágrafo vermelho.</p>
Experimente Você Mesmo »
CSS Interno
Um CSS interno é usado para definir um estilo para uma única página HTML.
Um CSS interno é definido na seção <head> de uma página HTML,
dentro de um elemento <style>.
O exemplo a seguir define a cor do texto de TODOS os elementos <h1> (em
aquela página) para azul, e a cor do texto de TODOS os <p> elementos para vermelho. Em
Além disso, a página será exibida com um fundo "azul em pó".
color:
Exemplo
<!DOCTYPEhtml>
<html>
<cabeça>
<style>
body{background-color:powderblue;}
h1{cor:azul;}
p{cor:vermelho;}
</style>
</head>
<body>
<h1>Este é um cabeçalho</h1>
<p>Este é um parágrafo.</p>
</body>
</html>
Experimente você mesmo »
CSS Externo
An external style sheet is used to define the style for many HTML pages.
Para usar uma folha de estilo externa, adicione um link a ela na seção <head> de
cada página HTML:
Example
<!DOCTYPEhtml>
<html>
<cabeça>
<link rel="stylesheet" href="[Link]">
</head>
<corpo>
<h1>Este é um título</h1>
<p>Este é um parágrafo.</p>
</body>
</html>
Experimente você mesmo »
A folha de estilo externa pode ser escrita em qualquer editor de texto. O arquivo deve
não deve conter nenhum código HTML e deve ser salvo com a extensão .css.
Aqui está como o arquivo "[Link]" se parece:
"[Link]":
body{
background-color:azul claro;
}
h1{
color:blue;
}
p{
cor:vermelho;
}
Dica: Com uma folha de estilos externa, você pode mudar a aparência de um conjunto.
site da web, mudando um arquivo!
Cores, Fontes e Tamanhos CSS
Aqui, vamos demonstrar algumas propriedades CSS comumente usadas.
aprenderá mais sobre eles mais tarde.
The CSScolorproperty defines the text color to be used.
A propriedade CSS font-family define a fonte a ser usada.
A propriedade font-size do CSS define o tamanho do texto a ser utilizado.
Exemplo
Uso das propriedades de cor, fonte e tamanho de fonte do CSS:
<!DOCTYPEhtml>
<html>
<cabeça>
<style>
h1{
color:blue;
font-family:verdana;
tamanho-da-fonte:300%;
}
p{
cor:vermelho;
font-family:courier;
tamanho da fonte:160%;
}
</style>
</head>
<corpo>
<h1>Este é um cabeçalho</h1>
<p>Este é um parágrafo.</p>
</corpo>
</html>
Experimente Você Mesmo »
Borda CSS
The CSSborderproperty defines a border around an HTML element.
Dica: Você pode definir uma borda para quase todos os elementos HTML.
Exemplo
Uso da propriedade de borda CSS:
p{
borda:2px sólida azul em pó;
}
Tente você mesmo »
Espaçamento interno CSS
A propriedade CSS padding define um espaçamento (margem) entre o texto
e a fronteira.
Exemplo
Uso das propriedades de borda e preenchimento do CSS:
p{
borda:2px sólido azul em pó;
preenchimento:30px;
}
Experimente você mesmo »
CSS Margin
A propriedade CSS margin define uma margem (espaço) fora da borda.
Exemplo
Uso das propriedades de borda e margem do CSS:
p{
borda:2px sólida azul-pó;
margem:50px;
}
Try it Yourself »
Link para CSS Externo
Folhas de estilo externas podem ser referenciadas com uma URL completa ou com um caminho
relativo à página da web atual.
Exemplo
Este exemplo usa uma URL completa para vincular a uma folha de estilo:
<link rel="stylesheet" href="htps://[Link]/html/styles.c
ss">
Experimente Você Mesmo »
Exemplo
Este exemplo vincula a uma folha de estilo localizada na pasta html no
current web site:
<link rel="stylesheet" href="/html/[Link]">
Experimente você mesmo »
Exemplo
Este exemplo vincula a uma folha de estilo localizada na mesma pasta que a
current page:
<link rel="stylesheet" href="[Link]">
Tente você mesmo »
Você pode ler mais sobre caminhos de arquivos no capítuloCaminhos de Arquivos HTML.
Resumo do Capítulo
Use o atributo style do HTML para estilos inline
Use o elemento HTML <style> para definir CSS interno
Use the HTML<link>element to refer to an external CSS file
Use o elemento <head> do HTML para armazenar <style> e <link>
elementos
Use a propriedade CSScolor para cores de texto
Use a propriedade CSS font-family para fontes de texto
Use a propriedade font-size do CSS para tamanhos de texto
Use a propriedade border do CSS para bordas
Use the CSSpaddingproperty for space inside the border
Use a propriedade CSS margin para espaço fora da borda
Dica: Você pode aprender muito mais sobre CSS em nossoTutorial de CSS.
Links HTML
❮ AnteriorPróximo❯
Os links são encontrados em quase todas as páginas da web. Os links permitem que os usuários cliquem em seus
caminho de página em página.
Links HTML - Hiperlinks
Links HTML são hyperlinks.
Você pode clicar em um link e pular para outro documento.
Quando você passa o mouse sobre um link, o cursor do mouse se transformará em um
mão pequena.
Nota: Um link não precisa ser texto. Um link pode ser uma imagem ou qualquer outra coisa.
outro elemento HTML!
Links HTML - Sintaxe
A tag HTML <a> define um hiperlink. Tem a seguinte sintaxe:
<ahref="url">texto do link</a>
O atributo mais importante do elemento <a> é o atributo href,
que indica o destino do link.
O texto do link é a parte que será visível para o leitor.
Clicar no texto do link enviará o leitor para o URL especificado
endereço.
Exemplo
Este exemplo mostra como criar um link para [Link]:
<ahref="htps://[Link]/">Visite o [Link]!</a>
Experimente Você Mesmo »
Por padrão, os links aparecerão da seguinte forma em todos os navegadores:
Um link não visitado é sublinhado e azul
Um link visitado é sublinhado e roxo
Um link ativo está sublinhado e vermelho
Dica: Os links podem, é claro, ser estilizados com CSS, para ter outra aparência!
Links HTML - O Atributo target
By default, the linked page will be displayed in the current browser
janela. Para mudar isso, você deve especificar outro destino para o link.
O atributo target especifica onde abrir o documento vinculado.
O atributo de destino pode ter um dos seguintes valores:
_self- Padrão. Abre o documento na mesma janela/aba que ele
foi clicado
_blank- Opens the document in a new window or tab
_parent - Abre o documento no quadro pai
_top- Abre o documento na íntegra da janela
Exemplo
Use target="_blank" para abrir o documento vinculado em um novo navegador
janela ou aba:
<ahref="htps://[Link]/"target="_blank">Visitar
W3Schools!</a>
Experimente você mesmo »
Absolute URLs vs. Relatve URLs
Ambos os exemplos acima estão usando uma URL absoluta (um endereço da web completo) em
oatributehref.
Um link local (um link para uma página dentro do mesmo site) é especificado com
URL relativa (sem a parte "htps://www"):
Exemplo
<h2>URLs Absolutos</h2>
<p><ahref="htps://[Link]/">W3C</a></p>
<p><ahref="htps://[Link]/">Google</a></p>
<h2>URLs Relativas</h2>
<p><ahref="html_images.asp">Imagens HTML</a></p>
<p><a href="/css/[Link]">Tutorial de CSS</a></p>
Experimente você mesmo »
Links HTML - Use uma Imagem como um Link
Para usar uma imagem como um link, basta colocar a <img> tag dentro da <a> tag:
Exemplo
<ahref="[Link]">
<img src="[Link]" alt="HTML
tutorial"style="width:42px;height:42px;">
</a>
Experimente você mesmo »
Link para um endereço de e-mail
Usemailto: dentro do atributo href para criar um link que abra o
programa de e-mail do usuário (para permitir que eles enviem um novo e-mail):
Exemplo
<ahref="[Link] email</a>
Botão como um Link
To use an HTML buton as a link, you have to add some JavaScript code.
JavaScript permite que você especifique o que acontece em certos eventos, como
um clique de um botão
Exemplo
<butononclick="[Link]='[Link]'">HTML
Tutorial
Dica: Aprenda mais sobre JavaScript em nossoTutorial de JavaScript.
Títulos de Link
O atributo especifica informações extras sobre um elemento.
a informação é mais frequentemente exibida como um texto de dica quando o mouse
mova sobre o elemento.
Exemplo
<ahref="htps://[Link]/html/"ttle="Ir para o W3Schools
Visite nosso Tutorial de HTML
Mais sobre URLs Absolutas e URLs Relativas
Exemplo
Use uma URL completa para vincular a uma página da web:
<ahref="htps://[Link]/html/[Link]">HTML
tutorial</a>
Exemplo
Link para uma página localizada na pasta html no site atual:
<ahref="/html/[Link]">Tutorial de HTML</a>
Example
Link para uma página localizada na mesma pasta que a página atual:
<ahref="[Link]">Tutorial de HTML</a>
Você pode ler mais sobre caminhos de arquivo no capítuloCaminhos de Arquivos HTML.
Resumo do Capítulo
Use o elemento <a> para definir um link
Use o atributo href para definir o endereço do link
Use thetargetatribute to define where to open the linked
documento
Use o elemento <img> (dentro de <a>) para usar uma imagem como um link
Use o esquema mailto: dentro do atributo href para criar um link
que abre o programa de email do usuário
Tags de Link HTML
Etiqueta Descripton
<a> Define um hiperlink
Para uma lista completa de todas as tags HTML disponíveis, visite nossoTag HTML
Referência.
Imagens HTML
Imagens podem melhorar o design e a aparência de uma página da web.
Exemplo
<imgsrc="pic_trulli.jpg"alt="Italian Trulli">
Exemplo
<imgsrc="img_girl.jpg"alt="Girl in a jacket">
Example
<img src="img_chania.jpg" alt="Flores em Chania">
Sintaxe de Imagens em HTML
A tag HTML <img> é usada para incorporar uma imagem em uma página da web.
As imagens não são inseridas tecnicamente em uma página da web; as imagens são vinculadas
para páginas da web. A <img> tag cria um espaço de armazenamento para o referenciado
imagem.
A tag <img> está vazia, contém apenas atributos, e não possui um
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
Sintaxe
<imgsrc="url"alt="alternatetext">
The src Atribute
O atributo requiredsrcatribute especifica o caminho (URL) para a imagem.
Note:When a web page loads; it is the browser, at that moment, that
obtém a imagem de um servidor web e a insere na página.
Portanto, certifique-se de que a imagem realmente permaneça no mesmo lugar em
em relação à página da web, caso contrário, seus visitantes receberão um link quebrado
ícone. O ícone de link quebrado e o texto alternativo são exibidos se o navegador
não consegui encontrar a imagem.
Exemplo
<imgsrc="img_chania.jpg"alt="Flowers in Chania">
O atributo alt
O atributo requiredaltatribute fornece um texto alternativo para uma imagem, se o
o utilizador por algum motivo não consegue visualizar (devido a uma conexão lenta, um
erro no atributo src, ou se o usuário usa um leitor de tela).
O valor do atributo alt deve descrever a imagem:
Exemplo
<imgsrc="img_chania.jpg"alt="Flowers in Chania">
Se um navegador não conseguir encontrar uma imagem, ele exibirá o valor de
thealtatribute:
Exemplo
<imgsrc="[Link]"alt="Flowers in Chania">
Dica: Um leitor de tela é um programa de software que lê o código HTML,
e permite que o usuário "ouça" o conteúdo. Leitores de tela são úteis
para pessoas com deficiência visual ou com dificuldades de aprendizagem.
Tamanho da Imagem - Largura e Altura
Você pode usar o atributo de estilo para especificar a largura e a altura de um
imagem.
Exemplo
<img src="img_girl.jpg" alt="Menina em um
jaqueta"estilo="largura:500px;altura:600px;">
Alternativamente, você pode usar os atributos largura e altura:
Exemplo
<img src="img_girl.jpg" alt="Menina em uma
jaqueta"largura="500"altura="600">
Os atributos de largura e altura sempre definem a largura e a altura de
a imagem em pixels.
Nota: Sempre especifique a largura e a altura de uma imagem. Se a largura e
se a altura não for especificada, a página da web pode piscar enquanto a imagem
cargas.
Largura e Altura, ou Estilo?
Os atributos width, height e style são todos válidos em HTML.
No entanto, sugerimos usar o atributo de estilo. Isso previne folhas de estilo
mudando o tamanho das imagens:
Exemplo
<!DOCTYPEhtml>
<html>
<cabeçalho>
<style>
img{
width:100%;
}
</style>
</head>
<body>
<img src="[Link]" alt="Ícone HTML5" width="128" height="128">
<img src="[Link]" alt="HTML5" />
Ícone"estilo="largura:128px;height:128px;">
</corpo>
</html>
Imagens em Outra Pasta
Se você tiver suas imagens em uma subpasta, deve incluir a pasta
nome no atributo thesrc
Exemplo
<img src="/images/[Link]" alt="HTML5"
Ícone"estilo="largura:128px;altura:128px;">
Imagens em Outro Servidor/Site
Alguns sites web apontam para uma imagem em outro servidor.
Para apontar para uma imagem em outro servidor, você deve especificar um absoluto
(completo) URL no atributo thesrc:
Exemplo
<img src="[Link]
alt="[Link]">
Notas sobre imagens externas: As imagens externas podem estar sob direitos autorais. Se
você não tem permissão para usá-lo, pode estar violando o direito autoral
leis. Além disso, você não pode controlar imagens externas; pode de repente
ser removido ou alterado.
Imagens Animadas
HTML permite GIFs animados:
Exemplo
<img src="[Link]" alt="Computador">
Man"style="width:48px;height:48px;">
Imagem como um Link
To use an image as a link, put the<img>tag inside the<a>tag:
Exemplo
<ahref="[Link]">
<img src="[Link]" alt="HTML
tutorial"style="width:42px;height:42px;">
</a>
Imagem Flutuante
Use a propriedade CSS float para permitir que a imagem flutue para a direita ou para a
restante de um texto:
Exemplo
<p><img src="[Link]" alt="Sorriso
face"style="float:right;width:42px;height:42px;">
A imagem flutuará à direita do texto.
<p><img src="[Link]" alt="Sorriso">
face"style="float:leſt;width:42px;height:42px;">
A imagem flutuará para a esquerda do texto.
Dica: Para saber mais sobre CSS Float, leia nossoTutorial de Float em CSS.
Formatos de Imagem Comuns
Aqui estão os tipos de arquivos de imagem mais comuns, que são suportados em todos
browsers (Chrome, Edge, Firefox, Safari, Opera):
Formato de Arquivo de Abreviação Extensão de Arquivo
APNG Rede Portátil Animada .apng
Graphics
GIF Formato de Intercâmbio de Gráficos .gif
ICO Ícone da Microsoft .ico, .cur
JPEG Grupo Conjunto de Especialistas em Fotografia .jpg, .jpeg, .jfif, .pjpeg, .pjp
imagem
PNG Gráficos de Rede Portátil .png
SVG Gráficos Vetoriais Escaláveis .svg
Chapter Summary
Use o elemento HTML <img> para definir uma imagem
Use o atributo HTML src para definir a URL da imagem
Use o atributo HTML alt para definir um texto alternativo para um
imagem, se não puder ser exibida
Use os atributos HTML width e height ou o
As propriedades de largura e altura do CSS para definir o tamanho da imagem
Use a propriedade CSS float para deixar a imagem flutuar à esquerda ou à direita.
o direito
Nota: Carregar imagens grandes leva tempo e pode desacelerar seu site.
página. Use imagens com cuidado.
Tabelas HTML
As tabelas HTML permitem que os desenvolvedores web organizem dados em linhas e
colunas.
Exemplo
Empresa Contato País
Cofr do Alfred Maria Anders Alemanha
Centro Comercial Moctezuma Francisco Chang México
Ernst Handel Roland Mendel Áustria
Comércio Insular Helen Bennet Reino Unido
Cave de Vinhos Bacchus Risonho Yoshi Tannamuri Canadá
Magazzini Alimentari Riunit Giovanni Rovelli Itália
Defina uma Tabela HTML
A tag <table> define uma tabela HTML.
Cada linha da tabela é definida com uma <tr> tag. Cada cabeçalho da tabela é definido
com uma tag <th>. Cada dado/célula da tabela é definido com uma tag <td>.
Por padrão, o texto nos elementos <th> é negrito e centralizado.
Por padrão, o texto nos elementos <td> é regular e alinhado à esquerda.
Exemplo
Uma tabela HTML simples:
<tablestyle="width:100%">
<tr>
<th>Firstname</th>
<th>Sobrenome</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</tabela>
Nota: Os elementos <td> são os contêineres de dados da tabela.
Eles podem conter todos os tipos de elementos HTML; texto, imagens, listas, outros
mesas, etc.
HTML Table - Add a Border
Para adicionar uma borda a uma tabela, use a propriedade CSS border:
Exemplo
tabela, th, td{
borda:1px sólido preto;
}
Lembre-se de definir bordas para a tabela e para as células da tabela.
Tabela HTML - Bordas Colapsadas
Para deixar as bordas colapsarem em uma única borda, adicione o CSSborder-
collapseproperty:
Exemplo
tabela, th, td{
borda: 1px sólida preta;
colapso-da-borda:colapso;
}
Tabela HTML - Adicionar Preenchimento de Célula
O preenchimento da célula especifica o espaço entre o conteúdo da célula e seu
fronteiras.
Se você não especificar um preenchimento, as células da tabela serão exibidas sem
almofadado.
Para definir o preenchimento, use a propriedade CSSpadding:
Exemplo
th, td{
preenchimento:15px;
}
Tabela HTML - Alinhar Cabeçalhos à Esquerda
Por padrão, os cabeçalhos da tabela são em negrito e centralizados.
Para alinhar os títulos da tabela à esquerda, use a propriedade CSS text-align:
Exemplo
th{
text-align: left;
}
Tabela HTML - Adicionar Espaçamento de Bordas
O espaçamento das bordas especifica o espaço entre as células.
Para definir o espaçamento das bordas de uma tabela, use o CSSborder-
spacingproperty:
Exemplo
table{
border-spacing:5px;
}
Nota: Se a tabela tiver bordas colapsadas, o espaçamento de bordas não terá efeito.
Tabela HTML - Célula que Abrange Muitas Colunas
Para fazer uma célula abranger mais de uma coluna, use o atributo colspan:
Exemplo
<tablestyle="width:100%">
<tr>
<th>Nome</th>
<thcolspan="2">Telefone</th>
</tr>
<tr>
<td>Bill Gates</td>
55577854
<td>55577855</td>
</tr>
</table>
Tabela HTML - Célula que Abrange Muitas Linhas
Para fazer uma célula ocupar mais de uma linha, use o atributo rowspan:
Exemplo
<tablestyle="width:100%">
<tr>
<th>Nome:</th>
<td>Bill Gates</td>
</tr>
<tr>
<throwspan="2">Telefone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
Tabela HTML - Adicionar uma Legenda
Para adicionar uma legenda a uma tabela, use a tag <capton>:
Exemplo
<tablestyle="width:100%">
<capton>Monthly savings</capton>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>Janeiro</td>
<td>$100</td>
</tr>
<tr>
<td>Fevereiro</td>
<td>R$50</td>
</tr>
</table>
Nota: O<capo tag deve ser inserido imediatamente após
a<tag>tabela.
Um Estilo Especial para Uma Mesa
Para definir um estilo especial para uma tabela específica, adicione um atributo anid.
a tabela:
Exemplo
<tableid="t01">
<tr>
<th>Firstname</th>
<th>Último Nome</th>
<th>Idade</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Agora você pode definir um estilo especial para esta tabela:
#t01{
largura:100%;
background-color:#f1f1c1;
}
E adicione mais estilos:
#t01 tr:nth-child(even){
cor-de-fundo:#eee;
}
#t01 tr:nth-child(odd){
cor de fundo:#fff;
}
#t01 th{
cor:branco;
cor de fundo:preto;
}
Chapter Summary
Use the HTML<table>element to define a table
Use the HTML<tr>element to define a table row
Use o elemento HTML <td> para definir um dado de tabela
Use o elemento HTML <th> para definir um cabeçalho de tabela
Use o elemento HTML <caption> para definir uma legenda de tabela
Use a propriedade CSS border para definir uma borda
Use a propriedade CSS border-collapse para colapsar as bordas das células
Use a propriedade CSS padding para adicionar preenchimento às células
Use a propriedade CSS text-align para alinhar o texto da célula
Use a propriedade CSS border-spacing para definir o espaçamento entre
células
Use o atributo colspan para fazer uma célula abranger várias colunas
Use o atributo rowspan para fazer uma célula abranger várias linhas
Use o atributo id para definir unicamente uma tabela
Listas HTML
Listas HTML permitem que os desenvolvedores web agrupem um conjunto de itens relacionados em listas.
Exemplo
Uma lista HTML não ordenada:
Item
Item
Item
Item
Uma lista HTML ordenada:
1. Primeiro item
2. Second item
3. Terceiro item
4. Quarto item
Lista HTML Não Ordenada
Uma lista não ordenada começa com a <ul> tag. Cada item da lista começa com
a<li>tag.
Os itens da lista serão marcados com marcadores (pequenos círculos pretos) por
default:
Exemplo
<ul>
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
</ul>
Lista HTML 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:
Exemplo
<ol>
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
</ol>
Listas de Descrição HTML
HTML também suporta 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:
Exemplo
<dl>
Café
- bebida quente preta
<dt>Milk</dt>
- bebida fria branca
</dl>
Tags de Lista HTML
Etiqueta Descripton
<ul> Define uma lista não ordenada
<ol> Define uma lista ordenada
<li> Define um item de lista
<dl> Define uma lista de descrição
<dt> Define um termo em uma lista de descrição
<dd> Describes the term in a descripton list
Para uma lista completa de todas as tags HTML disponíveis, visite nossoEtiqueta HTML
Referência.
Listas Não Ordenadas HTML
A tag HTML <ul> define uma lista não ordenada (com marcadores).
Lista HTML Não Ordenada
Uma lista não ordenada começa com a tag <ul>. Cada item da lista começa com
a<li>tag.
Os itens da lista serão marcados com marcadores (pequenos círculos pretos) por
default:
Exemplo
<ul>
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
</ul>
Lista HTML Não Ordenada - Escolha o Marcador do Item da Lista
A propriedade list-style-type do CSS é usada para definir o estilo da lista
marcador de item. Pode ter um dos seguintes valores:
Valor Descripton
disco Define o marcador do item da lista para um marcador (padrão)
círculo Define o marcador do item da lista como um círculo
quadrado Define o marcador do item da lista como um quadrado
nenhum Os itens da lista não serão marcados
Exemplo - Disco
<ul style="list-style-type:disc;">
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
</ul>
Exemplo - Círculo
<ul style="list-style-type:circle;">
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
</ul>
Exemplo - Quadrado
<ul style="list-style-type:square;">
<li>Café</li>
<li>Tea</li>
<li>Leite</li>
</ul>
Exemplo - Nenhum
<ulstyle="list-style-type:none;">
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
</ul>
Listas HTML Aninhadas
Listas podem ser aninhadas (lista dentro de lista):
Exemplo
<ul>
<li>Café</li>
<li>Chá
<ul>
<li>Chá preto</li>
<li>Chá verde</li>
</ul>
</li>
<li>Leite</li>
</ul>
Nota: Um item de lista (<li>) pode conter uma nova lista e outros elementos HTML.
como imagens e links, etc.
Lista Horizontal com CSS
Listas HTML podem ser estilizadas de muitas maneiras diferentes com CSS.
Uma maneira popular é estilizar uma lista horizontalmente, para criar uma navegação.
menu:
Exemplo
<!DOCTYPE html>
<html>
<cabeça>
<style>
ul{
tipo-de-estilo-da-lista:none;
margem:0;
preenchimento:0;
overflow:hidden;
cor-de-fundo:#333333;
}
li{
flutuar:esquerda;
}
li a{
display:block;
color:white;
texto-alinhar:centro;
preenchimento:16px;
text-decoraton:none;
}
li a:hover{
cor de fundo:#111111;
}
</style>
</cabeça>
<body>
<ul>
<li><a href="#home">Início</a></li>
<li><a href="#news">Notícias</a></li>
<li><a href="#contact">Contato</a></li>
<li><ahref="#sobre">Sobre</a></li>
</ul>
</body>
</html>
Dica: Você pode aprender muito mais sobre CSS em nossoTutorial de CSS.
Resumo do Capítulo
Use o elemento <ul> para definir uma lista não ordenada
Use a propriedade list-style-type do CSS para definir o marcador do item da lista
Use o elemento HTML <li> para definir um item de lista
Listas podem ser aninhadas
Itens de lista podem conter outros elementos HTML
Use a propriedade CSS float:left para exibir uma lista horizontalmente
Tags de Lista HTML
Etiqueta Descripton
<ul> Define uma lista não ordenada
<ol> Define uma lista ordenada
<li> Define um item de lista
<dl> Define uma lista de descrição
<dt> Define um termo em uma lista de descrição
<dd> Descreve o termo em uma lista de descrições
Listas Ordenadas em HTML
A tag HTML <ol> define uma lista ordenada. Uma lista ordenada pode ser
numérico ou alfabético.
Lista HTML 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:
Example
<ol>
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
</ol>
Lista HTML Ordenada - O Atributo Type
O atributo type da tag <ol> define o tipo do item da lista
marker:
Tipo Descrição
type="1" Os itens da lista serão numerados com números (padrão)
tipo="A" Os itens da lista serão numerados com letras maiúsculas
tipo="a" Os itens da lista serão numerados com letras minúsculas
type="I" Os itens da lista serão numerados com números romanos maiúsculos
type="i" Os itens da lista serão numerados com números romanos minúsculos
Números:
<oltype="1">
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
</ol>
Letras Maiúsculas:
<oltype="A">
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
</ol>
Lowercase Leters:
<oltype="a">
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
</ol>
Números Romanos Maiúsculos:
<ol type="I">
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
</ol>
números romanos em minúsculas
<ol type="i">
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
</ol>
Contagem da Lista de Controle
Por padrão, uma lista ordenada começará a contar a partir de 1. Se você quiser começar
contando a partir de um número especificado, você pode usar o atributo start:
Exemplo
<ol start="50">
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
</ol>
Listas HTML Aninhadas
As listas podem ser aninhadas (lista dentro de lista):
Exemplo
<ol>
<li>Café</li>
Chá
<ol>
<li>Chá preto</li>
<li>Chá verde</li>
</ol>
</li>
<li>Leite</li>
</ol>
Nota: Um item de lista (<li>) pode conter uma nova lista e outros elementos HTML,
como imagens e links, etc.
Chapter Summary
Use o elemento HTML <ol> para definir uma lista ordenada
Use o atributo type do HTML para definir o tipo de numeração
Use o elemento HTML <li> para definir um item de lista
Listas podem ser aninhadas
Os itens da lista podem conter outros elementos HTML
Tags de Lista HTML
Tag Descrição
<ul> Define uma lista não ordenada
<ol> Define uma lista ordenada
<li> Define um item de lista
<dl> Define uma lista de descrição
<dt> Define um termo em uma lista de descrição
<dd> Descreve o termo em uma lista de descrição
Elementos de Bloco e Inline HTML
Cada elemento HTML tem um valor de exibição padrão, dependendo do que
tipo de elemento que é.
Existem dois valores de exibição: bloco e inline.
Elementos em bloco
Um elemento de bloco sempre começa em uma nova linha.
Um elemento de bloco sempre ocupa toda a largura disponível (se estende
para a esquerda e para a direita o máximo que puder.
Um elemento de bloco tem uma margem superior e uma margem inferior, enquanto um elemento em linha
o elemento não.
O elemento <div> é um elemento de nível de bloco.
Exemplo
<div>Olá Mundo</div>
Aqui estão os elementos de bloco em HTML:
<endereço>
<artcle>
<à parte>
<bloco de citação>
<tela>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaptligado>
<figura>
<footer>
<formulário>
<h1>-<h6>
<header>
<rh>
<li>
<principal>
<nav>
<noscript>
<olá>
<p>
<pré>
<segtem>
<mesa>
<traiz>
<ul>
<vídeo>
Elementos em linha
Um elemento inline não começa em uma nova linha.
Um elemento inline ocupa apenas a largura necessária.
Este é um elemento <span> dentro de um parágrafo.
Exemplo
<span>Olá Mundo</span>
Aqui estão os elementos inline em HTML:
<a>
<abreviação>
<sigla>
<b>
<bdo>
<grande>
<br>
<butem>
<cite>
<código>
<dfn>
<em>
<eu>
<imagem>
<entrada>
<kbd>
<rótulo>
<map>
<objeto>
<saída>
<q>
<samp>
<script>
<selecionar>
<pequeno>
<faixa>
<forte>
<sub>
<e aí>
<área de texto>
<teu>
<t>
<var>
Nota: Um elemento inline não pode conter um elemento de bloco!
O elemento <div>
O elemento <div> é frequentemente utilizado como um contêiner para outros HTML
elements.
The<div>element has no required atributes, butstyle,classandidare
comum.
Quando usado junto com CSS, o elemento <div> pode ser utilizado para estilizar
blocos de conteúdo:
Exemplo
<div style="background-color:black;color:white;padding:20px;">
<h2>Londres</h2>
Londres é a capital da Inglaterra. É a cidade mais populosa em
o Reino Unido, com uma área metropolitana de mais de 13 milhões
habitantes.
</div>
O Elemento <span>
O elemento <span> é um contêiner inline usado para marcar uma parte de um
texto, ou parte de um documento.
O elemento não tem atributos obrigatórios,
mas estilo, classe e ideia são comuns.
Quando usado em conjunto com CSS, o elemento <span> pode ser usado para estilizar
partes do texto:
Exemplo
<p>Minha mãe tem<span style="color:blue;font-
olhos azuis e meu pai
tem<spanstyle="color:darkolivegreen;font-weight:bold">escuro
olhos verdes.
Resumo do Capítulo
Existem dois valores de exibição: bloco e inline
Um elemento de bloco sempre começa em uma nova linha e ocupa o
largura total disponível
Um elemento inline não começa em uma nova linha e ocupa apenas
tanta largura quanto necessário
O elemento <div> é um nível de bloco e é frequentemente usado como um contêiner
para outros elementos HTML
O elemento <span> é um contêiner inline usado para marcar uma parte
de um texto, ou uma parte de um documento
Tags HTML
Etiqueta Descripton
<div> Define uma seção em um documento (nível de bloco)
<span> Define uma seção em um documento (inline)
Resultados do Quiz de HTML
Pontuação: 29 de 40
72% Correto:
Queston 1:
O que significa HTML?
Linguagem de Marcação de Hipertexto
Linguagem de Marcação de Ferramentas para Casa
Hiperlinks e Linguagem de Marcação de Texto
Questão 2:
Quem está criando os padrões da Web?
GoogleSua resposta
Microsoſt
Mozilla
O Consórcio World Wide Web
Questão 3:
Escolha o elemento HTML correto para o maior cabeçalho:
<h1>A sua resposta
<head>
<heading>
<h6>
Queston 4:
Qual é o elemento HTML correto para inserir uma quebra de linha?
<br>Sua resposta
<lb>
<break>
Questão 5:
Qual é o HTML correto para adicionar uma cor de fundo?
<body style="background-color:yellow;"> Sua resposta
<background>yellow</background>
<body bg="amarelo">
Queston 6:
Choose the correct HTML element to define important text
<strong>Sua resposta</strong>
<importante>
<b>
<i>
Questão 7:
Escolha o elemento HTML correto para definir texto enfatizado
<em> Sua resposta
<itálico>
<i>
Queston 8:
Qual é o HTML correto para criar um hyperlink?
<a href="htp://[Link]">W3Schools</a>Sua resposta
<a>htp://[Link]</a>
<a url="htp://[Link]">[Link]</a>
<a name="htp://[Link]">[Link]</a>
Questão 9:
Qual caractere é usado para indicar uma tag de fechamento?
/Sua resposta
*
<
^
Queston 10:
Como você pode abrir um link em uma nova aba/janela do navegador?
<a href="url" target="new"> Sua resposta
<a href="url" target="_blank"> Resposta correta
<a href="url" new>
Queston 11:
Quais desses elementos são todos elementos <table>?
Sua resposta
<thead><body><tr>
<table><tr><t>
<table><head><toot>
Queston 12:
Elementos inline normalmente são exibidos sem iniciar uma nova linha.
VerdadeiroSua resposta
Falso
Questão 13:
Como você pode fazer uma lista numerada?
<ol>Sua resposta
<ul>
<dl>
<list>
Questão 14:
Como você pode fazer uma lista com marcadores?
<ul> Sua resposta
<dl>
<ol>
<lista>
Queston 15:
Qual é o HTML correto para criar uma caixa de seleção?
<input type="checkbox"> Sua resposta
<checkbox>
<input type="check">
<verificar>
Questão 16:
Qual é o HTML correto para criar um campo de entrada de texto?
<input type="text"> Your answer
<textnput type="text">
<input type="textield">
<textield>
Questão 17:
Qual é o HTML correto para fazer uma lista suspensa?
<input type="dropdown"> Your answer
<input type="list">
<select>Resposta correta
<list>
Queston 18:
Qual é o HTML correto para criar uma área de texto?
<input type="textarea"> Sua resposta
Resposta correta
<input type="textbox">
Queston 19:
Qual é o HTML correto para inserir uma imagem?
Sua resposta
<img href="[Link]" alt="MinhaImagem">
<img alt="MinhaImagem">[Link]</img>
<image src="[Link]" alt="MyImage">
Questão 20:
Qual é o HTML correto para inserir uma imagem de fundo?
<body style="background-image:url([Link])"> Sua resposta
<body bg="[Link]">
<background img="[Link]">
Questão 21:
Um <iframe> é usado para exibir uma página da web dentro de uma página da web.
Verdade
Não existe tal coisa como um <iframe>
Falso
Queston 22:
Os comentários HTML começam com <!-- e terminam com -->
VerdadeiroSua resposta
Falso
Questão 23:
Os elementos de bloco normalmente são exibidos sem iniciar uma nova linha.
Falso Sua resposta
Verdadeiro
Queston 24:
Qual elemento HTML define o título de um documento?
<ttle>Your answer
<head>
<meta>
Questão 25:
Which HTML atribute specifies an alternate text for an image, if the
a imagem não pode ser exibida?
altSua resposta
src
longdesc
ttle
Queston 26:
Qual doctype é correto para HTML5?
<!DOCTYPE HTML5> Sua resposta
<!DOCTYPE html> Resposta correta
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0//PT">
htp://[Link]/TR/html5/[Link]
Queston 27:
Qual elemento HTML é usado para especificar um rodapé para um documento ou
seção?
<footer>Sua resposta</footer>
<secton>
<botom>
Pergunta 28:
Em HTML, você pode incorporar elementos SVG diretamente em uma página HTML.
VerdadeiroSua resposta
Falso
Questão 29:
Qual é o elemento HTML correto para reproduzir arquivos de vídeo?
<video>Sua resposta
<media>
<movie>
Queston 30:
Qual é o elemento HTML correto para reproduzir arquivos de áudio?
<áudio>Sua resposta
<mp3>
<som>
Questão 31:
O atributo global HTML, "contenteditable" é usado para:
Especifique se o conteúdo de um elemento deve ser editável ou
nãoSua resposta
Especifica um menu de contexto para um elemento. O menu aparece quando um
o usuário clica com o botão direito no elemento
Atualizar conteúdo do servidor
Retorne a posição da primeira ocorrência encontrada de conteúdo dentro de um
string
Questão 32:
Em HTML, onblur e onfocus são:
Atributos de estilo Sua resposta
Elementos HTML
Event atributesCorrect answer
Questão 33:
Graphics defined by SVG is in which format?
CSSSua resposta
XMLResposta correta
HTML
Questão 34:
O elemento HTML <canvas> é usado para:
desenhar gráficos Sua resposta
criar elementos arrastáveis
exibir registros do banco de dados
manipular dados no MySQL
Questão 35:
Em HTML, qual atributo é usado para especificar que um campo de entrada deve ser
preenchido?
Texto de espaço reservado
resposta correta necessária
validação de formulário
validar
Questão 36:
Qual tipo de entrada define um controle deslizante?
controlesA sua resposta
pesquisar
deslizante
resposta correta de intervalo
Queston 37:
Qual elemento HTML é usado para exibir uma medição escalar dentro de um
faixa?
<measure>Your answer
Resposta correta
<intervalo>
<gauge>
Questão 38:
Qual elemento HTML define links de navegação?
<nav> Sua resposta
<navegar>
<navigaton>
Queston 39:
Em HTML, o elemento <aside> define.
Conteúdo além do conteúdo da página Sua resposta
O conjunto de caracteres ASCII; para enviar informações entre computadores
a Internet
Uma lista de navegação a ser exibida no lado esquerdo da página
Questão 40:
Qual elemento HTML é usado para especificar um cabeçalho para um documento ou
seção?
<head> Sua resposta
<top>
<secton>
<header>Resposta correta