Desarrollo Web Lección 6 - Medios

En este ejercicio vas a:

1. añadir imágenes a una página de texto
2. envolver el texto alrededor de las imágenes

• Cree un archivo en su directorio llamado 'media.php'.
• Agregue el código PHP relevante para configurar la página.

<?php
    include("cabecera.php");
    include("menu.php");
?>

<?php
    include("pie.php");
?>

• Haga clic en 'PHP' en la esquina inferior derecha y cámbielo a ' HTML '. Esto proporcionará el soporte automático para crear código HTML , en el que nos centraremos inicialmente.
• Agregue etiquetas <main>entre los dos bloques de código PHP.
• También continuaremos usando los siguientes archivos.
• encabezado.php
• menu.php
• pie.php
• style.css

• Ve a Google y busca cualquier imagen que te guste. Selecciónelo, luego haga clic derecho en la imagen ampliada a la derecha de la pantalla y seleccione 'Copiar enlace de imagen'.
• En su archivo 'media.php', agregue código para una imagen entre las <main>etiquetas escribiendo 'img' y seleccionando la opción superior.

<img src="" alt="">

• src es la fuente de la imagen y debe ser una URL completa (para imágenes alojadas en otros sitios) o un nombre de archivo relativo (para imágenes alojadas en su servidor). Pega el enlace de tu imagen aquí.

        <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">

• alt es un texto alternativo que se utilizará cuando no se pueda mostrar una imagen. Quizás el sitio no está disponible o el usuario está usando un lector de pantalla. Debe describir brevemente la imagen.

        <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="árbol al atardecer">

• Para ver el texto alternativo, elimine la 'h' al principio del enlace y actualice su página. Guarde y cargue el archivo usando FileZilla.
• Restaure la 'h' y guarde su archivo nuevamente. Compruebe que el archivo aparece correctamente.
• Hay otro atributo que puede ser útil para las imágenes. A veces queremos incluir más detalles que no interfieran con el flujo del texto. Para esto usamos title.

        <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="árbol al atardecer" title="esta fue la primera imagen incluida en Google cuando revisé">

• Guarde y cargue el archivo nuevamente e intente pasar el mouse sobre la imagen para ver el título.

• Su imagen puede ser demasiado grande para la página, así que limitemos el tamaño. Agregue el siguiente código a 'style.css'.

img {
  max-height: 250px;
}

• max-height es como height pero permitirá que los elementos con alturas más pequeñas permanezcan sin cambios.
• Guarde su archivo, cárguelo y observe el cambio (si su imagen era más alta que 250 px). Las imágenes escalan tanto el alto como el ancho cuando cambias solo una dimensión. Usar max-height y max-width juntos también permitirá escalar sin distorsionar la imagen.

• Antes de continuar, mejoremos el aspecto general de la página. Necesitamos algo de espacio entre cada uno de los elementos.
• Comencemos con un relleno de 20 px en el <main> elemento y eliminando el color de fondo.

main {
  border: darkgreen solid 2px;
  position: absolute;
  top: 100px;
  left: 16%;
  right: 0px;
  bottom: 80px;
  overflow: scroll;
  padding: 20px;
}

• Guarde, cargue y verifique eso si lo desea.
• Luego agreguemos un borde a la imagen para que podamos ver lo que estamos haciendo.

img {
  max-height: 250px;
  border: solid 2px green;
}

• Me gustaría más espacio entre la imagen y el borde. Juega con el relleno para ver qué te queda bien.

img {
  max-height: 250px;
  border: solid 2px green;
  padding: 10px;
}

• Hay una última cosa que podemos hacer para cambiar la apariencia de las imágenes. Podemos redondear las esquinas.

img {
  max-height: 250px;
  border: solid 2px green;
  padding: 10px;
  border-radius: 30px;
}

• Pruebe algunos valores de border-radius. Cualquier cosa menor que su valor de relleno solo redondeará el borde. Algo más que su valor de relleno también redondeará las esquinas de la imagen. ¿Qué look te gusta más?

• Ahora agreguemos algo de texto a la página. Pegue el siguiente código debajo de la imagen.

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec enim sem, efficitur et fringilla et, pretium at turpis. Nunc interdum, dolor vitae aliquam accumsan, lacus sapien varius tortor, fringilla lobortis turpis tortor et ante. In hac habitasse platea dictumst. Nullam elementum blandit tincidunt. Sed semper finibus massa, non mollis nulla mollis et. Nunc lectus metus, tempor nec dui ut, pharetra eleifend massa. Ut tempus porta metus, eget aliquet ligula tempor hendrerit. Curabitur vestibulum elit en commodo viverra. Nullam est orci, suscipit vitae tincidunt porta, lacinia sed nulla. Quisque ex eros, consectetur id metus sit amet, molestie tempor risus. In facilisis consequat eros in convallis. Nulla nec imperdiet nibh. Suspendisse consequat sit amet mi in imperdiet. Nullam eget aliquet metus. Vestíbulo no fermentum eros.
        <p>Morbi gravida malesuada odio, sed pretium libero aliquam vitae. Suspensión de potencia. Nunc eget leo vulputate, dictum eros non, gravida lorem. In id nunc id orci ornare porttitor. Mecenas id laoreet risus. Aenean lacinia dignissim volutpat. Morbi et ligula ac purus gravida aliquet. Entero feugiat sapien ac porttitor iaculis.</p>
        <p>Phasellus pretium sit amet tellus ac tincidunt. Curabitur en ligula massa. Vivamus in urna suscipit, vehicula velit et, mollis purus. Aliquam sed risus vel urna tristique aliquam. Etiam egestas lectus arcu, quis lobortis diam luctus in. Vivamus id diam metus. Nulla bibendum dolor sit amet egestas semper. Praesent facilisis pellentesque condimentum.</p>
        <p>Mauris ac sapien justo. Curabitur a feugiat velit. Donec non mi ac turpis faucibus hendrerit. Nulla luctus est lectus, nec rhoncus nisi eleifend ac. Nullam iaculis mi eget faucibus mattis. Nullam nec cursus nisi. Donec vel nunc ac felis sodales tincidunt sed condimentum mauris.</p>
        <p>Praesent lobortis dictum purus, convallis dapibus velit malesuada non. Sed sit amet magna sagittis, maximus odio in, mattis erat. Phasellus ultricies risus turpis, vitae tempor diam finibus eu. Sed luctus augue purus, eget consectetur sapien egestas et. Sed eget tristique mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum rhoncus vehicula pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aenean placerat arcu vitae nisi vehicula semper. Cras sit amet risus dolor.</p>

• Guarde y cargue el archivo. Verás que todo el texto se encuentra debajo de la imagen.
• Podemos hacer que el texto fluya alrededor de la imagen haciendo que la imagen 'flote'.

  float: left;

• Guarde y cargue el archivo y eche otro vistazo a la página. Ahora el texto llena el espacio a la derecha de la imagen y continúa por todo el espacio debajo de ella.
• Si hubiéramos configurado float: right, la imagen se ubicaría a la derecha y el texto llenaría el espacio a la izquierda. Pruébelo usted mismo.
• Agreguemos algo de espacio alrededor de la imagen para que el texto no colinda con ella. En lugar de configurarlo todo con el mismo valor (pruébelo para ver que la imagen ya no está alineada con el texto), dejemos el margen izquierdo en 0px;

  margin: 20px 20px 20px 0px;

• Cuando dividimos los valores de esta manera, se aplican en el sentido de las agujas del reloj desde la parte superior, por lo que el valor de la izquierda es el último. Si ha dejado su imagen flotando hacia la derecha, probablemente querrá un código diferente.

  margin: 20px 0px 20px 20px;

• media.php
• style.css
• resultado

Siguiente: Reproductores de Video