<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tecleando Podcast</title>
<style type="text/css">
html{
padding: 0px;margin: 0px;
}
body{
color:#42c920;padding: 0px;margin: 0px;
}
body{
background-color: black;background-image:
}
div{
display: inline;
font-family: arial, sans-serif;
border:2px solid magenta;
margin: 10px;
}
nav {
background-color:#3e3b3a;
}
aside{
background-color:#3e3b3a;
}
footer{
background-color:#3e3b3a;
}
aside{
float: right;
}
</style>
</head>
<body>
<br> <center>
<div>TECLEANDO PODCAST</div>
<h2>Programación (CFGS DAM)</h2>
</center>
<br>
<nav>
<br>
<center>
<b>Programas Noticias Blog RRSS</b>
</center>
<br>
</nav>
<section>
<br>
<center>
<p>Mi nombre es Carles Ramos estudiante de DAM en ies1Xabia.
Me alegra mucho que esten aqui, si, es el lugar correcto.
aqui todas soys bienvenidas.
</p>
<p>En el podcast se trabajará con el temario de programación
del ciclo formativo de grado superior,
Desarrollo de aplicaciones multiplataforma (DAM)
</p>
<p>Explicado de forma sencilla, para que cualquiera que este
interesada, pueda iniciarse en el mundo de la programación.
</center>
</p>
<br>
</section>
<aside>
<b>Último programa Ejercicios Blog Podcast amigos
</b>
</aside>
<footer>
<b>
<br>
<center>
Este proyecto es libre, por lo que podra ser difundido en cualquier medio, sin restricciones.
</center>
<br>
</b>
</footer>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mi web</title>
<style type="text/css">
html{
padding: 0px; margin: 0px;border-image:
}
body{
font-family: Arial, sans-serif;
color:#666666;
padding: 0px;
margin: 0px;
}
h1,h2,h3,h4,h5{
color:#0000cc;
}
h1{
font-size: 50px;
}
header{
background-color: #7cbbaa;
}
header h1{
color:#FFFFFF;
padding: 0px;
margin-left: 0;
padding: 0px;margin: 0px;text-align: center;
}
section h2{
background-color: black;
padding: 0px;margin: 0px;
}
footer {
background-color: black;
color:green;
padding: 0px;margin: 0px
}
</style>
<script type="text/javascript">
alert("Autodestrucción?");
</script>
</head>
<body >
<header>
<h1>Título principal</h1>
<nav>
navegación
</nav>
</header>
<aside>
</aside>
<section>
<h2>Título secundario</h2>
<article>
<h3>articulo 1</h3>
</article>
<article>
<h4>articulo 2</h4>
</article>
<article>
<h5>articulo 3</h5>
<article>
<p><strong>Lorem Ipsum</strong> és un text de farciment usat per la indústria de la tipografia i la impremta.
</article>
</article>
<article>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,<br><br><br> when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</article>
<footer>
<center>
Juan Carlos Ramos Moll, ningun derecho reservado.
</center>
</footer>
</section>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CAJAS</title>
<style type="text/css">
.class1{
opacity: 0.9;
background-color: red;width: 120px;height: 120px;
border:ridge;position: relative:100%;
}
.class2{
margin-top:20px; opacity: 0.9;
background-color: magenta;width: 120px;height: 120px;
border: double;
}
.class3{
margin-top:20px;opacity: 0.9;
background-color: green;width: 120px;height: 120px;
border: solid;
}
header{
height: 120px; position: relative;
}
aside{
height: 80%;width: 20%;position: absolute;
}
section{
width: 800px;height: 800px; position: absolute;left:20%;top:20%;
}
</style>
</head>
<body>
<header>
<center>ESTA ES LA SUPER WEB</center>
</header>
<aside>
aside
</aside>
<section>
section
<p>
<center> El Grupo PRISA (Promotora de Informaciones S. A.) es una compañía multimedia de comunicación española. Es el mayor grupo de medios de comunicación de contenidos informativos, culturales y educativos en España e Hispanoamérica, con presencia en radio, televisión, prensa escrita y editoriales. </center>
</p>
</section>
<div class="class1" >
box1
</div>
<div class="class2">
box 2
</div>
<div class="class3">
box3
</div>
</body>
</html><!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title></title>
<style type="text/css">
div,p,img,span,strong{
border:2px solid green;
padding: 5px;
margin:5px;
height: 80px;
width: 300px;
display: inline;}
}
</style>
</head>
<body>
<div>
Esto es un div.
</div>
<p>
Esto es un párrafo.
</p>
<img src="https://images8.alphacoders.com/831/831314.png" width="240">
<span>
Esto es un span.
</span>
<strong>Strong</strong>
<p>Hola</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
li{display: inline;
border:2px solid blue;
background-color: green;
padding: 10px;
font color: white;
}
</style>
</head>
<body>
<ul>
<center>
<li>inicio</li>
<li>Carrito</li>
<li>Contacto</li>
<li>Login</li>
</center>
</ul>
<img src="https://images8.alphacoders.com/831/831314.png" width="240">
<img src="https://hdqwalls.com/download/goku-in-dragon-ball-super-anime-4k-rnc-1920x1080.jpg"width="240">
<img src="https://hdqwalls.com/download/goku-in-dragon-ball-super-anime-4k-rnc-1920x1080.jpg"width="240">
<img src="https://hdqwalls.com/download/goku-in-dragon-ball-super-anime-4k-rnc-1920x1080.jpg"width="240">
</body>
</html><!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>PRÁCTICA UNO</title>
<style type="text/css">
#container{
width: 800px;
height: 600px;
margin: 0px auto;
background-color: #ccc;
}
header{
height: 80px;
}
nav{
height: 30px;
margin: 10px 10px;
}
aside{
display: inline-block;
height: 470px;
width: 200px;
}
section{
margin: 110px 200px;
display: inline;
}
#fotobus{
width: 25%;
height: 100%;
}
#titulo{
width: 50%;
height: 100%;
}
</style>
</head>
<body>
<div id="container">
<header>
<div class="fotobus">
sera la foto
</div>
<div class="titulo">
SERA EL TITULO
</div>
<div class="fotobus">
Sera el buscador.
</div>
</header>
<nav>
nav
</nav>
<aside></aside>
<section>
section
</section>
<aside></aside>
<footer></footer>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.wrapper div{
text-align: center;
font-size: 0px;
}
.wrapper div{
border: 1px solid #AAA;
width: 18%;
height: 120px;
display:inline-block;
font-size: 16px;
}
</style>
</head>
<body>
<div class="wrapper">
<div>PRUEBA</div>
<div>PRUEBA</div>
<div>PRUEBA</div>
<div>PRUEBA</div>
<div>PRUEBA</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title></title>
<style type="text/css">
.container{
height: 800px;
width: 800px;
background-color: #ccc;
margin: 0px auto;
position: relative;
}
#foto{
width: 24%;
background-color: red;
display: inline-block;
height: 100%
}
#titulo{
width: 48%;
background-color: grey;
display: inline-block;
height: 100%;
border:1px solid;
text-align: center;
}
#topic{
width: 26.5%;
background-color: red;
display: inline-block;
height:60%;
border:1px solid;
position: absolute;
margin-left: 2px;
}
#busqueda{
background-color: green;
display: inline-block;
width: 26.5%;
height: 35%;
border:1px solid;
margin-left: 2px;
position: absolute;
top:65%;
}
header{
height: 10%;
position: relative;
}
nav{
margin-top: 5px;
height: 5%;
border:1px solid;
background-color: yellow;
}
section{
width: 100%;
height: 82%;
margin-top: 5px;
position: relative;
}
footer{
display: inline-block;
width: 46%;
height: 20%;
margin-left: 215px;
margin-top: 2px;
bottom: 10px;
position: absolute;
border:1px solid;
}
#izquierda{
display: inline-block;
width:26%;
height: 100%;
border:1px solid;
background-color: green;
}
#seccion{
margin-left: 25%;
display: inline-block;
width: 46%;
height: 75%;
margin: 0px auto;
border:1px solid;
background-color: blue;
text-align: center;
}
#derecha{
display: inline-block;
width:26%;
height: 75%;
border:1px solid;
margin: 0px auto;
background-color: green;
}
#links{
background-color: pink;
margin-left: 590px;
width:26%;
height: 24.4%;
border:1px solid;
position: absolute;
bottom: -2px;
}
#footer{
display: inline-block;
width: 100%;
height: 100%;
background-color: magenta;
}
</style>
</head>
<body>
<div class="container">
<header>
<div id=foto>
Foto
</div>
<div id=titulo>
titulo
</div>
<div id=topic>
topic
</div>
<div id=busqueda>
buscador
</div>
</header>
<nav>
<div id=navegacion>
nav
</nav>
<section>
<div id=izquierda>
aside izquierda
</div>
<div id=seccion>
section
</div>
<div id=derecha>
aside derecha.
</div>
<div id=links>
links
</div>
</section>
<footer>
<div id=footer>
footer.
</div>
</footer>
</div>
</body>
</html><!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title></title>
<style type="text/css">
.container{
height: 800px;
width: 800px;
background-color: #ccc;
margin: 0px auto;
position: relative;
}
#foto{
width: 24%;
background-color: red;
display: inline-block;
height: 100%;
position: absolute;
}
#titulo{
width: 48%;
background-color: grey;
display: inline-block;
height: 100%;
border:1px solid;
margin-left: 25%;
text-align: center;
position: absolute;
}
#topic{
width: 26%;
background-color: red;
display: inline-block;
height:60%;
border:1px solid;
margin-left: 73.5%;
position: absolute;
}
#busqueda{
background-color: green;
display: inline-block;
width: 26%;
height: 35%;
border:1px solid;
margin-left: 73.5%;
position: absolute;
top:65%;
}
header{
height: 10%;
position: relative;
}
nav{
margin-top: 5px;
height: 5%;
border:1px solid;
background-color: yellow;
}
section{
width: 100%;
height: 82%;
margin-top: 5px;
position: relative;
}
footer{
display: inline-block;
width: 46%;
height: 20%;
margin-left: 215px;
margin-top: 2px;
bottom: 10px;
position: absolute;
border:1px solid;
}
#izquierda{
display: inline-block;
width:26%;
height: 100%;
border:1px solid;
background-color: green;
position: absolute;
}
#seccion{
margin-left: 26.9%;
display: inline-block;
width: 46%;
height: 75%;
border:1px solid;
background-color: blue;
text-align: center;
position: absolute;
}
#derecha{
display: inline-block;
width:26%;
height: 75%;
border:1px solid;
margin-left: 73.5%;
background-color: green;
position: absolute;
}
#links{
background-color: pink;
margin-left: 73.5%;
width:26%;
height: 24.4%;
border:1px solid;
position: absolute;
bottom: -2px;
}
#footer{
text-align: center;
font-size: 10px;
display: inline-block;
width: 100%;
height: 100%;
background-color: magenta;
position: absolute;
}
</style>
</head>
<body>
<div class="container">
<header>
<div id=foto>
foto
</div>
<div id=titulo>
titulo
</div>
<div id=topic>
topic
</div>
<div id=busqueda>
buscador
</div>
</header>
<nav>
<div id=navegacion>
nav
</nav>
<section>
<div id=izquierda>
aside izquierda
</div>
<div id=seccion>
section
</div>
<div id=derecha>
aside derecha.
</div>
<div id=links>
links
</div>
</section>
<footer>
<div id=footer>
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
</div>
</footer>
</div>
</body>
</html><!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title></title>
<style type="text/css">
.container{
background-image: url(file:///home/carles/Descargas/matrix.png);
height: 800px;
width: 800px;
/*background-color: #ccc;*/
margin: 0px auto;
position: relative;
}
#foto{
width: 24%;
display: inline-block;
height: 100%;
position: absolute;
}
#titulo{
width: 48%;
display: inline-block;
height: 100%;
margin-left: 25%;
text-align: center;
position: absolute;
font-family: monospace;
font-size: 311%;
color: white;
}
#topic{
width: 26%;
display: inline-block;
height:60%;
border:1px solid green;
margin-left: 73.5%;
position: absolute;
color: white;
}
#busqueda{
display: inline-block;
width: 26%;
height: 35%;
border:1px solid green;
margin-left: 73.5%;
position: absolute;
top:65%;
color: white;
}
header{
height: 10%;
position: relative;
text-shadow: 1px 2px green;
}
nav{
margin-top: 5px;
height: 5%;
border:1px solid green;
color: white;
text-shadow: 1px 2px green;
}
section{
width: 100%;
height: 82%;
margin-top: 5px;
position: relative;
}
footer{
display: inline-block;
width: 46%;
height: 20%;
margin-left: 215px;
margin-top: 2px;
bottom: 10px;
position: absolute;
border:1px solid;
}
#izquierda{
display: inline-block;
width:26%;
height: 100%;
border:1px solid green;
position: absolute;
color: white;
text-shadow: 1px 2px green;
}
#seccion{
color: white;
margin-left: 26.9%;
display: inline-block;
width: 46%;
height: 75%;
border:1px solid green;
text-align: center;
position: absolute;
}
#derecha{
display: inline-block;
width:26%;
height: 75%;
border:1px solid green;
margin-left: 73.5%;
position: absolute;
color: white;
text-shadow: 1px 2px green;
}
#links{
margin-left: 73.5%;
width:26%;
height: 24.4%;
border:1px solid green;
position: absolute;
bottom: -2px;
color: white;
}
#footer{
text-align: center;
font-size: 10px;
display: inline-block;
width: 100%;
height: 100%;
position: absolute;
color: white;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="container">
<header>
<div id=foto>
</div>
<div id=titulo>
Tecleando Podcast
</div>
<div id=topic>
topic
</div>
<div id=busqueda>
<iframe src="https://duckduckgo.com/search.html?width=1000&prefill=Search DuckDuckGo&bgcolor=green"
style="overflow:hidden;margin-left:35%;padding:0;width:1058px;height:30px;" frameborder="0"></iframe>
</div>
</header>
<nav>
<div id=navegacion>
nav
</nav>
<section>
<div id=izquierda>
aside izquierda
</div>
<div id=seccion>
section
</div>
<div id=derecha>
aside derecha.
</div>
<div id=links>
links
</div>
</section>
<footer>
<div id=footer>
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
</div>
</footer>
</div>
</body>
</html><!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>clearfix</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
aside, article, section, header, footer, nav {
display: block;
}
html, body {
margin: 0;
padding: 0;
}
body {
width: 600px;
margin: 0 auto;
font: 90% Georgia, "Times New Roman", Times, serif;
}
div {
width: 50px;
height: 50px;
padding: 50px;
margin:25px;
}
section {
background: rgb(178,155,107);
border: 1px solid black;
padding: 25px;
}
.one {
background: rgb(207, 255, 245);
float: left;
box-shadow: 20px 20px 20px;
}
.two {
background: rgb(101,209,255);
float: right;
}
.three {
background: rgb(80, 256, 20);
float: left;
-webkit-box-shadow: 0px 0px 30px #ffffff;
translate(0px,0px) scale(1);
}
.clearfix:before, .clearfix:after{
content:"";
display:table;
clear: both;
}
.clearfix:after:{
clear:both;
}
</style>
</head>
<body>
<section class="clearfix">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
</section>
</body>
</html><!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>The float property</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
aside, article, section, header, footer, nav {
display: block;
}
html, body {
margin: 0;
padding: 0;
}
html {
background: #ccc;
}
body {
width: 600px;
background: #fff;
margin: 2em auto 2em;
font: 100% Arial, Helvetica, sans-serif;
}
div {
margin-bottom: 1em;
width: 150px;
height: 50px;
border: 1px solid #000;
padding: 25px;
}
/*add styles here*/
.element1 {
background: rgb(211, 206, 61);
float:right;
width: 50px;
height:300px;
}
.element2 {
background: rgb(85, 66, 54);
float:left;
width: 50px;
height: 350px;
}
.element3 {
background: rgb(247,120,37);
clear:both;
}
.element4 {
background: rgb(26, 78, 175);
}
.element5 {
background: rgb(195, 156, 61);
}
.element6 {
background: rgb(225,68,37);
}
</style>
</head>
<body>
<p>The clear property has five possible values: left | right | both | inherit | none<p>
<p>By clearing an element, you can ensure the element does not appear to the left or the right of any floated element. This has the result of turning a float "off" and restoring normal document flow to the remaining elements.</p>
<div class="element1">one</div>
<div class="element2">two</div>
<div class="element3">three</div>
<div class="element4">four</div>
<div class="element5">five</div>
<div class="element6">six</div>
</body>
</html><!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>The float property</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
aside, article, section, header, footer, nav {
display: block;
}
html, body {
margin: 0;
padding: 0;
}
html {
background: #ccc;
}
body {
width: 600px;
background: #fff;
margin: 2em auto 2em;
}
div {
margin-bottom: 1em;
width: 100px;
height: 100px;
}
/*add styles here*/
.element1 {
background: rgb(211, 206, 61);
float:left;
margin-right: 1em;
width: 200px;
}
.element2 {
background: rgb(85, 66, 54);
float:left;
margin-right: 1em;
width: 200px;
}
.element3 {
background: rgb(247,120,37);
float:left;
margin-right: 1em;
width: 200px;
}
</style>
</head>
<body>
<p>La propiedad float tiene 4 valores posibles: left | right | inherit | none<p>
<p>Floating an element to the left or to the right will cause it to move to the left-most or right-most edge of its parent container. Floating removes the element from normal flow, and will cause elements below it to shift accordingly.</p>
<div class="element1"></div>
<div class="element2"></div>
<div class="element3"></div>
</body>
</html><!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>The float property</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
aside, article, section, header, footer, nav {
display: block;
}
html, body {
margin: 0;
padding: 0;
}
html {
background: #ccc;
}
body {
width: 600px;
background: #fff;
margin: 2em auto 2em;
}
div {
margin-bottom: 1em;
width: 100px;
height: 100px;
}
/*add styles here*/
.element1 {
background: rgb(211, 206, 61);
float:left;
margin-right: 1em;
width: 200px;
}
.element2 {
background: rgb(85, 66, 54);
float:left;
margin-right: 1em;
width: 200px;
}
.element3 {
background: rgb(247,120,37);
float:left;
margin-right: 1em;
width: 200px;
}
</style>
</head>
<body>
<p>La propiedad float tiene 4 valores posibles: left | right | inherit | none<p>
<p>Floating an element to the left or to the right will cause it to move to the left-most or right-most edge of its parent container. Floating removes the element from normal flow, and will cause elements below it to shift accordingly.</p>
<div class="element1"></div>
<div class="element2"></div>
<div class="element3"></div>
</body>
</html><!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>2 column layout</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
aside, article, section, header, footer, nav {
display: block;
}
html, body {
margin: 0;
padding: 0;
}
html {
background: rgb(123, 121, 143);
}
body {
width: 960px;
background: #fff;
margin: 0 auto 2em;
font: 100% Georgia, "Times New Roman", Times, serif;
}
header {
background: rgb(76, 67, 65);
margin-bottom: 20px;
}
header h1 {
font: normal 2em Arial, Helvetica, sans-serif;
color: white;
text-align: center;
line-height: 4em;
text-transform: uppercase;
letter-spacing:.1em;
margin: 0;
}
.col1 {
background: rgb(237, 228, 214);
float: left;
height: 400px;
width: 600px;
padding: 20px;
margin-right: 20px;
}
.col2 {
background: rgb(173, 169, 130);
height: 500px;
float: left;
padding: 20px;
width: 260px;
}
footer {
background: rgb(100, 98, 102);
line-height: 3em;
font-size: .6em;
color: white;
padding: 0 2em;
clear: both;
}
</style>
</head>
<body>
<header>
<h1>Cool company header</h1>
</header>
<section class="col1">
This is where the really important stuff goes.
</section>
<aside class="col2">
This is where the related content goes.
</aside>
<footer>Copyright stuff....</footer>
</body>
</html><!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>2 column layout</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
aside, article, section, header, footer, nav {
display: block;
}
html, body {
margin: 0;
padding: 0;
}
html {
background: rgb(123, 121, 143);
}
body {
width: 960px;
background: #fff;
margin: 0 auto 2em;
font: 100% Georgia, "Times New Roman", Times, serif;
}
header {
background: rgb(76, 67, 65);
margin-bottom: 20px;
}
header h1 {
font: normal 2em Arial, Helvetica, sans-serif;
color: white;
text-align: center;
line-height: 4em;
text-transform: uppercase;
letter-spacing:.1em;
margin: 0;
}
.col1 {
background: rgb(237, 228, 214);
height: 500px;
float:left;
width: 600px;
padding: 20px;
}
.col2 {
background: rgb(173, 169, 130);
height: 500px;
float: right;
padding: 20px;
width: 260px;
}
footer {
background: rgb(100, 98, 102);
line-height: 3em;
font-size: .6em;
color: white;
padding: 0 2em;
clear: both;
}
</style>
</head>
<body>
<header>
<h1>Cool company header</h1>
</header>
<section class="col1">
This is where the really important stuff goes.
</section>
<aside class="col2">
This is where the related content goes.
</aside>
<footer>Copyright stuff....</footer>
</body>
</html><!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>3 column layout</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
aside, article, section, header, footer, nav {
display: block;
}
html, body {
margin: 0;
padding: 0;
}
html {
background: rgb(123, 121, 143);
}
body {
width: 960px;
background: #fff;
margin: 0 auto 2em;
font: 100% Georgia, "Times New Roman", Times, serif;
}
header {
background: rgb(76, 67, 65);
margin-bottom: 20px;
}
header h1 {
font: normal 2em Arial, Helvetica, sans-serif;
color: white;
text-align: center;
line-height: 4em;
text-transform: uppercase;
letter-spacing:.1em;
margin: 0;
}
.col1 {
background: rgb(237, 228, 214);
height: 500px;
float: left;
padding: 20px;
width: 266.6px;
margin-right: 20px;
}
.col2 {
background: rgb(219,126,64);
height: 500px;
float: left;
padding: 20px;
width: 266.6px;
margin-right: 20px;
}
.col3 {
background: rgb(219,126,64);
height: 500px;
float: right;
padding: 20px;
width: 266.6px;
}
footer {
background: rgb(100, 98, 102);
line-height: 3em;
font-size: .6em;
color: white;
padding: 0 2em;
clear: both;
}
</style>
</head>
<body>
<header>
<h1>Cool company header</h1>
</header>
<section class="col1">
This is where the really important stuff goes.
</section>
<section class="col2">
This is where equally important stuff goes.
</section>
<aside class="col3">
This is where the related content goes.
</aside>
<footer>Copyright stuff....</footer>
</body>
</html><!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>3 column layout</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
aside, article, section, header, footer, nav {
display: block;
}
html, body {
margin: 0;
padding: 0;
}
html {
background: rgb(123, 121, 143);
}
body {
width: 960px;
background: #fff;
margin: 0 auto 2em;
font: 100% Georgia, "Times New Roman", Times, serif;
}
header {
background: rgb(76, 67, 65);
margin-bottom: 20px;
}
header h1 {
font: normal 2em Arial, Helvetica, sans-serif;
color: white;
text-align: center;
line-height: 4em;
text-transform: uppercase;
letter-spacing:.1em;
margin: 0;
}
.col1 {
background: rgb(237, 228, 214);
height: 500px;
float: left;
padding: 20px;
width: 266.6px;
}
.col2 {
background: rgb(219,126,64);
height: 500px;
float: right;
padding: 20px;
width:266.6px;
}
.col3 {
background: rgb(173, 169, 130);
height: 500px;
width: 266.6px;
padding: 20px;
margin: 0 auto;
}
footer {
background: rgb(100, 98, 102);
line-height: 3em;
font-size: .6em;
color: white;
padding: 0 2em;
clear: both;
}
</style>
</head>
<body>
<header>
<h1>Cool company header</h1>
</header>
<section class="col1">
This is where the really important stuff goes.
</section>
<section class="col2">
I have to be the far right column.
</section>
<section class="col3">
I have to be the middle column.
</section>
<footer>Copyright stuff....</footer>
</body>
</html><!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>3 column layout</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
aside, article, section, header, footer, nav {
display: block;
}
html, body {
margin: 0;
padding: 0;
}
html {
background: rgb(123, 121, 143);
}
body {
width: 960px;
background: #fff;
margin: 0 auto 2em;
font: 100% Georgia, "Times New Roman", Times, serif;
}
header {
background: rgb(76, 67, 65);
margin-bottom: 20px;
}
header h1 {
font: normal 2em Arial, Helvetica, sans-serif;
color: white;
text-align: center;
line-height: 4em;
text-transform: uppercase;
letter-spacing:.1em;
margin: 0;
}
article{
float: left;
width: 634px;
}
.col1{
background: rgb(111, 234,255);
float: left;
padding: 20px;
width: 266px;
height: 500px;
}
.col2{
background: rgb(234,112,234);
float: right;
padding: 20px;
width: 266px;
height: 500px;
}
aside{
float:right;
width: 266px;
height: 500px;
padding: 20px;
background: rgb(232,234,123);
}
footer {
background: rgb(100, 98, 102);
line-height: 3em;
font-size: .6em;
color: white;
padding: 0 2em;
clear: both;
}
</style>
</head>
<body>
<header>
<h1>Cool company header</h1>
</header>
<article>
<section class="col1">
This is where the really important stuff goes.
</section>
<section class="col2">
This is equally important stuff.
</section>
</article>
<aside>
I am related content.
</aside><!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>Las modificaciones de estilo se guardan en un archivo diferente, se debe invocar al principio del documento HTML en el, bloque así conseguimos que la carga de estilos se realice al principio, evitando la sensación que la página no se carga al momento. ej.
<link rel="stylesheet" type="text/css" href="index.css" />Se añade directamente a la cabecera HTML del documento, se puede utilizar pero es recomendable la forma anterior, ya que evita la sensación de carga lenta. ej.
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
<style type="text/css">
div {
background:#FFFFFF;
}
</style>
</head>Se aplica directamente en el arxivo HTML, pero en la etiqueta que nos interese, pasa como en la forma anterior, se debe se debe utilizar solo en casos excepcionales, siendo recomendable el externo. ej.
<p>¡Hola <span style="color:#FF0000">amigo lector</span>!</p>ej.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>
RECETAS DE COCINA
</h1>
<UL>
<li>
Pollo al curry:
</li>
<li>
200g. de pollo
</li>
<li>
100g. de mantequilla
</li>
<li>
500g. de arroz
</li>
<li>
150g. de curri
</li>
<li>
1,5l. de agua salada
</li>
</UL>
</body>
</html>Se puede incluir de tres formas diferentes: #JavaScript interno: Se encierra entre etiquetas <script>, se puede incluir en cualquier zona de la página, aunque es recomendable definirlo dentro de la cabecera del documento. Para que el documento sea valido, se debe incluir el atributo "type" el principal inconveniente es, que si se quiere hacer una modificación en el bloque de código es necesario modificar todas las páginas. ej.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de código JavaScript en el propio documento</title>
<script type="text/javascript">
alert("Un mensaje de prueba");
</script>
</head>
<body>
<p>Un párrafo de texto.</p>
</body>
</html>Las instrucciones se guardan en un documento externo, enlazandola mediante la etiqueta <script>, se pueden crear tantos como sean necesarios y se pueden enlazar tantos como se deseen. Ademas de , tambien es necesario definir el atributo "src", correspondiente al arxivo JavaScript que se quiere enlazar. La principal ventaja es, que se consigu una codigo HTML mas limpio, y que cualquier modificacion del JavaEscript, se efectuara en todas las paginas enlazadas. ej.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de código JavaScript en el propio documento</title>
<script type="text/javascript" src="/js/codigo.js"></script>
</head>
<body>
<p>Un párrafo de texto.</p>
</body>
</html>Poco recomendable, ya que ensucia el código HTML, se utiliza en casos muy aislados. ej.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de código JavaScript en el propio documento</title>
</head>
<body>
<p onclick="alert('Un mensaje de prueba')">Un párrafo de texto.</p>
</body>
</html>
El selector ID, hace referencia a un solo elemento (identdad), tiene mas peso que el selector CLASS, lo que quiere decir que una modificación en ID modificara la modificación hecha con CLASS. ej.
<div id="unico">Charmander</div>#unico {
background: orange;
margin: 1rem;
padding: 1rem;
text-align: center;
color: yellow;
font-size: 2rem;El selector CLASS, hace referencia a varios elementos, se pueden incluir los que se quieran, y modificara los atributos de todos los elementos que esten dentro del CLASS. En el caso de ID, tambien se puede enlazer varios elementos, pero por definición se utiliza en un solo elemento. ej.
<div class="pokemon">Squirtle</div>
.pokemon {
background: #02B1FC;
margin: 1rem;
padding: 1rem;
text-align: center;
color: white;
font-size: 2rem;
} <a href="pagina.html" target="_blank">Título del enlace</a>.
Es una palabra clave que se añade a los selectores, y que especifica un estado especial del elemento seleccionado. Permiten aplicar un estilo a un elemento, no solo en relación con el contenido del arbol, sino tambien en relación a factores externos como el historial de navegación (:visited), el estado de su contenido (:chacked) o la posición del ratón (:hover), que permite saber si el raton esta o no encima de un elemento. En resumen, el estilo se aplica solo cuando se realiza la acción marcada por la pseudoclase. ej.
div:hover {
background-color: #F89B4D;
}
El modelo de cajas es el comportamiento de CSS que hace que todos los elementos de las páginas se representen mediante cajas rectangulares. Las cajas se crean automaticamente al definir cada elemento HTML. Padding: Espacio libre opcional existente entre el contenido y el borde. Border: línea que encierra completamente el contenido y su relleno. Margin: separación opcional existente entre la caja y el resto de cajas adyacentes.
Permiten hacer cambios de estilo solo a los elementos seleccionados por el selector, modificandolos de forma aislada del resto de elementos. Es una función muy utilizada, que permite diferenciar los distintos elementos con un estilo propio para cada uno de ellos. ejs.
/* Todos los elementos <a> */
a {
color: red;
}
span {
background-color: skyblue;
}<span>Aquí hay un elemento 'span' con algo de texto.</span>
<p>Aquí hay un elemento 'p' con algo de texto.</p>
<span>Aquí hay un elemento 'span' con más texto.</span>
p a { color: red;:
Afecta a todos los elementos "a" que esten dentro de "p".
p > a { color: red; }:
Afecta a todos los elementos de "a" que sean hijos directos de "p".
h1 + h2 { color: red }:
Afecta solo al primer elemento "h2" despues de "h1".
a[class] { color: blue; }:
Afecta a todos los elementos de "class".
a[class="externo"] { color: blue; }:
Afecta a todos los elementos de "class" que contengan tambien el atributo "=externo".
a[href="http://www.ejemplo.com"] { color: blue; }:
Afecta al elemento "a" que enlaza a una página web externa.