HTML Fácil


Tags Básicas Para Blogs (Ferramentas de ajuda na construção de Blogs WordPress).

Para inserir códigos o Editor WordPress deve estar no modo Texto (Não Visual). Para entrar no Editor faça LogIn, passe o mouse sobre o ícone “W” no canto Superior-Esquerdo abaixo da Barra de Endereços do Navegador, desloque o mouse até “Painel WP Admin” e clique. Clique em “Páginas” ou “Posts”, escolha o título desejado e clique. A edição será aberta. Clique na Aba “Texto” na parte superior direita da Janela de Edição. Veja Instruções em Fotos ampliadas com Clik na imagem da direita. Para testar as Tags fora do ambiente WordPress copie a(s) linha(s) de código, abra o Bloco-de-Notas (notepad), cole e depois Salve como Teste.html; depois Clique no ícone do Arquivo Salvo (Teste). Obs.: Nem todos os Temas do WordPress desenvolvem fielmente as instruções aqui apresentadas.

Para definir Tipo/Cor/Dimensão das Letras, utilize a Tag: font

<font face="arial" size="1" color="blue">Primeiro-Texto</font>
<font face="tahoma" size="2" color="red">Segundo-Texto</font>
<font style="background-color:lime; size:2; face:tahoma; color:red;">Terceiro-Texto com tarja</font>
<font face="segoe print" size="3" color="green">Quarto-Texto</font>
<font face="magncto" size="4" color="#FF0000">Quinto-Texto</font>
<font face="mistral" size="5" color="#00FF00">Sexto-Texto</font>
<font style="text-shadow:-1px -1px black, 1px 1px white; color:#CCCCCC; background-color:D1D1D1;">&nbsp;Texto em Depressão </font>
<font style="text-shadow: 1px 1px black, -1px -1px white; color:#CCCCCC; background-color:D1D1D1;">&nbsp;Texto em Relevo </font>
<font style="text-shadow: 1px 1px black, -1px -1px white; color:#CCCCCC;">Texto Tri-dimensional</font>
<font style="text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; color:green;">Letras Com Esboços</font>
<font style="text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; color:#CCCCCC;"><b>Letras Com Esboços</b></font>
<font style="text-shadow: 0 0 0.2em #8F7;"><b>Brilho Neon Fraco</b></font>
<font style="text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87;"><b>Brilho Neon Médio</b></font>
<font style="text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F;"><b>Brilho Neon Forte</b></font>
<font style="text-shadow: black 0.1em 0.1em 0.2em; color: white;"><b>Branco Legível</b></font>
<font style="text-shadow:5px 5px 7px black;">Letras com Sombra</font>
<font style="text-shadow:5px 5px 7px blue;color:red;"><b>Letras Negrito com Sombra</b></font>
As Letras ficam assim:
1. Primeiro-Texto
2. Segundo-Texto
3. Terceiro-Texto com tarja
4. Quarto-Texto
5. Quinto-Texto
6. Sexto-Texto

7.  Texto em Depressão
8.  Texto em Relevo

9. Texto Tri-dimensional
10. Letras Com Esboços
11. Letras Com Esboços
12. Brilho Neon Fraco
13. Brilho Neon Médio
14. Brilho Neon Forte
15. Branco Legível
16. Letras com Sombra
17. Letras Negrito com Sombra

Para consultar todos os tipos de Letras:
Abra o Bloco-de-Notas (notepad), clique em Formatar,
e depois clique em Fonte.

Para Subscrito e Sobrescrito utilize respectivamente as Tags: sub e sup

235<sub>10</sub> = (5 x 10<sup>0</sup>) + (3 x 10<sup>1</sup>) + (2 x 10<sup>2</sup>) = (5 x 1) + (3 x 10) + (2 x 100) = 5 + 30 + 200 = 235

O Texto fica assim:
23510 = (5 x 100) + (3 x 101) + (2 x 102) = (5 x 1) + (3 x 10) + (2 x 100) = 5 + 30 + 200 = 235

Para Alinhar Textos utilize a Tag: span

1-Alinhamento à Esquerda:

<span style="text-align: left; display:block">
Coloque seu texto aqui
</span><div style="clear: both;"></div>

O Texto fica assim:
Para que não vos corrompais, e vos façais alguma imagem esculpida na forma de qualquer figura, semelhança de homem ou mulher;
Figura de algum animal que haja na terra; figura de alguma ave alada que voa pelos céus;
Figura de algum animal que se arrasta sobre a terra; figura de algum peixe que esteja nas águas debaixo da terra; (Deuteronômio 4:16-18)

2-Alinhamento ao Centro:

<span style="text-align: center; display: block">
Coloque seu texto aqui
</span><div style="clear: both;"></div>

O Texto fica assim:
Para que não vos corrompais, e vos façais alguma imagem esculpida na forma de qualquer figura, semelhança de homem ou mulher;
Figura de algum animal que haja na terra; figura de alguma ave alada que voa pelos céus;
Figura de algum animal que se arrasta sobre a terra; figura de algum peixe que esteja nas águas debaixo da terra; (Deuteronômio 4:16-18)

3-Alinhamento à Direita:

<span style="text-align: right; display: block">
<font face="courier new"><b>
3.435.982,00
40.000,35
532.901,82
────────────
4.008.884,17
</b></font>
</span><div style="clear: both;"></div>

O Texto fica assim:


3.435.982,00
40.000,35
532.901,82
────────────
4.008.884,17

4-Alinhamento Justificado:

<span style="text-align: justify; display: block">
Coloque seu texto aqui
</span><div style="clear: both;"></div>

O Texto fica assim:
Para que não vos corrompais, e vos façais alguma imagem esculpida na forma de qualquer figura, semelhança de homem ou mulher; Figura de algum animal que haja na terra; figura de alguma ave alada que voa pelos céus; Figura de algum animal que se arrasta sobre a terra; figura de algum peixe que esteja nas águas debaixo da terra; (Deuteronômio 4:16-18)

Para Riscar, Sublinhar e Tarjar Textos utilize as Tags: strike, span, u

<strike>Este texto aparece riscado</strike>
<span style="text-decoration: underline overline">Texto sublinhado encima e embaixo</span>
<span style="text-decoration: underline">Texto sublinhado somente embaixo</span>
<span style="text-decoration: overline">Texto sublinhado somente encima</span>
<u>Texto sublinhado somente embaixo</u>
<span style="background-color: lime;">Isto é apenas um teste de tarja em um texto</span>
Isto é apenas um <span style="background-color: yellow;">teste de tarja</span> em um texto
<span style="background-color:#BFFF00;">Isto</span> é apenas <span style="background-color:#FF0000;">um teste de tarja</span> em um <span style="background-color:#00FF00;">texto</span>

O Texto fica assim:
1. Este texto aparece riscado
2. Texto sublinhado encima e embaixo
3. Texto sublinhado somente embaixo
4. Texto sublinhado somente encima
5. Texto sublinhado somente embaixo
6. Isto é apenas um teste de tarja em um texto
7. Isto é apenas um teste de tarja em um texto
8. Isto é apenas um teste de tarja em um texto

Para Negrito utilize as Tags: strong, b

O <strong>Salário</strong> do Pecado é a <strong>Morte</strong>.
<b>Cristo</b> é o único capaz de <b>remir nossos pecados</b>.
<strong>Os Ídolos são Pedra de Tropeço.</strong>

O Texto fica assim:
1. O Salário do Pecado é a Morte.
2. Cristo é o único capaz de remir nossos pecados.
3. Os Ídolos são Pedra de Tropeço.

Para Itálico utilize a Tag: i

<i>Todos pecaram e estão destituídos da glória de Deus.</i>

O Texto fica assim:
Todos pecaram e estão destituídos da glória de Deus.

Para Suspender (Sombra) as Palavras utilize a Tag: span

<span style="text-shadow:5px 5px 7px black;">Saudações a todos!</span>
<span style="text-shadow:5px 5px 7px blue;color:red;"><b>Tenham um bom dia!</b></span>

As Palavras ficam assim:
Saudações a todos!
Tenham um bom dia!

Para Quebrar a Linha utilize a Tag: br

<br />

Exemplo:

Deus proíbe o uso de imagens religiosas<br />mas o homem insiste em utilizá-las.

O Texto fica assim:
Deus proíbe o uso de imagens religiosas
mas o homem insiste em utilizá-las.

Para Inserir Imagem utilize a Tag: img

1-Imagem Sem Texto:

<img style="margin:5px;" src="http://palavraquesalva.files.wordpress.com/2014/04/cavalo.gif" width="136" height="144" title="Legenda: Escreva o que você quiser na Legenda: title." />
A Imagem fica assim:
img → Tag
style=”margin:5px;” → Margem Externas
style=”margin-left:5px;” → Margem Externas Esquerda
style=”margin-right:5px;” → Margem Externas Direita
style=”margin-top:5px;” → Margem Externas superior
src=”http:// …” → Endereço (URL) da Imagem
width=”136″ → Tamanho Horizontal da imagem
height=”144″ → Tamanho Vertical da imagem
title=””xxx” → Legenda ao passar o Mouse
Códigos Opcionais→ style/width/height/title

2-Imagem à Esquerda e Texto a Direita:

<img style="float: left;" src="https://palavraquesalva.files.wordpress.com/2014/12/aguia-mini.gif">
Coloque seu Texto aqui
</img><div style="clear:both;"></div>

A Imagem e o Texto ficam assim:
Então falou Deus todas estas palavras, dizendo: Eu sou o Senhor teu Deus, que te tirei da terra do Egito, da casa da servidão. Não terás outros deuses diante de mim. Não farás para ti imagem de escultura, nem alguma semelhança do que há em cima nos céus, nem em baixo na terra, nem nas águas debaixo da terra. Não te encurvarás a elas nem as servirás; porque eu, o Senhor teu Deus, sou Deus zeloso, que visito a iniqüidade dos pais nos filhos, até a terceira e quarta geração daqueles que me odeiam. (Êxodo 20:1-5).

3-Texto a Esquerda e Imagem a Direita:

<img style="float: right;" src="http://palavraquesalva.files.wordpress.com/2014/04/cavalo.gif">
Coloque seu Texto aqui
</img><div style="clear:both;"></div>

