taller html mas actualizado
TRANSCRIPT
Curso básico de html
Introducción:
Las páginas que nos encontramos en Internet, las páginas web, están construidas en un lenguaje de etiquetas o de marcas denominado lenguaje html (Hyper Text Markup Language).
Este lenguaje nos permite aglutinar textos, sonidos e imágenes y combinarlos a nuestro gusto. Además, y es aquí donde reside su ventaja con respecto a libros o revistas, el HTML nos permite la introducción de referencias a otras páginas por medio de los enlaces hipertexto.
Esto quiere ser un sencillo curso para que seas capaz, en relativamente poco tiempo, de realizar tus primeras páginas web escribiendo el código correspondiente, antes de pasar a ver algún editor de código concreto (Dreamweaver por ejemplo) que simplifican enormemente la tarea.
¿Por qué entonces no empezar directamente con el editor?
Porque es muy importante tener ciertos conocimientos del lenguaje ante posibles problemas que, sin lugar a dudas, se nos van a presentar al editar nuestras páginas.
La red está llena de cursos sobre el lenguaje HTML. ¿Qué aporta éste que no tengan los demás? Probablemente no mucho. He pretendido la sencillez y la claridad. Al principio quería ser de nivel inicial y, conforme lo he ido ampliando, ya está en un nivel de intermedio. No obstante, los primeros pasos están pensados para personas con escasos conocimientos de informática en general, y de páginas web en particular.
El código fuente (código lenguaje html) de una página web, se ve en el Internet Explorer, entrando al Menú ver, código fuente.
El código fuente o código de la página web en lenguaje html, se escribe en un procesador de texto. Nosotros lo vamos a hacer con el Bloc de Notas. Para abrir el Bloc de Notas, le damos a Inicio > Todos los Programas > Accesorios > Bloc de notas.
Soporte: manual completo de html.
1. ver el código fuente de una pagina web:
1. Abrir pagina web: 2. Si hay Internet: Abrir la página www.el pais.com.co. Ir a menú Ver del
Internet Explorer, código fuente. Se abrirá en un editor de texto el código
de la página en html. Observe todo lo que contiene una página web. En este curso veremos las partes básicas y para un diseño web.
3. Cierre la ventana de código fuente.4. Si no hay Internet: Abrir la pagina de nombre: que es multimedia, con
esta ruta, escritorio, abrir carpeta curso de pagina web, abrir carpeta código fuente.
5. Observe todo lo que contiene una página web.6. Cierre la ventana de código fuente.
2. Diseño de mi primera pagina web:
1. Abrir bloc de notas: Inicio, todos los programas, accesorios, bloc de notas.
2. guardar archivo: Archivo, guardar, escritorio, abrir carpeta: curso de pagina web, luego abrir carpeta sitio, darle el nombre así: “index1.html”, las comillas son necesarias para que guarde la extensión html.
3. Diseño básico del cuerpo de la pagina:
1. Delimite la pagina, digite las etiquetas: <html> </html>Ayuda: Ver pagina 3 del manual.2. Encabezamiento: digite las etiquetas: <head> </head>Entre las otras etiquetas: debe quedar así:<html><head></head> </html>
Por cada cambio guarde el archivo: ctrl.-G Ayuda: ver página 3 del manual.
3. Ver pagina web en el navegador: abrir el Internet Explorer o seguir la ruta: inicio, todos los programas, Internet Explorer.
4. Abrir pagina: Archivo, abrir, examinar, escritorio, curso de página web, sitio, index1.html, clic en abrir.
5. Observe lo que muestra.
6. Cuerpo: Digite las etiquetas: <body> </body> Entre las etiquetas </head> y </html>: debe quedar así:<html><head></head><body> </body>
</html>
Por cada cambio guarde el archivo: ctrl.-G Ayuda: ver página 3 del manual.
7. Actualizar pagina web: en el Internet explore, de clic en actualizar.8. Observe lo que pasa.
4. Titulo de l pagina: Digite el nombre de titulo de la pagina: es el nombre que aparece en la barra de titulo. El nombre es: Mi primera pagina, el cual va entre las etiquetas <title> </title>, las cuales se coloca entre de las etiquetas del encabezado :<head> y </head>.
Debe quedar así:<html><head><title> Mi primera pagina </title></head><body> </body>
</html>
Por cada cambio guarde el archivo: ctrl.-GAyuda: ver página 4 del manual
1. Actualizar pagina en el Internet Explorer: de clic en actualizar.2. Observe lo que pasa.
5. Editar el cuerpo de la pagina, todo lo esta entre las etiquetas <body> :
a. Edición de texto en html:
Cuando se escribe texto en html, estos se interpretan tal como es con excepciones como los saltos de línea, y los atributos del texto (negrita, alineación, fuente, etc).
1. Encabezados o títulos: Ubíquese después de la etiqueta <body>. Digite Mi primera pagina, esto se escribe entre las etiquetas <h1> y </h1>.Debe quedar así:<h1> Mi primera pagina</h1>
2. Guarde el archivo: ctrl.-G.3. Actualice la página web en el navegador (Internet Explorer).4. Observe lo que pasa.5. Ayuda: paginas 4 y 5 del manual. 6. Central titulo: Coloque el titulo entre las etiquetas <center> y
</center>. Debe quedar así:<h1><center> Mi primera pagina</center></h1>
7. Guarde el archivo: ctrl.-G.8. Actualice la página web en el navegador.
9. observe lo que pasa.10.Ayuda paginas 4 y 5 del manual.11. Insertar separador: En la siguiente línea, coloque la etiqueta <hr>
no tiene etiqueta de cierre.12.Actualice la página web en el navegador.13.observe lo que pasa.14.Ayuda paginas 4 y 5 del manual.15.Debajo de la etiqueta separador, digite el siguiente texto :
Este es mi primera página web que estoy diseñando, es muy básica pero poco a poco se avanzara.
Nota: Haga que todo le quede en una sola línea.
16.Guarde el archivo: ctrl.-G.17.Actualice la página web en navegador (Internet Explorer).18.Observe lo que pasa.19.En el texto haga un salto de línea después de la palabra web,
debe quedar así:
Este es mi primera página web que estoy diseñando, es muy básica pero poco a poco se avanzara.
20.Guarde la página: ctrl.-G.21.Actualice la página web en el Internet Explorer y observe que
cambios se hacen.
22.Saltos de línea: se usa la etiqueta <br> no tiene cierre.Insértela en el cuerpo de la página después de la palabra web.Debe quedar así:
Este es mi primera pagina web <br>que estoy diseñando, es muy básica pero poco a poco se avanzara.
23. Guarde la página: ctrl-G. 24. Actualice la página web, observe los cambios. 25. Ayuda: pagina 6 del manual. 26. Inserte dos saltos de línea: de bajo del párrafo anterior digite dos veces la etiqueta <br>. 27. Insertar un nuevo párrafo: De bajo de la última etiqueta <br> digite el siguiente párrafo entre las etiquetas <p> y </p>:
Ahora aprenderé de cómo deben ir los párrafos para darle formato. Debe quedar así: <p> Ahora aprenderé de cómo deben ir los párrafos para darle formato </p>
28. guardar la página: ctrl.-G. 29. Actualice la página web, observe los cambios. 30. Ayuda: pagina 6 del manual.
31. Colocar texto en negrita: del párrafo anterior, colocar la palabra formato en negrita, colocando las etiquetas <b> y </b>, al inicio y al final de la palabra, debe quedar así: <b> formato</b>. 32. Guardar la pagina. 33. Actualizar pagina y ver cambios. 34. Ayuda: pagina 6 del manual. 35. Inserte dos saltos de línea: <br><br>. 35. Subíndice y superíndice: digite las siguientes expresiones con las etiquetas <sub>,</sub>y <sup> y </sup>: sumainicial suma3 Debe quedar así: suma<sub>inicial</sub> Suma<sup>3</sup> 36. Guardar la pagina. 37. Actualizar la pagina, ver cambios y haga los ajustes necesarios. 38. inserte dos saltos de línea: <br><br>. 38. Efecto de parpadeo: Digite el siguiente texto entre las etiquetas <blink> y </blink>. Texto que parpadea
39. Guarde la página.40. Actualizar pagina, ver cambios.41. Inserte dos saltos de líneas: <br><br>42. Separador con ancho y alineación: Inserte un separador <hr> con
ancho del 40% y alineación a la izquierda. Esta debe quedar así:<hr width=40% align=”left”>
43. Guardar pagina.44. Actualizar pagina, ver cambios.45. Ayuda pagina 12 del manual.46. inserte dos saltos de línea.47. Cambiar el tamaño de la letra: Digite el siguiente texto entre las
etiquetas <font> y </font>, con tamaño de 7.Este texto tiene tamaño grandeDebe quedar así:<font size=7> Este texto tiene tamaño grande </font>
48. Guarde la página.49. Actualizar pagina, ver cambios.50. Ayuda: ver paginas 12 y 13 del manual, pruebe con otros valores.51. Insertar dos saltos de línea.52. Cambiar el tipo de letra: Digite el siguiente texto entre las
etiquetas <font> y </font> con fuente verdana: Este texto esta en verdana Debe quedar así:
<font face=”verdana”> Este texto esta en verdana</font>53. Guarde página.54. Actualizar pagina, ver cambios, puede añadir al listado otros tipos
de fuentes: “vernada, arial, impact” , etc.55. Ayuda ver página 14 del manual.56. Inserte dos saltos de línea <br><br>
57. Cambiar color de las letras: Para el sigui<br><br>ente texto cambie el color de la letra a rojo:Este texto estará en rojo.Debe quedar así:<font color=”red”> Este texto estará en rojo.</font>
58. guardar pagina.59. Actualizar pagina, ver cambios. Probar el nombre con números.60. Ayuda: ver página 19 del manual.61. Inserte dos saltos de línea.62. Alineación de párrafos: El siguiente párrafo se debe alinearlo al
centro, con las etiquetas <p> y </p> y el atributo align.Texto centrado.Debe quedar así:<p align=”center”> Texto centrado</p>.
63. guardar pagina.64. Actualizar pagina, ver cambios. Probar alineación izquierda y
derecha.65. Ayuda: ver páginas 6 y 7 del manual.66. Inserte dos saltos de línea.67. Alinear varios párrafos al mismo tiempo: Los siguientes párrafos
estarán alineados a la derecha, con la etiqueta <div> y </div>, y el atributo align.
Los párrafos:<p align="right">Parrafo1</p> <p align="right"> Parrafo3</p> <p align="right"> Parrafo2</p> Deberá quedar así:<div align="right"><p >Parrafo1</p> <p> Parrafo3</p> <p> Parrafo2</p> </div>68. guardar pagina.69. Actualizar pagina, ver cambios.70. Ayuda: ver páginas 7 del manual.71. Inserte dos saltos de línea.
Combinar atributos de texto( tipo de fuente, tamaño, color, alineación): El siguiente texto debe estar en tipo Arial, tamaño 7, color azul, y debe estar centrado:
Partes de la multimediaDebe quedar así:<font face=”arial” size=”7” color=”blue”><p align=”center”> Partes de la multimedia</p></font>
Insertar un comentario: <!--sigue mas código html -- >
72. guardar pagina.73. Actualizar pagina, ver cambios. 74. Ayuda: los otros puntos del taller y del manual.75. Crear una lista: Inserte el siguiente párrafo :
Lista de no ordenada de animales, el cual debe aparecer entre las etiquetas <p> y </p>.76. Insertar una lista no ordenada: la lista debe estar entre las
etiquetas <ul> y </ul>, cada elemento de la lista tiene la etiqueta <li> sin cierre.
La lista: Perro Caballo Gato VacaQueda así en html:
<ul> <li> perro <li> caballo <li> gato <li> vaca
</ul>77. Guardar pagina.78. Actualizar pagina, ver cambios.79. Ayuda: ver página 21 y 22 del manual.80. Cambiar la viñeta: cambie la viñeta a square, ver pagina 21 y 22.59. Inserte nos saltos de línea.60. Insertar una lista ordenada: la lista debe estar entre las etiquetas <ol> y </ol>, cada elemento de la lista tiene la etiqueta <li> sin cierre.Haga que la lista anterior de animales quede ordenada, debe quedar axial:
<ol> <li> perro <li> caballo <li> gato <li> vaca
</ol>81. Guardar pagina.82. Actualizar pagina, ver cambios.83. Ayuda: ver página 23 del manual.84. Cambiar el tipo de ordenamiento: cambie ordenación por letras,
ver pagina 24.85. Inserte dos saltos de línea.86. Insertar una lista de definición: esta lista debe estar entre las
etiquetas <dl> y </dl>. Cada termino de la lista tiene dos partes: el termino a definir y va con la etiqueta <dt> sin cierre. La otra parte es la definición del término y va con la etiqueta <dd>.
La lista de definición:Perro Mamífero caninoCaballo Mamífero herbívoro.Gato Mamífero felino.Vaca
Mamífero rumiante.En html quedaría así<dl><dt>Perro<dd>Mamífero canino<dt>Caballo<dd>Mamífero herbívoro.<dt>Gato<dd>Mamífero felino.<dt>Vaca<dd>Mamífero rumiante.</dl>87. Guardar pagina.88. Actualizar pagina, ver cambios.89. Ayuda: ver página 25 del manual.90. Inserte dos saltos de línea.91. Crear un enlace a un punto de la misma pagina:
a. Punto fuente: Digite el siguiente texto, el cual nos enviara al inicio del contenido de la pagina con dar un clic sobre el. Se usara la etiqueta <a>, </a> y sus atributos.
Ir al inicio Debe quedar axial: <a href=”#inicio”> Ir arriba de la pagina</a>
b. Punto destino: Nuestro destino será ubicarnos al inicio de la página. Inserte de bajo de la etiqueta <body> la siguiente marca destino:
<a name=”inicio”></a>92. Guardar pagina.93. Actualizar pagina, ver cambios.94. Ayuda: ver página 27 del manual.95. Crear un enlace a un a otra pagina nuestra que esta en el mismo
sitio: a. Para nuestro caso, vamos a crear una nueva pagina
tomando como ejemplo esta pagina, para esto debe ir a archivo, guardar como, debe digitar en el nombre” “prueba.html”, este archivo debe quedar en la misma carpeta sitio.
b. Cambiar el titulo de la pagina y del contenido: estando abierto en el bloc de notas el archivo prueba.html, cambie el titulo de la pagina y del contenido:<title> Pagina de enlace</title><h1> Pagina de prueba de enlaces</h1>
c. Guardar pagina.d. Abrir la página prueba.html en una ventana del navegador:
abra una ventana del navegador, archivo, abrir, examinar, escritorio, carpeta página web, sitio, escoja prueba.html.
e. Ver los cambios presentados. Cierre la ventana.f. Crear un enlace en la página index1.html hacia la página
prueba.html: Abra una ventana del bloc de notas y abra la pagina index1.html: Inserte dos saltos de línea. Digite el
siguiente texto, el cual nos abrirá la pagina de prueba, al darle clic sobre el en la pagina web. Se usara la etiquetas <a> y </a>:Ir a la página de pruebaDebe quedar axial:<a href=”prueba.html”> Ir a la pagina de prueba</a>
g. Guardar pagina.h. Actualizar pagina, ver cambios.i. De clic en el enlace y ver que se abre la pagina de prueba
en la misma ventana.j. Guardar pagina.k. Actualizar pagina, ver cambios.l. Crear enlace de la pagina prueba hacia la pagina index1.m. Ayuda: ver páginas 28 del manual.
96. Crear un enlace a un punto determinado de una pagina que esta en el mismo sitio: Vamos a colocar un enlace en la pagina index1.html hacia la lista no ordenada de animales en la pagina prueba.html.
a. Crear marca destino: Estando abierto el archivo prueba.html en el bloc de notas, inserte la siguiente marca destino arriba del párrafo: Lista no ordenada de animales.<a name=”lista”></a>
b. Guardar pagina.c. Crear enlace: estando abierto el archivo index1.html en el
bloc de notas, inserte dos saltos de líneas: <br> <br>.Digite el siguiente enlace para llegar al punto destino:<a href=”prueba.html#lista”> Ir a ejemplo de lista no ordenada</a>
d. Guardar pagina.e. Actualizar pagina, ver cambios, probar enlace.f. Ayuda: ver página 28 del manual.
97. Crear enlace a una pagina externa: Estando abierto la pagina index1.html en el bloc de notas, inserte dos saltos de línea: <br> <br>, luego Inserte el siguiente texto que será enlace a la pagina del país: Ir a la pagina del país. Debe quedar axial el enlace:
<a href=http://www.elpais.com.co> Ir a la pagina del país</a>Si tenemos Internet se abrirá la página.98. guardar pagina.
99. Actualizar pagina en el navegador, ver cambios y probar.100.Ayuda: ver página 29 del manual.101.Inserte dos saltos de línea.102.Insertar imagen: Estando abierta en el bloc de notas la pagina
index1.html Inserte la imagen del auto que se encuentra en la carpeta sitio de la siguiente manera con la etiqueta <img> la cual no tiene cierre.
<img src=”auto.jpg”>103.Guardar pagina.104.Actualizar pagina, ver cambios.
105.Ayuda: ver página 31 del manual.106.Inserte dos saltos de línea.107.Alinear el titulo de la imagen: La imagen tendrá el titulo de: Auto
en venta:a. Alineado arriba: Inserte: <img src=”auto.jpg” align=top> Auto en ventab. Alineado en el medio: inserte:
<img src=”auto.jpg” align=middle> Auto en ventac. Alineado a bajo: Inserte:
<img src=”auto.jpg” align=botton> Auto en venta.108.Guardar pagina.109.Actualizar pagina, ver cambios.110.Ayuda: ver página 33 en el manual.111.Inserte dos saltos de línea.112.Imagen como enlace a otra pagina: La imagen auto.jpg será un
enlace a la pagina prueba.html. La estructura para mostrar la imagen se encierra con el enlace hacia la página dada, debe quedar axial:<a href=”prueba.html”><img src=”auto.jpg””></a>113.Guardar pagina.114.Actualizar pagina, ver cambios.115.Ayuda: ver página 33 del manual.116. Cargar imagen a partir de otra imagen: ver manual pagina 34,
usar las imágenes auto y portátil117.Cargar imagen a partir de un texto: ver manual pagina 34, usar
imagen auto y el texto: Ir al auto.118.Alineación de imagen: use la imagen auto y alinéala a la derecha,
ver pagina 37 del manual.119.Insertar dos saltos de líneas.120.Cambiar fondo a la página.
1. Color: teniendo abierto la pagina index1.html en el bloc de notas, en la etiqueta body le asignamos el color de fondo rojo con el atributo: bgcolor, debe quedar axial:
<body bgcolor=”red”> o <body bgcolor=”#ff0000”>a. guardar pagina ver cambios.b. Actualizar pagina, ver cambios.c. Ayuda: pagina 46 y 47 del manual.d. Cambiar el color del texto y de los enlaces: El color del fondo
debe quedar rojo. Color del texto debe ser negro, Color del enlace debe ser verde, Color del enlace visitado debe ser amarillo, Color de enlace activo debe ser café. axial debe quedar:<body bgcolor=”color” text=”color” link=”color” vlink=”color” alink=”color”>
Deben buscar el color correspondiente en las tablas de las pagina 17 del manual.
e. guardar pagina.f. Actualizar pagina. Ver cambios.g. Ayuda: ver página 46 del manual.
3. Imagen: teniendo abierto la pagina prueba...html en el bloc de notas, en la etiqueta body le asignamos la imagen fondo1.jpg de fondo con el atributo background, debe quedar axial:<body background=”fondo1.jpg”>
121.Insertar dos saltos de línea.122. crear una tabla 2x2: Una tabla esta limitada por las etiquetas
<table> y </table>: Digite <table> </table> Dentro de ellas van las filas, las cuales se limitan por las etiquetas <tr> y </tr>: Digite dos filas dentro de la tabla, deben quedar axial:<table> <tr> </tr> <tr> </tr></table>
dentro de las filas van las celdas, cuales se limitan por las etiquetas <td> y </td>: Digite dos celdas dentro de cada fila, debe quedar axial:
<table> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr></table>123.Guardar pagina.123.Actualizar pagina, ver cambios.124.Ayuda: ver página 50, 51, 52 del manual.125.Dar ancho al borde de la tabla: se usa el atributo border en la
etiqueta <tabla>, dar un ancho de 2, de la siguiente forma, digite border=”2”, debe quedar axial la etiqueta<table>:<table borde=”2”>
126.Guardar pagina.127.Actualizar pagina, ver cambios.128.Ayuda: ver página 52 del manual.
125. hacer que tabla ocupe todo el ancho y alto de la ventana: se usa los atributos width y height de la etiqueta <table>, añada los atributos de la siguiente forma: : <table border=”2” width=100% height=100%> 126. Guardar pagina. 127. Actualizar pagina, ver cambios.
129.ayuda: ver pagina 55 del manual130. Dar nombre a la tabla en la pagina: Dar el nombre Imágenes a la
tabla, este debe estar entre las etiquetas <caption> y </caption>,
este debe quedar encima de la etiqueta <table>, de la siguiente forma: <caption> Imágenes</caption>
131.Guardar pagina.132.Actualizar pagina, ver cambios.133.Ayuda: ver página 52 del manual.134. Celdas de cabecera: cambie las celdas de la primera fila por
celdas de cabecera , con los nombres de auto y proyector.Ayuda: ver página 53 del manual.
135.guardar pagina.136.actualizar pagina, ver cambios.137.Insertar imágenes en las celdas: Inserte las imágenes
correspondiente del auto y del proyector en cada celda de la segunda fila.
138. Ayuda: ver página 54 del manual.139.guardar pagina.140.actualizar pagina., ver cambios.141. Uso de marcos: cerramos todas la ventanas, abrimos el bloc de
notas y le damos guardar con el nombre de “marcos.html”.La página a crear por marcos quedaras axial con 5 de ellos: como el dibujo:
142.Creamos la página usando los pasos desde el punto 3 del taller, el titulo de la página debe ser : practicando marcos. En una pagina con marcos la etiqueta <body> y </body> se reemplazan por las etiquetas : <frameset> y </frameset>.Según lo anterior el código debe quedar axial:<html><head><title> practicando marcos</title></head><frameset></frameset></html>
143. Ayuda: ver página 83 a la 92 del manual.144. Dividir la ventana en dos filas: La primera fila con el 20% y la
segunda con el resto. Leyendo el manual, siga los siguientes pasos:
1. En la etiqueta <frameset> se define el valor del atributo de las columnas: cols, axial: <frameset rows=”20%,*”>
2. Se digita debajo de este los dos frame: <frame name=”marco1”><frame>
3. Guardar pagina.4. Actualizar pagina, ver cambios.
145. Dividir la segunda fila en dos columnas: la primera columna con el 20% y la segunda con el resto.Leyendo el manual, siga los siguientes pasos:
1. Cambie la segunda fila por este par de etiquetas: <frameset> y </frameset>.
2. Inserte entre las dos las etiquetas, estas dos en este orden : <frame>
<frame>3. En la etiqueta <fremeset> que acaba de insertar, defina el valor
de las columnas: <frameset cols=”20%,*”>4. guardar pagina.5. Actualizar pagina.,ver cambios.
146.Dividir la primera columna en dos filas: la primera fila con el 75% y la segunda fila con el resto.Leyendo el manual, siga estos pasos:1. cambie la primera etiqueta <frame> generado en el punto 145
por este par de etiquetas: <frameset> y </frameset>.2. Entre esas dos etiquetas inserte estas dos etiquetas en el
mismo orden:<frame name=”marco2”><frame name=”marco3”>
3. En el <frameset> que acaba de insertar, defina el valor de las filas: <frameset rows=”75%,*”>
4. Guardar pagina.5. Actualizar pagina, ver cambios.
147.Dividir la segunda columna en dos filas: la primera fila con 85% y la segunda fila con el resto.Leyendo el manual, siga los pasos:1. Cambie la segunda etiqueta <frame> del punto 145, por este
par de etiquetas: <frameset> y </frameset>2. Entre este par de etiquetas, inserte estas dos etiquetas, en el
mismo orden: <frame name=”marco4”><frame name=”marco5”>
3. Guardar pagina.4. Actualizar pagina, ver cambios.
148.Cerrar pagina.149.Crear una carpeta home y crear en ellas las siguientes paginas:
a. Nombre de pagina:Integrantes.html: debe aparecer los nombres de las personas que integran el grupo. Darle los atributos necesarios( fondo, tipo letra, centrado, etc).
b. Nombre de pagina: Multimedia1.html: debe aparecer el titulo Elementos de la multimedia, debe aparecer la lista en viñetas: texto, imágenes, sonido, video, animación. Darle los atributos y la apariencia necesarios( fondo, tipo de letra, centrado, etc).
c. Nombre de pagina: multimedia2.html: debe aparecer el titulo : Elementos de la multimedia. Dos tablas 2x3, en la primera tabla deben aparecer los títulos: texto, imagen, sonido y debajo de estas las imágenes de cada uno de ellos. En la segunda tabla, debe aparecer los títulos de video, animación, interactividad, y debajo de cada uno de ellos la imagen correspondiente.
d. Nombre de pagina: Introduccin.html: debe contener un titulo Curso de Multimedia, un párrafo corto sobre el concepto de la multimedia. Darle los atributos necesarios ( fondo, tipo de letra, centrados, etc).
e. Nombre pagina: publicidad.html: Debe tener una tabla 1x2 que cubra la pagina, en la primera celda, debe aparecer la imagen de un auto y en la otra celda una leyenda sobre los autos. Darle los atributos necesarios( fondos, tipo de letra, centrado, etc).
f. Nombre de pagina: menuenlaces.html: Debe contener 4 enlaces a las paginas: introducción.html, integrantes.html,
multimedia1.html, multimedia2.html. Además debe contener una lista titulada Ejemplos de Flash, la lista debe se ordenada de enlaces a las aplicaciones de flash creadas cuyas extensiones son *.swf, para esto debe copiarlas a la carpeta Sitio donde tiene las paginas. Los enlaces deben cargar las paginas en el frame de nombre marco4. Los enlaces deben quedar centrados en la página. Darle los atributos necesarios( fondos, tipo de letra, centrados,etc).g. Nombre de pagina: busqueda.html: debe contener tabla 2x1,
en la primera fila debe ser un encabezado llamado Búsqueda, en la segunda fila debe aparecer la imagen de portátil que es un enlace a la pagina: www.google.com.co. Darle los atributos necesarios( fondos, tipo de letras, centrados, etc).
h. Nombre de pagina: estado.html: debe contener una tabla 1x2, en la primera celda debe contener el siguiente texto: Grupo ( numero) Derechos Reservados 2008. En la segunda celda debe aparecer una imagen del proyector.
150.Abrir en el bloc de notas la pagina marcos.html: a. Asigne pagina publicidad.html al marco1: Debe quedar axial:
<frame name=”marco1” src=”publicidad.html”>b. Guardar pagina.c. Actualizar pagina., ver cambios.
d. Asignar pagina menuenlaces.html al marco2: Debe quedar axial:
<frame name=”marco2” src=”menuenlaces.html”>e. Guardar pagina.f. Actualizar pagina, ver cambios.g. Asignar pagina busqueda.html al marco3: Debe quedar así:
<frame name=”marco3” src=”busqueda.html”>h. Guardar pagina.i. Actualizar pagina, ver cambios.j. Asignar pagina introducción al marco4: Debe quedar así:
<frame name=”marco4” src=”introducción.html”>k. Guardar pagina.l. Actualizar pagina, ver cambios.m. Asignar pagina estado.html al marco5: Debe quedar así:
<frame name=”marco5” src=”estado.html”>n. guardar pagina.o. Actualizar pagina, ver cambios.p. Hacer pruebas de la página marcos, con los enlaces y la
búsqueda.