HTML 5 E CSS 3

Duvidas ou Trabalhos para fazer entre em Contato: marcofernando71@gmail.com

JAVASCRIPT

Duvidas ou Trabalhos para fazer entre em Contato: marcofernando71@gmail.com

TAMPLATES

Duvidas ou Trabalhos para fazer entre em Contato: marcofernando71@gmail.com

Pages

domingo, 13 de julho de 2014

Estrutura de um site em HTML 5


Neste artigo vamos dar umas dicas de como estruturar corpo de um site com as novas regras do HTML 5. Tem varias formas de estruturar o corpo de um site vamos ver um deles que vai ter basicamente o topo com o nome e o menu, o conteúdo da postagem com informações adjacentes ao lado que podem servir como propaganda do site ou um sistema de busca e o rodapé do site mais conhecido como mapa do site.

Primeiramente vamos devenir o html. Salve um novo arquivo index.html
<!DOCTYPE html>
<html lang="pt-Br">
        <head>
               <meta charset="UTF-8">
               <title>Estruturando o corpo de um site</title>
        </head>
        <body>
        </body>
</html>

Primeiramente vamos abrir um tag section para o corpo inteiro do site
  <section id="site">

  </section>

Depois de ter definido a estruturara básica do HTML vamos fazer o CABEÇALHO do site que vai conter o nome do site e o menu .
    <header id="cabecalho">
           <h1>Nome do site</h1>
           <nav id="menu">
                 <ul>
                       <li><a href="#">Home</a></li>
                       <li><a href="#">Pagina1</a></li>
                       <li><a href="#">Pagina2</a></li>
                       <li><a href="#">Pagina3</a></li>
                  </ul>
          </nav>
   </header>  

Agora vamos para as informações adjacentes do site ou sistema de busca vai muito de como cada um vai estruturar sua página.
  <aside id="busca">
            <p>Informações adjacentes ao site</p>
   </aside>

Vamos definir o conteúdo da postagem que vai conter o titulo, postagem e o rodapé ser for necessário.

    <section id="conteudo">
            <header id="tituloPostagem">
                   <h3>Titulo da postagem</h3>
           </header>
           <article id="postagem">
                <p>
                       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora in culpa explicabo                              laborum eum quia placeat excepturi repellendus incidunt odit rem iste, voluptas porro                              nesciunt fuga delectus odio. Corporis, ipsa.
               </p>
        </article>
        <footer id="rodapePostagem">
                  <h3>Rodapé da postagem se for necessario</h3>
        </footer>
</section>  

Finalmente vamos para o RODAPÉ do site ou o mapa do site.

    <footer id="rodapeSite">
           <h1>Rodapé do site</h1>
    </footer>

Teremos que fazer também o nosso CSS para o site ter uma cara de página de verdade se não ficar assim.













Vamos definir um CSS externo do nosso HTML, vá até o topo do html e chame o css.

<head>
     <meta charset="UTF-8">
     <title>teste de formatação</title>
     <link rel="stylesheet" type="text/css" href="style.css" />
</head>

/* Código em css*/
html{ margin: 0px; padding: 0px; }

/* vamos dar uma cor de fundo para a página*/
body{
   background:#fafbff;
   text-align: center;
}
/* vamos definir a fonte e dar uma borda, largura e um sobreamento*/
#site{
       font-family: arial,Helvetica, sans-serif;
       border: 1px solid #ccc;
       width: 1000px;
       height: auto;
       margin:0 0 0 150px;
       padding: 5px;
       border-radius: 5px;
       -moz-border-radius:5px;
       -webkit-border-radius:5px;
      -o-border-radius:5px;
       background: #fff;
      -moz-box-shadow:0px 3px 15px 0px #CCC;
      -webkit-box-shadow:0px 0px 25px 5px #CCC;
      -o-box-shadow:0px 0px 25px 5px #CCC;
      box-shadow:0px 0px 25px 5px #CCC;
}

/*Agora vamos estruturar o cabeçalho*/

#site #cabecalho{
     border: 1px solid #ccc;
     padding: 5px;
     margin:0 0 5px 0;
     border-radius:5px;
     -moz-border-radius:5px;
     -webkit-border-radius:5px;
     -o-border-radius:5px;
     background: #fafbff;
}
/* Menu do site */

#site #cabecalho #menu{
       border: 1px solid #ccc;
       text-align: left;
       border-radius:5px;
       -moz-border-radius:5px;
       -webkit-border-radius:5px;
      -o-border-radius:5px;
       background: #fff;
}

#site #cabecalho #menu ul{
      list-style: none;
     height: 20px;  
}

#site #cabecalho #menu ul li{
float:left;
padding:5px 15px 5px 0;
}
#site #cabecalho #menu ul a{
text-decoration: none;
color: black;
}

/* As informações adjacentes ou sistemas de busca do site*/

#site #busca{
   border: 1px solid #ccc;
   width: 290px;
   float: right;
   height: auto;
   border-radius:5px;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   -o-border-radius:5px;
   background: #fafbff;
}
/* Conteúdo da postagem */

#site #conteudo{
   border: 1px solid #ccc;
   margin: 0 0 5px 0;
   width: 690px;
   border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  -o-border-radius:5px;
   padding: 5px;
   background: #fafbff;
}
/*Rodapé ou Mapa do site*/

#site #rodapeSite{
   border: 1px solid #ccc;
   border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  -o-border-radius:5px;
   background: #fafbff;
}

E a estrutura do site deve ficar mais ou menos desse jeito aqui.



















Qualquer duvida sobre o artigo ou em algum trabalho sobre desenvolvimento de sites entre em contato pelo formulário ou pelo E-mail: marcofernando71@gmail.com.

QUALQUER DUVIDA OU TRABALHO PARA FAZER ENTRE EM CONTATO.  

quinta-feira, 10 de julho de 2014

LISTAS EM HTML


Neste Post vou explicar um pouco como fazer listas não-ordenadas, listas ordenadas e listas de definições em html.

Primeiro LISTAS NÃO ORDENADAS
  <h1>listas não-ordenadas</h1>
  <ul type="disc">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
  </ul>
  <ul type="circle">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
  </ul>
  <ul type="square">
       <li>item 1</li>
       <li>item 2</li>
       <li>item 3</li>
  </ul>




















Segundo LISTAS ORDENADAS
<h1>listas ordenadas</h1>
     <ol type="1">
           <li>item 1</li>
           <li>item 2</li>
           <li>item 3</li>
    </ol>
    <ol type="A">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
   </ol>
   <ol type="a">
        <li>item 1</li>
        <li>item 2</li>
       <li>item 3</li>
   </ol>
   <ol type="I">
       <li>item 1</li>
       <li>item 2</li>
       <li>item 3</li>
   </ol>
   <ol type="i">
       <li>item 1</li>
       <li>item 2</li>
       <li>item 3</li>
   </ol>

 No type você muda com a opção que mais atende as suas necessidades.






















Terceiro e a LISTA DE DEFINIÇÕES
<h1>lista de definições</h1>
<dl>
     <dt>hardware</dt>
     <dd>hardware e a parte física do computador, periféricos.</dd>
     <dt>software</dt>
      <dd>software e uma parte logica de um computador, aplicativos.</dd>
  </dl>










 Espero que tenha tirado as dúvida de vocês sobre listas, qualquer dúvida ou sugestões sobre o conteúdo deixem no comentário ou entre em contato.

Se você tem alguma dúvida ou trabalho para fazer podemos ajudar a resolver o seu problema.
E-mail de contato: marcofernando71@gmail.com.   

sexta-feira, 4 de julho de 2014

Carrossel em javaScript

Neste primeiro Artigo vou ensinar como fazer um Carrossel básico igual que esta na imagem abaixo usando html, css e javaScript.

primeiro vamos definir o html crie um arquivo novo eu vou definir como index.html.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Exemplo de Carrosel</title>
</head>
<body>
</body>
</html>

Crie uma div chamado carrosel e dentro dessa div crie um lista e dentro desta lista coloque as imagem que você quer que apareça na página.
<div id="carrosel">
      <ul>
            <li><img src="01.jpg" alt="imagem1" /></li>
           <li><img src = "02.jpg"  alt="imagem2" /></li>
   <li><img src = "03.jpg"  alt="imagem3" /></li>
  <li><img src = "04.jpg"  alt="imagem4" /></li>
  <li><img src = "05.jpg"  alt="imagem5" /></li>
  <li><img src = "06.jpg"  alt="imagem6" /></li>
      </ul>
</div>

E fora dessa div carrosel coloque um paragrafo e dentro dele coloque um dois link para servir como botão para poder movimentar para frente e para trás as imagens e dentro do link coloque defina duas classe um como "prev" e a outra como "next".Aqui você poderá colocar uma imagem também.
<p>
   <a href="#" class="prev"> <<  </a>
   <a href="#" class="next">  >>  </a>

Depois de ter terminado o HTML vamos para javaScript. Primeiramente vamos ter que baixar o jQuery que pode ser encontrado no site http://jquery.com/ e também vamos precisar do jcarousellite que pode ser encontrado aqui http://www.gmarwaha.com/jquery/jcarousellite/.Agora que foi baixado os dois arquivos vamos fazer sua chamada no index.html.

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jcarousellite_1.0.1.min.js"></script>

Agora precisamos vamos dar continuidade em nosso código. Dentro do head ou em um arquivo separado crie uma função para controlar a velocidade que cada imagem vai passar a quantidade de tempo que vai ficar parado e quantos imagem vai ficar definido na tela.

<script text="javascript">
$(function(){
$("#carrosel").jCarouselLite({
btnPrev : '.prev',
btnNext : '.next',
auto    : 1000,
speed   : 2000,
visible : 3,
scroll:1
});

</script>
Depois disso vamos para o CSS.
#carrosel{
background:#c0c0c0;
width:950px;
height:200px;
overflow:hedden;
border:1px solid black;
padding:5px 0px;
border-radius: 5px;
}
#carrosel ul{
list-style:none;
}
#carrosel ul li{
float:left;
display:inline;
}
#carrosel ul li img{
width: 250px;
height: 200px;
}

Este foi um artigo bem simples mais que poderá ajudar muitas pessoas que estão começando a criar suas páginas web e deixar com um Layout melhor.
Qualquer dúvida sobre o artigo ou precisando de ajuda em algum trabalho
deixem um comentário  ou entre em contato pelo E-mail: marcofernando71@gmail.com.

quinta-feira, 3 de julho de 2014

html

Em breve vários conteúdos sobre html5, css, JavaScript, php, MySQL e dicas para Templates. Dicas ou ajudas para trabalhos entre em contato podemos ajudar o seu problema . E-mail de contato marcofernando71@gmail.com