1 / 38

Laboratorio 1

Laboratorio 1. Año 2010 Vínculos, Listas , Tablas. Partes de una instrucción HTML. Se compone de tres partes: Elemento: <FONT Atributo: COLOR= Valor: “RED”> Cierra tag : </FONT>. Body. <BODY BGCOLOR=“COLOR”> COLOR: RED, GREY, GREEN, WHITE, ETC

gaerwn
Download Presentation

Laboratorio 1

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Laboratorio 1 Año 2010 Vínculos, Listas, Tablas

  2. Partes de una instrucción HTML • Se compone de tres partes: • Elemento: <FONT • Atributo: COLOR= • Valor: “RED”> • Cierra tag: </FONT> Ing. Ana Rodríguez - Año 2009

  3. Body • <BODY BGCOLOR=“COLOR”> • COLOR: • RED, GREY, GREEN, WHITE, ETC • #RRVVAA (R=rojo, V=verde, A=azul) en hexadecimal (0-F) • <BODY BACKGROUND=“fondo.gif”> • <BODY BACKGROUND=“img/fondo.gif”> • <BODY BACKGROUND=“fondo.gif” BGPROPERTIES=“FIXED”> Ing. Ana Rodríguez - Año 2010

  4. BODY • MARGENES • leftmargin (margen izquierdo) y topmargin (margen superior). • En algunos navegadores: marginwidth (ancho del margen) y marginheight (altura del margen). <body leftmargin="20" topmargin="0" marginwidth="20" marginheight="0" > Ing. Ana Rodríguez - Año 2009

  5. OTROS ATRIBUTOS DE BODY Podemos cambiar el color del texto con el atributo TEXT LINK: color de los enlaces VLINK: color de los enlaces ya visitados por el usuario Ing. Ana Rodríguez - Año 2009

  6. Texto • Tamaño • <FONT SIZE= “x”>número</FONT> • Tipo • <FONT FACE= “TIPO”>arial, courier, etc</FONT> • Color • <FONT COLOR=“RED”>red, blue, etc</FONT> • Sangría • <BLOCKQUOTE> texto </BLOCKQUOTE> Ing. Ana Rodríguez - Año 2009

  7. Fuente <fontface="Helvetica,Arial,Times" size=7 color=navy> Mensaje de Prueba </font> Ing. Ana Rodríguez - Año 2009

  8. TEXTO • Alineación: • align=left para alinear a la izquierda • align=right para alinear a la derecha • align=center para centrar el texto • Ejemplo dentro de un párrafo: • <p align="left">alineamos el texto a la izquieda</p> • <p align=“right">alineamos el texto a la derecha</p> Ing. Ana Rodríguez - Año 2009

  9. DIV • <DIV align= • Left • Center • Right • </DIV> Ing. Ana Rodríguez - Año 2009

  10. Líneas horizontales • <hr> (no necesita cierre) • Atributos: • Width: largo de la línea con un cierto número de pixel  o un porcentaje del documento • Size: ancho de la línea • Noshade: fondo de la línea Ing. Ana Rodríguez - Año 2009

  11. Listas <tipo_lista> <LI>Primer elemento <LI>Segundo elemento </tipo_lista> • tipo_lista puede ser una de las siguientes: DIR, DL, MENU, OL y UL. Ing. Ana Rodríguez - Año 2009

  12. Listas desordenadas <UL> <LI>Primer elemento <LI>Segundo elemento </UL> Muestra: • Primer elemento • Segundo elemento Ing. Ana Rodríguez - Año 2009

  13. Listas desordenadas Atributos type=“circle” type=“square” type=“disc” Ejemplo Ing. Ana Rodríguez - Año 2009

  14. Listas Ordenadas <OL> <LI>Primer elemento <LI>Segundo elemento </OL> Muestra: • Primer elemento • Segundo elemento Ing. Ana Rodríguez - Año 2009

  15. Listas Ordenadas Atributos: type=“1” type=“a” ; type=“A” type=“i” ; type=“I” START = “num” VALUE = “num” (atributo de LI) Ejemplo Ing. Ana Rodríguez - Año 2009

  16. 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> • Muestra Ing. Ana Rodríguez - Año 2009

  17. Insertar Imágenes • Páginas de imágenes: http://www.gifmania.com • Incorporar imagen • <imgsrc="ejecutiva.gif"> • <imgsrc=“img/ejecutiva.gif"> • Alto y ancho de imagen: • <imgsrc="ejecutiva.gif" WIDTH="167" HEIGHT="109"> Ing. Ana Rodríguez - Año 2009

  18. IMAGENES • Bordes: • <imgborder= “2” src="ejecutiva.gif" WIDTH="167" HEIGHT="109”> • TEXTO ALTERNATIVO • <imgborder="5" src="ejecutiva.gif" WIDTH="250" HEIGHT="90"  ALT="secretaria “> Ing. Ana Rodríguez - Año 2009

  19. Enlaces • Un enlace es una zona de texto o gráficos que si son seleccionados nos trasladan a otro documento de hipertexto o a otra posición dentro del documento actual. • Tag: <A>…</A> • El texto se visualizará de manera distinta en el navegador. • Al pulsar sobre el enlace, seremos enviados al documento que apuntaba el enlace. Ing. Ana Rodríguez - Año 2009

  20. <A HREF="direccion">Click</A> • dirección en formato URL (Uniform Resource Locator) • Una URL nos indica • una dirección de Internet • el servicio que esperamos nos ofrezca el servidor al que corresponde la dirección. • Tiene el siguiente formato: servicio://máquina:puerto/ruta/fichero@usuario Ing. Ana Rodríguez - Año 2009

  21. servicio://máquina:puerto/ruta/fichero@usuario • http: Es el servicio invocado para transmitir páginas web • https: usa de técnicas de encriptación para proteger los datos que intercambiemos. • ftp: Permite trasmitir ficheros desde servidores de ftp anónimo. • mailto: Para poder mandar un mensaje. Por ejemplo: mailto:pepe@herrera.unt.edu.ar. • News: Para poder acceder a foros de discusión. 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. Ing. Ana Rodríguez - Año 2009

  22. servicio://máquina:puerto/ruta/fichero@usuario • La dirección de la máquina puede ser, o bien una serie de cuatro números entre 0 y 255 (123.3.5.65) o bien algo más 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. Ing. Ana Rodríguez - Año 2009

  23. servicio://máquina:puerto/ruta/fichero@usuario • La ruta es una serie de directorios separados por el símbolo /, que es el utilizado en UNIX (el sistema operativo más extendido en los servidores de Internet). • Cuando queremos acceder a un fichero situado en la misma máquina que la página 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. Ing. Ana Rodríguez - Año 2009

  24. ENLACES • CON IMÁGENES: • <A HREF="http://www.secretariaplus.com"> <imgsrc="ejecutivaanimada.gif"> </A> Ing. Ana Rodríguez - Año 2009

  25. Anclas (Marcador) • Dentro del propio documento: • <A NAME=“ancla”> • Para convocarla: • <A HREF="#ancla">Ejemplo</A> • Ancla hacia una parte de otro documento: • <A HREF="enlaces.html#ancla">Anclado</A> Ing. Ana Rodríguez - Año 2009

  26. TABLAS La mayoría de las páginas importantes se estructuran utilizando tablas ocultas. • Tags: • <TABLE>…</TABLE> • BORDES • BORDER=“0” (Invisible) • TAMAÑO • WIDTH="100%“ • WIDTH= “100” en pixeles Ing. Ana Rodríguez - Año 2009

  27. TABLAS • FILAS • <TR>…</TR> • COLUMNAS • <TD>…</TD> • Las columnas deben ir dentro de las filas • Se puede establecer el tamaño de las columnas: • <tdwith=“10%”> Ing. Ana Rodríguez - Año 2009

  28. Tablas <TABLE> <TR> <TD>1.1</TD> <TD>1.2</TD> <TD>1.3</TD> </TR> <TR> <TD>2.1</TD> <TD>2.2</TD> <TD>2.3</TD> </TR> </TABLE> Ing. Ana Rodríguez - Año 2009

  29. Tablas • BORDER: borde que se dibujará alrededor de las celdas. Por defecto es cero, lo que significa que no dibujará borde alguno. • CELLSPACING: número de pixels que separarán las celdas. • CELLPADDING: número 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) Ing. Ana Rodríguez - Año 2009

  30. Celdas • ALIGN: Alinea el contenido de la celda horizontalmente a izquierda (LEFT), derecha (RIGHT) o centro (CENTER). • VALIGN: Alinea el contenido de la celda verticalmente arriba (TOP), abajo (BOTTOM) o centro (MIDDLE). • COLSPAN: número 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 parámetro). Es por defecto uno. Si se pone igual a cero, se unirán todas las celdas que queden a la derecha. • ROWSPAN: número de celdas de la columna situadas debajo de la actual que se unen a ésta Ing. Ana Rodríguez - Año 2009

  31. COLOR DE CELDAS EJEMPLO: <tableborder="1" cellpadding="0" cellspacing="0" width="50%"><tr><tdwidth="50%" bgcolor="red"></td><tdwidth="50%" bgcolor="blue"></td></tr><tr><tdwidth="50%"></td><tdwidth="50%"></td></tr></table> Ing. Ana Rodríguez - Año 2009

  32. COLOR DE TABLAS • Color de FONDO: • <table border="1“ bgcolor="yellow"> Ing. Ana Rodríguez - Año 2009

  33. Frames • Un marco (o frame) es una ventana independiente dentro de la ventana general del navegador. • Cada marco tendrá sus bordes y sus propias barras de desplazamiento. • Así cada página se dividirá en la práctica en varias páginas independientes. Ing. Ana Rodríguez - Año 2009

  34. Fames <HTML> <HEAD> <TITLE>Mi primera página con marcos</TITLE> </HEAD> <FRAMESET COLS="20%,80%"> <FRAME NAME="indice" SRC="kafka.htm"> <FRAME NAME="principal" SRC="hiperv.htm"> <NOFRAMES> <P>Lo siento, pero sólo podrás ver esta página si tu navegador tiene la capacidad de visualizar marcos.</P> </NOFRAMES> </FRAMESET> </HTML> Ing. Ana Rodríguez - Año 2009

  35. Etiqueta <FRAMESET> • Con porcentajes: Al igual que con las tablas, podemos definir el tamaño de un marco como un porcentaje del espacio total disponible. • Absolutos: Si ponemos un número a secas, el marco correspondiente tendrá el tamaño 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 símbolo en varios marcos, que se repartirán el espacio equitativamente. Si queremos que uno tenga más deberemos ponerle al asterisco un número delante. Así, un marco con un espacio de 3* será tres veces más grande que su compañero, que tiene un asterisco sólo. Ing. Ana Rodríguez - Año 2009

  36. Frames anidados <HTML> <HEAD> <TITLE>Mi segunda página con marcos</TITLE></HEAD> <FRAMESET COLS="20%,80%"> <FRAME NAME="indice" SRC="kafka.htm"> <FRAMESET ROWS="20%,80%"> <FRAME NAME="principal" SRC="hiperv.htm"> <FRAME NAME="principal" SRC="tabla.htm"> <NOFRAMES> <P>Lo siento, pero sólo podrás ver esta página si tu navegador tiene la capacidad de visualizar marcos.</P> </NOFRAMES> </FRAMESET> </FRAMESET> </HTML> Ing. Ana Rodríguez - Año 2009

  37. Etiqueta <FRAME> • NAME: Asigna un nombre a un marco para que después podamos referirnos a él. • SRC: Indica la dirección del documento HTML que ocupará el marco. • SCROLLING: barras de desplazamiento del marco. Su valor es por defecto AUTO, que deja al navegador la decisión. Las otras opciones que tenemos son YES y NO. • NORESIZE: el usuario no podrá cambiar de tamaño el marco. • FRAMEBORDER: si lo igualamos a cero se eliminará el borde con todos los marcos contiguos que tengan también este valor a cero. • MARGINWIDTH: Permite cambiar los márgenes horizontales dentro de un marco. Se representa en pixels. • MARGINHEIGHT: Igual al anterior pero con márgenes verticales. Ing. Ana Rodríguez - Año 2009

  38. Acceso a otros marcos <A HREF="pagina.html" TARGET="principal"> • También existen cuatro nombres reservados que podremos utilizar en el parámetro TARGET: • _top • Elimina todos los marcos existente y muestra la nueva página en la ventana original sin marcos. • _blank • Muestra la nueva página en una ventana nueva y sin nombre del navegador. • _self • Muestra la nueva página en el marco donde está declarado el enlace. • _parent • Muestra la nueva página en el <FRAMESET> que contiene al marco donde se declara el enlace. En el ejemplo que pusimos de <FRAMESET> anidados, una enlace situado en el marco ejemplo cuyo parámetro TARGET fuese igual a _parent eliminaría la separación entre los marcos ejemplo y principal y mostraría en ese nuevo marco la nueva página. Ing. Ana Rodríguez - Año 2009

More Related