Jump to content

[Ajuda] Botões HTML


Skyon

Recommended Posts

Primeiro de tudo, boas a todos. Sou "recém-nascido" aqui no fórum e inauguro a minha chegada com uma dúvida que tenho para um projecto na minha faculdade.

Gostaría de criar um botão no site como o que está neste site: aqui (ou seja, com uma pequena imagem e texto à frente) e que quando se carregasse nele ele abrisse um site definido na mesma página... Tenho conhecimentos quase nulos em HTML e precisava de saber como fazer isto, era urgente...

Encontrei na net estes códigos...

<button>
<onClick="window.location='http://www.google.com'">
<tr>
<td width="19%"><img src="imagem.jpg" height="50" width="40" /></td>
<td width="81%"><b>Nome</b></td>
</tr>
</table>
</button>

O problema é:

- não efectua nenhuma acção quando carrego no botão

- a imagem fica a que eu escolhi depois de pôr o código mas algum tempo depois muda para outra que não consigo perceber qual é...

O outro código para um botão que tinha era:

<form action="http://www.google.com">
<input type = "submit" value = "Nome"
</form>

Só que não tem a imagem e eu gostava que desse para ver uma pequena imagem no botão...

Alguém me podería ajudar?

Link to comment
Share on other sites

Bem, respondendo à primeira dúvida, sobre o link, tens o código quase correcto, experimenta desta maneira:

<button onclick="window.location='http://www.google.com'">
<tr>
<td width="19%"><img src="imagem.jpg" height="50" width="40" /></td>
<td width="81%"><b>Nome</b></td>
</tr>
</table>
</button>

o onclick é uma propriedade do button, daí ter de ser definido na mesma tag.

O facto da imagem mudar "algum tempo depois" é estranho. Esse tempo é depois de clicares nele, ou tens outro código que rode imagens, etc?

Nick antigo: softclean | Tens um projeto? | Wiki P@P

Ajuda a comunidade! Se encontrares algo de errado, usa a opção "Denunciar" por baixo de cada post.

Link to comment
Share on other sites

Bem, respondendo à primeira dúvida, sobre o link, tens o código quase correcto, experimenta desta maneira:

<button onclick="window.location='http://www.google.com'">
<tr>
<td width="19%"><img src="imagem.jpg" height="50" width="40" /></td>
<td width="81%"><b>Nome</b></td>
</tr>
</table>
</button>

o onclick é uma propriedade do button, daí ter de ser definido na mesma tag.

O facto da imagem mudar "algum tempo depois" é estranho. Esse tempo é depois de clicares nele, ou tens outro código que rode imagens, etc?

Vou experimentar o código e já ponho feedback.

Não, muda sem eu carregar no botão e não tenho nenhum código para rodar a imagem, o botão está escrito com esse primeiro código e onde está o "imagem.jpg" tenho o link da imagem...

Link to comment
Share on other sites

Reparei que a imagem, onde antes estava a foto de uma árvore agora aparece isso. O que aconteceu é que eu tinha a tab aberta por definição (estava guardada na sessão anterior do meu browser) e, sempre que eu vía que a imagem estava diferente voltava a copiar o endereço da imagem (que na página que eu tinha aberta estava correcta) e voltava a colar no código e a imagem voltava a aparecer correctamente no botão...

Penso que seja isso...

Link to comment
Share on other sites

O código resultou, obrigado softclean  😛

Já agora, aproveito, se não for muito abuso, para perguntar 2 coisas, estas duas não tão urgentes:

- há maneira de eu mudar o estilo do botão? para que fique com um design diferente?

- acho que ficaría melhor uma borda à volta da imagem e já tentei colocá-la mas não aparece :S

O código que estava a utilizar era:

<button onclick="window.location='http://www.google.com'">
<tr>
<td width="19%"><img src="imagem.jpg" height="50" width="40" border="3" /></td>
<td width="81%"><b>Nome</b></td>
</tr>
</table>
</button>
Link to comment
Share on other sites

Ah, estás a fazer uma coisa chamada hotlinking, ou seja, estás a ligar directamente a imagem para outro site que não é teu, e alguns quando detectam essa situação, trocam as imagens.

Uma solução será copiares a imagem correcta (botão direito na imagem, save as) e coloca-la na mesma pasta que a página html. Por fim, o endereço da imagem é o nome da imagem que gravaste, por exemplo, se a imagem de chamar "arvore.jpg", é isso que colocas no campo "src" da tag "img" (imagem).


A questão do estilo do botão, podes criar uma imagem no teu editor de imagens preferido, e colocá-la como um botão, ou seja, algo assim:

<a href="http://site.para.onde.queres.ir.com/"><img src="botao.jpg" border="0" /></a>

Em que "botao.jpg" era o teu botão desenhado sob forma de uma imagem.

Nick antigo: softclean | Tens um projeto? | Wiki P@P

Ajuda a comunidade! Se encontrares algo de errado, usa a opção "Denunciar" por baixo de cada post.

Link to comment
Share on other sites

Ah, estás a fazer uma coisa chamada hotlinking, ou seja, estás a ligar directamente a imagem para outro site que não é teu, e alguns quando detectam essa situação, trocam as imagens.

Uma solução será copiares a imagem correcta (botão direito na imagem, save as) e coloca-la na mesma pasta que a página html. Por fim, o endereço da imagem é o nome da imagem que gravaste, por exemplo, se a imagem de chamar "arvore.jpg", é isso que colocas no campo "src" da tag "img" (imagem).


A questão do estilo do botão, podes criar uma imagem no teu editor de imagens preferido, e colocá-la como um botão, ou seja, algo assim:

<a href="http://site.para.onde.queres.ir.com/"><img src="botao.jpg" border="0" /></a>

