SlideShare una empresa de Scribd logo
1 de 10
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 propiedades
o 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 imagen
o 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">.

Más contenido relacionado

La actualidad más candente

Como agregar en nuestro blog una lista de blogs de amigos
Como agregar en nuestro blog una lista de blogs de amigosComo agregar en nuestro blog una lista de blogs de amigos
Como agregar en nuestro blog una lista de blogs de amigosJose Quezada
 
Trabajo practico n°6 molina ise gelsi
Trabajo practico n°6 molina ise gelsiTrabajo practico n°6 molina ise gelsi
Trabajo practico n°6 molina ise gelsivictoriamolinasanpa
 
Comando y ejercicios para HTML
Comando y ejercicios para HTMLComando y ejercicios para HTML
Comando y ejercicios para HTMLrogeliotapia
 
Pasos Para La Conecxion De Visual Con Access Importante 12
Pasos Para La Conecxion De Visual Con Access Importante 12Pasos Para La Conecxion De Visual Con Access Importante 12
Pasos Para La Conecxion De Visual Con Access Importante 12guest035fce1
 
Utilizar etiquetasen una pagina web
Utilizar etiquetasen una pagina webUtilizar etiquetasen una pagina web
Utilizar etiquetasen una pagina webEddher Siilvhaa'
 
Trabajo practico 1 y 3
Trabajo practico 1 y 3Trabajo practico 1 y 3
Trabajo practico 1 y 3kukunem
 
Tutorial básico de blogger
Tutorial básico de bloggerTutorial básico de blogger
Tutorial básico de bloggerfcoblazquez
 
Blog pale coria blogger
Blog pale coria   bloggerBlog pale coria   blogger
Blog pale coria bloggerPedro M. G.
 
CREA WEBQUEST USANDO PHP
CREA WEBQUEST USANDO PHPCREA WEBQUEST USANDO PHP
CREA WEBQUEST USANDO PHPguestd75b85
 
Practicas diseño de páginas web
Practicas diseño de páginas webPracticas diseño de páginas web
Practicas diseño de páginas webjesus
 

La actualidad más candente (18)

Como agregar en nuestro blog una lista de blogs de amigos
Como agregar en nuestro blog una lista de blogs de amigosComo agregar en nuestro blog una lista de blogs de amigos
Como agregar en nuestro blog una lista de blogs de amigos
 
Trabajo practico n°6 molina ise gelsi
Trabajo practico n°6 molina ise gelsiTrabajo practico n°6 molina ise gelsi
Trabajo practico n°6 molina ise gelsi
 
Html 2
Html 2Html 2
Html 2
 
Comando y ejercicios para HTML
Comando y ejercicios para HTMLComando y ejercicios para HTML
Comando y ejercicios para HTML
 
Pasos Para La Conecxion De Visual Con Access Importante 12
Pasos Para La Conecxion De Visual Con Access Importante 12Pasos Para La Conecxion De Visual Con Access Importante 12
Pasos Para La Conecxion De Visual Con Access Importante 12
 
Cómo hacer un blog
Cómo hacer un blogCómo hacer un blog
Cómo hacer un blog
 
Manual de blogger
Manual de bloggerManual de blogger
Manual de blogger
 
Manual de blogger
Manual de bloggerManual de blogger
Manual de blogger
 
Utilizar etiquetasen una pagina web
Utilizar etiquetasen una pagina webUtilizar etiquetasen una pagina web
Utilizar etiquetasen una pagina web
 
Trabajo practico 1 y 3
Trabajo practico 1 y 3Trabajo practico 1 y 3
Trabajo practico 1 y 3
 
Como hacer un blog (1)
Como hacer un blog (1)Como hacer un blog (1)
Como hacer un blog (1)
 
Como Crear un blog
Como Crear un blogComo Crear un blog
Como Crear un blog
 
Tutorial básico de blogger
Tutorial básico de bloggerTutorial básico de blogger
Tutorial básico de blogger
 
Blog pale coria blogger
Blog pale coria   bloggerBlog pale coria   blogger
Blog pale coria blogger
 
CREA WEBQUEST USANDO PHP
CREA WEBQUEST USANDO PHPCREA WEBQUEST USANDO PHP
CREA WEBQUEST USANDO PHP
 
Como hacer una página web fácil
Como hacer una página web fácilComo hacer una página web fácil
Como hacer una página web fácil
 
Practicas diseño de páginas web
Practicas diseño de páginas webPracticas diseño de páginas web
Practicas diseño de páginas web
 
Como crear un blog
Como crear un blogComo crear un blog
Como crear un blog
 

Destacado

Location recce
Location recceLocation recce
Location reccestephwise
 
สถานที่ท่องเที่ยว เกาะสมุย
สถานที่ท่องเที่ยว เกาะสมุยสถานที่ท่องเที่ยว เกาะสมุย
สถานที่ท่องเที่ยว เกาะสมุย5422010638
 
Haszard jessie mobile presentation
Haszard jessie mobile presentationHaszard jessie mobile presentation
Haszard jessie mobile presentationjhaszard
 
Potok - działka nr 642
Potok - działka nr 642Potok - działka nr 642
Potok - działka nr 642coirzeszow
 
What Makes An Employee Highly Engaged
What Makes An Employee Highly EngagedWhat Makes An Employee Highly Engaged
What Makes An Employee Highly EngagedFirm Next
 
Jose manuel padilla_ruiz_elaboraciónmateriales_mf_1443
Jose manuel padilla_ruiz_elaboraciónmateriales_mf_1443Jose manuel padilla_ruiz_elaboraciónmateriales_mf_1443
Jose manuel padilla_ruiz_elaboraciónmateriales_mf_1443José Manuel Padilla Ruiz
 
Noida commercial real estate overview
Noida commercial real estate overviewNoida commercial real estate overview
Noida commercial real estate overviewcreindia dotcom
 
REDES SUBTERRÁNEAS PARA DISTRIBUCIÓN EN BAJA TENSIÓN
REDES SUBTERRÁNEAS PARA DISTRIBUCIÓN EN BAJA TENSIÓNREDES SUBTERRÁNEAS PARA DISTRIBUCIÓN EN BAJA TENSIÓN
REDES SUBTERRÁNEAS PARA DISTRIBUCIÓN EN BAJA TENSIÓNPLC Madrid
 
Testimonial%20voor%20Jacobien
Testimonial%20voor%20JacobienTestimonial%20voor%20Jacobien
Testimonial%20voor%20JacobienJacobien Geuze
 
Uk economic growth story
Uk economic growth storyUk economic growth story
Uk economic growth storyXueshengnan Gao
 
Temperature quotient tst
Temperature quotient   tstTemperature quotient   tst
Temperature quotient tstRalph Sherman
 
อัลบั้มรูป
อัลบั้มรูปอัลบั้มรูป
อัลบั้มรูปnantika148
 
Coverall Cleaning
Coverall CleaningCoverall Cleaning
Coverall Cleaninggropperhwa
 
Arie ferry ferdian kueh pukis
Arie ferry ferdian kueh pukisArie ferry ferdian kueh pukis
Arie ferry ferdian kueh pukisArieFerryF
 

Destacado (18)

Location recce
Location recceLocation recce
Location recce
 
สถานที่ท่องเที่ยว เกาะสมุย
สถานที่ท่องเที่ยว เกาะสมุยสถานที่ท่องเที่ยว เกาะสมุย
สถานที่ท่องเที่ยว เกาะสมุย
 
Haszard jessie mobile presentation
Haszard jessie mobile presentationHaszard jessie mobile presentation
Haszard jessie mobile presentation
 
Potok - działka nr 642
Potok - działka nr 642Potok - działka nr 642
Potok - działka nr 642
 
What Makes An Employee Highly Engaged
What Makes An Employee Highly EngagedWhat Makes An Employee Highly Engaged
What Makes An Employee Highly Engaged
 
Jose manuel padilla_ruiz_elaboraciónmateriales_mf_1443
Jose manuel padilla_ruiz_elaboraciónmateriales_mf_1443Jose manuel padilla_ruiz_elaboraciónmateriales_mf_1443
Jose manuel padilla_ruiz_elaboraciónmateriales_mf_1443
 
Noida commercial real estate overview
Noida commercial real estate overviewNoida commercial real estate overview
Noida commercial real estate overview
 
REDES SUBTERRÁNEAS PARA DISTRIBUCIÓN EN BAJA TENSIÓN
REDES SUBTERRÁNEAS PARA DISTRIBUCIÓN EN BAJA TENSIÓNREDES SUBTERRÁNEAS PARA DISTRIBUCIÓN EN BAJA TENSIÓN
REDES SUBTERRÁNEAS PARA DISTRIBUCIÓN EN BAJA TENSIÓN
 
Testimonial%20voor%20Jacobien
Testimonial%20voor%20JacobienTestimonial%20voor%20Jacobien
Testimonial%20voor%20Jacobien
 
Uk economic growth story
Uk economic growth storyUk economic growth story
Uk economic growth story
 
Temperature quotient tst
Temperature quotient   tstTemperature quotient   tst
Temperature quotient tst
 
อัลบั้มรูป
อัลบั้มรูปอัลบั้มรูป
อัลบั้มรูป
 
Coverall Cleaning
Coverall CleaningCoverall Cleaning
Coverall Cleaning
 
CV_Gehui Chen
CV_Gehui ChenCV_Gehui Chen
CV_Gehui Chen
 
2 Kingdom
2 Kingdom2 Kingdom
2 Kingdom
 
Arie ferry ferdian kueh pukis
Arie ferry ferdian kueh pukisArie ferry ferdian kueh pukis
Arie ferry ferdian kueh pukis
 
CALIF 1A
CALIF 1ACALIF 1A
CALIF 1A
 
Immunity Script
Immunity ScriptImmunity Script
Immunity Script
 

Similar a Kevin veloza ne final de año 901 html

Similar a Kevin veloza ne final de año 901 html (20)

Ejercicios
EjerciciosEjercicios
Ejercicios
 
Tutorial ejercicio 1
Tutorial ejercicio 1Tutorial ejercicio 1
Tutorial ejercicio 1
 
html
htmlhtml
html
 
Expo html alexandra
Expo html alexandraExpo html alexandra
Expo html alexandra
 
Expo html alexandra
Expo html alexandraExpo html alexandra
Expo html alexandra
 
Expo html alexandra
Expo html alexandraExpo html alexandra
Expo html alexandra
 
Html
HtmlHtml
Html
 
Expo html alexandra
Expo html alexandraExpo html alexandra
Expo html alexandra
 
Expo html alexandra
Expo html alexandraExpo html alexandra
Expo html alexandra
 
Crea una pagina web
Crea una  pagina webCrea una  pagina web
Crea una pagina web
 
Expo html alexandra
Expo html alexandraExpo html alexandra
Expo html alexandra
 
Expo html alexa
Expo html alexaExpo html alexa
Expo html alexa
 
8 ejercicio 8
8 ejercicio 88 ejercicio 8
8 ejercicio 8
 
Como hacer una página web
Como hacer una página webComo hacer una página web
Como hacer una página web
 
Tuto pag web_gimp
Tuto pag web_gimpTuto pag web_gimp
Tuto pag web_gimp
 
Tuto pag web_gimp
Tuto pag web_gimpTuto pag web_gimp
Tuto pag web_gimp
 
Ejercicio html primer año
Ejercicio html primer añoEjercicio html primer año
Ejercicio html primer año
 
Como programar en htmil 5
Como programar en htmil 5Como programar en htmil 5
Como programar en htmil 5
 
Alexander y diego paginas de html
Alexander y diego paginas de htmlAlexander y diego paginas de html
Alexander y diego paginas de html
 
IntroduccióN Al Desarrollo Visual De Jsp Con J Developer 10g
IntroduccióN Al Desarrollo Visual De Jsp Con J Developer 10gIntroduccióN Al Desarrollo Visual De Jsp Con J Developer 10g
IntroduccióN Al Desarrollo Visual De Jsp Con J Developer 10g
 

Kevin veloza ne final de año 901 html

  • 1. NICOLAS ESGUERRA “EDIFICAMOS FUTURO” EJERCICIO PASO A PASO Kevin Danilo veloza castro PROFESOR JOHN CARABALLO ACOSTA
  • 2. 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. 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.
  • 4. 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 propiedades o 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.
  • 5. 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 imagen o Punto 1.
  • 6. 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.
  • 7. 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.
  • 8. 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.
  • 9. 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.
  • 10. 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">.