 |
Tutorial De HTML.
LA PROPIEDAD <body>
Dentro de la etiqueta body podras dar un formato general a tu pagina Web, es decir le podras dar un color de fondo<body bgcolo=#color que quieras en Hexadecimal>
el tamaño de letra <body font size=10pt>
el color de las mismas <body text=#color>
Modificar el color de los enlaces <body link=#color>
Para los enlaces activos <body alink=#color>
Para los enlaces visitados <body vlin=#color>
Un ejemplo seria:
| <body bgcolor="#ffffff" text="#000000" link="red" alink="#673305" vlink="blue"> |
Como veras hay colores predefinidos en ingles, esto se usa en lugar de usar la tabla de colores hexadecimales. Lo recomendable no es usarlos ya que te limitan a la hora de buscar combinaciones de colores.
SONIDO DE FONDO
Es cierto, puedes agregar musica (en formato midi te recomiendo por el tamaño
del archivo, al igual que las imagenes)
Esta practica es otra que cada vez se usa menos, ya que puede llegar a ser muy
molesto para tus visitantes y ademas enlentece la descarga de tu pagina. Si a
pesar de esto que te comente aun quieres usar el sonido de fondo, esto es lo que
debes agregar.
| <bgsound src="cancion.mid" loop=infinite> |
Facil no?
MARCOS o FRAMES
Aca ya entramos en cosas un poquito (no mucho) mas complicadas. Los marcos son muy usados aunque no todos los navegadores lo usan. Normalmente se aprovechan para poner el Menu a un lado y el contenido al otro. Es de mucha ayuda porque evita el tener que recargar el menu en todas las paginas por ejemplo pero tiene algunos puntos en contra como la imposibilidad de actualizar una pagina o usar el boton atras. Lo normal es usar estas formas de Marcos:
| Caso 1 | Caso 3 | |||
| Caso 2 |
donde la parte oscura mostraria el menu por ejemplo
Para ello se usa la propiedad <FRAMESET>
para el caso 1:
| <frameset cols="30%,70%"> <frame name="menu" src="menu.htm"> <frame name="contenido" src="info.htm"> </frameset> |
Vamos por partes porque hay mucho que explicar. <frameset cols="30%,70%"> en este caso el frameset lo que hace son dos columnas (cols) una con un ancho del 30% de la pagina y la otra columna del 70% donde iria el contenido.
Con el frma name, lo que hacemos es darle un nombre a cada columna, de modo que sea mas facil usar los enlaces, cosa que ya veremos. Y por ultimo el SRC es de donde va a tomar los datos la columna. Por ejemplo, si hacemos una pagina llamada indice.htm y en ella hacemos la division de columnas, no tendras que hacer mas nada en esa pagina. Todo el resto del trabajo lo haras en las paginas menu.htm e info.htm.
En el caso 2:
| <frameset rows="20%,80%"> <frame name="menu" src="menu.htm"> <frame name="contenido" src="info.htm"> </frameset> |
La idea es la misma, la diferencia es que en lugar de trabajar en columnas, trabajamos en Filas, es decir de manera horizontal
Para el caso 3 es lo mismo que en el caso 1, la diferencia esta en que la primera columna sera de 70% y la segunda de 30% (o cualquier % que quieras usar)
Ahora, en cuanto a los enlaces, en el archivo menu.htm tendremos el panel de
navegacion, un ejemplo seria algo asi.:
| <OL> <LI><A HREF="tema1.htm" TARGET="contenido">Tema 1</A> <LI><A HREF="tema2.htm" TARGET="contenido">Tema 2</A> <LI><A HREF="tema3.htm" TARGET="contenido">Tema 3</A> </OL> |
Con esto Lo que logramos es que cualquier clic en nuestro menu, abrira la pagina en la columna contenido.
No es dificil pero debes prestar atencion para no confundirte. Practicalo y te ahorraras mucho trabajo.
Cada tanto agergare nuevas cosas a esta seccion, date una vuelta pronto para que sigas aprendiendo.
|
<<Anterior |
Siguiente >> |
1- Estructura de un documento en HTML
2- Comandos Básicos
2.1- Formateando texto
2.2- Saltos de Línea
2.3- Formateando Párrafos
2.4- Líneas de separación
3- Listas
3.1 Listas ordenadas
3.2 Listas desordenadas
3.3- Listas de definición.
4- Imágenes
4.1- Texto Alternativo
4.2- Alineándolas
4.3- Enlaces
4.4- Mapas
5- Enlaces
5.1- Enlaces externos
5.2- Enlaces Internos (dentro de un mismo documento)
5.3- Enlaces directos para direcciones de mail
6- Tablas
6.1- Bordes
6.2- Color de fondo a las celdas
6.3- Imagen de fondo
7- Cosillas sueltas
9- Apendice
Este Tutorial esta pensado para gente sin conocimientos previos, si lo lees y te parece muy obvio o sencillo, puedes contactarnos y ampliar los temas.
Tutorial diseñado exclusivamente para el Portal Veperu, el Perú y mas, se prohíbe su reproducción total o parcial salvo que indiques la fuente.
