SISTEMAS Y MANTENIMIETO DEL PC MANUAL BSICO DE HTML

MANUAL BSICO DE HTML

Introduccin Qu es HTML? Anatoma de una pgina Web Anatoma de una Etiqueta de HTML Etiquetas Contenedoras Enlaces Enlaces con Imgenes Enlaces de Email Enlaces a la mitad de una pgina Anatoma de un archivo HTML Saltos de Lnea y Espacios en Blanco Unas Cuantas Etiquetas tiles Listas Numeradas o con Vietas Comentarios Tablas Formas Color Marcos Caracteres Especiales Como "<" y ">"

Instructor: Ing. Carlos A. Hernndez R.

SISTEMAS Y MANTENIMIETO DEL PC MANUAL BSICO DE HTML

MANUAL BSICO DE HTML Introduccin Este manual explicar la estructura del HTML clara y rpidamente, y te ensear a travs de ejemplos las cosas prcticas que debes saber de tal manera que estars haciendo tus propias pginas muy pronto. En este manual, crears pequeas pginas y las vers. No existen ejercicios "requeridos", pero deberas jugar con los nuevos conceptos hasta que te sientas a gusto con ellos. Necesitars usar un editor de texto real. Ejecuta el Notepad (block de notas) en Windows, o uno mejor si lo tienes. Acurdate de escribir la extensin ".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 funcin "Recargar" (Reload) despus de cada cambio.

Qu es HTML? Aunque HTML significa Lenguaje de Marcas de HiperTexto, no es en realidad un lenguaje de programacin como Java, Perl, C, o BASIC; es mucho ms simple. Es una manera de describir cmo un conjunto de texto e imgenes deben desplegarse en el navegador, similar en concepto a las marcas que hace un editor de peridico.

Anatoma de una Pgina Web Una pgina Web consiste de un archivo HTML ms los archivos de imagen usados en la pgina. El archivo HTML (un archivo de texto comn) contiene todo el texto a desplegar, y tambin acta como el pegamento para sostener el texto e imgenes 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 itlicas o negritas, o en una fuente ms grande, o mostrar una imagen, o hacer una enlace a otra pgina Web. Aunque el HTML tiene muchas etiquetas que puedes usar, no necesitas saberlas todas para usar HTML -- puedes arreglrtelas con unas cuantas. Algo excelente sobre el aprendizaje del HTML es que puedes ver cmo otros lo han hecho revisando su cdigo fuente. Puedes ver el cdigo fuente de cualquier pgina que ests visitando. En Internet Explorer, usa el men "Ver/Cdigo Fuente". Revisa muchos cdigos fuente, ve el cdigo de cualquier pgina que te haga preguntarte cmo hicieron algo. Todos los que usan HTML han aprendido
Instructor: Ing. Carlos A. Hernndez R.

SISTEMAS Y MANTENIMIETO DEL PC MANUAL BSICO DE HTML

leyendo el cdigo de otras personas. Internet es una gran comunidad de mutuo aprendizaje. No necesitas un "Editor HTML" para escribir HTML. A 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.

Anatoma 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 mayora de los atributos toman un valor tambin. 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; hazlo como te guste ms. Existen muchas etiquetas diferentes para hacer muchas cosas diferentes. Por ejemplo, usa la etiqueta <img> para mostrar una imagen en tu pgina Web: <img src="blueribbon.gif"> Se ve como

Esto significa "muestra la imgen blueribbon.gif en este lugar de la pgina." Nota que el atributo src proporciona el URL del archivo de imagen, ya sea un URL relativo o absoluto. El ejemplo anterior usando un URL absoluto sera: <img src="http://www.jmarshall.com/easy/html/spanish/blueribbon.gif">

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

Instructor: Ing. Carlos A. Hernndez R.

SISTEMAS Y MANTENIMIETO DEL PC MANUAL BSICO DE HTML

todo lo que se encuentre entre los dos (an 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 dnde comienzan las negritas y en dnde regresa al texto normal. Haz esto 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 ejemplo 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 sper conjunto de pginas enlazadas, es la etiqueta <a>. La etiqueta <a> es un contenedor que define una enlace hacia otra pgina y es fcil de usar. Como ejemplo, aqu es cmo haras un enlace a la pgina principal de Corpetrol: Ir a <a href="http://www.corpetrol.edu.co/">la pgina principal de Corpetrol</a>. Que se ve como: Ir a la pgina principal de Corpetrol. Nota que existe una etiqueta de inicio (<a href="http://home.Internet Explorer.com">) y una de final (</a>), y todo lo que est entre ellas ("la pgina principal de Internet Explorer") se visualiza como una enlace en la que el usuario puede hacer click-- tpicamente en azul y subrayada en los navegadores. Nota que el atributo href tiene el valor " http://www.corpetrol.edu.co/", que es el URL (direccin de una pgina Web) a donde ir cuando el usuario haga click en la enlace. . As es como se debe usar la etiqueta <a> para poner enlaces a una pgina Web. Simple, no? Ms Sobre Enlaces Enlaces con Imgenes Puedes poner una <img> entre <a> y </a>, de tal manera que el usuario puede hacer click en la imagen para seguir la enlace.

Instructor: Ing. Carlos A. Hernndez R.

SISTEMAS Y MANTENIMIETO DEL PC MANUAL BSICO DE HTML

Enlaces de Correo Electrnico Para poner un enlace de correo electrnico, dale a href el valor "mailto:direccinde-correo". Por ejemplo, Dile <a href="mailto:president@whitehouse.gov">al Presidente</a> lo que quieras. Se ve como Dile al Presidente lo que quieras. (El Presidente de E.U., por supuesto.) Enlazado a la mitad de una pgina Para enlazar hacia otra parte de la misma pgina, o a la mitad de otra, primero crea un nombre de ancla en el punto que quieres enlazar. Haz esto 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 contraccin de "ancla". Como el ancla solamente marca un punto en la pgina, no necesitas poner nada entre <a> y </a>. Una vez que el ancla existe en el lugar de destino, nelo con la etiqueta <a href>, agregando "#nombre_de_ancla" (el fragmento URL) al URL de destino, como Lee sobre HTML</a>. <a href="http://www.jmarshall.com/easy/html/spanish/#lists">listas

Que se ve como Lee sobre listas HTML. Para apuntar a otra parte en la misma pgina, 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 Anatoma de un archivo HTML Ahora que entiendes lo que son las etiquetas y las contenedoras, aqu est cmo hacer un archivo HTML correctamente: identifica tu archivo como un archivo HTML encerrndolo todo entre las contenedoras <html>--, en otras palabras, coloca una
Instructor: Ing. Carlos A. Hernndez R.

SISTEMAS Y MANTENIMIETO DEL PC MANUAL BSICO DE HTML

etiqueta <html> de inicio al principio de tu archivo y una etiqueta </html> de finalizacin al final. Tcnicamente, la etiqueta <html> puede contener slo dos cosas: una contenedora <head>, y una contenedora <body>. Dentro de la etiqueta <body> es donde se pone toda la pgina. Todo el texto, imgenes, hiperenlaces y dems cosas desplegadas son contenidas entre la etiqueta <body> y la </body>. La seccin opcional <head>, colocada antes de la seccin <body>, te permite almacenar cierta informacin sobre el documento en s. An cuando la seccin <head> exista, puede contener solamente la contenedora <title>, la cual dice qu es lo que hay que desplegar en el ttulo de la ventana del navegador, sobre la barra de mens (si tienes un navegador grfico). Por ejemplo, esta pgina tiene el ttulo de "El HTML Hecho Realmente Fcil". As, un simple archivo HTML "hola, mundo", con ttulo, sera <html> <head> <title>Hola, mundo</title> </head> <body> Hola, mundo. </body> </html> Si no quieres un ttulo, omite las lneas 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 mgicamente se convertir en un verdadero archivo HTML. Saltos de Lnea y Espacios en Blanco Puedes agregar cuantos espacios o lneas en blanco quieras (llamados "blancos") para hacer tu archivo HTML ms fcil de leer. El navegador desplegar todos los blancos consecutivamente como un solo espacio, no importa cuntos sean. Este manual usa un estilo de sangra para ejemplos, pero usa el estilo que mejor te funcione y haga las cosas ms fciles de leer. Para comenzar un nuevo prrafo, usa la etiqueta <p>-- la usars mucho. El navegador ajustar las lneas 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 lnea, como para una direccin, usa la etiqueta <br> para insertar un salto de lnea.

Instructor: Ing. Carlos A. Hernndez R.

SISTEMAS Y MANTENIMIETO DEL PC MANUAL BSICO DE HTML

Con lo que sabes ya puedes escribir pginas Web-- incluso puedes mostrar imgenes y hacer hiperenlaces. Prubalo, vers cmo funciona en realidad. Haz una pgina simple y mrala con tu navegador.

Unas Cuantos Etiquetas tiles Ms Prueba las siguientes: <i> </i> Hace el texto en itlicas italic. <tt> </tt> Hace el texto en teletipo (ancho fijo). <h1> </h1> Muestra diferentes estilos de encabezados (header), en orden <h2> </h2> descendente de importancia (tamao). <h3> </h3> <h4> </h4> <h5> </h5> <h6> </h6> <hr> <center> </center> <blockquote> </blockquote> <pre> </pre> Pone una lnea horizontal en la pgina. Centra texto e imgenes entre los mrgenes izquierdo y derecho. Sangra el texto a partir de los dos mrgenes. Usado para la mayora de los ejemplos en este documento. Denota texto "preformateado" en cdigo fuente: lo despliega como fuente de ancho fijo y conserva espacios y saltos de lnea (en gran medida como una mquina de escribir). Es una manera rpida de hacer mrgenes y tabulaciones. Conveniente para entrecomillar una seccin del cdigo fuente, de tal manera que es usado para muchos ejemplos en este documento.

Listas Numeradas o con Vietas El HTML proporciona una manera simple de mostrar listas numeradas ("listas ordenadas") o con vietas ("listas desordenadas"). Usa la contenedora <ol> y <ul> para hacer listas ordenadas o desordenadas, respectivamente. Dentro de la contenedora, usa la etiqueta <li> para denotar el comienzo de un elemento de la lista. Por ejemplo, el cdigo de HTML Esta es una lista ordenada: <ol> <li>Primer elemento <li>Segundo elemento <li>Tercer elemento </ol>

Instructor: Ing. Carlos A. Hernndez R.

SISTEMAS Y MANTENIMIETO DEL PC MANUAL BSICO DE HTML

Esta es una lista desordenada: <ul> <li>Primer elemento <li>Segundo elemento <li>Tercer elemento </ul> Que se vern 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-- enlaces, imgenes, tablas (ms sobre ellas despus), o incluso otras listas. Las listas anidadas son en realidad bastante comunes, tiles para resmenes o mens en cascada. Menos comunes pero tambin tiles, son las "listas de definicin", las cuales contienen un conjunto alternado de trminos y definiciones. Encierra toda la lista en la contenedora <dl>, y usa <dt> y <dd> para marcar el inicio de los trminos y definiciones, respectivamente. Por ejemplo, Aqu est una lista de definicin: <dl> <dt>Trmino 1 <dd>Definicin del Trmino1 <dt>Trmino 2 <dd>Definicin del Trmino2 </dl> Que se ver as: Aqu est una lista de definicin: Trmino 1 Definicin del Trmino1 Trmino 2 Definicin del Trmino2 Asegrate de terminar tus listas con </ol>, </ul>, y </dl>, o el resto de tu pgina se ver como parte del ltimo elemento de la lista.
Instructor: Ing. Carlos A. Hernndez R.

SISTEMAS Y MANTENIMIETO DEL PC MANUAL BSICO DE HTML

Comentarios Puedes poner comentarios en tu archivo HTML que no se vern en la pgina Web. Esto te permite explicar por qu tu cdigo HTML es de cierto modo, a cualquiera que vea tu cdigo fuente. Esto podra ser alguien ms, o (seguramente) puedes ser t mismo en el futuro. Comienza el comentario con "<!--" y termnalo con "-->", como <!-- Este es un comentario, y no se desplegar al usuario --> No pongas informacin privada en comentarios, ya que cualquiera, revisando el cdigo 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 seccin Unas Cuantas Etiquetas tiles Ms, arriba. Tambin te permiten alinear texto a la derecha, o hacer columnas de texto como con tabuladores. No son difciles de usar, una vez que sabes con claridad lo que quieres desplegar en cada celda. La "definicin estndar" de las tablas HTML ha cambiado unas cuantas veces, pero es bastante estable ahora; esta seccin te mostrar cmo hacer tablas que hacen que casi cualquier navegador despliegue 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-- enlaces, imgenes, listas, incluso otras tablas. Los renglones se definen de arriba hacia abajo, y las celdas de izquierda a derecha. Si quieres que se muestren lneas entre las celdas de la tabla, usa el atributo border en la etiqueta <table>. (Recuerdas cmo funcionan los atributos en las etiquetas HTML? Usars unos cuantos atributos en esta seccin.) Por ejemplo, el cdigo HTML <table border> <tr> <td>noroeste</td> <td>noreste</td> </tr> <tr> <td>suroeste</td>
Instructor: Ing. Carlos A. Hernndez R.

SISTEMAS Y MANTENIMIETO DEL PC MANUAL BSICO DE HTML

<td>sureste</td> </tr> </table> Se ver como: noroeste noreste suroeste sureste La mayora de los navegadores no requieren las etiquetas de terminacin </tr> o </td>; asumen que una celda o rengln termina cuando la otra comienza. De tal manera, puedes ver tablas escritas sin las etiquetas de finalizacin (aunque la etiqueta final </table> s es requerido). Celdas que Ocupan Columnas o Renglones Mltiples Algunas veces querrs que una celda ocupe ms de una columna o ms de un rengln. En este caso usa los atributos colspan y rowspan del tag <td>. Entonces solamente omite definir las celdas que la celda ms grande ocupara. 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 alinea a la izquierda y centrada verticalmente por defecto. Para fijar la posicin 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).

