1. 1)coloresalfanumericos en html(impreso a colores)
2)atributos de la etiqueta<marquee>y</marquee>
3)formularios en html
4)como dividir filas y columnas en html
Primeros Pasos
Primero y ante nada, deberemos abrir el bloc de notas para empezar a introducir las
etiquetas y tags, si no disponemos de algún otro editor de texto.
Como vimos en la primera parte, deberemos ante nada introducir las etiquetas principales
para empezar a crear las páginas, están son <html> , seguida de la etiqueta <head> , donde
poní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ágina
o 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>
BODY
Dentro de este, es donde nosotros insertaremos el color de fondo de la página o la imagen
que quisiéramos, para ello deberemos insertar los parámetros, que son:
Bgcolor="#000000" para darle el color a la página, Background="imagen.gif" para
colocar una imagen de fondo (respete las comillas), deberá de tener la precaución de poner
ambos TAG´s (bgcolor y background), por que si el internauta que nos visita tiene
deshabilitada la opción de imágenes, el fondo de la página aparecerá en color blanco y si
usted 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">
2. Si queremos que la imagen de fondo permanezca estática, deberemos agregar a BODY la
etiqueta bgProperties="fixed".
<body background="imagen.gif" bgcolor="#006666" bgProperties="fixed">
Atributos de body
Estos atributos, nos sirven para darle color a la página o para indicarle al navegador si ya
visito 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 las
demás etiquetas. text="#990000"
alink=Indica el color del link o enlace, en el momento de presionar el mouse
link=Indica el color de los link o enlace que tendrán el vinculo
vlink=Indica el color del link o enlace que ya fue visitado, si no se pone ningún color, por
defecto 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 el
link, el color cambiara a amarillo y después de que se vio el sitio y se vuelve a la pantalla
donde esta el link, el color aparecerá de color verde.
Los colores
Para 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 en
la etiqueta <body>, de la siguiente manera <bodybgcolor="#xxxxxx">, donde xxxxxx es
la 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 negro
Tenga cuidado, que si utiliza el valor numérico, no utilice el valor alfabética, use uno u
otro.
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"
3. 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 su
página, existen programas que lo ayudaran, mostrándole la combinación de los colores ,con
tres barras verticales.
Uno de estos programas es:
COLOR MANIPULATION, http://www.meat.com/software/cmd/ , por cierto es el que
uso por acá, pero existen muchos mas en el mercado.
FUENTES
Para las letras o números, el código de colores se introduce en la etiqueta color, de la
siguiente manera<font color="#xxxxxx">,siendoxxxxxx el código de colores.
PÁRRAFOS
Esta 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, podemos
utilizar la etiqueta <br>, este no lleva ningún parámetro adicional.
ALINEADO
Podremos 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 LINEAS
En las páginas, los saltos de líneas se logran con la etiqueta <BR>, esta siempre pasa de
4. 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 pagina
creada, la vera justificado. Es decir alineada en ambos lados de la página, si usted no
justifica 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 se
desplaza. Por defecto, ocupa todo el ancho de la pantalla, tiene una línea de altura y el texto
se mueve lentamente de derecha a izquierda.
Los atributos WIDHT y HEIGHT permiten controlar el ancho y el alto de la marquesina y
pueden expresarse en pixeles o porcentualmente. El atributo ALIGN permite alinear el
texto que rodea la marquesina, y puede tener los siguientes valores: top (arriba), middle
(centrado) bottom (abajo). Los atributos HSPACE y VSPACE definen la separación
horizontal y vertical del texto con los bordes de la marquesina:
<marquee width="50%" height="60" align="bottom">
... texto ...
</marquee>
5. Formularios
Los formularios interactivos permiten a los autores de páginas Web poner elementos
interactivos en sus páginas, por ejemplo, para recibir mensajes de sus lectores, de forma
similar 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 luego
presiona un botón de envío para enviarla a una dirección URL que se suele dirigir a una
dirección de correo electrónico o a un script dinámico Web como PHP, ASP o CGI.
La etiqueta FORM
Los formularios están delimitados con la etiqueta <FORM> ...</FORM>, que permite
reunir varios elementos de formulario, como botones y casillas de texto y que debe poseer
los 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 codifican
los datos del formulario. De cualquier forma, esto no necesita especificarse, ya que el valor
predeterminado (application/x-www-form-urlencoded) es el único valor válido. El atributo
opcional ACCEPT se usa para establecer tipos MIME para los datos que el formulario
puede 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">
6. Dentro de la etiqueta FORM
La etiqueta FORM actúa como una especie de contenedor para almacenar elementos que
permiten al usuario seleccionar o introducir datos. Todos los datos se enviarán a la
dirección URL indicada en el atributo ACTION de la etiqueta FORM, por el método
indicado 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 elementos
interactivos 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>
7. <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 celda
4 6
5
7 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.
8. 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 3
4 5 6
7 8 9
