HTML FácilPublicado em 17/06/2015

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­Esquerdoabaixo 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. Clique aqui e veja Vídeo com instruções. Para testar fora do WordPress cada uma das Tags, 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 WordPressdesenvolvem fielmente as instruções aqui apresentadas.

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

As Letras ficam assim:

1. Primeiro­Texto2. Segundo­Texto3. Terceiro­Texto c/tarja4. Quarto-Texto5. Quinto­Texto6. Sexto­Texto7. Texto em Depressão8. Texto em Relevo9. Texto Tri­dimensional10. Letras Com Esboços11. Letras Com Esboços12. Brilho Neon Fraco13. Brilho Neon Médio14. Brilho Neon Forte15. Branco Legível16. Letras com Sombra17. 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 Alinhar Textos utilize a Tag: span

1­Alinhamento à Esquerda:

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:

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)

1234567891011121314151617

<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 c/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;"> Texto em Depressão </font><font style="text‐shadow: 1px 1px black, ‐1px ‐1px white; color:#CCCCCC; background‐color:D1D1D1;"> 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;">Saudações a todos!</font><font style="text‐shadow:5px 5px 7px blue;color:red;"><b>Tenham um bom dia!</b></font>

123

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

123

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

3­Alinhamento à Direita:

O Texto fica assim:

3.435.982,0040.000,35

532.901,824.008.884,17

4­Alinhamento Justificado:

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 Sublinhar e Tarjar Textos utilize as Tags: span, u

O Texto fica assim:1. Texto sublinhado encima e embaixo2. Texto sublinhado somente embaixo3. Texto sublinhado somente encima4. Texto sublinhado somente embaixo5. Isto é apenas um teste de tarja em um texto6. Isto é apenas um teste de tarja em um texto7. Isto é apenas um teste de tarja em um texto

Para Negrito utilize as Tags: strong, b

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

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

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

Para Quebrar a Linha utilize a Tag: br

123456789

<span style="text‐align: right; display: block"><font face="courier new"><b>3.435.982,0040.000,35532.901,824.008.884,17</b></font></span><div style="clear: both;"></div>

123

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

1234567

<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>

123

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>

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

12

<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>

Exemplo:

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

Para Inserir Imagem utilize a Tag: img

1­Imagem Sem Texto:

A Imagem fica assim: img → Tagstyle=”margin:5px;” → Margem Externasstyle=”margin­left:5px;” → Margem Externas Esquerdastyle=”margin­right:5px;” → Margem Externas Direitastyle=”margin­top:5px;” → Margem Externas superiorsrc=”http:// …” → Endereço (URL) da Imagemwidth=”136″ → Tamanho Horizontal da imagemheight=”144″ → Tamanho Vertical da imagemtitle=””xxx” → Legenda ao passar o MouseCódigos Opcionais→ style/width/height/title

2­Imagem à Esquerda e Texto a Direita:

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 outrosdeuses 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 ainiqü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:

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 porintermé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 deverdade, 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 orevelou.(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

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 fazer uma Caixa de Rolagem utilize a Tag: div

A Caixa de Rolagem fica assim:

1 <br />

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

1 <img style="margin:5px;" src="https://palavraquesalva.files.wordpress.com/2014/04/cavalo.gif" width="136" height="144" title="Legenda: Escreva o que você quiser na Legenda: title." />

123

<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>

123

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

123

<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 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>.

123

<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>

Início do Conteúdo da Caixa de Rolagem.height:100px → Altura da Caixawidth:200px → Largura da Caixaline­height:18px → Altura de cada Linha de Textooverflow:auto → Código da Rolagem(não altere)border:2px solid #000000 → Espessura/Tipo/Cor Borda (solid, dashed)Tipos de border: dotted, dashed, solid, double, groove, ridge, inset, outsetbackground­color:#FFFFCC → Cor do Fundo (blue, red, yellow)text­align:center → Alinhamento(center, left, right, justify)padding:2px → Espaço entre a Borda e o Conteúdo

Para fazer uma Tabela (Planilha) utilize a Tag: 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 TabelaBorder: 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 fazer uma Linha horizontal utilize a Tag: div

A Linha fica assim:

1234567891011121314151617181920212223242526272829303132333435

<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="https://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>

1234

<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>

Para Imprimir a Página Exibida no Navegador utilize a Tag: a

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

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

O Link fica assim:Imprimir Página

Exemplo 2:

O Link fica assim:

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:

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 lugardas 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:

Cores e Códigos HTML:

12

<a href="#" onclick="window.print();">Imprimir Página</a><a href="#" onclick="window.print();" title="Imprimir esta página"><img src="https://palavraquesalva.files.wordpress.com/2015/06/impressora.gif

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

1 <a target="_blanc" href="">Imprimir Página</a>

1 <a target="_blanc" href="" title="Imprimir uma Página em PDF"><img src="https://palavraquesalva.files.wordpress.com/2015/06/impressora.gif

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

Decifrando o Código de Cores RGBO 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 acada número. A mistura destas três cores geram todas as outras. O Número da Esquerda pigmenta o Vermelho, o do Meiopigmenta o Verde, e o da Direita pigmenta o Azul. Cada Número Hexadecimal deve ser composto por 2 Dígitos. Para cadaPixel (menor unidade de imagem) do monitor, existem pelo menos 3 Bytes reservados na memória (um Byte para cada umadas cores RGB) pra controlar a cor do respectivo ponto. A Resolução do Monitor depende da quantidade de Pixel que a placade vídeo é capaz de controlar.

Tabela de Conversão Decimal X Hexadecimal000=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=12019=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=25038=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=38057=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=4B076=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=5E095=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=71114=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=84133=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=97152=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

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

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

Compartilhar:

Esse post foi publicado em Informática. Bookmark o link permanente.

Palavra Que Salva

Sobre estes anúncios

Ocasionalmente, alguns dos seus visitantes podem ver um anúncio aqui.

Conte mais | Ignorar esta mensagem

O tema Twenty Ten. Crie um website ou blog gratuito no WordPress.com.