viernes, 17 de abril de 2020

SESIÓN 7 Y 8


Fecha: 20/04/2020

Tema: Uso de div y span

Aprendizajes esperados: Construye una página web utilizando elementos de software de diseño web.


Hola chicos, Buenos días.

Hoy revisaremos dos nuevas etiquetas que podemos usar al crear páginas web, div y span.


Una etiqueta <div> define un bloque donde incluiremos información dentro de nuestro documento. A este bloque definido con la etiqueta <div> le asignaremos, las propiedades de posición, tamaño, color, etc etc.
La forma de definir un bloque con la etiqueta <div> dentro de nuestro documento HTML, es tan simple como:

<div>
 </div> (ambas obligatorias).

Etiqueta Span
El elemento span es un contenedor genérico sin un significado semántico en particular. Es comúnmente usado en la creación de páginas con propósitos estilísticos, en conjunto con los atributos style y class.

La forma de definir un bloque con la etiqueta <div> dentro de nuestro documento HTML, es tan simple como:

<span>          </span> (ambas obligatorias).

Actividad:

  1. Ejecuta el siguiente código en un block de notas, recuerda que debes guardar con la extensión .html y en tipo colocar todos los archivos.
  2. Realiza el resumen del tema, imprime o dibuja la página web que resulto de ejecutar el código
  3. Observa el siguiente vídeo para completar el tema, escribe en tu cuaderno que entendiste del vídeo presentado.
  4. Envía evidencia tu profesor respetando la nomenclatura solicitada.

colegiopatria.esbeidi@gmail.com








 <!DOCTYPE  html>
<html>
                <head>
               ...
                </head>
                <body>
               
<div style="color: blue;">
 <h2> Ejemplo de div y span </h2>
  <p>
    Esto es un párrafo dentro de un div,
    <span style="color: red;"> y esto un span dentro de un párrafo.</span>
  </p>
</div>
                ...
                </body>
</html>

TAREA: 


  1. Utiliza el siguiente código en una pagina web
  2. Ejecuta tu pagina web
  3. Envía evidencia tu profesor respetando la nomenclatura solicitada.

colegiopatria.esbeidi@gmail.com


11 comentarios: