Lenguaje HTML

1
Lenguaje HTML
WORLD WIDE WEB

• HyperText Markup Language (HTML) describe los
  documentos mediante etiquetas.
• Etiquetas encerradas entre lt y gt con / indicando
  fin de etiqueta.
• Tipos
• Pareadas (ltH1gt lt/H1gt
• Sin parear (ltBRgt)
• Opcionales (ltPgt lt/Pgt)

2
Lenguaje HTML
WORLD WIDE WEB

• Anidamiento de etiquetas
• Corrección sintáctica de los documentos
• Etiqueta desconocida se ignora
• Etiqueta con atributo erroneo toma valor por
  defecto
• Combinación de etiquetas no permitida se presenta
  si es posible o se presenta la primera solo

3
Estructura general de un documento HTML
WORLD WIDE WEB

• ltDOCTYPE HTML PUBLICgt
• ltHTMLgt
• ltHEADgt
• ....................
• lt/HEADgt
• ltBODYgt
• ....................
• lt/BODYgt
• lt/HTMLgt

4
Estructura general de un documento HTML
WORLD WIDE WEB

• ltDOCTYPE HTML PUBLICgt
• ltHTMLgt
• ltHEADgt
• ltTITLEgtMi primera página de prueba HTMLlt/TITLEgt
• lt/HEADgt
• ltBODYgt
• Aquí se pone la información que se desea que
  tenga el documento...
• lt/BODYgt
• lt/HTMLgt

5
Etiquetas para estructurar el texto Párrafos
WORLD WIDE WEB

• ltPgtAquí comienza un párrafo...
• que termina en la misma línea.
• ltPgtSin embargo este párrafo...ltBRgttermina en otra
  línea.
• ltP ALIGNleftgtEste párrafo va a la izquierda...
• ltP ALIGNrightgtEste a la derecha...
• ltP ALIGNcentergtltBRgtltBRgtY este centrado y
  separado...

6
Etiquetas para estructurar el texto Títulos
WORLD WIDE WEB

• ltH1gtEste es el título 1lt/H1gt
• ltH2gtY este el título 2lt/H2gt
• ltH3 ALIGNcentergtY este el título 3 centradolt/H3gt
• ltH4gtltPgtY este es un títuloltBRgtformado por varias
  líneasltPgtY por varios párrafoslt/H4gt

7
Etiquetas para estructurar el texto Alineación de
elementos
WORLD WIDE WEB

• ltCENTERgt
• ltPgtEste párrafo aparece centrado.ltPgtY este
  también.
• lt/CENTERgt
• ltDIV ALIGNrightgt
• ltPgtY este otro parrafo aparece a la
  derecha...ltPgtJunto con este.
• lt/DIVgt

8
Etiquetas para estructurar el texto Líneas
horizontales
WORLD WIDE WEB

• Etiqueta sin parear ltHRgt

9
Etiquetas para estructurar el texto Líneas
horizontales
WORLD WIDE WEB

• ltPgtEntre este parrafolt/Pgt
• ltHR SIZE5 WIDTH80gt
• ltHR WIDTH50 ALIGNleft NOSHADEgt
• ltPgtY este hemos introducido varias líneas
  horizontaleslt/Pgt

10
Etiquetas para estructurar el texto Sangrado de
bloques
WORLD WIDE WEB

• ltPgtEste párrafo no esta sangradolt/Pgt
• ltBLOCKQUOTEgt
• ltPgtPero este párrafo silt/Pgt
• ltBLOCKQUOTEgt
• ltHRgt
• ltPgtY este y la línea anterior más aúnlt/Pgt
• lt/BLOCKQUOTEgt
• lt/BLOCKQUOTEgt

11
Etiquetas para estructurar el texto Texto
preformateado
WORLD WIDE WEB

• ltPREgt
• ltPgt
• Este párrafo es preformateado
• y por tanto saldrá exactamente
• así.
• lt/Pgt
• lt/PREgt
• ltPRE WIDTH40gt
• ltBLOCKQUOTEgt
• ltPgt
• Y este esta también preformateado y por
• tanto también saldrá así...............
• lt/BLOCKQUOTEgt
• lt/PREgt

12
Etiquetas para estructurar el texto Direcciones
WORLD WIDE WEB

• ltPgtEste texto ha sido escrito porlt/Pgt
• ltADDRESSgt
• Enrique Bonet (ltA HREF"mailtoEnrique.Bonet_at_uv.es
  "gt
• Enrique.Bonet_at_uv.eslt/Agt)
• lt/ADDRESSgt

13
Etiquetas de formato del texto
WORLD WIDE WEB

• Dos tipos
• Etiquetas de formato lógico. Clasifican el texto
  en una serie de clases predefinidas.
• Etiquetas de formato físico. Fijan un estilo en
  la presentación.

14
Etiquetas de formato del textoFormato lógico
WORLD WIDE WEB
15
Etiquetas de formato del texto Formato lógico
WORLD WIDE WEB

• ltPgtltCITEgtEste párrafo es CITElt/CITEgt
• ltPgtltVARgtEste párrafo es VARlt/VARgt
• ltPgtltXMPgtEste párrafo utiliza XMP y por ello sale
  ltXMPgt literalmentelt/XMPgt

16
Etiquetas de formato del texto Formato físico
WORLD WIDE WEB
17
Etiquetas de formato del texto Formato físico
WORLD WIDE WEB

• ltPgtltBgtltIgtEste texto es negrita e
  itálicalt/Igtlt/Bgtlt/Pgt
• ltPgtEste es el elemento AltSUBgtijlt/SUBgtlt/Pgt
• ltPgtY esto es una potencia 2ltSUPgtnlt/SUPgtlt/Pgt

18
Caracteres especiales
WORLD WIDE WEB
19
Listas
WORLD WIDE WEB

• Cuatro tipos
• Desordenadas. Aparecen como una lista con puntos.
• Ordenadas. Aparecen con un número o letra de
  orden.
• Menús. Listas desordenadas mostradas de forma más
  compacta que las desordenadas.
• De elementos cortos. El cliente WWW decide como
  las muestra.

20
Listas
WORLD WIDE WEB

• ltPgtltEMgtElige una opciónlt/EMgtlt/Pgt
• ltOL START1 TYPE"A"gt
• ltLIgtComprar un productolt/LIgtltBRgt
• ltLIgtVer el estado de una compralt/LIgtltBRgt
• ltUL TYPEcirclegt
• ltLIgtDe este meslt/LIgtltBRgt
• ltLIgtDe otros meseslt/LIgtltBRgt
• lt/ULgt
• ltLI VALUE10gtSalirlt/LIgt
• lt/OLgt

21
Listas (Glosario de términos)
WORLD WIDE WEB

• ltDLgt
• ltDTgtTermino 1lt/DTgt
• ltDDgtDefinición termino 1lt/DDgt
• ltDTgtTermino 2lt/DTgt
• ltDDgtDefinición termino 2lt/DDgt
• lt/DLgt

22
Enlaces entre páginas
WORLD WIDE WEB

• Dos tipos
• Enlaces de destino. Marcan un sitio en el
  documento al cual se puede ir.
• Enlaces de origen. Indican una URL o enlace de
  destino.

23
Enlaces entre páginas
WORLD WIDE WEB

• ltPgtltA NAME"Capítulo1"gtltBgtCapítulo 1lt/Bgtlt/Pgt
• ltPgt...ltBRgt...ltBRgt...ltBRgt...ltBRgt...ltBRgt...lt/Pgt
• ltA HREF"http//www.uv.es"gtWeb de la
  UVlt/AgtltBRgtltBRgt
• ltA HREF"Capítulo1"gtCapítulo 1lt/Agt

24
Inclusión de imágenes
WORLD WIDE WEB

• Mediante la etiqueta sin parear ltIMGgt

25
Inclusión de imágenes
WORLD WIDE WEB

• ltPgtVamos a insertar una imagen a continuaciónlt/Pgt
• ltPgtltIMG SRC"imagen.gif" ALT"logo"
  ALIGNleftgtTodo el texto de este párrafo
• se colocara a la derecha de la imagen al estar
  esta alineada a la izquierdaltBRgtltBRgtltBRgt
• Pero al sobrepasar la imagen continuara de forma
  normallt/Pgt

26
Tablas
WORLD WIDE WEB

• Insertadas con la etiqueta pareada ltTABLEgt
  lt/TABLEgt
• Encabezado de tabla representado por ltCAPTIONgt
  lt/CAPTIONgt
• Filas representadas por ltTRgt lt/TRgt
• Columnas representadas por ltTDgt lt/TDgt
• Encabezado de columnas representado por ltTHgt lt/THgt

27
Tablas
WORLD WIDE WEB

• ltTABLEgt
• ltCAPTIONgtGastos del meslt/CAPTIONgt
• ltTRgtltTHgtConceptolt/THgtltTHgtImportelt/THgtlt/TRgt
• ltTRgtltTDgtAlimentacionlt/TDgtltTDgt20.000lt/TDgtlt/TRgt
• ltTRgtltTDgtVestidolt/TDgtltTDgt50.000lt/TDgtlt/TRgt
• lt/TABLEgt

28
Tablas (Atributos de modificación)
WORLD WIDE WEB
29
Tablas (Atributos de modificación)
WORLD WIDE WEB
30
Tablas
WORLD WIDE WEB

• ltTABLE BORDER2 BGCOLOR"green"gt
• ltCAPTION ALIGNbottomgtGastos del meslt/CAPTIONgt
• ltTR ALIGNcenter BGCOLOR"yellow"gt
• ltTHgtConceptolt/THgtltTHgtImportelt/THgtltTHgtFechalt/THgt
• lt/TRgt
• ltTR ALIGNrightgt
• ltTD ALIGNleftgtAlimentaciónlt/TDgtltTDgt20.000lt/TDgtltTD
  gt1/1/1990lt/TDgt
• lt/TRgt
• ltTR ALIGNrightgt
• ltTD ALIGNleftgtVestidolt/TDgtltTDgt50.000lt/TDgtltTDgt10/1
  /1990lt/TDgt
• lt/TRgt
• lt/TABLEgt

31
Marcos (Frames)
WORLD WIDE WEB

• ltDOCTYPE HTML PUBLICgt
• ltHTMLgt
• ltHEADgt
• ....................
• lt/HEADgt
• ltFRAMESETgt
• ....................
• lt/FRAMESETgt
• lt/HTMLgt

32
Marcos (Frames)
WORLD WIDE WEB

• ltDOCTYPE HTML PUBLICgt
• ltHTMLgt
• ltHEADgt
• ltTITLEgtMarcos en HTMLlt/TITLEgt
• lt/HEADgt
• ltFRAMESET COLS"25,75"gt
• ltFRAME SRC"imagen.gif"gt
• ltFRAME SRC"imagen.gif"gt
• lt/FRAMESETgt
• lt/HTMLgt

33
Marcos (Frames)
WORLD WIDE WEB
34
Formularios y CGIs
WORLD WIDE WEB

• Introducidos con la etiqueta pareada ltFORMgt
  lt/FORMgt

35
Formularios y CGIs
WORLD WIDE WEB

• Campos de entrada especificados con ltINPUTgt
  lt/INPUTgt

36
Formularios y CGIs (Atributo TYPE)
WORLD WIDE WEB
37
Formularios y CGIs
WORLD WIDE WEB

• ltFORM METHOD"POST" ACTION"cgi-bin/prueba.exe"gt
• Nombre
• ltINPUT TYPE"text" NAME"nombre" SIZE"10"
  MAXLENGTH"25"gt
• ltBRgt
• Primer apellido
• ltINPUT TYPE"text" NAME"apellido1", SIZE"10"
  MAXLENGTH"25"gt
• ltBRgt
• Segundo apellido
• ltINPUT TYPE"text" NAME"apellido2", SIZE"10"
  MAXLENGTH"25"gt
• ltBRgtltBRgt
• Curso
• ltBRgt
• Primero
• ltINPUT TYPE"radio" NAME"curso" VALUE"Primero"
  CHECKEDgt
• Segundo
• ltINPUT TYPE"radio" NAME"curso" VALUE"Segundo"gt
• Tercero
• ltINPUT TYPE"radio" NAME"curso" VALUE"Tercero"gt
• Cuarto

38
Formularios y CGIs
WORLD WIDE WEB

• CGI es el programa encargado de procesar el
  formulario en el servidor.
• Devuelve al cliente datos de dos formas
• Documento generado
• 1ª línea Content-type tipo/subtipo
• 2ª línea En blanco.
• Referencia a otro documento
• 1ª línea Location URL_doc
• 2ª línea En blanco.

39
Formularios y CGIs
WORLD WIDE WEB

• printf("Content-type text/html\n\n")
• printf("ltHTMLgt")
• printf("ltHEADgtltTITLEgtEjemplo de
  CGIlt/TITLEgtlt/HEADgt")
• printf("ltBODYgtLeidos d caracteresltBRgt",longitud)
  
• printf("Caracteres leidos slt/BODYgt",datos)
• printf("lt/HTMLgt")

40
Imágenes sensibles
WORLD WIDE WEB

• Dos formas de procesamiento
• Procesadas en el servidor.
• Incluidas con el atributo ISMAP de la etiqueta
  ltIMGgt
• Formato del archivo de zonas método URL c1,,cN
• Métodos validos son circle, rect y poly.
• Procesadas en el cliente.
• Incluidas con el atributo USEMAPnombre_mapa de
  la etiqueta ltIMGgt
• Formato y métodos de nombre_mapa iguales a los
  anteriores