Em que "botao.jpg" era o teu botão desenhado sob forma de uma imagem.

A questão é que eu estou a usar um fornecedor de criação de sites, não criei o meu próprio com um programa e o tenho alojado num domínio, ou seja, não tenho a possibilidade de alojar as imagens numa pasta como estás a dizer  😛

Link to comment
Share on other sites

Ok, então guardas a imagem na mesma no teu computador, e podes sempre fazer upload para o tinypic, eles dão-te o endereço da imagem que podes usar directamente, sem problemas. Depois com esse endereço, basta colares no teu código HTML, como estavas a fazer.

http://tinypic.com/

Nick antigo: softclean | Tens um projeto? | Wiki P@P

Ajuda a comunidade! Se encontrares algo de errado, usa a opção "Denunciar" por baixo de cada post.

Link to comment
Share on other sites

Ok, então guardas a imagem na mesma no teu computador, e podes sempre fazer upload para o tinypic, eles dão-te o endereço da imagem que podes usar directamente, sem problemas. Depois com esse endereço, basta colares no teu código HTML, como estavas a fazer.

http://tinypic.com/

Ah, óptima solução então  😛

Para finalizar, e desculpa o tempo que te estou a ocupar, há possibilidade de usar imagens de botões já pré-definidos, ou seja, disponibilizados por outras pessoas na internet? E se sim, uso o mesmo código que me deste caso fosse eu a desenhar o botão?

Link to comment
Share on other sites

Sim, como se trata de uma imagem, podes usar outras da internet. O que te recomendo é a copiares sempre para o teu computador as imagens e fazeres o upload para o site de imagens, por exemplo, o Tinypic, que te indiquei 😛 Assim tens a garantia que a imagem não desparece ou é substituída por outra.

Para botões, podes fazer uma pequena pesquisa, existe bastante coisa:

http://www.google.pt/search?q=web%20buttons

Nick antigo: softclean | Tens um projeto? | Wiki P@P

Ajuda a comunidade! Se encontrares algo de errado, usa a opção "Denunciar" por baixo de cada post.

Link to comment
Share on other sites

Sim, como se trata de uma imagem, podes usar outras da internet. O que te recomendo é a copiares sempre para o teu computador as imagens e fazeres o upload para o site de imagens, por exemplo, o Tinypic, que te indiquei 😉 Assim tens a garantia que a imagem não desparece ou é substituída por outra.

Para botões, podes fazer uma pequena pesquisa, existe bastante coisa:

http://www.google.pt/search?q=web%20buttons

Obrigadíssimo por toda a ajuda  😄 espero poder aprender mais sobre programação a curto e médio-prazo e, assim, passar a ver cá mais vezes  😄

Link to comment
Share on other sites

HTML não é difícil de aprender, e para quem dizia que tinha conhecimentos nulos de HTML, já estás a fazer umas coisas porreiras. 😉

Se quiseres aprender sobre HTML, que não é nada difícil, e até acho que é uma mais valia, por exemplo, para editar aqueles temas gratuitos para blogs, podes visitar o site da w3schools, ou qualquer outro tutorial sobre HTML, que se acha facilmente na web.

Nick antigo: softclean | Tens um projeto? | Wiki P@P

Ajuda a comunidade! Se encontrares algo de errado, usa a opção "Denunciar" por baixo de cada post.

Link to comment
Share on other sites

Cá estou eu outra vez com outra dúvida (só assim é que aprendemos, não é?) 😛

Bem, o que me traz aqui nem é bem uma dúvida é mais um problema... Continuo a trabalhar no meu site e surgiu-me uma situação que eu não estou a conseguir resolver... Quería escrever um nome numa página e que ficasse com letras grandes pois era algo importante. A verdade é que o editor de texto incluído no editor do site não me está a permitir colocar o texto no tamanho que pretendo, quando gravo o texto mantém-se no mesmo tamanho.

Foi então que pensei em usar um código em HTML para colocar o texto como quería. Até experimentei no w3schools e resultou no que eu quería. Só que quando coloquei no site vía-se que o texto estava no tamanho pretendido e estilizado da maneira pretendida mas estava como que "cortado" superior e inferiormente e não consigo resolver isso :S

Se me pudessem ajudar, agradecía...

EDIT:

Já me esquecía... O código que usei foi este:

<html>
<body>
<font size="10"><b><i>Acer</i></b></font>
</body>
</html>
Link to comment
Share on other sites

Experimenta também definir a altura da linha:

<p style="font-size: 10px; line-height: 15px">O teu texto com as formatações que queres aqui</p>

NOTA: aquele style, com aqueles valores que coloquei, é chamado CSS, que te permite definir tudo o quanto é estilo para qualquer tag de HTML. Neste caso, defini a propriedade de CSS line-height, que também podes ver no site da w3schools:

http://www.w3schools.com/css/pr_dim_line-height.asp

Nick antigo: softclean | Tens um projeto? | Wiki P@P

Ajuda a comunidade! Se encontrares algo de errado, usa a opção "Denunciar" por baixo de cada post.

Link to comment
Share on other sites

  • 2 years later...

Boas Tardes

estou com um problema em usar o html, e precisava de uma ajudinha,

pretendo criar uns botões com hiperligações para outro site por exemplo e tentei

usar os scripts que tem colocado e modificando para o meu site,

o que acontece é que quando uso o codigo que penso estar correcto ao guardar no Joomla

fica sem:

<onclick="window.location='http://www.google.com'">

mais a baixo já coloco o código todo, e ao guardar desaparece sempre esta expressão do código.

Eu uso o joomla 1.5.25 PT-PT,

Se alguém me puder ajudar!!

</p>
<input name="name" type="button" onclick="window.location='http://www.google.com'" value="Página Oficial do Fabricante" />
</td>
Edited by sergio-_17
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.