Manual Basico de Programacion HTML

SUBSECRETARA DE EDUCACIN SUPERIOR DIRECCIN GENERAL DE EDUCACIN SUPERIOR TECNLOGICA INSTITUTO TECNOLGICO DE LA PIEDAD
SECRETARA DE EDUCACIN PBLICA
INSTITUTO TECNOLOGICO DE LA PIEDAD
DEPARTAMENTO DE INGIENERIA ELECTRICA Y ELECTRONICA
MANUAL DE PROGRAMACON BSICA EN HTML PARA LA CREACION DE PGINAS WEB
PRESENTADO POR: GABRIELA ANDRADE VIDALES
ESPECIALIDAD: INGENIERIA ELECTRNICA
LA PIEDAD, MICHOACAN
OCTUBRE DE 2011
PROCESO EDUCATIVO
RSGC - 559 Sector NACE:37
INDICE
1. INTRODUCCION......... 2. CARACTERISTICAS DEL HTML ...... 2.1 ETIQUETAS Y ATRIBUTOS . 2.1.1 ETIQUETA <TITLE> 2.1.2 ETIQUETA <BODY> 2.2 NORMAS FUNDAMENTALES.. 2.2.1 MAYUSCULAS Y MINUSCULAS . 2.2.2 TABULADORES Y SALTOS DE LINEA ... 2.2.3 CARACTERES ESPECIALES .. 3. COLORES DENTRO DEL HTML 4. TEXTO EN HTML 5. LISTAS ... 5.1 LISTAS ORDENADAS ... 5.2 LISTAS DESORDENADAS 5.3 LISTAS DE DEFINICION ... 6. IMGENES... 6.1 FORMATOS GRAFICOS EN INTERNET.. 6.1.1 FORMATO GIF. 6.1.2 FORMATO JPEG.. 6.2 INCLUSION DE IMGENES.. 6.2.1 TAMAO DE LAS IMGENES 6.2.2 ESCALADO DE IMGENES.. 6.2.3 BORDES DE LA IMAGEN... 03 04 04 07 07 08 08 08 08 11 14 17 17 18 19 22 23 23 24 24 25 25 25
6.2.4 ALINEACION DEL TEXTO CON LAS IMGENES ... 6.2.5 TEXTO ALTERNATIVO . 6.2.6 IMGENES COMO FONDO ... 7. TABLAS 8. HIPERVINCULOS 8.1 ENLACES A ZONAS DE LA MISMA PAGINA .. 8.2 ENLACES A OTRAS PAGINAS. 8.3 ENLACES A UNA ZONA DE OTRA PAGINA .... 9. MAPAS .. 10. MARQUESINA ... 11. SONIDO DE FONDO .. 12. FRAMES (MACROS)... 13. OTRAS ETIQUETAS... 14. PRUEBAS Y RESULTADOS ..... 15. CONCLUSIONES 16. BIBLIOGRAFIA ..
25 25 26 28 32 32 35 37 37 40 41 42 46 47 70 71
ii
1. INTRODUCCIN
Internet, como est ahora, es una excelente herramienta para bsqueda de informacin, independientemente de en qu punto del mundo se encuentre. Las aplicaciones de negocios, de hecho, se afanan por dar a los usuarios herramientas para crear nueva informacin a partir de cero. El WWW (World Wide Web por sus siglas en ingls) es un sistema de informacin que est siendo configurando como la gran biblioteca global. Pero esta cantidad de informacin debe estar ordenada de alguna manera para que sea posible encontrar lo que se busca. La unidad bsica donde est almacena esta informacin son las pginas Web. Estas pginas se caracterizan por contener texto, imgenes, animaciones e incluso sonido y video. El lenguaje estandarizado para la creacin de pginas Web es el lenguaje HTML (HyperText Markup Language, Lenguaje de Marcas Hipertexto). HTML es un lenguaje mus sencillo que permite describir documentos hipertexto. La descripcin se basa en especificar en el texto la estructura lgica del contenido (ttulos, prrafos de texto normal, enumeraciones, definiciones, citas, etc.) as como los diferentes efectos que se quieren dar (especificar los lugares del documento donde se deben poner cursiva, negrita, o un grafico determinado). Para utiliza el servicio Web se necesita una aplicacin cliente capaz de entender o interpretar informacin HTML, a este tipo de aplicaciones se le conoce como browsers o navegadores o visualizadores o hojeadores. Mediante el browser el usuario puede acceder a los documentos HTML y moverse de un documento a otro a travs de sus vnculos o enlaces, este hecho de moverse con el browser por las paginas WWW a travs de sus enlaces se le conoce como Navegar por Internet. El browser sabe como acceder a cada recurso de Internet, sabe como acceder a un servidor de FTP annimo, a un servidor de News, y por supuesto cmo conectarse a los servidores Web. El mecanismo que utiliza el browser para acceder a un recurso en cualquier lugar de la Internet es el URL (Uniform Resource Locator; Localizador de Recursos Uniforme), comn mente llamado direccin de Internet. Los URLs combinan el protocolo a utilizar para obtener el recurso: http (es el del Web), ftp, telnet, ; junto con el nombre del host servidor, y el path completo del recurso (directorios y nombre del archivo). Los URLs constituyen en realidad los enlaces que permiten movernos dentro de una pagina a otra, es decir navegar por internet, y que las podemos identificar dentro de una pagina WWW porque estn incluidos comnmente como Texto en color subrayado, tambin puede ir incluidos dentro de una imagen, etc.
2. CARACTERISTICAS DEL HTML

