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.