Sitio web 1

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE BUAP: 8109 SEMESTRE “B”

REPORTE

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C

INFORMÁTICA PROFESORA: ING. LILIA RIVERA GONZÁLEZ

SITIO WEB: TEHUANA INTEGRANTES: MENDOZA ARROYO JESSICA SOTOMAYOR GARCÍA SHAHELA GRADO Y GRUPO: 3º “D” FECHA DE ENTREGA: 5/JUNIO/2015

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE BUAP: 8109 SEMESTRE “B”

REPORTE

INDICE I.

Introducción

II.

Estructura: Página Web

III.

Justificación Creación De Logotipo

IV.

Colores Elegidos

V.

Página Web: Estructura a. Div

VI.

Etiquetas De Formato a. Tamaño – Fondo – Tipo de Letra – Marquesinas

VII.

Etiquetas Básicas a. Videos – Audio – Imágenes - Tablas –Listas

VIII.

Sitios Web a. Hipervínculos b. Formularios

IX.

Sitio Web- Investigación a. Hipervínculos b. Formularios

X.

Ensayo Conocimientos Adquiridos

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE BUAP: 8109 SEMESTRE “B”

REPORTE

INTRODUCCIÓN El lenguaje HTML es empleado para el desarrollo de páginas web de internet, este está compuesto por una serie de etiquetas que el navegador interpreta.

El objetivo de haber realizado una página web, era aprender cómo hacerla, conocer las funciones de esta.

Aprender a utilizar HTML y las etiquetas para realizar la página, A continuación presentada.

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE BUAP: 8109 SEMESTRE “B”

REPORTE

ESTRUCTURA: PÁGINA WEB

“Tu luces, como ¡Necesito un trago!, quizás sea un mezcalito?, para todo mal mezcal y para todo bien también!

Tehuana Cuando bebemos, nos emborrachamos. Cuando nos emborrachamos, nos quedamos dormidos. Cuando nos quedamos dormidos, no cometemos pecado, Cuando no cometemos pecado, vamos al cielo...

POR LO TANTO, vamos a emborracharnos todos e ir al cielo.

Brian O'Rourk

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE BUAP: 8109 SEMESTRE “B”

REPORTE

JUSTIFICACION CREACION DE LOGOTIPO OBJETIVO :

COLOR TIPOGRAFIA

SIGNOS

TEXTURAS

FORMAS

LINEAS

El objetivo de éste trabajo es mejorar el logotipo para atraer más clientes y que sea más atractivo para el público en general.

Negro: Tehuana es elegante y sofisticado. Verde: Es un lugar para relajarse. Blanco: Limpio y cálido. Rojo: Refleja las raíces y la pasión. Rosa: Energía y juventud. Amarillo: Luz y motivación.

Lila: Sofisticación.

Gestuales: Imitan la escritura a mano, pero ha sufrido correcciones y ajustes a lo largo del tiempo.

Romana: Originalmente tallada en piedra.

El logotipo contiene signos de exclamación para resaltar el nombre del lugar.

Textura Visual: Impresa parecida a la realidad, ya que parece estar escrito en una pared.

Espacio: Es el área entre el contorno de un elemento.

Formas: Diferentes tonalidades que emplean los elementos como los tipos de flores.

Curvas: Al resaltar el contorno del logotipo, y las letras se encuentran sobre una línea curva invisible, para tomar forma. Rectas: Las letras y el fondo.

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE BUAP: 8109 SEMESTRE “B”

REPORTE

Colores Elegidos Tehuana utiliza estos colores debido a: VERDE: Puedes acudir por un café, un trago, un bocado simplemente para relajarte, sentirte en confianza, fresco.

NEGRO: Es un lugar elegante, moderno y sofisticado. Crea un drama y connota sofisticación.

BLANCO: Limpio, cálido ya que te hace sentir como en casa, honrado.

ROJO: Es apasionada en cuanto a sus raíces, a su cultura, un lugar alegre como todo Oaxaqueño.

ROSA:

Energía,

juventud,

es

un

lugar

que

garantiza

diversión.

AMARILLO: Este color comunica optimismo, luz, calidez, motiva y estimula la energía creativa, el ojo ve los amarillos brillosas antes que otro color.

LILA:

Evoca

misterio,

sofisticación,

espiritualidad

y

realeza.

AZUL: Es percibido como confiable, financieramente responsable y seguro.

Asociado con el cielo y mar, es sereno y aceptado universalmente, inspira confianza.

NARANJA: Exuberancia, diversión y vitalidad, los tonos naranjas funcionan bien para los restaurantes.

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE BUAP: 8109 SEMESTRE “B”

REPORTE

PÁGINA WEB: ESTRUCTURA  ETIQUETA <DIV> - </DIV> Define una división y permite agrupar varios elementos en el bloque.

Se emplea para definir un bloque contenido de la página. <div id="capa"style= "position:absolute; top: 160 ; left:1050px; width:280px; height:550px; border: 8px solid green;">

1.

Para nuestra primera sección el 1er. Div, contiene la Historia de la página y está definida por un borde en medida de pixeles,

<div id="capa"style= "position:absolute; top: 210 ; left:1050px; width:280px; height:550px; border: 8px solid black;">

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE BUAP: 8109 SEMESTRE “B”

REPORTE

<div id="capa"style= "position:absolute; ; left:0px; width:1330px; height:100px; border: 6px solid white;"> </div> <div id="capa"style= "position:absolute; top: 130px; width:443px; height:250px; border: 8px solid black;">

LEFT:443;

<div id="capa"style= "position:absolute; ; left:0px; width:1330px; height:100px; border: 6px solid white;"> </div> </div> <div id="capa"style= "position:absolute; top: 160 width:1330px; height:50px; border: 8px solid white;">

;

left:0px;

<div id="capa"style= "position:absolute; top: 130px; width:483px; height:280px; border: 8px solid black;">

LEFT:0;

</div> <div id="capa"style= "position:absolute; left:1050px; width:280px; height:150px; border: 8px solid black;"> /div> </div> <div id="capa"style= "position:absolute; right:290px; width:730px; height:150px; border: 8px solid black;"> </div> <div id="capa"style= "position:absolute; top: 230px; right:290px; width:730px; height:550px; border: 8px solid black;"> </div>

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE BUAP: 8109 SEMESTRE “B”

REPORTE

<div id="capa"style= "position:absolute; right:1035px; width:300px; height:150px; border: 8px solid black;"> </div> <div id="capa"style= "position:absolute; top: 210px; right:1035px; width:300px; height:300px; border: 8px solid black;"> </div> <div id="capa"style= "position:absolute; top: 510px; right:1035px; width:300px; height:250px; border: 8px solid black;"> <img src="trova.jpg" border="0" left="200px" width="300" height="200" border:8px pink > </div> </DIV> <div id="capa"style= "position:absolute; top: 1050px; LEFT:0px; width:1330px; height:50px; border: 8px solid black;"> </div> <div id="capa"style= "position:absolute; right:1035px; width:300px; height:150px; border: 8px solid black;"> <div id="capa"style= "position:absolute; top: 210 ; left:1050px; width:280px; height:550px; border: 8px solid black;"> <div id="capa"style= "position:absolute; top: 160 width:1330px; height:50px; border: 8px solid white;">

;

left:0px;

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE BUAP: 8109 SEMESTRE “B”

REPORTE

En la etiqueta Div que se estuvo utilizando a continuación, varían los tamaños ya que al diseñar esta página se especificó un aproximado, dentro de la etiqueta se aclara este, especificando ancho y largo, al igual que del lado que te gustaría y el color que vas a elegir, esto con el fin de que tu bloque quede donde lo deseas.

El Div, es una etiqueta que tiene que cerrarse para que esta pueda leerse y salir correctamente.

Es importante mencionar que no importa si utilizas letras mayúsculas o minúsculas.

Estructura Terminada: 9 <DIV> 3. Y se cierra cada div con la etiqueta </DIV> así continuamos con las etiquetas que deseemos colocar en nuestra página, podemos modificar el color, el ancho (width), el largo (height) y la posición ya sea derecha (right) o izquierda (left).

1.2 Bloc de Notas <DIV>

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE BUAP: 8109 SEMESTRE “B”

REPORTE

ETIQUETAS DE FORMATO Fondos Color – Tipo de Letra –Marquesinas

 FONDO COLOR <body bgcolor=pink>

Aprenderemos a colocar fondo a nuestra página con las siguientes etiquetas. Bgcolor - Background <body bgcolor"PINK”> <body bgcolor=black vlink="black"> Aplica color de fondo en nuestra página, también puede ponerse una imagen.

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE BUAP: 8109 SEMESTRE “B”

REPORTE

 TEXTO (Tipo de Letra)

Esta etiqueta sirve para elegir el tipo de letra y tamaño que deseas en tu página. <FONT FACE= "Eras Light ITC" SIZE= 4 COLOR= "black"> </FONT> <FONT FACE= "Eras Light ITC" SIZE= 4 COLOR= "white">

SIZE: Indica el tamaño de la letra COLOR: El color desees colocar.

que

FONT FACE= "Eras Light ITC”: Puedes colocar la fuente de letra que tu desees.

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE BUAP: 8109 SEMESTRE “B”

REPORTE

 MARQUESINAS MARQUEE> Puede servirnos para hacer animaciones en páginas sencillas.

El uso más común es el de las tablas para dar forma a la disposición de los textos en la página.



ETIQUETAS

o <h1> </h1>

Titulos encabezados 2. Etiquetas

o

2.1 Bloc de Notas

o <Font-size> </Font>

Tamaño de la fuente o <Font-face>

Tipo de fuente o <Font-size>

Tamaño de la fuente

2. 2 Página Web

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE BUAP: 8109 SEMESTRE “B”

REPORTE

o <br> </br>

Indica un salto de línea o ALIGN="left" , ALIGN="right"

Alinea a la izquierda o derecha o WIDTH="390" , hight=”345”

Marcan el ancho y alto o COLOR="#0000FF"

Especifica el color o <span style=”color: blue” >

Define el color de cada palabra o letra en una línea

o Top

Indican la distancia vertical en la que se colocara la capa o <body bgcolor=blue> Aplica color al fondo de tu página o <body background=”fondo.jpg”> Inserta una imagen como fondo o <p> </p>

Alinean el contenido de la etiqueta

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE BUAP: 8109 SEMESTRE “B”

REPORTE

ETIQUETAS BÁSICAS Videos – Audio – Imágenes - Tablas –Listas 

VIDEO (EMBED)

Para insertar el vídeo anterior, se podría escribir:

<div id="capa"style= "position:absolute; right:1035px; width:300px; height:150px; border: 8px solid black;"> <img src="tehuana.jpg" border="0" left="150px" width="300" height="150" border:6px pink <embed src="TEHUANA.MP4" width:"1500px" height:"500px" controls autostart= "true preload="none" loop="true"> </embed>

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE BUAP: 8109 SEMESTRE “B”

REPORTE

ATRIBUTOS: SRC: Indican la ruta en la que se ubica el sonido, también puedes introducir el nombre con extensión mp4, avi, etc.

AUTOSTART: La canción comienza automáticamente.

LOOP: TRUE el archivo se reproduce continuamente CONTROLS: Aparece un reproductor multimedia

Estructura en bloc de Notas: VIDEO

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE BUAP: 8109 SEMESTRE “B”

REPORTE



AUDIO (SONIDO)

<BGSOUND> Sonido de fondo <bgsound la etiqueta <bgsound>, que se utiliza para incluir sonido de fondo.

1.<bgsound scr””midnight/city.mid” 1.<bgsound src="midnight/city.mid" loop="-1"> ATRIBUTOS: SRC: Indican la ruta en la que se ubica el sonido, también puedes introducir el nombre con extensión mp3 .

AUTOSTART: La conción comienza automáticamente.

LOOP: TRUE el archivo se reproduce

continuamente

<EMBED SRC="SONG.mp3" controls AUTOSTART=true LOOP=true WIDTH="1300" HEIGHT="50">

Estructura en bloc de Notas: SONIDO

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE BUAP: 8109 SEMESTRE “B”

REPORTE



IMÁGENES

<IMG SRC> Para agregar una imagen a nuestra página usaremos las siguientes referencias: Donde "imagenHTML.jpg" es la imagen que vamos a colocar. Deberá estar ubicada en el mismo directorio. <img src="BAR.jpg" border="0" left="0px" width="310" height="160" border:8px solid red> ATRIBUTOS: BORDER: Indica si desea ponerle algún marco a tu imagen, se mide en px.

LEFT: Se refiere a la ubicación de la imagen (left o right) WIDTH:Ancho de la imagen.

HEIGHT: Alto de la imagen.

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE BUAP: 8109 SEMESTRE “B”

REPORTE

GALERIA DE IMÁGENES:

<div id="capa"style= "position:absolute; top: 730px; LEFT:0px; width:1330px; height:250px; border: 8px solid RED;"> <BR> </BR>



INDICA UN ESPACIO

Se insertan las imágenes: <img src="mezcal.jpg" border="0" height="200" border:8px pink > <img src="t.jpg" border="0" height="200" border:8px pink > <img src="mezc.jpg" border="0" height="200" border:8px pink >

left="200px" width="330" left="200px"

width="330"

left="200px" width="330"

<img src="chapulin.jpg" border="0" left="200px" width="320" height="200" border:8pxpink > </div>

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE BUAP: 8109 SEMESTRE “B”

REPORTE



TABLAS

Una tabla HTML puede ser considerada, de manera simple, como un grupo de filas donde cada una de ellas contiene un grupo de celdas. <table> <table> <tr> <td width="2000"><font face= "Eras Light ITC" size="5" color="white"> <a href="eat.html"> EAT </a> </font> </td> <td width="2000"> <font face= "Eras Light ITC" size="5" color="white"><a href="drink.html">DRINK </a></td> <td width="2000"><font face= "Eras Light ITC" size="5" color="white"><a href="promo.html">PROMOTIONS</a></td> <td width="2000"> <font face= "Eras Light ITC" size="5" color="white"><a href="formulario.html">TALK </a></td> <td width="10"> <font face= "Eras Light ITC" size="5" color="white"><a href="baner.html">GUELAGUETZA </a></td> </tr>

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE BUAP: 8109 SEMESTRE “B”

REPORTE



LISTAS

Las listas representan uno de los instrumentos más difundidos para organizar la información dentro de los sitios web. Una de sus características principales es la de proporcionar un cuadro claro y sintético del tema tratado.

<OL> <LI> <img width="330" <LI> <img width="330" <LI> <img width="330" </OL>

src="promo.jpg" border="0" RIGTH="0px" height="460" border:8px pink > </TD> src="promo.jpg" border="0" RIGTH="0px" height="460" border:8px pink > </TD> src="promo.jpg" border="0" RIGTH="0px" height="460" border:8px pink > </TD>

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE BUAP: 8109 SEMESTRE “B”

REPORTE

SITIO WEB

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE BUAP: 8109 SEMESTRE “B”

REPORTE

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE BUAP: 8109 SEMESTRE “B”

REPORTE

SITIOS WEB HIPERVINCULOS Y FORMULARIOS HIPERVINCULOS El hipervínculo dentro de la página tiene la función de enlazar a 2 páginas, y se utiliza para enlazar el sitio web con otras páginas.

La estructura utilizada fue la siguiente: <table> <tr> <td width="2000"><font face= "Eras Light ITC" size="5" color="white"> <a href="eat.html"> EAT </a> </font> </td> <td width="2000"> <font face= "Eras Light ITC" size="5" color="white"><a href="drink.html">DRINK </a></td> <td width="2000"><font face= "Eras Light ITC" size="5" color="white"><a href="promo.html">PROMOTIONS</a></td> <td width="2000"> <font face= "Eras Light ITC" size="5" color="white"><a href="formulario.html">TALK </a></td> <td width="10"> <font face= "Eras Light ITC" size="5" color="white"><a href="baner.html">GUELAGUETZA </a></td> </tr> </FONT> </table>

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE BUAP: 8109 SEMESTRE “B”

REPORTE

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE BUAP: 8109 SEMESTRE “B”

REPORTE

FORMULARIOS Un formulario, permite introducir los datos de los quien visita la página y estos son enviados a un servidor donde los datos son recolectados.

La estructura utilizada fue la siguiente: TALK <form action="http://www.librosweb.es/maneja_formulario.php" method="post"> Nombre: <input type="text" name="nombre" value=""/> Email : <input type="text" name="nombre" value=""/> Teléfono: <input type="text" name="nombre" value=""/> Mensaje: <textarea name="Mensaje" rows="10" cols="40"> Escriba aquí sus comentarios </textarea> </form> <form method="get" action="http://aprenderaprogamar.com/action.php"> Sexo: <input name="intereses"type="radio" value="rbipeliculas"/> <input name="intereses"type="radio" value="rbilibros"/> <input type= "submit" value="Enviar" /> </form>

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE BUAP: 8109 SEMESTRE “B”

REPORTE

SITIO WEB- INVESTIGACION FORMULARIO Las páginas webs no son solo permiten presentar documentos de forma más o menos atractiva al destinatario final, sino que también proporcionan elementos para interactuar con él. De esta manera el usuario final puede enviar su opinión de la página al autor, o realizar una compra en línea. Estos elementos se conocen como formularios y seguro que todos los habéis visto y utilizado alguna vez. Por ejemplo este sencillo formulario Tu nombre: ¿Estás registrado?

Si No Enviar

Borrar

<FORM ACTION="" METHOD="POST" name="formul"> Tu nombre:<BR> <INPUT NAME="nombre" TYPE="TEXT" SIZE="32"/><BR> &iquest;Est&aacute;s registrado?<br> <label><input type="radio" name="Si" value="1">Si</label><br> <label><input type="radio" name="Si" value="0">No</label><br><BR> <INPUT TYPE="Submit" VALUE="Enviar"> <input name="Reset" type="reset" id="Reset" value="Borrar"> </FORM> El formulario está formado por una serie de elementos (cajas de texto, casillas de verificación, botones...) encerrados entre las etiquetas <FORM> </FORM>. Como verás en esta etiqueta existen varios parámetros como son: ACTION la acción que se ejecutará al pulsar el botón de enviar. Habitualmente será una URL a un programa CGI encargado de procesar los datos del formulario. Puede ser también mailto: seguido de una dirección de correo electrónico, en este caso el formulario se enviará por correo, en cuyo es recomendable añadir el parámetro ENCTYPE="text/plain" para que el mensaje sea fácil de leer.

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE BUAP: 8109 SEMESTRE “B”

REPORTE

METHOD indica como se enviarán losa datos del formulario al programa que los procese: POST de forma interna (oculta) y GET añadido a la dirección URL del programa. Si usas el formulario para un mailto: debes usr el método POST NAME es el nombre que identifica al formulario, útil si se usan scripts dentro de la página.

Cajas de texto Los controles o cajas de texto permiten al usuario escribir texto en el formulario.

Pueden ser cajas de una solo línea o cuadros de texto con varias líneas. Las primeras usan la etiqueta <INPUT> y pueden ser de texto simple (se ve lo que escribimos) o de tipo password (lo que escribimos es visto como una serie de asteriscos). <INPUT TYPE=TEXT> <INPUT TYPE=PASSWORD> Ojo, el dato escrito en el segundo campo no se ve pero eso no quiere decir que esté codificado en ninguna manera. Ambos tipos comparten todos sus atributos que son: Parámetro SIZE

Significado Tamaño en columnas de la caja de texto.

MAXLENGTH Número máximo de caracteres que se pueden teclear.

VALUE

Texto por defecto que aparecerá en el campo.

Pero si necesitamos que el usuario escriba más llineas de texto pues usamos la etiqueta <TEXTAREA></TEXTAREA>:

<TEXTAREA>Comienza a escribir </TEXTAREA>

Si escribimos algun texto dentro de esta etiqueta, ese texto aparecerá por defecto en ese area de texto. Admite estos parámetros:

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE BUAP: 8109 SEMESTRE “B”

REPORTE

Parámetro

Utilidad

ROWS

Filas que ocupará la caja de texto.

COLS

Columnas que ocupará la caja de texto.

Opciones Para que el usuario pueda marcar una de entre varias opciones podemos usar un campo INPUT de tipo RADIO. En nuestro ejemplo lo hemos usado: Si<INPUT NAME="Registrado" TYPE=RADIO VALUE="1"><BR> No<INPUT NAME="Registrado" TYPE=RADIO VALUE="0"><BR>

Si No

Fíjate que ambos INPUT usan el mismo atribuyto NAME, de esa manera el navegador los reconoce como un juego de respuestas alternativas.

Parámetro

Significado

VALUE

Este es el valor que asignará a la variable.

CHECKED

Si lo indicamos en una de las opciones esta será la que esté activada por defecto.

Listas de opciones Hay una alternativa al control de selección de alternativas: las listas desplegables.

Mediante este control el usuasrio puede seleccionar una opción de entre un grupo que aparece en una lista desplegable. La lista se encierra en etiquetas <SELECT></SELECT>, y las opciones se poenen en etiquetas <OPTION></OPTION>: <SELECT NAME="Idioma"> <OPTION>Español</OPTION> <OPTION>Inglés</OPTION> <OPTION>Francés</OPTION> <OPTION>Alemán</OPTION> </SELECT> Los parámetros que admite SELECT son las siguientes:

Español

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE BUAP: 8109 SEMESTRE “B”

REPORTE

Parámetro SIZE

Significado El número de opciones que podremos ver. Si es mayor que 1 veremos una lista de selección con un scroll y, si no, veremos una lista desplegable.

MULTIPLE Si lo indicamos podremos elegir más de una opción, para ello el usuario utilizará la tecla CTRL y el botón activo del ratón.

Y OPTION estos: Parámetro VALUE

Significado Este es el valor que asignará a la variable.

SELECTED La opción con esta propiedad será la que aparezca seleccionada por defecto.

Botones del formulario Existen dos clases e botones: uno que se utiliza para poner en marcha la operación indicada por ACTION (botones submit) y otro que sirve para resetear el formulario borrando el contenido de todos los controles: Enviar

<INPUT TYPE=SUBMIT> <INPUT TYPE=RESET>

Restablecer

En ambos casos su puede usar el parámetro VALUE para el texto que aparece dentro del botón. El botón de submit puede ser una imagen, por ejemplo <input name="imageField" type="image" src="imgs/botonel.gif" width="85" height="46" border="0"> Que se vería Este botón actua como un botón tipo SUBMIT, pero envía con los datos del formulario las coordenadas X Y del punto de la imagen donde pulsó el usuario.

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE BUAP: 8109 SEMESTRE “B”

REPORTE

Marcas de verificación Son controles parecidos a los campos de opciones pero que no van agrupados, o sea no son excluyentes, Sirven para que el usuario coloque una marca de si o no (verdadero o falso, marcado o no marcado). Lo podremos conseguir por medio de controles de confirmación: ¿Te gusta el <INPUT NAME="Opina" TYPE=CHECKBOX>¿Te gusta el curso? curso?

Si queremos que el control esté activado por defecto le añadiremos el parámetro CHECKED.

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE BUAP: 8109 SEMESTRE “B”

REPORTE

HIPERVINCULO Insertar un hipervínculo que vaya a otro documento, archivo o página Web Puede crear un hipervínculo que vaya a un archivo existente o a un archivo nuevo.

Una vez especificado el nombre para el archivo nuevo, puede elegir entre abrir el archivo para modificarlo inmediatamente o volver al archivo más adelante. En cualquier caso, el archivo se crea automáticamente.

1. Seleccione el texto u objeto de dibujo que desee presentar como hipervínculo y haga clic en Insertar hipervínculo .

2. Realice una de las siguientes acciones: 1. Para crear un vínculo a un archivo o página Web existente, haga clic en Archivo o página Web existente, en Vincular a.

2. Para crear un vínculo a un archivo que no se ha creado todavía, haga clic en Crear nuevo documento, en Vincular a.

3. Realice una de las siguientes acciones: 1. Si ha seleccionado Archivo o página Web existente en el paso 2, busque y seleccione el archivo al que desee crear el vínculo.

2. Si ha seleccionado Crear nuevo documento en el paso 2, escriba el nombre del archivo nuevo. También puede especificar la ruta al archivo nuevo y elegir si desea abrirlo ahora o más adelante para modificarlo.

4. Para asignar una sugerencia que se muestre al dejar el mouse encima del hipervínculo, haga clic en Sugerencia y escriba el texto que desee. Si no se especifica, Word utiliza la ruta o la dirección del archivo como sugerencia.

5. Haga clic en Aceptar dos veces.

Notas 



Para crear rápidamente un hipervínculo a una página Web sin saber la dirección. Haga clic en Página Web para cambiar al Explorador Web, abra la página del World Wide Web que desee y, a continuación, vuelva a Word.

Si conoce la dirección de una página Web existente, puede escribirla directamente en el documento. Por ejemplo, escriba www.pntic.mec.es y Word creará automáticamente el vínculo.

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE BUAP: 8109 SEMESTRE “B”

REPORTE

Utilizar hipervínculos Puede mejorar la calidad de las páginas Web mediante la inserción de hipervínculos, que pueden consistir en gráficos o en texto coloreado o subrayado.

Los hipervínculos se representan mediante imágenes "interactivas" o texto, donde el usuario hace clic para ir a otra ubicación. La ubicación puede ser el disco duro del usuario, la intranet de su organización o Internet, por ejemplo, una página de World Wide Web. Así, puede crear un hipervínculo en un archivo Word que lleve a un gráfico de Microsoft Excel que proporciona más detalles. 

Puede insertar un hipervínculo que vaya a uno de los siguientes puntos:

A otro documento, archivo o página Web Inserte hipervínculos que vayan a otro documento de Word o a otra página Web, a una presentación de PowerPoint, o a un libro de Excel. Los hipervínculos también pueden utilizarse para ir a archivos multimedia, tales como archivos que contengan sonidos y vídeos. Insertar un hipervínculo a otro documento, archivo o página Web. A una dirección de correo electrónico Agregue un hipervínculo a una dirección de correo electrónico. Cuando el usuario hace clic en el hipervínculo, Word crea un nuevo mensaje de correo electrónico con la dirección de la línea Para. Word puede crear un nuevo mensaje sólo si el usuario tiene acceso al correo electrónico. Insertar un hipervínculo a una dirección de correo electrónico.

A una ubicación específica de otro documento o página Web Si un documento o página Web contiene marcadores, puede ir a esa ubicación exacta. Por ejemplo, si tiene tres tablas en una página Web, puede establecer el hipervínculo para ir directamente a la segunda tabla. Insertar un hipervínculo a una ubicación específica en otro documento o página Web. A una ubicación del documento actual o de la página Web Utilice hipervínculos para desplazarse fácilmente por el documento actual o por la página Web. Insertar un hipervínculo a una ubicación del documento actual o de la página Web.

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE BUAP: 8109 SEMESTRE “B”

REPORTE

ENSAYO CONOCIMIENTOS ADQUIRIDOS La creacion de esta pagina nos enseño el uso de cada etiqueta de HTML para crear una pagina,es un tema completamente extenso,complicado y que se tiene que hacer minusiosamente.

Este ha sido beneficioso ya que hemos obtenido conocimientos por este,realmente hemos aprendido a realizar una pagina web y autilizar el lenguaje HTML que es con el que se ha creado, la pagina anteriormente presentada.

Es asombroso como cada etiqueta cuenta con su funcion,pero tambien es un poco estresante que con una simple coma que se te olvide colocar en tu trabajo este se heche a perder,hay que revisar cada etiqueta minusiosamente para que este funcione y la pagina web pueda verse.

Las herramientas son extremadamente confusas,y dificiles de comprobar,cada herramienta con cada funcion es unica.

Crear una pagina web requiere de una persona creativa y con mucha paciencia.

Este trabajo deberia de ser muy reconocido.Hay que tener muchas buenas ideas para poder lograr una con éxito.

Estubo increible el proyecto de aprender hacer una pagina es algo mas que podemos decir que sabemos realizar algo en lo que podemos defendernos ya que sabemos hacerlo.

Fue una buena ultima practica,pero esta muy complicada,pero nada es facil,y mientras se tenga conocimiento de como hacerlo y las cosas este se puede realizar.

Aun con todas los imprevistos para realizarla esta se termino a tiempo y con un muy buen resultado.

Arroyo Mendoza Jessica Sotomayor Garcia Stephannie Shahela.

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE BUAP: 8109 SEMESTRE “B”

REPORTE