El lenguaje HTML: Principios básicos

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 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.

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=http://www.uam.es” >

Inclusión de imágenes • Formatos principales GIF y JPEG (Ejemplo 5) • Sintaxis: • <IMG SRC= “imagen.gif” > • Atributos • <IMG SRC= “imagen.gif” HEIGHT= valor WIDTH= valor > • Alineación • <IMG SRC= “imagen.gif” ALIGN= top >

Fondos • Pueden ser: Texturas, Imágenes y Colores • Sintaxis: • <BODY BACKGROUND= “fondo.gif” > • <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= “http://www.elpais.es” > Diario El País </A> • <A HREF= “pagina.html” > Página1 </A> • <A HREF= “http://www.uam.es” ><IMG SRC= “imagen.gif” ></A>

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: • <A HREF= “autores.html#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 autores.html) 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>

El lenguaje HTML: Principios básicos