HTML

<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0> <table cellpadding=0 cellspacing=0 border=0><tr> <td valign="top" colspan=2 height=158 BGCOLOR="#666633" TEXT="#080000" bgproperties="fixed" background="05f005a2ddvuvs.png"> <div> <FONT SIZE="5" COLOR="#FFFFFF" FACE="Times New Roman" ><B>La  Enseñanza Complementada por la Internet</B></FONT><B>     |     </B><A HREF="index.htm" TARGET="_top" TITLE="La Enseñanza Complementada por la Inter"><U><B>home</B></U></A></div> <div> <A HREF="id17.htm" TARGET="_top" TITLE="INTRODUCCION"><U>INTRODUCCION</U></A>   |   <A HREF="id67.htm" TARGET="_top" TITLE="PRONTUARIO DEL CURSO"><U>PRONTUARIO DEL CURSO</U></A>   |   <A HREF="id34.htm" TARGET="_top" TITLE="MIS EXPERIENCIAS CON LA INTERNET "><U>MIS EXPERIENCIAS CON LA INTERNET </U></A>   |   <A HREF="id81.htm" TARGET="_top" TITLE="PUBLICANDO EN ACADEMIC"><U>PUBLICANDO EN ACADEMIC</U></A>   |   <A HREF="id41.htm" TARGET="_top" TITLE="TALLERES"><U>TALLERES</U></A>   |   <A HREF="id79.htm" TARGET="_top" TITLE="PAGINAS DE PROFESORES "><U>PAGINAS DE PROFESORES </U></A>   |   <A HREF="id80.htm" TARGET="_top" TITLE="JUEGOS INTERACTIVOS"><U>JUEGOS INTERACTIVOS</U></A>   |   <A HREF="id77.htm" TARGET="_top" TITLE="ESTRATEGIAS DE BUSQUEDA EN LA INTERNET"><U>ESTRATEGIAS DE BUSQUEDA  EN LA INTERNET</U></A>   |   <A HREF="id29.htm" TARGET="_top" TITLE="COMPONENTES DE UN CURSO"><U>COMPONENTES DE UN CURSO</U></A>   |   <A HREF="id18.htm" TARGET="_top" TITLE="MEDIOS DE COMUNICACION"><U>MEDIOS DE COMUNICACION</U></A>   |   <A HREF="id27.htm" TARGET="_top" TITLE="VENTAJAS"><U>VENTAJAS</U></A>   |   <A HREF="id35.htm" TARGET="_top" TITLE="NICENET"><U>NICENET</U></A>   |   <A HREF="id71.htm" TARGET="_top" TITLE="TRELLIX WEB"><U>TRELLIX WEB</U></A>   |   <B>HTML</B>   |   <A HREF="id38.htm" TARGET="_top" TITLE="WEBCT"><U>WEB-CT</U></A>   |   <A HREF="id30.htm" TARGET="_top" TITLE="RECURSOS SOBRE INTERNET Y LA EDUCACION"><U>RECURSOS  SOBRE INTERNET Y LA EDUCACION</U></A>   |   <A HREF="id32.htm" TARGET="_top" TITLE="RECOMENDACIONES"><U>RECOMENDACIONES</U></A>   |   <A HREF="id36.htm" TARGET="_top" TITLE="GLOSARIO"><U>GLOSARIO</U></A>   |   <A HREF="id68.htm" TARGET="_top" TITLE="LISTA DE CORREO EDUTECNOS"><U>LISTA DE CORREO EDUTECNOS</U></A>   |   <A HREF="id88.htm" TARGET="_top" TITLE="CECI"><U>CECI</U></A>   |   <A HREF="id87.htm" TARGET="_top" TITLE="COMUNICATE"><U>COMUNICATE</U></A></div> <div> </div> </td> </tr><tr> <td valign="top" width=210 BGCOLOR="#999966" TEXT="#080000"> <div> <B><IMG SRC="0466f610.jpg" border=0 width="111" height="97" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"> </B></div> </td> <td valign="top" height=322 BGCOLOR="#FFFFFF" TEXT="#080000"> <div> <I>HTML</I></div> <BR> HTML (<I>HyperText Markup Language</I>) es un lenguaje muy sencillo que permite desarrollar páginas en el WWW con <I>enlaces</I> (<I>hyperlinks</I>) que conducen a otros documentos o fuentes de información relacionadas, y con <I>inserciones</I> multimedia (gráficos, sonido...) .  Este lenguaje se basa en especificar en el texto la estructura lógica del contenido (títulos, párrafos de texto normal, enumeraciones, definiciones, citas, etc) así como los diferentes efectos que se quieren dar (especificar los lugares del documento donde se debe poner cursiva, negrita, o un gráfico determinado) y dejar que luego la presentación final de dicho hipertexto se realice por un programa especializado (como Internet Explorer, o Netscape). <P> <HR> <P>¿COMO ESPECIFICAR EFECTOS DEL TEXTO? <P>La mayoría de los efectos se especifican de la misma forma: rodeando el texto que se quiere marcar entre dos <I>etiquetas</I> o <I>directivas</I> (<I>tags</I>, en inglés), que definen el efecto o unidad lógica que se desea. Las etiquetas están formadas por determinados códigos metidos entre los signos < y >, y con la barra / cuando se trata de la segunda etiqueta de un efecto (la de cierre). Por ejemplo: <TT><efecto></TT> para abrir y <TT></efecto></TT> para cerrar. <P>  Más adelante en el presente documento se muestra el efecto de las directivas más usadas en la creación de un documento HTML. Para cada una de ellas, primero se muestra el texto fuente, y bajo éste, el efecto que produce. <P> <HR> <P>ESTRUCTURA BASICA DE UN DOCUMENTO HTML <P>Un documento HTML comienza con la etiqueta <TT><html></TT>, y termina con <TT></html></TT>. Dentro del documento (entre las etiquetas de principio y fin de html), hay dos zonas bien diferenciadas: el <I>encabezamiento</I>, delimitado por <TT><head></TT> y <TT></head></TT>, que sirve para definir diversos valores válidos en todo el documento; y el <I>cuerpo</I>, delimitado por <TT><body></TT> y <TT></body></TT>, donde reside la información del documento. <P> La única utilidad del encabezamiento en la que nos detendremos es la directiva <TT><title></TT>, que permite especificar el título de un documento HTML. Este título no forma parte del documento en sí: no aparece, por ejemplo, al principio del documento una vez que este se presenta con un programa adecuado, sino que suele servir como título de la ventana del programa que nos la muestra. <P> El cuerpo de un documento HTML contiene el texto que, con la presentación y los efectos que se decidan, se presentará ante el lector.  Dichos efectos se especifican exclusivamente a través de directivas.  Por ejemplo, escribiendo: <PRE>Estas       palabras forman          una     frase.</PRE> producimos exactamente lo mismo que con: <PRE>Estas palabras forman una frase.</PRE> A la hora de la verdad lo que se ve es: <P> Estas palabras forman una frase. <P> En resumen, la estructura básica de un documento HTML queda de la forma siguiente: <PRE><html> <head> <title>Título</title> </head> <body> Texto del documento, menciones a imágenes, enlaces, etc. </body> </html></PRE> <bR> <HR> <BR>ESTILOS Y EFECTOS BASICOS <P>Como ya hemos dicho, la estructura lógica del texto y los diferentes efectos que se le apliquen se especifican mediante <I>directivas</I>. En este punto vamos a repasar algunas de las más importantes. En cada uno de los casos que veremos, primero se presenta el texto original HTML, es decir, lo que nosotros editamos, con las directivas situadas en los lugares adecuados; y después se presenta el efecto que dicho <I>texto fuente</I> produce una vez que se interpreta y se representa con el programa adecuado. <P> <HR>TITUULOS <P>Mediante los títulos, en sus diferentes niveles de importancia, podemos definir el <I>esqueleto</I> del documento, su estructura básica. <BR>  <BR>  <PRE><h1>Mucha importancia</h1></PRE> <bR> <H1> Mucha importancia</H1> <bR> <PRE><h2>Menos importancia</h2></PRE> <bR> <H2> Menos importancia</H2> <bR> <PRE><h3>Mucha menos importancia</h3></PRE> <bR> <H3> Mucha menos importancia</H3> <bR> <HR>ATRIBUTOS DEL TEXTO <P>Mediante estos atributos determinamos el estilo y el tipo de letra que tendría la presentación del documento final. <P> El primero en el que nos deberíamos detener es el <I>texto normal</I> entendiendo como tal el que no tiene ninguna característica especial. Para definir un párrafo como <I>normal</I> no es necesario poner ninguna etiqueta. Lo único que hay que tener en cuenta, como ya se ha dicho antes, es que al presentar el documento se hace caso omiso de los espacios, tabulaciones y retornos de carro que se encuentren en el texto fuente. Por ello cuando se quiera forzar un final de línea es necesario utilizar dos directivas especiales: <TT><p></TT> para marcar un fin de párrafo, y <TT><br></TT> para un único retorno de carro. La diferencia entre ambas es que la separación de líneas que provoca <TT><p></TT> es algo mayor que la de <TT><br></TT>, para que los párrafos se distingan bien entre sí. Las dos directivas mencionadas se sitúan en el punto en que queremos poner la separación. Por ejemplo: <PRE>Este será un texto normal (párrafo 1, línea 1).<br> El primer párrafo estará formado por 2 líneas (párrafo 1, línea 2).<p> Este ya es el segundo párrafo (párrafo 2, línea 1).<p></PRE> Este será un texto normal (párrafo 1, línea 1). <BR>El primer párrafo estará formado por 2 líneas (párrafo 1, línea 2). <P> Este ya es el segundo párrafo (párrafo 2, línea 1). <P>Por supuesto, estas dos etiquetas se puede aplicar donde queramos, no sólo en el texto normal. <P>Para hacer una cita textual dentro de nuestro documento, se puede utilizar la directiva <TT><blockquote></TT>: <BR>  <BR>  <PRE><blockquote>Muchos años después, frente al pelotón de fusilamiento, el coronel Aureliano Buendía había de recordar aquella tarde remota en que su padre lo llevó a conocer el hielo.<br> (Gabriel García Márquez, Cien años de soledad)</blockquote></PRE> <bR> <BLOCKQUOTE>Muchos años después, frente al pelotón de fusilamiento, el coronel Aureliano Buendía había de recordar aquella tarde remota en que su padre lo llevó a conocer el hielo. <BR>(Gabriel García Márquez, Cien años de soledad)</BLOCKQUOTE> Las <I>direcciones</I> de correo electrónico se suelen marcar con esta directiva: <BR>  <BR>  <PRE><address>Dirección: webmaster@etsit.upm.es</address></PRE> <bR> <ADDRESS> Dirección: webmaster@etsit.upm.es</ADDRESS> <bR> <BR>  <P>  <P>Se pueden dar también los atributos más tradicionales: negrita y cursiva: <BR>  <BR>  <PRE><b>Esto en negrita</b> y <i>esto en cursiva</i></PRE> <B>Esto en negrita</B> y <I>esto en cursiva</I> <BR>  <P>Para centrar texto (o, en general, cualquier cosa: un gráfico, por ejemplo) se usa la directiva <TT><center></TT>: <BR>  <BR>  <PRE><center>Verde que te quiero verde</center></PRE> <bR> <CENTER>Verde que te quiero verde</CENTER> <bR> <P> <HR>LISTAS <P>Las listas se definen de forma muy sencilla: se dice dónde empieza la lista, dónde empieza cada punto y dónde acaba la lista. Las etiquetas que se utilicen en cada caso deben aparecer al principio de línea, o al menos sin texto por delante (sólo espacios o tabulaciones). <P> Podemos recurrir a tres tipos distintos de listas, cada una con una presentación diferente: no numeradas, numeradas y listas de definiciones (glosarios). <P> Las listas se pueden anidar, es decir, en el lugar donde debería ir uno de los términos de la lista se pone una nueva lista, que por supuesto no tiene porqué ser del mismo tipo. <P> Esto es una lista no numerada: <PRE><ul> <li>Enero <li>Febrero <li>Marzo </ul></PRE> <bR> <UL> <LI> Enero</LI> <bR> <LI> Febrero</LI> <bR> <LI> Marzo</LI> </UL> Esto una lista numerada: <PRE><ol> <li>Sigmund Freud <li>Carl Jung <li>B. Skinner </ol></PRE> <bR> <OL> <LI> Sigmund Freud</LI> <bR> <LI> Carl Jung</LI> <bR> <LI> B. Skinner</LI> </OL> Un glosario está formado por una serie de parejas de <I>término</I> (marcado con <TT><dt></TT> al principio de línea) y <I>definición</I> (con <TT><dd></TT>). Por ejemplo, podríamos crear un pequeño diccionario con los términos perro, gato y pescadilla, de la siguiente manera: <BR>  <BR>  <PRE><dl> <dt>Perro (<i>n. masc.</i>) <dd>Animal de cuatro patas que ladra. <dt>Gato (<i>n. masc.</i>) <dd>Animal de cuatro patas que maúlla y se lleva muy mal con el perro. <dt>Pescado (<i>n. fem.</i>) <dd>Animal que vive en el mar y está recubierto de escamas. </dl></PRE> <bR> <DL> <DT> Perro (<I>n. masc.</I>)</DT> <bR> <DD> Animal de cuatro patas que ladra.</DD> <bR> <DT> Gato (<I>n. masc.</I>)</DT> <bR> <DD> Animal de cuatro patas que maúlla y se lleva muy mal con el perro.</DD> <bR> <DT> Pescadilla (<I>n. fem.</I>)</DT> <bR> <DD> Animal que vive en el mar y está recubierto de escamas.</DD> </DL> <bR> <HR> <P>VARIOS <P>La directiva <hr> sitúa en el documento una línea horizontal de separación. En este documento, por ejemplo, se han utilizado líneas horizontales para separar las diferentes secciones: <BR>  <BR>  <PRE><hr></PRE> <bR> <HR> <P>Para poner un comentario en un documento HTML, es decir, una aclaración que no aparece en la presentación final del documento, se encierra el texto que formará el comentario entre los símbolos <TT></TT>. Por ejemplo, un caso típico podría ser: <BR>  <BR>  <PRE></PRE>  <P> <HR>ENLACES Y GRÁFICOS <P>Además de los muchos estilos y capacidades de presentación que nos ofrece HTML para estructurar el documento en sí, disponemos de varias directivas que nos permiten definir relaciones entre diferentes documentos y estructurar todo un conjunto de documentos para crear una unidad lógica. La facilidad para definir este tipo de enlaces es una de las razones de la potencia y versatilidad de HTML. Por la similitud de tratamiento que tienen los enlaces y los gráficos, tocaremos también en esta sección cómo pueden incluirse estos últimos en un documento. <P>Los enlaces en HTML se expresan rodeando con la directiva <TT><a></TT> el objeto (que puede ser un fragmento de texto o un gráfico) que vaya a servir como <I>anclaje</I> para el enlace. Por ejemplo, si marcamos con <TT><a></TT> un gráfico, cuando en el documento final se pulse con el ratón sobre dicho gráfico <I>saltaremos</I> al objeto referenciado en el enlace: otro documento, un vídeo musical, o un servidor de información meteorológica. <P>ENLACES <P>Para definir un enlace es necesario marcar con la directiva <TT><a></TT> el objeto del cual va a partir dicho enlace. Dicha directiva debe incluir el parámetro <TT>href="<I>URL</I>"</TT> para especificar el destino del enlace. Es decir, que antes del objeto elegido debemos abrir con <TT><a href="<I>URL</I>"></TT>, y después cerrar con <TT></a></TT>. Por ejemplo, si queremos que el texto <I>pulse aquí para visitar La Pagina del Profesor Nuñez</I> nos conduzca a la <I>home page</I> del Profesor Nuñez, debemos escribir en nuestro texto HTML: <BR>  <BR>  <PRE><a href="http://www.uprm.edu/socialsciences/mnunez/">Pulse aquí para visitar La Pagina del Profesor Nuñez</a></PRE> Lo cual producirá el resultado: <P><A HREF="http://www.uprm.edu/socialsciences/mnunez">Pulse aquí para visitar La Página del Profesor Nuñez</A> <P>GRÁFICOS <P>Para incluir un gráfico en un documento HTML se utiliza la directiva <TT><img></TT>. En dicha directiva debe incluirse un parámetro <TT>src="<I>URL</I>"</TT>, con el cual indicamos dónde está el fichero con el gráfico concreto que queremos para nuestro documento. <P>Podemos también incluir un dibujo que esté en otro lugar especificando un URL completo, por ejemplo: <BR>  <BR>  <PRE><img src="http://naic.nasa.gov/images/nasa-logo.gif"><p></PRE>   <P>  <BR>  <BR>  <P> Y además podemos hacer que un gráfico sea un enlace, utilizando la directiva <TT><a></TT>. En este caso no debemos olvidar utilizar la opción <TT>alt="<I>texto</I>"</TT> para que todos los usuarios puedan seguir el enlace: <BR>  <BR>  <PRE><a href="http://www.nasa.gov/"><img src="http://naic.nasa.gov/images/nasa-logo.gif" alt="NASA"></a><p></PRE> <bR> <P><BR> <HR> <BR>  <P>REFERENCIAS <P>Existen muchas introducciones a HTML: <BR>  <BR>  <UL> <LI> <A HREF="http://www.ncsa.uiuc.edu/demoweb/html-primer.html">A Beginner's Guide to HTML</A></LI> <bR> <LI> <A HREF="http://kuhttp.cc.ukans.edu/lynx_help/HTML_quick.html">The HTML Quick Reference Guide</A></LI> <bR> <LI> <A HREF="http://www.w3.org/hypertext/WWW/MarkUp/MarkUp.html">La especificación oficial de HTML</A></LI> </UL> Para una introducción a los <I>formularios</I> HTML, que no se han tratado en este documento, se puede revisar <A HREF="http://www.ncsa.uiuc.edu/SDG/Software/Mosaic/Docs/fill-out-forms/overview.html">Fill-out Forms Overview</A>. <BR>  <P> <HR> </BODY> </HTML> <bR> <bR> <bR> </td> </tr></table></body>