Autor Tema: Ejemplo hipervínculos, links o anclas enlaces HTML. Ejercicio CU00717B tutorial  (Leído 4298 veces)

Dan_SB

  • Avanzado
  • ****
  • Mensajes: 273
  • *<DanielsCK>*
    • Ver Perfil
Buenas noches!

Vengo a hacer entrega del ejercicio 17° del curso "html desde 0", su enunciado es el siguiente:

Crea un documento HTML que conste de las siguientes partes. Un encabezado H1 donde indicaremos “Animales de Africa” como texto a mostrar.

Un encabezado H2 donde indicaremos “Leones” como texto. Dentro de este apartado incluiremos varios párrafos que hablarán sobre los leones y un enlace externo (link) de tipo texto cuyo texto será: “Pulsa aquí para saber más sobre leones” y que llevará con un target blank a la siguiente dirección web de wikipedia: http://es.wikipedia.org/wiki/Panthera_leo

Un encabezado H2 donde indicaremos “Tigres” como texto. Dentro de este apartado incluiremos varios párrafos que hablarán sobre los tigres y una imagen que debe mostrar como tooltip “Pulsa aquí para saber más sobre tigres”. Al pulsar sobre la imagen se llevará al usuario a un target blank dirigido a la dirección web http://es.wikipedia.org/wiki/Panthera_tigris

En la parte inferior incluiremos tres links internos (para lo que tendremos que haber definido las anclas correspondientes) que indicarán: “Ir al inicio – Ir a leones – Ir a tigres (Según el link que pulse el usuario, se le llevará al inicio, al encabezado del apartado de leones o al encabezado del apartado de tigres).


Mi código!
Código: [Seleccionar]
<html>
<head>
<meta charset="utf-8">
<a id = "Inicio"><title>Animales de Africa</title></a>
</head>
<body style = "background-color: gray">
<h1 style = "text-align: center; color: red;">Animales de Africa</h2>
<a id = "Leones"><h2 style = "text-align: left; color: red;">Leones</h2></a>
El león, el llamado rey de la selva, el más famosos de los carnívoros, su cara con melena
es una de los símbolos animales más reconocidos en la cultura humana, así y todo un gran
desconocido, ya que son muchas las curiosidades sobre este gran depredador que no se cuentan
en las historias de Disney. Su nombre científico es Panthera leo, es uno de los cuatro grandes
felinos de su género. Después del tigre, es el felino más grande de la naturaleza, con machos
que llegan a pesar unos 250 kilos. Actualmente sólo viven en reservas del África sub sahariana,
y en el Parque Gir en India. Están en declive poblacional por culpa de la pérdida de su hábitat
y conflictos con los humanos, tan sólo en los últimos veinte años su población se ha reducido en
un 50 porciento.
<a href = "http://es.wikipedia.org/wiki/Panthera_leo" target = "_blank">Pulsa aqui para saber mas sobre leones.</a>
<a id = "Tigres"><h2 style = "text-align: left; color: red;">Tigres</h2></a>
Mucho se ha dicho que el rey es el león, quizá es su elegante melena la que de esa impresión, sin embargo, si de fuerza y habilidad hablamos sería el tigre quien llevaría ese titulo. .
<a href = "http://es.wikipedia.org/wiki/Panthera_tigris" target = "_blank">Pulsa aqui para saber mas sobre tigres.</a>
<h3 style = "text-align: center; color: red;"><a href = #Inicio >Ir a inicio - </a> <a href = #Leones >Ir a Leones - </a> <a href = #Tigres>Ir a Tigres</a></h3>
</body>
</html>

Así se visualiza todo en mi navegador:

http://i.imgur.com/3FjX6F1.png

Espero sus correcciones y comentarios!
Saludos
« Última modificación: 05 de Mayo 2015, 11:25 por Alex Rodríguez »
"Luchar por tus sueños y cumplirlos... eso es vivir.."

javi in the sky

  • Avanzado
  • ****
  • Mensajes: 393
    • Ver Perfil
Re:Ejercicio (CU00717B), Hipervínculos, links o enlaces HTML.
« Respuesta #1 en: 03 de Mayo 2015, 21:42 »
Hola Dan

Cosas a corregir:

Esta línea <a id = "Inicio"><title>Animales de Africa</title></a> no debe ir dentro de <head> ... </head> . Entre estas dos etiquetas solo deben ir ciertas declaraciones, no el contenido propiamente dicho de la página web.

Mal:

<h1 style = "text-align: center; color: red;">Animales de Africa</h2>

Si abres h1 tienes que cerrar h1, no puedes cerrar h2.

El texto "El león, el llamado rey de ..." no está entre etiquetas, es preferible siempre tener el texto entre etiquetas <p> en este ejercicio <p>El león... por ciento </p>

Mal escrito: <a href = #Inicio > debe ser <a href ="#Inicio">, mismo fallo en otros puntos

Otra cosa: en mi navegador no se ven los tooltips al posicionarme sobre los links.

Tienes que cuidar la escritura, aquí no ocurre como con el código compilado que si tienes un error te avisa el compilador, aquí es posible que tengas errores y no los veas aunque pueden generar problemas de ahí que debas intentar no cometerlos.

Saludos :)

Dan_SB

  • Avanzado
  • ****
  • Mensajes: 273
  • *<DanielsCK>*
    • Ver Perfil
Re:Ejercicio (CU00717B), Hipervínculos, links o enlaces HTML.
« Respuesta #2 en: 04 de Mayo 2015, 03:12 »
Ah, gracias javi!!
"Luchar por tus sueños y cumplirlos... eso es vivir.."

Dan_SB

  • Avanzado
  • ****
  • Mensajes: 273
  • *<DanielsCK>*
    • Ver Perfil
Re:Ejercicio (CU00717B), Hipervínculos, links o enlaces HTML.
« Respuesta #3 en: 04 de Mayo 2015, 04:03 »
Con los arreglos!!!

Código: [Seleccionar]
<html>
<head>
<meta charset="utf-8">
<a id = "Inicio"><title>Animales de Africa</title></a>
</head>
<body style = "background-color: gray">
<h1 style = "text-align: center; color: red;">Animales de Africa</h1>
<a id = "Leones"><h2 style = "text-align: left; color: red;">Leones</h2></a>
<p>El león, el llamado rey de la selva, el más famosos de los carnívoros, su cara con melena
es una de los símbolos animales más reconocidos en la cultura humana, así y todo un gran
desconocido, ya que son muchas las curiosidades sobre este gran depredador que no se cuentan
en las historias de Disney. Su nombre científico es Panthera leo, es uno de los cuatro grandes
felinos de su género. Después del tigre, es el felino más grande de la naturaleza, con machos
que llegan a pesar unos 250 kilos. Actualmente sólo viven en reservas del África sub sahariana,
y en el Parque Gir en India. Están en declive poblacional por culpa de la pérdida de su hábitat
y conflictos con los humanos, tan sólo en los últimos veinte años su población se ha reducido en
un 50 porciento.</p>
<a href = "http://es.wikipedia.org/wiki/Panthera_leo" target = "_blank" title = "Para saber mas sobre leones, presione aqui!">Pulsa aqui para saber mas sobre leones.</a>
<a id = "Tigres"><h2 style = "text-align: left; color: red;">Tigres</h2></a>
Mucho se ha dicho que el rey es el león, quizá es su elegante melena la que de esa impresión, sin embargo, si de fuerza y habilidad hablamos sería el tigre quien llevaría ese titulo. .
<a href = "http://es.wikipedia.org/wiki/Panthera_tigris" target = "_blank" title = "Para saber mas sobre tigres, presione aqui!">Pulsa aqui para saber mas sobre tigres.</a>
<h3 style = "text-align: center; color: red;"><a href = "#Inicio" >Ir a inicio - </a> <a href = "#Leones" >Ir a Leones - </a> <a href = "#Tigres">Ir a Tigres</a></h3>
</body>
</html>
"Luchar por tus sueños y cumplirlos... eso es vivir.."

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
Re:Ejercicio (CU00717B), Hipervínculos, links o enlaces HTML.
« Respuesta #4 en: 05 de Mayo 2015, 11:24 »
Hola Dan esto está mal:

<head>
<meta charset="utf-8">
<a id = "Inicio"><title>Animales de Africa</title></a>
</head>

No debes poner código sino lo previsto entre las etiquetas head

Saludos

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".