Publicado el Deja un comentario

Html5 – 10. Mark

En esta entrada introduzco la etiqueta “mark”, nos servira para resaltar textos.
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>Mark</title>
</head>
<body>
<header>
<h1>Etiqueta mark</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>
<hgroup>
<h1>Resaltado con etiqueta MARK</h1>
<h2>practica</h2>
</hgroup>
<p>Bienvenidos a mi <mark>Web</mark></p>
</article>

</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>

Dentro del parrafo “p” ponemos la etiqueta “mark” y entre medio de esta y su cierre la palabra que queramos resaltar.

Please follow and like us:
Publicado el Deja un comentario

Html5 – 9. Figure

En esta entrada introduzco la etiqueta “figure”, dentro de esta etiqueta podemos meter imagenes, video, audio. Con ella indicamos al navegador que introducimos contenido distinto de texto.
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>Figure con html5</title>
</head>
<body>
<header>
<h1>Etiqueta figure</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>
<hgroup>
<h1>Figure en html5</h1>
<h2>practica</h2>
</hgroup>
<p>Aqui va el texto
<figure><img src=”imagen.jpeg”/>
</figure>aqui continua el texto anterior</p>
</article>

</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>

En el mismo sitio donde este grabado el archivo html debereis tener una imagen para enlazarla en este codigo y ver bien el ejemplo.
El resto del codigo ya se vio en anteriores explicaciones, por lo que la introduccion de esta etiqueta es sencilla de entender.
Probar a quitar figure y ver como queda, vereis que el texto cambia de posicion respecto a la imagen.

Please follow and like us:
Publicado el Deja un comentario

Html5 – 8. Audio

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>Sonido en html5</title>
</head>
<body>
<header>
<h1>Etiqueta audio</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>
<hgroup>
<h1>Audio en html5</h1>
<h2>practica</h2>
</hgroup>
<audio controls=”controls” autoplay=”autoplay” loop=”loop”>
<source src=”sonido.mp3″ type=”audio/mp3″/>
tu navegador no es compatible con la etiqueta audio
</audio>
</article>

</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>

Metemos la etiqueta “audio”, el archivo de sonido tiene que estar (en este caso) en el mismo directorio que la pagina web, en este caso es en formato mp3, con los controles correspondientes.
Ponemos tambien un indicador de texto para que si el navegador no soporta esta etiqueta, muestre que no es compatible.

Please follow and like us: