html Tutorial Completo- Html Basico E Intermediário

flaier · Março 30, 2008

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

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

<body>



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


</style>

Estilo da Barra de Rolagem (Ou Rolamento)

body { scrollbar-face-color: Black; 
scrollbar-highlight-color: Red; 

scrollbar-shadow-color: Black; 

scrollbar-3dlight-color: Red; 

scrollbar-arrow-color: Yellow; 

scrollbar-track-color: Black; 

scrollbar-darkshadow-color: Red; 

}

Estilo Do Link

A:link {COLOR:#D0D0D0;} 
A:visited {COLOR:#00FF00;} 

A:hover {COLOR:#D0D0D0;}

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; 

BORDER-RIGHT: #000000 5px solid; 

BORDER-BOTTOM: #000000 5px solid; 

BORDER-LEFT: #000000 5px solid; 

BACKGROUND-COLOR: #CCFF99; 

}

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" 
align="left" 

align="right"

Inserindo um Baner em movimento

Código para um baner se movendo para qualquer lado:

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

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

FireBlast · Março 30, 2008

Gostei! Muito bem detalhado e explicado.

Eu Aprovo.

speedyks · Março 30, 2008

rapaz, aprovado gostei =)

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

flaier · Março 30, 2008

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, 2008 por flaier

Dlyd · Março 30, 2008

Nossa muito grande

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.

flaier · Março 30, 2008

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

se quiser uma mãozinha

Northon · Março 31, 2008

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

Postou em lugar errado.

Topic Ta Bom, Bem Organizado

Nota: 10,0

flaier · Março 31, 2008

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

aki num é a avaliação de tutos?

mas valeu ae ^^

mandark · Março 31, 2008

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

flaier · Março 31, 2008

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

Northon · Abril 1, 2008

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?

flaier · Abril 1, 2008

é 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, 2008 por flaier

Tprocheira · Abril 2, 2008

é 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

Editado Abril 2, 2008 por Tprocheira

gabrifer · Abril 3, 2008

Muito bom sim!

Considero isso como se fosse um tutorial.

Está organizado e bem explicado!

APROVADO!

Abraços,

Escalador.

maximusot · Abril 3, 2008

Muito bem explicado, bom e util,

nota: 9,0

Atenciosamente,

Maximus.

Entrar

html Tutorial Completo- Html Basico E Intermediário

Posts Recomendados

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Quem Está Navegando 0 membros estão online

Conteúdo Similar