HTML5

Es la quinta revisión importante del estándar que mueve internet, HTML y que ha sido impulsado por el aumento de las necesidades de mejorar la funcionalidad y la interactividad de usuarios y aplicaciones. HTML 5 presenta una amplia gama de mejoras en controles para formularios, APIs, multimedia y también en la estructura y la semántica. El trabajo en HTML 5 comenzó en el 2004 y es un esfuerzo conjunto entre el W3C, HTML, WC y el WHATWG. Muchos aportan su participación, como Apple, Mozilla, Opera, Microsoft y un sinnúmero de personas y empresas.

Canvas:

<!DOCTYPE html>
<html>
<head>
<title> Página 1</title>
</head>
<body>
<canvas id="miCanvas">
    Tu navegador no soporta el canvas
</canvas>
<script type="text/javascript">
    var canvas=document.getElementById('miCanvas');
    var ctx=canvas.getContext('2d');
    ctx.fillStyle='#FF0000';
    ctx.fillRect(0,0,80,100);
</script>
</body>
</html>

Algunos ejemplos de uso de las nuevas etiquetas:

<!DOCTYPE html>
<html>
<head>
<title>nuevas etiquetas</title>
</head>
<body>
<form action="." oninput="range_control_value.value = range_control.valueAsNumber">
    <table>
      <tr>
        <th>Nombre:</th>
        <td><input type="text" name="name_control" autofocus required /></td>
      </tr>
      <tr>
        <th>Correo Electrónico:</th>
        <td><input type="email" name="email_control" required /></td>
      </tr>
      <tr>
        <th>URL:</th>
        <td><input type="url" name="url_control" placeholder="Escripe la URL de tu página web personal" /></td>
      </tr>
      <tr>
        <th>Fecha:</th>
        <td><input type="date" name="date_control" /></td>
      </tr>
      <tr>
        <th>Tiempo:</th>
        <td><input type="time" name="time_control" /></td>
      </tr>
      <tr>
        <th>Fecha y hora de nacimiento:</th>
        <td><input type="datetime-local" name="datetime_control" /></td>
      </tr>
      <tr>
        <th>Mes:</th>
        <td><input type="month" name="month_control" /></td>
      </tr>
      <tr>
        <th>Semana:</th>
        <td><input type="week" name="week_control" /></td>
      </tr>
      <tr>
        <th>Número (min -10, max 10):</th>
        <td><input type="number" name="number_control" min="-10" max="10" value="0" /></td>
      </tr>
      <tr>
        <th>Intervalo (min 0, max 10):</th>
        <td>
          <input type="range" name="range_control" min="0" max="10" value="0" />
          <output for="range_control" name="range_control_value" >0</output>
        </td>
      </tr>
      <tr>
        <th>Teléfono:</th>
        <td><input type="tel" name="tel_control" /></td>
      </tr>
      <tr>
        <th>Término de búsqueda:</th>
        <td><input type="search" name="search_control" /></td>
      </tr>
      <tr>
        <th>Color Favorito:</th>
        <td><input type="color" name="color_control" /></td>
      </tr>
      <tr>
        <th colspan="2"><input type="submit" value="Enviar!" /></th>
      </tr>
    </table>
</form>
</body>
</html>

Ejemplo básico de etiquetas semánticas haciendo uso de CSS:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Titulo</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<div id="centrado">
    <header>
      <hgroup>
        <h1>(( TITULO ))</h1>
        <h2>(( DESCRIPCION DE LA WEB ))</h2>
      </hgroup>
      <div id="logotipo">(( LOGOTIPO ))</div>
    </header>
    <id ="contenido">
    <nav>
    (( MENU DE NAVEGACION ))
    </nav>
    <aside>
      ASIDE
    </aside>
    <article>
      <section id="izquierda">
        Sección de la izquierda
      </section>
      <section id="derecha">
        Sección de la derecha
      </section>
    </article>
