Autor Tópico: Tutorial De Html Para iniciantes!!!  (Lida 6197 vezes)

Offline h4ck3r

  • Newbie
  • *
  • Mensagens: 0
  • Karma: +0/-0
    • Ver Perfil
Tutorial De Html Para iniciantes!!!
« em: Dezembro 21, 2006, 09:52:27 pm »
Tutorial De Html Para iniciantes!!!

Toda página na internet tem que comesar e terminar, obrigatoriamente, assim:


<html> = Marca o ínicio da página
<head> = ínicio do cabeçalho
<title> titulo da página </title> = Título da página
</head> = fecha cabeçalho
<body> = ínicio de conteudo da página
</body> = fecha o conteúdo da página
</html> = Marca o fim da página

Colocando Contador:
Para colocar um contador da Geocities na sua página da internet é muito fácil, basta você clicar em "Count", correspondente a página em que você gostaria de colocar o contador e selecionar o tipo de formato do contador que você quer, você encontrará 20 tipos de contadores. Em seguida basta escrever na sua página a seguinte TAG, "não esqueça de retirar o *":
[img]http://visit.geocities.com/counter.gif\\"]
Ou se você preferir basta ir a http://geocities.yahoo.com/members/tools/counter.html, e depois colocar em sua página o segunte comando [img]/cgi-bin/conter.gif\\"].

Enviando E-Mails:
Para fazer com que as pessoas abra um janela para enviar e-mails, ao clicar sobre o sue e-mail, nome ou uma palavra qualquer, basta inserir o comando:
<a href="mailto:nome@empresa.com.br

Linhas:

--------------------------------------------------------------------------------

Para inserir uma linha como esta acima, escreva o comando

Para inserir linhas mais incrementadas utilize os seguintes Tag\\'s:
, veja a linha abaixo:

--------------------------------------------------------------------------------

Onde size é a largura da linha que pode variar de 1 à 10, align determina sua posição que pode ser left(esqueda), right(direita) e center(centro), noshade escurece a linha e widht determina o comprimento da linha na página que pode variar de 1% a 100%.

Cores:
As cores de sua Home Page e também as de fundo, letra, links, vlinks e alinks, são indicados dentro da Tag <body>, onde deve-se inserir por exemplo:
<body>

Onde o código das cores são:
#FFFFFF #DDDDDD #999999 #666666 #333333 #000000 #006666 #009999
#00CCCC #66FFFF #99CCFF #00CCFF #0099FF #0033CC #000099 #000066
#660066 #990099 #CC00CC #FF66FF #FFCCFF #FFCCCC #FF6666 #FF0000
#990000 #666600 #999900 #CC9900 #FF9900 #FFCC00 #FFFF00 #FFFF99
#CCFFCC #99FF99 #66FF66 #00FF00 #00CC00 #009900 #006600 #003300

Exemplos FFFFFF = Writhe (Branco) FFFF66 = Yellow (Amarelo)
FF0000 = Red (Vermelho) CC9999 = Gray (Cinza)


Hyperlinks:
Hyperlinks são palavras ou textos que dão acesso a outras páginas em outros endereços da Internet,
Para inserir um hyperlinks de deslocamento para uma outra página da internet, basta colocar o seguinte código:

Quando clicado, o hyperlink abrirá a página destino na mesma janela do links clicado, para fazer o hyperlink abrir em um outra janela basta fazer o seguinte

Como target segnifica que será redirecionado para um alvo determinado, já que não existe tal alvo xxx na sua página ele abrirá uma nova janela.

Backgrounds:
Para inserir um papel de parede ou backgrounds em sua página, basta acresentar dentro da Tag <body> o seguinte complemento:
<body>
<body>
Arquivos GIF\\'s animados ou arquivos "jpg", também podem ser utilizados como papel de parede

Letras:
As letras podem ter seis tamanos diferentes, a h1(maior) ao h6(menor). Para determinar o seu tamanho insira a Tag:
<h3>palavra</h3>
Exemplos:
h1h2h3h4h5h6

