sábado, 30 de junho de 2012

Citação

A tag cite faz com que um texto fique em formato itálico, tal qual as citações de livros. Exemplo: Antes só do que mal acompanhado

segunda-feira, 9 de abril de 2012

Modificando as características do corpo das páginas

Para definirmos as características do corpo das páginas usamos:

<body background=”imagem.gif”>: coloca uma imagem no fundo de uma pagina;
<body bgcolor=”#cccccc”>: coloca uma cor de fundo na página;
<body text=”#000000″>: especifica a cor padrão de um texto;
<body link=”#000000″>: especifica a cor padrão de um link;
<body vlink=”#000000″>: especifica a cor padrão de um link visitado;
<body alink=”#000000″>: especifica a cor padrão de um link ativo;
<body leftmargin=”0″ topmargin=”10″ rightmargin=”15″>: especifica distância da margem esquerda (0), direita (10) e topo da página (15);
<body marginwidth=”0″ marginheight=”0″>: coloca as margens esquerda (0) e superior (0) no Netscape 4.0 + ;

Tudo junto fica:

domingo, 8 de abril de 2012

Posicionando Objetos HTML

Com as tags Center (Centro), Right (Direita), Left (Esquerda) e Justify (Justificado) podemos posicionar os diversos objetos que compõem uma página HTML. Basta digitar:

<posição>texto</posição>

domingo, 1 de abril de 2012

Inseindo comentários na página

Os comentários são inseridos da seguinte forma:

Exemplo:

O comando <plaintext> ignora todos os comandos HTML encontrados exibindo-os como puro HTML. Exemplo (COPIE O CÓDIGO A SEGUIR, COLE EM UM BLOCO DE NOTAS E SALVE COMO HTML):

<plaintext>Aqui serão inseridas as tag's que ndevem ser exibidas e não devem ser interpretadas como HTML.</plaintext>

terça-feira, 27 de março de 2012

A tag Marquee

Podemos dar movimento a textos, links, imagens e a outros elementos HTML, colocando-os em evidência quando a situação for conveniente, pois conforme orientamos, não é recomendado o uso excessivo deste recurso. Para a realização desta tarefa, contamos com a tag <marquee>, que é reconhecida e executada somente pelo navegador Internet Explorer da Microsoft, sendo ignorada pelos demais navegadores.

A tag <marquee> é utilizada em par, possuindo abertura e fechamento. Na parte referente a sua abertura, inserimos diversos atributos que controlam características do seu funcionamento.

A declaração básica da tag <marquee> é:
<marquee>elemento</marquee>

Vejamos agora, a descrição dos principais atributos da tag <marquee>:

(behavior)

Com este atributo, definimos o estilo de comportamento executado pela animação, podendo ser utilizado um entre os três valores disponíveis:

Behavior="scroll" - Este é o comportamento padrão utilizado pela tag >marquee<. Faz com que o elemento entre por um lado da tela e saia pelo outro, em um ciclo.

Behavior="slide" - Faz com que o elemento entre por um lado da tela e se desloque até o outro lado.

Behavior="alternate" - Faz com que o elemento se desloque de um lado para o outro da tela, em um ciclo.

(direction): Com este atributo, definimos para qual direção será movimentado o elemento:
Direction="left" - Da direita para a esquerda (direção padrão).
Direction="right" - Da esquerda para a direita.

(height): -Com este atributo, definimos em pixels ou em porcentagem da tela, a dimensão vertical que será reservada para a animação.

(width):Com este atributo, definimos em pixels ou em porcentagem da tela, a dimensão horizontal que será reservada para a animação.

(hspace): Com este atributo, podemos estabelecer uma margem horizontal externa à área da animação, onde o valor definido em pixels será assumido tanto pelo lado esquerdo como pelo lado direito.

(vspace): Com este atributo, podemos estabelecer uma margem vertical externa à área da animação, onde o valor definido em pixels será assumido tanto pelo lado superior como pelo lado inferior.

(align): Com este atributo, definimos o alinhamento vertical do elemento, dentro do espaço reservado para a animação. Podemos utilizar um entre os três valores:
Align="top" – Alinha à parte superior.
Align="middle" – Alinha ao centro (alinhamento padrão).
Align="bottom" – Alinha à parte inferior.

(bgcolor): Este atributo nos permite definir uma cor de fundo para a área reservada para a animação, utilizando o padrão RGB.

