NICOLAS ESGUERRA “EDIFICAMOS FUTURO” EJERCICIO PASO A PASO Kevin Danilo veloza castro PROFESOR JOHN CARABALLO ACOSTA
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
NICOLAS ESGUERRA“EDIFICAMOS FUTURO”
EJERCICIO PASO A PASO
Kevin Danilo veloza castro
PROFESOR JOHN CARABALLO ACOSTA
EJERCICIOS PASO A PASO:
1. ABRIR EL BLOG DE NOTAS.
2. DESPUES DE ABRIR EL BLOG, TOCA ESCRIBIR LOS CODIGOS DE LA FORMA CORRECTA. LOS CODIGOS SON LOS SIGUIENTES:
<html>
<head>
<title>inicio</title>
</head>
<bodybgcolor=”#99cc99”>
</body>
</html>
<bodybgcolor=”#99cc99”>: este código es para que la pagina inicie con el fondo verde.
<title>inicio</title>: este código es para crear el documento con el título inicio.
3. DESPUES DE HABER ESCRITO LOS CODIGOS DE FORMA CORRECTA SE LA CLIC A”ARCHIVO; GUARDAR COMO Y DESPUES DE LE DA CLIC EN “TIPO Y SE SELECCIONA LA OPCION TODOS LOS ARCHIVOS”
4. DESPUES DE HACER LO ANTERIOR, SE GUARDA CON EL NOMBRE “INICIO.HTM”
5. Y ASI SE OBTIENE LA PAGINA DESEADA.
Ejercicio 1: Crear una página básica
Como se puede ver en el pantallazo, el cuerpo de la página HTML se ha cambiado por color verde claro, que se identifica con su número hexadecimal 99CC99 en la instrucción:
<body bgcolor="#99CC99">
Ejercicio 2: Insertar texto con diferentes propiedadeso Punto 1.
En el pantallazo se puede ver que el título inicio es más grande que todos los demás textos por la etiqueta h1, se ve la regla horizontal y el texto inferior en formato de letra cursiva.
o Punto 2.
Se puede observar el uso de las listas <ul> para colocar distintos temas, para cada <ul> se le agrega <li> que es donde se ubica el texto deseado.
Ejercicio 3: Insertar un hiperenlace
Utilizando el <a href> se puede ir a otras páginas web poniendo al dirección y además se cambio el color de los hiperenlaces contenidos en el cuerpo de la página a color rojo (CC0000).
Ejercicio 4: Insertar una imageno Punto 1.
El enlace en texto que se tenía antes se cambia por una imagen que tiene un borde y tamaño definidos en el HTML.
o Punto 2.
Se realiza la adición de una imagen utilizando la etiqueta <img> y en la parte src=, se le agrega la ubicación de la imagen en la carpeta.
o Punto 3.
Se adiciona una imagen al final de la lista <ul> principal.
Ejercicio 5: Trabajar con tablas.o Punto 1.
La página se ha dividido en dos columnas sin bordes, una ocupando el 70% de la pantalla y la otra ocupando el 30% de la pantalla.
o Punto 2.
Se construye una tabla a la medida con la etiqueta <table> y se le adiciona una imagen de fondo para las filas utilizando background=”…” donde se pone la ruta de ésta.
Ejercicio 6: Crear conjunto de marcos.
Con el uso de las etiquetas frame, se pueden referenciar o adicionar varias páginas en una sola, en éste caso se adicionó el menú al frame de la parte izquierda y se referenció la página de inicio en el frame principal el de la derecha.
Ejercicio 7: Insertar objetos de formulario.
En el pantallazo se evidencia una lista de selección desplegable que contiene varios valores que se pueden escoger, esto se genera usando la etiqueta <select> y la información en todo el formulario se puede limpiar con el botón restablecer que es de tipo reset. Para enviar la información se usa el botón Enviar que es de tipo submit.
Ejercicio 8: Insertar sonido de fondo.
Dando uso de la etiqueta object, se pueden adicionar a una página html simple otros tipos de elementos (objetos), en este caso para cada uno de los enlaces se cambio texto por botones hechos en flash.
Ejercicio 10: Llamadas a javascript.
Empleando instrucciones javascript se modifican las propiedades de cualquier elemento, en este caso de un elemento div haciendo que aparezca y desaparezca cuando se hace click sobre la imagen de la derecha o sobre el enlace Cerrar de la capa.
Ejercicio 11: Crear hoja de estilos.
Con los estilos se puede manejar la apariencia de elementos de la página cargando solo un archivo (hoja de estilos), y simplemente se referencia en la página html usando la etiqueta <link href="…" rel="stylesheet" type="text/css">.
Related Documents
