Este documento presenta 9 prácticas sobre el desarrollo de páginas web con HTML. La primera práctica cubre la estructura básica de un documento HTML, comentarios y caracteres especiales. Las prácticas siguientes enseñan sobre líneas horizontales, tablas, imágenes de fondo, listas, iconos, enlaces en imágenes, videos y marcos. El objetivo es que los estudiantes aprendan diferentes elementos y técnicas de HTML a través de ejercicios prácticos.
0 calificaciones0% encontró este documento útil (0 votos)
159 vistas13 páginas
Este documento presenta 9 prácticas sobre el desarrollo de páginas web con HTML. La primera práctica cubre la estructura básica de un documento HTML, comentarios y caracteres especiales. Las prácticas siguientes enseñan sobre líneas horizontales, tablas, imágenes de fondo, listas, iconos, enlaces en imágenes, videos y marcos. El objetivo es que los estudiantes aprendan diferentes elementos y técnicas de HTML a través de ejercicios prácticos.
Este documento presenta 9 prácticas sobre el desarrollo de páginas web con HTML. La primera práctica cubre la estructura básica de un documento HTML, comentarios y caracteres especiales. Las prácticas siguientes enseñan sobre líneas horizontales, tablas, imágenes de fondo, listas, iconos, enlaces en imágenes, videos y marcos. El objetivo es que los estudiantes aprendan diferentes elementos y técnicas de HTML a través de ejercicios prácticos.
Este documento presenta 9 prácticas sobre el desarrollo de páginas web con HTML. La primera práctica cubre la estructura básica de un documento HTML, comentarios y caracteres especiales. Las prácticas siguientes enseñan sobre líneas horizontales, tablas, imágenes de fondo, listas, iconos, enlaces en imágenes, videos y marcos. El objetivo es que los estudiantes aprendan diferentes elementos y técnicas de HTML a través de ejercicios prácticos.
Descargue como PDF, TXT o lea en línea desde Scribd
Descargar como pdf o txt
Está en la página 1/ 13
Taller Practico HTML
PRÁCTICA 1: ACENTOS, CARACTERES ESPECIALES Y COMENTARIOS
1. La cabecera del documento junto con la etiqueta de apertura sería:
<html>
<head> <title>Mi primera página en html</title> </head>
2. El cuerpo del documento quedaría como el siguiente:
<body> las etiquetas que hemos aprendido hasta ahora son las que forman la estructura básica de un documento html: <html>, <head>, <title> y <body>. también hemos aprendido a comentar nuestras páginas con las etiquetas <!-- y -->. </body>
3. Por último, incluiremos la etiqueta de finalización de un documento HTML:
</html>
4. Guarda el ejercicio con el nombre practica1.html .
PRÁCTICA 2: LÍNEAS
Crearemos una página para practicar con líneas horizontales. Esta herramienta, junto con todas sus variedades, es muy útil para dar un aspecto más profesional a nuestras páginas. Procure que el ejercicio quede lo más parecido a la imagen que mostramos abajo.
1. La cabecera del documento junto con la etiqueta de apertura sería:
<html> <head> <title>Ejemplos de líneas horizontales</title> </head>
2. El cuerpo del documento quedaría como el siguiente:
<body> <p>Línea estándar:</p> <hr> <p>Línea de grosor 5px, que ocupa el 50% de la ventana:</p> <hr size="5" width="50%"> <p>Línea de grosor 25px y 50 px de ancho:</p> <hr size="25" width="50"> <p>Línea de grosor 10px, que ocupa el 75% de la ventana,color azul y alineada a la izquierda:</p> <hr style="width: 75%; height: 10px; background-color: rgb(0, 0, 255); margin- left: 0pt;"> <p>Línea de grosor 50px, que ocupa el 60% de la ventana, color rojo , con borde 10px verde y alineada a la derecha:</p> <hr style="border-width: 10px; width: 60%; height: 50px; color: rgb(0, 255, 0); background-color: rgb(255, 0, 0); margin-right: 0pt;"> </body> </html>
3. Guardar como practica2.html
PRÁCTICA 3: UNA TABLA COMPLEJA
1) La cabecera del documento junto con la etiqueta de apertura sería:
<html> <head> <title>una tabla compleja</title> </head> 2) La tabla que vamos a generar contiene siete celdas con una distribución poco homogénea el color del texto no es del mismo color. el tamaño de la fuente es diferente, así como la alineación. con el objeto de trabajar con la mayoría de los parámetros que hemos visto a lo largo del tema, cambiaremos, además, el color de fondo de un par de celdas. El cuerpo del documento es el siguiente: <body> <table style="text-align: left; width: 100%; margin-left: auto; margin-right: auto;" border="3" cellpadding="2" cellspacing="2"> <caption><span style="font-weight: bold;">TITULO DE LA TABLA</span><br> </caption><tbody> <tr align="center"> <th colspan="3" rowspan="1" style="vertical-align: top; background-color: rgb(153, 255, 153);"><font size="+2"><span style="font-weight: bold;">CELDA 1</span></font><br> </th> </tr> <tr> <td colspan="1" rowspan="2" style="vertical-align: middle; text-align: left; background-color: rgb(102, 255, 255);"><font size="+2"><span style="font-weight: bold;">CELDA 2</span></font></td> <td style="vertical-align: top; text-align: center; color: red;"><font size="+2"><span style="font-weight: bold;">CELDA 3</span></font></td> <td style="vertical-align: top; text-align: center;"><font size="+2"><span style="font-weight: bold;">CELDA 4</span></font></td> </tr> <tr> <td style="vertical-align: top; text-align: center; color: red;"><font size="+2"><span style="font-weight: bold;">CELDA 5</span></font></td> <td colspan="1" rowspan="2" style="vertical-align: bottom; text-align: right; background-color: rgb(255, 153, 255);"><font size="+2"><span style="font-weight: bold;">CELDA 6</span></font></td> </tr> <tr> <td style="vertical-align: top; text-align: center;"><font size="+2"><span style="font-weight: bold;">CELDA 7</span></font></td> <td style="vertical-align: top; text-align: center; color: red;"><font size="+2"><span style="font-weight: bold;">CELDA 8</span></font></td> </tr> </tbody> </table> </body> </html> 3) Guardar como practica3.html PRÁCTICA 4 (IMAGEN DE FONDO)
Una forma de poner una imagen de fondo en la etiqueta body.
<html> <head> <title>Fondo de prueba</title> </head>
<body style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); background-image: url(file:///C:/Users/Public/Pictures/Sample%20Pictures/Penguins.jpg); background-repeat: no-repeat; background-position: center 0%;" alink="#000099" link="#000099" vlink="#990099"> <table style="text-align: left; width: 50%; background-color: rgb(255, 255, 153); margin-left: auto; margin- right: auto; height: 50%;" border="4" cellpadding="2" cellspacing="2"> <caption><br><br><br><br><br><br><br><br><br><br><br><br><br> </caption><tbody> <tr> <th colspan="2" rowspan="1" style="vertical-align: middle; background-color: white; text-align: center;">ENCABEZADO<br> </th> </tr> <tr> <td style="vertical-align: middle; text-align: center;">CELDA1<br> </td> <td style="vertical-align: middle; text-align: center;">CELDA2<br> </td> </tr> </tbody> </table> <br> <br> </body> </html> Guardar como practica4.html PRÁCTICA 5 (LISTAS) En este caso debes de averiguar cual será el código html-css para crear una lista ordenada. Crea una página que muestre el siguiente texto:
Diarios de : 1. ESPAÑA... a. El Mundo b. El País c. La Vanguardia 2. EE.UU. I. New York Times II. The Washington Post
Guardar como practica5.html
PRÁCTICA 6 (ICONO)
Como incorporar un icono a la barra de direcciones
Para hacer aparecer una imagen en la barra de
direcciones y en la pestaña del navegador web ,hay que añadir una linea de código entre las etiquetas <head> y </head
ACTIVIDAD 7( ENLACES EN IMÁGENES) En esta actividad vamos a crear una tabla de 9 filas x 3 columnas. En las filas pares insertaremos en cada celda una imagen pequeña de un tipo de flor y en las filas impares pondremos el nombre de cada flor. Una vez hecho esto crearemos un enlace en cada imagen para que al pulsar , por ejemplo , en la ROSA se nos abra una página que hable de ROSAS. Guardar como practica7.html ACTIVIDAD 8 ( VIDEOS)
En esta actividad vamos a crear una tabla de 2 filas por tres columnas y en cada celda insertaremos un vídeo con el tamaño adecuado. Podremos visualizar todos los vídeos al mismo tiempo.
Podemos enlazar directamente desde Youtube , Tu.tv , o cualquier otro copiando el código html que nos aparece a la derecha del video,donde aparece “Insertar”. ACTIVIDAD 9 ( MARCOS O FRAMES)
Con las etiquetas <frameset> y <frame> podemos dividir una página web en marcos, de tal forma que en cada marco se puede visualizar un archivo html distinto. En esta actividad crearemos tres marcos: Uno arriba (donde pondremos el título de nuestra página) , uno a la izquierda ( donde habrá un índice de enlaces ) y otro mayor a la derecha (donde se van a ir visualizando los documentos html enlazados a la izquierda). Este sitio web de ejemplo trata sobre películas y su página principal es esta:
El documento html principal lo hacemos con un editor de texto y lo llamamos Index.html :
Con el atributo “name” asignamos un nombre a cada marco para poder indicar en que marco se debe abrir cada enlace. Y con el atributo “src” indicamos que documento html se verá por defecto en cada marco. Para completar nuestro sitio web necesitamos (además del documento Index.html) los siguientes documentos html: 1)Izquierda.html
2)Derecha.html
3)Publicidad.html 4)Por cada película que aparece en el índice de la izquierda existirá un documento html que hablará de ella , por ejemplo para la película Batman crearemos el documento “Batman.html”.
en la pagina principal se verá así:( tanto el índice como la publicidad permanecen fijos , solo cambia el marco “Derecha” donde se van viendo las películas enlazadas). En el documento Izquierda.html hay que modificar los enlaces poniéndoles el atributo target=”Derecha” para que se abran los documentos html en el marco Derecha.
<a target="Derecha" href="Batman.html"><span style="font-family: Times New
Roman; font-weight: bold; text-decoration: underline;">BATMAN</span></a><br style="font-family: Times New Roman; font-weight: bold; text-decoration: underline;"><br style="font-family: Times New Roman; font-weight: bold; text-decoration: underline;">
<a target="Derecha" href="Spiderman.html"><span style="font-family: Times
New Roman; font-weight: bold; text-decoration: underline;">SPIDERMAN</span></a><br style="font-family: Times New Roman; font-weight: bold; text-decoration: underline;"> <br style="font-family: Times New Roman; font-weight: bold; text- decoration: underline;">
<a target="Derecha" href="Superman.html"><span style="font-family: Times
New Roman; font-weight: bold; text-decoration: underline;">SUPERMAN</span></a><br style="font-family: Times New Roman; font-weight: bold; text-decoration: underline;"> <br style="font-family: Times New Roman; font-weight: bold; text- decoration: underline;">
<a target="Derecha" href="Hulk.html"><span style="font-family: Times New
Roman; font-weight: bold; text-decoration: underline;">HULK</span></a><br style="font-family: Times New Roman; font-weight: bold; text-decoration: underline;"><br style="font-family: Times New Roman; font-weight: bold; text-decoration: underline;">
Times New Roman; font-weight: bold; text-decoration: underline;">4 FANTASTICOS</span></a><br style="font-family: Times New Roman; font- weight: bold; text-decoration: underline;"> <br style="font-family: Times New Roman; font-weight: bold; text- decoration: underline;">
<a target="Derecha" href="Xmen.html"><span style="font-family: Times New
En esta ocasión vamos a insertar un marco dentro de un documento html y en ese marco se visualizará otro html. La etiqueta < iframe> permite insertar un marco dentro del documento. Funciona de manera similar a la etiqueta <frame> y <frameset> pero la etiqueta <iframe> puede ser insertada entre el contenido de cualquier documento html. <iframe> es insertado en medio del texto tal como una tabla, y es mostrado como una ventana conteniendo el documento html. En el siguiente ejemplo, el iframe es insertado para mostrar otro documento, y un vínculo es definido para los navegadores que no soportan iframes. <html> <head> <title>IFRAME</title> </head> <body> <br> <center>ESTE ES UN MARCO CENTRADO</center> <br> <center> <iframe scrolling="auto" src="http://www.google.es" frameborder="1" height="200" width="400">Si ves este mensaje, significa que tu navegador no soporta esta característica o está deshabilitada. Pero puedes acceder a esta información aquí <a href="http://www.htmlquick.com/reference/tags/a.html">tag HTML a</a> </iframe> </center> <br> ESTE ESTÁ A LA IZQUIERDA <br> <iframe scrolling="auto" align="left" src="http://www.wikipedia.org" frameborder="1" height="200" width="400"> </iframe> <br> <p align="right">Y ESTE A LA DERECHA</p> <iframe scrolling="auto" align="right" src="http://www.google.es" frameborder="1" height="200" width="400"> </iframe> <br> </body> </html>
