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

Escrito por john mitchell Google | Traducido por eduardo moguel
  • Comparte
  • Twittea
  • Comparte
  • E-mail

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.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 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.

  2. 2

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

    <style type="text/css">

    .borders {border-left-color: blue; border-left-style: solid; border-left-width: 1px; padding-left: 6px; }

    </style>

  3. 3

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

    <table <tr> <td>

  4. 4

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

    </td> <td class="borders">

  5. 5

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

    <img src="http://www.example.com/image.jpg"> </td> </tr> </table>

  6. 6

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

Consejos y advertencias

  • Puedes cambiar el color de la línea vertical editando el CSS que has colocado entre las etiquetas de encabezado HTML.
  • Cuando incluyas un texto en un documento HTML, lo mejor es encerrar cada bloque de texto entre etiquetas de párrafo.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles