EJERCICIOS DE HTML

1.- Confeccione una pgina con las marcas mnimas que debe tener y en el cuerpo de la misma disponga su nombre y apellido.

2.- Confeccionar una pgina que muestre los nombres de 5 lenguajes de programacin separados por un guin.

3.- Confeccionar una pgina HTML que muestre distintos lenguajes de programacin, mostrarlos uno por lnea.

4.- Confeccione una pgina que muestre dos prrafos. En el primero agregar varios saltos de lnea.

5.- Confeccionar una pgina que contenga un ttulo de primer nivel y luego dos ttulos de nivel . Definir un prrafo para cada ttulo de segundo nivel.

6.- Crear una pgina que contenga cuatro prrafos. En el primero enfatizar con el mximo nivel y en los otros prrafos emplear el elemento de enfatizar de menor fuerza.

7.- Confeccionar una pgina principal que tenga un hipervnculo a otra pgina secundaria. La pgina secundaria debe tener tambin un hipervnculo a la pgina principal.

pagina1.html pagina2.html

8.- Confeccionar una pgina que contenga un enlace al sitio de google.

9.- Implementar una pgina que muestre una imagen llamada foto1.jpg que se encuentra en el mismo servidor y en la misma carpeta donde se localiza el archivo HTML.

10.- Confeccionar una pgina que muestre dos imagenes (foto1.jpg y foto2.jpg) como hipervnculos. Al ser presionados llamar a otra pgina. Las imgenes se encuentran en una carpeta llamada imagenes que depende directamente de la raiz del sitio.

Pagina1.html

Pagina2.html Pagina3.html

11.- Confeccionar una pgina que contenga dos hipervnculos a los peridicos El Pais y El Periodico. Hacer que el hipervnculo del peridico El Periodico sea abierto en otra ventana del navegador.

Pagina1.html

12.- Confeccionar una pgina que contenga un hipervnculo configurando la propiedad href de tal manera que abra un cliente de correo.

Pagina1.html

13.- :Confeccionar una pgina que contenga cuatro anclas, luego definir cuatro hipervnculos que se enlacen con dichas anclas.

14.- Confeccionar una pgina que contenga cuatro anclas y una segunda pgina que defina cuatro hipervnculos que se enlacen con dichas anclas.

Pagina1.html

Pagina2.html

15.- Mostrar el orden de llegada de tres corredores utilizando el elemento HTML ol. Luego agregar otros items a la lista.

16.- Confeccionar una pgina HTML que contenga una lista no ordenada con cuatro lenguajes de programacin muy populares. Agregar un ttulo de segundo nivel indicando el concepto de esta lista.

17.- Confeccionar una lista de definicin indicando en los conceptos distintos lenguajes de programacin. En la definicin hacer una breve introduccin del mismo.

18.- Implementar una pgina que enumere una serie de paises en una lista ordenada y luego en cada pais disponer una lista de hipervnculos de peridicos de dicho pais.

19.- Confeccionar una tabla que muestre los nombre de pases en una columna y su cantidad de habitantes en otra.

20.- Confeccionar una tabla que muestre los nombre de paises en una columna y su cantidad de habitantes en otra. Disponer un ttulo a cada columna mediante celdas creadas mediante el elemento th.

21.- Confeccionar una tabla que muestre los nombre de paises en una columna y su cantidad de habitantes en otra. Disponer un ttulo de los datos que representa la tabla.

22.- Confeccionar una tabla que muestre la facturacin de los ltimos tres meses de los artculos:'Discos Duros', 'CPU' y 'Monitores'. La primer columna debe mostrar solo el texto 'recursos' y en la primer fila el texto 'Facturacin de los ltimos tres meses'.

23.- Confeccionar dos pginas que inicialicen el elemento title. Disponer un hipervnculo en cada pgina.

24.- :Confeccionar una pgina HTML. Definir el elemento title y los metadatos para indicar autor, palabras claves para buscadores, descripcin de la pgina y copyright.

25.- Confeccionar una pgina que contenga una tabla. Almacenar en un comentario datos referentes al contenido de la tabla que solo interesen al desarrollador.

26.- Mostrar las siguiente ecuacin: 10+x*y agregar aqu el smbolo menor 12*z

27.- Confeccionar un formulario que contenga un cuadro de texto donde el visitante debe ingresar su nombre y un botn de tipo submit para el envo de los datos ingresados al servidor (tener en cuenta que la pgina que procesa los datos del formulario en el servidor se encuentra en la raiz del sitio y se llama: registrardatos.php

28.- Confeccionar un formulario que solicite el ingreso del nombre de un usuario y su clave. Mostrar asteriscos donde se ingresa la clave. Disponer dos botones, uno para el envo de datos al servidor y otro para borrar el contenido de todos los controles (editores de texto) que contiene el formulario.

29.- Confeccionar un formulario para que un visitante pueda ingresar su nombre, su mail y un comentario del sitio, empleando para este ltimo dato a ingresar un elemento de tipo textarea.

30.- Implementar un formulario que solicite el ingreso del nombre de una persona y 4 elementos de tipo checkbox para que seleccione los lenguajes de programacin que conoce.

31.- Solicitar el ingreso del nombre de una persona y el mximo nivel en estudios alcanzado (sin estudios, estudios primarios, estudios secundarios o estudios universitarios) Ulitilzar controles de tipo radio para la seleccin de estudios realizados.

32.- Confeccionar un formulario que solicite cargar el nombre de una persona y el pais donde vive, este ltimo elemento mediante un control de tipo select permitir seleccionar el pais. (Agregue la propiedad size al elemento select con el valor 5)

33.- Confeccionar un cuadro de seleccin mltiple para elegir colores de una lista. Permitir la seleccin de varios colores.

34.- Confeccionar una pgina que muestre un control de tipo select. Agrupar las opciones en dos grupos, en uno las frutas y en otro las verduras. Utilizar el elemento optgroup para el agrupamiento.

35.- Confeccionar un formulario que solicite el ingreso del nombre de una persona y dos elementos button para subir el dato al servisor o borrar el dato cargado.

36.- Confeccionaremos una pgina que muestre el teclado de una calculadora. Utilizar el elemento input inicializando la propiedad type con el valor "button".

37.- Confeccionar un formulario que solicite el ingreso del nombre de una persona y permita seleccionar y enviar su foto.

38.- Confeccionar un formulario que solicite ingresar el nombre de una persona y en un campo oculto almacene una hora cualquiera.

39.- Confeccionar un formulario que solicite los datos personales de una persona y los datos del lugar donde trabaja, cada grupo de datos disponerlos en un fieldset.

40.- Confeccione un formulario que solicite el ingreso del nombre de una persona. Luego que seleccione si es mayor de edad o no (por defecto inicializar en si),seguidamente el telfono (cargar por defecto 453-) y por ltimo en un textarea solicitar que ingrese comentarios.

41.- Implementar un formulario que contenga una matriz de tres filas y tres columnas de elementos de tipo text. Hacer que el foco sea por columna, es decir primero tomar foco el text de la primer fila y primer columna, luego el text de la segunda fila y primer columna etc. (si no definimos la propiedad tabindex la carga de datos se efecta por fila)

42.- Confeccionar un formulario que muestre tres controles de tipo radio. Mostrar los textos Nios, Adolescentes y Mayores. Deshabilitar el elemento radio que corresponde a Nios.

43.- Confeccionar un formulario que solicite el nombre de usuario y su clave, solo permitir ingresar en el nombres de usuarios hasta 20 caracteres y la claves hasta 12.

44.- Confeccionar un formulario que aparezca el nombre de una empresa en un text y el texto de un contrato en un textarea, ambos de solo lectura.

45.- Confeccionar una pgina que permita hacer un reclamo de reparaciones y se enven los datos a una direccin de correo. Se debe poder ingresar el nombre, direccin y un comentario del problema.

46.- Confeccionar un formulario que solicite el ingreso del nombre, mail y comentarios de un visitante al sitio. Asociar cada control con un elemento label.

47.- Confeccionar una pgina que contenga dos frames verticales, el primero que ocupe el 20% y el segundo el 80% de la ventana.

48.- :Confeccionar una ventana que contenga dos frames verticales. Disponer dos hipervnculos en el frame de la izquierda que al ser presionados actualicen el archivo a mostrar por el frame de la derecha.

49.- Confeccionar una pgina que contenga tres frames verticales, el de la izquierda y el de la derecha deben tener 200 pxeles de ancho, el siguiente ocupa el resto.

50.- Confeccionar una ventana con dos frame verticales. No permitir redimensionarlos y no mostrar el borde de los frames. Hacer que el frame de la derecha siempre muestre la barra de desplazamiento.

51.- Confeccionar una pgina que la primer columna tenga un frame y la segunda columna tenga dos frames. Utilizar frameset anidados para resolver el problema.

52.- Confeccionar una pgina que incorpore un iframe de 400 pxeles de ancho por 200 pxeles de alto.

CONCEPTOS BSICOS DE HOJAS DE ESTILO

58.- Confeccionar una pgina que contenga un ttulo de nivel 1 de color azul (#0000ff) y un prrafo de color gris oscuro (#888888) y fondo amarillo claro (#ffffdd).

59.- Confeccionar una pgina que contenga un ttulo de nivel 2 (h2) centrado y luego bloques donde muestre un nombre de una persona subrayado y un prrafo con un color de fondo y de las letras. Indentar la primer linea de cada prrafo.

60.- Listar una serie de nombres y un bloque de comentarios para cada nombre. Indentar la primer linea de cada prrafo. Hacer que algunas palabras del prrafo aparezcan resaltadas en otro color. Disponer todos los comentarios con un color gris de fondo.

61.- Confeccionar una pgina que contenga un ttulo de nivel 2 con fuente Arial, un prrafo con fuente de tipo Times New Roman de 14 pxeles en negrita y una serie de prrafos agrupados en un div con tamao de fuente de 12 pxeles de tipo Verdana:

ELEMENTOS Y PROPIEDADES DE HTML QUE NO SE DEBEN USAR.

Nombraremos los elementos y propiedades de HTML que no se deben usar, ya que sus objetivos actualmente se resuelven utilizando CSS (Hojas de estilo), de todos modos se las encontrar en muchas pginas antiguas y otras no tanto:

Elementos

u Muestra un texto subrayado. s Muestra un texto tachado. strike Muestra un texto tachado. center Muestra un texto centrado. menu Crea una lista dir Define una lista multicolumna layer (solo Netscape) Agrupa un bloque de elementos HTML (utilizar div) blink Resalta un texto

marquee Muestra un texto desplazandose de izquierda a derecha o viceversa. Tiene muchas propiedades para definir fuente, color, velocidad de avance etc.

font Permite definir mediante una serie de propiedades el tipo de fuente, tamao y color b Muestra el texto en negrita. i Muestra el texto en itlica. big Muestra el texto con fuente grande. small Muestra el texto con fuente pequea. hr Muestra una lnea horizontal. basefont Establece el tamao base de fuente. isindex Crea un control de entrada de una lnea.

Propiedades

text Fija el color de texto para la pgina si se aplica al elemento body. bgcolor Fija el color del fondo de texto si se aplica al elemento body. background Fija una imagen de fondo a la pgina. Propiedad del elemento body. link Fija el color de los enlaces no visitados. Se aplica al body. alink Fija el color del enlace activo. Se aplica al body. vlink Fija el color de los enlaces ya visitados. Se aplica al body. align Se lo utiliza para alinear texto a izquierda, derecha, centro etc.

ELEMENTOS Y PROPIEDADES DE HTML QUE NO SE DEBEN USAR.