Bases de Lenguaje HTML

Bases de Lenguaje HTML
Departamento Ciencias de Computacin Facultad de Ciencias Exactas y Tecnologa Universidad Nacional de Tucumn
Ana Nieves Rodrguez de Costilla
Conceptos Bsicos de HTML by Ana Nieves Rodriguez is licensed under a Creative Commons Reconocimiento-No comercial-Compartir bajo la misma licencia 2.5 Argentina License. Based on a work at unt-argentina.academia.edu
Ctedra de Laboratorio 1 Bases de Lenguaje HTML Carrera de Programador Universitario - Universidad Nacional de Tucumn
Contenidos
CONTENIDOS ............................................................................................................... 2 EJEMPLOS..................................................................................................................... 3 INTERNET ..................................................................................................................... 4 QU ES LA WEB? .......................................................................................................... 4 EDITORES DE HTML .................................................................................................. 5 LENGUAJE HTML ....................................................................................................... 5 MANEJO DE CDIGO. ...................................................................................................... 6 Estructura de una pgina .......................................................................................... 6 Encabezado ............................................................................................................ 6 Cuerpo de la pgina ............................................................................................... 7 Comentarios ........................................................................................................... 7 PRIMERA PGINA DE EJEMPLO ....................................................................................... 7 En la siguiente figura se muestra cmo se ver la pgina en el browser:............ 10 INSTRUCCIONES HTML ............................................................................................... 10 Atributos del tag <body> ........................................................................................ 11 COLORES ..................................................................................................................... 11 Color de Fondo de pgina ...................................................................................... 11 Formato de la instruccin .................................................................................... 11 FORMATO DEL TEXTO .................................................................................................. 12 Uso del tag FONT ............................................................................................... 14 Atributos del tag <font> ......................................................................................... 16 Justificacin del texto .......................................................................................... 16 LNEAS HORIZONTALES: ............................................................................................... 17 LISTAS: ........................................................................................................................ 18 Listas desordenadas (UL) ....................................................................................... 18 Listas ordenadas (OL)............................................................................................. 20 Lista de Definiciones:.............................................................................................. 21 INSERCIN DE IMGENES: ................................................................................... 22 PARMETROS DE CONFIGURACIN ............................................................................... 22 IMAGEN COMO FONDO DE PANTALLA: .......................................................................... 23 MARQUESINA ............................................................................................................ 24 ENLACES HIPERTEXTUALES (LINKS) ............................................................... 25 Servicio: ............................................................................................................... 25 Mquina:puerto .................................................................................................... 26 Ruta...................................................................................................................... 26 Grfico como vnculo: ......................................................................................... 26 Direccin de mail como vnculo: ........................................................................ 26 Vnculos hacia marcadores de la misma pgina (anclas) ...................................... 26 Vnculos hacia marcadores de la otra pgina ........................................................ 27 MANEJO DE TABLAS ............................................................................................... 27
Pag. 2
Ing. Ana Nieves Rodrguez
Ctedra de Laboratorio 1 Bases de Lenguaje HTML Carrera de Programador Universitario - Universidad Nacional de Tucumn Atributos de tabla .................................................................................................... 28 Atributos de Celda................................................................................................... 28 MARCOS O FRAMES ................................................................................................ 32 Etiqueta <FRAMESET> ..................................................................................... 33 Frames anidados .................................................................................................. 34 Acceso a otros marcos: ........................................................................................ 35
Ejemplos
Figura 1: cdigo HTML en bloc de notas .......................................................................... 8 Figura 2: Guardar como en bloc de notas. ....................................................................... 8 Figura 3: Explorador de windows ..................................................................................... 9 Figura 4: Vista en el browser ............................................................................................ 9 Figura 5: ingreso de los tags <p> y <br> ......................................................................... 10 Figura 6: vista en el browser de salto de lnea ............................................................... 10 Figura 7: Uso de color en body ....................................................................................... 12 Figura 8: Ttulos .............................................................................................................. 12 Figura 9: Vista en el browser de diferentes niveles de ttulos ....................................... 13 Figura 10: Combinacin de tags ..................................................................................... 14 Figura 11: vista en el browser de combinacin de tags ................................................. 14 Figura 12: uso del tag FONT............................................................................................ 15 Figura 13: color en FONT ................................................................................................ 15 Figura 14: vista en el browser......................................................................................... 16 Figura 15: Uso de DIV ..................................................................................................... 17 Figura 16: Vista en el browser de uso del DIV ................................................................ 17 Figura 17: Ejemplo de listas, vista en el browser y cdigo HTML .................................. 19 Figura 18: vista en el browser de lista con circle............................................................ 19 Figura 19: Ejemplo de Listas ordenadas ......................................................................... 20 Figura 20: Ejemplo de listas ordenadas con nmeros romanos .................................... 21 Figura 21: Insercin de imagenes ................................................................................... 22 Figura 22: Img vista en el browser.................................................................................. 23 Figura 23: Imagen como fondo de pantalla ................................................................... 23 Figura 24: Vista en el browser de imagen como fondo.................................................. 24 Figura 25: Tabla .............................................................................................................. 29 Figura 26: Diseo de la plantilla con tablas con border ................................................. 32 Figura 27: plantilla con borde de tablas =0 .................................................................... 32 Figura 28: Ejemplo de uso de frame ............................................................................... 33 Figura 29: Ejemplo de frame tipo fila ............................................................................. 33 Figura 30: vista en el browser de frames anidados........................................................ 35 Tabla 1: tabla comparativa entre editores ....................................................................... 5 Tabla 2: estructura de una pagina HTML ......................................................................... 7 Tabla 3: saltos de lnea y prrafo...................................................................................... 9 Tabla 4: cuadro de tags en texto .................................................................................... 13
Pag. 3
Internet
El inicio de Internet, tambin conocida como la Red de redes, se remonta a fines de los aos 60 en los Estados Unidos con la red ARPANET (Advanced Research Project Agency Proyectos Avanzados de Investigacin), luego esta red fue utilizada por el Departamento de Defensa as como por otras dependencias gubernamentales, universidades y centros de investigacin de ese pas. En esa poca apareci el protocolo llamado TCP/IP (Transmisin Control Protocol / Internet Protocol protocolo de control de transmisin o protocolo Inter_redes). El protocolo TCP/IP es la forma que utilizan las mquinas conectadas a la red para poder comunicarse a travs de distintos medios fsicos, como ser por lneas telefnicas, satlite, radio, etc. Pero el gran despegue nace en el ao 1985 con la NSFNET creado por la National Science Foundation (Fundacin Nacional de Ciencias) que instal varias supercomputadoras en algunas universidades de EEUU que tenan por objetivo conectar otras universidades y centros de investigacin. La NFSNET tuvo sus vaivenes y en 1991 ya se encontraban conectadas 3500 subredes de todo el mundo, por ello se convirti en el gran tronco principal de lo que hoy se conoce como Internet
Qu es la Web?
Web es la forma en que nos referimos a la WWW (World Wide Web) tambin conocida como la gran telaraa del mundo, es uno de los servicios ms conocidos de Internet por ser muy fcil de usar. Una pgina Web es un archivo guardado en una computadora conectada a Internet, este archivo puede contener imgenes, texto, sonido, vnculos a otras pginas o sitios, etc. Un sitio Web est compuesto por varias pginas de hipertexto, que se conectan entre s y con pginas ubicadas en otros sitios, formando una especie de "telaraa" (de ah el uso de la palabra Web, que en ingls significa red, telaraa, enredo, trama). Las pginas Web estn escritas en un lenguaje llamado HTML (Hyper-text Markup Language) es un lenguaje basado en tags o marcas. Los HTML son archivos de texto que pueden ser editados libremente con el Notepad de Windows, aunque para hacerlo de esta manera, es necesario conocer la estructura del lenguaje. Sintetizando lo que se dijo anteriormente, una pgina Web posee texto, grficos, elementos multimediales y enlaces. El texto puede tener los formatos ms comunes, como negrita, itlica y subrayado, pudiendo modificarse su tamao, color y justificacin con respecto al resto de la pgina. Los enlaces, Links o vnculos son muy importantes porque convierten a la Web en esa especie de "telaraa" permitiendo la conexin entre diferentes pginas y sitios propios o remotos. Un enlace en texto se diferencia de un texto comn porque aparece subrayado y de color diferente, cuando movemos el mouse por encima de un enlace, el cursor cambia su forma por el de una mano, y en la parte inferior de la ventana aparece la direccin a la que apunta el enlace.
Pag. 4
Ctedra de Laboratorio 1 Bases de Lenguaje HTML Carrera de Programador Universitario - Universidad Nacional de Tucumn Una pgina web puede contener, adems, otros elementos que se fueron agregando a medida que el formato HTML fue progresando, como hojas de estilo en cascada, mdulos en javascript, etc. Existen utilitarios para editar pginas, que emplean la filosofa WYSIWYG (What You See ls What You Get, lo que usted ve es lo que usted obtiene). De esta manera, no es necesario conocer en profundidad el lenguaje HTML, basta con saber usar estos sencillos programas, cuya funcin es 'traducir' a lenguaje HTML la pgina que hacemos en pantalla. El manejo de estos programas no es ms complicado que el de un procesador de textos. Los editores de tipo WYSIWYG facilitan el trabajo, pero en muchos casos, cuando hay modificaciones, es necesario consultar el cdigo fuente para realizar correcciones. Los cdigos "fuente" de las pginas en Internet estn disponibles (y sin Copyright). Es entonces posible inspirarse en ellas para utilizar el proceso sin tener que "inventar nada nuevo".
Editores de HTML
WYSIWYG (What You See Is What You Get) son programas de fcil utilizacin que permiten ver lo que se est creando lo que ves es lo que se obtienes. A medida que se va diseando, el editor genera cdigo HTML en segundo plano. Otra alternativa es la de trabajar con editores de texto que resaltan los cdigos HTML, como el Note++, que facilitan la deteccin en errores de sintaxis. Existen dos tendencias al momento de crear una pgina web: por un lado estn aquellas personas que prefieren crear las pginas programando el HTML y por otro, las personas que utilizan editores HTML. Algunas diferencias entre hacerlo de un modo u otro son las siguientes:
Escribiendo el HTML
Domina con mayor precisin el cdigo de la pgina, queda ms limpio.
Con un editor WYSIWYG

El cdigo de la pgina tiene mala calidad, incluso puede llegar a tener errores ms o menos visibles, que cuestan arreglar. Es la mquina la que domina el trabajo. El aprendizaje es muy sencillo, tal como puede ser trabajar en Word. Solo se trata de manejar un programa ms. Es muy rpido.
Es ms complicado el aprendizaje, ms lento y cuando se llega a un nivel avanzado tambin se hace considerablemente ms difcil Hacer una pgina cuesta ms trabajo y tiempo.
Tabla 1: tabla comparativa entre editores
Cada uno debe escoger el camino que ms le convenga o el que le parezca ms atractivo. De todos modos siempre se puede empezar de un modo y luego pasar al otro modo sin ningn tipo de problema. Incluso, por adelantarnos a los acontecimientos, diramos que cuando una persona profundiza en el diseo de pginas web llega un momento en el que le hace falta conocer las dos maneras de construir webs. A los programadores en HTML les har falta aprender un editor porque eso aumentar su productividad y los que utilizan editores necesitarn aprender un poco de HTML para arreglar alguna cosa que el editor ha hecho mal o realizar alguna cosa que el editor no puede hacer
Lenguaje HTML
El HTML es un lenguaje descriptivo con el que es posible codificar un hipertexto de manera tal que los programas navegadores lo entiendan. Pag. 5 Ing. Ana Nieves Rodrguez
Ctedra de Laboratorio 1 Bases de Lenguaje HTML Carrera de Programador Universitario - Universidad Nacional de Tucumn Esta codificacin se lleva a cabo a travs de determinadas marcas conocidas como tags que dan forma al documento. En este punto veremos cul es la funcin que cumple cada uno de los tags y las distintas aplicaciones que tienen.
Manejo de cdigo.
Los archivos HTML son documentos de texto ASCII (como los TXT), con marcas que funcionan como comandos. Generar un archivo HTML es muy sencillo: se escribe todo en el Bloc de Notas y se graba como documento de texto, pero con la extensin HTM o HTML en lugar de TXT. Por ejemplo, "programador.html". Para ver cmo va quedando la pgina, simplemente se graba y se ejecuta, al hacer algn cambio en la pgina, habr que "actualizar" su contenido mediante el botn actualizar (F5), aunque esto depender del navegador que se est usando. Las tags son expresiones que se codifican incluyendo la "instruccin" dentro de los smbolos "<" y ">", por ejemplo: <tag>. Sin embargo, no todas las marcas funcionan de la misma manera. Algunas slo se abren y otras se abren y se cierran. Haciendo una comparacin con Word en el que para escribir el texto en Negrito, el procedimiento sera: Presionar el botn negrita para activar la opcin. Escribir el texto deseado. Presionar el botn negrita para desactivar la opcin En lenguaje HTML como se trabaja con marcas llamadas tags, sera: Abrir el tag negrita. Escribir el texto deseado. Cerrar el tag negrita. Que se codifica de la siguiente manera: <b>Texto deseado</b>
Estructura de una pgina

