Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Ejercicios1 HTML

    Cargado por

    Roberto Rios
    27 vistas5 páginas

    Derechos de autor

    © Attribution Non-Commercial (BY-NC)

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    27 vistas5 páginas

    Ejercicios1 HTML

    Cargado por

    Roberto Rios

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 5

    EJERCICIOS DE EDICIN WEB ESCRIBIENDO DIRECTAMENTE EL CDIGO: GUIN DE ACTIVIDADES

    (3-febrero-2005)

    1. Crea una carpeta con el nombre ejercicios_web en el directorio Mis Documentos. 2. Con el bloc de notas crea el documento mostrado en la transparencia. Un vez escrito gurdalo en el directorio creado con el nombre uno.html (al guardar el bloc de notas muestra como tipo de archivo txt; cmbialo por todos los archivos antes de proceder a guardarlo). LOS NOMBRES DE LOS ARCHIVOS NO DEBEN CONTENER TILDES, EES, NI ESPACIOS EN BLANCO Y SE DEBEN USAR LETRAS MINSCULAS). 3. Abre el Explorador de Windows (el explorador de archivos y directorios, no el navegador) y abre el directorio creado anteriormente. Pincha dos veces sobre el archivo creado. Deber abrirse el navegador configurado como navegador por defecto (pueden existir varios navegadores en el ordenador) y mostrar la pgina web creada. 4. Cierra el navegador y abre el navegador directamente. Una vez abierto utiliza Abrir/Archivo para abrir la pgina creada. 5. Si existen ms navegadores abre la pgina con los dems (Los resultados pueden variar bastante de un navegador a otro en el caso de pginas con muchos elementos complicados). 6. En el CD del curso en: Unidad_CD:\html\paginas\resumen.htm existe un resumen de las etiquetas ms importantes y de sus correspondientes atributos. Pinchando en el enlace de la derecha puedes acceder a ejemplos concretos de cada caso. En http://www.w3schools.com/html/ tambin puedes encontrar informacin sobre las etiquetas, atributos, etc. 7. Modifica el documento uno.html para que muestre un color de fondo rojo (<body bgcolor = red>). Guarda el documento modificado y observa el resultado con el navegador. Se dice que bgcolor es un atributo de la etiqueta body. 8. Modifica el color del fondo utilizando la descripcin hexadecimal del color (por ejemplo con bgcolor = #FFAA77) 9. Aade encabezados con los seis tamaos posibles ( <h1> Encabezado 1 </h1> , ., <h6>Encabezado 6</h6>). Comprueba los resultados.

    10. Centra los encabezados utilizando el atributo align = center ( <h1 align = center > .</h1>) 11. Alinea los restantes encabezados a derecha e izquierda. 12. Aade algn texto debajo de los seis encabezados: <p> texto </p>. Comprueba los resultados. Dentro de la etiqueta de prrafo (<p></p>) aade la etiqueta <font color="#00FFFF"> texto..</font> y comprueba los resultados. 13. Crea un segundo documento con el nombre dos.htm (en la misma carpeta que antes) y escribe el siguiente encabezado (encabezado tipo 1 y centrado): Ejemplos de Listas. A continuacin escribe el siguiente texto: Una lista: 1. Primer elemento 2. Segundo elemento Para conseguir el cdigo correspondiente a la lista se debe utilizar: <p>Una lista:</p> <ol> <li>Primer elemento </li> <li>Segundo elemento </li> </ol> 14. Una vez comprobado el funcionamiento del archivo anterior, modifcalo para que muestre: Una lista: 1. Primer elemento 1. Subnivel 2. Subnivel 2. Segundo elemento El cdigo correspondiente a esta parte es: <p>Una lista:</p> <ol> <li>Primer elemento</li> <ol> <li>subnivel 2</li> <li>subinvel 2</li> </ol> <li>Segundo elemento </li> </ol>

    15. Aade al documento anterior una lista no numerada (la etiqueta a usar es: <ul></ul>, y los item se inican con <li>.

    Para separar una lnea (o crear espacio en blanco entre dos partes del documento) se puede usar <p> </p> que sirve para definir un prrafo o <br> que produce un salto de lnea pero no rompe el prrafo. Para insertar una lnea horizontal se usa la etiqueta <hr> (con el atributo width="50%" conseguimos que la longitud de la lnea horizontal sea el 50% del ancho total de la pantalla. 16. Aade al documento anterior una lista con cinco niveles primarios (numerados). Cada uno de los niveles primarios debe contener dos elementos de nivel secundario (vietas; no numeradas) y alguno de los elementos de nivel secundario debe contener una lista numerada.

    17. Creacin de vnculos (enlaces, hipervnculos, links, etc) Para convertir un texto en un enlace utiliza la etiqueta <a href=http://www.></a>. Ejemplo: <a href="http://www.google.com">Enlace al buscador Google</a> . El cdigo anterior convierte el texto Enlace al buscador Google en un vnculo que apunta a la pgina del buscador. Crea una nueva pgina con el nombre enlaces.htm y disea una lista con cinco elementos que sean enlaces a direcciones externas. Comprueba su funcionamiento. 18. Aade a uno de los enlaces anteriores el atributo siguiente: target="_blank", es decir escribe, por ejemplo, <a href=www.google.com target="_blank">Enlace al buscador Google</a> y comprueba la diferencia. 19. Crea un nuevo archivo con el nombre tablas.html. Haz que muestre como encabezado la palabra TABLA: Utiliza el siguiente cdigo para definir una tabla de 2 filas y 2 columnas (Observa los atributos utilizados en la etiqueta table) <table width="50%" border="4" align="center" cellpadding="3" cellspacing="2"> <tr> <td>Celda 1</td> <td>Celda2</td> </tr> <tr> <td>Celda3</td> <td>Celda4</td> </tr> </table> Crea en la parte inferior de la pgina una nueva tabla de 3 filas y 2 columnas. Aade el atributo bordercolor="#FF0000" a la etiqueta table y comprueba el resultado despus de haber colocado un texto breve en cada celda.

    20. Crea un nuevo archivo con el nombre imagenes.htm (sin tilde!). Haz un dibujo de dimensiones reducidas (100 x 100 pixel) y gurdalo en el directorio de trabajo con el nombre dibujo.jpg. Con el cdigo siguiente inserta la imagen en el documento web: <p align="center"><img src="dibujo.jpg" alt="marcador imag 1" name="im_1" width="100" height="100" border="3" ></p>. Observa que la imagen se ha colocado dentro de un prrafo con alineacin centrada (<p></p>) y que la imagen se inserta con la etiqueta <im.> cuyos atributos comentaremos. Colocando la etiqueta de la imagen (<im >) dentro de una etiqueta <a href=></a> se crea un vnculo a partir de la imagen. Comprubalo de forma prctica. 21. Como ejercicio complementario disea cuatro imgenes de tamaos 100 por 100 pixel (alternativamente puedes obtener cuatro imgenes de la red y reducir su tamao con algn programa de dibujo o de tratamiento de imgenes). Las imgenes deben quedar almacenadas en el directorio de trabajo (esto no es lo normal; normalmente las imgenes se sitan en un directorio especfico, dedicado a albergar las imgenes de la pgina). En un documento nuevo crea una tabla de dos filas y dos columnas con borde cero y coloca las imgenes en las correspondientes celdas. 22. Crea dos pginas web muy simples (principal.htm y secundaria.htm) que contengan, cada una de ellas, un enlace que permita abrir la otra pgina. 23. El siguiente cdigo especifica algunas propiedades generales importantes de la pgina (observa que se trata del cdigo includo en la cabecera del documento): <head> <title>P&aacute;gina inicial</title> <style type="text/css"> <!-body,td,th { font-family: Arial, Helvetica, sans-serif; color: #99CC00; } body { background-color: #FFCCCC; } a:link { color: #0033FF; } a:visited { color: #990099; } a:hover { color: #0099CC; } a:active { color: #FFFF66;

    } --> </style> </head> <body> </body> </html> Analza el cdigo. Comentaremos los detalles durante la sesin. Siguiendo el cdigo anterior como referencia, crea una pgina (general.htm) con texto y cuatro enlaces. Los cdigos hexadecimales del color asignado se deben obtener a partir de algn programa de dibujo. Comprueba los resultados. 24. Crea una pgina que contenga una tabla de borde 3 y de dimensiones 3x2. Inserta en la celda de la primera fila y segunda columna otra tabla de dimensiones 2x2. Antes de comprobar los resultados introduce un breve texto en cada celda.

    También podría gustarte