html
antes de comenzar debes saber que html se maneja por etiquetas y cada una de estas hace ciertas funciones, ademas de que todas las paginas echas en html tienen una estructura base la cual es:
<html>
<head>
<title> "Aqui el titulo de tu pagina"
</title>
</head>
<body>
"aqui va todo el cuerpo de tu pagina"
</body>
</html>
con esta estructura se rigen todos los programas; ademas en html cada etiqueta que abres debes de cerrarla (excepto por las primeras dos que te presentare y la de imagen) aqui estan las principales:
insertar linea de texto: <p>
Salto de linea: <br>
Texto en negritas: <B> </B>
Texto en cursiva: <I> </I>
Texto subrayado: <U> </U>
Centrar texto e imagenes: <center> </center>
Cambiar color de fondo: en la etiqueta <body> agregas bgcolor="nombre del color en ingles o codigo del color", ejemplo: <body bgcolor="BLUE">
Poner imagen de fondo: en la etiqueta <body> agregas background="nombre de la imagen con extension", ejemplo: <body background="fondo.jpg">
Editar texto: <font face="nombre de la fuente" size="tamaño de la fuente" color="color de la letra"> </font>
Insertar imagen: <img src="nombre de la imagen con extension" width="ancho en pixeles" height="alto en pixeles"> ejemplo <img src="ejemplo.jpg" width="900" height="700">
Nota: Las etiquetas con la diagonal son las etiquetas de cierre
Primera pagina
enseguida te explicare como hice yo unas paginas muy sencillas sobre una biografia, constara de una pagina de biografia, otra de la misma biografia pero en ingles, y otra de un collage de fotos unida por marcos.
para comenzar debes abrir el bloc de notas y escribir la estructura basica con el titulo de tu pagina y el color o imagen de fondo que quieras, despues en el body vas haciendo el diseño de tu pagina con las etiquetas ya antes mencionadas a tu guso, yo por mi parte lo hice asi:
por ultimo le pones guardar, eliges la ruta y en el nombre le pones el nombre punto html (biografia.html) y en el tipo eliges todos los archivos y guardar; se guardara con el icono de tu navegador y cuando lo abras te permitira una vistra previa, el mio se ve asi:
para la otra pagina (la biografia en ingles) debes hacer exactamente lo anterior (a menos que quieras darle otro aspecto) solo que deberas traducir la biografia al ingles y quedaria asi:
despues para la pagina de las fotos puedes agregar muchas etiquetas para poner imagenes o puedes auxiliarte de alguna aplicacion de edicion (tal como lo hice yo) para juntar muchas fotos en una sola y esa foto la pones de gran tamaño.
una vez que tienes estas tres paginas es hora de hacer tus hipervinculos (los necesitaras para los marcos), para ello abre un nuevo bloc de notas, pones la estructra basica y dento del body pondras la siguiente etiqueta para crear los hipervinculos:
<a href="aqui el link de la pagina de la cual sera el hipervinculo" target="mostrar"> <h2 "nombre del archivo html"> lo que dira el hipervinculo </h2> </a>
Ejemplo:
<a href="file:///E:/4to/erika/paginas/biografia%20en%20ingles/biografia.html" target="mostrar"> <h2 "biografia"> Biografia </h2> </a>
(mas adelante explicare lo del target) y asi deberas crear los otros hipervinculos, ami me quedo asi:
por ultimo debes hacer los marcos para ello en el bloc de notas pones la estructura basica cambia un poco ya que no hay body y no se cierran las etiquetas <html> y <head>; el codigo es el siguiente:
<html>
<head>
<title> Menu
</title>
</head>
<frameset cols="150,*">
<frame name="enlaces" src="hipervinculos.html">
<frame name="mostrar" src="biografia.html">
</frameset>
</frameset>
echo esto lo guardas como ya antes te lo habia indicado y al abrirlo te aparecera del lado izquierdo de la pantalla (frame enlaces) la pagina de hipervinculos y del lado derecho (frame mostrar) la biografia en español
como puedes ver tu pantalla esta divida en 2 secciones llamadas marcos el de la derecha es el marco llamado "mostrar" y alli es donde aparecen las otras paginas al hacer clic en el hipervinculo, por que? porque al hacer el hipervinculo pusimos target="mostrar", esto quiere decir que cuando abra el hipervinculo lo va a mostrar en un marco llamado "mostrar" y esa es la razon.
Espero y te haya servido este mini-tutorial, para cualquier duda o aclaracion comenten :)
