|
<< Click to Display Table of Contents >> Lembretes XHTML |
  
|
|
<< Click to Display Table of Contents >> Lembretes XHTML |
|
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
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 blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah