EJERCICIOS HTML BÁSICOS Ejercicio 1 Crear un documento HTML desde cero Crea la estructura de carpetas del sitio (carpeta raíz, carpeta de imágenes y de scripts). Dentro de la carpeta de scripts crea un documento de texto vacío que se llamará estilo.css. En Dw crea un documento html en blanco, enlaza el archivo css y comienza el proceso. 1. Pega el texto. 2. Desde la paleta de estilos CSS crea las reglas de maquetación (serán de tipo Clase): container, barralateral, contenido container: 90% de ancho, centrado, color de fondo barralateral: float left, ancho 18%, relleno interior contenido: margen de 20% por la izquierda y ancho de 80% Puedes añadir otras propiedades en las reglas como fondo o bordes. 3. Crea los contenedores <div> en la página HTML mediante la paleta insertar 4. Asigna las reglas h1 y h2 a los títulos principal y secundario del contenido desde la barra inferior de propiedades HTML (desplegable formato). 5. Modifica las reglas h1 y h2 desde la ventana Estilos CSS, añadiendo una nueva regla de tipo etiqueta (fondo, tipo letra, color, line-height de 150%, padding left...).
Prueba en un navegador. 6. Crea los apartados <ul> del texto 7. Crea una regla de clase para aplicar a la lista con el simbolo, listaaviones. 8. Aplica la relga de clase creada en la lista ul (no a cada elemento <li>) y modifica el margen izquierdo y espacio entre elementos (line-height de 150%). Prueba en el navegador. 9. Crea una clase para aplicar a los elementos del menú lateral, menulateral. Llevará los atributos de texto. 10. Selecciona el texto en la vista diseño y aplica la clase desde la paleta de propiedades HTML. 11. Modifica la clase para que tenga un margen de 5px por todos los lados, borde inferior e izquierdo fino (y padding inferior e izquierdo para que no se pegue a la línea) y un fondo de color. Prueba en el navegador. 12. Crea desde Dw un archivo vacío que se llamará empresas.html (con la hoja de estilo vinculada). 13. Selecciona en la página index.html el texto de la barra lateral, página 1 e inserta una etiqueta de tipo Hipervínculo. Deberás enlazarla con el archivo empresas.html y como destino una pestaña nueva (_blank). Prueba que funcionan en el navegador. 14. Modifica la clase <a> para que los hipervínculos no tengan el aspecto de un link normal (quita el subrayado y el color azul). 15. Crea la regla a:hover con un color de fondo, color de texto y display block. Prueba el efecto en el navegador. 16. Actualmente la clase menulateral la tienes aplicada a una etiqueta <p>, prueba el efecto si se aplicara a la etiqueta <a>. Cuál es mejor? Se puede prescindir de las etiquetas <p>? Prueba en el navegador. 17. Crea una clase para los destacados del inicio de párrafo y aplícala desde el panel de propiedades HTML. 18. Para que el texto que se incluye en el contenido tenga el mismo aspecto se puede añadir a la regla de estilo contenido los atributos de texto (tipo, cuerpo, color, alineación, line-height).
Ejercicio 2 Insertar imágenes y enlaces Se trata de hacer la primera página enlazada con index.html y que comparta hoja de estilos con ella. Será la página de empresas que contiene los logos de las empresas más importantes, una imagen de fondo y un botón (que es una imagen) para volver al index.html Partiendo de una maquetación de columna lateral deberás crear una página como la de la izquierda 1. Crea la barra lateral. Las imágenes de los logos están en un div lateral y es una lista desordenada con los elementos <li> asociados a una clase que tiene separación entre sus elementos, borde inferior e izquierdo y sin decoración (topos). 2. Imagen de fondo. Habrá que modificar la clase container e incluir una imagen de fondo adecuada (que se vea el texto sobre ella y de tamaño adecuado). También habrá que modificar la clase para la barra lateral ya que es más ancho que el de la página index.html 3. Botón volver. La imagen del botón para volver debe estar situada sobre el contenedor de contenido. Para conseguirlo haremos una regla CSS de tipo ID en la que sólo es necesario indicar que la posición será absolute (Posición / Position / Absolute). Al aplicar el ID a la imagen verás que aparece un símbolor similar a un sostenido que sirve para arrastrar la imagen sobre los elementos, como se ve en la imagen. 4. Cambios en el orden de los contenedores. Para hacer la segunda opción (la de la derecha) deberás cambiar la posición del título. En los siguientes ejercicios iremos enlazando a cada logotipo su página correspondiente mediante la opción Vínculo que aparece en la paleta de propiedades HTML de cada imagen.
Ejercicio 3 Crear un mapa de imagen Se trata de hacer un mapa de imagen para la empresa McDonnell Douglas. 1. Haremos un documento nuevo (macdonnel.html) con una única caja de maquetación (contenedor) e insertaremos la imagen de fondo 2. Sobre ella se irán dibujando las áreas del mapa de imagen correspondiente (desde la paleta de propiedades). 3. Cada área (DC-9, DC-10, MD-80, MD-90) debe abrir una imagen en una nueva pestaña del navegador. El área superior abrirá la dirección de McDonell Douglas en Wikipedia (busca la URL en internet y pega su dirección para el mapa de imagen). La zona Volver se asignará a empresas.html 4. Si se quiere que al hacer click sobre la imagen se regrese al archivo macdonnel.html, se debe crear un archivo html para cada imagen y un vínculo para que al hacer clic sobre la imagen retorne a la página del mapa de imagen.
Ejercicio 4 Insertar vídeos Lo más adecuado es subir el vídeo YouTube (para no sobrecargar nuestro hosting) y en nuestra página empotrar el visor YouTube mediante una etiqueta de tipo <iframe> Para este ejercicio añadiremos un vídeo en la página de empresas sobre aviones (previamente debes localizar el vídeo que quieras mostrar). 1. Busca el vídeo o sube el vídeo en YouTube. 2. Pulsa en en botón compartir que aparecerá debajo del visor en la web de YouTube. 3. Pulsa en en botón insertar que aparecerá debajo del anterior. Se desplegará un cuadro de texto con las etiquetas HTML adecuadas y sus parámetros. Copia ese texto. 4. En Dw sólo tendrás que pegar el texto HTML en la ventana de código dentro del contenedor adecuado. En el caso del ejercicio utiliza el contenedor de contenido de la página de empresas. Gracias a los parámetros de inserción de Youtube puedes hacer infinidad de cosas con el reproductor. A continuación te detallamos algunos ejemplos de parámetros: qué hacen, cuándo puedes usarlos y qué valores puedes darles. autoplay=0/1: si le das valor 1, el reproductor iniciará el vídeo tan pronto como se cargue dentro de la página, sin tener que pulsar Play. autohide=0/1/2: define si la barra de progreso y controles se ven durante la reproducción, o si se oculta uno o los dos elementos pasados unos segundos rel=0/1: muestra o no los vídeos relacionados durante la reproducción del vídeo insertado. modestbranding: el valor 1 oculta el logotipo de Youtube en el reproductor. Es válido para las versiones modernas o con código tipo iframe. version: si aparece y el valor es 3, muestra el reproductor de Youtube moderno, que acepta otros parámetros como modestbranding. start=x: El valor x puede ser cualquier número positivo y define, en segundos, el punto de vídeo a partir del cual se iniciará la reproducción. Ideal para insertar un vídeo desde un punto determinado, y similar a como vimos en este tutorial. border: si el valor es "1", el vídeo se muestra con un marco cuyos colores también puedes personalizar con los parámetros "color1" y "color2", cuyos valores has de introducir con valor hexadecimal (ejemplo: color2=2fa4d1) loop=0/1: si su valor es 1, el vídeo se reproduce una y otra vez. cc_load_policy: si aparece con valor 1, el vídeo mostrará subtítulos siempre que su autor los haya incluido. showinfo=0/1: si su valor es 0, al insertar el vídeo no aparecerá la información en la parte superior, como el título y autor del vídeo. Estos son sólo algunos de los parámetros que puedes usar al insertar un vídeo de Youtube. Si quieres conocer el resto, te recomendamos visitar la página dedicada dentro de Youtube en español o bien la página en inglés, que incluye algunos más recientes.
Ejercicio 5 La cabecera HTML La cabecera suele contener información sobre el documento que no se muestra directamente al usuario como, por ejemplo, el título de la ventana del navegador. <title>web aviones</title> <meta content="text/html; charset=iso-8859-1" http-equiv="content-type"> <link rel="stylesheet" href="apuntes.css" type="text/css"> <link rel="shortcut icon" href="favicon.ico"> <script language="javascript" src="guionfotos.js"> </script>
Ejercicio 6 Etiqueta IFRAME Permite incrustar una página web o un objeto (Flash o cualquier otra aplicación como un Google Calendar) en nuestra página web HTML. Sus parámetros básicos son: width Ancho en píxeles si no se especifica unidad height Alto en píxeles si no se especifica unidad scrolling Barras de desplazamiento frameborder Rectángulo envolvente <iframe src="http://www.wikipedia.com/" name="subhtml" width="400" height="500" scrolling="auto" frameborder="1"> <p>texto alternativo para navegadores que no aceptan iframes.</p> </iframe>
Ejercicio 7 Ventanas emergentes con JavaScript Rápidamente se podrá comprobar que existen acciones que quedan fuera del alcance de HTML cuyo fin inicial fue la presentación de contenidos (etiquetas para mostrar textos, imágenes y elementos de formularios...). JavaScript es un lenguaje que incorporan los navegadores más conocidos para poder ejecutar pequeños scripts (como programas) en el ordenador del cliente que está visitando la página web. Lanzar ventanas emergentes es más adecuado realizarlo mediante una función de JavaScript. <a href="http://parabol_abc.html" target="_blank" onclick="window.open(this.href, this.target, 'fullscreen=1,location=no' ); return false;">paràbola abc</a> Este código lanza una nueva ventana emergente a pantalla completa al pulsar sobre un enlace. Otros ejemplos más sencillos: window.open("http://www.w3schools.com") window.open('','','width=200,height=100') Los parámetros son: window.open(url,nombre,especificaciones,replace)
Ejercicio 8 Visor de fotos con JavaScript Primero hay que enlazar nuestro archivo html con el archivo js usando una línea de código Archivo js <script language= javascript src= guionfotos.js ></script> var verimagen = new Array("images/150-Aerobat.jpg", "images/172.jpg", "images/180.jpg", "images/190.jpg", "images/208 Caravan.jpg", "images/337.jpg", "images/340.jpg", "images/402.jpg", "images/421c.jpg", "images/a-37 Dragonfly.jpg", "images/citation 525A CJ2.jpg", "images/citation X.jpg"); var imagenactual = -1; function anterior() { if (imagenactual > 0) { imagenactual-- ; document.marco.foto.src=verimagen[imagenactual]; } } function posterior() { if (imagenactual < verimagen.length-1) { imagenactual++; document.marco.foto.src=verimagen[imagenactual]; } } Para este archivo el formulario se llamará marco y una imagen que será el objeto que visualizará las imágenes llamado foto Las imágenes están guardadas en un directorio llamado images y hay que copiar su nombre en el array verimagen.
Ejercicio 9 Formularios con PHP Si se quiere que los usuarios puedan interactuar con la página web, dejando sus datos o registrándose hay que usar tecnologías del lado del servidor que son programas que se ejecutan en el servidor web donde se aloja nuestra web. El lenguaje más extendido para realizar esto es PHP. Por lo tanto es necesario hospedar la web en un servidor público para realizar este ejercicio. Primero haremos un archivo html que contiene el formulario con las preguntas o datos que queremos que el usuario responda. Este archivo html contiene una llamada al archivo php que procesa la información. En este caso genera un archivo de texto en el directorio usuarios de nuestro sitio web (hay que crear la carpeta). <h1 align="center">formulario</h1> <form method="post" action="procesa.php" name="datos"> <fieldset><legend>información personal</legend> Nombre... <input size="20" name="nombre"><br> Apellidos... <input size="20" name="apellidos"><br> Grupo... <input maxlength="4" size="4" name="grupo"><br> </fieldset> <fieldset><legend>valoración de la web</legend> Valoración de la web:<br> <label><input type="radio" name="valora" value="regular" />Regular</label><br /> <label><input type="radio" name="valora" value="buena" />Buena</label><br /> <label><input type="radio" name="valora" value="excelente" />Excelente</label><br /> <br> <textarea name="coment" cols="50" rows="5">escribe un mensaje para el webmaster! </textarea><br> <fieldset><br> <input type="submit" value="envía los datos"><br> </form> El archivo php necesario para este formulario sería el del listado siguiente. Los campos nombre, apellidos, grupo, coment y valora son los nombres de los campos de formulario. La etiqueta <form> contiene la llamada al archivo php mediante el action, en este caso el archivo se llama procesa.php Para el ejercicio se puede decorar el formulario con alguna imagen y color. Si se quiere usar otro tipo de campos de formulario como listas desplegables o casillas de verificación se puede consultar ya que son muy sencillos de implementar.
<?php $nombre=$_request['nombre']; $apellidos=$_request['apellidos']; $grupo=$_request['grupo']; $comentario=$_request['coment']; $valora=$_request['valora']; $arxiu="usuarios/usuario_".$apellidos."_".$nombre.".txt"; $texto="datos del usuario y su comentario\n". "Nombre... ".$nombre."\n". "Apellidos... ".$apellidos."\n". "Grupo... ".$grupo."\n". "Valoración de la web... ".$valora."\n". "Comentario... ".$comentario; $fp=fopen($arxiu,"w+"); if ($fp) { print("el fitxer s'ha generat amb éxit.\n"); fwrite($fp, $texto); } else { print("error\n"); } fclose($fp);?> print("<br><br>per a guardar l'arxiu: <a href=".$texto_arxiu." >Polsa amb botó dret del rató i guarda el enllaç com...</a><br>\n");
Presentación del ejercicio HTML El ejercicio realizado por el alumno deberá contener los siguientes elementos HTML Maquetación usando contenedores DIV Maquetación usando clases Utilización de fondos Apartados Imágenes / Vídeo Enlaces (hipervínculos). Se debe poder navegar entre las páginas. Anclas (etiquetas) dentro de una página. Para navegar dentro de una página extensa. Mapa de imagen Favicon y título en las páginas IFRAME para otra página o aplicación (swf o Google). Uso de JavaScript y formulario. Uso de PHP y formulario.