EJERCICIO PAG 24

Añadiremos a iptortosa.htm una nueva imagen a la derecha del texto, usan una etiqueta div.

• Busca una imagen GIMP en google.
• Guardala en la misma carpeta que iptortosa.htm con el nombre de gimp.jpg
• Insértala después del encabezado 3.
• Guarda el archivo con el mismo nombre.
• Comprueba el resultado.

EJERCICIO PAG 22

Añadiremos a ejercicio4.htm los siguientes enlaces.

• Enlace con www.aulaclic.es
• Enlace con www.educarm.es
• Guardalo como iptortosa.htm

EJERCICIO PAG 20

Vamos a poner una imagen a nuestro ejercicio 3.

• Escribe en el buscador de google "http"
• Selecciona una imagen similar a la que aparece en la izquierda.
• Guardalo como webmaster.jpg en la misma carpeta donde está el archivo ejercicio3.htm
• Insértala en el ejercicio.
• Guarda el archivo como ejercicio4.htm
• Comprueba el resultado.

TABLAS Y LISTAS

Para poner Tablas de contenidos habrá que activar el contenido general dando grosor de borde con el comando siguiente.

< TABLE BORDER ="2" > escribir los datos de filas entre las celdas entre los comandos < TR > y < /TR > y los datos de cada celda entre < td > y< /td >... al final cerrar tabla con < /TABLE >

DIVISIONES O CAPAS

Una etiqueta muy utilizada es la etiqueta <div></div>; forma una caja, un rectángulo, igual que en el párrafo. Pero mientras que el párrafo es más común utilizarlo para contener texto, en un div podemos colocar lo que queramos,siempre que respetemos la anidación. Esta etiqueta nos resultará muy útil para distribuir los elementos en nuestras páginas.

ENLACES

Un enlace se diferencia del texto normal porque al colocar el cursor encima, este cambia de forma y pasa de una flecha a ser una mano. Es muy frecuente que los enlaces aparezcan subrayados, ya que es la opción por defecto que les asigna el HTML.

En HTML, enlace se identifica con la etiqueta <a></a>. La forma más básica de un enlace es la siguiente

     <a href="http://www.educarm.es".>aquí</a>
El atributo href indica la dirección URL a la que se enlaza. El contenido del enlace es lo que el usuario ve en la página y que al pulsar sobre él nos lleva al enlace. Normalmente es texto o imagen. Puede ser una dirección absoluta o relativa, como vimos para las imágenes.

Es muy común añadirles a los enlaces el atributo title, para que muestre la información sobre el destino del enlace cuando el usuario deje unos instantes el cursor encima del enlace.

TIPOS DE IMÁGENES

Uno de los elementos más importantes más utilizados en un página web son las imágenes, tanto para mostrar información como parte del propio diseño de la página.
Básicamente, en páginas web nos encontramos tres tipos de imágenes: GIf,PNG y JPG.


FOTO ORIGINAL: 188Kb - 22 Segundos

FOTO GIF: 15Kb - 5 segundos

FOTO PNG: 39Kb - 5 segundos

FOTO JPG 6Kb - 2 segundos (Poca compresión)

FOTO JPG 3Kb - 1 segundos (Poca compresión)

ETIQUETA DE IMAGEN

Cuando queremos introducir una imagen,lo hacemos con la etiqueta
                                           <img />.
Los atributos que como mínimo ha de tener esta etiqueta son los siguientes:
<img src="ubicacion/imagen.gif" alt=texto alternativo" />

Lo primero que debemos de saber es dónde está la imagen,su ubicación,que es lo que debe contener el atributo src:

• Si la imagen está en una pagina Web ,basta con saber su ruta , por ejemplo http://www.educarm.es/logo_ac1.gpj. Esto es lo que se llama una dirección absoluta.

• Si la imagen está en el mismo sitio de la página web, podemos utilizaruna dirección relativa, como imagen.gif o imagenes/imagen.gif.

EJERCICIO PAG 12

• Añade a ejercicio2.htm lo señalado en negrita.
• Guardalo como ejercicio3.htm
• Comprueba el resultado

EJERCICIO PAG 14

• Abre el bloc de notas.
• Escribe la siguiente pagina web.
• Guárdalo como ejercicio4.htm

• Observa el resultado en un navegador.

Observa que <br/> produce un salto de linea.

Observa que en la parte superior del navegador aparece el contenido <title></title>

• Añade un salto de linea y un texto al final: "Esta asignatura esta dedicada al diseño de paginas web."

EJERCICIO PAG 16

Añadiremos a nuestra página web (ejercicio3.htm) los siguientes encabezados y párrafos.

EL PÁRRAFO Y LOS ENCABEZADOS

Todo el texto del <body> debe estar dentro de los párrafos.

EN HTML LOS PÁRRAFOS SE IDENTIFICAN CON LA ETIQUETA <p></p>

Dentro de los párrafos colocaremos texto e imágenes, que podremos cambiar de formato con algunas etiqueta, pero no podremos anidar otros párrafos.

Los encabezados nos permiten organizar el texto y van desde:

Por ejemplo <h1> para el rotulo principal de la página, <h2> para los titulos de los apartados...
El texto de cada apartado iria contenido en párrafos <p></p>.

Los espacios en blanco del texto no se muestran como en el código fuente. Si hay espacios seguidos solo se mostrara uno. Por ejemplo:

                                                            Bienvenido a          casa
                                          se verá       Bienvenido a casa.

El navegador ignorará los saltos de linea. Si dentro de un párrafo colocamos varios saltos de linea pulsando Intro, no se verán. Para crearlo utilizamos la etiqueta <br/>.

¿QUÉ ES UNA PÁGINA WEB?

Es un documento de texto con marcas llamadas etiquetas (tags en inglés)

Cuando este documento se ve a través de un navegador web, las etiquetas se interpretan y se visualiza el documento como una página web.

Las etiquetas no se muestran pero determinan el aspecto de la página web.

EJERCICIO

• Abre el blog de notas
• Escribe:

• Busca el archivo creado ejercicio1.htm y abreló.
• Observa que no se muestra lo que aparece entre los signos de desigualdad (<>)

LA ESTRUCTURA BÁSICA DE UNA PAGINA.

Todo el documento HTML viene contenido dentro de la etiqueta <html></html>.

Dentro de la etiqueta <html> encontramos dos subdivisiones

• La cabecera, delimitada por las etiquetas <head></head>
• El cuerpo, delimitado por las etiquetas <body></body>

La etiqueta <head> contiene información sobre la página. Normalmente su contenido no se muestra en el navegador

El documento debe contener obligatoriamente la etiqueta <title></title>, que contiene el titulo de la página, que es lo que se ve en la barra del navegador.

En el <body> encontramos el contenido de la página, lo que se ve a través del navegador.

EJERCICIO PAG 11

• Abre la página ejercicio1.htm con el bloc de notas.
• Añade la linea sombreada.

En este ejercicio hemos puesto el atributo aligne (alineación) a la etiqueta párrafo (<p>) y le hemos dado el valor center.

ETIQUETAS

El lenguaje HTML  se basa en etiquetas, por eso es importante entender bien como funcionan las etiquetas.

Las etiquetas siempre van contenidas entre los signos de desigualdad  <>. Por ejemplo <body> <title> <p>.

Las etiquetas tienen una etiqueta de apertura y otra de cierre marcada por el signo /.
                                                                   <body> (Apertura)

</body> (Cierre)

Entre la apertura y el cierre se encuentra el contenido de las etiquetas, que puede ser texto u otras etiquetas, depende del tipo de etiqueta.

Algunas etiquetas no tienen contenido y se cierran sobre si mismas. Esto se expresa colocando la apertura y el cierre en la misma etiqueta.

                                                        <br  /> equivaldria a <br> </br>

La etiqueta <br  /> escribe un salto de linea.

La primera palabra de una etiqueta es el nombre o identificador de la etiqueta. Ademas podemos encontrar atributos con sus  valores.

                                             <etiqueta atributo="valor" atributo2="valor">

Se debe escribir el nombre de la etiqueta y los atributos en minúscula y los valores entre comillas. Los atributos se escriben en orden.