Fontes:
Usando as fontes você poderá mudar as cores de um texto, aumentar ou diminuir sue tamanho e mudar o estilo de fonte, basta inserir o seguinte comando:
<font>TEXTO</font> -- Muda a cor da fonte.
<font>TEXTO</font> -- Muda o tamanho da fonte. Onde # é um número de 1 à 6.
<font>TEXTO</font> -- Muda o estilo da fonte.
...
Exemplo: <font>Exemplo! </font>
tb existe tags
<big></big> <small></small>


Frames:
Os frames dividem a tela do browser em duas ou mais partes, cada parte é uma página HTML chamada de frameset. Os frames são geralmente usados para que um frameset permaneça enquanto outros mudem, baseados nos links que o usuário seleciona.

Principais Tags
<frameset><frameset> - Determina o início e o fim de um frame. Deve ser usado juntamente com os parâmentros cols (frame na vertical) ou rows (frame na horizontal).
cols="valor,valor" - Determina o número de regiões verticais da página. Deve ser indicado juntamente com uma lista de valores. Cada valor especifica a largura de cada frameset e pode ser definido em pixels, percentual ou asterisco.
rows="valor,valor" - Determina o número de regiões horizontais da página. Deve ser indicado juntamente com uma lista de valores. Cada valor especifica a largura de cada frameset e pode ser definido em pixels, percentual ou asterisco.
border = "valor" - Determina a espessura da linha divisória que aparece entre os framesets. Sendo que x é o valor da borda em pixels.
bordercolor = "cor" - Determina a cor da linha divisória que aparece entre os framesets

Atributos <frame>
src = "página.htm" - Determina a página ou arquivo que será carregado na região correspondente.
name = "nome" - Determina um nome ao frameset correspondente. O nome é de vital importância na utilização dos frames.
noresize - Deixa a linha do frameset estática.
marginheight = "valor" - Determina a largura em pixels da margem vertical.
marginwidth = "valor" - Determina a largura em pixels da margem horizontal.
scrolling = "valor" - Determina o aparecimento ou não da barra rolagem. Os valores podem ser yes (com barra de rolagem), no (sem barra de rolagem) ou auto (barra de rolagem só aparecerá quando o conteúdo da página ultrapassar o tamanho do frameset.

Importante
Para abrir uma página em frameset diferentes, você deve especificar o nome do frameset no link.
Ex:


Form:
Através de um formulário(Form), é possível interação com o servidor, javascript, etc.
<form></form> - Determina o início e o fim de um formulário.
<input> - O tag <input> especifica vários campos dentro de um formulário. Ele pode receber diversos atributos que definem o tipo de campo (botão, caixa de texto, etc). O atributo mais importante do input é o name, ele associa o valor da entrada no elemento. Quando receber os dados processados irá aparecer name = resposta dada pelo usuário.

Caixa de Texto
<input> - Caixa de texto simples.


Password
<input> - Esconde a informação digitada.


Mudando a barra de rolagem!

[STYLE type=\\"text/css\\"]
<BODY>
[/STYLE]
---------------


Mudando Links!

[style]
a{
color: SUA COR;
text-decoration: none;
}
a:hover{
color: SUA COR;
text-decoration: underline;
}
[/style]

[style]
a{
color: SUA COR;
text-decoration: underline;
}
a:hover{
color: SUA COR;
text-decoration: none;
}
[/style]

[style]
a{
color: SUA COR;
text-decoration: none;
}
a:hover{
color: SUA COR;
text-decoration: none;
}
[/style]

tb assim

</font>

Exemplo:
</font>


Pop ups

<script>
function janela(aa){
open(aa,\\'\\',"width=400,height=400,toolbar=no,scroll=no,status=no");
}
</script>

Onde está escrito endereço da pagina é onde vc coloca o endereço da pagina que vai abrir a pop-up.

Vc escolhe se vai ter barra de ferramnetas ou não, é onde esta escrito toolbar, é só colocar yes, ou no.Em todos é só colocar yes pra sim e no pra não.

Location é a barra de endereço.

Directories, é a a lista de diretorios.

Status é a barra de status.

Menubar é a barra de botões.

Scrollbars são as barras de rolagem.

Resizable, é se pode ser maximinizada.

Width é a largura da janela.

Height é a altura.

Coloque a descrição do link onde está escrito"descrição do link aqui".



H4CK3R

Offline h4ck3r

  • Newbie
  • *
  • Mensagens: 0
  • Karma: +0/-0
    • Ver Perfil
Tutorial De Html Para iniciantes!!!
« Responder #1 em: Dezembro 21, 2006, 09:59:20 pm »
Macromedia Dreamweaver MX (Português)
("O melhor e mais completo editor de HTML do mercado agora em português." )

Macromedia Dreamweaver 8
("Construa sua página de internet sem precisar de muita experiência.")

Sothink HTML Editor 2.5
("Editor de páginas html gratuito e com bons recursos.")



H4CK3R

Offline knife

  • Newbie
  • *
  • Mensagens: 0
  • Karma: +0/-0
    • Ver Perfil
    • http://helderpatinho.com
Tutorial De Html Para iniciantes!!!
« Responder #2 em: Dezembro 21, 2006, 10:11:16 pm »
Andava á procura do dreamweaver em portugues tks h4ck3r xD

Offline Teotónio Ricardo

  • Administrator
  • Newbie
  • *****
  • Mensagens: 0
  • Karma: +0/-0
    • Ver Perfil
    • http://www.teotonio.pt
Tutorial De Html Para iniciantes!!!
« Responder #3 em: Dezembro 21, 2006, 10:13:07 pm »
Pop-ups é que sucks...
xD

Offline southafrikanse

  • A noob in a geek world
  • Administrator
  • Newbie
  • *****
  • Mensagens: 0
  • Karma: +0/-0
    • Ver Perfil
    • http://www.tugatronica.com
Tutorial De Html Para iniciantes!!!
« Responder #4 em: Dezembro 21, 2006, 10:35:39 pm »
E tabelas como se faz?

Dá para fazer tabelas aqui no Webtuga cenourinha?
Blog Pessoal | Tugatrónica | Fórum Webtuga
"Knowledge is knowing that a tomato is a fruit, but Wisdom is knowing not to put it in a fruit salad."

Offline Teotónio Ricardo

  • Administrator
  • Newbie
  • *****
  • Mensagens: 0
  • Karma: +0/-0
    • Ver Perfil
    • http://www.teotonio.pt
Tutorial De Html Para iniciantes!!!
« Responder #5 em: Dezembro 21, 2006, 10:44:51 pm »
Citar
E tabelas como se faz?

Dá para fazer tabelas aqui no Webtuga cenourinha?


Não, senão ia interferir com o template...

Offline southafrikanse

  • A noob in a geek world
  • Administrator
  • Newbie
  • *****
  • Mensagens: 0
  • Karma: +0/-0
    • Ver Perfil
    • http://www.tugatronica.com
Tutorial De Html Para iniciantes!!!
« Responder #6 em: Dezembro 22, 2006, 12:03:37 am »
Ok

É que ando aqui com umas ideias na mioleira

Mas como é que se faz em html as tabelas?
Blog Pessoal | Tugatrónica | Fórum Webtuga
"Knowledge is knowing that a tomato is a fruit, but Wisdom is knowing not to put it in a fruit salad."

Offline SparkT

  • Newbie
  • *
  • Mensagens: 0
  • Karma: +0/-0
    • Ver Perfil
Tutorial De Html Para iniciantes!!!
« Responder #7 em: Dezembro 22, 2006, 01:03:50 pm »
Citar
Ok

É que ando aqui com umas ideias na mioleira

Mas como é que se faz em html as tabelas?

Pega num wysiwyg (tipo frontpage, dreamweaver) e faz uma tabela. Depois vais ver o codigo fonte e aí tens o codigo da tabela

Offline h4ck3r

  • Newbie
  • *
  • Mensagens: 0
  • Karma: +0/-0
    • Ver Perfil
Tutorial De Html Para iniciantes!!!
« Responder #8 em: Dezembro 22, 2006, 05:17:20 pm »
Na minha opinião o Front Page é um dos melhores para quem qer iniciar em html.
Tambem tem boas ferramentas para construir tabelas.

Código: [Seleccione]
<table border="1" width="100%" id="table1">

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

</table>

É mais ou menos assim que fica um codigo de tabelas.

( Fiz um novo site... passem por lá... Pedro Neves)

Offline jonny

  • Newbie
  • *
  • Mensagens: 0
  • Karma: +0/-0
    • Ver Perfil
Tutorial De Html Para iniciantes!!!
« Responder #9 em: Dezembro 22, 2006, 07:17:27 pm »
CRLLL excelente!  :boa:

Offline h4ck3r

  • Newbie
  • *
  • Mensagens: 0
  • Karma: +0/-0
    • Ver Perfil
Tutorial De Html Para iniciantes!!!
« Responder #10 em: Dezembro 24, 2006, 01:16:47 am »
Ja agora... alguem sabe assim uns servidores bons para publicar site em HTML???
Eu tinha o meu site no freewebs.... mas aquilo mudou tudo... agora é só publicidade!
O sapo é mais para blogs...
Então fui por no yahoo... comparado com o freeewebs e com o sapo, acho que é um dos melhores...
Quem souber uns fixes avize!

Para quem quiser ver o meu PC carregue aqui

Offline kingless

  • Newbie
  • *
  • Mensagens: 0
  • Karma: +0/-0
    • Ver Perfil
Tutorial De Html Para iniciantes!!!
« Responder #11 em: Dezembro 24, 2006, 06:54:26 pm »
Citar
Ja agora... alguem sabe assim uns servidores bons para publicar site em HTML???
Eu tinha o meu site no freewebs.... mas aquilo mudou tudo... agora é só publicidade!
O sapo é mais para blogs...
Então fui por no yahoo... comparado com o freeewebs e com o sapo, acho que é um dos melhores...
Quem souber uns fixes avize!

Para quem quiser ver o meu PC carregue aqui

alojagratis

Offline h4ck3r

  • Newbie
  • *
  • Mensagens: 0
  • Karma: +0/-0
    • Ver Perfil
Tutorial De Html Para iniciantes!!!
« Responder #12 em: Dezembro 24, 2006, 11:31:24 pm »
Citar
Citar
Ja agora... alguem sabe assim uns servidores bons para publicar site em HTML???
Eu tinha o meu site no freewebs.... mas aquilo mudou tudo... agora é só publicidade!
O sapo é mais para blogs...
Então fui por no yahoo... comparado com o freeewebs e com o sapo, acho que é um dos melhores...
Quem souber uns fixes avize!

Para quem quiser ver o meu PC carregue aqui

alojagratis

Como é que esse site funciona? Isso é gratis né? Como é que eu me registo?

Offline tico

  • Newbie
  • *
  • Mensagens: 0
  • Karma: +0/-0
    • Ver Perfil
Tutorial De Html Para iniciantes!!!
« Responder #13 em: Dezembro 25, 2006, 12:45:01 pm »
Citar
Citar
Citar
Ja agora... alguem sabe assim uns servidores bons para publicar site em HTML???
Eu tinha o meu site no freewebs.... mas aquilo mudou tudo... agora é só publicidade!
O sapo é mais para blogs...
Então fui por no yahoo... comparado com o freeewebs e com o sapo, acho que é um dos melhores...
Quem souber uns fixes avize!

Para quem quiser ver o meu PC carregue aqui

alojagratis

Como é que esse site funciona? Isso é gratis né? Como é que eu me registo?

Tems de te registar no forum e depois penso que tems de participar um pouco para teres uma conta.
Mas se for so para html usa as homepages do sapo....

Offline p3droneves

  • Newbie
  • *
  • Mensagens: 0
  • Karma: +0/-0
    • Ver Perfil
Tutorial De Html Para iniciantes!!!
« Responder #14 em: Dezembro 27, 2006, 11:41:07 pm »
Ok obrigado!

Ah ... e já agora. O "h4ck3r" sou eu... p3droneves
Nakela conta eu ja não vou entrar la muita vez, agora é p3droneves!

Offline spectator

  • Newbie
  • *
  • Mensagens: 0
  • Karma: +0/-0
    • Ver Perfil
Tutorial De Html Para iniciantes!!!
« Responder #15 em: Dezembro 29, 2006, 05:17:55 pm »
só não sei o que este "tutorial" faz aqui, pois HTML não é linguagem de programação e sim  uma linguagem de marcação....

A respeito do "código" das cores como foi falado ali em cima, não são só aquelas cores não:

É um valor hexadecimal (de 0 a 9 e de A a F) de 6 dígitos em RGB, sendo os dois primeiros correspondentes ao vermelho os dois digitos do meio correspondentes ao verde e os dois últimos caracteres correspondentes ao azul, apartir disso é só formar a cor que você deseja...


O Frontpage não é bom não, na verdade nenhum programa que de para fazer a montagem sem escrever o HTML é bom, pois não geram códigos válidos pela W3C.
Mas se for para usar um programa deste tipo, ao menos use o Dreamweaver 8, que é o que possibilita gerar o melhor HTML por enquanto pelo que eu saiba.



E outra coisa o tutorial era pra ser de HTML mas mais abaixo mostra um pequeno código em Javascript sem sequer falar que não é HTML. Se é para iniciante tem que ser algo que explique com detalhes este tipo de coisa para que a pessoa não aprenda errado!

E diversos dos parametros mostrados no tutorial não são recomendados utilizar, porém funcionam perfeitamente em alguns browsers... O ideal é usar CSS para estilizar a página.


Para quem realmente quiser aprender HTML, XML, Javascript e CSS de uma olhada no www.w3schools.com

 8)

