Esperando sea util. Gracias.
Ejemplos codigo html, css y javascript. Formato web y etiquetas HTML5.
lunes, 21 de marzo de 2016
Html - Adaptar nuestra Web a dispositivos moviles - video 05
Como adaptar nuestra web a dispositivos moviles.
Esperando sea util. Gracias.
Esperando sea util. Gracias.
sábado, 19 de marzo de 2016
Html - Barra de navegacion en nuestra Web - video 04
En este video explico como crear una barra de navegacion para nuestra web y como darle el estilo o formato que queremos.
Espero os sea util, no olvideis probar y practicar. Gracias.
Espero os sea util, no olvideis probar y practicar. Gracias.
jueves, 17 de marzo de 2016
Html - Cabecera con logo en nuestra Web - video 03
Incluimos el logo en la cabecera de nuestra web.
Espero os sea util. Gracias.
Espero os sea util. Gracias.
Html - Metas en nuestra Web - video 02
En este video añadimos las palabras clave y descripcion a nuestro documento web.
Es muy util para que los buscadores indexen nuestro sitio web, por lo que hay que tener muy claras las palabras claves.
Espero os sea util. Gracias.
Es muy util para que los buscadores indexen nuestro sitio web, por lo que hay que tener muy claras las palabras claves.
Espero os sea util. Gracias.
martes, 15 de marzo de 2016
Html5 - 14. Formulario
En esta entrada pongo ejemplo de un formulario con las distintas etiquetas y atributos que nos podemos encontrar.
Para ver el ejemplo, retomamos la plantilla web que hemos creado en los apartados anteriores, modificando el "article" principal:
Hay tambien intervalos de minimo y maximo (como podeis ver), escribir este codigo e ir probando cambios, por ejemplo añadir saltos de linea con <br>, cambiar intervalos, etc.
Los formularios html con php o javascript son muy utiles para obtener datos y procesarlos adecuadamente.
Esperando sea util, gracias.
Para ver el 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>Formulario</title>
</head>
<body>
<header>
<h1>Formulario</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>
<h1>Mi Formulario</h1>
<form>
<input type="text" placeholder="nombre"/>
<input type="number" value="5" min="1" max="10"/>
<input type="range" min="0" max="100"/>
<input type="color"/>
<input type="date"/>
<button type="submit">Guardar</button></article>
</form>
</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>
Introduzco varias etiquetas en el formulario para que veais parte de la variedad de datos que admite, el atributo placeholder es muy utilizado como ayuda al usuario indicandole que tiene que introducir en dicho campo.
Hay tambien intervalos de minimo y maximo (como podeis ver), escribir este codigo e ir probando cambios, por ejemplo añadir saltos de linea con <br>, cambiar intervalos, etc.
Los formularios html con php o javascript son muy utiles para obtener datos y procesarlos adecuadamente.
Esperando sea util, gracias.
sábado, 12 de marzo de 2016
Html - Creacion Web
Serie de videos en los que explico paso a paso como crear una web, con codigo Html, Css y Php.
Os pongo el enlace del primero.
Espero os sea util. Gracias.
Os pongo el enlace del primero.
Espero os sea util. Gracias.
domingo, 6 de marzo de 2016
Html5 - 13. Atributos en parrafo
En esta entrada pongo ejemplo de unos atributos que podemos incluir dentro de la etiqueta de parrafo "p" en html.
Para ver un ejemplo, retomamos la plantilla web que hemos creado en los apartados anteriores, modificando el "article" principal:
Esperando sea util, gracias.
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>Atributos</title>
</head>
<body>
<header>
<h1>Atributos</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>Atributos de la etiqueta parrafo</h1>
<h2>practica con etiqueta p</h2>
</hgroup>
<p>Este es un parrafo normal</p>
<p draggable="true">Este parrafo lo puedes arrastrar</p>
<p contenteditable="true">Este parrafo es editable</p>
<p hidden>Este estara oculto, no lo veras</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>
Los atributos incluidos son draggable con el que haremos que el texto se pueda mover, con contenteditable conseguimos editar el texto y con hidden lo ocultamos, este ultimo sera util con algo de codigo como javascript, ya que podremos modificar su atributo en ejecucion y hacer que aparezca y desaparezca.
Esperando sea util, gracias.
jueves, 3 de marzo de 2016
Html5 - 12. Video
En esta entrada introduzco la etiqueta "video".
Para ver un ejemplo, retomamos la plantilla web que hemos creado en los apartados anteriores, modificando el "article" principal:
Como vereis se puede añadir una imagen previa (tenemos que ponerla en la carpeta que vaya la web).
El video debe estar tambien en la carpeta.
Esperando sea util, gracias.
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>Video</title>
</head>
<body>
<header>
<h1>Etiqueta video</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>Video en html5</h1>
<h2>practica con etiqueta video</h2>
</hgroup>
<video width="320" height="240" controls="controls" autoplay="autoplay" loop="loop" muted="muted" preload="none" poster="imagen.jpeg" src="video.mp4"></video>
</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 de la etiqueta video he puesto algunos atributos, como ancho, alto, que se ejecute al cargar (autoplay), que se repita al llegar al final (loop), que empiece sin sonido (muted), podeis probar a quitar y poner estos atributos o cambiarles su valor para ver como se va ejecutando.
Como vereis se puede añadir una imagen previa (tenemos que ponerla en la carpeta que vaya la web).
El video debe estar tambien en la carpeta.
Esperando sea util, gracias.
Suscribirse a:
Entradas (Atom)