Uam7282 PDF

1
UNIVERSIDAD AUTONOMA METROPOLITANA

(UNIDAD IZTAPALAPA)
/ DIVISION DE CIENCIAS BASICAS E INGENIERIA
PROYECTO : TUTORIAL DE HTML, "PAGINA WEB"
MATERIAS : PROYECTO TERMINAL ( I YII)
' ALUMNO : FRANCISCO RUIZ
ASESOR : ING. MAURICIO LOPEZ VILLASENOR
'Abril de 2001
INDICE
225931
Objetivos .......................................................................................................................... 1
Introducción ..................................................................................................................... 2
Presentación ...................................................................................................................... 5
Parte I .
Básico
1.1 Estructura Básica de un documento HTML

1.1.1 Estructura
básica ................................................................................................... 8
1.1.2 Consideraciones al editar una página Web ......................................................... 10
1.1.3 OtrasetiquetasdentrodeHEAD ......................................................................... 11
1.1.4 Atributos de la etiqueta BODY ........................................................................... 14
1.2 Encabezados y Párrafos

1.2.1 Encabezados ........................................................................................................ 17
1.2.2 Párrafos ............................................................................................................... 18
1.2.3 Apartadosdetextosespeciales ............................................................................ 19
1.2.4 Regla ó trazo horizontal ...................................................................................... 19
1.3 Resaltado de texto

1.3.1 Resaltado de texto ............................................................................................... 23
1.3.2 Etiquetasde.contenidobásico ............................................................................. 25
1.4 Listas
1.4.1 Listas ordenadas ó numeradas ............................................................................. 26
1.4.1.1 Ejemplos de listas ordenadas ................................................................. 28
1.4.1.2 Miscelánea de atributos .......................................................................... 31
1.4.2 Listas no ordenadas o con viñetas ....................................................................... 32
1.4.2.1 Ejemplos de listas no ordenadas ............................................................. 34
1.4.3 ListasDirectorio .................................................................................................. 36
1.4.3.1 Ejemplos de listas directorio .................................................................. 38
1.4.4 ListasMenú ......................................................................................................... 39
1.4.4.1 Ejemplos de listas menú ......................................................................... 41
1.4.5 Listas de definición ............................................................................................. 43
1.4.5.1 Ejemplos de listas de definición ............................................................. 45
1.5 Tablas
1.5. 1 Estructura básica de una tabla ............................................................................. 47
1S.2 Etiqueta TABLE .................................................................................................. 47
1.5.3 Etiqueta CAPTION ............................................................................................. 48
1.5.4 Etiqueta TR ......................................................................................................... 49
1S.5 Etiqueta TH y TD ................................................................................................ 50
1.5.6 Ejemplos de tablas ............................................................................................... 51
1.6 Imágenes
1.6.1 Formatos gráficos aceptados ............................................................................... 63
1.6.2 Etiqueta IMG ....................................................................................................... 63
1.6.3 Ejemplos de imágenes ......................................................................................... 65
1.7 Direcciones
1.7.1 Vínculos de Hipertexto ....................................................................................... 68
1.7.2 Vínculos a páginas locales .................................................................................. 70
1.7.3 Vínculos externos ................................................................................................ 70
1.7.4 Vínculos internos .............................................................................................. 71
Parte I1.
Intermedio
2.1 Framers
2.1.1 Que es un frame .................................................................................................. 73
2.1.2 Etiqueta FRAMESET .......................................................................................... 73
2.1.3 Etiqueta FRAME ................................................................................................. 74
2.1.4 Ejemplo de un frame ........................................................................................... 75
2.1.5 Etiqueta NOFRAME ........................................................................................... 76
2.1.6 Etiqueta FRAME ............................................................................................... 77
2.2 Formas
2.2.1 Para quesirve una forma ..................................................................................... 78
2.2.2 Etiqueta FORM ................................................................................................... 78
2.2.3 Etiqueta INPUT ................................................................................................... 79
2.2.4 Etiqueta TEXTAREA ......................................................................................... 80
2.2.5 Etiqueta SELECT ................................................................................................ 82
2.2.6 Etiqueta OPTION ................................................................................................ 83
2.2.7 Ejemplo de formas .............................................................................................. 84
2.3 Mapas
2.3.1 Quees unmapa ................................................................................................... 86
2.3.2Cómocrearmapas ............................................................................................... 86
2.3.3 Etiqueta MAP ...................................................................................................... 86
2.3.4Etiqueta AREA .................................................................................................... 86
2.3.5 Ejemplosdemapas .............................................................................................. 87
2.4 Gifs animados

2.4.1 Quees un Gifanimado ........................................................................................ 91
2.4.2ComocrearGifsanimados .................................................................................. 91
Parte 111 .
Avanzado
3.1 Applets
3.1.1 Que son losapplets ............................................................................................. 93
3.1.2 Etiqueta APPLET ............................................................................................... 93
3.1.3 Etiqueta
PARAM ............................................................................................... 94
3.2 Multimedia
3.2.1 Etiqueta
EMBED ............................................................................................... 95
3.2.2 Etiqueta NOEMBED .................................. :....................................................... 95
3.2.2 Etiqueta
OBJECT ............................................................................................... 96
3.2.3 Etiqueta
BGSOUND .......................................................................................... 98
3.2.4Ejemplosdeaudiode fondo ............................................................................... 99
3.3 Texto Animado

3.3.1 Etiqueta
MARQUEE ........................................................................................ 101
3.3.2 Ejemplosdetextoanimado .............................................................................. 102
ANEXO
A.l Códigodecolores .............................................................................................. 106
A.2 Códigoparaintroducircaracteresespeciales .................................................... 107
A.3 Etiquetasrelacionadascon E-mail .................................................................... 108
Conclusiones ................................................................................................................. 109

Bibliografia ................................................................................................................... 112
+ Proyecto de Ingeniería Elecrrcinica *
UAM-I HTML Tutorral
+ e
OBJETIVOS :
Brindar a los interesados en editar páginas Web un apoyo para la elaboración de sus
propios documentos.
0 Dar a conocer el gran número de etiquetas y atributos que conforman el lenguaje

HTML, así comolas extensiones que tanto Netscape como Internet Explorer
brindan.
0 Que el usuario comprenda perfectamente cada una de las etiquetas y sus atributos,
por medio de ejemplos que este tutorial muestra.
0 Presentar el curso dividido por temas y así el usuario pueda ingresar a cada sección
de interés de forma rápida y cómoda. C .
1
IMM-l
+ ProJvcro de ingeniería Electronicn HTML Tutorial
*
P +
Introducción
La comunicación de datos se ha convertido en una parte fundamental de la

computación. Hoy en día, Internet es una de las herramientas más importantes en el mundo
de las comunicaciones.
Internet es el nombre de un grupo de recursos de información mundial. Su origen

proviene de una serie de redes de computadoras desarrolladas en la década de los '70s y
comenzó con una red denominada Arpanet. Esta red fue reemplazada y ampliada, y hoy sus
descendientes forman la arteria principal de lo que llamamos Internet.
Aprender a utilizar Internet, es embarcarse en una aventura, en la que se introduce

un
en mundo cuyas personas de muy diferentes países y culturas cooperan
desinteresadamente compartiendo de forma generosa su información y conocimiento; así
como su tiempo, su esfuerzo, y sus productos.
El WorldWideWeb(WWW) es un sistema de comunicación e informacicin

basado en hipertexto que se usa normalmente a través de Internet con un sistema de
transferencia de datos basado en el modelo cliente/servidor. Los clientes Web (conocidos
normalmente como browsers o navegadores ) pueden accesar información de hipermedia y
de múltiples protocolos usando un esquema de direcciones de red.
Desdeque se introdujo al mundoen 1990, el WWW a crecido de una forma

impresionante y ya son millones las personas que lo usan a diario en todo el mundo. El
Web es usado para la comunicación y distribución de información; así como para su
almacenamiento y disposición de forma global. El Web no es una red de computadoras sino
un sistema de aplicación (programa) que puede ser usado sobre Internet o sobre cualquier
red o, incluso, sin red alguna.
El hipertexto es una palabra o fiase especial en una página Web que sirve de vínculo
hacia otros elementos de Internet (como una página Web diferente, por ejemplo). Cuando
selecciona el vínculo (haciendo clic sobre é1 con el ratón), el recurso vinculado aparece de
manera automática en su computadora. Cualquier palabra o fiase puede designarse como
vínculo (también una imagen o un botón pueden ser vínculos). Sin embargo, no hay razón
por la que el vínculo tenga que llevar únicamente hacia otros documentos de Web; puede
emplearse para ir a otra parte del mismo documentoo iniciar una sección.
2
ProJwto de Ingenierin Electrój'licn Ttrtorinl HTML CL1hf-I
+ 4
La transcripción del texto en una página Web se realiza a través de HTML (que son
las siglas para Lenguaje de Marcación de Hipertexto <Hipertext Markup Language>) y es
la herramienta o lenguaje que se utiliza para crear documentos de hipertexto en Internet.
El lenguaje HTML es definido como un subconjunto del estándar internacional

SGML (Standard Generalized Mark-up Language) utilizado para la creación de
procesadores de palabras y otras aplicaciones que involucran el manejo de textos.
Al usar HTML, los creadores de documentos para el Web pueden estar seguros que
cualquier navegador presente o futuro podrá "leer" sus documentos y desplegarlos de forma
correcta. Esto quiere decir que no se tiene que crear una versión de HTML para Windows,
una para Unix y una para Machintosh sino que é1 mismo sirve para todas las plataformas.
El lenguaje HTML es definido de manera formal por una organización llamada

"HTMLWorkingGroup of the Internet Engineering Task Force" aunque algunos
navegadores como Netscape e Internet Explorer proponen extensiones al lenguaje HTML
que no son parte de los estándares y que se enfocan principalmente a mejorar la manera de
presentar la información, presentando nuevos elementos.
Este tutorial está pensado para guiar tanto a quien desee construir su propia página
Web, partiendo desde los conceptos fundamentales, así comoa quien tiene interés en
ampliar sus conocimientos.
El HTML es un lenguaje que define Características fisicas y estructurales de un

documento (tipo de letra, ubicación de un párrafo o frase, el lugar que será activo para la
conexión con otro documento, etc.). Esto lo logra por medio de órdenes o tareas que van
colocadas al principio y al final del texto a marcar, dentro de los signos "mayor que" y
"menor que". Las ordenes son llamadas no sensitivas debido a que no interesa si van en
mayúsculas o minúsculas. Los atributos también tienen esta característica.
Para comenzar sólo son necesarios dos elementos:
Un procesador de texto. Sirve cualquiera, siempre y cuando este no formatee el texto. Por
ello, los más adecuados son los más sencillos (como por ej., Notepad en Windows). Si se
utilizan procesadores como el Word, se deben guardar los ficheros como 'Sólo Texto', para
que no introduzca órdenes de fomateo, que pueden provocar errores al cargarlo enel
navegador..
Un navegador del Web. Para visualizar la página que se está editando en el procesador de
texto, de los cuáles se puede mencionar algunos de ellos como son: Netscape, Internet
Explorer, Mosaic, etc.
3
Pro)vcto de In,cenierinElecrrónicn Tutorinl HTML UAM-I
* *
+
El procesador de texto es usado para ir escribiendo los documentos HTML, que

serán posteriormente interpretados por el Navegador, con el cuál se pueden verificar los
cambios y nuevo código que se vayan incrustando.
Es importante hacer notar que la documentación esta presentada de la misma forma

como el usuario la percibe en Internet.
4
Proyecto de Ingeniería Electrónica
'' Tutorial de HTML ))
11 Introducción 11
5
Antecedentes
Introducción
Oue son las Tags
Indice de etiquetas
Cursos:
)I Básico 1) Intermedio )I Avanzado 11
Que son las Tags

Las etiquetas o tags es un código (generalmente una abreviatura de una o dos letras y en ocasiones en
una palabra) que especifica el tipo de efecto que se desea hacer al editar una página. Este código siempre
van rodeados por corchetes angulares 0,llamada también etiqueta de apertura; los corchetes le indican al
visualizador Web que se esta generando código HTML para que lo interprete y no lo tome solamente como
texto. La diagonal ( !)define a éSta como una etiqueta final o etiqueta de cierre.
Tndice de etiquetas
En la barra siguiente se muestra una lista a la que se puede accesar para obtener información de alguna
etiqueta 6 temasde referencia. Seleccione el tema dela lista y haga click enoprimaparaobtener
información.
3
(Las etiquetas “indice” son ligas que nos lleva a la parte superior de esta pagina)
cursos:
)I Básico 11 Intermedio )I Avanzado 1)
el
Home
6
PARTE I
CURSO BASIC0 DE HTML
7
-
4
Proyecto de Ingeniería Electrónica Tutorial HZUL UA"I
-
*
"ESTRUCTURA"
Los documentos HTML o páginas Web son archivos de texto que pueden ser creados con
cualquier editor de textos; a dichos archivos no se les debe dar formato (como puede ser
justificarpárrafos,cambiar el tipo y tamañodeletra,etc.) ya que los visualizadores o
navegadores ignoran este tipo de formato. Como los visualizadores siempre buscan archivos
con nombre que terminen con las extensiones .HTM o .HTML, guarde el documento final
usando una de ellas. Una advertencia importante: no intente dar formato al documento (como
agregar cursivas, centrar los párrafos, etc.) ya que todos los visualizadores Web ignoran por
completoestoscódigosdeformatoadicionaleseincluso pueden ocasionarproblemas al
visualizador Web.
La magia de Web funciona cuando el visualizador lee los archivos de texto y descifran los
códigos HTML que usted colocó en su documento. Estos códigos HTML son marcadores -
llamados etiquetas- que indican cómo quiere que se vean las cosas. En general, las etiquetas
emplean el siguiente formato:
(TAG) O A G >
<TAG> Este texto seve afectado por la etiqueta
La ETIQUETA (TAG) esun código (por lo general una abreviatura de una o dos letras, pero
en ocasiones una palabra) que especifica el tipo de efecto que
desea. Este código siempre van
rodeados por corchetes angulares (< >), llamada también etiqueta de apertura; los corchetes
le indican al visualizador Web que esta enfrentándose con un trozo de HTML y no sólo
cualquier texto. La diagonal (1) define a ésta como una etiqueta final o etiqueta de cierre.
Note además, que por el momento no se tiene ninguna acentuación entre las etiquetas, estos
se analizará más adelante.
Un documento HTML se divide en dos partes, "cabeza" y "cuerpo". El contenido de la

cabeza del documento no formaparte del documento en sí, sino que sirveúnicamente para
describir ciertas característicasdel documento. El contenido del cuerpo es donde seindica la
información que serádesplegada por el navegador en la página Web como son texto,
imágenes, ligas a otraspáginas, tablas, formas, etc.
8
de Tutorial HliUL UM-I
* Proyecto
4
Ingeniería Electrónica
*
*
'I Estructura básica de un documento HTML I'
Observe como laestructura del documento empieza con la etiqueta <HTML> y finaliza con
su correspondiente de cierre </HTML>. Antes de la etiqueta de inicio y después de la de
cierre no debe haber ningún tipo de información, ya que de lo contrario será ignorado por el S -
navegador ó en algunas ocasiones marcar error. Ir, 1

