Laboratorio 1
This presentation is the property of its rightful owner.
Sponsored Links
1 / 38

Laboratorio 1 PowerPoint PPT Presentation


  • 55 Views
  • Uploaded on
  • Presentation posted in: General

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

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Laboratorio 1

Laboratorio 1

Año 2010

Vínculos, Listas, Tablas


Partes de una instrucci n html

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


Laboratorio 1

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


Laboratorio 1

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


Otros atributos de body

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


Texto

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


Fuente

Fuente

<fontface="Helvetica,Arial,Times" size=7 color=navy>

Mensaje de Prueba

</font>

Ing. Ana Rodríguez - Año 2009


Texto1

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


Laboratorio 1

DIV

  • <DIV align=

    • Left

    • Center

    • Right

  • </DIV>

Ing. Ana Rodríguez - Año 2009


L neas horizontales

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


Listas

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


Listas desordenadas

Listas desordenadas

<UL>

<LI>Primer elemento

<LI>Segundo elemento

</UL>

Muestra:

  • Primer elemento

  • Segundo elemento

Ing. Ana Rodríguez - Año 2009


Listas desordenadas1

Listas desordenadas

Atributos

type=“circle”

type=“square”

type=“disc”

Ejemplo

Ing. Ana Rodríguez - Año 2009


Listas ordenadas

Listas Ordenadas

<OL>

<LI>Primer elemento

<LI>Segundo elemento

</OL>

Muestra:

  • Primer elemento

  • Segundo elemento

Ing. Ana Rodríguez - Año 2009


Listas ordenadas1

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


Lista de definiciones

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


Insertar im genes

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


Imagenes

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


Enlaces

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


A href direccion click a

<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:[email protected]

Ing. Ana Rodríguez - Año 2009


Servicio m quina puerto ruta fichero@usuario

servicio://máquina:[email protected]

  • 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:[email protected]

  • 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


Servicio m quina puerto ruta fichero@usuario1

servicio://máquina:[email protected]

  • 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


Servicio m quina puerto ruta fichero@usuario2

servicio://máquina:[email protected]

  • 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


Enlaces1

ENLACES

  • CON IMÁGENES:

    • <A HREF="http://www.secretariaplus.com"> <imgsrc="ejecutivaanimada.gif"> </A>

Ing. Ana Rodríguez - Año 2009


Anclas marcador

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


Tablas

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


Tablas1

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


Tablas2

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


Tablas3

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


Celdas

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


Color de celdas

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


Color de tablas

COLOR DE TABLAS

  • Color de FONDO:

    • <table border="1“ bgcolor="yellow">

Ing. Ana Rodríguez - Año 2009


Frames

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


Fames

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


Etiqueta frameset

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


Frames anidados

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


Etiqueta frame

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


Acceso a otros marcos

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


  • Login