domingo, 24 de julio de 2016

Como colocar imagenes en Html

Gracias a las imágenes la web se ha hecho tan popular, tanto que hoy no se entiende una página web sin ellas. En nuestro directorio de trabajo tenemos un pequeño gif llamado "obras.gif", que vamos a usar en los siguientes ejemplos
El tag básico que nos permite incluir imágenes es <IMG SRC="obras.gif"> , que produce en pantalla:



                                                                                                              

Este tag admite muchos parámetros útiles:
  • width, height: Con estos parámetros le decimos al navegador las dimensiones del grafico. Es conveniente incluirlos porque asi la página aparece en pantalla antes de que lleguen los gráficos(que suelen venir después del texto).En nuestro caso, <IMG SRC="obras.gif" width=60 height=53>, produce en pantalla:


                                          
También podemos poner dimensiones 'falsas', y el navegador alterará las dimensiones de la imagen.Por ejemplo, <IMG SRC="obras.gif" width=200 height=53>, produce en pantalla:
  • Border: Este parámetro hace que aparezca un borde rodeando la imagen. Por ejemplo, <IMG SRC="obras.gif" width=60 height=53 border=2>, produce en pantalla: 


  • Alt: Con este parámetro podemos incluir un texto para los navegadores que no soportan los gráficos. 


Por ejemplo, <IMG SRC="obras.gif" alt="Pagina en construcción" width=60 height=53 border=2>, produce en pantalla: 



Para leer el texto podemos poner el ratón sobre el gráfico durante un segundo.
  • Align: Alinea la imagen respecto del texto y puede valer: left, right, top, bottom y middle.

Por ejemplo, <IMG SRC="obras.gif" alt="Pagina en construcción" width=60 height=53 border=2 align=middle> texto de ejemplo, produce en pantalla:


  • º  Hspace, vspace: Separa la imagen horizontal y verticalmente(en pixels y por ambos lados).

Por ejemplo, <IMG SRC="obras.gif" alt="Pagina en construcción" width=60 height=53 border=2 vspace=10 align=middle hspace=10> texto de ejemplo, produce en pantalla:
Sobre imágenes se puede decir mucho más, pero sólo vamos a añadir algunos comentarios:

  • Una página web en su totalidad(texto y gráficos) no debería sumar más de 80 Kb(1 minuto de carga aprox. para un modem de 14400 bps).
  • Un diseñador de páginas web necesitará un programa de retoque fotográfico, como Paint Shop Pro
  • Las imágenes pueden servir como enlaces, p.ej el código <a href="obras.htm"><IMG SRC="obras.gif"></a> produce en pantalla: 

Vemos que el icono del ratón cambia al pasar por la imagen, y aparece un borde de color azul rodeándola. Casi siempre que usemos imagenes como enlaces añadiremos border=0 para evitarlo.


FECHA: Julio 24 2016
Publicadas por a la/s No hay comentarios.:
Fondos de página

Como hemos visto hasta ahora, el navegador dibuja la página con un triste fondo gris. Por suerte, es posible fijar el fondo con otro color, o usar una imagen de fondo.
Fondo de color:
Usamos el parámetro bgcolor, p.ej <body bgcolor="#FFFFFF">
Si queremos usar otros colores de fondo, hay que asegurarse de que los textos se leen sin dificultad.
Imagen de fondo:
Usamos el parámetro background="fondo.gif", p.ej <body background="fondo.gif">
Usar imágenes de fondo es un tema complicado. Es muy dificil acertar con una imagen adecuada, y sobre todo hay que huir de los colores chillones.
Si la imagen es más pequeña que la pantalla, se repetirá hasta llenarla completamente. 
Un buen truco es usar una imagen de altura 5 pixels(o menos), con el consiguiente ahorro de espacio.
Por ejemplo: vamos a usar de fondo la imagen:


Para ver el resultado en la pagina copiamos el siguiente código:

<html>
<head>
<TITLE>Fondos</TITLE>
</head>
<body background="fondo.gif">
<center>
<font face="arial" size="+2">Fondos</font>
<hr width=200>
</center>
<P align="center">Este es el primer párrafo. Está centrado y escrito en la letra por defecto del navegador. Algunas palabras estan en <B>negrita</B>, y otras en <I>cursiva.</I></P>
</body>
</html>

Nota: En este caso la imagen debe estar en el mismo directorio que el fichero .htm, para que el navegador pueda encontrarla. Si la imagen está en otro directorio debemos escribir la ruta correcta.


FECHA: Julio 24 2016
Publicadas por a la/s No hay comentarios.:
Cómo crear y guardar un documento HTML en notepad++



TOMADO DE: https://www.youtube.com/watch?v=wgsrZc0ZxiM

FECHA: Julio 24 2016

Publicadas por a la/s No hay comentarios.:
Como crear un documento Html con el blog de notas

1. Abre el Bloc de Notas de Windows mediante: Inicio > Todos los programas > Accesorios > Bloc de Notas. En Ubuntu puedes utilizar el procesador de textos mediante: Aplicaciones > Accesorios > Procesador de textos.

2. En un documento nuevo escribe el siguiente texto:

<html>
<head>
<title>Mi primera pagina</title>
</head>
<body>
Hola mundo
</body>
</html>

3. Selecciona Archivo > Guardar como. Se mostrará este cuadro de diálogo.

































4. En la lista desplegable Guardar en: , elige la carpeta donde desees guardar este documento.

5. Introduce el nombre del archivo añadiéndole la extensión .htm Ejemplo: prueba.html

6. Pulsa en el botón Guardar.

7. Cierra la ventana del Bloc de Notas.

8. Elige Inicio > Mis Documentos para situarte en esta carpeta donde has guardado tu archivo HTML. Encontrarás un archivo con el icono de un documento HTML con el nombre que has elegido.
















9. Haz doble clic sobre el icono de este archivo y se abrirá el navegador configurado por defecto en tu equipo mostrando el contenido de esta página HTML.

10. Observa que en la barra de título del navegador aparece el texto que has encerrado entre las etiquetas<title> … </title> y en el documento en blanco el texto que has incluido entre <body>…</body>
FECHA: Julio 24 2016

Publicadas por a la/s No hay comentarios.:
Suscribirse a: Entradas (Atom)