(loop): Com este atributo, podemos definir o ciclo de repetições que será aplicada a um comportamento estabelecido para a animação:

(Loop="3") – A animação executará o movimento estabelecido por três vezes.

Loop="infinite" – O ciclo de movimentos será executado ininterruptamente.

(scrollamount): Este atributo nos permite definir em pixels, o espaço para cada movimento realizado pelo elemento na animação.

(scrolldelay): Este atributo nos permite definir o tempo em milisegundos, para cada movimento realizado pelo elemento na animação.

Note que com os atributos (scrollamount) e (scrolldelay), podemos modificar conforme a nossa preferência, a velocidade do deslocamento feito pelo elemento na animação, pois quanto maior for o espaço utilizado para cada movimento, maior será a velocidade e quanto maior for o tempo utilizado para cada movimento, menor será a velocidade.

Caso necessário, podemos combinar estas duas variáveis de modo a atingir a velocidade que desejamos

domingo, 4 de março de 2012

A função meta

<head>
<meta name="description" content="Free Web tutorials"/>
<meta name="keywords" content="HTML,CSS,XML,JavaScript"/>
<meta name="author" content="Jorge Lucas"/>
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="content-language" content="pt-BR" />
</head>

Onde a meta name:

description: Define a descrição da página.
keywords: Define as palavras-chaves que servirão para pesquisas dos Sites de Buscas.
author: Define o autor da página.

Sendo que essas meta robots são somente para os métodos de busca portanto não aparecem no corpo da página.

A tag meta http-equiv designa outros atributos como:

cache-control: Definida por:
- public: cache compartilhado com o público
- private: cache privada
- no-cache: cache não armazenada
- no-store: em cache, mas não arquivado
content-language: Definida por pt-BR, ou pt-PT, ou en-EN, etc.

Horizontal Rule

A Horizontal Rule ê uma tag que divide a página em seções, por exemplo, a tag <hr color='green'>:

Ela aceita os atributos shade ou noshade e color

Como <hr shade>:
Como <hr noshade>:
Como <hr>:
Como <hr color='green'>

Formatação Strike

A formatação strike (lê-se: straik) gera o seguinte formato: ~~Observe~~. E dessa forma ele corta as palavras. Pode-se obter esse efeito por meio da tag <strike> ou também por <s>.

Tabelas

Quando queremos inserir tabelas em uma página, utilizamos a tag <table> que deve ser acompanhada pelo atributo border.

Seus atributos são:

border: Define a espessura da borda da tabela. A espessura pode ser de 1 a 6.
bordercolor: Define a cor da borda da tabela. A cor pode ser definida por código hexadecimal ou pelo nome em inglês da cor.
bgcolor: Define a cor de fundo da tabela.
width: Define a largura das cêlulas em porcentagem

O cabeçalho da tabela é definido pela tag <th> do inglês table head.

Teste
1°linha 1°coluna	1°linha 2°coluna
1°linha 1°coluna	2°linha 2°coluna

O código é descrito a seguir:
<center> <table border='1' bordercolor='green' bgcolor='gray' width='50%, 50%'><th colspan='4'>Teste</th> <tr><td rowspan='2'>1°linha 1°coluna</td><td>1°linha 2°coluna</td></tr> </table> </center>

O atributo colspan define que a linha será mesclada em várias colunas, no caso 4 colunas.

sábado, 3 de março de 2012

Inserindo imagens

Para se inserir imagens usamos a tag img que vem da palavra inglesa image acompanhado de src que vem da palavra source.

O código resulta no seguinte:

legenda

Onde:

img src: Define o localização da imagem.
width: Define a largura da imagem na página.
height: Define a altura da imagem na página.
title: Define a legenda da imagem na página.

segunda-feira, 20 de fevereiro de 2012

Estilo Marca-Texto

Para se marcar um texto como:

marca-textos

Utilizamos o código a seguir:

<p style='background:green' align='center'><font color='white'>marca-textos</font>

Em página real o código fica sobre as palavras e não sobre toda a linha.

Formulários - 3° parte: a tag select

A tag select é um menu de opções como este que vem:

O menu drop-down acima é criado pelo código a seguir:

<select name='teste' size='6'>
<option value='teste1'>Teste 1</option>
<option value='teste2'>Teste 2</option>
<option value='teste3'>Teste 3</option>
<option value='teste4'>Teste 4</option>
<option value='teste5'>Teste 5</option>
</select>

