Listas no ordenadas: <ul>

Las listas no ordenadas van dentro de la etiqueta <ul> y de su cierre </ul>. Cada punto que queramos añadir a la lista, lo haremos dentro de la etiqueta <li> y su cierre.

Si no le indicamos nada a la etiqueta <li>, ésta se generará de forma automática. Pero si queremos definir nosotros mismo el símbolo del punto, podemos gracias al atributo “type”.

Así podemos hacer que la lista esté definida por puntos negros (li type="disc"), por puntos con el fondo blanco (li type="circle") o por cuadrados (li type="square"). Aunque esta apariencia dependerá del navegador. Hay algunos navegadores que dan otras apariencias a estos mismos atributos.

Vamos con un pequeño ejemplo en código:

<ul> <li type="circle">Esto es un tipo de punto.</li> <li type="square">Este es otro.</li> <li type="disc">Y este es otro diferente.</li> </ul>

Cuyo resultado visual será el que veremos a continuación:

Esto es un tipo de punto. Este es otro. Y este es otro diferente.

Listas ordenadas: <ol>

Las listas ordenadas van enmarcadas dentro de las etiquetas <ol> </ol>. Cada punto de la lista se escribe con la misma etiqueta que en las no numeradas: <li>. Pero al ser listas ordenadas los símbolos serán números y éstos se irán generando automáticamente por orden, conforme escribamos nuevos puntos.

En las listas ordenadas podemos hacer que el primer punto comience con el número que nosotros queramos. Lo conseguiremos gracias al atributo “value”. Los siguientes puntos que escribamos se generarán automáticamente por orden, partiendo de ese número.

Por ejemplo, si queremos que nuestra lista empiece por el número 20, sólo deberemos escribir lo siguiente:

<ol> <li value="20">Este será el número 20. </li> <li>Este será el 21. </li> <li> Este será el 22. Y así sucesivamente. </li> </ol>

Y el resultado será el siguiente:

Este será el número 20. Este será el 21. Este será el 22. Y así sucesivamente.

Listas de definiciones: <dl>, <dt> y <dd>.

Si lo que vamos a hacer es un listado de definiciones, podemos usar las etiquetas <dl>, <dt> y <dd>. Vamos a explicarlas por partes:

La etiqueta <dl> viene de los términos ingleses “Definiton list” y nos indica que dentro de ella, entre ella y su cierre, va a ir una definición.

La etiqueta <dt> viene de los términos “Definition term” y dentro de ella irá el término que vamos a definir. Para entendernos mejor, dentro de <dt> iría el título de la definición.

La etiqueta <dd> viene de los términos “Definition description” y nos dice que dentro de ésta irá la definición.

Si escribimos varios listados de definición, éstas se separarán automáticamente entre ellas para facilitar su diferenciación.

Aquí podemos ver un ejemplo de código de dos listado de definición:

<dl> <dt>Aquí va el término que definiremos</dt> <dd>Y aquí dentro irá la definición propiamente dicha.</dd> </dl> <dl> <dt>Aquí va la segunda definición</dt> <dd>Y aquí dentro irá la segunda definición, separada automáticamente de la anterior.</dd> </dl>

Cuyo resultado será el siguiente:

Aquí va el término que definiremos Y aquí dentro irá la definición propiamente dicha. Aquí va la segunda definición Y aquí dentro irá la segunda definición, separada automáticamente de la anterior.

tablas

	A
a	patricia

once			a	b
azul	once	a	b

---

once²⁰¹³

patik			once	m
rosado	once	a	b

La etiqueta <IMG>

La etiqueta <IMG> te servirá para situar imágenes en una página. Es una etiqueta "verdadera", pues no tiene etiqueta de cierre:

<IMG>

La etiqueta <IMG> requiere un origen de datos obligatorio dado por el atributo SRC=. Indica la imagen en cuestión:

<IMG SRC="bander.gif">

Tan sólo el código anterior es necesario para añadir una imagen a tu página, mostrando la imagen situada en el mismo directorio del documento HTML.
En el capítulo "Cómo administrar la página WEB localmente", comentamos la administración de los archivos. Normalmente, las imágenes se suelen colocar en un subdirectorio creado específicamente para ellas bajo el directorio raíz de la página WEB. Este directorio se puede llamar images,imagenes, graficos... (sin tildes), dependiendo de los gustos. Si tu imagen está en un subdirectorio y tu página HTML en el directorio raíz, necesitarás la dirección exacta para hacer el enlace relativo (ver capítulo "Enlazando las páginas"):

<IMG SRC="images/bander.gif">

