FRAMES PRACTICA

Objetivo: saber desarrollar en html los FRAMES asi como sus etiquetas y atributos.

Desarrollo:

(html)
(head)
(title)JUAN CARLOS HERNANDEZ ESQUIVEL GRUPO:615(/title)
(/head)
(frameset rows=100,*)
(frame src="link.html" name="arriba")
(frameset COLS="50%,50%,50%")
(frame src="index2.htm">)
(frame src="index6.htm")
(frame src="index11.htm")
(/frameset)
(/html)

Conclucion: Con esta practika puede entender como se conforman los marcos en html y a darle siertos espacios a cada pagina para que este de modo independiente. 

glosario "marcos"

PRACTICA FORMULARIO

objetivo: aprender a diseñar un formulario en html con los codigos investigados y la ayuda del prof.

conclucion: aun no le entiendo muy bien a lo delos formularios ya que me confundo muyrapido,

FORMULARIOS

Objetivo: Conocer para que sirven los formularios en el diseño de paginas Web.  


¿Que son los formularios?


Los formularios son posiblemente la herramineta más utilizada en Internet para obtener datos e información acerca de la gente que navega nuestro sitio. La idea de los formularios es recolectar información online en la interacción con el usuario y luego ejecutar una determinada acción con la misma, que podría ser por ejemplo, quizás el caso más utilizado, un formulario de venta que el usuario completa y luego es enviado vía email al vendedor en forma encriptada. 


¿Como los definimos?


Cinco son solamente las etiquetas que el código HTML posee para definir todos los elementos interactivos que un formulario puede presentar: (FORM), (INPUT), (SELECT), (OPTION) y (TEXTAREA). Estas etiquetas, junto a un número de modificadores o atributos, son suficientes para indicarle al navegador cliente cómo debe recolectar la información, cómo debe manejarla una vez recolectada y cómo debe interactuar con el servidor.


Etiqueta form: Todo formulario debe estar encerrado entre el par de etiquetas (FORM) y (/FORM), y debe ser ubicado en el cuerpo de cualquier documento HTML, es decir, entre el par de etiquetas (BODY) y (/BODY). Esta etiqueta (FORM) presenta tres atributos posibles:

atributo	significado
ACTION	el valor de este parámetro es la URL del programa o guión en elServidor Web utilizado para procesar la información recolectada.
METHOD	puede asumir el valor GET o el valor POST, y definen la manera en la cual los datos son transferidos al servidor.
ENCTYPE	este atributo está reservado para que la información viaje en forma encriptada a través de Internet.

Etiqueta input: La etiqueta (INPUT) es la segunda etiqueta más importante de los formularios. Se la puede definir como una etiqueta multifunción, ya que con la misma podemos crear "push buttons", "radio buttons", "check boxes", y simples recuadros para ingresar texto. Posee ocho posibles parámetros: ALIGN, CHECKED, MAXLENGTH, NAME, SIZE, SRC, TYPE, y VALUE. Pero no se asusten con tantos parámetros porque normalmente solo se utilizan a lo sumo solo cinco. Los atributos cruciales para toda etiqueta (INPUT) son NAME, que asocia un nombre con cada variable ingresada; y TYPE, que puede asumir los valores TEXT, PASSWORD, CHECKBOX, RADIO,SUBMIT, RESET, IMAGE, and HIDDEN; de acuerdo al tipo de elemento que querramos representar. Más adelante todo será más claro con los ejemplos.


Etiqueta select: Este par de etiquetas define una lista de elementos de los cuales el usuario debe seleccionar uno o varios, de acuerdo a los atributos que especifiquemos.


Etiquetas option: Con esta etiqueta definimos cada elemento de las listas designadas con el par (SELECT) y (/SELECT).


Etiqueta textarea: Este par de etiquetas nos permiten definir un area de dimensiones arbitrarias que funciona como una suerte de editor, donde el usuario puede ingresar texto.


Radio Buttons y Check Boxes: Recordemos que toda etiqueta INPUT debe llevar un VALUE y un NAME:


 San Lorenzo  River Plate  Boca Juniors


conclucion: como que se me dificulta el estar trabajando con los formularios....

ANIMALES

Objetivo: Publicar una tabla con algunos de los animales con sus caracteristicas, dessarrollandola en HTML.

Desarrollo: En esta practica fue desarrollada en html, hicimos una tabla con varios animales, colocandoles clasificacioon, nombre, imagen. sonido, caracteristicas y un enlace de descarga con toda la informacion.

Estas fueron las etiquetas utilizadas y sus stributos reelacionados:


(table border="1" width="52%")
(tr)
(td) width="220")CLASCIFICACION
(td)NOMBRE(/td)
                (td)IMAGEN(/td)
(td)SONIDO(/td)
                (td9CARACTERISTICAS)/td)
        (/tr)
En estas etiquetas (TD) se agragas las columnas que va a tener nuestra tabla.


       (tr)
(td width="220")VIVIPARO(/td)
(td)LEON(/td)
                (td)(p align="center")(img src="Fotos de León.jpg")(/p)(/td)
                (td)(BGSOUND SRC="liogn1.mp3" LOOP=INFINITE)leon
                (td)8p align="left")(a href="index2.htm")VISUALIZAR(/a)
                                    (a href="LEON.docx")DESCARGAR(/a)(/td)
            
       (/tr)


En esta perte del codigo se muestra como se vas agregando las demas filas y columnas correspondientes a cada animal.

Concluciones: En esta practica aprendi mucho y ademas me he acoplado a programar en html a un nivel medio y me gusta.

TABLA ANIMALES

ENTRADA ADICIONAL

Todas mis practicas

GLOSARIO

OBJETIVO: El objetivo de esta gagina es publicar un glosario en el cual se demuestra algunas de las cosas que vimos en el Plantel Conalep Tlalpan 1 y sobre todo lo aprandido en Programacion y Diseño de Paginas Web.


DESARROLLO:
1.-Lo mas importante es mostrar el diseño de nuestro glosario y tambien el codigo del mismo en HTML.

• Etiquetas mas utilizadas:
• (body background="1.png") sirve para colocar fondo de pagina.
• (ol) lista ordenada.
• (a href="index2.htm")Matemáticas(/a) para crear un hipervinculo dentro de la misma pagina.
• (font face="lucida blackletter" size="4" color="#00FFFF") tipo de letra, tamaño y color.
• (p align="center") centrar texto
• (dl)(b)Informática(/b)(/dl) para colocar con sangria una palabra cmo un el diccionario.
• informacion rapida y accesible
  con esta daria el resultado de la etiqueta (dl)

EJEMPLO:

     

     INFORMATICA:

             

                   Informacion rapida y accesible.

2.- En esta ventana se muestra el codigo en html

3.- matematicas

4.-HISTORIA

5.- INFORMATICA

CONCLUCION: bueno hay que reconocer que no fue muy sencillo trabajar en HTML, pero no es tan dificil como parece o se escucha en lo personal me gusto trabajar en HTML e ir observando como se le da forma a una pagina en codigo.


MI GLOSARIO

REPUBLICA

Objetivo: El objetivo de esta pagina es publicar a la Republica Mexicana asi como tambien sus Estados y Capitales recalcando lo aprandido en Programacion y Diseño de Paginas Web.


DESARROLLO: Estas fueron las etiquetas utilizadas para la creacion de hipervinculos en la misma pagina:


(ol)
(li)
(p align="left")(a href="index2.htm")ESTADOS AL NORTE(/a)(/li)
(li)
(p align="left")(a href="index3.htm")ESTADOS AL SUR(/a)(/li)
(li)
(p align="left")(a href="index4.htm")ESTADOS AL ESTE(/a)(/li)
(li)
(p align="left")(a href="index5.htm")ESTADOS AL OESTE(/a)(/li)
(/ol)


Y les quedaria como se puede observar en la imaden poeterior:

Estas fueron las etiquetas utilizadas para crear una tabla:

(p align="center")(table border="1" width="52%")

(tr)

(td width="220")ESTADO(/td)

(td)CAPITAL(/td)

(/tr)

(tr)

(td width="220")DURANGO(/td)

(td)DURANGO(/td)

(/tr)

(tr)

(td width="220")ZACATECAS(/td)

(td)ZACATECAS(/td)

(/tr)

(/table)

CONCLUCION: En esta practica aprendii a saber como esta constituida una tabla en HTML y ademas a repasar los estados y ls capitales de la republica mexicana. Ahhhh¡¡¡¡ y por logica en ves de usar los () se tiene que usar <>....


REPUBLICA MEXICANA

CARACTERES ESPACIALES y TABLAS

CRACTERES ESPECIALES

OBJETIVO: Conocer las caracteres espaciales que se utilizan en el diseño de paginas web en HTML.

• Una pagina web puede ser vista desde distintos lugares, que es otro conjunto de caracteres diferentes en  el lenguaje HTML, nos ofrece un mecanismo por el que podemos estar seguros que una serie de caracteres raros se va a ver bien en los ordenadores, independientemente del juego de los mismos. 
• ESte conjunto de caracteres espaciales se insertan con codigo ASCII.

EJEMPLOS:

• Alt + 165 = Ñ
• á = "&aacute"
• é = "&eacute"
• ü = "&uuml" 
• ¿ = "&iquest"

CODIGOS ASCII

ENLACES EN HTML ........ (hipervinculos)

OBJETIVO: Conocer la formas por la cuales se generan hipervinculos en HTML colocar un enlace es muy facil y detectarlo en la pagina web lo es mas solo basta com ceslizar el mouse en la misma y en los enlaces aparecera una mano indicando un enlace.

Para colocar un enlace utilizzaremos la siguienta etiqueta (a) (/a) donde la etiqueta de aperrtura debera especificar el destino del enlace para esto utilizaremos el atributi "href"


EJEMPLO:

• (a href="destino")(/a)

Dentro de la misma pagina tambien podemos insertar una direccion de correo un archivo etc.... para esto hay distintos tipos de enlaces:

• Enlaces Internos: estos estan dentro de la misma pagina.
• Enlaces Locales: se dirigen a otra pagina del mismo sitio.
• Enlaces Remotos: dirigidos hacia paginas de otros sitios.
• Enlaces con direcciones de correo: para crear un msj de correo.
• Enlaces con Archivos: para colocar archivos o ficheros a descargar.

Enlaces Internos: Para crear un enlace de este tipo es nesesario, aparte del enlace propiamente dicho, un segundo enlace es colocarle el destino.

¿Queremos que este enlace te lleve a un lugar de la pagina?


R= (a href="#abajo")ir abajo(/a)


El contenido del enlace es el texto ir abajo.
El destino abajo.
# = especifica al navegador que el enlace apunta en una secciion en particular.


En segundo lugar hay que crear un enlace en el destino:


(a name="abajo")(/a).


Enlaces Locales: Hemos de crear una etiqueta de la siguiente forma.


(a href="archivo.html")NARUTo(/a)


Los locales pueden a su ves apuntar a una seccion concreta de la pagiina web, este tipo de enlace es un hibrido internoy local la sintaxis es:


(a href="archivo.html # seccion")contenido(/a)
(a name="seccion")(/a).


Enlaces externos de correo y hacia archivos:


Enlaces Remotos: simplemente colocamos el atributo "href" de la etiqueta (a) la URl o la direccion de correo a la que queremos enlazar.


(a href="http://www.argim.net")ARGIM(/a).


Enlaces de direccion de correo: en el atributo "href" del enlace colocamos la direccion de correo:


(a href="mailto:k.arlos666@hotmail.com)k.arlos666@hotmail.com(/a).


Enlaces con archivos: si queremos enlazar mi _fichero.zip que se encuentra en el mismo directorio de la pagina:


(a href="mi_fichero.zip")Descargar(/a)


Destinos de Enlace: el destino de enlace determina en que ventana va a hacer a abierta la pagina vinculada se especifica atraves del atributo "target" al que se le pueden agregar los siguientes valores:

• _blank: abre el documento en una pagina nueva.
• _parent: abre la pagina que contiene el vinculo.
• _selt: abre el documento en el mismo marco.
• _top: abre el documento en la ventana completa del navegador.

(a href:="http://www.yahoo.com.mx" target="_blank")yahoo(/a)

Formato de los enlaces....

• link
• alink
• vlink

(body link="pink" alink="orange vlink="yelloow")

Puntos de Fijacion o Ancla........

Cuando se tienen datos extensos es preferible ir al apartedo deseado en lugar de deslizarse: para insertar un punto de fijacion dentro del mismo documento:

(a href="# anclaname")comentario(/a)

Tablas.......


Objetivo: Conocer la forma en que estan las tablas , us filas y columnas y el formato de la misma atraves de html para el

diseño de paginas web.

Atributo	Significado	Posibles Valores
Width	Ancho de la tabla	Un numero acompañado de %
Heigth	Altura de la tabla	Un numero acompañado de %
Cellpalling	Espacio entre cont, de celdas	Un numero
Cellspacing	Espacio entre celdas	Un numero
Border	Grosor de borde	Un numero
Aling	Alinacion de la tabla dentro de la pagina	Left, rigth, center
Bgcolor	Color de fondo	Un numero exadecimal
Background	Imagen de fondo	Un numero exadecimal
bordercolor	Color de borde	Un numero exadecimal