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.