Linguagem HTML, Para iniciantes

Ranking Mensagens : 624 Data de inscrição : 01/03/2008

Tutorial De Html Para iniciantes!!!

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

= Marca o ínicio da página
= ínicio do cabeçalho
titulo da página = Título da página
= fecha cabeçalho
= ínicio de conteudo da página
= fecha o conteúdo da página
= 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 *":

Ou se você preferir basta ir a [url=http://geocities.yahoo.com/members/tools/counter.html]http://geocities.yahoo.com/members/tools/counter.html [/url], e depois colocar em sua página o segunte comando .

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

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:
Minha primeira pagina ^^
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
Minha primeira pagina^^
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:

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

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:
TEXTO -- Muda a cor da fonte.
TEXTO -- Muda o tamanho da fonte. Onde # é um número de 1 à 6.
TEXTO -- Muda o estilo da fonte.
...
Exemplo: Exemplo!
tb existe tags

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
- 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
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.
- Determina o início e o fim de um formulário.
- O tag 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
- Caixa de texto simples.

Password
- Esconde a informação digitada.

Mudando a barra de rolagem!

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

Mudando Links!

tb assim

Meu Link

Exemplo:Form

Pop ups

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

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

Organização!!
Exemplo:

Hardware
Perifericos de entrada

Mouse
Teclado
Scanner
Microfone
perifericos de saida

monitor
Impressora
Caixxa de som

Lista de menu!
as listas de menus foram criadas para definir opçoes em algum menu do
win. A maioria dos browser ignora ese tag. Outros dão uma sensivel
formataçao as listas de menus que normalmente sao apresentadas com
marcadores
As listas de menus dao definidas pelas tags ...
e cada item e definido pela tag
(list iten)

Ex:

navegadores

netspace
explorer
NSCA
Lynx
Norton navigator

Linhas Horizontais

As linhas da HTML sao extremamente atraenter e utilizadas para divisao
de assuntos ou partes. A etiqueta
cria uma linha horizontal
em alto relevo e de ponta a ponta da página
a tag
e muito utilizada como separador tato pada assuntos como entre titulos de textos

Sintaxe:

WIDTH=N

define a largura da linha em relaçao a tela em que N representa o tamanha
O tamanho da linha pode ser definido de duas formas: em pixels
definidos apenas pelo numero que devera conter ou em porcentagem de
espaço horizontal da tela que ela ocupara

EX:

SIZE=N

Define o valor da espessura da linha e de pixels em q N representa.

EX:

Uma linha "vertical"

align=(left / right / center)

Representa o alinhamento da Barra define se a linha ficará alinhada (conforme o Ex! Ou alinhada à direita (conforme o ex2)

Ex1:

Ex2:

NOSHADE
O modificador NOSHADE desativa o atributo tritimensional da barra, deixando-a apenas com duas dimensoes e com cor cinza-escura

EX:

Colocando imagens

E sempre acomselhavel volocar imagem de baixo tamanho e salvo em JPG

EX:

Atributos Modificadores

ALIGN=X

Define o alinhamento da figura .

img src="imagem align="alinhamento">

(alinhamento (center right left))

Ex:

o texto fica alinhado no canto inferios da figura!

erros mais comuns são:
ou

Nao coloque acentos ~^`´ç cuidado para nao escrever errado

Imagens dentro de pastas:

isso tb serve quando a imagem for um link(para sair akela borda azul chata na imagem)

ALT=T

ALT = texto alternativo
de nada vai adiantar caprichar na produçao de uma imagem se a pessoa
que esta vendo as paginas utiliza um navegador incapaz de mostra-las
(sim eles existem e sao bastante utilizados.)

Ex:

VSPACE e HSPACE
Pode-se controlar o espaço em volta da imagem colocando o valor em
pixels da margem desejada é possivel definir as margem separadamente ou
em conjunto

EX:

WIDTH=N e HEIGHT=N
Altera o tamanho da imagem
representam respectivamente o tamanho em pixels horizontal e vertical da sua imagem

EX:

caso ela seja menor e voce queria aumentar ela cuidado para a imagem nao distorcer!!!

Fazendo tabelas:

border = define a borda da tabela

width e height = define a largura de uma coluna e altura de uma linha

WIDTH = largura
HEIGHT = altura

CELLPADDING e CELLSPACING

sao usadas para definir a margem dentro das celulas e o espaçamento das bordas entre as celulas

ex da tabelas

oi Estou aki para fazer uma table
fui essa e minha table ^^

Dicas!

Boa dica pada você!

ou

esse tira akeles espaços margens da pag akelas margens de 1 cm!

alinha texto ou imagen na direita
alinha texto ou imagen na esquerda

Legais

Escreva seu nome aki!!

hiperlinks com imagens

utiliza uma imagemcomo hiperlink

Fazendo um botao

Botao de envio:

Botao de limpar

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

Mine site para você:

Nome Do Seu Site

Ola Pessoal

Esta e minha primeira pagina que eu criei !!!!!

Gostaram???

Calma eu vou melhorar!! ^^ =D

E so abrir seu Bloco de notas do win e salvar como index.html e ja esta feita sua pagina!!
----------------------------------------------------------------------------------------------

Tags importantes:

Link

ou