1.264 Tema 12
HTML
Introducción a FrontPage
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 4 .01.
– Visitar www.w3.org 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.
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)
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.
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. cierre Definición
</EM>
</STRONG>
</VAR>
</CITE<
Etiq. apertura
<EM>
<STRONG>
<VAR>
<CITE>
<ADDRESS> </ADDRESS> Dirección (al final del documento)
<CODE>
<I>
Énfasis (a menudo, cursiva)
Énfasis fuerte (a menudo , negri ta)
Variable
Cita (de un artículo o libro)
</CODE>
</I>
Fragmento de código (sin etiquetas)
Cursiva (así como otros estilos físicos)
(Aircraft2.html)
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)
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=http://www.mit.edu/index.html>
(Página siguiente: Aircraft4.html)
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)
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>
</NOFRAME>
</HTML>
Este documento contiene marcos. Necesitará un
navegador que admita marcos para poder visualizarlo.
(Aircraft5.html)
HTTP y HTML
• HTTP:
el servidor.
– Sólo e s una forma directa de interacción entre e l navegador y
– 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.
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
• 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
página.
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.
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
– Los datos se envían al URL como una cadena:
pulsa el botón "Enviar" (control).
• 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.
Etiquetas HTML 4.0 para formularios
Tipo
Etiqueta
<FORM>
<INPUT TYPE= text
<SELECT>
<OPTION>
<TEXTAREA>
password
file
checkbox
radio
image
hidden
submit
reset
Definición
Inicia un formulario
Una línea de texto
Una línea de contraseña
Carga archivo, con "Examinar"
Casilla de verificación
Botón de opción (casilla opcional)
Imagen como botón
SSSeguimiento, almacena entrada
Botón Enviar del formulario
Botón para restaurar valores
Cuadro de lista o combinado
Elemento de lista o menú deplegable
Inicia campo de varias líneas
Iniciar FrontPage.
FrontPage: demostración controles HTML
•
• Archivo->Nueva w eb (creada en servidor CEE).
• Elegir una página w eb (u otra).
•
•
• Guardar.
• Previsualizar en el navegador.
• Agregar navegación con Formato->Bordes compartidos
Insertar formulario.
Insertar componentes en el formulario.
(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.
Páginas activas de FrontPage
Applet de Java
Applet de Java
• Botón activable
• Administrador de titulares
• 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)
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.
Crear cuenta
Comentarios de: Tema 12 HTML Introducción a FrontPage (0)
No hay comentarios