viernes, 31 de agosto de 2018

HTML: Práctica 10

 INSERTAR IMÁGENES CON SUS CARACTERÍSTICAS

Para crear ésta página Web vas a necesitar imágenes


<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tipos de Células</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: lightsteelblue;
            margin: 0;
            padding: 0;
        }
        header {
            text-align: center;
            background-color: cornflowerblue;
            color: white;
            padding: 20px 0;
        }
        h2 {
            font-size: 24px;
            color: darkturquoise;
        }
        .section {
            margin: 20px;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        .section img {
            display: block;
            margin: 0 auto;
            max-width: 100%;
            height: auto;
        }
        .table-container {
            margin: 20px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px auto;
        }
        th, td {
            border: 2px solid black;
            padding: 10px;
            text-align: center;
        }
        th {
            background-color: cornflowerblue;
            color: white;
        }
        td img {
            max-width: 100px;
            height: auto;
        }
        footer {
            background-color: cornflowerblue;
            color: white;
            text-align: center;
            padding: 10px 0;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <header>
        <h1>Tipos de Células</h1>
    </header>

    <div class="section">
        <h2>Célula Animal</h2>
        <img src="celulaanimal.jpg" alt="Célula Animal">
        <p style="text-align: center;"><i>Célula Animal a través de microscopio</i></p>
    </div>

    <div class="section">
        <h2>Célula Eucariota</h2>
        <img src="eucariota.jpg" alt="Célula Eucariota">
        <p style="text-align: center;"><i>Célula Eucariota a través de microscopio</i></p>
    </div>

    <div class="section">
        <h2>Célula Procariota</h2>
        <img src="procariota.jpg" alt="Célula Procariota">
        <p style="text-align: center;"><i>Célula Procariota a través de microscopio</i></p>
    </div>

    <div class="table-container">
        <table>
            <caption><strong>En la tabla se describen algunos detalles de las células.</strong></caption>
            <tr>
                <th>Tipo de Célula</th>
                <th>Características</th>
                <th>Imagen</th>
            </tr>
            <tr>
                <td><a href="Eucariota.html">Eucariota</a></td>
                <td>
                    La membrana plasmática: estructura que envuelve y limita el contenido de la célula.
                    <br>El núcleo: organelo que encierra el material genético.
                    <br>El citoplasma: medio donde flotan organelos como las mitocondrias.
                </td>
                <td><img src="eucc.jpg" alt="Célula Eucariota"></td>
            </tr>
            <tr>
                <td><a href="Procariota.html">Procariota</a></td>
                <td>
                    Caracterizada por material genético disperso en el citoplasma.
                    <br>Distingue a los dominios Bacteria y Archaea.
                </td>
                <td><img src="celula-procariota.jpg" alt="Célula Procariota"></td>
            </tr>
            <tr>
                <td><a href="Vegetal.html">Célula Vegetal</a></td>
                <td>
                    Pared celular: recubre y da soporte a la célula.
                    <br>Cloroplastos: realizan fotosíntesis.
                    <br>Vacuola central: almacena agua.
                </td>
                <td><img src="vegetal.jpg" alt="Célula Vegetal"></td>
            </tr>
            <tr>
                <td><a href="Animal.html">Célula Animal</a></td>
                <td>
                    Membrana celular compuesta por colesterol.
                    <br>No posee pared celular.
                    <br>Posee centrosomas.
                </td>
                <td><img src="animal.jpg" alt="Célula Animal"></td>
            </tr>
        </table>
    </div>

    <footer>
        &copy; 2024 Tipos de Células. Todos los derechos reservados.
    </footer>
</body>
</html>

No hay comentarios.:

Publicar un comentario