El lenguaje HTML: Principios bsicos

1
El lenguaje HTMLPrincipios básicos

• Juan Alberto Sigüenza
• ETS de Informática
• Universidad Autónoma de Madrid

2
Características generales

• Hipertexto e Hipermedia
• HTML HyperText Markup Language
• El proceso de textos mediante marcas
• Script de IBM
• TEX
• Documentos HTML fichero ASCII
• Lenguajes interpretados y compilados

3
Edición de páginas HTML

• Editores de propósito general
• Editores asociados al navegador
• Netscape Composer
• MS Front Page
• Editores específicos
• HoTMetaL
• Procesadores de Texto

4
Manuales y Guías de referencia

• A beginners Guide to HTML (accesible en formato
  PDF a través del WWW)
• Buscar en www.uam.es en el apartado de Internet
  (multitud de Manuales y Guías)
• HTML avanzado. Bruce Morris, McGraw-Hill,
  Microsoft Press.
• Publicar con HTML en Internet. B. Heslop, Ed.
  Paraninfo.

5
Las etiquetas

• El formato general a seguir
• ltetiquetagtcontenidolt/etiquetagt
• La inclusión de comentarios que no se ven
• lt! Comentariogt
• Las etiquetas que nunca deben faltar
• ltHTMLgtlt/HTMLgt
• ltHEADgtlt/HEADgt
• ltBODYgtlt/BODYgt

6
Formateo elemental de textos

• Encabezamientos
• ltH1gtlt/H1gt...........ltH6gtlt/H6gt
• Salto de párrafo
• ltPgtlt/Pgt
• Centrado
• ltCENTERgtlt/CENTERgt
• Negrita y Cursiva
• ltBgtlt/Bgt ltIgtlt/Igt

7
Atributos de etiquetas

• Alineación de párrafos
• Izquierda ALIGNleft (opción por defecto)
• Derecha ALIGNright
• Centrado ALIGNcenter
• Utilización.
• ltp ALIGNopcióngt
• Ejemplo 1

8
Creación de listas

• Listas no ordenadas
• ltULgt
• ltLIgt
• lt/ULgt
• Listas ordenadas
• ltOLgt
• ltLIgt
• lt/OLgt
• Ejemplo 2

9
Añadir viñetas a las listas

• Sintaxis general
• ltUL TYPEatributogt
• ltOL TYPEatributogt
• Atributos listas no ordenadas
• DISC, CIRCLE, SQUARE
• Atributos listas ordenadas
• 1, A, I

10
Otras propiedades de las listas

• Listas de definición
• ltDLgt
• ltDTgt
• ltDDgt
• lt/DLgt
• Listas anidadas (Ejemplo 3)
• ltULgt
• ltLIgt
• ltULgt
• ltLIgt

11
Otras etiquetas

• Línea horizontal ltHRgt
• Atributos de ltHRgt
• ltHR NOSHADE SIZEvalor WIDTHporcentaje
  ALIGNvalorgt
• La etiqueta ltBLINKgt (Ejemplo 4)
• ltBLINKgt Hola Pepe! lt/BLINKgt
• La etiqueta ltMETAgt
• ltMETA HTTP-EQUIV refresh CONTENT 5
  urlhttp//www.uam.es gt

12
Inclusión de imágenes

• Formatos principales GIF y JPEG (Ejemplo 5)
• Sintaxis
• ltIMG SRC imagen.gif gt
• Atributos
• ltIMG SRC imagen.gif HEIGHT valor WIDTH valor
  gt
• Alineación
• ltIMG SRC imagen.gif ALIGN top gt

13
Fondos

• Pueden ser Texturas, Imágenes y Colores
• Sintaxis
• ltBODY BACKGROUND fondo.gif gt
• ltBODY BGCOLOR color gt
• Ejemplos 6, 7 y 8

14
Creación de hiperenlaces

• Permiten enlazar dos páginas cualesquiera
  independientemente de la ubicación de cada una
  local o en red. (ejemplo hiperenlace 1)
• Ejemplos
• ltA HREF http//www.elpais.es gt Diario El País
  lt/Agt
• ltA HREF pagina.html gt Página1 lt/Agt
• ltA HREF http//www.uam.es gtltIMG SRC
  imagen.gif gtlt/Agt

15
Hiperenlaces entre secciones de diferentes
páginas HTML

• Enlace desde una página (indice de autores.html)
  a una sección específica en otro documento
  (autores.html). (hiperenlace 2)
• Primero creamos la referencia en el primer
  documento
• ltA HREF autores.htmlA1 gt Autor1 lt/Agt
• A continuación creamos el anclaje en el segundo
  documento
• ltA NAME A1 gt Autor1 lt/Agt

16
Hiperenlaces entre secciones de la misma página
HTML

• Enlace desde una página (indice de autores.html)
  a una sección del mismo documento. (hiperenlace
  3)
• Primero creamos la referencia
• ltA HREF A1 gt Autor1 lt/Agt
• A continuación creamos el anclaje en el mismo
  documento
• ltA NAME A1 gt Autor1 lt/Agt