• Author / Uploaded
• HeadShoot13

• Categories
• Servidor web
• HTML
• Entorno de desarrollo integrado
• Red mundial
• Tecnología

Citation preview

---

SEPARATA DEL CURSO INGENIERÍA WEB

UNIDAD I: DISEÑO Y CONSTRUCCION DE PAGINAS WEB CON XHTML – I

UNIDAD II: DISEÑO Y CONSTRUCCION DE PAGINAS WEB CON XHTML- II

UNIDAD III: PROGRAMACION PHP

INTRODUCCIÓN Esta separata describe los fundamentos del desarrollo de aplicaciones web, que no son sino aplicaciones basadas en el modelo Cliente/Servidor donde la comunicación con el usuario se hace utilizando páginas web. El código de la aplicación se puede ejecutar en el cliente, en el servidor, o distribuirse entre ambos. Suelen utilizar una Base de Datos para organizar y facilitar el acceso a la información. Las ventajas que presentan son: su facilidad de manejo y de desarrollo, accesibilidad y portabilidad. Dentro de las tecnologías a utilizar en el cliente están: los lenguajes de guiones (como JavaScript), las Applets Java y ActiveX. En el servidor PHP.

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia | www.ucvlima.edu.pe

2

UNIDAD I: DISEÑO Y CONSTRUCCION DE PAGINAS WEB CON XHTML – I 1.1. CONCEPTOS FUNDAMENTALES DE WEB. 

¿Qué es una página web?

Una página Web es un documento multimedia, que puede llevar incorporado textos, imágenes, sonidos y animaciones. Una característica importante es que se puede acceder a los contenidos, propios ó externos, por medio de hipervínculos ó enlaces. 

¿Qué necesitamos para visualizar páginas web?

Cuando accedemos a Internet existen una serie de ordenadores conectados permanentemente que se llaman Servidores Web. En estos ordenadores están almacenadas las páginas Web tanto de usuarios como de empresas ofreciendo información, productos, etc.

Figura 01: Elementos necesarios para visualizar páginas web

Nosotros, cuando nos conectamos a Internet para solicitar una determinada página Web desde un ordenador, nos convertimos en Clientes Web. El programa que necesitamos para visualizar dicha página se llama Navegador. Este programa se encarga de solicitar al servidor correspondiente una determinada página. La transferencia de información entre Cliente-Servidor se realiza mediante un protocolo específico denominado HTTP. En la actualidad para visualizar páginas Web existen diferentes navegadores: Netscape Navigator, Mozilla, Opera, Internet Explorer, etc.

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia | www.ucvlima.edu.pe

3

Las páginas Web están escritas en un lenguaje de programación llamado HTML. Se trata de un conjunto de marcas que se van intercalando entre el texto para que el navegador sepa qué debe presentar en pantalla en todo momento.



Sitio Web

Un sitio Web está formado por un conjunto de páginas Web. En analogía, un sitio Web es, por ejemplo, una revista, mientras que una página Web es una de las páginas que constituyen dicha revista. Cualquier sitio Web publicado en Internet puede ser visto desde cualquier parte del mundo. Las posibilidades que esto ofrece son inimaginables. Los propósitos para los que nos podemos servir de Internet y las tecnologías de la información en general vienen a cubrir todo el espectro de propósitos, ya sea para fines personales, de ocio, académicos, laborales, empresariales, etc. Su gran potencialidad dependerá pues de lo inteligentemente que empleemos dicha tecnología.

Se pueden diferenciar dos grandes grupos de sitios Web, los estáticos y los dinámicos.



Web Estática

Los sitios Web estáticos son aquellos sitios enfocados principalmente a mostrar una información permanente, donde el navegante se limita a obtener dicha información, sin que pueda interactuar con la página Web visitada, las Web estáticas están construidas principalmente con hipervínculos o enlaces (links) entre las páginas Web que conforman el sitio, este tipo de Web son incapaces de soportar aplicaciones Web como gestores de bases de datos, foros, consultas on-line, e-mails inteligentes. Esta es una opción más que suficiente para aquellos sitios Web que simplemente ofrecen una descripción de su empresa, quiénes somos, donde estamos, servicios, etc. Ideal para empresas que no quieren muchas pretensiones con su sitio Web, simplemente informar a sus clientes de sus productos y su perfil de empresa. La principal ventaja de este tipo de páginas es lo económico que resulta crearlas , con un diseño vistoso e incluyendo las imágenes y el texto con el cual queremos informar a los navegantes, un sitio web estático se puede crear fácilmente sin necesidad de ningún tipo de programación especial (PHP, ASP, Java, etc). La gran desventaja de los sitios Web estáticos reside en lo laborioso que resulta su actualización así como la pérdida de potentes herramientas soportadas con bases de datos, como pueden ser la creación de registros históricos de los clientes, pedidos online, etc. “En esta asignatura no desarrollaremos sitios web estáticos”.

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia | www.ucvlima.edu.pe

4



Web Dinámica (Aplicación Web)

Los sitios Web dinámicos son aquellos que permiten crear aplicaciones dentro de la propia Web, otorgando una mayor interactividad con el navegante. Aplicaciones dinámicas como encuestas y votaciones, foros de soporte, libros de visita, envío de emails inteligentes, reserva de productos, pedidos on-line, atención al cliente personalizada, etc. El desarrollo de este tipo de Web es más complicado, pues requiere conocimientos específicos de lenguajes de programación así como creación y gestión de bases de datos, pero la enorme potencia y servicio que otorgan este tipo de páginas hace que merezca la pena la inversión y esfuerzo invertidos respecto a los resultados obtenidos. Una gran ventaja que proporciona crear sitios Web dinámicos es la posibilidad de trabajar con bases de datos, las cuales puede almacenar cualquier tipo de datos que a usted le interese para posteriormente realizar cualquier tipo de consultas. ¿Le gustaría saber las preferencias y opiniones de los clientes de sus productos y servicios? ¿Cuál es su cartera de pedidos generada a través de la red? Estas y otras preguntas encuentran respuestas con las Web dinámicas y las bases de datos que son el tema central de esta asignatura.

Como una disciplina emergente, la ingeniería w eb permite crear aplicaciones interactivas (w eb dinámicas) bajo la arquitectura cliente/servidor. La diferencia fundamental de una w eb de tipo estático respecto a una de tipo dinámico es que diseño y contenidos son independientes, por lo que si algún día se plantea un cambio de diseño o la inserción de un nuevo módulo, no hace falta tocar ningún contenido, cosa que es imposible con un diseño w eb de tipo estático. La inserción de contenidos es muy sencilla, con un procesador de textos tipo Word. Se podrá escribir un artículo y asignarle por ejemplo una fecha de publicación y una fecha de caducidad, no habrá que preocuparse por artículos obsoletos. Y todo esto se podrá hacer desde cualquier parte del mundo y desde cualquier ordenador, sólo hace falta una conexión a Internet. Esto es posible porque se trabaja directamente con el servidor de contenidos, sin programas externos. Además, como es un sistema abierto y en continuo crecimiento no se crea una dependencia proveedor-cliente, lo cual redunda en su beneficio si en el futuro deciden hacer cambios en la w eb. 

Ingeniería Web

La Ingeniería Web es una disciplina que comprende el proceso de creación, implantación y mantenimiento de aplicaciones web cumpliendo con criterios de alta calidad y seguridad. Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia | www.ucvlima.edu.pe

5

En la actualidad se están desarrollando aplicaciones web que están cambiando nuestros estilos de vida; ya que con solo ingresar a estas aplicaciones podemos realizar compras, pagos de servicios básicos, realizar reservas de hoteles etc. 



Aplicación Web -

Una aplicación web es un sistema computacional remoto que se accesa por Internet.

-

Físicamente los datos se guardan en una base datos ligada a un servidor web.

-

Para ingresar o consultar los datos, hay que estar conectado a Internet, usar un browser (Internet Explorer, Firefox) y escribir la dirección del servidor (ej.: http://www.misdatos.com) donde está la información almacenada.

-

La entrada es restringida y es necesario identificarse como usuario para entrar al sistema.

-

La comunicación se hace usando páginas web estilo formulario.

¿Qué particularidades tiene el desarrollo web?

Las aplicaciones web tienen sus particularidades, entre las más significativas podemos listar: -

Residente en red. Una aplicación web reside en una red, y debe dar servicio a una comunidad diversa de clientes.

-

Inmediatez. Se refiere al corto tiempo que normalmente tienen los proyectos web para terminar, o por lo menos, lanzar una versión inicial.

-

Evolución continua. A diferencia del software de aplicaciones convencional, que evoluciona a través de versiones planeadas y cronológicamente espaciadas, las aplicaciones web están en constante evolución, y se actualizan gradualmente.

-

Seguridad. Dado que no controlamos con certeza quién puede acceder a nuestra aplicación; la seguridad y confidencialidad de la información requieren un énfasis especial.

-

Estética. Es bien sabido que la primera impresión jamás se olvida, por lo que nuestro sitio debe ser atractivo, ergonómico y usable.

-

Medible. Mediante la cuantificación de resultados, podemos conocer la cantidad de usuarios que tenemos, así como sus patrones de comportamiento.

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia | www.ucvlima.edu.pe

6



El proceso de ingeniería web

Es iterativo e incremental. Esto como respuesta a la continua evolución de las aplicaciones web, así como el corto tiempo en el que normalmente se requiere que sean implementadas. Roger Pressman (en su libro: “Software Engineering: A Practitioner’s Approach”, que es una de las biblias de la ingeniería de software) sugiere un proceso de ingeniería web compuesto por las siguientes fases (Figura 02): -

Planteamiento y formulación. Identificamos los objetivos de nuestra aplicación, y delimitamos el alcance de la primera iteración.

-

Planificación. Una vez planteado el problema, podremos estimar costos, riesgos y esfuerzo durante el desarrollo. En la planeación iterativa solamente se detalla la iteración actual, y las iteraciones subsecuentes sólo se plantean de forma general.

-

Análisis. Durante esta etapa establecemos los requerimientos técnicos, gráficos, y de contenido, que incorporaremos en la iteración.

-

Ingeniería. La actividad de ingeniería incorpora dos grupos de tareas que se realizan en paralelo: el diseño del contenido y la producción, se enfocan en el diseño, producción y adquisición del contenido de texto, gráfico y video que se vayan a integrar en la aplicación. Estas tareas son realizadas por personal no técnico. Por otro lado, están el diseño arquitectónico, de navegación e interfaz, el cual lidia con los aspectos técnicos.

-

Generación de páginas y pruebas. Se prueba que el contenido dinámico se genere correctamente, utilizando las plantillas, interfaces y contenidos diseñados en la fase de ingeniería. Posteriormente se realizan las pruebas pertinentes, que dependerán del tipo de aplicación y requerimientos no funcionales (por ejemplo, pruebas de desempeño, etc.).

-

Evaluación del cliente. Al final de cada iteración se debe realizar una evaluación con el cliente, para validar el avance y determinar los cambios o mejoras (en caso de ser necesarios), que se aplicarán en las siguientes iteraciones.

Existen otros procesos de desarrollo de aplicaciones w eb, como por ejemplo UWE (Ingeniería Web basada en UML), es una metodología enfocada al modelado de aplicaciones Web, basada en la extensión de la semántica del UML mediante la utilización de estereotipos, al estar basada estrictamente en UML garantiza que sus modelos sean fáciles de entender para conocedores de UML. Su proceso de desarrollo se basa en tres fases principales: la fase de captura de requisitos, la fase de análisis y diseño y la fase de implementación. Esta metodología la estudiaremos en la Unidad II.

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia | www.ucvlima.edu.pe

7

Figura 02. Ciclo de vida clásico de una aplicación web (Roger Pressman)

1.1.1.

Aplicativos (editores) para crear sitos web en modo Diseño

Para el usuario sin conocimientos en tecnologías como XHTML, PHP, CSS, JavaScript, etc. resulta interesante un editor que les permita producir páginas web de manera rápida en un entorno WYSIWYG (abreviatura inglesa para what you see is what you get, o sea, “lo que ves es lo que obtienes”), por ejemplo: 

KompoZer

Es uno de los mejores editores gratuitos, está diseñado para usuarios sin conocimientos técnicos que quieran crear un sitio web atractivo sin necesidad de saber HTML. Sus funciones incluyen la gestión integrada de archivos (subir y editar archivos en un servidor web), organización en pestañas (que permite trabajar en varias páginas) y el soporte de formularios, tablas y plantillas. 

BlueGriffon

Merece la pena prestar atención a BlueGriffon, que es está emparentado con KompoZer, actualmente en desarrollo activo, y parece muy prometedor.



Amaya

Otro buen editor es Amaya. Se trata de un proyecto perteneciente al World Wide Web Consortium (W3C) y como tal destaca en el área del cumplimiento de los estándares y de la accesibilidad. Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia | www.ucvlima.edu.pe

8

1.1.2.

Herramientas para el diseño web (IDEs)

Los programadores web utilizan herramientas sofisticadas que facilitan el trabajo enormemente. Dentro de estas herramientas podríamos hablar de entornos integrados de desarrollo (IDEs).

Un IDE es un programa que nos permite desarrollar código en uno o más lenguajes de programación e incorpora lo siguiente: 

Un espacio para la escritura de código con cierta ayuda interactiva para generar código y para indicar los errores de sintaxis que se cometan por parte del programador.



La posibilidad de compilar y ejecutar el código escrito.



La posibilidad de organizar los proyectos de programación.



Herramientas auxiliares para programadores para detección de errores o análisis de programas (debuggers).



Otras opciones como utilidades para pruebas, carga de librerías, etc.

Los IDEs más usados en la actualidad son: 

Microsoft Visual Studio

Este IDE es la propuesta de Microsoft para desarrollar todo tipo de aplicaciones para su plataforma. NET. Desde esta interfaz podremos desarrollar aplicaciones escritas en Visual Basic, Visual C#, ASP.NET. Es uno de los entornos de programación más completos y cuanta con corrección automática de errores y auto completado inteligente.

Como casi todo el softw are de Microsoft, este IDE no es gratuito salvo en su versión Express que puede ser un buen punto de partida para programar.



NetBeans

Es un IDE multiplataforma, soporta varios lenguajes. Además de Java, C, C++ y PHP soporta Ada, Groovy, PL/SQL, Python, Ruby y todos los relacionados con la web (HTML, CSS, JavaScript y XML).

Permite hacer desde aplicaciones sencillas hasta aplicaciones empresariales. En la presente asignatura se usará este IDE.

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia | www.ucvlima.edu.pe

9



Eclipse

Es un IDE para el desarrollo de software de código abierto. Está escrito totalmente en Java, permite crear aplicaciones empresariales, móviles, etc. El software es libre tanto para uso personal como comercial.

Una de sus principales ventajas es que además de ser multiplataforma es también multilenguaje. Permite desarrollar aplicaciones escritas en Java, C++, PHP, Ruby on Rails, Python, Javasript y Perl entre otros. 

Zend Studio

Son muchos los desarrolladores que trabajan con Zend Studio, es posiblemente uno de los mejores IDE del momento.

Se trata de un programa de la casa Zend, uno de los mayores impulsores de PHP, orientada a desarrollar aplicaciones w eb, como no, en PHP. 

Aptana (Eclipse)

Aptana es un entorno de desarrollo dirigido hacia las aplicaciones web escritas en Ajax/JavaScript. Está basado en Eclipse y lo podremos encontrar para las tres plataformas mayoritarias (Win, Mac y Linux), ya sea como plugin del mismo Eclipse, o como aplicación por separado. 

Php Designer

Php Designer, es un completo entorno de desarrollo y programación especialmente diseñado para desarrolladores de PHP, aunque también permite trabajar con comodidad en otros lenguajes de programación como HTML, XHTML, CSS y SQL. Ofrece toda una serie de asistentes y diálogos integrados que facilitan en todo momento el trabajo, además cuenta con cliente de FTP y navegador de ficheros integrado, utilidades de corrección y autocompletado, búsqueda integrada en Google y soporte para proyectos.

La ventaja de que un IDE sea multilenguaje es que cuando nos acostumbramos a usarlo con un lenguaje no tendremos que aprender a usar otro entorno de programación cuando vamos a programar en otro lenguaje.

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia | www.ucvlima.edu.pe

10

1.1.3.

Elementos de un Web Site

En el contexto de esta asignatura cuando hablamos de Web Site nos referimos a una Aplicación Web (Web Site no estático, que incluye lógica del negocio) y cuando hablamos de elementos de un w eb site nos referimos a los elementos de una aplicación w eb o mejor dicho a los componentes de la arquitectura cliente servidor de una aplicación w eb. La arquitectura de un sitio Web tiene tres elementos principales: servidor Web, protocolo HTTP, y uno o más clientes (browsers).

Figura 03: Arquitectura cliente-servidor de una aplicación web



Cliente

Es un programa que permite al usuario visualizar documentos descritos en HTML, desde servidores web de todo el mundo a través de Internet. Por lo general este rol lo cumple un navegador web o explorador web (del inglés, navigator o browser). 

Servidor Web

Llamado también Servidor HTTP, es un programa informático que procesa una aplicación del lado del servidor realizando conexiones bidireccionales con el cliente, generando o cediendo una respuesta en cualquier lenguaje del lado del cliente.

Una aplicación del lado del servidor es cualquier programa o conjunto de instrucciones diseñadas con la finalidad de que un Servidor Web las procese para realizar alguna acción. Las aplicaciones del lado del servidor están escritas mediante algún lenguaje de programación, entre los que destacan: PHP, ASP.Net, Perl, Python, Ruby.

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia | www.ucvlima.edu.pe

11

Las aplicaciones del lado del cliente se ejecutan directamente en el brow ser sin necesidad de realizar ninguna solicitud al servidor. Algunas tecnologías de programación del lado del cliente son: JavaScript, Java, VBScript. 

Protocolo HTTP

Es la base del funcionamiento de internet. Se basa en un intercambio de peticiones y respuestas entre clientes (portátiles, teléfonos móviles, ordenadores de escritorio ) y servidores. Está diseñado para transferir lo que se llama hipertextos, páginas web o páginas HTML: textos complejos con enlaces, figuras, formularios, botones y objetos incrustados como animaciones o reproductores de música.

Cuando nosotros pinchamos sobre un enlace hipertexto, en realidad lo que pasa es que establecemos una petición de un archivo HTML residente en el servidor (un ordenador que se encuentra continuamente conectado a la red) el cual es enviado e interpretado por nuestro navegador (el cliente). La Figura 04 detalla la secuencia de pasos en una petición HTTP.

Lado del Cliente

Lado del Servidor

Figura 04: Secuencia de pasos en una petición HTTP

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia | www.ucvlima.edu.pe

12

LEYENDA: 1. El navegador efectúa la petición de la página 2. El servidor llama al intérprete del PHP si es necesario. 3. PHP ejecuta los scripts (interactuando con la base de datos si es preciso) y devuelve al servidor el documento generado. 4. El servidor envía el documento resultante en formato HTML. 5. El documento es interpretado por el navegador, se ejecutan los scripts del lado del cliente y se presenta el resultado en pantalla. 1.1.4.

Creación del Sitio Web



Instalar WAMP



Crear el sitio (saludo.php)

Para ejecutar este primer programa, en una ventana del navegador, tecleamos http://localhost/saludo.php (Apache ha de estar arrancado).

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia | www.ucvlima.edu.pe

13

1.2. LENGUAJE DE PROGRAMACIÓN HTML 

El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada, y que está compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del documento.



Un documento hipertexto no sólo se compone de texto, puede contener imágenes, sonido, vídeos, etc., por lo que el resultado puede considerarse como un documento multimedia.



Los documentos HTML deben tener la extensión html o htm, para que puedan ser visualizados en los navegadores (programas que permiten visualizar las páginas web).



Los navegadores se encargan de interpretar el código HTML de los documentos, y de mostrar a los usuarios las páginas web resultantes del código interpretado.



El lenguaje HTML es un estándar reconocido en todo el mundo y cuyas normas define un organismo sin ánimo de lucro llamado World Wide Web Consortium, más conocido como W3C. Como se trata de un estándar reconocido por todas las empresas relacionadas con el mundo de Internet, una misma página HTML se visualiza de forma muy similar en cualquier navegador de cualquier sis tema operativo.

El proceso de indicar las diferentes partes que componen la información se denomina marcar (markup en inglés). Cada una de las palabras que se emplean para marcar el inicio y el final de una sección se denominan etiquetas.

Existen dos tipos de etiquetas, la de comienzo de elemento y la de fin o cierre de elemento. La etiqueta de comienzo está delimitada por los caracteres < y >. Está compuesta por el identificador o nombre de la etiqueta, y puede contener una serie de atributos opcionales que permiten añadir ciertas propiedades. Su sintaxis es: Los atributos de la etiqueta de comienzo siguen una sintaxis predefinida y pueden tomar cualquier valor propio del usuario, o valores HTML predefinidos. La etiqueta de final está delimitada por los caracteres . Está compuesta por el identificador o nombre de la etiqueta, y no contiene atributos. Su sintaxis es:

Cada uno de los elementos de la página se encontrará entre una etiqueta de comienzo y su correspondiente etiqueta de cierre, a excepción de algunos elementos que no necesitan etiqueta de cierre. También es posible anidar etiquetas, es decir, insertar etiquetas entre otras etiquetas de comienzo y de cierre.

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia | www.ucvlima.edu.pe

14

EJEMPLO: A continuación tenemos la etiqueta anidada dentro de la etiqueta .:

Bienvenidos a www.ucvlima.edu.pe

Este código daría como resultado el siguiente texto: Bienvenidos a www.ucvlima.edu.pe Es importante anidar bien las etiquetas, las etiquetas no se pueden 'cruzar', en nuestro ejemplo hemos empezado por la etiqueta , antes de cerrar esta etiqueta hemos puesto la por lo que antes de cerrar la etiqueta debemos cerrar la etiqueta .

1.2.1.

Estructura de un documento HTML

Las páginas HTML se dividen en dos partes: la cabecera y el cuerpo. La cabecera incluye información sobre la propia página, como por ejemplo su título y su idioma. El cuerpo de la página incluye todos sus contenidos, como párrafos de texto e imágenes.

Figura 05. Esquema de las partes que forman un documento HTML

El cuerpo (llamado body en inglés) contiene todo lo que el usuario ve en su pantalla y la cabecera (llamada head en inglés) contiene todo lo que no se ve (con la única excepción del título de la página, que los navegadores muestran como título de sus ventanas). EJEMPLO: A continuación se muestra el código HTML de una página web muy sencilla:

El primer documento HTML

El lenguaje HTML es tan sencillo que prácticamente se entiende sin estudiar el significado de sus etiquetas principales.

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia | www.ucvlima.edu.pe

15

Si quieres probar este primer ejemplo, debes hacer lo siguiente: o o o

Abre un editor de archivos de texto y crea un archivo nuevo. Copia el código HTML mostrado anteriormente y pégalo tal cual en el archivo que has creado. Guarda el archivo con el nombre que quieras, pero con la extensión .html

Para que el ejemplo anterior funcione correctamente, es imprescindible que utilices un editor de texto sin formato. Si tu sistema operativo es Window s, puedes utilizar el Bloc de notas, Wordpad, EmEditor, UltraEdit, Notepad++ , etc.

Después de crear el archivo con el contenido HTML, ya se puede abrir con cualquier navegador para que se muestre con el siguiente aspecto:

Figura 06. Aspecto que muestra el primer documento HTML en cualquier navegador

Es importante conocer las tres etiquetas principales de un documento HTML ( , , ): 

: indica el comienzo y el final de un documento HTML. Ninguna etiqueta o contenido puede colocarse antes o después de la etiqueta (con una sola excepción que se verá más adelante). En el interior de la etiqueta se definen la cabecera y el cuerpo del documento HTML y todo lo que se coloque fuera de la etiqueta se ignora.



: delimita la parte de la cabecera del documento. La cabecera contiene información sobre el propio documento HTML, como por ejemplo su título y el idioma de la página. Los contenidos indicados en la cabecera no son visibles para el usuario, con la excepción de la etiqueta , que se utiliza para indicar el título del documento y que los navegadores lo visualizan en la parte superior izquierda de la ventana del navegador (si no te has fijado anteriormente, vuelve a Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia | www.ucvlima.edu.pe

16

abrir el primer ejemplo en cualquier navegador y observa dónde se muestra el título de la página). 

: delimita el cuerpo del documento HTML. El cuerpo encierra todos los contenidos que se muestran al usuario (párrafos de texto, imágenes, tablas). En general, el de un documento contiene cientos de etiquetas HTML, mientras que el no contiene más que unas pocas.

Figura 07. Esquema de las etiquetas principales que contiene un documento HTML

1.2.2. 

Listas, Tablas.

Listas

El lenguaje HTML define tres tipos diferentes de listas para agrupar los elementos: listas no ordenadas (se trata de una colección simple de elementos en la que no importa su orden), listas ordenadas (similar a la anterior, pero los elementos están numerados y por tanto, importa su orden) y listas de definición (un conjunto de términos y definiciones similar a un diccionario). Las listas no ordenadas son las más sencillas y las que más se utilizan. Una lista no ordenada es un conjunto de elementos relacionados entre sí pero para los que no se indica un orden o secuencia determinados. La etiqueta

encierra todos los elementos de la lista y la etiqueta
• cada uno de sus elementos.
  
  Una lista es un párrafo estructurado que contiene una serie de elementos. HTML define tres tipos de listas:  Listas ordenadas  Listas no ordenadas  Listas de definiciones 
  
  Lista ordenada Contenedor
  
  Tipo de lista
  
  Efecto visual 1. ítem 1
  
  
• ítem 1
Lista ordenada

2. ítem 2


• ítem 2


3. ítem 3

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia | www.ucvlima.edu.pe

17



Lista no ordenada Contenedor


Tipo de lista

Efecto visual 

ítem 1



ítem 2



ítem 3


• ítem 1
No ordenada
• ítem 2




Lista de definiciones Contenedor

Tipo de lista Efecto visual ítem 1

Término

definición 1 Definición

Definición

ítem 2

definición 2

EJEMPLO: El siguiente código HTML muestra un ejemplo sencillo de lista no ordenada:

Ejemplo de etiqueta UL

Menú
• Inicio
• Noticias
• Artículos
• Contacto


Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia | www.ucvlima.edu.pe

18

Figura 08: Ejemplo de uso de la etiqueta ul

El navegador por defecto muestra los elementos de la lista tabulados y con una pequeña viñeta formada por un círculo negro.

El aspecto con el que se muestran los elementos de las listas se puede modificar mediante las hojas de estilos CSS. Este tema se verá en la semana 05, Lenguaje CSS.

EJEMPLO: El siguiente código HTML muestra un ejemplo sencillo de lista ordenada:

Ejemplo de etiqueta OL

Instrucciones


• Enchufar correctamente
• Comprobar conexiones
• Encender el aparato




Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia | www.ucvlima.edu.pe

19

Figura 09: Ejemplo de uso de la etiqueta ol

El navegador muestra la lista de forma muy parecida a las listas no ordenadas, salvo que en este caso no se emplean viñetas gráficas en los elementos, sino que se numeran de forma consecutiva.

EJEMPLO: El siguiente código HTML muestra un ejemplo sencillo de lista de definición:

Ejemplo de etiqueta DL

Metalenguajes

SGML Metalenguaje para la definición de otros lenguajes de marcado XML Lenguaje basado en SGML y que se emplea para describir datos RSS GML XHTML SVG XUL Lenguajes derivados de XML para determinadas aplicaciones



Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia | www.ucvlima.edu.pe

20

Figura 10: Ejemplo de uso de la etiqueta dl

Los navegadores formatean las listas de definición de forma similar a las otras listas, tabulando la definición y alineando a la izquierda los términos. Aunque no es habitual, cada término puede tener asociada más de una definición y cada definición puede tener asociada varios términos. 

Tablas

A menudo resulta útil presentar información de una manera más estructurada que en las listas. Las tablas permiten mostrar esta información en filas y columnas. Las tablas se definen como series de filas. Una tabla debe respetar las siguientes reglas: -

La tabla está enmarcada por las etiquetas y .

-

El título de la tabla está enmarcado por

-

Cada fila está enmarcada por (por Table Row).

-

Las celdas de encabezamiento están enmarcadas por (por Table Header).

-

Los datos en cada celda están enmarcados por (Table Data).

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia | www.ucvlima.edu.pe

21

EJEMPLO: Este es el título de la tabla

Título A1	Título A2	Título A3	Título A4
Título B1	Valor B2	Valor B3	Valor B4



Los resultados de este código: Este es el título de la tabla Título A1 Título A2 Título A3 Título A4 Título B1 Valor B2 Valor B3 Valor B4

1.2.3.

Enlaces, Hiperenlaces

Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o archivo. Aquellos elementos (texto, imágenes, etc.) sobre los que se desee insertar un enlace han de encontrarse entre las etiquetas y . A través del atributo href se especifica la página a la que está asociado el enlace, la página que se visualizará cuando el usuario haga clic en el enlace. Por ejemplo, para insertar el enlace: Visita www.ucvlima.edu.pe Habría que escribir: Visita www.ucvlima.edu.pe Existen diferentes formas de expresar una referencia a una página a través del atributo href:

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia | www.ucvlima.edu.pe

22



Referencia absoluta:

Conduce a una ubicación externa al sitio en el que se encuentra el documento. La ubicación es en Internet, en este caso hay que empezar la referencia por http:// , el nombre del dominio y algunas veces el nombre de la página.

Si no se escribe el nombre de la página se cargará la página de inicio asociada al dominio.

Por ejemplo, "http://www.ucvlima.edu.pe" "http://www.ucvlima.edu.pe/startpage.aspx" 

tendrá

el

mismo

efecto

que

Referencia relativa al sitio:

Conduce a un documento situado dentro del mismo sitio que el documento actual. Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o un objetivo común, estando todos ellos dentro de una misma carpeta, conocida como carpeta raíz del sitio. Por ejemplo, teniendo en cuenta que el documento t_4_1.htm se encuentra directamente dentro de la carpeta raíz del sitio, para insertar el enlace: Enlace a Tema 4: Hiperenlaces Habría que escribir: Enlace a Tema 4: Hiperenlaces Observa como aparece el símbolo "/" delante del nombre del documento. Esta barra inclinada indica la carpeta raíz del sitio. Si el documento t_4_1.htm se encontrara, por ejemplo, dentro de una carpeta llamada tema4, y esta estuviera dentro de la carpeta raíz del sitio, habría que escribir: Enlace a Tema 4: Hiperenlaces 

Referencia relativa al documento:

Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo del directorio en el que se encuentra el actual. Por ejemplo, teniendo en cuenta que el documento t_4_1.htm se encuentra dentro de la misma carpeta que el documento actual, para insertar el enlace: Enlace a Tema 4: Hiperenlaces Habría que escribir: Enlace a Tema 4: Hiperenlaces

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia | www.ucvlima.edu.pe

23

Observa que en este caso no aparece el símbolo "/" delante del nombre del documento. Si el documento t_4_1.htm se encontrara, por ejemplo, dentro de una carpeta llamada tema4, y esta estuviera dentro de la misma carpeta que el documento actual, habría que escribir: Enlace a Tema 4: Hiperenlaces 

Punto de fijación:

Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el vínculo debe ser "nombre_de_documento#nombre_de_punto". Por ejemplo, para insertar el enlace: Punto de fijacion Tipos de enlaces Habría que escribir: Punto de fijacion Tipos de enlaces Teniendo en cuenta que el documento se llama t_4_1.htm y el punto de fijación se llama tipos.

El destino del enlace determina en qué ventana va a ser abierta la página vinculada, se especifica a través del atributo target al que se le puede asignar los siguientes valores: _blank: Abre el documento vinculado en una ventana nueva del navegador. _self: Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo. _top: Abre el documento vinculado en la ventana completa del navegador.

Para insertar el enlace: Visita www.ucvlima.edu.pe en una ventana nueva Habría que escribir: Visita www.ucvlima.edu.pe en una ventana nueva

Es interesante utilizar esta opción cuando la página de destino está fuera de nuestro sitio para que cuando el usuario cierre la ventana del explorador, se encuentre automáticamente en la página desde la que había salido (que vuelva a nuestro sitio).

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia | www.ucvlima.edu.pe

24

1.2.4. 

Manejo de imágenes, Sonido y Videos

Imágenes

Todas las páginas web acostumbran a tener un cierto número de imágenes, que permiten mejorar su apariencia, o dotarla de una mayor información visual. Para insertar una imagen es necesario insertar la etiqueta . Dicha etiqueta no necesita etiqueta de cierre. El nombre de la imagen ha de especificarse a través del atributo src. Por ejemplo, para insertar la siguiente imagen:

Habría que escribir:

Teniendo encuentra que la imagen se llama logo_animales.gif y que está dentro de la carpeta imagenes, que se encuentra en el mismo directorio que el documento actual (referencia relativa al documento). 

Multimedia

Los formatos de sonido más habituales en Internet son el WAV, el MP3 y en algunas ocasiones el MIDI, aunque existen otros formatos diferentes que también pueden utilizarse. Lo ideal es incluir algún archivo de audio que no ocupe mucho espacio, y que no por ello sea de mala calidad. El navegador Internet Explorer puede reconocer la etiqueta , que se utiliza para incluir sonido de fondo. Esta nueva etiqueta no necesita etiqueta de cierre. A través del atributo src hay que especificar la ruta y el nombre del archivo de audio. Con el atributo loop indicamos el número de veces que se tienen que reproducir el sonido. Si se desea que el archivo de audio se reproduzca continuamente en un bucle, habrá que asignarle el valor infinite o -1. Por ejemplo, podríamos insertar un sonido de fondo escribiendo el siguiente código:

La etiqueta puede situarse en cualquier parte del documento, pero es preferible que la situemos siempre en un sitio fácil de encontrar, por si deseamos hacerle alguna modificación. Podríamos, por ejemplo, incluirla justo debajo de la etiqueta .

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia | www.ucvlima.edu.pe

25

En ocasiones puede interesar incluir algún vídeo en una página web, pero hay que tener en cuenta que los vídeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para descargarse. Los formatos de vídeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV. La etiqueta es la que se utiliza para insertar archivos de vídeo. Puede incluirse la etiqueta de cierre, pero en realidad no es necesaria, ya que entre las etiquetas y no hay que insertar nada. A través del atributo src hay que especificar la ruta y el nombre del archivo de vídeo. Los videos insertados a través de esta etiqueta se reproducen automáticamente al cargarse la página, y se reproducen solamente una vez. Esto puede cambiarse a través de los atributos autostart y loop. El atributo autostart indica si el archivo se reproducirá automáticamente al cargarse la página, y puede tomar los valores true o false. El atributo loop indica si el archivo se reproducirá continuamente en un bucle, y también puede tomar los valores true o false. Por ejemplo para insertar un video, se podría escribir:

Existen algunos navegadores que no reconocen la etiqueta , por lo que no es posible utilizar esta etiqueta para incluir un sonido de fondo. En su lugar, se utiliza la etiqueta , que funciona del mismo modo para los archivos de audio y de vídeo. No hay que olvidar que para los archivos de audio también se mostrarán los controles de reproducción. Para insertar un archivo de audio, se podría escribir:

Si no se desea que se muestren los controles de un archivo de audio, porque va a ser utilizado como sonido de fondo, puede hacerse que los atributos width (anchura) y height (altura) valgan cero. También puede utilizarse el atributo hidden, con los valores true o false. Cuando su valor es true, se ocultan los controles de reproducción. Por ejemplo, para insertar sonido de fondo se podría escribir:

o también:

Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia | www.ucvlima.edu.pe

26

1.3. FORMULARIOS y IFRAMES 1.3.1. 

Concepto de Iframe

Frame

Los frames (marcos o cuadros) permiten dividir la ventana en varias más pequeñas, de modo que en cada una de ellas se cargue una página html distinta. Los frames se declaran con la etiqueta , que debe ser colocada antes de la etiqueta . Si no se cumple este requisito, la etiqueta se ignorará. Un ejmplo sencillo es el siguiente:

Título de la página



Lo siento,su navegador no soporta frames. Pulse