Hiperlinks

Para se produzir um hiperlink, como já vimos, a base é a seguinte:

<a href='seusite' title='sualegenda'>textodelink<a>

Mas para se inserir um outro formato de mouse, usamos o código a seguir:

<a href='seusite' title='sualegenda' style='cursor:formato>textodelink</a>

Onde o termo em itálico deve ser substituido por:

Para se adicionar cursor externo, isto é, personalizado, utilizamos a url do cursor que gostariamos utilizar.

Exemplo:

Cursors Emoticons

Para esse efeito foi utilizado o código seguinte:

<a href="http://cursores.girlspt.com/" rel="tooltip" class="style20" style="font-size: 14px; cursor: url(http://justmcagirls.com.sapo.pt/cursorsemoticons/4.ani), url(http://justmcagirls.com.sapo.pt/cursorsemoticons/4.cur), auto; " title="Cursores Emoticons">Cursors Emoticons</a>

sábado, 18 de fevereiro de 2012

Formulários - 2° parte: a tag input

A tag input define um campo para a entrada de informações. Cada campo atribui o seu conteúdo a uma variável que possui nome e tipo específico.

A sintaxe básica é:

onde:

type='tipo': Define o tipo de variável, que pode ser:
- text: Área de texto. Ele aceita os atributos name, value, size e maxlength
  - name: Nome do campo ou variável.
  - value: Define o valor do campo.
  - size: Define o tamanho da área de texto.
  - maxlength: Define a quantidade de caracteres que poderão ser inseridos no campo.
- password: Área de senha. Ele aceita os atributos name, value, size e maxlength
  - name: Nome do campo ou variável.
  - value: Define o valor do campo.
  - size: Define o tamanho da área de texto.
  - maxlength: Define a quantidade de caracteres que poderão ser inseridos no campo.
- hidden: Define uma entrada oculta. Ele aceita os atributos name e value.
  - name: Nome do campo ou variável.
  - value: Define o valor do campo.
- radio: Define um botão com uma opção. Ele aceita os atributos name e value.
  - name: Nome do campo ou variável.
  - value: Define o valor do campo.
  - checked: Define que o 'radio' será selecionado
- checkbox: Define um botão com várias opções. Ele aceita os atributos name e value.
  - name: Nome do campo ou variável.
  - value: Define o valor do campo.
  - checked: Define que o 'checkbox' será selecionado
- button: Define um botão comum. Ele aceita os atributos name e value.
  - name: Nome do campo ou variável.
  - value: Define o valor do campo, podendo ser button, reset, submit.
  - title: Define uma legenda ao botão.
- file: Define um botão que ao clicar abre uma janela para a seleção de arquivos. Ele aceita os atributos name e value.
  - name: Nome do campo ou variável.
  - value: Define o valor do campo.
- textarea: Define uma área de texto com mútiplas linhas. Ele aceita os atributos name.
  - name: Nome do campo ou variável.
- password: Define uma área de texto do tipo senha. Ele aceita os atributos name, value, size e maxlength
  - name: Nome do campo ou variável.
  - value: Define o valor do campo.
  - size: Define o tamanho da área de texto.
  - maxlength: Define a quantidade de caracteres que poderão ser inseridos no campo.
- reset: Define um botão que possui a função de apagar todo o formulário.

quinta-feira, 16 de fevereiro de 2012

Formulários - 1° parte: Iniciação

Para se iniciar um formlário devemos utilizar a tag <form>, fechando com a tag </form> e sua sintaxe é:

<form name='NomeDoFormulário' method='Método' action='URL'>

Onde:

name: Define o nome do seu formulário.
method: Define o método utilizado pelo servidor para receber os dados do formulário, e ele pode ser:
- Post: Método que transmite toda a informação imediatamente após o URL.
- Get: Método que anexa o conteúdo do formulário ao endereço da URL, por isso tem limitação de tamanho das informações.
action: Especifica a URL do programa ou da página do servidor que processará os dados do formulário.

Inserindo legenda em seu link

Você já observou que um link como:

Por que preciso informar minha data de nascimento?

possui uma propriedade que ao passar ou deixar o mouse sobre o link, a legenda 'Clique para obter mais informações' aparece no próximo ao mouse?

Essa propriedade é inserida pelo trecho destacado na tag citada a seguir:

