El lenguaje HTML: Principios bsicos
Jhon Jairo Perez B. ECBTI Unad Pitalito
Caractersticas 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
Edicin de pginas HTML
Editores de propsito general Editores asociados al navegador:
Netscape Composer MS Front Page
Editores especficos
HoTMetaL
Procesadores de Texto
Manuales y Guas de referencia
A beginners Guide to HTML (accesible en formato PDF a travs del WWW) Buscar en www.uam.es en el apartado de Internet (multitud de Manuales y Guas) HTML avanzado. Bruce Morris, McGrawHill, Microsoft Press. Publicar con HTML en Internet. B. Heslop, Ed. Paraninfo.
Las etiquetas
El formato general a seguir:
<etiqueta>contenido</etiqueta>
La inclusin 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 prrafo
<P></P>
Centrado
<CENTER></CENTER>
Negrita y Cursiva
<B></B> <I></I>
Atributos de etiquetas
Alineacin de prrafos
Izquierda: ALIGN=left (opcin por defecto) Derecha: ALIGN=right Centrado: ALIGN=center
Utilizacin.
<p ALIGN=opcin>
Ejemplo 1
Creacin de listas
Listas no ordenadas
<UL> <LI> </UL>
Listas ordenadas
<OL> <LI> </OL>
Ejemplo 2
Aadir vietas 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 definicin
<DL> <DT> <DD> </DL>
Listas anidadas (Ejemplo 3)
<UL> <LI>
<UL> <LI>
Otras etiquetas
Lnea 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 >
Inclusin de imgenes
Formatos principales GIF y JPEG (Ejemplo 5) Sintaxis:
<IMG SRC= imagen.gif >
Atributos
<IMG SRC= imagen.gif HEIGHT= valor WIDTH= valor >
Alineacin
<IMG SRC= imagen.gif ALIGN= top >
Fondos
Pueden ser: Texturas, Imgenes y Colores Sintaxis:
<BODY BACKGROUND= fondo.gif > <BODY BGCOLOR= color >
Ejemplos 6, 7 y 8
Creacin de hiperenlaces
Permiten enlazar dos pginas cualesquiera independientemente de la ubicacin de cada una: local o en red. (ejemplo hiperenlace 1) Ejemplos:
<A HREF= http://www.elpais.es > Diario El Pas </A> <A HREF= pagina.html > Pgina1 </A> <A HREF= http://www.uam.es ><IMG SRC= imagen.gif ></A>
Hiperenlaces entre secciones de diferentes pginas HTML
Enlace desde una pgina (indice de autores.html) a una seccin especfica en otro documento (autores.html). (hiperenlace 2)
Primero creamos la referencia en el primer documento:
<A HREF= autores.html#A1 > Autor1 </A>
A continuacin creamos el anclaje en el segundo documento:
<A NAME= A1 > Autor1 </A>
Hiperenlaces entre secciones de la misma pgina HTML
Enlace desde una pgina (indice de autores.html) a una seccin del mismo documento. (hiperenlace 3) Primero creamos la referencia:
<A HREF= #A1 > Autor1 </A>
A continuacin creamos el anclaje en el mismo documento:
<A NAME= A1 > Autor1 </A>
