EJERCICIOS HTML BSICOS

Ejercicio 1
Crear un documento HTML desde cero

Crea la estructura de carpetas del sitio (carpeta raz, carpeta de imgenes y de scripts).
Dentro de la carpeta de scripts crea un documento de texto vaco 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 maquetacin (sern 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 aadir otras propiedades en las reglas como fondo o bordes.

3. Crea los contenedores <div> en la pgina HTML mediante la paleta insertar

4. Asigna las reglas h1 y h2 a los ttulos 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, aadiendo 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 diseo 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 lnea) y un fondo de
color.

Prueba en el navegador.

12. Crea desde Dw un archivo vaco que se llamar empresas.html (con la hoja de estilo
vinculada).

13. Selecciona en la pgina index.html el texto de la barra lateral, pgina 1 e inserta una
etiqueta de tipo Hipervnculo. Debers enlazarla con el archivo empresas.html y como destino
una pestaa nueva (_blank).

Prueba que funcionan en el navegador.

14. Modifica la clase <a> para que los hipervnculos 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>. Cul es mejor? Se puede prescindir de las etiquetas <p>?

Prueba en el navegador.

17. Crea una clase para los destacados del inicio de prrafo y aplcala desde el panel de
propiedades HTML.

18. Para que el texto que se incluye en el contenido tenga el mismo aspecto se puede aadir a
la regla de estilo contenido los atributos de texto (tipo, cuerpo, color, alineacin, line-height).
Ejercicio 2
Insertar imgenes y enlaces

Se trata de hacer la primera pgina enlazada con index.html y que comparta hoja de estilos
con ella.
Ser la pgina de empresas que contiene los logos de las empresas ms importantes, una
imagen de fondo y un botn (que es una imagen) para volver al index.html
Partiendo de una maquetacin de columna lateral debers crear una pgina como la de la
izquierda

1. Crea la barra lateral. Las imgenes de los logos estn en un div lateral y es una lista
desordenada con los elementos <li> asociados a una clase que tiene separacin entre sus
elementos, borde inferior e izquierdo y sin decoracin (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 tamao adecuado). Tambin habr que
modificar la clase para la barra lateral ya que es ms ancho que el de la pgina index.html

3. Botn volver. La imagen del botn para volver debe estar situada sobre el contenedor de
contenido. Para conseguirlo haremos una regla CSS de tipo ID en la que slo es necesario
indicar que la posicin ser absolute (Posicin / Position / Absolute). Al aplicar el ID a la
imagen vers que aparece un smbolor 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 opcin (la de la

derecha) debers cambiar la posicin del ttulo.

En los siguientes ejercicios iremos enlazando a cada logotipo su pgina correspondiente

mediante la opcin Vnculo 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 maquetacin
(contenedor) e insertaremos la imagen de fondo