<a href='http://www.facebook.com/index.php?lh=Ac80ll759ceVIvXh' title='Clique para obter mais informações'>Por que preciso informar minha data de nascimento?</a>

Em que o trecho em destaque é responsável pela legenda do hiperlink.

sábado, 11 de fevereiro de 2012

Preformatação

Através da tag <pre> podemos incluir um texto que foi editado por um editor de texto e preservar sua formatação original, como marcas de tabulação, e fim de linha gerada pela tecla Enter. A sintaxe do comando é a seguinte:

<pre>
Tudo o que escrever aqui,
em qualquer formatação
aparecerá assim.
</pre>

e gera a formação a seguir:

Tudo o que escrever aqui, 
                  em qualquer formatação 
    aparecerá assim.

já sem a tag <pre>:

Tudo o que escrever aqui,
em qualquer formatação
aparecerá assim.

quinta-feira, 9 de fevereiro de 2012

Listas de Definição

Listas de Definição são listas que servem para definir itens e o princípio delas é exemplificado a seguir:

Café: Bebida quente e preta
Leite: Bebida fria e branca

e o seu código é a seguir:

Onde:

<dl>: É definido por definition list que traduzido é lista de definição
<dt>: É definido por definition text que traduzido é texto para definição
<dd>: É definido por definition description que traduzido é descrição de definição.

quarta-feira, 8 de fevereiro de 2012

Sobrescrever ou subscrever

Para demonstrar calcular uma poténcia utilizamos:

2<sup>3<sup>

Que equivale a:

2³

e x<sub>1<sub> gera esse resultado - subscrito:

x₁

domingo, 5 de fevereiro de 2012

Agradecimento pelos 167 acessos ao blog

Eu gostaria de agradecer aos 167 acessos:

Acessos
País	Qntdade.
Brasil	106
Rússia	40
Alemanha	19
Estados Unidos	2

Acessado dia 05/02/2012.

Eu agradeço a todos os internautas brasileiros, russos, alemães, e estadunidenses!

Я благодарю всех серферов, бразильцы, русские, немцы и американцы!

Ich danke allen, die Surfer, Brasilianer, Russen, Deutsche und Amerikaner!

I thank all the surfers, Brazilians, Russians, Germans and Americans!

Faça seu Signbot

Acesse o site: http://wigflip.com/signbot/ e crie uma imagem GIF dessas:

sábado, 4 de fevereiro de 2012

Cabeçalho - Header

O Cabeçalho é formatado pelo código Hn onde n corresponde a um número de 1 a 6:

Código com h1

Código com h2

Código com h3

Código com h4

Código com h5

Código com h6

Veja melhor o funcionamento no link: Exemplo

sábado, 21 de janeiro de 2012

Comando Fieldset

O comando Fieldset destaca um campo. Exemplo:

TítuloDoFieldset
textodeconteúdotextodeconteúdotextodeconteúdotextodeconteúdotextodeconteúdo

Entendendo os Comandos

fieldset: Comando principal
legend: Legenda

sexta-feira, 13 de janeiro de 2012

Listas Não Ordenadas

As listas não ordenadas são as listas organizadas por marcadores simbólicos como círculos, quadrados ou discos.

As listas não ordenadas de marcador círculos são definidas por 'circle', enquanto a lista com marcadores quadrados são definidos por 'square', e as listas que possuem um 'disco' por definição de marcador são definidas por 'disc'.

O código básico é:
<ul type='tipo'><li><br /> <li><br /> <li><br /> </ul>

O qual você deve trocar a palavra 'tipo' pela sua definição de lista.

Configurando a fonte

Quando editamos um texto, definimos que se o texto será escrito em Arial, Negrito, Itálico, Sublinhado, Tachado, e em que tamanho ele será escrito.

No Microsoft Word, bastaria nós clicarmos em um botão e outro e definiríamos a Formatação do nosso texto. Em HTML, também é possível formatarmos um texto, mas de forma diferente da disponibilizada pelos Editores de Texto: WordPad, Microsoft Word, etc.

Para deixar seu texto em negrito, usamos a TAG '<'b'>' '<'/'b'>'

Exemplo:

Meu texto em negrito

Para que seu texto fique em itálico, usamos a TAG
'<'i'>''<'/'i'>'

Exemplo:

Meu texto em itálico

E finalmente em sublinhado, usamos a TAG
'<'u'>'<'/'u'>'

Exemplo:

Meu texto em sublinhado

Ainda existem outras maneiras de deixar seu texto personalizado: Usando CSS

Usando CSS para deixar seu texto em itálico:
'<'font style='font-style:italic;''>'
Texto itálico com CSS

Usando CSS para deixar seu texto em negrito:
'<'font style='font-weight:bold;''>'
Texto negrito com CSS

Usando CSS para deixar seu texto em sublinhado:
'<'font style='text-decoration: underline;''>'
Texto sublinhado com CSS

Quanto a cor, formato e tamanho da fonte, eles são definidos pela tag:

<font size='n' face='nome' color='cor'>TEXTO</font>

Onde:

size: Formata o tamanho da fonte, que pode ser um número de 1 a 7.
face: Formata o estilo da fonte, que pode ser qualquer uma das configuradas pelo Windows, como: Arial, Arial Black, Verdana, etc.
color: Formata a cor da fonte, que pode ser descrita em inglês, código hexadecimal, entre outras formas.

quinta-feira, 12 de janeiro de 2012

Listas Ordenadas

Numérica:
1. Aprenda
2. Agora
Código:
<ol><li>Aprenda<br /> <li>Agora</ol>
Números Romanos Maiúsculo:
1. Aprenda
2. Agora
Código:
<ol type='I'><li>Aprenda<br /> <li>Agora</ol>
Alfabético minúsculo:
1. Aprenda
2. Agora
Código:
<ol type='a'><li>Aprenda<br /> <li>Agora</ol>
Alfabético maiúsculo:
1. Aprenda
2. Agora
Código:
<ol type='A'><li>Aprenda<br /> <li>Agora</ol>
Números Romanos Minúsculos:
1. Aprenda
2. Agora
Código:
<ol type='i'><li>Aprenda<br /> <li>Agora</ol>

quarta-feira, 11 de janeiro de 2012

Site de Webmasters: Planos de Fundo

Planos de Fundo

Mais informações »

Símbolos para Código HTML

Código HTML	Browser View	Código HTML	Browser View	Código HTML	Browser View	Código HTML	Browser View	Código HTML	Browser View
©	©	!	!	_	_			Û	Û
®	®	"	"	`	`		ž	Ü	Ü
		#	`	a	a		Ÿ	Ý	Ý
"	"	$	$	b	b			Þ	Þ
&	&	%	%	c	c	¡	¡	ß	ß
<	<	&	&	d	d	¢	¢	à	à
>	>	'	'	e	e	£	£	á	á
À	À	(	(	f	f	¤	¤	â	â
Á	Á	)	)	g	g	¥	¥	ã	ã
Â	Â	*	*	h	h	¦	¦	ä	ä
Ã	Ã	+	+	i	i	§	§	å	å
Ä	Ä	,	,	j	j	¨	¨	æ	æ
Å	Å	-	-	k	k	©	©	ç	ç
Æ	Æ	.	.	l	l	ª	ª	è	è
Ç	Ç	/	/	m	m	«	«	é	é
È	È	0	0	n	n	¬	¬	ê	ê
É	É	1	1	o	o			ë	ë
Ê	Ê	2	2	p	p	®	®	ì	ì
Ë	Ë	3	3	q	q	¯	¯	í	í
Ì	Ì	4	4	r	r	°	210°	î	î
Í	Í	5	5	s	s	±	±	ï	ï
Î	Î	6	6	t	t	²	A²	ð	ð
Ï	Ï	7	7	u	u	³	B³	ñ	ñ
Ð	Ð	8	8	v	v	´	´	ò	ò
Ñ	Ñ	9	9	w	w	µ	µ	ó	ó
Õ	Õ	:	:	x	x	¶	¶	ô	ô
Ö	Ö	;	;	y	y	·	·	õ	õ
Ø	Ø	<	<	z	z	¸	¸	ö	ö
Ù	Ù	=	=	{	{	¹	¹	÷	÷
Ú	Ú	>	>	\|	\|	º	210º	ø	ø
Û	Û	?	?	}	}	»	»	ù	ù
Ü	Ü	@	@	~	~	¼	¼	ú	ú
Ý	Ý	A	A		?	½	½	û	û
Þ	Þ	B	B		€	¾	¾	&#252	ü
ß	ß	C	C			¿	¿	ý	ý
à	à	D	D		‚	À	À	þ	þ
á	á	E	E		ƒ	Á	Á	ÿ	ÿ
å	å	F	F		„	Â	Â
æ	æ	G	G		…	Ã	Ã
ç	ç	H	H		†	Ä	Ä
è	è	I	I		‡	Å	Å
é	é	J	J		ˆ	Æ	Æ
ê	ê	K	K		‰	Ç	Ç
ë	ë	L	L		Š	È	È
ì	ì	M	M		‹	É	É
í	í	N	N		Œ	Ê	?
î	î	O	O			Ë	Ë
ï	ï	P	P		Ž	Ì	Ì
ð	ð	Q	Q			Í	Í
ñ	ñ	R	R			Î	Î
ò	ò	S	S		‘	Ï	Ï
ó	ó	T	T		’	Ð	Ð
ô	ô	U	U		“	Ñ	Ñ
õ	õ	V	V		”	Ò	Ò
ö	ö	W	W		•	Ó	Ó
ø	ø	X	X		–	Ô	Ô
ù	ù	Y	Y		—	Õ	Õ
ú	ú	Z	Z		˜	Ö	Ö
û	û	[	[		™	×	×
ý	ý	\	\		š	Ø	Ø
þ	þ	]	]		›	Ù	Ù
ÿ	ÿ	^	^		œ	Ú	Ú