Instructor: Ing. Carlos A. Hernndez R.

SISTEMAS Y MANTENIMIETO DEL PC MANUAL BSICO DE HTML

Por ejemplo, este recibo sin lneas de una tienda, alinea los precios con respecto al mrgen 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 tambin los atributos align y valign en la etiqueta <tr>, para afectar todas las celdas en ese rengln. Otras Cosas tiles sobre Tablas Normalmente el navegador se las arregla para darle el tamao apropiado a la tabla, y para las celdas dentro de la tabla, basndose en el tamao del navegador y el contenido de la celda. Si deseas sugerir un ancho especfico 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 imagen quepa exactamente en el ancho de una celda). Formas Probablemente has visto formas para llenar en el Web, usadas por los motores de bsqueda, guas en lnea, y dems. Escribes tus datos, envas la forma presionando un botn de envo y los datos son enviados a un script CGI en un servidor Web por ah. Las formas, como todo lo dems en HTML se definen con un pequeo conjunto de etiquetas. Estas etiquetas simplemente definen los elementos de la forma, como campos de entrada o botones. Las formas comienzan con la etiqueta <form> y terminan con la etiqueta </form>. En la forma, puedes poner adems el cdigo HTML que quieras, pero puedes usar tambin estas etiquetas para definir campos de entrada: <input> define un campo de entrada de texto, casillas de verificacin, botones de seleccin, o botones simples.

Instructor: Ing. Carlos A. Hernndez R.

SISTEMAS Y MANTENIMIETO DEL PC MANUAL BSICO DE HTML

<select> define mens desplegables y cajas de seleccin. <textarea> define un campo de entrada de texto multilnea. 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 mtodo HTTP usado para enviar los datos de la forma (cualquiera de get o post funcionarn-- coordinando esto con tu script CGI).

As, una etiqueta <form> tpica 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 tambin 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 representado como un conjunto de estos pares de nombre-valor cuando se enva al script CGI. Los campos de texto vacos se envan como pares de nombre-valor con un valor de una cadena vaca, pero las casillas de verificacin y botones de seleccin que no se usan no se envan 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 envos: http://hoohoo.ncsa.uiuc.edu/cgi-bin/query Para post envos: http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query

La Etiqueta <input> Usa la etiqueta <input> para crear la mayora 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-- idntico a text, pero la entrada del usuario no se despliega checkbox-- una casilla de verificacin (para simples valores s/no) radio-- un botn de seleccin (para escoger una de varias opciones) submit-- un botn que enva los datos de la forma, cuando la entrada de datos del usuario est lista reset-- un botn que reestablece todos los campos de una forma a sus valores iniciales image-- como submit, pero muestra una imagen como botn hidden-- te permite definir pares extra de nombre-valor que se envan 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
Instructor: Ing. Carlos A. Hernndez R.

SISTEMAS Y MANTENIMIETO DEL PC MANUAL BSICO DE HTML

size fija la longitud desplegada del campo maxlength fija la cantidad mxima 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 botn.

El campo image requiere un atributo src con el URL de la imagen a usar, y soporta la mayora de los atributos de la etiqueta <img>. Para crear un conjunto de botones de seleccin, dales a todos el mismo nombre pero diferentes valores. Solamente el valor seleccionado ser enviado al servidor cuando la forma se enve. Usualmente, tendrs texto antes o despus de los campos text, password, checkbox, y radio, para etiquetarlos para el usuario. Ninguna etiqueta se muestra automticamente. Los campos submit y image de hecho pueden tener un atributo nombre, para enviar informacin sobre cmo la forma fue enviada. Si tienes mltiples botones de envo, tu script CGI puede distinguirlos por nombres o valores diferentes (solamente el botn de envo que presionas es el que se enva como par nombrevalor). Si un campo image tiene un atributo name de (digmoslo) "foo", entonces la localizacin x-y del click del mouse en el botn es enviada como dos campos enteros con nombres de "foo.x" y "foo.y". Esto permite un mapa de imgen con un botn 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 informacin. name="masinfo" value="si" checked>Envar ms

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, envalo "> <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>
Instructor: Ing. Carlos A. Hernndez R.

SISTEMAS Y MANTENIMIETO DEL PC MANUAL BSICO DE HTML

Usa la etiqueta contenedora <select> para crear mens desplegables y listas desplazables. Entre <select> y </select> puedes tener solamente etiquetas <option> y su texto, el cual define tems 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 desplegable. multiple (sin valor) deja que el usuario seleccione tems mltiples de la lista (usualmente con ctrl-click o shift-click). Cada tem 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 enva al script CGI si ese tem es seleccionado. Si no existe el atributo value, el valor enviado es el texto que sigue a la etiqueta <option>. Para hacer que un tem 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 multilnea desplazables. Todo lo que est entre las etiquetas <textarea> y </textarea> ser el contenido inicial de la caja de entrada, as que colcalas 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 ests asignando el tamao al cual debe desplegarse, no el tamao de los datos Un ejemplo del campo de entrada <textarea>es: <textarea name="stuff" rows=10 cols=60>Pon cosas aqu</textarea>

Instructor: Ing. Carlos A. Hernndez R.

SISTEMAS Y MANTENIMIETO DEL PC MANUAL BSICO DE HTML

Otras Cosas de Formas Intenta hacer unas cuantas formas para ver cmo se ven. No necesitas un script CGI para verlas en tu navegador.

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, enlaces no visitadas, enlaces visitadas y enlaces activas de la pgina. Para cambiar el color del texto de una parte de una pgina, 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 mtodo: Uno de los 16 "nombres de color ms extendidos y entendidos": aqua, black, blue, fuchsia, gray, green, lime, brown, navy, olive, purple, red, silver, teal, white (white), or yellow (yellow)

No confes en el color para cosas importantes, algunos navegadores no pueden desplegarlo. Adems de los 16 nombres estndar de color de arriba, Internet Explorer soporta muchos otros nombres de colores. Por supuesto, solamente se despliegan correctamente con navegadores Internet Explorer-- usa #RRGGBB los cdigos de color para captar el mximo de navegadores.

Marcos Los marcos no son parte del HTML estndar. Son una extensin al HTML que cre Internet Explorer. No funcionan en todos los navegadores, as que limita la cantidad de usuarios al usarlos. Bsicamente, creas un archivo HTML normal para cada marco, adems 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 mltiples renglones y columnas. Tiene cualquiera de los atributos rows or cols, el cual es una lista de tamaos 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: mrgenes angostos a izquierda y derecha y una pgina central ancha.
Instructor: Ing. Carlos A. Hernndez R.

SISTEMAS Y MANTENIMIETO DEL PC MANUAL BSICO DE HTML

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 despus las columnas o renglones en ms renglones o columnas; or etiquetas <noframes> y </noframes> para definir una pgina para navegadores que no soportan marcos (siempre es sabio usarlas). Los marcos pueden convertirse parte del HTML estndar algn da, una vez su complejidad se deseche. Para las cosas oficiales en marcos y el estndar de HTML ve la seccin "Next Steps" en esta pgina en W3C. Caracteres Especiales Como "<" and ">" Cmo puedes desplegar los caracteres "<" y ">"? Si solamente los escribes en tu archivo HTML, el navegador pensar que ests 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 pgina, 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 smbolo de mayor-que, "&lt;" significa el smbolo de menor-que, "&quot;" significa comillas dobles, y "&amp;" significa el amperand mismo. Por ejemplo, la lnea Para desplegar el caracter &lt; usa la secuencia &amp;lt;. se ver como Para desplegar el caracter < usa la secuencia &lt;. Usa este mtodo para poner caracteres no tecleables en tus pginas; por ejemplo, "&copy;" muestra el smbolo de copyright . Aqu est una lista de caracteres especiales , con letras acentuadas primero, seguidas de smbolos no alfabticos. Al contrario de los nombres de etiquetas, estos nombres de caracteres son de caso sensitivo, as que "&GT;" no despliega el smbolo de mayor-que. Necesitas escapar cada "<" o ">", pero no todos los ampersand, etc. Estos cdigos slo estn ah cuando los necesites, por ejemplo, cuando tu pgina no se despliegue correctamente sin ellos (y debas verificar visualmente cada pgina que hagas).

Instructor: Ing. Carlos A. Hernndez R.

SISTEMAS Y MANTENIMIETO DEL PC MANUAL BSICO DE HTML

Una Nota Importante sobre HTML Una pgina Web puede ser desplegada en una gran variedad de dispositivos -navegadores grficos, navegadores de slo texto, dispositivos de texto-a-voz o braille, u otros dispositivos an no inventados. An los navegadores grficos varan mucho, desde que el usuario puede cambiar el tamao 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 cmo desplegar la pgina y sorprendentemente poco control del HTML al autor. Tcnicamente el HTML es una manera de describir qu tipo de datos ests desplegando, y no explcitamente cmo deben desplegarse. Por ejemplo, la etiqueta <h1> dice "Esta es una seccin de encabezado principal"; no dice en realidad "Muestra esto en un tamao grande de letra, negrita y centrada". El navegador decide cmo debe desplegarlo. De hecho, el navegador toma la decisin final de cmo 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 tamao y la capacidad de los navegadores que desplegarn tu pgina. Solamente trata de escribir HTML de tal manera que tus pginas no se ajusten a una forma en particular (lo cual variar mucho de usuario a usuario). De otra manera, las tablas y diseos que se ven geniales en tu pantalla pueden verse horribles en la de otro (siempre vale la pena mirarlo). Si es posible, no confes en el navegador cuando muestra imgenes -usa el atributo alt de la etiqueta <img> para definir un texto alternativo para mostrar para los navegadores que no puedan mostrar la imagen. Si escribes HTML flexible, cualquier buen navegador desplegar tu pgina aceptablemente. En estos das, el HTML tiene etiquetas que dicen explcitamente cmo desplegar algo, en vez de describir solamente qu tipo de dato es. Como ejemplo estn las etiquetas comnmente usadas <b> and <i>. Estas son en realidad una ligera desviacin de la filosofa 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 Pginas Web 1. Obtn retroalimentacin de tus usuarios con tu direccin de email y escucha sus comentarios. Esto te llevar a ms mejoras que cualquier otra cosa. Por ejemplo, 2. Enva tus comentarios a <a href="mailto:myname@myhost.com">me</a>. 3. Revisa tu pgina en varios navegadores, o por lo menos en diferentes tamaos de ventana. 4. Pide a tus amigos que naveguen en tu pgina y te la comenten.

Instructor: Ing. Carlos A. Hernndez R.

SISTEMAS Y MANTENIMIETO DEL PC MANUAL BSICO DE HTML

5. No confes en cosas que no funcionan en todos los navegadores como el color. salos si quieres, pero asegrate que tu pgina puede verse en navegadores que no los soporten. 6. Si haces un site de varias pginas relacionadas, permite la navegacin intuitiva entre ellas. 7. Cuando uses la etiqueta <img>, incluye los atributos alt, width, y height. El atributo alt define texto a mostrar para usuarios no grficos, y los atributos width y height dan el tamao de la imagen en pxeles. Esto permite que un navegador despliegue el resto de la pgina sin esperar a que la imagen se cargue, haciendo la vida mucho mejor para el usuario. Por ejemplo, <img src="bluebar.gif" alt="blue bar" width=500 height=5> 8. Escribe cdigo fuente fcil de leer. Tendrs que editarlo alguna vez y otra gente podra hacerlo tambin. El cdigo fuente desordenado es difcil de trabajar e incrementa los errores. Facilita las cosas para todos escribiendo cdigo fuente claro. 9. Lee las opiniones de los estilos de otras personas. Al final, no tengas miedo 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 (fcil de usar, informativo, divertido, atractivo, etc.).

Final OK, ya sabes bastante de HTML para hacer pginas Web. Ve y haz una o dos pginas. Ve y ensea a alguien ms a hacerlo. El HTML tiene otras etiquetas con las que puedes jugar.

Instructor: Ing. Carlos A. Hernndez R.