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

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.


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”&gt;


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:

.

Nota que existe una etiqueta de inicio (<a href=”http://home.netscape.com”&gt;) 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&#8221;, 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?


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.


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.


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.

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:

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

  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:

  • 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&#8221; 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:

  • 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 value=”CA” size=2 maxlength=2>

Password: <input>

<input value=”si” checked>Envíame más información.

Selecciona tu sexo abajo:

<br><input value=”F”>Femenino

<br><input value=”M”>Masculino

<br><input value=”O”>Otro

<input value=”  OK, envíalo  “>

<input value=” Whoops– borra eso “>

<input src=”/images/gobutton.gif” width=60 height=30>

<input 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>

<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 rows=10 cols=60>Pon cosas aquí</textarea>


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”


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

Anuncios