Lenguaje de definición

1 Lenguaje de definiciónde páginas Web: HTML 11 de Febrer...
Author: Josefina Paz Godoy
0 downloads 2 Views

1 Lenguaje de definiciónde páginas Web: HTML 11 de Febrero de 2009

2 Índice Estructura general de un fichero HTML Formato de párrafosFormato de texto Listas Tablas Anclas y Links Imágenes, clicables y sensibles Frames Formularios

3 Índice Estructura general de un fichero HTML Formato de párrafosFormato de texto Listas Tablas Anclas y Links Imágenes, clicables y sensibles Frames Formularios

4 Estructura general de un HTMLFicheros puramente ASCII Marcas de control llamadas TAGs Cuando el navegador lee un fichero ASCII con extensión *.htm o *.html interpreta estas TAGs y formatea el texto de acuerdo con ellas. Encerradas entre los caracteres menor que ( <) y mayor que ( >). La mayor parte de ellas son dobles. La marca de final es como la de comienzo, pero incluyendo una barra (/). Comentarios Texto afectado

5 Estructura general de un HTMLEstructura de un fichero HTML: Título de la página ...

6 Estructura general de un HTMLAtributos [deprecated] Pueden quedar obsoletos en futuras versiones Style Sheets (Hojas de estilo) Efectos acumulativos ... Texto afectado por el TAG1 Texto afectado por el TAG1 y TAG2

7 Índice Estructura general de un fichero HTML Formato de párrafosFormato de texto Listas Tablas Anclas y Links Imágenes, clicables y sensibles Frames Formularios

8 Formato de párrafos Tag

...

Tag
Tag
Tag
...
 Tag
...
 Tag 
...
 Ejemplo de Formato de párrafos

9 Índice Estructura general de un fichero HTML Formato de párrafosFormato de texto Listas Tablas Anclas y Links Imágenes, clicables y sensibles Frames Formularios

10 Formato de texto Tag ...Tags ..., ..., ... Tag ... Tag ... Tags ..., ... Tags ..., ... Caracteres especiales: Á : Á é : é Ñ : Ñ ñ : ñ Ejemplo de Formato de Texto

11 Índice Estructura general de un fichero HTML Formato de párrafosFormato de texto Listas Tablas Anclas y Links Imágenes, clicables y sensibles Frames Formularios

12 Listas Listas desordenadas Listas ordenadas Listas de definicionesTag

    ...
(de unordered list) Tag
  • (de line) Listas ordenadas Tag
      ...
    (de ordered list)     Listas de definiciones Tag
    ...
    (de definition list)     Tag
    (de definition term) Tag
    (de definition description) Ejemplo de Listas

    13 Índice Estructura general de un fichero HTML Formato de párrafosFormato de texto Listas Tablas Anclas y Links Imágenes, clicables y sensibles Frames Formularios

    14 Tablas Tag

    ...
    Tag ... (de Table Row) Las celdas se agrupan en filas Tag ... (de Table Data) Una tabla se compone de celdas de datos Las celdas pueden contener cualquier elemento HTML: texto, imágenes, enlaces e incluso otras tablas anidadas Tag ... (de Table Header) Celdas cuyo texto aparezca resaltado (por ejemplo, encabezados)

    15 Tablas Atributos de

    Atributos de width: anchura de la tabla (absoluta o en %)border: anchura de los bordes de la tablacellspacing: espaciado entre celdillascellpadding: espacio entre el borde de cada celdilla y los elementos incluidos en ellaAtributos de align: alineación del contenido de las celdas de la filavalign: posición vertical del contenido de las celdas de la filaAtributos de
    y rowspan: nº de filas que debe abarcar la celda actual colspan: nº de columnas de la fila que abarcará la celda align: alineación del contenido de la celda valign: posición vertical del contenido de la celda Ejemplo de Tablas

    16 Índice Estructura general de un fichero HTML Formato de párrafosFormato de texto Listas Tablas Anclas y Links Imágenes, clicables y sensibles Frames Formularios

    17 Anclas y Links Tag ... Link: Ancla:Otra página Web Enviar un mail Un archivo local (no recomendable) Una dirección relativa Ancla: Saltar a otro punto del propio documento Establecer el link Hacer referencia a dicho link Ejemplo de Links Web UPV-EHU Ir a dir1/Page1.html Ir al Inicio

    18 Índice Estructura general de un fichero HTML Formato de párrafosFormato de texto Listas Tablas Anclas y Links Imágenes, clicables y sensibles Frames Formularios

    19 Imágenes, clicables y sensiblesTag Inserta una imagen en el documento Atributos: src: donde se encuentra la imagen. Requerido. alt: texto alternativo si no se ve la imagen width, height: tamaño de la imagen (absoluto en pixels o en %) align: alineación del texto respecto a la imagen border: borde o marco de la imagen hspace, vspace: espacio alrededor de la imagen lowsrc: Se carga primero una imagen de baja resolución hasta que se termina de cargar la versión de alta resolución.

    20 Imágenes, clicables y sensiblesImagen clicable: Imagen sensible (mapa de imágenes): Imágenes clicables que permiten acceder a un URL u otro dependiendo donde se clica. Se elabora de la siguiente manera: Bahía de San Sebastián Historia Planos Fotos Idioma

    21 Índice Estructura general de un fichero HTML Formato de párrafosFormato de texto Listas Tablas Anclas y Links Imágenes, clicables y sensibles Frames Formularios

    22 Frames División de la ventana del navegador en subventanas o framesCada frame puede tener un nombre al que se puede dirigir el resultado de una acción Tamaño: fijo o variable (ratón) Contenido: estático o dinámico Clásica división: Índice – Contenido Frameset: Ventana con frames

    23 Frames Estructura: Especificar la salida de un link: Ejemplo de Frames Título de la página Web UPV-EHU target=“_blank” : Salida a una nueva ventana en blanco y sin nombre target=“_self” : Salida a la propia ventana del hiperlink target=“_parent” : Salida al frameset padre del documento actual target=“_top” : Destruye todos los frames y la salida se dirige a la ventana principal del navegador

    24 Índice Estructura general de un fichero HTML Formato de párrafosFormato de texto Listas Tablas Anclas y Links Imágenes, clicables y sensibles Frames Formularios

    25 Formularios Hipertexto Formularios Estructura:Cierta interactividad mediante la solicitud de distintos contenidos Formularios Posibilidad de que el usuario envíe datos al servidor (datos personales, sugerencias, ...) Estructura: Elementos de entrada de datos Botón de envío (Submit) Método de envío de datos Acción que el servidor debe emprender cuando reciba los datos

    26 Formularios Servidor HTTP Servidor Web Cliente Servidor BASE DE DATOSQUERY STRING Respuesta HTML BASE DE DATOS QUERY STRING Respuesta HTML Cliente Servidor

    27 Formularios Estructura: Formulario Simple

    El formulario más simple

    method="POST" target="_self"> Introduzca su nombre:  

       

    28 EjemploCajasTextoyBotonesFormularios Elementos: Cajas de texto Botones Normal Password Multi-línea Hidden Submit Reset Genérico EjemploCajasTextoyBotones

    29 EjemploCasillasyBotonesRadioFormularios Elementos: Casillas de verificación Botones de radio Ventanas de selección simple Ventanas de selección múltiple EjemploCasillasyBotonesRadio Desplegables De Scroll EjemploVentanas

    30 Formularios Métodos más usados: GET y POST GET POSTDesignado para obtener información (un documento, un gráfico o el resultado de la consulta a una BD) Usado al escribir una URL en el navegador Usado cuando se clica en un hiperlink POST Designado para enviar información (un nº de tarjeta de crédito, nuevos datos o información para guardar en una BD) Cualquiera de los dos puede usarse cuando se envía un formulario HTML

    31 Método GET Puede incluir parámetros en el URLSecuencia de caracteres añadida a la URL: QUERY STRING No es muy seguro, ya que los datos viajan junto a la dirección y son vistos por todo el mundo en la barra de direcciones El tamaño de la información enviada estará limitada La URL puede ser guardada o enviada por

    32 Método POST Técnica diferente de envío de información Características:En algunos casos se necesita enviar Mb Características: A través de una conexión “socket” Datos como parte del cuerpo de la petición HTTP Longitud ilimitada El intercambio es invisible para el cliente La URL no cambia en absoluto La petición no puede ser guardada ni enviada por e incluso no puede ser “refrescada” Ofrece un extra de seguridad puesto que el “access log” del servidor que guarda las URLs no guarda los datos enviados mediante POST.