Programación Web - HTML (VII) - [ HOME ]

Nuestra “HOME”

home.html

Empecé por el final, es decir, mostrando como quedará muestra “home.html”.
La razón de que así sea es por que hay elementos dentro del HTML que aún no he explicado y es una oportunidad genial para hacerlo.

Empecemos…

Lo que puede verse al final de la home (la imagen que dice W3C) es algo muy importante y es en realidad el objetivo de este post.
Esa imagen demuestra que ese documento HTML fue validado por la W3C (eso mismo puede leerse en la home, pues ahí lo aclaro).
La W3C (World Wide Web Consortium) es el organismo que regula los estándares del HTML, CSS, entre otros.
Ella es la que define como se deben abrir y cerrar las etiquetas, cuando usar el “ />” del que tanto hablamos con anterioridad. En definitiva es la entidad que nos dirá como hacer las cosas y nos informará de nuestros errores, si es que así se lo pedimos.
Pero ustedes se preguntarán ¿para que validar mi web?.
La respuesta es muy simple, una web aprobada por la W3C significa que esta cumple con todos los estándares y por ende debería funcionar igual en cualquier navegador, aunque no siempre es así por eso el “debería”.

Dicho esto comencemos con las aclaraciones y agregados para este post.

Comenzaré detallando las cosas que veremos a continuación que son nuevas para nosotros y en esta entrada del blog las aprenderemos:

• La definición de tipo de documento (<DOCTYPE>).
• Atributo “width” en Tablas.
• La etiqueta <meta>.
• La definición del juego de caracteres.
• La etiqueta <s>

• La etiqueta  <acronym>.
• La etiqueta <abbr>.
• Caracteres especiales en HTML.

No empezaré por el orden de la lista, eso solo era a modo ilustrativo, comenzaré con las mas simples para finalizar con las mas importantes.

El atributo “width” en las tablas

Como ya deben imaginar es igual al atributos width en las imágenes y otras etiquetas por ende iré directo a su sintaxis:

<table width=”800”>

---

La etiqueta <s>

Esta etiqueta sirve dentro del HTML para tachar el texto que este contenido dentro de ella, veamos un ejemplo visual de la página home:

Etiqueta <s>

Así es la sintaxis:

<s>si leen otros blogs especializados en el tema, tal vez, también</s>

---

La etiqueta <acronym>

Esta etiqueta es muy interesante y no es muy conocida. Podría decirse que funciona como el atributo “title” dentro de las imágenes, por el solo hecho de desplegar un tooltip con información, pero en este caso la etiqueta tiene como función informarle al usuario que significan determinadas siglas. Veamos un ejemplo visual tomado de la home:

Etiqueta <acronym>

 La sintaxis es la siguiente:

<acronym title=”Hipertexto Markup Language”>HTML</acronym>

El contenido del atributo “title” es el que se muestra en el tooltip.

---

La etiqueta <abbr>

Esta etiqueta es similar a la etiqueta <acronym> puesto que también despliega un tooltip con la información contenida en su atributo “title”. La diferencia radica en que <abbr> se utiliza para aclarar abreviaturas. Veamos un ejemplo visual tomado de la home:

Etiqueta <abbr>

La sintaxis es la siguiente:

<abbr title=”World Wide Web Consortium”>W3C</abbr>

Como dijimos anteriormente el contenido del atributo “title” es el que se muestra en el tooltip.

---

La etiqueta <meta>

La etiqueta <meta> se utiliza dentro de HTML para proporcionar meta-datos que poseen cierta información relevante en muchos aspectos. Esta información no será visible para el usuario dentro de la pagina, sin embargo y dependiendo de para que sea, si será tenida en cuenta, por ejemplo, por el navegador, por un buscador, etcétera.
En esta etiqueta se puede ingresar, por ejemplo, el nombre del autor de la página, las keywords o palabras claves, el juego de caracteres que utilizara el documento HTML, etcétera. Más adelante las iremos viendo a medida que las vayamos necesitando.

---

Definición del juego de caracteres

Como será la primera vez que veamos la utilización de la etiqueta <meta> y para no extendernos demasiado en el asunto iremos directo al código y explicaremos solo lo que respecta al juego de caracteres quizás mas adelante, y en caso de necesitarlo, no extendamos mas en el asunto.
Esta es la sintaxis para definir el juego de caracteres a UTF-8, este formato es capaz de representar cualquier carácter Unicode así como también incluye la especificación US-ASCII de 7 bits, por lo que puede representar cualquier mensaje ASCII sin cambios.
Es la codificación “favorita” de correos electrónicos y paginas web.
La sintaxis es la siguiente:

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”>

---

Definición del Tipo de Documento [DOCTYPE]

El DOCTYPE es una etiqueta que debe escribirse antes que cualquier otra, en nuestro caso antes que la etiqueta <html>.
Esta etiqueta tiene como función informarle a nuestro navegador que versión del lenguaje de marcado (HTML) estamos usando, así como también proporcionarle la referencia al Documento de Definición de Tipo (Document Type Definition [DTD]). Este documento especifica las reglas para el lenguaje de marcado utilizado, para asé, el navegador, poder mostrar el contenido de la página correctamente.

A continuación les daré los tres tipos de DOCTYPE para HTML, mas adelante veremos otros.

DOCTYPE para HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

DOCTYPE para HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC “-//W3C/DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
 
DOCTYPE para HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC “-//W3C/DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>

Para nuestra “home.html” utilizamos el HTML 4.01 Transitional

Ahora bien, pero ¿Por qué hay mas de uno?.
La razón es muy simple, con el paso del tiempo los estándares de la W3C van cambiando, sin embargo, otros se mantiene.
Es muy común que cosas que antes se utilizaban mucho después de un tiempo dejan de funcionar o se declaren obsoletas pero para que de pronto todas las paginas que validaban no se queden sin validar existen diferentes DTD.

El DTD para HTML Strict es el que NO permite etiquetas que se hayan declarado en desuso por la W3C, como ejemplos de estas tenemos a <font> una etiqueta que veremos próximamente y sirve para cambiar la fuente del texto.
Este tipo de etiquetas (etiquetas de estilo de párrafo) cayeron en desuso cuando la W3C acepto como nuevo estándar para el diseño de páginas web al CSS.
Pero para todos aquellos que aun no habían comenzado con el CSS y aun poseían sus clásicas etiquetas de <font> se les recomienda utilizar el DTD para HTML Transitional. Este DTD lo podemos usar cuando tenemos páginas viejas y de a poco vamos introduciéndonos en los nuevos estándares, este DTD nos permite convivir lo nuevo con lo viejo., sin embargo no nos permite el uso de Frames
El DTD para HTML Frameset es igual que el Transitional con la diferencia de que este sí permite Frames (Marcos), algo que ya es sumamente obsoleto y no gastaré tiempo en explicarlo.

---

Caracteres especiales en HTML

En pocas palabras podemos decir que los caracteres especiales de HTML son aquellos que utilizamos mediante códigos.
Un ejemplo de carácter especial podría ser por ejemplo “ó” (O acentuada). Parece algo trivial, sin embargo, anteriormente cuando no existían los juego de caracteres extendidos para el español debíamos utilizar los códigos específicos para HTML con el fin de que el navegador los entienda.
Hoy mediante la utilización de UTF-8 ya no tenemos esa clase de problemas pero de todas formas le mostraré lo siguiente:

La siguiente imagen es de un HTML que no tiene definido el juego de caracteres a UTF-8 vean lo que sucede cuando tratamos de utilizar acentos:

Sin definición de caracteres
 

Fíjense que el primer “también” sí esta acentuado mientras que el segundo y el “así” se ven de una forma extraña.

Veamos el mismo ejemplo pero habiendo definido el juego de caracteres a UTF-8

Con definición de caracteres

 
En este caso ambos “también” como el “así” se ven de manera correcta.

Entonces ustedes me preguntarán ¿Entonces si con UTF-8 se ven bien los acentos para que hacer este apartado?.
Bueno, quizás podríamos decirle “nostalgia”.

Pero en fin a continuación veremos una tabla reducida, puesto que hay muchos símbolos, de los mas “populares”.
Dato a tener en cuenta: cada código comienzo con “&” y finaliza con “;”.

Nombre	Codigo	Simbolo
Copyright	©	©
Registrado	®	®
C Cedilla	Ç	Ç
c Cedilla	ç	ç
A acentuada	Á	Á
a acentuada	á	á
E acentuada	É	É
e acentuada	é	é
I acentuada	&Iacute	Í
i acentuada	í	í
O acentuada	Ó	Ó
o acentuada	ó	ó
U acentuada	Ú	Ú
u acentuada	ú	ú
U con diéresis	Ü	Ü
u con diéresis	ü	ü
N con tilde	Ñ	Ñ
n con tilde	ñ	ñ
Menor que	&lt;	<
Mayor que	&gt;	>

Como pueden observar la terminación “acute” acentúa la vocal que este delante de ella.

El “Menor que” y “Mayor que” son muy importantes puesto que si se quieren mostrar en un HTML no pueden usar directamente el símbolo “< ó >” por que el navegador los tomará como delimitadores de etiquetas y puede llegar a generar grandes problemas en la carga de la página, por ende, siempre que quiera utilizar el “menor que” o “mayor que” de manera tal que no funcione como delimitador de etiqueta por ejemplo “2 < 3” deben escribir en HTML lo siguiente:

“2 &lt; 3”

---

Y con eso llegamos al final. A continuación les daré el código fuente de la “home.html” y ustedes solos con todo lo visto anteriormente deberían ser capaces de entender.
Todo lo que explicamos hoy se utiliza dentro de el siguiente código por lo tanto si hay algo que no hayan entendido reléanlo y si aún continúan sin entender pregunten.

Código de “HOME”