2. Sobre ella se irn 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 pestaa del
navegador. El rea superior abrir la direccin de McDonell Douglas en Wikipedia (busca la
URL en internet y pega su direccin 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 vnculo para que al hacer clic sobre la
imagen retorne a la pgina del mapa de imagen.
Ejercicio 4
Insertar vdeos

Lo ms adecuado es subir el vdeo YouTube (para no sobrecargar nuestro hosting) y en

nuestra pgina empotrar el visor YouTube mediante una etiqueta de tipo <iframe>

Para este ejercicio aadiremos un vdeo en la pgina de empresas sobre aviones (previamente
debes localizar el vdeo que quieras mostrar).

1. Busca el vdeo o sube el vdeo en YouTube.

2. Pulsa en en botn compartir que aparecer debajo del visor en la web de YouTube.

3. Pulsa en en botn insertar que aparecer debajo del anterior. Se desplegar un

cuadro de texto con las etiquetas HTML adecuadas y sus parmetros. Copia ese texto.

4. En Dw slo tendrs que pegar el texto HTML en la ventana de cdigo dentro del
contenedor adecuado. En el caso del ejercicio utiliza el contenedor de contenido de la
pgina de empresas.

Gracias a los parmetros de insercin de Youtube puedes hacer infinidad de cosas con el
reproductor. A continuacin te detallamos algunos ejemplos de parmetros: qu hacen, cundo puedes
usarlos y qu valores puedes darles.

autoplay=0/1: si le das valor 1, el reproductor iniciar el vdeo tan pronto como se cargue
dentro de la pgina, sin tener que pulsar Play.
autohide=0/1/2: define si la barra de progreso y controles se ven durante la reproduccin, o si
se oculta uno o los dos elementos pasados unos segundos
rel=0/1: muestra o no los vdeos relacionados durante la reproduccin del vdeo insertado.
modestbranding: el valor 1 oculta el logotipo de Youtube en el reproductor. Es vlido para las
versiones modernas o con cdigo tipo iframe.
version: si aparece y el valor es 3, muestra el reproductor de Youtube moderno, que acepta
otros parmetros como modestbranding.
start=x: El valor x puede ser cualquier nmero positivo y define, en segundos, el punto de vdeo
a partir del cual se iniciar la reproduccin. Ideal para insertar un vdeo desde un punto
determinado, y similar a como vimos en este tutorial.
border: si el valor es "1", el vdeo se muestra con un marco cuyos colores tambin puedes
personalizar con los parmetros "color1" y "color2", cuyos valores has de introducir con valor
hexadecimal (ejemplo: color2=2FA4D1)
loop=0/1: si su valor es 1, el vdeo se reproduce una y otra vez.
cc_load_policy: si aparece con valor 1, el vdeo mostrar subttulos siempre que su autor los
haya incluido.
showinfo=0/1: si su valor es 0, al insertar el vdeo no aparecer la informacin en la parte
superior, como el ttulo y autor del vdeo.

Estos son slo algunos de los parmetros que puedes usar al insertar un vdeo de Youtube. Si quieres
conocer el resto, te recomendamos visitar la pgina dedicada dentro de Youtube en espaol o bien
la pgina en ingls, que incluye algunos ms recientes.
Ejercicio 5
La cabecera HTML
La cabecera suele contener informacin sobre el documento que no se muestra directamente
al usuario como, por ejemplo, el ttulo 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 pgina web o un objeto (Flash o cualquier otra aplicacin como un
Google Calendar) en nuestra pgina web HTML.

Sus parmetros bsicos son:

width Ancho en pxeles si no se especifica unidad

height Alto en pxeles si no se especifica unidad

scrolling Barras de desplazamiento

frameborder Rectngulo 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

Rpidamente se podr comprobar que existen acciones que quedan fuera del alcance de
HTML cuyo fin inicial fue la presentacin de contenidos (etiquetas para mostrar textos,
imgenes y elementos de formularios...).

JavaScript es un lenguaje que incorporan los navegadores ms conocidos para poder ejecutar
pequeos scripts (como programas) en el ordenador del cliente que est visitando la pgina
web.

Lanzar ventanas emergentes es ms adecuado realizarlo mediante una funcin de JavaScript.

<a href="http://parabol_abc.html" target="_blank"

onClick="window.open(this.href, this.target, 'fullscreen=1,location=no' );
return false;">Parbola abc</a>

Este cdigo lanza una nueva ventana emergente a pantalla completa al pulsar sobre un
enlace.

Otros ejemplos ms sencillos:

window.open("http://www.w3schools.com")

window.open('','','width=200,height=100')

Los parmetros 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 lnea de cdigo

<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 imgenes llamado foto

Las imgenes estn 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 pgina web, dejando sus datos o
registrndose hay que usar tecnologas del lado del servidor que son programas que se
ejecutan en el servidor web donde se aloja nuestra web. El lenguaje ms extendido para
realizar esto es PHP.

Por lo tanto es necesario hospedar la web en un servidor pblico 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 informacin. 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>Informacin 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>Valoracin de la web</legend>
Valoracin 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="Enva los
datos"><br>
</form>

El archivo php necesario para este formulario sera 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 verificacin 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".
"Valoracin 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");
?>
Presentacin del ejercicio HTML

El ejercicio realizado por el alumno deber contener los siguientes elementos HTML

Maquetacin usando contenedores DIV

Maquetacin usando clases

Utilizacin de fondos

Apartados

Imgenes / Vdeo

Enlaces (hipervnculos). Se debe poder navegar entre las pginas.

Anclas (etiquetas) dentro de una pgina. Para navegar dentro de una pgina extensa.

Mapa de imagen

Favicon y ttulo en las pginas

IFRAME para otra pgina o aplicacin (swf o Google).

Uso de JavaScript y formulario.

Uso de PHP y formulario.