I
Posteriormente se encuentra el elemento HEAD que marca el encabezado del documento y t'
que cuenta con una serie de etiquetas dentro de su estructura, siendo TITLE el más usual. En
la que se identifica una etiqueta de apertura y una de cierre.
La etiqueta TITLE debe delimitarse por mandatos de inicio y cierre (es decir <TITLE>y
</TITLE>).Esta etiqueta sirve para poner un título general a nuestra página Web, para que el
usuario que consulte tenga una idea inicial del contenido de esta. Este título es el que aparece
en la parte superior de la ventana del navegador y debe contener un máximo de 64 caracteres
(para esta página en especial observe que el título que aparece es Estructura Básica de un
documento HTML).
Solamente puede definirse un título y por razones obvias no debe ser mayorde seis palabras;
el título debe describir claramente el contenido de esa página. No es válido usar ninguna
etiqueta de formato dentro de la declaración del título.
...
Otras etiquetas contenidas dentro de <HEAD> 4 E A D (Esta liga nos lleva a la página 11)
El cuerpo del documento HTML está rodeado por las etiquetas <BODY> ... </BODY> y es
donde se introduce el texto que en realidad aparecerá en la página Web. Laetiqueta cuenta
con una serie de atributos que nos ayudarán a tener una mejor apariencia de nuestra página.
Atributos del elemento BODY (Esta liga nos lleva a la página 14)
9
Provecto de hgenierin Electrónica Tutorial HTML UAM-I
+ *
*
" Consideraciones al editar unapágina Web "
10
-
* Proyecro de Ingenleria Electrbnrco Tutonal HlUL C
-"! I
*
*
" Otras etiquetas contenidas dentro de H E A D "
"ISINDEX"
El mandato <ISINDEX> indica al navegador que el documento es un " Indice consultable". Esto significa que el
documento, o mejor dicho, el programa que activa el documento, puede acceder a un banco de datos. El contenido
del documento quese muestra, consta en partede datos que pueden extraerse precisamente de este bancode datos,
dependiendo de una clave de búsqueda que el propio usuario introduce.
Esta etiqueta no requiere su correspondiente decierre y cuando el nanegador encuentra<isindex>, este adiciona una
interfase estándar para buscarel documento.
'I ATRIBUTOS de <ISINDEX...>
Extensión de atributos (Esta liga nos lleva a la página 13)
BASE If
El mandato <BASE> no contiene más que la dirección en donde puede llamarse el documento. Esta dirección se da
como valor del atributo HREF (Referencia de texto). La mención de la dirección tiene lugar en forma de una cadena
de caracteres. Este tipo de direcciones se indican en formade Universsal Resourse Locators (URL).
El mandato <BASE> es útil cuando dentro de un documento se emplean direcciones de documentos (URL)
abreviadas, cuyo significadodeja de estar claro tan pronto el documento concreto deja de estar disponible.Esta
circunstancia puede darse, por ejemplo, si se guarda un documento en el disco duro local de un usuario de Internet
para ser estudiado más tarde.
'I ATRIBUTOS de <BASE ...> 'I
Extensión deatributos(Estaliga nos llevaa la página 13)
11
de
+
Proyecto Ingenieria Electrcinica Tutorial HlUL UA"I
-
4
"LINK"
Un campo de aplicación del elementoLINK lo representan los llamados "banner". Algún ejemplo, serían las
representaciones de nombres de empresa O logotipos que deben mostrarse permanentemente por el visualizador
(browser), e independientemente del propio contenido del documento. Un mandatotípico conesta finalidad, tendría
tal vez este aspecto: <LINK REkBanner HREF=logo.htm>.
'I ATRIBUTOS de <LINK...>
"META"
Este elemento es usado para añadir información adicional que podría ser enviada al servidor como respuesta del
encabezado del documento.
'I ATRIBUTOS de <META ...> 'I
12
-
de
4
Proyecto Ingenzeria Elecfronica TutorialHTML UM-I
-
*
"NEXTID"
El mandato <nextid> es utilizado por los editores de texto automáticos, para garantizar que las direcciones dadas
sean inequívocas.
" Extensión de atributos I'
'I Extensión de atributos para <ISINDEX>
IACTION:
ACTION = URL
Permite proporcionar elUFU del programa quehará la búsqueda.
rtixtmbi6n dr nlrihurm de lnlemet E\plorer
Extensión de atributos para<BASE> 'I
MITARGET:
TARGER = NAME
Por omisión permite definirun destino de todas l a s ligas que se tengan dentro del
documento.
NIExLensijfn de atributos .le NclSG\pte Intemct E\plorer
13
de
-
* Proyecto Ingeniería Electrtinica Tutorial H l U L UAM-I
*
*
Atributos de la etiqueta
<BODY>
Con la versión HTML 3.2 la etiqueta BODY tiene diferentes atributos que controlan el
color y el fondo del documento dindole asi' una mejor apariencia.
0 BACKGROUND. Este atributo permite hacer una liga a una imagen para ser
usada como fondo o papel tapiz de una p6gina o documento. Es importante
mencionar que si el navegador no tiene l a capacidad para desplegar imdgencs esta
no aparece; o en su defecto, si dentro de las opciones de configuración, no se
encuentra activa l a opcicin "cargar grrificos" (Loading images) tampoco serti
desplegada la imagen.
BGCOLOR. Estc atributo permite aplicar un color de fondo al documento. Este
modificador tiene el formato RGCOLOR="#RRGGBB",aquí el ccidigo de
colores debe estar en forma hexadecimal donde RR=Ro*jo,(X=Verde p
BB=Azul. L a combinación de estos tres colores generan el color de fondo.
También sc puede poner el nombre del color entre comillas.
Por ejemplo: Negro="#000000", Rojo="#OOOOFF". Naranj3="#FF4500", ctc ...
TEXT. El color de texto predeterminado para l a visualización en una ptigina Web
es en negritas; sin embargo puede ser modificado a través del atributo TEXT para
seleccionar el color deseado. Existen otras etiquetas que se verrin mis adelante
que tambien pueden modificar el color de fragmentos de texto. L a definicicin del
color es la misma que la del BGcolor.
Por ejemplo: TEXT="#OOFFOO".
LINK. Atributo que define el color de las ligas de hipertexto en una pigina Web.
logrando con esto que la persona que navega por Internet detecte con m&
facilidad una conexión hacia otro documento.
EJENIPLO:
14
Proyecto de Ingenieria
Tutorial
Electrcjnica HWL
U"I
+ *
4
O VLINK. Define el color que se aplicar8 a las ligas que han sido visitadas en la
pasina para distinguirlas de las no visitadas por el usuario que esta navegando.
EJEMPLO:
O ALINK.Define el color de la hiperliga que el usuario activa durante la

navegación
Un ejemplo donde se ocupa estas opciones es el siguiente:
15
-
4
Proyecto de Ingenreria Electrcinica TutorialH W L UA"I
*
e
" Extensiones "
" ATRIBUTOS de <BODY> 'I
3
Regresa
(Esta liga nos lleva a la prigina 9)
16
- Proyecto de Ingenieria E k t d n i c a Tutorial HTML UAM-I
*
'I ENCABEZADOS Y PARRAFOS I'
Para darle una mejor presentación a un documento HTML se cuenta con diversas
etiquetas para manejar texto ya que se puede dividir en párrafos con sus respectivos
encabezados, trazar líneas al final de cada bloque, dar un cierto formato a un determinado
bloque ó jerarquizar en capítulos, subcapítulos, secciones y subsecciones.
"ENCABEZADOS"
El lenguaje HTML define seis niveles de encabezados que pueden ser utilizados para
estructurar un documento. Por un lado si la página que se desea editar, esta conformada
en gran parte por texto, se pueden utilizar las etiquetas de encabezado para dividir
secciones de texto y así mostrar títulos O subtítulos consu respectivo bloque de
contenido, dandole de esta forma una mejor presentación. El marcado de encabezado
tiene lugar con las etiquetas que aparecen resumidos con Hl,H2,H3,H4,H5 o H6.Los
encabezados conel marcado HI pertenecen alnivel más alto y se representa en
consecuencia con la fuente o el tipo de letra mayor, mientras que H6 utiliza la fuente más
pequeña.
Esta es su vista y tamaño en una página Web
Tradicionalmente se usa el encabezado de <H1> para títulos de documentos, d12> para

títulos de secciones y así hasta llegar a d16> usado generalmente para hacer pequeñas
notaciones.
17
Proyecto de Ingenieria Electrónica Tutorial H l u L UAM-I
-
'I ATRIBUTOS de <Hn ...>
Existe un atributo adicional por parte de Netscape e Internet Explorer que le dan una
mejor presentacih a los encabezados.
Extensión de atributos para <Hn> I'
PARRAFOS
Por lo general un texto se divide en párrafos. En el lenguaje HTML esta estructuración

tiene lugar mediante la etiqueta <P>. Con este mandato se inicia un nuevo párrafo y, de
este modo, se cierra implícitamente el párrafo anterior. Este elemento sirve para separar
párrafos y aunque cuenta con su etiqueta final -dP> no requiere que sea especificado, de
tal manera que sólose usa la marca de inicio. Cuando esta etiqueta es usada, se comienza
un nuevo párrafo en una línea separada e inserta una línea en blanco extra después del
párrafo anterior. Es importante mencionar que los párrafos se pueden finalizar por medio
de otros mandatos, por ejemplo, por medio de encabezamientos o a través del trazo
horizontal solicitado con < H R > , o al hacer un cambio de línea por medio de &R>. Este
- Proyecto de Ingenieria Electrónica Tutorial HTML UAM-I
*
4
elemento es equivalente a un retorno de carro. A diferencia del tag <P> este comando
( <BR> ) no inserta una línea en blanco, simplemente cambia de línea; esto es muy útil
para una mejor distribución del texto en la página.
El mandato ó etiqueta @RE> es una abreviatura de "preformato". El texto que se

encuentra dentro de los comandos <PRE> y ORE>se presenta en los navegadores de la
misma manera queaparece en un editor de texto respetando los espacios en blanco,
retornos de carro o tabulaciones.
APARTADOS DE TEXTO ESPECIALES
Muchas veces es necesario identificar apartados de texto concretos, o quizás tratarlos

de una manera diferente. Las etiquetas que describen esto, permiten diferenciar la
visualización de partes especiales del texto frente al texto restante. Uno es el comando
<ADDRESS> que se utiliza para señalar direcciones dentro del texto; otro es el comando
<BLOCKQUOTE> que sirve para marcar texto que se menciona de otros documentos.
TRAZO HORIZONTAL
Un elemento de estilo, importante para la estructuración básica del documento, además
del encabezado, es la posibilidad de insertar trazos horizontales. La etiqueta
correspondiente es < H R > (trazo horizontal). Es interesante la separación de los
encabezados de alta prioridad del texto restante por medio detrazos horizontales.
19
-
4
Proyecto de Ingeniería Electrónica Tutorial HlML UAM"
-
*
Líneas horizontales
ATRIBUTOS de <HR...>
Con el atributo WIDTH se modifica la longitud de las líneas

- fioyecto de Ingenieria Electrónica Tutorial H W UM-I
*
Con el atributo SIZE se puede modificartambién el grosor de la línea
Con el atributo NOSHADE queda desactivado el efecto 3D Típico Las líneas aparecen
ahora de colorgris oscuro
21
Proyecto de Ingenleria Elecwonica Tutorial H m L UAM"
*
Con el atributo ALIGN se puede decir la alineación horizontal de cada una de las
líneas.
Rezresa a p8,oina principal

(Esta liga nos lleva a la página 19)
22
Proyecto de IngenieriaElectrónica Tutorial HlUL
~
UA"I
-
I
"RESALTADOS"
Los resaltados de texto son aquellos que modifican la presentación del mismo enel
navegador y se presentan a continuación en la siguiente tabla con su descripción y efecto.
Etiquetas para atributos de texto
23
- Prqyecto de Ingenieria Electrónica TutorialHTML UAM"
I' Extensión de atributos para estas etiquetas

~-
MISTYLE: Este atributo ayuda a darle un estilo especial a las etiquetas de texto. Por
ejemplo <SMALL STYLE="COLOR: RED; FONT-STYLE: ITALIC "> "Atributo
style para etiquetas de texto"</SMALL> se ve en el navegador así...
' ' 2 ~ r t ~ i / w rrt\.lc
o pira c,riqucw.s de tc).\'to "
Observe que con este atributo se puede escoger el color y estilo del texto para estas
etiquetas.
N I I : x : ~ w ~ ! 6ilL*
r' I l.l i ~ ~ r l i t'\ph'c!l
:;I:I¡>L!O\ 'Ir > ~ ~ I i c ; li:y ~ it
Otras etiauetas para resaltados de texto (Estaliga nos lleva a la página 25)
La alineación de las etiquetas de resaltados y de contenido básico puede ser controlada en

cuanto a su alineación con las siguientes etiquetas:
24
Proyecto de Ingenieda Electdnica TutorialHlUL UM-I
4 *
.4) *
"RESALTADOS"
( CONTXNUACION )
Etiquetas de contenido básico
7.
Regresa
(Esta liganos lleva a la phgina24)
de Provecto Innenreria Electrónrca Tutonal HTML U'4hf-I
LISTAS
Las listas son una parte primordial de cualquier documento. Es por esto, que HTML
proporciona una serie de etiquetas para su creación y manejo.
" LISTAS ORDENADAS O NUMERADAS I'
Este tipo de listas se utiliza para cuando se quiere incluiruna lista numerada de
elementos. El visualizador de Web genera los númerosautomáticamente dependiendo de
la profundidad de la lista.
El código para generar este tipo de listas es:

"~.~-."""-~"-"..~-.
Lista ordenadoo numerada
_ _ ~ ~~
" ETIQUETA cLI...> "
La etiqueta 4.hes unilateral, es decir, solo se escribe la de apertura y sirve para definir
cada elementode la lista.
26
Proyecto deIngemería Elecironica Tutorial H W L ¡
"
U
'' ETIQUETA COL...> "

Las etiquetas <OL> ...dOL> sirven para rodear el contenido de la listay con este
comando se indica que se trata de una lista ordenada.
" ATRIBUTOS de COL...> "
Algunasvariantesenestaslistas ( Esta liganoslleva alapágina 31)
LISTAS:
I ordenadas I no ordenadas I directorioI menú Ide definicibn I
27
-
+
Proyecto de Ingenieria Elecwónlca Tutorial H W L U&f-I
*
4
3
Regresa
ATRIBUTO “COMPACT
Es
Represa
(: Todas las etiquetas“Regresa” son ligas que nos llevan a la página 27)
28
Proyecto de Ingenreria Electrónica Tutorial H W L UM-I
4 *
4 *
ATRIBUTO "STYLE"
I <OL STYLE="COLOR:
<LI>Hugo
OOAAOO; FONT-STYLE: ITALIC"> 1. HUPO
<LI>Paco
<LI>Luis
Observe como con este atributo se cambiael color y tipo de letra dentro de una lista
ordenada. En este ejemplo se uso tipo de letra itálicoy el color verde para el despliegue.
'j
Regresa
( Esta liga nos lleva a la página 27)
29
--
Proyecto de Ingenieria Electrónfca Tutorial HTML Uhf-I
*
4
EJEMPLOS DE LISTAS ORDENADAS

( ETIQUETA LI )
ATRIBUTO "TYPE"
1 <OL> ! i. Lunes
<LI TYPE="i">Lunes ! ii. Martes
<LI>Martes ! c. Mikrcoles
a <LI TYPE="a">Miércoles ! Jueves
d
d.
<LI>Jueves , E. Viemcs
<LI TYPE="A">Viernes j VI. Sábado
I <LI TYPE= I '' >Sábado
I' ' 7. Domingo
I
;i </OL>
I
<LI
TYPE= 1 >Domingo
'I 'I
. . ~ .
. ~ ~ . . il ~ .. .. ~ .~ . ..~
Observe que aunque cambia el tipo, la secuencia sigue progresivamente.

3
Regresa
ATRIBUTO "STYLE"
I
<OL>
<LI STYLE="COLOR:OOAAOO; FONT-STYLE: ITALIC"> Día
<LI STYLE="COLOR:RED">Mes
<LI STYLE="COLOR:000099">Afío
< /OL>
I
Observe como con este atributo se cambia el color En este ejemplo seuso
y tipo de letra dentro de una lista ordenada.
tipo de letra itálicoy el color verde para el despliegue.
3
Regresa
( Todas las etiquetas"Regresa" son ligas que nos llevan a la página 26)
- Proyecto de Ingenieria Electronica Tutorial HTML UA"
*
4
LISTAS ORDENADAS
(Miscelanea de atributos)
Universidad AutónomaMetropolitana
31
* Proyecto de Ingeniería Electrónica
*
Tutorial H?UL C1Wf-I
-
4
11 LISTAS NO ORDENADAS o CON VIÑETAS
Este tipo de lista se usa para formar listasde elementos queno requieren de un orden,
sino simplemente mostrar dichos elementos. el browser o
Para este tipo de listas,
navegador pone automáticamente una viñeta (circuloo cuadrado) al inicio de la frase en
el listado.
El códigopara generar este tipo de listas es:
Etiqueta UL
Esta etiquetale indica al navegador que setrata de una lista no ordenada,por lo que los
elementos que van'dentro de <UL> y su correspondientede cierre d J L > forman parte de
la lista.
" ATRIBUTOS de <m...

