Descargar la presentación
La descarga está en progreso. Por favor, espere
1
M.C. MARIA ALEJANDRA ROSAS TORO SAUCEDO AGUILAR SERGIO IVAN
PROGRAMACION WEB M.C. MARIA ALEJANDRA ROSAS TORO UNIDAD 2 OLMEDO LUCAS IRIDIAN SAUCEDO AGUILAR SERGIO IVAN MAR COBOS MIGUEL ANGEL ING. TIC 6° SEMESTRE
2
2.6 ESTRUCTURA DE UN DOCUMENTO HTML
3
2.6 ESTRUCTURA DE UN DOCUMENTO HTML
Una página web está formada por una serie de páginas enlazadas entre sí, es decir, vamos a tener una serie de ficheros y cada uno de esos ficheros va a contener texto, imágenes, etc. Así que lo primero que deberíamos hacer es un boceto en papel con todo lo que va a contener el documento. Una vez claro este contenido hay que pensar en la estructura de la página y en la organización de los ficheros.
4
Normalmente hay una página principal, que se suele llamar index
Normalmente hay una página principal, que se suele llamar index.html, con enlaces a otras páginas, que tendrán a su vez otros enlaces y así sucesivamente. Es importante que todo esté bien organizado tanto para que a un usuario le resulte cómodo navegar por ella, como para que al autor le sea fácil poder modificarla o añadir información.
5
Un documento HTML está formado por tres partes:
Una línea que contiene información sobre la versión de HTML (no siempre). Una cabecera (delimitada por el elemento HEAD). Un cuerpo, con el contenido del documento (delimitado por el elemento BODY o FRAMESET).
6
Todo el documento tiene que ir entre las etiquetas <HTML></HTML>
El elemento <HEAD></HEAD> contiene información sobre el documento actual, como el título, palabras clave que utilizan los motores de búsqueda, y otros datos que no se consideran parte del contenido del documento porque no se visualizan en el navegador. Sin embargo, pueden poner esta información a disposición de los usuarios a través de otros mecanismos.
7
Todos los documentos HTML deben tener un elemento <TITLE></TITLE> en la sección HEAD. Los autores deberían utilizar el elemento TITLE para identificar los contenidos de un documento, con lo que se aconseja poner títulos que reflejen con claridad el contenido del documento. Este título puede contener caracteres, pero no trozos de código.
8
La etiqueta <BODY></BODY> va a contener el contenido del documento. Puede tener los siguiente atributos: background = archivo. Establece como fondo de la página la imagen especificada en el archivo. bgcolor = color. Establece un color de fondo para la página. text = color. Este atributo establece el color del texto link = color. Este atributo establece el color del texto de los vínculos no visitados vlink = color. Este atributo especifica el color del texto que de los vínculos visitados alink = color. Este atributo especifica el color del texto que de los vínculos cuando son seleccionados por el usuario.
9
Es decir, la estructura básica de un documento HTML sería:
10
2.7 FORMULARIOS
11
2.7 FORMULARIOS Un formulario es un documento con espacios (campos) en donde se pueden escribir o seleccionar opciones. Cada campo tiene un objetivo, por ejemplo, el campo "Nombre" se espera que sea llenado con un nombre, el campo "año de nacimiento", se espera que sea llenado con un número válido para un año, etc. Los formularios presentan una visión ordenada de múltiple información sobre algo, y son útiles para llenar bases de datos.
12
En internet y sistemas informáticos, los formularios pueden ser llenados de forma online con validación de datos, y son muy útiles para las encuestas, registración de usuarios, ingreso a sistemas, suscripciones, etc. Los formularios por internet son llamados formularios web, y generalmente son hechos a través de etiquetas HTML, aunque también existen otros medios como Flash, Java, etc.
13
Los formularios interactivos permiten a los autores de páginas Web poner elementos interactivos en sus páginas, por ejemplo, para recibir mensajes de sus lectores, de forma similar a las cartas de respuestas que se encuentra en algunas revistas. El lector escribe la información rellenando campos o haciendo clic sobre botones, y luego presiona un botón de envío para enviarla a una dirección URL que se suele dirigir a una dirección de correo electrónico o a un script dinámico Web como PHP, ASP o CGI.
14
La etiqueta FORM Los formularios están delimitados con la etiqueta <FORM> ... </FORM>, que permite reunir varios elementos de formulario, como botones y casillas de texto
15
Debe poseer los siguientes atributos:
METHOD indica cómo se enviarán las respuestas "POST" es el valor que envía los datos al agente de procesamiento almacenándolos en el cuerpo del formulario, en tanto que "GET" envía los datos agregándolos a la dirección URL y separándolos de la dirección con un signo de interrogación (para aprender más sobre los métodos POST y GET, consulte el artículo sobre protocolo HTTP) ACTION indica la dirección a la que se enviará la información (un script CGI o dirección de correo
16
Esta es la sintaxis para la etiqueta FORM:
<FORM METHOD="POST" o "GET" ACTION="url" ENCTYPE="x-www-form-urlencoded"> ... </FORM>
17
Dentro de la etiqueta FORM
La etiqueta FORM actúa como una especie de contenedor para almacenar elementos que permiten al usuario seleccionar o introducir datos. Todos los datos se enviarán a la dirección URL indicada en el atributo ACTION de la etiqueta FORM, por el método indicado en el atributo METHOD. Se puede insertar cualquier elemento HTML en una etiqueta FORM (como texto, botones, tablas y enlaces), pero los elementos interactivos son los más interesantes.
18
Estos elementos interactivos son:
La etiqueta INPUT: Todos los botones y casillas de texto La etiqueta TEXTAREA: una casilla de texto La etiqueta SELECT: una lista de opciones múltiples
19
La etiqueta INPUT La etiqueta INPUT es una etiqueta esencial para los formularios, ya que se usa para crear muchos elementos “interactivos”. La sintaxis de esta etiqueta es la siguiente: <INPUT type="Nombre de campo" value="Valor predeterminado" name="Nombre de elemento">
20
La etiqueta TEXTAREA La etiqueta TEXTAREA se usa para definir un cuadro de texto más grande que la línea simple propuesta por la etiqueta INPUT. Esta etiqueta tiene los siguientes atributos.
21
cols: representa el número de caracteres que puede contener un línea
rows: representa el número de líneas. name: representa el nombre asociado con el cuadro de texto, que permite su identificación en el par nombre/valor. readonly: impide que el usuario modifique el texto predeterminado en el campo. value: representa el valor predeterminado que se enviará al script si el usuario no ha escrito nada en el cuadro de texto.
22
La etiqueta SELECT La etiqueta SELECT sirve para crear una lista desplegable de elementos (especificados por las etiquetas OPTION dentro de ella). Los atributos de esta etiqueta son.
23
name: representa el nombre asociado con la casilla de texto, que permite su identificación en el par nombre/valor. disabled: crea un lista desactivada, que aparece atenuada size: representa el número de líneas de la lista (este valor puede ser más grande que el número de elementos reales de la lista). multiple: Permite al usuario seleccionar varios campos de la lista
24
Ejemplo de formulario Los formularios pueden ubicarse en una página usando tablas (algo recomendable para una presentación profesional). Este es un ejemplo que resume los puntos precedentes, mostrándole cómo disponer un formulario en una página Web mediante una tabla.
25
<FORM method=post action="cgi-bin/script.pl">
Registro de un usuario<TABLE BORDER=0><TR> <TD>Apellido</TD> <TD> <INPUT type=text name="apellido"> </TD></TR><TR> <TD>Nombre</TD> <TD> Mujer: <INPUT type=radio name="género" value="M"> <br>Mujer: <INPUT type=radio name="género" value="F"> </TD></TR><TR> <TD>Ocupación</TD> <TD> Enviar </TD></TR><TR> <TD COLSPAN=2> <INPUT type="submit" value="Enviar"> </TD></TR></TABLE></FORM>
26
Esto es lo que aparece en la pantalla:
27
FUENTES DE INFORMACION
Presentaciones similares