<!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=utf-8">
<title>Titulo</title>
</head>
<body bgcolor="black" link="olive" vlink="red" alink="green" text="white">
<table width="800" border="1">
<tr>
<td><img src="encabezado.jpg" alt="encabezado" title="encabezado"></td> <!-- Encabezado -->
</tr>
<tr>
<td align="center"><p>| <a href="home.html">Home</a> | <a href="articulos.html">Art&iacute;culos</a> | <a href="yomismo.html">Quienes soy</a> | <a href="contacto.html">Contacto</a> |</p></td> <!-- Menu -->
</tr>
<tr>
<td><h1>Bienvenidos a Programando el Destino</h1><br>
<h2>El lugar donde encontraras informacion sobre el desarrollo web.</h2>
<p>Hemos comenzado publicando sobre <strong><acronym title="HyperText Markup Language">HTML</acronym></strong> puesto que es lo primero que se debe aprender para iniciarse en el mundo del <em>desarrollo web</em>. Sin embargo mas adelante veremos <strong><acronym title="Cascading Style Sheets">CSS</acronym></strong>, <strong><acronym title="eXtended HyperText Markup Language">XHTML</acronym></strong> y por supuerto lenguajes de programacion muy poderosos que nos permitirar agilizar tiempos de desarrollo, mejorar las prestaciones y un enorme etc de posibilidades.<br>
Por eso no se pierdan las futuras entradas de este <em>blog</em> por que de seguro les van a servir.<br>
Tambi&eacute;n he de mencionar que cualquier consulta que tenga o inconveniente en el aprendizaje con este <em>blog</em> por favor comenten puesto que así también contribuyen a mejorar este proyecto que esperemos de buenos frutos.<br><br>
Acompa&ntilde;ame a descubrir las maravillas del <em>desarrollo web</em> en donde el interior de "&lt;" y "&gt;" es la magia del <strong><acronym title="HyperText Markup Language">HTML</acronym></strong><br><br>
Y recuerden, si leen este <em>blog</em> aprender&aacute;n a dise&ntilde;ar p&aacute;ginas validadas por la <strong><abbr title="World Wide Web Consortium">W3C</abbr></strong>. <s>si leen otros blogs especializados en el tema, tal vez, tambi&eacute;n.</s><br><br>
Y como demostraci&oacute;n de lo que anteriormente les dije aqu&iacute; esta el "distintivo" que la w3 me di&oacute; por que mi web est&aacute; validada:<br><br>
<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Transitional" height="31" width="88"></a><br><br></p>
<h4>Bueno, esto es todo por el momento. Hasta la pr&oacute;xima.<h4></td> <!-- Cuerpo -->
</tr>
<tr align="center">
<td>&reg; Todos los derechos reservados - &copy; 2011</td> <!-- Pie -->
</tr>
</table>
</body>
</html>

---

Les adjunto el código escrito en un editor de texto pues quizas, por estar tabulado, les resulte mas comodo leerlo.

Código home.html

Por cierto antes de que me olvide, una cosita mas...

Comentarios en HTML

Para realizar un comentario en HTML deben utilizar la siguiente sintaxis:

<!-- Este es un comentario -->

Es decir, para comenzar un comentario hay que utilizar "<!-- " [Menor Que - Exclamación Cerrada - Menos - Menos - Espacio ] luego todo lo que quieran que quede como comentario y finalizar de la siguiente manera " -->" [ Espacio - Menos - Menos - Mayor Que ].
 
 Ahora si hasta la próxima.

Programación Web - HTML (VI) - [ IMAGENES ]

Imágenes

Como el subtitulo lo indica el tema a tratar ahora son las imágenes, y buen momento elegimos para hacerlo puesto que si ya leyeron todas las entradas anteriores de este blog sobre HTML con esto ya pueden comenzar a hacer, casi en su totalidad, su web.Claro que aun faltan detalles como las fuentes tipográficas, el tamaño, delimitar un poco mejor las tablas y un gran etc. sin embargo ya tiene bastante información como para comenzar.

Pero comencemos con lo que nos compete en este post, es decir, las imágenes.

Primer quiero mostrarles un ejemplo de como quedará el código que luego detallare:

Utilizando una imagen en un HTML

Como pueden ver, en el documento HTML hemos insertado una imagen.
La daré a continuación la imagen utilizada por si desea practicar utilizando la misma:

Imagen de ejemplo

Ahora si comencemos con el código del HTML:

Para poder insertar una imagen dentro de un documento HTML hay que usar la etiqueta <img>.
Ahora bien, solo con eso no alcanza debemos comenzar a utilizar los atributos de esa etiqueta, el primero y mas importante es "src" (Source/Recurso). Este atributo lleva como valor una ruta, ya sea absoluta o relativa, de la imagen en cuestión.
En el ejemplo de arriba utilizo una ruta relativa puesto que la imagen esta al lado del documento HTML:

La imagen se encuentra al mismo nivel que el documento HTML

Es decir que nuestro código queda de la siguiente manera:

<img src="Dibujo.jpg" />

