HTML

1
Lenguaje de definición de páginas Web HTML 11
de Febrero de 2009
2
Índice

• Estructura general de un fichero HTML
• Formato de párrafos
• Formato 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árrafos
• Formato de texto
• Listas
• Tablas
• Anclas y Links
• Imágenes, clicables y sensibles
• Frames
• Formularios

4
Estructura general de un HTML

• Ficheros 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 ( lt) y
  mayor que ( gt).
• La mayor parte de ellas son dobles.
• La marca de final es como la de comienzo, pero
  incluyendo una barra (/).
• Comentarios

ltCOMANDOgtTexto afectadolt/COMANDOgt
lt!- Los comentarios se introducen de esta forma
--gt
5
Estructura general de un HTML

• Estructura de un fichero HTML

ltHTMLgt ltHEADgt ltTITLEgtTítulo de la
páginalt/TITLEgt ... lt/HEADgt
ltBODYgt ... lt/BODYgt lt/HTMLgt
6
Estructura general de un HTML

• Atributos
• deprecated
• Pueden quedar obsoletos en futuras versiones
• Style Sheets (Hojas de estilo)
• Efectos acumulativos

ltBODY backgroundimagen.jpggt ... lt/BODYgt
ltIMG srcimagen.jpg width33 height60gt
ltTAG1gt Texto afectado por el TAG1 ltTAG2gt
Texto afectado por el TAG1 y TAG2
lt/TAG2gt lt/TAG1gt
7
Índice

• Estructura general de un fichero HTML
• Formato de párrafos
• Formato de texto
• Listas
• Tablas
• Anclas y Links
• Imágenes, clicables y sensibles
• Frames
• Formularios

8
Formato de párrafos

• Tag ltPgt...lt/Pgt
• Tag ltBRgt
• Tag ltHRgt
• Tag ltBLOCKQUOTEgt...lt/BLOCKQUOTEgt
• Tag ltCENTERgt...lt/CENTERgt
• Tag ltPREgt...lt/PREgt

Ejemplo de Formato de párrafos
9
Índice

• Estructura general de un fichero HTML
• Formato de párrafos
• Formato de texto
• Listas
• Tablas
• Anclas y Links
• Imágenes, clicables y sensibles
• Frames
• Formularios

10
Formato de texto

• Tag ltHgt...lt/Hgt
• Tags ltBgt...lt/Bgt, ltIgt...lt/Igt, ltUgt...lt/Ugt
• Tag ltTTgt...lt/TTgt
• Tag ltFONTgt...lt/FONTgt
• Tags ltSUPgt...lt/SUPgt, ltSUBgt...lt/SUBgt
• Tags ltBIGgt...lt/BIGgt, ltSMALLgt...lt/SMALLgt
• Caracteres especiales

Á Aacute é eacute Ñ Ntilde ñ
ntilde
Ejemplo de Formato de Texto
11
Índice

• Estructura general de un fichero HTML
• Formato de párrafos
• Formato de texto
• Listas
• Tablas
• Anclas y Links
• Imágenes, clicables y sensibles
• Frames
• Formularios

12
Listas

• Listas desordenadas
• Tag ltULgt...lt/ULgt (de unordered list)
• Tag ltLIgt (de line)
• Listas ordenadas
• Tag ltOLgt...lt/OLgt (de ordered list)
• Tag ltLIgt (de line)
• Listas de definiciones
• Tag ltDLgt...lt/DLgt (de definition list)
• Tag ltDTgt (de definition term)
• Tag ltDDgt (de definition description)

Ejemplo de Listas
13
Índice

• Estructura general de un fichero HTML
• Formato de párrafos
• Formato de texto
• Listas
• Tablas
• Anclas y Links
• Imágenes, clicables y sensibles
• Frames
• Formularios

14
Tablas

• Tag ltTABLEgt...lt/TABLEgt
• Tag ltTRgt... lt/TRgt (de Table Row)
• Las celdas se agrupan en filas
• Tag ltTDgt... lt/TDgt (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 ltTHgt... lt/THgt (de Table Header)
• Celdas cuyo texto aparezca resaltado (por
  ejemplo, encabezados)

15
Tablas

• Atributos de ltTABLEgt
• width anchura de la tabla (absoluta o en )
• border anchura de los bordes de la tabla
• cellspacing espaciado entre celdillas
• cellpadding espacio entre el borde de cada
  celdilla y los elementos incluidos en ella
• Atributos de ltTRgt
• align alineación del contenido de las celdas de
  la fila
• valign posición vertical del contenido de las
  celdas de la fila
• Atributos de ltTHgt y ltTDgt
• 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árrafos
• Formato de texto
• Listas
• Tablas
• Anclas y Links
• Imágenes, clicables y sensibles
• Frames
• Formularios

17
Anclas y Links

• Tag ltA hrefurlgt...lt/Agt
• Link
• 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
ltA hrefhttp//www.ehu.esgtWeb UPV-EHUlt/Agt
ltA hrefmailtojipotvim_at_vc.ehu.esgte-maillt/Agt
ltA href"../dir1/Page1.html"gtIr a
dir1/Page1.htmllt/Agt
ltA namealiniciodeldocumentogt
ltA hrefaliniciodeldocumentogtIr al Iniciolt/Agt
18
Índice

• Estructura general de un fichero HTML
• Formato de párrafos
• Formato de texto
• Listas
• Tablas
• Anclas y Links
• Imágenes, clicables y sensibles
• Frames
• Formularios

19
Imágenes, clicables y sensibles

• Tag ltIMGgt
• 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.

ltIMG srcImagen.jpg width33 height60gt
20
Imágenes, clicables y sensibles

• Imagen 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

ltA hrefhttp//www.vc.ehu.esgtltIMG
srccampusalava.jpggtlt/Agt
ltIMG src"concha.gif" usemap"FOTO" alt"Bahía
de San Sebastián"gt ltMAP name"FOTO"gt ltAREA
shape"RECT" coords20,25,155,83
href"historia.html" alt"Historia"gt ltAREA
shape"CIRCLE" coords60,150,100,150
href"plano.html" alt"Planos"gt ltAREA
shape"POLY" coords106,100,126,170,254,170,254,4
9,222,100 href"fotos.html" alt"Fotos"gt ltAREA
shape"POLY" coords169,26,169,93,267,26 nohref
alt"Idioma"gt lt/MAPgt
21
Índice

• Estructura general de un fichero HTML
• Formato de párrafos
• Formato 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 frames
• Cada 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
Ejemplo de Frames

• Estructura
• Especificar la salida de un link

ltHTMLgt ltHEADgtltTITLEgtTítulo de la
páginalt/TITLEgtlt/HEADgt ltFRAMESET
rows30,30,40gt ltFRAME namecabecera
srcframe1.html noresizegt ltFRAMESET
cols25,25,50gt ltFRAME
srcframe2.html scrollingnogt ltFRAME
srcframe3.html marginwidth5gt ltFRAME
srcframe4.html marginheight5gt
lt/FRAMESETgt ltFRAME namecontenido
srcframe5.htmlgt lt/FRAMESETgt lt/HTMLgt
ltA hrefhttp//www.ehu.es targetcontenidogtWeb
UPV-EHUlt/Agt
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árrafos
• Formato de texto
• Listas
• Tablas
• Anclas y Links
• Imágenes, clicables y sensibles
• Frames
• Formularios

25
Formularios

• Hipertexto
• 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 Web
Servidor HTTP
Respuesta HTML
QUERY STRING
BASE DE DATOS
QUERY STRING
Respuesta HTML
Cliente
Servidor
27
Formularios

• Estructura

ltHTMLgt ltHEADgtltTITLEgtFormulario
Simplelt/TITLEgtlt/HEADgt ltBODYgt ltH2gtEl
formulario más simplelt/H2gt ltFORM name"login"
action"http//www.ehu.es/cgi-bin/CGI0.exe"
method"POST" target"_self"gt Introduzca su
nombrenbspnbsp ltINPUT type"text"
name"nombre" size"25"gtltBRgtltBRgt ltINPUT
type"submit" value"Enviar"gtnbspnbspnbsp
ltINPUT type"reset" value"Borrar"gt
lt/FORMgt lt/BODYgt lt/HTMLgt
28
Formularios

• Elementos
• Cajas de texto
• Botones

• Normal
• Password
• Multi-línea
• Hidden

• Submit
• Reset
• Genérico

EjemploCajasTextoyBotones
29
Formularios

• 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
• Designado 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 URL
• Secuencia 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 e-mail

http//www.vc.ehu.es/jiwotvim/IngenieriaSoftware/H
erramientas/cedt370r.exe?nombre1valor1nombre2va
lor2
32
Método POST

• Técnica diferente de envío de información
• 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-mail 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.