Botões em html como fazer?

[JosuéVfazani]

Eu queria saber como fazer um botao em html e adicionar um script a ele.

 

[DiF]

@JosuéVfazani Poderia por gentileza dar mais detalhes do que gostaria de saber?

Criar botões em html é relativamente simples. 

Pode-se fazer de dois modos,  por tag <button>  ou por elementos a nível de bloco, por exemplo Div e outros.

 

Já a adição de "script" é via Javascript. seja em javascript puro ou jQuery.

 

Se você explicar melhor seu objetivo, com detalhes, podemos ajudar você a entender como fazer.

[JosuéVfazani]

O que eu quero fazer é o seguinte, eu quero criar um botão para que quando clicado, vai alterar a cor do background da pagina, e eu queria fazer o script em javascript se possivel

 

[DiF]

@JosuéVfazani

Basicamente, você pode usar as funções css()  do jQuery para alterar a cor da propriedade background de um elemento. 

 

Por exemplo:

 

<a href="#" class="trocar">trocar cor<a/>

  <div class="backgroud"></div>  
  
$(document).ready(function(){
	$('.trocar').on('click', function(){
  		$('.backgroud').css({'background-color':'#f00' });
  });  
});  

Primeiro mostrei a marcação HTML.

Depois, um elemento DIV.

 

Mais abaixo, o javascript onde quando o documento estiver pronto, quando clicar no elemento com a classe trocar,  o elemento da classe background, setará a cor de fundo para vermelho.

 

Lembre-se que pode trocar o $('.backgroud')  por $('body')

que nesse caso você troca a cor de fundo da página.

[JosuéVfazani]

To com outra duvida se puder ajudar agradeço, quanto a duvida anterior consegui resolver, se quiser mando o código, 

Eu queria fazer aquele negocio em menus que quando voce clica ou passa o mouse por cima desse uma lista de opções

 

 outra coisa como eu faço para uma funçãoem uma pagina afetar outra pagina

 

[DiF]

@JosuéVfazani

Sobre o menu,  o que você quer fazer é um menu dropdown. 

 

Existe duas maneiras de fazer:

A comum usando elementos de lista não ordenada UL e LI

Utilizar a técnica Listless. Ou seja, sem lista não ordenada. Mas sim usando Div, 

 

Explicado neste tópico:

 

4 horas atrás, JosuéVfazani disse:

 outra coisa como eu faço para uma funçãoem uma pagina afetar outra pagina

Poderia explicar com mais detalhes?

[JosuéVfazani]

desculpa a demora para responder eu estudo o dia todo e não deu tempo

Sobre o menu dropdown você poderia colocar pelo menos um pouco de codigo para que eu possa visualizar melhor o q você disse

 

sobre o outro é o seguinte eu com a tag frameset dividi uma uma pagina em dois, para que a aba menor funcionasse como menu de opções, nessa aba eu consegui fazer um botao que muda a cor do fundo, mas em vez de mudar a cor do frame onde esta o botao eu queria mudar a cor do segundo frame

Ou seja afetar outra pagina com um codigo que esta em outra.  

E DIF só pra constar quero agradecer você ta me ajudando bastante

[DiF]

@JosuéVfazani

 

Basicamente os menus dropdown possuem  dois níveis de elementos da lista não ordenada.

Por exemplo:

<nav> <!-- Elemento NAV pai  -->
<ul class="menu"> <!-- Elemento UL filho de NAV -->
  <li> <!-- Elemento LI filho de UL  --> 
  	<ul class="submenu"> <!-- Elemento UL filho de LI -->
      <li></li> <!-- Elemento LI filho de UL  -->
    </ul>
  </li>
  <li></li> <!-- Elemento LI filho de UL, irmão adjascente de LI  -->
</ul>
</nav>  

Para entender esta estrutura, temos que lembrar sobre estrutura de árvore DOM.  

De acordo com a árvore, o elemento raiz é html. head e body são irmãos adjacentes.

Repare que UL, é irmão de P,  irmão de H1 e filho de body.

UL, possui 3 filhos. estes 3 filhos são irmãos adjacentes .

Esta é a representação da árvore dom. Não necessariamente o html vai ser chamado de pai ou raiz.

 

Voltando ao nosso código de exemplo, O elemento NAV é  o elemento pai do menu.

O elemento UL é a nossa lista não ordenada.

O elemento LI filho de UL é o ítem do menu. Dentro dele pode ter outro bloco de UL que será chamado de submenu.

 

Bom esta é só uma estrutura básica. A mágica toda é no CSS.

Com a posição relativa e absoluta.

Aqui está o exemplo: https://jsfiddle.net/o8cfx0za/

 

Contudo, há outra alternativa se quiser, é com a técnica listless. Consiste em não utilizar listas não ordenadas.

Usa-se DIV, Span e outros elementos.

Mas no mesmo modo que o método normal, a mágica toda é no CSS!

Veja um exemplo prático: https://jsfiddle.net/3jd6aoLy/1/

Neste exemplo, experimente copiar todo o bloco de DIV class  dropown e cole um a baixo do outro. e rode o exemplo novamente com o botão run. Veja que vai adicionar um bloco de menu lado a lado.

Estude o CSS, Veja o pseudo-elemento hover!

 

9 horas atrás, JosuéVfazani disse:

sobre o outro é o seguinte eu com a tag frameset dividi uma uma pagina em dois

 O frameset é um elemento obsoleto. Além de ser o antecedente do iframe. E ainda assim o iframe não é recomendando.

Por isso eu sugiro que você refaça ele com DIv,   e outros elementos mais recentes.