Blue Ribbon Campaign for Free Speech El HTML Hecho Realmente Fácil

Ir a la Tabla de Contenido Ir a Otros Tutoriales

El HTML es muy fácil de usar; fue diseñado en este sentido. No tienes que ser un programador para usarlo. Si puedes editar un archivo de texto, entonces puedes escribir HTML (y si puedes escribir un email, puedes editar un archivo de texto). Si has tratado de aprender antes y no pudiste, entonces alguien no te dijo las cosas correctas.

Este tutorial explicará la estructura del HTML clara y rápidamente, y te enseñará a través de ejemplos las cosas prácticas que debes saber de tal manera que estarás haciendo tus propias páginas muy pronto (como hoy en la tarde). Todo el tutorial comprende al rededor de 14 páginas impresas, pero solamente necesitas las primeras cuatro o algo así para poder comenzar.

En este tutorial, crearás pequeñas páginas y las verás. No existen ejercicios "requeridos", pero deberías jugar con los nuevos conceptos hasta que te sientas a gusto con ellos. Si tu navegador soporta marcos (frames) ejecuta esta Cama de Prueba HTML (versión sin marcos), donde puedes escribir HTML en un marco y ver el resultado en otro. Ajusta los marcos de entrada y salida para una mejor vista.

Si tu navegador no soporta marcos o si estás haciendo páginas reales, querrás usar un editor de texto real. Arranca el TeachText en la Mac, pico en Unix, o Notepad en Windows, o uno mejor si lo tienes (aquí está el Directorio de editores de texto de Yahoo). Acuérdate de escribir la extensión ".html" (o ".htm") a tus archivos HTML. Usa tu navegador para ver los archivos HTML que vayas creando con el menú "Archivo/Abrir" o algo similar; usa la función "Recargar" (Reload) después de cada cambio.

OK, ¿Listo? 

Lee estas secciones para que tengas una base sólida en HTML (niguna es mayor a una página, incluyendo ejemplos):

Lee los que te interesen de los siguientes (aún más cortos): Lee los siguientes cuando te sientas a gusto haciendo páginas simples: Y finalmente, el final de la página tiene algunas ligas útiles.

¿Qué es HTML?

Aunque HTML significa Lenguaje de Marcas de HiperTexto, no es en realidad un lenguaje de programación como Java, Perl, C, o BASIC; es mucho más simple. Es una manera de describir cómo un conjunto de texto e imágenes deben desplegarse en el navegador, similar en concepto a las marcas que hace un editor de periódico.

De Regreso a la Tabla de Contenido

Anatomía de una Página Web

Una página Web consiste de un archivo HTML mas los archivos de imágen usados en la página. El archivo HTML (un archivo de texto común) contiene todo el texto a desplegar, y también actúa como el pegamento para sostener el texto e imágenes juntas en los lugares correctos, y los despliega en el estilo correcto.

Escribir un archivo HTML significa componer el texto que quieres desplegar, entonces insertar las etiquetas que quieras en los lugares correctos. Las etiquetas comienzan con un caracter < y terminan con un caracter >, y le dicen al navegador que haga algo especial como mostrar texto en itálicas o negritas, o en una fuente más grande, o mostrar una imágen, o hacer una liga a otra página Web. Aunque el HTML tiene muchas etiquetas que puedes usar, no necesitas saberlas todas para usar HTML -- puedes arreglártelas con unas cuantas.

Algo excelente sobre el aprendizaje del HTML es que puedes ver cómo otros lo han hecho revisando su código fuente. Puedes ver el código fuente de cualquier página que estés visitando. Pruébalo ahora. En Netscape, usa el menú "Ver/Fuente del Documento" (View/Document Source). Otros navegadores gráficos tienen un menú similar, tal vez bajo "File" o "Edit". En Lynx, la diagonal invertida alterna entre ver o no ver el código fuente.

Revisa muchos códigos fuente, ve el código de cualquier página que te haga preguntarte cómo hicieron algo. Todos los que usan HTML han aprendido leyendo el código de otras personas. Internet es una gran comunidad de mutuo aprendizaje.

No necesitas un "Editor HTML" para escribir HTML. Algunas personas les gusta usarlos y está bien, pero muchos profesionales y novatos prefieren usar un simple editor de texto e insertar las etiquetas por sí mismos como lo estamos haciendo nosotros. Como cada quien prefiera.

De Regreso a la Tabla de Contenido

Anatomía de una Etiqueta de HTML

Las etiquetas tienen una estructura simple. Comienzan con un caracter <, y terminan con un caracter >. Entre los caracteres <> está el nombre de la etiqueta, y quizá algunos atributos dependiendo de la etiqueta. La mayoría de los atributos toman un valor también. Algunos atributos son requeridos, algunos son opcionales. La forma general de una etiqueta es 
<nombre_de_la_etiqueta atributo1="valor1" atributo2="valor2" ... >
Los nombres de etiqueta y de atributos no son de caso sensitivo, pero algunos atributos y valores sí lo son. El nombre de la etiqueta debe ir primero, pero el orden de los atributos no importa. De esta manera, puedes escribir esta etiqueta como: 
<NOMBRE_DE_LA_ETIQUETA ATRIBUTO2="valor2" ATRIBUTO1="valor1" ... >
Diferente gente escribe en formas diferentes; házlo como te guste más. 

Existen muchas etiquetas diferentes para hacer muchas cosas diferentes. Por ejemplo, usa la etiqueta <img> para mostrar una imágen en tu página Web: 

<img src="blueribbon.gif">
se ve como
Esto significa "muestra la imágen blueribbon.gif en este lugar de la página." Nota que el atributo src proporciona el URL del archivo de imágen, ya sea un URL relativo o absoluto. El ejemplo anterior usando un URL absoluto sería: 
<img src="http://www.jmarshall.com/easy/html/spanish/blueribbon.gif">
De Regreso a la Tabla de Contenido

Etiquetas Contenedoras

Algunas etiquetas, como <img>, se bastan a sí mismas; no afectan a otras cosas al rededor. Otras etiquetas tienen una etiqueta de inicio y una de final, y afectan a todo lo que se encuentre entre los dos (aún a otras etiquetas). Estas son llamadas contenedoras, porque contienen cosas entre las etiquetas de inicio y final. Por ejemplo, para hacer texto en negrita, necesitas marcar en dónde comienzan las negritas y en dónde regresa al texto normal. Haz ésto con <b> y </b>, como: 
Este es texto normal. <b>Este es texto en negrita.</b>  Normal otra vez.
Se ve como:
Este es texto normal. Este es texto en negrita. Normal otra vez.
Todo contenedor termina con </nombre_de_la_etiqueta>, cualquiera que el nombre sea. En el ejemlo anterior, la etiqueta (negrita) <b> termina con </b>. A diferencia de los inicios, las etiquetas finales no tienen atributos 

Aquí está la parte interesante:

La etiqueta que hace del Web lo que es, un superconjunto de páginas ligadas, es la etiqueta <a>. La etiqueta <a> es un contenedor que define una liga hacia otra página y es fácil de usar. Como ejemplo, aquí es cómo harías una liga a la página principal de Netscape: 
Ir a <a href="http://home.netscape.com/">la página principal de Netscape</a>.
Que se ve como:
Ir a la página principal de Netscape.
Nota que existe una etiqueta de inicio (<a href="http://home.netscape.com">) y una de final (</a>), y todo lo que esté entre ellas ("la página principal de Netscape") se visualiza como una liga en la que el usuario puede hacer click-- típicamente en azul y subrayada en Netscape.

Nota que el atributo href tiene el valor "http://home.netscape.com", que es el URL (dirección de una página Web) a donde ir cuando el usuario haga click en la liga. Para más información y ayuda con los URL en HTTP, dirígete a una de estas páginas.

Así es como se debe usar la etiqueta <a> para poner ligas a una página Web. Simple, ¿no?

De Regreso a la Tabla de Contenido

Más Sobre Ligas

Ligas con Imágenes

Puedes poner una <img> entre <a> y </a>, de tal manera que el usuario puede hacer click en la imágen para seguir la liga. Por ejemplo, observa el listón azul al principio de la página-- es la liga a otra página (una que todo el mundo debería visitar al menos una vez). 

Ligas de Correo Electrónico

Para poner una liga de correo electrónico, dale a href el valor "mailto:dirección-de-correo". Por ejemplo, 
Dile <a href="mailto:president@whitehouse.gov">al Presidente</a> lo que piensas.
se ve como
Dile al Presidente lo que piensas.
(El Presidente de E.U., por supuesto.) 

Ligando a la mitad de una página

Para ligar hacia otra parte de la misma página, o a la mitad de otra, primero crea un nombre de ancla en el punto que quieres ligar. Haz ésto con la etiqueta <a> y el atributo name como 
<a name="nombre_de_ancla"></a>
Nota el uso diferente de la etiqueta <a>; de hecho, <a> fue originalmente una contracción de "ancla". Como el ancla solamente marca un punto en la página, no necesitas poner nada entre <a> y </a>.

Una vez que el ancla existe en el lugar de destino, lígalo con la etiqueta <a href>, agregando "#nombre_de_ancla" (el fragmento URL) al URL de destino, como 

Lee sobre <a href="http://www.jmarshall.com/easy/html/spanish/#lists">listas HTML</a>.
que se ve como
Lee sobre listas HTML.
Para apuntar a otra parte en la misma página, omite completamente el resto del URL. Por ejemplo, 
<a href="#toc">De Regreso a la Tabla de Contenido</a>
se ve como
De Regreso a la Tabla de Contenido

Anatomía de un archivo HTML

