domingo, 23 de junho de 2013

index e pagina

<html>
 <head>
<title>Os Flintstones</title>
<link rel="stylesheet" type="text/css" href="estilo.css" />

 </head>
 <body>
<div id="topo">
<h1>Flinstones</h1>
</div>
<div id="colCentral">
<img id="img1" src="imagens/barneybetevilmafred.jpg">

       </div>



<ol>
<li>
<a href="conteudos/flintstones.html">
Os Flintstones

<img src="imagens/fred.jpg">
</a>
</li>
<li>

<a href="conteudos/personagens.html">
Os Personagens

<img src="imagens/barney.jpg">
</a>
</li>
<li>
<a href="index.html">

Home

<img src="imagens/casa.png">
</a>
</li>
</ol>


<img src="imagens/aguia.gif">
<p> Joao Pedro Bragança, Turma D, n° 1




 </body>
</html>














<html>
 <head>
<title>Fred</title>
<link rel="stylesheet" type="text/css" href="../estilo.css" />

 </head>
 <body>
<div id="topo">
<h1>A Série</h1>
</div>
<div id="ColEsq"><div id="ConteudoEsq">
<p>Os Flintstones (em inglês: The Flintstones) foi uma série de televisão animadaproduzida pela Hanna-Barbera de 1960 a 1966.</p>
<p> O desenho retrata o cotidiano de uma família de classe média da Idade da Pedra.</p>
<p>Calcula-se que já foi assistido por 300 milhões de espectadores em 80 países, sendo dublado em 22 idiomas.</p></div></div>
<br>
<div id="ColCentral"><p>No desenho animado, a família Flintstone vive na cidade pré-histórica de Bedrock, trabalha numa pedreira e dirige um carro com rodas de pedra, movido pelos pés.</p>
<p>Eles têm uma família de amigos, o casal Rubble, e animais de estimação: um dinossauro e um tigre dente de sabre.</p>
<p>Com o tempo, surgiram a filha Pedrita, dos Flintstones, em 1962, e o filho adotivo Bambam, dos Rubbles, em 1963.</p></div>
<br>
<div id="ColDir"><p>Exibida pela primeira vez em 30 de setembro de 1960, Os Flintstones foi a primeira e a mais duradoura série animada de comédia de todos os tempos.</p>
<p>Ela foi a primeira animação a exibir uma história contínua num episódio de meia hora, ao contrário dos desenhos animados até então, bem mais curtos.</p>
<p>Ela foi também a primeira série de animação exibida em horário nobre e tornou seus criadores, a empresa Hanna-Barbera Productions, um dos maiores estúdios de Hollywood.</p></div>


<img id="img1" src="../imagens/carrocompleto.jpg">

       </div>


<ol>
<li>
<a href="flintstones.html">
Os Flintstones

<img src="../imagens/fred.jpg">
</a>
</li>
<li>

<a href="personagens.html">
Os Personagens

<img src="../imagens/barney.jpg">
</a>
</li>
<li>
<a href="../index.html">

Home

<img src="../imagens/casa.png">
</a>
</li>
</ol>


 </body>
</html>

outro estilo

h1{
text-align: center;
}
p {
font-family: comic sans ms;
color: red;
}

li{
display: list-item;
}
img{
width: 70;
height: 70;
}
#img1{
width: 300;
height: 300;
}
body {
margin: 0 0 5px 0;
padding: 0;
background-color: #54FF9F;
font: italic 14px/1.5em
Times New Roman, Tahoma, Arial;
}
#topo{
width: auto;
height: 50px;
background-color: #D3D3D3;
border-top: 1px solid #666;
border-bottom:3px dotted #000000;
color: #87CEEB;
text-align: center;
}
#colCentral {
background: #000000;
color:#CD5C5C;
padding: 2px 10px;
text-align: justify;
border-bottom: 1px solid #666;

}
#conteudoDir {
position:absolute;
width:140px;
top:60px;
right:5px;
color:white;
padding-bottom:20px;
border-bottom:3px double #666;
}
}
#conteudoEsq {
position:absolute;
width:190px;
top:60px;
left:5px;
color:white;
padding-bottom:20px;
border-bottom:3px double #666;
}
}
#colEsq {
background: #000000;
color:#CD5C5C;
padding: 2px 10px;
text-align: justify;
border-bottom: 1px solid #666;
}
}
#colDir {
background:#FA8072;
margin:0px;
}