En principio, las pginas HTML cuentan con una estructura determinada. En caso de no cumplir con la misma, es muy probable que la pgina no se reproduzca con fidelidad a la hora de incluirla en un navegador. Todas las pginas cuentan con dos secciones bsicas: Encabezado - <head> Cuerpo - <body> Encabezado Todas las pginas comienzan con el tag <HTML>. Dicho tag le indica al navegador que el documento est codificado en ese lenguaje. A continuacin se incluye el encabezado, que comienza con el tag <HEAD> (cabeza) y que luego cuenta con otras marcas antes de cerrarlo con </HEAD>. En suma, el inicio de un documento HTML ser: <HTML> <HEAD> ( ... Texto correspondiente al encabezado de la pgina...) </HEAD> Dentro del encabezado, se incluyen los llamados "META TAGS", que cumplen, en su mayora, una funcin meramente informativa.
Pag. 6
Ctedra de Laboratorio 1 Bases de Lenguaje HTML Carrera de Programador Universitario - Universidad Nacional de Tucumn Dentro de esa informacin se incluyen datos como: autor, fecha de expiracin, descripcin de la pgina y algunas palabras clave. Los "meta tags" son completamente optativos, es decir que, en caso de que no se incluyan, la pgina se ver correctamente en el browser. Otro de los tags que forman parte del encabezado es el del ttulo de la pgina. Por ejemplo, si se est trabajando sobre una pgina acerca de La Carrera de Programador Universitario, un ttulo podra ser "Carrera de Programador Universitario", y la manera de incluirlo en la pgina es: <HTML> <HEAD> <TITLE> Carrera de Programador Universitario</TITLE> </HEAD> Cuerpo de la pgina El cuerpo de la pgina es la parte que se ver luego en el browser de la Web. Comienza con el tag <BODY>, que se utiliza para abrir el cuerpo de la pgina y el tag </BODY>, que se usa para cerrarlo. Todo lo que haya entre estas dos marcas ser lo que se ve cuando se cargue la pgina desde cualquier browser, el ttulo asignado se ver en la barra de ttulo del browser. Por ltimo, y para cerrar el documento HTML, habr que cerrar el primer tag abierto, el </HTML>. Estructura bsica de un documento HTML: <html> <head> <title> Titulo de la pagina </title> </head> <body> Lo que deseo que se vea. </body> </html>
Tabla 2: estructura de una pagina HTML
Comentarios Antes de abocarnos a la creacin de pginas, diremos que los comentarios se realizan en cualquier parte de la pgina con el siguiente formato: <!Comentario -->.
Primera Pgina de ejemplo

En el bloc de notas escriba el siguiente texto:
Pag. 7
Figura 1: cdigo HTML en bloc de notas
Ahora estamos en condiciones de guardarlo como un archivo con extensin HTM o HTML, no olvide que para guardar un archivo de texto con otra extensin que no sea txt debe usar comillas dobles como se muestra en la siguiente figura:.
Figura 2: Guardar como en bloc de notas.
Al guardar la pgina de la manera descripta, podemos ver mediante el explorador que el icono que representa nuestro archivo cambia y se puede ver de la siguiente manera:
Pag. 8
Figura 3: Explorador de windows
Al hacer doble clic en el icono programador.htm, el browser por defecto nos mostrar la pgina. En nuestro caso el browser es el Internet Explorer.
Figura 4: Vista en el browser
Advierta que en el bloc de notas habamos dejado un punto y aparte luego de la palabra monousuario, este detalle es ignorado totalmente por HTML. Para evitar ese problema, existen las siguientes marcas o tags: <BR> <P> produce un salto de lnea comn, es decir que el texto que se incluya despus de este tag slo bajar un rengln Indicar el salto de prrafo, dejar dos lneas en blanco antes de incluir el texto siguiente. El tag <P> puede cerrarse para identificar ms cmodamente dnde termina el prrafo, aunque no es obligatorio hacerlo.
Tabla 3: saltos de lnea y prrafo
En la siguiente figura se muestra la modificacin realizada en bloc de notas, observe los nuevos tags que se incluyen:
Pag. 9
Tag <P>
Tag <BR>
Figura 5: ingreso de los tags <p> y <br>
En la siguiente figura se muestra cmo se ver la pgina en el browser:
Figura 6: vista en el browser de salto de lnea
Hay algunas marcas que no revisten demasiada complejidad y que servirn para que la pgina creada sea ms vistosa. Veremos, por ejemplo, cmo aplicar colores, estilos de fuentes y justificaciones a los textos.
Instrucciones HTML
Una instruccin HTML, se compone de la siguiente manera: Elemento: es el tag, en este caso se toma el tag de texto <FONT Atributo: COLOR= Valor: RED> Cierra tag: </FONT>
Pag. 10
Atributos del tag <body>

Margen: leftmargin (margen izquierdo) y topmargin (margen superior). En algunos navegadores: marginwidth (ancho del margen) y marginheight (altura del margen). Ejemplo: <body leftmargin="20" topmargin="0" marginwidth="20" marginheight="0" > TEXT: Para cambiar el color del texto de la pagina (mientras no se diga lo contrario) LINK: color de los enlaces VLINK: color de los enlaces ya visitados por el usuario
Colores
Dijimos anteriormente que dentro del tag <BODY> se pueden agregar distintos argumentos que sern de gran utilidad, por ejemplo, se pueden manejar colores. Cada color est formado por distintas combinaciones de rojo, verde y azul (RGB). Segn cuntas "gotas" de cada color se mezclen, se formar un color definitivo. La mxima cantidad de "gotas" por color es 255 y la mnima es 0. De este modo, al mezclar 255 gotas de rojo, 0 de verde y 0 de azul quedarn como color el rojo puro. Esta cantidad de "gotas" por color se expresa en valores hexadecimales, es decir que el mximo es FF (255) y el mnimo 00 (siempre van dos caracteres por color). De esta manera, se juntan la cantidad de 'gotas", incluyendo el carcter "#" y, a continuacin, el valor para rojo, verde y azul. Es decir: #RRVVAA, el color negro se representa como #000000 y el #FFFFFF es el color blanco. De todos modos, y sin complicarnos mayormente, se puede establecer el nombre del color puro a usar.
Color de Fondo de pgina

El tag para establecer el color de fondo de una pgina es: bgcolor y se usa de la siguiente manera <BODY BGCOLOR="color que desee"> Formato de la instruccin <BODY BGCOLOR=COLOR> o COLOR: RED, GREY, GREEN, WHITE, ETC #RRVVAA (R=rojo, V=verde, A=azul) en hexadecimal (0-F) Siguiendo con nuestro ejemplo, elegimos el color gris que en ingls es GRAY:
Pag. 11
Figura 7: Uso de color en body
Formato del texto

As como en Word seleccionbamos estilos como ttulo 1, o ttulo 2, en lenguaje HTML existen los llamados ttulos (heading) que se representa de la siguiente manera: <Hn>Texto<Hn> donde "n" determina el tamao del texto que se incluye dentro de los tags. A medida que "n" se incrementa, el texto va disminuyendo de tamao. El mximo valor que puede tomar este factor es 6; a partir de all no variar el tamao. En el ejemplo:
Tipos de ttulos
Figura 8: Ttulos
Vista en el browser:
Pag. 12
Figura 9: Vista en el browser de diferentes niveles de ttulos
Otra manera de dar formato al texto es utilizando los tags de formato. Los cuales se abren y pueden mantenerse as hasta ser cerrados. Dichos tags son: <B></B> <STRONG>..</STRONG> <I>...</I> <U>..</U> <BIG>...</BIG> <SMALL>..</SMALL> <S> 0 <STRIKE> <SUB>..</SUB> <Sup>..</Sup> <PRE>..</PRE> Negrita Negrita Itlica Subrayado Aumenta el tamao el texto mas o menos en un punto Disminuye el tamao el texto mas o menos en un punto Texto tachado Texto en formato subndice Texto en formato superndice Deja un rengln en blanco y usa letra teletipo (adems incluye salto de lnea automtico es decir que no hay que incluir BR sino agregar un [ENTER] para bajar de rengln). Vietas Justifica el contenido del texto, puede tener los siguientes valores: Left, Right y Center.
<LI> <DIV ALIGN = justificacin>

Tabla 4: cuadro de tags en texto
Es posible combinar los tags, por tanto una frase puede aparecer como "negrita, itlica y subrayada". En el ejemplo:
Pag. 13
Figura 10: Combinacin de tags
En este caso la frase Materia Laboratorio 1 estar en negrita y subrayado, veamos lo que sucede en el browser:.
Figura 11: vista en el browser de combinacin de tags
Uso del tag FONT Otra manera de dar formato al texto de la pgina es con la marca FONT, que permite cambiar varios de los parmetros del texto: color, fuente tipogrfica y tamao. El texto que tome esta forma ser el que se encuentre encerrado entre <FONT> Y </FONT>; en medio de estas marcas puede haber saltos de lnea y cambios de prrafos. Todos los parmetros son optativos, es decir que, si se desea cambiar el color del texto, no es necesario modificar tambin el tamao o la fuente. En suma, el tag FONT se incluye as:
Pag. 14
Ctedra de Laboratorio 1 Bases de Lenguaje HTML Carrera de Programador Universitario - Universidad Nacional de Tucumn <FONT COLOR='#RRVVAA SIZE=X Face=Fuente1, Fuente2> donde: #RRvvAA es la combinacin con que se representa el color; X es un factor que, si es un nmero positivo, aumentar el tamao de la fuente, mientras que si es negativo, lo disminuir. Por ejemplo: +1, +3, -2 o -5;
Figura 12: uso del tag FONT
Fuente1 y Fuente2 son nombres de fuentes tipogrficas, por ejemplo: "Arial", "Courier New" o "MS Sans Serif". En primer lugar, el navegador intentar utilizar la Fuente1; si no se encuentra instalada, intentar con la Fuente2 y, si esta ltima tampoco lo est, incluir la fuente predeterminada por el navegador de turno. Como habamos dicho anteriormente se pueden usar colores puros estableciendo el nombre del color. Observe el ejemplo de la figura. En el siguiente caso se vara el tipo de letra y tamao para la frase llamado por el nombre Verde.
Figura 13: color en FONT
Pag. 15
Ctedra de Laboratorio 1 Bases de Lenguaje HTML Carrera de Programador Universitario - Universidad Nacional de Tucumn Muestra en Browser:
Figura 14: vista en el browser
Atributos del tag <font>

Tamao: <FONT SIZE= x>nmero</FONT> Tipo de fuente: <FONT FACE= TIPO>arial, courier, etc</FONT> Color: <FONT COLOR=RED>red, blue, etc</FONT> Sangra: <BLOCKQUOTE> texto </BLOCKQUOTE> Ejemplo: <font face="Helvetica,Arial,Times" size=7 color=navy> Mensaje de Prueba </font> Justificacin del texto Alineacin: o align=left para alinear a la izquierda o align=right para alinear a la derecha o align=center para centrar el texto Ejemplo dentro de un prrafo: o <p align="left">alineamos el texto a la izquieda</p> o <p align=right">alineamos el texto a la derecha</p> Ejemplo dentro de un DIV (el DIV se una para establecer un bloque): o <DIV align= o left o Center o Right o </DIV> Igualmente, para centrar el contenido, es muy comn utilizar el tag <CENTER> Y </CENTER> para cerrar dicha alineacin.
Pag. 16
Figura 15: Uso de DIV
Figura 16: Vista en el browser de uso del DIV
Lneas horizontales:
<hr> (no necesita cierre) Atributos: o Width: largo de la lnea con un cierto nmero de pixel o un porcentaje del documento
Pag. 17
Ctedra de Laboratorio 1 Bases de Lenguaje HTML Carrera de Programador Universitario - Universidad Nacional de Tucumn o Size: ancho de la lnea o Noshade: fondo de la lnea
Listas:
Existen varios tipos de lista: DIR, DL, MENU, OL y UL La declaracin se realiza de la siguiente manera: <tipo_lista> <LI>Primer elemento <LI>Segundo elemento </tipo_lista> tipo_lista puede ser una de las nombradas
Listas desordenadas (UL)

