Autor Tema: Centrar texto etiqueta center obsoleta Etiquetas HTML básicas: imágenes CU00714B  (Leído 832 veces)

LuisM

  • Intermedio
  • ***
  • APR2.COM
  • Mensajes: 131
    • Ver Perfil
Hola a todos !! paso a dejar el ejercicio propuesto CU00714B del tutorial gratuito de programación HTML de aprenderaprogramar. Desde ya muchas gracias por la atención.
Saludos, Luis

EJERCICIO

Abre cuatro páginas web distintas y captura la ruta de 4 imágenes que puedas encontrar en ellas (las imágenes que prefieras). A continuación crea un documento html donde incorpores un texto que indique el contenido de la imagen y a continuación se vea la imagen. Guarda el documento con un nombre como ejemploCU00714B.html y comprueba que se visualiza correctamente. Ejemplo:

Imagen que refleja una boda:
 (… aquí la imagen)
Imagen que muestra un mercado:
(… aquí la imagen)
Imagen que muestra un atleta:
(… aquí la imagen)
Imagen que refleja un atardecer:
(… aquí la imagen)

Código: [Seleccionar]
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>Ejemplo del uso de imágenes - aprenderaprogramar.com</title>
</head>
<body>
Imagen que refleja una boda:
<img src="http://www.agradecimientos.org/wp-content/uploads/2015/01/palabras-de-agradecimiento-de-boda.jpg" alt="imagen boda">

Imagen que muestra un mercado:
<img src="http://guias-viajar.com/wp-content/uploads/2014/05/fotos-valencia-mercado-central-007-450x309.jpg" alt="imagen mercado">

Imagen que muestra un atleta :
<img src="https://sc2.diarioelpais.com/files/article_default_content/uploads/2017/09/10/59b56c1f48598.jpeg" alt="imagen atleta">

Imagen que refleja un atardecer :
<img src="https://miviaje.com/wp-content/uploads/2015/11/shutterstock_255555796.jpg" alt="imagen atardecer">
</body>
</html>
« última modificación: 07 de Junio 2018, 19:01 de Ogramar »

paramonso

  • Intermedio
  • ***
  • Mensajes: 249
  • El ignorante afirma, el sabio duda y reflexiona.
    • Ver Perfil
Re:Etiquetas HTML básicas: imágenes. (CU00714B)
« Respuesta #1 : 29 de Noviembre 2017, 10:32 »
Hola LuisM.

El código hace lo que pide el ejercicio pero yo me hubiera esmerado un poco mas
y habría centrado el texto encima de la imagen y la imagen la habría centrado también.
Te dejo el código modificado para que veas el resultado.
Por lo demás todo bien.
Código: [Seleccionar]
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>Ejemplo del uso de imágenes - aprenderaprogramar.com</title>
</head>
<body>

<strong><!-- Texto en negrita -->
<center> <!-- Centrado de la imagen -->

<!--      Centrado del texto en cada etiqueta p o en body si lo hacemos
            en body hay que poner el salto de linea <br/> si no se usa la etiqueta <p>.
            Es aconsejable utilizar las etiquetas siempre para que no haya errores.
           -->
<p align="center">Imagen que refleja una boda:</p>
<img src="http://www.agradecimientos.org/wp-content/uploads/2015/01/palabras-de-agradecimiento-de-boda.jpg" alt="imagen boda">

<p align="center">Imagen que muestra un mercado:</p>
<img src="http://guias-viajar.com/wp-content/uploads/2014/05/fotos-valencia-mercado-central-007-450x309.jpg" alt="imagen mercado">

<p align="center">Imagen que muestra un atleta :</p>
<img src="https://sc2.diarioelpais.com/files/article_default_content/uploads/2017/09/10/59b56c1f48598.jpeg" alt="imagen atleta">

<p align="center">Imagen que refleja un atardecer :</p>
<img src="https://miviaje.com/wp-content/uploads/2015/11/shutterstock_255555796.jpg" alt="imagen atardecer">
</center><!-- Fin Centrado de la imagen -->
</strong><!-- Fin Texto en negrita -->
</body>
</html>



Un saludo.
 ;)

LuisM

  • Intermedio
  • ***
  • APR2.COM
  • Mensajes: 131
    • Ver Perfil
Re:Etiquetas HTML básicas: imágenes. (CU00714B)
« Respuesta #2 : 29 de Noviembre 2017, 12:15 »
Oiga !!! póngase en mis zapatos antes de ajusticiarme jaja
Estaba en los primeros pasos de html, si mal no recuerdo se comienza a ver etiquetas en la clase 711 y este ejercicio es de la 714.
1) Etiqueta <center> usada para centrar las imágenes. Creo que no se nombró en todo el curso HTML.
2) Propiedad align (<p align="center" /p>).  Texto sacado de la la misma clase CU00714B:"Atributo obsoleto (deprecated). Sustituir por CSS." y la etiqueta <p> se ve recién en la clase siguiente:CU00715B !!!
Por lo tanto me declaro totalmente inocente de culpa y cargo  ;D

Muchas gracias por las correcciones.
Un saludo,
Luis
   

paramonso

  • Intermedio
  • ***
  • Mensajes: 249
  • El ignorante afirma, el sabio duda y reflexiona.
    • Ver Perfil
Re:Etiquetas HTML básicas: imágenes. (CU00714B)
« Respuesta #3 : 29 de Noviembre 2017, 13:35 »
Ok LuisM.

El ejercicio estaba bien lo unico que faltaban eran esos dos detalles sin importancia.

Como bien dices no se nombra la etiqueta <center> en todo el curso la he puesto por no complicarme la vida para centrar los gráficos.

Y tienes razón con el align, está obsoleto pero al ser html a palo seco no quise poner nada de css.

Gracias LuisM por tus observaciones
Un saludo
 ;D


Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2448
    • Ver Perfil
Buenas, por si alguien lee este hilo, comentar que la etiqueta center está deprecated (obsoleta o desaconsejada). En su lugar se recomienda el uso de técnicas CSS para el centrado de elementos. Las técnicas CSS están explicadas en el curso CSS disponible en https://aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203

Salu2

 

Esto es un laboratorio de ideas...
Aprender a programar

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".