ejercicios html básicos

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
<script language=”javascript” src=”guionFotos.js”></script>
Archivo js
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.