"Mi musica es como metal pesado cayendo desde el cielo..."

Reino Animal Practica #

Objetivo: Aplicar los conocimientos del alumno utilizando tablas, insertar imagen, sonido, hipervinculos, imagen de fondo, Desarrollando una pagina con una lista de animales con sus caracteristicas.

Desarrollo:

El primer paso es crear la tabla, Primero que nada tenemos que ponerle un titulo y datos del creador, para hacer la tabla utilizaremos tres columnas, que seran para el nombre, clasificacion, imagen, sonido, caracteristicas.
Quedando de la siguiente manera:

(Da clic en las imagenes para verlas en tamaño real).



El siguiente paso es crear por separado una pagina con las caracteristicas de cada animal, insertando su imagen.



Ya que tenemos cada una de las paginas por separado, entonces creamos los links en la pagina principal para que al dar clic en el titulo del animal automaticamente nos mande a sus caracteristicas.

Por otra parte queremos que cada animal vaya acompañado de el sonido que lo caracteriza, para esto en el codigo de la pagina por separado de sus caracteristicas, se introduce el codigo para sonido, y colocamos el sonido que queramos.
Ya en la pagina principal al darle clic en sonido del animal, se abrira una ventana de descarga que nos permite abrir en el momento el sonido o guardarlo. Esto se vera asi:



Tambien queremos que en nuestra pagina se pueda descargar la informacion de cada animal, asi que en el codigo de la pagina de las caracteristicas se inserta el codigo para descargar archivos, donde especificamos la ruta del archivo a descargar, el documento debe estar guardado con la extencion .doc para que el archivo se guarde como documento de word, ya terminado en nuestra pagina pricipal al dar clic en descarga de informacion, se abre nuestra ventana de descarga:



Aqui esta descargando nuestro archivo:



Pues esas serian todas las funciones de nuestra pagina web, el codigo utilizado lo colocare a continuacion:

Insertar Imagen y Sonido.

Objetivo: Que el alumno conosca la manera de insertar una imagen o un sonido en su pagina web por medio del codigo html.

Desarrollo: Para insertar una imagen se utiliza el siguiente codigo:

img src ="imagen.jpg"<----Ruta de la imagen.

El codigo Alt se utiliza para mostrar una leyenda junto con la imagen y se pone asi:

img src ="leon.jpg" alt="El rey de la selva"

Existen etiquetas para modificar el tamaño de la imagen que son las siguientes:

width=ancho

heigth=alto

y se utilizan de la siguiente manera: img src="leon.jpg" width=70% heigth=60% alt="Rey Leon"


Existen otras etiquetas para alinear la imagen:

Se utiliza la etiqueta "align" junto con algunas de las siguientes:

top=superior
right=derecha
left=izquierda
center=centrada

El formato de la imagen debe de ser "JPG" o "GIF".



Para insertar sonido en nuestra pagina:

El coodigo que se utiliza para insertar un sonido en una pagina es el siguiente:

a href="Canguro2.mp3" target="_new"

Si se le quiere agregar una leyenda se introduce el texto antes de cerrar el codigo de la siguiente manera:

a href="cancion.mp3"target="_new" TEXTO

Para colocar el sonido de fondo se coloca el codigo de la siguiente forma:

body bgsound rsc="sonido.mp3

Si queremos que el sonido se repita mas de una ves se introduce el siguiente codigo dentro del anterior:

loop=3

entonces asi nuestro sonido se reproduciria 3 veces.

Conclusiones: Con esta practica aprendi a insertar imagen y sonido ya que no sabia como hacerlo, pero ahora que ya lo vi no se me dificulta y me ayudara con las paginas web que estamos desarrollando.

Tablas.

Objetivo: Conocer la forma en la cual se diseñan las tablas y se modifica el formato de las mismas
atraves de html en el diseño de una pagina web.

Desarrollo:

Para especificar una tabla en html se pone de la siguiente manera:

table TEXTO tbody /tbody /table>
tr FILAS /tr
td COLUMNAS /td

Para poner encabezados dentro de las mismas se utiliza:

th /th

Formato de Tablas.

width:/Significado: Ancho de tabla / Posible valor: Numerico acompañado de porcentaje.

height: /Significado: Altura de tabla / Posible valor: Numerico acompañado de porcentaje.

cellpadding: /Significado: Espacio entre el contenido de las celdas y el borde. / Posible valor: Numerico acompañado de porcentaje.

border: /Significado: Grosor del Borde. / Posible valor: Un numero.

align: /Significado: Alineacion de la tabla dentro de la pagina / Posible valor: left, right, center.

bg color: /Significado: Color de fondo / Posible valor: Numero hexadecimal.

background: /Significado: Imagen de fondo / Posible valor: Numero hexadecimal.

border color: /Significado: Color de borde / Posible valor: Numero hexadecimal.

Otros atributos:

base line: Linea de base.

bottom: Inferior.

middle: Medio.

top: Superior.

Ejercicio:

Desarrolla una tabla que muestre el horario de clases, asi como un recuadro con las calificaciones
del 1o, 2o y 3er parcial.

Enlaces (Hipervinculos)

Objetivo:
Conocer los diferentes hipervinculos y sus caracteristicas en html para el diseño de paginas web.

Desarrollo:

Para colocar un enlace utilizamos la etiqueta. Dentro de la etiqueta de apertura debemos especificar el destino del enlace. Este destino sera introducido en forma de atributo con el nombre "href".

La sintaxis de un enlace tiene la forma: a href="http://www.blogger.com/destino Contenido /a

Los son agrupados del siguiente modo:

1.- Enlaces internos: Los que se dirijen a otras partes dentro de la misma pagina.

2.- Enlaces locales: Los que se dirijen a otras paginas del mismo sitio web.

3.- Enlaces remotos: Los dirijidos a otras paginas de otro sitio web para crear un mensaje de correo dirijido a una direccion.

4.- Enlaces con archivos: Para que los usuarios puedan hacer descarga de fichero.

Otra pagina en la misma carpeta: Estados Unidos.

Pagina en la misma carpeta: a href="http://www.blogger.com/norte" Estados Norteños /a.

Enviar correo:

a href="mailto:alucard_incubo@hotmail.com" Email Abdiel /a

a href="http://www.blogger.com/practica#5.doc" Descargar /a DESCARGA

Atributos:

target = Determina el destino

1) blank: Abre el documento en una nueva ventana a href="http://yahoo.com/" target="blank"

2) parent: Abre el documento en la ventana que contiene el vinculo.

3)self: Abre el documento en el mismo marco o ventana que el vinculo

4) Abre el documento en la ventana completa del navegador.

Conclusiones:

Con este tema aprendi a uilizar las etiquetas para meter hipervinculos, esto nos servira para hacer paginas a futuro, y no tener problemas con eso./a /name="norte"

Caracteres Epeciales.

Objetivo:
Conocer los diferentes caracteres especiales que se utilizan en html que se utilizan en paginas web.

Introduccion:
Una pagina web se ha de ver en paises distintos que utilizan un conjunto de caracteres diferentes. El lenguaje html nos ofrece un mecanismo por el que podemos estar seguros que una serie de caracteres raros se van a ver bien en todos los ordenadores, independientemente de su juego de caracteres.

Desarrollo:
Este conjunto de caracteres especiales son los siguientes:

Ññ = Alt+165

à = "&aacute"

è = "&eacute"

i = "&iacute"

û = "&uvant"

& = "&amp"

< = "&lt"

B = "&szlig"

¿ = "&iquest"

Conclusiones:
Con esta practica se refuerza el conocimiento con html, ya que habra veces que queramos poner algun caracter especial y no sabemos como, pero con esta introduccion a los caracteres especiales ya sabremos como hacerlo.

Ejemplos de una pagina web. Practica 2.

Objetivo: Aplicar lo ya visto en la materia elaborando una pagina web que contenga lo que es: tipo de fuente, listas ordenadas, desordenadas, color de letra, color de fondo, etc.

Desarrollo:

La primer lista que vamos a elaborar es la de los estados de la republica, la lista va enumerada con numeros arabigos, romanos, abecedario, Arial 6, color de fuente amarillo, esta sera una lista ordenada, a continuacion pondre el codigo y la forma que se vera previamente.










Ya acabada la primer lista, ahora vamos con la de las de delegaciones del Distrito Federal, a diferencia de la otra lista esta sera desordenada, y con viñetas.







Ya terminadas las dos listas, pondre la imagen de la pagina ya terminada.



Conclusiones: En esta practica aprendi las herramientas basicas para crear una lista, y sirvio para practicar para las futuras paginas que tengamos que realizar, fue como una introduccion de la cual aprendi mucho.