Codigos HTML Lenguaje IV

4,152 views

Published on

Published in: Business
  • Be the first to comment

  • Be the first to like this

Codigos HTML Lenguaje IV

  1. 1. IUTE - MÉRIDA <ul><li>LENGUAJE DE PROGRAMACIÓN IV </li></ul><ul><li>Prof: Duberlis González </li></ul><ul><li>CODIGOS HTML </li></ul><ul><li>(Continuación) </li></ul><ul><li>Octubre 2007 </li></ul>
  2. 2. CODIGOS HTML Para disponer de una referencia en de una pagina y poder desplazarnos dentro de una pagina de gran tamaño, se utiliza anclas, en estos casos usamos la siguiente sintaxis. <a name=&quot;nombreancla&quot;></a> Un ancla se la define en una parte de la página que queremos que el operador llegue a partir de un hipervínculo. Ahora la sintaxis para ir a un ancla desde un hipervínculo es la siguiente: <a href=&quot;#nombreancla&quot;>Introducción</a><br> Vemos que en la propiedad href indicamos el nombre del ancla. También es perfectamente válido la llamada a anclas desde otra página (no importa si se encuentra en el mismo sitio o en otro) Debemos conocer el nombre de la página a llamar y el nombre del ancla , luego la sintaxis para la llamada al ancla es: <a href=&quot;pagina2.html#introduccion&quot;>Introducción</a>
  3. 3. Tabla y combinación de celdas . <ul><li>En algunas situaciones se necesita que una celda ocupe el lugar de </li></ul><ul><li>dos o más celdas en forma horizontal o vertical, para estos casos </li></ul><ul><li>el elemento td o th dispone de dos propiedades llamadas rowspan y </li></ul><ul><li>colspan. </li></ul><ul><li>A estas propiedades se les asigna un valor entero a partir de 2. </li></ul><ul><li>Si queremos que una celda ocupe tres columnas luego inicializamos la </li></ul><ul><li>propiedad rowspan con el valor 3: </li></ul><ul><li><td colspan=&quot;3&quot;>Facturación de los últimos tres meses</td> </li></ul><ul><li>Si por el contrario queremos que una celda se extienda a nivel de filas </li></ul><ul><li>luego hacemos: </li></ul><ul><li><td rowspan=&quot;3&quot;>Secciones</td> </li></ul>
  4. 4. Ejemplo de combinación de celdas en tablas <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><table border=&quot;1&quot;> </li></ul><ul><li><tr> </li></ul><ul><li><th rowspan=&quot;4&quot;>Recursos</th><th </li></ul><ul><li>colspan=&quot;4&quot;>Facturación de los últimos tres meses</th> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td>Discos Duros</td><td>23000</td><td>27200</td><td>26000</td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td>CPU</td><td>73000</td><td>67300</td><td>51000</td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td>Monitores</td><td>53000</td><td>72000</td> </li></ul><ul><li><td>88000 </li></ul><ul><li></td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  5. 5. Comentarios dentro de una pagina Otro uso muy habitual cuando estamos desarrollando la página si queremos deshabilitar una parte del código podemos encerrarla entre los caracteres de comentarios. La sintaxis para definir un comentario es: <!-- Aquí va el comentario --> Es obligatorio luego del caracter de menor < disponer el signo de admiración y los dos guiones seguidos. Cerramos el comentario con dos guiones y el signo de mayor >
  6. 6. FONDOS Fondos con un color uniforme Se consigue añadiendo el comando BGCOLOR a la etiqueta <BODY> (situada al principio del documento), de la siguiente manera: <BODY BGCOLOR=&quot;#XXYYZZ&quot;> Los colores primarios son: #FF0000 - Rojo #00FF00 - Verde #0000FF - Azul Otros colores son: #FFFFFF - Blanco #000000 - Negro #FFFF00 - Amarillo
  7. 7. Colores del texto y de los enlaces <ul><li>Si no se variasen los colores habituales del texto y de los enlaces (negro y azul, respectivamente), podría ocurrir que su lectura contra un fondo oscuro fuese muy dificultosa, o incluso imposible, si el fondo fuese precisamente negro o azul. Para evitar esto, se pueden escoger los colores del texto y de los enlaces, añadiendo a la etiqueta (si se desea) los siguientes comandos: </li></ul><ul><li>TEXT - color del texto LINK - color de los enlaces VLINK - color de los enlaces visitados ALINK - color de los enlaces activos (el que adquieren en el momento de ser pulsados) </li></ul><ul><li>Los códigos de los colores son los mismos que los que se han visto anteriormente. La etiqueta, con todas sus posibilidades, sería: </li></ul><ul><li>< BODY BGCOLOR=&quot;#XXYYZZ&quot; TEXT=&quot;#XXYYZZ&quot; LINK=&quot;#XXYYZZ&quot; VLINK=&quot;#XXYYZZ&quot; ALINK=&quot;#XXYYZZ&quot;> </li></ul>
  8. 8. Cambio del color de una parte del texto una etiqueta de color de la fuente con la que se puede cambiar sólo una parte del texto: <FONT COLOR=&quot;#FF0000&quot;> Este texto es de color rojo </FONT> Fondos con una imagen El fondo de una página puede ser también una imagen, ya sea en formato GIF o JPEG. Esta imagen se repite por toda la página, de una manera análoga al tapiz de Windows. La estructura de la etiqueta es: <BODY BACKGROUND=&quot;imagen.gif&quot;>
  9. 9. Alineación y dimensionado de imágenes Alineación de las imágenes Esto se consigue con las extensiones de la etiqueta ALIGN , alineada a la derecha , se ha obtenido con la etiqueta: <IMG SRC=&quot;doom.gif&quot; ALIGN=RIGHT> alineada a la izquierda , se ha obtenido con la etiqueta: <IMG SRC=&quot;doom2.gif&quot; ALIGN=LEFT> Dimensionando la imagen Estos comandos son WIDTH (ancho) y HEIGHT (alto) . Por ejemplo, para la imagen isla.gif <IMG SRC=&quot;isla.gif&quot; WIDTH=120 HEIGHT=94>
  10. 10. Frames Se usa para dividir la pantalla en diferentes zonas o ventanas que pueden actuar independientemente de otras, como si se tratara de paginas diferentes Definición de los frames Es un documento parecido a los que conocíamos hasta ahora. La diferencia está en que en vez de utilizar la etiqueta BODY, que sirve normalmente para delimitar lo que se va a ver en la pantalla, se hace uso de la etiqueta FRAMESET ( definir los frames ). En este caso, con la etiqueta <FRAMESET COLS=&quot;20%, 80%&quot;> se define que va a haber dos frames y que van a ir en columnas . Si hubiéramos querido que fueran en filas , habríamos puesto ROWS (filas, en inglés). Ya se ha definido el número de frames, su distribución y su tamaño, pero falta por definir el contenido de cada frame. Esto se hace con las etiquetas: <FRAME SRC=&quot;mipagind.html&quot;> <FRAME SRC=&quot;mipagpre.html&quot; NAME=&quot;principal&quot;>
  11. 11. Ejemplo: <HTML> <HEAD> <TITLE>Mi pagina con frames</TITLE> </HEAD> <FRAMESET COLS=&quot;20%, 80%&quot;> <FRAME SRC=&quot;mipagind.html&quot;> <FRAME SRC=&quot;mipagpre.html&quot; NAME=&quot;principal&quot;> </FRAMESET> </HTML>

×