Una de las caractersticas de este lenguaje mas importantes es que no es necesario ningn programa especial para la creacin de una pagina Web. Gracias a ello se ha conseguido que se puedan crear paginas con cualquier ordenador y sistema operativo. El cdigo HTML no es mas que texto y por lo tanto lo nico necesario para escribirlo es un editor de texto como el que acompaan a todos los sistemas operativos: en este caso se utilizar el bloc de notas de Windows. El editor de texto se usar para ir escribiendo los documentos HTML, que ser interpretado posteriormente por el navegador, con lo que iremos comprobando los cambios y aadidos que se vayan efectuando. Otro punto importante dentro de la programacin HTML es un Visualizador o navegador del Web. Actualmente existen diversos navegadores, todo depender del gusto del programador, solo para mencionar algunos de los navegadores estn: Microsoft Explorer, Mosaic, Netscape Navigator, Google Cherome, Motzilla, etc. Ahora que ya se dio una imagen global de lo que es el HTML, se comenzara con pequeos aspectos bsicos que hay que tomar en cuenta antes de entrar de lleno a la programacin. Los archivos que contendrn el cdigo de la pgina Web que ir creando sern guardados con extensin .html
2.1 ETIQUETAS Y ATRIBUTOS
Las ordenes de este lenguaje estarn formadas por unos comandos llamados etiquetas pueden tener la siguiente estructura: <nombre de la etiqueta> Texto/grfico/etiquetas </nombre de la etiqueta> Apertura de una etiqueta siempre entre <> A la cual se le aplica la etiqueta Cierra la etiqueta siempre entre </ >
El mecanismo de funcionamiento de estas etiquetas es muy sencillo. Cuando el visualizador encuentra el signo menor (<), examina todos los caracteres hasta que encuentra el final de la etiqueta - el smbolo mayor (>). Entonces, interpreta el contenido de la etiqueta, y aplica esa propiedad que viene a continuacin.
Hay etiquetas que se aplican a todo el documento HTML, o solo desde el punto en que son insertadas hasta el final del documento. Otras se le aplican exclusivamente un fragmento del texto. En ese caso, el final de la aplicacin se especifica con la misma etiqueta precedida de la barra inclinada hacia atrs (/). Las etiquetas pueden contener de forma opcional u obligatoria, lo que se denominan los atributos o modificadores. Los atributos matizan el significado de la marca, y que se expresan de la siguiente forma: <ETIQUETA ATRIB1 = VALOR1 ATRIB2 = VALOR2 > El valor de los atributos se expresan encerrados entre comillas. Algunos atributos solo vienen definidos por su nombre (no tienen valor); son los atributos llamados compactos. Existen tres etiquetas fundamentales que deben ir obligatoria mente en un documento de HTML y son las siguientes:
<html></html>
Indica al navegador que el documento de texto que esta leyendo es un documento HTML. Esta etiqueta se abre al inicio del archivo y se cierra al final del mismo. Dentro de la cabecera hay informacin del documento, que no se ve en la pantalla principal, y que precisa las caractersticas del documento, principalmente el titulo del documento. Esta etiqueta se abre luego de <html>
<head></head>
<body></body>
Este comando acepta numerosos modificadores. Dentro del cuerpo del documento se incluye cualquier carcter imprimible. Tambin es el cuerpo de la pagina donde se despliega el contenido global. Esta etiqueta se abre luego de cerrar el encabezamiento con </head> y se extiende hasta el final de la pagina, cerrndose antes de </html>
Importante: Cada que se abra una nueva etiqueta es necesario que se empiece alineada un poco ms a la derecha que la principal, esto es para que haya una mejor comprensin y se detecten ms rpido los errores.
Ejemplo 1. <HTML> <HEAD> </HEAD> <BODY> Mi primer pgina con HTML </BODY> </HTML> Asegrese de ingresar index.html como nombre a grabar en su bloc de notas (incluidas las comillas) para evitar que se aada la extensin .txt. Figura 1
Figura 1. La manera de guardar un documento HTML Sin cerrar el programa de texto que estamos usando, abra su navegador de www. En la pantalla de direccin Web, introduzca la ruta completa a su archivo index.html, y usted deber poder ver en su pantalla su primera pagina Web, Figura 2.
Figura 2. Se muestra su primera pagina Web
Importante: Como se ve en el ejemplo 1. Toda la etiqueta abierta debe cerrarse. En caso de no cerrarse el error podra causar confusin al navegador.
2.1.1 ETIQUETA: <TITLE>
El titulo del documento se declara entre las etiquetas <TITLE> y </TITLE>. El titulo debe ser breve y descriptivo de su contenido, pues ser lo que vean los dems cuando aadan nuestra pagina a su bookmark (o libro de direcciones favoritas). Sin cerrar nuestro navegador de internet, volvemos al editor de texto e incluimos el campo <title> entre las etiquetas de apertura y cierre el encabezado (head). Ejemplo 2. <HTML> <HEAD><TITLE> Manual bsico de HTML</TITLE></HEAD> <BODY> Mi primer pgina con HTML </BODY> </HTML> El nuevo archivo HTML se grabar con el mismo nombre index.html, tan solo usando la opcin de Grabar en su editor de texto. Una vez realizado esto, y sin cerrar su editor de texto, vamos al navegador en el que seleccionamos la opcin de Actualizar / Refresh y nuestra pgina estar visible. Notar que el titulo aparecer en la parte superior de la pagina, Figura3.
Figura 3. Se muestra el titulo de la pgina Web definido en la cabecera 2.1.2 ETIQUETA: <BODY>
Todo el texto, las imgenes y el formato visibles al usuario deben encontrarse entre las etiquetas <body> </body>. Esta etiqueta cuenta con los siguientes atributos: 7
Bgcolor Text Link Alink Vlink Background Bgsound Bgproperties
define el color de fondo de la pagina. define el color del texto de la pagina. define el color de los vnculos en la pagina. define el color del vinculo actual o activado en la pgina. define el color del vinculo ya visitado. define el archivo grafico que ser desplegado como fondo. define el archivo de audio que se tocar en la pagina (solo para internet Explorer). define el movimiento vertical del fondo (solo para internet Explorer).
Los atributos se incluyen en la etiqueta de apertura, separados por un espacio
2. 2 NORMAS FUNDAMENTALES
2.2.1 MAYSCULAS Y MINSCULAS. El HTML no distingue entre maysculas y minsculas en la especificacin de etiquetas y sus atributos. Sin embargo, por legibilidad, es aconsejable codificar tanto etiquetas como atributos. 2.2.2 TABULADORES Y SALTOS DE LNEA Los visualizadores no toman en cuenta las tabulaciones, los saltos de lnea ni los espacios en blanco extra. Esto tiene ventajas y desventajas. La principal ventaja es que permite obtener resultados uniformes y de buena presentacin de manera bastante fcil. La principal desventaja es que un documento HTML, por lo menos debe usar las etiquetas <P></P> o <BR> para evitar que quede todo el texto en una sola lnea. 2.2.3 CARACTERES ESPECIALES Todos los visores de pginas Web actuales soportan todos los caracteres grficos de la especificacin ISO 8859-1, que permite escribir textos en la mayora de los pases occidentales. De cualquier forma y como muchos sistemas tienen distintos juegos de caracteres ASCII, se han definido dos formas de representar caracteres especiales usando solamente el cdigo ASCII de 7 bits. Para hacer referencia a estos caracteres se les asigna un cdigo numrico o un nombre de "entidad". Asimismo hay caracteres que se utilizan para las 8
directivas de HTML, por ejemplo < y>. Estos caracteres pueden ser representados por un cdigo numrico o una entidad cuando deseemos que aparezcan en el documento "tal cual". Las entidades comienzan por el smbolo &(ampersand) y terminan con el smbolo ; (punto y coma). &#codigo_ASCII; A continuacin se muestra una tabla con las principales entidades Figura 4
Carcter Cdigo Entidad Carcter Cdigo Entidad ! # % ' ) + / ; = ? [ ] _ { } ! # % ' ) + - / ; = ? [ ] _ --------------" $ & ( * , . : < > @ \ ^ ` | ~ " $ & ( * , . : < > @ \ ^ ` ---------------
Carcter Cdigo Entidad Carcter Cdigo Entidad ¼ frac14 ¾ frac34 À Agrave Â Acirc Ä Auml Æ AElig È Egrave Ê Ecirc Ì Igrave Î Icirc Ð ETH Ò Ograve Ô Ocirc Ö Ouml Ø Oslash Ú Uacute Ü Uuml Þ THORN à agrave â acirc ä auml æ aelig è egrave ê ecirc ì igrave î icirc ð eth ò ograve ô ocirc ö ouml ½ frac12 ¿ Iquest Á Aacute Ã Atilde Å Aring Ç Ccedil É Eacute Ë Euml Í Iacute Ï Iuml Ñ Ntilde Ó Oacute Õ Otilde × times Ù Ugrave Û Ucirc Ý Yacute ß szlig á aacute ã atilde å aring ç ccedil é eacute ë euml í iacute ï iuml ñ ntilde ó oacute õ otilde ÷ divide
{ -} - nbsp
| -~ -¡ Iexcl £ Pound ¥ Yen § Sect © Copy « Laquo Shy
¢ cent ¤ curren ¦ brvbar ¨ uml ª ordf ¬ not ® reg ° deg ² sup2 ´ acute ¶ para ¸ cedil º ordm
¯ Macr ± Plusmn ³ sup3 µ Micro · Middot ¹ sup1 » Raquo
ø oslash ú uacute
ù ugrave û Ucirc
ü uuml þ thorn
ý yacute ÿ yuml
Figura 4. Cdigo de caracteres especiales ASCII Por lo tanto, la palabra pgina la podramos escribir como: pgina página página Si deseamos que cualquier visor de pginas Web pueda visualizar las letras acentuadas de nuestro documento debemos utilizar sus correspondientes entidades o cdigos para representarlas. Ejemplo 3: <HTML> <HEAD><TITLE> Manual bsico de HTML</TITLE></HEAD> <BODY> Mi primer página con HTML. Duerme para soñar, porque los sueños se hicieron para cumplirse. Este es un ejemplo de una página WEB. </BODY> </HTML> La figura 5, muestra como se ver en el navegador Web
Figura 5. As se ver su pagina Web.
10
3. COLORES DENTRO DEL HTML

El cdigo de color es un nmero compuesto por tres pares de cifras hexadecimales que indican la proporcin de los colores "primarios", rojo, verde y azul. El cdigo de color se antecede del smbolo #. El primer par de cifras indican la proporcin de color Rojo, el segundo par de cifras la proporcin de color Verde y, las dos ltimas, la proporcin de color Azul. Estos nmeros estn en numeracin hexadecimal. Esta numeracin se caracteriza por tener 16 dgitos (en lugar de los 10 habituales). Estos dgitos son: 0123456789ABCDEF Es decir, que en nuestro caso, el nmero menor es el 00 y el mayor el FF. Combinando las proporciones de cada color primario obtendremos diferentes colores. Poe ejemplo: #000000 #FF0000 #00FF00 #0000FF #FFFFFF Color Negro Color Rojo Color Verde Color Azul Color Blanco
Cuando la gente no usa color verdadero, sino 256 colores hay que tener en cuenta que los navegadores slo permiten ver con exactitud 216. Estos se conseguirn con ternas de parejas expresadas como: 00, 33, 66, 99, CC y FF. Cualquier otra combinacin se visualizar como el color ms parecido. La paleta de colores de 216 que asegura una visin real de los colores en la web se muestra en la Figura 6.
FFFFFF CCFF99 99FF66 00FFFF FFCC66 00FF66 CCCC33 99CC33 33CCCC 00CC99 CC9966 FFFFCC CCFF66 99FF33 66FF99 FFCC33 00FF33 99CCCC 00CCFF CC99FF CC99CC 00CC33 FFFF99 CCFF33 66FFCC FFCC99 CCCCFF 00FF00 FF99FF 33CCFF 00CCCC 33CC66 9999FF FFFF66 CCFF00 FFCCFF 66FF66 33FF66 CCCCCC 99CC99 99CC00 FF9933 00CC66 00CC00 FFFF33 99FFFF 99FF00 66FF33 33FF33 CCCC99 66CCFF FF9999 FF9900 CC9999 CC9933 FFFF00 99FFCC 33FFFF 00FFCC 00FF99 99CCFF FF99CC 66CC99 66CC33 FF66FF CC9900 CCFFFF 99FF99 FFCCCC 66FF00 FFCC00 CCCC66 99CC66 FF9966 66CC00 33CC33 FF66CC CCFFCC 66FFFF 33FFCC 33FF99 33FF00 CCCC00 66CCCC 66CC66 33CC99 33CC00 9999CC
11
FF6699 FF6633 FF33CC FF3399 FF00CC FF3300 FF0033 3366FF 3366CC CC0066 993366 993333 3333CC 663300# 333333 003300
999999 FF6600 3399CC 0099CC FF3366 FF0099 FF0000 CC3366 CC0099 336699 9900CC 993300 663366 660099 003366 000099
6699FF FF33FF CC6699 9966FF 009966 339900 CC00FF CC00CC 9933CC 993399 336633 6600FF 6600CC 0000FF 0000CC 330066
FF6666 3399FF 669966 CC6666 CC33FF 009900 CC3399 9933FF 666666 CC0033 006666 990099 990033 333399 660033 330033
CC66FF 999900 FF00FF 009999 FF3333 6666FF 996666 0066FF 666633 6633FF 336600 006600 0033CC 3300CC 333300 000066
999966 669999 339999 CC6633 339933 CC33CC 6666CC 666699 0066CC 336666 6633CC 0033FF 990000 003399 660000 330000
6699CC CC66CC 669933 CC6600 009933 FF0066 996633 CC3333 9900FF 006699 3333FF 663399 3300FF 333300 330099 000033
999933 0099FF 669900 339966 9966CC 996699 996600 CC3300 666600 CC0000 006633 990066 663333 660066 003333 000000
Figura 6. Paleta de colores como se vera en la Web, con cdigo hexadecimal De cualquier forma la mayora de los editores de HTML nos permiten obtener el cdigo de color correspondiente escogiendo directamente el color de una paleta. As mismo la mayor parte de los navegadores actuales tienen algunos colores predefinidos por lo que pueden ser referenciados por su nombre. La paleta de colores que se pueden poner con nombre es ms limitada, slo 140. Figura 7
White Linen Silver Lavender Beige LightYellow BlanchedAlmond PeachPuff DeepSkyBlue Blue DarkSlateBlue BlueViolet Thistle MediumOrchid PaleVioletRed RosyBrown OrangeRed Brown Snow GhostWhite DarkGray LavenderBlush Cornsilk LightGoldenrodYellow Bisque LightSteelBlue DodgerBlue MediumBlue Indigo DarkViolet Plum Pink MediumVioletRed Salmon Red Sienna Seashell WhiteSmoke LightCyan MistyRose AntiqueWhite LemonChiffon Moccasin LightBlue CornflowerBlue DarkBlue Navy DarkOrchid Magenta LightPink Burlywood LightCoral IndianRed SaddleBrown FloralWhite Gainsboro Azure MintCream PapayaWhip PaleGoldenrod Wheat SkyBlue SteelBlue MediumSlateBlue MidnightBlue DarkMagenta Violet HotPink LightSalmon Coral Crimson DarkRed OldLace LightGrey AliceBlue Honeydew Ivory Khaki NavajoWhite LightSkyBlue RoyalBlue SlateBlue MediumPurple Purple Orchid DeepPink DarkSalmon Tomato Firebrick Maroon
12
Tan Peru Goldenrod Olive LimeGreen Lime Cyan DarkTurquoise DarkCyan DimGray
SandyBrown DarkSeaGreen DarkGoldenrod DarkOliveGreen YellowGreen MediumSpringGreen PaleTurquoise Aquamarine Teal DarkSlateGray
Orange DarkKhaki OliveDrab DarkGreen Chartreuse SpringGreen PowderBlue MediumAquamarine LightSlateGray Black
DarkOrange Yellow ForestGreen SeaGreen GreenYellow LightGreen Turquoise LightSeaGreen SlateGray
Chocolate Gold Green MediumSeaGreen LawnGreen PaleGreen MediumTurquoise CadetBlue Gray
Figura 7. Nombre de colores Utilizando estos datos, se crear una pgina con fondo azul celeste y letras negras. Para este efecto se utilizarn los atributos bgcolor y text Ejemplo 4: <HTML> <HEAD><TITLE> Manual bsico de HTML</TITLE></HEAD> <BODY BGCOLOR=#66CCFF TEXT=000000> Mi primer página con HTML. Duerme para soñar, porque los sueños se hicieron para cumplirse. Este es un ejemplo de una página WEB. </BODY> </HTML> Grabe este archivo seleccionando la opcin de Guardar/Grabar de su editor de texto, de modo que se mantenga el nombre index.html. Cuando usted vaya a su navegador WWW y seleccione la opcion de Actualizar o Refresh, notar el cambio.En la figura 8 se muestra como se ver la pgina con el cdigo anterior.
Figura 8. Fondo color azul y letras negras
13
4. TEXTO EN EL HTML
Una idea importante de HTML es la de definir lo que se desea hacer (resaltar una palabra o un prrafo, utilizar un espaciado constante, etc.), pero no decir cmo se desea hacerlo, dejando que esta funcin la realice el browser de acuerdo con sus posibilidades. Por ejemplo, se le puede decir al browser que se quiere remarcar una palabra sin decirle que la ponga en bold; de ordinario la remarcar ponindola en bold, pero si el browser se est ejecutando en un ordenador que no permite texto en bold, el propio browser buscar una forma alternativa de remarcar esa palabra. De todas formas, los autores quieren muchas veces determinar ms en concreto cmo va a aparecer su texto en la pantalla del browser. Adems, cada vez es ms infrecuente ejecutar un browser que no tenga las amplias posibilidades de formatear texto de Mac o Windows. La consecuencia es que HTML se ha extendido y permite tanto definir de modo general la funcin del texto como determinar en concreto el formato con que se debe representar. A continuacin se muestran algunos ejemplos de ambas formas de definir los formatos. Figura 9.
As se escribe:
<FONT SIZE="+1" COLOR="red" FACE="Arial"> Define tipo de letra, tamao y color a tu gusto </FONT> <P>Una palabra o un fragmento de texto se puede resaltar con el tag STRONG o con el tag EM, que en la mayor parte de los browsers se corresponden con <STRONG>bold</STRONG> e <EM>italic</EM></P> <P>En cualquier caso, tambin se pueden utilizar los tags <B>bold</B> (B) e <I>italic</I> (I).</P> <P>Para escribir con una <TT>letra de paso constante (estilo teletipo)</TT> se emplea la Tag TeleType</P> <P>Para que el texto <BLINK>parpadee</BLINK> se emplea la TAG Blink.</P>
As se ve:
Define tipo de letra, tamao y color a tu gusto

