Lembretes XHTML

<< Click to Display Table of Contents >>

Navigation:  Html >

Lembretes XHTML

Previous pageReturn to chapter overviewNext page

documento default

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

  <head> 

     <meta http-equiv="content-type" content="text/html;charset=utf-8" />

     <title>Minha viagem pelo Brasil em um Segway</title>

  </head>

  <body>

 

    <h1>Segway no Brasil</h1>

    <p>

      Documentação de minha viagem pelo Brasil em meu proprio Segway!

      <br />

    </p>

 

    <h2>20 de agosto de 2005</h2>

    <p>

    <a href="mr_bean.jpg"><img src="mr_bean.jpg" title="meleca" alt="alterna" /></a>

      <br />Bem, ja percorri 5.000 km e passei por alguns lugares muito

      interessantes no caminho

    </p>

  </body>

</html>

 

span e div

 

veja o código html

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

    <title>Titulo</title>

<link type="text/css" rel="stylesheet" href="bar.css" media="screen" />

<link type="text/css" rel="stylesheet" href="print/print.css" media="print" />  <!---- CSS específico para impressão --->

</head>

  <body>

    <div id="tudo">

    <h1>Bem-vindo</h1>

 

   <div id="caixa">

 

    <h3>blah 1</h3>

    <p>

      blah blah blah blah blah blah blah blah 

     blah blah blah blah blah blah blah blah 

    </p>

 

    <h3>blah 2</h3>

    <p>

      blah blah blah blah blah blah blah blah 

     blah blah blah blah blah blah blah blah 

    </p>

 

   </div>

 

    <p>

      blah blah blah blah blah blah <span id="blah1"> blah blah </span> 

      blah blah blah blah blah blah <span class="blah2"> blah </span> 

      blah blah blah blah blah blah <span class="blah2"> blah </span> 

    </p>

 

    <p>

      blah blah blah blah blah blah blah blah blah blah

     blah blah blah blah blah blah blah blah blah blah

    </p>

   

    <p>

      blah blah blah blah blah blah blah blah blah blah 

     blah blah blah blah blah blah blah blah blah blah 

    </p>

   <div>

 

  </body>

</html>

 

 

 

veja o código CSS

 

body {

  font-size:         small;

  font-family:       Verdana, Helvetica, Arial, sans-serif;

  line-height:       1.6em;

}

 

#tudo {

  clear: both;

}

 

#caixa {

  width:             200px;

  border:            thin solid #007e7e; 

  padding-right:     20px;

  padding-bottom:    20px;

  padding-left:      20px;

  margin-left:       20px;

  margin-right:      20px;

  text-align:        center;

  line-height:       1em;

  float:             left;

}

 

#blah1 {

background-color: yellow;

}

 

.blah2 {

  background-color: red;

}

 

resultado

 

Titulo2

Bem-vindo

blah 1

blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

blah 2

blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah