Blog del Torturo


Si desean ver una lista completa de post lo pueden hacer en: esta lista.

Ejemplo de HTML5

1-04-2013 Por: Torturo

Ejemplo de HTML5

durante un tiempo he explicado un poco de HTML5 pero, no me he puesto con algún ejemplo de lo que se podría hacer. bien, como escribí en posts anteriores, HTML5 no es altamente compatible con el 100% de los navegadores web… (IE6, IE7, IE8, IE9 xD)
pero bueno, no me enfocaré en esto y haré e cuenta que para este ejemplo se usará algo como firefox o chrome que son los más habituales:
para comenzar tenemos como la primera linea en lo que fue HTML4 algo que era terrorifico de memorizar que pongo a continuación:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

todo esto se ha podido cambiar por algo que en algunas personas podría resultar más complicado xD:
<DOCTYPE html>

en donde no impoeraría si es con mayusculas o minúsculas…

a cotinuación seguiremos con el normal y conocido
<html>
<head>
en donde aquí antes se ponia para la codificación de caracteres el siguiente código:
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
pero en donde finalmente tenemos algo que es muchísimo más fácil que es:
<meta charset=”utf-8″>
en donde espero que por lógia o pequeño sentido común se pueda notar que es mucho más fácil…

<link rel=”stylesheet” href=”estilo.css” type=”text/css” />
en donde ahora lo podemos cambiar por
<link rel=”stylesheet” href=”estilo.css”>
después de esto nos podemos poner un titulo a la página con:
<title></title>
por igual podemos agregar JavaScript con el código de:
<script>
function clickeo()
{
document.write(“di un click”);
}
</script>
y bien… ahora empezemos con la parte del body que es:
<body>
seguidamente comenzaremos con la cabecera de nuestro contenido:
<header> (si se fijan eso es muy diferente a la parte escrita anteriormente)
<nav> en esta parte irían los enlaces (o links)
<a onclick=”clickeo()” href=”javascript:;”>Puchear aquí</a>
</nav> y aquí terminamos de usar el nac porque en este ejemplo sólo hay 1 enlace
para esto, no olviden que aún no hemos cerrado el <header>
</header> por lo que lo cerramos pues ya no lo ocuparemos más

hara ahora ya tenemos hecho la cabecera y lo que se ocupa para mostrar todo y ya vimos    lo que nav puede ser para nosotros…
ahora

lo que a continuación sigue es algo que son muy similares a un “div” como son
aside
section
article
footer
como se puede notar, igualmente se puede usar como un tipo “div” en un <header> pero eso ya lo habíamos mostrado antes, y sólo nos falta terminar:

</body>
<html>
de igualmenera, cabe mencionar que, como aún no es al 100% compatible con los navegadores web, se ha de utilizar el modernizr para poder visualizarlo al 100%
pero si a ustedes no les importa quien es el que lo vea, pueden hacer caso omiso de esto último que mencioné…
la página web de modernizr es:
Modernizr
y pueden revizar el ejemplo aquí:

ejemplo


Dejar Comentario

Leave a Reply

Your email address will not be published. Required fields are marked *

captcha

Please enter the CAPTCHA text