Una palabra o un fragmento de texto se puede resaltar con el tag STRONG o con el tag EM, que en la mayor parte de los browsers se corresponden con bold e italic.
En cualquier caso, tambin se pueden utilizar los tags bold (B) e italic (I). Para escribir con una letra de paso constante (estilo teletipo) se emplea la Tag TeleType. Para que el texto parpadee se emplea la Tag Blink.
14
<P>Ttulos: <H1>1</H1><H2>2</H2><H3>3</H3> <H4>4</H4><H5>5</H5><H6>6</H6></P> <P>Alineados:</P> <P ALIGN="LEFT">Izquierda</P> <P ALIGN="RIGHT">Derecha</P> <P ALIGN="CENTER">Centrado</P> </P>
Ttulos:
123
456
Alineados: Izquierda Derecha Centrado Otros efectos:
Otros efectos: <P><U>subrayado</U> <P><STRIKE>tachado</STRIKE> <P><BIG>letra ms grande que el estndar</BIG> <P><SMALL>letra ms pequea que el estndar</SMALL> <P>Texto tipo<SUB>subndice</SUB> <P>Texto tipo<SUP>superndice</SUP>
subrayado tachado
letra ms grande que el estndar

letra ms pequea que el estndar
Texto tiposubndice Texto tiposuperndice
Figura 9. Muestra algunos formatos que se le pueden dar al texto en un documento HTML Existen dos etiquetas que son especiales, ya que no necesitan de un cierre de etiqueta (</>) y son: Etiqueta <BR> Esta etiqueta instruye al navegador cliente que inserte un salto de lnea en un documento HTML. La etiqueta <BR> tiene el mismo efecto que un ENTER. Etiqueta <HR> La etiqueta <HR> dibuja de manera predeterminada una regla horizontal alineada automticamente, con una apariencia de tercera dimensin. Esta etiqueta es especial, porque no necesita de cierre, y tiene los siguientes atributos.
15
Aling NOSHADE WIDTH SIZE Ejemplo 5:
establece que la regla se alinee a la izquierda, centro o derecha LEFT, CENTER, o RIGTH quita el sombrado predeterminado de la regla permite especificar el ancho de la regla (en pixeles o porcentaje) permite especificar el alto de la regla (en pixeles)
<HTML> <HEAD><TITLE> Manual bsico de HTML</TITLE></HEAD> <BODY BGCOLOR=#66CCFF TEXT=000000> Mi primer página con HTML.<BR> <HR ALING=CENTER WIDTH= 50%><BR> Duerme para soñar, porque los sueños se hicieron para cumplirse.<BR> <HR ALING=LEFT WIDTH= 25% SIZE=5 ><BR> Este es un ejemplo de una página WEB.<BR> </BODY> </HTML>
Figura 10. Muestra como se ve la pagina Web del ejemplo 5
16
4.1
TEXTO PREFORMATEADO
El hecho de que HTML ignore los retornos de carro a la hora de mostrar un texto no es un comportamiento arbitrario, sino que es la forma que tenemos de que, independientemente de la ventana del visualizador, nuestro prrafo quede convenientemente justificado. Sin embargo, es posible que en alguna ocasin queramos que el texto aparezca en el visualizador tal y como lo hemos introducido, respetando los retornos de carro e incluso los espacios que podamos haber dejado entre caracteres. Para ella podemos utilizar la etiqueta <PRE> y englobar en ella todo el texto del documento. La etiqueta <PRE> respeta tanto los retornos de carro como los espacios en blanco del archivo original, y la letra aparece como tipo de espacio no proporcional (El tipo de letra usado por el texto pre formateado es el mismo que el de <TT></TT>), y no con el tipo de letra habitual del visualizador. Esta etiqueta permite mostrar el texto pre formateado tal cual. Adems, en el texto preformateado no se interpretan los caracteres especiales HTML: <. > y &. Esta marca requiere de las etiquetas de comienzo y fin. 4.2 COMENTARIOS NO VISIBLES EN LA PANTALLA
A veces es muy til escribir comentarios en el documento HTML sobre el cdigo que escribimos, que nos pueden servir para recordar posteriormente sobre lo que hicimos, y que no queremos que se vea en la pantalla. Esto se consigue encerrando dichos comentarios entre estos dos smbolos:  < !- - Esto es un comentario al cdigo que no se ver en la pantalla - - >
5. LISTAS
Las listas en HTML proporcionan una forma de clasificar la informacin, y hacer que sta sea ms inteligible por parte del visitante de las pginas. 5.1 LISTAS ORDENADAS: OL
Tambin llamadas listas numeradas son aquellas en las que cada elemento tiene delante un nmero que indica el orden del elemento dentro del conjunto de la lista.
17
La etiqueta para crear una lista ordenada es <OL> </OL>. Son obligatorias las etiquetas de comienzo y fin de estas marcas. Cada elemento de la lista ordenada se identifica escribindolo dentro de la etiqueta <LI> </LI>. La etiqueta de fin puede ser omitida. Con la etiqueta LI no es necesario introducir un retorno de carro detrs de cada elemento de la lista. Es posible especificar el tipo de numeracin que se dar (nmeros arbigos, nmeros romanos, letras, etc.), por defecto se sigue la numeracin rabe. Las listas numeradas pueden ser anidadas unas dentro de otras. En la Figura 11 se muestra como se escribe una lista ordenada y la manera en cmo se ver. As se escribe:
Las listas ordenadas: <P>Las listas ordenadas: <OL> <LI>Van precedidas por nmeros <LI>La numeracin es automtica <LI>Son tambin muy utilizadas </OL>
As se ve: Las listas ordenadas: 1. Van precedidas por nmeros 2. La numeracin es automtica 3. Son tambin muy utilizadas
Figura 11. Listas ordenadas Algunos atributos que se tienen para la etiqueta <LI> en las listas ordenadas son: TYPE. Especifica el tipo para listas ordenadas TYPE=A Usa letras maysculas, TYPE=a emplea letras minsculas, TYPE=I Usa nmeros romanos grandes, TYPE=i usa nmeros romanos pequeos y TYPE=1 usa nmeros arbigos
5.2
LISTAS DESORDENADAS: UL
Tambin llamadas listas no numeradas, son listas en las que no es necesario numerar de alguna manera los elementos que la componen, sino que cada elemento tiene delante un smbolo (un punto, un cuadro, etc.). La forma de especificar una lista desordenada es mediante la etiqueta <UL>. Las etiquetas de comienzo y fin de esta marca son obligatorias.
18
Cada elemento de la lista se identifica mediante la etiqueta <LI>. La etiqueta de fin para la marca <LI> se puede omitir. Tambin es posible en las listas desordenadas especificar el smbolo que va a aparecer delante de cada elemento de la lista. Las listas desordenadas tambin pueden ser anidadas una dentro de otra. En la figura 12 se muestra como se debe escribir para crear una lista desordenada y la manera en que se ver.
As se escribe:
<P>Las listas no ordenadas: <UL> <LI>Van precedidas por bullets <LI>Se entiende que no importa el orden <LI>Se utilizan con mucha frecuencia </UL>
As se ve: Las listas no ordenadas:

