Cómo hacer una línea vertical que separe texto HTML de una imagen

Por john mitchell

Puedes separa texto e imágenes en un documento HTML usando el método de Hojas de Estilo en Cascadas (CSS, en inglés). De otra forma, tendrías que dibujar una línea vertical en un programa editor de imágenes, guardarla y usarla en el documento de la página web. El método CSS es preferido porque ahorra tiempo, reduce el tiempo de carga de la página y utiliza de forma más eficiente el ancho de banda del servidor. Es necesario tener un entendimiento básico de HTML y CSS para realizar esta tarea.

Paso 1

Abre el documento HTML en un editor de texto, como por ejemplo, en el Bloc de notas de Windows o en TextEdit de Mac.

Paso 2

Inserta el siguiente código CSS, para crear la clase "borders" (bordes), entre las etiquetas de encabezado HTML:

Paso 3

Ve a la sección "body" (cuerpo) del documento HTML y teclea el siguiente código antes de tu texto:

Paso 4

Mueve el cursor debajo del texto y teclea el siguiente código:

Paso 5

Inserta la imagen en la columna de la tabla tecleando lo siguiente:

Paso 6

Guarda el documento HTML y publícalo en tu servidor Web.