Como iniciar uma página de Internet

Toda página de Internet é construída em HTML (HyperText Markup Language ou Linguagem de Marcação de Hipertexto) e escrita de várias formas, as que serão aqui descritas são páginas que devem ser escritas no Bloco de Notas - em alguns computadores são descritos como NotePad - e salvos como .html
No início da página deve ser escrito a '<'html'>', e para inserir título na barra de título da sua página, insira a tag '<'head'>' '<'/head'>' e entre elas a tag '<'title'>' '<'/title'>'. Para inserir corpo em sua página, coloque o conteúdo entre as tag's '<'body'>' '<'/body'>'.
Veja abaixo o código:

Lembre-se de quando salvar o seu documento da Web, salvar como 'texto'.html.

terça-feira, 10 de janeiro de 2012

Já pensou em inserir em sua página de Site um Jogo da Forca? Basta inserir o código a seguir no bloco de notas e salvar como 'Jogo da Forca.html'

<html><head><title>Jogo da Forca</title><br /> <br /> <br /> <br /> <style>    </style><br /> <br /> <html><br /> <br /> <body onload="sorteio();" bgcolor="#000000"><br /> <br /> <center><br /> <br /> <div id="jg"></div><br /> <div id="tcdo"><br /> <script language="JavaScript">    /*  -------------------        FORCA em DHTML 0.1 beta;                   -------------------               by Francke Silva   -------------------         MSN :  Francke@xmasters.com.br         -------------------  */    //  BIBLIOTECA DE PALAVRAS      var palavras   = new Array();      palavras[0]  = "carteira";      palavras[1]  = "brasil";      palavras[2]  = "amor";      palavras[3]  = "fresco";      palavras[4]  = "andrez";      palavras[5]  = "bobeira";      palavras[6]  = "marcos";      palavras[7]  = "selo";   palavras[8]  = "jogo";   palavras[9]  = "mapa";   palavras[10] = "babado";   palavras[11] = "ana";   palavras[12] = "critico";   palavras[13] = "windows";   palavras[14] = "linux";   palavras[15] = "macaco";   palavras[16] = "panela";   palavras[17] = "presente";   palavras[18] = "fofura";   palavras[19] = "grafico";   palavras[20] = "mula";   palavras[21] = "cavalo";   palavras[22] = "escola";          palavras[23] = "mae";      palavras[24] = "computador"     // Variaveis GLOBAIS      var  k;      var iconte = Math.floor(Math.random()*2);      var dj  = document.getElementById('jg');      var erro = 1;      var d = "<pre><font class=gameover>";      var iconte = Math.floor(Math.random()*7);      var ki = new Array(palavras[iconte].length);        // adicinando adicionar o valor "__"    //no vetor que armazena a palavra sorteada;   var itempodejogo = 0;      for(k=0;k<palavras[iconte].length;k++){            ki[k]="__";     }        var p = new Array();  function tempodejogo(){    setTimeout("tempodejogo()",1000);    itempodejogo++;  }  /*  -------------------        SORTEIO,     essa funcao eh chamada     todas as vezes que a      pagina eh chamada ou     quando atualiza a pagina     e no termino do jogo     precionando o botao     NOVO JOGO;             -------------------               by Francke Silva   -------------------         E¹/²:  Francke@xmasters.com.br    WEB :  http://xmasters.com.br    MSN :  Francke@xmasters.com.br         -------------------  */      function sorteio() {      var djc = "<table cellpadding=2  ";          djc = djc + "cellspacing=4 border=0 width=390 ";          djc = djc + " height=40 bgcolor=#000000 style='border: ";          djc = djc + " 1px solid #666666;'><tr>";      for(k = 0; k < palavras[iconte].length; k++){       p[k] = k;    djc = djc + "<td style='border: 0px solid #000000;' ";          djc = djc + " bgcolor=#000000 align=center ";          djc = djc + " valign=middle class=visao> __ </td>";   }          djc = djc + "</tr></table><br>";        dj.innerHTML = djc;    tempodejogo();  }  /*  -------------------        VERIFICA ERRO     quando essa funcao eh chamada,     significa que o usuario chutou     uma letra que nao existe na      palavra sorteada;              -------------------               by Francke Silva   -------------------         E¹/²:  Francke@xmasters.com.br    WEB :  http://xmasters.com.br    MSN :  Francke@xmasters.com.br         -------------------  */  function verificaerro(){     var m = document.getElementById('g');     switch (erro){      case 0:          break      case 1:          d = d + "      O   \n"          break      case 2:          d = d + "    -"          break      case 3:          d = d + " | "          break      case 4:          d = d + "-\n"          break      case 5:          d = d + "     /"          break      case 6:          d = d + " \\ \n"          break      default:      var tecladaosome = document.getElementById('tecladao');          tecladaosome.style.display = 'none';          /*          d = d + "        ";          d = d + "\n\n<b>       ";          d = d + "GAME OVER</b>".blink() +"  \n\n";          d = d + "    palavra: " + palavras[iconte];          d = d + "\n\n      ";          d = d + "<a href=# onclick='window.location.reload( false );' ";          d = d + "  tyle='border: ";          d = d + " 1px solid #000000;' class=gameover>[ NOVO JOGO ]</a>";          */          d = "<img src='gover.gif'><br><br>";          d = d + "<font class=gameover><b>GAME OVER</b></font><br>";                    d = d + "<br>";          d = d + "<a href=# onclick='window.location.reload( false );' ";          d = d + "  tyle='border: ";          d = d + " 1px solid #000000;' class=gameover>[ NOVO JOGO ]</a><br>";          d = d + "<font class=gameover> Palavra: <blink>" + palavras[iconte].toUpperCase() +"</blink></font>";        }       // passar resultados de erro;   // criar boneco para a forca;            m.innerHTML = d;          erro++;    }  /*  -------------------        JOGAR -     inicia uma jogada.     quando o usuario clica em uma das     letras, esses dados sao  passados     por essa funcao que verifica se      existe a letra na palavra sorteada;             -------------------               by Francke Silva   -------------------         E¹/²:  Francke@xmasters.com.br    WEB :  http://xmasters.com.br    MSN :  Francke@xmasters.com.br         -------------------  */    function jogar(letra){     var nome = palavras[iconte].toUpperCase();         nome.split("");     var erroSim = 0;     var coleta = "";     for(k = 0; k < palavras[iconte].length; k++){            if(nome[k] == letra){                    ki[k] = letra;             }               if(ki[k] != "__") {                    coleta =  coleta + ki[k];                 }               }       if(coleta.match(letra) == letra){            //  ENCONTROU        } else {                 erroSim = 1;               }        var ik;        var t;        t = "<table cellpadding=2 cellspacing=4 ";        t = t + " border=0 width=390 height=40 ";        t = t + " bgcolor=#000000 style='border: ";        t = t + " 1px solid #666666;'><tr>";            for(ik = 0; ik < palavras[iconte].length; ik++){        t = t + "<td style='border: ";           t = t + "0px solid #000000;' bgcolor=#000000 ";           t = t + " align=center valign=middle ";           t = t + " class=visao>"+ ki[ik] +"</td>";       }           if(erroSim == 1){                      verificaerro();          erroSim = 0;       }         t = t + "</tr></table><br>";        dj.innerHTML = t;             if(coleta == palavras[iconte].toUpperCase()){                var winmsg = "<br><img src='gwin.gif'>";                  winmsg = winmsg + "<br><br><font class=gameover>Palavra revelada: <b><blink>";                  winmsg = winmsg + palavras[iconte].toUpperCase() + "</blink>";                  winmsg = winmsg + "<br><br>PARABÉNS VOCÊ VENCEU!!!<br><br>";                  winmsg = winmsg + "<a href=# onclick='window.location.reload( false );' ";                  winmsg = winmsg + "class=gameover>[ NOVO JOGO ]</a>";                              var winG = document.getElementById('g');                  winG.innerHTML =  winmsg;                 var tsome = document.getElementById('tecladao');                     tsome.style.display = 'none';                   var stempo = window.open("", "forca", 'width=370,height=20');                if(itempodejogo < 30) {        stempo.document.write("<center><font style='font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif;font-color:#ffffff;color:#ffffff;font-weight:bold; text-decoration : none;'><b>PARABENS seu tempo foi de ("+itempodejogo+")seg.<br><img src='gwin.gif'>");        }else {             if(itempodejogo < 60){         stempo.document.write("<center><font style='font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif;font-color:#ffffff;color:#ffffff;font-weight:bold; text-decoration : none;'><b>eh vc foi mais ou menos, mas mesmo assim PARABENS seu tempo foi de ("+itempodejogo+")seg.<br><img src='gwin.gif'>");           } else {                 stempo.document.write("<center><font style='font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif;font-color:#ffffff;color:#ffffff;font-weight:bold; text-decoration : none;'><b></b>Ateh ganhou, mas es MUITO FRACO.. seu tempo foi de ("+itempodejogo+")seg.<br><img src='gwin.gif'>");             }       }             stempo.document.bgColor="black"       stempo.document.close()            }  }       /*  -------------------        TECLADO VIRTUAL              -------------------               by Francke Silva   -------------------         E¹/²:  Francke@xmasters.com.br    WEB :  http://xmasters.com.br    MSN :  Francke@xmasters.com.br         -------------------  */   document.write("<table id=tecladao cellpadding=3 cellspacing=6 border=1 width=390 height=90 bgcolor=#000000");   document.write(" style='border: 1px solid #666666;'><tr style='border: 1px #000000;'> <form name=f action=# onsubmit='return false;'>");  var linha=0;  for(i=65; i < 91; i++){      if(linha == 8) {         linha=0;         document.write("</tr><tr style='border: 1px #000000;'>");      }      document.write("<td align=center valign=middle width=15  style='border: 1px solid #000000;' bgcolor=#000000 ");      document.write(" onmouseover=style.backgroundColor='#FF0000;' onmouseout=style.backgroundColor='#000000' > ");      document.write("<input type=submit name='" + String.fromCharCode(i)+"'  onclick=\"jogar('" + String.fromCharCode(i));      document.write("');document.f."+ String.fromCharCode(i)+".style.display ='none';\" class=teclado value=" + String.fromCharCode(i) + " ></td>");      linha++;  }      document.write("</tr></form></table>");  </script><br /> <br /> </div><br /> <br /> <br /> <div id="g"></div><br /> <br /> <br /> </body><br /> <br /> <br /> <br /> </html>

Caso queira visualizar na prática acesse o link: Forca

Regras básicas para criar uma webpage

Para iniciarmos uma página da Web devemos inicialmente abrir um arquivo do Bloco de Notas, em alguns computadores são nomeados como NotePad, e escrever:

Após escrever isso, salve sua página como: 'otítulodasuapágina.html', substituindo 'otítulodasuapágina' pelo nome que preferir.

Vocabulário:

html: HyperText Markup Language
textarea: Área de Texto
head: Cabeçalho
title: Título
body: Corpo da Página

Inserindo a função Imprimir na Página HTML

Para inserir a função 'Imprimir Página' em uma página da Rede de Computadores, devemos nos decidir se inserimos essa função em um link ou em um botão, lembrando sempre da iniciação básica de uma página escrita em HTML.

Caso o(a) Webmaster se decida por inserir a função em um botão, deverá inserir o código abaixo na parte interior da página.

<input type="button" name="imprimir" value="Imprimir" onclick="window.print();">

Para esse código funcionar, você deve inserir esse código entre as tag's <body></body>