> "
32
-
de
4
Proyecto Ingenieria Electrónica TutorialH W L UM-I
*
" ETIQUETA cLI > " ...

Como ya se indico para la etiquetad b solo se escribela de aperturay al igual que en
las listas ordenadas sirve para definir cada elemento de la lista.
LISTAS:
1 ordenadas I no ordenadas I directorio I menú I de detinici6n I
-
Proyecto de Ingenreria Electrónica Tutonal H W L U“-I
-
+
EJEMPLOS DE LISTAS NO ORDENADAS

( ETIQUETA UL )
Por otra parte si el navegador que esta usando soporta

HTML 3.2, podrh observar los distintos valores con que cuenta el
atributo TYPE.
ATRIBUTO “COMPACT“
3
Regresa
( Las etiquetas “Regresa” son ligas que nos llevan a la página 32 )
34
Tutorial H W L uAh4-I
* Proyecto de Ingenieria Electrónica *
ATRIBUTO "STYLE"
Observe como con esteatributo se cambiael color y tipo de letra dentro de una lista no ordenada.
En este
ejemplo se uso tipo de letra itálico y el color verde para el despliegue.
3
Regresa
( ETIQUETA UL )
ATRTRTJTO "TYPE"
* Como ya se indico. si el navegador no soporta la versión 3.2 de HTML.no podr6 ver el efecto de este
atributo.
Observe como coneste atributo se cambia el color y tipo de letra para cada elemento deuna lista no
ordenada. .*e:
Rezresa
( Las etiquetas "Regresa" son l

ip que nos llevan a la página 33 )
35
-
4
Proyecto de Ingeniería Electrónica Tutonal H W L UAM-I
-
4
" LISTAS DlRECTORIO "
Las listas directorio es una forma especializada de las listas no ordenadas. Originalmente
el lenguaje HTML dedicaba la etiqueta &IR> para desplegar listas de archivos. Los
navegadores tratan de igual manera &IR> y <m>;sin embargo los elementos
insertados en este tipo de lista deben de ser pequeños, posiblemente no extenderse a más
de 20 caracteres. Los navegadores despliegan los elementosen forma de multicolumnasy
no pueden usar items (elementos) diferentes a los predeterminados. Como con las listas
ordenadas y noordenadas, las listas Directorio define sus elementos con la etiqueta
( L b ; sin embargo, esta no puede contener un bloque de elementos, incluir párrafos, otras
listas, texto preformateadoo formas.
" ETIQUETA DI13 "
Esta etiqueta sirve para indicar al navegador o visualizador que se desea desplegar una
lista de directorio. El contenidode la lista va dentro de la etiqueta <Dm> y la
correspondiente de cierre dDIR>.
" ATRIBUTOS de (DIR...> "
36
TutorialHTML UAM-I
* Proyecto
de
4
Ingeniería Electronica
*
*
" ETIQWTA <LI...> "
Ya se ha visto que con la etiqueta <Lb sólo se escribe la de apertura y al igual que en las otras listas sirve
para definir cada elemento de estas.
I' ATRIBUTOS de d.
>.. 'I
LISTAS:
I ordenada? I no ordenadas I directorio I & 1 de definicih I
37
Proyecto de IngenieríaElectrónica TutorialHllML UM-I
*
e
EJEMPLOS DE LISTAS DIRECTORIO

( ETIQUETA DIR )
ATRIBUTO ”STYLE”
Observe como con este atributo también se puede cambiar el color y tipo de letra dentro de una lista directorio. En este ejemplo se uso
tipo de letra itálico y el color verde para el despliegue.
3
R~WS:I .
( Las etiquetas regresa son ligas que nos llevan a la página 36)
( ETIQUETA LI )
A T R I R I I T n “TVPF”
2
”Regesa
ATRIBUTO “STYLE”
Observe como con este atributo se cambia el color y tipo de letra para cada elemento de una lista no ordenada.
zr‘
Kcorcsa
( Las etiquetas regresa son ligas que nos llevan a la página 37)
38
de
*
+
Proyecto Tutorial H W L UM-I
-
*
I' LISTAS MENU "
Las listas MENU es otra forma especializada de las listas no ordenadas; tieneel mismo efecto, pero con la diferencia
que despliega la listadeunaforma más compacta, es decir,ocupamenosespacioparaelinterlineado <MENU>
...</MENU>
Lista menú
'I ATRIBUTOS de < M E N U . . . > 'I

- Proyecto de Ingenieria Electrónica Tutonal HTML urn-I
*
Como ya se menciono, para la etiqueta <Lb se escribe únicamente la de apertura y al igual que en las otras
listas sirve para definir cada elemento a mostrar.
" ATRIBUTOS de <LI...> "
LISTAS:
,I ordenadas I no ordenadas I directorio I menú I de definición I

-
4
Proyecto de Ingenieria Electrcaica Tutorial HTML UA”I
*
3
Regresa
((Lasetiquetas “Regresa” son ligas que nos llevan a la página 39)

41
-
+
ProyectoTutorial
de Ingeniería Electrllnica H W U"-I
+
e
ATRIBUTO "STYLE"
<MENU STYLE="COLOR:OOAAOO; FONT-STYLE: ITALIC">
<LI>Sociedad
<LI>Cultura
<LI>Arte
<./MENU>
Observe como con este atributo se cambia el color y tipo de letra dentro de una lista no ordenada. En
este ejemplose uso tipo de letra itálicoy el color verde para el despliegue.
S
_Re2re_s_a
( ETIQUETA LI )
ATRTBUTO "TYPE"
<MENU>
<LI >Lunes
<LI>Martes
<LI TYPE="CIRCLE">Mi&COleS
<LI >Jueves
<LI TYPE="SQUARE">VierneS
<LI TYPE="DISC">Sabado
<LI>Domingo
< /MENU>
<MENU>
<LI STYLE="COLOR:OOAAOO; FONT-STYLE: ITALIC">Día
<LI STYLE="COLOR:RED">Mes ' blc.
<LI STYLE="FONT-STYLE: ITALIC">AAO
< /MENU>
r
Observe como con este atributo se cambia el color y tipo de letra para cada elemento de una lista no
ordenada.
3
Re
- ma
(Las etiquetas "Regresa" son ligas que nos llevan a la página 39)
42
Proyecto de Ingenieria Electrcinica Tutorial HZUL UAM"
4
*
+
I' LISTAS DE DEFINICION "
La presentación de las listas de definición tiene lugar en dos columnas. Estas listas funcionan como una
especie de diccionarioya que esta compuesta de dospartes; el termino y su definición.
El código para generar este tipo delistas es:

-. .
" - __
""ll__, I ... .~..,,." ~ _ _ _ _._. ,. ". ~. _- ,_~~,."
""_ - I .
_ _ ,."," . ... .".."x"*. ~..
Lista de
definicidn
'I ETIQUETA DL *'

La etiqueta <DL> y su correspondientede cierre </DL> sirvenpararodear el código de la lista de
definición que se desea mostrar en el navegador. Sus atributos son los siguientes:
" ATRIBUTOS de <DL ...> "
43
Ingenieria
e
Proyecto de Elecirónica Tutorial HTML uAk4-I
-
'' ETIQL-ETA DT "
L a etiqueta <DT.> define el término de una listo de definición.Es valida solamente cuando es precedida
por la etiqueta <DL> (lista de definición). Por lo regular el término esta formado poruna palabra a la que se
le dará una definición. Al finalizar el término, inmediatamente inicia la definición (cDD>), por lo que no es
requerido su correspondiente decierre.
" ETIQUETA DD "
Esta etiqueta precede a la definición del término que se ha definido en la etiqueta <DT>.Este tag no
lleva etiqueta de cierre.
LISTAS:
I ordenadas I no ordenadas I directorio I mcnú I dc delinici6n I
44
-
+ Proyecto de Ingenzena Electronica Tutorial H E W UAM-I
*
4)
EJEMPLOSDE LISTAS DE DEFINICION

( ETIQUETA DL )
ATRIBUTO "COMPACT"
<DL> UAM
cDT>UAM Universidad Autónoma
cDD>Universidad Autónoma Metropolitana Metropolitana
<DT>UNAM UNAM
cDD>Universidad Nacional Autónoma de México Universidad Nacional
cDT>IPN Autónoma de México
cDDzInstituto Politécnico Nacional IPN
</DL> Instituto Politécnico Nacional
Con el atributo COMPACT.
<DL> UAM
cDT>UAM Universidad Autónoma
cDD>Universidad Autónoma Metropolitana Metropolitana
<DT>UNAM UNAM
cDD>Universidad Nacional Autónoma de México Universidad Nacional
<DT>IPN Autónoma de México
cDD>Instituto Politécnico Nacional IPN
< /DL> Instituto Politécnico Nacional
Es posiible qttz 1 1 0 .;e V Z : ~1;) ~.(,~-rli?;l"t;~zi(jrl
y;r que ;11gunosnavsgad(~)rcsignoran cste atributo.
Observe comocon este atributo se puede cambiarel color y tipo de letra para todo el contenido de una
lista de definición.
3
Recesa
45
-
7
Proyecto de Ingenieria Electrhnica Tutorial HlUL UAM"
*
( ETIQUETA DT )
<DL>
<DT STYLE="COLOR:FF0000">UAM UAM
<DD>Universidad Autónoma Metropolitana Universidad Autónoma Metropolitana
<DT STYLE="FONT-STYLE: ITALIC">UNAM UNAM
<DD>Universidad Nacional Autónoma de México Universidad Nacional Autónoma de
000099;
<DT STYLE="COLOR: México
FONT-STYLE: SMALL-CAPS">IPN IPN
<DD>Instituto Politécnico Nacional Instituto Politécnico Nacional
</DL>
Observe como con este atributo se puede cambiar el color y tipo de letra para cada término de una lista
de definición.
2
Regresa
( ETIQUETA DD )
ATRIBUTO "STYLE"
<DL>
<DT>UAM
<DD STYLE="FONT-STYLE: ITALIC">
Universidad Autónoma Metropolitana UAM
<DT>UNAM Universidad Autónoma Metropolitatla
<DD STYLE="COLOR:FFOOOO"> UNAM
Universidad Nacional Autónoma de México Universidad Nacional Autónonlade México
<DT>IPN IPN
000099;
<DD STYLE="COLOR: Instituto Politécnico Nacional
FONT-STYLE: SMALL-CAPS">
Instituto Politécnico Nacional
</DL>
Observe como con este atributo se puede cambiar el color y/o tipo de letra para cualquier definición de
una lista de definición.
li
d
Regresa
-
(Lasetiquetas "Regresa sonligas que nos llevan a la página44")
46
Proyecto de
Electrdnica
Ingenieha Tutorial H l u L
UA"I
+ *
4
I
'I TABLA :1 "</CAPTION> " TABLA 1 "
I
!
navegador
el en
Vista UNO DOS TRES
I1 UNO DOS TRES
La etiqueta <TABLE>...</TABLE> define el comienzoy fin de una tabla, siendo sus atributos:
47
- Proyecto de Ingenieria Electronica Tutorial HTML U"I
*
4
'I Extensión de atributos para <CAPTION>"
ETIQLETA <TR >

I' ... 'I
La etiqueta <TR> indica la inserción de una fila, cuando se usaesta etiqueta dentro del código de una tabla,
se genera una nueva fila. Estaetiqueta cuenta con los siguientes atributos:
Extensión de atributos paracTR>

TutorialHlML U"I
* Prqwcto de IngenieriaElecthica *
" ETIQUETAS <TH ...> 1' <TI)...> 'I
Con cualquiera de estas etiquetas se define una celda, así como su contenido que será mostrado dentro de
una fila determinada de la tabla. La etiqueta TH sirve para escribir texto en forma de encabezado en una
tabla, ya que es mostradoconletras negritas. Por SU parte TD sirve para escribir texto que no es un
encabezado, sino simplemente datos.
ATRIBUTOS de <TH>v <TD> 'I

P r o p t o de Zngenrería Electxhica TutorialHTML urn-I
4
4
*
*
ATRIBUTO “BORDER”
<TABLE BORDER=5>
<TR>
<TH> UNO
<TH> DOS
<TR>
<TD> UNO
<TD> DOS
<TR>
</TABLE>
Observe como con este atributo se le da un borde a todas las celdas de la tabla (en este caso un borde de
cinco píxeles), así como un contorno especial alrededor de la misma.
3
Regresa
Una tabla también puede estar centrada. en este caso se usa l a etiqueta <CENTER> ...</CENTER>para rodear al c6digo
de la tabla.
I<CENTR>
!<TABLE>
<TR>
<TH> UNO
<TH> DOS
< TR>
<TD> UNO
<TD> DOS
<TR>
</TABLE>
<CENTER> : I
7
Re,osesa
(Las etiquetas “Regresa” son ligas que nos llevan a la página 47)
51
Proyecto de Ingenieria Eketrinica Tutorid H l W UM-I
* +
4
ATRIBUTO "CELLPADDING"
<TABLE CELLPADING=lO>
<TR>
<TH> Columna Texto
Columna Texto I F
<TH> Img
< TR>
<TD>Sangría mínimo de Sangría mínimo de 10
10 píxeles en cada celda píxeles en cada celda
<TD><IMG SRC="../../FIGURAS/Jaras.jpg">
<TR>
< /TABLE>
En la celda donde seencuentra la figura se puede ver con más detalle como se guarda una sangría o
contorno de 10 píxeles entre el borde de la celda y la imagen. En la columnade texto se puede ver una
sangría mínima de 10 píxeles entre el inicio del texto y el borde de la celda.
ATRIBUTO :ELLSPACING"
<TABLE CELLSPACING=8>
<TR>
II Columna-1 II columna-2 II
II Il c c l d a l I
<TH> C o l m a - 1 I 1 I , I I
<TH> C o l m a - 2
<TR> espacio deocho que separa a cada
<TD>espacio de ocho píxeles
I 1- I I I
<TD>que separa a cada celda
<TR>
< /TABLE>
Para este ejemplo, observe que el espacio que separa a cada celda es de 8 píxeles; dando laapariencia
de una enmarcación en cada una de ellas.
2
Regresa
TutorialHlilriL
*Proyecto de ingenieriaEkctrbnica LIZ"
+ *
I,
ATRIBUTO "WIDTH"
<TABLE WIDTH=100>
<TR>
<TH> COIL. uno
<TH> Col.dos
<TR>
<TD>Long. prevista
<TD>de cada c e l d a
<TR>
< /TABLE>
Si una palabra ocupa más espacio que lolargo de la celda, está se extiende al tamaño de la palabra. En
el caso de que ninguna palabra sea más larga que el tamaño de la celda, este es respetado. En el ejemplo
considere que cada celda tuviera un largo de 100 píxeles, sin embargo, en la segunda celda de la
columna uno la palabra prevista es más larga que el tamaño que le fue dado a cada celda de la tabla.
Regresa
Como podrá observar, si no se utiliza el atributo align el efecto sobre el título es el mismo al usado con
el valor top. Esto se puede ver en los ejemplos anteriores.
Regresa
ATRIBUTO "STYLE"
<TABLE>
<CAPTION STYLE="COLOR:
0 0 0 0 9 9 ; FONT-STYLE: ITALIC">
"Título"<CAPTION>
<TR>
<TH> UNO
<THs DOS
m
<TRs
<TD> UNO "Título"
<TD> DOS
<TR>
< /TART,G>
~ ~- _ _ ~ ~"
ATRIBUTO "VALIGN"
Por default un título es mostrado como encabezadoy además centrado en una tabla, sin embargo, con la
combinación de los atributosalign y valign se pueden alinear a la derecha o hacia la izquierda en el
encabezado o pie de una tabla.
<TABLE>
<TABLE> <CAPTION &IGM=LE?T
<CAPTION ALIGN=LEF'r> I.XLIGN=BOTTOM> " T i ~ u l o "
"Título"<CAPTION> <CAPTION>
< TR>
<TR>
<TH> UNO <TH> UNO
<TH> DOS <TH> DOS
<TR> <TR>
<TD> UNO <TD> UNO
<TD> DOS .<TD>DOS
< TR>
cTR>
</TABLE> </TABLE>
<TABLE>
<TABLE> <CAPTION ALIGN=RIGHT
<CAPTION ALIGN=RIGHT> rALIGN=BOTTOM> "Titulo"
"Título"<CAPTION>
<CAPTION>
<TR> <TR>
cTH> UNO <TH> UNO
<TH> DOS <TH> DOS
<TR> <TR>
cTD> UNO <TD> UNO
<TD> DOS <TD> DOS
<TR> <TR>
< /TABLE>
< /TABLE>
-
*
Proyecto de Ingeni%riaElectrbnica Tuton'alHZUL UAM"
*
*
ATRIBU': 1"ALIGN"
<TABLE> :TABLE>
<TR> <TR>
<TH> DEFINE <TH> DEFINE
<TH> DATOS <TH> DATOS
<TR ALIGN=LEFT> I DEFINEIIDATOSII <TR ALIGN=RIGHTr
<TD> UNO <TD> UNO
<TD> DOS <TD> DOS
< TR> <TR>
< f TABLE> :/TABLE>
I
<TABLE>
<TR>
<TH> DEFINE
<TH> DATOS
<TR ALIGN=CENTER>
<TD> UNO
<TD> DOS
<TR>
2
Regresa
ATRIBUTO " OWRAP"
<TABLE>
<TR>
<TH> Col. uno
<TH> C o l . dos l.Clo)1
Coi. dos I
<TR NOWRAP> [luna línea.((Datosen una sola línea.)(
<TD;Una sola línea.
<TD>Datos en una sola línea.
<TR>
< /TABLE>
En este caso el texto es en una sola línea. Solamente cuandoel texto sobrepasa al tamaño de la ventana
se generauna nueva línea.
3
Regresa
((Lasetiquetas "Regresa" son ligas que nos llevan a la página 49)
ATRIBUTO "VALIGN"
<TABLE>
<TR> <TR>
<TH> DEFINE <TH> DEFINE
<TH> DATOS <TH> DATOS
<TR VALIGN=BOTTOM> <TR VALIGN=BASELINE>
<TD> UNO <TD> UNO
<TD> DOS <TD> DOS
</TABLE> :/TABLE>
<TABLE>
<TR>
<TH> DEFINE
<TH> DATOS
<TR VALIGN=CENTER> IlDEFrNEllDATosll
<TD> UNO
<TD> DOS
< /TABLE>
2
Regresa
ATRIBUTO "BGCOLOR"
1 I
'I1
ATRIBUTO "STYI
<TABLE>
<TR>
<TH> UNO
<TH> DOS
<TR STYLE="COLOR:FFOOOO; FONT-STYLE:ITALIC">
<TD> UNO
<TD> DOS
<TR>
< /TABLE>
58
ProyeCo de Ingenim'a Electrónica Tutorial HliUL UAM-I
*
+ *
ATRIBUTO "BORDERCOLOR"
~
<TABLE>
<TR>
<TH> UNO
<TH> DOS
<TR BORDERCOLOR=YELLOW>
<TD> UNO
<TD> DOS
<TR>
3
Regresa
ATRIBUTO "BORDERCOLORLIGHT"
<TABLE>
<TR>
<TH> UNO
<TH> DOS
<TR BORDERCOLORLIGHT=GREEN>
<TD> UNO
<TD> DOS
<TR>
< /TABLE>
ATRIBUTO "BOF: D
l3RCOLORDARK"
:TABLE>
<TR>
<TH> UNO
<TH> DOS
<TR BORDERCOLORDARK=RED>
<TD> UNO
<TD> DOS
<TR>
((Lasetiquetas "Regresa" son ligas que nos llevan a la página 49)

EJEMPLOS DE TABLAS
( "ETIOIJETA TH Y TD " ')
ATRIBUTO "ALIGN"
#<TABLE> <TABLE>
<TR> <TR>
cTH>DEFINE <TH> DEFINE
<TH>DATOS
<TR>
ONU>DT<I
<TD ALIGN=LEFT>DOS mrI <TD>UNO
<TDALIGN=RIGHT>DOS
I< /TABLE>
~~~ - < /TABLE>
<TABLE>
<TR>
l<TH> DEFINE
<TH> DATOS
<TR>
Cm0
<TD ALIGN=CENTER>
<TD> DOS
ATRIBUTO "VALIGN"
'
I
<TABLE>
<TABLE> <TR>
<TR> <TH> DEFINE
1
<TH>DEFINE
cTH>DATOS <TR>
<TR>
<TD>UNO <TD
<TD VALIGN=TOP>DOS VALIGN=BOTTOM>DOS /(DOS
< /TABLE>
</TABLE>
<TABLE> <TABLE>
<TR> <TR>
<TH> DEFINE
<TH> DATOS
<TR> <TR>
<TD VALIGN=CENTER>UNO <TD VALIGN=
<TD> DOS BASELINE>UNO
<TR> cTD> DOS
</TABLE> < /TABLE>
l(Las etiquetas "Regresa" son ligas que nos llevan a la página 50)
ATRIB UT "COLSPAN"
:TABLE>
<TR>
<TH> UNO
<TH COLSPAN=2> DOS
<TH> TRES
<TH> CUATRO
<TR>
<TD> 1
<TD> 2
<TD> 2
<TD> 3
<TD> 4
:/TABLE>
ATRIBUTO "ROWSPAN"
<TABLE>
<TR>
<TH ROWSPAN=2>UNO
<TH> DOS
<TH> TRES
<TH> CUATRO
<TR>
<TD> 2
<TD> 3
<TD> 4
< /TABLE>
ATRIBUTO "HEIGHT"
:TABLE>
<TR>
<TH> UNO
<TH> DOS
<TH> TRES
3
Regresa
ATRIBUT(
- "STYLE"
<TABLE>
<TR>
<TH> UNO
1
<TH " COLOR :O 0 0 0 9 9 ;
STYLE=
FONT-STYLE: ITALIC> DOS
<TR>
<TD STYLE="COLOR:FF0000">UJVO
<TD> DOS
ATRIBUTO "NI WRAP"

<TABLE>
<TR>
<TH> Col.uno
<TH> Col.dos
I COL uno I Col. dos
lmlinea.......)Datos en una sola línea,
<TR>
<TD>Una sola. línea.. . . . . .
<TD NOWRAP>Datos en una sola línea
<TR>
</TABLE>
En este caso el texto es en una sola línea. Solamente cuando el texto sobrepasa al tamaño de la ventana
se genera una nueva línea.
3.
3
Regresa
ATRIBUTO "BGCOLOR" 225931
<TABLE>
<TR>
<TH BGCOLOR=WHITE>UNO
<TH> DOS
<TH> TRES
<TR>
<TD> 1
<TD> 2
<TD BGCOLOR=FF0000>3
< /TABLE>
ATRIBUTO "BACKGROUND"
<TABLE>
<TR>
<TH BACKGROUND="../../figuras/fondol.Jpg"> UNO
<TH> DOS
<TH BACKGROUND="../../figuras/fondol.Jpg"> TRES
(1m((3[
<TR>
<TD> 1
<TD BACKGROUND= . . / . . / figuras/ fondo2 .Jpg " > 2
'I
<TD> 3
< /TABLE>
ATRIBUTO "BORDERCOLOR"
<TABLE>
<TR>
<TH> UNO
<TH> DOS
<TH BORDERCOLOR=GREEN> TRES
<TR>
<TD BORDERCOLOR=FFOOOO> 1
<TD> 2
<TD> 3
*
*
Propcto de Ingenieria Electrkaica TutotialHlML UAM”
-
4
ATRIBUTO “BORDERCOLORLIGHT”
77
<TABLE>
<TR>
<TH BO.RDERCOLORLIGHT=OOOOFF~ UNO
<TH> DO,S
<TH> TRIES
<TR>
cTD> 1
<TD> 2
<TD BORDERCOLORLIGHT=BLACK>.3
</TABLE>
ATRIBUTO “BORDERCOLORC RK”
:TABLE>
<TR>
<TH> UNO
cTH> DOS
cTH BORDERCOLORDARK=YELLOW> ‘TRES .
<TR>
cTD BORT)ERCOLORDARK=OO9999> 1
<TD> 2
<TD> 3
: /TABLE>
(Las etiquetas “Regresa” son ligas que nos llevan a la página 50)
"TMAGENES"
Este elemento que forma parte del lenguaje HTML sirve para incluir imágenes en la
página Web para darle así una mejor presentación. Existen sólo algunos formatos
gráficos que se aceptan de manera universal por los visualizadores; estos son el formato
GIF, el formato JPEG y JPG.
El formato que se empleacon más frecuencia es GIF (Formato de intercambio de

gráficos) ya que todos los visualizadores grhficos de Web soportan este formato.
Los formatos JPGY JPEG sólo seusan cuando las imágenes son fotos ya que estas
requieren de una mayor resolución.
De esta forma cuando se trata de un logo, letrero o dibujo; el mejor formato en que se
debe diseñar es el GLF para que la imagen ocupe menos espacio.
A continuación se presentan los atributos con que cuenta esta etiqueta y se pueden utilizar
dependiendo de la necesidad.
" ATRIBUTOS de <IMG...> "

Tutorial HEUL
* Propcto de IngenieriaElecrrbnica UAM"
I)
+ e
ATRIBUTO "SRC"
SRC: Dentro dela etiqueta < IMG > es esencial contar con esteatributo ya que por medio del URL se hace la llamada a la
imagen que se va a insertar. 131 modificador SRCse utiliza para indicar la localización o ruta de acceso al archivo GIF o
JPGE que se va a mostrar.
Para mostrar la imagen en este ejemplo se genera la ruta donde esta localizada la imagen. Primeramente salta dos niveles de
donde se localiza esta página (../../) y después se localiza al subdirectorio FZCURAS para tomar de ahíla imagen quees vista
en el ejemplo.
En el siguiente capítulo se analizanlas formas de direccionamiento.
Regresa
ATRIBUTO "ALIGNtt
izquierda
<BODYz
<IMG SRC="../../FIGURAS/Jaras.JPG"
ALIGN=LEFT>
/BODY>
derecha
<BODY>
<IMG SRC="../../FIGURAS/Jaras.JPG"ALIGN=RIGHT>
< /BODY>
< / HTML>
<HTML>
<BODY>
<IMG SRC="../../FIGURAS/Jaras.JPG"ALIGN=BOTTOM>
< /BODY>
< /HTML>
<HTML>
<BODY>
<IMG SRC="../../FIGURAS/Jaras.JPGbALIGN=TOP>
< /BODY>
</HTML>
<BODY>
<IMG SRC=". . / . . /FIGURAS/Jaras.;JPG" ALIGN=MIDDLE>
< /BODY>
ALIGN:Permite la alineación dela imagen en la página Web.
3
Re gre-a
"-
(Las etiquetas "Regresa" son ltgas que nos llevan a la página 63)
ATRIBUTO " K T "
7 II I1
<HTML>
<BODY>
<IMG SRC=. . / . .. /FIGURAS/UAMl. GIF"
ALT="Universidad Autónoma Metropolitana">
</BODY>
/ HTML>
I I I Coloque el ratón sobre el logo

ALT: Este atributo se utiliza para mostrarun texto explicativo de la imagen desplegada para informarel contenidoo función de la misma
en el momento que se posicionael cursor del ratón enla imagen. También sirve cuando algún navegador no tiene la capacidad para
desplegar gráfkos y muestra el texto.
3
Represa
ATRIBUTO "BORDER"
I
It II il
<HTML>
<BODY>
cIMG SRC=". . / . ./FIGURAS/UAMl.GIF" BORDER=2>
<IMG SRC="../../IZIGURAS/UAMl.GIF" BORDER=I>
<IMG SRC=". . / . ./FIGURAS/UAMl.GIF" BORDER=15>
<IMG SRC="../../FIGURAS/UAMl.GIF" BORDER=B>
BORDER: Con este atributo se defineun marco o borde alrededor de la imagen el cual es medido en píxeles.
<BODY>
<IMG SRC=". ./ . . /FIGURAS/U?@l1 .GIF" HEIGHT=20>
<IMG SRC=". . / . . /FIGURAS/UAMl .GIF" HEIGHT=70>
< 1 BODY>
</H?"L>
I'
HEIGH: Atributo que indica la altura deseada para
la imagen medida en píxeles.
3
Regresa
:HTML>
<BODY>
:IMG SRC:=" . . / . . /FIGURAS/UAMl .GIF" WIDTH=80>
:IMG SRC="../../FIGURAS/UAMl.GIF" WIDTH=150>
< /BODY>
:/HTML>
WIDTH: Atributo ql ndica el ancho deseado para la imagen, medido en píxeles.
(Lasetiquetas "Regresa son ligas que nos llevan a la página63")

Proyecto de 1ngenim.a Ekfr¿wica Tutorial HZUL UM-I
+ *
4
4TRIBU1'0 "HSPACE"
HSPACE: Atributo que se utilizapara definir el espacio que debe quedar entre la imagen a desplegary los
textos o imágenes que puede haber a la derecha o a la izquierda de la misma.
4TRIBUTO "VSPACE"
VSPACE: Atributo que se utiliza para definir el espacio que debe quedar entre la imageny los textos o
gráficos que puede haber arriba y abajo de la misma.
Regresa
(Las etiquetas "Regresa son ligas que nos llevan a la página 63")
67
- Proyecto de IngenieriaElectrcinica Tutorial HlML UA"I
e
*
" V I N C U L O S DIE H I P E R T E X T O "
Otro recurso de HTML (quizá el de mayor importancia) es el vínculo de hipertexto Para entender este
concepto, primero se debe entender quees una dirección, más conocida como un localizador de
recursos uniformes (URL, Uniform Resource Locator). Un URL es un apuntador o esquema de
dirección que indica la localización exacta de un recurso de Internet que le permite dirigirse hacia una
cierta porción de datos localizada dentro de Web (el URL proporciona en método universal y
consistente para localizar información y así tener acceso a ella). Cuando alguien le dice que dirija o
apunte su visualizador hacia una ubicación especial en Web, esa persona debe proporcionarle el URL
que le indicará hacia donde debe dirigirse. Así, cada página Web (y de hecho cualquier recurso de
Internet) tiene su propia dirección llamada localizador de recursos uniformes. En resumen el URL le
permite saltar de una página a otra. Sin embargo, como se analiza más adelante, la dirección UFU no la
observa en su página Web, más bienuna palabra con la que se vincula. Entonces, el vínculo de
hipertexto es una palabra o frase especial en una página Web que, al hacer clic sobre ella, conduce hacia
un documento diferente de Web.
Un URL consta de tres partes: un protocolo, la dirección de la computadora (o host) que contiene la
información que deseamos accesar y el nombre del archivo.
El protocolo indica que método se usará para obtener la información; existen siete protocolos:
PROTOCOLO I DESCRIPCION
FtP m r r a n s f e r Protocol
Gopher IGopher
1tHtt; ¡ & & - T e xTransfer
t Protocol ¡I
IIElectronicIlMailto Mail II
IlUsenet
IlNews News
!I
II
~~~
(ITelnet 1ITelnt:t
.-
lwais IIWide: Area Information Servers11
Los URL's que utilizan los protocolos ftp, gopher, http, telnet y wais seguidos de dos puntos (:) y de dos
diagonales (I/),por ejemplo:
http://www.uam.com
ftp://ftp.abc.def
Para el protocolo mailto, el protocolo va seguido de dos puntos (:) y la dirección de un e-mail, por
ejemplo:
mailto:paco@proyecto.uam
68
Prvcto de Ingenieda
Elechdnica Tutorial H l u L U!-I
-
Para el protocolo news, este va seguido de dos puntos (:) y del nombre de grupo Usenet.
news:com.info.www
Es posible además hacer vínculos a otras páginas en nuestra computadora, enel mismo
directorio o donde sea que seencuentre.
HTML usa las etiquetas <A> y d A > para identificar áreas de texto que servirán como anclas
para las ligas a otros archivos. El atributo HREF en la etiqueta <A> indica la localización de la otra
página o de cualquier otro recurso en donde se encuentre este.
Esta etiqueta siempre debe ir acompañada del atributo HREF (que sonlas siglas de Hypertext
REFerence), por ejemplo:
<A HREF="URL">EI texto para hacer el vínculo va aquídA>
Usted solo tiene que reemplazar URL por la dirección real de la página WEB a la que desea ir
(note que esta debe ir entre comillas). Todo el texto que se ubica entre la etiqueta de apertura la la
apertura de cierre se convertirá en el vínculo mismo, El texto para hacer elvínculovaaquí y se le
reconocerá en la pantalla porque aparecerá resaltado o subrayado en azul o rojo, cuando se despliegue la
páginade Web y es sobre el que usted o sus lectores harán click para "brincar" al documento
especificado por el atributo HREF.
Por lo general, los vínculos de hipertexto se dividen en dos categorías: externos e internos. Un
vínculo externo es aquel que envía a la persona clue lo selecciona hacia un documento diferente. Aquí
hay dos opciones: puede ir hacia una página Web que se encuentra en un directorio diferente o en un
sistema diferente, o puede vincular hacia una página Web que se encuentra en el mismo directorio que
la página actual. Un vínculo interno envía al lector hacia una parte diferente del mismo documento.
Ahora bien, si se desea haceruna liga a otrodocumento que está localizado en el mismo
directorio, solamente se tiene que proporcionar el nombre del archivo en el atributo HREF y colocar un
texto entre las etiquetas <A> y d A > para hacer el "brinco", por ejemplo:
La <A HREF="introduccion.htm">IntroduccióndA>
Este vínculo es el más sencillo; pero supongamos que tenemos la siguiente estructura:
Si usted estuviera en lapágina basicosl.htm y quisiera iraavanzados3.htm,tienequesubir un nivel,entrar al
subdirectorio donde se encuentran las páginas avanzadas .y dar el nombredela página, o bien, darlaruta completa para
localizar el archivo. La primera opción es lamás sencilla y lamás recomendable, pero ¿Como hacer para moverse en el
árbol del directorio?; retomando el ejemplo, dado que se necesita subir un nivel se usandospuntos (..) y unadiagonal (/)
para indicar que se desea ira un nivelmás alto, luego se: da el nombredelsubdirectorioendondeseencuentranuestro
archivo y finalmente, separados por una diagonal (I),el nombre de la página a la que se requiere tener acceso, de tal manera
que el vínculo quedaría de la siguiente manera:
<A HREF="../avanzado/avanzados3.htm">TemasAvanzadosdA>.
Si se requiere subir másde un solo nivel, solo se tiene que repetir el bloque (../) tantas veces como sea necesario.
Pero si por el contrario, la intención es descender un nivel, las reglas anteriores siguen siendo válidas pero con la
diferencia que en lugar de dos puntos (..) solamente se usa uno (.), por ejemplo, si se quiere accesar a archivo.htm1 desde el
archivo principal.htm enel nivel más alto, se establece como:
A estamaneradeindicardonde se encuentran los archivosse le llamarutarelativaporqueseapuntahaciael

documento al que se quiere vincular describiendo la relación que existe entre aquél y el documento en uso; pero es posible
también especificar el vínculo hacia otro documento usando nombres de rutas absolutas, estas se dirigen hacia el documento
buscado, comenzando desde el directorio raíz y de ahí van descendiendo a través de todos los directorios intermedios hasta
llegar al archivo que busca.
Los nombres de rutas absolutos siempre comienzan con una diagonal, pues de esta manera se diferencias de los nombres de
ruta relativos. Enseguida de la diagonal se escriben todos los directorios de la ruta que se debe seguir desde el directorio raíz
hasta el archivo que se va a vincular.
Para vincular sus propios documentos unos con otros se recomienda usar nombres de rutarelativos en lugar de rutas
absolutas. El uso de nombres de ruta absolutos podrá parecer un método fácil para realizar vínculos complejos entre muchos
documentos, pero los nombres de ruta absolutos no son transportables, es decir, si traslada sus documentos a cualquier otro
lugar del disco, o si renombre un directorio o un disco que esté contenido en la unidad de ruta absoluta, el resultado será que
todos sus vínculos se romperán y tendrán que trabajar arduamente para editary corregir todos sus archivos HTML.
VINCULOS A PAGINAS L.OCALES
En HTML se usa la etiquetas c b y d b para identificar áreas de texto que servirán como "anclas" para hacer las
ligas a otros archivos. El atributo HREF es un modificador del ancla que indica la localización del otro archivo o de otra
página.
Lo más probable es que si crea mas de una página WEB, por lo menos unas cuantas de ellas estarán relacionadas,
así quetalvez desee incluir vínculosquellevena SUS lectores haciaotros ejemplos de su creatividad en Web. Tal vez
almacenetodassuspáginas Web enelmismo directorio, por lo quelaspartesdel URL seránlasmismasquelasdel
documento actual, pero sino es el caso, ustedya sabe corno indicar la posición mediante rutas relativas o absolutas, por
ejemplo:
VINCULOS EXTERNOS.
El tipo de vínculo más común, es aquel que envía al lector fuera de la página hacia otro sitio (site) de WEB, de
hecho, muchas páginas incluyen vínculos que conducen hacia los sitios de WEB favoritos del autor y hacia los sitios que el
autor considera "interesantes". Estos vínculos, llamados hot lists (listas importantes) son muy populares en las páginas base.
El código de HTML, que debe utilizar para establecer vínculos hacia documentos en WEB tiene el mismo formato
que el código utilizadopara establecer lavinculación entre documentos locales. Utilizarála misma etiqueta c b con el
atributo HREF (donde indicará el URL deldocumentoen WEB) e incluirá algún texto que funcione como vínculo ensu
página WEB.
VINCULOS INTERNOS.
Hasta el momento a utilizado la etiqueta <A> para crear vínculos entre documentos (un método donde cada vínculo
se dirige hacia otro documento). Sin embargo, ¿que sucede:si se desea hacer vínculos hacia las diversassecciones del mismo
documento?Por ejemplo, si ha producido unapágina WEB larga(variasdecenas de líneas), enlugarde obligara sus
lectores a desplazarse a travé:s deé1 puede configurar vínculos hacia las diversas secciones del documento y luego ensamblar
estos vínculos enlapartesuperiordelapáginaparaformaruna especie de "hipertabla de contenido". Por suerte, y para
contestar la pregunta, HTML puede hacerlo mediante un ancla. Así al activar el vínculo el visualizador WEB se desplazará
hasta la parte donde se encuentra el ancla y desplegará el texto correspondiente.
Para crear una etiqueta de ancla se utiliza casi el mjismo método que para la creaciónde vínculos, el formato general
para un ancla es:
<A NAME="Nomb're">Sección =</A>
Unaetiquetade ancla se parecemuchoa una etiquetadevínculodehipertextonormal; la diferencia consiste en que se

substituye el atributoHREF por el atributo NAME y Nombrtees una palabra(s) clave(s) que servirá como referencia al ancla.
Para crea un vínculo hacia el ancla debe utilizarse la misma estructura que para vincular un documento completo (con el
atributo HREF) en la que debe incluir el signo de número (#y)y el nombre del ancla exactamente como aparece en el atributo
NAME del ancla, de la siguiente manera:
<A HREF="#Nombre">Ir a la sección XXX-dA>
Por logenerallas anclas se empleanparavincularse con secciones delamismapágina,sin embargo, es posible
usarlas como vínculos con secciones específicasde otras páginas. Todo lo que tiene que hacer es agregar un ancla apropiada
enlaotrapágina y luego vincularla agregando el nombre del archivo o el URL deldocumentoen el atributo HREF y el
nombredel ancla (precedido como siemprepor #) al final del nombre de archivo de lapágina. Por ejemplo, esta es una
etiqueta que establece un vínculo con una sección llamada cYúsica de un archivo HTML llamado archivo.htm1:
<A HREF="../archivo#clasica">MÚsica clásica d A >
El vínculo indica al visualizador que se desplace un directorio inmediato superior en relación con el directorio en uso, que
cargue el documento archivo.htm1 y que se traslade al nombre de ancla clúsica de tal manera que el texto indicado quede en
la parte superior de la pantalla.
Regla horizontal
~~ -&
Estructura Texto Resaltados Listas Tablas Imagenes Vínculos
n
TE I
72
I’ FRAMERS ”
Por medio de los FRAMERS se puede dividir la ventana original del navegador en varias subventanas,
cada una de
las cuales puede representar un documento H T M L . Estos documentos pueden estar
relacionados entre si o inclusive ser independientes.
Es de importancia mencionar que algunos navegadores no soportan esta etiqueta. En general se puede
decir que Netscape Navegatoren su versión 2.0 e Internet Explorer 3.0 soportan esta etiqueta, así como sus
versiones posteriores.
El elemento principal relacionado con los FXAMERS es la etiqueta <FRAMESET> donde el elemento
<BODY> de un documento básico de HTML es reemplazado por esta etiqueta.
Su estructura es la siguiente:
‘‘ ETIQLiETA FRAMESET ”
Los atributosconquecuentaestaetiqueta se muestranenelsiguientecuadro, así comolafunciónque

desempeñan.
73
4
4
Proyecto de Ingenieda Electrbnica Tutorial HluL UM-I
-
4
" ETIQLET'A FRAME 'I
I ^ " . .,.l..._l_" - "-"."_""l

" Extensión de atributos ara <FRAME> "
EJEMPLO:
INTRODUCCION
FRAMER:
]Sección 11 Seccicin 21
75
- Proyectode Ingeniería Electrbnica Tutorial HXUl UA"I
*
"NOFR.AMES"
Hay algunos navegadoresqueno pueden interpretarlosmandatos(FRAMESET> y

(FRAME>, por lo que, tampoco podrán mostrar en pantalla un documento creado con
estos mandatos. Para dejar abierta la posibilidad de mostrar texto normal se introduce el
mandato <NOFRAME>. Esta etiqueta sirve para mostrar un mensaje que indique que el
documento creado con FRAMES no puede ser visto por el navegador y que se debe
utilizar otra versión sea que capaz visualizar
de estos
documentos.
La etiqueta NOFRAMES debe poseer, tanto mandato de inicio como de fin, y el texto
contenido entreesasdosmarcasseinterpretarácomo si setratarade un documento
habitual de HTML.
EJEMPLO
i
76
FRAMER:
Sección 11 ISección 21
-
P
Proyecro de IngenieriaElectrónica Tutorial H7ML UN-I
*
*
F O li M A S I'
Las formas por lo general están relacionadas con archivos llamados CGI (Common Gateway Interfase) que sirven para
recibir la información dada en ella y la procesan para realizar alguna acción. Sin embargo se dará una breve explicación de
las etiquetas que están relacionadas con las formas, así como los diferentes atributoscon que cuenta cada una de ellas.
Etiqueta FORM
Con esta etiqueta se marca el inicio y el fin de la instrucción que realiza una forma. A continuación se presentan los
atributos con que cuenta estaetiqueta, así como la función que esta realiza.
I' ATRIBUTOS de & O M . . . > 'I
o METHOD: Este atributo puede tener dos valores "POST" o "GET" y se usandeacuerdo a la acción que debe
realizar la forma. Si Csta se utiliza para recoger datos que serán procesados por un programa (CGI) para modificar
información en otros archivos, se debe utilizar el método POST. Por otra parte se utiliza el método GET cuando
la forma sólo hace búsquedas o consultas sin modificación alguna.
o ACTION: Este atributo es obligatorio y sirve norrnalmentepara abrir el documento HTML o el programa CGI
que se ejecutará al procesar la información capturada en la forma. Este depende del método utilizado en la forma
(POST ó GET). En otras palabras se puede decir que especifica el URL (dirección) a la que se envían los datos
contenidos en el formulario. La dirección es del programa que procesa los datos, generalmente localizado en un
directorio llamado cgi-bin. Puede usarse los protocolos HTTP o MAILTO.
0 ENCTYPE: Atributo poco utilizado que sirve para especificar el tipo de envío de datos, con el método POST.
Este asume el valor applicatiodx-wwwf-form-urlencoded.Otro código es multipart/form-data,quesolamente
es soportado por Netscape. Cuando los datos son en.viados al servidor, el navegador siempre codifica los datos por
seguridad.
k I
* En el >¡pienrecapítulo se presentan otras etiquetas que se tltilizan para el diseiio de formas mostrando sus respectivos
atributirs.
i
Eiemplo de FORMAS
ITabla de colores 4
FORMAS:
ISección 1ISección 2 1 Sección 31
i
I
?a
--
Proyecto de Ingenjba Electróniica Tutorial HTML um-r *
+
"F0R.M A S "
" ETIQUETA IMPUT "
Esta etiqueta se utiliza para recopilar la información que será proporcionada por una persona que esté
utilizando la forma y cuenta también con una serie de modificadores quese describen en la siguiente tabla.
79
I' Extensión de atributos para <INPUT> It
" ETIQUETA TEXTAREA "
Esta etiquetaseutiliza paraaquellasentradasdeinformaciónquerequierenmúltiplesrenglones de

texto, es decir, permite al usuario ingresar un texto en bloque dentro de un formulario.
" ATRIBUTOS de <TEXTAREA ...> "

- Proyecto de Ingenieria Electrónica
. .
Tutorial HluL U&-I
-
-
It Extensión de atributos para <TEXTAREA> It
Eiemplo de FORMAS
FORMAS:
]Sección 11 ISecciÓn 2ISección 31
81
Proyecto de Ingenieria Electrónica fitorial HlWL UAM-I
*
"FORMAS"
" ETIQUETA SELECT It
Esta etiqueta se utilizaparaproporcionaralosusuarios una listadeopcionesaseleccionarque se

muestra en la pantalla como una pequeña ventana que se expande y por la cual se puede desplazar para ver
todas las opciones. Dentro de esta etiqueta se utiliza otro modificador llamado OPTION que se analiza más
adelante. Por lo pronto se estudian los demás atributos de esta etiqueta.
" ATRIBUTOS de <SELECT ...> "
" Extensión de atributos para<SELECT> "
82
- Proyecto de Ingenieria Electrbnica
-
TutorialH??ML urn-I
*
ETIQUETA OPTION "
Proporciona cada uno de los elementos que formarán la lista de opciones a seleccionar. Esta etiqueta se
ingresa dentro de SELECT, y sólo puede contener texto (no puede incluir lenguaje de marcado).
It ATRIBUTOS de <OPTION...> 'I
Eiemplo de FORMAS
(Esta liga nos lleva a la página84)
FORMAS:
jSección 1 Sección 21 Sección 31

" Ejemplo de FORMAS "
84
Proyecto de Ingeniería Electrónica Tutorial HTML UA"I
+ *
P *
" ENCUESTA "
Edad: r
Estado civil:
C Soltero
C Casado
Divorciado
' Otro
Ponga una marcaal país que no sea una isla:
;Cuál es su navegador favorito de Web? lrUetscape3

;Cuál de estos sabores de helado ha probado alguna ocasión?
Fresa
Vainilla
Chongos
Ponga un refrán aqui:
E l que madruga D i o s lo ayuda. *

I
T
. ." ". . .. .. . .. "...I. . .. . . . . .. .
Al terminar
- esta encuesta haga click en la figura para envhrla:
. . 9-8
Regresa a:
Proyecto de Ingenietia Electrbn,ica TvtotidHlML UAM"
0- *
" MA PA S "
Así como se usan las forrnas para dar opción alos visitantes de interactuar con una página, se pueden usar imágenes con
puntos sensibles para lograr 121mismo efecto. A estas imágenes se les conoce como mapas sensibles y son muy utilizados a
nivel mundial dentro de Internet.
Un mapa proporciona la forma de unir o relacionar una zona de una imagen con una liga de hipertexto, formando así
menús gráficos que permitan llevar al usuario a otro lugar dentro mismo
del documento ó inclusive a otros documentos Web.
Para crear un mapa, es razonable que se debe contar con la imagen que servirá como mapa. Esta imagen debe estar en
formato GIF o P E G y debe ser pequeña (unos cuantos kb) para que sea transmitida de forma rápida y eficiente. Existen
algunas herramientas comoWeb Hotspots que ayudan a crear y manejarmapas, las cuales generan automáticamente todo el
código HTML necesario y además fijan las ligas de hipertexto.
los
En este caso se generaráun mapa manualmente, por lo que muestranlas etiquetas que son necesarias, así como
atributos con que cuentan dichas etiquetas.
" ETTQT.iETA MAP "
Las etiquetas <MAP> y </MAP>rodean el código de lo que será el mapa y va dentro del cuerpo de un documento HTML.
Algunos navegadores no soportan este tipo de imágenes por lo que ignoran el contenido de la etiqueta M A P y simplemente
no desplegaran el mapa en la ventana del navegador.
I
~ ~~ ~~ ~
0 NAME: El valor de este atributo es el mismo nombre usado por el atributo USEMAP en la etiqueta <IMG...> la cual indica que la imagen que
se despliega corresponde a un mapa Este nombredebe ser único y no debe ser usadopor otro mapaen el mismo documento.
" ATRIBUTOS de <AREA...> "
0 .ALT Nos permite poner un texto alternativo que será desplegado en caso de que la figura no sea desplegada.
0 COORDS: Con este atributo se definen las coordenadas cartesianas (en un plano x.y).
0 HREF: Este atributo es eí que indica a que documento se hace referencia en dicha zona de la imagen, para que cuando se señale con el ratón
lleve al usuario al archivo indicado.
0 NOHREF Sirve para definir un área dentro del mapa que no está asociado a ningún archivo, es decir al hacer click sobre esta. no tiene efecto
0 SHAPE: Este atributo define la forma de la imagen sensible (RECT. CIRCLE. POLY, AREA).
1Regla horizontal 3
FRAMERS FORMAS GIFS

MAPAS
86
- Prqwcto de Ingenida Elecírbnica
-
lLioria1 H l u L UA"I
*
~~~ ~
EJEMPLOS DE MAPAS
Primeramente hay que tener las figuras geométricas que servirán como hipertexto hacia otro documento. AI
tener el documento se debe saber las coordenadas de cada figura para que sean localizadaspor el mapa.
j <MAPNAME=Ejem-Mapas
<AREA SHAPE="RECT" COORDS="24,95,132,143" HREF="Mapal .HTM">
~ <AREA SHAPE="CIRCLE" COORDS="79,42,24" HREF="Mapa2 .HTM">
<AREA SHAPE="RECT" COORDS="177,15,230,68" HREF="Mapa3 .HTM">
i <AREA
SHAPE="POLY" COORDS="166,143,202,89,237,143" HREF="Mapa4.HTM">
/ <AREA
SHAPE="AREA" COORDS="166,143,202,89,237,143"HREF="Mapa4.HTM"'.
! <AREA
SHAPE="RECT" COORDS="O,O . 282,167" HREF=HREF="#MAGO">
i </MAP>
<IMG . ./ . . /Figuras/MAPA.GIF"
SRC=" USEMAP="#Ejem-Mapas">
87
3
Regresa al mapa
(Esta liga nos llevaa la página 87)
3
. -Regresa
(Esta liganos lleva a la página 86)
88
EJEMPLOS DE MAPAS
~~~ ~ ~ ~~ ~
3
Re-
(Esta liga nos lleva a la página
87)
EJEMPLOS DE MAPAS
Re,presa
87)
EJEMPLOS DE MAPAS
3
ReEresa
87)
EJEMPLOS DE MAPAS
3
-
Regresa
(Esta liganos lleva a la página87)
I' GIF'S ANIMADOS 'I
Los gifs animados son muy simples de crear y le agregan un toque de movimiento a una página, que realza su impacto visual.
Generalmente, no conviene usar gifs animados solo por que si. Me refiero a que por ejemplo poner una flecha animada al lado de
cada opción no es un uso muy creativo y no agrega nada interesante. Los mejores usos son logos animados, un ojo que hace una
guiñada, luces de autos que se apagan y prenden. y cosas asi. Por ejemplo, imaginen la página de un informativo de TV en internet.
Junto a la opción de noticias de último momento una luz roja (como un LED)que se apaga y se prende. El gif animado, de solo 2
cuadros, crea la ilusión de que esa opción en constantemente activa, siempre alerta. En esto de los gifs animados, son los detalles
los que cuentan.
;Qué es un GIF animado?
Un gif animado es una gif como cualquier otro, solo que contiene varios cuadros dentro de si. El formato gif hace años que soporta esto, pero nunca fue
muy utilizado. Pero ahora, parece esta extraña opción de el formato gif encontró su destino. Un gif animado en realidad esta compuesto por varios cuadros,
siendo cada cuadro un gif creado por separado anteriormente. Cuando se juntan cuadros en un gif, el gif muestra cada cuadro cierto tiempo, creando la
ilusión de una animación. Se puede especificar el tiempo que cada cuadro sea mostrado, efectivamente acelerando y desacelerados la animacibn.
Creando un GIF animado

Crear un gif animado consta dedos etapas:
l. Crearcada GIF por separado
2. Unir los gifs sueltosenun gif animado

1.Crear cada GIF por separado
Un gif animado nace de varios gifs separados. Primero hay que crear cada gif con un programa que pennita salvar la imagen como gif. Cada uno usará el
que más le guste. Conviene no usar gifs de mas de 64 colores, ya que no olviden que el gif final ocupad aproximadamente la suma de todos los gifs que se
usen. En el gif animado que ven ma5 arriba, fue formado a partir de estos gif sueltos:
cuadro
Primer Segundo cuadro Tercer cuadro cuadro
Cuarto Quinto cuadro Sexto cuadro
2.Unir los gifs sueltos en un gif animado
Una vez que se tienen los gifs sueltos, unirlos es muy fácil. Se necesita un programita para unir los gifs; uno muy bueno y fácil de usar es el GIF
Animator de Microsoft (Win95). Pueden usar estos mismos gif sueltos para probarlo, en Netscape Navigator opriman el botón derecho sobre el gif y
eligan 'save as'. En el gif animator inserten los 5 cuadros, verán que all¡ les pueden cambiar elorden. Luego seleccionen todas l a s imágenes, le danen
'image:duration 200 (2 segundos). Eligan preview y veran la animación. Luego eligan 'save as' y listo. Cuando carguen el gif que acaban de grabar, verán
un hermoso GIF Animado!
Un par de sugerencias: elijan loop infinito, Netscape parece que no le gustan los gifs animados con un número específico de loops. Otra: si el gif es
grande pero solo hay movimiento en una área pequeña, carguen como primer cuadro el gif entero, y los cuadros siguientes recórtenlos para que solo sea la
parte animada, así ahorrarán muchos Kbytes!
I
k g l a horizontal
~ ~ _...
91
92
Tutorial Electrónica
0
provecto de Ingenieria
~~
HlML UAM-1
-
+
"APPLETS"
Los applets son pequeños programas ejecutable:; escritos en el lenguaje de programación Java, que se
pueden colocar en un servidor, junto con el resto del documento H T M L . Si en alguna de las páginas se
coloca un applet, cuando un usuario cargue la página, recibirá del servidor dicho applet (como ocurre con
las imágenes o archivos de sonido), y se ejecutará en el navegador.
Es indispensable contar con un navegador compatible con Java; como pueden ser Netscape ver. 2.x o
superior, Internet Explorer 3.0 o superior, o para mayor seguridad HotJava (navegador escrito totalmente en
Java). Si se utiliza un navegador no compatible, no se verála ejecución delprograma(ni se cargará),
aunque se puede enviar un mensaje de este hecho. También puede existir la posibilidad de que el navegador
tenga inhabilitada la carga de programas Java.
Con los applets se pueden conseguir efectos visualesysonoros,textos en movimiento, juegos

interactivos, presentaciones multimedia, etc. Es deseable que los programas sean pequeños para no alargar
en exceso su tiempo de carga. Para colocar un applet en una página Web, lo primero que se debe hacer es
contar con el programa del applet para que sea 1lama.do a ejecutar su rutina.
" ETIQUETA APPLET 'I
La etiqueta APPLET puede estar acompañada por algunos o ningún parámetro. También puede contener
texto alternativo; dicho texto aparece entre las etiquetas<APPLET> ... </APPLET> y no es incluido en una
etiqueta de parámetros.Este es utilizado para el caso en que los navegadores no soportan O no tienen
habilitado Java.
" Atributos deCAPPLET...> "

-
0
Proyecto de Ingenieria Electrónica TutorialHlML UAM-I
*
" ETIQUETA PARAM 'I
La etiqueta PARAM sirve para pasar nombres de prámetros a un applet de Java, y se utiliza como etiqueta de separación. El applet usa
el método o función getParam() de la clase applet para retomar elvalor de un parámetro. Además la etiqueta PARAM sólo puede
aparecer entre las etiquetas.<APPLET> y </APPLET>.
" Atributos de cPA R A M . . .> I'
Un Deaueíío eiemulo
: APPLETS
94
-
+
Proyecto de Ingeniería Electrónica Tutorial HluL UAM-I
-
" AUDIO Y VIDEO "
" ETIQUETA EMBED "
Con este comando es posible asociara un documento HTML cualquier objeto vinculado con una aplicación
Windows. Al utilizairlaetiqueta EMBED, losprogramasexternossedesarrollanexclusivamenteen
segundo plano. Con este mandato se pueden incrustar tanto archivos de sonidocomo archivos de video.
" ATRIBUTOS DE <EMBED> NI"
" ETIQIJETA ~:NOEMBED>NI 'I

de
0
4
Proyecto Ingenieria Electrónica Tutorial HZML uAh4-I
-
*
" ETIQUETA OBJECT "
MULTIMEDIA:
Parte 11Parte 21
1
1
1
I I
i APPLETS ANIMADO
MULTIMEDIA
TEXTO
i
1
I
i
L
TutorialHII1.IL urn-I
* Proyecto de Ingenieria Electrónica *
P 4
'I AUDIO Y VIDEO I'
<HTML>
<BODY>
...
...
<EMBED S R C = " w o o e e p . a u " >
<EMBED S R C = " A v i s o . w a v " >
<EMBED S R C = " D r a g d r o p . a v i " >
...
...
< /BODY>
< / HTML>
FLegresa
(Esta liganos lleva a lapágina 95)
97
Proyecto de Ingenieria Electrbnica Tutorial HlML
*
e
UAM"
*
e
" AUDIO DE FONDO
Utilizandolasiguienteetiquetaesposible:asociarunarchivodesonidoaundocumento
HTML, siempre que el usuario disponga de un reproductor de sonido.
MULTIMEDIA:
Parte 11Parte 21
de Ingenieno Electrb,wica TutorialHluL U!-I
* Proyecfo
I' AUDIO DE FONDO 'I
" EJEMPLO "
Cuando no se utiliza el atributo LOOP y sólo se señala el archivo de audio, este se

escucha solamente una vez. Si se desea escucharlo nuevamente se tiene que recargar la
página.
Reaesa
-
(Esta liga nos lleva a la pagina 98)
Ingenieria
+ Proyecto de HWL UAM"
-
AUDIO DE FONDO
'I EJEMPLO CON LOOP=4 'I
En este ejemplo IJ00P=4, indica que el audio de fondo se repetirá 4 veces. Si se desea
escuchar nuevamente, hay que recargar
la página.
Reg-esa
-
" EJEMPLO COW LOOP INFINITO "
En esteejemplo LOOP=INFINITE, indicaqueelaudiode fondo serepetirá

la carga 6 salir del
constantemente. Si se desea parar, hay que cambiar de página, detener
navegador.
Regresa
-
98)
-
de
4
Proyecto Ingenieria Electronrca Tutorial HlUL UA"I
-
TEXTO ANIMADO It
Con la etiqueta <MARQUEE> . . . </MARQUEE> se lograqueel texto se desplacehorizontal o

verticalmente a través de la pantalla. La etiqueta cuenta con una serie de atributos, los cuales hacen que el
texto animado tomeun aspecto de anuncio luminoso.
Dadoque es un elementoexclusivode Internet Explorer esta etiqueta es ignoradapor los demás

navegadores; en este caso su contenidoes desplegado como texto estático.
" ATRIBUTOS de <MARQUEE ...>I *e
101
Tutorinl HTML I
L'A M-
* Proyecto deIngenierin Elecrrónicn 4
e 4
'I Ejemplos de texto animado I'
"ATRIBUTO ALIGN"
Este atributoesempleadoparaalinearel "texto adesplazar" con eltextoquelorodea.Cuandoel

atributo toma el valor de TOP, se toma la parte superior del marco de desplazamiento comoreferencia para
alinearlo con el texto común; para el valor BOTTOM, observe que se toma la parte inferior del marco como
referencia parala alineación; y cuandoelatributotoma el valor de MIDDLE elmarco es alineadoala
mitad.
3
Regresa
-
Paraelvalor SCROLL, observe que enelmomentoqueterminadedesplazarsetodoel texto,

nuevamente lo desplaza como al inicio enlamisma dirección; con elvalor SLIDE, eltexto se desplaza
solamente una vez; mientras que con el valor ALTERNATE, el texto se desplaza de un lado a otro sin que
este desaparezca del marco dondese desplaza.
3
Re-
-
E] valor LEFT (por default), indica que el texto inicia a la derecha del marco y se desplaza hacia la
izquierda.
El valor RIGHT,indica que el texto iniciaa la izquierda del marco y se desplaza hacia la derecha.
3
Res-esa
(Lasetiquetas "Regresa" son ligas que nos llevan a lapágina 101)
102
EO 1
inl
-
Elecrrónicn
*
ProJeclo de Ingenierin UAM-I
"ATRIBUTO WIDTH"
píxeles
ventana
enLargo
la de w g o d'
Por default el largo del marco de desplazamiento aparece suficientemente grande. En

este caso mostramos el largo del marco de desplazamiento de 260 píxeles para el primer
ejemplo y con un porcentaje del 75% de la ventana para el segundo ejemplo.
3
-
Kt-
"ATRIBUTO VSPACE"
Paraesteejemploelespacioque hayde losasteriscos al marcoes de 10 píxeles,

indicando la altura del espacio libre.
*
4J
Kegresa
-
"ATRTBUTO HSPACE"
Paraesteejemploelespacioque hayde losasteriscosalmarcoes de 50 píxeles,

indicando el ancho del espacio libre.
3
Remesa
(Las etiquetas "Regresa" son ligas que nos llevan a la phgina101)
104
Ingenierin firrorinl HTML UAhl-I
* ProJ.errode Electrónrcn
En este caso cuando el texto cambia de una fase a otra, salta 30 pixeles dando la apariencia de un desplazamiento más rápido.
3
. ~~~ ~~~ ~ ~
"ATRIBUTO SCROLLDELAY"
Con este atributo controlamos el tiempo de salida y desplazamiento de cada carácter. Para el ejemplo
tenemos que el tiempo de saliday desplazamiento es de un segundo.
:3,
Remsa
"ATRIBUTO STYLE"
Observe como con este atributo cambiamos el tipo' de letra en que será desplegado el texto.
.",
Rezresa
105
Proyecto
Tutorial de Ingeniería
Electrrinica HTML UAM-I
L
CODIGO DE COLORES
A continuación se muestra una tabla con el codigo decada color. Laforma en que se
especifican es RVA(R=Rojo-V=Verde- A=Azul), en formato hexadecimal utilizando dos
lugares para la definiciónde cada color como se muestra a continuación:
CODIGO DE COLORES = R R W A A
106
-
4
Proyerro de Ingenierín Electróni'cfl Ttrrorinl HTML
UAM-I
CODIGO PARA INTRODUCIR CARACTERES ESPECIALES
Rewesa a EXT-BODY
107
inl Electronicn
ProJecto de Ingenierin HTML UAM-I
+ *
4
ETIQUETAS DE PRESENTACI~N
( E-MAIL )
"BLOCKQUOTES"
Estecomando es usado para indentar texto, pero no funciona para todos los
visualizadores; deja un margen tanto a la izquierda como a la derecha del párrafo.
"ADDRESS"
Sirve para indicar que el texto encerrado dentro de esta etiqueta, y su correspondiente
etiqueta de cierre, es una dirección (URL).
'I Esto se ve así: 'I
E-mail: paco@.runultt.~~nin.lt~
Francisco Ugalde Ruiz
Regresa a pagina principal
108
Proyecro de Ingeniería Elecrrórticfl Trltorinl HTML WAM-I
+
e
CONCLUSIONES
Como Puede darse cuenta, crear páginas Web es realmente fácil, basta con saber la
funcionalidad de las etiquetas básicas del lenguaje HTML, contar con un editor de
texto para escribir el código HTML y un navegador para visualizar la página escrita.
Al estudiar este tutorial, observa que esta distribuido por temas que van desde lo
más básico (para aquellos usuarios que desconocen el lenguaje) hasta lo más avanzado
donde incluye texto en movimiento y audio.
El tutorial esta redactado de forma muy didáctica, donde se han tratado cada tema
por separado y cada una de las etiquetas se ha explicado textualmente; así como con
algunos ejemplos que demuestran su funcionalidad. Cabe mencionar que algunas
etiquetas cuentan con un gran número de atributos que también tienen ejemplos
demostrativos, los cuales ayudan a darle una mejor presentación a la página que en
determinado momento se este editando.
Por otra pade si se esta diseñado una página y se desea incrustar una tabla, una
imagen o cualquier otro elemento con cierto atributos que en determinado momento no
se recuerdan, se pude abrir el tutorial y entrar a la página correspondiente al tema de
interés para analizar la etiqueta y conocer sus atributos a través del texto que los
describe o por medio de algún ejemplo. Esto se puede realizar de forma muy fácil, ya
que por mediode las ligas o conexiones se salta de una página a otra dentro del tutorial
para ver las características de determina.das etiquetas o atributos que en algunos casos
tiene ejemplos demostrativos que se pueden visualizar por medio de una conexión a
dicho ejemplo y posteriormente regresar a la página principal del tema a estudiar.
Este tutorial cuenta con extensiones de etiquetas o de atributos que son propias de
navegadores como Netscape o Internet Explorer y se han incrustado tomando en cuenta
que son los visualizadores más reconocidos en el mercado y por lo tanto los que tienen
mayor aceptación en el mundo de Internet. Para ver el efecto de los atributos que son
propios de estos navegadores se tendrá que utilizar el navegador indicado en los
ejemplos mostrados.
El tutorial está dividido en tres cursos que tratan temas básicos, intermedios y
avanzados en los cuáles cada tema se analiza de forma independiente, es decir, cada
página contiene información de algún tema o etiqueta específica. Además, al final de
cada una de estas páginas existen conex.iones a otras páginas del mismo curso, lo que
hace que los usuarios ingresen de forma rápida al tema deseado.
1o9
L
Proyecto de Ingenierin Electronicfl Tutorid HTML UAM-I
-
En cada página se analiza la función que realizan determinadas etiquetas y se dan a
conocer los atributos con los cuales cuentan dichas etiquetas. Como ya mencionamos,
conforme se van explicando textualmente cada uno de estos atributos la mayor parte
tienen conexiones aun ejemplo demostrativo, donde se puede hacer clic con el ratón en
el nombre del atributo (en este tutorial son resaltados en color azul), en caso de querer
analizarlo y regresar al sitio donde se realizó la conexión para seguir analizando los
ejemplos de los demásatributos.
Las listas, imágenes y tablasson elementos fundamentales demuchos documentos o

páginasWeb,porloquese les dio gran importancia en este tutorial, al indicar
ejemplos que demuestran la función que realiza cada etiqueta, así como cada uno de
sus atributos.
Dentro del curso básico, sehan dado a conocer los temas delas etiquetas quemás se
pueden usar dentrode un documento Web, como son las etiquetas de contenido básico,
las de encabezado de resaltado, los distintos tipos de listas que se pueden usar, las
etiquetas para diseñar una tabla, las de imágenes(lascuales le dan una mejor
apariencia a las páginas) y las etiquetas de direccionamiento queson muy importantes
para hacer conexiones hacia otro documento o inclusive saltar deun lugar a otro dentro
del mismo.
En relación al curso intermedio se dieron a conocer temas más selectivos comoson

los Framers, las formas que son muy importantes en la manipulación de información,
los mapas que de alguna manera pueden servir también para que los usuarios puedan
interactuar con el servidor y por ultimo los Gifs animados que le agregan un toque de
movimiento a las páginas, logrando un impacto visual al usuario. Por lo tanto, los
temas tratados dentro de este curso sonmuy importantes para las personas que desean
que su documento Web se comuniqueo de alguna forma impacteal usuario.
Con respecto al curso avanzado, también se tocan temas de mucho interés como son
los Appletsloscuáles son pequeñosprogramasconlosquese pueden conseguir
efectos visuales y sonoros, así como manejo de texto en movimiento. Sin embargo
HTML cuenta con etiquetas que realizar estos mismos efectos invocando archivos de
sonido, archivos de video o textos en movimiento. En este cursoel tema de los Applets
son los que requieren de conocimientos más avanzados, por lo que en este tutorial sólo
se mencionasu funcionamiento yno se profundiza en su desarrollo.
El tutorial abarca la mayor parte de las etiquetas conocidas dentro del lenguaje
HTLM, sin embargo falto profundizar un poco más en atributos contenidos dentro de la
etiquetaHEADylaetiqueta BODY. Porotrolado en el tema delosApplet's
solamentesecomentódeformageneral,porloqueserequiereprofundizarmás
detalladamente su contenido ya que depende en gran medida del uso de programación.
110
Proyecto de Ingenierío Electró~~rcn Tutorinl HTML UAM-I
+ *
* *
En cuanto al tema de multimedia, falto profundizar y analizar algunas etiquetas

como EMBED, NOEMBED y OBJECT que aunque son extensiones de etiquetas por
parte Netscape e Internet Explorer, es importante analizarlas ya que forman parte de los
navegadores más importantes que existen en el mercado.
En general existen algunas otras etiquetas exclusivas de los navegadores

mencionados en el párrafo anterior y de lo cuál no se han alcanzaron a estudiar hasta
el momento en este tutorial; sin embargo, se tratará de incluirlas posteriormente.
Los G i f s animados es un tema que requiere del aprendizaje y manejo de los

paquetes que nos ayudan a crear dichos gráficos animados.
Las Formas son otrotemaque abarca muchísimos elementos y que son muy
importantes para la transferencia de información, por lo quesena bueno profundizar un
poco más en ello.
Por último ya que se tiene lista la pigina, hay que saber en que servidor montarla
para que todos puedan accesar a ella. Si se dispone de una conexión a Internet en casa
o negocio, nuestro proveedor tiene la obligación de proporcionamos espacio en su
servidor para dar de alta la página. Si no se dispone de una conexión a Internet, existen
algunas compañías que ofrecen este servicio de manera gratuita.
111
Bibliografía
1. HTML Quick referencia, Chuck Musciano& Bill Kennedy, Editorial O' Reilly, 2".
Edición
2. El gran libro de H T M L , "Como publicar en Internet", Dr. Joachim Sichwarte, Editorial
Marcombo
3. HTML3, Manual of Style, Larry Aronson, Editorial Ziff-Davis Press
4. HTML3, HOW-TO: The Definitive, David Kerven, Jeft Foust, John Zakour
5. A Beginner's Guide toHTML - from ncsa. A good guide for beginners:
"ltttu://~~~~~~~.ncsa.I~i~tc.e~~l/General/lntemet/WWWIHTMLPrimer.htn~l".
6. A HTML Tutorial Guide- Welcome to an HTML Tutorial. W e 1 c o m e to a H T M L T
u t o r i a1. Getting Started. BeginningH T M L . Advanced H T M L . HTML Utilities. What
is HTML?... : "Itttv://~lt.lv,v.putrlel,.co~'resc
yut~eo~le~erspa,Q~?~je~r~~i/toy.htln".
7. A Quick Guide toHTML and CGI Scripts- A quick guide to writingHTML and CGI
scripts: "~r,~://sno~t.~vhite.it.hrinhton.ac.uW-n~as/n~a.~/cortrse,~~~tml/hmdhtn~l".
8. A Simple HTML Tutorial - Making a web page is a very simple process. You only need
to know a fewHTML commands to create an effective presentation. EveryHTML
document must... : "httu://stuclents.cs.bvu.erl~-amlcr~~e~~tn~lt~rrorial.ht~nl".
9. All the HTML Commands - Learn by example: (just about) all theHTML elements and
attributes, including extensions:"htt~:/~~v~v~1.~~o~~~l~ilL.co.~~k/htn~l/ht~~~l.htn~".
--
10. American's Town Square HTML Tables Tutorial- America's Town Square HTML
Table Tutorial.- -HTML 3.0 Table Tutorial-- by Urb LeJeune LeJeune@usats.com.
Caution. - -.This is... : "I~tt~~://~~Ct'~v.~~s~t.~.c~~~L/lear/t~h~e.~..~ltt~nl".
1l. An Example Page That Makes Sense- Use your graphical browser that supports tables to
see theHTML in one column, and what it does in the other column:
"htt~://~vl.v~c~.dc~~.d~~~i.~.ca.~~s/-c.~anrlvin/i~p/e~~an~vle.l~t~nl"..
12. Aurora - introductory HTML tutorial for people who have never authored hypertext
documents before: "httn://~vwu~.c~v~~~.ec~~l~ell~/intr~HTMUtoc.htnll".
13. Basics of HTh4L Tutorial - Basics of MTML. This pageis simply a list of commonly
used tags with a few examples. For more in depth reading HTML on go to Introduction
To HTML...': "http://n.osweno.edu/~ll/csc24l/tutor.html".
14. Bassem's HTML Tutorial - HTML wril.ing is made easy with very simple and self
illustrated examples:"http://~v~ow..~eocities.co~EnchanteeclFo~~est/S33Sf
I.
15. Bad Style Page- a collectionof DONTs forHTML: "llttP://~~M'.eart~l.com/ba~-sh~~e~'.

16. Bare Bones Guide to '.
H T M L : "ltttv://M~erbacl~.corn/bnrebollesf
17. BellCow, Inc.HTML Tutorial - Tables, Forms and Graphics Tutorial. BellCow, Inc.169
Hemck Road Riverside,IL 60546 (708) 442-6335: "httn://wMIM'.bellcol.v.corr~'.
18. CompuNet Systems- Mars - HTML Tutorial - Mike's step-by-step guideto good H T M L .
While this tutorial is not all-inclusive, it will provide you with enough
of the basicsof
HTML to create your own:"l~tt~?://M;~~~v.coFnpI1~~et.~v.~.co~?l/n~ar,~/htn~l.t~trnl".
19. Consideraciones de Estilo (TutorialIFI'ML) - Consideraciones de Estilo. NOTA:Se
presentan las consideraciones enforma muy somera y parca porque las vacié
directamente delos acetatos que... :
"http://nlufLlsrr.ens.uabc.m~ltsrrlocs/anton~~estilo.l~t~nl".
20. Content Models in theHTML 2.0 and HTML 3.0 DTDs - "What's legal where and why"
-
a walk through the DTDs, including a brief beginner's introduction
to SGML:
"httr?://~~t.l~~.oze~nail.con~.au/-clknso~n~t~?~l/i~tdex.lrt~nl".
112
21. CoolZines Guide to HTML - learn HTML easily and fast using this tutorial:
"http://c:oo,!zi~le.cornn~tlnl/*'.
22. Crash Course in HTML - An absolute beginner's guide to HTML. Includes all the basics,
with clear explanations and lots of examples!:
"htt~~://~~~~~:.~~n.sh~~ille.nc~t/-ten~~~leclf/crn.slt/Crrr.sl~Course.htn~l".
23. Creación Documentos HTML - Tutorial - Visitante número: desde Sep 17, 1996. La
intensión de este documento es proporcionar información de como sepueden crear
documentos... : " h t t r ~ : / / ~ ~ ~ ~ ~ ~ ~ . ~ d 1 . ~ ~ n ~ . n ~ t e c i ~ ~ . ~ t / . e e I . c l l d / r u f o i . i n l / t ~ l / t ~ ~ t ~ r h t n ~ c r e a
24. Creating HTML - A beginners guide to programming HTML for the web. Recently
updated for HTML 3.0 and Netscape extensions:
"htt~~://~~~~~c.netusal.net/-ibo~~~en~a/htn~l.htn~l".
25. Dark side of the HTML - Strict HTh4L.-2.0 conformant features which make anyWEB
browser choke: ~'httv://~c~v~v.best.cont/,-selrt/[l[l~k sid~?/incle.~.htnrl".
26. David Marshall's Learn HTML Quick:
"htt~://~vw~~~.~eocities.co~n/SunsetStrip~~l69?~enrn.l~t~~~".
27. DMMW - Computer and Internet Solutions - for businesses and individuals; site includes
resources on JAVA, HTML, CGI's, Tutorials, and more: " h t t ~ : / / ~ ~ v ~ ~ . d n ~ ~ ~ ~ ~ v . c o m ~ ' .
28. Easy Building Beginners Guide - Covering H T M L , in depth image tutorials, settingup a
U N E account to write a page, and more: "Jlttp://wM~.teleport.cu~~t/-sI~-F/WEb-
Bllilding.sl&".
29. Ed Krol. Conéctate a1 mundo de Internet. McGraw-Hill / Interamericana de México,
1995.
30. Fastnet's Personal Web Pages HTML Tutorial - User Web Pages -- Personal Web Page
Policies -- :Enter WEB-Olé HTML User Web Page Tutorial. FASTNET provides
resources to our users to aid in the ... : " ~ ~ t t ~ : / / ~ v ~ ~ ~ ~ . u . s e r . s . f a s t . n e t / ~ v c b l e a n ~ . h t n ~ l " .
3 l . Guide to PublishingHTML and Forms - Offering documentation on writing HTML and
forms to enhance your web site: " ~ / ~ ~ ~ ~ v . i n t e r l i ~ ~ k - 2 0 0 0 . c o r n / ~ z ~ i d e - t o - ~ u b l i s h i n n . -
htndhtml".
32. Guides to Writing HTML Documents:
"htty://u~~ion.l~~su.uiuc.ecl~~Hyuc?rNe~~,s~~et/"W\l;/lltn~tn~l~~ui~les.htn~l".
33. Hake, Gordon - Variety of content including W3 Writer - An HTML Tutorial, Live Tape
Lists, Jerry Garcia tribute,Hake Internet Projects, Immigration Lawyerson the Web and
more! : "http:/~~luke.eon~~or~lonf'.
34. Harley Hahn / Rick Stout. Internet, Ma!nua¿de referencia. McGraw-Hill / Interamericana
de España, 1994.
35. Help Building HTML Pages: "httP://~v~yv~'.obseure.or~/-i~t~vs~~t~nll~elp.htnzl".
36. How do they do that with HTML? - This page explains all of the "tips and tricks" of
HTML as well as Netscape's HTML extensions:
"J~ttp://~v~~~~.~~~~shville.net/-carl/~t~nl~ui~le/in~lex.ltt~nl".
37. HTML 101 - basic HTML tags. Make you own web page on the net:
"ltttp://~~vw.,~eocities.cont/Athens/Acrc~~aolis/5969/index.htnd".
38. HTML al Instante - curso de HTML en español, dividido en tres partes,basico,
cs.corn.m/u/r,qblabf"
intermedio y avanzado: "llttp://~"3.
39. HTML: An Interactive Tutorial for Beginners - learn to write HTML by example:
"ltttr?://~~u~~~.~lnIcll:esite.co~n/lvehstatio~~/l~~~~.
40. HTML and Web Site Resource Page.
"htty://~v~v~v.lib?.crn~.carleton.etl~~eamht~?~~~.eleorne.htnll".
41. HTML Demonstration - a guide to basic and advanced HTML tags:
"Jttt~://s~~o~.col~~ruCk).e~~l/-rossWtcltoril~l~~tn~l~~~n~o.l~trnl".
113
42. HTML Design Guide [kyushu-id.ac.jp]- describes with source and its appearance about
standard HTML (HTML2.0), HTML3.0,and Netscape Extensions toH T M L :
desinn.htm1".
"http://n~~~~?.~i,~n.k\trl,~hu-icl.ac.ivn~o~vt~,~te.~t/~~tml
43. HTML for the Restof Us: "http://~vtvw..~eocities.~o~SibiconVulle\~/Lnkes/.?93.?~'.
44. HTML Goodies Domain: "http://lvwM'.htmlnoodies.coln".
45. HTML Help - contains an html FAQ and a glossary of all known commands:
"http://~~'~t.~v.~~:Inission.cont/-ni~~~op/lectr7lhtnt.htnl".
46. HTML Jumpstart Tutorial - WADES 1'ITML JUMPSTART. This document will tryto
quickly get you started with the process of creating a web page. It is very dense; small de
tails in the..,.: "~~ttp://~l~lpro.co~~cloc/tuto~icrI/htn~l~ist.html".
47. HTML Made Really Easy- teaches HTML quickly, clearly, and concisely, with
examples. Teaches core understanding ofHTML as well as direct practical knowledge:
irne~rshe~ll.co~ecrs\~nltmlf'.
"httv://wlt?v.
48. H T M L , Quick and Easy- Make a home page the fun and easy way!:
"}~ttp://~vu~~~.mlode.com/-~~uzzettr~pa,et?s~oM~to".
49. HTML Tutorial: Authoring Methods for theWWW - Home I About GRIF S.A.I Products
I Services News and ReferenceI GRIF ,at Work] Technical Support.HTML Tutorial:
Authoring Methods for theWWW. Third... : " h t t l ~ : / / ~ ~ ~ ~ v . , e r i f : ~ / l ~ e ~ ~ s ~ e f / t l l t o r i a l . h t n r Z " .
50. HTML Tutorial - Because this tutorial depends upon frames, it is meant to be done in
Netscape 2..0.Sorry Lynx users and other users unable to take advantage of frames ... :
"http://nnlelia.db.eruu.edu/-robbins~~ltor-/benin.htntl".
51. HTML Tutorial - Copyright 01996 Microrim, Inc. Table of Contents. Getting an Internet
Service Provider The Basics of HTML Adding moreHTML elements Images and
Background... : "htta://suhntitthis.nticrc~rin~.comntt~nlhelr~/t/rutorial.htn~".
52. HTML Tutorial - Headers, Lists, Links.If you've wandered around the Web a bit, you've
surely noticed the common use of headers, or larger than normal text, in ... web:
"l~ttp://~~~~~~.cs.yrinceto~~.eel~~ourses/clrei/n~ocl~~es/con~vuters~t~~~~'.
53. HTML Tutorial - HTML Documents: A Mosaic Tutorial. Copyright (c) Whatsupdoc
1994. Please send reactions, comments, and advice to our Suggestion Box. This tutorial
tutoricll.htm1".
wiU... : "l~ttp://sti.larc.nascr.nov/clentos~l~tn~l
54, HTML T2orial- HTML Refence Section. Overview ofWWW. The World Wide Web
project What is hypertext? WWW-Primer Summary -- /WWW Bibliography for the
World Wide Web.HTML... : "~~ttu://wlrn.cocc.ed~r/Resourc.es/HTMUref:l~tml".
55. HTML Tutorial -- Images - Images in the Document. Images that load within the
Document from the Document's Directory. The following image was loaded with the
following tag: cIMG:
"http://orcl~nrrlwwashtennw.cc.ati.us:8080/rin~~/t1~torial/i~~~nex.htnJ".
56. HTML Tutorial: Introduction - Introduction. So you've been surfing the Web, checking
out everyone from the White House to the Atomic Café, from This Modem World to the
Di1bert... : "lrttl,://ecco.bsee.w i n . edu.a~te..\-t/htntl-tl~t/i~ltro.
html".
57. HTML Tutorial - Making a Simple Web Page for Classroom Use. Brenda Ken. I
ObjectiveslSupplieslResourcesl lLesson 1:What is aWWW Page and Why Should I Make
One?[ ILesson...: "http://www.des-
n~oines.k12,icr.us/Elementcln~ Schools/Nillis/3hrht~~ll.htn~".
58. HTML Tutorial -- October 3, 1995 - An HTML Tutorial forCS 395 prepared by Mark
Dinsmore. ,4dapted fromAn HTML Crash Course for Educators (the complete version)
with permission from the... : "httv://nmun.cs.orst.ei~~/~~39_5/ht~nl lesson/tutor 1.htnll''.
59. HTML Tutorial - Overview - HTML Tutorial - Overview. This tutorial comes in three
parts: Basks - how to write H T M L . What is a tag? Howdo I do layout? How do I make
paragraphs and... : "http://vccl.stcrnforcl.ed~r/lno~ens/intro/tutorial.I~tml".
114
60. HTML Tutorial: Quick Reference Guide - HTML Tutorial: Quick Reference Guide.
Element. Format. Example. Emphasis. <EM>ItalicizedTextdEM> Italicized Text.
Strong Emphasis... : " l r t f ~ ~ : / / ~ ~ : w ~ v . ~ ~ a c i n f ~ . c o r ~ ~ e l ~ / c ~ ~ ~ i c k r e f : h t n ~ l " .
61. HTML Tutorial - Review - HTML Tutorial - Review. Congratulations! You have
completed the basic HTML tutorial. As a review, havea look at the two examples below.
The first example: "l~ttp://rice.ecl~~.clenkin.ecl~~.nr~~~torials/l~tmltute/htn~l-revie~~.lrtml".
62. HTML Tutorial - RIT HTML Tutorial. Making Webpages* *Modified for The Rochester
Regional LibraryCouncil's HTML classes. Introduction to an on-line tutorial: 1) ... :
"http://~v~v~.1~.r.~l~.or,e/htn~ltutorinl/tutorial. htnd".
63. HTML Tutorial - So you wanna learn how to write web pages!?!? This tutorial is
designed to give you an overview of H T M L . At the bottomof each page, thereis a
reference ... : "lrttr~://firenirl.co~enn~lttml/home.htnrl".
64. HTML Tutorial - The information contained in the following pages came from the
following site... http://hakatai.mcli.dist.maricopa.edu/tut/tag.htmlAnd has been made ... :
"http://\vwl.1,.mech.canterbur\,.uc.n;/docs/HTMLTutodconten.ts.htnl".
65. HTML Tutorial -When you clicked your mouse on the previous page, you clicked on the
very heart of an HTML document: the hyperlink. The link, as it is commonly called, is:
"lrttp://.n-oads,vir.niniL1.enlJ-HTMUhtrr~l.htnrl".
66. HTML Tutorial 1 - HTML TUTORIAI, l. Covers: Overview, and Basic Data Formating.
What is HTML? HTML is a simple language usedto create WEB pages. The HTML
code is stored in ... : "http://ww~:hobit.comdtutl.lrtrnl".
67. HTML Tutorial 4 - Nonprofnet. - Provided by Program on Nonprofit Corporations, QUT
- [ Back to Tutorials Menu] [Ponc Index] Last review 15 Apr.1996. Making Lists.
HTML... : " l r t t p : / / u . ~ v ~ v . c ~ u t . e d ~ ~ . a ~ ~ u s / ~ o n c / t u t 3 . l r t ~ z ~ l " .
68. HTML Tutorial 4 - Separating Paragra:phs - HTML Tutorial 4 - Separating Paragraphs.
HTML formatting. An important thing to know about HTML is that spaces, tabs, and
camage returns are generally... : "htty:.//M~~~r~.nIvhs.sn:uscl.kl2.ca.us/inet/t~~t~.lrtml1~.
69. ISU ACS Dept HTML Tutorial-Basics - Illinois State University Applied Computer
Science Department. HTML Basics: "~ttl,://lvl~v.acs.ilstu. eclu/htmlt~rtr/htmtutor:htm".
70. Kent's HTML Tyranny Page - a collection of simple rules that may be used to review the
quality of a web page: "http://www.,eec;Icities. coln/SiliconValle~~/Lake.~/2396/nimnt. htnd".
71. Laura Lemay. Aprendiendo HTML para Web enuna semana. Prentice - Hall
Hispanoamericana, México - Nueva York, 1995.
72. Mack, Rebecca - Rebecca's Comer of the 'Net - includes an HTML tutorial, custom
graphics, music, photos,and stuff about Virginia Tech.:
"lzttv://~lc~v~v..~e~~ities.conr/Colle.crePn~;WIOS~f'.
73. Manual practico de HTML: "ltttp://~~u~~~:.etsit.u~~~n.e.~/-al~~n~o/manual/~~~a~~~~al.lrt~nl".
74. Mu-Spin's .Advanced HTML Tutorial [No Frames] -
"http://nalsvin.,esfc.ncrsa.,~ov/Advclnc.ea'Tutorial.htnd".
75. Patrick's Life - HTML Guide: "ltttv://fi'eespace.vir.nin.net/r,arrick.h~~tton/e~~icle.lttm".
76. Paul McFedries. jCreando unpúgina Web con HTMLfúcil! Prentice - Hall
Hispanoamericana México, 1996.
77. PCFX Interactive [HTML Tutorial] - HTML Tutorial. All HTML documents should have
this basic format:<HTML> <HEAD> ,<TITLE> What ever you want the title to be
</TITLE>:" I ~ t t l ~ : / / ~ u ~ v l v . p c ~ ~ . c o n I / ~ ~ t m l / ~ e f a ~ ~ l t . l ~ t ~ r ~ " .
78. Sevloid Guide to HTML: " h t t p : / / ~ v ~ ~ ~ . / 3 o u . e r ~ ~ ~ ~ . c o m . a u / - s e ~ ~ l o i ~ ~ v e b t i p . ~ / s e v h t n r l . I t t m " .
79. Simple HT:ML Tutorial for Myth Ritual and Religion Projects - HTML TUTORIAL FOR
MYTH, RITUAL AND RELIGION. This little tutorial is meant to get you started writing
simple HTML (hypertext markup language) for use in ... :
"l~ttp://crbmsOl.u~~n.l~.ecl~J-n.c~ltrI/~nrr/tutori~~l. htnl".
115
80. Spinning the Web: An Introductionto €€I"L: "htt~://schola~:lib.vt.ed~~/re~orts/soasis-
sIidedHTML-lntro.htln1".
81. Sunah's Webdemo - explains and demonstrates every item in
HTML 3.2, to the extent
that it has been implemented on the most popular browser in current use:
"http://w~u~l.l"S11,'V/de'.
82. Tutorial: BeginningHTML - Getting Started withH T M L . There are certain commands
that should be in everyHTML page. They are: <!DOCTYPEHTML PUBLIC 'I-
//IETF//DTD... : "h?tt?://cs.~ve~er.edu/tutoria~Jhe.~in.~tt?n".
83. Tutorial deHTML - Conceptos Básicos. Guía Rápida. Guía Detallada. Interfaz con el
... :
Exterior. Herramientas. Glosario. Bibliogafía. Acerca
htntl/indice.htm".
"Itttp:/~~ias720.dis.ul~,nc.es/Gia.~/Cursos~~~tori~l
84. Tutorial deHTML -World Wide Web.i Qué es el World Wide Web? El World Wide
Web (W3) esun universo de información accesible a través de la red,un cúmulo enorme
de... : "~://fnted2.~mcu.edu.ar/-nonzalo/tutor/tutoriul.ht~nl".
85. Tutorial Documentation - a filter for a CGI-compliant HTTP server that makes
it slightly
easier to de.velop tutorial style questions and have them presented
by most Web browsers:
"Itttp://l."H;.civenR.carleion.ca/-nlzoIt~Jtut/~loc/dnc.html".
86. Tutorial HTML- HTML BEARS ITS SOUL. by bill farmen. Introduction Basics Lists
Images Links TablesForms Frames Javascript. [To use this tutorial you will need to
open...: "ltt~://bill.vs~c.a~tder.~o~t.edu/rutorb/o~~tline.I~tm".
87. VDS 1996- HTML Tutorial - H T M L . HTML (HyperText Markup Language) is the
language o f Web pages. There is a lot to know about it, but it's easier than you think.
The
best placeto... : "http://~~~.arck.su.o;~.arr/kcclc/vds96~~t~nl.ht~nl".
88. W3 Ultra-brief Tutorial:HTML special character table list- W3 HTML special
characters. The following lists the special characters that be obtained in HTML using
can
the &name;form. It is derived from M.artin... : "hr~p://~vrv~.diku.rlWtop~~s/~v3ultrn-
chnrs.htntl"'.
89. Wade's HTML Tutorial- Info and examples of page setup, text, images, links,
imagemaps, mailto, and Netscape extensions:
"httv://~veb.ntit.ed~r/afs/atltentl/user/M%s/n~smt1~rt/WEB/HTMLtutor.htn~l".
90. Wade's HTML Tutorial - Wade's HTML tutorial. This document tries to demonstrate,
through exampleas much as possibl e,how to construct web pages. Everything you see
on the web: '~http://del~ro.conl/doc/tu,torial#ttlnln~cl:in.html".
9 l. Web CommunicationsHTML Tutorial - Forms:
"htt~://~~~~.~vebcont.com/-~vebco~ttml/rutor/fon~s~.
92. Web DinerForms Tutorial: I-ITML for Forms - A mailto form starts with the same
HTML that any HTML page begins with, including the dTML>, <HEAD>, <TITLE>
(ITITLE> and... : "httu://~vwtv,tvebdirter.coln/nnne,~e/fonns/tvdfon71,3.htm".
93. Web Master CD- ROM Volume 1, Creating Web Pages.InfoMagic.
"http:\\www.infomagic.com".
94. WebSoc HTML primer: "http://~~~~v..gla.ac.uWClubs/WebSoc/primer~.
95. Webspinner's Workshop- HTML tutorials (basic, advanced), style guides, web tools,
graphics, and other web-related sites:
"http://dcrt.davis.ca.us/-lncan.ol/lvebspill. htntl".
96. Woodchuck's HTh4L Tutorial - for beginners and more advanced amatuers:
"ltttp://u~~~~.inconnect.cor~t/-mkbarru.~ntt~nl.htlnl".
97. Writing HTML - designed to help teachers buildWWW documents:
"httv://wwrv.ntcli.dist.maricovcl.edu/tu~'.
116

Uam7282 PDF

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Uam7282 PDF

Загружено:

Авторское право:

Доступные форматы

1

UNIVERSIDAD AUTONOMA METROPOLITANA

/ DIVISION DE CIENCIAS BASICAS E INGENIERIA

PROYECTO : TUTORIAL DE HTML, "PAGINA WEB"

MATERIAS : PROYECTO TERMINAL ( I YII)

' ALUMNO : FRANCISCO RUIZ

ASESOR : ING. MAURICIO LOPEZ VILLASENOR

1.1 Estructura Básica de un documento HTML

1.2 Encabezados y Párrafos

1.3 Resaltado de texto

2.4 Gifs animados

3.3 Texto Animado

Conclusiones ................................................................................................................. 109

0 Dar a conocer el gran número de etiquetas y atributos que conforman el lenguaje

La comunicación de datos se ha convertido en una parte fundamental de la

Internet es el nombre de un grupo de recursos de información mundial. Su origen

Aprender a utilizar Internet, es embarcarse en una aventura, en la que se introduce

El WorldWideWeb(WWW) es un sistema de comunicación e informacicin

Desdeque se introdujo al mundoen 1990, el WWW a crecido de una forma

El lenguaje HTML es definido como un subconjunto del estándar internacional

El lenguaje HTML es definido de manera formal por una organización llamada

El HTML es un lenguaje que define Características fisicas y estructurales de un

Para comenzar sólo son necesarios dos elementos:

El procesador de texto es usado para ir escribiendo los documentos HTML, que

Es importante hacer notar que la documentación esta presentada de la misma forma

'' Tutorial de HTML ))

Oue son las Tags

)I Básico 1) Intermedio )I Avanzado 11

Que son las Tags

)I Básico 11 Intermedio )I Avanzado 1)

CURSO BASIC0 DE HTML

Un documento HTML se divide en dos partes, "cabeza" y "cuerpo". El contenido de la

'I Estructura básica de un documento HTML I'

navegador ó en algunas ocasiones marcar error. Ir, 1

" Consideraciones al editar unapágina Web "

" Otras etiquetas contenidas dentro de H E A D "

'I ATRIBUTOS de <ISINDEX...>

Extensión de atributos (Esta liga nos lleva a la página 13)

'I ATRIBUTOS de <BASE ...> 'I

Extensión deatributos(Estaliga nos llevaa la página 13)

'I ATRIBUTOS de <LINK...>

'I ATRIBUTOS de <META ...> 'I

" Extensión de atributos I'

'I Extensión de atributos para <ISINDEX>

Extensión de atributos para<BASE> 'I

O ALINK.Define el color de la hiperliga que el usuario activa durante la

Un ejemplo donde se ocupa estas opciones es el siguiente:

" Extensiones "

" ATRIBUTOS de <BODY> 'I

(Esta liga nos lleva a la prigina 9)

'I ENCABEZADOS Y PARRAFOS I'

Esta es su vista y tamaño en una página Web

Tradicionalmente se usa el encabezado de <H1> para títulos de documentos, d12> para

'I ATRIBUTOS de <Hn ...>

Extensión de atributos para <Hn> I'

Por lo general un texto se divide en párrafos. En el lenguaje HTML esta estructuración

El mandato ó etiqueta @RE> es una abreviatura de "preformato". El texto que se

APARTADOS DE TEXTO ESPECIALES

Muchas veces es necesario identificar apartados de texto concretos, o quizás tratarlos

Con el atributo WIDTH se modifica la longitud de las líneas

Con el atributo SIZE se puede modificartambién el grosor de la línea

Rezresa a p8,oina principal

Etiquetas para atributos de texto