CUIDADOAlgunas personas colocan enlaces absolutos a imágenes situadas en otras WEBs ajenas (por ejemplo, http://www.empresa.com/grafico.gif). Es una práctica no recomendada por varias razones. Una consideración es que tienes riesgo de que los propietarios de aquella página borren o mueva la imagen, provocando una ruptura del enlace que tenemos en nuestra página. Y otro es la propiedad: si el gráfico no es tuyo y piensas enlazarlo sin la expresa autorización del propietario, quizás estés haciendo una violación de copyright.

Una imagen siempre irá dentro de la sección <body> de un documento HTML. Aquí tienes un pequeño ejemplo:

<HTML> <HEAD> <TITLE>Añadiendo imágenes</TITLE> </HEAD> <body> <IMG SRC="images/bander.gif"> </body> </HTML>

La imagen aparecerá en la parte superior izquierda de la página. Es la posición predeterminada del navegador.
La etiqueta <IMG> permite añadir atributos que controlará el comportamiento y la apariencia de una imagen en una página.



tablas

---

a	b	c
patricia
azul	a	b

a	pato
a

TALLER DE TABLAS 

	once
a	carlos

patricia			G	Q
azul	once	X	Y	d

LEIDY			CARLA	F
rosado	G	a	b

ETIQUETA<IMG> 

• height: Define la altura de la imagen en pieles o porcentaje
• width: Define el ancho de la imagen en pieles o porcentaje
• Siempre se recomienda poner valores en height o width para favorecer que el navegador pueda dejar el hueco correcto para la imagen
• se recuerda que ancho y alto se pueden definer en pixel o en porcentaje
• longdesc: Enlaza a un documento que explica la imagen

Ejemplos

height

<img src="images.jpg" alt="toro" height="25%">

width

<img src="images.jpg" alt="toro" width="25%">

Atributos en transicional

• align: Define la alineación de la imagen respecto a la página
  • top: La imagen se coloca debajo de la línea de texto
  • bottom La imagen se coloca encima de la línea de texto
  • middle: El texto y la imagen están centrados verticalmente
  • left, right: La imagen se coloca a la derecha o a la izquierda y el texto la rodea
• border: Define el borde de la imagen
• hspace: El espacio en blanco a los lados de la imagen
• vspace: El espacio en blanco por encima y por debajo de la imagen

Ejemplos

align

top

<img src="images.jpg" alt="toro" align="top">
El párrafo es una unidad gráfica y de sentido. Esta dividido en dos aspectos importantes: *Párrafo Formal - *Párrafo Conceptual. El párrafo formal se inicia generalmente con sangría y letra mayúscula y termina con punto y aparte. El párrafo conceptual contiene ideas que están enlazadas entre si, y que además, se establece una jerarquía entre ellas. Todo fundamentado en una base denominada oración central. En vista de eso, podemos definir el párrafo como una estructura lingüística que expresa el desarrollo de una idea central. Esta formado por una o varias oraciones.De estas una es denominada oración principal. Cuando la oración principal esta ubicada en el centro del párrafo, las oraciones llevan un movimiento ascendente, y todas las demás oraciones giran en torno a esta.

bottom

<img src="images.jpg" alt="toro" align="bottom">
El párrafo es una unidad gráfica y de sentido. Esta dividido en dos aspectos importantes: *Párrafo Formal - *Párrafo Conceptual. El párrafo formal se inicia generalmente con sangría y letra mayúscula y termina con punto y aparte. El párrafo conceptual contiene ideas que están enlazadas entre si, y que además, se establece una jerarquía entre ellas. Todo fundamentado en una base denominada oración central. En vista de eso, podemos definir el párrafo como una estructura lingüística que expresa el desarrollo de una idea central. Esta formado por una o varias oraciones.De estas una es denominada oración principal. Cuando la oración principal esta ubicada en el centro del párrafo, las oraciones llevan un movimiento ascendente, y todas las demás oraciones giran en torno a esta.

middle

<img src="images.jpg" alt="toro" align="middle">
El párrafo es una unidad gráfica y de sentido. Esta dividido en dos aspectos importantes: *Párrafo Formal - *Párrafo Conceptual. El párrafo formal se inicia generalmente con sangría y letra mayúscula y termina con punto y aparte. El párrafo conceptual contiene ideas que están enlazadas entre si, y que además, se establece una jerarquía entre ellas. Todo fundamentado en una base denominada oración central. En vista de eso, podemos definir el párrafo como una estructura lingüística que expresa el desarrollo de una idea central. Esta formado por una o varias oraciones.De estas una es denominada oración principal. Cuando la oración principal esta ubicada en el centro del párrafo, las oraciones llevan un movimiento ascendente, y todas las demás oraciones giran en torno a esta.

left

<img src="images.jpg" alt="toro" align="left">
El párrafo es una unidad gráfica y de sentido. Esta dividido en dos aspectos importantes: *Párrafo Formal - *Párrafo Conceptual. El párrafo formal se inicia generalmente con sangría y letra mayúscula y termina con punto y aparte. El párrafo conceptual contiene ideas que están enlazadas entre si, y que además, se establece una jerarquía entre ellas. Todo fundamentado en una base denominada oración central. En vista de eso, podemos definir el párrafo como una estructura lingüística que expresa el desarrollo de una idea central. Esta formado por una o varias oraciones.De estas una es denominada oración principal. Cuando la oración principal esta ubicada en el centro del párrafo, las oraciones llevan un movimiento ascendente, y todas las demás oraciones giran en torno a esta.

right

<img src="images.jpg" alt="toro" align="right">
El párrafo es una unidad gráfica y de sentido. Esta dividido en dos aspectos importantes: *Párrafo Formal - *Párrafo Conceptual. El párrafo formal se inicia generalmente con sangría y letra mayúscula y termina con punto y aparte. El párrafo conceptual contiene ideas que están enlazadas entre si, y que además, se establece una jerarquía entre ellas. Todo fundamentado en una base denominada oración central. En vista de eso, podemos definir el párrafo como una estructura lingüística que expresa el desarrollo de una idea central. Esta formado por una o varias oraciones.De estas una es denominada oración principal. Cuando la oración principal esta ubicada en el centro del párrafo, las oraciones llevan un movimiento ascendente, y todas las demás oraciones giran en torno a esta.

border

<img src="images.jpg" alt="toro" border="10">
El párrafo es una unidad gráfica y de sentido. Esta dividido en dos aspectos importantes: *Párrafo Formal - *Párrafo Conceptual. El párrafo formal se inicia generalmente con sangría y letra mayúscula y termina con punto y aparte. El párrafo conceptual contiene ideas que están enlazadas entre si, y que además, se establece una jerarquía entre ellas. Todo fundamentado en una base denominada oración central. En vista de eso, podemos definir el párrafo como una estructura lingüística que expresa el desarrollo de una idea central. Esta formado por una o varias oraciones.De estas una es denominada oración principal. Cuando la oración principal esta ubicada en el centro del párrafo, las oraciones llevan un movimiento ascendente, y todas las demás oraciones giran en torno a esta.

hspace

<img src="images.jpg" alt="toro" hspace="100">
El párrafo es una unidad gráfica y de sentido. Esta dividido en dos aspectos importantes: *Párrafo Formal - *Párrafo Conceptual. El párrafo formal se inicia generalmente con sangría y letra mayúscula y termina con punto y aparte. El párrafo conceptual contiene ideas que están enlazadas entre si, y que además, se establece una jerarquía entre ellas. Todo fundamentado en una base denominada oración central. En vista de eso, podemos definir el párrafo como una estructura lingüística que expresa el desarrollo de una idea central. Esta formado por una o varias oraciones.De estas una es denominada oración principal. Cuando la oración principal esta ubicada en el centro del párrafo, las oraciones llevan un movimiento ascendente, y todas las demás oraciones giran en torno a esta.

vspace

<img src="images.jpg" alt="toro" vspace="10">
El párrafo es una unidad gráfica y de sentido. Esta dividido en dos aspectos importantes: *Párrafo Formal - *Párrafo Conceptual. El párrafo formal se inicia generalmente con sangría y letra mayúscula y termina con punto y aparte. El párrafo conceptual contiene ideas que están enlazadas entre si, y que además, se establece una jerarquía entre ellas. Todo fundamentado en una base denominada oración central. En vista de eso, podemos definir el párrafo como una estructura lingüística que expresa el desarrollo de una idea central. Esta formado por una o varias oraciones.De estas una es denominada oración principal. Cuando la oración principal esta ubicada en el centro del párrafo, las oraciones llevan un movimiento ascendente, y todas las demás oraciones giran en torno a esta.

object

IMG tiene limitaciones a la hora de mostrar elementos multimedia.
Para solventar esas limitaciones se creó la etiqueta OBJECT.
Por ejemplo para insertar una imagen object se utiliza de la siguiente manera:
<OBJECT data="images.jpg" type="image/jpeg">images</OBJECT>  
  

con esto nos quedaría esto:

2. La etiqueta FONT.

Las etiquetas de los apartados anteriores permiten modificar ciertos aspectos de la apariencia del texto de una página, pero ¿es suficiente?. Cuando el WWW se hizo más y más popular y la apariencia de las páginas comenzó a adquirir la importancia actual se hizo evidente que no.

Para poder controlar en mayor medida aún la apariencia del texto se creó la etiqueta FONT. A continuación se explicarán sus virtudes, aunque cabe destacar que actualmente existe una alternativa mejor: las hojas de estilo en cascada o CSS que será tratada en los últimos capítulos del curso.

2.1. Cambiando el tamaño del texto.

La etiqueta FONT permite tener un gran control sobre el tamaño de un texto. Este tamaño se especifica con su atributo SIZE y afectará al texto que encierren la instrucción de inicio (<FONT SIZE="">) y de fin (</FONT>).
La forma de especificar el tamaño del texto consistirá en darle el valor deseado al atributo SIZE, si bien hay dos formas de hacerlo:

1. La primera de ellas es indicar un tamaño absoluto de 1 a 7. Correspondiendo 7 al tamaño mayor y 1 al menor. El tamaño por defecto del texto es el equivalente al número 3. Veamos un ejemplo:
   

   Esto es texto normal <FONT SIZE="6"> y esto es grande </FONT>

   En la figura 3.7 podemos ver una comparación de todos los tamaños.
   
   Figura 3.7. Ejemplo de uso de la etiqueta FONT y su atributo SIZE para cambiar el tamaño del texto.
   
2. La segunda consistirá en indicar un tamaño relativo respecto al que haya por defecto. Por ejemplo, para poner un tamaño 6 y suponiendo un tamaño por defecto 3 se usaría:
   

   Texto de tamaño 3 <FONT SIZE="+3"> Tamaño 6 </FONT>

   Es necesario hacer notar que el aumento de tamaño se tomará siempre respecto al que se tenga por defecto (y que será 3 mientras el usuario no cambie las preferencias de su navegador), por tanto anidando varias etiquetas FONT no se irá aumentando el tamaño del texto como ocurría con la etiqueta BIG. Por ejemplo:
   

   Texto normal (tamaño 3), <FONT SIZE="+1"> Texto de tamaño 4 , <FONT SIZE="+1"> este texto sigue teniendo tamaño 4 </FONT> </FONT>

En la figura 3.7 se puede ver un ejemplo de ambos modos de uso.

Figura 3.7. Ejemplo de uso de la etiqueta FONT y su atributo SIZE para cambiar el tamaño del texto.

Cuando se indica el tamaño del texto usando el método relativo (+n o -n) será necesario usar comillas. Aunque algunos navegadores podrían entender el valor aunque no se usen la única manera de estar seguro de que la visualización será correcta en todos ellos será entrecomillar el valor dado al atributo SIZE.

Conocidos estos dos métodos es el momento de introducir una nueva etiqueta muy relacionada con FONT: la etiqueta BASEFONT. Esta permite modificar el tamaño por defecto del texto de la página Web. Su modo de uso es el siguiente:

<BASEFONT SIZE="n">

Donde n es un número del 1 al 7 (por defecto vale 3) y las comillas son obligatorias. Podemos observar como esta etiqueta está formada por una única instrucción cuya función será modificar el tamaño de todo el texto a partir de su inclusión. La única excepción que escapa al efecto de esta etiqueta son los encabezados, que mantienen su tamaño.
En general cuando se usa esta etiqueta se introduce como la primera después de <BODY>, no usarla es lo mismo que usar <BASEFONT SIZE="3">.
A continuación se incluyen dos ejemplos con distintos tamaños de letra por defecto:

<BASEFONT SIZE="3"> Esto es texto de tamaño 3, <FONT SIZE="+3"> esto es de tamaño 6, </FONT> <FONT SIZE="+4"> y esto es de tamaño 7 </FONT>

Como se ve, para hallar el tamaño de un texto hay que sumar el tamaño relativo (+3 o +4 en este caso) al tamaño por defecto del resto del texto (en este caso 2). Otro ejemplo más:

<BASEFONT SIZE="4"> Esto es texto de tamaño 4, <FONT SIZE="+3"> esto es de tamaño 7, </FONT> <FONT SIZE="+4" y esto sigue siendo de tamaño 7 </FONT>

En este segundo ejemplo se ve, además, que en ningún caso se puede conseguir un tamaño superior a siete. De igual manera nunca se puede poner un tamaño menor que uno.
En la figura 3.8 podemos ver ambos ejemplos.

Figura 3.8. Los tamaños del texto que hallamos modificado usando el método relativo se calcularán a partir del al tamaño por defecto del texto normal, pero sin pasar nunca de 7.

2.2. Cambiando el color del texto

Con otro atributo de la etiqueta FONT: COLOR se puede cambiar el color del texto con la misma facilidad con la que hasta ahora se ha cambiado su tamaño. En un principio la única forma de indicar un color consistía en usar un código hexadecimal de la siguiente manera:

<FONT COLOR="#RRGGBB">

Dónde hay que sustituír RR por dos números hexadecimales que indican la cantidad de rojo (desde 00 que es ausencia de color a FF que es máxima cantidad de color), GG por otros dos que indican la cantidad de verde y BB por dos que indican la cantidad de azul. Combinando estos tres colores en diferentes proporciones se pueden crear hasta 16 millones de colores. Este sistema suele parecer ligeramente complicado en un principio, pero con la práctica o con ayuda de herramientas gráficas de selección de colores se convierte en un método bastante sencillo e increíblemente potente.
Existe un segundo método de indicar el color que sin duda le resultará al lector más sencillo. Este método consiste en poner como valor de COLOR el nombre del color en inglés. Los colores aceptados son: Black(negro), white (blanco),green (verde), maroon (marron rojizo), olive (verde oliva), Navy (azul marino), purple (violeta), red (rojo),  yellow (amarillo), blue (azul), teal (verde azulado), lime (verde lima), aqua (azul claro), fuchsia (fusia), silver (gris claro). Aunque además de estos existen otros valores, no son soportados en todos los navegadores.
Y la forma de usarlas queda clara en el siguente ejemplo:

<H1> <FONT COLOR="FUCHSIA"> Colores en el Web </FONT> </H1> ya podemos decir que sabemos poner colores en las páginas Web, <FONT COLOR="green"> verde </FONT>, <FONT COLOR="blue"> azul </FONT> <FONT COLOR="red"> rojo </FONT>, etc. Ninguno se nos resiste.

                      

                           BIENVENIDOS

HISTORIA

Primeros años

Rafael Orozco nació en Becerril el 24 de marzo de 1954, en el hogar de "Rafita" Orozco y Cristina Maestre, compuesto por trece hermanos, cinco hombres y ocho mujeres. Desde niño realizó labores menores para contribuir con la supervivencia de una familia numerosa. Montado en el burro "El Ñato" vendía agua que recogía en el río Maracas. Inicialmente quiso ser acordeonero como su padre. También cantaba rancheras que aprendía en películas mexicanas exhibidas en el teatro del viejo Juan, y baladas de Yaco Monti, en esa época su cantante preferido.^1 2

Orozco Maestre se dio a conocer como una alternativa moderna en el canto vallenato, integrando conjuntos de oportunidad con los acordeoneros Julito de la Ossa, y Luciano Poveda, con quienes consolidó su propio estilo, diferente del que en esos momentos se imponía en el gusto de los seguidores del vallenato clásico, que estaba representado por "Los playoneros del Cesar", "Bovea y sus vallenatos", Alfredo Gutiérrez, Jorge Oñate, Los Hermanos Zuleta, entre otros.¹

Adelantó estudios secundarios en el Colegio Nacional Loperena de Valledupar y en una Semana Cultural resultó vencedor en una confrontación artística ante personajes como Juvenal Daza, Octavio Daza, Adalberto Ariño y Diomedes Díaz, quien en el evento interpretó "Cariñito de mi vida", un tema que Rafael Orozco hizo famoso y que fue su primer éxito, grabado con Emilio Oviedo en 1975.^1 2

Bajo el entusiasmo del éxito alcanzado, Rafael Orozco aceptó ser el cantante de Luciano Poveda y su conjunto, pero solo para animar fiestas privadas, pues nunca alcanzaron a grabar. Después estuvo brevemente con Julio De la Ossa igualmente sin grabar. Orozco grabó por primera vez con el acordeonero Emilio Oviedo en 1975.

Vida personal

Rafael Orozco y Clara Cabello.

Rafael Orozco se casó Clara Elena Cabello (Urumita, Guajira) en la iglesia de Santa Bernardita de Barranquilla, el 5 de marzo de 1976. Con Clara Cabello tuvo tres hijas, Kelly Johanna, Wendy Yurany y Loraine.^4 5

Orozco era aficionado al fútbol, hincha del Junior y de la Selección Colombia.

Orozco estudió varios semestres de administración de empresas en la Universidad Autónoma del Caribe antes de dedicarse por completo a la música.²¹