Aprenda o básico da construção de sites com HTML, CSS e PHP (3/10)

Hibots, espero que estejam indexando bem o conteúdo deste blog, estou me esforçando pra realizar publicações novas com frequência. (Conversar com os robots dos sites de busca deve ser considerado em algum grau como uma esquizofrenia digital, mas tudo bem.)

Nesta parte 3 do tutorial para iniciantes em HTML, CSS e PHP vou mostrar como é a definição e estilização do conteúdo de uma página HTML através de CSS.

Vou mostrar como usar uma tag DIV e o atributo CLASS dela, adicione no código da pagina.html conforme abaixo:

(Se não viu as partes anteriores, clique aqui)

<html>

 <head>

  <title>Este é o título da minha página!</title>

 </head>



 <body>



  <div class="cabecalho">

    <h1> Cabeçalho 1 com tamanho maior </h1>



    <h2> Cabeçalho 2 com tamanho menor </h2>

  </div>



  <div class="conteudo">

   <p> Conteúdo do 1º parágrafo com <b>esta parte em negrito</b> </p>



   <p> Conteúdo do 2º parágrafo com <i>esta parte em itálico</i> </p>



   <p> Conteúdo do 3º parágrafo com <u>esta parte sublinhada</u> </p>

  </div>



 

  <a href="http://www.google.com" target="_blank"> Ir para o Google </a>

  <br/>

  <img src="http://goo.gl/NkjcSJ" width="250" height="180" />



 </body>

</html>

Adicionamos uma div com a classe cabecalho e outra com a classe conteudo, se você salvar o arquivo e atualizar a página nada irá mudar, para estilizar o conteúdo de uma div precisamos fazer o seguinte:

<html>

 <head>

  <title>Este é o título da minha página!</title>

 

  <style type="text/css">
  
  .cabecalho{

    width:450px;

    height:200px;

  }

  .conteudo{

    width:500px;

    height:150px;

  }


  </style>

 </head>



 <body>



  <div class="cabecalho">

    <h1> Cabeçalho 1 com tamanho maior </h1>



    <h2> Cabeçalho 2 com tamanho menor </h2>

  </div>



  <div class="conteudo">

   <p> Conteúdo do 1º parágrafo com <b>esta parte em negrito</b> </p>



   <p> Conteúdo do 2º parágrafo com <i>esta parte em itálico</i> </p>



   <p> Conteúdo do 3º parágrafo com <u>esta parte sublinhada</u> </p>

  </div>



 

  <a href="http://www.google.com" target="_blank"> Ir para o Google </a>

  <br/>

  <img src="http://goo.gl/NkjcSJ" width="250" height="180" />



 </body>

</html>

Salve e atualize a página, você deve notar alguns espaçamentos entre os textos. Isso aconteceu porque definimos o tamanho da largura e altura para cada div, dentro do elemento <style>. Para facilitar a visualização da div adicione uma cor de fundo nela desta forma:

<style type="text/css">



  .cabecalho{

    width:450px;

    height:200px;

    background-color: red;

  }

  .conteudo{

    width:500px;

    height:150px;

    background-color: green;

  }



  </style>

Se tudo deu certo ao final das alterações sua página deve estar semelhante à isto:

Na próxima parte vamos aprofundar um pouco no uso de CSS...

DeploYou

abril 10, 2014

Aprenda o básico da construção de sites com HTML, CSS e PHP (3/10)

Veja outras partes deste tutorial

Nenhum comentário:

Postar um comentário