Curso Taller HTML 4.0 con diversos ejemplos resuletos
profmontiel69
0 views
65 slides
Sep 23, 2025
Slide 1 of 65
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
About This Presentation
descfripcion detallada de html version 4, ejemplos diversos
Slide Content
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Introducción a HTML
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Introducción a HTML
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
¿Qué es HTML?
HTML es la abreviatura de HyperText Markup
Language, y es el lenguaje que todos los
programas navegadores usan para presentar
información en la Word Wide Web (WWW)
“Lenguaje de Marcación de Hipertexto”
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
¿Qué es HTML?
HTML es la abreviatura de HyperText Markup
Language, y es el lenguaje que todos los
programas navegadores usan para presentar
información en la Word Wide Web (WWW)
“Lenguaje de Marcación de Hipertexto”
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
¿Qué es HTML?
Es un lenguaje muy sencillo que se basa en el uso
de etiquetas, (-tags- en inglés), consistentes en
un texto ASCII encerrado dentro de un par
de paréntesis angulares ( < > ), –símbolos conocidos como
“mayor que” y “menor que” -.
< ... >inicio de una etiqueta
</ ... >cierre de una etiqueta
Por ejemplo: <TITLE>Mi primer página</TITLE>
Etiqueta de inicio Etiqueta de términoContenido
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
¿Qué es HTML?
Es un lenguaje muy sencillo que se basa en el uso
de etiquetas, (-tags- en inglés), consistentes en
un texto ASCII encerrado dentro de un par
de paréntesis angulares ( < > ), –símbolos conocidos como
“mayor que” y “menor que” -.
< ... >inicio de una etiqueta
</ ... >cierre de una etiqueta
Por ejemplo: <TITLE>Mi primer página</TITLE>
Etiqueta de inicio Etiqueta de términoContenido
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
¿Qué es HTML?
El texto incluido dentro de éstos nos dará una
explicación de la utilidad de la etiqueta.
Por ejemplo: la etiqueta <marquee> nos
permite definir una “marquesina”, -mensaje que se
desplaza horizontalmente a lo ancho de la página
Web-.
Por ejemplo: <marquee>I.P.N.</marquee>
El texto “I.P.N.” se moverá horizontalmente a lo ancho de tu pantalla
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
¿Qué es HTML?
El texto incluido dentro de éstos nos dará una
explicación de la utilidad de la etiqueta.
Por ejemplo: la etiqueta <marquee> nos
permite definir una “marquesina”, -mensaje que se
desplaza horizontalmente a lo ancho de la página
Web-.
Por ejemplo: <marquee>I.P.N.</marquee>
El texto “I.P.N.” se moverá horizontalmente a lo ancho de tu pantalla
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
¿Qué es HTML?
Las etiquetas podrán incluir una serie de atributos o
parámetros, en su mayoría opcionales, que nos
permitirán definir diferentes posibilidades o
características de la misma.
Por ejemplo: <FONT color=“red”> FONT es la etiqueta y
color es el atributo, que indica que el texto contenido tendrá
color rojo.
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
¿Qué es HTML?
Las etiquetas podrán incluir una serie de atributos o
parámetros, en su mayoría opcionales, que nos
permitirán definir diferentes posibilidades o
características de la misma.
Por ejemplo: <FONT color=“red”> FONT es la etiqueta y
color es el atributo, que indica que el texto contenido tendrá
color rojo.
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Creación de documentos HTML = páginas Web
Para su creación requerimos:
•Un procesador de textos para escribir y editar el
código HTML, por ejemplo el Bloc de Notas de
Windows, Edit, Fsedit, etc., (editores que no
formatean el texto).
•Un navegador Web, como el Google Chrome, Internet
Explorer, Mozilla FireFox, etc.
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Creación de documentos HTML = páginas Web
Para su creación requerimos:
•Un procesador de textos para escribir y editar el
código HTML, por ejemplo el Bloc de Notas de
Windows, Edit, Fsedit, etc., (editores que no
formatean el texto).
•Un navegador Web, como el Google Chrome, Internet
Explorer, Mozilla FireFox, etc.
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Secuencia de trabajo para crear nuestra hoja Web:
•Con el procesador de texto crearemos el
documento HTML, y lo guardaremos con el
nombre que deseemos, a excepción de la
extensión, que deberá ser necesariamente .htm
ó .html (sugiero html, es lo más común)
•Para visualizar nuestro documento HTML,
abriremos el documento con el programa
navegador, por ejemplo: Google Chrome, Internet
Explorer, Mozilla FireFox, Safari, Opera, etc., cada
uno de ellos interpretará nuestro código HTML.
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Secuencia de trabajo para crear nuestra hoja Web:
•Con el procesador de texto crearemos el
documento HTML, y lo guardaremos con el
nombre que deseemos, a excepción de la
extensión, que deberá ser necesariamente .htm
ó .html (sugiero html, es lo más común)
•Para visualizar nuestro documento HTML,
abriremos el documento con el programa
navegador, por ejemplo: Google Chrome, Internet
Explorer, Mozilla FireFox, Safari, Opera, etc., cada
uno de ellos interpretará nuestro código HTML.
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
La estructura básica de un documento HTML es:
<HTML> indica el inicio del documento
<HEAD> indica el inicio del encabezado
<TITLE> inicio del título del documento
</TITLE> final del título del documento
</HEAD> final del encabezado
<BODY> inicio del cuerpo del documento
instrucciones HTML
</BODY> final del cuerpo del documento
</HTML> final del documento
-Nótese la sangría que se empleo-
(subordinación de las etiquetas: HEAD y BODY son
subordinadas de HTML, y TITLE es subordinada de HEAD)
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
La estructura básica de un documento HTML es:
<HTML> indica el inicio del documento
<HEAD> indica el inicio del encabezado
<TITLE> inicio del título del documento
</TITLE> final del título del documento
</HEAD> final del encabezado
<BODY> inicio del cuerpo del documento
instrucciones HTML
</BODY> final del cuerpo del documento
</HTML> final del documento
-Nótese la sangría que se empleo-
(subordinación de las etiquetas: HEAD y BODY son
subordinadas de HTML, y TITLE es subordinada de HEAD)
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Antes de crear nuestra primera hoja Web, algunas
consideraciones sobre el texto:
• Si deseamos separar el texto en distintos párrafos empleamos la
etiqueta <P> (párrafo), con el atributo ALIGN (justificar el texto del
párrafo a la izquierda, derecha, centrado y justificado)
• Texto de diferente tamaño, empleando las etiquetas: <H1> y
</H1>, <H2> y </H2>, ...., <H6> y </H6>; H1 es el tamaño mayor.
• Para centrar el texto, utilizamos la etiqueta <CENTER> y </CENTER>
• Separadores (Horizontal Rules) de “párrafos”, que se consiguen con
la etiqueta <HR> (carece de etiqueta de cierre), atributos: size,
align, width, noshade
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Antes de crear nuestra primera hoja Web, algunas
consideraciones sobre el texto:
• Si deseamos separar el texto en distintos párrafos empleamos la
etiqueta <P> (párrafo), con el atributo ALIGN (justificar el texto del
párrafo a la izquierda, derecha, centrado y justificado)
• Texto de diferente tamaño, empleando las etiquetas: <H1> y
</H1>, <H2> y </H2>, ...., <H6> y </H6>; H1 es el tamaño mayor.
• Para centrar el texto, utilizamos la etiqueta <CENTER> y </CENTER>
• Separadores (Horizontal Rules) de “párrafos”, que se consiguen con
la etiqueta <HR> (carece de etiqueta de cierre), atributos: size,
align, width, noshade
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Ejemplo práctico #1
Captura el siguiente texto, en el bloc de notas y cuando termines, al archivo
llámale: pagina01.html
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Ejemplo práctico #1
Captura el siguiente texto, en el bloc de notas y cuando termines, al archivo
llámale: pagina01.html
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Más consideraciones sobre el texto:
• Si queremos separar un párrafo o cualquier otra cosa, pero sin
dejar una línea en blanco, empleamos la etiqueta <BR> (break, -
corte-)
• Si deseamos dejar líneas en blanco, debemos emplear las
etiquetas <BR><P>
• Para destacar alguna parte del texto, usamos la etiqueta <B> y
</B>, -Bold-, para poner en cursiva el texto: <I> y </I>, -Italic-, para
subrayar el texto: <U> y </U>, y para tachar texto: <STRIKE> y
</STRIKE>
• Si queremos que el texto quede exactamente igual como se
capturo en el documento HTML, empleamos la etiqueta <PRE> y
</PRE>
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Más consideraciones sobre el texto:
• Si queremos separar un párrafo o cualquier otra cosa, pero sin
dejar una línea en blanco, empleamos la etiqueta <BR> (break, -
corte-)
• Si deseamos dejar líneas en blanco, debemos emplear las
etiquetas <BR><P>
• Para destacar alguna parte del texto, usamos la etiqueta <B> y
</B>, -Bold-, para poner en cursiva el texto: <I> y </I>, -Italic-, para
subrayar el texto: <U> y </U>, y para tachar texto: <STRIKE> y
</STRIKE>
• Si queremos que el texto quede exactamente igual como se
capturo en el documento HTML, empleamos la etiqueta <PRE> y
</PRE>
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
.... continuación
• Para destacar una cita textual dentro del texto general se emplea la
etiqueta <BLOCKQUOTE> y </BLOCKQUOTE>, centrando el texto
colocándolo entre dos márgenes
• Para especificar exponentes e índices en expresiones matemáticas
empleamos las etiquetas <SUP> y </SUP>, <SUB> y </SUB>
• Si deseáramos presentar el texto en forma de lista, se tienen tres tipos de
etiquetas: <UL><LI> ... </UL> desordenadas, <OL><LI> ... </OL> ordenadas y
<DL><DT><DD> ... </DL> de definición
• Si quisiéramos añadir comentarios a nuestros documentos HTML y evitar que
sean desplegados en pantalla, empleamos la etiqueta <!-- y --> (signo de
admiración derecho guion guion y guion guion).
• Para insertar los símbolos menor que “<”, mayor que ”>”: < y >
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
.... continuación
• Para destacar una cita textual dentro del texto general se emplea la
etiqueta <BLOCKQUOTE> y </BLOCKQUOTE>, centrando el texto
colocándolo entre dos márgenes
• Para especificar exponentes e índices en expresiones matemáticas
empleamos las etiquetas <SUP> y </SUP>, <SUB> y </SUB>
• Si deseáramos presentar el texto en forma de lista, se tienen tres tipos de
etiquetas: <UL><LI> ... </UL> desordenadas, <OL><LI> ... </OL> ordenadas y
<DL><DT><DD> ... </DL> de definición
• Si quisiéramos añadir comentarios a nuestros documentos HTML y evitar que
sean desplegados en pantalla, empleamos la etiqueta <!-- y --> (signo de
admiración derecho guion guion y guion guion).
• Para insertar los símbolos menor que “<”, mayor que ”>”: < y >
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Ejemplo práctico #2
En el procesador de texto bloc de notas captura el siguiente código HTML y al
archivo llámale: pagina02.HTML
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Ejemplo práctico #2
En el procesador de texto bloc de notas captura el siguiente código HTML y al
archivo llámale: pagina02.HTML
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
La etiqueta MARQUEE
La etiqueta <Marquee> permite crear texto que se desliza
horizontalmente, teniendo varios atributos, siendo:
Atributos Valores Acciones
ALIGN TOP, MIDDLE, BOTTOM Coloca el texto en las posiciones: superior, media o
inferior de la zona de la marquesina
BEHAVIOR SCROLL, SLIDE,
ALTERNATE
Se desliza fuera de la pantalla (*), se desliza dentro y
después se detiene, se desliza dentro y rebota en
ambos lados de la pantalla
BGCOLOR RED, GREEN, etc. Se puede emplear la etiqueta <FONT COLOR= >
</FONT> anidando a la etiqueta “marquee”
DIRECTION LEFT, RIGHT Dirección de deslizamiento del texto
HEIGHT, WIDTH Píxeles, porcentaje Permite definir el alto y ancho del texto del mensaje
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
La etiqueta MARQUEE
La etiqueta <Marquee> permite crear texto que se desliza
horizontalmente, teniendo varios atributos, siendo:
Atributos Valores Acciones
ALIGN TOP, MIDDLE, BOTTOM Coloca el texto en las posiciones: superior, media o
inferior de la zona de la marquesina
BEHAVIOR SCROLL, SLIDE,
ALTERNATE
Se desliza fuera de la pantalla (*), se desliza dentro y
después se detiene, se desliza dentro y rebota en
ambos lados de la pantalla
BGCOLOR RED, GREEN, etc. Se puede emplear la etiqueta <FONT COLOR= >
</FONT> anidando a la etiqueta “marquee”
DIRECTION LEFT, RIGHT Dirección de deslizamiento del texto
HEIGHT, WIDTH Píxeles, porcentaje Permite definir el alto y ancho del texto del mensaje
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
HSPACE, VSPACE Píxeles Tamaño de los márgenes izq. y der, o espacio
arriba y abajo, entre la zona de la marquesina y
cualquier texto o grafico que lo rodeen, muy útil
cuando se emplea una tabla para la
marquesina.
LOOP Cantidad n, infiniteNumero de veces que se desliza el texto e
“infinite” se deslizará indefinidamente
SCROLLAMOUNT Cantidad n Rapidez deseada en el deslizamiento del texto,
valores desde 1 hasta 7000. (lento a rápido)
SCROLLDELAY Cantidad n Especifica en milisegundos cuanto tiempo pasa
entre los deslizamientos del texto de la
marquesina.
Atributos de <MARQUEE>
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
HSPACE, VSPACE Píxeles Tamaño de los márgenes izq. y der, o espacio
arriba y abajo, entre la zona de la marquesina y
cualquier texto o grafico que lo rodeen, muy útil
cuando se emplea una tabla para la
marquesina.
LOOP Cantidad n, infiniteNumero de veces que se desliza el texto e
“infinite” se deslizará indefinidamente
SCROLLAMOUNT Cantidad n Rapidez deseada en el deslizamiento del texto,
valores desde 1 hasta 7000. (lento a rápido)
SCROLLDELAY Cantidad n Especifica en milisegundos cuanto tiempo pasa
entre los deslizamientos del texto de la
marquesina.
Atributos de <MARQUEE>
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
La característica que más ha influido en el
espectacular éxito del Web ha sido, aparte la de su
carácter multimedia, la posibilidad de unir los distintos
documentos repartidos por todo el mundo por medio
de enlaces hipertexto.
Enlaces con otras páginas
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
La característica que más ha influido en el
espectacular éxito del Web ha sido, aparte la de su
carácter multimedia, la posibilidad de unir los distintos
documentos repartidos por todo el mundo por medio
de enlaces hipertexto.
Enlaces con otras páginas
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Estructura de los enlaces
En general, los enlaces tienen la siguiente estructura:
< A HREF = “xxx” > yyy < /A >
donde xxx es el destino del enlace
yyy es el texto indicativo en la pantalla del enlace (con
un color especial) y generalmente subrayado
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Estructura de los enlaces
En general, los enlaces tienen la siguiente estructura:
< A HREF = “xxx” > yyy < /A >
donde xxx es el destino del enlace
yyy es el texto indicativo en la pantalla del enlace (con
un color especial) y generalmente subrayado
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Tipos de enlaces
Se pueden distinguir cuatro tipos de enlaces:
1. Enlaces dentro de la misma página.
2. Enlaces con otra página nuestra.
3. Enlaces con una página fuera de nuestro sistema.
4. Enlaces con una dirección de correo electrónico.
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Tipos de enlaces
Se pueden distinguir cuatro tipos de enlaces:
1. Enlaces dentro de la misma página.
2. Enlaces con otra página nuestra.
3. Enlaces con una página fuera de nuestro sistema.
4. Enlaces con una dirección de correo electrónico.
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Enlaces dentro de la misma página
A veces, en el caso de documentos (o páginas) muy
extensos, nos puede interesar dar un salto desde una
posición a otra determinada.
Ejemplo:
<A HREF=“#final”>Haz clic para ir al final </A>
y al final del documento se coloca la siguiente etiqueta:
<A NAME=“final”> </A>
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Enlaces dentro de la misma página
A veces, en el caso de documentos (o páginas) muy
extensos, nos puede interesar dar un salto desde una
posición a otra determinada.
Ejemplo:
<A HREF=“#final”>Haz clic para ir al final </A>
y al final del documento se coloca la siguiente etiqueta:
<A NAME=“final”> </A>
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Enlaces con otra página nuestra
Es frecuente que tengamos varias páginas, una inicial
y otras “conectadas” a ella.
Por ejemplo:
Si deseamos enlazar la página actual con la página del ejemplo 2 del
capítulo anterior, que la hemos llamado pag02.htm, especificamos:
<A HREF=“pag02.html”>Ir a la página #2</A>
esta etiqueta nos permite posicionarnos al inicio de la página
“pag02.html”
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Enlaces con otra página nuestra
Es frecuente que tengamos varias páginas, una inicial
y otras “conectadas” a ella.
Por ejemplo:
Si deseamos enlazar la página actual con la página del ejemplo 2 del
capítulo anterior, que la hemos llamado pag02.htm, especificamos:
<A HREF=“pag02.html”>Ir a la página #2</A>
esta etiqueta nos permite posicionarnos al inicio de la página
“pag02.html”
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Enlaces con otra página nuestra
En caso de querer acceder a la página “pag02.htm” a
un lugar concreto de la misma, empleamos diferente
sintáxis:
<A HREF=“pag02.html#aquimero”>Ir a pagina #2 en la sección III</A>
recuerda, debemos incorporar la etiqueta correspondiente en el
archivo “pag02.html”, para satisfacer la referencia.
La etiqueta ha introducir en la página “pag02.html” (en el lugar que
deseamos), sería:
<A NAME=“aquimero”></A>
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Enlaces con otra página nuestra
En caso de querer acceder a la página “pag02.htm” a
un lugar concreto de la misma, empleamos diferente
sintáxis:
<A HREF=“pag02.html#aquimero”>Ir a pagina #2 en la sección III</A>
recuerda, debemos incorporar la etiqueta correspondiente en el
archivo “pag02.html”, para satisfacer la referencia.
La etiqueta ha introducir en la página “pag02.html” (en el lugar que
deseamos), sería:
<A NAME=“aquimero”></A>
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Enlaces con otra página nuestra
En el ejemplo anterior se esta partiendo de la suposición de que
los archivos que contienen a las páginas Web se encuentran
en el mismo directorio, por lo que, cuando éstas se ubiquen en
diferentes directorios entonces la etiqueta deberá ser, por ejemplo:
<A HREF=“d:/montiel/pag02.html#aquimero”>Ir a pag#2 sección III</A>
unidad:/directorio
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Enlaces con otra página nuestra
En el ejemplo anterior se esta partiendo de la suposición de que
los archivos que contienen a las páginas Web se encuentran
en el mismo directorio, por lo que, cuando éstas se ubiquen en
diferentes directorios entonces la etiqueta deberá ser, por ejemplo:
<A HREF=“d:/montiel/pag02.html#aquimero”>Ir a pag#2 sección III</A>
unidad:/directorio
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Enlaces con una página fuera de nuestro sistema
Si deseamos enlazar con una página que esté fuera de
nuestro sistema (es decir, que esté en un servidor distinto
al que soporta nuestra página), es necesario conocer su
dirección completa, o URL (Uniform Resource Locator).
Por ejemplo:
<A HREF=“http://mail.yahoo.com.mx”>Correo de Yahoo </A>
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Enlaces con una página fuera de nuestro sistema
Si deseamos enlazar con una página que esté fuera de
nuestro sistema (es decir, que esté en un servidor distinto
al que soporta nuestra página), es necesario conocer su
dirección completa, o URL (Uniform Resource Locator).
Por ejemplo:
<A HREF=“http://mail.yahoo.com.mx”>Correo de Yahoo </A>
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
En este caso, simplemente utilizamos el texto
“mailto:” seguido de la dirección Email.
La estructura de la etiqueta es:
<A HREF=“mailto:dirección Email”>Texto del enlace</A>
Ejemplo:
Comentarios a Prof. Carlos Montiel en:
<A HREF=“mailto:[email protected]”>[email protected]</A>
Enlaces con una dirección de correo electrónico
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
En este caso, simplemente utilizamos el texto
“mailto:” seguido de la dirección Email.
La estructura de la etiqueta es:
<A HREF=“mailto:dirección Email”>Texto del enlace</A>
Ejemplo:
Comentarios a Prof. Carlos Montiel en:
<A HREF=“mailto:[email protected]”>[email protected]</A>
Enlaces con una dirección de correo electrónico
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Ejemplo práctico #3
***Procura que las etiquetas <A HREF…..></A> estén contenidas en un solo renglón
En el procesador de texto bloc de notas captura el siguiente código HTML y al
archivo llámale: pagina03.HTML
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Ejemplo práctico #3
***Procura que las etiquetas <A HREF…..></A> estén contenidas en un solo renglón
En el procesador de texto bloc de notas captura el siguiente código HTML y al
archivo llámale: pagina03.HTML
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Imágenes
La estructura de la etiqueta que nos sirve para
incluir imágenes en nuestras páginas Web es:
<IMG SRC=“imagen.gif” WIDTH=120 HEIGHT=300>
De donde:
“IMG”, -IMaGe- es imagen.
“SRC”, -SouRCe- es fuente u origen, donde especificamos el nombre de la
imagen que deseamos insertar.
“WIDTH” es el ancho que se le asigna a la imagen.
“HEIGHT” es la altura que se le asigna a la imagen.
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Imágenes
La estructura de la etiqueta que nos sirve para
incluir imágenes en nuestras páginas Web es:
<IMG SRC=“imagen.gif” WIDTH=120 HEIGHT=300>
De donde:
“IMG”, -IMaGe- es imagen.
“SRC”, -SouRCe- es fuente u origen, donde especificamos el nombre de la
imagen que deseamos insertar.
“WIDTH” es el ancho que se le asigna a la imagen.
“HEIGHT” es la altura que se le asigna a la imagen.
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Imágenes
La etiqueta para incluir imágenes en nuestras
páginas Web posee algunos atributos, como son:
ALT=“descripción”
ALIGN=TOP | MIDDLE | BOTTOM
WIDTH= n
HEIGHT= m
Por ejemplo:
<IMG SRC=“foto_yomero.jpg” ALT=“Prof. Montiel” ALIGN=MIDDLE>Prof. Carlos Montiel R.
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Imágenes
La etiqueta para incluir imágenes en nuestras
páginas Web posee algunos atributos, como son:
ALT=“descripción”
ALIGN=TOP | MIDDLE | BOTTOM
WIDTH= n
HEIGHT= m
Por ejemplo:
<IMG SRC=“foto_yomero.jpg” ALT=“Prof. Montiel” ALIGN=MIDDLE>Prof. Carlos Montiel R.
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Imágenes
Otra posibilidad muy interesante es la de utilizar
una imagen como enlace a otra página.
Para estos casos se utilizan generalmente
imágenes pequeñas (iconos), aunque se puede usar
cualquier tipo de imagen.
Su estructura es:
<A HREF=“hojaWeb.html”><IMG SRC=“imagen.gif”></A>
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Imágenes
Otra posibilidad muy interesante es la de utilizar
una imagen como enlace a otra página.
Para estos casos se utilizan generalmente
imágenes pequeñas (iconos), aunque se puede usar
cualquier tipo de imagen.
Su estructura es:
<A HREF=“hojaWeb.html”><IMG SRC=“imagen.gif”></A>
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Ejemplo práctico #4
En el procesador de texto bloc de notas captura el siguiente código HTML y al archivo
llámale: pagina04.HTML
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Ejemplo práctico #4
En el procesador de texto bloc de notas captura el siguiente código HTML y al archivo
llámale: pagina04.HTML
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Ejemplo práctico #5
En el procesador de texto bloc de notas captura el código HTML de arriba y al archivo llámale:
pagina05.HTML
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Ejemplo práctico #5
En el procesador de texto bloc de notas captura el código HTML de arriba y al archivo llámale:
pagina05.HTML
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Tablas
Las tablas son sin duda uno de los elementos más potentes del
HTML. Con pocos elementos se pueden conseguir efectos
espectaculares. En el interior de las celdas de una tabla, que
pueden ser con borde visible o invisible, se puede poner
cualquier cosa: texto y color, imágenes, links, etc...
Por supuesto, además de permitir cualquier contenido, tienen sus
propios atributos de alineación tanto horizontal como vertical, y
atributos de dimensionado.
El elemento básico es <TABLE> y en su interior los elementos:
<TD> <TR> <TH> y <CAPTION>
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Tablas
Las tablas son sin duda uno de los elementos más potentes del
HTML. Con pocos elementos se pueden conseguir efectos
espectaculares. En el interior de las celdas de una tabla, que
pueden ser con borde visible o invisible, se puede poner
cualquier cosa: texto y color, imágenes, links, etc...
Por supuesto, además de permitir cualquier contenido, tienen sus
propios atributos de alineación tanto horizontal como vertical, y
atributos de dimensionado.
El elemento básico es <TABLE> y en su interior los elementos:
<TD> <TR> <TH> y <CAPTION>
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Tablas
Resumen de los elementos utilizados y los atributos que admite cada uno:
ATRIBUTO TABLETRTDTHCAPTION
BORDER X
ROWSPAN XX
COLSPAN XX
ALIGN XXX X
VALIGN X
WIDTH X X
HEIGTH X X
CELLPADDING X
CELLSPACING X
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Tablas
Resumen de los elementos utilizados y los atributos que admite cada uno:
ATRIBUTO TABLETRTDTHCAPTION
BORDER X
ROWSPAN XX
COLSPAN XX
ALIGN XXX X
VALIGN X
WIDTH X X
HEIGTH X X
CELLPADDING X
CELLSPACING X
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Ejemplo práctico #6
En el procesador de texto bloc de notas captura el código HTML de arriba y al archivo llámale:
pagina06.HTML
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Ejemplo práctico #6
En el procesador de texto bloc de notas captura el código HTML de arriba y al archivo llámale:
pagina06.HTML
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Ejemplo práctico #7
En el procesador de texto bloc de notas captura el código HTML de arriba y al archivo llámale:
pagina07.HTML
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Ejemplo práctico #7
En el procesador de texto bloc de notas captura el código HTML de arriba y al archivo llámale:
pagina07.HTML
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Ejemplo práctico #8
En el procesador de texto bloc de notas captura el siguiente código HTML y al archivo
llámale: pagina08.HTML
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Ejemplo práctico #8
En el procesador de texto bloc de notas captura el siguiente código HTML y al archivo
llámale: pagina08.HTML
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Ejemplo práctico #9
En el procesador de texto bloc de notas captura el siguiente código HTML y al archivo
llámale: pagina09.HTML
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Ejemplo práctico #9
En el procesador de texto bloc de notas captura el siguiente código HTML y al archivo
llámale: pagina09.HTML
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Ejemplo práctico #10
En el procesador de texto bloc de notas captura el siguiente código HTML y al archivo
llámale: pagina10.HTML
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Ejemplo práctico #10
En el procesador de texto bloc de notas captura el siguiente código HTML y al archivo
llámale: pagina10.HTML
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Ejemplo práctico #11
En el procesador de texto bloc de notas captura el siguiente código HTML y al archivo
llámale: pagina11.HTML
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Ejemplo práctico #11
En el procesador de texto bloc de notas captura el siguiente código HTML y al archivo
llámale: pagina11.HTML
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Códigos hexadecimales de color
Estos códigos de color se pueden utilizar como valor de atributo en los
elementos <FONT COLOR> y <BODY BGCOLOR FGCOLOR TEXT LINK VLINK ALINK>.
La codificación de estos colores está basada en mezclas cromáticas RGB (RED
GREEN BLUE), es decir, se mezclan ciertas cantidades de los tres colores básicos
(rojo, verde y azul), para conseguir el color deseado.
Fondo (background) rojo:
<BODY BGCOLOR=“#FF0000”>
00FF00 verde
0000FF azul
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Códigos hexadecimales de color
Estos códigos de color se pueden utilizar como valor de atributo en los
elementos <FONT COLOR> y <BODY BGCOLOR FGCOLOR TEXT LINK VLINK ALINK>.
La codificación de estos colores está basada en mezclas cromáticas RGB (RED
GREEN BLUE), es decir, se mezclan ciertas cantidades de los tres colores básicos
(rojo, verde y azul), para conseguir el color deseado.
Fondo (background) rojo:
<BODY BGCOLOR=“#FF0000”>
00FF00 verde
0000FF azul
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Color e imágenes de fondo
Asignar color al fondo de una página Web lo conseguimos con
la etiqueta <BODY> mediante su atributo “BGCOLOR”, por
ejemplo:
<BODY BGCOLOR=“#FF7070”>
O si deseamos emplear una imagen como fondo, entonces
deberá ser:
<BODY BACKGROUND=“imagen.jpg”>
Nota: Para hacer un color más oscuro hay que reducir el número de su componente,
dejando los otros dos invariables. Así, el rojo #FF0000 se puede hacer más oscuro con
#AA0000, o aún más oscuro con #550000.
Para hacer que un color tenga un tono más suave (más pastel), se debe variar los otros dos
componentes (número más alto), en una cantidad igual. Así, podemos convertir el rojo en rosa
con #FF7070.
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Color e imágenes de fondo
Asignar color al fondo de una página Web lo conseguimos con
la etiqueta <BODY> mediante su atributo “BGCOLOR”, por
ejemplo:
<BODY BGCOLOR=“#FF7070”>
O si deseamos emplear una imagen como fondo, entonces
deberá ser:
<BODY BACKGROUND=“imagen.jpg”>
Nota: Para hacer un color más oscuro hay que reducir el número de su componente,
dejando los otros dos invariables. Así, el rojo #FF0000 se puede hacer más oscuro con
#AA0000, o aún más oscuro con #550000.
Para hacer que un color tenga un tono más suave (más pastel), se debe variar los otros dos
componentes (número más alto), en una cantidad igual. Así, podemos convertir el rojo en rosa
con #FF7070.
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Colores del texto y de los enlaces
Si no se variasen los colores habituales del texto y de los enlaces
(negro y azul, respectivamente), podría ocurrir que su lectura contra un
fondo oscuro fuese muy dificultosa o incluso imposible, si el fondo
fuese precisamente negro o azul.
Para evitar esto, se pueden escoger los colores del texto y de los
enlaces, añadiendo a la etiqueta (si se desea) los siguientes atributos:
TEXT COLOR DEL TEXTO
LINK COLOR DE LOS ENLACES
VLINK COLOR DE LOS ENLACES VISITADOS
ALINK COLOR DE LOS ENLACES ACTIVOS (EL QUE ADQUIEREN EN EL
MOMENTO DE SER OPRIMIDOS)
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Colores del texto y de los enlaces
Si no se variasen los colores habituales del texto y de los enlaces
(negro y azul, respectivamente), podría ocurrir que su lectura contra un
fondo oscuro fuese muy dificultosa o incluso imposible, si el fondo
fuese precisamente negro o azul.
Para evitar esto, se pueden escoger los colores del texto y de los
enlaces, añadiendo a la etiqueta (si se desea) los siguientes atributos:
TEXT COLOR DEL TEXTO
LINK COLOR DE LOS ENLACES
VLINK COLOR DE LOS ENLACES VISITADOS
ALINK COLOR DE LOS ENLACES ACTIVOS (EL QUE ADQUIEREN EN EL
MOMENTO DE SER OPRIMIDOS)
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Mapas
Hemos visto dos maneras distintas de enlazar una página con otra: por
medio de un enlace de texto o por medio de una imagen que permite
enlazar a una única página, sin embargo, se puede utilizar una única
imagen para enlazar con varias páginas, yendo a una u otra según la
zona en donde se haga clic con el ratón. Este tipo de imágenes se
llaman mapas.
La sintaxis correspondiente es:
<MAP NAME=“nombre del mapa”>
<AREA SHAPE=“forma” COORDS=“x, y , ....” HREF= “página.html” >
:
:
</MAP>
<IMG SRC=“imagen.jpg” USEMAP=“#nombre del mapa”>
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Mapas
Hemos visto dos maneras distintas de enlazar una página con otra: por
medio de un enlace de texto o por medio de una imagen que permite
enlazar a una única página, sin embargo, se puede utilizar una única
imagen para enlazar con varias páginas, yendo a una u otra según la
zona en donde se haga clic con el ratón. Este tipo de imágenes se
llaman mapas.
La sintaxis correspondiente es:
<MAP NAME=“nombre del mapa”>
<AREA SHAPE=“forma” COORDS=“x, y , ....” HREF= “página.html” >
:
:
</MAP>
<IMG SRC=“imagen.jpg” USEMAP=“#nombre del mapa”>
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Mapas
Ejemplo práctico #12
En el procesador de texto bloc de notas captura el siguiente código HTML y al archivo
llámale: pagina12.HTML
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Mapas
Ejemplo práctico #12
En el procesador de texto bloc de notas captura el siguiente código HTML y al archivo
llámale: pagina12.HTML
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Mapas
Ejemplo práctico #13
En el procesador de texto bloc de notas captura el siguiente código HTML y al archivo
llámale: pagina13.HTML
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Mapas
Ejemplo práctico #13
En el procesador de texto bloc de notas captura el siguiente código HTML y al archivo
llámale: pagina13.HTML
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Mapas
Ejemplo práctico #14
En el procesador de texto bloc de notas captura el siguiente código HTML y al archivo
llámale: pagina14.HTML
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Mapas
Ejemplo práctico #14
En el procesador de texto bloc de notas captura el siguiente código HTML y al archivo
llámale: pagina14.HTML
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Frame, -cuadro, bastidor o marco-
El “frame” es un elemento que permite dividir la pantalla en varias
áreas independientes unas de otras, y por tanto con contenidos
distintos, aunque puedan estar relacionadas.
No hay límites para el contenido de cada una de estas áreas: tienen las
mismas propiedades que la pantalla completa normal, tal y como la
conocemos. Es una zona viva.
Para la definición de los “frames”, primero creamos un documento
HTML en el que definiremos cuantas zonas va a haber, qué
distribución y tamaño van a tener, y cuál va a ser el contenido de cada
una de ellas.
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Frame, -cuadro, bastidor o marco-
El “frame” es un elemento que permite dividir la pantalla en varias
áreas independientes unas de otras, y por tanto con contenidos
distintos, aunque puedan estar relacionadas.
No hay límites para el contenido de cada una de estas áreas: tienen las
mismas propiedades que la pantalla completa normal, tal y como la
conocemos. Es una zona viva.
Para la definición de los “frames”, primero creamos un documento
HTML en el que definiremos cuantas zonas va a haber, qué
distribución y tamaño van a tener, y cuál va a ser el contenido de cada
una de ellas.
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Frames
Sintaxis general:
<HTML>
<HEAD><TITLE>Título</TITLE></HEAD>
<FRAMESET .... >
<FRAME .... >
<FRAME .... >
<NOFRAMES>
<BODY>
[ Aquí va lo que queremos que vean los usuarios con
navegadores que no soportan frames ]
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Frames
Sintaxis general:
<HTML>
<HEAD><TITLE>Título</TITLE></HEAD>
<FRAMESET .... >
<FRAME .... >
<FRAME .... >
<NOFRAMES>
<BODY>
[ Aquí va lo que queremos que vean los usuarios con
navegadores que no soportan frames ]
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Frames
Ejemplo práctico #15
En el procesador de texto bloc de notas captura el siguiente código HTML y al archivo
llámale: pagina15.HTML
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Frames
Ejemplo práctico #15
En el procesador de texto bloc de notas captura el siguiente código HTML y al archivo
llámale: pagina15.HTML
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Frames
Ejemplo práctico #16
En este ejercicio, lo primero que haremos será crear cinco páginas Web,
las cuales las emplearemos en la siguiente página Web, que se
llamará “Index.html”:
En las siguientes diapositivas se mostrarán los contenidos de las
páginas Web: “titulo.html”, “indice.html” (la cual invocará a otras dos
páginas: “cap01.html” y “cap02.html”), y finalmente la página
“contenidos.html”.
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Frames
Ejemplo práctico #16
En este ejercicio, lo primero que haremos será crear cinco páginas Web,
las cuales las emplearemos en la siguiente página Web, que se
llamará “Index.html”:
En las siguientes diapositivas se mostrarán los contenidos de las
páginas Web: “titulo.html”, “indice.html” (la cual invocará a otras dos
páginas: “cap01.html” y “cap02.html”), y finalmente la página
“contenidos.html”.
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Frames
Continuación ...
Contenido de la página Web “titulo.html”:
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Frames
Continuación ...
Contenido de la página Web “titulo.html”:
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Frames
continuación ...
Contenido de la página Web “cap01.html”:
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Frames
continuación ...
Contenido de la página Web “cap01.html”:
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Frames
continuación ...
Contenido de la página Web “contenidos.html”:
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Frames
continuación ...
Contenido de la página Web “contenidos.html”:
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Frames
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Frames
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Páginas con Sonido
Una página Web puede tener sonidos incorporados,
bien sea como un fondo sonoro que se ejecuta
automáticamente al cargar la página, o como una opción
para que la active el propio usuario.
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Páginas con Sonido
Una página Web puede tener sonidos incorporados,
bien sea como un fondo sonoro que se ejecuta
automáticamente al cargar la página, o como una opción
para que la active el propio usuario.
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Páginas con Sonido
1) Fondo sonoro
<BGSOUND SRC=“archivo_de_sonido” LOOP=n>
Ejemplo:
<BGSOUND SRC=“pinkpanter.mid” LOOP=-1>
Esta etiqueta sólo Internet Explorer la reconoce, es decir, se
escuchará la música como fondo musical de la página Web,
debemos admitir que HTML 4.0, ya es obsoleto.
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Páginas con Sonido
1) Fondo sonoro
<BGSOUND SRC=“archivo_de_sonido” LOOP=n>
Ejemplo:
<BGSOUND SRC=“pinkpanter.mid” LOOP=-1>
Esta etiqueta sólo Internet Explorer la reconoce, es decir, se
escuchará la música como fondo musical de la página Web,
debemos admitir que HTML 4.0, ya es obsoleto.
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Páginas con Sonido
2) Música en la página Web:
<EMBED SRC=“archivo_de_sonido” WIDTH=xxx HEIGHT=yyy>
Ejemplo:
<EMBED SRC=“música.mp3” WIDTH=200 HEIGHT=55>
Debiendo aparecer la siguiente imagen, y debes oprimir el botón
play para acceder a la música:
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Páginas con Sonido
2) Música en la página Web:
<EMBED SRC=“archivo_de_sonido” WIDTH=xxx HEIGHT=yyy>
Ejemplo:
<EMBED SRC=“música.mp3” WIDTH=200 HEIGHT=55>
Debiendo aparecer la siguiente imagen, y debes oprimir el botón
play para acceder a la música:
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Páginas con Sonido
Atributos de la etiqueta <embed> :
SRC AUTOSTART LOOP
STARTTIME ENDTIME VOLUME
WIDTH HEIGHT ALIGN
CONTROLS HIDDEN
MASTERSOUND
Ejemplo:
<embed src=música.mp3 console=smallconsole loop=-1>
apareciendo la siguiente imagen, oprime play para que inicie la música:
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Páginas con Sonido
Atributos de la etiqueta <embed> :
SRC AUTOSTART LOOP
STARTTIME ENDTIME VOLUME
WIDTH HEIGHT ALIGN
CONTROLS HIDDEN
MASTERSOUND
Ejemplo:
<embed src=música.mp3 console=smallconsole loop=-1>
apareciendo la siguiente imagen, oprime play para que inicie la música:
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Páginas con Sonido
Ejemplo:
<CENTER><A HREF="musica.mp3">Haz clic y escucharás la música</A></CENTER>
Si te encuentras en Google Chrome, aparecerá la siguiente imagen, y se tocará el
archivo “musica.mp3”:
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Páginas con Sonido
Ejemplo:
<CENTER><A HREF="musica.mp3">Haz clic y escucharás la música</A></CENTER>
Si te encuentras en Google Chrome, aparecerá la siguiente imagen, y se tocará el
archivo “musica.mp3”:
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Páginas con Sonido
Ejemplo:
<CENTER>Haz clic y escucharás la música<BR><A HREF="musica.mp3"><IMG
SRC="yomero.jpg"></A>
Si te encuentras en Google Chrome, aparecerá la siguiente imagen, y al hacer clic
en ella, se escuchará la música:
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Páginas con Sonido
Ejemplo:
<CENTER>Haz clic y escucharás la música<BR><A HREF="musica.mp3"><IMG
SRC="yomero.jpg"></A>
Si te encuentras en Google Chrome, aparecerá la siguiente imagen, y al hacer clic
en ella, se escuchará la música:
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Páginas con Vídeo
Esta característica es mucho más compleja, ya que involucra tanto sonido
como imagen, por lo que los archivos de tipo vídeo son muy grandes, ya que en
la práctica unos pocos segundos de vídeo con sonido puede
representar un archivos de varios megas (Mb).
Al igual que con el sonido, se utiliza la etiqueta EMBED aunque con menos
atributos: SRC, HEIGHT, WIDTH, AUTOSTART, LOOP y ALIGN; todos ellos funcionan de
forma parecida a los del sonido, los tipos de archivos pueden ser de formato: AVI,
MP4, etc.
Ejemplo:
<embed src=“Montiel_Tattoo.mp4” height=300 width=400 autostart=true loop=true>
…Ir a la siguiente diapositiva.
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Páginas con Vídeo
Esta característica es mucho más compleja, ya que involucra tanto sonido
como imagen, por lo que los archivos de tipo vídeo son muy grandes, ya que en
la práctica unos pocos segundos de vídeo con sonido puede
representar un archivos de varios megas (Mb).
Al igual que con el sonido, se utiliza la etiqueta EMBED aunque con menos
atributos: SRC, HEIGHT, WIDTH, AUTOSTART, LOOP y ALIGN; todos ellos funcionan de
forma parecida a los del sonido, los tipos de archivos pueden ser de formato: AVI,
MP4, etc.
Ejemplo:
<embed src=“Montiel_Tattoo.mp4” height=300 width=400 autostart=true loop=true>
…Ir a la siguiente diapositiva.
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Páginas con Vídeo
Ejemplo:
<embed src=“Montiel_Tattoo.mp4” height=300 width=400 autostart=true
loop=true>
Nota:
Si empleas Google Chrome,
el parámetro autostart no es
reconocido.
En cambio si empleas
Internet Explorer, ahí si es
reconocido el autostart.
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
Páginas con Vídeo
Ejemplo:
<embed src=“Montiel_Tattoo.mp4” height=300 width=400 autostart=true
loop=true>
Nota:
Si empleas Google Chrome,
el parámetro autostart no es
reconocido.
En cambio si empleas
Internet Explorer, ahí si es
reconocido el autostart.
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
La etiqueta <META>
Estas etiquetas se colocan en la cabecera de la página (entre
las etiquetas <HEAD> y </HEAD>), que sirven para
suministrar información detallada del contenido de una página,
con lo que se tendrá un mayor control de cómo será catalogada
la página.
Los motores de búsqueda, como por ejemplo Yahoo,
consultan la información declarada en estas etiquetas para
satisfacer las solicitudes de los usuarios.
Existen diferentes tipos de etiquetas <META>, en este curso
solo contemplaremos dos tipos: (1) las que hacen referencia a
la descripción de la página y (2) las que emplean palabras clave, y
una (3) para definir el idioma.
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
La etiqueta <META>
Estas etiquetas se colocan en la cabecera de la página (entre
las etiquetas <HEAD> y </HEAD>), que sirven para
suministrar información detallada del contenido de una página,
con lo que se tendrá un mayor control de cómo será catalogada
la página.
Los motores de búsqueda, como por ejemplo Yahoo,
consultan la información declarada en estas etiquetas para
satisfacer las solicitudes de los usuarios.
Existen diferentes tipos de etiquetas <META>, en este curso
solo contemplaremos dos tipos: (1) las que hacen referencia a
la descripción de la página y (2) las que emplean palabras clave, y
una (3) para definir el idioma.
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
La etiqueta <META>
Ejemplos:
(1) por descripción:
<META NAME=description CONTENT=“HTML Tutorial in Spanish. Manual
para la creación de hojas Web”>
(2) por palabras clave:
<META NAME=keywords CONTENT=“HTML Tutorial WWW Web spanish
Spain html manual guía”>
(3) para definir el idioma (español):
<META charset=utf-8>
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
La etiqueta <META>
Ejemplos:
(1) por descripción:
<META NAME=description CONTENT=“HTML Tutorial in Spanish. Manual
para la creación de hojas Web”>
(2) por palabras clave:
<META NAME=keywords CONTENT=“HTML Tutorial WWW Web spanish
Spain html manual guía”>
(3) para definir el idioma (español):
<META charset=utf-8>
Email: [email protected] Enero 2020
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
✌??????
??????
Se acabo, espero que todo este
menjurje les sea de utilidad,
saludos
Instituto Politécnico Nacional
Curso-Taller “Diseño de páginas Web”
✌??????
??????
Se acabo, espero que todo este
menjurje les sea de utilidad,
saludos
Tags
Categories
TechnologyDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 0
- Slides 65
- Age 71 days
Related Slideshows
11
8-top-ai-courses-for-customer-support-representatives-in-2025.pptx
JeroenErne2
46 views
10
7-essential-ai-courses-for-call-center-supervisors-in-2025.pptx
JeroenErne2
46 views
13
25-essential-ai-courses-for-user-support-specialists-in-2025.pptx
JeroenErne2
37 views
11
8-essential-ai-courses-for-insurance-customer-service-representatives-in-2025.pptx
JeroenErne2
34 views
21
Know for Certain
DaveSinNM
21 views
17
PPT OPD LES 3ertt4t4tqqqe23e3e3rq2qq232.pptx
novasedanayoga46
26 views