Observen la terminación de esta etiqueta, se darán cuenta que termina igual que la regla o el salto de linea, es decir, <hr /> o <br /> respectivamente.
Lo que me olvide de mencionar es que realmente en HTML las etiquetas son <hr>, <br> y <img>.
Pero entonces ¿Por que las cierro al final?
La respuesta es simple, porque les estoy enseñando XHTML en ese caso, por que en realidad hacia allí vamos, con el paso del tiempo iré enseñándoles XHTML en lugar de HTML y todos los atributos referidos a diseño dejaran de existir para comenzar a usar CSS, por lo cual, les estoy enseñando de a poco hacia donde esta yendo la tecnología de desarrollo web, sin embargo, también les enseño de donde viene. Esta es la razón por la que se los enseño con " />" y cuando veamos Doctype veremos bien que corresponde a cada uno.
Por el momento acostúmbrense a usar " />" es decir [ Espacio - Barra - Mayor Que ].

Continuemos...

Pero no solo termina ahí nuestra linea de código, si miran con atención como se ve en el navegador notarán que la imagen tiene un recuadro negro y además su tamaño no es el original, esto se debe, a que hemos modificado la imagen mediante otros atributos de la etiqueta <img>.


El borde ya deben saber como se realiza, pero por si no lo recuerdan se los refresco, mediante el atributo "border", en este caso con un valor de "1". Por ende nuestra etiqueta queda así:

<img src="Dibujo.jpg" border="1" />

Pero también hemos modificado el ancho y el alto de la imagen y esto se hace mediante los atributos "width" y "height", es decir, ancho y alto respectivamente.
En este caso hemos establecido a ambos atributos con un valor de "200" quedando nuestra etiqueta de la siguiente manera:

<img src="Dibujo.jpg" border="1" width="200" height="200" />

Ahora les enseñaré dos atributos mas que son recomendables utilizarlos siempre y estos son "alt" y "title". Veamos un ejemplo visual antes de detallarlas:

Utilizando los atributos "alt" y "title"

Como pueden ver, una de las imágenes no se ve y en lugar de ella hay un texto que dice "descripción alternativa de la imagen", en cambio, la otra imagen si se ve y tiene un tooltip (descripción emergente) con la leyenda "es una cara feliz".

El primer caso, es decir, la imagen que no se ve utiliza el atributo "alt" este es un texto alternativo que se muestra cuando la imagen no puede ser cargada o es leído por el sistema operativo en caso de que este esté configurado, por ejemplo, para personas no videntes que escucharán este texto alternativo.

Su sintaxis es la siguiente: 

<img src="imagen.jpg" alt="descripción alternativa de la imagen" /> 


En el segundo caso tenemos un cuadro emergente sobre la imagen con un texto descriptivo, este aparecerá cuando el usuario pose su mouse sobre la imagen y lo deje sobre ella por unos segundos.

Su sintaxis es la siguiente:

<img src="Dibujo.jpg" title="es una cara feliz" /> 


Bien, hay algunos atributos mas, pero los iremos viendo mas adelante en caso de necesitarlos, por el momento dejamos acá sin antes mencionar o mejor dicho recordar, si es que ya lo escribí antes, que las etiquetas <img> deben tener siempre los atributos "alt" y "title", no es una "obligación" pero si es una buena practica ya que los necesitaremos en un futuro para poder validar nuestros HTML.


Y ahora sí hasta acá llegamos, en la próxima entrega comenzaremos a mezclar diferentes elementos del HTML con el objetivo de crear una "home".

Programación Web - HTML (V) - [ ATRIBUTOS ]

Atributos

 
Como pueden leer en el titulo en esta entrada del blog nos dedicaremos exclusivamente a la aplicación de atributos a diferentes etiquetas del HTML.

 Como anteriormente dije los atributos son "propiedades" que tienen las etiquetas y al especificarle un valor distinto al por defecto podremos mejorar la estética, maquetado, diseño, etc. de una página web.
 Un ejemplo de atributo pueden verlo en la parte de las tablas cuando establecimos al atributo "border" el valor "1".

Debo aclarar de antemano que muchas de las cosas que veremos a continuación han caído en desuso, sin embargo, es necesario que las conozcan puesto que servirá para que estén preparados por si algún día se enfrentan con un HTML que fue creado hace mucho tiempo.

Comencemos…

Atributos para la etiqueta Body

 
La etiqueta <body> tiene ciertos atributos que permiten definir por ejemplo el color de fondo, el color del texto y el color de los links de todo el documento.

Para definir el color de fondo del documento HTML que estamos editando debemos utilizar el atributo "bgcolor". Este atributo puede recibir valores de tres formas posibles a saber:
Mediante un código de color RGB, mediante un código de color en Hexadecimal o mediante el nombre de un color preestablecido. Ejemplo:

Para que el color de fondo del documento sea Rojo tenemos tres formas de hacerlo:

En Hexadecimal: <body bgcolor="#FF0000">
En RGB: <body bgcolor="rgb(255,0,0)">
Por el Nombre: <body bgcolor="red">

Al igual que el fondo, de la misma manera se puede establecer el color que tendrá el texto dentro de documento HTML. Esto se hace mediante el atributo "text" y su valor, al igual que en "bgcolor", se puede escribir de tres formas distintas.
Supongamos que quiero que el color del texto sea blanco para qué contraste con el color rojo de fondo el código quedaría de la siguiente manera:

En Hexadecimal: <body bgcolor="#FF0000" text="#FFFFFF">
En RGB: <body bgcolor="rgb(255,0,0)" text="rgb(255,255,255)">
Por el Nombre: <body bgcolor="red" text="white">

Otros posibles nombre de colores:

Red – Pink – Yellow – Gold – Purple – LightGreen – Green – Olive – Blue – DarkBlue – Navy – Brown – White – Silver – Gray – Black.

Existen muchos más, sin embargo, estos son los más utilizados.

Ejemplo visual de una página con fondo rojo y color de texto blanco:

Fondo en Rojo y Texto en Blanco

 

---

Definición de los colores de los Links de una página web.

 
Como ya se habrán dado cuenta, los links en una página web tienen varios colores dependiendo de factores como ser: Link visitado, Link no visitado, Link activo.
Este arcoíris de colores puede ser alterado mediante tres atributos que se definen en el <body> estos son: alink (Link Activo), link (Link no visitado), vlink (Link Visitado).
Al igual que los otros dos atributos de <body> la manera de establecerle un valor a los atributos de links es mediante un código hexadecimal, rgb o nombre de color.

El siguiente ejemplo establece que los links no visitados son verdes, los visitados son rojos y el activo gris. Veamos el código de esto:

<body link="green" vlink="red" alink="gray">

Así se ve en un navegador:

Utilizando los Atributos alink, vlink y link

Pagina y Pagina2 son links visitados, Pagina3 es un link no visitado y Pagina50 es el Link en el cual el usuario esta clickeando, es decir, el Link activo.

A parte de la forma que utilizamos (que es mediante el nombre de color) existen dos formas más de escribir lo mismo:

Hexadecimal: <body link="#008000" vlink="#FF0000" alink="#808080">
RGB: <body link="rgb(0,128,0)" vlink="rgb(255,0,0)" alink="rgb(128,128,128)">

 
Aclaración: "Link Activo" se denomina cuando el usuario clickea sobre un link y mantiene presionado el botón del mouse, este se pondrá del color que se definió en vlink, sin embargo desaparecerá cuando suelte el click.

---

Imagen de fondo para un HTML

 
 Finalmente llegamos al atributo "background", este atributo permite definir como fondo del documento a una imagen específica.
Su sintaxis es la siguiente:

 
<body background="fondotexto.jpg">

Utilizando el Atributo Background

En este caso utilizamos como imagen de fondo a una imagen utilizada más arriba en el post.

Hasta acá llegamos por ahora, en la próxima entrega seguiremos viendo mas atributos.

Programación Web - HTML (IV) - [ LISTAS ]

Listas ordenadas, desordenadas, etc.

En HTML tenemos unas etiquetas que nos permiten definir listas de elementos.
Estas tienen un sin fin de utilidades y muchas veces se las utilizan con anclas, como si fuesen submenues de la misma pagina que se esta viendo, algo así como un cuadro de contenido.

Veamos un ejemplo:

Diferentes tipos de Listas en HTML

Como puede observarse en la imagen existen varios tipos de listas.
La primera se denomina lista sin orden o lista desordenadas, la segunda se denomina lista ordenada y finalmente la tercera se denomina lista de definición.

El código de la primer lista es el siguiente:

Lista Desordenada:

<ul>
   <li>Elemento 1</li> 
   <li>Elemento 2</li> 
   <li>Elemento 3</li>
</ul>  

Como puede verse hay una etiqueta que funciona como grupo que es el <ul> (Unordered List) y dentro cada elemento se determina con un <li> (List Item)

El código de la segunda lista es el siguiente:

Lista Ordenada:


<ol>
   <li>Elemento 1</li> 
   <li>Elemento 2</li> 
   <li>Elemento 3</li>
</ol>  

Como puede verse hay una etiqueta que funciona como grupo que es el <ol> (Ordered List) y dentro cada elemento se determina con un <li> (List Item)
A diferencia de la lista desordenada esta lista posee al lado de cada elemento un numero correlativo que las mantiene ordenadas.


El código de la tercer lista es el siguiente:

Lista de Definición:

<dl>
   <dt>Termino 1</dt>
      <dd>Definicion 1</dd>
   <dt>Termino 2</dt> 
      <dd>Definicion 2</dd>
</dt>  

La lista de definición es utilizada para definir diferentes términos como podría hacerlo un diccionario.
Para utilizarlas primero debemos agruparlas dentro de un <dl> (Definition List). Cada termino a definir va dentro de un <dt> (Definition Term) y a su vez cada descripción va dentro de un <dd> (Definition Description).

Símbolos delante de las Listas


Lo que veremos a continuación ya ha caído en desuso sin embargo como aun no veremos CSS se los explicaré para darle mas estilo a las listas.
Tanto las listas ordenadas <ol> como las listas desordenadas <ul> poseen un atributo llamado "Type" que permiten determinar el símbolo que representará a cada elemento. A continuación veremos unos ejemplos para las listas ordenadas:

Símbolos en Listas Ordenadas

Como puede verse hay distintos tipos de símbolos a continuación veremos los códigos respectivos:

A la etiqueta <ol> debe anexarse el atributo "type" quedando de la siguiente forma:

<ol type="">

Dentro de las comillas ("") debe escribirse el valor que tendrá el atributo a saber:

Para que el orden sea dado por números (1,2,3...) debe usarse el valor "1" [Este es el default, de quererlo no es necesario usar el Type] .
Para que el orden sea dado por letras mayúsculas (A,B,C...) debe usarse el valor "A". 
Para que el orden sea dado por letras minúsculas (a,b,c...) debe usarse el valor "a". 
Para que el orden sea dado por números romanos [en mayúscula] (I,II,III...) debe usarse el valor "I".  
Para que el orden sea dado por números romanos [en minúscula] (i,ii,iii...) debe usarse el valor "i". 

Ejemplos:
Números:                <ol type="1">
Letras Mayúsculas:  <ol type="A">
Letras Minúsculas:   <ol type="a"> 
N. Romanos Mayus: <ol type="I"> 
N. Romanos Minus:  <ol type="i">

Ahora bien, las listas desordenadas también pueden tener sus propios símbolos, veamos un ejemplo visual para luego aprender el código:

Símbolos en Listas Desordenadas

Como se puede ver las listas desordenadas tienen menos valores posibles sin embargo para lo que representan son bastante pintorescos.
Veamos el código en HTML para cada caso:



A la etiqueta <ul> debe anexarse el atributo "type" quedando de la siguiente forma:

<ul type="">

Dentro de las comillas ("") debe escribirse el valor que tendrá el atributo a saber:

Para que los símbolos sean círculos llenos debe usarse el valor "disc" [Este es el default, de quererlo no es necesario usar el Type] .
Para que los símbolos sean cuadrados llenos debe usarse el valor "square". 
Para que los símbolos sean círculos vacíos debe usarse el valor "circle". 


Ejemplos:
Círculos Llenos:       <ul type="disc">
Cuadrados Llenos:  <ul type="square">
Círculos vacíos:       <ul type="circle"> 


Bien hasta aquí llegamos con las listas, continuaremos la próxima entrega con nuevos y viejos temas del universo HTML.

Programación Web - HTML (III) - [ LINKS ]

Links y más Tablas

Como mencioné anteriormente aún queda mucho que decir con respecto a los Links y las Tablas y por ello dedicaré esta tercer entrega de HTML a este tema.

Los Links dentro de un HTML son uno de los elementos esenciales por que permiten asociar e informar al navegador a donde tiene que ir buscar el documento HTML para mostrar la información que el usuario requiere.

Por lo cual debemos aclarar que existen 2 formas de utilizar los links y esto son "Links Relativos" o "Links Absolutos".
Generalmente los mas usados son los relativos puesto que se utilizar para llamar a documentos HTML dentro del mismo servidor, mientras que los absolutos son links completos de direcciones de web.
Pero basta de palabras y vamos con ejemplos:

Supongamos que nosotros tenemos la siguiente distribución de archivos:

Así es como ustedes deberían tener su web (o al menos es lo recomendable).
Como pueden ver al mismo nivel que el archivo "Index" existen otros como "Empresa", "Productos", etc.

Aclaración principal: El archivo "index.html" es el archivo que se muestra cuando uno ingresa a una página (en realidad depende del servidor en donde se "instale" la web puesto que algunos requieren de un archivo llamado "home.html". Por lo cual deben verificar que solicita su server para que la gente pueda ingresar a su web [Mas adelante detallare todo este tema, por el momento solo lo menciono]).


Lo que haré a continuación es crear una tabla de links hacia todos los elementos de esta web:

<html>
  <head>
     <title>Links</title> 
  </head> 
  <body>
     <table border="1">
        <tr>
           <td><a href="index.html">Index</a></td> 
           <td><a href="empresa.html">Empresa</a></td> 
           <td><a href="productos.html">Productos</a></td> 
           <td><a href="contacto.html">Contacto</a></td> 
           <td><a href="http://www.programandoeldestino.blogspot.com">Programando el Futuro</a></td> 
        </tr>
     </table>
  </body>
</html>

Visualmente queda así:

En este ejemplo vemos los dos tipos de links.
Links Relativos: Son los dirigidos a index.html, empresa.html, productos.html y contacto.html
Links Absolutos: Es el dirigido a http://www.programandoeldestino.blogspot.com

Como pueden ver los links relativos son mucho mas cortos, esto se debe a que omiten el protocolo y el servidor.
Esto se debe a que el navegador entiendo que se refiere a un link relativo cuando carece de estas características y toma automáticamente las del sitio actual. Es decir, que si estoy dentro de mi sitio "http://www.misitio.com" visualizando la pagina index.html y el link es hacia empresa.html y el código será <a href="empresa.html"> y el navegador tomará el protocolo (http) y el servidor (www.misitio.com) del sitio actual donde está navegando.

En cambio al encontrarse con  "http://www.programandoeldestino.blogspot.com" redirige directamente al servidor determinado con el protocolo establecido en el link.

Los links pueden tener mas partes ademas de protocolo y servidor, estos son "ruta", "consulta/parámetro" y "sección".

Quizás en un comienzo no necesitemos de ellos pero esta bien mencionarlos.
Los links con ruta permiten especificar dentro de un sitio un archivo determinado a mostrar por ejemplo: http://www.misitio.com/empresa.html.
La "ruta" del link es "/empresa.html" puesto que si nosotros solo escribimos "http://www.misitio.com" iremos a "index.html" en cambio de la manera del ejemplo iremos directamente al archivo "empresa.html", practico y simple.

La "consulta/parámetro" es utilizada con lenguajes de programación mas complejos como puede ser un php, asp, etc. Un ejemplo podría ser:
http://www.misitio.com/productos.php?id=12
Como pueden observar luego de la extensión ".php" esta escrito lo siguiente "?id=12" esto significa que la "variable" id tiene el valor de "12". Esto es muy utilizado en programación web pero para el HTML no se explota demasiado.

Por último la "sección" si se utiliza en HTML y funciona con anclas.
Lo que permiten hacer estos links es dirigir al usuario a un sector determinado de un documento HTML en lugar de cambiar de documento.
Ejemplo:

<html>
   <head>
      <title>Links Anclas</title>
   </head>
   <body>
      <a href="#ancla1">Ancla 1</a>
      <a href="#ancla2">Ancla 2</a>
      <a href="#ancla3">Ancla 3</a>
      <br />
      <a name="ancla1"><h2>Ancla 1</h2></a>
      <p>Aqui esta el Ancla 1</p>
      <br />
      <br />
      <br />
      <hr />
      <a name="ancla2"><h2>Ancla 2</h2></a>
      <p>Aqui esta el Ancla 2</p>
      <br />
      <br />
      <br />
      <hr />
      <a name="ancla3"><h2>Ancla 3</h2></a>
      <p>Aqui esta el Ancla 3</p>
      <br />
      <br />
      <br />
      <hr />
   </body>
</html>

Primero necesito aclarar dos nuevas etiquetas "<br />" y "<hr />"
"BR" es salto de linea mientras que "HR" es una regla horizontal. La terminación " />"  [Espacio Barra Mayor Que] se debe a que son etiquetas únicas que no se abren y cierra, solo se utilizan una vez y se cierran cuando se las usa de esa manera, es decir, en lugar de que exista "<hr></hr>" solo se utiliza "<hr />" o sea abre y cierra.


Este ejemplo será mas visual si cuantos mas <br /> o texto haya entre cada Ancla.

Ahora bien, las anclas cuentas de dos partes la primera un link con el nombre y por otra parte un link convocando al ancla.

En el ejemplo el link  <a href="#ancla1"> significa para el navegador "ve al sector donde esté el ancla1" y el link <a name="ancla1"> significa "acá esta el ancla1".