</div>
<footer>
    <section id="copyright">(( Datos Copyright ))</section>
    <section id="contacto">(( Datos de Contacto ))</section>
    <section id="enlaces">(( MapaWeb, Política, etc. ))</section>
</footer>
</body>
</html>

estilo.css:
header{
width: 100%;
height: 150px;
border-spacing: 5px;
background-color: blue;
}
nav{
width: 100%;
height: 40px;
background-color: yellow;
}
aside{
width: 35%;
height: 400px;
float: right;
display: block;
background-color: green;
}
article{
width: 65%;
height: 400px;
float: left;
display: block;
background-color: purple;
}
section#izquierda{
position: relative;
display: block;
float: right;
width: 46%;
height: 320px;
background-color: gray;
margin-right: 2%;
margin-left: 2%;
margin-top: 5%;
}
section#derecha{
position: relative;
display: block;
float: left;
width: 46%;
height: 320px;
background-color: orange;
margin-left: 2%;
margin-left: 2%;
margin-top: 5%;
}
footer{
width: 100%;
height: 70px;
float: left;
display: block;
background-color: olive;
}

Crear un acordeón con CSS3:

<!DOCTYPE html> <html>
<head>
<title>Crear un acordeon con CSS3 </title>
<link type="text/css" rel="stylesheet" href="estilo.css">
</head>
<body>
<div class="accordion">
    <section id="one">
      <h2><a href="#one">Heading 1</a></h2>
      <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </section>
    <section id="two">
      <h2><a href="#two">Heading 2</a></h2>
      <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </section>
    <section id="three">
    <h2><a href="#three">Heading 3</a></h2>
      <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </section>
    <section id="four">
    <h2><a href="#four">Heading 4</a></h2>
      <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
      </div>
    </section>
    <section id="five">
    <h2><a href="#five">Heading 5</a></h2>
      <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
      </div>
    </section>
</div>
</body>
</html>

estilo.css:
#principal, #secundario, #lateral {
display: block;
}
#principal {
background-color: red;
width: 60%;
float: right;
}
#secundario, #lateral {
width: 20%;
}
body {
padding: 0;
margin: 0;
}
section {
display: block;
}
.accordion {
background-color: #eee;
border: 1px solid #ccc;
width: 600px;
padding: 10px;
margin: 50px auto;
/* Bordes redondeados */
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
/* Sombra del contenedor */
-moz-box-shadow: 0 1px 0 #999;
-webkit-box-shadow: 0 1px 0 #999;
box-shadow: 0 1px 0 #999;
}
.accordion section {
border-bottom: 1px solid #ccc;
margin: 5px;
/* Fondo en degradado de colores */
background-color: #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
background-image: -webkit-linear-gradient(top, #fff, #eee);
background-image: -moz-linear-gradient(top, #fff, #eee);
background-image: -ms-linear-gradient(top, #fff, #eee);
background-image: -o-linear-gradient(top, #fff, #eee);
background-image: linear-gradient(top, #fff, #eee);
/* Bordes redondeados */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.accordion h2, .accordion p {
margin: 0;
}
.accordion p {
padding: 10px;
}
.accordion h2 a {
display: block;
position: relative;
font: 14px/1 'Trebuchet MS', 'Lucida Sans';
padding: 10px;
color: #333;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.accordion h2 a:hover {
background: #fff;
}
.accordion h2 + div {
height: 0;
overflow: hidden;
/* Transiciones */
-moz-transition: height 0.3s ease-in-out;
-webkit-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
transition: height 0.3s ease-in-out;
}
.accordion :target h2 a:after {
content: '';
position: absolute;
right: 10px;
top: 50%;
margin-top: -3px;
border-top: 5px solid #333;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.accordion :target h2 + div {
height: 100px;
}

Ir a Parte I: HTML
Ir a Parte III: WordPress
Ir a Desarrollo Web