Site simples Apenas html (SEM CSS)

por lucasbiell Sex Jul 06, 2012 1:12 pm

Criando 1 Website

Obs: Iremos fazer um site simples usando apenas html (sem css) sem menu lateral.
Imagens Necessarias:
Banner

Spoiler:

Barra

Spoiler:

Fundo

Spoiler:

Então vamos começar Successful

primeiramente vamos baixar todas as imagem e salvar em uma pasta, feito isso vamos iniciar nosso site Successful

Código:: <html> <title>Nosso Primeiro Website</title> <head> <body> </head> </body> </html>

Inicio de um HTML e fim.

Vamos começar colocando uma imagem de fundo fixo, em insira background="nome da imagem.extensão" e na frente BGPROPERTIES="lammer" ficara assim:
a imagem que iremos colocar é: "fundo.jpg" ficara assim

Código:: <html> <title>Nosso Primeiro Website</title> <head> <body background="fundo.jpg" BGPROPERTIES="lammer"> </head> </body> </html>

Por enquanto esta assim:

Spoiler:

Agora iremos colocar um banner e um menu, sendo assim usaremos esse codigo:

Código:: <div align="center"><img src="banner.png"></div> <div align="center"> Esta indicando a posição da imagem (CENTRO DA PAGINA) <img src="nomedaimagem.extensão"> esta chamando a imagem </div> esta fechando o codigo de centralizar a imagem esse é o codigo do banner, agora vamos fazer o menu usando tabela. usaremos o codigo abaixo: <table width="723" align="center" border="0" background="barra.png"> <td>Inicio</td><td>Noticias</td><td>Download</td><td>Fotos</td><td>Parceiros</td><td>Contatos</td></table> <table width="723" align="center" border="0" background="barra.png"> width:723 (tamanho da tabela) align="center" (centralizar a tabela) border="0" (tabela sem borda) background="barra.png" (colocar imagem na tabela) <td> (cria células de tabelas sendo assim separa os links) </td> (fecha a célula) </table> (fecha a tabela)

Por inquanto o site esta com um banner e um menu Successful

o codigo esta assim

Código:: <html> <title>Nosso Primeiro Website</title> <head> <body background="fundo.jpg" BGPROPERTIES="lammer"> <div align="center"><img src="banner.png"></div> <table width="723" align="center" border="0" background="barra.png"> <td>Inicio</td><td>Noticias</td><td>Download</td><td>Fotos</td><td>Parceiros</td><td>Contatos</td></table> </head> </body> </html>

Spoiler:

Bom fizemos um pedaço bom do site Successful

fizer a matriz do site, agora vamos colocar algum conteudo no site Successful

, usarei tabelas , mais se não quizerem podem usar

.
o texto que eu vou colocar no site sera do rpg maker xp Successful

o codigo onde sera colocado o texto sera esse:

Código:: <table width="723" align="center" bgcolor="#F5F5F5"><td><font color="red" size="+2">Pagina Inicial</font> <font color="black" size="3"><br><br> Com RPG Maker XP você pode criar seus próprios jogos de RPG através de um editor que vem sendo desenvolvido há anos para facilitar a vida de quem não entende de programação. Ele inclui recursos gráficos, telas de batalha e outros dados. <br> RPG Maker XP foi feito para agradar iniciantes e experts. O programa é muito popular e pirateado na Internet desde a sua tradução ilegal para o inglês. <br> Leia mais em: http://www.baixaki.com.br/download/rpg-maker-xp.htm#ixzz1znA64HT8RPG Maker e a pirataria - (excerto extraído do site wikipedia.org) Foi graças a um russo conhecido na internet como Don Miguel, que o programa se disseminou no ocidente. Ele foi o responsável por traduzir todo o sistema da complexa linguagem Japonesa para o inglês. Além disto, através de seu site, deu grande suporte aos criadores iniciantes. Don Miguel foi processado pela Enterbrain, mas a empresa perdeu, devido a uma brecha legal em seu país, a Russia.<br> Apesar disto os programas RPG Maker 95, RPG Maker 2000, RPG Maker 2003, RPG Maker XP, entre outros, são de propriedade de seus devidos criadores, ou seja, se você os utiliza em qualquer lingua que não seja a japonesa está quebrando uma lei de copyright. <br> Por estas razões, esta versão disponibilizada aqui no Baixaki é um Shareware e NÃO viola os Direitos Autorais como a versão divulgada em outros sites da Internet.<br> <div align="center"><img src="http://static.ziggi.com.br/imagens_programas/screenshots/big_1309546329_19358.jpg"></font></div> </td> </table>

Agora vamos explicar:

Código:: <table width="723" align="center" bgcolor="#F5F5F5"><td><font color="red" size="+2">Pagina Inicial</font> width=723 (tamanho da tabela) align=center (centralizar) bgcolor="#F5F5F5"> (cor de fundo) <td> (celula da tabela) <font> (para editar a font) color="red" (cor do texto) size="+2" (tamanho da fonte) PAGINA INICIAL ( é o cabeçalho) </font> (esta indicando onde termina a formatação) Depois em <font color="black" size="3"> esta formatando o texto de baixo do cabeçalho <br> (pular linha em html) depois o texto aqui <br> <div align="center"> (Centralizar texto, imgs, links etc. que estiver dentro do tag div) <img src="http://static.ziggi.com.br/imagens_programas/screenshots/big_1309546329_19358.jpg"> (codigo para add imagem na pagina) </div> (esta fechando o div) </td> (Esta fechando a celula da tabela) </table> (fechando a tabela)

bom até aqui esta tudo ok o html esta assim por enquanto

Código:: <html> <title>Nosso Primeiro Website</title> <head> <body background="fundo.jpg" BGPROPERTIES="lammer"> <div align="center"><img src="banner.png"></div> <table width="723" align="center" border="0" background="barra.png"> <td>Inicio</td><td>Noticias</td><td>Download</td><td>Fotos</td><td>Parceiros</td><td>Contatos</td> <table width="723" align="center" bgcolor="#F5F5F5"><td><font color="red" size="+2">Pagina Inicial</font> <font color="black" size="3"><br><br> Com RPG Maker XP você pode criar seus próprios jogos de RPG através de um editor que vem sendo desenvolvido há anos para facilitar a vida de quem não entende de programação. Ele inclui recursos gráficos, telas de batalha e outros dados. <br> RPG Maker XP foi feito para agradar iniciantes e experts. O programa é muito popular e pirateado na Internet desde a sua tradução ilegal para o inglês. <br> Leia mais em: http://www.baixaki.com.br/download/rpg-maker-xp.htm#ixzz1znA64HT8RPG Maker e a pirataria - (excerto extraído do site wikipedia.org) Foi graças a um russo conhecido na internet como Don Miguel, que o programa se disseminou no ocidente. Ele foi o responsável por traduzir todo o sistema da complexa linguagem Japonesa para o inglês. Além disto, através de seu site, deu grande suporte aos criadores iniciantes. Don Miguel foi processado pela Enterbrain, mas a empresa perdeu, devido a uma brecha legal em seu país, a Russia.<br> Apesar disto os programas RPG Maker 95, RPG Maker 2000, RPG Maker 2003, RPG Maker XP, entre outros, são de propriedade de seus devidos criadores, ou seja, se você os utiliza em qualquer lingua que não seja a japonesa está quebrando uma lei de copyright. <br> Por estas razões, esta versão disponibilizada aqui no Baixaki é um Shareware e NÃO viola os Direitos Autorais como a versão divulgada em outros sites da Internet.<br> <div align="center"><img src="http://static.ziggi.com.br/imagens_programas/screenshots/big_1309546329_19358.jpg"></font></div> </td> </table> </head> </body> </html>

esta assim por enquanto

Spoiler:

Esta faltando o footer da pagina Successful

estarei fazendo um simples o codigo abaixo coloque em cima do codigo Successful

:

Código:: <div align="center"><table background="barra.png" width="723"><td>Todos Direitos Reservados: Aldeia Rpg maker | Site Exemplo | Criado por : lucasbiell</td></table></div> <div align="center"> (CENTRALIZAR tudo que estiver dentro do <div> <table> (tabela) Background="barra.png" (colocar imagem dentro de tabela) width="723" (tamanho da tabela) <td> (criar celula na tabela) Todos Direitos Reservados: Aldeia Rpg maker | Site Exemplo | Criado por : lucasbiell (coloque oque quizer no footer) </td> (FECHANDO CELULA) </table> (fechando tabela) </div> (fechando div)

o site html ficara assim depois desses passos:

Código:: <html> <title>Nosso Primeiro Website</title> <head> <body background="fundo.jpg" BGPROPERTIES="lammer"> <div align="center"><img src="banner.png"></div> <table width="723" align="center" border="0" background="barra.png"> <td>Inicio</td><td>Noticias</td><td>Download</td><td>Fotos</td><td>Parceiros</td><td>Contatos</td> <table width="723" align="center" bgcolor="#F5F5F5"><td><font color="red" size="+2">Pagina Inicial</font> <font color="black" size="3"><br><br> Com RPG Maker XP você pode criar seus próprios jogos de RPG através de um editor que vem sendo desenvolvido há anos para facilitar a vida de quem não entende de programação. Ele inclui recursos gráficos, telas de batalha e outros dados. <br> RPG Maker XP foi feito para agradar iniciantes e experts. O programa é muito popular e pirateado na Internet desde a sua tradução ilegal para o inglês. <br> Leia mais em: http://www.baixaki.com.br/download/rpg-maker-xp.htm#ixzz1znA64HT8RPG Maker e a pirataria - (excerto extraído do site wikipedia.org) Foi graças a um russo conhecido na internet como Don Miguel, que o programa se disseminou no ocidente. Ele foi o responsável por traduzir todo o sistema da complexa linguagem Japonesa para o inglês. Além disto, através de seu site, deu grande suporte aos criadores iniciantes. Don Miguel foi processado pela Enterbrain, mas a empresa perdeu, devido a uma brecha legal em seu país, a Russia.<br> Apesar disto os programas RPG Maker 95, RPG Maker 2000, RPG Maker 2003, RPG Maker XP, entre outros, são de propriedade de seus devidos criadores, ou seja, se você os utiliza em qualquer lingua que não seja a japonesa está quebrando uma lei de copyright. <br> Por estas razões, esta versão disponibilizada aqui no Baixaki é um Shareware e NÃO viola os Direitos Autorais como a versão divulgada em outros sites da Internet.<br> <div align="center"><img src="http://static.ziggi.com.br/imagens_programas/screenshots/big_1309546329_19358.jpg"></font></div> </td> </table> <div align="center"><table background="barra.png" width="723"><td>Todos Direitos Reservados: Aldeia Rpg maker | Site Exemplo | Criado por : lucasbiell<td></table></div> </head> </body> </html>

Resultado:

Spoiler:

Bom fizemos nosso website simples Successful

usando html sem css e nenhum outro codigo dificil , no proximo website estarei fazendo um pouco mais complicado e com visual mais legal , este foi apenas um esboço pra dar uma mão pra galera que não sabem ou não tem noção valeu.

espero que gostem té mais pessoal fui Successful

(alguma duvida mandem pm ou comentem ).

desculpem algum erro de portugues ou outra coisa fiz muito rapido

_________________