Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
Tags HTML Lista Completa
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
Tags HTML Lista Completa
<!-->
<!DOCTYPE>
<a>
<abbr>
<address>
<area>
<aside>
<article>
<button>
<base>
<bdi>
<blockquote>
<body>
<br>
<b>
<canvas>
<caption>
<cite>
<code>
<col>
<colgroup>
<class>
<data>
<datalist>
<dl>
<dt>
<dd>
<dfn>
<dialog>
<details>
<del>
<div>
<label>
<legend>
<li>
<link>
<em>
<embed>
<footer>
<form>
<fieldset>
<i>
<iframe>
<ins>
<img>
<input>
<kbd>
<p>
https://www.loopnerd.com.br/codigos-html-prontos/html-comment/
https://www.loopnerd.com.br/codigos-html-prontos/html-doctype/
https://www.loopnerd.com.br/codigos-html-prontos/html-a/
https://www.loopnerd.com.br/codigos-html-prontos/html-abbr/
https://www.loopnerd.com.br/codigos-html-prontos/html-address/
https://www.loopnerd.com.br/codigos-html-prontos/html-area/
https://www.loopnerd.com.br/codigos-html-prontos/html-aside
https://www.loopnerd.com.br/codigos-html-prontos/html-article
https://www.loopnerd.com.br/codigos-html-prontos/html-button/
https://www.loopnerd.com.br/codigos-html-prontos/html-base/
https://www.loopnerd.com.br/codigos-html-prontos/html-bdi/
https://www.loopnerd.com.br/codigos-html-prontos/html-blockquote/
https://www.loopnerd.com.br/codigos-html-prontos/html-body/
https://www.loopnerd.com.br/codigos-html-prontos/html-br/
https://www.loopnerd.com.br/codigos-html-prontos/html-b/
https://www.loopnerd.com.br/codigos-html-prontos/html-canvas/
https://www.loopnerd.com.br/codigos-html-prontos/html-caption/
https://www.loopnerd.com.br/codigos-html-prontos/html-cite/
https://www.loopnerd.com.br/codigos-html-prontos/html-code/
https://www.loopnerd.com.br/codigos-html-prontos/html-col/
https://www.loopnerd.com.br/codigos-html-prontos/html-colgroup/
https://www.loopnerd.com.br/codigos-html-prontos/html-class/
https://www.loopnerd.com.br/codigos-html-prontos/html-data/
https://www.loopnerd.com.br/codigos-html-prontos/html-datalist/
https://www.loopnerd.com.br/codigos-html-prontos/html-dl/
https://www.loopnerd.com.br/codigos-html-prontos/html-dt/
https://www.loopnerd.com.br/codigos-html-prontos/html-dd/
https://www.loopnerd.com.br/codigos-html-prontos/html-dfn/
https://www.loopnerd.com.br/codigos-html-prontos/html-dialog/
https://www.loopnerd.com.br/codigos-html-prontos/html-details/
https://www.loopnerd.com.br/codigos-html-prontos/html-del/
https://www.loopnerd.com.br/codigos-html-prontos/html-div/
https://www.loopnerd.com.br/codigos-html-prontos/html-label/
https://www.loopnerd.com.br/codigos-html-prontos/html-legend/
https://www.loopnerd.com.br/codigos-html-prontos/html-li/
https://www.loopnerd.com.br/codigos-html-prontos/html-link/
https://www.loopnerd.com.br/codigos-html-prontos/html-em/
https://www.loopnerd.com.br/codigos-html-prontos/html-embed/
https://www.loopnerd.com.br/codigos-html-prontos/html-footer
https://www.loopnerd.com.br/codigos-html-prontos/html-form/
https://www.loopnerd.com.br/codigos-html-prontos/html-fieldset/
https://www.loopnerd.com.br/codigos-html-prontos/html-i/
https://www.loopnerd.com.br/codigos-html-prontos/html-iframe/
https://www.loopnerd.com.br/codigos-html-prontos/html-ins/
https://www.loopnerd.com.br/codigos-html-prontos/html-img/
https://www.loopnerd.com.br/codigos-html-prontos/html-input/
https://www.loopnerd.com.br/codigos-html-prontos/html-kbd/
https://www.loopnerd.com.br/codigos-html-prontos/html-p/
<picture>
<progress>
<pre>
<q>
<s>
<samp>
<script>
<strong>
<section>
<select>
<small>
<span>
<style>
<sub>
<sup>
<summary>
<svg>
<source>
<main>
<map>
<mark>
<meter>
<menu>
<meta>
<nav>
<noscript>
<ol>
<option>
<optgroup>
<table>
<tbody>
<td>
<tr>
<th>
<thead>
<tfoot>
<time>
<textarea>
<title>
<figure>
<figcaption>
<fieldset>
<h1> - <h6>
<header>
<head>
<hr>
<html>
<u>
<ul>
<var>
https://www.loopnerd.com.br/codigos-html-prontos/html-picture/
https://www.loopnerd.com.br/codigos-html-prontos/html-progress/
https://www.loopnerd.com.br/codigos-html-prontos/html-pre/
https://www.loopnerd.com.br/codigos-html-prontos/html-q/
https://www.loopnerd.com.br/codigos-html-prontos/html-s/
https://www.loopnerd.com.br/codigos-html-prontos/html-samp/
https://www.loopnerd.com.br/codigos-html-prontos/html-script/
https://www.loopnerd.com.br/codigos-html-prontos/html-strong/
https://www.loopnerd.com.br/codigos-html-prontos/html-section/
https://www.loopnerd.com.br/codigos-html-prontos/html-select/
https://www.loopnerd.com.br/codigos-html-prontos/html-small/
https://www.loopnerd.com.br/codigos-html-prontos/html-span/
https://www.loopnerd.com.br/codigos-html-prontos/html-style/
https://www.loopnerd.com.br/codigos-html-prontos/html-sub/
https://www.loopnerd.com.br/codigos-html-prontos/html-sup/
https://www.loopnerd.com.br/codigos-html-prontos/html-summary/
https://www.loopnerd.com.br/codigos-html-prontos/html-svg/
https://www.loopnerd.com.br/codigos-html-prontos/html-source/
https://www.loopnerd.com.br/codigos-html-prontos/html-main/
https://www.loopnerd.com.br/codigos-html-prontos/html-map/
https://www.loopnerd.com.br/codigos-html-prontos/html-mark/
https://www.loopnerd.com.br/codigos-html-prontos/html-meter/
https://www.loopnerd.com.br/codigos-html-prontos/html-menu/
https://www.loopnerd.com.br/codigos-html-prontos/html-meta/
https://www.loopnerd.com.br/codigos-html-prontos/html-nav/
https://www.loopnerd.com.br/codigos-html-prontos/html-noscript/
https://www.loopnerd.com.br/codigos-html-prontos/html-ol/
https://www.loopnerd.com.br/codigos-html-prontos/html-option/
https://www.loopnerd.com.br/codigos-html-prontos/html-optgroup/
https://www.loopnerd.com.br/codigos-html-prontos/html-table/
https://www.loopnerd.com.br/codigos-html-prontos/html-tbody/
https://www.loopnerd.com.br/codigos-html-prontos/html-td/
https://www.loopnerd.com.br/codigos-html-prontos/html-tr/
https://www.loopnerd.com.br/codigos-html-prontos/html-th/
https://www.loopnerd.com.br/codigos-html-prontos/html-thead/
https://www.loopnerd.com.br/codigos-html-prontos/html-tfoot/
https://www.loopnerd.com.br/codigos-html-prontos/html-time/
https://www.loopnerd.com.br/codigos-html-prontos/html-textarea/
https://www.loopnerd.com.br/codigos-html-prontos/html-title/
https://www.loopnerd.com.br/codigos-html-prontos/html-figure/
https://www.loopnerd.com.br/codigos-html-prontos/html-figcaption/
https://www.loopnerd.com.br/codigos-html-prontos/html-fieldset/
https://www.loopnerd.com.br/codigos-html-prontos/html-h1
https://www.loopnerd.com.br/codigos-html-prontos/html-header/
https://www.loopnerd.com.br/codigos-html-prontos/html-head/
https://www.loopnerd.com.br/codigos-html-prontos/html-hr/
https://www.loopnerd.com.br/codigos-html-prontos/html-tag-html/
https://www.loopnerd.com.br/codigos-html-prontos/html-u/
https://www.loopnerd.com.br/codigos-html-prontos/html-ul/
https://www.loopnerd.com.br/codigos-html-prontos/html-var/
Tags HTML Lista Completa
<!-->
Html comment – Como comentar uma linha
ou tag em HTML
A tag comment <!–> é usada para inserir comentários
nocódigo-fonte. Os comentários não são exibidos nos
navegadores.
Você pode usar comentários para explicar seu código, o que
pode ajudá-lo a editar o código-fonte posteriormente. Isso é
especialmente útil se você tiver muito código.
Comentários em HTML começam com <!-- e terminam com --
>.
Não se esqueça do ponto de exclamação no início da tag! Mas
você não precisa adicioná-lo no final.
A tag envolve qualquer texto ou outra tag HTML que você
queira comentar.
Veja o exemplo no código html
<!--Este é um comentário-->
<!--Comentários não são exibidos no navegador-->
<p>Este é um parágrafo.</p>
Quando e como usar Html comment
Comentários HTML não são exibidos no navegador. Isso
significa que quaisquer comentários que você adicionar ao
código-fonte HTML não serão exibidos quando o documento for
renderizado em um navegador da web.
Dito isso, lembre-se de que qualquer pessoa pode visualizar o
código-fonte de praticamente todos os sites publicados na
Internet acessando View -> Developer -> View Source– e isso também
inclui todos os comentários!Assim, seus comentários ficarão visíveis para outras pessoas
verem se você tornar o documento HTML público e eles optarem
por examinar o código-fonte.
https://www.loopnerd.com.br/codigos-html-prontos/html-comment/
https://www.loopnerd.com.br/tag/tags-html/
Escrever comentários é útil e é uma boa prática a ser seguida
ao escrever o código-fonte. Os comentários ajudam você a
documentar e comunicar seu código e processo de pensamento
para você mesmo (e para outras pessoas). Também lembra o
que você estava pensando/fazendo quando volta a um projeto
depois de meses sem trabalhar nele.
Os comentários também ajudam você a se comunicar
com outros desenvolvedores que estão trabalhando no
projeto com você. Seus comentários podem explicar
claramente por que você adicionou certas linhas de código.
Como escrever comentários de linha única em
HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Códigos Html</title>
</head>
<body>
<!-- Adicione um titulo h1 aqui -->
<h2>Html</h2>
<p>Tags Html lista completa</p>
<p>A tag comment é usada para inserir comentários no código-fonte.</p>
</body>
</html>
Como escrever comentários embutidos em
HTML
Você também pode adicionar comentários no meio de uma
frase ou linha de código.
Apenas o texto dentro do <!-- --> será comentado, e o restante
do texto dentro da tag não será afetado.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Html</title>
</head>
<body>
<p>Blog Loop Nerd <!--Aprenda--> Tags Html </p>
</body>
</html>
Como escrever comentários de várias linhas em
HTML
Os comentários também podem abranger várias linhas,
usando exatamente a mesma sintaxe que você viu até agora.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Códigos Html</title>
</head>
<body>
<h2>Códigos Html</h2>
<!--
<p>Tags Html lista completa</p>
<p>A tag comment é usada para inserir comentários no código-fonte.</p>
-->
</body>
</html>
Como comentar uma tag em HTML
Você envolve a tag selecionada em <!-- -->:
!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Html e css</title>
</head>
<body>
<h2>Artigos sobre tags html</h2>
<h3>Tags html lista completa</h3>
<!--<section class="boxhome">
</section> -->
</body>
</html>
Notas
Você pode usar a tag comment para “ocultar” scripts de
navegadores sem suporte para scripts (para que eles não os
mostrem como texto simples):
<script type="text/javascript">
<!--
function displayMensagem() {
alert("Olá Mundo!")
}
//-->
</script>
<!DOCTYPE>
A tag HTML <!DOCTYPE> é a primeira linha do documento
HTML. Ele informa ao navegador qual versão do documento
HTML. que está escrito para que o navegador saiba o que
esperar.
Declaração HTML <!DOCTYPE>
<!DOCTYPE html>
<html>
<head>
<title>Titulo do Documento</title>
</head>
<body>
O conteúdo do documento.
</body>
</html>
Todos os documentos HTML devem começar com
uma <!DOCTYPE> declaração.
https://www.loopnerd.com.br/codigos-html-prontos/html-doctype/
A declaração não é uma tag HTML. É uma “informação” para
o navegador sobre qual tipo de documento esperar.
Em HTML5, a declaração é bem simples:
<!DOCTYPE html>
A sintaxe da tag <!DOCTYPE> varia de acordo com a versão
do HTML ou XHTML que você está usando.
Vejamos os usos mais comuns a seguir.
HTML5
<!doctype html>
Em documentos mais antigos (HTML 4 ou XHTML), a
declaração é mais complicada porque a declaração deve se
referir a um DTD (Document Type Definition).
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
A sintaxe em XHTML 1.1 é:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Se você criou uma nova página da web em HTML5, sua
tag <!DOCTYPE> pode ter esta aparência:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Página em HTML5 </title>
</head>
<body>
<h1>Códigos Html</h1>
<p>Artigo sobre tag <!DOCTYPE> no HTML</p>
</body>
</html>
<a>
HTML a
https://pt.wikipedia.org/wiki/HTML5
https://www.loopnerd.com.br/codigos-html-prontos/html-a/
Neste artigo vamos falar um pouco sobre a TAG HTML <a> e como
usar.
Descrição
A tag HTML <a> define um hiperlink para uma URL ou um destino
no documento HTML.
A tag <a> em HTML é usada para criar um hiperlink na página da
web. Este hiperlink é usado para vincular a página da Web a outras
páginas da Web. É usado para fornecer uma referência absoluta ou
uma referência relativa como seu valor “href”.
Veja o exemplo no código HTML abaixo:
<a href = "contato.html"> Contato </a>
O texto entre a abertura <a> e o fechamento </a> aparecerá
como o texto do hiperlink (ou seja: sublinhado).
Se desejar que o recurso seja carregado em uma nova janela, use
o atributo target=”_blank”. Por exemplo, você pode escrever seu
hiperlink da seguinte forma:
<a href="www.google.com" target="_blank">Google</a>
O atributo mais importante do <a> elemento é o href atributo, que
indica o destino do link.
Por padrão, os links aparecerão da seguinte forma em todos os
navegadores:
Um link não visitado está sublinhado e azul
Um link visitado é sublinhado e roxo
Um link ativo está sublinhado e vermelho
Atributos
download – Especifica que o destino será baixado quando um usuário
clicar no hiperlink
<a href="www.site.com.br/arquivo.pdf" download>Baixar Aquivo</a>
href – Especifica o URL da página para a qual o link vai
<a href="pagina.html">Página</a>
hreflang – Specifies the language of the linked document
<link rel="alternate" href="https://exemplo.com/portugues-brasil/" hreflang="pt-br" />
https://www.loopnerd.com.br/tag/tags-html/
https://pt.wikipedia.org/wiki/URL
media – O atributo media especifica para qual mídia/dispositivo o
recurso de destino é otimizado.
Esse atributo é usado principalmente com folhas de estilo CSS para
especificar estilos diferentes para diferentes tipos de mídia.
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>
ping – Especifica uma lista de URLs separados por espaços para os
quais, quando o link for seguido, as solicitações de postagem com o
ping do corpo serão enviadas pelo navegador (em segundo plano).
Normalmente usado para rastreamento.
<a href="https://www.loopnerd.com.br/" ping="https://www.loopnerd.com.br/codigos-html-prontos/">
referrerpolicy – Especifica quais informações do referenciador enviar
com o link
1. (No referrer) Nenhuma informação de referência será enviada junto
com uma solicitação
<link rel="stylesheet" href="https://www.loopnerd.com/estilo.css" referrerpolicy="no-referrer">
2. (no-referrer-when-downgrade) – Predefinição. O cabeçalho do
referenciador não será enviado para origens sem HTTPS
3. (origin) – Enviar apenas esquema, host e porta para o cliente de
solicitação
4. (origin-when-cross-origin) – Para solicitaçõesde origem cruzada:
Enviar apenas esquema, host e porta. Para solicitações de mesma
origem: inclua também o caminho
5. (origin-when-cross-origin) Para solicitações de origem cruzada:
Enviar apenas esquema, host e porta. Para solicitações de mesma
origem: inclua também o caminho
6. (unsafe-url) Envie origem, caminho e string de consulta (mas não
fragmento, senha ou nome de usuário). Este valor é considerado
inseguro
Neste artigo amostramos um pouco sobre a A TAG <a> define
um hiperlink, que é usado para vincular uma página a outra.
Neste outro artigo você pode estilizar os links com Css.
Como Estilizar Links através de class com Css
https://www.loopnerd.com.br/codigos-pronto/como-estilizar-links-atraves-de-class-com-css/
<abbr>
HTML Abbr
A tag HTML <abbr> define uma abreviação ou acrônimo em um
documento HTML.
Um exemplo de abreviatura é Mr. que é a abreviação de Mister.
Definição e uso da TAG <abbr>
A TAG <abbr> define uma abreviação ou um acrônimo, como
“HTML“, “CSS“, “Mr.“, “Dr.“, “ASAP“, “ATM“.
Dica: Use o atributo global para mostrar a descrição da
abreviatura/acrônimo ao passar o mouse sobre o elemento. title
a tag <abbr> pode ser definida usando o atributo title opcional da
seguinte forma:
<p><abbr title="Loop Nerd">LN</abbr></p>
Veja o exemplo no código HTML.
<abbr title="Cascading Style Sheets">CSS</abbr>
Veja o exemplo CSS abaixo.
CSS
Veja o exemplo HTML abaixo.
HTML
<abbr title="Linguagem de marcação do HyperText">HTML</abbr>
Veja mais um exemplo EUA.
EUA
<p><abbr title="Estados Unidos da América">EUA</abbr</p>
O propósito deste elemento é unicamente a conveniência de
autores e todos os navegadores mostram ele como um elemento
dentro de uma linha (display: inline) por padrão, embora o estilo aplicado
sobre ele seja diferente entre diferentes navegadores:
Alguns navegadores, como o Internet Explorer, não aplicam
nenhum estilo à mais do que é aplicado ao elemento <span>.
Opera, Firefox, e alguns outros adicionam um sublinhado pontilhado
ao conteúdo do elemento.
https://www.loopnerd.com.br/codigos-html-prontos/html-abbr/
https://www.loopnerd.com.br/tag/tags-html/
Alguns poucos navegadores não apenas adicionam um sublinhado
pontilhado, mas também colocam o texto em versalete (small caps);
para evitar este tipo de estilo, adicione algo como font-variant (en-US):
none no CSS que administra este caso.
É fortemente recomendado que autores web não confiem no estilo
padrão. Note que este elemento não é suportado pelo Internet
Explorer anterior ao IE7. Como tais versões do IE também não
permitem que se aplique estilo para elementos desconhecidos, o
seguinte script é necessário para permitir isso:
<!--[if lte IE 6]>
<script>
document.createElement("abbr");
</script>
<![endif]-->
Neste artigo abordamos sobre a tag HTMl abbr
<address>
HTML address
A tag HTML<address> indica as informações de contato de uma
pessoa ou organização.
Se a tag <address> for usada dentro da tag <body> então ela
representa as informações de contato do documento e se a tag
<address> estiver dentro da tag <article> , então ela representa as
informações de contato do artigo. O texto dentro da tag <address>
será exibido em formato itálico. Alguns navegadores adicionam uma
quebra de linha antes e depois do elemento de endereço.
Definição da Tag <address>
A Tag <address> define as informações de contato do
autor/proprietário de um documento ou artigo.
As informações de contato podem ser um endereço de e-
mail, URL, endereço físico, número de telefone, identificador de
mídia social, etc.
https://developer.mozilla.org/pt-BR/docs/Web/CSS
https://www.loopnerd.com.br/codigos-html-prontos/html-address/
https://www.loopnerd.com.br/tag/tags-html-lista-completa/
O texto no <address> elemento geralmente é renderizado
em itálico e os navegadores sempre adicionam uma quebra de linha
antes e depois do <address> elemento.
Veja o exemplo no Código HTML.
<!DOCTYPE html>
<html>
<head>
<style>
address { display:block; font-style:italic; }
</style>
</head>
<body>
<p>Um elemento de endereço é exibido assim:</p>
<address>
Escrito por <a href="mailto:contato@loopnerd.com.br">Loop Nerd</a>.<br>
Visite-nos em: Rio de Janeiro<br>
www.loopnerd.com.br<br>
Avenida 1050, RJ - centro<br>
Cidade: Rio de Janeiro
</address>
</body>
</html>
A maioria dos navegadores renderizará o texto dentro da tag
<address> como texto em itálico, mas você pode alterar esse
comportamento com CSS.
Neste artigo falamos sobre a tag HTML address.
<area>
HTML Área
A tag HTML <area> define uma área clicável ( ou ponto de acesso
) dentro de um mapa de imagem. Você pode associar um hiperlink a
esta área clicável. Esta tag deve estar dentro de uma tag <map>.
Definição da Tag <area> !
A <area>tag define uma área dentro de um mapa de imagem (um
mapa de imagem é uma imagem com áreas clicáveis).
<area> os elementos são sempre aninhados dentro de uma <map>tag.
https://developer.mozilla.org/pt-BR/docs/Web/HTML
https://www.loopnerd.com.br/codigos-html-prontos/html-area/
https://www.loopnerd.com.br/tag/tags-html-lista-completa/
https://maujor.com/tutorial/acessibilidade-na-html5.php
Atributos !
Esta tag aceita muitos atributos conforme descrito abaixo.
shape : A forma a ser mapeada na imagem, pode ser um “retrato”,
um “círculo” ou um “poli”.
coords : As coordenadas da forma.
href : O href é o link para onde o usuário será direcionado após
clicar na parte mapeada da imagem.
alt : Texto alternativo para uma área clicável em um mapa de
imagem.
download : Destino de download quando o hiperlink é clicado.
target : Contexto no qual abrir o recurso de link.
hreflang : Idioma do URL segmentado.
media : URL otimizado para mídia ou dispositivo.
rel : Relação entre URL e documento.
type : tipo de mídia de URL
Veja o exemplo no código Html!
<!DOCTYPE html>
<html>
<body>
<img src="html-css-jquery.png" alt="" width="300" height="119" usemap="#shapemap" />
<map name="shapemap">
<area shape="poly" coords="59,31,28,83,91,83" href= "imagem-html.png" alt="Triangle">
<area shape="circle" coords="155,56,26" href="imagem-css.png" alt="Circle">
<area shape="rect" coords="224,30,276,82" href= "imagem-jquery.png" alt="Square">
</map>
</body>
</html>
<aside>
HTML aside – Como utilizar o elemento semântico aside
O elemento HTML <aside> representa uma seção de uma página
que consiste de conteúdo que é tangencialmente relacionado ao
conteúdo do seu entorno, que poderia ser considerado separado do
conteúdo principal.
Essas seções são, representadas como barras laterais. também
conhecidas como sidebar.
Veremos aqui a definição e Uso na prática.
A tag <aside> define algum conteúdo além do conteúdo em que é
colocada.
O conteúdo aparte deve estar indiretamente relacionado ao
conteúdo circundante.
Dica: O <aside> conteúdo geralmente é colocado como uma barra
lateral em um documento.
O elemento <aside> não é renderizado como algo especial em um
navegador.
No entanto podemos usar CSS para definir o estilo do elemento
aisde
Veja o exemplo abaixo
Aside Html – Como utilizar o elemento semântico aside
<h1>O elemento aside</h1>
<p>O HTML semântico foi criado para dar sentido as tags, tornando
ele mais legível tanto para programadores quanto para mecanismos
de busca como o Google.</p>
<aside>
<p>
Loop Nerd é um blog que posta códigos Html e css prontos.
Neste artigo estamos abordando sobre a (tag aside)
</p>
</aside>
<p>Mais sobre o TAGS do HTML semântico nos próximos artigos</p>
https://pt.wikipedia.org/wiki/HTML5
<article>
HTML article – Onde e como usamos tag article no HTML5
O elemento <article> identifica uma parte independente de
conteúdo que poderia, teoricamente,ser distribuída para outros sites e
plataformas como uma unidade independente. O elemento <article> é
uma ótima opção para conter postagens inteiras de blog, artigos
de notícias e conteúdo semelhante.
Definição e Uso
A tag <article> especifica conteúdo independente e autocontido.
Um artigo deve fazer sentido por si só e deve ser possível distribuí-
lo independentemente do resto do site.
Fontes potenciais para o elemento <article>:
Postagem em blogs, Fóruns e Portais de Notícias.
Veja suas principais utilizações onde devemos usar a tag <article>:
Para agrupar conteúdo que faz sentido junto conteúdo
independente;
Para um grupo de elementos que tem um titulo a tag article
precisa de um título;
É um conteúdo independente. Não precisa do resto do site
para contextualizar
article pode ser colocado em qualquer parte do site que ainda
pode fazer sentido sozinho;
A tag <article> de ser utilizada em blogs, trabalhos, forum de
posts, novos artigos, comentários.
Exemplo prático
<article>
<h2>Html5</h2>
<p>HTML5 é a versão mais recente e aprimorada do HTML. Tecnicamente, HTML não é uma linguagem
de programação, mas sim uma linguagem de marcação</p>
</article>
<article>
<h2>Css3</h2>
https://www.loopnerd.com.br/codigos-html-prontos/html-article
https://www.loopnerd.com.br/codigos-html-prontos/
https://pt.wikipedia.org/wiki/HTML5
<p>CSS3 - Tutorial. Cascading Style Sheets (CSS) é uma linguagem de folha de estilo usada para
descrever o visual e a formatação de um documento escrito em uma linguagem de marcação.</p>
</article>
<article>
<h2>jQuery</h2>
<p> jQuery é uma biblioteca JavaScript rápida, pequena e rica em recursos. Ele torna coisas como
transversão e manipulação de documentos HTML, manipulação de eventos,</p>
</article>
O elemento <article> não é renderizado como algo especial em um
navegador. No entanto, você pode usar CSS para definir o estilo
do elemento <article>
Neste artigo abordamos sobre: Article Html – Onde usamos tag
article no Html.
<button>
HTML Button
O Elemento HTML <button> representa um botão clicável.
A tag <button> no HTML faz parte do conjunto de elementos da
linguagem de marcação. Esse elemento tem a função de executar
algo ao receber um clique pelo usuário. Por isso é um recurso muito
útil em formulários HTML.
A tag <button>
O HTML Button pode ser definido pela tag de abertura <button> e a
tag de fechamento </button>. Dentro de um elemento <button>,
podemos colocar conteúdo, como texto, icones ou imagem. Essa é a
principal diferença entre esse elemento e os botões criados com o
elemento <input>.
Veja o exemplo abaixo:
<button>Clique</button>
Atributos do HTML Button
O HTML Button é um elemento que permite o uso dos atributos
globais e atributos de eventos.
Além desses, veja também os seguintes atributos:
autofocus – especifica que ao ler a página, esse botão recebe um
auto foco.
disabled – especifica que esse botão está desabilitado.
https://www.loopnerd.com.br/codigos-html-prontos/html-button/
https://www.loopnerd.com.br/tag/codigos-html/
form id – especifica um ou mais botões para formulários.
action – especifica a URL a qual será enviado as informações
do formulário.
method – (get ou post) especifica o método de envio do formulário.
name – especifica um nome ao botão.
type – especifica um tipo ao botão.
value – especifica uma valor inicial ao botão.
Esses atributos, são os mais importante a ser declarado e no HTML
Button o type, que pode exercer diferentes características nos
diversos navegadores.
Boa parte desses botões são utilizados como input, A vantagem de
utilizar o HTML Button é a liberdade de estilização permitida através
do CSS, além de poder incluir elementos como ícones.
O atributo type
O tipo de HTML Button.
O possíveis valores são:
submit: O botão envia os dados do formulário para o servidor. Esse
é o padrão se o atributo não for especificado, ou se o atributo é
dinamicamente mudado para um valor vazio, ou inválido.
reset: O botão Reseta os valores iniciais dos campos.
button: O botão não possui comportamento padrão. Ele pode conter
scripts. associado com os eventos do elemento, no qual são
acionados quando o evento ocorrer quando clicado.
Veja o exemplo abaixo:
<form>
<input type="text">
<button type="submit">Enviar Dados</button>
</form>
Usando eventos de click no script veja o exemplo abaixo:
https://www.loopnerd.com.br/tag/formulario/
https://www.w3.org/html/
<!DOCTYPE html>
<html>
<head>
<title>Blog Loop Nerd - Códigos Html e Css Prontos</title>
<script>
function LoopNerd(){
alert("Acabei de clicar no Button HTML!");
}
</script>
</head>
<body>
<input type="button" onclick="LoopNerd()" value="Exibir Alerta" />
</body>
</html>
Ao clicar no botão chamamos a função evento, ou seja, um alerta
com o texto (Acabei de clicar no Button HTML!).
Input do tipo Button
Também é possível chamar um input do tipo botão, com o
atributo type button.
<input type="button" value="Enviar Dados">
Veja na pratica abaixo:
<form>
<input type="button" value="Enviar Dados">
</form>
<base>
HTML base
A tag HTML <base> define uma URL base que será usada para
todas as URLs relativas em um documento HTML.
Só pode haver uma tag <base> em um documento HTML e ela deve
ser definida dentro da tag <head> .
A tag <base> deve aparecer no documento antes que qualquer URL
relativa seja usada.
https://www.loopnerd.com.br/codigos-html-prontos/html-base/
https://developer.mozilla.org/pt-BR/docs/Web/HTML
A base HTML é usada para especificar um URI base, ou URL,
para links relativos. Este URL será o URL base para cada link na
página e será prefixado antes de cada um deles.
Por exemplo, se o URL especificado pela tag base for
“www.loopnerd.com.br” e todos os outros URLs da página terão o
prefixo “www.loopnerd.com/”.
Pontos Importantes :
A tag base deve ser definida entre as tags <head></head>.
Pode haver no máximo apenas 1 tag base em uma página.
Especifique um URL padrão e um destino padrão para todos os links
em uma página:
Veja o exemplo no código em html:
<head>
<base href="https://www.loopnerd.com.br/html/">
</head>
<body>
<a href="index.php">Códigos HTML Pronto</a>
</body>
Como o destino do link para a tag <a> é um URL relativo, o URL para
a tag <a> se
tornaria https://www.loopnerd.com.br/html/index.php independente de onde
essa página foi salva em um site.
<bdi>
Html bdi
A tag html <bdi> significa isolamento bidirecional.
A tag <bdi> isola uma parte do texto que pode ser formatada em uma
direção diferente de outro texto fora dela.
Esse elemento é útil ao incorporar conteúdo gerado pelo usuário
com uma direção de texto desconhecida.
Sintaxe
A tag <bdi> vem em pares. O conteúdo é escrito entre as tags de
abertura (<bdi>) e de fechamento (</bdi>).
Definição e uso Html bdi
A tag <bdi> envolve uma extensão de texto e funciona das
seguintes maneiras:
https://www.loopnerd.com.br/codigos-html-prontos/
https://www.loopnerd.com.br/codigos-html-prontos/html-bdi/
https://developer.mozilla.org/en-US/docs/Learn/HTML
A direcionalidade do texto incorporado na tag <bdi> não afeta a
direcionalidade do texto ao redor.
A direcionalidade do texto ao redor não afeta a direcionalidade do
texto incorporado na tag <bdi>.
A tag <bdi> é semelhante à tag <bdo> mais antiga . O
elemento <bdi> isola o texto contido do texto ao seu redor, enquanto
<bdo> apenas inverte a direção. Geralmente é recomendado
usar <bdi> para evitar problemas de renderização inesperados que
podem surgir com <bdo>.
Veja o exemplo no código abaixo
No exemplo abaixo, os nomes de usuário são mostrados junto com
o número de pontos em um concurso. Se o elemento bdi não for
suportado no navegador, o nome deusuário do usuário árabe
confundiria o texto (o algoritmo bidirecional colocaria os dois
pontos e o número “100” ao lado da palavra “Usuário” em vez de
ao lado da palavra “pontos “).
<ul>
<li>Usuário <bdi>hrefs</bdi>: 30 pontos</li>
<li>Usuário <bdi>jdoe</bdi>: 78 pontos</li>
<li>Usuário <bdi>إيان</bdi>: 100 pontos</li>
</ul>
<blockquote>
HTML blockquote
A tag HTML <blockquote> é usada para exibir as citações
longas (uma seção que é citada de outra fonte).
Ele altera o alinhamento para torná-lo único dos outros. Ele contém
tags de abertura e fechamento. Na tag <blockquote>, podemos usar
elementos como título, lista, parágrafo, etc.
Os navegadores tradicionalmente renderizam o texto encontrado na
tag <blockquote> como texto recuado.
Sintaxe:
<blockquote> Conteúdo aqui... </blockquote>
Atributo: Contém um único atributo cite que é usado para especificar
a fonte da citação.
https://www.loopnerd.com.br/tag/tags-html/
https://www.loopnerd.com.br/codigos-html-prontos/html-blockquote/
https://www.loopnerd.com.br/tag/tags-html/
<!DOCTYPE html>
<html>
<body>
<h1> Tag HTMl <blockquote> </h1>
<blockquote cite="https://www.loopnerd.com.br/">
<p>
Guia de Referência Html e Css
Do Básico ao Avançado (+Principais Tags)
</p>
</blockquote>
</body>
</html>
Observação
O elemento HTML <blockquote> é encontrado na tag <body> .
Para uma breve cotação embutida, use a tag <q> .
A maioria dos navegadores renderizará o texto dentro da tag
<blockquote> como texto recuado, mas você pode alterar esse
comportamento com CSS.
<body>
HTML body
A tag <body> HTML é usada para definir o conteúdo principal
presente dentro de uma página HTML.
Está sempre dentro da tag <html>. A tag <body> é o último filho da tag
<html>. Uma tag body contém uma tag inicial e uma tag final.
Exemplo na prática:
<body> Conteúdo do body na página... </body>
Definição e uso
A Tag <body> define o corpo do documento html.
O elemento <body> contém todo o conteúdo de um documento HTML,
como Títulos, Parágrafos, Imagens, Hiperlinks, Tabelas, Listas,
etc.
OBS: Só pode haver um <body> elemento em um documento HTML.
Veja o exemplo no código Html.
<!DOCTYPE html>
https://developer.mozilla.org/pt-BR/docs/Web/HTML
https://www.loopnerd.com.br/codigos-html-prontos/html-body/
https://www.loopnerd.com.br/tag/codigos-html/
https://developer.mozilla.org/pt-BR/docs/Web/HTML
<html>
<head>
<title>Loop Nerd</title>
</head>
<body>
<h1>Códigos Html e Css Prontos</h1>
<p>Guia de Referência Html e Css</p>
</body>
</html>
<br>
HTML br
Neste artigo, veremos como adicionar quebra de linha usando a
tag HTML <br> . O navegador não reconhece a nova formatação de
linha e parágrafo no texto.
Se você deseja iniciar uma nova linha, você precisa inserir uma
quebra de linha com a ajuda do <br>.
A tag HTML <br> define uma quebra de linha no texto do
documento HTML. Este elemento não tem tag final.
Exemplo: Neste exemplo, usamos a tag <br> para quebrar a linha do
conteúdo.
Veja o exemplo no Código HTML!
<!DOCTYPE html>
<html>
<body>
<h1>Loop Nerd</h1>
<p>Olá Nerds! <br> Sejam Bem vindos no Blog.</p>
</body>
</html>
Veja o Resultado abaixo.
Olá Nerds!
Sejam Bem vindos no Blog.
Dica: Use a Tag <br> para inserir quebras de linha, não para adicionar
espaço entre parágrafos.
https://www.loopnerd.com.br/codigos-html-prontos/html-br/
https://www.loopnerd.com.br/codigos-html-prontos/
https://developer.mozilla.org/pt-BR/docs/Web/HTML
<b>
HTML b
Uma tag <b> especifica texto em negrito sem qualquer importância
extra.
A tag HTML <b> apenas dá ao texto uma aparência em negrito,
mas não fornece nenhum significado semântico ao texto.
DICA: A tag HTML <b> não deve ser confundida com a tag
<strong> que dá uma ênfase forte ao texto.
Veja o exemplo do código abaixo.
<p><b>Códigos Html Prontos</b> Tags Html</p>
Veja o Resultado do código acima entre a tag <b>.
Códigos Html Prontos Tags Html
O elemento HTML <b> é encontrado na tag <body> .
A tag <b> é usada para texto em negrito, mas não enfatiza o texto
como a tag <strong> .
Na maioria dos casos, é recomendável usar a tag <strong> em vez
da tag <b>.
A tag <b> em HTML é usada para especificar o texto em negrito
sem nenhuma importância extra. O texto é escrito dentro da tag <b>
em negrito. Você pode fazer isso usando font-weight:
bold; propriedade em CSS. É uma tag de contêiner que contém uma
tag de abertura, conteúdo e tag de fechamento. Existe uma tag
semelhante, a tag <strong> , que é a tag analisada e usada para
mostrar a importância do texto e tem um efeito semelhante no
conteúdo.
De acordo com a especificação HTML5, a tag <b> deve ser usada
como última opção a ser usada quando nenhuma outra tag for mais
apropriada. A especificação HTML5 afirma que, para títulos, deve ser
representado pelas tags <h1> a <h6> , para texto enfatizado, deve ser
representado pela tag <em> e similarmente, o texto importante
pela tag <strong> , & para texto marcado/realçado, deve ser indicado
com a tag <mark> .
Neste artigo abordamos sobre a tag Html b.
Lembrando que, ela apenas dá ao texto uma aparência em negrito,
mas não fornece nenhum significado semântico ao texto.
https://www.loopnerd.com.br/codigos-html-prontos/html-b/
https://www.loopnerd.com.br/tag/html/
https://developer.mozilla.org/pt-BR/docs/Web/HTML
https://www.loopnerd.com.br/codigos-html-prontos/h1-html-para-que-serve/
<canvas>
HTML canvas
Canvas é um elemento HTML que pode ser usado para desenhar
usando linguagem de “script” (normalmente JavaScript). Isto pode ser
usado, por exemplo, para desenhar gráficos, fazer composições de
fotos ou simples (e não tão simples) animações.
Ele pode ser usado para desenhar caminhos, caixas, textos,
gradientes e adicionar imagens. Por padrão, ele não contém bordas e
texto.
Os gráficos reais dentro deste contêiner são desenhados
usando tags <script>.
Nota: A tag <canvas> é nova no HTML5.
Sintaxe
Em HTML, a sintaxe para a tag <canvas> é: ( exemplo desenha
uma caixa chanfrada laranja usando tags <script> e a exibe
dentro da tag <canvas> )
Exemplo no código Html.
<body>
<canvas id="mycanvas" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#ff9600";
ctx.fillRect(25, 25, 100, 100);
ctx.clearRect(45, 45, 60, 60);
ctx.strokeRect(50, 50, 50, 50);
</script>
</body>
A tag <canvas> atua como um contêiner para os gráficos. Todos os
gráficos são desenhados fora da tag <canvas> usando uma tag
<script> com a API de script de tela ou a API WebGL.
https://www.loopnerd.com.br/codigos-html-prontos/html-canvas/
https://www.loopnerd.com.br/codigos-html-prontos/
https://developer.mozilla.org/pt-BR/docs/Web/HTML
<caption>
HTML caption
A tag caption é usada para especificar a legenda de uma
tabela. Esta tag será inserida logo após a tag <table>. Apenas uma
legenda pode ser especificada para uma tabela. Por padrão, é
alinhado ao centro.
<caption align = "center" ></caption>
Atributos:
align : Este atributo é usado para especificar o alinhamento do
conteúdo do texto.
Veja o exemplo abaixo da a tag HTML <caption> no código:
<body>
<table>
<caption>Web Developer</caption>
<tr>
<th>Front-end</th>
<th>Back-end</th>
</tr>
<tr>
<td>Html</td>
<td>Css</td>
</tr>
<tr>
<td>Php</td>
<td>Mysql</td>
</tr>
</table>
</body>
Veja o Resultado Abaixo !
Front-end Back-end
Html Php
Css Mysql
Definição e uso da Tag caption
A tag <caption> define uma legenda de tabela. devemos inserir a tag
caption imediatamente após a tag <table>.
A tag <caption> é a primeira tag a aparecer após a tag <table> .
https://www.loopnerd.com.br/codigos-html-prontos/html-caption/
https://www.loopnerd.com.br/codigos-html-prontos/https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/table
A tag <table> é composta pelas tags <tr> , <th> e <td> .
A tag <tr> define as linhas da tabela. Deve haver pelo menos uma
linha na tabela.
A tag <th> define as células de cabeçalho na tabela que são
exibidas como texto em negrito e alinhado ao centro.
A tag <td> define as células padrão na tabela que são exibidas
como texto de peso normal, alinhado à esquerda.
A maioria dos navegadores renderizará a tag <caption> acima da
tabela, mas você pode alterar esse comportamento com
a propriedade CSS caption-side .
Dica: Por padrão a legenda da tabela será alinhada ao centro acima
de uma tabela.
Portanto as propriedades CSS text-align e caption-side podem ser
usadas para alinhar e colocar a legenda.
<cite>
HTML – cite
A tag HTML <cite> define o título de um trabalho criativo como um
filme, livro, literatura, escultura, pintura ou desenho. Os navegadores
tradicionalmente renderizam o texto encontrado na tag <cite> como
texto em itálico.
Veja o exemplo no Código HTML, a tag <cite>
Defina o título de um trabalho com a tag <cite>:
<p><cite>O Senhor dos Anéis</cite> é um livro de alta fantasia, escrito pelo escritor britânico J. R. R.
Tolkien..</p>
Veja o Resultado abaixo!
O Senhor dos Anéis é um livro de alta fantasia, escrito pelo escritor
britânico J. R. R. Tolkien..
A tag <cite> deve incluir o título do trabalho criativo e não o autor.
https://www.loopnerd.com.br/codigos-html-prontos/html-cite/
https://www.loopnerd.com.br/tag/tags-html-lista-completa/
https://developer.mozilla.org/pt-BR/docs/Web/HTML
Os navegadores tradicionalmente renderizam o texto encontrado
na tag <cite> como texto em itálico. Você pode alterar esse
comportamento com CSS usando a propriedade font-style .
Veja outro exemplo!
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Loop Nerd</title>
</head>
<body>
<h1>Loop Nerd</h1>
<p>Minha Série favorita é <cite>Arrow</cite>.</p>
</body>
</html>
<code>
HTML code
A tag <code> em HTML é usada para definir a parte do código do
computador. Durante a criação de páginas da Web.
Ás vezes é necessário exibir o código de programação do
computador. Isso pode ser feito por qualquer tag de cabeçalho básico
de HTML, Portanto o HTML fornece uma tag separada que chamada
<code>.
A tag de código é um tipo específico de texto que representa a
saída do computador. O HTML fornece muitos métodos para
formatação de texto, no entanto a tag <code> é exibida com tamanho
de letra, fonte e espaçamento fixos.
Veja o exemplo na pratica!
Definindo o texto como código de computador em um documento:
<p>O elemento <code>select</code> é usado para criar uma lista suspensa.</p>
<p>O CSS <code>font-size</code>, Esta propriedade define o tamanho da fonte no css.</p>
Veja o Resultado!
O elemento select é usado para criar uma lista suspensa.
O CSS font-size, Esta propriedade define o tamanho da fonte no css.
Definição e uso.
https://www.loopnerd.com.br/codigos-html-prontos/html-code/
https://www.loopnerd.com.br/tag/tags-html-lista-completa/
https://www.loopnerd.com.br/tag/html/
https://developer.mozilla.org/pt-BR/docs/Web/HTML
A tag <code> é usada para definir um pedaço de código de
computador. O conteúdo interno é exibido na fonte monoespaçada
padrão do navegador.
É usado principalmente para exibir o trecho de código no
navegador da web.
Essa tag estiliza seu elemento para corresponder ao formato de
texto padrão do computador.
Os navegadores da Web, por padrão, usam uma família de fontes
monoespaçadas para exibir o conteúdo do elemento das tags
<code>.
A maioria dos navegadores exibirá o <code> elemento com os
seguintes valores padrão:
code {
font-family: monospace;
}
<col>
HTML col é usada para definir as propriedades de coluna para cada
coluna dentro de uma tag <colgroup>.
Esta tag é usada para definir a propriedade de estilo para cada
coluna.
OBS: Esta tag não contém tags de fechamento.
Veja o Exemplo no código HTML.
<table>
<colgroup>
<col span="1" style="background-color: blue" />
<col span="1" style="background-color: orange;" />
<col span="1" style="background-color: #f4f4f4;" />
</colgroup>
<tr>
<th>Front-end</th>
<th>Back-end</th>
<th>Templates</th>
</tr>
<tr>
<td>Html</td>
https://www.loopnerd.com.br/codigos-html-prontos/html-col/
https://www.loopnerd.com.br/tag/html-table/
https://developer.mozilla.org/pt-BR/docs/Web/HTML
<td>PHP</td>
<td>Responsivas</td>
</tr>
<tr>
<td>Css3</td>
<td>MySql</td>
<td>Sites onepage</td>
</tr>
</table>
Veja os Atributos que podem ser usados com a tag <col> logo
abaixo.
span : é usado para definir o número de colunas em que a
propriedade será aplicada.
style : Este atributo é usado para definir o CSS para alterar as
propriedades da coluna.
align : Este atributo é usado para definir o alinhamento do
conteúdo do elemento <col>.
largura : É usado para especificar a largura de um elemento <col>.
charoff : É usado para especificar o número de caracteres que o
conteúdo será alinhado a partir do caractere especificado pelo
atributo char.
Definição e uso da Tag <col>
A tag <col> especifica as propriedades da coluna para cada coluna
dentro de um elemento <colgroup> .
A tag <col> é útil para aplicar estilos a colunas inteiras, em vez de
repetir os estilos para cada célula, para cada linha.
<colgroup>
HTML colgroup
A tag HTML <colgroup> agrupa um conjunto de colunas em
uma tabela HTML para que você possa aplicar formatação ou
adicionar classes ao grupo em vez de cada célula individual.
Definição e uso da Tag <colgroup>.
https://www.loopnerd.com.br/codigos-html-prontos/html-colgroup/
https://www.loopnerd.com.br/tag/html-table/
A Tag <colgroup> especifica um grupo de uma ou mais colunas em
uma tabela para formatação.
A Tag <colgroup> é útil para aplicar estilos a colunas inteiras, em vez de
repetir os estilos para cada célula, para cada linha.
Observação: a tag <colgroup> deve ser filha de um elemento <table>,
após qualquer elemento <caption> e antes de qualquer elemento
<thead>, <tbody>, <tfoot> e <tr>.
Para definir diferentes propriedades para uma coluna dentro de
um <colgroup>, use a tag <col> dentro da tag <colgroup>.
Veja o exemplo no código Html.
Para definir a cor de fundo das três colunas com as tags <colgroup>
e <col>:
<table>
<colgroup>
<col style="background-color:yellow; ">
<col style="background-color:orange; ">
<col style="background-color:green; ">
</colgroup>
<tr>
<th>Frutas</th>
<th>Legumes</th>
<th>Verduras</th>
</tr>
<tr>
<td>Morango</td>
<td>Batata</td>
<td>Couve</td>
</tr>
</table>
Veja outro exemplo!
Se você quiser que as duas colunas fique da mesma cor adicione
o <col span="2">.
<table>
<colgroup>
<col span="2" style="background-color:yellow;">
<col style="background-color:green;">
</colgroup>
<tr>
<th>Frutas</th>
<th>Legumes</th>
https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/table
https://www.loopnerd.com.br/codigos-html-prontos/html-col/
<th>Verduras</th>
</tr>
<tr>
<td>Morango</td>
<td>Batata</td>
<td>Couve</td>
</tr>
</table>
<class>
HTML class
O atributo class no HTML é usado para especificar uma classe
para um elemento HTML.
Vários elementos HTML podem compartilhar a mesma classe.
Utilizando o atributo class no html
O atributo class é usado para apontar para um nome de classe em
uma folha de estilo.
Ele também pode ser usado por um JavaScript para acessar e
manipular elementos com o nome de classe específico.
Segui os exemplos a abaixo como trabalhar com class.
1. Veja como Destacar uma palavra usando apenas uma class.
.azul-claro { color:#1acabc; font-weight: bold; }
<p>Veja o exemplo: como <span class="azul-claro">Destacar</span>uma palavra usando apenas uma
class. </p>
2. Veja como Destacar a cor do texto em um paragrafo usando
apenas uma class.
.cor-azul { color:#3875ff; }
.cor-vermelho { color:#ff3838; }
.cor-verde { color:#8bd577; }
<p class="cor-azul">Veja o exemplo texto na class com a cor <b>Azul</b>. </p>
<p class="cor-vermelho">Veja o exemplo texto na class com a cor <b>Vermelho</b>. </p>
<p class="cor-verde">Veja o exemplo texto na class com a cor <b>Verde</b>. </p>
3. Veja como Destacar o paragrafo usando apenas uma class para
dar um margim bottom.
https://www.loopnerd.com.br/codigos-html-prontos/html-class/
https://www.loopnerd.com.br/codigos-pronto/conheca-as-principais-tags-semanticas-do-html5/
https://pt.wikipedia.org/wiki/HTML
.m-b-5 { margin-bottom:5px; }
.m-b-30 { margin-bottom:30px; }
.m-b-40 { margin-bottom:40px; }
<p class="cor-azul m-b-5">Veja o exemplo texto na class com uma margem bottom 5px. </p>
<p class="cor-vermelho m-b-30">Veja o exemplo texto na class com uma margem bottom 30px. </p>
<p class="cor-verde m-b-40">Veja o exemplo texto na class com com uma margem bottom 40px. </p>
4. Veja como Mudar a cor do fundo de uma DIV usando apenas uma
class.
.background-azul { background-color:#3875ff; padding:10px; }
.texto-branco { color:#ffffff; }
.background-preto { background-color:#151515; padding:10px;}
.texto-vermelho { color:#d50b0b; }
<div class="background-preto texto-vermelho m-b-20">
Veja o fundo dessa DIV com a cor <b>PRETO</b> e o texto Vermelho.
</div>
<div class="background-azul texto-branco">
Veja o fundo dessa DIV com a cor <b>AZUL</b> e o Texto Branco.
</div>
5. Veja como Centralizar o TEXTO apenas adicionando uma class.
.centraliza-txt { text-align:center; }
<div class="background-azul texto-branco m-b-20 centraliza-txt">
Veja o fundo dessa DIV com a cor <b>AZUL</b> e o Texto Branco Centralizado.
</div>
O atributo class pode ser usado em qualquer elemento HTML.
Classes Múltiplas
Os elementos HTML podem pertencer a mais de uma classe ou
podemos usar separadas.
Para definir várias classes, separe os nomes das classes com um
espaço, por exemplo.
Repare que temos as class:
.background-azul: Cor do fundo azul
.texto-branco: Cor do texto branco
.m-b-20: Margim bottom de 20px
.centraliza-txt: Centraliza o texto
<div class="background-azul texto-branco m-b-20 centraliza-txt">
Veja o fundo dessa DIV com a cor <b>AZUL</b> e o Texto Branco Centralizado.
</div>
Usando class com os nomes certinhos e bem organizado você
pode reutilizar e economizar tempo.
ou seja crie um style CSS padrão para você reutilizar nos seus
projetos.
<data>
Html data
A tag <data> é usada para adicionar uma tradução legível por
máquina de um determinado conteúdo.
Esse elemento fornece um valor legível por máquina para
processadores de dados e um valor legível por humanos para
renderização em um navegador.
Veja o exemplo no código abaixo
Veja que os nomes de produtos, associa cada nome a um número
de produto:
<h2>Produtos</h2>
<ul>
<li><data value="2130">Botas</data></li>
<li><data value="2131">Tênis</data></li>
<li><data value="2132">Sapatos</data></li>
</ul>
Atributos
Atributos: Esta tag aceita um único atributo conforme mencionado
acima e descrito abaixo.
value: contém uma única tradução legível por máquina do
conteúdo.
Observação: se o conteúdo for relacionado a data ou hora, use o
elemento <time> em vez do elemento data.
Conclusão html data
https://www.loopnerd.com.br/codigos-html-prontos/html-data/
https://www.loopnerd.com.br/tag/tags-html-lista-completa/
A tag html <data> pode ser útil nos casos em que os dados devem
estar em um formato específico necessário para executar scripts, mas
você não deseja que seus usuários vejam esse formato.
Por exemplo, você deseja exibir uma lista de produtos para seus
usuários escolherem. Cada produto tem seu ID, mas você não deseja
mostrar essas informações aos seus usuários. Em seguida, você
coloca os IDs do produto na tag <data>, e a máquina processará
essas informações e mostrará aos usuários o produto com o ID
correspondente.
<datalist>
HTML datalist
A tag HTML <datalist> é um elemento do HTML5 que define uma
lista de valores sugeridos para uma tag <input> . Esses valores
sugeridos são listados no controle de entrada como uma lista
suspensa e as opções disponíveis serão filtradas conforme o usuário
insere dados no controle de entrada.
Veja o exemplo uma lista de dados com opções pré-
definidas conectadas a um elemento <input>:
<label for="tutorial">Selecione uma opção:</label>
<input list="frontend" name="tutorial" id="tutorial">
<datalist id="frontend">
<option value="Html5">
<option value="Css3">
<option value="jQuery">
<option value="JavaScript">
<option value="Design Responsivo">
</datalist>
Para associar um <datalist> a um controle <input> , você deve
especificar um id valor para o <datalist> que corresponda ao
atributo list no <input>: ( neste exemplo, o valor “frontend” )
Veja o Resultado!
Selecione uma opção:
Definição e uso
https://developer.mozilla.org/pt-BR/docs/Learn/Getting_started_with_the_web/HTML_basics
https://www.loopnerd.com.br/codigos-html-prontos/html-datalist/
https://www.loopnerd.com.br/codigos-html-prontos/conheca-as-principais-tags-semanticas-do-html5/
https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/input
A tag <datalist> especifica uma lista de opções predefinidas para um
elemento <input>.
A tag <datalist> é usada para fornecer um recurso de “autocomplete”
para elementos <input>. Os usuários verão uma lista suspensa de
opções predefinidas à medida que inserem dados.
O atributo <datalist> id do elemento deve ser igual ao atributo list do
elemento <input> (isso os une).
Neste artigo abordamos sobre a tag HTML datalist.
<dl>
HTML dl
A tag HTML <dl> é usada para definir uma lista de descrição no
documento HTML. Uma lista de descrição é uma lista de termos
agrupados encontrada na tag <dt> e uma descrição
correspondente encontrada na tag <dd>.
Veja o exemplo no codigo HTML, a sintaxe para a tag <dl>
Uma lista de descrição, com termos e descrições:
<dl>
<dt>Termo A</dt>
<dd>Descrição para o Termo A<dd>
<dt>Termo B</dt>
<dd>Descrição para o Termo B<dd>
</dl>
Definição e uso da tag <dl>
A tag <dl> define uma lista de descrição. e é usada em conjunto
com <dt> (define termos/nomes) e <dd> descreve cada termo nome.
<dt>
HTML dt
A tag HTML <dt> é usada para especificar a lista de descrição. É
usado dentro do elemento <dl>. Geralmente é seguido por uma tag
<dd> . Os elementos <dd> subsequentes fornecem algum texto
relacionado associado ao termo especificado usando <dt>.
Veja o exemplo no código HTML
https://www.loopnerd.com.br/codigos-html-prontos/html-dl/
https://developer.mozilla.org/pt-BR/docs/Web/HTML
https://www.loopnerd.com.br/tag/codigos-html/
https://www.loopnerd.com.br/codigos-html-prontos/html-dt/
https://developer.mozilla.org/pt-BR/docs/Web/HTML
Uma lista de descrição, com termos e descrições:
<dl>
<dt>HTML</dt>
<dd>Linguagem de Marcação de Hipertexto<dd>
<dt>CSS</dt>
<dd>
O Cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e
utilizada para definir a apresentação (aparência) em páginas da internet
<dd>
</dl>
Definição e uso da tag <dt>
A <dt> tag define um termo/nome em uma lista de descrição.
A tag HTML <dt> é usada em conjunto com <dl> (define uma lista de
descrição) e <dd> (descreve cada termo/nome).
O elemento <dt> é encontrado dentro da tag <body> e deve estar
dentro de uma tag <dl> da lista de descrição.
Para cada grupo ( ou seja: par termo/descrição ) na lista de
descrição, deve haver pelo menos uma tag <dt> seguida de pelo
menos uma tag <dd>.
<dd>
HTML dd
A tag HTML <dd> é usadapara oferecer uma descrição ou
definição para o termo encontrado na tag <dt> anterior em uma lista
de descrição tag <dl> no documento HTML.
O Significado da tag <dd>, (descrição de definição) e é usada
para denotar a descrição ou definição de um item em uma lista de
descrição.
Veja o exemplo a sintaxe para a tag <dd> no código
HTML:
<dl>
<dt>HTML</dt>
<dd>Linguagem de Marcação de Hipertexto<dd>
<dt>CSS</dt>
<dd>
O Cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e
https://www.loopnerd.com.br/tag/html-dl/
https://www.loopnerd.com.br/tag/html-dd/
https://www.loopnerd.com.br/codigos-html-prontos/html-dd/
https://developer.mozilla.org/pt-BR/docs/Web/HTML
https://www.loopnerd.com.br/tag/html/
utilizada para definir a apresentação (aparência) em páginas da internet
<dd>
</dl>
Resumo e uso:
A tag <dd> é usada para descrever um termo, nome em uma lista de
descrição.
A tag <dd> é também usada em conjunto com <dl> (define uma lista
de descrição) e <dt> (define termos/nomes).
Dentro da tag <dd> você pode colocar parágrafos, quebras de linha,
imagens, links, listas, etc.
Neste artigos abordamos sobre a tag HTML dd.
<dfn>
HTML dfn
A tag <dfn> em HTML representa o elemento de definição e é
usada para representar uma instância de definição em
HTML. Geralmente, a instância de definição é o primeiro uso de um
termo em um documento.
A tag <dfn> requer uma tag inicial e uma tag final.
Veja o exemplo no código HTML abaixo.
Marcando um termo com <dfn></dfn>:
<p><dfn>HTML</dfn> é a linguagem de marcação padrão para criar páginas da web.</p>
Veja o Resultado!
HTML é a linguagem de marcação padrão para criar páginas da
web.
Podemos também adicionar o atributo title na tag <dfn>
veja no exemplo abaixo.
<p><dfn title="Cascading Style Sheets">CSS</dfn> é uma linguagem de estilo usada para descrever a
apresentação de um documento escrito em HTML ou em XML</p>
CSS é uma linguagem de estilo usada para descrever a
apresentação de um documento escrito em HTML ou em XML
A tag HTML <dfn> é usada para indicar que o termo encontrado na
tag <dfn> está sendo definido no contexto atual. Os navegadores
https://www.loopnerd.com.br/codigos-html-prontos/html-dfn/
https://www.loopnerd.com.br/codigos-html-prontos/
https://developer.mozilla.org/pt-BR/docs/Web/HTML
tradicionalmente formatam o texto encontrado na tag <dfn> em
itálico. Você pode alterar esse comportamento aplicando o CSS.
Neste artigo, criamos tag HTML dfn que identifica termo HTML que
é definido dentro da tag de parágrafo atual.
<dialog>
Html dialog
A tag html <dialog> é um dos elementos HTML5 . Ele é usado
para criar uma caixa de diálogo nativa, com a qual o usuário interage e
executa determinadas ações. Por exemplo, você pode criar
mensagens ou formulários pop-up com esse elemento. A caixa de
diálogo fica oculta por padrão. É ativado pelo atributo open.
Para exibir/ocultar o conteúdo, precisamos da API Javascript.
Veja o exemplo no código abaixo.
<dialog open>Esta é uma janela de diálogo aberta</dialog>
Veja o código completo com o script
<!DOCTYPE html>
<html>
<head>
<title>Dialog</title>
<style>
dialog { width:50%; }
</style>
</head>
<body>
<div>
<dialog id="DialogBox">
<p>
Escreva seu texto aqui.
</p>
<button id="hide">Fechar</button>
</dialog>
<button id="show">Texto do dialog modal</button>
</div>
<script type="text/JavaScript">
(function() {
var dialog = document.getElementById('DialogBox');
document.getElementById('show').onclick = function() { dialog.show(); };
https://www.loopnerd.com.br/codigos-html-prontos/html-dialog/
https://www.loopnerd.com.br/tag/html5/
document.getElementById('hide').onclick = function() { dialog.close(); };
})();
</script>
</body>
</html>
Definição e uso html dialog
A tag html <dialog> define uma caixa de diálogo ou sub janela.
O elemento <dialog> facilita a criação de diálogos pop-up e modais em
uma página da web.
<details>
Html details
A tag HTML <details> especifica detalhes adicionais que o usuário
pode abrir e fechar sob demanda.
A tag <details> é frequentemente usada para criar um widget
interativo que o usuário pode abrir e fechar. Por padrão, o widget é
fechado. Quando aberto, ele se expande e exibe o conteúdo dentro
dele.
Qualquer tipo de conteúdo pode ser colocado dentro da tag <details>.
Dica: A tag <summary> é usada em conjunto com <details>para
especificar um cabeçalho visível para os detalhes.
Use CSS para estilizar <details> e <summary>
<html>
<style>
details > summary {
padding: 5px;
width: 300px;
background-color: #eeeeee;
border: none;
box-shadow: 1px 1px 2px #bbbbbb;
cursor: pointer;
}
details > p {
background-color: #eeeeee;
padding: 5px;
margin: 0;
box-shadow: 1px 1px 2px #bbbbbb;
https://developer.mozilla.org/pt-BR/docs/Learn/Getting_started_with_the_web/HTML_basics
https://www.loopnerd.com.br/codigos-html-prontos/html-details/
https://developer.mozilla.org/pt-BR/docs/Web/HTML
https://www.loopnerd.com.br/codigos-html-prontos/html-summary/
}
</style>
<body>
<details>
<summary>Códigos Html</summary>
<p>
Sigla para HyperText Markup Language - Linguagem de Marcação de Hipertexto -, o HTML é o
componente base da web. Isso quer dizer que ele permite a construção de
websites e a inserção de novos conteúdos, como imagens e vídeos, por meio dos hipertextos.
</p>
</details>
</body>
</html>
<del>
HTML del
A tag <del> define o texto que foi excluído de um documento. Os
navegadores geralmente riscam uma linha através do texto excluído.
Os navegadores tradicionalmente renderizam o texto encontrado
na tag <del> como texto tachado. Além disso Você pode usar a tag
complementar chamada tag <ins> para marcar o novo texto que foi
inserido em um documento.
Veja o exemplo no código HTML
Um texto com uma parte excluída e uma nova parte inserida no
exemplo abaixo:
<p>Minha cor favorita é <del>Preto</del> <ins>Cinza</ins>!</p>
Minha cor favorita é Preto Cinza!
A maioria dos navegadores exibirá o <del> elemento com os
seguintes valores padrão:
del { text-decoration: line-through; }
<div>
HTML div – para que serve ?
https://www.loopnerd.com.br/codigos-html-prontos/html-del/
https://www.loopnerd.com.br/codigos-html-prontos/html-ins/
https://developer.mozilla.org/pt-BR/docs/Web/HTML
https://www.loopnerd.com.br/codigos-html-prontos/html-div/
A tag <div> define uma divisão ou seção em um documento HTML.
É usada como um contêiner para elementos HTML – que são
estilizados com CSS ou manipulados com JavaScript.
A tag <div> é facilmente estilizada usando o atributo class ou id.
Qualquer tipo de conteúdo pode ser colocado dentro da tag <div>!
Diante disso, o HTML Div é muito utilizada quando precisamos
agrupar elementos sem a necessidade do uso de um elemento
semântico do HTML5. Isso acontece pois o elemento div não possui
um valor semântico. Portanto, não representa nada para o navegador
e para os mecanismos de buscas.
Como é muito utilizado para agrupar elementos, acaba sendo um
facilitador para organizar informações dentro de um layout. Dessa
forma, é possível formatar e manipular os elementos, inclusive a
própria div, através do CSS de uma forma organizada. Geralmente é
acompanha de atributos de ID e classe, para poder facilitar essa
organização e formatação.
Como utilizar a Tag <div> no Html !
Veja mais sobre div Html – para que serve ?
A sintaxe do elemento HTML Div é através da tag de
abertura <div> e de fechamento </div>.
Portanto, para utilizar a <div> basta colocar os elementos que quiser
dentro da tag <div></div>
Veja o exemplo na pratica abaixo:
<div>
<p>Códigos Html Prontos</p>
</div>
Div com class para estlizar com css.
<div class="bloco-artigos">
<p>Códigos Html Prontos</p><p>Códigos Css Prontos</p>
</div>
Div com ID para ser manipulado por javascript.
<div id"modal">
<h1>Modal</h1>
<p>Texto da janela modal</p>
</div>
<label>
https://pt.wikipedia.org/wiki/HTML
https://www.loopnerd.com.br/codigos-html-prontos/html-label/
HTML label
A tag HTML <label> é usada para fornecer uma melhoria de
usabilidade para usuários de mouse, ou seja, se um usuário clicar no
texto dentro do elemento <label>, ele alterna o controle.
A tag <label> define o rótulo para o elemento <button>, <input>,
<meter>, <output>, <progress>, <select> ou <textarea>.
Primeiramente, use a tag <label> fornecendo o atributo <input> e
id. A tag <label> precisa de um atributo for cujo valor seja igual ao
ID de entrada.
Alternativamente, use a tag <input> diretamente dentro da tag
<label>. Nesse caso, os atributos for e id não são necessários
porque a associação é implícita.
A tag <label> pode ser usada de duas maneiras:
Valor do atributo:
for : Refere-se ao controle de entrada para o qual este rótulo se
destina. Seu valor deve ser igual ao valor do atributo “id” do
controle de entrada.
form : Refere-se ao formulário ao qual o rótulo pertence.
Veja como usar a Tag HTML <label>:
<form action="dados.php">
<label for="seunome">Seu Nome: </label>
<input type="text" name="seunome" id="seunome"><br>
<label for="email">E-mail: </label>
<input type="text" name="email" id="email"><br>
<input type="submit" value="Enviar">
</form>
Veja outro exemplo utilizando a tag <label> dentro da
tag <form>.
<form action="dados.php">
<label>
<span>Masculino</span>
<input type="radio" name="sexo" id="masculino" value="masculino" />
</label>
<label>
<span>Feminino</span>
https://www.loopnerd.com.br/codigos-html-prontos/
https://developer.mozilla.org/pt-BR/docs/Web/HTML
<input type="radio" name="sexo" id="feminino" value="feminino" />
</label>
<label>
<input type="submit" value="Enviar">
</label>
</form>
<legend>
Html legend
Este artigo HTML explica como usar o elemento HTML chamado
de tag <legend>.
A tag HTML <legend> é usada para gerar uma legenda para a tag
<fieldset> ao agrupar itens relacionados em um formulário HTML.
Veja o exemplo no código Html
Agrupe elementos relacionados em um formulário:
A tag <legend> define uma legenda para o elemento <fieldset>.
<form>
<fieldset>
<legend>Informações</legend>
Nome: <input type="text" name="nome"><br>
Endereço: <input type="text" name="endereco"><br>
Telefone: <input type="text" name="telefone">
</fieldset>
</form>
Observação:
O elemento HTML <legend> é encontrado na tag <body> . Ele é
usado para fornecer uma legenda para os itens relacionados
agrupados na tag <fieldset> .
A legenda gerada pela tag <legend> será renderizada antes dos
controles de formulário relacionados no <fieldset> e parecerá
flutuar sobre a borda superior do <fieldset>.
Dica: Use CSS para estilizar <fieldset> e <legend>:
<html>
<head>
<style>
fieldset { background-color: #bfbfbf; }
https://www.loopnerd.com.br/codigos-html-prontos/html-legend/
https://developer.mozilla.org/pt-BR/docs/Web/HTML
https://www.loopnerd.com.br/tag/html-form/
legend {
background-color: gray;
color: #ffffff;
padding: 5px 10px;
}
input { margin: 5px; }
</style>
</head>
<body>
<form action="cadastrar.php">
<fieldset>
<legend>Informações:</legend>
<label for="fnome">Nome:</label>
<input type="text" id="fnome" name="fnome"><br><br>
<label for="Sobrenome">Sobre nome:</label>
<input type="text" id="Sobrenome" name="sobrenome"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="aniversario">Aniversário:</label>
<input type="date" id="aniversario" name="aniversario"><br><br>
<input type="submit" value="Enviar">
</fieldset>
</form>
</body>
</html>
<li>
Html li
Neste artigo veremos como usar o elemento HTML chamado
de tag <li>
A tag <li> define um item de lista.
A tag <li> é usada dentro de listas ordenadas (<ol>), listas não
ordenadas (<ul>) e em listas de menus (<menu>).
Em <ul> e <menu>, os itens da lista geralmente serão exibidos com
marcadores.
Em <ol>, os itens da lista geralmente serão exibidos com números
ou letras.
Veja o exemplo no código
https://www.loopnerd.com.br/codigos-html-prontos/html-li/
https://www.loopnerd.com.br/tag/tags-html/
Uma lista HTML ordenada (<ol>) e uma não ordenada (<ul>):
<ul>
<li>Café</li>
<li>Cerveja</li>
<li>Vinho</li>
</ul>
<ol>
<li>Html</li>
<li>Css</li>
<li>jQuery</li>
</ol>
Definição
O elemento HTML <li> é encontrado na tag <body> .
A tag <li> é usada dentro de <ol> , <ul> ou <menu> .
Você pode aninhar listas <ol>, <ul> e <menu> .
Aplicando estilos à tag <li>com CSS
Algumas propriedades CSS também podem ser usadas para
estilizar os elementos <li> que são: list-style , list-style-image , list-
style-position e list-style-type .
Essas propriedades podem ser aplicadas diretamente ao elemento
<li>, embora geralmente sejam aplicadas ao elemento pai.
<link>
Html link – Veja como criar links no HTML
Neste artigo veja como usar links no html e quais tipos
de links podemos usar.
Os links são encontrados em quase todas as páginas de dentro de
uma da web. Os links nos permite que os usuários cliquem para ir de
uma página para outra.
Você pode clicar em um link e pular para outro documento.
Quando movemos o mouse sobre um link, a seta do mouse se
transforma em uma pequena mãozinha.
Exemplo Básico e Prático:
https://developer.mozilla.org/pt-BR/docs/Web/HTML
https://www.loopnerd.com.br/codigos-html-prontos/html-link/
https://www.loopnerd.com.br/codigos-html-prontos/
https://pt.wikipedia.org/wiki/Hiperliga%C3%A7%C3%A3o
A <a>marca html define um hiperlink. Possui a seguinte sintaxe:
<a href="url">Texto do Link</a>
<!--Veja o Exemplo-->
<a href="https://www.loopnerd.com.br/codigos-html-prontos/">Códigos Html Prontos</a>
O atributo mais importante do <a> elemento é o atributo href, que
indica o endereço do link.
O texto do link é a parte que ficará visível para o usuário clicar.
Ai clicar no texto do link enviará o usuário para o endereço url
especificado.
Veja na prática
<a href="https://www.loopnerd.com.br/">Loop Nerd</a>
<a href="https://www.loopnerd.com.br/sobre">Sobre o Loop Nerd</a>
<a href="https://www.facebook.com/loopnerd/">Facebook</a>
Os Links aparecerão da seguinte forma em todos os
navegadores:
Um link não visitado está sublinhado e em azul
Um link visitado está sublinhado e roxo
Um link ativo está sublinhado e vermelho
Links HTML – o atributo de destino
Por padrão, a página vinculada será exibida na janela do navegador
atual.
Para alterar isso, você deve especificar outro destino para o link.
O target atributo especifica onde abrir o documento vinculado.
O targetatributo pode ter um dos seguintes valores:
_self – Predefinição. Abre o documento na mesma janela / guia em que
foi clicado
_blank – Abre o documento em uma nova janela ou guia
_parent – Abre o documento no quadro pai
_top – Abre o documento em todo o corpo da janela
Use target = “_ blank” para abrir uma vinculada em uma nova
janela ou guia do navegador:
<a href="https://www.loopnerd.com.br/codigos-pronto/css/" target="_blank">Códigos Css</a>
Clique aqui para abrir uma nova janela Códigos Css
Link para um endereço de e-mail
Também podemos usar o mailto dentro da href para criar um link
que abre o programa de e-mail do usuário (para permitir que ele envie
um novo e-mail):
https://www.loopnerd.com.br/codigos-pronto/css/
<a href="mailto:contato@loopnerd.com.br" title="Contato Loop Nerd">Contato Loop Nerd</a>
Contato Loop Nerd
<em>
HTML em
A tag HTML <em> é uma tag de frase e usada para enfatizar o
conteúdo do texto.
Esteefeito pode ser obtido usando a propriedade CSS.
Marque o texto enfatizado em um documento:
<p>Você <em>precisa</em> mudar seus hábitos alimentares !</p>
Veja o Resultado!
Você precisa mudar seus hábitos alimentares !
O elemento HTML <em> é encontrado dentro da tag <body> .
A tag <em> é usada para separar o texto do restante do
conteúdo. Os navegadores tradicionalmente colocam em itálico o
texto encontrado na tag <em>. Você pode alterar esse
comportamento com CSS.
<embed>
HTML embed
A tag HTML embed é usada para incorporar aplicativos externos
que geralmente são conteúdo multimídia como áudio ou vídeo em um
documento HTML. Ele é usado como um contêiner para incorporar
plug-ins, como animações em flash. Essa tag é uma nova tag no
HTML 5 e requer apenas a tag inicial.
O Html <embed> define um contêiner para um recurso externo, como
uma página da Web, uma imagem, um media player ou um aplicativo
de plug-in.
Veja o exemplo no código Html
<embed type="application/x-shockwave-flash" src="movie.swf" width="800" height="260">
IMPORTANTE!
mailto:contato@loopnerd.com.br
https://www.loopnerd.com.br/codigos-html-prontos/html-em/
https://developer.mozilla.org/pt-BR/docs/Web/CSS
https://www.loopnerd.com.br/codigos-html-prontos/html-embed/
https://developer.mozilla.org/pt-BR/docs/Web/HTML
A maioria dos navegadores não suporta mais Java Applets e
Plug-ins.
Os controles ActiveX não são mais suportados em nenhum
navegador.
O suporte para Shockwave Flash também foi desativado em
navegadores modernos.
Uma imagem incorporada:
<embed type="image/jpg" src="imagem.jpg" width="300" height="250">
Uma página HTML incorporada:
<embed type="text/html" src="cadastro.html" width="800" height="600">
Um vídeo incorporado:
<embed type="video/webm" src="video.mp4" width="600" height="300">
Sugestão de uso de cada tag
Para exibir uma imagem, é melhor usar a tag <img>.
Para exibir HTML, é melhor usar a tag <iframe>.
Para exibir vídeo ou áudio, é melhor usar as tags <video> e <audio>
<footer>
HTML footer – Como e quando usar footer no html5
O elemento footer marca a área inferior, normalmente conhecida como
rodapé do conteúdo geral do documento.
No footer pode conter um cabeçalho próprio com bloco de
navegação que apontam para informações como:
Nome do autor, Links de Redes Sociais, Links de Paginas,
e Copyright.
Veja na prática:
<footer>
<div class="col-2">
<h3>Menu</h3>
<ul>
<li><a href="#">Sobre</a></li>
<li><a href="#">Artigos</a></li>
<li><a href="#">Categorias</a></li>
<li><a href="#">Contato</a></li>
</ul>
https://www.loopnerd.com.br/codigos-html-prontos/html-iframe/
https://www.loopnerd.com.br/codigos-html-prontos/html-footer
https://www.loopnerd.com.br/tag/html/
https://pt.wikipedia.org/wiki/HTML5
</div>
<div class="col-2">
<h3>Redes Sociais</h3>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Youtube</a></li>
</ul>
</div>
<p>Loop Nerd - Todos os Direitos Reservados.</p>
</footer>
Definição e Uso do Footer !
A tag <footer> define um rodapé para um documento ou seção.
Um elemento <footer> normalmente contém:
Informações sobre direitos autorais
Informações de Contato
Mapa do site
voltar aos links principais
Documentos relacionados
Link de Redes Sociais
Veja o Exemplo na pratica!
Footer Completo com varias informações.
<footer class="main_footer container">
<div class="content">
<div class="colfooter">
<h3 class="titleFooter"> Menu</h3>
<ul>
<li><a href="#" title="Página Inícial">Página Inícial</a></li>
<li><a href="#" title="Sobre a Empresa">Sobre a Empresa</a></li>
<li><a href="#" title="Galeria de Fotos">Galeria de Fotos</a></li>
<li><a href="#" title="Fale Conosco">Fale Conosco</a></li>
</ul>
</div><!--Col Footer 1-->
<div class="colfooter">
<h3 class="titleFooter"> Contato</h3>
<p><i class="icon icon-mail"></i> contato@seusite.com.br</p>
<p><i class="icon icon-phone"></i> 21 90000-0000</p>
<p><i class="icon icon-whatsapp"></i> 21 90000-0000</p>
</div><!--Col Footer 2-->
<div class="colfooter">
<h3 class="titleFooter"> Redes Sociais</h3>
<a href="#" class="botao"><span> <i class="icon icon-facebook"></i> </span></a>
<a href="#" class="botao"><span> <i class="icon icon-instagram"></i> </span></a>
<a href="#" class="botao"><span> <i class="icon icon-twitter"></i> </span></a>
<a href="#" class="botao"><span> <i class="icon icon-pinterest"></i> </span></a>
</div><!--Col Footer 3-->
<div class="clear"></div>
</div><!--Contant-->
<div class="main_footer_copy">
<p class="m-b-footer"> Seusite - 2022, todos os direitos reservados.</p>
<p class="by"><i class="icon icon-heart-3"></i> Desenvolvido por: <a href="#" title="Seu nome">Seu
nome aqui</a></p>
</div>
</footer>
<form>
Html form
Neste artigo conheça as tags de um formulário no HTML.
Formulários são algumas das mais partes mais importantes nas
paginas da web para juntar informações importantes sobre o usuário
da internet. Informações como e-mail, nome, endereço, telefone e
qualquer outro tipo de informação.
Tag HTML <form>
Um formulário HTML com três campos de entrada e um botão para
enviar:
<form action="enviar.php" method="post">
<label>Nome:</label>
<input type="text" id="nome" name="nome"><br>
https://www.loopnerd.com.br/codigos-html-prontos/html-form/
<label>E-mail:</label>
<input type="text" id="email" name="email"><br><br>
<label>Mensagem:</label>
<textarea id="mensagem" name="mensagem"></textarea><br><br>
<input type="submit" value="Enviar">
</form>
Veja mais Definição e Uso das tags de formulário
A form tag é usada para criar um formulário HTML para entrada do
usuário.
O Form elemento pode conter um ou mais dos seguintes
elementos de formulário abaixo:
input
textarea
button
radiobuton
checkbox
select
option
optgroup
fieldset
label
output
Atributos
action – Especifica para onde enviar os dados do formulário quando
um formulário é enviado
autocomplete – Especifica se um formulário deve ter preenchimento
automático ativado ou desativado
enctype – Especifica como os dados do formulário devem ser
codificados ao enviá-los ao servidor (apenas para method = “post”) ou
(method = “get”)
name – Especifica o nome de um formulário
novalidate – Especifica que o formulário não deve ser validado
quando enviado
rel – Especifica a relação entre um recurso vinculado e o documento
atual
http://pt.wikipedia.org/wiki/HTML
Formulario com opção de marcar várias opções
<form action="enviar.php" method="post">
<input type="checkbox" name="html" value="Html">
<label for="vehicle1"> Html</label><br>
<input type="checkbox" name="css" value="Css">
<label for="vehicle2"> Css</label><br>
<input type="checkbox" name="jquery" value="jQuery" checked>
<label for="vehicle3"> jQuery</label><br><br>
<input type="submit" value="Enviar">
</form>
Formulário com Opção de selecionar opções alternativas
<form action="enviar.php" method="post">
<input type="radio" id="html" name="toturial" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="toturial" value="CSS" checked="checked">
<label for="css">CSS</label><br>
<input type="radio" id="jquery" name="toturial" value="jquery">
<label for="jquery">jquery</label><br><br>
<input type="submit" value="Enviar">
</form>
Formulário com opção de Selecionar.
<form action="enviar.php" method="post">
<select name="pais">
<option value="Brasil">Brasil</option>
<option value="Estados Unidos">Estados Unidos</option>
<option value="Japão">Japão</option>
<option value="Índia">Índia</option>
<option value="Angola">Angola</option>
<option value="Marrocos">Marrocos</option>
<option value="México">México</option>
Continue navegando
Compartilhar