Son delimitadas por las etiquetas <ul> y </ul> (unordered list). Cada uno de los elementos de la lista es citado por medio de una etiqueta <li> (sin cierre, aunque no hay inconveniente en colocarlo). Suponga el siguiente texto: Temas de la materia: *Windows *Word *HTML
Pag. 18
Figura 17: Ejemplo de listas, vista en el browser y cdigo HTML
Podemos definir el tipo de vieta empleada para cada elemento. Para ello debemos especificarlo por medio del atributo type incluido dentro de la etiqueta de apertura <ul>, si queremos que el estilo sea vlido para toda la lista,o dentro le la etiqueta <li> si queremos hacerlo especfico de un solo elemento. La sintaxis es del siguiente tipo: <ul type="tipo de vieta"> donde tipo de vieta (atributos) puede ser uno de los siguientes: circle disc square Cdigo Ejemplo para listas con vietas tipo circle: <H1>Temas de la Materia</H1> <ul type="circle"> <LI>Windows <LI>Word <LI>HTML <LI>DOS </ul>
Figura 18: vista en el browser de lista con circle
Pag. 19
Listas ordenadas (OL)

En este caso usaremos las etiquetas <ol> (ordered list) y su cierre. Cada elemento sera igualmente precedido de su etiqueta <li>. Cdigo: <ol> <LI>Windows <LI>Word <LI>HTML <LI>DOS </ol> Vista en el Browser:
Figura 19: Ejemplo de Listas ordenadas
Del mismo modo que para las listas desordenadas, las listas ordenadas ofrecen la posibilidad de modificar el estilo. En concreto es posible especificar el tipo de numeracin empleado eligiendo entre nmeros (1, 2, 3...), letras (a, b, c...) y sus maysculas (A, B, C,...) y nmeros romanos en sus versiones maysculas (I, II, III,...) y minsculas (i, ii, iii,...). Para realizar dicha seleccin se utiliza el atributo type, el cual ser situado dentro de la etiqueta <ol>. Los valores que puede tomar el atributo en este caso son: 1: Para ordenar por nmeros a: Por letras minsculas del alfabeto A: Por letras maysculas del alfabeto i: Ordenacin por nmeros romanos en minsculas I: Ordenacin por nmeros romanos en maysculas Cdigo: Vista en el Browser:
Pag. 20
Ctedra de Laboratorio 1 Bases de Lenguaje HTML Carrera de Programador Universitario - Universidad Nacional de Tucumn <ol type="I"> <LI>Windows <LI>Word <LI>HTML <LI>DOS </ol>
Figura 20: Ejemplo de listas ordenadas con nmeros romanos
Lista de Definiciones:
No utiliza la etiqueta <LI>. Esto se hace por medio de las etiquetas <DT> y <DD>. Establece un tem con SubItems, puedo tener tantos <DD> como desee <DL> <DT>Primer elemento<DD>1.1<DD>1.2 <DT>Segundo elemento<DD>2.2. </DL>
Ejemplo 1: Lista de definiciones
Pag. 21
Insercin de Imgenes:
El tag IMG es el que se utiliza para agregar imgenes; no solicita marca o tag para cerrarlo. Las imgenes que se utilizan para confeccionar una pgina web tienen formato JPG o GIF, por ser pequeas, las imgenes GIF soportan 256 colores mientras que las JPG pueden manejar hasta16,7 millones de colores. Si posee una imagen en formato BMP, es posible convertirlas mediante programas como el paint o Photoshop. La sintaxis es la siguiente: <IMG SRC=imagen.gif> donde se establece el nombre y la ubicacin de la imagen en el servidor o disco local. SRC significa Source (fuente) es el lugar en donde el browser buscar la imagen, si la imagen se encontrara en el mismo directorio en que se encuentra la pgina, el tag sera: <IMG SRC=Nombre_de_imagen.gif>
Parmetros de configuracin
HSPACE: Indica la mnima distancia que habr entre la imagen y otro elemento que aparezca a los costados, ya sea imagen o texto. Se expresa en pxeles. VSPACE: Indica lo mismo que HSPACE, pero hacia arriba y hacia abajo de la pgina; tambin se expresa en pxeles. HEIGHT: Es la altura de la imagen. Esta medida se expresa en pxeles y no es conveniente incluir este parmetro, ya que puede llegar a deformar la imagen; claro que si ustedes gustan... WIDTH. Cumple la misma funcin que HEIGHT, pero para el ancho de la imagen. ALT: Antes de cargar la imagen aparece un cuadro vaco. Dentro de l se puede incluir un texto. ALIGN: Es la justificacin de la imagen respecto del texto que la rodea. Puede ser LEFT (a la izquierda), RIGHT (a la derecha) o CENTER (al centro). Esta justificacin recin termina luego de un <P>.
En el siguiente ejemplo incluiremos una imagen justificada a derecha y con un espacio mnimo de 5 pxeles.
Figura 21: Insercin de imagenes
Pag. 22
Figura 22: Img vista en el browser
Para incluir una imagen debajo de una lnea por ejemplo debajo de la palabra DOS, debemos incluir el tag <BR>. Un punto importante es el uso de las comillas dobles en el llamado a la imagen: <IMG SRC="win.jpg>, de otro modo la pgina deja de funcionar a partir de esta omisin.
Imagen como fondo de pantalla:

Para incluir una imagen como fondo de pantalla, la orden se debe ejecutar a travs del BODY. Es decir que, a todo lo que ya conocemos acerca de este tag, se le agrega el parmetro BACKGROUND de la siguiente manera:
Figura 23: Imagen como fondo de pantalla
Pag. 23
<BODY BACKGROUND=imagen.gif> donde imagen incluye el nombre y la ruta si no estuviera en la misma carpeta. Es posible incluir los parmetros mencionados anteriormente tal como BGCOLOR y TEXT. En el siguiente ejemplo se incluye la lnea <BODY BACKGROUND="Backgrnd.gif"> para tomar como fondo de pgina el grfico Backgrnd.gif que se incluye en el directorio Windows.
Figura 24: Vista en el browser de imagen como fondo
Para lograr que la imagen no se mueva al desplazar la barra de desplazamiento del browser, se utiliza, dentro del tag BODY la propiedad BGPROPERTIES=FIXED, esto es como despegar el texto de la imagen de fondo. <BODY BACKGROUND="Backgrnd.gif" TEXT=blue BGPROPERTIES=fixed> En este caso el texto ser de color azul y mediante la propiedad bgproperties despega el texto de la imagen.
Marquesina
Las marquesina es un texto que recorre la pantalla desplazndose a lo ancho de ella, es un elemento que est casi en desuso, pero igual lo trataremos. En este caso se utiliza el tag <MARQUEE>, que contiene los siguientes parmetros: DIRECTION, left o right
Pag. 24
Ctedra de Laboratorio 1 Bases de Lenguaje HTML Carrera de Programador Universitario - Universidad Nacional de Tucumn ALIGN, define la alineacin: top, middle, o bottom BEHAVIOR, define el movimiento: scroll (entra y sale), stide (entra y se queda) o alternate va hacia y borde y vuelve. BGCOLOR, color de fondo (por donde pasar el texto) #RRVVAA HEIGHT, define el tamao de la marquesina y se mi- de en pixeles o porcentaje de pantalla <> HSPACE, espacio horizontal hasta el prximo objeto e vspac@p, espacio vertical hasta el prximo objeto LOOP, cantidad de veces que pasa por la pantalla; puede ser un nmero o INFINITE (indica que ser una retroalimentacin permanente) SCROLLDELAY, velocidad de la marquesina (en milsegundos)
<MARQUEE DIRECTION=RIGHT BEHAVIOR=ALTERNATE> <font color=red><h1> Materia Laboratorio 1</h1></font> </MARQUEE> En este caso el texto es de color rojo y de tipo ttulo 1 que se mueve de borde a borde es la frase: Materia Laboratorio 1. En el siguiente ejemplo, la marquesina tiene un fondo de color rojo y las letras tienen el color declarado en el tag body. <MARQUEE DIRECTION=RIGHT BEHAVIOR=ALTERNATE bgcolor=red> <h1> Materia Laboratorio 1</h1> </MARQUEE>
Enlaces Hipertextuales (links)

Un enlace es una zona de texto o grficos que si son seleccionados nos trasladan a otro documento de hipertexto o a otra posicin dentro del documento actual. Tag: <A></A> o El texto se visualizar de manera distinta en el navegador. o Al pulsar sobre el enlace, seremos enviados al documento que apuntaba el enlace. <A HREF="direccion">Click</A> direccin en formato URL (Uniform Resource Locator) o Una URL nos indica una direccin de Internet el servicio que esperamos nos ofrezca el servidor al que corresponde la direccin. o Tiene el siguiente formato: servicio://mquina:puerto/ruta/fichero@usuario Servicio: http: Es el servicio invocado para transmitir pginas web https: usa de tcnicas de encriptacin para proteger los datos que intercambiemos.
Pag. 25
Ctedra de Laboratorio 1 Bases de Lenguaje HTML Carrera de Programador Universitario - Universidad Nacional de Tucumn ftp: Permite trasmitir ficheros desde servidores de ftp annimo. mailto: Para poder mandar un mensaje. Por ejemplo: mailto:pepe@herrera.unt.edu.ar. News: Para poder acceder a foros de discusin. Se indica el servidor y el grupo. Por ejemplo news://news.ibernet.es/es.comp.demos telnet: Nos permite conectarnos con otros ordenadores y entrar en ellos como si nuestro ordenador fuese una terminal del mismo. Mquina:puerto La direccin de la mquina puede ser, o bien una serie de cuatro nmeros entre 0 y 255 (123.3.5.65) o bien algo ms facil de recordar como es una serie de palabras separadas por puntos (www.herrera.unt.edu.ar ). El puerto generalmente no se indica, ya que el servicio lo predetermina. Ruta La ruta es una serie de directorios separados por el smbolo /, que es el utilizado en UNIX (el sistema operativo ms extendido en los servidores de Internet). Cuando queremos acceder a un fichero situado en la misma mquina que la pgina web que estamos creando podemos utilizar este formato: ruta_relativa/fichero En la ruta relativa podremos utilizar los dos puntos (..) para acceder al directorio padre o comenzar con la barra diagonal (/) para acceder a una ruta absoluta dentro de nuestro ordenador. Grfico como vnculo: <A HREF.=DIRECCIN DE ARCHIVO> <IMG SRC=imagen.gif></A> Direccin de mail como vnculo: <A HREF.=malito:direccin@dominio.com> Solicitar informacin</A> Se puede incluso solicitar el subject o asunto de la siguiente manera: <A HREF.=malito:direccin@dominio.com?subject=Consulta> Solicitar informacin</A>
Vnculos hacia marcadores de la misma pgina (anclas)

Tal como se haca en Word se deben cumplir dos pasos principales: 1. Definir el marcador en la zona hacia donde se hipervincular: <A NAME=marca1> 2. Incluir el enlace interno: <A HREF.=#marca1>Ir a Marca 1</A> <HTML> <HEAD> <TITLE>Federico Garca Lorca</TITLE> </head> <body background="Backgrnd.gif" text="blue"> <A NAME="inicio"> <H1>ROMANCE SONAMBULO</H1> <h3>Garca Lorca</h3> <font face="Courier news" size=16> <A HREF= "#primero">Primer prrafo</A><br> <A HREF= "#segundo">Segundo prrafo</A><br> <A HREF= "#tercero">Tercer prrafo</A><br> Pag. 26 Ing. Ana Nieves Rodrguez
Ctedra de Laboratorio 1 Bases de Lenguaje HTML Carrera de Programador Universitario - Universidad Nacional de Tucumn </font> <br><br> <hr> <center> <br> <A NAME="primero"> Verde que te quiero verde.<br> Verde el viento. Verde ramas.<br> El barco sobre la mar<br> y el caballo en la montaa.<br> <br> <A NAME="segundo"> Con la sombra en la cintura,<br> ella suea en su baranda <br> verde carne, pelo verde,<br> <br> <A NAME="tercero"> Bajo la luna gitana,<br> las cosas la estn mirando<br> y ella no puede mirarlas.<br> <br> <A HREF= "#inicio"><b>Inicio de pgina</b></A><br> </center> </BODY> </HTML>
Ejemplo 2: Vnculos a marcas de una misma pgina
Vnculos hacia marcadores de la otra pgina

Tal como se haca en Word se deben cumplir dos pasos principales: 3. Definir el marcador en la zona hacia donde se hipervincular: <A NAME=marca1> en el otro archivo por ejemplo archivo2.htm. 4. En la pgina que llama suponga archivo1.htm, incluir el enlace interno: <A HREF.=archivo2.htm#marca1>Ir a Marca 1 del archivo2</A>
Manejo de Tablas
Las tablas que se generan en HTML cuentan con varios parmetros, que indican el contenido, el color, la alineacin, etc. Una tabla no tiene por qu ser "regular" ya que puede haber, por ejemplo, una celda de 80 pixeles de ancho y fondo verde, y otra de 320 pixeles y fondo blanco. En lenguaje html debemos distinguir adems de filas y columnas, el formato de las celdas. Las tablas se abren con el tag <TABLE>.
Pag. 27
Ctedra de Laboratorio 1 Bases de Lenguaje HTML Carrera de Programador Universitario - Universidad Nacional de Tucumn Una fila se abre con el tag <TR>. Una vez abierta la fila se deben declarar las columnas, con el tag <TD> que posee los mismos atributos que <TR>. Dentro de cada <TD> se incluye el contenido de la celda, pueden ser textos, imgenes, links. Tanto las filas como las columnas deben cerrarse: </TD></TR>, y al terminar de construir la tabla se cierra con el tag: </TABLE>
Atributos de tabla
BORDER: borde que se dibujar alrededor de las celdas. Por defecto es cero, lo que significa que no dibujar borde alguno. CELLSPACING: nmero de pixels que separarn las celdas. CELLPADDING: nmero de pixels que habr entre el borde de una celda y su contenido. WIDTH: ancho de la tabla en pixels como en porcentaje del ancho de la ventana del navegador. ALIGN: Alinea la tabla a izquierda (LEFT), derecha (RIGHT) o centro (CENTER Una vez declarada la tabla, se puede establecer un ttulo con el tag: <caption>Ttulo de la tabla</caption>
Atributos de Celda
Cada fila comienza con el tag <TR> (table Row fila de la tabla) y posee los siguientes parmetros optativos: BGCOLOR color de fondo de la fila. BORDERCOLOR color de borde de las celdas dentro de esta fila. ALIGN justificacin del contenido, puede ser LEFT(izquierda), RIGHT(derecha), CENTER (centrado) VALIGN Justificacin vertical del contenido, puede ser TOP (arriba) o BOTTOM (abajo) Como en cualquier tabla puede haber ms de una columna, como en el ejemplo que veremos a continuacin:
Pag. 28
Figura 25: Tabla
Dos atributos interesantes y muy usados son colspan y rowspan, lo que hacen es combinar celdas. Mediante el uso de estos atributos se puede hacer una plantilla y en base a ella, un sitio web: COLSPAN: nmero de celdas de la fila situadas a la derecha de la actual que se unen a sta (incluyendo la celda en que se declara este parmetro). Es por defecto uno. Si se pone igual a cero, se unirn todas las celdas que queden a la derecha. ROWSPAN: nmero de celdas de la columna situadas debajo de la actual que se unen a sta
Pag. 29
Ejemplo 3: Ejemplo de Uso de ColSpan y rowSpan
Plantilla con tablas <HTML> <head> <TITLE>Plantilla con tabla</TITLE> <title>Laboratorio 1</title> </head> <body bgcolor="#0066cc"> <table BORDER= 1 width="100%" border="0" cellspacing="0" cellpadding="0"> <tr bgcolor="#99ccff"> <td width="15"> </td> <td width="745" height="60" colspan="2"><br>Laboratorio 1 <span>| HTML CON TABLA</span></td> <td width="100%">(PRIMERA FILA)</td> </tr> <tr bgcolor="#00CCCC"> <td height="36"><a href="cont.html">INICIO|</a></td> <td width="15"> </td> <td height="36" colspan="2"><a href="frame.html">(2 FILA)</a></td> </tr> <tr bgcolor="#ffffff">
Pag. 30
Ctedra de Laboratorio 1 Bases de Lenguaje HTML Carrera de Programador Universitario - Universidad Nacional de Tucumn <td width="15"> </td> <td width="35"> </td> <td width="710"> <br> <table border="1" cellspacing="0" cellpadding="2" width="610"> <tr> <td colspan="3">1 celda (tabla anidada en una columna)</td> </tr> <tr> <td width="260">2 fila de anidada-1celda</td> <td width="30" rowspan="2"> </td> <td width="320" height="100" rowspan="2"><img src="img1.jpg" alt="foto" width="300" height="250" border="0"></td> </tr> <tr> <td valign="top"><p>Parrafo en una celda</p> <p><strong>Sigue la celda con parrafo</strong></p></td> </tr> </table> <br> <br></td> <td> </td> </tr> <tr> <td width="15"> </td> <td width="35"> </td> <td width="710"> </td> <td width="100%"> </td> </tr> </table> </body> </html> </HTML>
Ejemplo 4: Plantilla con tabla
Pag. 31
Figura 26: Diseo de la plantilla con tablas con border
Figura 27: plantilla con borde de tablas =0
Marcos o Frames
Los marcos permiten dividir la ventana del navegador en varias secciones, cada una con una pgina HTML diferente. Estas secciones o marcos se encuentran soportados o se albergan en una pgina comn llamada pgina de marcos. Esta pgina de marcos define una mapa de las pginas contenidas, no se incorpora el tag <body>. Propiedades: En primer trmino se declara el conjunto de marcos con <FRAMSET>, Tiene como atributos: rows o cols, en el que se define una lista de tamaos separados por comas, ya sea en pixeles o en porcentajes del ancho total de la ventana. Por ejemplo, <frameset cols="10%,80%,10%"> que divide la ventana en Pag. 32 Ing. Ana Nieves Rodrguez
Ctedra de Laboratorio 1 Bases de Lenguaje HTML Carrera de Programador Universitario - Universidad Nacional de Tucumn tres columnas: dos marcos angostos a izquierda y derecha y una marco central. Se puede establecer un valor y luego de la coma un asterisco (*), comodn que denota el espacio sobrante. Luego se define el contenido de cada marco estableciendo el nombre la pagina que ser convocada. Por cada row o cols (fila o columna) declarado, se debe establecer un FRAME. Las etiquetas FRAME deben contener un nombre. <FRAMESET cols=10%,*> <FRAME SRC="archivo.htm" name=uno > <FRAME SRC="archivo2.htm" name=dos> </FRAMESET>
Figura 28: Ejemplo de uso de frame
Entre <frameset> y </frameset> puede haber: etiquetas <frame>, cuyos atributos src contienen los URL que deben mostrarse en esas columnas o filas; otras etiquetas <frameset> para dividir despus las columnas o filas en ms filas o columnas. etiquetas <noframes> y </noframes> para definir una pgina para navegadores que no soportan marcos.
<HTML> <HEAD> <title>Carrera de Programador Universitario FaCEyT</title> </HEAD> <!declaracin de frames tipo fila <FRAMESET ROWS="45,*"> <FRAME SRC="primero.htm" NAME="indi" RESIZE FRAMEBORDER="no"> <FRAME SRC="lista.htm" NAME="con"> </FRAMESET> </HTML>
Figura 29: Ejemplo de frame tipo fila
Etiqueta <FRAMESET> Con porcentajes: Al igual que con las tablas, podemos definir el tamao de un marco como un porcentaje del espacio total disponible. Absolutos: Si ponemos un nmero a secas, el marco correspondiente tendr el tamao especificado en pixels. Sobre el espacio sobrante: Si colocamos un asterisco (*) estaremos indicando que queremos todo el espacio sobrante para ese marco. Podemos poner este smbolo en varios marcos, que se repartirn el espacio equitativamente. Si queremos que uno tenga ms deberemos ponerle al asterisco un nmero
Pag. 33
Ctedra de Laboratorio 1 Bases de Lenguaje HTML Carrera de Programador Universitario - Universidad Nacional de Tucumn delante. As, un marco con un espacio de 3* ser tres veces ms grande que su compaero, que tiene un asterisco slo. Frames anidados Se puede realizar una pgina con frames anidados, esto se usa en caso que quisiramos realizar un formato de pgina con el clsico formato: cabecera, men, contenido y pie de pgina. En el ejemplo que se presenta, se cuenta con los siguientes documentos: Frame.html: contiene el mapa de frames , cabecera.html, men.html, cont.html, pie.html. <HTML> <HEAD><TITLE>Mi segunda pgina con marcos</TITLE></HEAD> <FRAMESET rows="20%,70%,*">  <FRAME NAME="cabecera" SRC="cabecera.html">  <FRAMESET cols="20%,*"> <FRAME NAME="menu" SRC="menu.html"> <FRAME NAME="contenido" SRC="cont.html" frameborder=0>  </FRAMESET>  <FRAME NAME="pie" SRC="pie.html"> <NOFRAMES> <P>Lo siento, pero slo podrs ver esta pgina si tu navegador tiene la capacidad de visualizar marcos.</P> </NOFRAMES>  </FRAMESET> </HTML>
Ejemplo 4: frames anidados
Pag. 34
Figura 30: vista en el browser de frames anidados
Si se quieren eliminar las lneas que separa cada frame: <FRAMESET frameborder="0" rows="20%,70%,*">  <FRAME NAME="cabecera" SRC="cabecera.html">  <FRAMESET frameborder="0" cols="20%,*">
Ejemplo 5: frames sin lnea de separacin
Acceso a otros marcos: <A HREF="pagina.html" TARGET="contenido"> Tambin existen cuatro nombres reservados que podremos utilizar en el parmetro TARGET: o _top: Elimina todos los marcos existente y muestra la nueva pgina en la ventana original sin marcos. o _blank: Muestra la nueva pgina en una ventana nueva y sin nombre del navegador.
Pag. 35
o o
_self : Muestra la nueva pgina en el marco donde est declarado el enlace. _parent: Muestra la nueva pgina en el <FRAMESET> que contiene al marco donde se declara el enlace. En el ejemplo que pusimos de <FRAMESET> anidados, un enlace situado en el marco ejemplo cuyo parmetro TARGET fuese igual a _parent eliminara la separacin entre los marcos menu y contenido y mostrara en ese nuevo marco la nueva pgina.
Pag. 36

Bases de Lenguaje HTML

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Bases de Lenguaje HTML

Hochgeladen von

Copyright:

Verfügbare Formate

Bases de Lenguaje HTML

Ana Nieves Rodrguez de Costilla

Ing. Ana Nieves Rodrguez

Ing. Ana Nieves Rodrguez

Ing. Ana Nieves Rodrguez

Con un editor WYSIWYG

Tabla 1: tabla comparativa entre editores

Estructura de una pgina

Ing. Ana Nieves Rodrguez

Primera Pgina de ejemplo

Ing. Ana Nieves Rodrguez

Figura 1: cdigo HTML en bloc de notas

Figura 2: Guardar como en bloc de notas.

Ing. Ana Nieves Rodrguez

Figura 3: Explorador de windows

Figura 4: Vista en el browser

Tabla 3: saltos de lnea y prrafo

Ing. Ana Nieves Rodrguez

En la siguiente figura se muestra cmo se ver la pgina en el browser:

Figura 6: vista en el browser de salto de lnea

Ing. Ana Nieves Rodrguez

Atributos del tag <body>

Color de Fondo de pgina

Ing. Ana Nieves Rodrguez

Figura 7: Uso de color en body

Formato del texto

Ing. Ana Nieves Rodrguez

Figura 9: Vista en el browser de diferentes niveles de ttulos

<LI> <DIV ALIGN = justificacin>

Ing. Ana Nieves Rodrguez

Figura 10: Combinacin de tags

Figura 11: vista en el browser de combinacin de tags

Ing. Ana Nieves Rodrguez

Figura 12: uso del tag FONT

Figura 13: color en FONT

Ing. Ana Nieves Rodrguez

Figura 14: vista en el browser

Atributos del tag <font>

Ing. Ana Nieves Rodrguez

Figura 15: Uso de DIV

Figura 16: Vista en el browser de uso del DIV

Ing. Ana Nieves Rodrguez

Listas desordenadas (UL)

Ing. Ana Nieves Rodrguez

Figura 17: Ejemplo de listas, vista en el browser y cdigo HTML

Figura 18: vista en el browser de lista con circle

Ing. Ana Nieves Rodrguez

Listas ordenadas (OL)

Figura 19: Ejemplo de Listas ordenadas

Ing. Ana Nieves Rodrguez

Figura 20: Ejemplo de listas ordenadas con nmeros romanos

Ejemplo 1: Lista de definiciones

Ing. Ana Nieves Rodrguez

Figura 21: Insercin de imagenes

Ing. Ana Nieves Rodrguez

Figura 22: Img vista en el browser

Imagen como fondo de pantalla:

Figura 23: Imagen como fondo de pantalla

Ing. Ana Nieves Rodrguez

Figura 24: Vista en el browser de imagen como fondo

Ing. Ana Nieves Rodrguez

Enlaces Hipertextuales (links)

Ing. Ana Nieves Rodrguez

Vnculos hacia marcadores de la misma pgina (anclas)