Compu
Upcoming SlideShare
Loading in...5
×
 

Compu

on

  • 374 views

 

Statistics

Views

Total Views
374
Views on SlideShare
374
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft Word

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Compu Compu Document Transcript

  • 1)coloresalfanumericos en html(impreso a colores)2)atributos de la etiqueta<marquee>y</marquee>3)formularios en html4)como dividir filas y columnas en htmlPrimeros PasosPrimero y ante nada, deberemos abrir el bloc de notas para empezar a introducir lasetiquetas y tags, si no disponemos de algún otro editor de texto.Como vimos en la primera parte, deberemos ante nada introducir las etiquetas principalespara empezar a crear las páginas, están son <html> , seguida de la etiqueta <head> , dondeponíamos él titulo entre la etiquetas <title></title>y cerrábamos solo </head>.Tenga cuidado de no cerrar la etiqueta </html>, por que no se vera nada en la página.Ahora a continuación, colocamos la etiqueta <body>, donde introduciremos nuestra páginao sea será lo que verán las personan que entren en nuestra página.Hasta ahora nos quedara así:<html><head><title>Nombre de la página</title></head><body></body></html>BODYDentro de este, es donde nosotros insertaremos el color de fondo de la página o la imagenque quisiéramos, para ello deberemos insertar los parámetros, que son:Bgcolor="#000000" para darle el color a la página, Background="imagen.gif" paracolocar una imagen de fondo (respete las comillas), deberá de tener la precaución de ponerambos TAG´s (bgcolor y background), por que si el internauta que nos visita tienedeshabilitada la opción de imágenes, el fondo de la página aparecerá en color blanco y siusted tiene letras muy claras como en estas páginas, la misma no se vera.Con respecto a lo anterior, veremos que body se modificara por:<body background="imagen.gif" bgcolor="#006666">
  • Si queremos que la imagen de fondo permanezca estática, deberemos agregar a BODY laetiqueta bgProperties="fixed".<body background="imagen.gif" bgcolor="#006666" bgProperties="fixed">Atributos de bodyEstos atributos, nos sirven para darle color a la página o para indicarle al navegador si yavisito alguna de nuestras páginas.Estos atributos son:text=Cambia el color de todo el texto de la página. El código de colores es igual que lasdemás etiquetas. text="#990000"alink=Indica el color del link o enlace, en el momento de presionar el mouselink=Indica el color de los link o enlace que tendrán el vinculovlink=Indica el color del link o enlace que ya fue visitado, si no se pone ningún color, pordefecto el color es púrpura.<body bgcolor="#0000ff" text="#ff5500" alink="#ffff00" link="#ff0000"vlink="#00ff00">En este caso, aparecerá en pantalla el link con un color rojo, en el momento de presionar ellink, el color cambiara a amarillo y después de que se vio el sitio y se vuelve a la pantalladonde esta el link, el color aparecerá de color verde.Los coloresPara una pantalla de fondo o para las letra se podrá usar el código de colores.Como ya hemos dicho anteriormente, para una pantalla de fondo deberá de ser colocado enla etiqueta <body>, de la siguiente manera <bodybgcolor="#xxxxxx">, donde xxxxxx esla combinación de colores.Los colores podremos modificarlos, cambiando las xxxxxx por números y letras.Estos van Desde el mas oscuro al mas claro, en el siguiente orden: 0123456789ABCDEF,siendo "#000000", el color blanco y "#FFFFFF" el color negroTenga cuidado, que si utiliza el valor numérico, no utilice el valor alfabética, use uno uotro.Par que tenga una idea de como combinar colores, les presento la siguiente tabla. Colores con valores Código de colores alfanuméricos por nombre bgcolor="#00ddff" bgcolor="aqua" bgcolor="#0000ff" bgcolor="blue" bgcolor="#000099" bgcolor="navy" bgcolor="#9900FF" bgcolor="purple" bgcolor="#FF00FF" bgcolor="fucshia"
  • bgcolor="#990000" bgcolor="maroon" bgcolor="#FF0000" bgcolor="red" bgcolor="#00FF00" bgcolor="lima" bgcolor="#009900" bgcolor="green" bgcolor="#99AA00" bgcolor="teal" bgcolor="#999900" bgcolor="olive" bgcolor="#CCCCCC" bgcolor="silver" bgcolor="#666666" bgcolor="gray" bgcolor="#000000" bgcolor="black" bgcolor="#ffffff" bgcolor="white"Para que no tenga que perder tiempo probando que color es mas conveniente para supágina, existen programas que lo ayudaran, mostrándole la combinación de los colores ,contres barras verticales.Uno de estos programas es:COLOR MANIPULATION, http://www.meat.com/software/cmd/ , por cierto es el queuso por acá, pero existen muchos mas en el mercado.FUENTESPara las letras o números, el código de colores se introduce en la etiqueta color, de lasiguiente manera<font color="#xxxxxx">,siendoxxxxxx el código de colores.PÁRRAFOSEsta etiqueta, nos sirve para introducir textos, para ello introducimos o bien <p></p>;<div></div>La diferencia entre uno y el otro, es que con la etiqueta <p>, crea un espacio entre líneas,que no lo hace<div>Si queremos pasar de una línea a la otra, pero sin dejar un espacio entre líneas, podemosutilizar la etiqueta <br>, este no lleva ningún parámetro adicional.ALINEADOPodremos alinear los párrafos a nuestro gusto de la siguiente manera:<p align="center"> = Centrado del texto<p align="right"> = Alineado a la derecha<p align="left"> = Alineado a la izquierda<p align="justify"> = Justifica la pagina, muchos exploradores no lo reconocen.También pueden ser utilizados con <DIV>.Coloque estos códigos en el bloc de notas, y vera como queda.SALTO DE LINEASEn las páginas, los saltos de líneas se logran con la etiqueta <BR>, esta siempre pasa de
  • una línea a la otra sin dejar espacios en blanco.Si lo que queremos es hacer un salto de línea mayor, para ello utilizamos la etiqueta <P>,esto creara un salto de línea con un espacio entre línea y línea.<html><head><title>Primera página</title></head><bodybgcolor="#ff0000" bgProperties="fixed"><div align=justify><font color="#0000ff">Cuando usted vea este texto en la paginacreada, la vera justificado. Es decir alineada en ambos lados de la página, si usted nojustifica la página, esta aparecerá como un camino de hormigas.<br>No olvide que en el block de notas, deberá guardarlo como un archivo HTM o HTML,de lo contrario el explorador no lo recocerá, puede ponerle, por ejemplo :<br>prueba.htm</div><p align=center>Texto Centrado</p><div align=right>Texto a la derecha</div></body></html>La etiqueta <MARQUEE></MARQUEE> crea una marquesina cuyo contenido sedesplaza. Por defecto, ocupa todo el ancho de la pantalla, tiene una línea de altura y el textose mueve lentamente de derecha a izquierda.Los atributos WIDHT y HEIGHT permiten controlar el ancho y el alto de la marquesina ypueden expresarse en pixeles o porcentualmente. El atributo ALIGN permite alinear eltexto que rodea la marquesina, y puede tener los siguientes valores: top (arriba), middle(centrado) bottom (abajo). Los atributos HSPACE y VSPACE definen la separaciónhorizontal y vertical del texto con los bordes de la marquesina:<marquee width="50%" height="60" align="bottom">... texto ...</marquee>
  • FormulariosLos formularios interactivos permiten a los autores de páginas Web poner elementosinteractivos en sus páginas, por ejemplo, para recibir mensajes de sus lectores, de formasimilar a las cartas de respuestas que se encuentra en algunas revistas.El lector escribe la información rellenando campos o haciendo clic sobre botones, y luegopresiona un botón de envío para enviarla a una dirección URL que se suele dirigir a unadirección de correo electrónico o a un script dinámico Web como PHP, ASP o CGI.La etiqueta FORMLos formularios están delimitados con la etiqueta <FORM> ...</FORM>, que permitereunir varios elementos de formulario, como botones y casillas de texto y que debe poseerlos siguientes atributos: METHOD indica cómo se enviarán las respuestas "POST" es el valor que envía los datos al agente de procesamiento almacenándolos en el cuerpo del formulario, en tanto que "GET" envía los datos agregándolos a la dirección URL y separándolos de la dirección con un signo de interrogación (para aprender más sobre los métodos POST y GET, consulte el artículo sobre protocolo HTTP) ACTION indica la dirección a la que se enviará la información (un script CGI o dirección de correo electrónico (mailto:dirección_de_correo_e@equipo))Un atributo opcional de la etiqueta FORM es ENCTYPE, que especifica cómo se codificanlos datos del formulario. De cualquier forma, esto no necesita especificarse, ya que el valorpredeterminado (application/x-www-form-urlencoded) es el único valor válido. El atributoopcional ACCEPT se usa para establecer tipos MIME para los datos que el formulariopuede enviar.Esta es la sintaxis para la etiqueta FORM:<FORM METHOD="POST" o "GET" ACTION="url" ENCTYPE="x-www-form-urlencoded">... </FORM>Aquí hay algunosejemplos de lasetiquetas FORM:<FORM METHOD=POST ACTION="mailto:webmaster@commentcamarche.net"><FORM METHOD=GET ACTION="http://www.commentcamarche.net/cgi-bin/script.cgi">
  • Dentro de la etiqueta FORMLa etiqueta FORM actúa como una especie de contenedor para almacenar elementos quepermiten al usuario seleccionar o introducir datos. Todos los datos se enviarán a ladirección URL indicada en el atributo ACTION de la etiqueta FORM, por el métodoindicado en el atributo METHOD.Se puede insertar cualquier elemento HTML en una etiqueta FORM (como texto, botones,tablas y enlaces), pero los elementos interactivos son los más interesantes. Estos elementosinteractivos son: La etiqueta INPUT: Todos los botones y casillas de texto La etiqueta TEXTAREA: una casilla de texto La etiqueta SELECT: una lista de opciones múltiples Con HTML 4 existen dos etiquetas que nos permiten agrupar filas o columnas de una tabla, para crear agrupaciones a las que se les puede definir un estilo de una sola vez, y no fila a fila o celda a celda. Estas etiquetas son las siguientes: <TBODY>: Para agrupar conjuntos de filas. <COLGROUP>: Para agrupar conjuntos de columnas. Ambas etiquetas tienen soporte a partir de HTML 4, por lo tanto están disponibles en todos los navegadores modernos más comúnmente utilizados. Agrupar filas con <TBODY> Hacer grupos de filas nos sirve para especificar estilos a determinadas filas de la tabla, de una sola vez. El modo de uso es el siguiente: <tablecellspacing="4" cellpadding="4" border="2"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tbodyalign="center" bgcolor="#ff8800" valign="top"> <tr> <td>4</td> <td> Esta es una celda <br> 5 </td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td>
  • <td>9</td> </tr> </tbody> </table> Como se puede ver, se tiene una tabla de 3 filas. Se ha marcado un grupo de dos filas con TBODY, justamente las dos últimas. Para esas filas hemos definido, mediante los atributos de la etiqueta TBODY, un centrado, un color de fondo y una alineación vertical superior. Los atributos que podríamos utilizar con la etiqueta TBODY son un grupo reducido de los que podríamos asignar a etiquetas TR o TD: align, bgcolor y valing, class, id, además de manejadores de eventos. Podemos ver cómo se mostraría esta tabla:1 2 3 Esta es una celda4 6 57 8 9 De manera similar, se pueden asignar atributos de hojas de estilo en cascada, utilizando el atributo HTML style, como se puede ver a continuación: <tablecellspacing="2" cellpadding="2" border="2"> <tbodystyle="font-size:150%;"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </tbody> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table> Aunque hay que decir que el grupo de atributos de hojas de estilo que son interpretados, cuando los colocamos en TBODY, es bastante reducido. Internet Explorer da mejor variedad de atributos aceptados.
  • Agrupar columnas con <COLGROUP> Veamos ahora cómo se pueden agrupar varias filas con la etiqueta <COLGROUP>. El objetivo es básicamente el mismo que el de agrupar columnas, es decir, definir de una sola vez estilos específicos para un determinado conjunto de columnas de una tabla. El uso de la etiqueta, no obstante, es un poco diferente. <tablecellspacing="2" cellpadding="2" border="2"> <colgroupspan=2 width="40"> </colgroup> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table> Como se puede ver, COLGROUP se utiliza después de abrir la tabla y antes de empezar a meter los contenidos de filas y celdas. El atributo span indica el número de columnas que se desean agrupar, empezando por la primera. En nuestro ejemplo se han agrupado las dos primeras columnas. Los otros atributos que podemos colocar en COLGROUP son los siguientes: align, id, class, style, valign, width y manejadores de eventos Javascript. Aunque Internet Explorer acepta otros atributos como bgcolor. El ejemplo de colgroup se muestra a continuación:1 2 34 5 67 8 9