Autor Tema: CU00717B ejercicio curso HTML desde cero crear links de texto o imagen en web (Leído 11918 veces)

SITOAPRENDIZ · « **en:** 23 de Febrero 2015, 12:51 »

Buenos días. Referente a los dos primeros ejercicios referente a los dos primeros ejercicios sobre los hipervínculos locales...."Escribe el código anterior en un editor de texto.....haz doble clic en él y prueba a jugar con el archivo haciendo zoom..... y el "Ahora crea otro archivo donde reemplaces los atributos name por id....y comprueba si el efecto es el mismo....", me sale todo correcto. Incluso al comparar las dos formas "name"(no recomendable) y el "id"(recomendable), con mi navegador Google Crhome me salen exactamente igual las imágenes en pantalla.
Saludos.

Ogramar · « **Respuesta #1 en:** 23 de Febrero 2015, 13:57 »

Hola, pega el código de ejemplo2.html para verlo

SITOAPRENDIZ · « **Respuesta #2 en:** 23 de Febrero 2015, 21:19 »

Buenas noches Ogramar, aqui te dejo el primer código(con <a name>):

Código: [Seleccionar]

<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <meta charset="utf-8">
      <title>Ejemplo del uso de marcadores - aprenderaprogramar.com</title>
</head>
   <body>
      <a name="arriba"></a>
      En esta página puedes ir al <a href="#primero">primer</a> apartado, al
      <a href="#segundo">segundo</a> o al <a href="#tercero">tercero</a>.
      <a name="primero"><h1>Primer apartado</h1></a>
      Aquí tienes el primer apartado. Al pulsar sobre el enlace, el
      navegador habrá saltado a esta parte de la página. Quizás si todo
      entra en la pantalla no logres ver el efecto pero prueba a poner más
      texto aquí o hacer zoom y conseguirás verlo.
      <a name="segundo"><h1>Segundo apartado</h1></a>
      Aquí tienes el segundo apartado. Al pulsar sobre el enlace, el
      navegador habrá saltado a esta parte de la página. Quizás si todo
      entra en la pantalla no logres ver el efecto pero prueba a poner más
      texto aquí o hacer zoom y conseguirás verlo.
      <a name="tercero"><h1>Tercer apartado</h1></a>
      Aquí tienes el tercer apartado. Al pulsar sobre el enlace, el
      navegador habrá saltado a esta parte de la página. Quizás si todo
      entra en la pantalla no logres ver el efecto pero prueba a poner más
      texto aquí o hacer zoom y conseguirás verlo.
      Volver <a href="#arriba">arriba</a>.
   </body>
</html>

Aqui, te dejo el segundo código(con <a id>):

Código: [Seleccionar]

<!DOCTYPE HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <meta charset="utf-8">
      <title>2ºEjemplo con "id" del uso de marcadores - aprenderaprogramar.com</title>
   </head>
   <body>
      <a id="arriba"></a>
      En esta página puedes ir al <a href="#primero">primer</a> apartado, al <a href="#segundo">segundo</a> o al <a href="#tercero">tercero</a>.
      <a id="primero"><h1>Primer apartado</h1></a>
      Aquí tienes el primer apartado. Al pulsar sobre el enlace, el
      navegador habrá saltado a esta parte de la página. Quizás si todo
      entra en la pantalla no logres ver el efecto pero prueba a poner más
      texto aquí o hacer zoom y conseguirás verlo.
      <a id="segundo"><h1>Segundo apartado</h1></a>
      Aquí tienes el segundo apartado. Al pulsar sobre el enlace, el
      navegador habrá saltado a esta parte de la página. Quizás si todo
      entra en la pantalla no logres ver el efecto pero prueba a poner más
      texto aquí o hacer zoom y conseguirás verlo.
      <a id="tercero"><h1>Tercer apartado</h1></a>
      Aquí tienes el tercer apartado. Al pulsar sobre el enlace, el
      navegador habrá saltado a esta parte de la página. Quizás si todo
      entra en la pantalla no logres ver el efecto pero prueba a poner más
      texto aquí o hacer zoom y conseguirás verlo.
      Volver <a href="#arriba">arriba</a>
   </body>
</html>

.
En principio, a mi me sale en los dos casos con Google Chrome exactamente el mismo resultado, sin ningún tipo de error.
Pero si encuentras algún error o discrepancia, te agradecería me lo comentaras.
Salu2

Ogramar · « **Respuesta #3 en:** 23 de Febrero 2015, 21:53 »

Lo he probado en Chrome y todo bien. Recomendarte que el texto lo metas dentro de etiquetas ... pues dejar el texto suelto no es una buena costumbre. Por otro lado, para que la página cree un scroll y así poder saltar de unas partes a otras puedes introducir entre párrafos de texto lo siguiente

Código: [Seleccionar]

	  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
	  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
	  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

Esto no es muy correcto

pero para ver simplemente el scroll sirve

Salu2

SITOAPRENDIZ · « **Respuesta #4 en:** 25 de Febrero 2015, 11:13 »

Buenos dias Ogramar. Como tu me has indicado he puesto en el codigo , los párrafos entre y la verdad es que se ve mucho más ordenado.
Pero la segunda que me comentas, de poner entre párrafos,DUDA1: ¿cuantas se ponen en cada "tira" entre párrafo y párrafo?. Yo cuento 16. El efecto de scroll se ve perfectamente, por lo tanto, DUDA2: ¿porque dices que no es del todo correcto, si hace su función? ???Código:

Código: [Seleccionar]

<!DOCTYPE HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <meta charset="utf-8">
      <title>2ºEjemplo con "id" del uso de marcadores - aprenderaprogramar.com</title>
   </head>
   <body>
      <a id="arriba"></a>
      En esta página puedes ir al <a href="#primero">primer</a> apartado, al <a href="#segundo">segundo</a> o al <a href="#tercero">tercero</a>.
      <a id="primero"><h1>Primer apartado</h1></a>
      <p>Aquí tienes el primer apartado. Al pulsar sobre el enlace, el
      navegador habrá saltado a esta parte de la página.</p><p> Quizás si todo
      entra en la pantalla no logres ver el efecto pero prueba a poner más
      texto aquí o hacer zoom y conseguirás verlo.</p>
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      <a id="segundo"><h1>Segundo apartado</h1></a>
      <p>Aquí tienes el segundo apartado. Al pulsar sobre el enlace, el
      navegador habrá saltado a esta parte de la página.</p><p> Quizás si todo
      entra en la pantalla no logres ver el efecto pero prueba a poner más
      texto aquí o hacer zoom y conseguirás verlo.</p>
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      <a id="tercero"><h1>Tercer apartado</h1></a>
      <p>Aquí tienes el tercer apartado. Al pulsar sobre el enlace, el
      navegador habrá saltado a esta parte de la página.</p><p> Quizás si todo
      entra en la pantalla no logres ver el efecto pero prueba a poner más
      texto aquí o hacer zoom y conseguirás verlo.</p>
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      Volver <a href="#arriba">arriba</a>
   </body>
</html>

Gracias.

Ogramar · « **Respuesta #5 en:** 25 de Febrero 2015, 11:21 »

Hola sito, el elemento introduce un salto de línea. El número de que se pueden poner es el que nosotros queramos, pueden ser uno, dos, diez, veinte o los que queramos. Digo que no es del todo correcto porque estamos repitiendo un elemento muchas veces y podríamos hacerlo usando CSS metiendo un elemento de cierta altura, sin necesidad de tantas repeticiones. Es como si para ponerle azúcar a un café fueras poniendo grano a grano, mejor sería hacerlo con una sola cucharada y no tienes que estar repitiendo

De todas formas no te preocupes por esto, ya irás viendo y estudiando las distintas opciones que existen. Salu2

SITOAPRENDIZ · « **Respuesta #6 en:** 25 de Febrero 2015, 11:32 »

Gracias Ogramar. Entonces:
DUDA1: Aunque con CSS se haga más directo y correcto, ¿quiere decir que este atributo este deprecated, o simplemente que es mas correcto sustituirlo por CSS?
DUDA2: Analizando con más detalle este código, ¿es indistinto el orden en que se ponga la parte de código<a id= con respecto al...[color=blue<a href=][/color]?.

Ogramar · « **Respuesta #7 en:** 25 de Febrero 2015, 11:55 »

Hola

Duda 1: no tiene que ver con deprecated ni con nada, simplemente que las cosas normalmente se deben hacer de la forma más sencilla posible, por eso coges una cucharada de azúcar en vez de los granos de azúcar uno a uno, aunque puedes hacer ambas cosas.

Duda 2: el id da igual dónde lo pongas, en general el orden de los atributos da igual. No obstante con el tiempo te acostumbrarás a usar un orden.

Salu2

SITOAPRENDIZ · « **Respuesta #8 en:** 25 de Febrero 2015, 12:46 »

Gracias por tus claras y concisas respuestas Ogramar.
Salu2

SITOAPRENDIZ · « **Respuesta #9 en:** 26 de Febrero 2015, 18:48 »

Buenas tardes Ogramar y a todos los miembros de aprender a programar.
Referente al segundo ejercicio de este módulo CU00717 DE HTML desde cero el cual dicta:
Prueba a generar un archivo al que denomines.....en el que incluyas un link como el que hemos visto...... Os dejo el código haber que os parece. A mi me sale bien, pero si hay cualquier discrepancia por la cual pueda pulir o mejorar el código, agradecería me lo dijeran. Codigo:

Código: [Seleccionar]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <meta charset="utf-8">
      <title>EJERCICIO2 INCLUIR LINK EXTERNO</title>
   </head>
   <body>
      <p>Desde esta frase tienes los links para ir al <a href="#PRIMERO">Primer apartado</a>, al <a href="#SEGUNDO">Segundo apartado</a> o al <a href="#TERCERO">Tercer apartado</a></p>
      <a id="PRIMERO"><h1>Primer apartado</h1></a>
      <p>Aqui está el Primer apartado, al cual habrás llegado clicando el último enlace anterior. Ahora haremos un scroll para  ver mejor el efecto</p>
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      <a id="SEGUNDO"><h1>Segundo apartado</h1></a>
      <p>Aqui está el segundo apartado, al cual habrás llegado con el enlace anterior. También haremos un scroll para el mismo efecto</p>
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      <a id="TERCERO"><h1>Tercer apartado</h1></a>
      <p>Aqui habrás llegado al tercer apartado, a través del link anterior</p><p>Aqui se encuentra el link externo, por el cual se hace este ejercicio con el que ya me empiezo a soltarme</p>
      <a href="https://www.aprenderaprogramar.com">acceso a aprenderaprogramar.com</a>
   </body>
</html>

Ogramar · « **Respuesta #10 en:** 26 de Febrero 2015, 22:05 »

Todo bien, ¡a seguir avanzando!

SITOAPRENDIZ · « **Respuesta #11 en:** 27 de Febrero 2015, 12:48 »

Buenos días Ogramar y miembros. Realizando el ejercicio del módulo en cuestión que dicta:

Prueba a cambiar el texto de title y a obtener otros resultados.],

el resultado que me da es correcto pero EL MENSAJE AL PASAR EL RATON SOBRE EL LINK ME SALE SIN LA ACCION DEL "META CHARSET". Y por lo tanto, me sale la vocal acentuada deformada.

DUDA1: ¿a que se debe?

DUDA2:¿hay algún atributo, etiqueta, comando, etc que te facilite no poner esta <meta charset> y que el texto siempre salga correcto, con sus "ñ" y acentos?.

Pongo aquí el código para facilitar la respuesta y por supuesto para cualquier perfección que se pueda realizar.

Salu2.

SITOAPRENDIZ · « **Respuesta #12 en:** 27 de Febrero 2015, 12:55 »

Perdón, referente al código del ejercicio mencionado de atributo "title" CU00717B se me olvidó $:-\$ .

EJERCICIO:Prueba a cambiar el texto de title y a obtener otros resultados..

Código:

Código: [Seleccionar]

<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <title>Ejemplo del uso de title - aprenderaprogramar.com</title>
   </head>
   <body>
      <a href="http://aprenderaprogramar.com" title="La mejor web de programación">Ir a aprender a programar.com</a>
   </body>
   </html>

Saludos.

Ogramar · « **Respuesta #13 en:** 28 de Febrero 2015, 19:07 »

Hola la codificación de caracteres es algo que tiene su complejidad, de hecho si continúas en la programación verás que una cosa que a priori parece "una tontería" a la larga resulta un quebradero de cabeza. El problema está en que hay múltiples lugares donde existe codificación de caracteres y entre esos lugares te puedes encontrar con conflictos. Tienes codificaciones en el sistema operativo del pc, en las aplicaciones, en los navegadores, en el código html, en los servidores, en las bases de datos... De momento trata de no pensar demasiado en esto

DUDA2:¿hay algún atributo, etiqueta, comando, etc que te facilite no poner esta <meta charset> y que el texto siempre salga correcto, con sus "ñ" y acentos?.

Respuesta: NO

Respecto al código que has puesto está ok, a seguir

Salu2

SITOAPRENDIZ · « **Respuesta #14 en:** 02 de Marzo 2015, 09:39 »

Gracias Ogramar. Sería ideal que mediante la codificación de caracteres, pudiera resolver este detalle sobre la acción de pasar el ratón que realiza <title> y que el mensaje salga con sus "ñ" y sus acentos, ya que un mensaje sin poder poner acentos o "ñ" queda muy feo.
Pero sigo tu consejo y lo dejaré estar por ahora.
Paso al siguiente ejercicio.
Salu2.

SITOAPRENDIZ · « **Respuesta #15 en:** 02 de Marzo 2015, 12:06 »

Buenos dias Ogramar, acabo de finalizar el ejercicio de este mismo módulo el cual dicta: Crea un documento HTML que conste de las siguientes partes. Un encabezado H1 donde indicaremos
“Animales de Africa” como texto a mostrar....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)., pero algo me falla y después de darle mil vueltas, no se que es.
Haber si podías despejarme esa duda. Te dejo mi código:

Código: [Seleccionar]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <meta charset=utf-8>
      <title>ANIMALES DE AFRICA</title>
   </head>
   <body>
      <a id="INICIO"><h1>Animales de Africa</h1></a>
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br><br/><br/><br/><br/><br/>
      <a id="LEONES"><h2><u>Leones</u></h2></a>
      <p>León, rey de la selva. Dicho de este animal, no tanto por su fiereza, sino por esa corona de pelaje que envuelve su cuello.</p><p>El león, es uno de los animales más territoriales.</p>
      <a href="http://es.wikipedia.org/wiki/Panthera_tigris" target="_blank">Pulsa aquí para saber más sobre los leones</a>
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br><br/><br/><br/><br/><br/>
       <a id="TIGRES"><h2><u>Tigres</u></h2></a>
      <p>El tigre, es el felino más grande del mundo</p><p>Existen varias subespecies, como el tigre de bengala, el tigre albino, etc.</p> <p>Su principal característica es su color rayado, cuyas rayas recubren todo el cuerpo, sin llegar nunca el número de rayas a cien.</p>
      <a href="http://es.wikipedia.org/wiki/Panthera_tigris" target="_blank"><img src="http://commons.wikimedia.org/wiki/File:Tigress_at_Jim_Corbett_National_Park.jpg" title="Pulsa aquí para saber más sobre los tigres"></a>
      <p>Desde aquí podrás <a href="#LINK INICIO">ir al inicio</a>, <a href="#LINK LEONES">ir a Leones</a>, o <a href="#LINK TIGRES">ir a Tigres</a></p>
   </body>
</head>

Gracias de antemano.

Ogramar · « **Respuesta #16 en:** 03 de Marzo 2015, 13:27 »

Hola, lo que te falta es que la ruta que pones como imagen

http://commons.wikimedia.org/wiki/File:Tigress_at_Jim_Corbett_National_Park.jpg

No es una ruta válida, la ruta sería esta:

http://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Tigress_at_Jim_Corbett_National_Park.jpg/400px-Tigress_at_Jim_Corbett_National_Park.jpg

También que los href no los has escrito bien, esto <a href="#LINK INICIO">

debe ser esto <a href="#INICIO"> y lo mismo para los otros

Código: [Seleccionar]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <meta charset=utf-8>
      <title>ANIMALES DE AFRICA</title>
   </head>
   <body>
      <a id="INICIO"><h1>Animales de Africa</h1></a>
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      <a id="LEONES"><h2><u>Leones</u></h2></a>
      <p>León, rey de la selva. Dicho de este animal, no tanto por su fiereza, sino por esa corona de pelaje que envuelve su cuello.</p><p>El león, es uno de los animales más territoriales.</p>
      <a href="http://es.wikipedia.org/wiki/Panthera_tigris" target="_blank">Pulsa aquí para saber más sobre los leones</a>
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
       <a id="TIGRES"><h2><u>Tigres</u></h2></a>
      <p>El tigre, es el felino más grande del mundo</p><p>Existen varias subespecies, como el tigre de bengala, el tigre albino, etc.</p> <p>Su principal característica es su color rayado, cuyas rayas recubren todo el cuerpo, sin llegar nunca el número de rayas a cien.</p>
      <a href="http://es.wikipedia.org/wiki/Panthera_tigris" target="_blank"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Tigress_at_Jim_Corbett_National_Park.jpg/400px-Tigress_at_Jim_Corbett_National_Park.jpg" title="Pulsa aquí para saber más sobre los tigres"></a>
      <p>Desde aquí podrás <a href="#INICIO">ir al inicio</a>, <a href="#LEONES">ir a Leones</a>, o <a href="#TIGRES">ir a Tigres</a></p>
   </body>
</head>

SITOAPRENDIZ · « **Respuesta #17 en:** 06 de Marzo 2015, 15:55 »

Muchas gracias Ogramar, pero sigo sin entender una cuestion.
A tu respuesta de que la ruta del enlace no es válida:No entiendo como no puede ser válida si lo único que he hecho ha sido copiar la ruta del enlace de la imagen. Y la ruta que me sale es justamente esa.
Referente a la otra explicación que me has dado sobre que está mal el href="#LINK INICIO",¿debo entender que no es correcto el uso de espacios al poner un nombre, en esta parte del código? o es por otra cuestión por lo que está mal.
Saludos

Ogramar · « **Respuesta #18 en:** 06 de Marzo 2015, 17:12 »

Hola, una ruta no se puede tener la seguridad de que sea válida. Una ruta que es válida ahora puede no ser válida dentro de un minuto debido a un fallo en el servidor. En el href preferible poner nombres sin espacios. Salu2

SITOAPRENDIZ · « **Respuesta #19 en:** 09 de Marzo 2015, 12:11 »

Muchas gracias por tu respuesta. Comprobé la ruta de la imagen haciendo clic derecho y inspeccionar elemento y por ahí me salía la ruta que tu me pusiste, completa.
Y el tema del "href" no entendía por que estaba mal.
Gracias de nuevo por permitirme seguir avanzando.
Saludos.

Noticias:

Autor Tema: CU00717B ejercicio curso HTML desde cero crear links de texto o imagen en web (Leído 11918 veces)

Preguntas y respuestas