Académique Documents
Professionnel Documents
Culture Documents
Primeros pasos.
Realizar las siguiente tareas usando el manual del MEC que tenemos en la
dirección http://www.ite.educacion.es/formacion/materiales/107/cd/index.htm. Para
nuestros alumnos del centro, lo tenéis en la carpeta
home/aulas/informatica/pagina web. Crear una carpeta en vuestro ordenador
que se llame web y dentro de ella otra con el nombre imagenes. ( imágenes
lleva tilde, ya sabemos que los nombres de las carpetas es mejor ponerlas sin
tildes, sin ñ, sin espacios, etc ). También tenemos que crear un archivo que se
llame index.html para hacer las tareas que detallo a continuación. Para
hacerlas, usaremos el programa Kompozer.
Realizar una página que contenga texto de diferentes estilos y color.
Incorpora imágenes, listas numeradas y un enlace a una web cualquiera
Insertar una tabla del estilo a la del manual
Usar el editor de CSS para añadir dos estilos diferentes. Sólo intentarlo,
porque las CSS tienen una sección aparte
Insertar el formulario de google para realizar búsquedas en internet
Usar el compresor del ordenador y comprimir una carpeta cualquiera que
contenga archivos. Guardarla en la carpeta web
Usaremos un menú de navegación por iframe. Iframe es una técnica para
que salga una ventana con los contenidos de otra página y lo vamos a usar
para crear un menú de navegación. Para ello vamos a proceder de la
siguiente forma:
1. Creamos una nueva página que se llame enlaces.html y la guardamos
en la misma carpeta que index.html ( la principal )
2. En esa página, ponemos Home con un enlace a la pagina
principal, Fotos con un enlaces a otra página que se llame fotos.html
y google con un enlace a la web de google
3. Insertamos el código al inicio de cada página que queramos mostrar
los enlaces. En Kompozer se hace como Insertar-> html-> y en la
ventana que se abre poner : <iframe src="enlaces.html" width="600"
height="100" align="center"></iframe>. Comprobar que funciona.
1. Una vez terminadas las prácticas, pasamos a hacer el proyecto final. Elegir el
tema apropiado para la Web. Puede ser alguno vinculado con vuestra familia
o entorno, de forma que si vuestra familia tiene un negocio, podemos hacerle
la Web
2. La estructura de la Web debe ser:
A. Hacer una carpeta en el escritorio con el nombre Web.
B. Dentro de la carpeta Web, creamos otra carpeta con el nombre
imagenes.
C. Según necesitamos mas elementos haremos mas carpetas para tener
todos los archivos ordenados.
D. El archivo principal debe llamarse index.html. Esto es necesario porque si
lo subimos a Internet, al escribir el nombre del dominio, el servidor busca
el archivo index y si no lo encuentra da un error. Esto es al escribir
tecnologia-informatica.es el servidor busca el archivo index.html y lo
muestra en el navegador. Si nosotros tenemos como archivo principal
miweb.html el servidor dará un error porque no sabe que es esto lo que
debe mostrar.
3. Todas las imágenes que se suban no deben tener mas de 60kb. Excepcionalmente
podemos subir algunas mas pesadas pero esto afecta a la hora de cargar las
páginas
En esta sección vamos a trabajar para hacer nuestra Web propia con los
elementos necesarios para una buena presentación
1. Abre la imagen donde quieras poner las zonas activas con el Gimp y ve al
apartado Filtros -> Web -> Mapa de imagen. Al abrirse una ventana nueva,
verás la imagen junto a las herramientas necesaria para la selección del área que
te interesa
2. Toma la forma geométrica apropiada, llevarla sobre la imagen y al terminar el
programa te pedirá la url. Añade la dirección web, que puede ser una página de
nuestro proyecto u otra externa
3. Si es una página interna, especifica solo el nombre y la ruta relativa. Por ejemplo,
si tenemos un archivo que se llama fotos.html dentro de la carpeta imagen,
debemos poner /imagen/fotos.html en el apartado url
4. Tener cuidado. En la versión actual, cuando tomamos la figura de polígono
irregular, al terminar hay que hacer clic dos veces para que salga el menú de la url
5. Cuando ya tengas todas las zonas creadas y sus correspondientes enlaces, ve a
Archivo -> Guardar como y guárdalo con un nombre acabado en map.
6. Mira el archivo map creado. Copia su código fuente y llevarlo a tu página
7. Un problema típico es que al llevar el código, la imagen no se ve. Esto es debido
porque hay que ajustar la ruta de la imagen , es decir, en la línea donde pone <img
src=”/imagen.jpg” width=”200″ height=”246″ border=”0″ usemap=”#map” /> , la
ruta de la scr debe ser la adecuada porque ahí es donde va a buscar la imagen. En
este caso, lo busca en la misma carpeta. Veamos algunos ejemplos: Si la imagen (
supongamos que se llama paisaje.jpg está en la carpeta imagenes, entonces la ruta
para que se cargue debe ser <img src=”/imagenes/paisaje.jpg” ….
2º Práctica. Galería de Imágenes
Es frecuente encontrar galerías de imágenes en las web y el propósito de todo
programador es hacer que sean atractivas al usuario. Existen multitud de
scripts que podemos incorporar a nuestra web y uno de los mas populares
es Lightbox.
a) Usar servicios externos tipo Jotform por el cual, nos damos de alta e
incorporamos el código facilitado
b) usamos PHP. Hay infinidad de script para ello. Podemos usar uno de
ventana emergente como el siguiente:
Terminado el trabajo, nos damos cuenta que deseamos añadir otra página. ¿
Qué hacemos ?. Pues ir página por página añadiendo el dichoso enlace.
El código html es
http://www.tecnologia-informatica.es/internet/como-hacer-una-pagina-web/