<html>
 <head>
<title>Fred</title>
<link rel="stylesheet" type="text/css" href="../estilo.css" />

 </head>
 <body>
<div id="topo">
<h1>A Série</h1>
</div>
<div id="ColEsq"><div id="ConteudoEsq">
<p>Os Flintstones (em inglês: The Flintstones) foi uma série de televisão animadaproduzida pela Hanna-Barbera de 1960 a 1966.</p>
<!--alou--!><p> O desenho retrata o cotidiano de uma família de classe média da Idade da Pedra.</p>
<p>Calcula-se que já foi assistido por 300 milhões de espectadores em 80 países, sendo dublado em 22 idiomas.</p></div></div>
<br>
<div id="ColCentral"><p>No desenho animado, a família Flintstone vive na cidade pré-histórica de Bedrock, trabalha numa pedreira e dirige um carro com rodas de pedra, movido pelos pés.</p>
<p>Eles têm uma família de amigos, o casal Rubble, e animais de estimação: um dinossauro e um tigre dente de sabre.</p>
<p>Com o tempo, surgiram a filha Pedrita, dos Flintstones, em 1962, e o filho adotivo Bambam, dos Rubbles, em 1963.</p></div>
<br>
<div id="ColDir"><div id="ConteudoDir"><p>Exibida pela primeira vez em 30 de setembro de 1960, Os Flintstones foi a primeira e a mais duradoura série</p><br><br><br><br><p> animada de comédia de todos os tempos.</p>
<p>Ela foi a primeira animação a exibir uma história contínua num episódio de meia hora, ao contrário dos desenhos animados até então, bem mais curtos.</p>
<p>Ela foi também a primeira série de animação exibida em horário nobre e tornou seus criadores, a empresa Hanna-Barbera Productions, um dos maiores estúdios de Hollywood.</p></div></div>

index

<html>
 <head>
<title>Os Flintstones</title>
<link rel="stylesheet" type="text/css" href="estilo.css" />

 </head>
 <body>
<div id="topo">
<h1>Flinstones</h1>
</div>
<div id="colCentral">
<img id="img1" src="imagens/barneybetevilmafred.jpg">

       </div>



<ol>
<li>
<a href="conteudos/flintstones.html">
Os Flintstones

<img src="imagens/fred.jpg">
</a>
</li>
<li>

<a href="conteudos/personagens.html">
Os Personagens

<img src="imagens/barney.jpg">
</a>
</li>
<li>
<a href="index.html">

Home

<img src="imagens/casa.png">
</a>
</li>
</ol>


<img src="imagens/aguia.gif">
<p> Joao Pedro Bragança, Turma D, n° 1




 </body>
</html>

Lembra de botar tudo de highlight

h1{
text-align: center;
}
p {
font-family: "Comic Sans MS";
color: red;
}

li{
display: inline;
}
img{
width: 70;
height: 70;
}
#img1{
width: 300;
height: 300;
}
body {
margin: 0 0 5px 0;
padding: 0;
background-color: Highlight;
font: italic 14px/1.5em
Times New Roman, Tahoma, Arial;
}
/*na área do cabeçalho*/#topo{
width: auto;
height: 50px;
background-color: #D3D3D3;
border-top: 1px solid #666;
border-bottom:3px dotted #000000;
color: #87CEEB;
text-align: center;
}
#colCentral {
background-color: ActiveCaption;
color: red;
padding: 2px 10px;
text-align: justify;
border-bottom: 1px solid #666;
}
#conteudoDir {
position:absolute;
width:140px;
top:60px;
right:5px;
color:red;
padding-bottom:20px;
border-bottom:3px double #666;
}
}
#conteudoEsq {
position:absolute;
width:190px;
top:60px;
left:5px;
color:red;
padding-bottom:20px;
border-bottom:3px double #666;
}
}
#colEsq {
background: #000000;
color:#CD5C5C;
padding: 2px 10px;
text-align: justify;
border-bottom: 1px solid #666;
}
}
#colDir {
background-color: #20B2AA;
margin: 0px;
}