Ahora que entiendes lo que son las etiquetas y las contenedoras, aquí está cómo hacer un archivo HTML correctamente: identifica tu archivo como un archivo HTML encerrándolo todo entre las contenedoras <html>--, en otras palabras, coloca una etiqueta <html> de inicio al principio de tu archivo y una etiqueta </html> de finalización al final.

Técnicamente, la etiqueta <html> puede contener sólo dos cosas: una contenedora <head>, y una contenedora <body>. Dentro de la etiqueta <body> es donde se pone toda la página. Todo el texto, imágenes, hiperligas y demás cosas desplegadas son contenidas entre la etiqueta <body> y la </body>.

La sección opcional <head>, colocada antes de la sección <body>, te permite almacenar cierta información sobre el documento en sí. Aún cuando la sección <head> exista, puede contener solamente la contenedora <title>, la cual dice qué es lo que hay que desplegar en el título de la ventana del navegador, sobre la barra de menús (si tienes un navegador gráfico). Por ejemplo, esta página tiene el título de "El HTML Hecho Realmente Fácil".

Así, un simple archivo HTML "hola, mundo", con título, sería 

<html>

<head>
<title>Hola, mundo</title>
</head>

<body>
Hola, mundo.
</body>

</html>
Si no quieres un título, omite las líneas que comienzan con <head>, <title>, y </head>.

Si esto te confunde, no te preocupes. Solamente pon el texto <html><body> al principio de tu archivo y </body></html> al final, y mágicamente se convertirá en un verdadero archivo HTML.

De Regreso a la Tabla de Contenido

Saltos de Línea y Espacios en Blanco

Puedes agregar cuantos espacios o líneas en blanco quieras (llamados "blancos") para hacer tu archivo HTML más fácil de leer. El navegador desplegará todos los blancos consecutivamente como un solo espacio, no importa cuántos sean. Este tutorial usa un estilo de sangría para ejemplos, pero usa el estilo que mejor te funcione y haga las cosas más fáciles de leer.

Para comenzar un nuevo párrafo, usa la etiqueta <p>-- la usarás mucho. El navegador ajustará las líneas de texto correctamente, basado en el ancho de la ventana (el cual, tú, el autor de HTML no puedes predecir). Si realmente quieres forzar una nueva línea, como para una dirección, usa la etiqueta <br> para insertar un salto de línea.

Con lo que sabes ya puedes escribir páginas Web-- incluso puedes mostrar imágenes y hacer hiperligas. Pruébalo, verás cómo funciona en realidad. Haz una página simple y véla con tu navegador.

De Regreso a la Tabla de Contenido

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 fuente: 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.
De Regreso a la Tabla de Contenido

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:
  1. Primer elemento
  2. Segundo elemento
  3. Tercer elemento
Esta es una lista desordenada:
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.

De Regreso a la Tabla de Contenido

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 ">".

De Regreso a la Tabla de Contenido

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.
  1. Las tablas se definen con la contenedora <table>.
  2. La etiqueta <table> contiene renglones de celdas, definidas con la contenedora <tr>.
  3. Cada etiqueta <tr> contiene celdas de datos, definidas con la contenedora <td>.
  4. 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: 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.

De Regreso a la Tabla de Contenido

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:

La etiqueta <form> tiene: 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:

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: los campos text y password tienen los siguientes atributos opcionales: los campos checkbox y radio tienen los siguientes atributos opcionales: 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:

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.

De Regreso a la Tabla de Contenido

Color

Puedes asignar el color de muchas cosas en HTML ajustando los atributos de color de ciertas etiquetas: Los valores de los atributos de color toman una de las siguientes formas: 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:

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, "&gt;" significa el símbolo de mayor-que, "&lt;" significa el símbolo de menor-que, "&quot;" significa comillas dobles, y "&amp;" significa el amperand mismo. Por ejemplo, la línea 

Para desplegar el caracter &lt; usa la secuencia &amp;lt;.
se verá como
Para desplegar el caracter < usa la secuencia &lt;.
Usa este método para poner caracteres no tecleables en tus páginas; por ejemplo, "&copy;" 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 "&GT;" 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).

De Regreso a la Tabla de Contenido

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.

De Regreso a la Tabla de Contenido

Tips para Hacer Mejores Páginas Web

  1. 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,
    2. Envía tus comentarios a <a href="mailto:myname@myhost.com">me</a>.
  2. Revisa tu página en varios navegadores, o por lo menos en diferentes tamaños de ventana.
  3. Pide a tus amigos que naveguen en tu página y te la comenten.
  4. 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.
  5. Si haces un site de varias páginas relacionadas, permite la navegación intuitiva entre ellas.
  6. 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,
    7.     <img src="bluebar.gif" alt="blue bar" width=500 height=5>
  7. 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.
  8. 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.

De Regreso a la Tabla de Contenido

© 1996 James Marshall (exigo comentarios)
Traducido en 1998 por René Alvarez

Ultimo Modificado: Julio 12, 1998 http://www.jmarshall.com/easy/html/spanish/