Alô Criançada do :XTibia_smile: todo mundo :weight_lift: ae né?
Bom, Hoje estou aqui para ensinar a Vocês sobre algumas notações e códigos de nível: básico e intermediário
Requisitos:
--Apache 1.3 ou mais--
--Conhecimento Mínimo de código html--
Importante!!
Ao longo do tutorial o aprendiz deve testar todos os exemplos,
de preferência a digitar os códigos para que possa fixar melhor.
Agora Chega de Enrolação Vamos ao Que Nos Entereça os códigos e notações:
Quote=Códigos e Notações
Itálico=Sinal
Negrito=Importante
Sublinhado=Título dos Códigos e Notações
Quebra de Linha
A Quebra de Linha é nada Mais nada menos que um sinal que indica que uma linha acabou e apartir desse sinal começa outra:
Aqui começa a linha <br> Aqui Terminou e Começou outra linha
Título da página
O título da página é nome que aparece no topo da página (Antes do Minimizar):
<!----Obrigatório ficar entre as tags head-----> <head><title>Título da página</title></head>
Conceitos Body
Body é o corpo dá página, ou seja tudo o que envolve a página menos o Head que é a cabeça da página:
<!------Tags de Script-----><body>
<!-----Aqui todos os scripts que devem ficar no corpo da página----->
</body>
Aqui exemplos de Tag para formatações que devem ficar no corpo da página:
<body aqui a formatação>
Formatações de Body:
Cor de Fundo
A cor de Fundo é a cor que vai ficar em todo o corpo da página:
<body bgcolor="Cor em Hexa ou nome exemplo: #000000 ou Black">
Imagem de Fundo
A imagem de fundo é a imagem que vai cobrir todo o corpo da página:
*Suporta qualquer tipo de extenção de imagem
<body background="Diretório da imagem exemplo: Imagens/Madeira.jpg">
*Importante: você pode colocar mais de uma formatação na mesma tag:
<body bgcolor="#FFFFFF" background="Monstro.bmp">
Música e Vídeo:
Música
A música Vísivel é aquela em que o visitante do site pode ver o player da música ou vídeo:
<embed src="Música.avi" width="400" height="300" hidden="false" autostart="true" loop="true">
Explicando:
src: Diretório da música ou vídeo
width: Largura do Player
height: Altura do Player
hidden: Atribudo que permite o player ficar oculto ou não (true=verdadeiro(sim) false=falso(não))
autostart: Atributo que permite o player execultar altomaticamente (true=verdadeiro(sim) false=falso(não))
loop: Atributo que permite que a música ou vídeo fique repetindo (true=verdadeiro(sim) false=falso(não))
*É bom saber que: se você quiser uma música de fundo é só colocar no hidden "true" e nenhum valor na altura e largura.
Estilos:
Existem vários tipos de estilos e vários métodos de aplicalos ao site, um deles é colocando no script dá página e o outro embutindo com um arquivo .css, o método que eu vou usar é colocar o script ná página.
Tags do estilo
As tags do estilo servem para indentificar os scripts de estilo.
<style><!-----Aqui o script do estilo----->
</style>
Estilo da Barra de Rolagem (Ou Rolamento)
body { scrollbar-face-color: Black; <!----Cor da face da barra----->scrollbar-highlight-color: Red; <!----Cor da luz da barra----->
scrollbar-shadow-color: Black; <!----Cor da sombra da barra----->
scrollbar-3dlight-color: Red; <!----Cor da luz 3d da barra----->
scrollbar-arrow-color: Yellow; <!----Cor da flexa (setas) da barra----->
scrollbar-track-color: Black; <!----Cor da face interna da barra----->
scrollbar-darkshadow-color: Red; <!----Cor da sombra mais escura da barra----->
}
Estilo Do Link
A:link {COLOR:#D0D0D0;} <!----Cor do link----->A:visited {COLOR:#00FF00;} <!----Cor do link depois de visitado----->
A:hover {COLOR:#D0D0D0;} <!----Cor do link quando o cursor passar em sima---->
Estilo da Tabela
Para que esse funcione é nesseçário colocar a tag: CLASS="tbBorder" Exemplo:
<table CLASS="tbBorder"><tr>
<td> </td>
</tr>
</table>
Aquie o Código:
.tbBorder{
BORDER-TOP: #000000 20px solid; <!-----Cor em hexa e tamanho em pixels do topo da tabela---->
BORDER-RIGHT: #000000 5px solid; <!-----Cor em hexa e tamanho em pixels da direita da tabela---->
BORDER-BOTTOM: #000000 5px solid; <!-----Cor em hexa e tamanho em pixels de baixo da tabela---->
BORDER-LEFT: #000000 5px solid; <!-----Cor em hexa e tamanho em pixels da esquerda da tabela---->
BACKGROUND-COLOR: #CCFF99; <!-----Cor em hexa do fundo da tabela---->
}
Alinhamento de um Objeto
Um objeto pode ser alinhado no centro, na direita e na esquerda, para que isso ocorra a seguinte tag deve ser colocada no código do objeto:
align="center" <!----Para o centro--->align="left" <!----Para a esquerda--->
align="right" <!----Para a direita--->
Inserindo um Baner em movimento
Código para um baner se movendo para qualquer lado:
<!-----------o código fonte começa aqui-----------------><div align=center><marquee id="externalmarquee" direction="Direção: up left right down" scrollAmount=1 style="width:256px;height:80px;border:0px solid black;padding:3px" onMouseover="this.scrollAmount="Velocidade com o mouse" onMouseout="this.scrollAmount="Velocidade sem o mouse" bgcolor="Cor do corpo se não possuir nem um valor ficar transparente">
Texto
<br>
Do
<br>
Baner
<br>
Qualquer formatação é aceita.
</div>
</marquee>
<br>
<!-----------o código fonte termina aqui----------------->
Bloqueando o lado direito do mouse (Rightclik)
Esse é para quem não quer que o lado dierito do mouse funcione no seu site:
<script language="Javascript1.2">
message = "(mensagem que será exibida quando o visitando clicar com o lado direito sómente altere isso)";
function NoRightClick(B) {
if(((navigator.appName=="Microsoft Internet Explorer")&&(event.button > 1))
||((navigator.appName=="Netscape")&&(b.which > 1))){
alert(message);
return false;
}
}
document.onmousedown = NoRightClick;
// -->
</script>
Título dá página rolando
Deve Ficar Entre as Tags Body e Head
<body><head>
<script> var repeat=1 // 0 para rolar uma vez, 1 para rolar infinitamente
var title=document.title
var leng=title.length
var start=1
function titlemove() {
titl=title.substring(start, leng) + title.substring(0, start)
document.title=titl
start++
if (start==leng+1) {
start=0
if (repeat==0)
return
}
setTimeout("titlemove()",300) // aqui vc pode aumentar ou diminuir a velocidade
}
if (document.title)
titlemove()
</script>
</body>
</head>
Imagem Aumenta ao ser Clicada
<img src="diretório da imagem" width="200" height="60" name="myImage"onclick="java script:myImage.height=myImage.height+50;myImage.width=myImage.width+50"
ondblclick="java script:myImage.width=200;myImage.height=60">
Texto Sendo digitado
<script language="JavaScript1.2">
var it=0
function initialize(){
mytext=typing.innerText
var myheight=typing.offsetHeight
typing.innerText=''
document.all.typing.style.height=myheight
document.all.typing.style.visibility="visible"
typeit()
}
function typeit(){
typing.insertAdjacentText("beforeEnd",mytext.charAt(it))
if (it<mytext.length-1){
it++
setTimeout("typeit()",100)
}
else
return
}
if (document.all)
document.body.onload=initialize
</script>
Aí você coloca em qualquer lugar do site esse span:
<span id="typing" style="visibility:hidden" align="left"><small>Aqui a fraze com qualquer formatação</small></span>
Tipo de Fonte
<font face="Aqui a fonte exemplo: Verdana">Aqui o texto</font>
Página Rolando
Script Muito interessando bom para páginas de termos de contrato:
<script language=JavaScript1.2>
var currentpos=0,alt=1,curpos1=0,curpos2=-1
function initialize(){
startit()
}
function scrollwindow(){
if (document.all)
temp=document.body.scrollTop
else
temp=window.pageYOffset
if (alt==0)
/*alt=1
else
alt=0*/ /*esta parte faz com que volte para o topo.*/
if (alt==0)
curpos1=temp
else
curpos2=temp
if (curpos1!=curpos2){
if (document.all)
currentpos=document.body.scrollTop+1
else
currentpos=window.pageYOffset+1
window.scroll(0,currentpos)
}
else{
currentpos=0
window.scroll(0,currentpos)
}
}
function startit()
{
setInterval("scrollwindow()",130) /*ESTA PARTE É A VELOCIDADE Q O TEXTO VAI ANDAR, ESSE NÚMERO QUANTO MAIOr, MENOR A VELOCIDADE.*/
}
window.onload=initialize
</SCRIPT>
Bom Galera (desculpe os erros de português) e é assim que eu encerro esse tuto com Créditos 100% por mim: Victor França Lopes
Em breve vo posta video aulas só falta compra o microfone XD mas tudo bem
Obrigado