Hasta ahora, hemos analizado los elementos que agregan contenido o formato al documento. En esta sección, veremos dos elementos que hacen estructuralmente útil esta estructura. Son <div> y <span>.
<div>
Definición: se utiliza para agrupar varios elementos en un bloque, que puede dar un nombre, una clase y un estilo al bloque.
Apariencia: Se requieren etiquetas para cerrar y abrir.
Atributos:% attrs y align.
Es un elemento de bloque; por lo que puede tener elementos de línea y otros elementos de bloque, así como un elemento <div>.
Ejemplo:
<html>
<body>
<! - Primer bloque, llamado Header ->
<div id = "Header" style = "background-color: #D5EDB3" align = "center">
<h2> LATON MAN </h2>
<p> StarFuerte Industries </p>
</div>
<! - Segundo bloque, llamado Contenido ->
<div id = "Contenido" style = "background-color: #EE3" align = "left">
<p> StarFuerte Industries ha presentado su nuevo prototipo de armadura para luchar contra muchos enemigos. <br>
Características:
<ul>
<li> Resistencia al fuego </li>
<li> Potencia de vuelo </li>
<li> saltos múltiples </li>
<ul>
</p>
</div>
<p> Sólo se puede comprar llamando. <br>
Regalo para un manojo de cuchillo. <br>
Aproveche esta gran oferta.
</p>
</body>
</html>
La paleta de colores RGB básicamente tiene tres colores básicos básicos: Rojo-Verde-Azul, .
Estos colores básicos se expresan en HTML con tres pares hexadecimales (HH-HH-HH)
Por lo tanto, los códigos de color básicos son:
· ROJO = #FF0000
· VERDE = #00FF00
· AZUL = #0000FF
El resto de los colores se obtienen combinando colores básicos.
Cada bloque creado por <div> define un campo en el documento, y las dimensiones de este campo dependerán generalmente del contenido incrustado en el bloque.
Normalmente, estas áreas del documento se llaman capas, que se pueden ocultar y solaparse entre sí.
Estas son algunas de las propiedades de estas capas: left, top y relative, el width y la hight para establecer el ancho y la longitud, la clasificación z-index superposiciones, visibility para ocultar u ocultar, background-color, etc.
Pero todas estas propiedades deben establecerse a través de hojas de estilo; así que examinaremos el tema más adelante.
<span>
Definición: Identifique una línea de pedido y, por lo tanto, indique un nombre, una clase y un estilo.
Apariencia : Se requieren etiquetas para cerrar y abrir.
Atributos:% attrs y align
En <span>, podemos cambiar lo siguiente: tamaño de la fuente, color, salto de línea, ubicación del texto en la línea, etc.
Ejemplo:
<body>
<! -- Primer bloque llamado Header -->
<div id = "Header" style = "background-color:#D5EDB3" align="center">
<h2> Primer bloque </h2>
<p> Este párrafo no tiene un estilo específico </p>
</div>
<! --Segundo bloque, llamado Contenido -->
<div id = "Contenido" style = "background-color: #EE3" align="center">
<h2> Segundo bloque </h2>
<p> Este párrafo contiene elementos lineales:
<br>
<span style = "font-size: 16pt"> 16 tamaño de letra | </span>
<span style = "font-style: italic"> Cursiva | </span>
<span style = "font-weight: bold"> Bold | </span>
</p>
</div>
</body>
Mediante la etiqueta <span>, podemos distinguir ciertas partes del texto y darles un estilo diferente sin tener que cambiarlas.
Ejercicio12:
Crea una página web con un formato de 3 columnas, cada columna deberá tener un color y texto, la primera columna tendra 1/3 del espacio, y la tercera 1/4.