Redes sociais

Facebook hot tutorial YouTube hot tutorial Rss feed hot tutorial

Como criar um site simples com HTML

11 julho 2012

Abra o Bloco de notas de seu computador (Notepad)



Se for Windows 7, faça assim:
Iniciar > Pesquisar programas e arquivos

Sefor Windows XP, faça assim:
Iniciar > Executar > Digite Bloco de notas e aperte a tecla ENTER do teclado.

Não tem nenhum truque!
Só é somente códigos. Mas lembrando esse exemplo é um site muito simples mesmo.

Atenção: "RECOMENDO QUE VOCÊ DIGITE OS CÓDIGOS, PORQUE ASSIM SERÁ MELHOR DE APRENDER"

Primeiramente, as regras básicas:

Toda página deve começar com a tag <HTML> e terminar com </HTML>. Dentro dessas duas tags ficará todo o conteúdo do site.

As tags <body> e <head> devem ser incluídas dentro da tag <HTML> AQUI </HTML>.

(BODY é o corpo do site e HEAD é a cabeça do site)

Todas as tags devem ser fechadas!
Exemplo 1: A <body> deverá ser fechada assim: </body>
Exemplo 2: A <head> deverá ser fechada assim: </head>

PASSO 01:
Com seu Bloco de notas aberto digite:

<html>
<head>
</head>
<body>
</body>
</html>

A estrutura do site está pronta! agora basta inserir o conteúdo em seu devido lugar
Como eu disse todas as tags fechadas corretamente.

PASSO 02:

Digite dentro da tag <head> AQUI </head> esse código:

<title> INSIRA AQUI O TÍTULO DE SEU SITE </title>


<table>
 <tr>
 <td widht="50%"> DIGITE AQUI NOVAMENTE O TÍTULO DE SEU SITE </td>
 <td widht="50%"><IMG SRC='COLE AQUI A URL DE SUA IMAGEM'></td>

 </tr>
 </table>


Ficando assim o código:


<html>
<head>
<title> INSIRA AQUI O TÍTULO DE SEU SITE </title>


<table>
 <tr>
 <td widht="50%"> DIGITE AQUI NOVAMENTE O TÍTULO DE SEU SITE </td>
 <td widht="50%"><IMG SRC='COLE AQUI A URL DE SUA IMAGEM'></td>

 </tr>
 </table>


</head>
<body>
</body>
</html>


PASSO 03:

Digite dentro da tag <body> AQUI </body> esse código:

<MARQUEE BEHAVIOR=SCROLL DIRECTION="RIGHT" BGCOLOR="YELLOW"WIDTH=80%>DIGITE O SLOGAN DE SEU SITE (FRASE CHAMATIVA)</MARQUEE>

Ficando assim o código:


<html>
<head>
<title> INSIRA AQUI O TÍTULO DE SEU SITE </title>


<table>
 <tr>
 <td widht="50%"> DIGITE AQUI NOVAMENTE O TÍTULO DE SEU SITE </td>
 <td widht="50%"><IMG SRC='COLE AQUI A URL DE SUA IMAGEM'></td>

 </tr>
 </table>


</head>
<body>

<MARQUEE BEHAVIOR=SCROLL DIRECTION="RIGHT" BGCOLOR="YELLOW"WIDTH=80%> DIGITE O SLOGAN DE SEU SITE (FRASE CHAMATIVA) </MARQUEE>

</body>
</html>


PASSO 04:

Digite entre a tag <body> AQUI </body> esse código:


<style>
body {
background-image: url("http://www4.worldrag.com/imagem/di-V9WX.png");
background-repeat: no-repeat;
background-position: center;
}
</style>

Essa URL que está em vermelho e a imagem de fundo, mas você pode alterar e por uma de seu gosto.

Ficando assim o código:


<html>
<head>
<title> INSIRA AQUI O TÍTULO DE SEU SITE </title>


<table>
 <tr>
 <td widht="50%"> DIGITE AQUI NOVAMENTE O TÍTULO DE SEU SITE </td>
 <td widht="50%"><IMG SRC='COLE AQUI A URL DE SUA IMAGEM'></td>

 </tr>
 </table>


</head>
<body>


<style>
body {
background-image: url("http://www4.worldrag.com/imagem/di-V9WX.png");
background-repeat: no-repeat;
background-position: center;
}
</style>


<MARQUEE BEHAVIOR=SCROLL DIRECTION="RIGHT" BGCOLOR="YELLOW"WIDTH=80%> DIGITE O SLOGAN DE SEU SITE (FRASE CHAMATIVA) </MARQUEE>

</body>
</html>


PASSO 05:

Digite logo após a tag </style> esse código:


<div class="div_img">
 <img src="COLE AQUI A URL DE UMA IMAGEM" style="width:220px; height:200px ;border:0px solid #000000;" />
 </div>

 </div>
 <div style="font:Arial; width:300px; float:left; text-align:justify;">

Digite aqui um texto sobre oque o site fala

<div class="div_img">

 <img src="AQUI COLE A URL DE OUTRA IMAGEM" style="width:220px; height:200px ;border:0px solid #000000;" />
 </div>


 </div>
 <div style="width:200px; float:left; text-align:center; ">

Digite aqui um texto sobre oque o site fala
 <div class="div_img">

 <img src=" AQUI COLE A URL DE OUTRA IMAGEM " style="alling:justify; width:220px; height:200px ;border:0px solid blue;" />

 </div>
  </div>
 </div>

Ficando assim o código:


<html>
<head>
<title> INSIRA AQUI O TÍTULO DE SEU SITE </title>

<table>
 <tr>
 <td widht="50%"> DIGITE AQUI NOVAMENTE O TÍTULO DE SEU SITE </td>
 <td widht="50%"><IMG SRC='COLE AQUI A URL DE SUA IMAGEM'></td>
 </tr>
 </table>

</head>
<body>

<style>
body {
background-image: url("http://www4.worldrag.com/imagem/di-V9WX.png");
background-repeat: no-repeat;
background-position: center;
}
</style>


<div class="div_img">
 <img src="COLE AQUI A URL DE UMA IMAGEM" style="width:220px; height:200px ;border:0px solid #000000;" />
 </div>

 </div>
 <div style="font:Arial; width:300px; float:left; text-align:justify;">

Digite aqui um texto sobre oque o site fala

<div class="div_img">

 <img src="AQUI COLE A URL DE OUTRA IMAGEM" style="width:220px; height:200px ;border:0px solid #000000;" />
 </div>

 </div>
 <div style="width:200px; float:left; text-align:center; ">

Digite aqui um texto sobre oque o site fala
 <div class="div_img">

 <img src=" AQUI COLE A URL DE OUTRA IMAGEM " style="alling:justify; width:220px; height:200px ;border:0px solid blue;" />

 </div>
  </div>
 </div>


<MARQUEE BEHAVIOR=SCROLL DIRECTION="RIGHT" BGCOLOR="YELLOW"WIDTH=80%> DIGITE O SLOGAN DE SEU SITE (FRASE CHAMATIVA) </MARQUEE>

</body>
</html>


PRONTO O SITE ESTÁ PRONTO! AGORA SALVE!

(ATENÇÃO SEMPRE QUE FOR SALVAR O ARQUIVO HTML, NO NOME DO ARQUIVO COM NO FINAL O FORMATO .HTML)

Exemplo: HOTTUTORIAL.html

Escrito por Lucas Henrique





Nenhum comentário:

Postar um comentário

Atenção!
-Comentários ofensivos não serão publicados.
-Antes de pedir ajuda veja se a dica já não está no índice do blog.