Offline p3droneves

  • Newbie
  • *
  • Mensagens: 0
  • Karma: +0/-0
    • Ver Perfil
Tutorial De Html Para iniciantes!!!
« Responder #16 em: Janeiro 11, 2007, 02:34:02 pm »
" HTML não é linguagem de programação "

ES BURRO?

Desde quando é que HTML não é liguagem de programação?
Tu deves ser daqueles que veem para os forums e poem se a mandar mensagem insignificantes só para ganhar para ganhar número de visitas!
Ve se para a proxima pensas antes de por as mensagens nos forums ok? eu sou um dos ADM do TECHZONE ok?
Ja vistes que nenhuma das tuas mensagens é a não ajudar ninguem... ao contrario de mim que ponho tutorial. CRESCE!!!!!!!!!!!!

Offline Teotónio Ricardo

  • Administrator
  • Newbie
  • *****
  • Mensagens: 0
  • Karma: +0/-0
    • Ver Perfil
    • http://www.teotonio.pt
Tutorial De Html Para iniciantes!!!
« Responder #17 em: Janeiro 11, 2007, 06:53:45 pm »
Ele tem razão, HTML não é uma linguagem de programação...

Offline KTachyon

  • Global Moderator
  • Newbie
  • *****
  • Mensagens: 0
  • Karma: +0/-0
    • Ver Perfil
    • http://twitter.com/KTachyon
