- -Puzzle Brasil- -
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.
- -Puzzle Brasil- -

Seu mundo de downloads aqui.
 
InícioInício  PortalPortal  GaleriaGaleria  Últimas imagensÚltimas imagens  ProcurarProcurar  RegistarRegistar  EntrarEntrar  

 

 TUTORIAL - HTML

Ir para baixo 
2 participantes
AutorMensagem
Matheus™
Em treinamento
Em treinamento
Matheus™


Número de Mensagens : 63
Data de inscrição : 08/03/2009
Idade : 30
Localização : Beagá

TUTORIAL - HTML Empty
MensagemAssunto: TUTORIAL - HTML   TUTORIAL - HTML EmptySáb Mar 14, 2009 8:52 am

Sobre html

É a linguagen da www ( world wide web )

Pode ser escrito em qualquer editor de textos puros ( note pad, bloco de notas, etc...)

Um site nada mais é que um conjunto de páginas html interligadas atraves de hyperlinks.


AGORA VAMOS AO TRABALHO Very Happy

Lembrando. Esse é um tutorial basico pq eu não sei tudo Laughing

Ferramentas : só oo bloco de notas

1º Criando um documento HTML

Basta salvar o texto com a extensão HTML.

2º Tags

Tags são os códigos. Toda tag tem inicio e fim exceto a tag <br>, e podem ser escritas com letras maiusculas ou minusculas

ex:

<minha tag>texto no qual a tag irá exercer sua função</minha tag>

para fazer sua pagina HTML você ira usar primeiro a tag <html> e apartir da a tag <head>

<HTML>
<HEAD>
<TITLE>Thebest Games</TITLE>
<META NAME="author" CONTENT="Coloque aqui o nome do autor do site"
<META NAME="description" CONTENT="Descrição do seu site"
<META NAME="keywords" CONTENT="palavras separadas por virgula para uma referencia no google"
<META HTTP-EQUIV="language" CONTENT="pt-br"
</HEAD>


a tag title serve para escrever o que irá aparecer naquela barra azul no topo da pagina
a tag meta http-equiv serve para mudar o idioma
o resto das tags acima já ta especificado

Mude só o que está na frente de CONTENT.

3° Tag Body

ela quem especifica a cor do plano de fundo, dos links, e outras coisas

<HTML>
<HEAD>
<TITLE>Thebest Games</TITLE>
<META NAME="author" CONTENT="Coloque aqui o nome do autor do site"
<META NAME="description" CONTENT="Descrição do seu site"
<META NAME="keywords" CONTENT="palavras separadas por virgula para uma referencia no google"
<META HTTP-EQUIV="language" CONTENT="pt-br"
</HEAD>
<BODY BGCOLOR="green" LINK="red" ALINK="yellow" VLINK="darkgreen">


a tag bgcolor determina a cor do plano de fundo
a tag LINK determina a cor do link
a tag ALINK dertermina a cor do link quando clicado
a tag VLINK determina a cor do link após ser clicado

para usar uma imagem no plano de fundo , substitua BGCOLOR por BACKGROUND e entre aspas coloque o link do site que contem apenas sua imagem

4º paragrafo

para fazer um paragra vamos usar a tag P

<HTML>
<HEAD>
<TITLE>Thebest Games</TITLE>
<META NAME="author" CONTENT="Coloque aqui o nome do autor do site"
<META NAME="description" CONTENT="Descrição do seu site"
<META NAME="keywords" CONTENT="palavras separadas por virgula para uma referencia no google"
<META HTTP-EQUIV="language" CONTENT="pt-br"
</HEAD>
<BODY BGCOLOR="green" LINK="red" ALINK="yellow" VLINK="darkgreen">
<P ALIGN="center><font face="Arial" color="navy" size="2"> coloque seu paragrafo</font></p>


Entendendo as tags

ALign - alinha o texto de acordo com que você colocar
Você pode colocar:
Left
Right
Center
Justify - justificado ( o resto não prescisa de tradução né Rolling Eyes )

agora a tag FONT

face - indica a fonte que você irá usar
color - cor do texto
Size - tamanho do texto ( de 1 a 7 )

estilos de texto

<b> negrito ex: <b> texto em negrito </b>
<i> italico
<u> texto sublinhado
<big> aumenta a fonte e coloca negrito
<small> reduz e altera a fonte
<tt> aplica espaçamento regular ao texto

5° Quebra de linha

é apenas uma quebra de linha para escrever pouca coisa em duas linhas

é a tag <br>

OBS: essa tag pode ser em qualquer lugar ( no texto da tag font ou em qualquer outro texto ) e naum prescisa de fechar com </br>

6º tag div

permite agrupar itens e alinhar horizontalmente

ex: <div align="center">texto alinhado no centro</div>

7º tag hr

insere uma linha horizontal na pagina

ex :

<hr width="100%" align="left" size="2" noshade color="#RRGGBB">

width - espaço que a linha vai ocupar na horizontal
noshade - significa que a linha não vai ter efeito 3d

o resto das tags você já sabe
sobre color="#RRGGBB" . Eu vou passar uma tabela de cores no final do tutorial.

8° links