O Texto e a Imagem ficam assim:
No princípio era o Verbo, e o Verbo estava com Deus, e o Verbo era Deus. Ele estava no princípio com Deus. Todas as coisas foram feitas por intermédio dele, e, sem ele, nada do que foi feito se fez. Veio para o que era seu, e os seus não o receberam. Mas, a todos quantos o receberam, deu-lhes o poder de serem feitos filhos de Deus, a saber, aos que crêem no seu nome; E o Verbo se fez carne e habitou entre nós, cheio de graça e de verdade, e vimos a sua glória, glória como do unigênito do Pai. Ninguém jamais viu a Deus; o Deus unigênito, que está no seio do Pai, é quem o revelou.
(João: cap. 1: vs. 1,2,3,11,12,14,18)

Para Linkar Imagens ou Textos a um Endereço (URL) utilize a Tag: a

<a target="_blanc" href="http://wp.me/p48zDf-sf" title="Clique Sobre a Imagem Para Ir ao Endereço Deste Link"><img src="https://palavraquesalva.files.wordpress.com/2014/12/aguia-mini.gif" /></a>
<a target="_blanc" href="http://wp.me/s48zDf-heresias" title="Basta Clicar Sobre O Texto">Este é um Texto Linkado a um Endereço (URL)</a>.
<a target="_blanc" style="text-decoration:none" href="http://wp.me/p48zDf-Aq" title="Basta Clicar Sobre O Texto">Este é outro Texto Linkado a um Endereço (URL)</a>.

Os Três Links ficam assim:
←(1) A águia está linkada a um Endereço (URL).

(2) Este Link está Sublinhado ou Sublinhará ao passar o mouse:
Este é um Texto Linkado a um Endereço (URL).

(3) Este Link Não está Sublinhado nem Sublinhará ao passar o Mouse:
Este é outro Texto Linkado a um Endereço (URL).

Para Linkar as opções em uma Caixa de Seleção utilize a Tag: select

<select onChange="window.location.href=this.value">
  <option select>Selecione Um dos Três Temas</option select>
  <option value="http://wp.me/p48zDf-Aq/#Quando-Cristo-Nasceu">Quando Cristo Nasceu?</option> 
  <option value="http://wp.me/p48zDf-Aq/#O-Dia-da-Morte-e-Ressurreicao-de-Cristo">O Dia da Morte e Ressurreição de Cristo</option>
  <option value="http://wp.me/p48zDf-Aq/#Genealogia-de-Adão-até-Cristo">Genealogia de Adão até Cristo</option>
</select>

Obs.: O WordPress.com não aceita esta tag.

Para fazer uma Caixa de Rolagem utilize a Tag: div

<div style="height:150px;width:450px;line-height:16px;border:2px solid #000000;overflow:auto;background-color:#FFFFCC;text-align:center;padding:5px;margin:2px;">
Coloque aqui o conteúdo que ficará dentro da Caixa de Rolagem.
</div>

A Caixa de Rolagem fica assim:

Início do Conteúdo da Caixa de Rolagem.
height:100px → Altura da Caixa
width:200px → Largura da Caixa
line-height:18px → Altura de cada Linha de Texto
overflow:auto → Código da Rolagem(não altere)
border:2px solid #000000 → Espessura/Tipo/Cor Borda
Tipos de border: dotted, dashed, solid, double, groove, ridge, inset, outset
background-color:#FFFFCC → Cor do Fundo (blue, red, yellow)
text-align:center → Alinhamento(center, left, right, justify)
padding:2px; → Espaço das Bordas ao Conteúdo da div
padding-top:5px; → Espaçamento do Topo
padding-right:8px; → Espaçamento da Direita
padding-bottom:10px; → Espaçamento da Base
padding-left:7px; → Espaçamento da Esquerda
margin:5px → Margem externa ao redor da Caixa
margin-top → Margem acima da caixa
margin-left → Margem esquerda da caixa
margin-right → Margem direita da caixa
margin-bottom → Margem abaixo da caixa
font-size:80% → Percentual do Tamanho das letras
Qualquer Uma destas Instruções da Caixa pode ser retirada.
Uma Caixa pode ser colocada dentro de Outra Caixa.
Outras Instruções não Inseridas no “style” desta Caixa:
float:left → Coloca a Caixa do Lado-Esquerdo (left, right).
A Instrução “background-color:” poderá vir acompanhada ou substituída de uma Imagem como Papel-Parede da Caixa de Rolagem; a Instrução dentro do WordPress é como neste exemplo citado em letras Neon; retirando-se o “no-repeat” a Imagem se repetirá até completar todo o Plano do Fundo da Caixa.
background:white url(‘//palavraquesalva.files.wordpress.com/2015/01/aguia-translc3bacido.gif’) no-repeat;
Fim do Conteúdo da Caixa de Rolagem.

Para fazer uma Tabela (Planilha) utilize a Tag: table

<table width="440" border="4" bgcolor="#D0D0D0" cellspacing="2"  cellpadding="3">
<tr>
<td colspan="5" align="center">1ª Linha da Tabela com 5 Colunas e 7 Linhas</td>
</tr>
<tr>
<td>2ª Linha</td>
<td colspan="3">2ª Linha</td>
<td>2ª Linha</td>
</tr>
<tr>
<td colspan="2">3ª Linha</td>
<td rowspan="3" align="center"><img src="http://palavraquesalva.files.wordpress.com/2014/04/cavalo.gif" /></td>
<td>3ª Linha</td>
<td>3ª Linha</td>
</tr>
<tr>
<td>4ª Linha</td>
<td>4ª Linha</dt>
<td>4ª Linha</td>
<td>4ª Linha</td>
</tr>
<tr>
<td>5ª Linha</td>
<td>5ª Linha</dt>
<td colspan="2">5ª Linha</td>
</tr>
<tr>
<td colspan="2">6ª Linha</td>
<td colspan="3">6ª Linha</td>
</tr>
<tr>
<td colspan="3">7ª Linha</td>
<td colspan="2" align="right">7ª Linha</td>
</tr>
</table>

A Tabela fica Assim:

Obs.: Nem todos os Temas WordPress conseguem desenvolver Tabelas com fidelidade. Para ver como esta tabela fica fora do WordPress, copie os códigos, abra o Bloco_de_Notas, cole no Bloco de Notas, salve como “Tabela.html”, e depois Clik no Ícone do Arquivo Salvo; o resultado será semelhante a figura acima.
table: Tag.
width: Tamanho Horizontal da Tabela
Border: Espessura das Bordas.
bgcolor: Cor de Fundo da Tabela.
cellspacing: Espaçamento entre Células.
cellpadding: Espaço das Margens ao Conteúdo da Célula.
tr: Cria cada Linha da Tabela.
td: Cria cada Célula (Coluna) dentro da mesma Linha.
colspan: Quantidade de Colunas que a Célula ocupará.
rowspan: Quantidade de Linhas que a Célula ocupará.
align: Alinhamento do Conteúdo da Célula (left, center, right, justify).

Para inserir um Formulário de Contato com seus atributos utilize os Códigos confome a imagem abaixo

As atribuições destes códigos podem ser colocadas em conjunto ou isoladamente mas, a primeira “contact-form” e a última “/contact-form” são necessárias. Para inserir o formulário padrão utilize apenas o código “contact-form”. A cláusula “to=meu-email@provedor.com”, da primeira instrução, será necessário somente quando queremos receber as informações em outro e-mail que não o e-mail padrão da conta WordPress. Em todos os casos cada instrução deve ter abertura e fechamento de colchetes.
Ainda: Quando isoladamente, é recomendável que a instrução venha acompanhada da cláusula “required=true” para evitar que um envio vazio (sem dados) seja efetuado por algum visitante desavisado. A mesma recomendação é válida para ao menos um atributo quando mais de um atributo for utilizado no Formulário de Contato. O Formulário Padrão já vem condicionado ao preenchimento obrigatório do “Nome” e “E-mail”, ficando para livre arbítrio do usuário o preenchimento do “Site” e “Mensagem”.
Obs.: O WordPress.com aceita somente um (1) formulário de Contato por Post; caso mais de um seja inserido, somente um será exibido.

Para fazer Linhas horizontais utilize a Tag: div

<div style="border-bottom:1px solid #FF0000;"></div>
<div style="border-bottom:2px dashed #00FF00;"></div>
<div style="border-bottom:3px dashed #0000FF;"></div>
<div style="border-bottom:3px solid maroon;"></div>

As Linhas ficam assim:

Para exibir um botão de seguidores utilize o código abaixo (sem espaços dentro dos colchetes):

<div style="width:184px;border:3px ridge #D1D1D1;font-size:70%;line-height:10px;">[ blog_subscription_form ]</div>

O Botão fica assim:

Digite seu endereço de email para acompanhar esse blog e receber notificações de novos posts por email.

Para abrir uma Janela POP-up utilize a Tag: a
Obs.: Este Código-Fonte não é suportado pelo WordPress.com.

<a href="#" onclick="window.open('http://palavraquesalva.wordpress.com', 'Pagina', 'STATUS=NO, TOOLBAR=NO, LOCATION=NO, DIRECTORIES=NO, RESISABLE=NO, SCROLLBARS=YES, TOP=10, LEFT=10, WIDTH=770, HEIGHT=400');">Clique para abrir uma Janela POP-up com uma Página de Internet</a>
<br/>
<a href="#" onclick="window.open('https://cobramil.files.wordpress.com/2016/08/motor-calor.gif', 'Pagina', 'STATUS=NO, TOOLBAR=NO, LOCATION=NO, DIRECTORIES=NO, RESISABLE=NO, SCROLLBARS=YES, TOP=10, LEFT=10, WIDTH=445, HEIGHT=250');">Clique para abrir uma Janela POP-up com uma Imagem</a>

Comandos utilizados neste código fonte:
http://codigofonte.net&#8217; → Aqui fica o Endereço da Página de Internete ou da Imagem que será exibida na janela pop-up.
‘Pagina’ → Nome interno para a janela. NÃO É O TÍTULO.
STATUS=NO → Este, exibe a barra de status do IE.
LOCATION: NO → Serve para exibir a localização do site (aquela barrinha de endereços).
TOOLBAR=NO → Exibe a barra de ícones básicos do IE. Do tipo COPIAR, COLAR…
DIRECTORIES: NO → Serve para exibir a barra de links (atalhos do IE).
RESISABLE=NO → Permite que o usuário redimensione a janela.
SCROLLBARS=YES → Exibe a barra de rolagem.
TOP=10 → Define com quantos pixels a página irá ser exibida a partir do topo.
LEFT=10 → Define com quantos pixels a página irá ser exibida a partir da esquerda.
WIDTH=600 → Largura da Janela
HEIGHT=400 → Altura da Janela.

Para colocar Webcam no Site utilize a Tag: iframe
Obs.: Esta tag não é suportada pelo WordPress.com.

<iframe style="width:400px;height:300px;border:5px ridge #D1D1D1;" src="http://www.cast-tv.biz/play/?clid=23595&amp;media=yes&amp;movId=cgjlej"></iframe>

iframe tem a função de Inserir qualquer Aplicativo ou Página de Outro Site dentro de uma Janela numa página de Site. Basta ter o Endereço (URL) da Página ou Aplicativo que se deseja colocar dentro da Janela.

<iframe name=Criar Sites src="http://www.criarsites.com/iframe.html" frameBorder=0 width=400 height=150 scrolling=auto></iframe>
<iframe style="width:500px;height:195px;background-color:#CC3300;border:3px ridge #D1D1D1;" src="https://www.iradeo.com/station/embed/132264"></iframe>
<iframe width="500" height="195" src="https://www.iradeo.com/station/embed/132288" scrolling="no" frameborder="0"></iframe>

Para movimentar Texto ou Imagem utilize a Tag: marquee
Obs.: Esta tag não é suportada pelo WordPress.com.

<marquee direction=left behavior=scroll scrollamount=5 scrolldelay=100>mensagem tipo "ticker-horizontal"</marquee>
<marquee direction=right behavior=alternate scrollamount=10 scrolldelay=100>mensagem tipo ping-pong</marquee>
<marquee width=180 direction=right behavior=alternate scrollamount=10 scrolldelay=100>mensagem tipo treme-treme</marquee>
<marquee direction=up behavior=scroll scrollamount=2 scrolldelay=100>mensagem tipo ticker-vertical-acima</marquee>
<marquee direction=down behavior=scroll scrollamount=5 scrolldelay=100>mensagem tipo ticker-vertical-abaixo</marquee>
<marquee direction=right behavior=scroll scrollamount=10 scrolldelay=100><img src="https://palavraquesalva.files.wordpress.com/2014/04/cavalo.gif"/></marquee>

Para inserir uma Caixa de Seleção com Links utilize a Tag: select
Obs.: Esta tag não é suportada pelo WordPress.com.

<select onChange="window.location.href=this.value">
  <option select>Selecione Um dos Três Temas</option select>
  <option value="http://wp.me/p48zDf-Aq/#Quando-Cristo-Nasceu">Quando Cristo Nasceu?</option> 
  <option value="http://wp.me/p48zDf-Aq/#O-Dia-da-Morte-e-Ressurreicao-de-Cristo">O Dia da Morte e Ressurreição de Cristo</option>
  <option value="http://wp.me/p48zDf-Aq/#Genealogia-de-Adão-até-Cristo">Genealogia de Adão até Cristo</option>
</select>
Para inserir um Reprodutor de Áudio (.mp3 .m4a .ogg .wav) no Blog wordpress.com utilize a Instrução: audio
Digite somente o Código da linha 2 do modelo abaixo na sua postagem. Para dimensionar e posicionar à direita ou à esquerda o Reprodutor de Áudio, coloque-o dentro de uma “div” e utilize os recursos da “div” para estes fins.
As instruçõses autoplay=”autoplay” e loop=”yes” são opcionais; para desativá-las basta remover na edição.

                                       Opcionais-para→ Ativar-o-Play-automaticamente→↓  e repetições→↓
[ audio src="http://en-support.files.wordpress.com/2014/10/istock_audio.wav" autoplay="autoplay" loop="yes"/ ]
 ↑←------------Retire-estes-dois-espaços-em-branco---Um-de-cada-lado---Deixe-sem-espaço-nenhum-------------→↑

O Reprodutor de Áudio fica assim→
Obs.:
Aqui o autoplay e o loop foram retirados

Os Códigos abaixo são Reprodutores Universais de Áudio, mas não aceito pelo WordPress.com.
Obs.: Ambos os Códigos tem o mesmo efeito, tanto no Layout quanto no Som;
A Instrução controls=”controls” é opcional mas, se omitir, não será exibido apesar de ainda assim funcionar “autoplay” e “loop”.
A Instrução autoplay=”autoplay” é opcional, e provoca o Play do Som automaticamente;
A Instrução loop=”yes” também é opcional, e provoca a repetição indefinida do Som.

<audio src="http://en-support.files.wordpress.com/2014/10/istock_audio.wav" controls="controls" autoplay="autoplay" loop="yes"/>
<audio controls="controls" autoplay="autoplay" loop="yes"><source src="http://en-support.files.wordpress.com/2014/10/istock_audio.wav"/></audio>

Para Reproduzir somente o Áudio de Vídeos-YouTube utilize a Instrução: youtube
Digite somente o Código da linha 2 do modelo abaixo na sua postagem.
Para alterar a dimensão do Reprodutor de Áudio, acrescente “?w=XXX” após a instrução “?h=30“.

          ↓←-URL-do-Vídeo/Playlist--→↓
[ youtube https://youtu.be/v7eJzgItxlI?rel=0?h=30 ]
 ↑←--------Retire estes espaços em branco-------→↑

Os Reprodutores de Áudio ficam assim:

↓←Clique←aqui (Um único Vídeo)
↓←Clique←aqui (Uma Playlist)
Para Reproduzir Vídeos-YouTube utilize a Instrução: youtube
Digite somente o Código da linha 2 do modelo abaixo na sua postagem.

          ↓←-URL-do-Vídeo/Playlist--→↓
[ youtube https://youtu.be/aCAt9ZNpsYc?rel=0?w=350 ]
 ↑←--------Retire estes espaços em branco--------→↑

O Reprodutor de Vídeo fica assim:

• Altere o Valor de “w=XXX“, no código, de modo que o Vídeo caiba no espaço disponível.
• Para posicionar o Vídeo à Esquerda ou a Direita, coloque-o dentro de uma “div” utilizando os recuros para este fim.
• Para Dimensionar a Largura e Altura do Vídeo independentemente, Acrescente a Instrução
?h=XXX” após a Instrução “w=XXX“;
Exemplo: […?w=350?h=170]
• Se “?w=XXX” e “?h=XXX” forem omitidos, o Vídeo ocupará a maior dimensão possível dentro da postagem.

Os Códigos abaixo são Reprodutores Universais de Vídeos YouTube.
Obs.: O WordPress.com não aceita iframe nem Java Script.

<iframe width="420" height="315" src="https://www.youtube.com/embed/xXL9JrbIw8Q" frameborder="0" allowfullscreen></iframe>
<iframe width="420" height="315" src="https://www.youtube.com/embed/Zua5qTtsxAk?list=PLQF-uOb9WYG4llagnnHrx8pJ6A3ABCMW2" frameborder="0" allowfullscreen></iframe>
<iframe width="420" height="315" src="https://www.youtube.com/embed/playlist?list=PLQF-uOb9WYG4llagnnHrx8pJ6A3ABCMW2" frameborder="3" allowfullscreen></iframe>

O Código abaixo é um Reprodutor Universal do seu próprio Vídeo.
Obs.: São suportados, dependendo do navegador, os formatos (type): MP4, WebM, Ogg.
Para que o navegador exiba mais de um Vídeo por página, coloque-os dentro de “div” separadas.
A Instrução autoplay=”autoplay” força a execução automática do Vídeo.
A Instrução controls=”controls” força a exibição dos controles do Play e do Volume; caso eles não sejam inseridos a tecla direita do mouse dá a opção de exibí-los.

<video autoplay="autoplay" controls="controls" src="meuvideo.mp4" type="video/mp4" width="640" height="480" />

Para Imprimir (Impressora) a Página Exibida do Navegador utilize a Tag: a

<a href="javascript:window.print();">Clique Aqui Para Imprimir Esta Página</a>
<a href="#" onclick="window.print();">Imprimir Página</a>
<a href="javascript:window.print();"><img src="https://cobramil.files.wordpress.com/2015/09/printico.gif" /></a>

Para Imprimir Automaticamente uma Página, coloque esta Linha de Código no Final da Página:

<SCRIPT LANGUAGE="JavaScript">window.print()</SCRIPT>

Obs.: O “WordPress.com” Não Aceita nenhuma destas Quatro Instruções de Impressões acima. Para imprimir a partir de um Blog WordPress.com configure o Botão para este fim ou: Gere um arquivo PDF, salve na Mídia da sua conta e coloque um Link para o mesmo, dentro da página exibida.
Exemplos de Links para Impressão:

<a target="_blanc" href="https://cobramil.files.wordpress.com/2015/09/html-facil.pdf" title="Imprime uma Página em PDF"><img src="https://cobramil.files.wordpress.com/2015/09/printico.gif" /></a>
<a target="_blanc" href="https://cobramil.files.wordpress.com/2015/09/html-facil.pdf" title="Imprime uma Página em PDF">Imprimir Página</a>

O Link do Exemplo-1 fica assim→
O Link do Exemplo-2 fica assim→ Imprimir Página

Para forçar a Impressora Pular a Página, siga Um dos Dois procedimentos abaixo:
Obs.: Em ambos os procedimentos a Última Página não deverá conter a div, pois na impressão seria gerada Uma Página Extra, inútil, em branco, depois da impressão da última página útil.

Procedimento 1: Coloque a div do exemplo abaixo, no Fim de cada Página a ser Impressa.

...Conteúdo da Primeira Página a ser impressa.
<div style="page-break-after:always;"></div>
...Conteúdo da Segunda Página a ser impressa.
<div style="page-break-after:always;"></div>
...Conteúdo da Terceira (última) Página a ser impressa.

Procedimento 2: Coloque o Conteúdo da Página a ser Impressa, Dentro da div como no exemplo abaixo.

<div style="page-break-after:always;">
...Conteúdo da Primeira Página a ser impressa...
</div>
<div style="page-break-after:always;">
...Conteúdo da Segunda Página a ser impressa...
</div>
...Conteúdo da Terceira (última) Página a ser impressa.

Para inserir um Contador de Visita On-Line, execute os 4 Passos abaixo:
Passo-1) Copie a Tag img abaixo e Cole na Edição do seu Site:

<img style="width:80px;height:29px;border:3px solid #000000;" src="http://whos.amung.us/cwidget/????????????/000000e3f4fd.png" />

Passo-2) Clique AQUI ou no script do modelo abaixo para obter o Código do Contador amung.us.
Lá será oferecido um script completo do Contador; dê Dois Cliques sobre o Script (Clique-Duplo) e depois copie apenas o Código de 12-Caracteres que está após a Palavra “classic”. Este Código estará também entre aspas. Copie apenas o Código Sem as Aspas. O script oferecido é conforme o modelo abaixo, e no lugar das Interrogações estará o Código oferecido:

Passo-3) Substitua as Interrogações da tag img do Passo-1 pelo Código-de-12-Caracteres que você copiou do Site amung.us.
Passo-4) Salve a Edição do seu Site.
O Contador fica assim:

Para Inserir um Mapa de Visitas On-Line siga os Passos abaixo:
Passo-1: Copie os Códigos Abaixo e Cole no seu Site.

<a target="_blanc" href="http://www.geovisites.com/pt/directory/casa_bricolage.php?compte=????????????">
<img style="width:300px; border:3px ridge #D1D1D1;" src="http://geoloc12.geovisite.com/private/geomap.php?compte=????????????" />
</a>

Passo-2: Clique Aqui e faça um pequeno Cadastro no Site Geovisite, obedecendo os Quatro-Step‘s até obter um Código Java Script e outro HTML do Seu Mapa. O script exibido é semelhante ao modelo abaixo:

Passo-3: Copie o Número de 12-Caracteres do Código HTML que fica depois da Palavra “compte=” e cole substituindo cada um dos Dois Conjuntos de Interrogações dos Códigos do Passo-1.
Passo-4: Salve sua postagem (Widget ou corpo do Blog).
Obs.:Para alterar o tamanho do Mapa, de modo a caber no Widget ou espaço escolhido do seu Site, altere o Valor da instrução “width:300px;” que está dentro da Tag img.
O Mapa fica assim:

Cores e Códigos HTML

COR CÓDIGO EXEMPLO
* White FFFFFF ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
* Red FF0000 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
* Green 00FF00 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
* Blue 0000FF ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Magenta FF00FF ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Cyan 00FFFF ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
* Yellow FFFF00 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
* Black 000000 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
* Aqua 70DB93 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Baker Chocolate 5C3317 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Blue Violet 9F5F9F ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Brass B5A642 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Bright Gold D9D919 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Brown A62A2A ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Bronze 8C7853 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Bronze II A67D3D ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Cadet Blue 5F9F9F ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Cool Copper D98719 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Copper B87333 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Coral FF7F00 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Corn Flower Blue 42426F ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Dark Brown 5C4033 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Dark Green 2F4F2F ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Dark Green Copper 4A766E ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Dark Olive Green 4F4F2F ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Dark Orchid 9932CD ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Dark Purple 871F78 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Dark Slate Blue 6B238E ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Dark Slate Grey 2F4F4F ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Dark Tan 97694F ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Dark Turquoise 7093DB ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Dark Wood 855E42 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Dim Grey 545454 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Dusty Rose 856363 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Feldspar D19275 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Firebrick 8E2323 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Forest Green 238E23 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Gold CD7F32 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Goldenrod DBDB70 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
*Gray C0C0C0 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Green Copper 527F76 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Green Yellow 93DB70 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Hunter Green 215E21 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Indian Red 4E2F2F ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Khaki 9F9F5F ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Light Blue C0D9D9 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Light Grey A8A8A8 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Light Steel Blue 8F8FBD ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Light Wood E9C2A6 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
*Lime 32CD32 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Mandarian Orange E47833 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
*Maroon 8E236B ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Medium Aquamarine 32CD99 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Medium Blue 3232CD ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Medium Forest Green 6B8E23 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Medium Goldenrod EAEAAE ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Medium Orchid 9370DB ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Medium Sea Green 426F42 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Medium Slate Blue 7F00FF ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Medium Spring Green 7FFF00 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Medium Turquoise 70DBDB ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Medium Violet Red DB7093 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Medium Wood A68064 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Midnight Blue 2F2F4F ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
* Navy 23238E ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Neon Blue 4D4DFF ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Neon Pink FF6EC7 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
New Midnight Blue 00009C ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
New Tan EBC79E ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Old Gold CFB53B ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Orange FF7F00 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Orange Red FF2400 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Orchid DB70DB ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Pale Green 8FBC8F ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Pink BC8F8F ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Plum EAADEA ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Quartz D9D9F3 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Rich Blue 5959AB ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Salmon 6F4242 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Scarlet 8C1717 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Sea Green 238E68 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Semi-Sweet Chocolate 6B4226 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Sienna 8E6B23 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Silver E6E8FA ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Sky Blue 3299CC ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Slate Blue 007FFF ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Spicy Pink FF1CAE ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Spring Green 00FF7F ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Steel Blue 236B8E ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Summer Sky 38B0DE ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Tan DB9370 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Thistle D8BFD8 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Turquoise ADEAEA ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Very Dark Brown 5C4033 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Very Light Grey CDCDCD ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Violet 4F2F4F ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Violet Red CC3299 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Wheat D8D8BF ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789
Yellow Green 99CC32 ███████████████ abcdefghijklmnopqrstuvwxyz 0123456789

