El lenguaje HTML:
Principios básicos
Juan Alberto Sigüenza
ETS de Informática
Universidad Autónoma de Madrid
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
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
Manuales y Guías de
referencia
❚ A beginners Guide to HTML (accesible en
formato PDF a través del WWW)
❚ Buscar en [Link] 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.
Las etiquetas
❚ El formato general a seguir:
❙ <etiqueta>contenido</etiqueta>
❚ La inclusión de comentarios que no se ven:
❙ <! Comentario>
❚ Las etiquetas que nunca deben faltar:
❙ <HTML></HTML>
❙ <HEAD></HEAD>
❙ <BODY></BODY>
Formateo elemental de textos
❚ Encabezamientos
❙ <H1></H1>...........<H6></H6>
❚ Salto de párrafo
❙ <P></P>
❚ Centrado
❙ <CENTER></CENTER>
❚ Negrita y Cursiva
❙ <B></B> <I></I>
Atributos de etiquetas
❚ Alineación de párrafos
❙ Izquierda: ALIGN=left (opción por defecto)
❙ Derecha: ALIGN=right
❙ Centrado: ALIGN=center
❚ Utilización.
❙ <p ALIGN=opción>
❚ Ejemplo 1
Creación de listas
❚ Listas no ordenadas
❙ <UL>
❙ <LI>
❙ </UL>
❚ Listas ordenadas
❙ <OL>
❙ <LI>
❙ </OL>
❚ Ejemplo 2
Añadir viñetas a las listas
❚ Sintaxis general
❙ <UL TYPE=atributo>
❙ <OL TYPE=atributo>
❚ Atributos listas no ordenadas
❙ DISC, CIRCLE, SQUARE
❚ Atributos listas ordenadas
❙ 1, A, I
Otras propiedades de las listas
❚ Listas de definición
❙ <DL>
❙ <DT>
❙ <DD>
❙ </DL>
❚ Listas anidadas (Ejemplo 3)
❙ <UL>
❙ <LI>
❘ <UL>
❘ <LI>
Otras etiquetas
❚ Línea horizontal <HR>
❚ Atributos de <HR>
❙ <HR NOSHADE SIZE=valor
WIDTH=“porcentaje” ALIGN=valor>
❚ La etiqueta <BLINK> (Ejemplo 4)
❙ <BLINK> ¡Hola Pepe! </BLINK>
❚ La etiqueta <META>
❙ <META HTTP-EQUIV= “refresh” CONTENT= “5;
url=[Link] >
Inclusión de imágenes
❚ Formatos principales GIF y JPEG (Ejemplo 5)
❚ Sintaxis:
❙ <IMG SRC= “[Link]” >
❚ Atributos
❙ <IMG SRC= “[Link]” HEIGHT= valor
WIDTH= valor >
❚ Alineación
❙ <IMG SRC= “[Link]” ALIGN= top >
Fondos
❚ Pueden ser: Texturas, Imágenes y
Colores
❚ Sintaxis:
❙ <BODY BACKGROUND= “[Link]” >
❙ <BODY BGCOLOR= “color” >
❚ Ejemplos 6, 7 y 8
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:
❙ <A HREF= “[Link] > Diario El País
</A>
❙ <A HREF= “[Link]” > Página1 </A>
❙ <A HREF= “[Link] ><IMG SRC=
“[Link]” ></A>
Hiperenlaces entre
secciones de diferentes
páginas HTML
❚ Enlace desde una página (indice de
[Link]) a una sección específica en otro
documento ([Link]). (hiperenlace 2)
❙ Primero creamos la referencia en el primer
documento:
❘ <A HREF= “[Link]#A1” > Autor1 </A>
❙ A continuación creamos el anclaje en el segundo
documento:
❘ <A NAME= “A1” > Autor1 </A>
Hiperenlaces entre
secciones de la misma
página HTML
❚ Enlace desde una página (indice de
[Link]) a una sección del
mismo documento. (hiperenlace 3)
❚ Primero creamos la referencia:
❙ <A HREF= “#A1” > Autor1 </A>
❚ A continuación creamos el anclaje en
el mismo documento:
❙ <A NAME= “A1” > Autor1 </A>