Van precedidas por bullets Se entiende que no importa el orden Se utilizan con mucha frecuencia
Figura 12. Listas desordenadas Algunos atributos que se tienen para la etiqueta <LI> en las listas desordenadas son: TYPE. TYPE tambin puede servir para definir la forma de la vieta en las listas no ordenadas. TYPE=DISC, CIRCLE y SQUARE son las opciones disponibles.
5.2
LISTAS DE DEFINICION
A diferencia de los dos tipos anteriores de listas, las listas de definicin, se utilizan para presentar la informacin sin marcas, ni nmeros, sino que utiliza los sangrados de los prrafos. Las listas de definicin estn constituidas por trminos y su subsiguiente definicin. La forma de implementar las listas de definicin es con la etiqueta <DL> de la siguiente forma: <DL> <DT> Nombre del termino <DD> Definicin del termino </DL> Cada trmino de la lista de definicin se indica con la etiqueta <DT> y no sangrar, mientras que la descripcin del trmino se indica con la etiqueta <DD> y sangrar hacia la derecha para resaltarla del trmino. 19
Antes y despus de la descripcin de cada palabra clave, las listas de definicin incorporaran un retorno de carro. Las listas de definicin tambin pueden anidarse. La figura 13 muestra la manera de cmo se debe escribir y la manera en cmo se ver. As se escribe:
<P>Las listas de definiciones: <DL> <DT>Primer trmino <DD>Definicin del 1er trmino <DT>Segundo trmino <DD>Definicin del 2 trmino </DL>
As se ve: Las listas de definiciones: Primer trmino Definicin del 1er trmino Segundo trmino Definicin del 2 trmino
Figura 13. Listas de definicin Ejemplo 6: <HTML> <HEAD><TITLE> Manual bsico de HTML</TITLE></HEAD> <BODY> <CENTER><H1>Comandos básicos</H1></CENTER>  <H2>Párrafos</H2> <P> Este es mi primer parrafo del ejemplo 5</P> <P> Este es mi Segundo prrafo. Aqu hay una ruptura de lnea <BR> de texto</P>  <HR> <H2> <B>Listas</B></H2> <H3><I>Ordenadas</I></H3> <P> La <FONT SIZE=+1> <I> msica </I></FONT> que ms te gusta es <I> (en orden de preferencia): </I></P> <OL> <LI>El POP</LI> <LI>El ROCK  <LI> La msica CLASICA </OL> <H3><I>Desordenadas</I></H3>
20
<P>Sin un orden particular, mis <FONT COLOR=GREEN><B> deportes </B></FONT> favoritos son los siguientes:</P> <UL> <LI>Básquetbol <LI>Futbol <LI>Natacin <LI>Voleibol </UL> <H2><I>De definicin</I></H2> <DL> <DT>Descripcin</DT> <DD>Es nombrar las propiedades de algo <DT>Lista descriptiva</DT> <DD>Es nombrar las propiedades de varios objetos </DL> <HR> <CENTER> También sabemos centrar el texto</CENTER> <PRE> y escribir pre formateado</PRE>
<BLINK> y a escribir texto parpadeante</BLINK> <HR> </BODY> </HTML> En la figura 14 se muestra el resultado final del ejemplo 6
21
Figura 14. Manera como ver el usuario final el Ejemplo 6
6. IMGENES
Las imgenes son un elemento escencial para disear paginas atractivas. No obstante un numero excesivo de imgenes en una pagina pueden hacer ralentizar el proceso de visualizacion (las imagnes son las partes de las paginas que mas espacio ocupan, por lo que su transferencia requiere mas tiempo que la del texto). Es importante conseguir un compromiso entre una gina atractiva (lo que lleva incluir graficos), y una pagina que pueda cararse en un tiempo razonable.
22
6.1 FORMATOS GRAFICOS EN INTERNET
Existen una grancantidad de formatos graficos en el mundo de los ordenadores, cada uno de ellos con sus ventajas y desventajas. Sin embargo, a la hora de publicar en Internet, solamente debemos tener en cuenta dos formatos muy especificos: el GIF y el JPEG. Su eleccion no es en absoluto un capricho, ademas de la alta resolucion que consiguen, se trata como vemos, de dos formatos que comprimen el tamao de las imgenes, por lo que estas pueden transmitirse mas rapidamente por Internet. Para crear y manipular las imgenes hay que utilizar un editor de imgenes, entre los mas conocidos se encuentran: Paint, Corel Draw, Graphic Workshop, etc. El programa que se selecciones dependera estrictamente del programa que le sea mas facil de utilizar.
6.1.1 Formato GIF Las siglas GIF provienen del ingles Graphics Interchange Format o formato de intercambio de graficos. Las imgenes en formato GIF estn limitadas a 256 colores simultaneos. Una propiedad interesante de este formato es el poder seleccionar un color transparente. Asi cuando la imagen en cuestion es mostrada en un visualizador, la zona de la imagen con el color transparente toma el color del fondo del documentoLos archivos de imagnes en este formato tiene asociados la extension .gif. Se debe tener cuidado de seleccionar la esxtension GIF al momento de guradar la imagen (Figura 15).
Figura 15. Manera en que se debe gurdar una imagen con extension .GIF
23
6.1.2 Formato JPEG JEPG son las iniciales de Joint Photographic Expert Group ( Grupo de Expertos Fotagraficos Reunidos). Al igual que el formato GIF, comprime las imgenes para una transmision mas rda, aunque difiere en el algoritmo de compresion. Mientras que con el formato GIF la compresion de un archivo de imgenes viene determinada, JPEG nos permite especificar la relacion de compresion deseada, por lo que podemos variar el tamao del archivo. Naturalmente, a mayor realcion de compresion, menor tamao y peor calidad en la imagen final. Disminuyendo la compresion abtenemos imgenes de mayor calidad pero tambien de mayor tamao. Los archivos de imgenes en este formato tienen asociado la extension .jpg. Al igual que el formato GIF, se debe tener cuidado de seleccionar la extension JPEG cuando se va a gurdar la imagen en su ordenador (Figura 16).
Figura 6. Manera en que se debe gurdar una imagen con extension .JPEG
6.2 INCLUSION DE LAS IMGENES La etiqueta que se utiliza para la inclusion de imgenes en una pagina Web es la siguiente: <IMG SRC=imagen.jpg></IMG> donde src = "imagen" Indica el nombre del fichero grfico a mostrar. Por ejemplo: <IMG src="G:\Investigacion\Practicas\danger.jpg" WIDTH= 200 HEIGTH=400>
24
En la figura 17 se muestra la imagen que se seleccion en la etiqueta <IMG>
6.2.1 Tamao de las imgenes Si no especifica nada mas, las imgenes apareceran en el navegador con el tamao que tiene originalmente. Para modificar el tamao de las imgenes se utilizan los siguientes modificadores en la etiqueta <IMG>: WIDTH: especifica la anchura en pixeles de la imagen. HEIGTH: especifica el nimero de pixeles que tendra de alto la imagen.
6.2.2 Escalado de imgenes. Con el uso de los modificadores HEIGHT y WIDTH podemos ampliar, y reducir las imgenes sin deformarlas, es decir, escalarlas. Una manera cmoda de hacerlo es solamente especificar una de las dos dimensiones, se asume que la reduccin o la ampliacin es proporcional a la otra.
6.2.3 Bordes de la imagen Mediante el modificador BORDER se puede aadir bordes a las imgenes que se tienen en la pgina.
6.2.4 Alineacin de texto con las imgenes La alinacion del texto con las imgenes se realiza mediante el modificador ALING. Los valores que este modificador puede tomar son: TOP, TEXTOP, CENTER, ABSCENTER, MIDDLE, ABSMIDDLE, BOTTOM, LEFT, y RIGTH. Adems podemos especificar la distancia que queremos establecer entre el grfico y el texto. Si este parmetro no se establece, el texto es situado justo a continuacion de la imagen. Para introducir espacios horizontales y verticales a continuacion de la imagen se utilizan los modificadores VSPACE y HSPACE. 6.2.5 Imgenes con texto alternativo Los visualizadores tienen la opcin de no mostrar las imgenes, en un intento de acelerar el acceso a las pginas. Muchas veces, las imgenes incluidas en una pgina son 25
fundamentales para comprender la informacin que se ofrece. Por ejemplo. Una pgina destinada a alumnos universitarios de asignaturas de estdstica o matemticas. Para estos casos se puede aadir a la imagen un texto ALTERNATIVO, que d una idea del contenido de la imagen. Para aadir un texto alternativo, se utiliza la orden como se muestra a continuacin: <IMG SRC=nombre_imagen ATL= Texto_alternativo> 6.2.6 Imgenes como fondo de un documento Un efecto muy utilizado es el uso de imgenes como fondo de un documento HTML. La manera de hacerlo es con el atributo BACKGROUND de la etiqueta <BODY>. La imagen de fondo en general ser ms pequea que el erea de documento del navegador. Lo que hace entonces el navegador es repetir, partiendo de la esquina superior izquierda, la imagen que hemos elegido como fondo del documento. A la hora de elegir la imagen de fondo, es preciso tener en cuenta el texto del documento debe ser legible por encima de la imagen, por lo uqe hay que evitar colocar imgenes con colores demasiado fuertes.
Ejemplo 7. <html> <head> <title>Manual de HTML</title> </head> <body bgcolor="#C0D9D9" text="#000000" background="F:\Investigacion\Practicas\paisaje-estupendo.gif"> <center><h1> Bienvenidos al curso de HTML</h1></center><br> <hr width=50%><br> <h2>Información General</h2> Este curso muestra los conceptos básicos del uso de etiquetas e instrucciones en la elaboración de documentos <b><i><font color="#000080">HTML</font></i></b>.<br><br> <center><img src="F:\Investigacion\Practicas\Happy.gif" alt="Foto feliz"></center> border="1"
26
<br> Es muy importante saber ubicar los gráficos y combinar de buena manera los colores para brindar una buena imagen <b><i><font color="red">:)</font></i></b>.<br><br> Una página WEB es muy importante, pues provee a nuestro trabajo una ventana al mundo.<br> </body> </html>
Figura 18. Resultado del ejemplo 7
27
7. TABLAS
Una tabla es una manera muy compacta y clara de mostrar la informacin. Una tabla en HTML se entiende como un conjunto de filas (fila = horizontal), apiladas una sobre otra. Cada fila contiene a su vez un conjunto de celdas, puestas una al lado de la otra. Una tabla se declara usando la etiqueta <TABLE> </TABLE>. Dentro de la tabla, se usa <TR></TR> para indicar una fila dentro de una fila, <TD></TD> para delimitar el contenido de una celda. El elemento de cierre de fila y de celda es optativo.
Los atributos de las tablas son:
Align.
Establece la alineacin de la tabla o texto mediante.
ALIGN = LEFT o ALIGN = RIGHT
Bgcolor. Border. BorderColor. BorderDark.
Establece el color de fondo de las celdas de la tabla. Determina el ancho del borde en pixeles. Asigna un color al borde. Determina el color de la parte oscura de un borde de 3 dimensiones.
BorderLight.
Asigna el color de la parte clara de un borde de 3 dimensiones.
Caption. Cellpadding.
Especifica el titulo para la tabla. Establece la cantidad de espacio libre junto al contenido de una celda.
Cellspacing. Width.
Asigna la cantidad de espacio entre las celdas de una tabla. Determina el ancho de la tabla en pixeles o en un porcentaje.
28
Las maneras en que se manejan las etiquetas que dan el formato a una tabla se mencionan a continuacin
Etiqueta <TH> </TH>
Indica al navegador cliente que exhiba el texto como un encabezado en la primera fila de una tabla. Y sus atributos principales son: Colspan. Align.
especifica el nmero de celdas que cubre el encabezado Determina la posicin del texto del titulo
Etiqueta <TR> </TR>
Esta etiqueta indica al navegador que exhiba el texto dentro de una fila; puede tambin interpretarse como la etiqueta que define las filas. Align.
Alineacin del texto/objetos en toda la fila
Etiqueta <TD> </TD>
La etiqueta de datos de la tabla, es la que identifica a las columnas o celdas especficas de una tabla. Y sus atributos principales son: Align. Bgcolor. Background. Width.
Alineacin del texto/objeto de la celda Color de fondo de la celda imagen de fondo de una celda Ancho de la celda/columna con respecto al ancho de la tabla. Donde solo precisa definir el ancho en la primera celda de la columna.
Recuerde que dentro de una celda, usted puede insertar desde texto o un grfico hasta una tabla entera. 29
Ejemplo 8: <html> <head> <title>Manual de HTML</title> </head> <body bgcolor="#C0D9D9" text="#000000" background="F:\Investigacion\Practicas\paisaje-estupendo.gif"> <center><h1> Bienvenidos al curso de HTML</h1></center><br> <hr width=50%><br> <h2>Información General</h2> Este curso muestra los conceptos básicos del uso de etiquetas e instrucciones en la elaboración de documentos <b><i><font color="#000080">HTML</font></i></b>.<br><br> <center><img src="F:\Investigacion\Practicas\Happy.gif" alt="Foto feliz"></center> <br> Es muy importante saber ubicar los gráficos y combinar de buena manera los colores para brindar una buena imagen <b><i><font color="red">:)</font></i></b>.<br><br> Una página WEB es muy importante, pues provee a nuestro trabajo una ventana al mundo.<br> <br><center> <table width=80% align=center border=3> <tr><th colspan=3>Directorio Telefónico</th></tr> <tr align=center> <td width=40% bgcolor="#C0C0C0"> Nombre </td> <td width=30% bgcolor="#C0C0C0"> 30 border="1"
Telfono </td> <td width=30% bgcolor="#C0C0C0"> E-Mail </td> </tr> <tr> <td> José Rodríguez </td> <td> 223454 </td> <td>jose@prueba.com.bo</td> </tr> <tr> <td> Carolina Nuñez </td> <td> 453444 </td> <td>carolina@prueba.com.bo</td> </tr> </table> <br></center> </body> </html>
Figura 19. Muestra solo la tabla que se incrust en la pagina conservando las otras caractersticas que se realizaron en el ejemplo 7
31
8. HIPERVNCULOS
La clave de la facilidad de uso de los documentos HTML, reside fundamentalmente en los enlaces. Los enlaces (o links) proporcionan al que visita las paginas un mecanismo muy sencillo para moverse entre distintos documentos, permitindole moverse en aquellos aspectos que considere ms importantes, mientras que desde el punto de vista del que crea las paginas permite distribuir de forma transparente al visitante el lugar o lugares en las que se van a almacenar los distintos documentos. Para definir enlaces hipertexto se utiliza <A> de la manera siguiente Etiqueta <A> </A> La etiqueta <A> que viene de ancla, denota el inicio y el final de una instruccin que contiene alguna forma de vnculo o hipervnculo. Esta etiqueta permite al usuario vincularse a otra ubicacin dentro del mismo documento HTML, a otro sitio WEB, a un servidor FTP, enlace de correo electrnico <A HREF = direccin> Texto del enlace </A> Donde: Direccin. Es el destino del enlace. Texto del enlace: es el texto indicativo del enlace que aparece en la pantalla normalmente con color especial y subrayado. <A> requiere de la marca de fin. Se van a distinguir tres tipos de enlaces: Enlaces a otras zonas de la misma pgina Enlaces a otras pginas. Enlaces a otras zonas de otras pginas. 8.1 ENLACES A OTRAS ZONAS DE LA MISMA PGINA A veces, en el caso de documentos (o pginas) muy extensos, nos puede interesar dar un salto desde una posicin a otra determinada. 32
As es posible hacer enlaces que lleven al usuario de una parte del documento a otra dentro del mismo documento con solo hacer clic. A este tipo de enlaces los llamaremos enlaces locales. Estos enlaces constan de dos objetos: El enlace. Corresponde a la zona en la cual el usuario final har clic, para viajar a otra parte del documento Esta zona parece subrayada en el documento. Un enlace local se crea delimitando la zona con el comando <A HREF=#nombre> . </A>, en que nombre es la etiqueta que se est referenciando.
El nombre enlazado o referenciado. Corresponde a la zona del documento a la cual el usuario llegar al hacer clic en la referencia correspondiente. Un nombre local se crea delimitando la zona con el comando <A NAME = nombre> </A>, en que nombre es la etiqueta que asignamos a esta zona.
Ejemplo 9. <HTML> <HEAD><TITLE> Enlaces locales</TITLE></HEAD> <BODY> <H2> Enlaces locales</H2> <H3><A NAME= INDICE> Indices </A></H3> <UL> <LI><A HREF = #uno> Seccin uno </A> <LI><A HREF = #dos> Seccin dos </A> <LI><A HREF = #tres> Seccin tres </A> <LI><A HREF = #cuatro> Seccin cuatro </A> <LI><A HREF = #cinco> Seccin cinco </A> </UL> <H3> <A NAME = uno> Seccin uno </A></H3> <P> Esta es la seccin 1 de la página de enlaces locales </P> <P> Click aqu para <A HREF = #INDICE> volver al ndice </A> <H3> <A NAME = dos> Seccin dos </A></H3> <P> Esta es la seccin 2 de la página de enlaces locales </P> <P> Clic aqu para <A HREF = #INDICE> volver al ndice </A>
33
<H3> <A NAME = tres> Seccin tres </A></H3> <P> Esta es la seccin 3 de la página de enlaces locales </P> <P> Clic aqu para <A HREF = #INDICE> volver al ndice </A> <H3> <A NAME = cuatro> Seccin cuatro </A></H3> <P> Esta es la seccin 4 de la página de enlaces locales </P> <P> Clic aqu para <A HREF = #INDICE> volver al ndice </A> <H3> <A NAME = cinco> Seccin cinco </A></H3> <P> Esta es la seccin 5 de la página de enlaces locales </P> <P> Clic aqu para <A HREF = #INDICE> volver al ndice </A> </BODY> </HTML>
Figura 20. Muestra como se ver el navegador con el cdigo del ejemplo 9 34
8.2 ENLACES A OTRAS PAGINAS
Para enlazar a otro documento, es necesario conoceer la ubicacin exacta del documento que se referenciar. Una ubicacin, puede ser referenciada en forma relativa o absoluta Ubicacin relativa. Se indica especificando la posiscin del documento en la estructura de subdirectorios a partir de la ubicacin del documento actual. Solo se puede usar para documentos ubicados en el mismo ordenador.
Una referencia relativa a otro documento se hace usando el comando: <A HREF= ubicacion> </A>
Ubicacin absoluta. Se indica especificando el URL (Uniform resurce locator) de la pagina que se est referenciando.
Los URL son una manera universal de especificar una direccion. La forma ms bsica de referenciar un hypertexto es usar el comando: <A HREF = http://ordenador/directorio/archivo>
El ordenador indica la mquina donde se encuentra el documento. El directorio y archivo indican su posiscion dentro de ese ordenador. Los URL tienen muchas formas distintas para referenciar distintos objetos.
Ejemplo 10: <HTML> <HEAD><TITLE> Enlaces a otras páginas </TITLLE></HEAD> <BODY> 35
<H1> Enlaces a otras páginas</H1> <H2> Referencias relativas </H2> <P> Se pueden referenciar, por ejemplo a un archivo localizado en el mismo directorio, como ejemplo, al <A href = ejemplo1.html> ejemplo numero 1 </A>. Tambin a un archivo localizado en otro directorio, por ejemplo, este <A HREF = /manual.html> Manual bsico de HTML </A></P> <H2> Referencias absolutas</H2> <H3> Algunos servicios encontrados en la WWW</H3> <P> El buscador ms reconocido <A HREF = http://www.google.com.mx> Google </A> que permite a cualquier usuario encontrar cualquier cosa en la web. </P> <P> Para estar informado de los acontecimientos mundiales diariamente, se puede acceder al servicio <A HREF = http://www.cnn.com/>CNN </A>. Y para los amantes de la msica se encuentra el servidor oficial de la <A HREF = http://mtv.com/> MTV </A></P> </BODY> </HTML>
36
8.3 ENLACES A UNA ZONA DE OTRA PGINA Para este tipo de enlaces se utiliza una mezcla de las dos formas anteriores. Se indica el URL de la pgina a referenciar, luego un signo # y despus el nombre de la zona a referenciar. Ejemplo 11. <HTML> <HEAD><TITLE> Enlaces a zonas de otras pginas</TITLE> </HEAD> <BODY> <H1> Enlaces a zonas de otras páginas</H1> <P> Enlazamos a la <A HREF = ejemplo 8.html # uno> la seccin 1 del ejemplo 8</A>.</P> <P> Enlazamos a la <A HREF = ejemplo 8.html # tres> la seccin 3 del ejemplo 8</A>.</P> </BODY> </HTML>
Figura 22. Vista en el navegador del ejemplo 11
9. MAPAS
Un Mapa es una imagen que permite realizar diferentes Hiperenlaces en funcin de la "zona" de la imagen que se pulse. Para crear un mapa debemos tener un fichero con la imagen y un conjunto de rdenes donde indicaremos las coordenadas de la imagen que nos enlazarn con cada Hiperenlace. Actualmente hay dos maneras de hacer los mapas: a travs de un programa externo (CGI) que pueda "procesar" el fichero .map en el que habremos metidos las rdenes, o a travs de la directiva que soportan los Navegadores a partir de su 37
versin 2 y 3 de Netscape y Explorer, respectivamente. En el primer caso el mapa se dice que corre en el servidor, ya que tiene que hacer llamadas a el y a su CGI para que funcione, en el segundo, corre en el cliente. Para el segundo caso, se utilizan las etiquetas. <MAP></MAP> y <AREA>. La etiqueta <MAP> identifica al mapa y tiene el parmetro name para indicar el nombre del mapa. La etiqueta <AREA> define las reas sensibles de la imagen y tiene los siguientes parmetros obligatorios: shape = "tipo" coords = "coordenadas" href = "URL" Indica el tipo de rea a definir. Indica las coordenadas de la figura indicada con shape. Indica la direccin a la que se accede si se pulsa en la zona delimitada por el rea indicada. Los tipos de rea pueden ser los siguientes: Rect. rea rectangular. Se deben especificar las coordenadas de la esquina superior izquierda y las de la esquina inferior derecha. Poly. Polgono. Se deben especificar las coordenadas de todos los vrtices del polgono. El visor se encarga de "cerrar" la figura. Circle Crculo. Se debe especificar en primer lugar las coordenadas del centro del crculo y a continuacin el valor del radio (en puntos). Si dos reas se superponen, se ejecutar la que se encuentre en primer lugar en la definicin del mapa. Es importante definir una ltima rea que abarque la totalidad del grfico para direccionar a una URL "por defecto", con el objeto de contemplar el caso de que no se pulse sobre un rea definida. Por ejemplo: 38
<MAP name = "casa"> <AREA shape = "poly" coords = "2,62,57,62,28,1" href= "tejado.htm"> <AREA shape = "rect" coords = "21,101,35,138" href= "puerta.htm"> <AREA shape = "rect" coords = "2,64,57,138" href= "casa.htm"> <AREA shape = "circle" coords = "80,76,21" href= "arbol.htm"> <AREA shape = "rect" coords = "78,98,85,138" href= "tronco.htm"> <AREA shape = "rect" coords = "0,0,96,138" href= "dibujo.htm"> </MAP>
Para activar el mapa debemos indicar la imagen a mostrar, indicando que dicha imagen es tratada por un mapa. Para ello escribiramos la siguiente etiqueta: <IMG src = "grafico.gif" usemap = "#casa"> Si el navegador tiene la capacidad de gestionar este tipo de mapas (Netscape 2.x o MsExplorer 2.x), prueba a pulsar sobre alguna parte del mapa que hemos definido y que te aparecer a en la Figura 23:
Figura 23. Mapa definido en el ejemplo anterior
39
10. MARQUESINA
La etiqueta <MARQUEE> </MARQUEE> crea una marquesina con un texto en su interior que se desplaza. Funciona nicamente con Ms-Explorer. Sus parmetros son los siguientes: align = top / middle / bottom Indica si el texto del interior de la marquesina se alinea en la zona alta (top), en la baja (bottom) o en el centro (middle) de la misma. bgcolor = "cdigo de color" direction = left / right Indica el color del fondo de la marquesina. Indica hacia que lugar se desplaza el texto, hacia la izquierda (left) o hacia la derecha (right) height = num o % Indica la altura de la marquesina en puntos o porcentaje en funcin de la ventana del visor. width = num o % Indica la anchura de la marquesina en puntos o porcentaje en funcin de la ventana del visor. loop = num / infinite Indica el nmero de veces que se desplazar el texto por la marquesina. Si se indica infinite, se desplazar indefinidamente. scrolldelay = num. Indica el nmero de milisegundos que tarda en reescribirse el texto por la marquesina, a mayor nmero ms lentamente se desplazar el texto. Ejemplo 12. <HTML> <HEAD><TITLE> Marquesinas</TITLE> </HEAD> <BODY> <MARQUEE bgcolor = "#FFFFFF" width = 50% scrolldelay = 0 > Manual Bsico de HTML. </MARQUEE> 40
</BODY> </HTML> El texto comenzara a moverse de derecha a izquierda, de acuerdo con las caractersticas que se le dieron en la etiqueta <MARQUEE> (Figura 24)
Figura 24. El texto comienza a desplazarse de derecha a izquierda
11. SONIDO DE FONDO

