Tutorial Completo- Html Basico E Intermediário

flaier
Por flaier
em Programação Web

flaier

avatar
Campones
Campones

INFOS

Grupo: CamponesRegistrado: 07/12/06Posts: 8

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

O Que sou:
100%----------Designer 3D
80%--------Webmaster
70%-------Programador C++
100%----------Hoster

O que é o 3D?
Denomina-se 3D qualquer objeto ou instância que tenha 360³ (Eixos XxYxZ) ângulos, ou seja
46.656.000 Ângulos

FireBlast

avatar
Campones
Campones

INFOS

Grupo: CamponesRegistrado: 17/12/06Posts: 57

Gostei! Muito bem detalhado e explicado.

 

Eu Aprovo.

speedyks

=]
avatar
Cavaleiro
Cavaleiro

INFOS

Grupo: CavaleiroRegistrado: 11/07/07Posts: 177Char no Tibia: Eorah Khaderu

rapaz, aprovado gostei =)

 

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

Gift By: Slip



akamajpg.jpg

flaier

avatar
Campones
Campones

INFOS

Grupo: CamponesRegistrado: 07/12/06Posts: 8

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

O Que sou:
100%----------Designer 3D
80%--------Webmaster
70%-------Programador C++
100%----------Hoster

O que é o 3D?
Denomina-se 3D qualquer objeto ou instância que tenha 360³ (Eixos XxYxZ) ângulos, ou seja
46.656.000 Ângulos

Dlyd

quer me fuder me beija
avatar
Visconde
Visconde

INFOS

Grupo: ViscondeRegistrado: 10/03/08Posts: 315

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.

Hoje é dia de tomar uma! - Shakespeare

flaier

avatar
Campones
Campones

INFOS

Grupo: CamponesRegistrado: 07/12/06Posts: 8

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

se quiser uma mãozinha

O Que sou:
100%----------Designer 3D
80%--------Webmaster
70%-------Programador C++
100%----------Hoster

O que é o 3D?
Denomina-se 3D qualquer objeto ou instância que tenha 360³ (Eixos XxYxZ) ângulos, ou seja
46.656.000 Ângulos

Northon

avatar
Conde
Conde

INFOS

Grupo: CondeRegistrado: 08/08/07Posts: 701

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

 

Postou em lugar errado.

 

Topic Ta Bom, Bem Organizado

 

Nota: 10,0

Não dou suporte via PM ou MSN, utilize o fórum para isto.
© 2007 ~ 2009

flaier

avatar
Campones
Campones

INFOS

Grupo: CamponesRegistrado: 07/12/06Posts: 8

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

aki num é a avaliação de tutos?

mas valeu ae ^^

O Que sou:
100%----------Designer 3D
80%--------Webmaster
70%-------Programador C++
100%----------Hoster

O que é o 3D?
Denomina-se 3D qualquer objeto ou instância que tenha 360³ (Eixos XxYxZ) ângulos, ou seja
46.656.000 Ângulos

mandark

avatar
Campones
Campones

INFOS

Grupo: CamponesRegistrado: 03/01/07Posts: 14

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

+ WEBMASTER & WEBDESIGNER SOLUTIONS
m.mandark@gmail.com / mand42.deviantart.com
QUOTE
+ RUNNING PROJECTS
- bomjogo.net
- X-Vision
- Kingdom Age

flaier

avatar
Campones
Campones

INFOS

Grupo: CamponesRegistrado: 07/12/06Posts: 8

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

O Que sou:
100%----------Designer 3D
80%--------Webmaster
70%-------Programador C++
100%----------Hoster

O que é o 3D?
Denomina-se 3D qualquer objeto ou instância que tenha 360³ (Eixos XxYxZ) ângulos, ou seja
46.656.000 Ângulos

Northon

avatar
Conde
Conde

INFOS

Grupo: CondeRegistrado: 08/08/07Posts: 701

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?

Não dou suporte via PM ou MSN, utilize o fórum para isto.
© 2007 ~ 2009

flaier

avatar
Campones
Campones

INFOS

Grupo: CamponesRegistrado: 07/12/06Posts: 8

é mas você nunca viu ot com site?

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

 

HTML tem a vê com oque?

 

Vlws

O Que sou:
100%----------Designer 3D
80%--------Webmaster
70%-------Programador C++
100%----------Hoster

O que é o 3D?
Denomina-se 3D qualquer objeto ou instância que tenha 360³ (Eixos XxYxZ) ângulos, ou seja
46.656.000 Ângulos

Tprocheira

WOOOOW
avatar
Conde
Conde

INFOS

Grupo: CondeRegistrado: 23/12/07Posts: 566Char no Tibia: Tprocheira soldier
é 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

gabrifer

avatar
Artesão
Artesão

INFOS

Grupo: ArtesãoRegistrado: 26/10/07Posts: 100Char no Tibia: Climber Man

Muito bom sim!

Considero isso como se fosse um tutorial.

Está organizado e bem explicado!

APROVADO!

Abraços,

Escalador.



Sou Fan:




Ès meu Fan?

maximusot

avatar
Barão
Barão

INFOS

Grupo: BarãoRegistrado: 05/03/07Posts: 219

Muito bem explicado, bom e util,

nota: 9,0

 

 

 

Atenciosamente,

Maximus.



CLIQUE AKI DEPOIS CLIQUE NO CLICK AQUI DA SEGUNDA LINHA NÃO DEMORA NEM 1 MINUTO


MINHAS METAS

~~~~~~~~~~~~~~
~~
MINHAS METAS~~
~~~~~~~~~~~~~~


1 post (X)
10 posts (X)
20 posts (X)
30 posts (X)
40 posts (X)
50 posts (X)
60 posts (X)
70 posts (X)
80 posts (X)
90 posts (X)
100 posts (X)
120 posts (X)
150 posts (X)
200 posts (X)
300 posts (X)
400 posts (X)
500 posts (X)
600 posts (X)
700 posts (X)
800 posts (_)
900 posts (_)
1000 potsts (_)
1300 posts (_)
1500 posts (_)
1800 posts (_)
2000 posts (_)
----------------------------------------------------

MEUS TRABALHOS