miércoles, 27 de abril de 2016

Html5- 16. Etiqueta Code

Ejemplo de etiqueta "code" en html5, con dicha etiqueta marcamos partes del documento que hacen referencia a codigo para que se muestre con otro formato al texto normal y pueda resaltar.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<link rel="stylesheet" href="hojadeestilo.css">
<title>Etiqueta code</title>
</head>
<body>
<header>
<h1>Etiqueta code</h1>
<figure><img src="milogo.jpeg"/></figure>
</header>
<nav>
<ul>
<li><a href="index.html">Inicio</a></li><li><a href="acercade.html">Acerca de</a></li>
</ul>
</nav>
<section>
<article>
<p>En php usamos el comando <code>include("contador.php");</code> para insertar codigo de otro archivo en el documento donde lo incluimos ...</p>
</article>
</section>
<footer>
</footer>

</body>
</html>
Dentro de la etiqueta "code" incluimos el texto de ejemplo para que se muestre con otro formato, distinto al del parrafo.
Espero os sea util. Gracias.



jueves, 21 de abril de 2016

Html5 - 15. Atributo Start y reversed en listas

Expongo en esta entrada el atributo "start" con el que podemos indicar que una lista empieze a numerarse desde el numero indicado con este atributo.
Para ver un ejemplo, retomamos la plantilla web que hemos creado en los apartados anteriores, modificando el "article" principal:

<!DOCTYPE html>
<html>

<head>
<meta charset='utf-8'>
<link rel="stylesheet" href="hojadeestilo.css">
<title>Atributo start / reversed</title>
</head>
<body>
<header>
<h1>Start y reversed en listas</h1>
<figure><img src="milogo.jpeg"/></figure>
</header>

<nav>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="acercade.html">Acerca de</a></li>
</ul>
</nav>
<section>
<article>
<h2>Lista desde el principio</h2>
    <ol>
      <li>Uno</li>
      <li>Dos</li>
      <li>Tres</li>
    </ol>

<h2>Lista desde el numero cinco</h2> 
  <ol start="5">
      <li>Uno</li>
      <li>Dos</li>
      <li>Tres</li>
    </ol>

<h2>Lista numerada al reves</h2> 
  <ol reversed>
      <li>Uno</li>
      <li>Dos</li>
      <li>Tres</li>
    </ol>

</section>

<aside>
<h1>Siguenos en:</h1>
<ul>
<li><a href="facebook.html">Facebook</a>
</li>
<li><a href="twitter.html">Twitter</a></li>
</ul>
</aside>
<footer>

<p>Pagina creada por Ticoticotaa @2016</p>

<ul>
<li><a href="contacto.html">Contacto</a>
</li>
<li><a href="mapaweb.html">Mapa Web</a></li>
</ul>
</footer>
</body>
</html>
Incluyo 2 listas una sin el atributo start y la otra con el valor de start = 5, por lo que esta segunda lista se empieza a numerar desde 5.
El atributo "reversed" hace que la lista se numere al reves, de mayor a menor, puede combinarse con "start".
Esperando sea util, gracias.