Toda pgina Web puede tener un sonido que se active al entrar en la pgina. Esta caracterstica utiliza la etiqueta <BGSOUND> y tiene los siguientes atributos: src = "fichero" Indica el nombre del fichero que contiene el sonido (.wav, .mid). loop = num / infinite Indica el nmero de veces que se reproducir el sonido. Si se indica infinite, el sonido se reproducir de forma continua hasta que abandonemos la pgina. Un ejemplo de cmo poner la etiqueta quedara de la siguiente manera: <BGSOUND src= "yesterday.mid" loop= infinite>
41
12. FRAMES (MACROS)

Los marcos son una tcnica para dividir la ventana del visor en diferentes zonas. Cada una de estos marcos se podr manipular por separado, permitindonos mostrar en cada una de ellos una pgina Web diferente. Esto es muy til para, por ejemplo, mostrar permanentemente en un marco los diferentes contenidos de nuestra pgina, y en otro mostrar el contenido seleccionado. Para definir los diferentes marcos o frames se utilizan las etiquetas <FRAMESET>. </FRAMESET> y <FRAME> La etiqueta <FRAMESET> indica como se va a dividir la ventana principal. Pueden incluirse varias etiquetas <FRAMESET> anidadas con el objeto de subdividir una divisin. Los atributos de <FRAMESET> son Rows = numero o % Se indica el numero de filas en que se subdivida la pantalla. (numero de filas) El grupo de nmeros que acompaan se indican en puntos o en tanto porciento de cada una de las sub-ventanas; en este caso se entiende que el primer valor que se escribe corresponde a la ventana superior, el segundo a la ventana inmediatamente inferior y as sucesivamente.
1 Fila 2 Fila 3 Fila Por ejemplo se pone: <FRAMSET rows= 25%, 50%, 25%> La pantalla quedar as
42
Cols
numero
% Se indica el numero de columnas en que se subdividir la pantalla. Los nmeros tambin se indican en puntos o en tanto por cierto. Aqu los valores se aplican de izquierda a derecha.
(numero de columnas)
1 Columna Por ejemplo se pone
2 Columna
3 Columna
<FRAMSET cols = 120, *, 80>, La pantalla quedara as:
Tambin se pueden tener anidados. <FRAMSET cols = 250 %, * rows = 15%, *> La pantalla quedar de la siguiente manera.
43
Los dems atributos de la etiqueta <FRAMESET> son: border = "nmero" Permite cambiar o quitar (0) el borde entre los marcos. Por defecto, aparece. Para que tambin funcione en Explorer habr que usar frameborder = 0 framespacing = "nmero" Permite cambiar el espacio entre el borde del marco y la pgina. La etiqueta <FRAME> indica las propiedades de cada marco. Es necesario indicar una etiqueta <FRAME> para cada marco creado. Los atributos de <FRAME> son: name = "nombre" src = "URL" Indica el nombre por el que nos referiremos a ese marco. El marco mostrar en principio el contenido del documento HTML que se indique. marginwidth = num. Indica, en puntos, el margen izquierdo y derecho del marco. marginheight = num Indica, en puntos, el margen superior e inferior del marco. scrolling = "yes / no / auto" Indica si se aplica una barra de desplazamiento al marco en el caso de que la pgina que se cargue en ella no quepa en los lmites del marco. El valor "yes" muestra siempre la barra de desplazamiento, "no" no la muestra nunca (la zona de la pgina que no quepa en el marco no la veremos), y "auto" la muestra slo en caso de que sea necesario para poder ver la pgina. noresize Si se indica este parmetro, el usuario no podr 44
"redimensionar" los marcos con el visor. Un usuario que est viendo una pgina con marcos puede
redimensionarlos seleccionando un borde del marco con el ratn y desplazndolo. Los navegadores que no soportan la caracterstica de marcos, no mostrarn nada de lo indicado con estas directivas. Es por ello que existe una etiqueta
llamada <NOFRAMES> </NOFRAMES>. Todo lo indicado entre esta etiqueta ser lo que muestren los visores sin capacidad para visualizar marcos. Los navegadores que soporten marcos obviarn las directivas incluidas entre <NOFRAMES>
</NOFRAMES>. Ejemplo 13. <HTML> <HEAD> <TITLE>Pgina con Marcos</TITLE></HEAD> <FRAMESET cols = "15%,*">  <FRAMESET rows = "35%,*">  <FRAME name = "rotulo" src = "titulo.htm" scrolling = "auto">  <FRAME name = "menu" src = "menu1.htm" scrolling = "auto">  </FRAMESET>  45
<FRAME = "auto">
name
= "principal" src
= "primera.htm" scrolling
 <NOFRAMES>  SU VISOR NO MUESTRA MARCOS. Pulse <A href= "primera.htm"> AQUI </A> para ir a la pgina principal sin Marcos. </NOFRAMES> </FRAMESET>  </HTML>
13. OTRAS ETIQUETAS

A continuacin algunas etiquetas que pueden ser tiles al momento de elaborar las pginas HTML. Se detalla el objetivo de cada una de las etiquetas y un ejemplo.
Etiqueta de comentarios <comment> </comment> Se trata de una etiqueta que puede ser introducida en cualquier parte del cdigo y que es utilizada para realizar acotaciones y/o comentarios.
Sintaxis de Ejemplo: <COMMENT>Los comentarios se introducen de esta manera</COMMENT>
46
Etiqueta <ADDRESS></ADDRESS>
Ofrece una manera de dr formato a un pequeo cuerpo de texto que se asemeje a la rotulacin de una carta convencional.
Sintaxis de ejemplo: <ADDRESS>Roberto Rojas<br> POBOX 2282<br> La Paz Bolivia</ADDRESS>
Etiqueta <CITE> </CITE>
El texto dentro de la etiqueta <cite> aparece en cursivas para representar una cita
Sintaxis de ejemplo:
<cite>Este texto estará inclinado</cite>
Etiqueta <CODE> </CODE>
El texto dentro de la etiqueta <CODE> aparece en una fuente con caracteres mono espaciados cuando se visualiza a travs de un navegador.
<CODE>Este texto aparece con tipo de letra especial</CODE>
47
Etiqueta <CREDIT> </CREDIT>
Esta etiqueta se emplea para indicar los crditos por el material incluido en un documento. A menudo se asignan crditos para las fuentes e individuos que se citan en forma directa.
<CREDIT>Foto usada bajo permiso de Carlos Aníbarro</CREDIT>
Etiqueta <EM> </EM>
Indica que se debe dar nfasis al texto que se contiene. EL navegador resaltar este texto con negrillas e inclinacin italica.
Sintaxis de ejemplo: <EM>Texto resaltado</EM>
Etiqueta <KBD> </KBD>
La etiqueta <KBD> indica al navegador que interprete el texto especificado en una fuente en negritas de ancho fijo. Por lo regular, esta etiqueta se usa para ejemplificar una entrada del teclado hecha por el usuario.
<KBD>Teclee su mensaje acá:</KBD>
48
Etiqueta <NOBR> </NOBR>
La etiqueta <NOBR> impide que el navegador inserte un salto de lnea, incluso cuando es adecuado el ajuste de texto. Algunas cadenas de texto no deberan romperse bajo ninguna circunstancia. Un buen ejemplo de una cadena de texto que debe permanecer sin cortes es un URL extenso.
No deseo que esta direccin URL larga sea cortada: <NOBR>http://www.boliviainternet.com/irc</NOBR>
Etiqueta <S> </S> o <STRIKE> </STRIKE>
Instruye al navegador que tache el texto incluido entre las etiquetas.
<STRIKE>Este texto esta tachado</STRIKE>
Etiqueta <TT> </TT>
Etiqueta teletipo, instruye al navegador que exhiba el texto especificado en una fuente de ancho fijo.
<TT>Este es un tipo de letra de teletipo</TT>
49
Etiqueta <VAR> </VAR>
Indica al navegador que exhiba el texto especificado en una fuente ms pequea, de ancho fijo.
<VAR>Este texto ser ms pequeo y de formato especial</VAR> Atributo bgproperties=fixed del BODY
Indica a su navegador Internet Explorer que mantenga el fondo constante y no mvil de forma vertical.
Sintaxis de ejemplo: <body text=#FFFFFF bgcolor=#000000 background=fondo.gif

bgproperties=fixe
50
14. PRUEBAS Y RESULTADOS
A continuacin se mostraran los ejemplos vistos en el desarrollo del manual bsico de HTML con sus respectivos resultados, vistos en el navegador de Ms-Explorer.
NOTA:
Debajo de cada ejemplo viene la imagen tal cual se ve en el navegador y adems de que se menciona la pgina del manual donde se puede encontrar la informacin acerca de cada uno de los ejemplos aqu mencionados.
Ejemplo 1. Crear la primer pagina Web con HTML (Pag. 6) <HTML> <HEAD> </HEAD>
<BODY> Mi primer pgina con HTML </BODY> </HTML>
Figura 2. Se muestra su primera pagina Web
51
Ejemplo 2. Ponerle titulo a la pagina Web (Pag. 7)
<HTML> <HEAD><TITLE> Manual bsico de HTML</TITLE></HEAD> <BODY> Mi primer pgina con HTML </BODY> </HTML>
Figura 3. Se muestra el titulo de la pgina Web definido en la cabecera
52
Ejemplo 3: Manera en que se deben poner los caracteres especiales utilizando el cdigo ASCII (Pag. 10) <HTML> <HEAD><TITLE> Manual bsico de HTML</TITLE></HEAD> <BODY> Mi primer página con HTML. Duerme para soñar, porque los sueños se hicieron para cumplirse. Este es un ejemplo de una página WEB. </BODY> </HTML>
Figura 5. As se ver su pagina Web.
53
Ejemplo 4: Este ejemplo utiliza el cdigo de colores para modificar el color de fondo y el color del texto (Pag. 13)
<HTML> <HEAD><TITLE> Manual bsico de HTML</TITLE></HEAD> <BODY BGCOLOR=#66CCFF TEXT=000000> Mi primer página con HTML. Duerme para soñar, porque los sueños se hicieron para cumplirse. Este es un ejemplo de una página WEB.
</BODY> </HTML>
Figura 8. Fondo color azul y letras negras
54
Ejemplo5: Se aplicaron varios formatos al texto, y se sigui conservando el color de fondo y de texto definidos en el ejemplo 4 (Pag. 16) <HTML> <HEAD><TITLE> Manual bsico de HTML</TITLE></HEAD> <BODY BGCOLOR=#66CCFF TEXT=000000>
Mi primer página con HTML.<BR>
<HR ALING=CENTER WIDTH= 50%><BR>
Duerme para soñar, porque los sueños se hicieron para cumplirse.<BR>
<HR ALING=LEFT WIDTH= 25% SIZE=5 ><BR>
Este es un ejemplo de una página WEB.<BR>
</BODY> </HTML>
Figura 10. Muestra como se ve la pagina Web del ejemplo 5
55
Ejemplo 6: Se crearon los tres tipos de listas, y se agregaron varios tipos de formatos al texto (pag. 20) <HTML> <HEAD><TITLE> Manual bsico de HTML</TITLE></HEAD> <BODY> <CENTER><H1>Comandos básicos</H1></CENTER>  <H2>Párrafos</H2> <P> Este es mi primer parrafo del ejemplo 5</P> <P> Este es mi Segundo prrafo. Aqu hay una ruptura de lnea <BR> de texto</P>  <HR> <H2> <B>Listas</B></H2> <H3><I>Ordenadas</I></H3> <P> La <FONT SIZE=+1> <I> msica </I></FONT> que ms te gusta es <I> (en orden de preferencia): </I></P> <OL> <LI>El POP</LI> <LI>El ROCK  <LI> La msica CLASICA </OL> <H3><I>Desordenadas</I></H3> <P>Sin un orden particular, mis <FONT COLOR=GREEN><B> deportes </B></FONT> favoritos son los siguientes:</P> <UL> <LI>Básquetbol <LI>Futbol <LI>Natacin <LI>Voleibol </UL> <H2><I>De definicin</I></H2> <DL> <DT>Descripcin</DT> <DD>Es nombrar las propiedades de algo <DT>Lista descriptiva</DT> <DD>Es nombrar las propiedades de varios objetos </DL> 56
<HR> <CENTER> También sabemos centrar el texto</CENTER> <PRE> y escribir pre formateado</PRE>
<BLINK> y a escribir texto parpadeante</BLINK> <HR> </BODY> </HTML> En la figura 14 se muestra el resultado final del ejemplo 6
Figura 5. Manera como ver el usuario final el Ejemplo 6 57
Ejemplo 7. Se aplic la inclusion de imagens en una pagina Web con distintos formatos y atributos (Pag. 26). <html> <head> <title>Manual de HTML</title> </head> <body bgcolor="#C0D9D9" text="#000000" background="F:\Investigacion\Practicas\paisaje-estupendo.gif"> <center><h1> Bienvenidos al curso de HTML</h1></center><br> <hr width=50%><br> <h2>Información General</h2> Este curso muestra los conceptos básicos del uso de etiquetas e instrucciones en la elaboración de documentos <b><i><font color="#000080">HTML</font></i></b>.<br><br> <center><img src="F:\Investigacion\Practicas\Happy.gif" alt="Foto feliz"></center> <br> Es muy importante saber ubicar los gráficos y combinar de buena manera los colores para brindar una buena imagen <b><i><font color="red">:)</font></i></b>.<br><br> Una página WEB es muy importante, pues provee a nuestro trabajo una ventana al mundo.<br> </body> </html> border="1"
58
59
Ejemplo 8: Se le agrega una tabla con diferentes caractersticas al ejemplo 7 (Pag. 31) <html> <head> <title>Manual de HTML</title> </head> <body bgcolor="#C0D9D9" text="#000000" background="F:\Investigacion\Practicas\paisaje-estupendo.gif"> <center><h1> Bienvenidos al curso de HTML</h1></center><br> <hr width=50%><br> <h2>Información General</h2> Este curso muestra los conceptos básicos del uso de etiquetas e instrucciones en la elaboración de documentos <b><i><font color="#000080">HTML</font></i></b>.<br><br> <center><img src="F:\Investigacion\Practicas\Happy.gif" alt="Foto feliz"></center> <br> Es muy importante saber ubicar los gráficos y combinar de buena manera los colores para brindar una buena imagen <b><i><font color="red">:)</font></i></b>.<br><br> Una página WEB es muy importante, pues provee a nuestro trabajo una ventana al mundo.<br> <br><center> <table width=80% align=center border=3> <tr><th colspan=3>Directorio Telefónico</th></tr> <tr align=center> <td width=40% bgcolor="#C0C0C0"> Nombre </td> <td width=30% bgcolor="#C0C0C0"> Telfono </td> 60 border="1"
<td width=30% bgcolor="#C0C0C0"> E-Mail </td> </tr> <tr> <td> José Rodríguez </td> <td> 223454 </td> <td>jose@prueba.com.bo</td> </tr> <tr> <td> Carolina Nuñez </td> <td> 453444 </td> <td>carolina@prueba.com.bo</td> </tr> </table> <br></center> </body> </html>
Figura 19. Muestra solo la tabla que se incrust en la pagina conservando las otras caractersticas que se realizaron en el ejemplo 7
61
Ejemplo 9. Pagina con enlaces locales (Pag. 33) <HTML> <HEAD><TITLE> Enlaces locales</TITLE></HEAD> <BODY> <H2> Enlaces locales</H2> <H3><A NAME= INDICE> Indices </A></H3> <UL> <LI><A HREF = #uno> Seccin uno </A> <LI><A HREF = #dos> Seccin dos </A> <LI><A HREF = #tres> Seccin tres </A> <LI><A HREF = #cuatro> Seccin cuatro </A> <LI><A HREF = #cinco> Seccin cinco </A> </UL> <H3> <A NAME = uno> Seccin uno </A></H3> <P> Esta es la seccin 1 de la página de enlaces locales </P> <P> Click aqu para <A HREF = #INDICE> volver al ndice </A> <H3> <A NAME = dos> Seccin dos </A></H3> <P> Esta es la seccin 2 de la página de enlaces locales </P> <P> Clic aqu para <A HREF = #INDICE> volver al ndice </A> <H3> <A NAME = tres> Seccin tres </A></H3> <P> Esta es la seccin 3 de la página de enlaces locales </P> <P> Clic aqu para <A HREF = #INDICE> volver al ndice </A> <H3> <A NAME = cuatro> Seccin cuatro </A></H3> <P> Esta es la seccin 4 de la página de enlaces locales </P> <P> Clic aqu para <A HREF = #INDICE> volver al ndice </A> <H3> <A NAME = cinco> Seccin cinco </A></H3> <P> Esta es la seccin 5 de la página de enlaces locales </P> <P> Clic aqu para <A HREF = #INDICE> volver al ndice </A> </BODY> </HTML>
62
Figura 20. Muestra como se ver el navegador con el cdigo del ejemplo 9
63
Ejemplo 10: Enlaces a otras pginas (Pag. 35) <HTML> <HEAD><TITLE> Enlaces a otras páginas </TITLLE></HEAD> <BODY> <H1> Enlaces a otras páginas</H1> <H2> Referencias relativas </H2> <P> Se pueden referenciar, por ejemplo a un archivo localizado en el mismo directorio, como ejemplo, al <A href = ejemplo1.html> ejemplo numero 1 </A>. Tambin a un archivo localizado en otro directorio, por ejemplo, este <A HREF = /manual.html> Manual bsico de HTML </A></P> <H2> Referencias absolutas</H2> <H3> Algunos servicios encontrados en la WWW</H3> <P> El buscador ms reconocido <A HREF =
http://www.google.com.mx> Google </A> que permite a cualquier usuario encontrar cualquier cosa en la web. </P> <P> Para estar informado de los acontecimientos mundiales diariamente, se puede acceder al servicio <A HREF = http://www.cnn.com/>CNN </A>. Y para los amantes de la msica se encuentra el servidor oficial de la <A HREF = http://mtv.com/> MTV </A></P> </BODY> </HTML>
64
65
Ejemplo 11. Enlaces a otras zonas de otras pginas (Pag. 37) <HTML> <HEAD><TITLE> Enlaces a zonas de otras pginas</TITLE> </HEAD> <BODY> <H1> Enlaces a zonas de otras páginas</H1> <P> Enlazamos a la <A HREF = ejemplo 8.html # uno> la seccin 1 del ejemplo 8</A>.</P> <P> Enlazamos a la <A HREF = ejemplo 8.html # tres> la seccin 3 del ejemplo 8</A>.</P> </BODY> </HTML>
Figura 22. Vista en el navegador del ejemplo 11
66
Ejemplo 12. Se muestra un texto que va movindose de derecha a izquierda (Pag. 40) <HTML> <HEAD><TITLE> Marquesinas</TITLE> </HEAD> <BODY> <MARQUEE bgcolor = "#FFFFFF" width = 50% scrolldelay = 0 > Manual Bsico de HTML. </MARQUEE> </BODY> </HTML>
Figura 24. El texto comienza a desplazarse de derecha a izquierda
67
Ejemplo 13. Uso de Frames <HTML> <HEAD> <TITLE>Pgina con Marcos</TITLE></HEAD> <FRAMESET cols = "15%,*">  <FRAMESET rows = "35%,*">  <FRAME name = "rotulo" src = "titulo.htm" scrolling = "auto">  <FRAME name = "menu" src = "menu1.htm" scrolling = "auto">  </FRAMESET>  <FRAME = "auto"> name = "principal" src = "primera.htm" scrolling
 <NOFRAMES>  SU VISOR NO MUESTRA MARCOS. Pulse <A href= "primera.htm"> AQUI </A> para ir a la pgina principal sin Marcos. </NOFRAMES> 68
</FRAMESET>  </HTMl>
69
15. CONCLUSIONES
Gracias al manual se dieron a conocer las principales caractersticas del lenguaje HTML y qu es necesario para crear un Web. Se ha aprendido adems las bases del lenguaje y la manera en como se debe crear una pgina.
Siempre hay que tener cuidado de llevar el orden correcto al momento de poner las etiquetas, para que si existe algn error, sea mas fcil identificarlo y corregirlo al instante.
Los ejemplos son claros y prcticos, de tal manera que servirn de apoyo para cuando se sete realizando una pagina Web
Dependiendo de las necesidades que se tengan, se irn tomando de los ejemplos lo que se necesita, y lo que no solo se deshecha.
El uso de HTML bsico, esta siendo reemplazado por programas que ya dan todo hecho, solo para que se pongan bloques y todo este listo, pero creo que es necesario que por lo menos se tenga el conocimiento bsico de cmo crear una pgina Web en HTML, para que cuando se tenga ms experiencia en este tipo de programacin, se puedan utilizar las nuevas herramientas mas fcilmente y que con ello sean ms fcil de identificar los errores y por consiguiente sea mucho mas sencillo solucionarlos.
Este manual fue hecho con la finalidad de que personas que no tienen experiencia creando pginas Webs vayan de la mano, creando paso a paso lo que ser su propio portal que los identifique, esto de una manera ms sencilla y econmica.
70
16. BIBLIOGRAFIA
MANUAL
PRCTICO
DE
HTML,
de
lvaro
Martnez
Echevarra
Universidad Politcnica de Madrid, Espaa The HTML Quick Reference Guide La especificacin oficial de HTML A Begginer's Guide to HTML WWW Names and Addresses, URIs, URLs, URNs http://www.imeil.com.mx/basico/index.asp http://pacoc.pangea.org/manuales/manual1.htm http://www.um.es/atica/documentos/html.pdf http://www.usuarios.sion.com/pauluk/coloreshtml.htm http://www.wmaestro.com/ http://www.areas.net/ http://www.builderau.com.au/ http://www.wired.com http://www.bolivia-internet.com/html http://www.bolivia-internet.com/html/ejemplos.exe http://www.uv.es/jac/guia/ HTML5: Up and Running de Mark Pilgrim Introduccin a XHTML de Javier Eguluz Prez http://www.ucsm.edu.pe/rabarcaf/taineate.htm
71

Manual Basico de Programacion HTML

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Manual Basico de Programacion HTML

Caricato da

Copyright:

Formati disponibili

SUBSECRETARA DE EDUCACIN SUPERIOR DIRECCIN GENERAL DE EDUCACIN SUPERIOR TECNLOGICA INSTITUTO TECNOLGICO DE LA PIEDAD

SECRETARA DE EDUCACIN PBLICA

INSTITUTO TECNOLOGICO DE LA PIEDAD

DEPARTAMENTO DE INGIENERIA ELECTRICA Y ELECTRONICA

MANUAL DE PROGRAMACON BSICA EN HTML PARA LA CREACION DE PGINAS WEB

PRESENTADO POR: GABRIELA ANDRADE VIDALES

ESPECIALIDAD: INGENIERIA ELECTRNICA

RSGC - 559 Sector NACE:37

2. CARACTERISTICAS DEL HTML

2.1 ETIQUETAS Y ATRIBUTOS

Figura 2. Se muestra su primera pagina Web

2.1.1 ETIQUETA: <TITLE>

Bgcolor Text Link Alink Vlink Background Bgsound Bgproperties

Los atributos se incluyen en la etiqueta de apertura, separados por un espacio

&#123; -&#125; -&#160; nbsp

&#248; oslash &#250; uacute

&#249; ugrave &#251; Ucirc

&#252; uuml &#254; thorn

&#253; yacute &#255; yuml

Figura 5. As se ver su pagina Web.

3. COLORES DENTRO DEL HTML

DarkOrange Yellow ForestGreen SeaGreen GreenYellow LightGreen Turquoise LightSeaGreen SlateGray

Chocolate Gold Green MediumSeaGreen LawnGreen PaleGreen MediumTurquoise CadetBlue Gray

Figura 8. Fondo color azul y letras negras

Define tipo de letra, tamao y color a tu gusto

Alineados: Izquierda Derecha Centrado Otros efectos:

letra ms grande que el estndar

Texto tiposubndice Texto tiposuperndice

Aling NOSHADE WIDTH SIZE Ejemplo 5:

Figura 10. Muestra como se ve la pagina Web del ejemplo 5

As se ve: Las listas no ordenadas:

Figura 14. Manera como ver el usuario final el Ejemplo 6

6.1 FORMATOS GRAFICOS EN INTERNET

En la figura 17 se muestra la imagen que se seleccion en la etiqueta <IMG>

Figura 18. Resultado del ejemplo 7

Los atributos de las tablas son:

Establece la alineacin de la tabla o texto mediante.

ALIGN = LEFT o ALIGN = RIGHT

Bgcolor. Border. BorderColor. BorderDark.

Asigna el color de la parte clara de un borde de 3 dimensiones.

Etiqueta <TH> </TH>

Etiqueta <TR> </TR>

Alineacin del texto/objetos en toda la fila

Etiqueta <TD> </TD>

8.2 ENLACES A OTRAS PAGINAS

Ejemplo 10: <HTML> <HEAD><TITLE> Enlaces a otras p&aacute;ginas </TITLLE></HEAD> <BODY> 35

Figura 21. Resultado del ejemplo 10

Figura 22. Vista en el navegador del ejemplo 11

Figura 23. Mapa definido en el ejemplo anterior

Figura 24. El texto comienza a desplazarse de derecha a izquierda

11. SONIDO DE FONDO

12. FRAMES (MACROS)

1 Columna Por ejemplo se pone

<FRAMSET cols = 120, *, 80>, La pantalla quedara as:

13. OTRAS ETIQUETAS

Sintaxis de Ejemplo: <COMMENT>Los comentarios se introducen de esta manera</COMMENT>

Sintaxis de ejemplo: <ADDRESS>Roberto Rojas<br> POBOX 2282<br> La Paz Bolivia</ADDRESS>

Etiqueta <CITE> </CITE>

<cite>Este texto estar&aacute; inclinado</cite>

Etiqueta <CODE> </CODE>

<CODE>Este texto aparece con tipo de letra especial</CODE>

Etiqueta <CREDIT> </CREDIT>

<CREDIT>Foto usada bajo permiso de Carlos An&iacute;barro</CREDIT>

Etiqueta <EM> </EM>

{ -} - nbsp

ø oslash ú uacute

ù ugrave û Ucirc

ü uuml þ thorn

ý yacute ÿ yuml

Ejemplo 10: <HTML> <HEAD><TITLE> Enlaces a otras páginas </TITLLE></HEAD> <BODY> 35

<cite>Este texto estará inclinado</cite>

<CREDIT>Foto usada bajo permiso de Carlos Aníbarro</CREDIT>

<KBD>Teclee su mensaje acá:</KBD>

Mi primer página con HTML.<BR>

Duerme para soñar, porque los sueños se hicieron para cumplirse.<BR>

Este es un ejemplo de una página WEB.<BR>