xTibia

.com
FL
html

Tutorial Completo- Html Basico E Intermediário

Por flaier, 30 de mar. de 2008 em Programação Web

otserv
tibia
script
16
5k
flaierF
30 de março de 2008 às 12:04

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

FireBlastF
30 de março de 2008 às 13:31

Gostei! Muito bem detalhado e explicado.

 

Eu Aprovo.

speedyksS
30 de março de 2008 às 14:56

rapaz, aprovado gostei =)

 

mais acho que já vi essas funções em outro site não? Oo.. caso eu esteja enganado desculpe-me =)

flaierF
30 de março de 2008 às 15:01

obrigado,

 

stt pode até ter em outros sites, não só em que você viu mas em outros tb, pois são scripts e códigos muitos populares...

Editado Março 30 por flaier

DlydD
30 de março de 2008 às 16:05

Nossa muito grande :o

 

Eu e a minha turma (sala) mais o professor de informatica a gente vai fazer um site em html sobre biologia.

 

Abraços, talvez seja útil mais pra frente.

flaierF
30 de março de 2008 às 20:20

Dlyd qualquer coisa me add ae: victorhavenk@hotmail.com

se quiser uma mãozinha

NorthonN
31 de março de 2008 às 09:20

Se não me engano já existe um tutorial sore isso

 

Postou em lugar errado.

 

Topic Ta Bom, Bem Organizado

 

Nota: 10,0

flaierF
31 de março de 2008 às 16:54

pode teh ser que já exista mas, essa de postar em lugar errado?

aki num é a avaliação de tutos?

mas valeu ae ^^

mandarkM
31 de março de 2008 às 16:59

muito bom o tuto;

 

* mas eh sempre bom lembrar que html eh muito maior do que imaginamos,

a outras linguagens (.css .js .xhtml) integradas a ele q o torna bem mais complexo do que é;

flaierF
31 de março de 2008 às 19:56

bom lembrar msm mandark, vlws

 

breve vo faze um site com video aulas ai posto o link aki

 

vai ter tutos e apostilas de: C++ JavaScript CSS C# C-Script HTML PHP ASP

NorthonN
01 de abril de 2008 às 07:05

flaier

 

Cara está no lugar errado sim:

 

> XTibia - A sua comunidade de Tibia e OTserv > OTServ > Tutoriais - OTserv > Aprovação de Tutoriais

 

O local certo é esse:

 

XTibia - A sua comunidade de Tibia e OTserv > OFF-Topic > Programação e Desenvolvimento > HTML

 

Oks?

flaierF
01 de abril de 2008 às 16:25

é mas você nunca viu ot com site?

otra coisa tem uma seção: "Tutorias para Websites"

 

HTML tem a vê com oque?

 

Vlws

Editado Abril 1 por flaier

TprocheiraT
02 de abril de 2008 às 12:01
é mas você nunca viu ot com site?

otra coisa tem uma seção: "Tutorias para Websites"

 

HTML tem a vê com oque?

 

Vlws

HTML tem a ver com Informática, não tutoriais de WebSite. A sessão de tutoriais é para scripts, não de "tutoriais" entende?

O tópico está bem organizado, só o problema é que já existe, se não me engano, 2 Fixos deste.

Mas pelo tutorial eu realmente acho que deve ser aprovadomj6.jpg

Editado Abril 2 por Tprocheira

gabriferG
02 de abril de 2008 às 21:20

Muito bom sim!

Considero isso como se fosse um tutorial.

Está organizado e bem explicado!

APROVADO!

Abraços,

Escalador.

maximusotM
02 de abril de 2008 às 21:38

Muito bem explicado, bom e util,

nota: 9,0

 

 

 

Atenciosamente,

Maximus.