Início
![[HTML] Criando um site para seu jogo #2 - Menu de navegação Empty](https://2img.net/i/empty.gif)
Antes de começar, confirme ter lido:
A parte #1 do tutorial
AUTORIA MINHA- Renanr_Script
Nessa parte iremos aprender a criar uma navbar;
Vamos lá.
Vamos precisar das imagens do menu, eu criei umas básicas no paint e salvei na pasta Imagens, na ordem menu1.png, menu2.png, menu3.png, e menu4.png
Tá, vamos olhar o nosso código.
Se quisermos por pra sermos redirecionados a algum link de site da internet, usaremos o código substituindo o index.html pelo link do site, mas deve conter no início da url o "http://" , exemplo:
Já adicionamos uma tag de a href que nos redireciona a pagina principal, mas no meio da tag deve conter o texto ou imagem de exibição, que é onde vamos clicar pra sermos redirecionados. Portanto, usaremos a tag img para uma imagem de menu. Logo, nosso código ficará assim:
Parece que deu certo, porém a imagem se encontra num lugar inadequado.. então vamos usar a tag center para centralizar, logo o código fica assim:
O que faremos agora é adicionar o resto dos menus, iremos copiar o seguinte código:
https://i.imgur.com/ZFVJDk8.png
É pode ter ficado feinho mas isso é questão do designer (fiz o menu no paint rapidinho), estou ensinando a programação, que está ok. Pra ficar mais bonito coloque bem mais menus, pra ficar mais pro tamanho da banner, rs.
Ao clicarmos em Inicio, vamos a pagina principal, ao clicarmos em Fórum, vamos ao site do forum, e em Contato vamos a pagina de contato, porém esta não foi criada então dará erro (mostrarei a criação em uma outra parte do tutorial)
A parte #1 do tutorial
AUTORIA MINHA- Renanr_Script
Nessa parte iremos aprender a criar uma navbar;
Vamos lá.
Vamos precisar das imagens do menu, eu criei umas básicas no paint e salvei na pasta Imagens, na ordem menu1.png, menu2.png, menu3.png, e menu4.png
Tá, vamos olhar o nosso código.
- Código:
<html>
<head><title>Meu Jogo</title>
</head>
<body background="Imagens\bg.png">
<span style="margin-left: 285px;">
<img src="Imagens/banner.gif" style="margin-top: 50px;">
</span>
</body>
</html
- Código:
<a href="index.html"> </a>
Se quisermos por pra sermos redirecionados a algum link de site da internet, usaremos o código substituindo o index.html pelo link do site, mas deve conter no início da url o "http://" , exemplo:
- Código:
<a href="http://www.siteparceiro.com"> </a>
Já adicionamos uma tag de a href que nos redireciona a pagina principal, mas no meio da tag deve conter o texto ou imagem de exibição, que é onde vamos clicar pra sermos redirecionados. Portanto, usaremos a tag img para uma imagem de menu. Logo, nosso código ficará assim:
- Código:
<a href="index.html"><img src="Imagens/menu1.png"></a>
Parece que deu certo, porém a imagem se encontra num lugar inadequado.. então vamos usar a tag center para centralizar, logo o código fica assim:
- Código:
<center><a href="index.html"><img src="Imagens/menu1.png"></a>
O que faremos agora é adicionar o resto dos menus, iremos copiar o seguinte código:
- Código:
<a href="index.html"><img src="Imagens/menu1.png"></a>
- Código:
<center><a href="index.html"><img src="Imagens/menu1.png"></a><a href="http://www.seuforum.com"><img src="Imagens/menu2.png"></a>
- Código:
<center><a href="index.html"><img src="Imagens/menu1.png"></a><a href="http://www.seuforum.com"><img src="Imagens/menu2.png"></a><a href="contato.html"><img src="Imagens/menu3.png"></a>
- Código:
<center><a href="index.html"><img src="Imagens/menu1.png"></a><a href="http://www.seuforum.com"><img src="Imagens/menu2.png"></a><a href="contato.html"><img src="Imagens/menu3.png"></a></center>
- Código:
<html>
<head><title>Meu Jogo</title>
</head>
<body background="Imagens/bg.png">
<span style="margin-left: 285px;">
<img src="Imagens/banner.gif" style="margin-top: 50px;">
</span>
<center><a href="index.html"><img src="Imagens/menu1.png"></a><a href="http://www.seuforum.com"><img src="Imagens/menu2.png"></a><a href="contato.html"><img src="Imagens/menu3.png"></a></center>
</body>
</html>
https://i.imgur.com/ZFVJDk8.png
É pode ter ficado feinho mas isso é questão do designer (fiz o menu no paint rapidinho), estou ensinando a programação, que está ok. Pra ficar mais bonito coloque bem mais menus, pra ficar mais pro tamanho da banner, rs.
Ao clicarmos em Inicio, vamos a pagina principal, ao clicarmos em Fórum, vamos ao site do forum, e em Contato vamos a pagina de contato, porém esta não foi criada então dará erro (mostrarei a criação em uma outra parte do tutorial)
Steam