HTML
Conceptos Basicos
HTML es el lenguaje con el cual se escriben documentos de hipermedia en Internet.
Notar que:
HTML es solo texto (es como programar un texto). Mediante comandos que insertamos en el texto, le decimos cómo queremos que se vea el texto.
Dentro de un texto HTML no importan los tabs ni saltos de línea. Se debe usar comandos como < P > ... < /P > y < BR > para que no quede todo en una sola línea.
Existen tres caracteres especiales: < > y & . Los caracteres < y > encierran a los comandos (tags) de HTML. EL & permite escribir caracteres especiales (acentos, mayor, menor, etc.)
Formato básico de una página HTML
< HTML >
< HEAD >
...
Encabezado de la página (titulo)
...
< /HEAD >
< BODY >
...
Cuerpo de la página
...
< /BODY >
< /HTML >
Sintaxis
Para fomentar una sólida compresión del HTML, miraremos la estructura del lenguaje propiamente dicho. El funcionamiento de la sintaxis del HTML es análogo a la sintaxis de la gramática española, pero, por supuesto, mucho más sencillo.
El HTML es en realidad un lenguaje muy lógico. Ciertamente, hay excepciones a las reglas, y hay modificaciones o interpretaciones de algunas de éstas. De todas formas, una vez que asimiles la estructura básica, empezarás a notar que el HTML es simplemente un conjunto de piezas lógicas que hacen de él un lenguaje muy cómodo de usar.
Por supuesto, está el tema que se comentó en el capítulo "Comprendiendo el HTML", de que el HTML es un lenguaje que evoluciona. Mientras que la evolución es un estado natural del HTML, estos cambios normalmente no afectan a las reglas básicas. Mientras que varios elementos de este lenguaje se hacen obsoletos y otros nuevos son añadidos, la sintaxis, o la estructura correcta, raramente sufren cambios.
Para comprender el concepto de sintaxis, piensa en una frase. Tu tienes un sujeto y un verbo. Los adjetivos y los adverbios se añaden para aportar cualidades y comportamiento, haciendo la frase más comprensiva.
El HTML es, en el fondo, no muy diferente a una simple frase. De hecho, los componentes del HTML siguen el mismo concepto de sujeto, verbo y adjetivos/adverbios.
Etiquetas
Lo primero que hay que saber es el funcionamiento de los documentos HTML, que significa Hyper Text Markup Language. Son líneas de texto modificadas con unas marcas. Estas marcas se llaman etiquetas o tags, y es lo que se aprende en éste y cualquier curso de HTML.
Las etiquetas que encierran el texto son la de apertura <xxx> y la de cierre </xxx>. Fíjate cómo no hay espacios entre los signos de mayor y menor, y el lugar y la orientación de la barra diagonal en la etiqueta de cierre. Hay etiquetas que requieren la de cierre (como <A> y </A>, otras que pueden tener etiqueta de cierre o no (como <P>, que no siempre requiere </P>
y otras que no llevan nunca etiqueta de cierre (como <IMG>, la cual jamás lleva </IMG>. Para saber cuándo se quiere etiqueta de cierre, necesitarás conocer todas y cada una de ellas, lo irás aprendiendo con la experiencia.
ATRIBUTOS
Los atributos modifican las acciones de las tarjetas. Muchas etiquetas pueden permanecer solas, mientras que otras neceistan un atributo para darles funcionalidad. Por ejemplo, <HTML> nunca lleva atributos, mientras que <body> puede llevarlos o no (por ejemplo, <body BGCOLOR...>.
Ten en cuenta que los atributos siempre van en la etiqueta de apertura. nunca en la de cierre. Es absurdo poner algo del estilo de </body BGCOLOR...>.
VALORES
Definen el atributo al que se lo hemos aplicado. El valor puede ser una palabra (por ejemplo <P ALIGN="center">...</P> o un número de pixels o porcentaje (como en <TABLE WIDTH="40%" HEIGHT="500">...</TABLE>. A veces un número no define un número de pixels concreto, por ejemplo, al cambiar el tamaño de las fuentes (<FONT SIZE="5">...</FONT> el número es simplemente orientativo, no tiene ninguna relación con el tamaño final. Y el número a veces puede ser en formato hexadecimal (16 números, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F...), como en <FONT COLOR="#FF0000">...</FONT>. Podrás conocer el funcionamiento de estos números más adelante, cuando expliquemos los atributos que los requieren.
Desarrollo en HTML
Unas Cuantos Etiquetas Útiles Más
Pruéba las siguientes: <i> </i> Hace el texto en itálicas italic.
<tt> </tt> Hace el texto en teletipo (ancho fijo).
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6> Muestra diferentes estilos de encabezados (header), en orden descendente de importancia (tamaño). Por ejemplo, el "El HTML Hecho Realmente Fácil" al inicio de la página usa <h1>, y el "Unas Cuantas Etiquetas Útiles Más" de arriba usa <h2>.
<hr> Pone una línea horizontal en la página, como arriba del título "Unas Cuantas Etiquetas Útiles Más", arriba.
<center> </center> Centra texto e imágenes entre los márgenes izquierdo y derecho.
<blockquote> </blockquote> Sangra el texto a partir de los dos márgenes. Usado para la mayoría de los ejemplos en este documento.
<pre> </pre> Denota texto "preformateado" en código lo despliega como fuente de ancho fijo y conserva espacios y saltos de línea (en gran medida como una máquina de escribir). Es una manera rápida de hacer márgenes y tabulaciones. Conveniente para entrecomillar una sección del código fuente, de tal manera que es usado para muchos ejemplos en este documento.
--------------------------------------------------------------------------------
Listas Numeradas o con Viñetas
El HTML proporciona una manera simple de mostrar listas numerads ("listas ordenadas" o con viñetas ("listas desordenadas". Usa la contenedora <ol> y <ul> para hacer listas ordenadas o desordenadas, respectivamente. Dentro de la contenedora, usa la etiqueta <li> para dentoar el comienzo de un elemento de la lista.
Por ejemplo, el código de HTML
Esta es una lista ordenada:
<ol>
<li>Primer elemento
<li>Segundo elemento
<li>Tercer elemento
</ol>
Esta es una lista desordenada:
<ul>
<li>Primer elemento
<li>Segundo elemento
<li>Tercer elemento
</ul>
que se verán así
Esta es una lista ordenada:
Primer elemento
Segundo elemento
Tercer elemento
Esta es una lista desordenada:
Primer elemento
Segundo elemento
Tercer elemento
Dentro de los elementos de lista, puedes poner lo que quieras-- ligas, imágenes, tablas (más sobre ellas después), o incluso otras listas. Las listas anidadas son en realidad bastante comunes, útiles para resúmenes o menús en cascada.
Menos comunes pero tambien útiles, son las "listas de definición", las cuales contienen un conjunto alternado de términos y definiciones. Encierra toda la lista en la contenedora <dl>, y usa <dt> y <dd> para marcar el inicio de los términos y definiciones, respectivamente. Por ejemplo,
Aquí está una lista de definición:
<dl>
<dt>Término 1
<dd>Definición del Término1
<dt>Término 2
<dd>Definición del Término2
</dl>
que se verá así:
Aquí está una lista de definición:
Término 1
Definición del Término1
Término 2
Definición del Término2
Asegúrate de terminar tus listas con </ol>, </ul>, y </dl>, o el resto de tu página se verá como parte del último elemento de la lista.
--------------------------------------------------------------------------------
Comentarios
Puedes poner comentarios en tu archivo HTML que no se verán en la página Web. Esto te permite explicar por qué tu código HTML es de cierto modo, a cualquiera que vea tu código fuente. Esto podría ser alguien más, o (seguramente) puedes ser tú mismo en el futuro.
Comienza el comentario con "<!--" y termínalo con "-->", como
<!-- Este es un comentario, y no se desplegará al usuario -->
<!-- ejemplos de comentarios insertados por JSM el 23-9-96, para clarificar -->
No pongas información privada en comentarios, ya que cualquiera, revisando el código fuente, puede verla. Tampoco pongas etiquetas de HTML dentro de los comentarios, ya que el navegador pensará que el comentario termina con el primer caracter ">".
--------------------------------------------------------------------------------
Tablas
Las tablas en HTML te permiten mostrar un arreglo de celdas de datos, como en la sección Unas Cuantas Etiquetas Útiles Más, arriba. También te permiten alinear texto a la derecha, o hacer columnas de texto como con tabuladores. No son difíciles de usar, una vez que sabes con claridad lo que quieres desplegar en cda celda. La "definición estándard" de las tablas HTML ha cambiado unas cuantas veces, pero es bastante estable ahora; esta sección te mostrará cómo hacer tablas que hacen que casi cualquier navegador desplegue correctamente.
Las tablas se definen con la contenedora <table>.
La etiqueta <table> contiene renglones de celdas, definidas con la contenedora <tr>.
Cada etiqueta <tr> contiene celdas de datos, definidas con la contenedora <td>.
Cada celda de datos contiene lo que quieras poner-- ligas, imágenes, listas, incluso otras tablas.
Los renglones se definen de arriba hacia abajo, y las celdas de izquierda a derecha. Si quieres que se muestren líneas entre las celdas de la tabla, usa el atributo border en la etiqueta <table>. (¿Recuerdas cómo funcionan los atributos en las etiquetas HTML? Usarás unos cuantos atributos en esta sección.)
Por ejemplo, el código HTML
<table border>
<tr>
<td>noroeste</td>
<td>noreste</td>
</tr>
<tr>
<td>suroeste</td>
<td>sureste</td>
</tr>
</table>
se verá como:
noroeste noreste
suroeste sureste
La mayoría de los navegadores no requieren las etiquetas de terminación </tr> o </td>; asumen que una celda o renglón termina cuando la otra comienza. De tal manera, puedes ver tablas escritas sin las etiquetas de finalización (aunque la etiqueta final </table> sí es requerido). Nota: Como este documento es de octubre de 1996, esto puede causar problemas con las tablas anidadas debido a algún error del navegador.
Celdas que Ocupan Columnas o Renglones Múltiples
Algunas veces querrás que una celda ocupe más de una columna o más de un renglón. En este caso usa los atributos colspan y rowspan del tag <td>. Entonces solamente omite definir las celdas que la celda más grande ocuparía. Por ejemplo,
<table border>
<tr>
<td rowspan=2>oeste</td>
<td>noreste</td>
</tr>
<tr>
<!-- No definas "suroeste" porque "oeste" la va a ocupar -->
<td>sureste</td>
</tr>
</table>
se verá como:
oeste noreste
sureste
Alineando el Contenido de la Celda dentro de la misma Celda
Usualmente todo el contenido de una celda se alínea a la izquierda y centrada verticalmente por defecto. Para fijar la posición horizontal y vertical con la etiqueta <td>, usa los atributos align y valign respectivamente:
align puede ser left, right, o center.
valign puede ser top, middle, bottom, o baseline (alineada a la base del texto).
Por ejemplo, este recibo sin líneas de una tienda, alínea los precios con respecto al márgen derecho:
<table>
<tr>
<td>detergente para ropa</td>
<td align=right>$4.99</td>
</tr>
<tr>
<td>comida para gato</td>
<td align=right>$128.00</td>
</tr>
</table>
Se verá como:
detergente para ropa $4.99
comida para gato $128.00
Puedes usar también los atributos align y valign en la etiqueta <tr>, para afectar todas las celdas en ese renglón.
Otras Cosas Útiles sobre Tablas
Normalmente el navegador se las arregla para darle el tamaño apropiado a la tabla, y para las celdas dentro de la tabla, basándose en el tamaño del navegador y el contenido de la celda. Si deseas sugerir un ancho específico para la tabla o las celdas, usa el atributo width en las etiquetas <table> y <td>. Puedes usar un porcentaje del navegador o la tabla, como <td width="20%"> (usualmente preferido), o un valor absoluto en pixels como <td width=138> (útil para hacer que una imágen quepa exactamente en el ancho de una celda).
Si quieres más detalles, Netscape tiene información al respecto en etiquetas relacionadas con tablas y sus atributos, y una buena colección de tablas de ejemplo. Estos documentos son ligeramente obsoletos comparados con los últimos estándares de HTML, pero están lo suficientemente actualizados para la mayoría de las tablas en el Web hoy día.
--------------------------------------------------------------------------------
Formas
Probablemente has visto formas para llenar en el Web, usadas por los motores de búsqueda, guías en línea, y demás. Escribes tus datos, envías la forma presionando un botón de envío y los datos son enviados a un script CGI en un servidor Web por ahí. Las formas, como todo lo demás en HTML se definen con un pequeño conjunto de etiquetas. Estas etiquetas simplemente definen los elementos de la forma, como campos de entrda o botones. La parte difícil es escribir el código CGI para manejar la forma de entrada; ese es un tema de otro tutorial.
Las formas compienzan con la etiqueta <form> y terminan con la etiqueta </form>. En la forma, puedes poner además el código HTML que quieras, pero puedes usar también estas etiquetas para definir campos de entrada:
<input> define un campo de entrada de texto, casillas de verificación, botones de selección, o botones simples.
<select> define menús desplegables y cajas de selección.
<textarea> define un campo de entrada de texto multilínea.
La etiqueta <form> tiene:
un atributo action, que es el URL del script CGI a quien enviar los datos de la forma, y
un atributo method, que es el método HTTP usado para enviar los datos de la forma (cualquiera de get o post funcionarán-- coordinando esto con tu script CGI).
Así, una etiqueta <form> típica es:
<form action="http://www.myhost.com/mypath/myscript.cgi" method=post>
Todos los campos de entrada en una forma tienen un nombre, definido por el atributo name de la etiqueta <input>, <select>, o <textarea>. Todos los campos de entrada también tienen un valor, que el usuario asigna escribiendo en él o haciendo click en él. Todo el conjunto de los datos de la forma es representada como un conjunto de estos pares de nombre-valor cuando se envía al script CGI.
Los campos de texto vacíos se envían como pares de nombre-valor con un valor de una cadena vacía, pero las casillas de verificación y botones de selección que no se usan no se envían en absoluto.
Para probar tu forma, puedes llamar a scripts simples en NCSA que te dicen qué pares de nombre-valor fueron enviados. Para hacer esto, fija el atributo action a lo siguiente:
Para get envíos: http://hoohoo.ncsa.uiuc.edu/cgi-bin/query
Para post envíos: http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query
La Etiqueta <input>
Usa la etiqueta <input> para crear la mayoría de los campos de una forma, así como para enviar y reestablecer botones. Tiene una gran conjunto de atributos dependiendo del tipo de atributo, el cual puede ser cualquiera de:
text-- un campo normal de entrada (defecto)
password-- idéntico a text, pero la entrada del usuario no se despliega
checkbox-- una casilla de verificación (para simples valores sí/no)
radio-- un botón de selección (para escojer una de varias opciones)
submit-- un botón que envía los datos de la forma, cuando la entrada de datos del usuario está lista
reset-- un botón que reestablece todos los campos de una forma a sus valores iniciales
image-- como submit, pero muestra una imágen como botón
hidden-- te permite definir pares extra de nombre-valor que se envían al script CGI pero no se despliegan
los campos text y password tienen los siguientes atributos opcionales:
value fija el valor por defecto del campo
size fija la longitud desplegada del campo
maxlength fija la cantidad máxima de datos que pueden ser escritos
los campos checkbox y radio tienen los siguientes atributos opcionales:
value es el valor del campo cuando se verifica; el valor por defecto es "sí"
checked (no necesita valor) significa que está verificado por defecto
los campos submit y reset usan lel atributo opcional value como la etiqueta en el botón.
El campo image requiere un atributo src con el URL de la imágen a usar, y soporta la mayoría de los atributos de la etiqueta <img>.
Para crear un conjunto de botones de selección, dáles a todos el mismo nombre pero diferentes valores. Solamente el valor seleccionado será enviado al servidor cuando la forma se envíe.
Usualmente, tendrás texto antes o después de los campos text, password, checkbox, y radio, para etiquetarlos para el usuario. Ninguna etiqueta se muestra automáticamente.
Los campos submit y image de hecho pueden tener un atributo nombre, para enviar información sobre cómo la forma fue enviada. Si tienes múltiples botones de envío, tu script CGI puede distinguirlos por nombres o valores diferentes (solamente el botón de envío que presionas es el que se envía como par nombre-valor). Si un campo image tiene un atributo name de (digámoslo) "foo", entonces la localización x-y del click del mouse en el botón es enviada como dos campos enteros con nombres de "foo.x" y "foo.y". Esto permite un mapa de imágen con un botón image.
Ejemplos de campos <input>, en el mismo orden que se enlistan arriba son:
Estado: <input type=text name="state" value="CA" size=2 maxlength=2>
Password: <input type=password name="password">
<input type=checkbox name="masinfo" value="si" checked>Envíame más información.
Selecciona tu sexo abajo:
<br><input type=radio name="gender" value="F">Femenino
<br><input type=radio name="gender" value="M">Masculino
<br><input type=radio name="gender" value="O">Otro
<input type=submit value=" OK, envíalo ">
<input type=reset value=" Whoops-- borra eso ">
<input type=image src="/images/gobutton.gif" width=60 height=30>
<input type=hidden name="totalsofar" value="1290.65">
La etiqueta <select>
Usa la etiqueta contenedora <select> para crear menús desplegables y listas desplazables. Entre <select> y </select> puedes tener solamente etiquetas <option> y su texto, el cual define items en la lista.
La etiqueta <select> tiene un atributo name como todos los campos de entrada. Otros atributos opcionales:
size es la altura desplegada de la lista. Si es 1 (u omitida), la lista es un menú desplegable; en otro caso, es una lista desplazable.
multiple (sin valor) deja que el usuario seleccione items múltiples de la lista (usualmente con ctrl-click o shift-click). Cada item seleccionado deberá ser enviado como un para nombre-valor al script CGI.
Una etiqueta <option> puede tener un atributo value, el cual es lo que se envía al script CGI si ese item es seleccionado. Si no existe el atributo value, el valor enviado es el texto que sigue a la etiqueta <option>.
Para hacer que un item se seleccione por defecto, usa el atributo selected en la etiqueta <option>.
Un ejemplo de una lista desplegable <select> es:
Escoge tu color favorito:
<select name="favecolor">
<option>verde
<option>aguamarina
<option selected>esmeralda
<option>turquesa
<option>agua
<option value="verde2">verde
<option value="verde3">verde
</select>
La Etiqueta <textarea>
Usa la etiqueta contenedora <textarea> para crear cajas de texto multilínea desplazables. Todo lo que esté entre las etiquetas <textarea> y </textarea> será el contenido inicial de la caja de entrada, así que colócalas una junto a la otra si no quieres contenido inicial.
La etiqueta <textarea> tiene un atributo name, como cualquier otro campo de entrada. Usa los atributos rows y cols para fijar el ancho y alto del área de texto. Nota que el área de texto se desplaza cuanto sea necesario, de tal manera que solamente estás asignando el tamaño al cual debe desplegarse, no el tamaño de los datos
Un ejemplo del camo de entrada <textarea>es:
<textarea name="stuff" rows=10 cols=60>Pon cosas aquí</textarea>
Otras Cosas de Formas
Intenta hacer unas cuantas formas para ver cómo se ven. No necesitas un script CGI para verlas en tu navegador.
NCSA tiene unos cuantos ejemplos cerca del final de esta página de formas (una o dos pantallas arriba del final). La página en sí es vieja pero aún sirve; ellos dicen que es solamente para su navegador (Mosaic para X-Windows), pero la información sirve para cualquier navegador y formas.
D
--------------------------------------------------------------------------------
Color
Puedes asignar el color de muchas cosas en HTML ajustando los atributos de color de ciertas etiquetas:
En la etiqueta <body>, los atributos bgcolor, text, link, vlink, y alink definen los colores para el fondo, texto, ligas no visitadas, ligas visitadas y ligas activas de la página.
Para cambiar el color del texto de una parte de una página, usa la etiqueta contenedora <font> con el atributo color.
Para tablas, algunos navegadores soportan el atributo bgcolor (color de fondo) en las etiquetas <table>, <tr>, <th>, y <td>.
Los valores de los atributos de color toman una de las siguientes formas:
"#RRGGBB", donde RR, GG, y BB son los componentes rojo, verde, y azul del color en hexadecimal de 00 a FF. ¿Confundido? Entonces checa el siguiente método:
Uno de los 16 "nombres de color más extendidos y entendidos": aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white (white), or yellow (yellow)
Por ejemplo, la etiqueta <body> usada en este documento es
<body bgcolor=olive link="#0000FF" vlink="#007090" alink="#00A0FF">
excepto que el color de fondo no es oliva en realidad.
No confíes en el color para cosas importantes, algunos navegadores no pueden desplegarlo.
Además de los 16 nombres estándar de color de arriba, Netscape soporta muchos otros nombres de colores, de firebrick a mediumspringgreen. Aquí está una lista de los nombres de color de Nestcape, parte del excelente HTML Primer de Sam Kington. Por supuesto, solamente se despliegan correctamente con navegadores Netscape-- usa #RRGGBB los códigos de color para captar el máximo de navegadores.
De Regreso a la Tabla de Contenido
--------------------------------------------------------------------------------
Marcos
Los marcos no son parte del HTML estándar. Son una extensión al HTML que creó Netscape. No funcionan en todos los navegadores, así que limita la cantidad de usuarios al usarlos. Describiré la introducción general aquí, pero Netscape tiene una página con todos los detalles.
Básicamente, creas un archivo HTML normal para cada marco, además de un archivo HTML especial (el "documento de marcos" para contenerlos a todos. Este documento de marcos tiene la etiqueta contenedora <frameset> en lugar de la etiqueta <body>. La etiqueta <frameset> divide la ventana principal del navegador en múltiples renglones y columnas. Tiene cualquiera de los atributos rows or cols, el cual es una lista de tamaños separados por comas, ya sea en pixeles o en porcentajes del ancho total de la ventana. Por ejemplo, <frameset cols="10%,80%,10%"> divide la ventana en tres columnas: márgenes angostos a izquierda y derecha y una página central ancha. (Ve la página de Netscape para más detalles.)
Entre <frameset> y </frameset> puede haber:
etiquetas <frame>, cuyos atributos src contienen los URL que deben mostrarse en esas columnas o renglones;
otras etiquetas <frameset> para dividir después las columnas o renglones en más renglones o columnas; or
etiquetas <noframes> y </noframes> para definir una página para navegadores que no soportan marcos (siempre es sabio usarlas).
Los marcos pueden convertirse parte del HTML estándar algún día, una vez su complejidad se deseche. Para las cosas oficiales en marcos y el estándar de HTML ve la sección "Next Steps" en esta página en W3C.
De Regreso a la Tabla de Contenido
--------------------------------------------------------------------------------
Caracteres Especiales Como "<" and ">"
¿Cómo puedes desplegar los caracteres "<" y ">"? Si solamente los escribes en tu archivo HTML, el navegador pensará que estás comenzando o finalizando una etiqueta. tienes que incluir caracteres de escape (así se llaman), tecleando secuencias de caracteres en su lugar. Cuando se despliega tu página, el navegador traduce las secuencias a los caracteres que necesitas.
Todas las secuencias de caracteres especiales comienzan con "&" (ampersand) y terminan con ";" (punto y coma), y entre ellos está el nombre del caracter especial. Por ejemplo, ">" significa el símbolo de mayor-que, "<" significa el símbolo de menor-que, """ significa comillas dobles, y "&" significa el amperand mismo. Por ejemplo, la línea
Para desplegar el caracter < usa la secuencia <.
se verá como
Para desplegar el caracter < usa la secuencia <.
Usa este método para poner caracteres no tecleables en tus páginas; por ejemplo, "©" muestra el símbolo de copyright ©. Aquí está una lista de caracteres especiales , con letras acentuadas primero, seguidas de símbolos no alfabéticos.
Al contrario de los nombres de etiquetas, estos nombres de caracteres son de caso sensitivo, así que ">" no despliega el símbolo de mayor-que.
Necesitas escapar cada "<" o ">", pero no todos los ampersand, etc. Estos códigos sólo están ahí cuando los necesites, por ejemplo, cuando tu página no se despliegue correctamente sin ellos (y debas verificar visualmente cada página que hagas).
--------------------------------------------------------------------------------
Una Nota Importante sobre HTML
Una página Web puede ser desplegada en una gran variedad de dispositivos -- navegadores gráficos, navegadores de sólo texto, dispositivos de texto-a-voz o braille, u otros dispositivos aún no inventados. Aún los navegadores gráficos varían mucho, desde que el usuario puede cambiar el tamaño a la ventana como desee, o ajustar sus propios colores y tipos de letra. De acuerdo con esto, el HTML le da mucha libertad al navegador para decidir cómo desplegar la página y sorprendentemente poco control del HTML al autor.
Técnicamente el HTML es una manera de describir qué tipo de datos estás desplegando, y no explícitamente cómo deben desplegarse. Por ejemplo, la etiqueta <h1> dice "Esta es una sección de encabezado principal"; no dice en realidad "Muestra esto en un tamaño grande de letra, negrita y centrada". El navegador decide cómo debe desplegarlo. De hecho, el navegador toma la decisión final de cómo desplegar todo; todas las etiquetas HTML son solamente sugerencias.
Toma tiempo acostumbrarse a esta falta de control, pero es la naturaleza del Web. Recuerda, no existe una manera de saber el tamaño y la capacidad de los navegadores que desplegarán tu página. Solamente trata de escribir HTML de tal manera que tus páginas no se ajusten a una forma en particular (lo cual variará mucho de usuario a usuario). De otra manera, las tablas y diseños que se ven geniales en tu pantalla pueden verse horribles en la de otro (siempre vale la pena checarlo). Si es posible, no confíes en el navegador cuando muestra imágenes -- usa el atributo alt de la etiqueta <img> para definir un texto alternativo para mostrar para los navegadores que no puedan mostrar la imágen. Si escribes HTML flexible, cualquier buen navegador desplegará tu página aceptablemente.
En estos días, el HTML tiene etiquetas que dicen explícitamente cómo desplegar algo, en vez de describir solamente qué tipo de dato es. Como ejemplo están las etiquetas comúnmente usadas <b> and <i>. Etas son en realidad una ligera desviación de la filosofía original de HTML debido a su explicitud. Los puristas a veces usan las etiquetas <strong> y <em>, para texto fuerte y enfatizado, en lugar de <b> y <i>. Puedes usar las que quieras.
--------------------------------------------------------------------------------
Tips para Hacer Mejores Páginas Web
Obtén retroalimentación de tus usuarios con tu dirección de email y escucha sus comentarios. Esto te llevará a más mejoras que cualquier otra cosa. Por ejemplo,
Envía tus comentarios a <a href="mailto:[email protected]">me</a>.
Revisa tu página en varios navegadores, o por lo menos en diferentes tamaños de ventana.
Pide a tus amigos que naveguen en tu página y te la comenten.
No confíes en cosas que no funcionan en todos los navegadores como el color. Usalos si quieres, pero asegúrate que tu página puede verse en navegadores que no los soporten.
Si haces un site de varias páginas relacionadas, permite la navegación intuitiva entre ellas.
Cuando uses la etiqueta <img>, incluye los atributos alt, width, y height. El atributo alt define texto a mostrar para usuarios no gráficos, y los atributos width y height dan el tamaño de la imágen en pixeles. Esto permite que un navegador despliegue el resto de la página sin esperar a que la imágen se cargue, haciendo la vida mucho mejor para el usuario. Por ejemplo,
<img src="bluebar.gif" alt="blue bar" width=500 height=5>
Escribe código fuente fácil de leer. Tendrás que editarlo alguna vez y otra gente podría hacerlo también. El código fuente desordenado es difícil de trabajar e incrementa los errores. Facilita las cosas para todos escribiendo código fuente claro.
Lee las opiniones de los estilos de otras personas en las muchas guías en este directorio de Yahoo. Al final, no tengasmiedo de tus propias opiniones y crea tu propio estilo. Haz lo que se vea bien. Haz lo que se ajuste a cualquier otro criterio que tengas (fácil de usar, informativo, divertido, atractivo, etc.).
De Regreso a la Tabla de Contenido
--------------------------------------------------------------------------------
Final (y algunas ligas)
OK, ya sabes bastante de HTML para hacer páginas Web. Ve y haz una o dos páginas. Ve y enseña a alguien más a hacerlo. El HTML tiene otras etiquetas con las que puedes jugar, pero no tienes que. De hecho, las únicas etiquetas usadas en la elaboración de esta página ya han sido descritas aquí.
Aqui está una buena aunque un poco técnica lista de todas las etiquetas HTML que es parte de del Manual de Referencia HTML de Sandia-- ignora las partes específicas de Sandia.
Aquí está un resumen de las características del HTML 3.2 realmente bueno (y oficial) en el World Wide Web Consortium ("W3C", el cual es la organización central de investigación que define los estándares usados en el Web.
Proximamente : PHP , ASP , C++ , C , SQL , ETC...
Conceptos Basicos
HTML es el lenguaje con el cual se escriben documentos de hipermedia en Internet.
Notar que:
HTML es solo texto (es como programar un texto). Mediante comandos que insertamos en el texto, le decimos cómo queremos que se vea el texto.
Dentro de un texto HTML no importan los tabs ni saltos de línea. Se debe usar comandos como < P > ... < /P > y < BR > para que no quede todo en una sola línea.
Existen tres caracteres especiales: < > y & . Los caracteres < y > encierran a los comandos (tags) de HTML. EL & permite escribir caracteres especiales (acentos, mayor, menor, etc.)
Formato básico de una página HTML
< HTML >
< HEAD >
...
Encabezado de la página (titulo)
...
< /HEAD >
< BODY >
...
Cuerpo de la página
...
< /BODY >
< /HTML >
Sintaxis
Para fomentar una sólida compresión del HTML, miraremos la estructura del lenguaje propiamente dicho. El funcionamiento de la sintaxis del HTML es análogo a la sintaxis de la gramática española, pero, por supuesto, mucho más sencillo.
El HTML es en realidad un lenguaje muy lógico. Ciertamente, hay excepciones a las reglas, y hay modificaciones o interpretaciones de algunas de éstas. De todas formas, una vez que asimiles la estructura básica, empezarás a notar que el HTML es simplemente un conjunto de piezas lógicas que hacen de él un lenguaje muy cómodo de usar.
Por supuesto, está el tema que se comentó en el capítulo "Comprendiendo el HTML", de que el HTML es un lenguaje que evoluciona. Mientras que la evolución es un estado natural del HTML, estos cambios normalmente no afectan a las reglas básicas. Mientras que varios elementos de este lenguaje se hacen obsoletos y otros nuevos son añadidos, la sintaxis, o la estructura correcta, raramente sufren cambios.
Para comprender el concepto de sintaxis, piensa en una frase. Tu tienes un sujeto y un verbo. Los adjetivos y los adverbios se añaden para aportar cualidades y comportamiento, haciendo la frase más comprensiva.
El HTML es, en el fondo, no muy diferente a una simple frase. De hecho, los componentes del HTML siguen el mismo concepto de sujeto, verbo y adjetivos/adverbios.
Etiquetas
Lo primero que hay que saber es el funcionamiento de los documentos HTML, que significa Hyper Text Markup Language. Son líneas de texto modificadas con unas marcas. Estas marcas se llaman etiquetas o tags, y es lo que se aprende en éste y cualquier curso de HTML.
Las etiquetas que encierran el texto son la de apertura <xxx> y la de cierre </xxx>. Fíjate cómo no hay espacios entre los signos de mayor y menor, y el lugar y la orientación de la barra diagonal en la etiqueta de cierre. Hay etiquetas que requieren la de cierre (como <A> y </A>, otras que pueden tener etiqueta de cierre o no (como <P>, que no siempre requiere </P>
y otras que no llevan nunca etiqueta de cierre (como <IMG>, la cual jamás lleva </IMG>. Para saber cuándo se quiere etiqueta de cierre, necesitarás conocer todas y cada una de ellas, lo irás aprendiendo con la experiencia.ATRIBUTOS
Los atributos modifican las acciones de las tarjetas. Muchas etiquetas pueden permanecer solas, mientras que otras neceistan un atributo para darles funcionalidad. Por ejemplo, <HTML> nunca lleva atributos, mientras que <body> puede llevarlos o no (por ejemplo, <body BGCOLOR...>
.Ten en cuenta que los atributos siempre van en la etiqueta de apertura. nunca en la de cierre. Es absurdo poner algo del estilo de </body BGCOLOR...>.
VALORES
Definen el atributo al que se lo hemos aplicado. El valor puede ser una palabra (por ejemplo <P ALIGN="center">...</P>
o un número de pixels o porcentaje (como en <TABLE WIDTH="40%" HEIGHT="500">...</TABLE>. A veces un número no define un número de pixels concreto, por ejemplo, al cambiar el tamaño de las fuentes (<FONT SIZE="5">...</FONT> el número es simplemente orientativo, no tiene ninguna relación con el tamaño final. Y el número a veces puede ser en formato hexadecimal (16 números, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F...), como en <FONT COLOR="#FF0000">...</FONT>. Podrás conocer el funcionamiento de estos números más adelante, cuando expliquemos los atributos que los requieren.Desarrollo en HTML
Unas Cuantos Etiquetas Útiles Más
Pruéba las siguientes: <i> </i> Hace el texto en itálicas italic.
<tt> </tt> Hace el texto en teletipo (ancho fijo).
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6> Muestra diferentes estilos de encabezados (header), en orden descendente de importancia (tamaño). Por ejemplo, el "El HTML Hecho Realmente Fácil" al inicio de la página usa <h1>, y el "Unas Cuantas Etiquetas Útiles Más" de arriba usa <h2>.
<hr> Pone una línea horizontal en la página, como arriba del título "Unas Cuantas Etiquetas Útiles Más", arriba.
<center> </center> Centra texto e imágenes entre los márgenes izquierdo y derecho.
<blockquote> </blockquote> Sangra el texto a partir de los dos márgenes. Usado para la mayoría de los ejemplos en este documento.
<pre> </pre> Denota texto "preformateado" en código lo despliega como fuente de ancho fijo y conserva espacios y saltos de línea (en gran medida como una máquina de escribir). Es una manera rápida de hacer márgenes y tabulaciones. Conveniente para entrecomillar una sección del código fuente, de tal manera que es usado para muchos ejemplos en este documento.
--------------------------------------------------------------------------------
Listas Numeradas o con Viñetas
El HTML proporciona una manera simple de mostrar listas numerads ("listas ordenadas"
o con viñetas ("listas desordenadas". Usa la contenedora <ol> y <ul> para hacer listas ordenadas o desordenadas, respectivamente. Dentro de la contenedora, usa la etiqueta <li> para dentoar el comienzo de un elemento de la lista. Por ejemplo, el código de HTML
Esta es una lista ordenada:
<ol>
<li>Primer elemento
<li>Segundo elemento
<li>Tercer elemento
</ol>
Esta es una lista desordenada:
<ul>
<li>Primer elemento
<li>Segundo elemento
<li>Tercer elemento
</ul>
que se verán así
Esta es una lista ordenada:
Primer elemento
Segundo elemento
Tercer elemento
Esta es una lista desordenada:
Primer elemento
Segundo elemento
Tercer elemento
Dentro de los elementos de lista, puedes poner lo que quieras-- ligas, imágenes, tablas (más sobre ellas después), o incluso otras listas. Las listas anidadas son en realidad bastante comunes, útiles para resúmenes o menús en cascada.
Menos comunes pero tambien útiles, son las "listas de definición", las cuales contienen un conjunto alternado de términos y definiciones. Encierra toda la lista en la contenedora <dl>, y usa <dt> y <dd> para marcar el inicio de los términos y definiciones, respectivamente. Por ejemplo,
Aquí está una lista de definición:
<dl>
<dt>Término 1
<dd>Definición del Término1
<dt>Término 2
<dd>Definición del Término2
</dl>
que se verá así:
Aquí está una lista de definición:
Término 1
Definición del Término1
Término 2
Definición del Término2
Asegúrate de terminar tus listas con </ol>, </ul>, y </dl>, o el resto de tu página se verá como parte del último elemento de la lista.
--------------------------------------------------------------------------------
Comentarios
Puedes poner comentarios en tu archivo HTML que no se verán en la página Web. Esto te permite explicar por qué tu código HTML es de cierto modo, a cualquiera que vea tu código fuente. Esto podría ser alguien más, o (seguramente) puedes ser tú mismo en el futuro.
Comienza el comentario con "<!--" y termínalo con "-->", como
<!-- Este es un comentario, y no se desplegará al usuario -->
<!-- ejemplos de comentarios insertados por JSM el 23-9-96, para clarificar -->
No pongas información privada en comentarios, ya que cualquiera, revisando el código fuente, puede verla. Tampoco pongas etiquetas de HTML dentro de los comentarios, ya que el navegador pensará que el comentario termina con el primer caracter ">".
--------------------------------------------------------------------------------
Tablas
Las tablas en HTML te permiten mostrar un arreglo de celdas de datos, como en la sección Unas Cuantas Etiquetas Útiles Más, arriba. También te permiten alinear texto a la derecha, o hacer columnas de texto como con tabuladores. No son difíciles de usar, una vez que sabes con claridad lo que quieres desplegar en cda celda. La "definición estándard" de las tablas HTML ha cambiado unas cuantas veces, pero es bastante estable ahora; esta sección te mostrará cómo hacer tablas que hacen que casi cualquier navegador desplegue correctamente.
Las tablas se definen con la contenedora <table>.
La etiqueta <table> contiene renglones de celdas, definidas con la contenedora <tr>.
Cada etiqueta <tr> contiene celdas de datos, definidas con la contenedora <td>.
Cada celda de datos contiene lo que quieras poner-- ligas, imágenes, listas, incluso otras tablas.
Los renglones se definen de arriba hacia abajo, y las celdas de izquierda a derecha. Si quieres que se muestren líneas entre las celdas de la tabla, usa el atributo border en la etiqueta <table>. (¿Recuerdas cómo funcionan los atributos en las etiquetas HTML? Usarás unos cuantos atributos en esta sección.)
Por ejemplo, el código HTML
<table border>
<tr>
<td>noroeste</td>
<td>noreste</td>
</tr>
<tr>
<td>suroeste</td>
<td>sureste</td>
</tr>
</table>
se verá como:
noroeste noreste
suroeste sureste
La mayoría de los navegadores no requieren las etiquetas de terminación </tr> o </td>; asumen que una celda o renglón termina cuando la otra comienza. De tal manera, puedes ver tablas escritas sin las etiquetas de finalización (aunque la etiqueta final </table> sí es requerido). Nota: Como este documento es de octubre de 1996, esto puede causar problemas con las tablas anidadas debido a algún error del navegador.
Celdas que Ocupan Columnas o Renglones Múltiples
Algunas veces querrás que una celda ocupe más de una columna o más de un renglón. En este caso usa los atributos colspan y rowspan del tag <td>. Entonces solamente omite definir las celdas que la celda más grande ocuparía. Por ejemplo,
<table border>
<tr>
<td rowspan=2>oeste</td>
<td>noreste</td>
</tr>
<tr>
<!-- No definas "suroeste" porque "oeste" la va a ocupar -->
<td>sureste</td>
</tr>
</table>
se verá como:
oeste noreste
sureste
Alineando el Contenido de la Celda dentro de la misma Celda
Usualmente todo el contenido de una celda se alínea a la izquierda y centrada verticalmente por defecto. Para fijar la posición horizontal y vertical con la etiqueta <td>, usa los atributos align y valign respectivamente:
align puede ser left, right, o center.
valign puede ser top, middle, bottom, o baseline (alineada a la base del texto).
Por ejemplo, este recibo sin líneas de una tienda, alínea los precios con respecto al márgen derecho:
<table>
<tr>
<td>detergente para ropa</td>
<td align=right>$4.99</td>
</tr>
<tr>
<td>comida para gato</td>
<td align=right>$128.00</td>
</tr>
</table>
Se verá como:
detergente para ropa $4.99
comida para gato $128.00
Puedes usar también los atributos align y valign en la etiqueta <tr>, para afectar todas las celdas en ese renglón.
Otras Cosas Útiles sobre Tablas
Normalmente el navegador se las arregla para darle el tamaño apropiado a la tabla, y para las celdas dentro de la tabla, basándose en el tamaño del navegador y el contenido de la celda. Si deseas sugerir un ancho específico para la tabla o las celdas, usa el atributo width en las etiquetas <table> y <td>. Puedes usar un porcentaje del navegador o la tabla, como <td width="20%"> (usualmente preferido), o un valor absoluto en pixels como <td width=138> (útil para hacer que una imágen quepa exactamente en el ancho de una celda).
Si quieres más detalles, Netscape tiene información al respecto en etiquetas relacionadas con tablas y sus atributos, y una buena colección de tablas de ejemplo. Estos documentos son ligeramente obsoletos comparados con los últimos estándares de HTML, pero están lo suficientemente actualizados para la mayoría de las tablas en el Web hoy día.
--------------------------------------------------------------------------------
Formas
Probablemente has visto formas para llenar en el Web, usadas por los motores de búsqueda, guías en línea, y demás. Escribes tus datos, envías la forma presionando un botón de envío y los datos son enviados a un script CGI en un servidor Web por ahí. Las formas, como todo lo demás en HTML se definen con un pequeño conjunto de etiquetas. Estas etiquetas simplemente definen los elementos de la forma, como campos de entrda o botones. La parte difícil es escribir el código CGI para manejar la forma de entrada; ese es un tema de otro tutorial.
Las formas compienzan con la etiqueta <form> y terminan con la etiqueta </form>. En la forma, puedes poner además el código HTML que quieras, pero puedes usar también estas etiquetas para definir campos de entrada:
<input> define un campo de entrada de texto, casillas de verificación, botones de selección, o botones simples.
<select> define menús desplegables y cajas de selección.
<textarea> define un campo de entrada de texto multilínea.
La etiqueta <form> tiene:
un atributo action, que es el URL del script CGI a quien enviar los datos de la forma, y
un atributo method, que es el método HTTP usado para enviar los datos de la forma (cualquiera de get o post funcionarán-- coordinando esto con tu script CGI).
Así, una etiqueta <form> típica es:
<form action="http://www.myhost.com/mypath/myscript.cgi" method=post>
Todos los campos de entrada en una forma tienen un nombre, definido por el atributo name de la etiqueta <input>, <select>, o <textarea>. Todos los campos de entrada también tienen un valor, que el usuario asigna escribiendo en él o haciendo click en él. Todo el conjunto de los datos de la forma es representada como un conjunto de estos pares de nombre-valor cuando se envía al script CGI.
Los campos de texto vacíos se envían como pares de nombre-valor con un valor de una cadena vacía, pero las casillas de verificación y botones de selección que no se usan no se envían en absoluto.
Para probar tu forma, puedes llamar a scripts simples en NCSA que te dicen qué pares de nombre-valor fueron enviados. Para hacer esto, fija el atributo action a lo siguiente:
Para get envíos: http://hoohoo.ncsa.uiuc.edu/cgi-bin/query
Para post envíos: http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query
La Etiqueta <input>
Usa la etiqueta <input> para crear la mayoría de los campos de una forma, así como para enviar y reestablecer botones. Tiene una gran conjunto de atributos dependiendo del tipo de atributo, el cual puede ser cualquiera de:
text-- un campo normal de entrada (defecto)
password-- idéntico a text, pero la entrada del usuario no se despliega
checkbox-- una casilla de verificación (para simples valores sí/no)
radio-- un botón de selección (para escojer una de varias opciones)
submit-- un botón que envía los datos de la forma, cuando la entrada de datos del usuario está lista
reset-- un botón que reestablece todos los campos de una forma a sus valores iniciales
image-- como submit, pero muestra una imágen como botón
hidden-- te permite definir pares extra de nombre-valor que se envían al script CGI pero no se despliegan
los campos text y password tienen los siguientes atributos opcionales:
value fija el valor por defecto del campo
size fija la longitud desplegada del campo
maxlength fija la cantidad máxima de datos que pueden ser escritos
los campos checkbox y radio tienen los siguientes atributos opcionales:
value es el valor del campo cuando se verifica; el valor por defecto es "sí"
checked (no necesita valor) significa que está verificado por defecto
los campos submit y reset usan lel atributo opcional value como la etiqueta en el botón.
El campo image requiere un atributo src con el URL de la imágen a usar, y soporta la mayoría de los atributos de la etiqueta <img>.
Para crear un conjunto de botones de selección, dáles a todos el mismo nombre pero diferentes valores. Solamente el valor seleccionado será enviado al servidor cuando la forma se envíe.
Usualmente, tendrás texto antes o después de los campos text, password, checkbox, y radio, para etiquetarlos para el usuario. Ninguna etiqueta se muestra automáticamente.
Los campos submit y image de hecho pueden tener un atributo nombre, para enviar información sobre cómo la forma fue enviada. Si tienes múltiples botones de envío, tu script CGI puede distinguirlos por nombres o valores diferentes (solamente el botón de envío que presionas es el que se envía como par nombre-valor). Si un campo image tiene un atributo name de (digámoslo) "foo", entonces la localización x-y del click del mouse en el botón es enviada como dos campos enteros con nombres de "foo.x" y "foo.y". Esto permite un mapa de imágen con un botón image.
Ejemplos de campos <input>, en el mismo orden que se enlistan arriba son:
Estado: <input type=text name="state" value="CA" size=2 maxlength=2>
Password: <input type=password name="password">
<input type=checkbox name="masinfo" value="si" checked>Envíame más información.
Selecciona tu sexo abajo:
<br><input type=radio name="gender" value="F">Femenino
<br><input type=radio name="gender" value="M">Masculino
<br><input type=radio name="gender" value="O">Otro
<input type=submit value=" OK, envíalo ">
<input type=reset value=" Whoops-- borra eso ">
<input type=image src="/images/gobutton.gif" width=60 height=30>
<input type=hidden name="totalsofar" value="1290.65">
La etiqueta <select>
Usa la etiqueta contenedora <select> para crear menús desplegables y listas desplazables. Entre <select> y </select> puedes tener solamente etiquetas <option> y su texto, el cual define items en la lista.
La etiqueta <select> tiene un atributo name como todos los campos de entrada. Otros atributos opcionales:
size es la altura desplegada de la lista. Si es 1 (u omitida), la lista es un menú desplegable; en otro caso, es una lista desplazable.
multiple (sin valor) deja que el usuario seleccione items múltiples de la lista (usualmente con ctrl-click o shift-click). Cada item seleccionado deberá ser enviado como un para nombre-valor al script CGI.
Una etiqueta <option> puede tener un atributo value, el cual es lo que se envía al script CGI si ese item es seleccionado. Si no existe el atributo value, el valor enviado es el texto que sigue a la etiqueta <option>.
Para hacer que un item se seleccione por defecto, usa el atributo selected en la etiqueta <option>.
Un ejemplo de una lista desplegable <select> es:
Escoge tu color favorito:
<select name="favecolor">
<option>verde
<option>aguamarina
<option selected>esmeralda
<option>turquesa
<option>agua
<option value="verde2">verde
<option value="verde3">verde
</select>
La Etiqueta <textarea>
Usa la etiqueta contenedora <textarea> para crear cajas de texto multilínea desplazables. Todo lo que esté entre las etiquetas <textarea> y </textarea> será el contenido inicial de la caja de entrada, así que colócalas una junto a la otra si no quieres contenido inicial.
La etiqueta <textarea> tiene un atributo name, como cualquier otro campo de entrada. Usa los atributos rows y cols para fijar el ancho y alto del área de texto. Nota que el área de texto se desplaza cuanto sea necesario, de tal manera que solamente estás asignando el tamaño al cual debe desplegarse, no el tamaño de los datos
Un ejemplo del camo de entrada <textarea>es:
<textarea name="stuff" rows=10 cols=60>Pon cosas aquí</textarea>
Otras Cosas de Formas
Intenta hacer unas cuantas formas para ver cómo se ven. No necesitas un script CGI para verlas en tu navegador.
NCSA tiene unos cuantos ejemplos cerca del final de esta página de formas (una o dos pantallas arriba del final). La página en sí es vieja pero aún sirve; ellos dicen que es solamente para su navegador (Mosaic para X-Windows), pero la información sirve para cualquier navegador y formas.
D
--------------------------------------------------------------------------------
Color
Puedes asignar el color de muchas cosas en HTML ajustando los atributos de color de ciertas etiquetas:
En la etiqueta <body>, los atributos bgcolor, text, link, vlink, y alink definen los colores para el fondo, texto, ligas no visitadas, ligas visitadas y ligas activas de la página.
Para cambiar el color del texto de una parte de una página, usa la etiqueta contenedora <font> con el atributo color.
Para tablas, algunos navegadores soportan el atributo bgcolor (color de fondo) en las etiquetas <table>, <tr>, <th>, y <td>.
Los valores de los atributos de color toman una de las siguientes formas:
"#RRGGBB", donde RR, GG, y BB son los componentes rojo, verde, y azul del color en hexadecimal de 00 a FF. ¿Confundido? Entonces checa el siguiente método:
Uno de los 16 "nombres de color más extendidos y entendidos": aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white (white), or yellow (yellow)
Por ejemplo, la etiqueta <body> usada en este documento es
<body bgcolor=olive link="#0000FF" vlink="#007090" alink="#00A0FF">
excepto que el color de fondo no es oliva en realidad.
No confíes en el color para cosas importantes, algunos navegadores no pueden desplegarlo.
Además de los 16 nombres estándar de color de arriba, Netscape soporta muchos otros nombres de colores, de firebrick a mediumspringgreen. Aquí está una lista de los nombres de color de Nestcape, parte del excelente HTML Primer de Sam Kington. Por supuesto, solamente se despliegan correctamente con navegadores Netscape-- usa #RRGGBB los códigos de color para captar el máximo de navegadores.
De Regreso a la Tabla de Contenido
--------------------------------------------------------------------------------
Marcos
Los marcos no son parte del HTML estándar. Son una extensión al HTML que creó Netscape. No funcionan en todos los navegadores, así que limita la cantidad de usuarios al usarlos. Describiré la introducción general aquí, pero Netscape tiene una página con todos los detalles.
Básicamente, creas un archivo HTML normal para cada marco, además de un archivo HTML especial (el "documento de marcos"
para contenerlos a todos. Este documento de marcos tiene la etiqueta contenedora <frameset> en lugar de la etiqueta <body>. La etiqueta <frameset> divide la ventana principal del navegador en múltiples renglones y columnas. Tiene cualquiera de los atributos rows or cols, el cual es una lista de tamaños separados por comas, ya sea en pixeles o en porcentajes del ancho total de la ventana. Por ejemplo, <frameset cols="10%,80%,10%"> divide la ventana en tres columnas: márgenes angostos a izquierda y derecha y una página central ancha. (Ve la página de Netscape para más detalles.) Entre <frameset> y </frameset> puede haber:
etiquetas <frame>, cuyos atributos src contienen los URL que deben mostrarse en esas columnas o renglones;
otras etiquetas <frameset> para dividir después las columnas o renglones en más renglones o columnas; or
etiquetas <noframes> y </noframes> para definir una página para navegadores que no soportan marcos (siempre es sabio usarlas).
Los marcos pueden convertirse parte del HTML estándar algún día, una vez su complejidad se deseche. Para las cosas oficiales en marcos y el estándar de HTML ve la sección "Next Steps" en esta página en W3C.
De Regreso a la Tabla de Contenido
--------------------------------------------------------------------------------
Caracteres Especiales Como "<" and ">"
¿Cómo puedes desplegar los caracteres "<" y ">"? Si solamente los escribes en tu archivo HTML, el navegador pensará que estás comenzando o finalizando una etiqueta. tienes que incluir caracteres de escape (así se llaman), tecleando secuencias de caracteres en su lugar. Cuando se despliega tu página, el navegador traduce las secuencias a los caracteres que necesitas.
Todas las secuencias de caracteres especiales comienzan con "&" (ampersand) y terminan con ";" (punto y coma), y entre ellos está el nombre del caracter especial. Por ejemplo, ">" significa el símbolo de mayor-que, "<" significa el símbolo de menor-que, """ significa comillas dobles, y "&" significa el amperand mismo. Por ejemplo, la línea
Para desplegar el caracter < usa la secuencia <.
se verá como
Para desplegar el caracter < usa la secuencia <.
Usa este método para poner caracteres no tecleables en tus páginas; por ejemplo, "©" muestra el símbolo de copyright ©. Aquí está una lista de caracteres especiales , con letras acentuadas primero, seguidas de símbolos no alfabéticos.
Al contrario de los nombres de etiquetas, estos nombres de caracteres son de caso sensitivo, así que ">" no despliega el símbolo de mayor-que.
Necesitas escapar cada "<" o ">", pero no todos los ampersand, etc. Estos códigos sólo están ahí cuando los necesites, por ejemplo, cuando tu página no se despliegue correctamente sin ellos (y debas verificar visualmente cada página que hagas).
--------------------------------------------------------------------------------
Una Nota Importante sobre HTML
Una página Web puede ser desplegada en una gran variedad de dispositivos -- navegadores gráficos, navegadores de sólo texto, dispositivos de texto-a-voz o braille, u otros dispositivos aún no inventados. Aún los navegadores gráficos varían mucho, desde que el usuario puede cambiar el tamaño a la ventana como desee, o ajustar sus propios colores y tipos de letra. De acuerdo con esto, el HTML le da mucha libertad al navegador para decidir cómo desplegar la página y sorprendentemente poco control del HTML al autor.
Técnicamente el HTML es una manera de describir qué tipo de datos estás desplegando, y no explícitamente cómo deben desplegarse. Por ejemplo, la etiqueta <h1> dice "Esta es una sección de encabezado principal"; no dice en realidad "Muestra esto en un tamaño grande de letra, negrita y centrada". El navegador decide cómo debe desplegarlo. De hecho, el navegador toma la decisión final de cómo desplegar todo; todas las etiquetas HTML son solamente sugerencias.
Toma tiempo acostumbrarse a esta falta de control, pero es la naturaleza del Web. Recuerda, no existe una manera de saber el tamaño y la capacidad de los navegadores que desplegarán tu página. Solamente trata de escribir HTML de tal manera que tus páginas no se ajusten a una forma en particular (lo cual variará mucho de usuario a usuario). De otra manera, las tablas y diseños que se ven geniales en tu pantalla pueden verse horribles en la de otro (siempre vale la pena checarlo). Si es posible, no confíes en el navegador cuando muestra imágenes -- usa el atributo alt de la etiqueta <img> para definir un texto alternativo para mostrar para los navegadores que no puedan mostrar la imágen. Si escribes HTML flexible, cualquier buen navegador desplegará tu página aceptablemente.
En estos días, el HTML tiene etiquetas que dicen explícitamente cómo desplegar algo, en vez de describir solamente qué tipo de dato es. Como ejemplo están las etiquetas comúnmente usadas <b> and <i>. Etas son en realidad una ligera desviación de la filosofía original de HTML debido a su explicitud. Los puristas a veces usan las etiquetas <strong> y <em>, para texto fuerte y enfatizado, en lugar de <b> y <i>. Puedes usar las que quieras.
--------------------------------------------------------------------------------
Tips para Hacer Mejores Páginas Web
Obtén retroalimentación de tus usuarios con tu dirección de email y escucha sus comentarios. Esto te llevará a más mejoras que cualquier otra cosa. Por ejemplo,
Envía tus comentarios a <a href="mailto:[email protected]">me</a>.
Revisa tu página en varios navegadores, o por lo menos en diferentes tamaños de ventana.
Pide a tus amigos que naveguen en tu página y te la comenten.
No confíes en cosas que no funcionan en todos los navegadores como el color. Usalos si quieres, pero asegúrate que tu página puede verse en navegadores que no los soporten.
Si haces un site de varias páginas relacionadas, permite la navegación intuitiva entre ellas.
Cuando uses la etiqueta <img>, incluye los atributos alt, width, y height. El atributo alt define texto a mostrar para usuarios no gráficos, y los atributos width y height dan el tamaño de la imágen en pixeles. Esto permite que un navegador despliegue el resto de la página sin esperar a que la imágen se cargue, haciendo la vida mucho mejor para el usuario. Por ejemplo,
<img src="bluebar.gif" alt="blue bar" width=500 height=5>
Escribe código fuente fácil de leer. Tendrás que editarlo alguna vez y otra gente podría hacerlo también. El código fuente desordenado es difícil de trabajar e incrementa los errores. Facilita las cosas para todos escribiendo código fuente claro.
Lee las opiniones de los estilos de otras personas en las muchas guías en este directorio de Yahoo. Al final, no tengasmiedo de tus propias opiniones y crea tu propio estilo. Haz lo que se vea bien. Haz lo que se ajuste a cualquier otro criterio que tengas (fácil de usar, informativo, divertido, atractivo, etc.).
De Regreso a la Tabla de Contenido
--------------------------------------------------------------------------------
Final (y algunas ligas)
OK, ya sabes bastante de HTML para hacer páginas Web. Ve y haz una o dos páginas. Ve y enseña a alguien más a hacerlo. El HTML tiene otras etiquetas con las que puedes jugar, pero no tienes que. De hecho, las únicas etiquetas usadas en la elaboración de esta página ya han sido descritas aquí.
Aqui está una buena aunque un poco técnica lista de todas las etiquetas HTML que es parte de del Manual de Referencia HTML de Sandia-- ignora las partes específicas de Sandia.
Aquí está un resumen de las características del HTML 3.2 realmente bueno (y oficial) en el World Wide Web Consortium ("W3C"
, el cual es la organización central de investigación que define los estándares usados en el Web. Proximamente : PHP , ASP , C++ , C , SQL , ETC...