You are on page 1of 21

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 ... 02 03 03 06 06 07 07 07 07 10 13 16 16 17 18

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: 6

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 7

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 ! # % ' ) + / ; = ? [ ] _ { } &#33; &#35; &#37; &#39; &#41; &#43; &#45; &#47; &#59; &#61; &#63; &#91; &#93; &#95; --------------" $ & ( * , . : < > @ \ ^ ` | ~ &#34; &#36; &#38; &#40; &#42; &#44; &#46; &#58; &#60; &#62; &#64; &#92; &#94; &#96; ---------------

Carcter Cdigo Entidad Carcter Cdigo Entidad &#188; frac14 &#190; frac34 &#192; Agrave &#194; Acirc &#196; Auml &#198; AElig &#200; Egrave &#202; Ecirc &#204; Igrave &#206; Icirc &#208; ETH &#210; Ograve &#212; Ocirc &#214; Ouml &#216; Oslash &#218; Uacute &#220; Uuml &#222; THORN &#224; agrave &#226; acirc &#228; auml &#230; aelig &#232; egrave &#234; ecirc &#236; igrave &#238; icirc &#240; eth &#242; ograve &#244; ocirc &#246; ouml &#189; frac12 &#191; Iquest &#193; Aacute &#195; Atilde &#197; Aring &#199; Ccedil &#201; Eacute &#203; Euml &#205; Iacute &#207; Iuml &#209; Ntilde &#211; Oacute &#213; Otilde &#215; times &#217; Ugrave &#219; Ucirc &#221; Yacute &#223; szlig &#225; aacute &#227; atilde &#229; aring &#231; ccedil &#233; eacute &#235; euml &#237; iacute &#239; iuml &#241; ntilde &#243; oacute &#245; otilde &#247; divide

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

&#124; -&#126; -&#161; Iexcl &#163; Pound &#165; Yen &#167; Sect &#169; Copy &#171; Laquo &#173; Shy

&#162; cent &#164; curren &#166; brvbar &#168; uml &#170; ordf &#172; not &#174; reg &#176; deg &#178; sup2 &#180; acute &#182; para &#184; cedil &#186; ordm

&#175; Macr &#177; Plusmn &#179; sup3 &#181; Micro &#183; Middot &#185; sup1 &#187; Raquo

&#248; oslash &#250; uacute

&#249; ugrave &#251; ucirc

&#252; uuml &#254; thorn

&#253; yacute &#255; yuml

Figura 4. Cdigo de caracteres especiales ASCII Por lo tanto, la palabra pgina la podramos escribir como: pgina p&aacute;gina p&#225;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&aacute;gina con HTML. Duerme para so&ntilde;ar, porque los sue&ntilde;os se hicieron para cumplirse. Este es un ejemplo de una p&aacute;gina WEB. </BODY> </HTML> La figura 5, muestra como se ver en el navegador Web

Figura 5. As se ver su pagina Web.

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

10

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

11

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 3: <HTML> <HEAD><TITLE> Manual bsico de HTML</TITLE></HEAD> <BODY BGCOLOR=#66CCFF TEXT=000000> Mi primer p&aacute;gina con HTML. Duerme para so&ntilde;ar, porque los sue&ntilde;os se hicieron para cumplirse. Este es un ejemplo de una p&aacute;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

12

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.

13

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

14

Aling NOSHADE WIDTH SIZE Ejemplo 4:

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&aacute;gina con HTML.<BR> <HR ALING=CENTER WIDTH= 50%><BR> Duerme para so&ntilde;ar, porque los sue&ntilde;os se hicieron para cumplirse.<BR> <HR ALING=LEFT WIDTH= 25% SIZE=5 ><BR> Este es un ejemplo de una p&aacute;gina WEB.<BR> </BODY> </HTML>

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

15

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: <!-- y --> < !- - 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.

16

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

17

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 11. Listas desordenadas

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

Ejemplo 5: <HTML> <HEAD><TITLE> Manual bsico de HTML</TITLE></HEAD> <BODY> <CENTER><H1>Comandos b&aacute;sicos</H1></CENTER> <-- Este documento tiene loq ue he aprendido hasta ahora sobre la programacion HTML --> <H2>P&aacute;rrafos</H2> <P> Este es mi primer parrafo del ejemplo 5</P> <P> Este es mi Segundo parrafo. Aqui hay una rupture de linea <BR> de texto</P> <!-- A continuacion se pone un ejemplo de listas con diferentes formatos--> <HR> <H2> <B>Listas</B></H2> <H3><I>Ordenadas</I></H3> <P> La <FONT SIZE=+1> <I> musica </I></FONT> que mas te gusta es <I> (en orden de preferencia): </I></P> <OL> <LI>El POP</LI> <LI>El ROCK <!-- La marca LI no necesita la etiqueta de cierre --> <LI> La musica 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&aacute;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> 19

<CENTER> Tambi&eacute;n sabemos centrar el texto</CENTER> <PRE> y escribir preformateado</PRE>

<BLINK> y a escribir texto parpadeante</BLINK> <HR> </BODY> </HTML> En la figura 14 se muestra el resultado final del ejemplo 5

Figura 5. Manera como ver el usuario final el Ejemplo 5 20

You might also like