Mostrando postagens com marcador CSS. Mostrar todas as postagens

JQUERY SIMPLES





Introdução
Olá pessoal blz? hoje estarei postando algo muito simples sobre jquery, vou colocar a tag a tag básicona da jquery para vocês aprender como utilizar. Acho que esse vai ser o menor post do blog, vamos ver o que vai dar rsrrs.


O começo
Pra que serve? jquery é uma biblioteca java script que serve para web, com o intuito de criar animações (se bem que da pra criar animações com css...) mas vamos lá, graças a jquery também são criados os games que você encontra por ai, então essa biblioteca é muito importante para um maior profissionalismo no seu site e até também nem profissionalismo mas sim para facilitar sua vida em algum pepinos pra resolver na programação.

Baixando
Para você colocar a biblioteca jquery no seu site você precisa baixar ela. que é de uma forma bem simples, acesse o site jquery.com e clique em download
lá irá aparecer alguns linques, tem até a do google, eu escolho sempre a primeira, então faça isso, a diferença entre elas é que a do google é usada para coisas do google plugins entre outros (mas funciona normal em qualquer site) as outras é so a jquery com um código simplificado, ou organizado, ou seja tanto faz pra quem ta começando ok? Quando você clicar no link ele vai abrir uma página cheia de código javascript, copie tudo e cole no bloco de notas do computador e salve como jquery.js feito isso esta pronto para você usar essa belezinha!!!! Aêêêêee...


Abrindo o html
Novamente vamos abrir o html e agora vamos colocar o link para puxar a biblioteca jquery para seu site, esse link lembrando vamos colocar dentro da head pois é la que fica a inteligência do site ok?e também vamos criar um script para a gente manipular essa jquery dentro da head também.

<head>
<script src="jquery.js"></script>

<script>

</script>
</head>

O Código em Si.
Agora vamos digitar o código da jquery para a manipulação é muito simples mas qualquer erro pode não funcionar ok?

<head>
<script src="jquery.js"></script>

<script>
   
   $(document).ready(function(){

//aqui dentro você vai colocar os códigos para manipular imagens paginas entre outros.

   })

</script>
</head>


Aplicação.
Vamos usar em uma div id teste, ela vai aparecer lentamente na tela, esse será o efeito que iremos colocar. Vamos usar um pouco de css então prepare os dedos.

<div id="teste"></div> essa é a div que ficará dentro da body.

div criada certo? então vamos chamar uma css interno para colorir essa div que criamos agora, lembrando que essa css ficará dentro da head na tag style que iremos criar.

<style>
#teste{width:968px;
height:150px;
background:red;
margin:0 auto;}
</style>

Fiz o básico, pintei coloquei largura e altura, e centralizei com a css, agora vamos para a jquery que também está na head.

<script src="jquery.js"></script>

<script>
   
   $(document).ready(function(){
  
       $('#teste').hide();
       $('#teste').show(5000);

   })

</script>

Aqui eu puxei a div através do $('#teste') e coloquei um parâmetro hide que é para ele sumir.. abaixo coloquei um parâmetro show para ele aparecer e coloquei para ele aparecer demorado com o valor de 5000 ficando todo o código dessa forma.



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title do documento</title>
<script src="jquery.js"></script>

<script>
   
   $(document).ready(function(){
  
       $('#teste').hide();
       $('#teste').show(5000);

   })

</script>
<style>
#teste{width:968px;
height:150px;
background:red;
margin:0 auto;}
</style>
</head>

<body>
<div id="teste"></div>
</body>

</html>

Pronto está pronto seu primeiro código Jquery!! que beleza em??

TUTORIAL HTML E CSS INTERNO COMO USAR!





Introdução
Olá amigo que não sabe usar html e css vou mostrar algumas formas para facilitar sua vida em relação a isso ok? vamos primeiro ver como funciona a união das duas internamente e externamente, não é um bixo de sete cabeça, é muito simples de se entender bastar prestar atenção.

Primeiro criaremos a parte básica de um site com o html5. esse exemplo é de css interna. vamos criar a tag style dentro da head, pois é na head que fica a "inteligência" do site

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Titulo</title>

<style>

</style>
</head>

<body>
conteúdo
</body>

</html>


Blz agora vamos criar uma div lá no corpo do site (body). Você pode escolher, tem a div id,  e tem a div class, eu particularmente utilizo mais é a div id.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Titulo</title>

<style>

</style>
</head>

<body>
  <div id="topo">
  <div><!-- TOPO DO SITE-->
</body>

</html>

Pronto agora vamos chamar a DIV ID TOPO lá na style que criamos lá em cima.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Titulo</title>

<style>
  #topo{}
</style>
</head>

<body>
  <div id="topo">

  <div><!-- TOPO DO SITE-->
</body>

</html>

Note que eu coloquei um '#' isso porque quando estamos chamando div id colocamos na css '#' e quando estamos chamando class colocamos na css '.' um pontinho ok? Agora basta pintar e bordar a div.



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Titulo</title>

<style>

   #topo{ width:968px; 

                height:150px;
               background:#000;
              margin:0 auto; }
</style>
</head>

<body>
  <div id="topo">
  <div><!-- TOPO DO SITE-->
</body>

</html>


Pronto agora vou explica oque eu coloquei ali.
primeiro colocamos width: que é a largura da div
depois height: que é  a altura ambas colocadas com valores em pixel (px).
depois colocamos o background: que é a cor da div e nesse caso só pra mostrar que sou sabido rsrsrs, eu usei cores hexadecimais #000 (preto) mas você pode escrever em inglês o nome da cor agora tá?
tipo assim background:black;  vai funcionar do mesmo jeito e por fim fechamos tudas elas com ponto e vírgula (;) e depois o colchete }  certo? vamos ver como ficou.

salve esse arquivo com o nome index.html e basta clicar para abrir. Outra coisa, porque você ta usando index.html é porque a primeira página de um site em que o servidor identifica é essa, não importa a extensão (.html, .php, .asp) oque importa é que tem que ser com o nome index Ok?