Decifrando o Código de Cores RGB:
O Código de Cores RGB é formado por Três Números Hexadecimais que variam de 00H a FFH (0 a 255 Decimal), correspondente a cada uma das cores (Red, Green, Blue), com Pigmentação de cor variando de 0% a 100% proporcional a cada número. A mistura destas três cores geram todas as outras. O Par de Número da Esquerda pigmenta o Vermelho, o do Meio pigmenta o Verde, e o da Direita pigmenta o Azul. Cada Número Hexadecimal deve ser composto por 2 Dígitos. Para cada Pixel (menor unidade de imagem) do monitor, existem pelo menos 3 Bytes reservados na memória (um Byte para cada uma das cores RGB) pra controlar a cor do respectivo ponto. A Resolução do Monitor depende da quantidade de Pixel que a placa de vídeo é capaz de controlar.

Tabela de Conversão Decimal = Hexadecimal

000=00 001=01 002=02 003=03 004=04 005=05 006=06 007=07 008=08 009=09 010=0A 011=0B 012=0C 013=0D 014=0E 015=0F 016=10 017=11 018=12 019=13 020=14 021=15 022=16 023=17 024=18 025=19 026=1A 027=1B 028=1C 029=1D 030=1E 031=1F 032=20 033=21 034=22 035=23 036=24 037=25 038=26 039=27 040=28 041=29 042=2A 043=2B 044=2C 045=2D 046=2E 047=2F 048=30 049=31 050=32 051=33 052=34 053=35 054=36 055=37 056=38 057=39 058=3A 059=3B 060=3C 061=3D 062=3E 063=3F 064=40 065=41 066=42 067=43 068=44 069=45 070=46 071=47 072=48 073=49 074=4A 075=4B 076=4C 077=4D 078=4E 079=4F 080=50 081=51 082=52 083=53 084=54 085=55 086=56 087=57 088=58 089=59 090=5A 091=5B 092=5C 093=5D 094=5E 095=5F 096=60 097=61 098=62 099=63 100=64 101=65 102=66 103=67 104=68 105=69 106=6A 107=6B 108=6C 109=6D 110=6E 111=6F 112=70 113=71 114=72 115=73 116=74 117=75 118=76 119=77 120=78 121=79 122=7A 123=7B 124=7C 125=7D 126=7E 127=7F 128=80 129=81 130=82 131=83 132=84 133=85 134=86 135=87 136=88 137=89 138=8A 139=8B 140=8C 141=8D 142=8E 143=8F 144=90 145=91 146=92 147=93 148=94 149=95 150=96 151=97 152=98 153=99 154=9A 155=9B 156=9C 157=9D 158=9E 159=9F 160=A0 161=A1 162=A2 163=A3 164=A4 165=A5 166=A6 167=A7 168=A8 169=A9 170=AA 171=AB 172=AC 173=AD 174=AE 175=AF 176=B0 177=B1 178=B2 179=B3 180=B4 181=B5 182=B6 183=B7 184=B8 185=B9 186=BA 187=BB 188=BC 189=BD 190=BE 191=BF 192=C0 193=C1 194=C2 195=C3 196=C4 197=C5 198=C6 199=C7 200=C8 201=C9 202=CA 203=CB 204=CC 205=CD 206=CE 207=CF 208=D0 209=D1 210=D2 211=D3 212=D4 213=D5 214=D6 215=D7 216=D8 217=D9 218=DA 219=DB 220=DC 221=DD 222=DE 223=DF 224=E0 225=E1 226=E2 227=E3 228=E4 229=E5 230=E6 231=E7 232=E8 233=E9 234=EA 235=EB 236=EC 237=ED 238=EE 239=EF 240=F0 241=F1 242=F2 243=F3 244=F4 245=F5 246=F6 247=F7 248=F8 249=F9 250=FA 251=FB 252=FC 253=FD 254=FE 255=FF

Alguns Links com Instruções WordPress

Curso HTML em Vídeos
Esta Janela Possui Vários Vídeos. Para Trocar de Vídeo Clique nos Botões→ Playlist Anterior Próximo
Mais sobre HTML: Para Ver, clique no Título do Filme
Olá Mundo Parágrafos Formato de Texto
Criando Favicom Cores Parte-1 Cores Parte-2
Imagens em HTML Listas em HTML Links Parte-1
Links Parte-2 Links Parte-3 Tabelas Parte-1
Tabela Parte-2 Tabela Parte-3 Mapeando Imagens
WordPress Menus WP.com

Veja também:
Dicas para Blogs
Primeiros passos com HTML
HTML Básico
HTML Completo (inglês)
Sombra nas Letras
Aprenda Layout com CSS
Tutorial HTML (15-Lições)
Navegadores e a Web
Publicação na internet, via FTP
Imagem e Texto Lado a Lado
Imagem de Fundo na “div”
Dicas e Códigos html
Comandos HTML




Aviso: Eventuais propagandas exibidas abaixo desta Barra não tem o aval deste Blog

Anúncios