domingo, 20 de outubro de 2013
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>
<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;
}
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>
<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>
<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;
}
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;
}
informacoes importantes
é só vc saber posicionar os elementos q vc colocou na sua pagina da maneira q quiser. dica: use o atributo position: relative(relativo à posição do elemento anterior)/absolute(relativo ao início da pagina, ou seja, no topo e a esquerda)/fixed(fixo na posição escolida em relação à tela independente se houver scrolling ou n), em seguida use os atributos top e/ou left. Eles servem para definir onde o elemento irá ficar
img {
border: medium solid #000;
}
border: medium solid #000;
}
border-width: medium;
border-color: #000000;
border-style: solid;
border-color: #000000;
border-style: solid;
centralizar: display: block; margin-left: auto; margin-right: auto;
img {border: 1px solid #333;
domingo, 14 de abril de 2013
Conhecimento nunca é demais, conheça mais um pouco
<html>
<head>
<title>
Homem Aranha
</title>
<link rel="stylesheet" type="text/css" href="../estilo.css" />
</head>
<body>
<h1> Homem Aranha</h1>
</br></br></br>
<p>
<div align="center"><img src="../imagens/homem aranha.jpg"></div>
</br></br>
<p>Peter Parker é um jovem, que está terminando o seu colegial e também tem um trabalho muito importante como Homem Aranha. Ele também tem um trabalho como Peter.
: Tirar fotos do Homem Aranha. Ele tem de botar dinheiro em casa, pois Ben Parker que o sustentava e Tia May foi assassinado. Ele também é apaixonado por Mary Jane Watson (a partir de certos gibis), porém não podem ficar juntos, pois ela corre grande perigo. O diferencial do nosso amigo de sempre à os outros heróis é que ele "Humano". Ele tem problemas como vários outros. Uma característica até, razoavelmente, frequente nos super heróis da <u><font color="#FF000"> Marvel</font></u>.Ele pode escalar paredes, e devido a suas teias que não são, digamos, poderes "natos" dele, ele pode ir pulando por aí e ele tem um ótimo reflexo, quase uma certa premonição, o "spider sense". Além disso, ele tem uma força muito grande.</p>
</br>
<ol>
<li><a href="homemaranha.html">Homem Aranha
<img id="heroi" src="../imagens/homem aranha.jpg"></a>
<a href="../index.html">
</li>
<li>
Home
<img id="heroi" src="../imagens/casa.gif">
</a>
</li>
<a href="Wolverine.html">
Wolverine
<img id="heroi" src="../imagens/wolverine.png">
</a>
</li>
</ol>
Conheça um pouco mais
<html>
<head>
<title>
Wolverine
</title>
<link rel="stylesheet" type="text/css" href="../estilo.css" />
</head>
<body>
<h1> Wolverine</h1>
</br></br></br>
<div align="center"><img src="../imagens/wolverine.png"></div>
<p>Wolverine é um "herói" anti-herói. Ele pode estar dentro da classe dos "bonszinhos", porém de bonzinho ele não tem nada. Agressivo, instantâneo, Wolverine chega a ser até um pouco revanchista. Ele tem garras, que depois de uma experiência, extremamente dolorosa, se tornou ferro, junto com grande parte do seu corpo. Ele é forte, musculoso e etc. Tem uma barba e um cabelo bem legal.</p>
</br></br>
<ol>
<li>
<a href="homemaranha.html">Homem Aranha
<img id="heroi" src="../imagens/homem aranha.jpg"></a>
</li>
<li>
<a href="../index.html">
Home
<img id="heroi" src="../imagens/casa.gif">
</a>
</li>
<li>
<a href="Wolverine.html">
Wolverine
<img id="heroi" src="../imagens/wolverine.png">
</a>
</li>
</ol>
Bem vindods ao site!
<html>
<head>
<title>Meu documento</title>
<link rel="stylesheet" type="text/css" href="estilo.css" />
</head>
<body>
<h1>Meus Super Heróis</h1>
<br/><br/><br/><br/>
<div align="center"><img src="imagens/aguia.gif"><p> João Pedro Bragança T: D, n° 1</div>
</br></br></br></br>
<ol>
<li>
<a href="conteudos/homemaranha.html">Homem Aranha
<img id="heroi" src="imagens/homem aranha.jpg"></a>
</li>
<li>
<a href="conteudos/Wolverine.html">
Wolverine
<img id="heroi" src="imagens/wolverine.png">
</a>
</li>
<li>
<a href="index.html">
Home
<img id="heroi" src="imagens/casa.gif">
</li>
</ol>
</body>
</html>
Estiloso
body {
background-color: #00B2EE
}
h1 {
background-color: #BBFFFF;
text-align:center;
}
img { width:10%;
height:20%;
}
}
p { color: #000000;
font-size:15;
font-family: arial;
}
#heroi {
width:5%;
height:10%;
}
{ a:link
color: green;
}
a:avisted {
color:red
}
a:hover {
text-transform: uppercase
font-weight: bold;
color: red;
background-color:yellow;
}
li {
display: inline;
}
Assinar:
Postagens (Atom)