Cuando escribimos en un procesador de palabras y queremos cambiar de línea, estamos acostumbrados a apretar la tecla "Enter" o "return" y ya está, pues bien en HTML no es así. Cuando escribimos el texto que deseamos que aparezca en pantalla, éste se acomoda a ella, sin dejar espacios verticales.
Si lo que deseamos es separar el texto en diferentes párrafos se debe utilizar las etiquetas <p> <p>
vamos con el primer ejemplo.
Desde nuestro editor de archivos de texto,(por ejemplo "notepad") ingresaremos a un documento en blanco e ingresaremos el siguiente texto:
|
<html>
<head>
<title> primera p&aacute;gina web </title > </head >
<body >
<center > < h2 > Mi Primera P&aacute;gina Web </h2 > < center >
<p ><b > Esta es mi primera p&aacute;gina Web < /b >
< /body >
< html >
|
Como se puede observar en el código anterior se han empleado los siguientes nuevos símbolos:
&aacute; en sustitución de la "á".
&iacute; en sustitución de la "í".
&oacute: en sustitución de la "ó".
Bueno todo lo que esta en azul exactamente asi es como se le pone los acentos a las Vocales
A continuación Abre una pagina de notepad y y escribe exactamente todo tal y como esta el la tabla.
Y ahora tenemos que guardarlo algo IMPORTANTE " Que no se te olvide donde lo has Guardado" y tambien que tienes que guardarlo asi ("aquí cualquier frase.html")
Ahora Buscalo y abrelo con el nabegador que quieras.
"INSERTANDO IMAGENES A NUESTRA PAGINA"
Una "Pagina" Web sin imágenes es como un jardín sin flores, vamos a insertar una imagen en su recién creada página. Es obvio que ya no se volverán a repetir las instrucciones de guardar, y visualizar en el navegador, ya que entiendo que han quedado suficientemente claras y comprendidas.
Elija la imagen que desea insertar, si no tiene ninguna, puede buscar en Internet para luego guardarla en su directorio de trabajo.
La estructura de la etiqueta que sirve para incluir imágenes en una página Web es la siguiente:
<img src="URL de tu imagen">
Con esta etiqueta indicamos que se debe cargar una imagen contenida en un archivo de nombre imagen.gif, es obvio que este nombre se debe sustituir por el nombre del archivo o que nosotros deseamos que aparezca. Entre las "" debemos incluir la dirección del fichero además de su nombre, en el caso de que esté en el mismo directorio que la página, no es necesario.
Dentro de esta etiqueta se pueden incluir otros atributos, como:
ALT="descripcion"
Con este comando se introduce una descripción, lo mas breve posible, a poder ser una palabra, indicativa del contenido de la imagen.
Se debe incluir por dos razones, si un navegador está configurado como texto únicamente, no podrá ver la imagen, pero por lo menos se hará una idea de lo que representa, y la otra razón es que de cargarse, el navegador mostrará la leyenda sobre la imagen al pasar el cursor encima.
BORDER=n
Donde n es el tamańo, en pixeles, del borde que deseamos que tenga la imagen, si ponemos 0, no llevará borde. En el caso de que la imagen sea un enlace a otra página o de cualquier otro tipo la imagen se verá rodeada de un borde del color que se hayan definido los enlaces, obviamente si hemos puesto 0 no aparecerá ningún borde.
Existen tres tipos de formatos que pueden ser utilizados para mostrar imágenes en páginas web:
GIF
JPG o JPEG y
PCX
Existen dos clases de ficheros GIF, según la capacidad de conseguir colores transparentes o no. El formato GIF 87a no es capaz de crear colores transparentes, es el GIF 89a el idóneo para guardar ficheros con trasparencia.
Un color transparente, es un color que en la página Web no se ve, y deja ver lo que está debajo. Por lo tanto el programa que utilice, para manejar gráficos, debe ser capaz de trabajar con el formato anteriormente mencionado.
ALIGN="aaaaaa"
Donde aaaaa puede tomar los siguientes valores:
RIGHT: Alinea la imagen del lado derecho del navegador.
LEFT: Alinea la imagen del lado izquierdo del navegador.
Hay algunos otros, pero no es muy común su uso.
WIDTH="nnn"
donde nnn es el ancho que queremos dar a la imagen en pixels.
HEIGHT="nnn"
donde nnn es el alto que queremos que tenga la imagen en pixels.
Es importante el poner estos atributos, ya que al conocerlos el navegador reserva el espacio para la imagen y mientras la carga, sigue mostrando el texto, con lo que, quien este viendo nuestra página puede leerlo y no aburrirse, mientras se cargan las imágenes. Otra cosa muy importante es que el determinar las medidas no precisamente implica las medidas de la imagen, por lo que a veces, el no incluir los valores correctos puede hacer que la imagen se deforme en pantalla
A continuación vamos a incluir una imagen en la página que habíamos construido anteriormente. Las etiquetas que iremos ańadiendo son de color para que las puedas distinguir fácilmente de lo escrito anteriormente.
|
<html>
<head>
<title> primera p&aacute;gina web </title > </head >
<body >
<center > < h2 > Mi Primera P&aacute;gina Web </h2 > < center >
<p ><b > Esta es mi primera p&aacute;gina Web < /b >
<p>Aquí vamos a añadir una imagen</p>:
<center> <img src="una imagen .gif" alt="nombre de la imagen" width="100" height="120" border="5" align="top"></center>
< /body >
< html >
|
Siguiente Pagina
|