Tarea #06: Elementos HTML para Imágenes

Objetivos

Conocer las etiquetas HTML más habituales utilizadas para mostrar IMÁGENES
Utilizar las primeras reglas CSS: márgenes, rellenos y centrado vertical
Utilizar reglas .css específicas para posicionar imágenes en la página, hacer que adapten su tamaño a distintos dispositivos, etc...

Ejecicio

Crea dos archivos: uno index.html y otro estilos.css, con tu editor de código
Crea algunas reglas .css para dar formato a tu página
Crea una carpeta con estructura básica web y dentro de ella incluye los archivos que utilices
Utiliza todas las etiquetas que aparecen en el ejemplo


<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="(cc) tuNombre" />
    <title>Título</title>
    <link rel="stylesheet" href="/css/estilos.css">
</head>
<body>
    <div id="container">
        ... ... ...
    </div>
</body>
</html>

Código CSS


/* -------------------------------------
    (carga previa: normalize.css)
    HOJA DE ESTILOS BASE 
----------------------------------------*/

*    { box-sizing: border-box; }
html { font: 16px sans-serif;  }
body {
    min-height       : 100vh;
    max-width        : 100vw;
    display          : flex;
    background-color : #f0f0e0;
}
#container {
    width            : 96vw;
    max-width        : 600px;
    margin           : 2vh auto;
    padding          : 0.5em;
}
... ... ...

Videotutorial

Coloca dentro de las etiquetas de cabecera head la siguiente etiqueta:

Comprime, con 7zip, toda la carpeta y guárdala en tu tarjeta de memoria y en una nube (Drive o onDrive) con el nombre t06_imagenes.7z. Más tarde la enviarás al Aula Virtual.

Etiquetas: 1ª Evaluación, HTML

Tarea #06: Elementos HTML para Imágenes

Objetivos

Ejecicio

Ejemplo de como podría quedar tu tarea

Código HTML

Código CSS

Videotutorial