actividad 2 - Aplicación de Etiquetas Básicas de HTML.

De Fundamentos en HTML

En nuestra segunda sesión sincrónica de Fundamentos e HTML conocimos la aplicación y uso de las etiquetas adicionales, entre ellas, el manejo de fuentes de texto, inserción de vídeos y sonido a nuestra página web, con ellas pudimos diseñar una página web básica de un Hotel, sin olvidar reglas de diseño básicas, el resultado fue la página que muestra la imagen de la parte inferior.

descarga el archivo completo sin ninguna complicación abajo del articulo :), en caso que coincida con tu compromiso 👇

Lo que realizaremos en esta actividad es diseñar una pagina web implementado el uso de las etiquetas socializadas, para ello, comenzaremos con el siguiente ejercicio de Maquetacion. Maquetación por tablas pasó a paso Las tablas en realidad están pensadas para presentar información tabulada, es decir, usando filas y columnas. Sin embargo, este uso lo podemos extender a toda la página web y crear una macro tabla que englobe todos los contenidos que se van a mostrar en la página entera. Como las tablas tienen filas y columnas, nos servirán para crear varias áreas donde se mostrarán los contenidos maquetados como si fuera una revista o un portal.

Pasos para el diseño de la pagina Web como el de la imagen.

Una vez terminado el diseño de la página web, añade a esta los siguientes elementos.

1. Configure una imagen de fondo a la página principal (background), configure además un color de fondo, en caso de que la imagen pueda fallar (bgcolor)
2. Un vídeo corto en la parte columna central de la Tabla principal de la página.
3. 2 archivos de audio, 1 debe funcionar como sonido de fondo.
4. Enlaces a páginas web de Internet.
5. Uso de la etiqueta para manejo del tamaño, color y tipo de fuente a utilizar dentro de la página.
6. Uso de la etiqueta para crear alineaciones del texto o imágenes en la página.
7. Trazar líneas con para separar párrafos o imágenes
8. No olvides investigar cómo hacer que el <audio> de tu página web se pueda reproducir en navegadores como Google Chrome o Mozilla Firefox

la verdad es la guía que nos dan arriba no sirve de nada en cambio , mira el ejercicio resulto

el codigo del ejercicio



  <!DOCTYPE html>
<html>  <head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>segunda paguina SENA</title>
    <meta name='viewport' content='width=device-width,initial-scale=1'>
</head>
<body background="imgs/fondo.jpg" style="background-repeat: no-repeat;
    background-position:center center; background-size: cover;"
    bgcolor="#29ad1d">

    <center>

            <table width="780" cellspacing="1"
    cellpadding="3" style="background-color: #000000; align-items:center;
    border-radius: 3px;">

            <tr>

                    <td width="155"
    align="center" style="background:#ffffff"><img width="100%"
    src="imgs/logo_arbol.jpg" alt="logo"></td>
  
  
                    <td
    background="imgs/banner_derecha_top.jpg" style="background-position: center
    center;background-size:cover" >
  
                  
      <font face="arial"><h1>Pagina de
    Arboles</h1></font>
  
                  </td>
              </tr>
              <tr>
  
                    <td colspan="2"
    style="background: #ffffff;">
  
  
                       
    <center>
  
  
                         
      <font color="green" face="arial">
  
  
                         
          Tipos de arboles | cuidados | Agenda | macetas |
    Comunidad
  
  
                         
      </font>
  
  
                       
    </center>
  
                  </td>
              </tr>
      </table>
  
        <marquee  scrollamount="10" behavior="alternate"
    direction="right">
  
  
            <img src="imgs/arbolitos.jpg"
    width="20px"> 
  
           los Arboles 
  
            <img src="imgs/arbolitos.jpg"
    width="20px">
  
      </marquee>
          <table>
              <tr>
  
                    <td width="150"
    valign="top">
  
  
                       
    <div style="border: 1px solid rgb(0, 0, 0); background:
    white;border-radius: 5px">
  
  
                         
      <center>
  
  
                         
          <div style="background:  rgb(81, 223, 88);
    border-radius: 5px; border-bottom: 1px solid black;">
  
  
                         
              Bibliografia e informacion
  
  
                         
          </div>
  
  
                         
      </center>
  
  
                         
      <div >
  
  
                         
          <center>
  
  
                         
              <ul style="padding:0;
    list-style:none">
  
  
                         
                  <li>
  
  
                         
                      <a style="
    color: green;" href="https://es.wikipedia.org/wiki/%C3%81rbol">quienes
    somos?
  
  
                         
                      </a>
  
  
                         
                  </li>
  
  
                         
                  <li>
  
  
                         
                      <a 
    style=" color: green;"
    href="https://es.wikipedia.org/wiki/%C3%81rbol#Diversidad">quien nos
    patrocina?</a>
  
  
                         
                  </li>
  
  
                         
                  <li>
  
  
                         
                      <a 
    style=" color: green;"
    href="https://es.wikipedia.org/wiki/%C3%81rbol#Estado_de_conservaci%C3%B3n">porque
    hacemos esto?
  
  
                         
                      </a>
  
  
                         
                  </li>
  
  
                         
              </ul>
  
  
                         
          </center>
  
  
                         
          
  
  
                         
      </div>
  
  
                       
    </div>
  
                  </td>
  
                    <td
    width="10"></td>
  
  
                    <td 
    width="484" valign="top">
  
  
                         
      <div style=" background-position:center; background-size:
    cover;">
  
  
                         
          <font face="arial">
  
  
                         
              <h2 style=" color: rgb(12, 12, 12);
    text-align: center">
  
  
                         
                  Conoce todo acerca de los
    arboles y su cuidado
  
  
                         
              </h2>
  
  
                         
          </font>
  
  
                         
      </div>
  
  
                         
      <hr>
  
  
                         
      <div>
  
  
                         
         <center>
  
  
                         
             <p>video</p>
  
  
                         
              <video width="400px"
    src="Multimedia/arboles.mp4" controls></video>
  
  
                         
         </center>
  
  
                         
      </div>
  
  
                         
      <hr>
  
  
                         
      <div>
  
  
                         
          <h4>tema 1</h4>
  
  
                         
          <p>Lorem ipsum dolor sit amet consectetur
    adipisicing elit. 
  
  
                         
              Officiis et doloremque ullam hic, iure,
    perspiciatis ea magni voluptatum nihil .</p>
  
  
                         
              <audio
    src="Multimedia/Vacaciones_Mike_Leite.mp3"  controls
    loop></audio>
  
  
                         
      </div>
  
  
                         
      <hr>
  
  
                         
      <div>
  
  
                         
          <h4>tema 2</h4>
  
  
                         
          <p>Lorem ipsum, dolor sit amet consectetur
    adipisicing elit. Tenetur incidunt
  
  
                         
               blanditiis soluta aperiam natus
    officia odio,</p>
  
  
                         
          <!-- <embed
    src="Multimedia/Vacaciones_Mike_Leite.mp3"   loop="2"
    controls="controls"> -->
  
  
                         
      </div>
  
                  </td>
                  
  
                    <td width="124"
    align="center" valign="top">
  
  
                       
    <img src="imgs/bannerlateral.jpg" alt="">
  
                  </td>
              </tr>
          </table>
      </center>
  
        <embed src="Multimedia/Musik_Instrum_Fondo.mp3"
    autostart="true" loop="2" hidden="true" type="">
  
  </body>
  </html>