23.2.13

HTML5 - parte 5 - Tablas

Les paso un sencillo código para armar una tabla con titulo, encabezado, cuerpo y pie

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Dummy</title>
        <link rel="stylesheet" href="Site.css">
    </head>
    <body>
<h3>Tabla con Titulo, enbezado, cuerpo, pie y colores</h3>

<table id="tabla_colores">
<caption>Venta de almacenes<br>
<details>
<summary>Minoristas</summary>
Precios con IVA
</details>
</caption>
<thead>
<tr>
<th>
Producto
</th>
<th>
Precio
</th>
<th>
Cantidad
</th>
<th>
Total
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Detergente
</td>
<td>
12
</td>
<td>
5
</td>
<td>
60
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
Total
</td>
<td>
-
</td>
<td>
-
</td>
<td>
60
</td>
</tr>
</tfoot>
</table>
</body>
</html>


Codigo
http://chopapp.com/#wcugumc8

Hoja de estilo (Site.css)
#tabla_colores thead th, #tabla_colores tfoot td
{
background-color:blue;
color:White;
}

#tabla_colores tbody td
{
background-color:olive;
}

Codigo
http://chopapp.com/#gbkjg7wy

Si desean que una celda que cubra mas de una columna el codigo es el siguiente
<tfoot>
<tr>
<td colspan="3">
Total
</td>
<td>
89
</td>
</tr>
</tfoot>

Codigo
http://chopapp.com/#uu5g1fa1

Si desean que la celda que cubra mas de un renglon:
<tbody>
<tr>
<td rowspan="3">
Detergente
</td>
<td>
12
</td>
<td>
5
</td>
<td>
60
</td>
</tr>
<tr>
<td>
12
</td>
<td>
5
</td>
<td>
60
</td>
</tr>
<tr>
<td>
12
</td>
<td>
5
</td>
<td>
60
</td>
</tr>
</tbody>

Codigo
http://chopapp.com/#kk77tq1c

16.2.13

HTML5 - parte 4 - Anclaje (solo IE)

Este código que les voy a compartir funciona solamente para IE, no funciona en otros navegadores Se trata de agregar a nuestra página links de tareas o sub links de la página principal y en lugar de navegar por un menu, lo podemos hacer por medio del anclaje en la task bar, nos quedará como un icono mas y podemos acceder al site o bien a los sub links sin el paso previo de abrir el navegador <!DOCTYPE html>

<html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>Dummy Page</title>
    <meta name="keywords" content="HTML5, JavaScript, CSS3, XML"/>
    <meta name="author" content="Gabriel"/>
    <!--meta para aplicacion-->
    <meta name="application-name" content="GDS - HTML5"/>
    <meta name="msapplication-tooltip" content"GDS - HTML5"/>
    <meta name="msapplication-window" content"width=1024;height=768"/>
    <link rel="icon" type="image/x-icon" href="images/favicon.ico"/>
    <!--Tareas-->
    <meta name="msapplication-task" content="name=Blog;action-uri=http://site.blogspot.com;icon-uri=Images/blogger.ico"/>
    <meta name="msapplication-task" content="name=Twitter;action-uri=http://twitter.com;icon-uri=Images/twitter.ico"/>
    <meta name="msapplication-task" content="name=LinkedIn;action-uri=http://www.linkedin.com;icon-uri=Images/linkedin.ico"/>
    <meta name="msapplication-task" content="name=About Me;action-uri=http://about.me;icon-uri=Images/aboutme.ico"/>
    <meta name="msapplication-task" content="name=Facebook;action-uri=http://www.facebook.com;icon-uri=Images/facebook.ico"/>
    </head>
    <body>
        <h3>HTML5 - parte 4</h3>
        <p>Anclamiento con tareas</p>
<small>Solo sirve para IE, no funciona en otros navegadores</small>
    </body>
</html>


Code
http://chopapp.com/#zr7bile6



13.2.13

HTML5 - Parte 3

Acá les dejo como armar diferentes tipos de listas, si ya se algunas vienen de HTML4, pero no está mal ver todas las variantes para armarlas

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dummy page</title>
</head>
<body>
<p>Listas no ordenadas</p>
<ul>
<li>Notepad</li>
<li>Notepad++</li>
<li>Visual Studio</li>
</ul>

<p>Listas ordenadas</p>
<ol>
<li>Head</li>
<li>Body</li>
<li>Footer</li>
</ol>

<p>Listas con definiciones</p>
<dl>
<dt>Bruce Lee</dt>
<dd>Wing Chung</dd>
<dd>Jeet Kune Do</dd>
<dt>Leandro Crivellari</dt>
<dd>SDS Wing Chung</dd>
<dd>Defensa Personal Inteligente</dd>
<dd>Desarrollo Muscular Progresivo</dd>
<dd>Defensa Femenina Inteligente</dd>
<dd>Mental Training</dd>
</dl>

<p>Listas anidadas</p>
<ol>
<li>Leccion A
<ol>
<li>Parte a</li>
<li>Parte b</li>
<li>Parte c</li>
<li>Final</li>
</ol>
</li>
<li>Leccion B</li>
<li>Leccion C</li>
</ol>

</body>
</html> 


Código
http://chopapp.com/#vegwisph

10.2.13

HTML5 - parte 2

Aca les dejo la segunda entrega de HTML5, en la cual vamos a utilizar los tags hgroup, mark, figure y figcaption, he aqui el codigo

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dummy page</title>
</head>
<body>
<hgroup>
<h1>Titulo1</h1>
<h2>Titulo2</h2>
</hgroup>

<p>esto es un parrafo normal <mark>se utilizara mark</mark> antes que <em>emphasized</em></p>

<p>esto es otro parrafo (<small>que contiene un comentario con small</small>)</p>

<figure>
<img src="imagen.jpg" alt="esto es un alt" />
<figcaption>Titulo de la imagen</figcaption>
</figure>

</body>
</html>


ejmeplo del código

4.2.13

HTML5 - parte1

Les dejo un ejemplo simple para ir armando nuestras páginas en HTML5, con sus principales tags
  • nav
  • header
  • article
    • section
  • footer




<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dummy page</title>
</head>
<body>
<nav>
<a href="/">Link1</a>
<a href="/">Link2</a>
<a href="/">Link3</a>
</nav>

<header>
<h1>Titulo 1</h1>
<p>esto es un parrafo</p>
</header>

<article>
<h1>Titulo del articulo</h1>
<section>
<h1>Titulo de la seccion</h1>
<ul>
<li>Lista 1</li>
<li>Lista 2</li>
<li>Lista 3</li>
</ul>
</section>
</article>

<footer>
<small>aca puede ir un ©</small>
</footer>
</body>
</html>



código
http://chopapp.com/#eydgv8fc