Programacin II

1
Programación II

• Sesión 8
• HTML

2
Páginas WEB

• Una página WEB es un documento que se encuentra
  en un servidor de páginas WEB y a la que
  accedemos usando un navegador de páginas WEB.
• Un servidor de páginas WEB es una computadora que
  ejecuta una aplicación, llamada también servidor
  de páginas WEB, que nos envía la página WEB que
  le solicitamos mediante un navegador WEB.
•  
• Un navegador de páginas WEB es una aplicación que
  corre en la computadora del cliente y que nos
  permite solicitar una página WEB a un servidor y
  una vez que la recibe nos la muestra.

3
Contenido de una Página WEB

• Texto Constituye la información escrita
  contenida en la página WEB. Incrustados dentro
  del texto hay instrucciones que le indican al
  navegador como formatear el texto antes de
  desplegarlo.
• Imágenes y sonido Contenido multimedia.
• Código código, escrito en algún lenguaje de
  guiones Javascript, Visualscripts o applets
  escritos en Java,
• Hipevínculos Ligas a otros documentos.

4
HTML

• HTML es una implementación del estándar SGML
  (Standard Generalized Markup Language), estándar
  internacional para la definición de texto
  electrónico independiente de dispositivos,
  sistemas y aplicaciones.
• HTML es un metalenguaje para definir lenguajes de
  diseño descriptivos proporciona un medio de
  codificar documentos hipertexto cuyo destino sea
  el intercambio directo entre sistemas o
  aplicaciones.

5
Características de HTML

• Permite crear lenguajes de codificación
  descriptivos.
• Define una estructura de documentos jerárquica,
  con elementos y componentes interconectados.
• Proporciona una especificación formal completa
  del documento.
• No tiene un conjunto implícito de convenciones
  de señalización. Soporta, por tanto, un conjunto
  flexible de juegos de etiquetas.
• Los documentos generados por él son legibles.

6
Elementos de la Sintaxis de HTML

• Son validos todos las caracteres incluidos en ISO
  Latín 1 (ISO 8859-1).
• El formato es libre. El formato introducido en el
  fichero fuente (saltos de línea, líneas en
  blanco, etc.) es irrelevante para el formato
  final del documento.
• Caracteres de significado especial lt, gt, .
• Los caracteres de significado especial y otros
  caracteres, de ser necesario utilizarlos como
  parte del texto, se sustituyen por su entidad

7
Entidades
8
Etiquetas

• Una etiqueta es una instrucción de HTML
• Etiquetas de comienzo de elemento
• ltidentificador atributosgt
• Etiquetas de Final de Elemento
• lt/identificadorgt
• Atributo Propiedad de una etiqueta
• identificadorvalor

9
Contenedores

• Un contenedor es una pareja de etiquetas de
  comienzo y final y que pueden contener texto,
  etiquetas y otros contenedores.
• Un contenedor debe terminar con la etiqueta de
  final correspondiente a su etiqueta de comienzo.
• La etiqueta de final de un contenedor interno a
  otro contenedor debe ir antes de la etiqueta de
  final del contenedor externo.

10
Elemento

• Es un bloque de HTML que puede tratarse como una
  unidad distinta en cierto contexto.
• Un contenedor
• Una etiqueta de inicio que no sea una etiqueta de
  un contenedor

11
Localizador Uniforme de Recursos (URL)

• Define objetos en una red Internet
• servicio//hostpuerto/rutanomArch
• URLs Absolutas
• http//www.itson.mx/die/mdomitsu/tema1.pdf
• URLs Relativas
• imagenes/fondogris.gif

12
Estructura de un Documento HTML

• lthtmlgt
• cabecera
• cuerpo
• lt/htmlgt

13
Cabecera

• ltheadgt
• ...
• lttitlegttitulolt/titlegt
• ...
• lt/headgt

14
Cuerpo

• ltbody backgroundimgFondobgcolor
  colorgt
• encabezados
• elementos con estructura de bloque
• elementos generales
• etiquetas de resaltado y control de fuentes
  texto
• listas
• tablas
• imágenes
• hipervínculos
• formularios
• scripts
• applets
• ...
• lt/bodygt

15
Encabezados y Bloques de texto

• Encabezados
• lthngtencabezadolt/hngt
• Párrafo
• ltp alignleftcenterrightgt
• párrafo
• lt/pgt
• Agrupado de Bloques
• ltdiv alignleftcenterrightgt
• bloques
• lt/divgt

16
Elementos Generales

• Nueva Línea
• ltbrgt
• Línea Horizontal
• lthr widthancho alignleftright
  sizegrosorgt

17
Etiquetas de Resaltado de Textos
Sintaxis ltEtiquetagt Textolt/Etiquetagt
18
Etiquetas de Control de las Fuentes de Texto

• Fuente Base
• ltbasefont sizetamaño colorcolorgt
• Fuente Actual
• ltfont sizetamaño colorcolor facenombregt

19
Listas

• Lista sin Ordenar
• ltul typediscsquarecirclegt
• lista de elementos
• lt/ulgt
• Lista Ordenada
• ltol type1IaAgt
• lista de elementos
• lt/olgt
• Elementos de una Lista
• ltligt
• elemento
• lt/ligt

20
Tablas

• lttable alignleftcenterright
• widthancho bordervalor
• cellspacingvalor cellpaddingvalorgt
• título
• definiciones de filas
• lt/tablegt

21
Título y Filas deTablas

• Título de la Tabla
• ltcaption aligntopleftbottomrightgt
• título
• lt/captiongt
• Definición de fila
• lttr alignleftcenterright
• valigntopmidlebottom gt
• encabezados de columnas
• definiciones de celdas
• lt/trgt

22
Definiciones de Encabezado de Columna y de Celda

• Encabezado de Columna
• ltth colspannúmero rowspan número
• alignleftcenterright valigntopmidle
  bottom
• widthanchogt
• encabezado de columna
• lt/thgt
• Celda
• lttd colspan número rowspan número
• alignleftcenterright valigntopmidle
  bottom
• widthanchogt
• elemento de celda
• lt/tdgt

23
Imágenes

• ltimg aligntopmiddlebottomleftright
• alttexto alternativo
• scrurl de la imagen
• borderancho widthancho
• heightaltogt

24
Hipervínculos

• Hipervínculos
• lta hrefurlmarcagttextoimagen lt/agt
• Marcador
• lta namemarca lt/agt

25
Formularios

• Los formularios dentro de una página Web, nos
  permiten solicitar información al visitante.
• La información se captura en campos y se almacena
  en variables.
• Las variables será enviado a la dirección (URL)
  donde tengamos el programa que pueda procesar las
  variables.
• ltform actionurl methodgetpost
• enctypecodificacióngt
• elementos de entrada
• lt/formgt

26
Elementos de Entrada

• Campo de Entrada de Texto
• ltinput typetext namecampo maxlenghtnúmero
  sizenumero value"texto"gt
• Campos de Entrada de Contraseña
• ltinput typepassword namecampo maxlenghtnúmero
  sizenumero value"texto"gt

27
Elementos de Entrada

• Campos de Entrada de Casilla de Verificación
• ltinput typecheckbox namecampo value"valor"
  checkedgt
• Campos de Entrada de Botón de Radio
• ltinput typeradio namecampo value"valor"
  checkedgt

28
Elementos de Entrada

• Campos de Entrada Oculto
• ltinput typehidden namecampo value"valor"gt
• Botón de Enviar
• ltinput typesubmit valuetextogt
• Botón de Borrar
• ltinput typereset valuetextogt

29
Elementos de Entrada

• Campos de Selección (Menús desplegables)
• ltselect namecampo multiple disabledgt
• opciones
• lt/select gt
• Opciones de Campos de Selección
• ltoption valuevalor selected disabledgtopción
  

30
Elementos de Entrada

• Area de Texto Multilínea
• lttextarea namecampo colsnum rowsnumgt
• linea de texto 1
• linea de texto 2
• lt/textareagt