Ir para conteúdo

Tutorial Basico De Html

Axl rose

Por Axl rose
em Programação Web

 Share

Posts Recomendados

Axl rose

Axl rose 0

Postado
Postado

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 src="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 src="/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 </a>

 

Linhas:

 

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

 

Para inserir uma linha como esta acima, escreva o comando <hr>

Para inserir linhas mais incrementadas utilize os seguintes Tag's: <hr size="5" align="left" noshade widht="50%">, 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 bgcolor="FFFFFF" link="FFFF66" vlink="FF0000" alink="CC9999">

 

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:

<a href="http://www.suapagina.com.br">'>http://www.suapagina.com.br"> Minha primeira pagina ^^ </a>

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

<a href="http://www.suapagina.com.br" target="xxx"> Minha primeira pagina^^ </a>

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 background="nome_do_arquivo.gif">

<body background="nome_do_arquivo.jpg">

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 color="cor_do_texto">TEXTO</font> -- Muda a cor da fonte.

<font size="#">TEXTO</font> -- Muda o tamanho da fonte. Onde # é um número de 1 à 6.

<font face="estilo_da_fonte">TEXTO</font> -- Muda o estilo da fonte.

...

Exemplo: <font color="#0066cc" face="arial" size="5">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: <a href="pagina.htm" target="nomedoframeset"></a>

 

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 type = "text" name="nome"> - Caixa de texto simples.

 

 

Password

<input type = "password" name="password"> - Esconde a informação digitada.

 

 

Mudando a barra de rolagem!

 

<STYLE type="text/css">

<!--

BODY {

scrollbar-face-color: sua cor;

scrollbar-highlight-color: sua cor;

scrollbar-3dlight-color: cua cor;

scrollbar-darkshadow-color: sua cor;

scrollbar-shadow-color: sua cor;

scrollbar-arrow-color: sua cor;

scrollbar-track-color: sua cor;

}

-->

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

 

<a href="SUA_PAGINA.html"><font color="Sua Cor" face="Sua fonte" size="#">Meu Link</a></font>

 

Exemplo:<a href="form.html"><font color="aqua" face="Ellis" size="1">Form</a></font>

 

 

Pop ups

 

<script language='JavaScript'>

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

 

 

Continuação:

 

Organização!!

Exemplo:

 

<DL>

<DT>Hardware

<DD>Perifericos de entrada

<DL>

<DD>Mouse

<DD>Teclado

<DD>Scanner

<DD>Microfone

</DL>

<DD>perifericos de saida

<DL>

<DD>monitor

<DD>Impressora

<DD>Caixxa de som

</DL></DL>

 

 

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

e cada item e definido pela tag <LI> (list iten)

 

Ex:

 

navegadores<br>

<menu>

<li>netspace

<li>explorer

<li>NSCA

<li>Lynx

<li>Norton navigator

</menu>

 

Linhas Horizontais

 

As linhas da HTML sao extremamente atraenter e utilizadas para divisao de assuntos ou partes. A etiqueta <HR> cria uma linha horizontal em alto relevo e de ponta a ponta da página

a tag <HR> e muito utilizada como separador tato pada assuntos como entre titulos de textos

 

Sintaxe:

<hr>

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:

<hr width=30>

<hr width=50%>

 

SIZE=N

 

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

 

EX:

<hr size=8>

<hr size=2>

 

Uma linha "vertical" <hr width=3 size=50>

 

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:

<hr width=50% align=left>

 

Ex2:

<hr width=50% align=right>

 

NOSHADE

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

 

EX:

<hr nohade size=8>

 

Colocando imagens

 

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

 

EX:

 

<img src="imagem.jpg">

<img src="imagem.gif">

 

Atributos Modificadores

 

ALIGN=X

 

Define o alinhamento da figura .

 

img src="imagem align="alinhamento">

 

(alinhamento (center right left))

 

Ex:

<img src="coracao.jpg">

o texto fica alinhado no canto inferios da figura!

 

erros mais comuns são:

<img scr="imagem.JPG"> ou

<img src="coração.jpg">

 

Nao coloque acentos ~^`´ç cuidado para nao escrever errado <img src="img.jpg">

 

Imagens dentro de pastas:

<img src="PASTA/IMAGEM.jpg>

 

Borda na img:

 

BORDER=N

 

Quando utilizamos o atributo border, aimagem sera inserida com uma borda de cor preta e sua espessura pode ser definida de acordo com a nessecidade

 

Ex:

<img src="imagem.jpg" border=5>

 

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:

 

<img src="tubarao.jpg" ALT=nome da-imagem">

 

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:

<img src="tubarao.jpg" vspace=15 hspace=30>

 

WIDTH=N e HEIGHT=N

Altera o tamanho da imagem

representam respectivamente o tamanho em pixels horizontal e vertical da sua imagem

 

EX:

<img src="coracao.jpg" width=59 height=99>

 

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

 

<table>

<table border=0 cellpadding=0 cellspacing=0>

<td>oi</td>

<td>Estou aki para fazer uma table</td>

<tr>

<td>fui essa e minha table ^^</td>

</tr>

</table>

 

Dicas!

 

Boa dica pada você!

 

<body topmarin=0 leftmargin=0> ou <body topmarin=0 rightmargin=0>

 

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

 

<p align=right> alinha texto ou imagen na direita

<p align=leftt> alinha texto ou imagen na esquerda

 

Legais

 

<table border=10><tr><td>

<table border=10><tr><td>

<table border=10><tr><td>

<table border=10><tr><td>

<table border=10><tr><td>

<table border=10><tr><td>

<table border=10><tr><td>

<table border=10><tr><td>

<table border=10><tr><td>Escreva seu nome aki!!</td><tr>

</table>

</td></tr></table>

</td></jtr></jtable>

</td></tr></table>

</td></tr></table>

</td></tr></table>

</td></tr></table>

</td></tr></table>

</td></tr></table>

 

 

hiperlinks com imagens

 

utiliza uma imagemcomo hiperlink

 

<a href="http://www.seusite.net><img src="logo.gif" border=0 width=120 height=20 alt=logo do meu site">

 

Fazendo um botao

 

Botao de envio:

<input name="batao" type="submit" value="enviar">

</input>

 

Botao de limpar

<input name="batao" type="reset" value="limpar">

</input>

 

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

 

Mine site para você:

 

<body topmargin=0>

<html>

<head>

<title>Nome Do Seu Site</title>

</head>

<body>

<body bgcolor="orange">

<body text="aqua">

<font face="arial">

<h1>Ola Pessoal</h1><br><br>

<h2>Esta e minha primeira pagina que eu criei !!!!!</h2>

<br>

<h3>Gostaram???</h3><br>

<h3>Calma eu vou melhorar!! ^^ =D</h3>

</BODY>

</HTML>

 

 

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

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

 

 

Tags importantes:

 

<BR>

<BIG> </BIG>

<SMALL> </SMALL>

<P ALIGN=(RIGHT, LEFT, CENTER)> </P>

<font color="#000000"> </font>

<font face="Arial"> </font>

<size=#> </size>

<HR>

<a href="#">Link </a>

<body bgcolor="#FFFFFF"> </body>

<body background="fundo.gif"> </body>

<body text="black"> </body>

<body link="green" alink="blue" vlink="black"> </body>

<h1> </h1>

<h2> </h2>

<h3> </h3>

<h4> </h4>

<h5> </h5>

<h6> </h6>

<cite> </cite>

<code> </code>

<dfn> </dfn>

<kbd> </kbd>

<em> </em>

<samp> </samp>

<strong> </strong>

<var> </var>

<b> </b>

<i> </i>

<tt> </tt>

<u> </u>

<strike> ou <s> </s>

<sub> </sub>

<sup> </sup>

<!--!>

 

Coisa legal

<marquee> behavior=alternate> Escreva algo!

</marquee>

 

atributos:

SCROLL - o letreiro continuará rolando continuamente em um msm sentido

SLIDE - o letreiro parte de um ponto da tela e vai ate o outro e pára quando chega ao final do seu percurso

ALTERNATE - o letreiro deslizara ate o outro lado da tela mas quando chegar la ele voltara pela tela novamente indo e voltando

 

<marquee> behavior=Scroll> Escreva algo!

</marquee>

 

<marquee> behavior=slide> Escreva algo!

</marquee>

 

<marquee> behavior=alternate> Escreva algo!

</marquee>

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

 

Direction serve para mover o marquee esquerda ou direita como vc conhece right ou left

 

<marquee direction=left> Escreva algo !

</marquee>

 

<marquee direction=right> Escreva algo !

</marquee>

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

 

Loop serve para cotar quantas vezes o texto irar passar

 

<marquee loop=5> Escreva algo !

</marquee>

 

<marquee loop=infinite> Escreva algo !

</marquee>

 

 

Pequena listinha de host gratuitos!

 

www.domaindlx.com

www.k6.com.br

www.cjb.net

www.hospedagemgratis.info

www.freespaces.com

www.v10.com.br

br.geocities.yahoo.com

www.xpg.com.br

www.criandosites.com.br

www.donserv.com

www.fusioncities.com/system/signup.html

www.ocssolutions.com

www.vectorstar.net

www.provideme.de/angebot_mail.html

www.ic.cz

www.caramania.d2g.com

www.uklinux.net

www.testingserver.com

www.l33t.ca

www.multimania.fr

www.metropoli2000.com

www.free.fr

www.host.sk

www.321.cn

www.portland.co.uk

www.dk3.com

www.maxi-web.net/home

www.digitalrice.com

www.lycos.co.uk

www.hostultra.com

www.gizba.com

seraphimon.com

www.amzweb.net

www.pandela.com

www.host.sk

www.miarroba.com

www.50free.com

www.criandosite.virgula.com.br

www.1l.com

free.prohosting.com

www.metropoliglobal.com

www.fateback.com

www1.websamba.com

www.tripod.lycos.com

www.hostingisfree.com

www.atspace.com

www.xpg.com.br

new.pipni.cz

www.noads.biz

www.freeasphost.com

www.gospelwebhost.com.br

www.gratishost.com

www.hostultra.com

www.itotal.com.br

 

 

Galera outros codigos bem legais!!!!!!

 

Colocando sombra!!

 

<div style="height:50;

filter:shadow(color=000000,,direction=120,enabled=10)">

<h2><font color="Escolha Sua Cor">Escreva seu texto aqui!</font></h2>

</div>

 

Colocando uma frase na barra de stats!

 

<script>window.defaultStatus="Escreva Seu testo aqui!!!!!"</script>

 

Para uma pagina q e mt grande colocano um link top!!

 

 

<a href="#top">topo</a>

 

 

Imprimir

 

<a href='java script:;' onClick='window.print();return false'>imprimir</a>

 

 

EFEITO ESFUMAÇADO

 

<div style="height:50;

filter:glow(strength=3, color=#000000,enabled=1)">

<h1><font color="#999999">SEU TEXTO AQUI!!</font></h1>

</div>

 

 

 

 

 

o código e do banner rotativo e uso no meu site! e funciona muito bem!!

 

Codigo segue abaixo! smalie_lol.gif

 

<script language="JavaScript">

function Banners()

{

var MNews = new Array();

MNews[0]= '<A HREF="http://ex.br"

 

target="_blank"><IMG SRC="banner.gif"

 

WIDTH=120 HEIGHT=60 BORDER=0 ALT="Texto alternativo"></a>'

MNews[1]= '<A HREF="=D.br"

 

target="_blank"><IMG SRC="http://ex.gif" WIDTH=120 HEIGHT=60

 

BORDER=0 ALT="Manuela do Montefdfdfddf"></a>'

MNews[2]= '<A HREF="http://ex.com"

 

target="_blank"><IMG SRC="http://exemplo.jpg" WIDTH=120

 

HEIGHT=60 BORDER=0 ALT="ray"</a>'

MNews[3]= '<A HREF="ex.com.br"

 

target="_blank"><IMG SRC="http://exemplo.gif" WIDTH=120 HEIGHT=60

 

BORDER=0 ALT="ray"></a>'

 

var Numero = Math.floor(Math.random()*4);

document.write(MNews[Numero]);

}

</script>

<script language="JavaScript">

Veja_Banner = Banners();

</script>

 

ex:vc tem 10 banner coloque em var Numero = Math.floor(Math.random()*11);

pq ai ele ira procura os banner

 

e para colocar banner e so add

 

MNews[X]= '<A HREF="ex.com.br"

 

target="_blank"><IMG SRC="http://exemplo.gif" WIDTH=120 HEIGHT=60

 

BORDER=0 ALT="ray"></a>'

 

X coloque o numero do banner ex 10

 

MNews[10]= '<A HREF="ex.com.br"

 

target="_blank"><IMG SRC="http://exemplo.gif" WIDTH=120 HEIGHT=60

 

BORDER=0 ALT="ray"></a>'

 

 

Esse é o script da rotação salve o como rotat.htm

Dae depois vocÊ cria uma iframe assim

 

 

 

<html>

<head>

<meta http-equiv="refresh" content="30;">

</head>

<body>

<IFRAME name=rotate src=rotate.htm width=120 height=60 frameborder=0 scrolling=no>

</IFRAME>

</body>

</html>

Link para o comentário
https://xtibia.com/forum/topic/52558-tutorial-basico-de-html/
Compartilhar em outros sites
Nostradamus

Nostradamus 6

Postado
Postado

E os créditos?

 

A não tem de novo? Eu ajudo: WebTutoriais

 

Você nem arrumar o tópico com o uso de BBCodes fez.

Apenas está ganhando posts, pois aposto que alguém leia isso.

Link para o comentário
https://xtibia.com/forum/topic/52558-tutorial-basico-de-html/#findComment-314021
Compartilhar em outros sites
Axl rose

Axl rose 0

Postado
  • Autor
Postado (editado)

Cara se você não gostou não comenta e se eu to "arrumando jeito de ganhar tópico" pelo menos é tentando ajudar alguem. Pior você posta em tudo. Na maioria das vezer Respostas para ganhar tópico. Grande coisa trocar de aprendiz pra outras. Ah e se ninguem entrar no tópico não faz importancia porque eu pelo menos tentei. E como eu ja tinha dito estava tudo no meu pc. Então não me lembrava da onde eu achei.

E eu não roubei os créditos de ninguem pq não botei os meus ali

Editado por Axl rose
Link para o comentário
https://xtibia.com/forum/topic/52558-tutorial-basico-de-html/#findComment-314228
Compartilhar em outros sites
  • 2 years later...
00matheus00

00matheus00 0

Postado
Postado

Curti muito o tutorial nota 10, eu ja sabia disso mas aprender nunca eh demais :D

só quero pedir que corrija alguns erros para nao confundir o pessoal

De:

Exemplo:

<a href="mailto:nome@empresa.com.br </a>

Para:

<a href="mailto:nome@empresa.com.br">Entre em contato</a>

 

abraxx

Link para o comentário
https://xtibia.com/forum/topic/52558-tutorial-basico-de-html/#findComment-792010
Compartilhar em outros sites
DaNDaNrOxX

DaNDaNrOxX 15

Postado
Postado

Matheus, cuidado ao postar em tópicos antigos brother... É proibido :p

Como é a sua primeira infração, não vou te alertar, mas fica ai o aviso!

-

Como o conteúdo é bacana e o tópico já foi revivido, vou deixar o tópico aberto.

Abraços

Link para o comentário
https://xtibia.com/forum/topic/52558-tutorial-basico-de-html/#findComment-792038
Compartilhar em outros sites
  • 1 month later...
 Share
Ir para a lista de tópicos
×
×
  • Criar Novo...