Entradas

Mostrando las entradas con la etiqueta HTML

🔔 Colocar bordes o marcos a las imágenes de mi pagina web 🔔

Imagen
  Ver vídeo de explicación:

Crear Botones con HTML5

Imagen
Botones con HTML5 <input type="submit"> El elemento input, teniendo el valor "submit" en su atributo type, representa un botón que, cuando es presionado, envía el formulario (form) al que pertenece. Con el arribo de HTML5, varios atributos nuevos han sido agregados a este elemento (formaction, formenctype, formmethod, formnovalidate y formtarget) que definen y anulan ciertos parámetros relacionados a cómo el formulario debe ser enviado. Estos nuevos atributos pueden ser usados, por ejemplo, para proveer más de un botón de envío en un mismo formulario, y hacer que cada uno de ellos lleve a cabo un tipo diferente de envío. <botton></ botton > La etiqueta de HTML <button> representa un elemento cliqueable de tipo botón que puede ser utilizado en formularios o en cualquier parte de la página que necesite un botón estándar y simple de aplicar. De forma predeterminada, los botones HTML se presentan con un estilo similar en t...

Calendario en html5

Imagen
Anteriormente el crear datepickers o calendarios era un poco tedioso, ahora HTML5 nos trae un nuevo tipo de input, el cual nos ahorrara muchas lineas de código y por ende ahorraremos tiempo a la hora de crear nuestros datepickers en nuestros sitios web. Su sintaxis es muy sencilla y acoplable a muchas de las necesidades a las que frecuentemente nos encontramos desarrollando sitios web, donde se debe de incorporar formularios que se deban insertar fechas. Insertando tan solo <input type="date" name="fecha">, podremos obtener un calendario como nos muestra la siguiente imagen. Algunos de los atributos mas utilizados con los que cuenta este nuevo tipo de input son los siguientes, teniendo en cuenta que el formato por defecto de fechas es AAAA-MM-DD " Año mes y día " :  disabled: Indicamos si deseamos que nuestro campo del calendario este desactivado (disabled="disabled"),  por defecto este campo se encuentra activo. id: Identifica...

Validar campos de email en formularios

Imagen
Anteriormente el validar un campo de un formulario donde el usuario introduciría un dato de tipo email "dirección de correo electrónico" era un poco tedioso ya que se debía hacer con un Script aparte y no directamente con HTML, pero ahora ya esto no es un problema con HTML5 podremos validar directamente estos campo. HTML5 nos trae un nuevo tipo de <input> el cual es el email (<input type="email" name="email">), con este nuevo tipo de entrada de datos vamos a poder introducir datos de tipo email con validaciones automáticas de una forma muy sencilla. Con esto la tarea de validar este tipo de datos ya se deja propiamente al navegador web. Utilizando estos atributos de tipo email facilitamos también el ingreso de este tipo de datos en los dispositivos móviles ya que se activa directamente en el teclado la tecla @ sin tener que cambiar el teclado a símbolos. En el siguiente enlace podrán descargar un ejemplo. Descargar ...

Validaciones de formularios vacíos

Imagen
La validación de los campos vacíos en los formularios ha sido un problema que anteriormente siempre se realizaba con la utilización de JavaScript, Ya sea construyendo nuestro propio código o utilizando códigos de terceras personas, puesto que en anteriormente era imposible realizar una validación de los campos de un formulario con HTML puro , pero con las nuevas actualizaciones de HTML en su versión   5 (HTML5), nos permite validar estos campos de formulario con el atributo (required) y con la ayuda de CSS3 podemos extendernos un poco mas en la visualización de estas validaciones. Para la utilización de estos recursos debemos tener en cuenta los diferentes tipos de navegadores, a la hora de introducir nuestro código  CSS3 ya que debemos especificar los tipos de navegadores porque recuerden que todos no se comportan igual manejando diferentes librerías y debemos crear una buena compatibilidad de nuestro si...

Crear un rango con HTML5

Imagen
Vamos a repasar el  HTML5 input de tipo range , el cual es un nuevo elemento de formulario para la entrada de datos que nos ofrece HTML5. Este  input  es muy parecido al HTML5  input  number   en cuanto al formato de datos, la diferentecia radica en que los valores se especifican mediante  sliders o barras de desplazamiento . La input type=”range” se utiliza para campos de entrada que deben contener un valor dentro de un rango.  Entre los atributos mas comunes de este elemento tenemos los siguientes: max y min: Indicamos los valores máximo y mínimo de nuestro rango. value: Especificamos un valor por defecto en nuestro rango. step: Establecemos el valor numérico de avance del slider o barra de desplazamiento. En el siguiente enlace podrán descargar un ejemplo de esta propiedad. Descargar Ver ejemplo:

Insertar audios en mi sitio web

Imagen
Anteriormente el introducir un audio dentro de nuestra pagina web era un poco tedioso ahora con  HTML5  es muy sencillo ya que contamos con el elemento  <audio>. Nuestro elemento cuenta con una serie de atributos que podemos utilizar según nuestra necesidad. Atributos autoplay:  Especificando este atributo nuestro audio comenzara a reproducirse automáticamente tan pronto cargue nuestro sitio web, sin detenerse hasta la finalización de su tiempo de reproducción. autobufer:  Es u n atributo que se puede leer para determinar qué intervalos de tiempo de multimedia se han almacenado en búfer. controls:  Utilizando este atributo especificamos que deseamos tener los controles que tiene un reproductor de audio,incluyendo volumen, reproducir/pausar, reanudar reproducción. height:  Con esto especificamos la altura de nuestro reproductor en nuestro sitio web. loop:  Si se especifica este atributo, estaremo...

Tema Material Design para Bootstrap

Imagen
El diseño de material de Bootstrap es un tema de Bootstrap 3 que le permite utilizar el nuevo diseño de material de Google en su marco favorito de front-end. Para descargar este tema puedes descargarlo en el siguiente enlace. Descargar O visita su pagina principal :  Ir a la pagina