En conclusión para determinar donde esta el ancla se utiliza el atributo "name" y para llamar a un ancla por su nombre se utiliza el atributo "href" siempre iniciado con el numeral(#) continuado del nombre del ancla ("#nombreancla).

Así queda visualmente las anclas:

Para que el efecto del ancla funcione utilicen mas <br /> o inserten mas texto entre cada ancla o en su defecto achiquen el tamaño de su navegador para que no llegue a verse toda la pagina, para así observar como se posiciona la pagina dependiendo del ancla que se elija.


Si desean anclar un link, es decir, que cuando el usuario clickee en él vaya directamente a un sector determinado de la pagina el código es el siguiente:


<a href="empresa.html#nuestraempresa">Nuestra Empresa</a>


Una vez que el usuario clickee sobre "Nuestra Empresa" el navegador irá a ese archivo HTML y se ubicará en el sector que tenga un ancla cuyo valor "name" sea "nuestraempresa", ejemplo:


<a name="nuestraempresa">Nuestra Empresa</a>




Eso es todo, hasta la próxima entrega.

Programación Web - HTML (II) - [ TABLAS ]

Continuemos con el aprendizaje...

Ahora veremos un elemento de HTML que fue fundamental en el desarrollo web y que actualmente tomo su correspondiente lugar, pequeño a comparación de su anterior utilización pero muy muy importante.
Estas son las Tablas que anteriormente se utilizaron para maquetar documentos HTML (hay gente que aun sigue utilizándolas) pero realmente debe ser utilizadas como un elemento de organización de información basándose en filas y columnas y no como un elemento maquetador.

Un ejemplo de una buena utilización de las tablas es para mostrar las notas de un alumno en los diferentes periodo de clase. Vamos a realizar ese ejemplo:

Tablas en HTML

Para que una tabla se muestre como tal (Conjunto de filas y columnas) se necesitan 3 etiquetas anidadas, estas son <table>, <tr> y <td> (existe otra que la veremos en el ejemplo).

Para que los navegadores entiendan que utilizaremos una tabla debemos comenzar la introducción con la etiqueta <table> y finalizarla con </table>.
Para dibujar una Fila debemos utilizar las etiquetas <tr></tr>.
Para dibujar una Celda debemos utilizar las etiquetas <td></td>

Dicho esto haremos el ejemplo de las notas del alumno:

<table>
   <tr>
      <th>1 Trimestre</th>
      <th>2 Trimestre</th> 
      <th>3 Trimestre</th> 
   </tr> 

   <tr>
      <td>10</td>
      <td>08</td> 
      <td>09</td> 
   </tr> 
</table> 

En el ejemplo puede verse una etiqueta que no fue explicada, esta es la <th> que es similar al <td> con una diferencia, la etiqueta <th> se usa como Celda de encabezado de table, esto hace que por default aparezca en negrita haciendo mas visible a los mismos.

Así quedará el código para poder verlo en un navegador:

<html>
   <head>
      <title>Tablas</title>
   </head>
   <body> 
      <h1>Tabla de Promedios</h1>
      <h2>Alumno: NombreAlumno</h2> 

      <table>
         <tr>
            <th>1 Trimestre</th>
            <th>2 Trimestre</th> 
            <th>3 Trimestre</th> 
         </tr> 
         <tr>
            <td>10</td>
            <td>08</td> 
            <td>09</td> 
         </tr> 
      </table> 
   </body>
</html> 

Visualmente se ve así:

Tabla Básica

Ahora bien, la tabla no parece realmente una tabla puesto que faltan sus delimitadores, para ello comenzaremos a utilizar los "atributos" estos se escriben detro de las etiquetas y tiene asignado un valor.
A continuación estableceremos que la tabla anteriormente utilizada tendrá un borde de 1 px lo que permitirá visualizar sus limites.

Solo hay que escribir dentro de la etiqueta <table> lo siguiente:
border="1" 

Quedando la etiqueta de la siguiente manera:
<table border="1">

Lo que aquí establecemos es que el atributo o propiedad "border" tendrá el valor "1". Los valores siempre deben escribirse entre comillas ("").

Resultado visual:

Tabla con Bordes

Ahora si parece una tabla... 

---

Maquetar un HTML con la manera antigua (mediante Tablas)

Aclaración: Esto ya no debe hacerse pero como aún no los introduciré en el mundo de los Divs y del CSS (Cascading Style Sheet) les mostraré como maquetar un HTML de la manera tradicional, es decir, Encabezado, Menú, Cuerpo y Pie.

Para poder hacer eso necesitamos una tabla con 4 filas cada una tendrá una porción del diseño.
Dentro del sector "Encabezado"  solo pondremos el Titulo de la web, mas adelante veremos como agregar una imagen para encabezados mas bonitos.
En el "Menu" pondremos algunos Links, esto me permitirá explicar este tema que es la base del HT es decir HyperText. 
El "Cuerpo" llevara la información de la página que se este consultando.
Y finalmente el "Pie" solo llevara un copyright o algo similar.

Manos a la obra...

<html>
   <head>
      <title>Maquetacion con Tablas</title>
   </head>
   <body>
      <table border="1">
         <tr>
            <td><h1>Programando el Destino</h1></td> 
         </tr> 

         <tr>
            <td><p><a href="#">Home</a> | <a href="#">Articulos</a> | <a href="#">Links</a></p></td> 
         </tr> 

         <tr>
           <td><h2>Tablas</h2>
            <p>Las Tablas son un elemento del HTML... bla bla bla</p></td> 
         </tr> 

         <tr>
            <td><h5>2011 - Todos los Derechos...</h5></td> 
         </tr> 
      </table>
   </body>
</html> 

Este documento HTMl se verá de la siguiente manera:

Obviamente que la propiedad "border" debe ir en "0", solo esta en "1" para que puedan ver donde esta la tabla.

Pero antes que me olvide les explicaré el tema de los Link que pueden verlo en donde estan las palabras "Home", "Articulos" y "Links"
Para realizar un Hipervínculo en HTML se necesita la etiqueta <a></a> todo lo que esta etiqueta contenga dentro de ella será tomado como hipervínculo y por default aparecerá subrayado y en color azul.
Pero, para que el hipervínculo tenga sentido nosotros debemos determinar a donde debe dirigirse el navegador una vez que el usuario clickee sobre el mismo.
Para ello utilizamos el atributo "href" este significa referencia de hipervínculo, es decir, a donde esta apuntando.
En el ejemplo el atributo tiene el valor "#" esto no significa nada por lo cual el navegador no hará nada, pero por ejemplo podemos asignarle a Link este mismo Blog por lo cual el hipervínculo quedara de la siguiente manera:

<a href="http://www.programandoeldestino.blogspot.com/">Link</a>

Una vez que el usuario clickee sobre el Link el navegador automáticamente lo dirigirá a este Blog. 

En próximas entregas me extenderé en el tema de los links puesto que es algo muy importante.
También veremos mas propiedades de las tablas que son esenciales para su optimo funcionamiento, pero creo que con esto es suficiente para comenzar a practicar.


Eso fue todo por esta segunda entrega de necesitar ayuda no tienen mas que pedirla.