Webmaster Workers utiliza cookies. Lea nuestra Política de Privacidad para obtener más información. Para eliminar este mensaje, haga clic en el siguiente botón: Acepto el uso de cookies


Elementos HTML <div> y <span>





Dejé estos dos elementos HTML para luego de haber presentado los conceptos de CSS. Estas marcas se utilizan en conjunción con las hojas de estilo. Sin estas tiene poco sentido el empleo de estos elementos HTML.


Estos elementos "div" y "span" nos permiten agrupar un conjunto de elementos y aplicar reglas de estilo.


La diferencia entre estos dos elementos es que cuando utilizamos el elemento div produce un salto de línea previo y uno al final, es decir es una marca de bloque como lo son h1,h2,p etc. En cambio el elemento span no produce un salto de línea porque se trata de un elemento en línea como lo son a,em,strong,input etc.


Veamos un ejemplo creando una división (div) y la aplicación de algunas reglas de estilo, como así un elemento span.


Listar una serie de nombres y un bloque de comentarios para cada nombre. Indentar la primer linea de cada párrafo. Hacer que algunas palabras del párrafo aparezcan resaltadas en otro color. Disponer todos los comentarios con un color gris de fondo:



<!DOCTYPE HTML PUBLIC "/W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>título página</title>
</head>
<body>
<div style="background-color:#eeeeee">
<h3>Luis Barrionuevo</h3>
<p style="color:#888888;text-indent:20px">
Aquí <span style="background-color:#eeee00">comentarios.</span>
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
</p>
<h3>Ana Rodriguez</h3>
<p style="color:#888888;text-indent:20px">
<span style="background-color:#eeee00">Aquí comentarios.</span>
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
</p>
</div>
</body>
</html>

Veamos como definimos los elementos span:



<span style="background-color:#eeee00">comentarios.</span>

Como podemos ver luego en el resultado de la página el texto "comentarios" aparece con un color amarillo de fondo. El resto del párrafo continúa inmediatamente a la derecha, es decir el elemento span no produce salto de línea. Para ver la diferencia con el elemento div pruebe de remplazar la palabra span por div y vea los resultados (recuerde cambiar tanto la marca de apertura como la de cerrado del span) Como verá el texto aparece en un bloque independiente.


El div agrupa todos los títulos y párrafos y define la propiedad background-color que es heredado por todos los elementos contendidos por el div:



<div style="background-color:#eeeeee">
<h3>Luis Barrionuevo</h3>
<p style="color:#888888;text-indent:20px">
Aquí <span style="background-color:#eeee00">comentarios.</span>
Aquí comentarios.
.
.
.
.
Aquí comentarios.
Aquí comentarios.
</p>
</div>









Opciones
Estadísticas
Creado 01.01.1970 a las 00:00 hs
Categoría HTML

  • Medallas
  • 0
    Favoritos
  • 9822
    Visitas
  • 0
    Puntos
  • 0
    Seguidores
Comentarios
0
Cargando comentarios espera un momento...
No tienes permisos para comentar.

Para poder comentar necesitas estar Registrado. O.. ya tienes usuario? Logueate!
Autor del post
Ver perfil de Administrador Administrador
Hombre Administrador  Mensaje
43 1,352 1
Medallas
No tiene medallas
Tags
Posts relacionados