é só isso
<a href="o link que você quer">texto mostrando link</a>

9º imagens

para inserir imagens iremos usar a tag img

<img src="link apenas com a imagem">

10º imagens nos links

para inserir imagens nos links basta colocar no lugar do texto do link a tag que insere a imagem.

ex:

<a href="o link que você quer"><img src="link apenas com a imagem"></a>

11º tabelas

<table>
<tr>
<th>Cabeçalho da tabela</th>
<td>dados da tabela</td>
</tr>
</table>

table - inicio da tabela
tr - linha da tabela
th - cabeçalho da tabela
td - dados da tabela

Melhorando a tabela

border - espessura da borda em pixels
boredercolor - cor da borda
width - largura da tabela em %
height - altura da tabela em %
cellspacing - espaço entre duas celulas em pixels
celladding - espaço entre os dados da tabela e a borda
bgcolor - cor do fundo das celulas da tabela

ex:

<table border="2" boredercolor="#003300" bgcolor="green" width="60%" heigth="40%" cellspacing="3" celladding="3">

Mesclar Celulas

esse comando serão dentro da tag TD

colspan - colunas que a célula ocupara
rowspan - nimero de linhas que a célula ocupara

ex:

<table border="2" width="50%" cellspacing="3" celladding="3>
<tr>
<td colspan="2">célula 1</td>
</tr>
</table>


12º tabela de cores

tá ai a tabela de cores



TUTORIAL - HTML Tab1ie9


TUTORIAL - HTML Tab2lt2


TUTORIAL - HTML Tab3cj5



ESPERO TER AJUDADO Very Happy
Ir para o topo Ir para baixo
Master-MOD
Administrador
Administrador
Master-MOD


Número de Mensagens : 37
Data de inscrição : 05/03/2009
Idade : 30

TUTORIAL - HTML Empty
MensagemAssunto: Re: TUTORIAL - HTML   TUTORIAL - HTML EmptySáb Mar 14, 2009 7:34 pm

Bom, aliás ótimo tutorial! Páginas em HTML (coisa primitiva) é muito útil e complica um pouco scratch
Ir para o topo Ir para baixo
Matheus™
Em treinamento
Em treinamento
Matheus™


Número de Mensagens : 63
Data de inscrição : 08/03/2009
Idade : 30
Localização : Beagá

TUTORIAL - HTML Empty
MensagemAssunto: Re: TUTORIAL - HTML   TUTORIAL - HTML EmptyDom Mar 15, 2009 6:35 am

Master-MOD escreveu:
Bom, aliás ótimo tutorial! Páginas em HTML (coisa primitiva) é muito útil e complica um pouco scratch

talvez até seja primitivo más eu acho interesante e pra quem kiser aprender tá ai né...

nunca é ruim conhecer qualquer tecnica mesm q ela já esteja ultrapassada.

agora que já aprendi um pouco de html , vou estudar C , C++ e javascript Wink
Ir para o topo Ir para baixo
Master-MOD
Administrador
Administrador
Master-MOD


Número de Mensagens : 37
Data de inscrição : 05/03/2009
Idade : 30

TUTORIAL - HTML Empty
MensagemAssunto: Re: TUTORIAL - HTML   TUTORIAL - HTML EmptyDom Mar 15, 2009 5:52 pm

Matheus™ escreveu:
Master-MOD escreveu:
Bom, aliás ótimo tutorial! Páginas em HTML (coisa primitiva) é muito útil e complica um pouco scratch

talvez até seja primitivo más eu acho interesante e pra quem kiser aprender tá ai né...

nunca é ruim conhecer qualquer tecnica mesm q ela já esteja ultrapassada.

agora que já aprendi um pouco de html , vou estudar C , C++ e javascript Wink

Dica: Mexa com o Game Maker, além de ser um linguagem pseudo-C#, treina criatividade, lógica e da até pra jogar depois Cool
Ir para o topo Ir para baixo
Matheus™
Em treinamento
Em treinamento
Matheus™


Número de Mensagens : 63
Data de inscrição : 08/03/2009
Idade : 30
Localização : Beagá

TUTORIAL - HTML Empty
MensagemAssunto: Re: TUTORIAL - HTML   TUTORIAL - HTML EmptySeg Mar 16, 2009 6:29 am

já usei muito o game maker...

só que parei pq tem q ter muito tempo e paciencia pra mexer nele

>

talvez nas ferias eu volte a usa-lo Rolling Eyes
Ir para o topo Ir para baixo
Conteúdo patrocinado





TUTORIAL - HTML Empty
MensagemAssunto: Re: TUTORIAL - HTML   TUTORIAL - HTML Empty

Ir para o topo Ir para baixo
 
TUTORIAL - HTML
Ir para o topo 
Página 1 de 1
 Tópicos semelhantes
-
» Pedido de tutorial ou apostila
» Como Criar Crack’s - Tutorial + Programas
» Tutorial com dicas e macetes incriveis de mágica
» TUTORIAL - Usando o memtest "teste de memoria"

Permissões neste sub-fórumNão podes responder a tópicos
- -Puzzle Brasil- - :: Área Saturno :: Tutorias e Apostilas-
Ir para: