html

You Are Here: Home / Archives / Category / html

Como poner un post o una página a 2 columnas

Categories:

A esto lo suelo denominar “píldora productiva” ya que es una forma muy sencilla de poder realizar 2 columnas en un artículo sin necesidad de poner un plugin ni nada parecido.

Supongamos que en una entrada primero tenemos un párrafo normal y luego nos interesa tener 2 columnas, por ejemplo para hacer una comparativa o para indicar las ventajas y los inconvenientes de un producto.

Por tanto, queremos obtener este resultado:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

VENTAJAS

  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet
  4. Lorem ipsum dolor sit amet

INCONVENIENTES

  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet
  4. Lorem ipsum dolor sit amet

 

 

 

 

 

 

 

Por tanto, nuestro código sería este:

<div style=”float: left; width: 45%;”>
<em>VENTAJAS</em>
<ol>
<li><em>1.</em></li>
<li><em>2.</em></li>
<li><em>3.</em></li>
<li><em>4.</em></li>
</ol>
</div>
<div style=”float: right; width: 45%;”>

<em>INCONVENIENTES</em>
<ol>
<li><em>1.</em></li>
<li><em>2.</em></li>
<li><em>3.</em></li>
<li><em>4.</em></li>
</ol>
</div>

 

Y esto es todo. Espero que sirva de ayuda.

Seleccionar columnas de texto en Notepad++

Categories: Tags:

Notepad++ es un super editor de texto que entre algunas de sus principales características tiene la de reconocer diferentes lenguajes de programación y resaltar palabras clave del lenguaje seleccionado (yo lo uso principalmente con PHP y HTML y funciona de maravilla)

notepad-seleccionar-columna

Pero de lo que quiero apuntar es que de una forma muy sencilla, Notepad++ permite seleccionar una columna de texto (por ejemplo, solo la parte izquierda de varias líneas) pulsando la tecla ALT y realizar la selección sin soltar la tecla.

Una vez seleccionado el texto puedes copiar, pegar, cortar, eliminarlo, …

Está disponible para todas las versiones de Windows.

Es un programa gratuito y traducido al español. 100% recomendable.

Descargar: Notepad++

Crea tu página web gratis

Categories: Tags:

Desde Webpamplona te damos la facilidad de que puedas crear tu página web gratis.

Páginas web gratis. Infórmate sin compromiso.

 

Si quieres más información visita nuestra web página web gratis

Vía | webpamplona diseño de páginas web

Como poner un Prezi en mi página web

Categories: Tags:

Es muy fácil, sólo tienes que seguir estos sencillos pasos:

1. Lo primero es acceder al sitio web de Prezi

2. Localiza la presentación que has creado o la que quieres publicar en tú página web. Por ejemplo, esta es la felicitación de Navidad de 2012.

presentacion-prezi

3. Selecciona la presentación.

4. En la página donde estás visualizando la presentación, busca el botón “[highlight color=”yellow”]COMPARTIR[/highlight]”, y tiene que aparecer una pantalla similar a esta, donde sólo tienes que copiar el código “[highlight color=”yellow”]INCRUSTAR[/highlight]” y ponerlo en tu página web donde quieras que aparezca.

compartir-una-presentacion-prezi

5. Si quieres ajustar el tamaño para su visualización, pulsa en el botón [highlight color=”blue”]INCRUSTAR [/highlight]y pon el tamaño que quieres.

6. Pulsa en el botón “[highlight color=”yellow”]Copiar código al portapapeles[/highlight]” y así has copiado el código que tienes que poner en tú página web.

7. Edita la página web donde quieras que aparezca la presentación de prezi y pega el código dentro de las etiquetas [highlight color=”yellow”]<BODY> … </BODY>[/highlight] y ya está.

Poner una animación de flash como un widget en wordpress

Categories: Tags:

Poner una animación de flash como un widget en wordpress

Para poner una animación de flash (SWF) como un widget en WordPress es muy sencillo y sólo tienes que seguir estos sencillos pasos:

1. Desde el panel de administración de wordpress ir al menú Apariencia » Widgets

widget del tipo texto o html

2. Añadir al sidebar que quieras, un widget del tipo “TEXTO

widget de texto

3. Incorporar el siguiente código en el widget, teniendo en cuenta qué:

    • Tienes que ajustar el tamaño a tú fichero SWF (en el código está puesto 2 veces)
    • Tienes que cambiar la ruta y el nombre del fichero (en el código está puesto 2 veces)

<object width=”262” height=”140“>
<param name=”movie” value=”http://TU_DOMINIO.COM/NOMBRE_FICHERO.swf”>
<embed src=”http://TU_DOMINIO.COM/NOMBRE_FICHERO” width=”262” height=”140“>
</embed>
</object>

widget del tipo texto o html

 

Y ya está todo hecho. Espero que te sirva

¿Cómo habilitar HTML5 en cualquier navegador?

Categories: Tags:

¿Qué hacer para que todos los visitantes vean tú web en HTML5 correctamente?

Casi todos los navegadores web que existen a fecha de hoy son compatibles con HTML5 pero siempre hay visitantes que todavía usan los navegadores más antiguos como Internet Explorer 5, 6 y 7 y se suelen encontrar con problemas de visualización.

Para incrementar la compatibilidad de estos navegadores puedes usar Webshims Lib que es una librería de Javascript que intenta mejorar la compatibilidad de estos navegadores aunque las páginas tardarán más tiempo en cargarse debido al código qué hay que añadir para conseguir la compatibilidad.

Fuente | WebResourcesDepot

Enlace | Webshims

Animar elementos con jQuery

Categories: Tags:

He encontrado este práctico tutorial de animación de elementos con jQuery en la web de HTML5Fácil

jQuery es un framework para javascript que permite desarrollar sitios de manera más dinámica y fácil.

En el tutorial de hoy veremos una manera muy sencilla pero agradable de hacer distintas animaciones con jQuery, para lo que utilizaremos el método $.animate(), el cual funciona mediante atributos ces.

Imagen jQuery: animate.js

 

Continuar leyendo en HTML5Fácil

Enlace | HTML5Fácil

 

Expertos en WordPress

Esta web utiliza cookies para ofrecer la mejor experiencia posible. Si sigues navegando das tu consentimiento para la aceptación de Cookies y nuestra política de privacidad. Más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar