1.264 Tema 12. HTML Introducción a FrontPage

Tamaño: px

Comenzar la demostración a partir de la página:

Download "1.264 Tema 12. HTML Introducción a FrontPage"

Esteban Miguélez Barbero
hace 8 años
Vistas:

1 1.264 Tema 12 HTML Introducción a FrontPage

2 HTML Subconjunto de lenguaje de marcado generalizado estándar (SGML), lenguaje descri ptivo de documentos. SGML está certificado con la norma ISO. La versión a ctual de HTML es la versión Visitar para consultar los últimos borradores, nor mas y debates. Nuevas funciones en la norma HTML 4.0. Hojas de estilos, internacionalización, acceso a discapacitados, marcos, tablas y formularios mejorados.

Visitar www.w3.org para consultar los últimos borradores, nor mas y debates.

3 Ejemplo de lenguaje de marcado de hipertexto (html) <HTML> <HEAD> <TI TLE> Bi envenido al sistema de piezas de aviones </TIT LE> </HEAD> <BODY> <H1> B ienvenido al sistema de piezas de aviones </H1> Este sistema gestiona pedid os de piezas de aviones y globo s. Gestionamos piezas de aeronaves y piezas de todos los fabricantes de globos. Cumplimos las últimas normativas de EE.UU. <P> El uso de este sistema está sujeto a las <A HREF= MITRule.html> normativas y reglas del MIT. </A> </BODY> </HTML> (Aircraft1.html)

globo s. Gestionamos piezas de aeronaves y piezas de todos los fabricantes de globos. Cumplimos las últimas normativas de EE.UU.

4 HTML Las etiquetas (p.ej., <TAG>) no se muestran, sólo las utiliza e l navegador. Suelen ir por parejas (p.ej., <TAG> y </TAG>) para delimitar las secc iones. Algunas tie nen atributos (p.ej., <A HREF=abc.html> </A>). El documento HTML comienza por <HTML> y termina por </HTML> Dos secciones dentro del do cumento: HEAD y BODY. Head contiene información de identificación que n o se muestra. La sección BODY sí se muestra con formato: Párrafo <P> Niveles de encabezado de 1 a 6, de <H1> a <H6> Saltos de línea o retornos de carro <BR> Anclas <A>, situadas junto a texto o gráficos, empleadas en los hipervínculos.

El documento HTML comienza por <HTML> y termina por </HTML> Dos secciones dentro del do cumento: HEAD y BODY.

5 (Aircraft2.html) Ejemplos de etiquetas Controlan e l a specto de la página. No son tan pr ecisas como MS Word u otros editores. Pensadas para páginas visualizables en equipos con distintas capacidades gráficas. Las etiquetas no se aplican a conceptos específicos. Etiq. apertura Etiq. cierre Definición <EM> </EM> Énfasis (a menudo, cursiva) <STRONG> </STRONG> Énfasis fuerte (a menudo, negri ta) <VAR> </VAR> Variable <CITE> </CITE< Cita (de un artículo o libro) <ADDRESS> </ADDRESS> Dirección (al final del documento) <CODE> </CODE> Fragmento de código (sin etiquetas) <I> </I> Cursiva (así como otros estilos físicos)

6 Ejemplos de etiquetas (continuación) Tamaño y color de fuente: <FONT>, <FONT COLOR= nombre> Caracteres especiales: > es > Formato de párrafo: <H2 ALIGN=CENTER> text </H2> Texto preformateado: <PRE> (alinea columnas, etc.) Líneas horizontales: <HR WIDTH=80% ALIGN= LEFT> Listas: pueden tener varios niveles, etc. Ordenada (numerada) <OL> No ordenada (con viñetas) <UL> Definición (con sangría) <DL> Tablas: <TABLE>, <CAPTION>, <TR> (fila), etc. (Aircraft3.html)

) Líneas horizontales: <HR WIDTH=80% ALIGN= LEFT> Listas: pueden tener varios niveles, etc.

7 Nombres de archivos HTML No mbr es re la ti vos (convenciones de UN IX ): MITRule1.html misma carpeta (directorio) que el doc actual Laws/MITRule2.html en subcarpeta (subdirectorio) del doc actual../mitrule3.html en carpeta superior del doc actual Nombres absolutos (también, UNI X): /MITRule4.html en carpeta raíz (raíz web o raíz local) Secciones del documento: MITRule1.html#sec1 apunta a la etiqueta destino (sec1) en el mismo doc Secciones definidas por <A NAME=sec1> </A> Documentos de otros sitios: <A HREF= (Página siguiente: Aircraft4.html)

html en carpeta superior del doc actual Nombres absolutos (también, UNI X): /MITRule4.

8 Imágenes <H1> Bienvenido al sistema de distribución de aviones </H1> <A HREF=aircraft.gif> <IMG SRC=thumbnail_aircraft.gif ALT= Servicio de piezas de aviones > </A> Bienvenido al sistema de piezas de aviones. Muestra una pequeña imagen de las piezas de los aviones y permite al usuario descargar la imagen más grande. La etiqueta HREF puede apuntar a otros documentos sobre aviones, empresas de transportes, etc. (Aircraft4.html)

gif ALT= Servicio de piezas de aviones > </A> Bienvenido al sistema de piezas de aviones.

9 Marcos Divide la ventana principal del navegador e n panele s. Desarrol lado po r Netscape, compatible con Microsoft IE. Los conjun tos de marcos asignan U RL a cada panel. Ejemplo de 2 paneles iguales contiguos: <HTML><HEAD> <TITLE> Dos marcos contiguos </TITLE> </HEAD> <FRAMESET COLS=50%,50%> <FRAME SRC=Aircraft5.html NAME=graphics> <FRAME SRC= MITRule.html NAME=text> </FRAMESET> <NOFRAME> Este documento contiene marcos. Necesitará un navegador que admita marcos para poder visualizarlo. </NOFRAME> </HTML> (Aircraft5.html)

Ejemplo de 2 paneles iguales contiguos: <HTML><HEAD> <TITLE> Dos marcos contiguos </TITLE> </HEAD> <FRAMESET COLS=50%,50%> <FRAME

10 HTTP y HTML HTTP: Sólo e s una forma directa de interacción entre e l navegador y el servidor. Fue una ampliación enormemente perceptiva del correo electrónico y los protocolos de FTP diseñada por Tim Berners-Lee para habilitar los navegadores w eb. Paradigma de petición-respuesta. Conexión establecida para cada par petición/respuesta. El protocolo más popular de Internet, c on definición estable. HTML: Lenguaje de descripción de texto basado en etiquetas. Descripción de alto nivel frente a formato específico. El HTML es estático: no bas ta para la s aplicaciones w eb. Muchas ampliaciones y modificaciones (scripts, Java) para el contenido dinámico.

Paradigma de petición-respuesta. Conexión establecida para cada par petición/respuesta. El protocolo más popular de Internet, c on definición estable.

11 Formularios HTML Utilizados como aplicaciones para programas de servidor Páginas Active Server, páginas Java Server, servlets, Los formularios son controles de interfaz para recopilar datos del usuario y transmitirlos al programa de aplicación del servidor. El control es una "ventana hija" dentro de una "padre" o una página. Los formularios son el método de interfaz de usuario más común. Se colocan en páginas web que también pueden tener más elementos. JavaScript ( no el lenguaje Java!) puede utilizarse en formularios HTML para mejorar su funcionamiento. Los applets de Java ofrecen una interfaz más completa y compleja con funciones de seguridad. No se utilizan mucho. Todos se ejecutan en el navegador y son componentes de la interfaz del usuario.

Los formularios son el método de interfaz de usuario más común. Se colocan en páginas web que también pueden tener más elementos. JavaScript ( no el lenguaje Java!

12 Transmisión de datos con formularios HTML Los formularios permiten i ncluir varios controles en la página. Cada control tiene un n ombre y un valor. Todo el formulario se asocia al URL de un programa de servidor que pro cesa los datos de entrada. Los datos del formulario se envían cuando el usuario pulsa el botón "Enviar" (control). Los datos se envían al URL como una cadena: Nombre1=Valor1&Nombre2=Valor2& NombreN=ValorN Si se envían con el comando HTTP GET, se adjuntan al final de la cadena GET, tras un signo?: GET /Index.html?Nombre1=Valor1 Si se envían con el comando HTTP PUT, se envían después de la lí nea en blanco de la cadena orig inal. Los programas de servidor (ASP, JSP, servlet) tienen métodos para extraer datos de la cadena y utilizarlos en el programa.

Los datos se envían al URL como una cadena: Nombre1=Valor1&Nombre2=Valor2& NombreN=ValorN Si se envían con el comando HTTP GET, se adjuntan al final de la cadena GET, tras un signo?: GET /Index.

13 Etiquetas HTML 4.0 para formularios Etiqueta Tipo Definición <FORM> Inicia un formulario <INPUT TYPE= text Una línea de texto password Una línea de contraseña file Carga archivo, con "Examinar" checkbox Casilla de verificación radio Botón de opción (casilla opcional) image Imagen como botón hidden SSSeguimiento, almacena entrada submit Botón Enviar del formulario reset Botón para restaurar valores <SELECT> Cuadro de lista o combinado <OPTION> Elemento de lista o menú deplegable <TEXTAREA> Inicia campo de varias líneas

contraseña file Carga archivo, con "Examinar" checkbox Casilla de verificación radio Botón de opción (casilla opcional) image

14 FrontPage: demostración controles HTML Iniciar FrontPage. Archivo->Nueva w eb (creada en servidor CEE). Elegir una página w eb (u otra). Insertar formulario. Insertar componentes en el formulario. Guardar. Previsualizar en el navegador. Agregar navegación con Formato->Bordes compartidos (marcos). Usar arriba e i zquierda, incluir botones de navegación. Ir a l a vista Navegación, arrastrar páginas al espacio. Guardar las páginas antes de visualizarlas.

Previsualizar en el navegador. Agregar navegación con Formato->Bordes compartidos (marcos).

15 Páginas activas de FrontPage Botón activable Applet de Java Administrador de titulares Applet de Java Marquesina (texto desplaz.) Ampliaci ón HTML Formulario de búsqueda Jscript Contador de visitas VB Script Vídeo Componente ActiveX Animación Jscript Otros controles ActiveX Otros applets de Java Compatibilidad adicional para: Capa de sockets segura (SSL)

) Ampliaci ón HTML Formulario de búsqueda Jscript Contador de visitas VB Script Vídeo

16 FrontPage Crea la estructura y diseño del sitio w eb: Ventana Navegación. Organiza archivos y carpetas: Ventana Carpetas. Importa y exporta archivos: Archivo->Importar, no copiar. Prueba y repara hipervínculos: Hipervínculo s, Herr amientas->actualizar hipervínculo s Administra el acce so y la seguridad (en parte). Publica el sitio web finalizado (del local al servidor). Administra la creac ión de páginas w eb: Tiene asistentes para la creación (de gran ayuda). Compatibilidad limitada para acceso mediante páginas Active Server: Demostraremos esto en clase más adelante y lo utili zaremos en el ejercicio 6.

Prueba y repara hipervínculos: Hipervínculo s, Herr amientas->actualizar hipervínculo s Administra el acce so y la seguridad (en parte).

Documentos relacionados

Para iniciarnos en el estudio de este curso necesitamos estar familiarizados con ciertos conceptos generales, entre ellos:

Conceptos básicos de la internet y la web Para iniciarnos en el estudio de este curso necesitamos estar familiarizados con ciertos conceptos generales, entre ellos: Internet: Red mundial de computadoras