Tutorial De Html Para iniciantes!!!
« Responder #18 em: Janeiro 11, 2007, 09:41:43 pm »
Citar
" HTML não é linguagem de programação "

ES BURRO?

Desde quando é que HTML não é liguagem de programação?

Ele está correcto. HTML não é uma linguagem de programação. Como ele disse, é uma linguagem de marcação (HyperText Markup Language). Mais próximo da programação é o Javascript, embora não seja considerada uma linguagem de programação por muitos, visto que não é uma linguagem compilada.

Basta dois pontos para demonstrar que HTML não é linguagem de programação:
- Não tem branches.
- Não tem ciclos.


Citar
Tu deves ser daqueles que veem para os forums e poem se a mandar mensagem insignificantes só para ganhar para ganhar número de visitas!
Ve se para a proxima pensas antes de por as mensagens nos forums ok? eu sou um dos ADM do TECHZONE ok?
Ja vistes que nenhuma das tuas mensagens é a não ajudar ninguem... ao contrario de mim que ponho tutorial. CRESCE!!!!!!!!!!!!

Uh?
My Q4 estimate: Macs: 5.89M; iPods: 4.19M; iPhones: 30.0M; iPads: 18.05M; Revenue: 37.00B; EPS: 9.50
AAPL Q3 result: Macs: 4.02M; iPods: 6.80M; iPhones: 26.0M; iPads: 17.04M; Revenue: 35.02B; EPS: 9.32

Offline p3droneves

  • Newbie
  • *
  • Mensagens: 0
  • Karma: +0/-0
    • Ver Perfil
Tutorial De Html Para iniciantes!!!
« Responder #19 em: Janeiro 11, 2007, 10:11:46 pm »
Epa n é isso... to eu a perder tempo a fazer um toturial deste tamanho e tenho posts como o dele.

 

Sitemap 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49